/*
 * Medipulse UI on top of Filament: tokens from the Medipulse UI design system
 * (E:\Work\Medipulse\erp\design-system\tokens.json). Light first, dark under .dark.
 *
 * Polish pass, 10 November 2026 (unslop method by Damir Sokolovsky, CC BY 4.0): one grey ramp (Filament's gray is
 * built from these tokens in AdminPanelProvider), a 4px grid, five text sizes, Lato at 400 with 700 only for titles,
 * names and key figures, sentence case everywhere, colour only where it means something.
 */
:root {
  --mp-canvas: #f5f8f8;
  --mp-surface: #ffffff;
  --mp-surface-sunk: #f0f4f4;
  --mp-line: #e2e9e8;
  --mp-line-strong: #7a8e8b;
  --mp-ink: #102322;
  --mp-ink-muted: #566866;
  --mp-brand: #0f6e68;
  --mp-brand-soft: #e3f0ee;
  --mp-brand-ink: #062a2a;
  --mp-bar-idle: #e6eeed;
  --mp-cost: #9a5414;
  --mp-negative: #c62828;
  --mp-warn: #a15c00;
  --mp-positive: #146c34;
  --mp-radius-sm: 4px;
  --mp-radius-md: 8px;
  --mp-radius-lg: 16px;
  --mp-shadow-card: 0 1px 2px rgba(16, 35, 34, 0.04);
  /* Five text sizes, then figures */
  --mp-text-xs: 12px;
  --mp-text-sm: 13px;
  --mp-text-md: 14px;
  --mp-text-lg: 16px;
  --mp-text-fig: 20px;
}
.dark {
  --mp-canvas: #0b1615;
  --mp-surface: #11201f;
  --mp-surface-sunk: #172928;
  --mp-line: #243937;
  --mp-line-strong: #5e7673;
  --mp-ink: #e6efee;
  --mp-ink-muted: #9fb3b0;
  --mp-brand: #4fb8ad;
  --mp-brand-soft: #16332f;
  --mp-brand-ink: #e6efee;
  --mp-bar-idle: #1c302e;
  --mp-cost: #e6a15c;
  --mp-negative: #f87171;
  --mp-warn: #fbbf24;
  --mp-positive: #4ade80;
  --mp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* canvas, sidebar and top bar */
.fi-body { background-color: var(--mp-canvas); }
.fi-sidebar, .fi-main-sidebar { background-color: var(--mp-surface); }
@media (min-width: 1024px) {
  .fi-main-sidebar { border-inline-end: 1px solid var(--mp-line); }
}
.fi-topbar { background-color: var(--mp-surface); border-bottom: 1px solid var(--mp-line); box-shadow: none; }

/* brand: the logo on its white tile, then the wordmark */
.mp-brand { display: inline-flex; align-items: center; gap: 8px; }
.mp-brand-logo { width: 32px; height: 32px; border-radius: 8px; background: #ffffff; object-fit: contain; padding: 2px; box-sizing: border-box; }
.mp-brand-name { font-size: 18px; font-weight: 700; color: var(--mp-brand-ink); letter-spacing: 0; }

/*
 * navigation: the densest part of the app. Rows 36 tall with 2 between them, icons 20 in one column,
 * a group label 24 below the group above and 8 above its own items. The Money group alone has 12 items.
 */
.fi-sidebar-nav { padding-block: 24px; row-gap: 24px; }
.fi-sidebar-nav-groups { row-gap: 24px; }
.fi-sidebar-group { row-gap: 4px; }
.fi-sidebar-group-items { row-gap: 2px; }
.fi-sidebar-group-btn { padding: 4px 8px; }
.fi-sidebar-group-label { font-weight: 400; font-size: var(--mp-text-sm); color: var(--mp-ink-muted); }
.fi-sidebar-item-btn { padding: 0 8px; column-gap: 12px; height: 36px; }
.fi-sidebar-item-btn > .fi-icon { width: 20px; height: 20px; }
.fi-sidebar-item-label { font-size: var(--mp-text-md); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--mp-brand-soft); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mp-brand) 14%, transparent); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--mp-brand); font-weight: 400; }
.fi-sidebar-item-badge-ctn .fi-badge { font-variant-numeric: tabular-nums; }

/* page header: size and colour make the hierarchy, not weight */
.fi-header-heading { letter-spacing: -0.01em; }
.fi-header-subheading { color: var(--mp-ink-muted); font-size: var(--mp-text-lg); line-height: 24px; }

/* cards: radius-lg, hairline border, barely-there shadow */
.fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn, .fi-wi-chart, .fi-in-entry-wrp .fi-section {
  border-radius: var(--mp-radius-lg);
}
.fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn {
  box-shadow: var(--mp-shadow-card);
}

/* stat cards: a label, the figure, and what it compares to. No icons. */
.fi-wi-stats-overview-stat-label { font-weight: 400; }
.fi-wi-stats-overview-stat-value { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em; }
.fi-wi-stats-overview-stat-description { font-variant-numeric: tabular-nums; }

/* tables: header band in surface-sunk, tabular figures */
.fi-ta-header-cell { background-color: var(--mp-surface-sunk); }
.fi-ta-text-item, .fi-ta-cell { font-variant-numeric: tabular-nums; }

/* ---------- Medipulse components used by custom pages and widgets ---------- */
.mp-muted { color: var(--mp-ink-muted); }
.mp-num { font-variant-numeric: tabular-nums; }
.mp-neg { color: var(--mp-negative); }

/*
 * The signature: a case's file tab. The case number and the countries the family would consider, as small
 * hairline tags in tabular figures, the same wherever a case appears.
 */
.mp-cc, .mp-case-no {
  display: inline-flex; align-items: center; height: 20px; padding: 0 4px;
  border: 1px solid var(--mp-line); border-radius: var(--mp-radius-sm); background: var(--mp-surface);
  font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 0.02em; color: var(--mp-ink-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mp-case-no { padding: 0 8px; color: var(--mp-ink); justify-self: start; }

/* case board */
.mp-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.mp-board-col { background: var(--mp-surface-sunk); border-radius: 12px; padding: 8px; display: grid; gap: 8px; align-content: start; min-height: 160px; }
.mp-board-col-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 0; font-size: var(--mp-text-sm); font-weight: 700; color: var(--mp-ink); }
.mp-board-col-head > :last-child { font-weight: 400; color: var(--mp-ink-muted); font-variant-numeric: tabular-nums; }
.mp-board-list { display: grid; gap: 8px; min-height: 80px; align-content: start; }
.mp-card { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--mp-line); border-radius: var(--mp-radius-md); background: var(--mp-surface); cursor: grab; text-decoration: none; color: inherit; transition: border-color 150ms cubic-bezier(0.22, 1, 0.36, 1); }
.mp-card:hover { border-color: var(--mp-line-strong); }
.mp-card-name { font-size: var(--mp-text-md); font-weight: 700; color: var(--mp-ink); }
.mp-card-meta { font-size: var(--mp-text-xs); color: var(--mp-ink-muted); }
.mp-card-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.mp-pill { display: inline-flex; align-items: center; height: 20px; font-size: var(--mp-text-xs); line-height: 16px; font-weight: 700; padding: 0 8px; border-radius: 10px; background: var(--mp-surface-sunk); color: var(--mp-ink-muted); white-space: nowrap; }
.mp-pill.ok { background: #e6f4ea; color: var(--mp-positive); }
.mp-pill.warn { background: #fdf2de; color: var(--mp-warn); }
.mp-pill.bad { background: #fcebeb; color: var(--mp-negative); }
.mp-pill.info { background: #e8f0fd; color: #1d5fd1; }
.dark .mp-pill.ok { background: #10301d; }
.dark .mp-pill.warn { background: #362808; }
.dark .mp-pill.bad { background: #3b1616; }
.dark .mp-pill.info { background: #15243f; color: #7aa7f7; }
.mp-board-empty { font-size: var(--mp-text-xs); color: var(--mp-ink-muted); padding: 0 4px 8px; }
.mp-board-filters { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.mp-board-filters label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--mp-text-md); color: var(--mp-ink-muted); }
.mp-board-filters .fi-input-wrp { min-width: 200px; }
@media (max-width: 640px) {
  .mp-board-filters label { width: 100%; }
  .mp-board-filters label > span { width: 56px; flex: none; }
  .mp-board-filters .fi-input-wrp { flex: 1; min-width: 0; }
}
a.mp-card-name { text-decoration: none; }
a.mp-card-name:hover { text-decoration: underline; }
.mp-card[data-sortable-chosen], .sortable-chosen { box-shadow: 0 8px 24px rgba(16, 35, 34, 0.12); }
.mp-sort-ghost { opacity: .4; }

/* document checklist on the case page */
.mp-check { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; font-size: var(--mp-text-md); align-items: center; }
.mp-check .y { color: var(--mp-positive); font-weight: 700; }
.mp-check .n { color: var(--mp-negative); font-weight: 700; }

/* progress rows */
.mp-progress { display: grid; gap: 8px; }
.mp-progress-top, .mp-progress-foot { display: flex; justify-content: space-between; gap: 12px; }
.mp-progress-top { font-size: var(--mp-text-sm); }
.mp-progress-foot { font-size: var(--mp-text-xs); color: var(--mp-ink-muted); font-variant-numeric: tabular-nums; }
.mp-bar { position: relative; height: 6px; border-radius: 3px; background: var(--mp-bar-idle); }
.mp-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--mp-brand); }

/* person cards */
.mp-person { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--mp-line); border-radius: 12px; background: var(--mp-surface); }
.mp-person-head { display: flex; gap: 12px; align-items: center; }
.mp-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mp-brand-soft); color: var(--mp-brand); font-size: var(--mp-text-sm); font-weight: 700; }
.mp-person-who { display: grid; flex: 1; min-width: 0; }
.mp-person-name { font-size: var(--mp-text-md); font-weight: 700; }
.mp-person-id { font-size: var(--mp-text-xs); color: var(--mp-ink-muted); font-variant-numeric: tabular-nums; }
.mp-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--mp-text-sm); }
.mp-kv dt { color: var(--mp-ink-muted); }
.mp-kv dd { margin: 0; }

/* quotation: options side by side. One of the two places with the richest treatment. */
.mp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mp-strong { font-weight: 700; color: var(--mp-ink); }
.mp-compare-wrap { overflow-x: auto; }
.mp-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--mp-text-md); color: var(--mp-ink); font-variant-numeric: tabular-nums; }
.mp-compare th, .mp-compare td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mp-line); }
.mp-compare tbody th { width: 172px; font-weight: 400; color: var(--mp-ink-muted); white-space: nowrap; }
.mp-compare thead th { border-bottom: 2px solid var(--mp-line); }
.mp-compare-option { min-width: 192px; }
.mp-compare-option.is-chosen { background: var(--mp-brand-soft); border-radius: 8px 8px 0 0; }
.mp-compare-hospital { font-size: var(--mp-text-lg); font-weight: 700; color: var(--mp-ink); }
.mp-compare-where, .mp-compare-tags { font-size: var(--mp-text-xs); font-weight: 400; color: var(--mp-ink-muted); margin: 4px 0; }
.mp-compare td .mp-pill { margin-top: 4px; }
.mp-compare-total th, .mp-compare-total td { background: var(--mp-surface-sunk); }
.mp-compare-total .mp-strong { font-size: var(--mp-text-lg); color: var(--mp-brand); }
.mp-compare-note { margin-top: 12px; font-size: var(--mp-text-sm); color: var(--mp-ink-muted); max-width: 72ch; }

/* case page: money, expected and so far */
.mp-money { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mp-money-head { font-size: var(--mp-text-md); font-weight: 700; color: var(--mp-ink); margin-bottom: 8px; }
.mp-money-lines { margin: 0; display: grid; }
.mp-money-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--mp-line); font-size: var(--mp-text-md); }
.mp-money-lines dt { color: var(--mp-ink-muted); }
.mp-money-lines dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--mp-ink); white-space: nowrap; }
.mp-money-sub dt, .mp-money-sub dd { font-weight: 700; color: var(--mp-ink); }
.mp-money-total { border-bottom: 0 !important; padding-top: 12px !important; }
.mp-money-total dt { font-weight: 700; color: var(--mp-ink); }
.mp-money-total dd { font-weight: 700; font-size: var(--mp-text-lg); color: var(--mp-ink); }
.mp-money-total dd.is-negative { color: var(--mp-negative); }

/* Month end, ledger and budget (Phase 2, part 2) */
.mp-months { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.mp-month { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--mp-line); border-radius: var(--mp-radius-md); background: var(--mp-surface); font-size: var(--mp-text-sm); font-weight: 400; color: var(--mp-ink); white-space: nowrap; cursor: pointer; transition: border-color 150ms cubic-bezier(0.22, 1, 0.36, 1); }
.mp-month:hover { border-color: var(--mp-line-strong); }
.mp-month.is-current { border-color: var(--mp-brand); box-shadow: inset 0 0 0 1px var(--mp-brand); background: var(--mp-brand-soft); font-weight: 700; }
.mp-monthend { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; }
.mp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mp-check-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; font-size: var(--mp-text-md); }
.mp-check-row .mp-pill { justify-content: center; }
.mp-money-lines a { color: inherit; text-decoration: none; }
.mp-money-lines a:hover { color: var(--mp-brand); text-decoration: underline; }
.mp-ledger { width: 100%; border-collapse: collapse; font-size: var(--mp-text-md); font-variant-numeric: tabular-nums; }
.mp-ledger th { text-align: left; font-size: var(--mp-text-sm); font-weight: 700; color: var(--mp-ink-muted); padding: 8px 12px; border-bottom: 1px solid var(--mp-line); white-space: nowrap; }
.mp-ledger td { padding: 8px 12px; border-bottom: 1px solid var(--mp-line); color: var(--mp-ink); white-space: nowrap; }
.mp-ledger .r { text-align: right; }
.mp-ledger tfoot td { font-weight: 700; border-bottom: 0; }
.mp-ledger a { color: inherit; text-decoration: none; }
.mp-ledger a:hover { color: var(--mp-brand); text-decoration: underline; }
.mp-ledger td.over { color: var(--mp-negative); font-weight: 700; }
.mp-ledger td.under { color: var(--mp-positive); }
.mp-ledger td .mp-of { display: block; font-size: var(--mp-text-xs); color: var(--mp-ink-muted); font-weight: 400; }
.mp-ledger tr.is-total td { font-weight: 700; background: var(--mp-surface-sunk); }
.mp-ledger th.is-now, .mp-ledger td.is-now { background: var(--mp-brand-soft); }
.mp-day90 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); }
.mp-day90-item { display: grid; gap: 4px; padding: 12px 16px; border: 1px solid var(--mp-line); border-radius: 12px; background: var(--mp-surface); font-size: var(--mp-text-sm); align-content: start; }
.mp-day90-value { font-size: var(--mp-text-fig); line-height: 28px; font-weight: 700; color: var(--mp-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 1100px) { .mp-day90 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Keep in touch */
.mp-touch td { white-space: normal; vertical-align: top; }
.mp-touch td.r { white-space: nowrap; }
.mp-touch-links { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--mp-text-sm); margin-top: 4px; }
.mp-touch-links a { color: var(--mp-brand); text-decoration: none; }
.mp-touch-links a:hover { text-decoration: underline; }

/* Cases by stage on Today: full width, the stages in a grid (four across on a desktop, one per row on a phone) */
.mp-stage-grid { display: grid; gap: 16px 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Section header buttons (the case page's Edit, Upload, Add) stay top right; a long description wraps instead of pushing them down */
.fi-section > .fi-section-header > .fi-section-header-content { flex-wrap: nowrap; }
.fi-section .fi-section-header-text-ctn { width: auto; min-width: 0; }
.fi-section > .fi-section-header > .fi-section-header-content > .fi-section-header-after-ctn { align-self: flex-start; }