/* ==========================================================================
   AykaFin — new design system (adopted from temp-scr-shot/mockups/admin/)
   ==========================================================================
   Source of truth for the mockup's visual language: tokens/typography/shadow
   language lifted from temp-scr-shot/mockups/admin/assets/admin.css. Only the
   look is adopted — the mockup's own copy/nav items are a different product
   ("RunMyBuilding") and are never used here. AykaFin's real menu (DB-driven
   via Helper::getMenu()/inc/submenu.blade.php) and page data are untouched;
   this file only restyles existing DOM via CSS.

   Loads last (after styles.css, aykafin-custom.css, theme2.css) so it wins
   the cascade on plain specificity/source-order in most cases. A few rules
   still need !important to beat Acorn's own !important declarations for the
   mobile drawer (see the "MOBILE DRAWER" section below) — this mirrors the
   pattern already used in aykafin-custom.css for the same reason.

   Scope of this pass: sidebar / top nav / mobile drawer chrome only. Content
   areas (dashboard cards, tables, etc.) are restyled page-by-page separately
   and will add their own section here as each page is done.
   ========================================================================== */

:root{
  --af-bg-base:#EAF1FE;
  --af-bg-elevated:#F2F7FE;
  --af-surface:#FFFFFF;
  --af-surface-2:#EEF4FE;
  --af-primary:#2F6FED;
  --af-primary-2:#5B93FF;
  --af-amber:#FFB648;
  --af-success:#2FBE7A;
  --af-danger:#F0554F;
  --af-text-hi:#1E2A3D;
  --af-text-mid:#5C6B85;
  --af-text-low:#9AAAC4;
  --af-border:rgba(30,42,61,0.08);
  --af-shadow-soft: 0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 44px -20px rgba(47,111,237,0.28), 10px 10px 24px -14px rgba(47,111,237,0.18);
  --af-shadow-card: 0 1px 0 rgba(255,255,255,0.85) inset, 8px 10px 22px -14px rgba(47,111,237,0.22);
  --af-radius-lg: 22px;
  --af-radius-md: 14px;
  --af-radius-sm: 11px;
  --af-font-heading: 'Sora', 'Inter', system-ui, sans-serif;
  --af-font-body: 'Inter', system-ui, sans-serif;
}

/* ---- Sidebar shell (desktop pinned + mobile drawer share this DOM) ---- */
#nav.nav-container .nav-content{
  background: var(--af-bg-base);
  font-family: var(--af-font-body);
}

#nav.nav-container .logo{
  padding-top: 18px;
  padding-bottom: 14px;
}

/* ---- Language switcher ---- */
#nav .language-switch-container .language-button{
  font-family: var(--af-font-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--af-text-mid);
  border-radius: var(--af-radius-sm);
}
#nav .language-switch-container .language-button:hover{
  color: var(--af-text-hi);
  background: var(--af-surface-2);
}

/* ---- User footer row ---- */
#nav .user-container .user .profile{
  border-radius: var(--af-radius-sm);
  box-shadow: 0 6px 14px -8px rgba(47,111,237,.55);
}
#nav .user-container .user .name{
  font-family: var(--af-font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--af-text-hi);
}

/* ---- Menu links (top-level + nested submenus, desktop + mobile) ---- */
#nav .menu-container .menu li > a{
  font-family: var(--af-font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--af-text-mid);
  border-radius: var(--af-radius-sm);
  padding-top: 10px;
  padding-bottom: 10px;
  transition: background .15s ease, color .15s ease;
}
#nav .menu-container .menu li > a .icon{
  color: var(--af-text-low);
  transition: color .15s ease;
}
#nav .menu-container .menu li > a:hover{
  background: var(--af-surface-2);
  color: var(--af-text-hi);
}
#nav .menu-container .menu li > a:hover .icon{
  color: var(--af-primary);
}
#nav .menu-container .menu li > a.active{
  background: linear-gradient(160deg, var(--af-surface-2), var(--af-surface));
  color: var(--af-text-hi);
  box-shadow: var(--af-shadow-card);
}
#nav .menu-container .menu li > a.active .icon{
  color: var(--af-primary);
}

/* Nested (submenu) items — smaller, indented, muted */
#nav .menu-container .menu ul li > a{
  font-size: 12.5px;
  font-weight: 500;
  color: var(--af-text-mid);
}
#nav .menu-container .menu ul li > a.active{
  color: var(--af-primary);
  background: rgba(47,111,237,.10);
  box-shadow: none;
}

/* ---- Mobile hamburger button ----
   Deliberately minimal: color only. An earlier version of this rule also set
   a fixed width/height/background/box-shadow on the button and, separately,
   an unconditional background+box-shadow on .nav-container itself at mobile
   width — after that, the button stopped appearing at all. Rather than guess
   further at which of those was responsible, they've been removed; this is
   the smallest change that still applies the new color. */
#nav .mobile-buttons-container #mobileMenuButton{
  color: var(--af-text-hi) !important;
}

/* ==========================================================================
   MOBILE DRAWER — recolor the open drawer's text to the new palette.
   Supersedes the grey "Acorn demo" text colors set in aykafin-custom.css's
   MOBILE MENU block; kept at matching specificity + !important (loaded
   later, so it wins the cascade) rather than deleting that block, to keep
   this change reviewable as a pure addition. Deliberately does NOT touch
   .nav-container's own background/box-shadow (see note above).
   ========================================================================== */
@media (max-width: 1199px) {
  html[data-dimension='mobile'] .nav-container .menu-container .menu li a,
  html[data-dimension='mobile'] .nav-container .menu-container .menu li a .label,
  html[data-dimension='mobile'] .nav-container .menu-container .menu li a .icon,
  html[data-dimension='mobile'] .nav-container .user-container .user .name,
  html[data-dimension='mobile'] .nav-container .language-switch-container .language-button,
  .nav-container.mobile-side-in .menu-container .menu li a,
  .nav-container.mobile-side-in .menu-container .menu li a .label,
  .nav-container.mobile-side-in .menu-container .menu li a .icon,
  .nav-container.mobile-side-in .user-container .user .name,
  .nav-container.mobile-side-in .language-switch-container .language-button {
    color: var(--af-text-hi) !important;
  }

  html[data-dimension='mobile'] .nav-container .menu-container .menu li a:hover,
  .nav-container.mobile-side-in .menu-container .menu li a:hover {
    background: var(--af-surface-2) !important;
    color: var(--af-text-hi) !important;
  }
  html[data-dimension='mobile'] .nav-container .menu-container .menu li a.active,
  .nav-container.mobile-side-in .menu-container .menu li a.active {
    background: var(--af-surface-2) !important;
    color: var(--af-primary) !important;
  }
}