/* =========================================================
   Pharmaline design system — "Clinical Apothecary"
   Pine green / bone paper / mint accent / amber signal
   ========================================================= */

:root{
  --pine:#123c34;
  --pine-deep:#0c2b25;
  --pine-soft:#1d5347;
  --mint:#15b88a;
  --mint-deep:#0e9a72;
  --mint-wash:#e6f6f0;
  --amber:#d99a2b;
  --amber-wash:#fbf1dc;
  --coral:#d8543f;
  --coral-wash:#fbe9e5;
  --paper:#f4f1e8;
  --paper-2:#efeadd;
  --card:#fffdf8;
  --ink:#17201d;
  --ink-soft:#5c6b64;
  --ink-faint:#8a978f;
  --line:#e2ddd0;
  --line-soft:#ece7db;
  --shadow-sm:0 1px 2px rgba(18,60,52,.06), 0 2px 8px rgba(18,60,52,.05);
  --shadow-md:0 6px 24px rgba(18,60,52,.10);
  --shadow-lg:0 24px 60px rgba(12,43,37,.22);
  --radius:16px;
  --radius-sm:10px;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Plus Jakarta Sans", system-ui, sans-serif;
  --font-ar:"IBM Plex Sans Arabic","Plus Jakarta Sans",system-ui,sans-serif;
  --sidebar-w:250px;
}

*{box-sizing:border-box;}
/*
 * Off-canvas panels (the admin sidebar and the field-app drawer) are parked
 * outside the viewport with translateX. A transform does NOT remove them from
 * the scrollable area, so without this the whole page could be dragged sideways
 * on a phone to reveal the parked panel - which is exactly what it looked like:
 * the header shunted off to the left and half a menu showing on the right.
 */
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(21,184,138,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(18,60,52,.06), transparent 55%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.5;
}
[dir="rtl"] body{font-family:var(--font-ar);}
[dir="rtl"] .lbl,[dir="rtl"] .btn,[dir="rtl"] .badge{font-family:var(--font-ar);}

a{color:var(--mint-deep);text-decoration:none;}
code{background:var(--paper-2);padding:2px 6px;border-radius:6px;font-size:.85em;color:var(--pine);}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--pine);margin:0;font-weight:600;letter-spacing:-.01em;}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:var(--font-ar);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:12px;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  background:var(--paper-2);color:var(--pine);line-height:1;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--pine);color:#fbfaf5;box-shadow:0 6px 18px rgba(18,60,52,.22);}
.btn-primary:hover{background:var(--pine-deep);}
.btn-mint{background:var(--mint);color:#04160f;box-shadow:0 6px 18px rgba(21,184,138,.28);}
.btn-mint:hover{background:var(--mint-deep);color:#fff;}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--pine);}
.btn-ghost:hover{background:var(--paper-2);}
.btn-danger{background:var(--coral-wash);color:var(--coral);border-color:transparent;}
.btn-danger:hover{background:var(--coral);color:#fff;}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:9px;}
.btn-block{width:100%;}
.btn-icon{padding:8px;border-radius:9px;width:34px;height:34px;}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px;
}

/* ---------- Forms ---------- */
.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;letter-spacing:.01em;}
.inp,select.inp,textarea.inp{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;
  background:#fff;font-family:inherit;font-size:14.5px;color:var(--ink);
  transition:border .18s ease, box-shadow .18s ease;
}
textarea.inp{resize:vertical;min-height:80px;}
.inp:focus,select.inp:focus,textarea.inp:focus{
  outline:none;border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-wash);
}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6b64' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;}
[dir="rtl"] select.inp{background-position:left 14px center;padding-right:13px;padding-left:34px;}

/* ---------- Alerts ---------- */
.alert{padding:13px 16px;border-radius:12px;font-size:14px;border:1px solid transparent;}
.alert-ok{background:var(--mint-wash);color:var(--pine);border-color:#c7eadd;}
.alert-warn{background:var(--amber-wash);color:#8a6414;}
.alert-err{background:var(--coral-wash);color:#a5321f;}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;letter-spacing:.02em;}
.badge-mint{background:var(--mint-wash);color:var(--mint-deep);}
.badge-amber{background:var(--amber-wash);color:#8a6414;}
.badge-coral{background:var(--coral-wash);color:var(--coral);}
.badge-grey{background:var(--paper-2);color:var(--ink-soft);}
.badge-pine{background:rgba(18,60,52,.1);color:var(--pine);}
.badge-class{width:24px;height:24px;justify-content:center;padding:0;border-radius:8px;font-family:var(--font-display);font-weight:700;}
.badge-class-a{background:var(--pine);color:#fff;}
.badge-class-b{background:var(--mint-wash);color:var(--mint-deep);}
.badge-class-c{background:var(--paper-2);color:var(--ink-soft);}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.dot-planned{background:var(--amber);}
.dot-done{background:var(--mint);}
.dot-missed{background:var(--coral);}
.dot-postponed{background:var(--ink-faint);}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;background:var(--pine-deep);
  color:#d7e5e0;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;
  z-index:40;
}
[dir="rtl"] .sidebar{inset:0 0 0 auto;}
.sidebar-brand{padding:24px 22px 18px;}
.sidebar-brand .mark{font-family:var(--font-display);font-size:24px;font-weight:700;color:#fff;letter-spacing:-.02em;}
.sidebar-brand .mark span{color:var(--mint);}
.sidebar-brand .co{font-size:12px;color:#7fa79c;margin-top:2px;}
.nav{padding:8px 12px;flex:1;overflow-y:auto;}
.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;
  color:#bcd2cb;font-weight:500;font-size:14.5px;margin-bottom:2px;transition:background .15s,color .15s;
}
.nav a svg{width:19px;height:19px;flex-shrink:0;opacity:.85;}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav a.active{background:var(--mint);color:#04160f;font-weight:600;}
.nav a.active svg{opacity:1;}
.sidebar-foot{padding:16px;border-top:1px solid rgba(255,255,255,.08);}
.sidebar-user{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.avatar{width:38px;height:38px;border-radius:11px;background:var(--mint);color:#04160f;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);flex-shrink:0;}
.sidebar-user .meta{min-width:0;}
.sidebar-user .meta b{color:#fff;font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user .meta small{color:#7fa79c;font-size:11.5px;}

.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column;}
[dir="rtl"] .main{margin-left:0;margin-right:var(--sidebar-w);}

.topbar{
  height:66px;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;position:sticky;top:0;z-index:30;
  background:rgba(244,241,232,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);
}
.topbar .page-title{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--pine);}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.lang-toggle{display:flex;background:var(--paper-2);border-radius:10px;padding:3px;}
.lang-toggle a{padding:5px 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-soft);}
.lang-toggle a.on{background:#fff;color:var(--pine);box-shadow:var(--shadow-sm);}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.hamburger svg{width:26px;height:26px;color:var(--pine);}

.content{padding:26px;flex:1;}

/* ---------- Stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
.stat{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);}
.stat .ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.stat .ico svg{width:22px;height:22px;}
.stat .num{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--pine);line-height:1;}
.stat .cap{font-size:13px;color:var(--ink-soft);margin-top:6px;}
.stat.mint .ico{background:var(--mint-wash);color:var(--mint-deep);}
.stat.pine .ico{background:rgba(18,60,52,.09);color:var(--pine);}
.stat.amber .ico{background:var(--amber-wash);color:var(--amber);}
.stat.coral .ico{background:var(--coral-wash);color:var(--coral);}

/* ---------- KPI cards ----------
 * The small figure cards that head most report screens.
 *
 * These lived only inside three pages' own <style> blocks (team performance,
 * GPS audit, stock) under a second set of class names - so the four screens
 * using the shared names (visit reports, achievements, visit targets, sales
 * targets) had no styling at all and fell back to plain stacked text. One
 * definition here, and both markup shapes are covered: .kn/.kc puts the number
 * first, .k-label/.k-value puts the caption first.
 *
 * auto-fit rather than a fixed column count, because the screens carry two,
 * three or four cards and each should fill its row. The phone breakpoints
 * further down override this to two across, then one. A page that wants a
 * fixed count still sets its own.
 *
 * .perf-kpis is here for the same reason: the three pages using it scope it to
 * their own id, which does not reach a modal (those are appended to <body>), so
 * the rep drill-down on team performance drew its six cards as bare text.
 */
.kpi-row,.perf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px;}
.kpi{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm);}
.kpi .kn,.kpi .k-value{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--pine);line-height:1;}
.kpi .kc,.kpi .k-label{font-size:12.5px;color:var(--ink-soft);}
.kpi .k-label{margin-bottom:7px;}
.kpi .kc,.kpi .k-sub{margin-top:5px;}
.kpi.accent .kn,.kpi.accent .k-value,.kpi.good .kn,.kpi.good .k-value{color:var(--mint-deep);}
.kpi.bad .kn,.kpi.bad .k-value{color:var(--coral);}

/* ---------- Date-range pills ----------
 * The Today / 7 days / 30 days / this month / custom switch, and the status
 * tabs built on the same component. Defined here for the same reason as the
 * cards above: visit reports used the class and got bare browser buttons.
 */
.range-pills{display:flex;gap:6px;background:var(--paper-2);padding:4px;border-radius:12px;flex-wrap:wrap;}
.range-pills button{border:none;background:transparent;padding:8px 14px;border-radius:9px;
  font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.range-pills button:hover{color:var(--pine);}
.range-pills button.on{background:#fff;color:var(--pine);box-shadow:var(--shadow-sm);}

/* ---------- Section header ---------- */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.section-head h2{font-size:19px;}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.search-box{position:relative;}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-faint);}
[dir="rtl"] .search-box svg{left:auto;right:12px;}
.search-box .inp{padding-left:36px;min-width:220px;}
[dir="rtl"] .search-box .inp{padding-left:13px;padding-right:36px;}

/* ---------- Table ---------- */
/*
 * Tables scroll sideways instead of being clipped.
 *
 * This used to be overflow:hidden, which silently cut every column past the
 * screen edge on a phone with no way to reach them - the reports simply looked
 * broken. -webkit-overflow-scrolling keeps the swipe smooth on iOS.
 */
.table-wrap{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
table.tbl{width:100%;border-collapse:collapse;}
table.tbl th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-faint);font-weight:700;padding:13px 16px;border-bottom:1px solid var(--line-soft);
  background:var(--paper-2);
}
[dir="rtl"] table.tbl th{text-align:right;}
table.tbl td{padding:13px 16px;border-bottom:1px solid var(--line-soft);font-size:14px;vertical-align:middle;}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl tbody tr{transition:background .12s;}
table.tbl tbody tr:hover{background:var(--paper);}
.tbl .row-actions{display:flex;gap:6px;justify-content:flex-end;}
[dir="rtl"] .tbl .row-actions{justify-content:flex-start;}
.tbl .cell-name{font-weight:600;color:var(--pine);}
.tbl .cell-sub{font-size:12px;color:var(--ink-faint);}

/* Sortable headings: click once for ascending, again for descending, a third
   time to return to the order the server sent. The arrow is drawn in the
   heading itself so no page has to leave room for a control. */
table.tbl th.th-sort{cursor:pointer;white-space:nowrap;user-select:none;-webkit-user-select:none;}
table.tbl th.th-sort:hover{color:var(--pine);}
table.tbl th.th-sort::after{content:'\2195';font-size:11px;opacity:.32;margin-left:6px;}
[dir="rtl"] table.tbl th.th-sort::after{margin-left:0;margin-right:6px;}
table.tbl th.th-sort.sort-asc::after{content:'\2191';opacity:1;color:var(--mint-deep);}
table.tbl th.th-sort.sort-desc::after{content:'\2193';opacity:1;color:var(--mint-deep);}
.empty{padding:48px 20px;text-align:center;color:var(--ink-faint);}
.empty svg{width:44px;height:44px;opacity:.4;margin-bottom:10px;}

.checkbox{width:17px;height:17px;accent-color:var(--mint);cursor:pointer;}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(12,43,37,.42);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;z-index:60;padding:40px 16px;overflow-y:auto;
}
.modal-overlay.show{display:flex;}
.modal{
  width:100%;max-width:560px;background:var(--card);border-radius:20px;box-shadow:var(--shadow-lg);
  animation:modalIn .22s cubic-bezier(.2,.8,.2,1);overflow:hidden;
}
.modal.wide{max-width:760px;}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line-soft);}
.modal-head h3{font-size:18px;}
.modal-close{background:none;border:none;cursor:pointer;color:var(--ink-faint);padding:4px;border-radius:8px;line-height:0;}
.modal-close:hover{background:var(--paper-2);color:var(--ink);}
.modal-close svg{width:22px;height:22px;}
.modal-body{padding:24px;max-height:66vh;overflow-y:auto;}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--line-soft);background:var(--paper);}
[dir="rtl"] .modal-foot{justify-content:flex-start;}

.form-row{display:flex;gap:14px;}
.form-row>div{flex:1;}
.form-field{margin-bottom:15px;}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:90;display:flex;flex-direction:column;gap:10px;}
[dir="rtl"] .toast-wrap{right:auto;left:24px;}
.toast{background:var(--pine);color:#fff;padding:13px 18px;border-radius:12px;box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;animation:toastIn .25s ease;display:flex;align-items:center;gap:10px;}
.toast.err{background:var(--coral);}
.toast svg{width:18px;height:18px;flex-shrink:0;}
@keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;}
.login-visual{
  flex:1;background:linear-gradient(150deg,var(--pine) 0%, var(--pine-deep) 100%);
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px;color:#dcece7;
}
.login-visual::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 30%, rgba(21,184,138,.25), transparent 40%),radial-gradient(circle at 80% 70%, rgba(21,184,138,.15), transparent 45%);}
.hex-field{position:absolute;inset:0;opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1' d='M28 0l24 14v28L28 56 4 42V14zM28 56l24 14v28'/%3E%3C/svg%3E");}
.login-visual .lv-top{position:relative;}
.login-visual .lv-mark{font-family:var(--font-display);font-size:30px;font-weight:700;color:#fff;}
.login-visual .lv-mark span{color:var(--mint);}
.login-visual .lv-quote{position:relative;max-width:420px;}
.login-visual .lv-quote h2{color:#fff;font-size:30px;line-height:1.25;font-weight:600;}
.login-visual .lv-quote p{color:#9dc0b6;margin-top:14px;font-size:15px;}
.login-form-side{width:min(460px,100%);display:flex;flex-direction:column;justify-content:center;padding:48px;}
.login-form-side .lf-head{margin-bottom:28px;}
.login-form-side .lf-head h1{font-size:28px;}
.login-form-side .lf-head p{color:var(--ink-soft);margin-top:6px;}

/* ---------- Utility ---------- */
.muted{color:var(--ink-soft);}
.faint{color:var(--ink-faint);}
.mt-0{margin-top:0;}.mt-1{margin-top:8px;}.mt-2{margin-top:16px;}.mt-3{margin-top:24px;}
.mb-2{margin-bottom:16px;}
.flex{display:flex;}.between{justify-content:space-between;}.items-center{align-items:center;}.gap-2{gap:10px;}
/* Three screens write the Tailwind-style name for the same thing. Without this
   the rep roll-up rows on Sales targets and Achievements, and the pager under
   Visit reports, silently lost their space-between and bunched up on one side. */
.justify-between{justify-content:space-between;}
.text-right{text-align:right;}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
.spinner.dark{border-color:rgba(18,60,52,.25);border-top-color:var(--pine);}
@keyframes spin{to{transform:rotate(360deg);}}
.hidden{display:none !important;}

/* Two-column split for wide screens in modals */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* Product pick list inside visit modal */
.pick-list{border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.pick-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-soft);}
.pick-item:last-child{border-bottom:none;}
.pick-item.on{background:var(--mint-wash);}
.pick-item .pi-main{flex:1;min-width:0;}
.pick-item .pi-main b{color:var(--pine);font-size:14px;}
.pick-item .pi-main small{display:block;color:var(--ink-faint);font-size:12px;}
.pick-item .pi-ctrl{display:flex;gap:8px;align-items:center;}
.pick-item select,.pick-item input{padding:7px 9px;font-size:13px;border:1px solid var(--line);border-radius:9px;background:#fff;}
.pick-item .qty{width:64px;}

/* Visit list (rep) */
.visit-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-sm);margin-bottom:12px;transition:transform .12s,box-shadow .2s;cursor:pointer;}
.visit-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
.visit-card .vc-icon{width:46px;height:46px;border-radius:13px;background:var(--mint-wash);color:var(--pine);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;flex-shrink:0;}
.visit-card .vc-main{flex:1;min-width:0;}
.visit-card .vc-main b{color:var(--pine);font-size:15px;display:block;}
.visit-card .vc-main small{color:var(--ink-soft);font-size:12.5px;}
.visit-card .vc-status{flex-shrink:0;}

/* Section heading inside a detail modal (the visit-report drill-down uses it
   for Products presented / Doctor feedback / Follow-up). */
.dsec-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint);margin-bottom:6px;}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:840px){
  :root{--sidebar-w:0px;}
  .sidebar{transform:translateX(-100%);transition:transform .25s ease,visibility .25s;
           width:250px;box-shadow:var(--shadow-lg);visibility:hidden;}
  .sidebar.open{visibility:visible;}
  [dir="rtl"] .sidebar{transform:translateX(100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  [dir="rtl"] .main{margin-right:0;}
  .hamburger{display:block;}
  .content{padding:18px;}
  .form-row{flex-direction:column;gap:0;}
  .grid-2{grid-template-columns:1fr;}
  .login-visual{display:none;}
  .login-form-side{width:100%;padding:32px 22px;}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(12,43,37,.4);z-index:35;display:none;}
  .sidebar-backdrop.show{display:block;}
}
@media (max-width:520px){
  .stat-grid{grid-template-columns:1fr;}
  .modal-body{max-height:none;}
}

/* Searchable select (PL.searchify) */
.ssel{position:relative;display:inline-block;vertical-align:middle;}
.ssel-inp{min-width:170px;}
.ssel-panel{position:absolute;top:calc(100% + 4px);inset-inline-start:0;min-width:100%;max-width:340px;max-height:280px;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(10,30,22,.14);z-index:80;}
.ssel-opt{padding:8px 12px;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ssel-opt:hover,.ssel-opt.on{background:var(--paper-2);}
.ssel-none{padding:10px 12px;color:var(--ink-faint);font-size:13px;}

/* ============================================================
   MOBILE FIRST
   The people who use this all day are in the field on a phone:
   reps and district managers checking a schedule, checking in,
   and admins glancing at reports. Everything below makes the
   back-office screens usable at 360px wide.
   ============================================================ */

/* A table never squeezes its columns into unreadable slivers - it keeps a
   sensible minimum and the wrapper scrolls. Nothing is ever unreachable. */
table.tbl{min-width:640px;}

/* The first column stays put while the rest scrolls, so you never lose track
   of which rep or doctor a row belongs to. */
.table-wrap.sticky-first table.tbl th:first-child,
.table-wrap.sticky-first table.tbl td:first-child{
  position:sticky;inset-inline-start:0;z-index:2;background:var(--card);
}
.table-wrap.sticky-first table.tbl thead th:first-child{z-index:3;background:var(--paper-2);}

/* A hint that there is more to the right, shown only while it can scroll. */
.scroll-hint{display:none;font-size:11.5px;color:var(--ink-faint);padding:6px 2px 0;}

@media (max-width:840px){
  .scroll-hint.on{display:block;}
}

@media (max-width:600px){
  /* --- layout --- */
  .content{padding:14px 12px 28px;}
  .section-head{flex-wrap:wrap;gap:10px;}
  .section-head h2{font-size:19px;}
  .card{padding:14px;border-radius:14px;}

  /* --- filters: full-width, one per row, thumb-sized --- */
  .toolbar{gap:8px;}
  .toolbar > *{flex:1 1 100%;min-width:0;}
  .toolbar .inp,
  .toolbar select.inp,
  .filters .inp,
  .filters select.inp{width:100% !important;min-width:0 !important;font-size:16px;padding:11px 12px;}
  .filters{display:flex;flex-wrap:wrap;gap:8px;}
  .filters > *{flex:1 1 100%;}

  /* The search-select must fill the row like a normal field, and its panel
     must not spill off the screen edge. */
  .ssel{display:block;width:100%;}
  .ssel-inp{min-width:0;width:100%;font-size:16px;}
  .ssel-panel{max-width:calc(100vw - 40px);}

  /* --- date range pills wrap instead of overflowing --- */
  .range-pills{display:flex;flex-wrap:wrap;gap:6px;width:100%;}
  .range-pills button{flex:1 1 auto;white-space:nowrap;}

  /* --- tables --- */
  table.tbl{min-width:560px;}
  table.tbl th{font-size:11px;padding:10px 11px;white-space:nowrap;}
  table.tbl td{font-size:13px;padding:11px;}
  .tbl .cell-sub{font-size:11.5px;}

  /* --- KPI cards: two across, not one giant column --- */
  .kpi-row,.perf-kpis,.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
  .kpi,.stat-card{padding:12px;}
  .kpi .k-value,.stat-card .s-value,.kpi .kn{font-size:20px;}
  .kpi .k-label,.stat-card .s-label{font-size:11px;}

  /* --- forms and modals --- */
  .modal{width:calc(100vw - 20px);max-width:none;border-radius:14px;}
  .modal-body{padding:14px;}
  .modal-foot{flex-wrap:wrap;gap:8px;}
  .modal-foot .btn{flex:1 1 auto;justify-content:center;}
  /* 16px stops iOS zooming the page when a field is focused. */
  .inp,select.inp,textarea.inp{font-size:16px;}
  .form-row{flex-direction:column;gap:0;}

  /* --- buttons are thumb-sized --- */
  .btn{min-height:42px;}
  .btn-sm{min-height:34px;}
  .section-head .btn{flex:1 1 auto;justify-content:center;}

  /* --- import/export cards stack --- */
  .grid-2{grid-template-columns:1fr;gap:12px;}
}

@media (max-width:400px){
  .kpi-row,.perf-kpis,.stat-grid{grid-template-columns:1fr;}
  table.tbl{min-width:520px;}
}

/* ---------- Notification bell ---------- */
.notif-wrap{position:relative;}
.notif-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);
  color:var(--ink-soft);cursor:pointer;}
.notif-bell:hover{background:var(--paper-2);}
.notif-badge{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--coral,#d9534f);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}
.notif-panel{display:none;position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:320px;max-width:calc(100vw - 24px);
  max-height:70vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(10,30,22,.18);z-index:90;}
.notif-panel.on{display:block;}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--card);}
.notif-head button{background:none;border:none;color:var(--mint-deep,#0b7a5a);font-size:12px;font-weight:700;cursor:pointer;}
.notif-item{padding:11px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer;}
.notif-item:hover{background:var(--paper);}
.notif-item b{display:block;font-size:13.5px;color:var(--pine);}
.notif-item span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.notif-item small{display:block;font-size:11px;color:var(--ink-faint);margin-top:4px;}
.notif-item.unread{background:rgba(74,222,164,.09);}
.notif-item.unread b::before{content:'';display:inline-block;width:7px;height:7px;border-radius:99px;
  background:var(--mint-deep,#0b7a5a);margin-inline-end:7px;vertical-align:middle;}
.notif-empty{padding:20px 14px;text-align:center;color:var(--ink-faint);font-size:13px;}

/* ---------- Install help sheet ---------- */
.pwa-help{display:none;position:fixed;inset:0;background:rgba(12,43,37,.45);z-index:200;
  align-items:flex-end;justify-content:center;}
.pwa-help[style*="block"]{display:flex !important;}
.pwa-help-inner{background:var(--card);border-radius:16px 16px 0 0;padding:22px 20px 26px;
  width:100%;max-width:460px;text-align:center;}
.pwa-help-inner p{font-size:14.5px;line-height:1.6;color:var(--ink);margin:0 0 16px;}

@media (max-width:600px){
  .notif-panel{width:calc(100vw - 24px);}
  .notif-bell{width:40px;height:40px;}
}

/* ---------- Brand logo ----------
   The mark is navy + green, drawn for a light background, so on the dark
   sidebar and the dark field-app header it sits on a white tile to stay
   legible rather than disappearing into the green. */
.sidebar-brand .brand-logo{display:block;width:52px;height:52px;border-radius:12px;
  background:#fff;padding:5px;object-fit:contain;margin-bottom:10px;}
.sidebar-brand .mark{font-family:var(--font-display);font-size:18px;line-height:1.25;font-weight:700;color:#fff;letter-spacing:-.01em;}
.login-visual .lv-logo{display:block;width:150px;max-width:60%;height:auto;
  background:#fff;border-radius:16px;padding:12px;margin-bottom:16px;}
.login-visual .lv-mark{font-size:24px;}