/* ============================================================================
   Mayfair Life — Corporate edition. Executive design system.

   This is a full re-dressing of the internal policy administration interface
   into an institutional, board-room grade system: a deep command-navy ground,
   the original build's Poppins for titles and headline figures, disciplined
   hairline structure, quiet section bands, a data-room table and gold held back
   to the brand mark and the active-page bar. It changes no markup. It works entirely through the app's utility
   classes and element structure, so every screen is transformed together and
   cannot drift apart. Theme aware, dark and light.

   Why so many rules carry !important: the base build ships a pre-compiled
   Tailwind (app.css) whose utility classes (e.g. .text-white, .text-muted-400,
   .bg-ink-800) and a font-family !important in fonts.css outrank plain element
   selectors. To lift the interface rather than tint it, the intended
   typography, colour and structure must win those cascades deliberately.
   ========================================================================= */

/* ---- vendored display sans (offline, no CDN) ---------------------------
   Poppins is the typeface the original Mayfair build shipped, so the corporate
   edition wears the house font rather than a bespoke serif. Used for the
   display voice (page titles, exhibit titles, headline figures, brand); Inter
   still carries body and data so money columns keep their tabular alignment. */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400;
  font-display:swap; src:url("fonts/poppins-400.9212f6f9860f.woff2") format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500;
  font-display:swap; src:url("fonts/poppins-500.a09f2fccfee3.woff2") format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600;
  font-display:swap; src:url("fonts/poppins-600.72993dddf88a.woff2") format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700;
  font-display:swap; src:url("fonts/poppins-700.25b0e113ca7c.woff2") format('woff2'); }

:root {
  /* deep command navy, cool and authoritative */
  --ink-900: 4 17 28;      /* page ground        #04111C */
  --ink-850: 7 23 37;      /* rail / banded rows  #071725 */
  --ink-800: 11 30 47;     /* cards               #0B1E2F */
  --ink-700: 20 45 66;     /* raised chips        #142D42 */
  --ink-600: 31 57 80;     /* borders / hairlines */
  --ink-500: 52 80 104;    /* faint rules */
  --gold-500: 200 168 107;
  --gold-400: 216 190 143;
  --teal-500: 45 212 191;
  --display: 'Poppins', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  /* charts: fainter grid, cleaner exhibit */
  --chart-grid: #143047;
  --chart-text: #6f8296;
}
html.light {
  --ink-900: 240 243 247;  /* institutional off-white ground */
  --ink-850: 247 249 251;
  --ink-800: 255 255 255;  /* cards */
  --ink-700: 233 238 243;
  --ink-600: 219 227 235;
  --ink-500: 189 201 213;
  --chart-grid: #e2e8f0;
  --chart-text: #5b6b7c;
}

/* ===== ground ============================================================= */
body {
  background: rgb(var(--ink-900)) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .001em;
}
html.light body { background: rgb(var(--ink-900)) !important; }

/* thin, quiet scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgb(var(--ink-600)) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgb(var(--ink-600));border-radius:9px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgb(var(--ink-500))}

/* ===== command rail (sidebar) ============================================ */
aside.hidden.lg\:flex {
  background: rgb(var(--ink-850)) !important;
  border-right: 1px solid rgb(var(--ink-600)) !important;
}
html.light aside.hidden.lg\:flex {
  background: #fff !important;
  border-right: 1px solid rgb(var(--ink-600)) !important;
}

/* brand block: mark + display wordmark */
aside .grid.h-9.w-9.bg-gold-500 {
  font-family: var(--display) !important;
}
aside .text-\[16px\].font-semibold.text-white {
  font-family: var(--display) !important; font-weight: 600 !important;
  letter-spacing: .01em; font-size: 17px !important;
}

/* rail section labels: gold, spaced, quiet */
aside nav .uppercase {
  letter-spacing: .14em !important;
  font-size: 10px !important;
}

/* nav links: breathing room + an accent bar on the current page */
aside nav a { position: relative; border-radius: .55rem; }
aside nav a.bg-ink-700,
aside nav a.text-white.bg-ink-700,
aside .mf-sub-on {
  box-shadow: inset 3px 0 0 rgb(var(--gold-500));
}

/* search field in the rail */
aside .rounded-lg.border.border-ink-600.bg-ink-800 { border-radius: .6rem; }

/* signed-in footer avatar */
aside .rounded-full.bg-ink-600 { background: rgb(var(--ink-700)) !important; }

/* ===== top banner ======================================================== */
main > header {
  background: rgb(var(--ink-850)) !important;
  border-bottom: 1px solid rgb(var(--ink-600)) !important;
  padding-top: 1.1rem !important; padding-bottom: 1.1rem !important;
}
html.light main > header {
  background: #fff !important;
  border-bottom: 1px solid rgb(var(--ink-600)) !important;
}
/* breadcrumb: brand in gold small-caps */
main > header .text-\[13px\].text-muted-400 { letter-spacing: .01em; }

/* ===== page titles: serif, executive ===================================== */
main h1 {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
}
/* the subtitle under the H1 */
main h1 + p { font-size: 13px !important; letter-spacing: .006em; }

/* ===== cards: hairline, depth, quiet radius ============================== */
.rounded-xl.bg-ink-800, .rounded-2xl.bg-ink-800,
.rounded-xl.border.border-ink-600.bg-ink-800 {
  border: 1px solid rgb(var(--ink-600)) !important;
  border-radius: 6px !important;
  box-shadow: none;
}
html.light .rounded-xl.border.border-ink-600.bg-ink-800,
html.light .rounded-xl.bg-ink-800, html.light .rounded-2xl.bg-ink-800 {
  border: 1px solid rgb(var(--ink-600)) !important;
  box-shadow: none;
}
/* a card's first header row (has a bottom border) becomes a quiet band */
.bg-ink-800 > .border-b.border-ink-600:first-child {
  background: rgb(var(--ink-850));
}
html.light .bg-ink-800 > .border-b.border-ink-600:first-child {
  background: rgb(var(--ink-850));
  border-bottom: 1px solid rgb(var(--ink-600)) !important;
}

/* ===== card / exhibit titles: serif ====================================== */
.text-\[15px\].font-semibold.text-white,
.text-\[16px\].font-semibold.text-white {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: .005em;
}

/* ===== headline figures: serif, unmistakably the point =================== */
.text-\[22px\].font-bold,
.text-\[24px\].font-bold,
.text-\[26px\].font-bold,
.text-\[28px\].font-bold,
.text-\[30px\].font-bold.leading-none,
.text-\[32px\].font-bold {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* small stat labels above figures → gold small-caps eyebrow.
   Two markup patterns exist: the dashboard KPI (label inside a flex wrapper)
   and the product / policy KPI (a 12px muted label as the card's first child).
   Both are lifted to the same executive eyebrow so the metric strips match. */
.rounded-xl.border.border-ink-600.bg-ink-800 > .flex.items-start.justify-between > .text-\[13px\].text-muted-400,
.rounded-xl.border.border-ink-600.bg-ink-800.p-5 > .text-\[12px\].text-muted-400:first-child {
  text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px !important;
  font-weight: 600;
}

/* delta chips: flatter, calmer */
.rounded-full.bg-emerald-500\/15 { background: rgba(45,212,191,.14) !important; }
.rounded-full.bg-rose-500\/15   { background: rgba(244,63,94,.13) !important; }

/* ===== the data-room table =============================================== */
table thead th {
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding-top: .85rem !important; padding-bottom: .85rem !important;
}
table thead tr { background: rgb(var(--ink-850)); }
table thead tr.border-b { border-bottom: 1px solid rgb(var(--ink-500)) !important; }
td, th { font-variant-numeric: tabular-nums; }

/* the "Open" row action → gold, deliberate */
tbody a.text-gold-500, tbody .text-gold-500 { font-weight: 600; }

/* ===== status tags: square, lettered, institutional ====================== */
.inline-flex.rounded-full.px-2\.5.py-0\.5.text-\[11px\].font-semibold,
.inline-flex.rounded-full.px-2.py-0\.5.text-\[11px\].font-semibold,
span.rounded-full.px-2.py-0\.5.text-\[11px\].font-semibold {
  border-radius: 3px !important;
  text-transform: uppercase;
  font-size: 9.5px !important;
  letter-spacing: .06em;
  font-weight: 600 !important;
}

/* ===== primary action (gold) ============================================= */
.bg-gold-500:hover { filter: brightness(1.04); }

/* ghost / secondary buttons: refined hairline */
.rounded-lg.border.border-ink-600.bg-ink-800:hover,
.rounded-lg.border.border-ink-600.bg-ink-700:hover { border-color: rgb(var(--ink-500)) !important; }

/* ===== segmented / pill chips (period, "18 months") ====================== */
.rounded-lg.border.border-ink-600.bg-ink-700 { background: rgb(var(--ink-700)) !important; }

/* ===== interaction & focus =============================================== */
button, a { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgb(var(--gold-500)); outline-offset: 2px; border-radius: 6px;
}

/* light-mode body text colour */
html.light body { color: #10233a; }

/* ===== institutional geometry ============================================ */
.rounded-2xl { border-radius: 6px !important; }
.rounded-xl  { border-radius: 6px !important; }
.rounded-lg  { border-radius: 5px !important; }
.rounded-md  { border-radius: 4px !important; }
/* avatars stay circular */
.mf-avatar, .rounded-full.bg-ink-600, .rounded-full.bg-gold-500,
.grid.rounded-full { border-radius: 9999px !important; }

/* density: a shade tighter everywhere cards pad */
.p-5 { padding: 1.05rem !important; }
.p-6 { padding: 1.3rem !important; }

/* the rail: slightly narrower, banking-desk proportions */
aside.w-72 { width: 16.25rem !important; }

/* dividing rules between rows: hairline, consistent */
tbody tr.border-b { border-color: rgb(var(--ink-700)) !important; }
tbody tr:hover { background: rgb(var(--ink-850)); }
html.light tbody tr:hover { background: rgb(var(--ink-850)); }

/* numerals right where markup right-aligns; keep lining figures */
td.text-right, th.text-right { font-feature-settings: 'tnum' 1, 'lnum' 1; }

/* focus: thin, square, precise */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 1px solid rgb(var(--gold-500)) !important;
  outline-offset: 1px !important; border-radius: 3px !important;
}

/* ===== native controls brought into the system ===========================
   Bare <select>, date and file inputs were the last browser-chrome holdouts
   (audit filters, capture forms, product builder, upload). They now carry the
   same field treatment as .mf-input, with a drawn chevron for selects and a
   ghost button for file pickers, in both themes. */
main select, #content select, .mf-wrap select {
  -webkit-appearance: none; appearance: none;
  background-color: rgb(var(--ink-850)) !important;
  border: 1px solid rgb(var(--ink-600)) !important;
  border-radius: 5px !important;
  color: rgb(var(--white)) !important;
  font-size: 13px; padding: .5rem 2rem .5rem .7rem !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a97a8' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center;
}
html.light main select, html.light #content select, html.light .mf-wrap select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6b7c' stroke-width='1.6'/%3E%3C/svg%3E");
}
main select:focus, #content select:focus, .mf-wrap select:focus {
  outline: none; border-color: rgb(var(--gold-500)) !important;
}
main input[type="date"], main input[type="month"], main input[type="time"],
#content input[type="date"], #content input[type="month"], #content input[type="time"] {
  background-color: rgb(var(--ink-850)) !important;
  border: 1px solid rgb(var(--ink-600)) !important;
  border-radius: 5px !important;
  color: rgb(var(--white)) !important;
  font-size: 13px; padding: .45rem .7rem !important;
}
input[type="file"] { color: rgb(var(--muted-400)); font-size: 12.5px; }
input[type="file"]::file-selector-button {
  background: rgb(var(--ink-700)); color: rgb(var(--white));
  border: 1px solid rgb(var(--ink-600)); border-radius: 5px;
  padding: .45rem .9rem; margin-right: .75rem; font-size: 12.5px;
  font-family: inherit; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: rgb(var(--ink-500)); }

/* ===== admin headings join the display voice ============================= */
#content h1, .mf-wrap h1 {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  letter-spacing: -.01em !important;
  color: rgb(var(--white)) !important;
}

/* ===== register actions never wrap ======================================= */
td:last-child a, td:last-child button { white-space: nowrap; }