:root{
    --primary:#2E6F73; --primary-dark:#1B4347; --primary-soft:#E4EFEE;
    --bg:#F5F8F6; --card:#FFFFFF; --border:#DEE8E5; --text:#1F2B2A; --muted:#647472;
    --warn:#B8650F; --warn-bg:#FBE9D4; --danger:#A8362E; --danger-bg:#F8D9D6;
    --good:#2F7A4D; --good-bg:#DCEFE1;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;}
  #shell{display:flex;height:100vh;overflow:hidden;}
  #sidebar{width:230px;flex-shrink:0;background:var(--primary-dark);padding:16px;display:flex;flex-direction:column;gap:4px;height:100vh;overflow-y:auto;}
  .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:14px;padding:12px 10px 20px;}
  .navbtn{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;color:rgba(255,255,255,.72);font-size:14px;font-weight:500;cursor:pointer;border:none;background:transparent;text-align:left;width:100%;}
  .navbtn.active{background:rgba(255,255,255,.16);color:#fff;}
  .navbtn:hover{color:#fff;}
  #content{flex:1;padding:28px;overflow-y:auto;height:100vh;}
  h1{font-size:21px;font-weight:700;margin:0 0 18px;}
  .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 20px;margin-bottom:16px;}
  .grid{display:grid;gap:14px;}
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .grid-5{grid-template-columns:repeat(5,1fr);}
  .grid-6{grid-template-columns:repeat(6,1fr);}
  .grid-7{grid-template-columns:repeat(7,1fr);}
  .ac-wrap{position:relative;}
  .ac-suggestions{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:10px;margin-top:4px;max-height:220px;overflow-y:auto;z-index:30;box-shadow:0 6px 18px rgba(0,0,0,.10);}
  .ac-item{padding:8px 12px;cursor:pointer;font-size:13.5px;}
  .ac-item:hover{background:var(--primary-soft);}
  .ac-item .ac-sub{font-size:11.5px;color:var(--muted);}
  .dispense-panel{border:1px solid var(--primary);border-radius:14px;padding:16px 18px;background:var(--primary-soft);}
  label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--text);}
  input,select,textarea{border:1px solid var(--border);border-radius:10px;padding:9px 11px;font-size:14px;font-family:inherit;color:var(--text);width:100%;outline:none;background:#fff;}
  input:focus,select:focus,textarea:focus{border-color:var(--primary);}
  textarea{resize:vertical;min-height:64px;}
  .hint{font-size:11.5px;color:var(--muted);font-weight:400;}
  button.btn{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
  button.btn:hover{opacity:.88;}
  button.btn-ghost{background:transparent;color:var(--primary);border:1px solid var(--border);}
  button.icon-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;}
  button.icon-btn:hover{background:var(--border);}
  .badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--primary-soft);color:var(--primary-dark);}
  .badge.warn{background:var(--warn-bg);color:var(--warn);}
  .badge.danger{background:var(--danger-bg);color:var(--danger);}
  .badge.good{background:var(--good-bg);color:var(--good);}
  .stat-label{font-size:12px;font-weight:600;color:var(--muted);}
  .stat-value{font-size:24px;font-weight:700;margin-top:4px;}
  .row-item{display:flex;align-items:center;justify-content:between;justify-content:space-between;padding:11px 4px;border-bottom:1px solid var(--border);}
  .row-item:last-child{border-bottom:none;}
  .empty{text-align:center;padding:46px 10px;color:var(--muted);}
  .empty b{display:block;color:var(--text);font-size:14px;margin-bottom:6px;}
  .avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;}
  .muted{color:var(--muted);}
  .small{font-size:12.5px;}
  .listcard{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .confirm{font-size:12px;color:var(--danger);display:flex;align-items:center;gap:6px;}
  .footer-note{font-size:11.5px;color:var(--muted);margin-top:4px;}
  details.visit summary{cursor:pointer;list-style:none;}
  details.visit summary::-webkit-details-marker{display:none;}
  .lowstock-wrap{display:flex;flex-wrap:wrap;gap:8px;}
  #quickSearchInput::placeholder{color:rgba(255,255,255,.5);}
  #quickSearchInput:focus{outline:none;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);}
  /* Paginated list */
  .pagelist-wrap{position:relative;}
  .pagelist-viewport{overflow:hidden;}
  .pagelist-track{display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.4,0,.2,1);}
  .pagelist-nav{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px;}
  .pagelist-dots{display:flex;gap:5px;align-items:center;}
  .pagelist-dot{width:7px;height:7px;border-radius:50%;background:var(--border);border:none;cursor:pointer;padding:0;transition:background .15s;}
  .pagelist-dot.active{background:var(--primary);width:18px;border-radius:99px;}
  .pagelist-arrow{background:transparent;border:1px solid var(--border);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:14px;color:var(--muted);}
  .pagelist-arrow:hover{background:var(--primary-soft);color:var(--primary);}
  .pagelist-arrow:disabled{opacity:.35;cursor:default;}
  .pagelist-info{font-size:12px;color:var(--muted);}

  /* ===== Lock Screen (Lisensi) ===== */
  #lockScreen{position:fixed;inset:0;background:linear-gradient(135deg,var(--primary-dark),var(--primary));display:flex;align-items:center;justify-content:center;z-index:9999;}
  #lockCard{background:#fff;border-radius:18px;padding:32px 30px;width:340px;box-shadow:0 20px 50px rgba(0,0,0,.25);}
  #lockCard h2{margin:0 0 4px;font-size:18px;color:var(--text);}
  #lockCard p.sub{margin:0 0 18px;font-size:12.5px;color:var(--muted);}
  #lockCard label{margin-bottom:14px;}
  #lockMsg{font-size:12.5px;min-height:16px;margin-bottom:10px;color:var(--danger);}
  #lockMsg.ok{color:var(--primary-dark);}
  #lockCard button{width:100%;}
  #lockCard .lock-footer{margin-top:14px;font-size:11.5px;color:var(--muted);text-align:center;}
  /* Notif lisensi: pil memanjang SATU BARIS di pojok kanan bawah, tidak pernah turun baris.
     Kalau teksnya kepanjangan untuk layar sempit, otomatis terpotong "..." -- tapi tombol
     Keluar selalu utuh & tetap bisa diklik. Karena tingginya jadi konsisten (1 baris terus),
     jarak konten di atasnya juga jadi lebih mudah dipastikan aman. */
  #licenseBadge{position:fixed;right:14px;bottom:10px;z-index:45;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--border);border-radius:99px;padding:8px 16px;box-shadow:0 4px 14px rgba(0,0,0,.10);font-size:11px;color:var(--muted);white-space:nowrap;}
  #licenseBadgeText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  #licenseBadge #btnLogout{flex-shrink:0;border:none;background:none;color:var(--danger, #B8650F);font-weight:700;cursor:pointer;font-size:11.5px;padding:0;}

  /* ===== Responsif: HP & Tablet (potrait maupun landscape) ===== */
  @media (max-width: 980px){
    #shell{flex-direction:column;height:100vh;}
    #sidebar{
      width:100%; height:auto; max-height:none; flex-direction:column;
      padding:10px 12px 8px; gap:8px; overflow:visible;
    }
    .brand{padding:4px 2px 6px; font-size:13px;}
    #navWrap{display:flex;flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
    #navWrap::-webkit-scrollbar{height:4px;}
    .navbtn{width:auto;white-space:nowrap;padding:9px 14px;font-size:13px;flex-shrink:0;}
    #content{padding:16px;height:auto;flex:1;overflow-y:auto;}

    /* Kolom form/grid otomatis menyesuaikan, jangan sampai kotak-kotaknya kegencet */
    .grid-4,.grid-5,.grid-6,.grid-7{grid-template-columns:repeat(2,1fr);}
  }

  @media (max-width: 640px){
    #content{padding:12px;}
    h1{font-size:18px;margin-bottom:14px;}
    .card{padding:14px 14px;border-radius:14px;}
    .stat-value{font-size:20px;}
    /* Di layar HP potrait, semua kolom form ditumpuk 1 kolom biar enak diketik & dibaca */
    .grid-2,.grid-3,.grid-4,.grid-5,.grid-6,.grid-7{grid-template-columns:1fr;}
    /* Tabel (mis. rincian obat) dibuat bisa digeser ke samping, tidak pecah tampilannya */
    table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
    #lockCard{width:92vw;padding:26px 22px;}
    #licenseBadge{right:10px;bottom:8px;max-width:calc(100vw - 20px);font-size:10.5px;padding:7px 12px;gap:8px;}
  }

  /* HP posisi landscape (lebar tapi pendek): lebih hemat tinggi supaya konten tidak ketutup */
  @media (max-height: 480px) and (orientation: landscape){
    #sidebar{padding:6px 10px 4px;}
    .brand{padding:2px 2px 4px;font-size:12px;}
    .navbtn{padding:7px 12px;font-size:12.5px;}
    #content{padding:12px;}
  }