/* ==========================================================================
   CHION Care — Application Stylesheet
   Metro UI · Flat · No Gradients · Desktop-first responsive
   ========================================================================== */

/* ----- Design tokens (mirror VISUAL_DESIGN.md) ----- */
:root {
  --c-primary:        #0050B3;
  --c-primary-dark:   #003A75;
  --c-primary-soft:   #E8F0FA;
  --c-teal:           #008C8C;
  --c-teal-dark:      #006666;
  --c-teal-soft:      #DCF1F1;
  --c-accent:         #E63946;
  --c-accent-dark:    #B71C2C;
  --c-accent-soft:    #FDE7EA;
  --c-success:        #2E7D32;
  --c-success-soft:   #E0F1E3;
  --c-warning:        #E08A00;
  --c-warning-soft:   #FCEFCE;
  --c-purple:         #4A148C;
  --c-purple-soft:    #EFE7F5;

  --c-ink:            #0F1722;
  --c-ink-soft:       #3A4252;
  --c-muted:          #6B7280;
  --c-line:           #E1E5EB;
  --c-line-strong:    #C7CFDA;
  --c-surface:        #FFFFFF;
  --c-surface-soft:   #F4F6F9;
  --c-surface-tint:   #ECF0F5;
  --c-dark:           #0F1722;
  --c-dark-soft:      #1B2435;

  --ff: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  --r:    4px;
  --r-sm: 2px;

  --ease:     cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 160ms;
  --dur:      280ms;

  --shadow-1: 0 1px 0 rgba(15,23,34,.04);
  --shadow-2: 0 8px 24px rgba(15,23,34,.06);
  --shadow-3: 0 16px 40px rgba(15,23,34,.10);

  --sidebar-w: 248px;
  --topbar-h:  64px;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-surface-soft);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
em { font-style: normal; }

::selection { background: var(--c-primary); color: #fff; }

/* ==========================================================================
   APP LAYOUT
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.app__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ----- Sidebar ----- */
.sidebar {
  background: var(--c-dark);
  color: #C7D0DA;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #000;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
  border-bottom: 1px solid var(--c-dark-soft);
}
.sidebar__brand-mark { flex-shrink: 0; }
.sidebar__brand-text {
  display: flex; flex-direction: column;
  line-height: 1.15;
}
.sidebar__brand-text strong {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
}
.sidebar__brand-text em {
  color: #7BB8FF;
  font-weight: 300;
}
.sidebar__brand-text span {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6B7280;
  margin-top: 2px;
}

.sidebar__section {
  padding: 14px 0 6px;
}
.sidebar__section-title {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6B7280;
  padding: 0 18px;
  margin-bottom: 6px;
  font-weight: 700;
}
.sidebar__nav { display: flex; flex-direction: column; }
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  color: #C7D0DA;
  font-size: 13px;
  font-weight: 600;
  border-left: 3px solid transparent;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sidebar__link .ico { fill: currentColor; opacity: .8; flex-shrink: 0; }
.sidebar__link:hover {
  background: var(--c-dark-soft);
  color: #fff;
}
.sidebar__link.is-active {
  background: var(--c-dark-soft);
  color: #fff;
  border-left-color: var(--c-primary);
}
.sidebar__link.is-active .ico { opacity: 1; }

.sidebar__profile {
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--c-dark-soft);
  display: flex; align-items: center; gap: 10px;
}
.sidebar__profile-info { line-height: 1.2; flex-grow: 1; min-width: 0; }
.sidebar__profile-info strong {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__profile-info span {
  color: #6B7280;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sidebar__profile-logout {
  color: #98A2B3;
  padding: 6px;
  transition: color var(--dur-fast) var(--ease);
}
.sidebar__profile-logout:hover { color: var(--c-accent); }

/* ----- Topbar ----- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: #fff;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}
.topbar__title {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.topbar__title strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink);
}
.topbar__title span {
  font-size: 12px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.topbar__spacer { flex-grow: 1; }
.topbar__search {
  position: relative;
  width: 320px;
  max-width: 36vw;
}
.topbar__search input {
  width: 100%;
  height: 38px;
  background: var(--c-surface-soft);
  border: 1px solid transparent;
  padding: 0 12px 0 38px;
  font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.topbar__search input:focus { outline: none; border-color: var(--c-primary); background: #fff; }
.topbar__search .ico {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  fill: var(--c-muted);
}
.topbar__bell {
  position: relative;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
}
.topbar__bell:hover { background: var(--c-surface-soft); }
.topbar__bell-dot {
  position: absolute; top: 6px; right: 8px;
  width: 8px; height: 8px;
  background: var(--c-accent);
  border-radius: 50%;
}
.topbar__role-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* ----- Page area ----- */
.page {
  padding: 24px 32px 80px;
  flex-grow: 1;
  width: 100%;
}
.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--c-line);
}
.page__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 4px;
  color: var(--c-ink);
}
.page__title em { font-weight: 300; color: var(--c-primary); }
.page__subtitle {
  color: var(--c-muted);
  font-size: 14px;
  margin: 0;
}
.page__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--r);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn .ico { fill: currentColor; }

.btn--lg { padding: 14px 24px; font-size: 14px; }
.btn--sm { padding: 6px 12px; font-size: 12px; }

.btn--primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn--primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }

.btn--accent { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.btn--accent:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }

.btn--success { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.btn--success:hover { background: #1b5e20; }

.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost-light:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

.btn--icon {
  padding: 8px;
  width: 36px;
  justify-content: center;
}

/* ==========================================================================
   TILES / KPI CARDS
   ========================================================================== */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tiles--5 { grid-template-columns: repeat(5, 1fr); }

.kpi {
  background: #fff;
  border: 1px solid var(--c-line);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kpi__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.kpi__value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--c-ink);
}
.kpi__value small { font-size: 16px; font-weight: 400; color: var(--c-muted); margin-left: 4px; }
.kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
}
.kpi__delta--up   { color: var(--c-success); }
.kpi__delta--down { color: var(--c-accent); }
.kpi__icon {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.kpi__icon .ico { width: 22px; height: 22px; }

.kpi--blue  .kpi__icon { background: var(--c-primary-soft); color: var(--c-primary); }
.kpi--teal  .kpi__icon { background: var(--c-teal-soft);    color: var(--c-teal-dark); }
.kpi--red   .kpi__icon { background: var(--c-accent-soft);  color: var(--c-accent-dark); }
.kpi--green .kpi__icon { background: var(--c-success-soft); color: var(--c-success); }
.kpi--amber .kpi__icon { background: var(--c-warning-soft); color: var(--c-warning); }
.kpi--purple .kpi__icon { background: var(--c-purple-soft); color: var(--c-purple); }

/* Big solid tile (Metro feature tile) */
.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background: #fff;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  min-height: 160px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tile--blue   { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.tile--teal   { background: var(--c-teal);    color: #fff; border-color: var(--c-teal); }
.tile--dark   { background: var(--c-dark);    color: #fff; border-color: var(--c-dark); }
.tile--accent { background: var(--c-accent);  color: #fff; border-color: var(--c-accent); }
.tile__icon { margin-bottom: 12px; }
.tile__icon .ico { width: 32px; height: 32px; opacity: .9; fill: currentColor; }
.tile__value { font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 4px; letter-spacing: -.02em; }
.tile__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .9;
}

/* ==========================================================================
   CARD / PANEL
   ========================================================================== */
.card {
  background: #fff;
  border: 1px solid var(--c-line);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-line);
  gap: 12px;
}
.card__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card__title small {
  font-weight: 400;
  font-size: 12px;
  color: var(--c-muted);
}
.card__body { padding: 20px; }
.card__body--tight { padding: 0; }
.card__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--c-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--c-muted);
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 12px 20px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}
.tbl th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-surface-soft);
}
.tbl tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.tbl tbody tr:hover { background: var(--c-surface-soft); }
.tbl tbody tr.is-clickable { cursor: pointer; }
.tbl td strong { font-weight: 600; color: var(--c-ink); }
.tbl td a:not([class*="btn"]) { color: var(--c-primary); font-weight: 600; }
.tbl td a:not([class*="btn"]):hover { text-decoration: underline; }
.tbl td .btn { color: inherit; } /* let .btn--* variants win */
.tbl td .btn--primary,  .tbl td .btn--accent,
.tbl td .btn--success,  .tbl td .btn--ghost-light { color: #fff; }
.tbl td .btn--ghost { color: var(--c-ink); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tfoot td {
  font-weight: 700;
  background: var(--c-surface-soft);
}
.tbl__empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--c-muted);
}
.tbl__empty strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 4px;
}

/* ==========================================================================
   CHIPS / BADGES
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.chip--blue   { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.chip--teal   { background: var(--c-teal-soft);    color: var(--c-teal-dark); }
.chip--green  { background: var(--c-success-soft); color: var(--c-success); }
.chip--amber  { background: var(--c-warning-soft); color: var(--c-warning); }
.chip--red    { background: var(--c-accent-soft);  color: var(--c-accent-dark); }
.chip--purple { background: var(--c-purple-soft);  color: var(--c-purple); }
.chip--grey   { background: var(--c-surface-tint); color: var(--c-ink-soft); }
.chip--solid-blue   { background: var(--c-primary); color: #fff; }
.chip--solid-red    { background: var(--c-accent);  color: #fff; }
.chip--solid-green  { background: var(--c-success); color: #fff; }

/* ==========================================================================
   AVATAR
   ========================================================================== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--c-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--md { width: 36px; height: 36px; }
.avatar--lg { width: 52px; height: 52px; font-size: 16px; }
.avatar--xl { width: 72px; height: 72px; font-size: 22px; }
.avatar--blue   { background: var(--c-primary); }
.avatar--teal   { background: var(--c-teal); }
.avatar--green  { background: var(--c-success); }
.avatar--amber  { background: var(--c-warning); }
.avatar--red    { background: var(--c-accent); }
.avatar--purple { background: var(--c-purple); }
.avatar--dark   { background: var(--c-dark); }

/* Avatar + text inline */
.who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.who__text { display: flex; flex-direction: column; line-height: 1.2; }
.who__text strong { font-weight: 600; color: var(--c-ink); }
.who__text span { font-size: 12px; color: var(--c-muted); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}
.form-grid--1 { grid-template-columns: 1fr; }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-muted);
}
.field input,
.field select,
.field textarea {
  height: 44px;
  background: #fff;
  border: 1px solid var(--c-line-strong);
  padding: 0 14px;
  font-size: 14px;
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.field textarea { height: auto; min-height: 100px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--c-primary); border-width: 2px; padding: 0 13px; }
.field textarea:focus { padding: 12px 13px; }
.field--error input,
.field--error select,
.field--error textarea { border-color: var(--c-accent); border-width: 2px; }
.field__hint { font-size: 12px; color: var(--c-muted); }
.field__err  { font-size: 12px; color: var(--c-accent); font-weight: 600; }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.checkbox input[type=checkbox],
.checkbox input[type=radio] {
  width: 18px; height: 18px;
  accent-color: var(--c-primary);
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  margin-top: 24px;
}

/* ==========================================================================
   FLASH MESSAGES
   ========================================================================== */
.flash-stack {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flash {
  padding: 12px 16px;
  border-left: 4px solid var(--c-primary);
  background: #fff;
  border: 1px solid var(--c-line);
  border-left-width: 4px;
  font-size: 13px;
  font-weight: 600;
}
.flash--success { border-left-color: var(--c-success); }
.flash--error   { border-left-color: var(--c-accent); }
.flash--warning { border-left-color: var(--c-warning); }
.flash--info    { border-left-color: var(--c-primary); }

/* ==========================================================================
   AUTH (LOGIN) PAGE
   ========================================================================== */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}
.auth__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px clamp(40px, 6vw, 88px);
  background: #fff;
}
.auth__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 56px;
}
.auth__brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.auth__brand-text strong { font-size: 17px; font-weight: 700; color: var(--c-ink); }
.auth__brand-text strong em { font-weight: 300; color: var(--c-primary); }
.auth__brand-text span {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 2px;
}
.auth__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 12px;
}
.auth__eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--c-accent);
}
.auth__title {
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0 0 16px;
}
.auth__title em { font-weight: 300; color: var(--c-primary); }
.auth__lede {
  color: var(--c-ink-soft);
  font-size: 16px;
  margin: 0 0 32px;
  max-width: 42ch;
}
.auth__form { display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.auth__demo {
  margin-top: 24px;
  padding: 16px;
  background: var(--c-surface-soft);
  border-left: 3px solid var(--c-primary);
  font-size: 12px;
  color: var(--c-ink-soft);
  max-width: 420px;
}
.auth__demo strong { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-primary-dark); margin-bottom: 8px; }
.auth__demo code { background: #fff; padding: 1px 6px; font-family: ui-monospace, Menlo, Consolas, monospace; border: 1px solid var(--c-line); }
.auth__demo ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.auth__demo ul li { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.auth__foot {
  margin-top: 56px;
  font-size: 12px;
  color: var(--c-muted);
}
.auth__visual {
  position: relative;
  background: var(--c-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  color: #fff;
}
.auth__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/login-side.jpg');
  background-size: cover;
  background-position: center;
  opacity: .85;
}
.auth__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-primary-dark);
  mix-blend-mode: multiply;
  opacity: .55;
}
.auth__visual > * { position: relative; z-index: 2; }
.auth__visual-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.auth__visual-eyebrow::before { content: ""; width: 8px; height: 8px; background: #fff; }
.auth__visual-title {
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 16px 0;
}
.auth__visual-title em { font-weight: 300; }
.auth__visual-list {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 32px;
}
.auth__visual-list li {
  display: flex; gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
.auth__visual-list li::before {
  content: "";
  width: 16px; height: 16px;
  background: #fff;
  flex-shrink: 0;
  margin-top: 2px;
}
.auth__visual-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .85;
}
.auth__visual-foot .status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #4CAF50;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* ==========================================================================
   PATIENT PROFILE / DETAIL HEADER
   ========================================================================== */
.detail-head {
  background: #fff;
  border: 1px solid var(--c-line);
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}
.detail-head__main h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.detail-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 12px;
  color: var(--c-ink-soft);
  font-size: 13px;
}
.detail-head__meta strong { color: var(--c-ink); font-weight: 600; }
.detail-head__meta-item span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-muted);
  display: block;
  margin-bottom: 2px;
}

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 20px;
}
.tabs__link {
  position: relative;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--dur-fast) var(--ease);
}
.tabs__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--c-primary);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.tabs__link:hover { color: var(--c-ink); }
.tabs__link.is-active { color: var(--c-primary); }
.tabs__link.is-active::after { transform: scaleX(1); }

/* ==========================================================================
   TIMELINE (encounter history)
   ========================================================================== */
.timeline {
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--c-line);
}
.timeline__item { position: relative; padding-bottom: 24px; }
.timeline__dot {
  position: absolute;
  left: -28px; top: 6px;
  width: 18px; height: 18px;
  background: #fff;
  border: 3px solid var(--c-primary);
}
.timeline__when {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 4px;
}
.timeline__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 4px;
}
.timeline__meta { font-size: 13px; color: var(--c-ink-soft); }

/* ==========================================================================
   AGENDA / CALENDAR LIST
   ========================================================================== */
.agenda { display: flex; flex-direction: column; }
.agenda__row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-line);
  transition: background-color var(--dur-fast) var(--ease);
}
.agenda__row:hover { background: var(--c-surface-soft); }
.agenda__row:last-child { border-bottom: 0; }
.agenda__time {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: -.01em;
}
.agenda__time small { display: block; font-size: 11px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 1.2px; }
.agenda__body strong { display: block; font-size: 14px; font-weight: 600; color: var(--c-ink); }
.agenda__body span { font-size: 12px; color: var(--c-muted); }
.agenda__actions { display: flex; gap: 6px; }

/* ==========================================================================
   INVOICE / RECEIPT
   ========================================================================== */
.invoice {
  background: #fff;
  border: 1px solid var(--c-line);
  padding: 32px;
}
.invoice__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}
.invoice__head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.invoice__head .invoice__no { font-size: 14px; color: var(--c-muted); margin-top: 4px; }
.invoice__total-block {
  text-align: right;
}
.invoice__total-block .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-muted);
}
.invoice__total-block .val {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.02em;
}
.invoice__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-line);
}
.invoice__parties .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 6px;
}

/* ==========================================================================
   DASHBOARD HERO BANNERS
   ========================================================================== */
.welcome {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.welcome__greeting {
  background: var(--c-primary);
  color: #fff;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.welcome__greeting::before {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: var(--c-primary-dark);
  transform: rotate(15deg);
  opacity: .5;
}
.welcome__greeting > * { position: relative; z-index: 1; }
.welcome__greeting .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.welcome__greeting .eyebrow::before {
  content: ""; width: 8px; height: 8px; background: #fff;
}
.welcome__greeting h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 8px 0 6px;
}
.welcome__greeting h2 em { font-weight: 300; }
.welcome__greeting p { margin: 0; font-size: 14px; opacity: .9; max-width: 56ch; }
.welcome__greeting .welcome__actions {
  display: flex; gap: 8px;
  margin-top: 20px;
}
.welcome__day {
  background: #fff;
  border: 1px solid var(--c-line);
  padding: 20px;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.welcome__day .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c-muted);
}
.welcome__day .date {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 8px 0 4px;
}
.welcome__day .day {
  color: var(--c-muted);
  font-size: 14px;
}
.welcome__day .stats-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
.welcome__day .stats-row .stat strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-primary);
}
.welcome__day .stats-row .stat span {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c-muted);
}

/* ==========================================================================
   GRID LAYOUTS
   ========================================================================== */
.grid {
  display: grid;
  gap: 20px;
}
.grid--2-1 { grid-template-columns: 2fr 1fr; }
.grid--1-1 { grid-template-columns: 1fr 1fr; }
.grid--3   { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   SEARCH BAR (in-page)
   ========================================================================== */
.searchbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.searchbar input,
.searchbar select {
  height: 40px;
  border: 1px solid var(--c-line-strong);
  padding: 0 12px;
  font-size: 13px;
  background: #fff;
}
.searchbar input { flex-grow: 1; min-width: 200px; }
.searchbar input:focus,
.searchbar select:focus { outline: none; border-color: var(--c-primary); }

/* ==========================================================================
   ERRORS
   ========================================================================== */
.err-page {
  max-width: 640px;
  margin: 96px auto;
  text-align: center;
  padding: 0 24px;
}
.err-page__code {
  font-size: 88px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1;
  letter-spacing: -.04em;
}
.err-page h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0 16px;
}
.err-page p { color: var(--c-ink-soft); margin-bottom: 24px; }

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .sidebar, .topbar, .page__actions, .form-actions { display: none !important; }
  .app { grid-template-columns: 1fr; }
  body { background: #fff; }
  .card, .invoice { border: 1px solid #333; box-shadow: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles--5 { grid-template-columns: repeat(3, 1fr); }
  .tiles--3 { grid-template-columns: repeat(2, 1fr); }
  .welcome { grid-template-columns: 1fr; }
  .grid--2-1, .grid--3 { grid-template-columns: 1fr; }
  .grid--1-1 { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth__visual { display: none; }
}
@media (max-width: 820px) {
  :root { --sidebar-w: 0px; }
  .sidebar { display: none; position: fixed; inset: 0; z-index: 50; width: 280px; }
  .sidebar.is-open { display: flex; }
  .app { grid-template-columns: 1fr; }
  .topbar__search { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .invoice__parties { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .tiles { grid-template-columns: 1fr; }
  .tiles--3, .tiles--5 { grid-template-columns: 1fr; }
  .page { padding: 16px 16px 64px; }
  .auth__panel { padding: 32px 20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}