:root{
  --bg:#f6f8fb;
  --bg2:#ffffff;
  --bg3:#eef5f4;
  --text:#183838;
  --text2:#587070;
  --text3:#8ba1a1;
  --border:#dce7e5;
  --border2:#c9d9d6;
  --green:#177b69;
  --green-bg:#e8f7f3;
  --green-text:#0f5e51;
  --amber:#c67613;
  --amber-bg:#fff4df;
  --amber-text:#8a4b05;
  --red:#d24545;
  --red-bg:#fff0f0;
  --red-text:#9f2424;
  --blue:#197da5;
  --blue-bg:#e8f5fb;
  --blue-text:#135d7b;
  --purple:#7b5cb8;
  --purple-bg:#f2edff;
  --purple-text:#5b4190;
  --radius:8px;
  --radius-lg:8px;
  --shadow:0 10px 28px rgba(24,56,56,.08);
  --shadow-soft:0 4px 16px rgba(24,56,56,.06);
}
*{scrollbar-color:var(--border2) transparent}
body{
  background:linear-gradient(180deg,#fbfcfd 0%,var(--bg) 38%,#eef6f4 100%);
  color:var(--text);
  font-size:14px;
}
.app{min-height:100vh;background:transparent}
.sidebar{
  width:232px;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.2) blur(10px);
  border-right:1px solid var(--border);
  box-shadow:8px 0 24px rgba(24,56,56,.05);
  padding:14px 12px;
}
.sidebar-logo{
  margin:0 0 14px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(135deg,#f4fbf9 0%,#ffffff 100%);
}
.sidebar-logo img{
  width:30px;
  height:30px;
  border-radius:7px;
  box-shadow:0 4px 12px rgba(23,123,105,.18);
}
.brand-title{font-size:15px;font-weight:800;letter-spacing:.01em;color:var(--text)}
.brand-sub{color:var(--text2)}
.sidebar>h2{
  margin:0 0 4px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(135deg,#f4fbf9 0%,#ffffff 100%);
  box-shadow:var(--shadow-soft);
  font-size:15px;
  font-weight:850;
  color:#102f2f;
}
.sidebar>h2 img{
  width:32px!important;
  height:32px!important;
  border-radius:8px!important;
  box-shadow:0 4px 12px rgba(23,123,105,.18);
}
.sidebar>p{
  margin:0 0 14px;
  padding:0 12px;
  color:var(--text2);
  font-size:12px;
}
.nav-section{
  margin:10px -12px 12px;
  padding:10px 12px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:#fbfcfd;
}
.nav-item{
  margin:3px 0;
  padding:10px 10px;
  border-left:0;
  border-radius:var(--radius);
  color:#365151;
  transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.nav-item:hover{
  background:var(--green-bg);
  color:var(--green-text);
  transform:translateX(2px);
}
.nav-item.active{
  background:var(--green);
  color:#fff;
  box-shadow:0 8px 18px rgba(23,123,105,.22);
}
.nav-item.active .ti,.nav-item.active .badge{color:#fff}
.nav-badge,.badge{
  border:1px solid transparent;
  font-weight:800;
}
#sidebar-user{padding:0 2px}
#sync-status{
  background:var(--bg3)!important;
  border:1px solid var(--border)!important;
  color:var(--green-text)!important;
  padding:7px 10px!important;
}
.main{background:transparent}
.page{padding:28px}
.page-inner{max-width:1280px;margin:0 auto}
.page-header{
  margin:0 0 22px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.page-header h1{
  font-size:26px;
  line-height:1.15;
  letter-spacing:0;
  margin:0 0 6px;
  color:#102f2f;
}
.page-header p{font-size:14px;color:var(--text2)}
.card{
  background:rgba(255,255,255,.96);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.card.pad,.card{padding:20px}
.card h3{
  color:#456060;
  letter-spacing:.055em;
  font-size:12px;
  font-weight:800;
}
.metrics{gap:14px;margin-bottom:16px}
.metric{
  position:relative;
  overflow:hidden;
  min-height:92px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.metric:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--green);
}
.metric:nth-child(2):before{background:var(--blue)}
.metric:nth-child(3):before{background:var(--amber)}
.metric:nth-child(4):before{background:var(--red)}
.metric-label{color:#4e6969;font-weight:650}
.metric-value{font-size:28px;font-weight:850;letter-spacing:0;color:#123838}
.fg label{
  color:#405d5d;
  font-size:12px;
  font-weight:750;
}
.fg input,.fg select,.fg textarea,.search-input,input,select,textarea{
  min-height:38px;
  border-color:var(--border2);
  border-radius:var(--radius);
  background:#fff;
  color:var(--text);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.fg input:focus,.fg select:focus,.fg textarea:focus,.search-input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(23,123,105,.15);
  outline:none;
}
.btn{
  min-height:38px;
  border-radius:var(--radius);
  font-weight:800;
  box-shadow:0 3px 10px rgba(24,56,56,.05);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(24,56,56,.1);
}
.btn.primary{
  border-color:var(--green);
  background:linear-gradient(180deg,#1f917c 0%,var(--green) 100%);
  color:#fff;
}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:#fff;border-color:var(--border2)}
.sbar,.toolbar,.filter-row{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.tbl-wrap,.table-wrap{border-radius:var(--radius);overflow:auto}
table{border-collapse:separate;border-spacing:0}
th{
  background:#fbfcfd;
  color:#476262;
  font-size:12px;
  letter-spacing:.02em;
  font-weight:800;
  border-bottom:1px solid var(--border2);
}
td{border-bottom:1px solid var(--border)}
tbody tr{transition:background .14s ease,box-shadow .14s ease}
tbody tr:hover{background:#f6fbfa}
.tag,.pill{
  border-radius:999px;
  border:1px solid var(--border);
  font-weight:800;
}
.tab{
  border-radius:999px;
  border:1px solid var(--border2);
  background:#fff;
  color:#456060;
  font-weight:800;
}
.tab.active{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
  box-shadow:0 7px 16px rgba(23,123,105,.18);
}
.notif-item{
  border-radius:var(--radius);
  background:var(--amber-bg);
  box-shadow:0 2px 8px rgba(198,118,19,.06);
}
.notif-item.red,.alert.red{background:var(--red-bg)}
.notif-item.blue,.alert.blue{background:var(--blue-bg)}
.alert{
  border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(24,56,56,.04);
}
.wil-card,.obat-group,.usg-section,.report-box,.stat-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.modal-backdrop{background:rgba(15,39,39,.42);backdrop-filter:blur(3px)}
.modal{
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 24px 70px rgba(24,56,56,.22);
}
.modal-head{border-bottom-color:var(--border)}
.modal-foot{border-top-color:var(--border);background:#fbfcfd}
#login-overlay{
  background:
    radial-gradient(circle at 18% 18%,rgba(58,185,157,.26),transparent 30%),
    linear-gradient(135deg,#f7fbfa 0%,#e6f4f1 52%,#cfe9e4 100%);
}
#login-box{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 26px 70px rgba(24,56,56,.2);
}
#login-box h2{letter-spacing:0;color:#102f2f}
.pin-key{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.pin-key:hover{background:var(--green-bg);border-color:var(--green);color:var(--green-text)}
.dp-cal,.dp-panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.dp-grid .dd,.dp-msel div,.dp-ysel div{border-radius:7px}
@media (max-width:1024px){
  .page{padding:20px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:768px){
  .app{display:block}
  .sidebar{
    position:sticky;
    top:0;
    z-index:40;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
    height:auto;
    max-height:none;
    padding:12px;
    border-right:none;
    border-bottom:1px solid var(--border);
    box-shadow:0 8px 24px rgba(24,56,56,.08);
  }
  .sidebar-logo{
    width:100%;
    margin:0 0 2px;
    padding:12px 14px;
  }
  .sidebar-logo h2{font-size:16px}
  .sidebar-logo p{
    display:block;
    margin-top:4px;
    font-size:12px;
  }
  .nav-item{
    flex:1 1 calc(50% - 8px);
    min-width:146px;
    margin:0;
    padding:11px 12px;
    justify-content:flex-start;
  }
  .nav-item span{display:inline}
  .sidebar > div[style*="margin-top:auto"]{
    width:100%;
    margin-top:4px!important;
    padding:10px 4px 0!important;
    border-top:1px solid var(--border)!important;
  }
  .main{
    overflow:visible;
    min-height:calc(100vh - 220px);
  }
  .page{padding:14px}
  .page-header{
    display:block;
    margin-bottom:16px;
  }
  .page-header h1{
    font-size:22px;
    margin-bottom:4px;
  }
  .page-header p{font-size:13px}
  .metrics,
  .grid2,
  .grid3,
  .grid4,
  #security-status-grid,
  #backup-info,
  #usg-lap-stats{
    grid-template-columns:1fr!important;
  }
  .metric{
    min-height:auto;
    padding:16px;
  }
  .card.pad,.card{padding:16px}
  .btn-row{
    flex-direction:column;
    align-items:stretch;
  }
  .btn-row .btn,
  .sbar .btn,
  .filter-row .btn{
    width:100%;
    justify-content:center;
  }
  .sbar,
  .filter-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:stretch;
  }
  .tab-row{
    overflow:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }
  .tab{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .tbl-wrap{
    margin:0 -4px;
    padding-bottom:2px;
  }
  table{font-size:12px}
  th,td{padding:8px 9px}
  .obat-row,
  [id^="obat-"][id$="-list"] > div{
    grid-template-columns:1fr!important;
  }
  #login-box{
    width:min(420px,calc(100vw - 24px));
    padding:22px 18px;
  }
  .pin-grid{gap:8px}
  .pin-key{padding:12px}
  .empty{padding:2rem 1rem}
}

@media (max-width:480px){
  .sidebar{padding:10px}
  .nav-item{
    flex:1 1 100%;
    min-width:0;
  }
  .page{padding:12px}
  .card.pad,.card{padding:14px}
  .page-header h1{font-size:20px}
  .metric-value{font-size:24px}
  .fg input,
  .fg select,
  .fg textarea,
  .btn{font-size:13px}
}