/* ── Noto Sans Thaana (Dhivehi/Thaana) is now SELF-HOSTED (see the @font-face in
   PART 1 below). The former Google Fonts CDN @import was removed so DV renders
   offline and never blocks/fails on a missing network. ── */

/* ============================================================
   ViyaBook — vb-core.css
   Single core stylesheet: merges the former
     • assets/css/fonts.css   (self-hosted Inter + Faruma, lang rules)
     • sidebar.css            (dark-sidebar first-paint fallback)
   into ONE render-path request, replacing two.

   Load order note: the sidebar fallback below is intentionally
   low-specificity and light-mode only. dark.css (html.viya-dv …)
   wins dark mode by specificity, and the runtime theme injected by
   components/layout.js still wins at paint time — both independent
   of where this file sits in the cascade. So merging the sidebar
   rules to the fonts position is visually neutral.

   NOTE: admin/* pages are intentionally NOT migrated to this file —
   they style `.sidebar` light in an inline <style> that precedes
   their <link>s, so they keep loading fonts.css only.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   PART 0 — FULL-BLEED APP BACKGROUND (global)
   html/body always fill the viewport and carry the app background, so overscroll
   rubber-banding and safe-area gaps under the system bars reveal the APP colour —
   never the device wallpaper (the "green/coloured edge"). Uses the app's own --bg
   token so it follows light/dark automatically; overscroll-behavior stops the
   rubber-band from exposing anything behind the page.
   Safe-area padding is applied to the injected top-nav / bottom-nav
   (components/layout.js), NOT to <body>, so the background stays full-bleed and the
   existing 100dvh app-shell layouts are not shifted.
   ════════════════════════════════════════════════════════════ */
html, body {
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg, #f5f8fc);
  overscroll-behavior: none;
}
/* Dark-mode edges are navy, not the device colour. The app toggles dark via
   html.viya-dv; html[data-theme="dark"] is covered too for any page using that. */
html.viya-dv, html.viya-dv body,
html[data-theme="dark"], html[data-theme="dark"] body {
  background: #0a0f1e;
}

/* ════════════════════════════════════════════════════════════
   PART 1 — FONTS  (was assets/css/fonts.css)
   ════════════════════════════════════════════════════════════ */

/* ── Inter (Latin / English UI) — self-hosted variable font ───
   Replaces the render-blocking Google Fonts request. One ~47KB
   woff2 covers weights 100–900. font-display:swap = text paints
   immediately in the fallback, then swaps to Inter (no blocking). */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-Variable-Latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════════════
   MV Waheed — the ONE and ONLY Dhivehi (Thaana) font for the whole app.
   Self-hosted, licensed. woff2 (31 KB) + .ttf format fallback. No Faruma / Noto
   Sans Thaana / MV Boli. Legacy names below are thin ALIASES to the same file so
   nothing can regress to another Dhivehi font (and the Noto file never loads). */
@font-face {
  font-family: 'MV Waheed';
  src: url('../fonts/MVWaheed.woff2') format('woff2'),
       url('../fonts/MV_A_Waheed_Bold.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: 'Faruma';           src: url('../fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'MV Faruma';        src: url('../fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'MV Faseyha';       src: url('../fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'MV Boli';          src: url('../fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'ViyaFaruma';       src: url('../fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Thaana'; src: url('../fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'NotoSansThaana';   src: url('../fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'MVWaheed';         src: url('../fonts/MVWaheed.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
  --font-en: 'Inter', "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI", Arial, sans-serif;
  --font-dv: 'MV Waheed', Inter, Arial, sans-serif;   /* Dhivehi = MV Waheed only */
  --lh-en: 1.55;
  --lh-dv: 1.85;
}

/* ── English (default) ──────────────────────────────────────── */
html:not([lang="dv"]) body,
html:not([lang="dv"]) input,
html:not([lang="dv"]) select,
html:not([lang="dv"]) textarea,
html:not([lang="dv"]) button {
  font-family: var(--font-en) !important;
  line-height: var(--lh-en) !important;
}

/* ── Dhivehi (Thaana script) ────────────────────────────────── */
html[lang="dv"] body,
html[lang="dv"] *:not([data-keep-ltr]) {
  font-family: var(--font-dv) !important;
  line-height: var(--lh-dv) !important;
}

html[lang="dv"] input,
html[lang="dv"] textarea,
html[lang="dv"] select,
html[lang="dv"] button {
  font-family: var(--font-dv) !important;
  line-height: var(--lh-dv) !important;
}

/* Keep numbers/amounts readable with English font */
html[lang="dv"] input[type="number"],
html[lang="dv"] input[type="tel"],
html[lang="dv"] .price-display,
html[lang="dv"] .amount-field,
html[lang="dv"] [data-keep-ltr] {
  font-family: var(--font-en) !important;
  line-height: var(--lh-en) !important;
}

/* Prevent Dhivehi script from being cut off vertically */
html[lang="dv"] h1,
html[lang="dv"] h2,
html[lang="dv"] h3,
html[lang="dv"] h4,
html[lang="dv"] p,
html[lang="dv"] span,
html[lang="dv"] a,
html[lang="dv"] label,
html[lang="dv"] li,
html[lang="dv"] td,
html[lang="dv"] th {
  line-height: var(--lh-dv) !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* ════════════════════════════════════════════════════════════
   PART 2 — SIDEBAR FIRST-PAINT FALLBACK  (was sidebar.css)
   Guarantees the dark chrome is present from first paint,
   independent of JavaScript. Styles ONLY the sidebar shell
   (background / border / size) and the empty-skeleton state;
   nav-link / brand / footer styling still come from
   components/layout.js so the look stays identical to every
   other page. dark.css (html.viya-dv) wins dark mode by
   specificity, so this only governs light mode.
   ════════════════════════════════════════════════════════════ */

.sidebar,
aside.sidebar {
  width: var(--vb-sidebar-w, 220px);
  min-width: var(--vb-sidebar-w, 220px);
  max-width: var(--vb-sidebar-w, 220px);
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, #0C1E3E 0%, #061229 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #eaf2ff;
}

/* Dark placeholder while layout.js is still populating the sidebar,
   so there is never a white flash before the nav renders. */
.sidebar:empty {
  box-sizing: border-box;
  padding: 22px 20px;
  overflow: hidden;
  position: relative;
}

/* Mobile show/hide is intentionally left to the existing per-page /
   layout.js rules so this file does not fight their drawer logic. */

/* ══════════════════════════════════════════════════════════════════════════
   DHIVEHI READABILITY — larger Thaana text (dv mode ONLY; English untouched).
   max(Npx, 1em) only ENLARGES text to the minimum, never shrinks it, so dv
   headings keep their size and English is unaffected. Applies to every Dhivehi
   context: html[lang=dv], body.ViyaBook-dv / .viya-dv, .dv-mode, .dv-invoice. */
html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice {
  font-family: 'MV Waheed', Inter, Arial, sans-serif !important;
}
/* Normal text → min 15px */
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) p,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) span,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) a,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) li,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) td,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) dd {
  font-size: max(15px, 1em) !important;
}
/* Small labels / table headers → min 14px */
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) label,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) small,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) .hint,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) th {
  font-size: max(14px, 1em) !important;
}
/* Buttons + form controls → min 15px */
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) button,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) .btn,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) input,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) select,
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv, .dv-mode, .dv-invoice) textarea {
  font-size: max(15px, 1em) !important;
}
/* Keep numeric/currency inputs from getting oversized line boxes but still readable */
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv) input[type="number"],
:is(html[lang="dv"], body.ViyaBook-dv, body.viya-dv) input[type="tel"] {
  font-size: max(15px, 1em) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DHIVEHI TYPOGRAPHY REDESIGN — big, bold, crisp Faruma (Maldives-gov style).
   Added 2026-07-10 (?v=20260710-dvtype). Applies ONLY in Dhivehi mode; English
   is untouched. Appended LAST so it wins the older readability rules above.
   • Font: Faruma (device) → self-hosted Noto Thaana fallback (never 404s).
   • Fixed size + weight scale per spec; line-height 1.9 on text blocks.
   • TEXT-LEVEL RTL only: Dhivehi text blocks read/align right-to-left, but the
     app FRAME stays LTR (sidebar left, flex/icon order unchanged). Numbers,
     currency, dates & invoice #s stay LTR (forced at the end).
   Scope = genuine Dhivehi selectors ONLY (html[lang=dv] / body.lang-dv /
   body.ViyaBook-dv) — NOT .viya-dv, which is DARK MODE, not Dhivehi.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --font-dhivehi: 'MV Waheed'; }   /* Dhivehi = MV Waheed only */

/* Base: Faruma on all Dhivehi text; icon fonts (Tabler <i class="ti">, Material,
   svg) and [data-keep-ltr] are excluded so glyph icons don't become Thaana. */
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :not(i):not(.ti):not([class*="ti-"]):not(.material-icons):not(svg):not([data-keep-ltr]){
  font-family: var(--font-dhivehi) !important;
  letter-spacing: normal !important;
}
/* Line-height 1.9 on TEXT BLOCKS only (not single-line controls → no clipping). */
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(body, p, li, dd, dt, h1, h2, h3, h4, h5, h6, td, th, label, .card-title, .vbd-trend, .vbd-stat-lbl, blockquote){
  line-height: 1.9 !important;
}

/* ── Size + weight scale (fixed px, per spec) ── */
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(h1, .page-title, .vbd-hero-text h2){ font-size:34px !important; font-weight:700 !important; }
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) h2{ font-size:26px !important; font-weight:700 !important; }
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(h3, h4, .card-title, .modal-title, .vbd-panel-head h3, .vbd-qa-head h3){ font-size:22px !important; font-weight:700 !important; }
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) body,
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(p, li, dd, .vbd-trend, .vbd-stat-lbl, .vbd-qa-label, .vbd-qa-sub){ font-size:21px !important; font-weight:600 !important; }
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(td, th){ font-size:20px !important; font-weight:600 !important; }
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(button, .btn, .vbd-newtrip, .vbd-qa){ font-size:20px !important; font-weight:700 !important; }
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(input, textarea){ font-size:20px !important; font-weight:600 !important; }
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) select{ font-size:20px !important; font-weight:600 !important; }
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(.nav-link, .vbd-nav-item, .nav-label, .vbd-navgroup-label){ font-size:21px !important; font-weight:700 !important; }
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(.amount, .vbd-amt, .amount-fit, .vbd-stat-num, .money, .price, .mvr, .value, [class*="-amount"]){ font-size:24px !important; font-weight:700 !important; }
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(.vbd-pill, .status-pill, .badge, .pill, .chip, .vb-status){ font-size:18px !important; font-weight:700 !important; }

/* ── Text-level RTL: text blocks flow/align RTL (direction:rtl → text-align:start
   = right; centered elements with explicit text-align:center still center).
   unicode-bidi:isolate keeps embedded LTR numbers correct. Flex containers
   (.nav-link/.btn) are NOT included, so icon+label order & the frame stay LTR. ── */
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(h1, h2, h3, h4, h5, h6, p, li, label, dt, dd, td, th, .card-title, .modal-title, .vbd-trend, .vbd-stat-lbl, .vbd-qa-label, .vbd-qa-sub, .nav-label, blockquote, .empty-state, .dd-empty){
  direction: rtl !important;
  unicode-bidi: isolate;
}

/* ── Numbers, currency (MVR 11,321.00), dates, invoice #s: LTR + Latin numeric
   font, never Thaana-shaped. Re-declared LAST so it wins the size/RTL rules. ── */
:is(html[lang="dv"], body.lang-dv, body.ViyaBook-dv) :is(.amount, .vbd-amt, .amount-fit, .vbd-stat-num, .money, .price, .mvr, .value, .t-inv, .invoice-no, .sr-amt, .cf-summary strong, [class*="-amount"], [data-keep-ltr], time, .date, input[type="number"], input[type="tel"]){
  font-family: 'Inter',ui-monospace,monospace !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  letter-spacing: normal !important;
}
