/* =====================================================================
   Doclyn Mitra - portal.css (dashboard admin, brand biru+emas)
   ===================================================================== */
:root{
  --c-bg:#eef1f6; --c-surface:#fff; --c-navy:#1a1a2e; --c-navy-2:#23233f;
  --c-primary:#2563eb; --c-primary-d:#1e40af; --c-accent:#f5be01;
  --c-text:#1f2433; --c-soft:#6b7280; --c-line:#e6e8ef;
  --c-success:#16a34a; --c-warning:#d97706; --c-danger:#dc2626;
  --radius:14px; --radius-sm:9px; --shadow:0 1px 3px rgba(16,24,40,.07);
  --shadow-md:0 8px 24px rgba(16,24,40,.10); --sidebar-w:248px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--c-bg);color:var(--c-text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,var(--c-navy),var(--c-navy-2));color:#fff;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:40}
.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}

/* ---------- Brand / sidebar ---------- */
.brand{display:flex;align-items:center;gap:10px;padding:20px 18px;font-weight:800;font-size:18px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--c-primary);display:flex;align-items:center;justify-content:center;color:#fff}
.brand-mark.big{width:64px;height:64px;border-radius:18px;font-size:28px;margin-bottom:10px}
.brand-txt span{color:var(--c-accent)}
.brand-txt small{display:block;font-size:11px;font-weight:600;color:#a5add6;letter-spacing:1px}
.menu{flex:1;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.menu-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:#c7cce6;font-weight:600;font-size:14px}
.menu-item i{width:20px;text-align:center}
.menu-item:hover{background:rgba(255,255,255,.06);color:#fff}
.menu-item.active{background:var(--c-primary);color:#fff}
.sidebar-foot{padding:14px}
.mitra-badge{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border-radius:12px;padding:12px}
.mitra-badge i{font-size:18px;color:var(--c-accent)}
.mitra-badge b{font-size:13px;display:block}
.mitra-badge small{font-size:11px;color:#a5add6}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:35}

/* ---------- Topbar ---------- */
.topbar{height:62px;background:var(--c-surface);border-bottom:1px solid var(--c-line);display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:20}
.hamb{display:none;font-size:18px;color:var(--c-text)}
.topbar-title{flex:1;font-size:18px;font-weight:700;margin:0}
.topbar-user{display:flex;align-items:center;gap:12px}
.u-info{text-align:right;line-height:1.2}
.u-info b{font-size:13px}.u-info small{font-size:11px;color:var(--c-soft)}
.u-avatar{width:38px;height:38px;border-radius:50%;background:var(--c-accent);color:var(--c-navy);font-weight:800;display:flex;align-items:center;justify-content:center}
.u-logout{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--c-soft)}
.u-logout:hover{background:#fef2f2;color:var(--c-danger)}

/* ---------- Content ---------- */
.content{padding:24px;max-width:1100px;width:100%}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.page-head h2{margin:0;font-size:20px;font-weight:800}
.muted{color:var(--c-soft)}.caption{font-size:12px;color:var(--c-soft)}

/* ---------- Cards / stat ---------- */
.card{background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.card-pad0{padding:0;overflow:hidden}
.section-title{font-size:15px;font-weight:700;margin:0 0 12px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat{background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;align-items:center;gap:14px}
.stat-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex-shrink:0}
.stat .v{font-size:24px;font-weight:800;line-height:1}
.stat .l{font-size:12px;color:var(--c-soft);margin-top:3px}
.bg-wait{background:linear-gradient(135deg,#f59e0b,#d97706)}
.bg-proc{background:linear-gradient(135deg,#3b82f6,#1e40af)}
.bg-done{background:linear-gradient(135deg,#16a34a,#15803d)}
.bg-all{background:linear-gradient(135deg,#1a1a2e,#2a2a4a)}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;background:#f8f9fc;color:var(--c-soft);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px;padding:12px 16px;border-bottom:1px solid var(--c-line)}
table.tbl td{padding:13px 16px;border-bottom:1px solid var(--c-line)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr{cursor:pointer;transition:background .12s}
table.tbl tbody tr:hover{background:#f8faff}
.t-code{font-weight:700;color:var(--c-primary)}
.t-jenis{display:inline-flex;align-items:center;gap:7px}
.t-jenis i{color:var(--c-soft)}

/* ---------- Badge ---------- */
.badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.badge-wait{background:#fff7ed;color:#c2410c}
.badge-proc{background:#eff6ff;color:#1d4ed8}
.badge-done{background:#ecfdf5;color:#047857}
.badge-cancel{background:#fef2f2;color:#b91c1c}
.badge-soft{background:var(--c-line);color:var(--c-soft)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;font-weight:700;font-size:14px;transition:transform .08s,opacity .15s}
.btn:active{transform:scale(.98)}
.btn-sm{height:34px;padding:0 13px;font-size:13px;border-radius:8px}
.btn-block{display:flex;width:100%}
.btn-primary{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-d));color:#fff}
.btn-success{background:var(--c-success);color:#fff}
.btn-gold{background:var(--c-accent);color:var(--c-navy)}
.btn-light{background:#eef2ff;color:var(--c-primary)}
.btn-ghost{background:transparent;color:var(--c-soft);border:1px solid var(--c-line)}
.btn-danger{background:var(--c-danger);color:#fff}
.btn[disabled],.btn.is-loading{opacity:.55;pointer-events:none}

/* ---------- Forms ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.input,.select,.textarea{width:100%;height:44px;padding:10px 13px;border:1.5px solid var(--c-line);border-radius:10px;font-size:14px;background:#fff;color:var(--c-text)}
.textarea{height:auto;min-height:90px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--c-primary)}
.field.err .input,.field.err .select{border-color:var(--c-danger)}
.err-msg{color:var(--c-danger);font-size:12px;margin-top:5px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row-actions{display:flex;gap:10px;flex-wrap:wrap}

/* dynamic rows (lab param / resep) */
.drow{display:grid;gap:8px;align-items:center;margin-bottom:8px}
.drow.lab{grid-template-columns:2fr 1fr 1fr 1.4fr 36px}
.drow.obat{grid-template-columns:2fr 1fr 1.4fr .8fr 36px}
.drow .input{height:40px}
.drow-del{width:36px;height:40px;border-radius:8px;background:#fef2f2;color:var(--c-danger);display:flex;align-items:center;justify-content:center}
.drow-head{font-size:11px;color:var(--c-soft);font-weight:600;text-transform:uppercase}

/* ---------- Detail layout ---------- */
.detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--c-line);font-size:14px}
.info-row:last-child{border-bottom:none}
.info-row .k{color:var(--c-soft)}
.info-row .v{font-weight:600;text-align:right}
.empty{text-align:center;padding:46px 20px;color:var(--c-soft)}
.empty i{font-size:42px;color:#c7ccda;margin-bottom:12px}
.empty h3{color:var(--c-text);margin:0 0 6px}

/* ---------- Auth ---------- */
.auth-page{background:linear-gradient(135deg,#1a1a2e,#23233f)}
.auth-wrap{min-height:100vh;display:flex;align-items:stretch;max-width:900px;margin:0 auto;padding:24px;gap:0}
.auth-card{flex:1;background:#fff;border-radius:18px 0 0 18px;padding:42px 38px;display:flex;flex-direction:column;justify-content:center;max-width:420px}
.auth-side{flex:1;background:rgba(255,255,255,.06);border-radius:0 18px 18px 0;color:#fff;padding:42px;display:flex;flex-direction:column;justify-content:center}
.auth-side h2{font-size:26px;margin:0 0 10px}.auth-side h2 span{color:var(--c-accent)}
.auth-side p{color:#c7cce6;line-height:1.6}
.auth-title{font-size:24px;font-weight:800;margin:0 0 4px}
.auth-sub{color:var(--c-soft);margin-bottom:24px}
.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--c-soft);background:none;width:34px;height:34px}
.input-group{position:relative}

/* ---------- Toast ---------- */
.toast-container{position:fixed;right:20px;bottom:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:360px}
.toast{display:flex;align-items:center;gap:10px;background:var(--c-navy);color:#fff;border-radius:11px;padding:13px 15px;box-shadow:var(--shadow-md);opacity:0;transform:translateY(12px);transition:all .3s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.hide{opacity:0;transform:translateY(12px)}
.toast-success i{color:#4ade80}.toast-danger i{color:#f87171}.toast-warning i{color:#fbbf24}.toast-info i{color:#60a5fa}
.toast-body{flex:1;font-size:13.5px}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .sidebar{transform:translateX(-100%);transition:transform .25s}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .hamb{display:block}
  .sidebar.open ~ .sidebar-backdrop{display:block}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-card{border-radius:18px;max-width:none}
  .drow.lab,.drow.obat{grid-template-columns:1fr 1fr}
  .u-info{display:none}
}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.text-center{text-align:center}