/*
 * CareBoard look and feel — loaded after Bootstrap on every page.
 *
 * One palette for the whole app: the navy CareBoard has always used for the
 * sidebar and headings, a teal for actions, and four status colors that mean
 * the same thing everywhere (done, needs attention, overdue, not yet due).
 * Change a color here and every page follows.
 */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cb-navy: #16324f;
  --cb-navy-2: #1d4166;
  --cb-navy-ink: #102538;
  --cb-accent: #0f766e;
  --cb-accent-hover: #0b5f58;
  --cb-accent-wash: #e6f3f1;

  --cb-bg: #f3f5f8;
  --cb-surface: #ffffff;
  --cb-border: #e2e7ee;
  --cb-border-strong: #cfd7e2;
  --cb-text: #1c2733;
  --cb-muted: #64748b;

  --cb-ok: #15803d;      --cb-ok-wash: #e7f5ec;
  --cb-warn: #a15c07;    --cb-warn-wash: #fdf3dc;
  --cb-danger: #b42318;  --cb-danger-wash: #fdecea;
  --cb-idle: #94a3b8;    --cb-idle-wash: #f1f4f8;

  --cb-radius: 12px;
  --cb-radius-sm: 8px;
  --cb-shadow: 0 1px 2px rgba(16, 37, 56, .05), 0 1px 3px rgba(16, 37, 56, .06);

  /* Bootstrap picks these up everywhere */
  --bs-body-font-family: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--cb-text);
  --bs-body-bg: #fff;
  --bs-secondary-color: var(--cb-muted);
  --bs-border-color: var(--cb-border);
  --bs-primary: var(--cb-accent);
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: var(--cb-accent);
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: var(--cb-accent-hover);
  --bs-link-hover-color-rgb: 11, 95, 88;
  --bs-success-rgb: 21, 128, 61;
  --bs-danger-rgb: 180, 35, 24;
  --bs-warning-rgb: 217, 145, 20;
  --bs-border-radius: var(--cb-radius-sm);
  --bs-focus-ring-color: rgba(15, 118, 110, .25);
}

body {
  background: var(--cb-bg);
  font-feature-settings: "cv11", "ss01";   /* Inter: open digits, easier to read at a glance */
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.003em;
}
.font-monospace, code, kbd, pre { letter-spacing: 0; }
code { color: var(--cb-navy-2); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, var(--cb-navy) 0%, var(--cb-navy-ink) 100%);
  height: 100vh; height: 100dvh; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding-top: .5rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.sidebar .brand { padding: 1rem 1.25rem 1rem; margin-bottom: .25rem; border-bottom-color: rgba(255,255,255,.08); }
.sidebar .brand h6 { color: #9fbbd8; font-weight: 600; font-size: .66rem; letter-spacing: .12em; }
.sidebar .brand h5 { font-size: 1.08rem; letter-spacing: -.01em; }
.sidebar .brand h5 .bi { color: #5eead4; }
.sidebar .nav-link {
  margin: 1px .6rem; padding: .42rem .7rem;
  border-left: 0; border-radius: var(--cb-radius-sm);
  font-size: .88rem; font-weight: 500;
  color: rgba(255,255,255,.74);
}
.sidebar .nav-link .bi { font-size: 1rem; opacity: .85; width: 1.1rem; text-align: center; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-link.active {
  background: rgba(94, 234, 212, .14); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 #5eead4;
}
.sidebar .nav-link.active .bi { opacity: 1; color: #5eead4; }
.sidebar .nav-section { padding: 1rem 1.3rem .3rem; margin-top: 0; font-weight: 600; font-size: .64rem; letter-spacing: .12em; color: rgba(255,255,255,.42); }
.sidebar .sidebar-footer {
  position: sticky; bottom: 0;
  background: var(--cb-navy-ink);
  border-top-color: rgba(255,255,255,.08);
  padding: .8rem 1.25rem .9rem; color: rgba(255,255,255,.55);
}
.sidebar .sidebar-footer > div:first-child { color: #fff; font-weight: 600; }
.mobile-topbar { background: var(--cb-navy); }

/* ── Page frame ─────────────────────────────────────────────────────────── */
.main-content { padding: 1.75rem 2.25rem 3rem; max-width: 1680px; }
.page-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.4rem; }
.page-header h4 {
  color: var(--cb-navy-ink); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em;
  display: flex; align-items: center; gap: .15rem;
}
.page-header h4 > .bi:first-child { color: var(--cb-accent); font-size: 1.25rem; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--cb-border); border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow); background: var(--cb-surface);
}
.card-header {
  background: var(--cb-surface) !important; border-bottom: 1px solid var(--cb-border);
  padding: .85rem 1.1rem; font-weight: 650; color: var(--cb-navy-ink);
  border-radius: var(--cb-radius) var(--cb-radius) 0 0 !important;
}
.card-header .bi:first-child { color: var(--cb-muted); }
.card-footer { background: var(--cb-surface) !important; border-top: 1px solid var(--cb-border); border-radius: 0 0 var(--cb-radius) var(--cb-radius) !important; }
.card > .card-body.p-0 > .table:last-child, .card > .card-body.p-0 > .table-responsive:last-child .table { margin-bottom: 0; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table { --bs-table-color: var(--cb-text); --bs-table-border-color: var(--cb-border); }
.table > :not(caption) > * > * { padding: .62rem .8rem; }
.table th, .table thead th {
  font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cb-muted); white-space: nowrap;
}
.table thead, .table-light { --bs-table-bg: #f8fafc; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f6f9fc; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { font-weight: 600; border-radius: var(--cb-radius-sm); letter-spacing: -.005em; }
.btn-sm { border-radius: 7px; }
.btn-lg { border-radius: 10px; }
.btn-primary {
  --bs-btn-bg: var(--cb-accent); --bs-btn-border-color: var(--cb-accent);
  --bs-btn-hover-bg: var(--cb-accent-hover); --bs-btn-hover-border-color: var(--cb-accent-hover);
  --bs-btn-active-bg: var(--cb-accent-hover); --bs-btn-active-border-color: var(--cb-accent-hover);
  --bs-btn-disabled-bg: var(--cb-accent); --bs-btn-disabled-border-color: var(--cb-accent);
  box-shadow: 0 1px 2px rgba(15,118,110,.25);
}
.btn-success {
  --bs-btn-bg: var(--cb-ok); --bs-btn-border-color: var(--cb-ok);
  --bs-btn-hover-bg: #116632; --bs-btn-hover-border-color: #116632;
  --bs-btn-active-bg: #116632; --bs-btn-active-border-color: #116632;
}
.btn-outline-primary {
  --bs-btn-color: var(--cb-accent); --bs-btn-border-color: #9fd1cb;
  --bs-btn-hover-bg: var(--cb-accent-wash); --bs-btn-hover-color: var(--cb-accent-hover); --bs-btn-hover-border-color: var(--cb-accent);
  --bs-btn-active-bg: var(--cb-accent-wash); --bs-btn-active-color: var(--cb-accent-hover); --bs-btn-active-border-color: var(--cb-accent);
}
.btn-outline-secondary {
  --bs-btn-color: #475569; --bs-btn-border-color: var(--cb-border-strong); --bs-btn-bg: #fff;
  --bs-btn-hover-bg: #f1f5f9; --bs-btn-hover-color: var(--cb-text); --bs-btn-hover-border-color: #b8c3d1;
  --bs-btn-active-bg: #e8edf3; --bs-btn-active-color: var(--cb-text); --bs-btn-active-border-color: #b8c3d1;
}
.btn-check:checked + .btn-outline-secondary, .btn-check:checked + .btn-outline-primary {
  background: var(--cb-navy); border-color: var(--cb-navy); color: #fff;
}
.btn-outline-danger { --bs-btn-border-color: #f1b7b1; --bs-btn-color: var(--cb-danger); --bs-btn-hover-bg: var(--cb-danger); --bs-btn-hover-border-color: var(--cb-danger); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-control, .form-select { border-color: var(--cb-border-strong); border-radius: var(--cb-radius-sm); }
.form-control:focus, .form-select:focus { border-color: var(--cb-accent); box-shadow: 0 0 0 .2rem rgba(15,118,110,.18); }
.form-check-input:checked { background-color: var(--cb-accent); border-color: var(--cb-accent); }
.form-check-input:focus { border-color: var(--cb-accent); box-shadow: 0 0 0 .2rem rgba(15,118,110,.18); }
.form-label { font-weight: 600; color: #334155; font-size: .88rem; }
.form-control::placeholder { color: #a0abba; }

/* ── Badges and alerts ──────────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 6px; }
.bed-badge, .s-bed-badge { white-space: nowrap; }
.alert { border-radius: var(--cb-radius); border-width: 1px; }
.alert-success { --bs-alert-bg: var(--cb-ok-wash); --bs-alert-border-color: #bfe3cb; --bs-alert-color: #14532d; }
.alert-danger  { --bs-alert-bg: var(--cb-danger-wash); --bs-alert-border-color: #f6c7c2; --bs-alert-color: #7a1a12; }
.alert-warning { --bs-alert-bg: var(--cb-warn-wash); --bs-alert-border-color: #f3dca3; --bs-alert-color: #6b3d05; }
.alert-info    { --bs-alert-bg: #eaf4fb; --bs-alert-border-color: #c6e0f2; --bs-alert-color: #0f3a5a; }

/* ── Status chips: one meaning per color, on every page ─────────────────── */
.cb-status { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600;
             padding: .15rem .5rem; border-radius: 999px; }
.cb-status.ok { color: var(--cb-ok); background: var(--cb-ok-wash); }
.cb-status.warn { color: var(--cb-warn); background: var(--cb-warn-wash); }
.cb-status.danger { color: var(--cb-danger); background: var(--cb-danger-wash); }
.cb-status.idle { color: var(--cb-muted); background: var(--cb-idle-wash); }

/* ── Sign-in page ───────────────────────────────────────────────────────── */
body.signin .sidebar { display: none; }
body.signin .main-content { margin-left: 0; max-width: none; }
body.signin .main-content > .alert { max-width: 400px; margin: 1.5rem auto -3rem; position: relative; z-index: 1; }
body.signin { min-height: 100vh; background-attachment: fixed; background:
  radial-gradient(1200px 600px at 15% -10%, rgba(94,234,212,.16), transparent 60%),
  radial-gradient(900px 500px at 110% 110%, rgba(29,65,102,.14), transparent 60%),
  var(--cb-bg); }

@media (max-width: 767.98px) {
  .main-content { padding: 1rem .8rem 2.5rem; }
  .page-header h4 { font-size: 1.25rem; }
  .table > :not(caption) > * > * { padding: .5rem .45rem; }
  .table th, .table thead th { letter-spacing: .03em; }
  .sidebar .nav-link { margin: 1px .5rem; padding: .62rem .75rem; font-size: .98rem; }
  .sidebar .sidebar-footer { position: static; }
}

@media print {
  body { background: #fff; font-feature-settings: normal; }
  .card { box-shadow: none; }
}