/* ============================================================
   SIKAF — Institutional brand override for the Velzon theme.
   Replaces the generic demo purple + Saira font with a
   professional navy/blue palette + Montserrat, without touching
   the vendor app.css/bootstrap.css files directly.
   ============================================================ */

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

:root {
  --vz-font-sans-serif: "Montserrat", sans-serif;

  /* Primary: refined institutional blue (replaces demo purple #8c68cd) */
  --vz-primary: #2F6FED;
  --vz-primary-rgb: 47, 111, 237;
  --vz-primary-text-emphasis: #1d4ed8;
  --vz-primary-bg-subtle: #e6edfd;
  --vz-primary-border-subtle: #b9cdfa;

  /* Secondary: neutral slate for clear hierarchy against primary blue */
  --vz-secondary: #64748B;
  --vz-secondary-rgb: 100, 116, 139;
  --vz-secondary-text-emphasis: #475569;
  --vz-secondary-bg-subtle: #eef1f4;
  --vz-secondary-border-subtle: #d6dbe1;

  --vz-link-color: #2F6FED;
  --vz-link-color-rgb: 47, 111, 237;
  --vz-link-hover-color: #1d4ed8;
  --vz-link-hover-color-rgb: 29, 78, 216;

  --vz-header-item-bg: rgba(47, 111, 237, 0.1);
  --vz-topnav-item-active-color: #2F6FED;
}

[data-bs-theme=dark] {
  --vz-primary-text-emphasis: #93b8fb;
  --vz-primary-bg-subtle: rgba(47, 111, 237, 0.15);
  --vz-primary-border-subtle: #2c4a86;

  --vz-secondary-text-emphasis: #b0b9c6;
  --vz-secondary-bg-subtle: rgba(100, 116, 139, 0.18);
  --vz-secondary-border-subtle: #3a4552;

  --vz-link-color: #8fb4fb;
  --vz-link-color-rgb: 143, 180, 251;
  --vz-link-hover-color: #b3cdfc;
  --vz-link-hover-color-rgb: 179, 205, 252;
}

/* Sidebar (data-sidebar="dark" is the default in layouts/main.php) —
   replace the hardcoded purple rgb(72,38,104) with a navy that sits
   naturally on top of the app's near-black body background. */
:root[data-sidebar=dark] {
  --vz-vertical-menu-bg: #0b2137;
  --vz-vertical-menu-border: #0b2137;
  --vz-vertical-menu-item-color: #b9c7d9;
  --vz-vertical-menu-item-bg: rgba(47, 111, 237, 0.14);
  --vz-vertical-menu-item-hover-color: #fff;
  --vz-vertical-menu-item-active-color: #fff;
  --vz-vertical-menu-item-active-bg: rgba(47, 111, 237, 0.22);
  --vz-vertical-menu-sub-item-color: #92a3b8;
  --vz-vertical-menu-sub-item-hover-color: #fff;
  --vz-vertical-menu-sub-item-active-color: #fff;
  --vz-vertical-menu-title-color: #92a3b8;
  --vz-twocolumn-menu-iconview-bg: #0b2137;
}

:root[data-topbar=dark] {
  --vz-header-bg: #14315199;
  --vz-header-item-bg: #2F6FED;
  --vz-header-item-sub-color: #cfe0ff;
  --vz-topbar-user-bg: #1d4ed8;
  --vz-header-border: #2F6FED;
}

/* Typography — swap Saira for Montserrat across the app shell */
body,
.btn,
.form-control,
.form-select,
.card,
table,
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
}

/* The rules above don't reach every corner — several vendor rules in
   app.css hardcode `font-family: "Saira"` directly instead of using
   --vz-font-sans-serif, and some do it via a `:is(.h1, h1, ...)` selector
   whose specificity (boosted by the .h1/.h2/... class arguments inside
   :is()) beats a plain "h1, h2, ..." rule regardless of source order.
   Match those selectors one-for-one so this file's later position in
   the cascade actually wins. */
:is(.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6) {
  font-family: "Montserrat", sans-serif;
}
.navbar-menu .navbar-nav .nav-link,
.navbar-menu .navbar-nav .nav-sm .nav-link {
  font-family: "Montserrat", sans-serif;
}
.ff-secondary {
  font-family: "Montserrat", sans-serif;
}
.apexcharts-tooltip, .apexcharts-tooltip * {
  font-family: "Montserrat", sans-serif !important;
}

/* Subtle premium polish: softer corners + calmer shadows than the stock theme */
.card {
  border-radius: 0.85rem;
}
.btn {
  border-radius: 0.5rem;
  font-weight: 500;
}
.avatar-title,
.badge {
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Fix leftover template demo content that reads as unfinished/unprofessional
   --------------------------------------------------------------- */

/* Dashboard used crypto (BTC/ETH) icons as stand-ins for "Tunai"/"Transfer"
   payment methods — swapped for proper Remix icon badges in index.php,
   this rule just keeps those badges visually consistent with the rest
   of the icon system. */
.avatar-title.rounded-circle i {
  font-size: 1.1rem;
}

/* Login/auth page background — was a purple-to-green demo gradient
   (#8c68cd → #40bb82), replaced with the institutional navy/blue brand. */
.auth-bg-cover {
  background: linear-gradient(-45deg, #14315a 50%, #2F6FED);
}

/* Split-panel login photo (login_admin.php) had a hardcoded purple overlay
   (#7a51c5 -> #8c68cd) covering the school photo — replaced to match brand
   and lightened so the photo underneath stays visible. */
.auth-one-bg .bg-overlay {
  background: linear-gradient(to right, rgba(20,49,90,.55), rgba(47,111,237,.55));
  opacity: 1;
}

/* Sidebar brand text (layouts/sidebar.php prints the school's configurable
   app name as plain text, not a fixed-size logo image). The theme's base
   `.logo { line-height: 70px; }` sets that as a strut on the <a class="logo">
   itself, so every wrapped line — not just the block as a whole — was forced
   to a 70px-tall line box, blowing the sidebar header out to 140px+ with a
   huge gap between lines. Reset the strut on the anchor and give the text
   its own sane line-height/sizing (with !important to beat Bootstrap's
   `.fs-5{font-size:1.064rem!important}` utility class in the markup). */
.app-menu .navbar-brand-box {
  height: auto;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
  padding-bottom: 12px;
}
.app-menu .navbar-brand-box a.logo {
  line-height: 1.25;
}
.app-menu .navbar-brand-box .logo-lg {
  line-height: 1.25;
  /* Montserrat renders wider than Inter at the same size, so this needs
     to run smaller than the 0.95rem that fit Inter on one line — sized
     for the current "SIKAF MUKIM Al Fiqoriyah" with a little headroom;
     wraps gracefully to 2 lines (still capped at 70px, not broken) if a
     school later sets an even longer name via Pengaturan > Lembaga. */
  font-size: 0.82rem !important;
  white-space: normal;
  text-align: center;
}