/* =========================================================
   Salamat — shared stylesheet
   Design tokens live at the top; every screen pulls from here.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ---- color: Salamat Connect (cream / forest green / dusty rose / sage) ---- */
  --bg:            #F7F1E8;
  --surface:       #FFFFFF;
  --surface-sunk:  #F1E7D8;
  --sidebar:       #2A3B2E;
  --sidebar-hover: #34493A;
  --sidebar-active:#425A45;
  --sidebar-text:  #C7D0C4;
  --sidebar-text-active:#FFFFFF;
  --accent:        #BE7F6E;
  --accent-dark:   #A3685A;
  --accent-soft:   #F3DFD6;
  --text-primary:  #2B3B2E;
  --text-secondary:#6B6559;
  --text-faint:    #9C9484;
  --border:        #E7DCC7;
  --warning:       #C1801F;
  --warning-soft:  #F8ECD8;
  --danger:        #B0503F;
  --danger-soft:   #F5E2DC;
  --success:       #5B7A55;
  --success-soft:  #E6EEE1;
  --info:          #5F7C87;
  --info-soft:     #E6EDEE;

  /* ---- type ---- */
  --font-display: 'Fraunces', serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* ---- layout ---- */
  --sidebar-w: 230px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow-card: 0 1px 2px rgba(43,59,46,0.07), 0 1px 1px rgba(43,59,46,0.04);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--text-primary); }
a{ color: var(--accent-dark); text-decoration: none; }
a:hover{ text-decoration: underline; }
button{ font-family: var(--font-body); cursor: pointer; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* =========== app shell =========== */
.app-shell{ display:flex; min-height:100vh; }
.app-shell{ visibility:hidden; }
.app-shell.nav-ready{ visibility:visible; }

/* =========== sidebar =========== */
.sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background: var(--sidebar);
  color: var(--sidebar-text);
  display:flex;
  flex-direction:column;
  padding: 20px 0 16px;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 20px 20px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .mark{
  width:30px; height:30px; border-radius:7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color:#fff; font-size:14px;
}
.sidebar-brand .wordmark{
  font-family: var(--font-display); font-weight:600; font-size:16px; color:#fff; letter-spacing:0.6px;
}
.sidebar-brand .wordmark small{
  display:block; font-family: var(--font-body); font-weight:400; font-size:10.5px; color: var(--sidebar-text); letter-spacing: 0.4px; text-transform:uppercase;
}
.nav-section-label{
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(199,208,196,0.55); padding: 16px 20px 6px;
  font-weight: 600;
}
.nav-list{ list-style:none; margin:0; padding:0 10px; display:flex; flex-direction:column; gap:1px; }
.nav-link{
  display:flex; align-items:center; gap:10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--sidebar-text); font-size:13.5px; font-weight:500;
  transition: background .12s ease, color .12s ease;
}
.nav-link:hover{ background: var(--sidebar-hover); color:#fff; text-decoration:none; }
.nav-link.active{ background: var(--sidebar-active); color: var(--sidebar-text-active); }
.nav-link .icon{ width:16px; height:16px; flex-shrink:0; opacity:.85; }
.nav-link .count{
  margin-left:auto; background: rgba(255,255,255,0.12); color:#fff;
  font-size:11px; font-weight:600; padding:1px 7px; border-radius:20px;
}
.nav-link.active .count{ background: var(--accent); }
.sidebar-foot{
  margin-top:auto; padding: 16px 20px 0; border-top:1px solid rgba(255,255,255,0.08);
}
.sidebar-user{ display:flex; align-items:center; gap:10px; padding-top:14px; }
.sidebar-user .avatar{
  width:30px; height:30px; border-radius:50%; background: var(--accent-soft); color: var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0;
}
.sidebar-user .who{ line-height:1.25; }
.sidebar-user .name{ color:#fff; font-size:13px; font-weight:600; }
.sidebar-user .role{ color: var(--sidebar-text); font-size:11.5px; }
.sidebar-user .signout{ margin-left:auto; }
.sidebar-user .signout a{ color: var(--sidebar-text); font-size:11.5px; }
.sidebar-user .signout a:hover{ color:#fff; }

/* =========== main column =========== */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  height:60px; flex-shrink:0;
  background: var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 28px;
  position: sticky; top:0; z-index:5;
}
.topbar .crumbs{ font-size:12.5px; color: var(--text-faint); }
.topbar .crumbs .current{ color: var(--text-secondary); font-weight:500; }
.topbar-right{ display:flex; align-items:center; gap:16px; }
.search-box{
  display:flex; align-items:center; gap:6px;
  background: var(--surface-sunk); border:1px solid var(--border); border-radius:20px;
  padding: 6px 12px; font-size:12.5px; color: var(--text-faint); width:220px;
}
.search-box input{ border:none; background:none; outline:none; font-size:12.5px; width:100%; font-family:var(--font-body); color:var(--text-primary); }
.bell{ position:relative; color: var(--text-secondary); cursor: pointer;}
.bell .dot{ position:absolute; top:-2px; right:-3px; width:7px; height:7px; border-radius:50%; background: var(--danger); border:1.5px solid var(--surface); }

.content{ padding: 26px 28px 40px; max-width: 1240px; }

.page-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.page-head h1{ font-size:22px; }
.page-head p.lede{ margin:5px 0 0; color: var(--text-secondary); font-size:13px; max-width: 560px; }
.page-head-actions{ display:flex; gap:10px; flex-shrink:0; }

/* =========== buttons =========== */
.btn{
  border-radius: var(--radius-sm); border:1px solid transparent; font-size:13px; font-weight:600;
  padding: 8px 14px; display:inline-flex; align-items:center; gap:6px; line-height:1.2; white-space:nowrap;
  transition: filter .12s ease, background .12s ease;
}
.btn-primary{ background: var(--accent); color:#fff; border-radius: 999px; }
.btn-primary:hover{ background: var(--accent-dark); }
.btn-ghost{ background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.btn-ghost:hover{ background: var(--surface-sunk); color: var(--text-primary); }
.btn-danger-ghost{ background: var(--surface); border-color: var(--danger-soft); color: var(--danger); }
.btn-danger-ghost:hover{ background: var(--danger-soft); }
.btn-success{ background: var(--success); color:#fff; border-radius: 999px; }
.btn-success:hover{ filter:brightness(0.94); }
.btn-sm{ padding:5px 10px; font-size:12px; border-radius:4px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-link{ background:none; border:none; color: var(--accent-dark); font-weight:600; font-size:12.5px; padding:2px 0; }
.btn-link:hover{ text-decoration:underline; }
.btn-link.danger{ color: var(--danger); }

.btn.btn-disabled{
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none; /* blocks clicks and hover, not just the cursor icon */
}

/* =========== cards / tables =========== */
.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); margin-bottom:20px;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; padding: 15px 18px; border-bottom:1px solid var(--border); gap:12px; flex-wrap:wrap; }
.card-head h3{ font-size:14.5px; }
.card-head .sub{ color: var(--text-faint); font-size:12px; margin-top:2px; }
.card-body{ padding: 18px; }
.card-body.pad-0{ padding:0; }

.filter-row{ display:flex; gap:6px; padding: 12px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap; background: var(--surface-sunk); }
.chip{
  border:1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:20px; cursor:pointer; transition: all .12s ease;
}
.chip:hover{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.chip.active{ background: var(--accent-dark); border-color: var(--accent-dark); color:#fff; }

table{ width:100%; border-collapse: collapse; font-size:13px; }
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color: var(--text-faint);
  font-weight:600; padding: 11px 18px; border-bottom:1px solid var(--border); background: var(--surface-sunk);
  white-space:nowrap;
}
tbody td{ padding: 13px 18px; border-bottom:1px solid var(--border); color: var(--text-primary); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: #FBF7EF; }
.table-scroll{ overflow-x:auto; }
.cell-secondary{ color: var(--text-secondary); font-size:12.5px; }
.cell-name{ font-weight:600; }

/* =========== patient case tiles =========== */
.case-tiles-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.case-tile{
  display:block; text-align:left; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card);
  transition: border-color .12s ease;
}
.case-tile:hover{ border-color: var(--accent); text-decoration:none; }
.case-tile-head{
  height: 64px; display:flex; align-items:center; padding: 0 16px;
  font-family: var(--font-mono); font-weight:600; font-size:13px; color:#fff;
}
.case-tile-head.priority-high{ background: linear-gradient(135deg, var(--danger), #8f3a30); }
.case-tile-head.priority-med{ background: linear-gradient(135deg, var(--warning), #96631a); }
.case-tile-head.priority-low{ background: linear-gradient(135deg, var(--success), #375c3f); }
.case-tile-body{ padding: 14px 16px; }
.case-tile-body h4{ font-size:14px; margin-bottom:6px; }
.case-tile-body .meta{ font-size:12px; color: var(--text-faint); margin-top:8px; }

/* the "which case did this message/media come from" chip */
.case-source-chip{
  display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size:11px;
  color: var(--accent-dark); background: var(--accent-soft); padding:2px 8px; border-radius:12px;
}

/* =========== case id chip (signature element) =========== */
.case-id{
  font-family: var(--font-mono); font-size:12px; font-weight:500; letter-spacing:0.02em;
  display:inline-flex; align-items:center; gap:7px; color: var(--text-primary);
}
.case-id .bar{ width:3px; height:14px; border-radius:2px; background: var(--text-faint); flex-shrink:0; }
.case-id.priority-high .bar{ background: var(--danger); }
.case-id.priority-med .bar{ background: var(--warning); }
.case-id.priority-low .bar{ background: var(--success); }

/* =========== status pills =========== */
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.pill::before{ content:''; width:6px; height:6px; border-radius:50%; }
.pill-open{ background: var(--info-soft); color: var(--info); }
.pill-open::before{ background: var(--info); }
.pill-progress{ background: var(--warning-soft); color: var(--warning); }
.pill-progress::before{ background: var(--warning); }
.pill-review{ background:#F1E4EE; color:#8A5A80; }
.pill-review::before{ background:#8A5A80; }
.pill-approved,.pill-complete{ background: var(--success-soft); color: var(--success); }
.pill-approved::before,.pill-complete::before{ background: var(--success); }
.pill-rejected{ background: var(--danger-soft); color: var(--danger); }
.pill-rejected::before{ background: var(--danger); }
.pill-unassigned{ background: var(--surface-sunk); color: var(--text-faint); }
.pill-unassigned::before{ background: var(--text-faint); }
.pill-low    { background: var(--muted-soft, #f1f5f9); color: var(--muted, #64748b); }
.pill-medium { background: var(--warning-soft, #fef3c7); color: var(--warning, #b45309); }
.pill-urgent { background: var(--danger-soft, #fee2e2); color: var(--danger, #b91c1c); font-weight: 700; }

.avatar-chip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; }
.avatar-chip .dot{ width:20px; height:20px; border-radius:50%; background: var(--accent-soft); color:var(--accent-dark); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.avatar-chip.muted{ color: var(--text-faint); }
.avatar-chip.muted .dot{ background: var(--surface-sunk); color: var(--text-faint); }

/* =========== notification / task list =========== */
.task-list{ list-style:none; margin:0; padding:0; }
.task-row{ display:flex; align-items:flex-start; gap:12px; padding:13px 18px; border-bottom:1px solid var(--border); }
.task-row:last-child{ border-bottom:none; }
.task-row .flag{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.flag-assign{ background: var(--info); }
.flag-response{ background: var(--warning); }
.flag-approval{ background:#8A5A80; }
.task-row .body{ flex:1; }
.task-row .title{ font-weight:600; font-size:13px; }
.task-row .meta{ color: var(--text-faint); font-size:12px; margin-top:2px; }
.task-row .actions{ flex-shrink:0; }
.empty-state{ text-align:center; padding: 46px 20px; color: var(--text-faint); }
.empty-state .glyph{ font-size:26px; margin-bottom:8px; }
.empty-state p{ margin:4px 0 0; font-size:13px; }

/* =========== forms =========== */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color: var(--text-secondary); margin-bottom:6px; }
.field .hint{ font-size:11.5px; color: var(--text-faint); margin-top:5px; }
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%; border:1px solid var(--border); border-radius: var(--radius-sm); padding:9px 12px;
  font-size:13.5px; font-family: var(--font-body); color: var(--text-primary); background: var(--surface);
}
textarea{ resize: vertical; min-height:90px; font-family: var(--font-body); }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--accent); outline-offset:0; border-color: var(--accent); }
.form-row{ display:flex; gap:14px; }
.form-row .field{ flex:1; }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-secondary); }

/* =========== login screen =========== */
.login-shell{ display:flex; min-height:100vh; }
.login-brand{
  flex:1.1; background: linear-gradient(160deg, var(--sidebar) 0%, #141F17 100%);
  color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding: 48px;
  position:relative; overflow:hidden;
}
.login-brand::after{
  content:''; position:absolute; right:-120px; bottom:-120px; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(190,127,110,0.35), transparent 70%);
}
.login-brand .top{ display:flex; align-items:center; gap:10px; z-index:1; }
.login-brand .top .mark{ width:34px; height:34px; border-radius:8px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; }
.login-brand .top .wordmark{ font-family: var(--font-display); font-size:18px; font-weight:600; letter-spacing:0.6px; }
.login-brand .middle{ z-index:1; max-width:380px; }
.login-brand .middle h2{ font-size:28px; line-height:1.3; margin-bottom:12px; }
.login-brand .middle p{ color: var(--sidebar-text); font-size:14px; line-height:1.6; }
.login-brand .foot{ font-size:11.5px; color:#7C8A78; z-index:1; }
.login-panel{ flex:1; display:flex; align-items:center; justify-content:center; background: var(--surface); padding:40px; }
.login-form{ width:100%; max-width:340px; }
.login-form h1{ font-size:22px; margin-bottom:4px; }
.login-form p.lede{ color: var(--text-secondary); font-size:13px; margin:0 0 26px; }
.login-form .btn-primary{ width:100%; justify-content:center; padding:10px 14px; margin-top:6px; }
.login-error{ background: var(--danger-soft); color: var(--danger); font-size:12.5px; padding:9px 12px; border-radius: var(--radius-sm); margin-bottom:16px; display:none; }
.login-error.show{ display:block; }
.login-form-foot{ margin-top:18px; font-size:12.5px; color: var(--text-faint); text-align:center; }

/* =========== case detail layout =========== */
.case-detail-grid{ display:grid; grid-template-columns: 2.7fr 1fr; gap:20px; align-items:start; }
@media (max-width: 980px){ .case-detail-grid{ grid-template-columns: 1fr; } }
.kv-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px 20px; }
.kv-grid .kv label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color: var(--text-faint); font-weight:600; margin-bottom:3px; }
.kv-grid .kv .val{ font-size:13.5px; color: var(--text-primary); }
.divider{ border:none; border-top:1px solid var(--border); margin: 18px 0; }

.note-item{ padding: 12px 0; border-bottom:1px solid var(--border); }
.note-item:last-child{ border-bottom:none; }
.note-item .who{ font-weight:600; font-size:12.5px; }
.note-item .when{ color: var(--text-faint); font-size:11.5px; margin-left:6px; }
.note-item .text{ margin-top:4px; font-size:13px; color: var(--text-secondary); }
.note-tag{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color: var(--accent-dark); background: var(--accent-soft); padding:1px 6px; border-radius:4px; margin-left:6px; }

.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ display:flex; gap:12px; padding: 12px 0; border-bottom:1px solid var(--border); }
.timeline li:last-child{ border-bottom:none; }
.timeline .t-dot{ width:9px; height:9px; border-radius:50%; margin-top:5px; flex-shrink:0; background: var(--accent); }
.timeline .t-when{ color: var(--text-faint); font-size:11.5px; font-family: var(--font-mono); }
.timeline .t-title{ font-weight:600; font-size:13px; margin-top:1px; }
.timeline .t-detail{ color: var(--text-secondary); font-size:12.5px; margin-top:2px; }

/* =========== response cover up =========== */
.draft-gate-wrap{ position: relative; }
.draft-gate-overlay{
  position: absolute; inset: 0; z-index: 5;
  background: rgba(247,241,232,0.94); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}
.draft-gate-box{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 24px; max-width: 280px; width: 100%; text-align: center;
}
.draft-gate-box select{ width: 100%; margin-bottom: 12px; }
.draft-gate-box .btn{ width: 100%; justify-content: center; }

/* =========== toast =========== */
.toast{
  position: fixed; bottom:22px; right:22px; background: var(--text-primary); color:#fff;
  padding:11px 16px; border-radius: var(--radius-sm); font-size:13px; font-weight:500;
  box-shadow: 0 6px 20px rgba(43,59,46,0.25); opacity:0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease; pointer-events:none; z-index:50;
}
.toast.show{ opacity:1; transform: translateY(0); }
.toast.success{ background: var(--success); }
.toast.danger{ background: var(--danger); }

.small-caps-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-faint); font-weight:700; }
.text-faint{ color: var(--text-faint); }
.mono{ font-family: var(--font-mono); }
.mt-0{ margin-top:0; }

/* =========== correspondence =========== */
  .corr-list{ list-style:none; margin:0; padding:0; }
  .corr-item{ border-bottom:1px solid var(--border); }
  .corr-item:last-child{ border-bottom:none; }
  .corr-row{ display:flex; align-items:flex-start; gap:12px; padding:14px 18px; cursor:pointer; background:none; border:none; width:100%; text-align:left; font-family:var(--font-body); }
  .corr-row:hover{ background: var(--surface-sunk); }
  .corr-avatar{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
  .corr-avatar.patient{ background: var(--info-soft); color: var(--info); }
  .corr-avatar.doctor{ background: var(--accent-soft); color: var(--accent-dark); }
  .corr-row .body{ flex:1; min-width:0; }
  .corr-row .top-line{ display:flex; justify-content:space-between; gap:10px; }
  .corr-row .who{ font-weight:600; font-size:13px; }
  .corr-row .when{ color: var(--text-faint); font-size:11.5px; font-family: var(--font-mono); flex-shrink:0; }
  .corr-row .summary{ color: var(--text-secondary); font-size:12.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .corr-row .chevron{ color: var(--text-faint); flex-shrink:0; margin-top:4px; transition: transform .15s ease; }
  .corr-item.expanded .chevron{ transform: rotate(90deg); }
  .corr-full{ padding: 0 18px 16px 58px; display:none; }
  .corr-item.expanded .corr-full{ display:block; }
  .corr-full .text{ font-size:13.5px; color: var(--text-primary); line-height:1.6; white-space:pre-wrap; }
  .corr-full .attachments{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
  .corr-attachment-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color: var(--accent-dark); background: var(--accent-soft); padding:5px 10px; border-radius:20px; border:none; cursor:pointer; }

  @keyframes corr-flash{ 0%{ background: var(--accent-soft); } 100%{ background: transparent; } }
  .corr-item.flash{ animation: corr-flash 1.4s ease; }

  /* media preview panel (on the Correspondence screen) */
  .media-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; padding:16px 18px; }
  .media-tile{ border:1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunk); padding:10px; cursor:pointer; text-align:left; font-family:var(--font-body); transition: border-color .12s ease; }
  .media-tile:hover{ border-color: var(--accent); }
  .media-tile .thumb{ height:64px; border-radius:6px; background: var(--surface); display:flex; align-items:center; justify-content:center; color: var(--accent-dark); margin-bottom:8px; }
  .media-tile .label{ font-size:11.5px; font-weight:600; color: var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .media-tile .when{ font-size:10.5px; color: var(--text-faint); margin-top:2px; }
  .media-empty{ padding: 30px 18px; text-align:center; color: var(--text-faint); font-size:12.5px; }
  .see-more-row{ padding: 4px 18px 16px; }

  /* full media gallery screen (scr_PatientMedia.html) */
  .media-gallery-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
  .media-gallery-tile{ border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding:14px; cursor:pointer; text-align:left; font-family:var(--font-body); box-shadow: var(--shadow-card); }
  .media-gallery-tile:hover{ border-color: var(--accent); }
  .media-gallery-tile .thumb{ height:110px; border-radius:8px; background: var(--surface-sunk); display:flex; align-items:center; justify-content:center; color: var(--accent-dark); margin-bottom:10px; }


/* =========== fit-to-screen tables (opt-in) ===========
   Add class="table-fit" to a <table> (and "content-wide" to .content
   to lift the 1240px page cap). Columns size to their content, so
   pills and IDs are never squeezed or cut off. What makes it fit on a
   small screen: tighter cell padding, a dropdown that can shrink
   (never below 180px), and action buttons that wrap onto a 2nd line.
   If a screen is still too narrow it scrolls inside .table-scroll. */
.content.content-wide{ max-width:none; }
table.table-fit th,
table.table-fit td{ padding:11px 8px; }
table.table-fit select{ width:100%; min-width:180px; text-overflow:ellipsis; }
table.table-fit .row-actions{ display:flex; flex-wrap:wrap; gap:6px; }


/* =========== small screens ===========
   Layer 1 (<= 1100px): .table-fit tables become stacked cards. Each <td>
     needs data-label="Column name" (set in the page's JS) so the card can
     show it. A <td> with no data-label (e.g. the buttons) just spans the card.
   Layer 2 (<= 820px): the sidebar becomes a slide-in drawer opened by the
     menu button that mobile-nav.js adds to the top bar. This only happens
     on pages where mobile-nav.js has run (it adds body.mobile-nav-on), so a
     page WITHOUT the script keeps its normal sidebar instead of losing its
     navigation. To switch a page over, add to its <head>:
       <script src="../JavaScript/mobile-nav.js"></script> */
@media (max-width: 1100px){
  table.table-fit,
  table.table-fit tbody,
  table.table-fit tr,
  table.table-fit td{ display:block; width:100%; }
  table.table-fit{ min-width:0; }
  table.table-fit thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  table.table-fit tbody tr{ padding:12px 14px; border-bottom:1px solid var(--border); }
  table.table-fit tbody td{ border:none; padding:5px 0; }
  table.table-fit tbody td[data-label]{
    display:grid; grid-template-columns:92px 1fr; gap:4px 12px; align-items:center;
  }
  table.table-fit tbody td[data-label]::before{
    content:attr(data-label); font-size:11px; font-weight:600; text-transform:uppercase;
    letter-spacing:0.05em; color:var(--text-faint);
  }
  table.table-fit tbody td[data-label] > *{ grid-column:2; justify-self:start; }
  table.table-fit tbody td[data-label] > select,
  table.table-fit tbody td[data-label] > input{ justify-self:stretch; min-width:0; }
  table.table-fit tbody td:not([data-label]){ padding-top:10px; }
  #viewAvailabilityGrid{ overflow-x:auto; }
}

.menu-toggle{ display:none; }
.nav-backdrop{ display:none; }
@media (max-width: 820px){
  body.mobile-nav-on .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:30; overflow-y:auto;
    transform:translateX(-100%); transition:transform .2s ease;
  }
  body.mobile-nav-on.nav-open .sidebar{ transform:translateX(0); box-shadow:0 0 30px rgba(0,0,0,.35); }
  body.mobile-nav-on .nav-backdrop{ position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.4); z-index:20; }
  body.mobile-nav-on.nav-open .nav-backdrop{ display:block; }
  body.mobile-nav-on .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:36px; height:36px; margin-right:10px; padding:0;
    border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text-primary);
  }

  body.mobile-nav-on .topbar{ padding:0 14px; gap:10px; }
  body.mobile-nav-on .topbar .crumbs{ display:flex; align-items:center; flex-shrink:0; gap:5px; }
  body.mobile-nav-on .topbar-right{ flex:1; min-width:0; justify-content:flex-end; gap:12px; }
  body.mobile-nav-on .search-box{ width:auto; flex:1; min-width:0; max-width:260px; }

  body.mobile-nav-on .content{ padding:18px 14px 32px; }
  body.mobile-nav-on .page-head h1{ font-size:20px; }
  body.mobile-nav-on .form-row{ flex-direction:column; gap:0; }
}

/* =========== layout fixes found by testing every screen ===========
   1. Grid children default to min-width:auto, so a wide table made the
      Dashboard / Correspondence cards wider than a tablet or phone screen
      and the whole page scrolled sideways. min-width:0 lets a wide table
      scroll inside its own card instead.
   2. The global "select{width:100%}" made each dropdown in a filter row
      fill a whole line (Dashboard's doctor / specialty / patient filters).
   3. The server sends priority 'medium', but only 'med' was styled, so
      medium-priority tiles had a blank header and no colour bar.
   4. Table-heavy pages use the full screen width, like Case management
      (the 1240px page cap left a big empty strip on wide monitors).
   5. Users table: tighter cells, wrapping emails/buttons, so it fits
      without cutting off Edit / Remove. */
.case-detail-grid > *{ min-width:0; }

.filter-row select{ width:auto; min-width:150px; max-width:100%; }

.case-tile-head.priority-medium{ background: linear-gradient(135deg, var(--warning), #96631a); }
.case-id.priority-medium .bar{ background: var(--warning); }

body[data-page="dashboard"] .content,
body[data-page="users"] .content{ max-width:none; }

body[data-page="users"] .card-body.pad-0 th,
body[data-page="users"] .card-body.pad-0 td{ padding-left:8px; padding-right:8px; }
body[data-page="users"] .card-body.pad-0 td:nth-child(3){ overflow-wrap:anywhere; } /* email column only */
@media (max-width: 1100px){ /* narrower than this the table scrolls anyway, so keep emails on one line */
  body[data-page="users"] .card-body.pad-0 td:nth-child(3){ overflow-wrap:normal; white-space:nowrap; }
}
body[data-page="users"] .card-body.pad-0 td:last-child{ white-space:normal !important; }

/* 6. Dashboard: below ~1300px wide the table and the "Needs your attention"
      card can't sit side by side without the table getting a sideways
      scrollbar. Stack them, with the short attention list first. */
@media (max-width: 1300px){
  body[data-page="dashboard"] .case-detail-grid{ grid-template-columns:minmax(0,1fr); }
  body[data-page="dashboard"] .case-detail-grid > :nth-child(2){ order:-1; }
}

/* 7. Login / reset-password screens.
      - The headline on the dark panel inherited the dark global heading
        colour (dark text on dark green, barely readable at any size).
      - On a phone the brand panel and the form sat side by side, leaving
        the form about 130px wide. Below 760px they stack instead. */
.login-brand .middle h2{ color:#fff; }
@media (max-width: 760px){
  .login-shell{ flex-direction:column; }
  .login-brand{ flex:none; padding:24px; gap:18px; }
  .login-brand .middle h2{ font-size:22px; margin-bottom:8px; }
  .login-brand .middle p{ font-size:13px; margin:0; }
  .login-brand .foot{ display:none; }
  .login-panel{ flex:1; align-items:flex-start; padding:28px 20px 40px; }
}

/* 8. Correspondence list: the one-line message preview is a <span>, so its
      "clip with …" rules did nothing and a long line pushed the page wider
      than a phone screen. Make it a block so it truncates properly. */
.corr-row .summary{ display:block; }