/* ==========================================================================
   ConceptPlus theme tokens — 2-theme system (Light / Dark), built from the
   real brand identity: #23a8ab (teal) and #152e53 (navy), per the brand
   guide. Single source of truth, shared by all 4 layouts:
     - Views/Shared/_LayoutHome.cshtml   (marketing homepage + static pages)
     - Views/Shared/_Layout.cshtml       (public: login/signup, QR/upload)
     - Areas/Admin/Views/Shared/_Layout.cshtml    (AdminLTE dashboard)
     - Areas/Account/Views/Shared/_Layout.cshtml  (AdminLTE brand portal)

   The active theme is applied via html[data-bs-theme="light"|"dark"], set by
   the anti-flash inline script in each layout's <head> (reads the shared
   "cp-theme" localStorage key) and updated by theme-switcher.js.

   :root below IS the "light" theme and doubles as the default/fallback for
   browsers with JS disabled. The block after it overrides the same
   variables for "dark".

   --bs-primary / --bs-primary-rgb / --bs-link-color are also set here so
   AdminLTE/Bootstrap 5 components (buttons, badges, links, focus rings) on
   the Admin & Account dashboards retint automatically.
   ========================================================================== */

:root {
    --primary-dark: #152e53;
    --primary-mid: #23a8ab;
    --primary-light: #4fc3c6;
    --gradient: linear-gradient(135deg, #152e53 0%, #1a8a8d 55%, #23a8ab 100%);
    --gradient-soft: linear-gradient(135deg, rgba(21,46,83,0.92), rgba(26,138,141,0.92), rgba(35,168,171,0.92));

    --accent: #23a8ab;
    --accent-strong: #1c8688;
    --band-bg: #F2F6F6;
    --band-text: #152e53;
    --band-text-muted: #4B6070;
    --band-card-bg: #ffffff;
    --band-card-border: rgba(21, 46, 83, 0.08);
    --btn-bg: #23a8ab;
    --btn-bg-strong: #1c8688;
    --btn-text: #ffffff;
    --chrome-bg: linear-gradient(135deg, #152e53, #1c8688);
    --nav-text: #152e53;
    --hero-bg-base: #FFFFFF;
    --hero-glow-1: rgba(35, 168, 171, 0.12);
    --hero-glow-2: rgba(21, 46, 83, 0.06);
    --hero-text: #152e53;
    --hero-text-muted: #4B6070;

    /* Bootstrap 5 / AdminLTE hooks (Admin & Account dashboards) */
    --bs-primary: #23a8ab;
    --bs-primary-rgb: 35, 168, 171;
    --bs-link-color: #1c8688;
    --bs-link-color-rgb: 28, 134, 136;
    --bs-link-hover-color: #152e53;
    --bs-link-hover-color-rgb: 21, 46, 83;
}

html[data-bs-theme="dark"] {
    --primary-dark: #0D1B30;
    --primary-mid: #23a8ab;
    --primary-light: #5FD0D3;
    --gradient: linear-gradient(135deg, #0a1526 0%, #0d3d3f 55%, #12595c 100%);
    --gradient-soft: linear-gradient(135deg, rgba(10,21,38,0.92), rgba(13,61,63,0.92), rgba(18,89,92,0.92));

    --accent: #23a8ab;
    --accent-strong: #2FC2C5;
    --band-bg: #0D1B2E;
    --band-text: #F2F6F6;
    --band-text-muted: #9FB3BB;
    --band-card-bg: #16283F;
    --band-card-border: rgba(255, 255, 255, 0.08);
    --btn-bg: #23a8ab;
    --btn-bg-strong: #2FC2C5;
    --btn-text: #ffffff;
    --chrome-bg: linear-gradient(135deg, #0D1B2E, #16384A, #0D1B2E);
    --nav-text: #ffffff;
    --hero-bg-base: #0D1B2E;
    --hero-glow-1: rgba(35, 168, 171, 0.20);
    --hero-glow-2: rgba(35, 168, 171, 0.10);
    --hero-text: #F2F6F6;
    --hero-text-muted: #9FB3BB;

    --bs-primary: #23a8ab;
    --bs-primary-rgb: 35, 168, 171;
    --bs-link-color: #2FC2C5;
    --bs-link-color-rgb: 47, 194, 197;
    --bs-link-hover-color: #ffffff;
    --bs-link-hover-color-rgb: 255, 255, 255;
}

/* ---------- Theme switcher icons (shared markup/behavior across all 4 layouts) ---------- */
.theme-switcher-icons {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .4rem;
}

.theme-icon-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    padding: 0;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

    .theme-icon-btn:hover {
        transform: scale(1.18);
    }

    .theme-icon-btn.active {
        border-color: #ffffff;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
        transform: scale(1.12);
    }

@media (max-width: 992px) {
    .theme-switcher-icons {
        padding: .6rem .5rem;
    }
}

/* =====================================================================
   [ADMIN LOGO] — sidebar is a colored gradient (navy→teal) in both
   themes, so the logo is WHITE for clear contrast.
   ===================================================================== */
.brand-image,
html[data-bs-theme="dark"] .brand-image,
html[data-bs-theme="light"] .brand-image {
    filter: brightness(0) invert(1) !important;
}

/* =====================================================================
   [ADMIN SIDEBAR BRAND] — transparent brand area over gradient,
   white logo (no white box behind it)
   ===================================================================== */
.sidebar-brand,
.app-sidebar .sidebar-brand,
.brand-link {
    background: transparent !important;
    box-shadow: none !important;
}
.brand-image,
.brand-image.shadow {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    filter: brightness(0) invert(1) !important;  /* white logo on gradient */
}