@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =====================================================================
   vb-global.css — ViyaBook global font + icon system
   Loaded on every page. Mirrors the dashboard's font stack and ensures
   the Inter webfont is actually loaded.

   NOTE: the font rule is scoped to html:not([lang="dv"]) so it does NOT
   override the Dhivehi (Faruma / Thaana) font for Dhivehi users — same
   pattern shared-sidebar.js already uses.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html:not([lang="dv"]) body,
html:not([lang="dv"]) body * {
  font-family: Inter, "SF Pro Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Tabler icon sizing helpers ──────────────────────────────────────── */
.ti { line-height: 1; vertical-align: -0.125em; }
.ti-sm { font-size: 14px !important; }
.ti-md { font-size: 18px !important; }
.ti-lg { font-size: 22px !important; }
.ti-xl { font-size: 28px !important; }

/* Icons inside buttons */
.btn .ti, button .ti { font-size: 15px !important; flex-shrink: 0; }

/* Icons inside sidebar nav links */
.sidebar-nav a .ti, .viya-sidebar-nav a .ti, .nav-link .ti, .nav-item .ti {
  font-size: 18px !important;
  flex-shrink: 0;
}

/* ── Modal card visibility guard ─────────────────────────────────────────
   ui.css styles the generic .modal class as a dark, blurred BACKDROP with
   !important. On pages where the modal CARD also uses class="modal" (inside a
   .modal-overlay), that turns the card into an invisible dark blur. Force any
   .modal that is the direct card of a .modal-overlay back to an opaque card.
   (Pages that use .modal as the backdrop + .modal-card as the card are not
   matched by this selector, so they are unaffected.) */
.modal-overlay > .modal,
.modal-overlay > form.modal {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10000 !important;
}
html[data-theme="dark"] .modal-overlay > .modal,
html[data-theme="dark"] .modal-overlay > form.modal { background: #0d1f3c !important; }