/* kv_internal_theme.css
   Blends the internal Metronic app pages with the index.php light look:
   - a light sidebar (by overriding theme_manager.php's --kv-sidebar-* vars),
   - a soft brand gradient page background,
   - a tamed dashboard mascot (was a 448px figure overlapping the topbar).
   Emitted from incfiles/_topbar.php, so it loads on app pages — NOT on index.php
   (which has its own clean header, no _topbar include). */

/* ---- 1) Light sidebar — blend to the homepage ---- */
:root{
  --kv-sidebar-top:#ffffff;
  --kv-sidebar-bottom:#fbfaff;
  --kv-sidebar-spot1:rgba(109,75,240,.06);
  --kv-sidebar-spot2:rgba(224,70,154,.05);
  --kv-sidebar-spot3:rgba(47,107,255,.05);
  --kv-sidebar-text:#454e60;
  --kv-sidebar-muted:#98a0b3;
  --kv-sidebar-hover:rgba(109,75,240,.07);
  --kv-sidebar-active:rgba(109,75,240,.10);
}
#kt_app_sidebar.app-sidebar{ border-right:1px solid #ecedf4 !important; }
#kt_app_sidebar .menu-item.here > .menu-link,
#kt_app_sidebar .menu-link.active{ box-shadow:inset 0 0 0 1px rgba(109,75,240,.16) !important; }
#kt_app_sidebar .menu-link.active,
#kt_app_sidebar .menu-link.active .menu-title,
#kt_app_sidebar .menu-link.active .menu-icon,
#kt_app_sidebar .menu-link.active i,
#kt_app_sidebar .menu-item.here > .menu-link,
#kt_app_sidebar .menu-item.here > .menu-link .menu-title{ color:#6d4bf0 !important; }
/* the brand wordmark in the sidebar was white (for dark bg) — swap to the dark one */
#kt_app_sidebar #kt_app_sidebar_logo img,
#kt_app_sidebar .app-sidebar-logo img{ filter:none !important; }

/* ---- 2) Soft brand gradient page background (matches index.php) ---- */
body#kt_app_body, body.app-default{
  background:
    radial-gradient(62% 42% at 10% 0%, rgba(109,75,240,.07), transparent 60%),
    radial-gradient(52% 40% at 94% 3%, rgba(224,70,154,.06), transparent 60%),
    linear-gradient(180deg, #f4f1ff 0%, #ffffff 42%, #fffdf7 100%) !important;
  background-attachment:fixed !important;
}

/* ---- 3) Hide the dashboard mascot on internal pages (it was a 448px figure
   overlapping the topbar — repeatedly flagged as a display issue) ---- */
.kv-app-main-characters,
.kv-app-main-characters .kv-app-main-character,
.kv-app-main-character,
.kv-page-character{ display:none !important; }

/* ---- 4) Constrain the topbar user avatar (the guest placeholder was rendering
   at its natural 512×512 because its sizing rule lives in auth-common.css, which
   internal pages don't load). Clamp it to a proper 35px avatar. ---- */
#kt_app_header #kt_header_user_menu_button{ width:35px; height:35px; overflow:hidden; border-radius:50%; }
#kt_app_header #kt_header_user_menu_button img,
#kt_app_header .symbol img,
#kt_app_header .app-navbar .btn-icon img,
#kt_app_header img[src*="placeholder-user-profile"]{
  width:35px !important; height:35px !important; min-width:35px !important; min-height:35px !important;
  object-fit:cover !important; border-radius:50% !important; display:block !important; position:static !important;
}

/* ---- 5) The sidebar collapse toggle (#kt_app_sidebar_toggle, position:absolute)
   sat ~13px over the first header-menu item, hiding the "E" of "Endorsements".
   Clear the header menu past the toggle on desktop (sidebar present). ---- */
@media (min-width:992px){
  #kt_app_header #kt_app_header_menu{ padding-left:26px !important; }
}

/* ========================================================================
   6) CARD CONTRAST / BORDERS — the app read as "too white": Metronic cards
   use `.border-0` on the soft gradient page bg, so white cards blended into
   the background with no edges. Give every plain (non-gradient) card a crisp
   border, a true-white surface and a soft lift so they read as real panels.
   Scoped to internal app pages (body#kt_app_body / .app-default) so it never
   touches index.php or other standalone layouts.
   ===================================================================== */
:root{
  --kv-card-border:#e7e4f2;          /* soft lavender-grey edge */
  --kv-card-radius:14px;
  --kv-card-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(76,55,160,.06);
  --kv-card-shadow-hover:0 2px 6px rgba(16,24,40,.06), 0 14px 32px rgba(76,55,160,.12);
}
/* The plain white cards (skip cards that carry an inline gradient/colour bg) */
body#kt_app_body .card:not([style*="gradient"]):not([style*="background:"]),
body.app-default .card:not([style*="gradient"]):not([style*="background:"]){
  border:1px solid var(--kv-card-border) !important;   /* beats Bootstrap .border-0 */
  border-radius:var(--kv-card-radius) !important;
  background-color:#ffffff !important;
  box-shadow:var(--kv-card-shadow) !important;
}
/* Gentle lift on the interactive cards (keeps existing hover-elevate intent) */
body#kt_app_body .card.hover-elevate-up:hover,
body.app-default .card.hover-elevate-up:hover{
  box-shadow:var(--kv-card-shadow-hover) !important;
  transform:translateY(-2px);
}
/* Tame inner separators so they don't look like extra blank lines */
body#kt_app_body .card .card-header,
body.app-default .card .card-header{ border-bottom-color:#f1eef9 !important; }

/* Colour/gradient cards: a hairline inset edge so even they sit crisply on the
   pale background (the wallet/credits + weather tiles otherwise float). */
body#kt_app_body .card[style*="gradient"],
body.app-default .card[style*="gradient"]{
  border-radius:var(--kv-card-radius) !important;
  box-shadow:0 6px 22px rgba(17,57,153,.16) !important;
}

/* ========================================================================
   7) MODALS / WALLET POPUP — "modal showing wallet balance is too blank,
   give some border". Define modal surfaces with a real edge + lift, and give
   the wallet/credit popups an inner framed look.
   ===================================================================== */
body#kt_app_body .modal-content,
body.app-default .modal-content,
.modal .modal-content{
  border:1px solid var(--kv-card-border, #e7e4f2) !important;
  border-radius:16px !important;
  box-shadow:0 24px 60px rgba(16,24,40,.22) !important;
}
.modal .modal-header{ border-bottom:1px solid #f1eef9 !important; }
.modal .modal-footer{ border-top:1px solid #f1eef9 !important; }
/* Any wallet/credit value block inside a modal/card that renders as bare white
   gets a soft framed panel so it no longer looks empty. */
.modal .kv-wallet-balance, .modal .wallet-balance,
.kv-wallet-summary, .kv-balance-card{
  border:1px solid var(--kv-card-border, #e7e4f2) !important;
  border-radius:12px !important;
  background:#faf9ff !important;
  box-shadow:inset 0 0 0 1px rgba(109,75,240,.04) !important;
}

/* ========================================================================
   8) MOBILE — the blending is worst on phones. Tighten gutters and make the
   borders + spacing unmistakable so cards read as separate blocks.
   ===================================================================== */
@media (max-width:991.98px){
  body#kt_app_body .card:not([style*="gradient"]):not([style*="background:"]),
  body.app-default .card:not([style*="gradient"]):not([style*="background:"]){
    border-color:#e2def0 !important;
    box-shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 20px rgba(76,55,160,.07) !important;
  }
  /* Consistent vertical rhythm between stacked cards on mobile */
  body#kt_app_body .card, body.app-default .card{ margin-bottom:14px !important; }
}

/* ========================================================================
   9) Dropdown menus (Metronic .menu-sub-dropdown) — clean, Instagram-like
   (the post 3-dot menu and similar looked heavy/unprofessional).
   ===================================================================== */
.menu.menu-sub-dropdown{
  border:1px solid #ecebf6 !important;
  border-radius:14px !important;
  box-shadow:0 12px 36px rgba(16,24,40,.16) !important;
  padding:8px !important;
  background:#fff !important;
}
.menu.menu-sub-dropdown .menu-item{ margin:1px 0; }
.menu.menu-sub-dropdown .menu-link{
  border-radius:9px !important; padding:9px 12px !important; font-weight:600 !important; font-size:13.5px !important;
}
.menu.menu-sub-dropdown .menu-link:hover{ background:#f3f3fb !important; color:#6d4bf0 !important; }
.menu.menu-sub-dropdown .menu-link .menu-icon{ width:24px !important; }
.menu.menu-sub-dropdown .separator{ margin:6px 4px !important; opacity:.6; }

/* ========================================================================
   10) DENSITY — gently trim the most common wasted padding on internal app
   pages. Metronic .card-body defaults to ~2rem; tighten it modestly. NO
   !important, so any card with explicit padding utilities keeps its own —
   only default-padded cards get denser. Scoped to internal app pages.
   ===================================================================== */
body#kt_app_body .card > .card-body,
body.app-default .card > .card-body{ padding:1.25rem 1.4rem; }
@media (max-width:575.98px){
  body#kt_app_body .card > .card-body,
  body.app-default .card > .card-body{ padding:1rem 1.05rem; }
}

/* ========================================================================
   11) FORCE-RELOAD KEENICONS FONT — every keenicon was rendering as a tofu
   box (codepoint) in some browsers because a broken/empty font got cached
   during the earlier asset-corruption period. Re-declare the @font-face with
   a fresh URL (?fr=) so the browser re-fetches the (valid on disk) font and
   bypasses the stale cache. Paths are relative to this file (assets/css/).
   ===================================================================== */
@font-face{font-family:"keenicons-duotone";font-style:normal;font-weight:400;font-display:block;
  src:url("../plugins/global/fonts/keenicons/keenicons-duotone-eut7fk.woff?fr=2") format("woff"),
      url("../plugins/global/fonts/keenicons/keenicons-duotone-eut7fk.ttf?fr=2") format("truetype");}
@font-face{font-family:"keenicons-outline";font-style:normal;font-weight:400;font-display:block;
  src:url("../plugins/global/fonts/keenicons/keenicons-outline-fzo4bm.woff?fr=2") format("woff"),
      url("../plugins/global/fonts/keenicons/keenicons-outline-fzo4bm.ttf?fr=2") format("truetype");}
@font-face{font-family:"keenicons-solid";font-style:normal;font-weight:400;font-display:block;
  src:url("../plugins/global/fonts/keenicons/keenicons-solid-812fv7.woff?fr=2") format("woff"),
      url("../plugins/global/fonts/keenicons/keenicons-solid-812fv7.ttf?fr=2") format("truetype");}