/* kx_header.css — the shared "index.php family" public header + inner-page shell.
   Loaded on inner pages (via _kx_public_header.php) so their header + typography match
   index.php exactly, WITHOUT importing the whole homepage stylesheet. Uses prefixed
   .kx-* classes so it never clashes with Bootstrap/Keen on shelled pages. The dark
   sidebar (_sidebar_navigate) keeps its own theme; here we only position it — a rail
   on desktop, an off-canvas drawer on mobile — beneath the full-width sticky header. */

:root{ --kx-ink:#0b1020; --kx-muted:#5a6379; --kx-line:#ebedf5; --kx-blue:#2f6bff; --kx-purple:#6d4bf0; }

/* typography family — match index.php (Plus Jakarta Sans) */
body.kx-inner-body{ font-family:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",sans-serif !important;
  -webkit-font-smoothing:antialiased; background:#fff; color:var(--kx-ink); }

/* ---------------- header ---------------- */
.kx-header{ position:sticky; top:0; z-index:1200; background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--kx-line); }
.kx-header .kx-wrap{ max-width:none; width:100%; margin:0; padding:0 28px; }
.kx-header .kx-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:66px; }
.kx-header a{ text-decoration:none; color:inherit; }
.kx-header svg{ display:block; }
.kx-header .ic{ stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; width:18px; height:18px; }
.kx-logo img{ height:40px; display:block; }
.kx-nav-mid{ display:flex; gap:4px; }
.kx-nav-mid a{ display:flex; align-items:center; gap:7px; font-size:14px; color:var(--kx-muted);
  padding:8px 14px; font-weight:600; border-radius:11px; transition:background .15s ease,color .15s ease; }
.kx-nav-mid a:hover{ background:#f5f6fb; color:var(--kx-ink); }
.kx-nav-mid a.active{ color:var(--kx-purple); background:#f1edff; }
.kx-nav-mid .ic{ width:17px; height:17px; }
.kx-nav-right{ display:flex; gap:10px; align-items:center; }
/* The Menu button opens the off-canvas sidebar drawer — only needed on responsive widths,
   where the sidebar collapses. On desktop the sidebar is a permanent rail, so hide it. */
#kxMenuBtn{ display:none !important; }
.kx-btn{ border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; border:1.5px solid transparent;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; line-height:1; }
.kx-btn-ghost{ border-color:var(--kx-line); padding:9px 15px; color:var(--kx-ink); background:#fff; }
.kx-btn-ghost:hover{ background:#f7f7fc; }
.kx-btn-grad{ background:linear-gradient(92deg,var(--kx-blue),var(--kx-purple)); color:#fff; padding:10px 17px;
  box-shadow:0 12px 24px -10px rgba(109,75,240,.6); }

/* ---------------- inner shell layout ---------------- */
/* Two structures share these rules: kooviraapps.php uses a .kx-inner flex wrapper; every
   other guest inner page renders inside the Metronic app-shell (#kt_app_wrapper > sidebar
   + #kt_app_main). Both put the dark #kt_app_sidebar as a rail under the sticky header. */
/* Metronic reserves margin-inline-start (fixed-sidebar spacing) + header-fixed top spacing
   on .app-wrapper — the sidebar is now an in-flow flex child, so zero all of it. */
/* Desktop: pin the dark sidebar as a FIXED rail under the 66px header — it always fills the
   full column height (no white void, no sticky drift). Content is offset by the rail width. */
body.kx-inner-body #kt_app_wrapper{ display:block !important; padding:0 !important; margin:0 !important; }
body.kx-inner-body #kt_app_page{ padding-top:0 !important; }
/* auth-common.css / kv_topbar_mobile.css reserve `body{padding-top:58px}` for the site's FIXED #kt_app_header.
   This shell renders header.kx-header (sticky, in flow) instead, so that reservation was a blank strip. */
body.kx-inner-body{ padding-top:0 !important; }
body.kx-inner-body #kt_app_sidebar{
  position:fixed !important; top:66px !important; left:0 !important; bottom:0 !important;
  width:260px !important; min-width:260px !important; height:calc(100vh - 66px) !important;
  max-height:calc(100vh - 66px) !important; overflow-y:auto !important;
  transform:none !important; margin:0 !important; inset:66px auto 0 0 !important;
  z-index:1100 !important; visibility:visible !important; }
body.kx-inner-body #kt_app_main,
body.kx-inner-body .kx-inner-main{ margin-left:260px !important; min-width:0; width:auto !important; }
body.kx-inner-body #kt_app_main .app-container,
body.kx-inner-body .kx-inner-main .container{ max-width:99%; }
body.kx-inner-body .kx-inner{ display:block; }
/* the header already carries the Koovira logo — hide the sidebar's own logo/collapse row
   (avoids a duplicate logo) and give the menu a little breathing room at the top. */
body.kx-inner-body #kt_app_sidebar_logo{ display:none !important; }
body.kx-inner-body #kt_app_sidebar > .app-sidebar-wrapper,
body.kx-inner-body #kt_app_sidebar #kt_app_sidebar_menu_wrapper{ padding-top:14px !important; }

/* close button injected into the sidebar (mobile only) */
.kx-side-close{ display:none; }
.kx-side-backdrop{ position:fixed; inset:0; z-index:1190; background:rgba(10,14,26,.5);
  backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
body.kx-side-open .kx-side-backdrop{ opacity:1; visibility:visible; }

/* ---------------- mobile: sidebar → off-canvas drawer ---------------- */
@media (max-width: 991.98px){
  .kx-nav-mid{ display:none; }
  #kxMenuBtn{ display:inline-flex !important; }
  body.kx-inner-body .kx-inner,
  body.kx-inner-body #kt_app_wrapper{ display:block !important; }
  /* drawer overlays content on mobile — no left offset */
  body.kx-inner-body #kt_app_main,
  body.kx-inner-body .kx-inner-main{ margin-left:0 !important; }
  body.kx-inner-body #kt_app_sidebar{
    position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important;
    height:100vh !important; max-height:none !important; z-index:1201 !important;
    width:288px !important; max-width:86vw !important; flex-basis:auto !important;
    transform:translateX(-100%) !important;
    transition:transform .28s cubic-bezier(.22,.61,.36,1) !important;
    box-shadow:10px 0 46px rgba(0,0,0,.34) !important; }
  body.kx-side-open #kt_app_sidebar{ transform:translateX(0) !important; }
  body.kx-side-open{ overflow:hidden; }
  /* SCROLL FIX (mobile drawer): the drawer is 100vh, but Metronic's data-kt-scroll sets an inline
     fixed pixel height on the inner menu wrapper (computed for the DESKTOP rail), which clips the
     menu with no way to scroll. Force the drawer itself to scroll and let the inner wrappers grow to
     their natural content height (stylesheet !important overrides Metronic's non-important inline
     height). padding-bottom keeps the last item clear of any fixed bottom bar. */
  body.kx-inner-body #kt_app_sidebar{
    overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain; }
  body.kx-inner-body #kt_app_sidebar > .app-sidebar-wrapper,
  body.kx-inner-body #kt_app_sidebar #kt_app_sidebar_menu_wrapper,
  body.kx-inner-body #kt_app_sidebar .menu{
    height:auto !important; max-height:none !important; overflow:visible !important; }
  body.kx-inner-body #kt_app_sidebar #kt_app_sidebar_menu_wrapper{ padding-bottom:40px !important; }
  .kx-side-close{ display:flex; position:absolute; top:12px; right:12px; z-index:5; width:34px; height:34px;
    align-items:center; justify-content:center; border:0; border-radius:9px; background:rgba(255,255,255,.12);
    color:#fff; font-size:24px; line-height:1; cursor:pointer; }
  .kx-side-close:hover{ background:rgba(255,255,255,.22); }
}

/* ---------------- small phones: header CTAs icon-only ---------------- */
@media (max-width: 560px){
  .kx-nav-right .kx-lbl{ display:none; }
  .kx-nav-right .kx-btn{ padding:10px; gap:0; }
  .kx-header .kx-wrap{ padding:0 14px; }
  .kx-logo img{ height:34px; }
}
@media (prefers-reduced-motion: reduce){ #kt_app_sidebar,.kx-side-backdrop{ transition:none !important; } }