:root{
  --primary:#1a56c4;
  --primary-dark:#0d3a8f;
  --danger:#e0334f;
  --warning:#f4a53a;
  --success:#2fae66;
  --bg:#f4f6fa;
  --card:#ffffff;
  --border:#e5e9f0;
  --text:#1c1f26;
  --muted:#7b8496;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;}
body{font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
/* Only the app-shell pages (index/admin/manage-lists) use the fixed-header,
   scrollable-middle, fixed-footer layout; auth pages (login/register) keep
   normal page scrolling since they don't have an .app-scroll wrapper. */
body.app-page{overflow:hidden;}

/* App shell: fixed-height column — header and bottom nav stay put,
   only .app-scroll (the middle) scrolls. Uses dvh where supported so
   mobile browser toolbars showing/hiding doesn't clip content. */
.app-shell{
  max-width:480px;margin:0 auto;background:var(--bg);position:relative;
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  overflow:hidden;
}
.app-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* header */
.app-header{flex:0 0 auto;padding:16px 16px 8px;background:linear-gradient(135deg,#eaf1ff,#fdeef0);}
.patient-row{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;}
.avatar{width:34px;height:34px;border-radius:50%;background:#ffe1b0;color:#a05a00;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}

/* tab nav */
.tab-nav{display:flex;gap:5px;margin-top:14px;}
.tab-btn{flex:1 1 0;min-width:0;text-align:center;background:#fff;border:1px solid var(--border);padding:9px 2px;font-size:11px;
  color:var(--muted);cursor:pointer;border-radius:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:600;box-shadow:0 1px 2px rgba(20,30,60,.03);}
.tab-btn .icon{display:block;font-size:17px;margin-bottom:2px;}
.tab-btn.active{color:#fff;background:var(--primary);border-color:var(--primary);box-shadow:0 3px 8px rgba(26,86,196,.28);}

/* content */
.tab-content{padding:16px;display:none;}
.tab-content.active{display:block;}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(20,30,60,.04);}
.card h3{margin:0 0 10px;font-size:15px;}
.section-title{font-size:16px;font-weight:700;margin:18px 0 10px;}

/* pill toggle */
/* ================================================================
   REUSABLE TAB / SEGMENTED-CONTROL FAMILY
   Three flavors, one consistent visual language (primary blue = active):
   - .tab-btn      top-level app section tabs (Overview/Health/Medication/...)
   - .pill-toggle  a 2-4 option segmented switch within a tab (e.g.
                   "My Medications | Intake Log", "Users | System")
   - .chip-row/.chip  a row of filter toggles (e.g. "All | Out of Range")
   ================================================================ */
.pill-toggle{display:flex;background:#eef1f6;border-radius:999px;padding:4px;margin-bottom:14px;}
.pill-toggle button{flex:1;border:none;background:none;padding:10px;border-radius:999px;font-weight:600;color:var(--muted);cursor:pointer;}
.pill-toggle button.active{background:var(--primary);color:#fff;box-shadow:0 2px 6px rgba(26,86,196,.25);}

.chip-row{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;}
.chip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 14px;font-size:13px;white-space:nowrap;cursor:pointer;color:var(--text);font-weight:600;}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 2px 6px rgba(26,86,196,.25);}

/* dose grid, matches medication screenshot */
.dose-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:10px 0;}
.dose-cell{padding:10px 4px;text-align:center;font-size:12px;border-right:1px solid var(--border);}
.dose-cell:last-child{border-right:none;}
.dose-cell.am{background:#fdeee0;}
.dose-cell.pm{background:#eef1ff;}
.dose-cell .lbl{color:var(--muted);display:block;margin-bottom:4px;}
.dose-cell .val{font-size:16px;font-weight:700;}
.freq-note{background:#f5f6f9;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#444;margin-top:4px;}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;}
.badge.high{background:#fde4e7;color:var(--danger);}
.badge.medium{background:#fff3da;color:#a3720c;}
.btn-link{display:inline-block;font-size:13px;color:var(--primary);text-decoration:none;padding:6px 10px;}
.badge.low{background:#fff3da;color:#a3720c;}
.badge.normal{background:#e5f7ec;color:var(--success);}

.list-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);}
.list-row:last-child{border-bottom:none;}
.list-row .name{font-weight:600;font-size:14px;}
.list-row .sub{font-size:12px;color:var(--muted);}
.list-row .value{font-weight:700;font-size:15px;}
.list-row .value.high{color:var(--danger);}
.list-row .value.low{color:#a3720c;}

.row-actions{display:flex;gap:10px;margin-top:4px;}
.row-actions button{border:none;background:none;color:var(--primary);font-size:12px;cursor:pointer;padding:0;}
.row-actions button.danger{color:var(--danger);}

.fab{position:fixed;right:calc(50% - 240px + 20px);bottom:80px;width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:26px;box-shadow:0 4px 10px rgba(0,0,0,.2);cursor:pointer;z-index:40;}
@media (max-width:520px){.fab{right:20px;}}

.bottom-nav{flex:0 0 auto;background:#fff;border-top:1px solid var(--border);display:flex;width:100%;}
.bottom-nav a,.bottom-nav button{flex:1;text-align:center;padding:8px 0 10px;font-size:11px;color:var(--muted);text-decoration:none;
  background:none;border:none;cursor:pointer;font-family:inherit;}
.bottom-nav a.active,.bottom-nav button.active{color:var(--primary);font-weight:700;}
.bottom-nav .bn-icon{display:block;font-size:19px;margin-bottom:2px;}

/* modal (reusable add/edit component) */
.modal-overlay{position:fixed;inset:0;background:rgba(15,20,35,.45);display:none;align-items:flex-end;justify-content:center;z-index:100;}
.modal-overlay.open{display:flex;}
.modal-sheet{background:#fff;width:100%;max-width:480px;border-radius:18px 18px 0 0;max-height:88vh;overflow-y:auto;padding:18px 18px 24px;}
.modal-sheet h3{margin-top:0;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600;}
.form-group select,.form-group input,.form-group textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;background:#fafbfd;}
.form-row{display:flex;gap:10px;}
.form-row .form-group{flex:1;}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;border:none;font-weight:700;font-size:14px;cursor:pointer;}
.btn-primary{background:var(--primary);color:#fff;width:100%;}
.btn-secondary{background:#eef1f6;color:var(--text);}
.modal-actions{display:flex;gap:10px;margin-top:8px;}
.close-x{position:absolute;top:14px;right:18px;background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.toolbar .btn-secondary{padding:8px 12px;font-size:12.5px;}

.gauge-wrap{display:flex;align-items:center;gap:16px;}
.gauge-wrap.clickable{cursor:pointer;}
.gauge-wrap .sub a{color:var(--primary);text-decoration:none;font-weight:600;}
.insight{border-left:4px solid var(--muted);background:#f7f8fb;border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:13px;}
.insight.warning{border-color:var(--warning);background:#fff8ec;}
.insight.critical{border-color:var(--danger);background:#fdeef0;}
.insight.info{border-color:var(--primary);background:#eef3ff;}

@media print{
  .bottom-nav,.tab-nav,.fab,.app-header,.no-print{display:none !important;}
  .app-shell{max-width:100%;padding:0;height:auto;overflow:visible;display:block;}
  .app-scroll{overflow:visible;height:auto;}
  .card{break-inside:avoid;border:1px solid #999;}
}

/* ---------------- Visual identification: food / medicine icons ---------------- */
.visual-picker{display:flex;flex-wrap:wrap;gap:10px;max-height:260px;overflow-y:auto;padding:4px 2px;}
.visual-option{display:flex;flex-direction:column;align-items:center;gap:4px;width:78px;padding:10px 6px;
  border:2px solid var(--border);border-radius:12px;background:#fafbfd;cursor:pointer;}
.visual-option .vp-icon{font-size:28px;line-height:1;}
.visual-option .vp-img{width:40px;height:40px;border-radius:8px;object-fit:contain;}
.visual-option .vp-label{font-size:10.5px;text-align:center;color:var(--text);line-height:1.2;}
.visual-option.selected{border-color:var(--primary);background:#eef3ff;box-shadow:0 0 0 2px rgba(26,86,196,.15);}

.row-icon{font-size:30px;line-height:1;width:40px;text-align:center;flex-shrink:0;}
.row-icon-img{width:40px;height:40px;border-radius:10px;object-fit:contain;flex-shrink:0;}

.med-visual{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.pill-swatch{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;border:1px solid rgba(0,0,0,.08);flex-shrink:0;}
.med-photo{width:46px;height:46px;border-radius:12px;object-fit:cover;border:1px solid var(--border);flex-shrink:0;}

/* ---------------- Simple / Large-text mode (for elderly & low-literacy users) ---------------- */
body.simple-mode{font-size:18px;}
body.simple-mode .card{padding:20px;}
body.simple-mode .tab-btn{font-size:14px;padding:14px 4px;}
body.simple-mode .tab-btn .icon{font-size:22px;}
body.simple-mode .btn,body.simple-mode .row-actions button{font-size:15px;padding:12px 16px;}
body.simple-mode .dose-cell .val{font-size:20px;}
body.simple-mode .dose-cell .lbl{font-size:13px;}
body.simple-mode .list-row .name{font-size:17px;}
body.simple-mode .list-row .sub{font-size:14px;}
body.simple-mode .visual-option{width:92px;padding:12px 8px;}
body.simple-mode .visual-option .vp-icon{font-size:34px;}
body.simple-mode .visual-option .vp-img{width:52px;height:52px;}
body.simple-mode .visual-option .vp-label{font-size:12px;}
body.simple-mode .row-icon{font-size:36px;width:48px;}
body.simple-mode .row-icon-img{width:52px;height:52px;}
body.simple-mode .pill-swatch,body.simple-mode .med-photo{width:56px;height:56px;}

/* Read-aloud / photo action buttons need generous tap targets, especially in row-actions */
.row-actions button{min-height:36px;padding:6px 10px;font-size:12.5px;border-radius:8px;background:#f2f4f8;}
.row-actions button.danger{background:#fdeef0;}

/* ---------------- Responsive polish ---------------- */
@media (min-width:600px){
  .app-shell{max-width:600px;box-shadow:0 0 30px rgba(20,30,60,.06);}
}
@media (min-width:900px){
  .app-shell{max-width:900px;margin:20px auto;border-radius:20px;height:calc(100vh - 40px);height:calc(100dvh - 40px);}
  .bottom-nav{display:none;}                 /* the drawer + top tabs already cover navigation on desktop */
  .tab-nav{flex-wrap:wrap;}
  .app-header{padding-bottom:4px;}
}
@media (min-width:1100px){
  .app-shell{max-width:1080px;}
}
@media (max-width:360px){
  .card{padding:12px;}
  .dose-cell{padding:8px 2px;font-size:11px;}
  .visual-option{width:70px;}
}

/* Desktop dashboard grid: card lists become multi-column once there's room
   for more than one 300px card, and collapse back to a single column on
   mobile automatically — no separate mobile/desktop markup needed. */
.card-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.card-grid .card{margin-bottom:0;}
@media (min-width:640px){
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
}

/* Affordance for rows that open a detail view on tap */
.list-row.clickable{cursor:pointer;}
.row-chevron{font-size:20px;color:var(--muted);margin-left:6px;flex-shrink:0;align-self:center;}

/* Visible upload dropzone (replaces a bare, easy-to-miss native file input) */
.pdf-dropzone{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  border:2px dashed var(--border);border-radius:14px;padding:20px 12px;cursor:pointer;background:#fafbfd;}
.pdf-dropzone:active{background:#eef3ff;border-color:var(--primary);}
.pdf-dropzone.has-file{border-style:solid;border-color:var(--primary);background:#eef3ff;}
.pdf-dropzone-icon{font-size:28px;line-height:1;}
.pdf-dropzone-text{font-weight:700;font-size:13.5px;color:var(--text);}
.pdf-dropzone-sub{font-size:11.5px;color:var(--muted);}

/* ---------------- Reminder alert popup (shown alongside sound + Notification) ---------------- */
.reminder-popup-overlay{position:fixed;inset:0;background:rgba(15,20,35,.55);z-index:300;
  display:flex;align-items:center;justify-content:center;padding:20px;}
.reminder-popup{background:#fff;border-radius:18px;padding:22px 20px;max-width:340px;width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,.25);text-align:center;animation:reminder-pop .25s ease;}
.reminder-popup-title{font-size:18px;font-weight:800;margin-bottom:8px;}
.reminder-popup-msg{font-size:14px;color:var(--muted);line-height:1.4;}
@keyframes reminder-pop{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}

/* ---------------- Search bar with voice search (diet entry food picker) ---------------- */
.search-with-voice{display:flex;gap:8px;margin-bottom:10px;}
.search-with-voice input{flex:1;min-height:40px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;}
.search-with-voice button{flex-shrink:0;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:#fff;font-size:18px;cursor:pointer;}
.search-with-voice button:disabled{opacity:.6;}

/* ---------------- My Medications: Before/After Food section dividers ---------------- */
.med-section-divider{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin:16px 0 4px;font-weight:700;font-size:13px;color:var(--muted);}
.med-section-divider:first-child{margin-top:0;}
.med-section-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.food-timing-badge{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;margin-top:4px;}
.zoomable-photo{cursor:zoom-in;}
.mine-tag{display:block;font-size:9px;font-weight:700;color:var(--primary);background:#e9f0ff;border-radius:6px;padding:1px 5px;margin-top:2px;}
.photo-zoom-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;}
.photo-zoom-overlay img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;}

/* ---------------- Header quick-access icons (Exercise status + Quick Glucose Entry) ---------------- */
.header-quick-icon{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;
  font-size:17px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.header-quick-icon.session-active{background:#eef3ff;border-color:var(--primary);animation:header-icon-pulse 1.4s ease-in-out infinite;}
@keyframes header-icon-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
/* ---------------- Left slide-out drawer panel ---------------- */
.drawer-overlay{position:fixed;inset:0;background:rgba(15,20,35,.45);display:none;z-index:150;}
.drawer-overlay.open{display:block;}
.drawer-panel{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;background:#fff;z-index:151;
  transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;box-shadow:4px 0 20px rgba(0,0,0,.15);}
.drawer-overlay.open .drawer-panel{transform:translateX(0);}
.drawer-header{background:linear-gradient(135deg,#eaf1ff,#fdeef0);padding:22px 18px;}
.drawer-avatar{width:56px;height:56px;border-radius:50%;background:#ffe1b0;color:#a05a00;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:22px;margin-bottom:10px;}
.drawer-name{font-weight:700;font-size:16px;}
.drawer-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.drawer-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  padding:16px 18px 6px;font-weight:700;}
.drawer-link{display:flex;align-items:center;gap:12px;padding:12px 18px;color:var(--text);text-decoration:none;
  font-size:14px;font-weight:600;border:none;background:none;width:100%;text-align:left;cursor:pointer;font-family:inherit;}
.drawer-link:active{background:#f4f6fa;}
.drawer-link .dl-icon{font-size:18px;width:22px;text-align:center;}
.drawer-link.danger{color:var(--danger);}
.drawer-divider{height:1px;background:var(--border);margin:8px 0;}

/* Ensure every tappable control meets a comfortable minimum touch target */
.tab-btn,.chip,.btn,.pill-toggle button,.close-x{min-height:40px;}
input,select,textarea{min-height:44px;}
textarea{min-height:70px;}

/* ---------------- Recipes ---------------- */
.recipe-card{cursor:pointer;}
.recipe-cover{width:100%;height:150px;object-fit:cover;border-radius:10px;background:#eee;display:block;}
.recipe-cover-wrap{position:relative;}
.play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.55);
  color:#fff;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;}
.recipe-cover-placeholder{display:flex;align-items:center;justify-content:center;font-size:48px;background:#f4f6fa;height:150px;}
.recipe-thumb{width:90px;height:90px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#eee;}
.recipe-thumb-lg{width:150px;height:150px;object-fit:cover;border-radius:10px;flex-shrink:0;background:#eee;}

/* ---------------- Diabetic Food Guide ---------------- */
.food-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.food-guide-item{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;}
.food-guide-item .fg-name{font-size:12.5px;line-height:1.25;}

/* ---------------- Out-of-range detail: three-zone range bar ---------------- */
.range-bar{position:relative;display:flex;height:10px;border-radius:5px;overflow:visible;margin-top:18px;}
.range-seg{flex:1;height:100%;}
.range-seg.low{background:#f7c6c9;border-radius:5px 0 0 5px;}
.range-seg.normal{background:#bfe8cd;}
.range-seg.high{background:#e0334f;border-radius:0 5px 5px 0;}
.range-marker{position:absolute;top:-16px;transform:translateX(-50%);font-size:15px;color:#1c1f26;line-height:1;}
.range-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px;}

/* ---------------- Quick-log confirmation toast ---------------- */
.toast-confirm{position:fixed;left:50%;bottom:90px;transform:translate(-50%,10px);background:#1c1f26;color:#fff;
  padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:all .25s ease;z-index:200;
  box-shadow:0 4px 14px rgba(0,0,0,.25);white-space:nowrap;}
.toast-confirm.show{opacity:1;transform:translate(-50%,0);}
.quick-log-btn{background:#e5f7ec !important;color:var(--success) !important;font-weight:700 !important;}