:root {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --ink: #1a2233;
  --muted: #6b7688;
  --line: #e6e9f0;
  --brand: #2b7de9;
  --brand-dark: #1e63c4;
  --brand-soft: #eaf2fe;
  --green: #1faa6c;
  --green-soft: #e4f7ee;
  --amber: #e6a100;
  --amber-soft: #fdf3d8;
  --red: #e0483b;
  --red-soft: #fde8e6;
  --violet: #7a5cf0;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(20,30,60,.06), 0 6px 22px rgba(20,30,60,.06);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, #dbe8ff 0%, var(--bg) 55%); }
.login-card { background: var(--panel); width: 100%; max-width: 380px; padding: 34px 30px;
  border-radius: 20px; box-shadow: var(--shadow); }
.login-card .logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; margin-bottom:4px; }
.login-card .sub { color: var(--muted); margin-bottom: 22px; font-size: 14px; }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sidebar { background: #12203a; color: #c7d2e6; padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; }
.sidebar .brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:18px; padding: 6px 10px 18px; }
.sidebar .brand .dot { width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--violet));display:grid;place-items:center;font-size:15px }
.navlink { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px; cursor:pointer;
  color:#aebbd4; font-weight:600; font-size:14.5px; transition:.12s; }
.navlink .ic { width:20px; text-align:center; font-size:16px; }
.navlink:hover { background:#1b2c4d; color:#fff; }
.navlink.active { background: var(--brand); color:#fff; }
.sidebar .spacer { flex:1; }
.sidebar .foot { font-size:12px; color:#61708c; padding:10px; }

.main { display:flex; flex-direction:column; min-width:0; }
.topbar { height:62px; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:5; }
.topbar h1 { font-size:19px; margin:0; font-weight:700; }
.topbar .grow { flex:1; }
.branch-select { display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line);
  padding:7px 12px; border-radius:10px; font-weight:600; }
.branch-select select { border:none; background:transparent; font-weight:600; outline:none; cursor:pointer; }
.userchip { display:flex; align-items:center; gap:10px; }
.avatar { width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:700; }
.userchip .nm { font-weight:700; font-size:14px; line-height:1.1; }
.userchip .rl { color:var(--muted); font-size:12px; }

.content { padding: 22px; max-width: 1240px; width: 100%; }

/* ---------- Common ---------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.pad { padding: 18px; }
.row { display:flex; gap:14px; }
.wrap { flex-wrap:wrap; }
.between { justify-content:space-between; align-items:center; }
.center { align-items:center; }
.grow { flex:1; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.mt { margin-top:16px; } .mb { margin-bottom:16px; }
h2.sec { font-size:16px; margin:0 0 14px; }

.btn { display:inline-flex; align-items:center; gap:7px; border:none; background:var(--brand); color:#fff;
  padding:10px 16px; border-radius:10px; font-weight:700; cursor:pointer; transition:.12s; white-space:nowrap; }
.btn:hover { background:var(--brand-dark); }
.btn.ghost { background:var(--bg); color:var(--ink); border:1px solid var(--line); }
.btn.ghost:hover { background:#eef1f7; }
.btn.green { background:var(--green); } .btn.green:hover{ filter:brightness(.94); }
.btn.danger { background:var(--red); }
.btn.sm { padding:6px 11px; font-size:13px; border-radius:8px; }
.btn.block { width:100%; justify-content:center; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.input, select.input, textarea.input {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; outline:none; }
.input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
label.fld { display:block; }
label.fld > span { display:block; font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:5px; }
textarea.input { resize:vertical; min-height:70px; }

.search { position:relative; }
.search input { padding-left:38px; }
.search .ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); }

.grid { display:grid; gap:14px; }
.g2 { grid-template-columns:1fr 1fr; }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }

.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:700; }
.b-new { background:var(--brand-soft); color:var(--brand-dark); }
.b-lab { background:var(--amber-soft); color:#8a6400; }
.b-ready { background:var(--green-soft); color:#0f7a4a; }
.b-issued { background:#eceef3; color:#5a6478; }
.b-cancelled { background:var(--red-soft); color:#b3271c; }

table.tbl { width:100%; border-collapse:collapse; }
table.tbl th { text-align:left; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;
  padding:10px 12px; border-bottom:1px solid var(--line); font-weight:700; }
table.tbl td { padding:12px; border-bottom:1px solid var(--line); }
table.tbl tr:last-child td { border-bottom:none; }
table.tbl tbody tr { cursor:pointer; }
table.tbl tbody tr:hover { background:var(--bg); }

.stat { padding:18px; }
.stat .k { color:var(--muted); font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.stat .v { font-size:28px; font-weight:800; margin-top:8px; }
.stat .ic2 { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px; }

.empty { text-align:center; padding:44px 20px; color:var(--muted); }
.empty .big { font-size:36px; margin-bottom:8px; }

/* ---------- Modal ---------- */
.overlay { position:fixed; inset:0; background:rgba(15,22,40,.42); display:grid; place-items:center; z-index:50; padding:18px; }
.modal { background:var(--panel); border-radius:18px; box-shadow:0 20px 60px rgba(10,20,50,.28);
  width:100%; max-width:640px; max-height:92vh; overflow:auto; }
.modal.wide { max-width:900px; }
.modal .mh { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); }
.modal .mh h3 { margin:0; font-size:18px; }
.modal .mb { padding:22px; }
.modal .mf { padding:16px 22px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:0; background:var(--panel); }
.x { cursor:pointer; color:var(--muted); font-size:22px; line-height:1; padding:4px 8px; border-radius:8px; }
.x:hover { background:var(--bg); }

/* prescription grid */
.rx { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.rx table { width:100%; border-collapse:collapse; text-align:center; }
.rx th, .rx td { border:1px solid var(--line); padding:6px; }
.rx th { background:var(--bg); font-size:12px; color:var(--muted); }
.rx td.eye { background:var(--bg); font-weight:700; }
.rx input { width:100%; border:none; text-align:center; padding:6px 2px; outline:none; background:transparent; }
.rx input:focus { background:var(--brand-soft); }

/* order kanban */
.kanban { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:start; }
.kcol { background:var(--bg); border-radius:12px; padding:10px; }
.kcol h4 { margin:4px 6px 10px; font-size:13px; display:flex; justify-content:space-between; }
.kcard { background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px; margin-bottom:8px; cursor:pointer; }
.kcard:hover { border-color:var(--brand); }
.kcard .num { font-weight:800; }
.kcard .cl { font-size:13px; color:var(--ink); }
.kcard .mt { display:flex; justify-content:space-between; margin-top:6px; font-size:12px; color:var(--muted); }

.tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.tab { padding:8px 14px; border-radius:9px; cursor:pointer; font-weight:600; color:var(--muted); background:var(--panel); border:1px solid var(--line); }
.tab.active { background:var(--brand); color:#fff; border-color:var(--brand); }

.pill { padding:5px 12px; border-radius:999px; border:1px solid var(--line); cursor:pointer; font-weight:600; font-size:13px; background:#fff; }
.pill.active { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-dark); }

.itemrow { display:grid; grid-template-columns: 1fr 70px 100px 40px; gap:8px; align-items:center; margin-bottom:8px; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:#12203a; color:#fff;
  padding:12px 20px; border-radius:12px; box-shadow:var(--shadow); z-index:100; font-weight:600; opacity:0; transition:.2s; }
.toast.show { opacity:1; }
.toast.err { background:var(--red); }

.bar { height:8px; background:var(--bg); border-radius:999px; overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--brand); }

.hint { background:var(--brand-soft); border:1px solid #cfe1fb; color:#1e4e8f; padding:12px 14px; border-radius:10px; font-size:13.5px; }
.hint.warn { background:var(--amber-soft); border-color:#f0dca0; color:#7a5a00; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { flex-direction:row; overflow-x:auto; position:sticky; top:0; z-index:10; }
  .sidebar .brand, .sidebar .foot, .sidebar .spacer { display:none; }
  .navlink { flex-direction:column; gap:3px; font-size:11px; padding:8px 10px; }
  .g2,.g3,.g4,.kanban { grid-template-columns:1fr; }
  .content { padding:14px; }
}