/* assets/css/app.css — PathLab BD — Redesigned */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand */
  --blue:       #1565C0;
  --blue-lt:    #E3F0FF;
  --blue-dk:    #0D47A1;
  --navy:       #0F1B2D;
  --navy-2:     #162032;
  --navy-3:     #1E2D40;

  /* Status */
  --green:      #1B8A4C;
  --green-lt:   #E6F5EC;
  --amber:      #D97706;
  --amber-lt:   #FEF3C7;
  --red:        #C0392B;
  --red-lt:     #FDE8E7;
  --purple:     #7C3AED;
  --purple-lt:  #EDE9FE;
  --cyan:       #0891B2;
  --cyan-lt:    #CFFAFE;
  --orange:     #EA580C;
  --orange-lt:  #FFEDD5;

  /* Neutrals */
  --gray:       #6B7280;
  --gray-lt:    #F3F4F6;
  --border:     #E5E7EB;
  --text:       #111827;
  --text-2:     #4B5563;
  --bg:         #F0F4F8;
  --white:      #FFFFFF;

  /* Layout */
  --sidebar-w:  240px;
  --topbar-h:   60px;
  --radius:     10px;
  --radius-sm:  6px;
  --shadow:     0 1px 6px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; font-family:'Inter',system-ui,sans-serif; font-size:14px; color:var(--text); background:var(--bg); }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── LAYOUT ── */
.app-shell    { display:flex; min-height:100vh; }
.sidebar      { width:var(--sidebar-w); background:var(--navy); border-right:none;
                display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0;
                overflow-y:auto; z-index:100; }
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.topbar       { background:var(--white); border-bottom:1px solid var(--border); padding:0 24px;
                height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between;
                position:sticky; top:0; z-index:99; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.page-content { padding:24px; flex:1; }

/* ── SIDEBAR ── */
.sb-brand     { padding:18px 20px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.sb-brand-row { display:flex; align-items:center; gap:10px; }
.sb-brand-icon { width:36px; height:36px; border-radius:9px; background:var(--blue);
                 display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-brand-icon i { font-size:18px; color:#fff; }
.sb-brand h2  { font-size:14px; font-weight:700; color:#fff; line-height:1.2; }
.sb-brand p   { font-size:11px; color:rgba(255,255,255,.45); margin-top:2px; }
.plan-status  { color:#4ADE80; }
.sb-section   { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
                color:rgba(255,255,255,.35); padding:16px 20px 6px; }
.nav-link     { display:flex; align-items:center; gap:10px; padding:9px 20px; font-size:13px;
                color:rgba(255,255,255,.65); border-left:3px solid transparent;
                transition:.15s; margin:1px 0; }
.nav-link:hover { background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.nav-link.active { background:rgba(21,101,192,.35); color:#fff; border-left-color:var(--blue);
                   font-weight:600; }
.nav-link i   { font-size:17px; flex-shrink:0; opacity:.8; }
.nav-link.active i { opacity:1; color:#60A5FA; }
.nav-badge    { margin-left:auto; font-size:10px; font-weight:700; padding:1px 7px;
                border-radius:99px; background:var(--red); color:#fff; }
.nav-badge.amber { background:var(--amber); }
.nav-badge.green { background:var(--green); }
.nav-badge.new   { background:var(--blue); color:#fff; }
.sb-bottom    { margin-top:auto; border-top:1px solid rgba(255,255,255,.08); padding:8px 0; }
.sb-bottom .nav-link { color:rgba(255,255,255,.45); }
.sb-bottom .nav-link:hover { color:#fff; }

/* Support block in sidebar */
.sb-support   { margin:12px 12px 0; background:var(--navy-3); border-radius:9px; padding:14px;
                border:1px solid rgba(255,255,255,.08); }
.sb-support-title { font-size:13px; font-weight:600; color:#fff; display:flex; align-items:center; gap:8px; }
.sb-support-title i { color:#60A5FA; font-size:16px; }
.sb-support p { font-size:11px; color:rgba(255,255,255,.45); margin:4px 0 6px; }
.sb-support a { font-size:12px; font-weight:700; color:#60A5FA; }

/* ── TOPBAR ── */
.topbar-search { display:flex; align-items:center; gap:8px; background:var(--gray-lt);
                 border:1px solid var(--border); border-radius:8px; padding:7px 12px;
                 width:320px; cursor:pointer; }
.topbar-search input { background:none; border:none; outline:none; font-size:13px;
                       color:var(--text); width:100%; }
.topbar-search input::placeholder { color:var(--gray); }
.topbar-search i { color:var(--gray); font-size:16px; flex-shrink:0; }
.page-title   { font-size:16px; font-weight:700; color:var(--text); }
.topbar-right { display:flex; align-items:center; gap:12px; }
.icon-btn     { width:36px; height:36px; border:1px solid var(--border); border-radius:var(--radius-sm);
                display:flex; align-items:center; justify-content:center; background:none;
                cursor:pointer; color:var(--gray); font-size:17px; position:relative;
                transition:background .15s; }
.icon-btn:hover { background:var(--gray-lt); }
.icon-btn .dot { position:absolute; top:5px; right:5px; width:8px; height:8px;
                 border-radius:50%; background:var(--red); border:2px solid #fff; }
.topbar-user  { display:flex; flex-direction:column; align-items:flex-end; }
.topbar-user-name { font-size:13px; font-weight:600; color:var(--text); }
.topbar-user-role { font-size:11px; color:var(--gray); }
.avatar-btn   { width:36px; height:36px; border-radius:50%; background:var(--blue);
                display:flex; align-items:center; justify-content:center; font-size:12px;
                font-weight:700; color:#fff; cursor:pointer; border:none; flex-shrink:0; }

/* ── CARDS ── */
.card         { background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
                padding:16px; margin-bottom:16px; transition:box-shadow .15s; }
.card:hover   { box-shadow:var(--shadow-md); }
.card-title   { font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px;
                padding-bottom:8px; border-bottom:1px solid var(--border); }

/* ── DASHBOARD HEADER ── */
.dash-header  { margin-bottom:20px; }
.dash-header h1 { font-size:22px; font-weight:700; color:var(--text); margin-bottom:3px; }
.dash-header p  { font-size:13px; color:var(--gray); }
.dash-date-badge { display:flex; align-items:center; gap:6px; background:var(--white);
                   border:1px solid var(--border); border-radius:8px; padding:7px 14px;
                   font-size:13px; color:var(--text-2); font-weight:500; cursor:pointer;
                   box-shadow:var(--shadow); }
.dash-date-badge i { color:var(--blue); font-size:15px; }

/* ── SUBSCRIPTION BANNER ── */
.sub-banner   { display:flex; align-items:center; justify-content:space-between; gap:12px;
                background:var(--blue-lt); border:1px solid #c3d9f0; border-radius:var(--radius);
                padding:10px 16px; margin-bottom:20px; font-size:13px; color:var(--blue); }
.sub-banner.warning { background:var(--amber-lt); border-color:#fce49a; color:var(--amber); }
.sub-banner i { vertical-align:-2px; margin-right:4px; }

/* ── STAT CARDS ── */
.metrics-row  { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; }
.metric-card  { background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
                padding:18px 16px; transition:box-shadow .15s, transform .15s; position:relative; }
.metric-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.metric-icon  { width:48px; height:48px; border-radius:10px; display:flex; align-items:center;
                justify-content:center; font-size:22px; margin-bottom:12px; flex-shrink:0; }
.metric-icon.blue   { background:var(--blue-lt);   color:var(--blue); }
.metric-icon.green  { background:var(--green-lt);  color:var(--green); }
.metric-icon.purple { background:var(--purple-lt); color:var(--purple); }
.metric-icon.amber  { background:var(--amber-lt);  color:var(--amber); }
.metric-icon.red    { background:var(--red-lt);    color:var(--red); }
.metric-icon.cyan   { background:var(--cyan-lt);   color:var(--cyan); }
.metric-label { font-size:12px; color:var(--blue); font-weight:600; margin-bottom:4px; }
.metric-value { font-size:26px; font-weight:700; color:var(--text); line-height:1.1;
                margin-bottom:6px; letter-spacing:-.5px; }
.metric-sub   { font-size:11px; color:var(--gray); display:flex; align-items:center; gap:3px; }
.metric-sub.up   { color:var(--green); }
.metric-sub.down { color:var(--red); }
.metric-sub i { font-size:12px; }

/* ── QUICK ACTIONS ── */
.quick-actions { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:22px; }
.quick-btn    { background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
                padding:16px 8px 14px; text-align:center; cursor:pointer; text-decoration:none;
                color:var(--text-2); transition:.15s all; display:flex; flex-direction:column;
                align-items:center; gap:8px; box-shadow:var(--shadow); }
.quick-btn:hover { background:var(--blue-lt); border-color:var(--blue); color:var(--blue);
                   text-decoration:none; box-shadow:0 4px 12px rgba(21,101,192,.15); transform:translateY(-2px); }
.quick-btn-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center;
                  justify-content:center; font-size:20px; transition:.15s; }
.quick-btn-icon.blue   { background:var(--blue-lt);   color:var(--blue); }
.quick-btn-icon.green  { background:var(--green-lt);  color:var(--green); }
.quick-btn-icon.amber  { background:var(--amber-lt);  color:var(--amber); }
.quick-btn-icon.purple { background:var(--purple-lt); color:var(--purple); }
.quick-btn-icon.red    { background:var(--red-lt);    color:var(--red); }
.quick-btn-icon.cyan   { background:var(--cyan-lt);   color:var(--cyan); }
.quick-btn:hover .quick-btn-icon { filter:brightness(.9); }
.quick-btn span { font-size:11px; font-weight:600; line-height:1.3; }

/* ── FINANCE STRIP ── */
.dash-finance-strip { display:flex; align-items:center; background:var(--white);
                      border:1px solid var(--border); border-radius:var(--radius);
                      margin-bottom:20px; overflow:hidden; }
.dash-fin-item  { display:flex; align-items:center; gap:12px; padding:16px 22px; flex:1; }
.dash-fin-icon  { width:40px; height:40px; border-radius:10px; display:flex; align-items:center;
                  justify-content:center; font-size:18px; flex-shrink:0; }
.dash-fin-green { background:var(--green-lt); color:var(--green); }
.dash-fin-red   { background:var(--red-lt);   color:var(--red); }
.dash-fin-blue  { background:var(--blue-lt);  color:var(--blue); }
.dash-fin-amber { background:var(--amber-lt); color:var(--amber); }
.dash-fin-label { font-size:11px; font-weight:600; color:var(--gray); text-transform:uppercase;
                  letter-spacing:.04em; margin-bottom:4px; }
.dash-fin-val   { font-size:17px; font-weight:700; color:var(--text); }
.dash-fin-val.green { color:var(--green); }
.dash-fin-val.red   { color:var(--red); }
.dash-fin-val.blue  { color:var(--blue); }
.dash-fin-val.amber { color:var(--amber); }
.dash-fin-divider { width:1px; height:44px; background:var(--border); flex-shrink:0; }
.dash-fin-btn   { margin:0 16px; flex-shrink:0; white-space:nowrap; }

/* ── TWO-COL / THREE-COL GRIDS ── */
.two-col    { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.three-col  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:18px; }

/* ── PANEL HEADS ── */
.panel-head { display:flex; align-items:center; justify-content:space-between;
              padding:14px 16px; border-bottom:1px solid var(--border); }
.panel-head h3 { font-size:14px; font-weight:700; color:var(--text);
                 display:flex; align-items:center; gap:7px; }
.panel-head h3 i { font-size:16px; color:var(--blue); }
.panel-head-sub { font-size:11px; color:var(--gray); margin-top:1px; }
.panel-view-all { font-size:12px; font-weight:600; color:var(--blue);
                  display:flex; align-items:center; gap:3px; }
.panel-view-all:hover { text-decoration:none; }

/* ── LIST ROWS ── */
.list-row     { display:flex; align-items:center; justify-content:space-between;
                padding:11px 16px; border-bottom:1px solid var(--border);
                font-size:13px; transition:background .12s; }
.list-row:last-child { border-bottom:none; }
.list-row:hover { background:#F7F9FC; }
.list-row-name { font-weight:600; color:var(--text); margin-bottom:2px; }
.list-row-sub  { font-size:11px; color:var(--gray); }

/* ── TEST BAR ROWS ── */
.test-row     { display:flex; align-items:center; gap:10px; padding:9px 16px;
                border-bottom:1px solid var(--border); font-size:12px; }
.test-row:last-child { border-bottom:none; }
.test-name    { width:120px; color:var(--text-2); flex-shrink:0; font-weight:600; font-size:13px; }
.test-bar-wrap { flex:1; height:7px; background:var(--gray-lt); border-radius:4px; overflow:hidden; }
.test-bar     { height:100%; background:linear-gradient(90deg, var(--blue), #60A5FA); border-radius:4px; }
.test-count   { width:32px; text-align:right; font-weight:700; color:var(--text); font-size:13px; }

/* ── DOCTOR STATS BAR ── */
.dash-doc-stats { display:flex; align-items:center; background:var(--white);
                  border:1px solid var(--border); border-radius:var(--radius);
                  margin-bottom:16px; overflow:hidden; }
.dash-doc-stat  { display:flex; align-items:center; gap:10px; padding:14px 20px; flex:1;
                  border-right:1px solid var(--border); }
.dash-doc-stat:last-of-type { border-right:none; }
.dash-doc-stat-icon { width:38px; height:38px; border-radius:9px; display:flex; align-items:center;
                      justify-content:center; font-size:17px; flex-shrink:0; }
.icon-blue   { background:var(--blue-lt);   color:var(--blue); }
.icon-purple { background:var(--purple-lt); color:var(--purple); }
.icon-amber  { background:var(--amber-lt);  color:var(--amber); }
.icon-green  { background:var(--green-lt);  color:var(--green); }
.dash-doc-stat-val { font-size:18px; font-weight:700; color:var(--text); line-height:1; margin-bottom:2px; }
.dash-doc-stat-lbl { font-size:10px; color:var(--gray); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.dash-doc-manage-btn { margin:0 14px; flex-shrink:0; white-space:nowrap; }

/* ── COMM VALUE ── */
.comm-val  { color:var(--green); font-weight:700; font-size:13px; }

/* ── EMPTY STATE ── */
.empty-msg { padding:18px 16px; color:var(--gray); font-size:13px;
             display:flex; align-items:center; gap:7px; }
.empty-msg.ok { color:var(--green); }

/* ── PILLS / BADGES ── */
.pill       { display:inline-block; font-size:10px; font-weight:700; padding:3px 10px;
              border-radius:99px; letter-spacing:.02em; }
.pill-green { background:var(--green-lt); color:var(--green); }
.pill-amber { background:var(--amber-lt); color:var(--amber); }
.pill-red   { background:var(--red-lt);   color:var(--red); }
.pill-blue  { background:var(--blue-lt);  color:var(--blue); }
.pill-gray  { background:var(--gray-lt);  color:var(--gray); border:1px solid var(--border); }

/* Flags */
.flag-high,.flag-critical_high { color:var(--red);   font-weight:700; }
.flag-low,.flag-critical_low   { color:var(--amber); font-weight:700; }
.flag-normal   { color:var(--green); }
.flag-abnormal { color:var(--red);   font-weight:700; }

/* ── TABLES ── */
.table-wrap { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table       { width:100%; border-collapse:collapse; }
thead th    { background:var(--gray-lt); padding:10px 14px; text-align:left; font-size:11px;
              font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:.05em;
              border-bottom:1px solid var(--border); }
tbody td    { padding:11px 14px; font-size:13px; border-bottom:1px solid var(--border); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:#F7F9FC; }

/* ── FORMS ── */
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.form-row.full   { grid-template-columns:1fr; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group label { font-size:12px; font-weight:600; color:var(--text-2); }
.form-group input,
.form-group select,
.form-group textarea { padding:8px 10px; border:1px solid var(--border); border-radius:6px;
                       font-size:13px; color:var(--text); background:var(--white);
                       transition:border-color .15s; width:100%; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,101,192,.12); }
.form-group .hint { font-size:11px; color:var(--gray); }
.form-group .req  { color:var(--red); }
textarea { resize:vertical; min-height:70px; }

/* ── BUTTONS ── */
.btn        { display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
              border-radius:7px; font-size:13px; font-weight:600; cursor:pointer;
              border:1px solid transparent; transition:.15s; text-decoration:none; }
.btn-primary  { background:var(--blue);  color:#fff; border-color:var(--blue); }
.btn-primary:hover  { background:var(--blue-dk); text-decoration:none; color:#fff; }
.btn-success  { background:var(--green); color:#fff; border-color:var(--green); }
.btn-success:hover  { background:#15673d; text-decoration:none; color:#fff; }
.btn-danger   { background:var(--red);   color:#fff; border-color:var(--red); }
.btn-danger:hover   { background:#a93226; text-decoration:none; color:#fff; }
.btn-outline  { background:none; color:var(--text-2); border-color:var(--border); }
.btn-outline:hover { background:var(--gray-lt); text-decoration:none; }
.btn-secondary { background:var(--gray-lt); color:var(--text-2); border-color:var(--border); }
.btn-secondary:hover { background:#e9eaec; text-decoration:none; }
.btn-sm       { padding:5px 11px; font-size:12px; }
.btn-block    { display:flex; width:100%; justify-content:center; }

/* ── ALERTS ── */
.alert        { padding:10px 14px; border-radius:var(--radius); font-size:13px; margin-bottom:14px; }
.alert-success { background:var(--green-lt); color:var(--green); border:1px solid #b7deca; }
.alert-danger  { background:var(--red-lt);   color:var(--red);   border:1px solid #f5c5c2; }
.alert-warning { background:var(--amber-lt); color:var(--amber); border:1px solid #fce49a; }
.alert-info    { background:var(--blue-lt);  color:var(--blue);  border:1px solid #c3d9f0; }
.auto-dismiss  { animation:fadeout 0.5s ease 4s forwards; }
@keyframes fadeout { to { opacity:0; height:0; padding:0; margin:0; overflow:hidden; } }

/* ── AUTH PAGES ── */
.auth-body  { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); }
.auth-card  { background:var(--white); border:1px solid var(--border); border-radius:12px;
              padding:32px; width:100%; max-width:420px; box-shadow:var(--shadow); }
.auth-logo  { text-align:center; margin-bottom:24px; }
.auth-logo .logo-icon { font-size:40px; display:block; margin-bottom:6px; }
.auth-logo h1 { font-size:20px; font-weight:700; color:var(--blue); }
.auth-logo p  { font-size:13px; color:var(--gray); }
.auth-links   { text-align:center; margin-top:16px; font-size:12px; color:var(--gray); }

/* ── PAGINATION ── */
.pagination { display:flex; gap:4px; align-items:center; margin-top:14px; }
.page-link  { padding:5px 10px; border:1px solid var(--border); border-radius:5px;
              font-size:12px; color:var(--text-2); cursor:pointer; }
.page-link.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.page-link:hover:not(.active) { background:var(--gray-lt); }

/* ── UPLOAD BOX ── */
.upload-box { border:2px dashed var(--border); border-radius:var(--radius); padding:16px;
              text-align:center; cursor:pointer; background:var(--gray-lt); }
.upload-box:hover { border-color:var(--blue); background:var(--blue-lt); }
.upload-box i { font-size:24px; color:var(--gray); display:block; margin-bottom:4px; }
.upload-box span { font-size:12px; color:var(--gray); }

/* ── PLAN CARDS ── */
.plan-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.plan-card  { border:2px solid var(--border); border-radius:var(--radius); padding:16px;
              cursor:pointer; transition:.15s; }
.plan-card.selected { border-color:var(--blue); background:var(--blue-lt); }
.plan-card h3 { font-size:14px; font-weight:700; margin-bottom:4px; }
.plan-price   { font-size:22px; font-weight:700; color:var(--blue); margin-bottom:10px; }
.plan-price span { font-size:12px; font-weight:400; color:var(--gray); }
.plan-feat    { font-size:12px; color:var(--gray); line-height:1.9; }
.plan-feat .yes { color:var(--green); }
.plan-feat .no  { color:var(--gray); text-decoration:line-through; opacity:.6; }
.popular-badge { display:inline-block; background:var(--blue); color:#fff; font-size:10px;
                 padding:2px 8px; border-radius:99px; font-weight:700; margin-bottom:6px; }

/* ── OTP INPUTS ── */
.otp-inputs { display:flex; gap:8px; justify-content:center; margin:20px 0; }
.otp-inputs input { width:46px; height:52px; text-align:center; font-size:22px; font-weight:700;
                    border:2px solid var(--border); border-radius:8px; }
.otp-inputs input:focus { border-color:var(--blue); outline:none; }

/* ── STEP BAR ── */
.steps-bar  { display:flex; align-items:center; padding:16px 20px; background:var(--gray-lt);
              border-bottom:1px solid var(--border); gap:0; }
.step-item  { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--gray); }
.step-item.active { color:var(--blue); }
.step-item.done   { color:var(--green); }
.step-num   { width:22px; height:22px; border-radius:50%; border:2px solid currentColor;
              display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.step-line  { flex:1; height:1px; background:var(--border); margin:0 8px; min-width:20px; }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200;
                 align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal      { background:var(--white); border-radius:12px; padding:24px; max-width:500px; width:90%;
              max-height:90vh; overflow-y:auto; box-shadow:0 16px 48px rgba(0,0,0,.2); }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-head h3 { font-size:16px; font-weight:700; }
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--gray); }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .sidebar  { transform:translateX(-100%); transition:.25s; box-shadow:4px 0 20px rgba(0,0,0,.25); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .two-col  { grid-template-columns:1fr; }
  .three-col { grid-template-columns:1fr; }
  .metrics-row { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .plan-grid { grid-template-columns:1fr; }
  .quick-actions { grid-template-columns:repeat(3,1fr); }
  #sidebar-toggle { display:flex !important; }
  .sidebar-overlay { display:block !important; }
  .topbar-search { width:180px; }
}

.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:99; }

/* ── PRINT ── */
@media print {
  .sidebar,.topbar,.no-print { display:none !important; }
  .main-content { margin:0; }
  .page-content { padding:0; }
}

/* Notification panel */
.notif-panel-inner { position:absolute; top:calc(100% + 8px); right:0; width:340px;
                     max-height:460px; overflow-y:auto; background:var(--white);
                     border:1px solid var(--border); border-radius:12px;
                     box-shadow:0 8px 32px rgba(0,0,0,.18); z-index:9999; }