/* ═══════════════════════════════════════════════════════════════════════════
   Home Meds — shared design system
   Light grey canvas, white surfaces, deep blue as the single accent.
   Every state carries a written label; colour only reinforces it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:            #eef1f5;
  --surface:       #ffffff;
  --surface-sunk:  #f7f9fc;
  --line:          #e0e5ec;
  --line-strong:   #ccd4de;

  --ink:           #16202c;
  --ink-soft:      #3d4b5a;
  --muted:         #64717f;

  --primary:       #123a63;
  --primary-hover: #0d2b4a;
  --primary-soft:  #e8f0f8;
  --primary-line:  #c3d6e9;

  --danger:        #a52620;
  --danger-soft:   #fdeceb;
  --danger-line:   #f3c9c6;

  --warn:          #8a5000;
  --warn-soft:     #fff4e3;
  --warn-line:     #f3ddb9;

  --ok:            #2c6349;
  --ok-soft:       #edf4f0;
  --ok-line:       #cfe2d8;

  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 1px 2px rgba(18, 40, 66, .06), 0 1px 3px rgba(18, 40, 66, .05);
  --shadow-lift:   0 4px 14px rgba(18, 40, 66, .10);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

.text-muted { color: var(--muted) !important; }
.small, small { font-size: 0.875rem; }
.x-small { font-size: 0.8125rem; }
.num { font-variant-numeric: tabular-nums; }

/* Page shell — keeps content off the screen edges and readable on wide screens */
.page-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.page-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-start; justify-content: space-between;
  margin: 24px 0 18px;
}
.page-head h1, .page-head h3 { margin: 0; font-weight: 700; }
.page-head .subtitle { color: var(--muted); font-size: 0.9375rem; margin-top: 2px; }

/* ── Navbar ────────────────────────────────────────────────────────────── */
.bg-dark-custom, .topbar { background-color: var(--primary) !important; }
.topbar { box-shadow: var(--shadow); }
.navbar-brand { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.01em; }
.navbar-nav .nav-link {
  font-size: 0.9375rem; padding: 0.45rem 0.8rem;
  border-radius: var(--radius-sm); color: rgba(255,255,255,.85);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible { background: rgba(255,255,255,.14); color: #fff; }
.navbar-nav .nav-link.active { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }

/* ── Surfaces ──────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 14px 18px;
  font-weight: 600;
}
.card-body { padding: 18px; }
.card-footer { background: var(--surface-sunk); border-top: 1px solid var(--line); padding: 12px 18px; }

.section-title {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 10px;
}

/* ── Status chips — a dot plus a word, never colour alone ──────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.35;
  white-space: nowrap; border: 1px solid transparent;
}
.chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.chip-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-line); }
.chip-warn    { background: var(--warn-soft);    color: var(--warn);    border-color: var(--warn-line); }
.chip-ok      { background: var(--ok-soft);      color: var(--ok);      border-color: var(--ok-line); }
.chip-neutral { background: var(--surface-sunk); color: var(--ink-soft); border-color: var(--line-strong); }
.chip-info    { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); }
.chip-plain::before { display: none; }
.chip-sm { padding: 1px 8px; font-size: 0.75rem; }

/* Person tag, used when a list mixes people */
.person-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8125rem; font-weight: 600; color: var(--primary);
  background: var(--primary-soft); border: 1px solid var(--primary-line);
  border-radius: 999px; padding: 1px 9px; white-space: nowrap;
}

/* ── Person selector ───────────────────────────────────────────────────── */
.person-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.person-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--ink-soft); border-radius: 999px;
  padding: 9px 18px; font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; cursor: pointer; min-height: 42px;
  transition: background .12s, border-color .12s, color .12s;
}
.person-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); }
.person-btn.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.person-btn .count {
  font-size: 0.8125rem; font-weight: 600; opacity: .75;
  font-variant-numeric: tabular-nums;
}

/* ── Summary tiles ─────────────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: block; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; text-decoration: none; color: inherit;
  box-shadow: var(--shadow); transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); }
.tile.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.tile .tile-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .tile-label { font-size: 0.875rem; color: var(--muted); margin-top: 2px; }
.tile-danger .tile-value { color: var(--danger); }
.tile-warn   .tile-value { color: var(--warn); }
.tile-ok     .tile-value { color: var(--ok); }
.tile-plain  .tile-value { color: var(--primary); }
.tile.is-zero .tile-value { color: var(--muted); }

/* ── Medication list rows ──────────────────────────────────────────────── */
.med-list { display: flex; flex-direction: column; }
.med-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px 22px; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.med-row:last-child { border-bottom: 0; }
.med-row:hover { background: var(--surface-sunk); }

/* A thin left marker instead of tinting the whole row */
.med-row { border-left: 3px solid transparent; }
.med-row.state-empty,
.med-row.state-expired { border-left-color: var(--danger); }
.med-row.state-low,
.med-row.state-expiring { border-left-color: var(--warn); }

.med-name { font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: none; }
.med-name:hover { color: var(--primary); text-decoration: underline; }
.med-sub { font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }
.med-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }

.med-figures { display: flex; gap: 26px; }
.metric { font-variant-numeric: tabular-nums; min-width: 74px; }
.metric .metric-value { font-size: 1.0625rem; font-weight: 600; }
.metric .metric-label { display: block; font-size: 0.75rem; color: var(--muted); }
.metric .metric-value.is-muted { color: var(--muted); font-weight: 500; font-size: 0.9375rem; }

.row-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* Schedule phrases: "Morning: 1 · Evening: 2" */
.schedule-line { font-size: 0.875rem; color: var(--ink-soft); }
.schedule-line .sep { color: var(--line-strong); margin: 0 6px; }
.dosage-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dose-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600;
  background: var(--surface-sunk); color: var(--ink-soft);
  border: 1px solid var(--line);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm); font-size: 0.9375rem; font-weight: 600;
  min-height: 40px; padding: 8px 16px;
}
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 0.875rem; }
.btn-xs { min-height: 30px; padding: 3px 9px; font-size: 0.8125rem; border-radius: 6px; font-weight: 600; }

.btn-primary {
  background-color: var(--primary); border-color: var(--primary); color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-hover); border-color: var(--primary-hover);
}
.btn-outline-primary { color: var(--primary); border-color: var(--primary-line); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-outline-secondary { color: var(--ink-soft); border-color: var(--line-strong); background: var(--surface); }
.btn-outline-secondary:hover { background: var(--surface-sunk); color: var(--ink); border-color: var(--muted); }
.btn-link { text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-label { font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.form-control, .form-select {
  font-size: 1rem; min-height: 42px; border-radius: var(--radius-sm);
  border-color: var(--line-strong); color: var(--ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-text { font-size: 0.8125rem; color: var(--muted); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.field-error { display: block; font-size: 0.8125rem; color: var(--danger); font-weight: 600; margin-top: 4px; }
/* Fields the AI suggested — visibly provisional until the user accepts them */
.ai-suggested { background-color: #f5f0ff; border-color: #cbb8ee; }

/* Grouped form sections */
.form-section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 6px; }
.form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.form-section-title { font-size: 0.9375rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.form-section-hint { font-size: 0.8125rem; color: var(--muted); margin-bottom: 14px; }

.calc-box {
  background: var(--primary-soft); border: 1px solid var(--primary-line);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 0.9375rem; color: var(--primary); font-weight: 600;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.table { font-size: 0.9375rem; color: var(--ink); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 10px 12px; }
.table thead th {
  font-size: 0.8125rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--surface-sunk); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { vertical-align: middle; border-color: var(--line); }
.table-hover > tbody > tr:hover > * { background-color: var(--surface-sunk); }
.table-plain > tbody > tr > td { border-color: var(--line); }

/* ── Alerts / flash ────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-sm); font-size: 0.9375rem;
  border: 1px solid transparent; padding: 12px 16px;
}
.alert-success { background: var(--ok-soft);     color: var(--ok);      border-color: var(--ok-line); }
.alert-danger  { background: var(--danger-soft); color: var(--danger);  border-color: var(--danger-line); }
.alert-warning { background: var(--warn-soft);   color: var(--warn);    border-color: var(--warn-line); }
.alert-info    { background: var(--primary-soft);color: var(--primary); border-color: var(--primary-line); }

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 0.875rem; color: var(--ink-soft);
}
.notice i { color: var(--muted); margin-top: 2px; }

/* ── Empty states ──────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-state i { font-size: 1.75rem; opacity: .45; display: block; margin-bottom: 10px; }
.empty-state p { margin-bottom: 12px; }

/* ── Search ────────────────────────────────────────────────────────────── */
.search-field { position: relative; flex: 1 1 260px; max-width: 380px; }
.search-field i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; font-size: 0.9375rem;
}
.search-field input { padding-left: 38px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── Modals ────────────────────────────────────────────────────────────── */
.modal-content { border: 0; border-radius: var(--radius); }
.modal-header {
  background: var(--surface); border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0; padding: 16px 20px;
}
.modal-header .modal-title { font-size: 1.0625rem; font-weight: 700; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--line); padding: 14px 20px; gap: 8px; }

/* A scrollable modal expects header/body/footer to be direct children of
   .modal-content, but every dialog here wraps them in a <form> so the whole
   thing submits together. A plain block form is a flex item that will not
   shrink, so the content box clipped it and there was nothing left to scroll —
   which bites as soon as the text is large or the window is short. Making the
   form the flex column itself, and letting it shrink, puts the scrollbar back
   on the body where it belongs, with the header and buttons staying put. */
.modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}
.modal-body { overflow-y: auto; min-height: 0; }
.modal-header, .modal-footer { flex: 0 0 auto; }

/* Whatever the text size, a dialog never grows past the window */
.modal-dialog { max-height: calc(100% - var(--bs-modal-margin, 1.75rem) * 2); }
.modal-dialog > .modal-content { max-height: 100%; }

/* ── Details / disclosure ──────────────────────────────────────────────── */
details.disclosure > summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: 0.9375rem;
  color: var(--primary); padding: 10px 0; display: flex; align-items: center; gap: 8px;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before {
  content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  transition: transform .15s; display: inline-block; width: 10px;
}
details.disclosure[open] > summary::before { transform: rotate(90deg); }

/* ── Utilities ─────────────────────────────────────────────────────────── */
.opacity-60 { opacity: 0.6; }
.stack-sm > * + * { margin-top: 8px; }
.divider { height: 1px; background: var(--line); border: 0; margin: 18px 0; }
.sticky-top { top: 0; z-index: 1; }

/* ── Stock count sheet ─────────────────────────────────────────────────── */
/* Built to be read standing at the cupboard: the name large enough to find on
   the box, the recorded figure impossible to mistake for the box you type in,
   and a counted row marked quietly so the eye can skip it on the way down. */

.count-sheet { display: flex; flex-direction: column; gap: 12px; }

.count-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.count-item.is-counted { border-left-color: var(--ok); background: var(--ok-soft); }

.count-item-head { margin-bottom: 10px; }
.count-name { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.count-strength {
  font-size: 1.0625rem; font-weight: 600; color: var(--primary);
  margin-left: 6px;
}
.count-item-sub { font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }

.count-flag {
  display: none;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ok);
  background: var(--surface); border: 1px solid var(--ok-line);
  border-radius: 999px; padding: 1px 9px; margin-left: 8px;
  vertical-align: middle;
}
.count-item.is-counted .count-flag { display: inline-block; }

.count-batch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 170px);
  gap: 14px; align-items: end;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.count-batch + .count-batch { margin-top: 4px; }

.count-field .form-label { margin-bottom: 4px; }
.count-expiry { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.count-expiry.is-expired { color: var(--danger); font-weight: 600; }

.count-recorded { text-align: center; padding-bottom: 6px; min-width: 86px; }
.count-recorded-value {
  display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  color: var(--ink);
}
.count-recorded-label {
  display: block; font-size: 0.75rem; color: var(--muted);
}

/* The one box a thumb has to hit, so it is the largest thing in the row. */
.count-input {
  font-size: 1.25rem; font-weight: 600; text-align: center;
  min-height: 52px; font-variant-numeric: tabular-nums;
}
.count-input:not(:placeholder-shown) { border-color: var(--ok); background: #fff; }
.count-input::placeholder { font-size: 0.875rem; font-weight: 400; }

/* Progress and the way out, always within reach of the thumb. */
.count-bar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 -4px 14px rgba(18, 40, 66, .10);
}
.count-progress { font-size: 0.9375rem; color: var(--ink-soft); }
.count-progress strong { font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── Stock count: the confirmation and the log ─────────────────────────── */

.count-review { display: flex; flex-direction: column; }
.count-review-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.count-review-row:last-child { border-bottom: 0; }
.count-review-name { font-weight: 700; font-size: 1.0625rem; }
.count-review-batch {
  display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted);
  margin-top: 2px;
}
.count-review-figures { display: flex; gap: 18px; align-items: baseline; }
.count-review-move { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.count-review-diff {
  font-weight: 700; font-variant-numeric: tabular-nums; min-width: 56px;
  text-align: right;
}
.count-review-diff.is-down { color: var(--danger); }
.count-review-diff.is-up { color: var(--ok); }

.count-log-new { border: 1px solid var(--ok-line); box-shadow: 0 0 0 2px var(--ok-soft); }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .page-wrap { padding: 0 14px; }

  /* Rows stack: name first, then figures side by side, then the action.
     Nothing scrolls sideways. */
  .med-row {
    grid-template-columns: 1fr;
    gap: 10px; padding: 14px;
  }
  .med-figures { gap: 22px; }
  .row-actions { justify-content: flex-start; }
  .row-actions .btn { flex: 1 1 auto; }

  .tile { padding: 12px 14px; }
  .tile .tile-value { font-size: 1.5rem; }

  .person-btn { padding: 9px 15px; }

  .modal-dialog { --bs-modal-margin: 8px; }

  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .toolbar { width: 100%; }

  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* One thumb, one column: the figure on record beside the box to type in,
     so the comparison stays on one line where it matters. */
  .count-batch { grid-template-columns: 1fr; gap: 10px; }
  .count-batch .count-recorded {
    display: flex; align-items: baseline; gap: 8px;
    text-align: left; padding-bottom: 0;
  }
  .count-batch .count-recorded-value { font-size: 1.375rem; }
  .count-field-qty { max-width: none; }
  .count-input { min-height: 56px; font-size: 1.375rem; }
  .count-bar { justify-content: stretch; }
  .count-bar .btn { flex: 1 1 100%; }
  .count-review-row { flex-direction: column; align-items: flex-start; }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  .no-print, .navbar, .toolbar, .person-bar, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}