:root{
  --bg:#f4f6f5;
  --panel:#ffffff;
  --ink:#132420;
  --ink-soft:#5c716c;
  --line:#dfe6e3;
  --brand:#0f6b5c;
  --brand-2:#12876f;
  --brand-soft:#e6f2ef;
  --accent:#c2703a;
  --danger:#b3261e;
  --radius:12px;
  --shadow:0 1px 2px rgba(19,36,32,.06),0 8px 24px rgba(19,36,32,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Nirmala UI","Hind Siliguri","Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.55;
}
.hidden{display:none !important}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
a{cursor:pointer;text-decoration:none;color:inherit}
input,select,textarea,button{font-family:inherit;font-size:14px}
input,select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink);outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)}
label{display:block;font-size:12.5px;color:var(--ink-soft);margin:10px 0 4px;font-weight:600}
textarea{min-height:70px;resize:vertical}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;font-weight:600;transition:.15s;
}
.btn:hover{border-color:var(--brand-2);color:var(--brand)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(1.06);color:#fff}
.btn-danger{color:var(--danger);border-color:#eccfcd}
.btn-danger:hover{background:#fdf2f1;border-color:var(--danger);color:var(--danger)}
.btn-ghost{background:transparent}
.btn-block{width:100%}
.btn-sm{padding:5px 9px;font-size:12.5px;border-radius:7px}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 20% 0%,#e9f4f1,transparent),var(--bg);padding:20px}
.login-card{width:100%;max-width:380px;background:var(--panel);padding:26px;border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:19px;font-family:Georgia,serif}
.brand h1{font-size:17px}
.brand p{margin:0;font-size:12px;color:var(--ink-soft)}
.hint{font-size:12px;color:var(--ink-soft);text-align:center;margin:10px 0 0}
.err{color:var(--danger);font-size:12.5px;min-height:18px;margin-top:6px}

/* layout */
.app{display:flex;min-height:100vh}
.sidebar{width:238px;flex:0 0 238px;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh}
.brand.small{padding:0 6px 12px}
.sidebar nav{display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1}
.sidebar nav a{padding:9px 11px;border-radius:9px;color:var(--ink-soft);font-weight:600;font-size:13.6px}
.sidebar nav a:hover{background:var(--bg);color:var(--ink)}
.sidebar nav a.active{background:var(--brand-soft);color:var(--brand)}
.side-foot{padding-top:10px;border-top:1px solid var(--line)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 22px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topbar h2{font-size:18px}
.topbar-actions{display:flex;gap:8px}
.topbar-notif{position:relative;padding:7px 9px;flex-shrink:0}
.topbar-notif .nav-badge{position:absolute;top:2px;right:2px;margin:0}
.page-body{padding:22px;max-width:1180px;width:100%}

/* cards + grid */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-head h3{font-size:15px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* mobile navigation */
.menu-btn{display:none;font-size:19px;padding:4px 11px;line-height:1}
.side-overlay{display:none;position:fixed;inset:0;background:rgba(19,36,32,.45);z-index:40}
.side-overlay.show{display:block}
@media(max-width:900px){
  .menu-btn{display:inline-flex}
  .sidebar{position:fixed;top:0;left:0;z-index:50;height:100dvh;transform:translateX(-105%);
    transition:transform .25s ease;box-shadow:var(--shadow);flex:0 0 238px}
  .sidebar.open{transform:translateX(0)}
  .topbar{padding:12px 14px}
  .topbar h2{font-size:16px;flex:1}
  .page-body{padding:14px}
}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat b{display:block;font-size:26px;line-height:1.2}
.stat span{font-size:12.5px;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.small{font-size:12.5px}
.row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.row > *{flex:1;min-width:120px}
.row .btn{flex:0 0 auto}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;background:var(--brand-soft);color:var(--brand);font-size:11.5px;font-weight:700}

/* table */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:#fafbfb}
tbody tr:hover{background:#fafcfb}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.empty{padding:22px;text-align:center;color:var(--ink-soft)}

/* switch */
.switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#cfd8d5;border-radius:99px;transition:.2s;cursor:pointer}
.slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--brand)}
.switch input:checked + .slider:before{transform:translateX(18px)}
.finding-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.finding-row:last-child{border-bottom:0}
.finding-row .fl{flex:1}
.finding-row input[type=text]{max-width:210px}

/* chips list */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:12.5px;display:flex;gap:6px;align-items:center}
.chip b{font-weight:700}
.chip a{color:var(--danger);font-weight:700}

/* patient history: checkbox lists (past illness / current meds / family history) */
.hist-block{margin-top:14px}
.hist-block:first-child{margin-top:0}
.hist-block > label{font-weight:600;display:flex;align-items:center;gap:10px}
.hist-sub{margin-top:8px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius)}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 12px;margin-bottom:8px}
.chk-item{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.chk-item input{width:15px;height:15px;flex:0 0 auto}
.hist-sub input[type=text]{margin-top:4px}
@media(max-width:900px){
  .chk-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* rx items */
.rx-item{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:#fff}
.rx-item .top{display:flex;justify-content:space-between;gap:8px}
.rx-item .top b{font-size:14.5px}
.dur-pair{display:grid;grid-template-columns:1fr 1.2fr;gap:6px}
.rx-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr auto;gap:8px;align-items:end}
@media(max-width:900px){.rx-grid{grid-template-columns:1fr}}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:9px 16px;border-radius:99px;opacity:0;transition:.25s;z-index:99;font-size:13px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs a{padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13px;color:var(--ink-soft)}
.tabs a.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-backdrop{position:absolute;inset:0;background:rgba(19,36,32,.5)}
.modal-card{position:relative;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  width:100%;max-width:900px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:15px}
.modal-head-actions{display:flex;gap:8px}
.modal-body{overflow:auto;padding:14px;background:var(--bg)}
.modal-body .rx-sheet{width:100%;min-height:auto;border:1px solid var(--line);border-radius:10px;margin:0 auto}
.modal-body .rx-body{min-height:auto}
@media(max-width:700px){
  .modal-body .rx-body{display:block}
  .modal-body .rx-left,.modal-body .rx-right{width:100%;border-right:0;padding:0}
  .modal-body .rx-right{margin-top:12px;border-top:1px solid #ccc;padding-top:10px}
}
tbody tr.clickable{cursor:pointer}
.rx-count{min-width:34px;font-weight:700;background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand)}
.rx-count:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- PRINT SHEET ---------- */
#printArea{display:none}
.rx-sheet{width:210mm;min-height:297mm;padding:14mm 12mm;background:#fff;color:#000;font-size:12.5px}
.rx-head{display:flex;justify-content:space-between;border-bottom:2.5px solid #0f6b5c;padding-bottom:8px;gap:14px}
.rx-head h1{font-size:20px;color:#0f6b5c}
.rx-head .r{text-align:right;font-size:11.5px}
.rx-pt{display:flex;gap:16px;flex-wrap:wrap;border-bottom:1px solid #999;padding:7px 0;font-size:12px}
.rx-body{display:flex;min-height:190mm;margin-top:8px}
.rx-left{width:36%;padding-right:8px;border-right:1.5px solid #999}
.rx-right{width:64%;padding-left:10px}
.rx-sec{margin-bottom:10px}
.rx-sec h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#0f6b5c;border-bottom:1px solid #ccc;margin-bottom:4px;padding-bottom:2px}
.rx-sec ul{margin:0;padding-left:16px}
.rx-sec li{margin-bottom:2px}
.rx-symbol{font-family:Georgia,serif;font-size:26px;font-weight:700;color:#0f6b5c;margin-bottom:4px}
.rx-med{margin-bottom:8px}
.rx-med .n{font-weight:700;font-size:13.5px}
.rx-med .d{padding-left:14px;font-size:12px}
.rx-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;border-top:1px solid #999;padding-top:8px;font-size:11px}
.sign{border-top:1px solid #000;padding-top:3px;text-align:center;min-width:52mm}

@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  .app,.login-wrap,.toast,.modal,.side-overlay{display:none !important}
  #printArea{display:block !important}
  .rx-sheet{width:auto;min-height:auto;box-shadow:none}
}

/* ================= sidebar submenu ================= */
.sidebar nav a{display:block;text-decoration:none}
.nav-group{display:flex;flex-direction:column}
.nav-parent{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:9px 11px;border:0;background:transparent;border-radius:9px;cursor:pointer;
  color:var(--ink-soft);font-weight:600;font-size:13.6px;text-align:left;
}
.nav-parent:hover{background:var(--bg);color:var(--ink)}
.nav-parent .caret{transition:.15s;font-size:11px;opacity:.7}
.nav-group.open>.nav-parent{color:var(--brand)}
.nav-group.open>.nav-parent .caret{transform:rotate(180deg)}
.nav-sub{display:none;flex-direction:column;gap:2px;margin:2px 0 6px 10px;
  padding-left:8px;border-left:2px solid var(--line)}
.nav-group.open>.nav-sub{display:flex}
.nav-sub a{font-size:13px;padding:7px 10px}

/* ================= info tooltip ================= */
.info{
  display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);font-size:10.5px;font-weight:800;
  font-family:Georgia,serif;cursor:help;vertical-align:middle;
}
.info:hover{background:var(--brand);color:#fff}
.tax-link{font-size:11.5px;color:var(--brand);text-decoration:underline;font-weight:600;margin-left:4px}

/* ================= autocomplete ================= */
.ac{position:relative}
.ac-list{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  max-height:260px;overflow:auto;
}
.ac-item{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.hi{background:var(--brand-soft)}
.ac-empty{padding:9px 10px;font-size:12.5px;color:var(--ink-soft)}
.ac-empty a{color:var(--brand);text-decoration:underline}

/* prescription detail page */
.rx-page-view{overflow:auto;background:var(--bg);padding:10px;border-radius:10px}

/* ================= v3: charts, reports, mobile ================= */
body.no-scroll{overflow:hidden}

/* bar chart */
.bars{display:flex;flex-direction:column;gap:8px}
.bar-row{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;gap:8px;align-items:center}
.bar-label{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{background:var(--bg);border:1px solid var(--line);border-radius:6px;height:16px;overflow:hidden}
.bar-fill{height:100%;border-radius:5px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.bar-val{font-size:12px;font-weight:700;white-space:nowrap}

/* donut chart */
.donut-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.donut-wrap svg{flex:0 0 auto;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.donut-legend{flex:1;min-width:180px;display:flex;flex-direction:column;gap:4px}
.lg-item{display:flex;align-items:center;gap:7px;font-size:12.5px}
.lg-item .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto;print-color-adjust:exact}
.lg-item .lg-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* report layout */
.report-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.report-split{grid-template-columns:1fr}}
.chart-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.rec-detail{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fff}
.rec-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px;
  border-bottom:1px dashed var(--line);padding-bottom:5px}
.rec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;font-size:12.8px}
.rec-grid > div span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);font-weight:700}
@media(max-width:700px){.rec-grid{grid-template-columns:1fr}}

/* printable report (PDF) */
#printArea.print-report .report-doc{padding:10mm}
#printArea.print-report .card{break-inside:avoid;page-break-inside:avoid}
@media print{
  #printArea.print-report{display:block !important;background:#fff}
  .rx-sheet{width:auto}
}

/* ================= mobile polish ================= */
@media(max-width:900px){
  body{font-size:14px}
  .topbar{flex-wrap:wrap;row-gap:8px}
  .topbar h2{font-size:15.5px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-actions{flex:0 0 auto}
  .topbar-actions .btn{padding:6px 10px;font-size:12.5px}
  .page-body{padding:12px}
  .card{padding:13px}
  .card-head{flex-wrap:wrap}
  .row > *{min-width:100%}
  .row .btn{flex:1 1 auto;min-width:0}
  .table-wrap{-webkit-overflow-scrolling:touch}
  table{min-width:560px}
  .modal{padding:0;align-items:stretch}
  .modal-card{max-width:none;max-height:100vh;border-radius:0}
  .modal-head{flex-wrap:wrap}
  .modal-head-actions{width:100%;flex-wrap:wrap}
  .modal-head-actions .btn{flex:1 1 auto}
  .rx-page-view{padding:0}
  .rx-sheet{width:100%;min-height:auto;padding:12px}
  .rx-body{display:block;min-height:auto}
  .rx-left,.rx-right{width:100%;border-right:0;padding:0}
  .rx-right{margin-top:12px;border-top:1px solid #ccc;padding-top:10px}
  .rx-head{flex-direction:column;gap:6px}
  .rx-head .r{text-align:left}
  .rx-foot{flex-direction:column;align-items:flex-start;gap:10px}
  .finding-row{flex-wrap:wrap}
  .finding-row input[type=text]{max-width:none;flex:1 1 100%}
  .bar-row{grid-template-columns:1fr auto;grid-template-areas:"l v" "t t"}
  .bar-label{grid-area:l}.bar-val{grid-area:v}.bar-track{grid-area:t}
}
@media(max-width:520px){
  .sidebar{width:86vw;flex:0 0 86vw}
  .stat b{font-size:22px}
  .grid{gap:10px}
  .card + .card{margin-top:12px}
  .rx-pt{gap:8px;font-size:11.5px}
}

@media print{table{min-width:0 !important}.no-scroll{overflow:visible}}


/* ================= PRESCRIPTION PRINT LAYOUT FIX =================
   Keep the A4 prescription in the original two-column desktop layout.
   This rule must remain after responsive/mobile rules because an A4
   print viewport can match max-width media queries in Chromium. */
@media print{
  #printArea .rx-sheet{
    width:auto;
    min-height:297mm;
    padding:14mm 12mm;
    box-sizing:border-box;
  }

  #printArea .rx-head{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
  }

  #printArea .rx-head .r{
    text-align:right;
  }

  #printArea .rx-body{
    display:flex;
    flex-direction:row;
    min-height:190mm;
    margin-top:8px;
  }

  #printArea .rx-left{
    width:36%;
    padding-right:8px;
    border-right:1.5px solid #999;
    box-sizing:border-box;
  }

  #printArea .rx-right{
    width:64%;
    margin-top:0;
    padding:0 0 0 10px;
    border-top:0;
    box-sizing:border-box;
  }

  #printArea .rx-foot{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-end;
  }
}

/* ================= v4: action dropdown, manual drug entry, report views ================= */
select.rx-act{max-width:180px;padding:6px 8px;font-size:12.5px}
.chart-box h4{margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em}
.rp-toolbar .card-head{margin-bottom:0}
@media print{.rp-toolbar{display:none !important}}


/* ================= DRUG LIBRARY ================= */
.drug-library-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.drug-library-toolbar>input{flex:1 1 280px;min-width:220px}
.drug-library-actions{display:flex;gap:8px;flex-wrap:wrap}
.drug-library-add-panel{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:14px;margin-bottom:14px}
.drug-library-add-panel .card-head{margin-bottom:10px}
.drug-library-add-panel h4{margin:0}
.drug-library-form-actions{display:flex;align-items:flex-end;gap:8px}
@media(max-width:700px){.drug-library-form-actions{align-items:stretch;flex-wrap:wrap}.drug-library-form-actions .btn{flex:1}}

/* ================= REPORT PRINT (PDF) LAYOUT FIX =================
   An A4 print viewport can match the max-width:900px mobile queries in
   Chromium, which collapsed every report grid into one vertical column.
   These rules come last so the on-screen layout is kept in the PDF. */
@media print{
  #printArea.print-report .report-doc{width:auto;font-size:11px}
  #printArea.print-report .grid.g4{
    display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px}
  #printArea.print-report .grid.g2{
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  #printArea.print-report .report-split{
    display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px;align-items:start}
  #printArea.print-report .bar-row{
    display:grid !important;grid-template-columns:minmax(70px,32%) 1fr auto !important;
    grid-template-areas:none !important;gap:6px;align-items:center}
  #printArea.print-report .bar-label{grid-area:auto !important}
  #printArea.print-report .bar-track{grid-area:auto !important}
  #printArea.print-report .bar-val{grid-area:auto !important}
  #printArea.print-report .donut-wrap{display:flex !important;flex-wrap:nowrap;gap:10px}
  #printArea.print-report .rec-grid{
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #printArea.print-report table{min-width:0 !important;width:100% !important;font-size:10.5px}
  #printArea.print-report .table-wrap{overflow:visible !important}
  #printArea.print-report .row > *{min-width:0 !important}
  #printArea.print-report .card{padding:10px;margin-bottom:8px}
  #printArea.print-report *{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* drug row: manual-entry switch sits below the aligned input row */
.rx-mode{display:flex;align-items:center;gap:8px;margin-top:10px}

/* ============================================================
   Online Doctor Consultation System — additional styles
   ============================================================ */
.clickable{cursor:pointer}
.stat.clickable{cursor:pointer;transition:.15s}
.stat.clickable:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(15,107,92,.14)}
.signup-link{text-align:center;margin-top:10px;font-size:12.5px}
.signup-link a{color:var(--brand);font-weight:600;text-decoration:underline}

.package-card{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:#fff;
  display:flex;flex-direction:column;gap:6px}
.package-card h4{font-size:15px}
.package-price{font-size:20px;font-weight:800;color:var(--brand)}

.wizard-steps{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.wizard-steps span{padding:5px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.wizard-steps span.active{background:var(--brand);border-color:var(--brand);color:#fff}

.status-pending{background:#fff1dc;color:#8a5300}
.status-under_review{background:#e6f2ef;color:var(--brand)}
.status-waiting_for_patient{background:#fdecea;color:var(--danger)}
.status-closed{background:#e9edea;color:var(--ink-soft)}

.notif-item{position:relative}
.notif-item.unread{border-left:3px solid var(--brand);background:var(--brand-soft)}
.notif-item .top{align-items:flex-start}

.nav-badge{display:inline-block;min-width:16px;padding:1px 6px;border-radius:99px;background:var(--danger);
  color:#fff;font-size:10.5px;font-weight:700;text-align:center;margin-left:6px;vertical-align:middle}

/* ---- Consultation image uploads & lightbox ---- */
.img-thumb-wrap{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  aspect-ratio:1/1;background:var(--bg)}
.img-thumb{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.img-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;
  background:rgba(19,36,32,.65);color:#fff;font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.img-remove:hover{background:var(--danger)}
.lightbox{position:fixed;inset:0;background:rgba(10,18,16,.9);display:flex;align-items:center;
  justify-content:center;z-index:999;padding:28px}
.lightbox.hidden{display:none}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;
  font-size:32px;cursor:pointer;line-height:1;padding:4px 10px}

/* ---- Patient List / Profile ---- */
.patient-avatar{border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;
  justify-content:center;background:var(--brand-soft);color:var(--brand);font-weight:800;flex-shrink:0}
.patient-avatar-placeholder{letter-spacing:.5px}
.patient-name-link{color:var(--brand);font-weight:600;text-decoration:none}
.patient-name-link:hover{text-decoration:underline}

/* Fixed, circular 100x100 photo box for the patient Add/Edit form preview —
   object-fit:cover on the <img> keeps any uploaded photo (any aspect ratio)
   from looking stretched/flattened. */
.patient-photo-box{width:100px;height:100px;border-radius:50%;overflow:hidden;position:relative;
  border:2px solid var(--line);background:var(--bg);flex-shrink:0;display:flex}
.patient-photo-box img{width:100%;height:100%;object-fit:cover;display:block}
.patient-photo-box .img-remove{position:absolute;top:2px;right:2px}

/* Table columns that should only ever be as wide as their content
   (the checkbox Action column and the Prescriptions icon column) */
.col-tight{width:1%;white-space:nowrap;text-align:center}

/* ---- Follow-up statuses ---- */
.status-upcoming{background:#e6f2ef;color:var(--brand)}
.status-due_today{background:#fff1dc;color:#8a5300}
.status-overdue{background:#e9edea;color:var(--ink-soft)}
.status-followed_up{background:#e3f6ea;color:#1a7a41}

/* ---- Prescription previous/next chain navigation ---- */
.rx-chain-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;background:var(--brand-soft);border-radius:10px;margin-bottom:14px;flex-wrap:wrap}
.rx-chain-link{color:var(--brand);font-weight:600;font-size:13px}
.rx-chain-link:hover{text-decoration:underline}

/* ================= NEW PRESCRIPTION LAYOUT =================
   Keep every prescription section aligned to the same 15px page gutter
   and use one consistent vertical gap between sections. */
.page-body:has(.prescription-form){
  max-width:none;
  padding:15px;
}
.prescription-form{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:15px;
  margin:0;
  padding:0;
}
.prescription-form > .grid{
  width:100%;
  margin:0;
  gap:15px;
}
.prescription-form > .card,
.prescription-form > .card + .card{
  width:100%;
  margin:0 !important;
}
@media(max-width:900px){
  .page-body:has(.prescription-form){padding:12px}
  .prescription-form,.prescription-form > .grid{gap:12px}
}


/* Keep Patient Info exactly the same height as Chief Complaint & Examination. */
.prescription-form > .grid.g2:first-child{
  align-items:stretch !important;
}
.prescription-form > .grid.g2:first-child > .card{
  height:100%;
  margin:0 !important;
}

/* ================= DRUG LIBRARY FILTERS / TAXONOMY QUICK ADD ================= */
.drug-library-filter{display:flex;align-items:center;gap:6px;min-width:220px;flex:0 1 260px}
.drug-library-filter select{min-width:0;flex:1}
.link-btn{border:0;background:transparent;color:var(--brand);padding:3px 4px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.link-btn:hover{text-decoration:underline;color:var(--brand-2)}
.inline-select-add{display:flex;align-items:center;gap:6px}
.inline-select-add select{min-width:0;flex:1}
.inline-select-add .link-btn{flex:0 0 auto}
@media(max-width:900px){.drug-library-filter{flex:1 1 100%}}

/* ================= DRUG LIST / DEFAULT MODAL POLISH ================= */
.drug-list-page{display:flex;flex-direction:column;gap:12px}
.drug-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 2px}
.page-section-title{margin:0 0 3px;font-size:18px}
.drug-default-modal{max-width:700px;width:min(700px,calc(100vw - 32px));border:1px solid var(--line);}
.drug-default-modal .modal-head{padding:16px 18px;background:#fff}
.drug-default-modal .modal-head h3{margin:0 0 3px;font-size:17px}
.drug-default-modal .modal-body{padding:18px;background:#fff}
.drug-default-fields{gap:14px}
.drug-default-fields > div{min-width:0}
.drug-default-fields input,.drug-default-fields select{width:100%;box-sizing:border-box}
.drug-default-modal .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid var(--line);background:#fafcfb}
.drug-default-modal .modal-close-btn{font-size:18px;line-height:1;padding:4px 9px;border-radius:8px}
.modal-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(19,36,32,.5);box-sizing:border-box}
.modal-backdrop .modal-card{margin:auto;max-height:calc(100vh - 32px);overflow:hidden}

/* Filter add-new links sit directly beneath their dropdowns. */
.drug-library-filter{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:190px;flex:1 1 190px}
.drug-library-filter label{font-size:12px;font-weight:700;color:var(--ink-soft)}
.drug-library-filter select{width:100%;min-width:0}
.filter-add-link{align-self:flex-start;padding:1px 2px;font-size:11px;line-height:1.2}
@media(max-width:900px){.drug-library-filter{flex:1 1 100%}.drug-list-toolbar{align-items:stretch;flex-direction:column}.drug-list-toolbar .btn{align-self:flex-start}}
/* Drug defaults modal refinements */
.drug-default-modal{max-width:760px;width:min(760px,calc(100vw - 32px));}
.drug-default-modal .modal-head{align-items:flex-start;}
.drug-default-drug-name{font-size:16px;font-weight:700;margin:2px 0 4px;color:var(--ink);}
.drug-default-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.drug-default-fields > div{min-width:0;}
.drug-default-fields input,.drug-default-fields select{width:100%;box-sizing:border-box;}
.drug-library-top-action{display:flex;justify-content:flex-start;margin-bottom:12px;}
@media(max-width:700px){.drug-default-fields{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.drug-default-fields{grid-template-columns:1fr;}}
/* Drug Library: action and add form are independent sections above the library card. */
.drug-library-action-card{padding:16px;margin-bottom:14px;}
.drug-library-action-card .drug-library-top-action{margin:0;}
.drug-library-add-panel{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);background:var(--panel);}
.drug-form-select-add{display:flex;flex-direction:column;align-items:stretch;gap:3px;}
.drug-form-select-add select{width:100%;}
.drug-form-select-add .link-btn{align-self:flex-start;padding:1px 2px;font-size:11px;line-height:1.2;}
/* Inline + Add New links for drug default selectors. */
.drug-default-add-link{display:inline-block;padding:1px 2px;margin-top:2px;font-size:11px;line-height:1.2;color:var(--brand);background:transparent;border:0;border-radius:4px;font-weight:700;cursor:pointer}
.drug-default-add-link:hover{text-decoration:underline;color:var(--brand-2)}