/* PUTULHOST-STYLE DASHBOARD UI — preserves existing app.js IDs/functionality */
:root{
  --ph-green:#12654e;
  --ph-green-2:#1b775f;
  --ph-green-soft:#edf8f3;
  --ph-line:#e5edf0;
  --ph-text:#122033;
  --ph-muted:#66798a;
  --ph-bg:#f5f8fa;
}
html,body{background:var(--ph-bg)!important;color:var(--ph-text)!important}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important}
.topbar{
  height:58px!important;
  background:#fff!important;
  border-bottom:1px solid var(--ph-line)!important;
  box-shadow:none!important;
  position:sticky!important;
  top:0!important;
  z-index:50!important;
}
.topbar-spacer{flex:1}
.top-actions{display:flex!important;align-items:center!important;gap:10px!important}
.top-actions select{
  height:36px!important;min-width:145px!important;
  background:#fff!important;color:#334155!important;
  border:1px solid #dbe5e9!important;border-radius:7px!important;
}
.refresh-btn{
  height:36px!important;padding:0 14px!important;border-radius:7px!important;
  background:#176d55!important;color:#fff!important;border:0!important;
  box-shadow:none!important;font-weight:700!important;
}
.logout-btn{
  width:36px!important;height:36px!important;border:1px solid #dbe5e9!important;
  background:#fff!important;color:#176d55!important;border-radius:7px!important;
}
.mobile-menu{display:none}

.app-shell{display:flex;min-height:calc(100vh - 58px)}
.sidebar{
  width:208px!important;flex:0 0 208px!important;
  padding:0!important;background:var(--ph-green)!important;
  border:0!important;color:#fff!important;
  display:flex;flex-direction:column;
  min-height:calc(100vh - 58px);
}
.side-brand{
  height:73px;padding:17px 18px 10px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.side-logo{font-size:21px;font-weight:900;letter-spacing:-.8px;color:#fff}
.side-logo span{color:#9fe23a;font-size:25px;margin-left:2px}
.side-subtitle{font-size:9px;letter-spacing:2px;color:#9ccfbe;font-weight:700;margin-top:1px}
.nav-item{
  width:100%!important;min-height:42px!important;margin:0!important;
  padding:0 18px!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:#d5eee6!important;
  box-shadow:none!important;font-size:13px!important;font-weight:650!important;
  display:flex!important;align-items:center!important;gap:11px!important;
}
.nav-item:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;transform:none!important}
.nav-item.active{
  background:rgba(255,255,255,.16)!important;color:#fff!important;
  border-left:3px solid #70d78f!important;padding-left:15px!important;
  box-shadow:none!important;
}
.nav-icon{width:16px;text-align:center;font-size:14px;color:#bde5d8}
.nav-label{
  padding:18px 18px 7px;color:#83b7a7;font-size:9px;
  letter-spacing:1.2px;font-weight:800;
}
.sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding:13px 16px}
.side-user{display:flex;align-items:center;gap:9px;color:#fff}
.side-user small{display:block;color:#9cc7ba;font-size:9px;margin-top:2px}
.avatar{width:32px;height:32px;border-radius:50%;background:#e8f0ef;color:#176d55;display:grid;place-items:center;font-weight:800}

.content{
  flex:1;min-width:0;padding:28px 32px 44px!important;
  background:#f7f9fa!important;
}
.page{max-width:1380px!important;margin:0 auto!important}
.welcome-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:1px solid #dfe7ea;padding-bottom:1px;margin-bottom:24px;
}
.welcome-head h1{margin:0!important;font-size:23px!important;line-height:1.2!important;font-weight:750!important;color:#101d2e!important}
.welcome-head h1 span{color:#21764f}
.welcome-head p{margin:5px 0 0!important;color:#718294!important;font-size:13px!important}
.head-line{width:52px;height:3px;background:#2d8b5d;margin-top:13px;border-radius:2px}
.status{
  background:#edf8f2!important;border:1px solid #cce8d8!important;color:#22724d!important;
  padding:7px 11px!important;border-radius:20px!important;font-size:10px!important
}

.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:24px}
.summary-card{
  position:relative;background:#fff;border:1px solid #e4ebee;border-radius:14px;
  min-height:128px;padding:17px 18px 14px;box-shadow:0 5px 17px rgba(35,65,80,.07);
  overflow:hidden;
}
.card-top{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;color:#40536a;font-size:12px;font-weight:650}
.card-top strong{font-size:30px;line-height:1;color:#111c2d;font-weight:800}
.summary-icon{width:29px;height:29px;display:grid;place-items:center;font-size:18px}
.blue .summary-icon{color:#2563eb}.green .summary-icon{color:#0e9f71}.purple .summary-icon{color:#7c3aed}.red .summary-icon{color:#ef3340}
.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:10px}
.card-bottom small{color:#718294}.card-bottom em{font-style:normal;color:#087c4e;font-weight:750}.card-bottom em.neutral{color:#64748b}
.accent-line{position:absolute;left:17px;right:17px;bottom:13px;height:2px;border-radius:3px}
.blue .accent-line{background:#2563eb}.green .accent-line{background:#10a873}.purple .accent-line{background:#7c3aed}.red .accent-line{background:#ef3340}

.double-row{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-bottom:25px}
.wide-card,.quick-links-card{
  background:#fff;border:1px solid #e4ebee;border-radius:14px;
  box-shadow:0 5px 17px rgba(35,65,80,.055);overflow:hidden;
}
.wide-head{
  height:55px;padding:0 18px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid #edf1f3;font-size:12px;color:#18263a
}
.wide-icon{width:27px;text-align:center;font-size:16px}.green-icon{color:#0d9b70}.blue-icon{color:#2563eb}.link-icon{color:#4c7b21}
.wide-head .pill{margin-left:auto;background:#eef9f4;color:#14935f;border-radius:12px;padding:4px 9px;font-size:9px;font-weight:800}
.chart-wrap{height:250px;padding:14px 18px 18px}
.quick-panel{padding-bottom:8px}
.overview-row{height:48px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f3f5;font-size:11px;color:#637487}
.overview-row strong{color:#18263a;font-size:13px}.overview-row .online{color:#15915f;font-size:11px}

.quick-links-card{margin-bottom:24px}
.quick-links{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:13px 14px}
.quick-links button{
  height:39px;background:#fff!important;border:1px solid #e2eaed!important;border-radius:9px!important;
  color:#26394c!important;box-shadow:none!important;text-align:left;padding:0 13px!important;font-size:11px!important
}
.quick-links button:hover{border-color:#8fc6ad!important;color:#19734e!important;background:#f7fcf9!important}
.quick-links button span{color:#19734e;margin-right:8px}

.panel{border-radius:14px!important;background:#fff!important;border:1px solid #e2eaed!important;box-shadow:0 5px 17px rgba(35,65,80,.06)!important}
.page-head h1{font-size:23px!important}
.primary-btn{background:#176d55!important;color:#fff!important;border:0!important;border-radius:8px!important}
input,select,textarea{border-radius:8px!important;border:1px solid #d7e3e7!important}
th{background:#f4f8f7!important}
td{border-color:#edf1f2!important}

@media(max-width:1000px){
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .double-row{grid-template-columns:1fr}
}
@media(max-width:720px){
  .sidebar{position:fixed;left:-220px;top:58px;bottom:0;z-index:100;transition:left .2s}
  .sidebar.open{left:0}
  .mobile-menu{display:grid;width:36px;height:36px;border:1px solid #dbe5e9;background:#fff;border-radius:7px;place-items:center}
  .brand-mobile{display:block}
  .topbar{padding:0 12px!important}
  .content{padding:20px 14px 35px!important}
  .summary-grid{grid-template-columns:1fr}
  .quick-links{grid-template-columns:1fr 1fr}
  .welcome-head{gap:10px}
  .top-actions select{min-width:105px!important}
}
@media(max-width:430px){
  .quick-links{grid-template-columns:1fr}
  .top-actions{gap:5px!important}
  .refresh-btn{padding:0 9px!important}
}


/* Developer credit */
.developer-credit{
  margin-left:auto; margin-right:18px; display:flex; align-items:center; gap:7px;
  font-size:11px; color:#5f7181; white-space:nowrap;
  letter-spacing:.1px;
}
.developer-credit strong{
  font-family:Georgia, 'Times New Roman', serif; font-size:13px; font-style:italic;
  letter-spacing:.8px; color:#12664f;
}
.developer-credit a{
  text-decoration:none; font-weight:750; color:#087c4e;
  padding-left:7px; border-left:1px solid #d8e5df;
}
.developer-credit a:hover{text-decoration:underline}

.summary-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.amber .summary-icon{color:#d97706}
.amber .accent-line{background:#f59e0b}
@media(max-width:1250px){
  .summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1000px){
  .summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .developer-credit{display:none}
  .summary-grid{grid-template-columns:1fr}
}

/* ===== V3 COLORFUL HEADER + GRADIENT HEADER TEXT ===== */
.topbar{
  height:64px!important;
  background:linear-gradient(135deg,#111827 0%,#173b5f 48%,#253b78 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 4px 18px rgba(15,23,42,.16)!important;
}
.top-actions select{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
}
.top-actions select option{background:#172033;color:#fff}
.refresh-btn{
  background:linear-gradient(90deg,#10b981,#06b6d4)!important;
  box-shadow:0 4px 12px rgba(6,182,212,.22)!important;
}
.logout-btn{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.22)!important;
}
.developer-credit{
  color:#e5e7eb!important;
}
.developer-credit span{
  background:linear-gradient(90deg,#f8fafc,#93c5fd,#c4b5fd)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  font-weight:700!important;
}
.developer-credit strong{
  background:linear-gradient(90deg,#22d3ee 0%,#60a5fa 45%,#c084fc 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  font-weight:900!important;
}
.developer-credit a{
  background:linear-gradient(90deg,#34d399,#22d3ee,#60a5fa)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  border-left-color:rgba(255,255,255,.20)!important;
}
.welcome-head h1{
  background:linear-gradient(90deg,#2563eb 0%,#7c3aed 50%,#db2777 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.welcome-head h1 span{
  background:linear-gradient(90deg,#10b981,#06b6d4,#3b82f6)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.welcome-head p{
  background:linear-gradient(90deg,#64748b,#7c3aed,#0891b2)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  font-weight:600!important;
}
@media(max-width:720px){
  .topbar{height:64px!important}
  .developer-credit{display:none!important}
}