/* 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; }
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:1180px; }
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; }
  .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; } }