/* ═══════════════════════════════════════════════════════════
   AAssetVerify360 — Theme Overrides & Utility Classes
   ═══════════════════════════════════════════════════════════
   Raw color hex values live in config/theme.php (single source).
   The Blade partial (layouts.partials.theme-vars) generates
   :root CSS vars + window.AV.colors JS from that config.
   This file contains ONLY semantic aliases and component overrides.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   Argon Overrides — remap Argon/Bootstrap vars to our brand
   ═══════════════════════════════════════════════════════════ */

.main-content {
    background: var(--av-bg);
}

.bg-default {
    background-color: var(--av-primary) !important;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--av-primary), var(--av-primary-light)) !important;
}

/* Dashboard page header — matches sidebar navy (avoids Argon's green bg-gradient-primary) */
.dashboard-header {
    background: var(--av-primary) !important;
}

/* Argon hardcodes #navbar-main { background-color: #398108 !important } (lime green).
   ID selector beats all class overrides — must target the same ID to win. */
#navbar-main {
    background-color: var(--av-primary) !important;
}

.bg-gradient-success {
    background: linear-gradient(135deg, var(--av-success), var(--av-success-dark)) !important;
}

.bg-gradient-info {
    background: linear-gradient(135deg, var(--av-info), var(--av-info-dark)) !important;
}

.bg-gradient-warning {
    background: linear-gradient(135deg, var(--av-warning), var(--av-warning-dark)) !important;
}

.bg-gradient-danger {
    background: linear-gradient(135deg, var(--av-error), var(--av-error-dark)) !important;
}

/* ── Buttons (all variants need explicit white text) ────── */
.btn-primary {
    background-color: var(--av-primary);
    border-color: var(--av-primary);
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--av-primary-light);
    border-color: var(--av-primary-light);
    color: #fff !important;
}
.btn-default {
    background-color: var(--av-primary);
    border-color: var(--av-primary);
    color: #fff !important;
}
.btn-default:hover, .btn-default:focus {
    background-color: var(--av-primary-light);
    border-color: var(--av-primary-light);
    color: #fff !important;
}
.btn-success {
    background-color: var(--av-success);
    border-color: var(--av-success);
    color: #fff !important;
}
.btn-info {
    background-color: var(--av-info);
    border-color: var(--av-info);
    color: #fff !important;
}
.btn-warning {
    background-color: var(--av-warning);
    border-color: var(--av-warning);
    color: var(--av-text-primary) !important;
}
.btn-danger {
    background-color: var(--av-error);
    border-color: var(--av-error);
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--av-primary);
    border-color: var(--av-primary);
}
.btn-outline-primary:hover {
    background-color: var(--av-primary);
    color: #fff !important;
}

/* ── Badges ────────────────────────────────────────────── */
.badge-primary, .bg-primary { background-color: var(--av-primary) !important; color: #fff !important; }
.badge-default              { background-color: var(--av-primary) !important; color: #fff !important; }
.badge-success, .bg-success { background-color: var(--av-success) !important; color: #fff !important; }
.badge-info, .bg-info       { background-color: var(--av-info)    !important; color: #fff !important; }
.badge-warning, .bg-warning { background-color: var(--av-warning) !important; color: var(--av-text-primary) !important; }
.badge-danger, .bg-danger   { background-color: var(--av-error)   !important; color: #fff !important; }

/* ── Text utilities ────────────────────────────────────── */
.text-primary { color: var(--av-primary) !important; }
.text-success { color: var(--av-success) !important; }
.text-info    { color: var(--av-info)    !important; }
.text-warning { color: var(--av-warning) !important; }
.text-danger  { color: var(--av-error)   !important; }
.text-default { color: var(--av-primary) !important; }

/* ── Dark background contexts: force light text ────────── */
.bg-default,
.bg-default *:not(.card):not(.badge):not(.btn):not(input):not(select) {
    color: var(--av-text-on-dark);
}
.bg-default .card { color: var(--av-text-primary); }
.bg-default a:not(.btn) { color: var(--av-gold-light) !important; }
.bg-default a:not(.btn):hover { color: var(--av-gold) !important; }
.bg-default h1, .bg-default h2, .bg-default h3,
.bg-default h4, .bg-default h5, .bg-default h6 {
    color: #fff !important;
}
.bg-default .text-muted,
.bg-default .text-light { color: rgba(255, 255, 255, 0.65) !important; }

.bg-gradient-primary h1, .bg-gradient-primary h2, .bg-gradient-primary h3,
.bg-gradient-primary h4, .bg-gradient-primary h5, .bg-gradient-primary h6,
.bg-gradient-primary p, .bg-gradient-primary span:not(.badge) {
    color: #fff;
}

/* Card with dark bg — ensure inner content is readable */
.card.bg-default .card-header,
.card.bg-default .card-body,
.card.bg-default .card-footer,
.card.bg-default .table td,
.card.bg-default .table th {
    color: var(--av-text-on-dark) !important;
}
.card.bg-default .table { color: var(--av-text-on-dark); }
.card.bg-default .table thead th { color: rgba(255, 255, 255, 0.65) !important; }

/* Dropdowns on dark backgrounds */
.dropdown-menu.bg-default,
.dropdown-menu.bg-default small,
.dropdown-menu.bg-default .shortcut-item,
.dropdown-menu.bg-default .shortcut-text { color: var(--av-text-on-dark) !important; }

.main-content a,
a:not(.navbar-vertical a) { color: var(--av-primary); }
.main-content a:hover,
a:not(.navbar-vertical a):hover { color: var(--av-primary-light); }

.card {
    border: 1px solid var(--av-border-light);
    border-radius: var(--av-radius-lg);
    box-shadow: var(--av-shadow-sm);
}

.card-header {
    background: var(--av-surface);
    border-bottom: 1px solid var(--av-border-light);
}

.table thead th {
    color: var(--av-text-secondary);
    border-bottom: 2px solid var(--av-border-light);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    border-top-color: var(--av-border-light);
    color: var(--av-text-primary);
}

.navbar-vertical .navbar-brand-img,
.navbar-brand-img {
    max-height: 3rem;
    width: auto;
    object-fit: contain;
}

/* ── Hero Header Logo (2x larger for login page) ────────── */
.header.main-bg-image .navbar-brand-img,
.header.main-bg-image img[class*="brand"] {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

/* ── Hero Logo Styling ─────────────────────────────────── */
.hero-logo {
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@media (min-width: 768px) {
    .hero-logo {
        max-height: 100px;
    }
}

@media (min-width: 1024px) {
    .hero-logo {
        max-height: 120px;
    }
}

/* ── Sidebar ────────────────────────────────────────────── */
#sidenav-main.navbar-vertical {
    background: linear-gradient(180deg, var(--av-navy-dark), var(--av-navy)) !important;
    border-right: none !important;
}

#sidenav-main .navbar-brand {
    padding: var(--av-sp-md);
    margin: 0 var(--av-sp-sm) var(--av-sp-sm);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--av-radius-lg);
    text-align: center;
}

/* All sidebar links — white on dark navy */
#sidenav-main .nav-link,
#sidenav-main a.nav-link,
#sidenav-main .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all var(--av-duration) var(--av-ease);
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: var(--av-radius-md);
}
#sidenav-main .nav-link:hover,
#sidenav-main a.nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
}
#sidenav-main .nav-link.active,
#sidenav-main a.nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15);
    font-weight: 600;
}

/* ALL sidebar icons — gold for visibility on dark background */
#sidenav-main .nav-link i,
#sidenav-main .nav-link i[class*="text-"],
#sidenav-main a.nav-link i {
    color: var(--av-gold) !important;
    opacity: 0.9;
    width: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}
#sidenav-main .nav-link:hover i,
#sidenav-main .nav-link.active i {
    color: var(--av-gold-light) !important;
    opacity: 1;
}

/* Sub-menu links — slightly dimmer for hierarchy */
#sidenav-main .nav-sm .nav-link,
#sidenav-main .nav-sm a.nav-link {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.8125rem;
    padding: 0.35rem 1rem 0.35rem 2.5rem;
}
#sidenav-main .nav-sm .nav-link:hover,
#sidenav-main .nav-sm .nav-link.active {
    color: #fff !important;
}
#sidenav-main .nav-sm .nav-link i {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem;
}
#sidenav-main .nav-sm .nav-link:hover i,
#sidenav-main .nav-sm .nav-link.active i {
    color: var(--av-gold-light) !important;
}

/* Collapse toggle text (section headers like "Asset Reviews", "Admin Menu") */
#sidenav-main .nav-link[data-toggle="collapse"],
#sidenav-main .nav-link[data-toggle="collapse"] .nav-link-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
}
#sidenav-main .nav-link[data-toggle="collapse"]:hover {
    color: #fff !important;
}

/* Dynamic menu links (Spatie Menu output) — ensure white text */
#sidenav-main .dynamic-menu .nav-link,
#sidenav-main .dynamic-menu a.nav-link,
#sidenav-main .collapse .nav-sm a,
#sidenav-main .collapse a.nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
}
#sidenav-main .dynamic-menu .nav-link:hover,
#sidenav-main .dynamic-menu a.nav-link:hover,
#sidenav-main .collapse .nav-sm a:hover,
#sidenav-main .collapse a.nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08);
}

/* Section dividers between nav groups */
#sidenav-main .navbar-nav + .navbar-nav {
    margin-top: var(--av-sp-sm);
    padding-top: var(--av-sp-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sidebar footer / copyright */
#sidenav-main .text-muted {
    color: rgba(255, 255, 255, 0.4) !important;
}
#sidenav-main .text-muted a {
    color: rgba(255, 255, 255, 0.5) !important;
}
#sidenav-main .text-muted a:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Mobile collapse header — light text on dark bg */
#sidenav-main .navbar-collapse-header .collapse-brand a {
    color: #fff !important;
}
#sidenav-main .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.8)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Scrollbar for long sidebar */
#sidenav-main .navbar-collapse {
    overflow-y: auto;
    max-height: calc(100vh - 80px);
}
#sidenav-main .navbar-collapse::-webkit-scrollbar { width: 4px; }
#sidenav-main .navbar-collapse::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* ── Top Navbar ─────────────────────────────────────────── */
.navbar-top.navbar-dark,
.navbar-top.navbar-dark .navbar-brand {
    background: transparent !important;
}
.navbar-top .h4,
.navbar-top .text-white {
    color: var(--av-text-on-dark) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ── Header / Stats Banner ─────────────────────────────── */
.header.bg-gradient-primary {
    background: linear-gradient(135deg, var(--av-navy-dark) 0%, var(--av-navy) 50%, var(--av-navy-light) 100%) !important;
}

/* ── Header with Background Image (transparent, no gradient) ── */
.header.main-bg-image {
    background: none !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
                      url('/assets/img/johannesburg-skyline.jpeg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stat card icon circles — keep strong contrast */
.card-stats .icon-shape {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── General ───────────────────────────────────────────── */
.progress-bar {
    background-color: var(--av-primary);
}

.page-item.active .page-link {
    background-color: var(--av-primary);
    border-color: var(--av-primary);
    color: #fff;
}
.page-link { color: var(--av-primary); }

.form-control:focus {
    border-color: var(--av-primary);
    box-shadow: 0 0 0 0.2rem rgba(16, 48, 77, 0.15);
}

/* ── Auth Pages (login, register, etc. — bg-default body) ─ */
body.bg-default .main-content { background: transparent; }
body.bg-default .navbar-top {
    display: none !important;
}
body.bg-default .navbar-top .h4,
body.bg-default .navbar-top a {
    color: #fff !important;
}
body.bg-default .header .container-fluid h1,
body.bg-default .header h2,
body.bg-default .header p,
body.bg-default .footer a,
body.bg-default .footer .copyright {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ── Auth Page Card Content: Keep text dark and readable ─ */
body.bg-default .card .card-body {
    color: var(--av-text-primary) !important;
}
body.bg-default .card .card-body p,
body.bg-default .card .card-body li,
body.bg-default .card .card-body ul,
body.bg-default .card .card-body h4,
body.bg-default .card .card-body h3,
body.bg-default .card .card-body strong {
    color: var(--av-text-primary) !important;
    opacity: 1 !important;
}
body.bg-default .card .card-body .text-dark {
    color: var(--av-text-primary) !important;
}
body.bg-default .card .card-body li::marker {
    color: var(--av-text-primary) !important;
}

/* ── Header area: buttons inside gradient headers ──────── */
.header .btn,
.bg-gradient-primary .btn {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.header .btn-neutral,
.bg-gradient-primary .btn-neutral {
    background: #fff;
    color: var(--av-primary) !important;
    border-color: #fff;
}
.header .btn-neutral:hover {
    background: var(--av-neutral-100);
    color: var(--av-primary-dark) !important;
}

/* ── DataTables pagination (override default unstyled) ──── */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--av-primary) !important;
    color: #fff !important;
    border-color: var(--av-primary) !important;
    border-radius: var(--av-radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--av-primary-light) !important;
    color: #fff !important;
    border-color: var(--av-primary-light) !important;
    border-radius: var(--av-radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--av-primary) !important;
    border-radius: var(--av-radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--av-text-muted) !important;
}
.dataTables_wrapper .dataTables_info {
    color: var(--av-text-secondary);
}

/* ── DataTables search & length selectors ──────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-sm);
    padding: 4px 8px;
}

/* ── Breadcrumbs on dark headers ───────────────────────── */
.bg-gradient-primary .breadcrumb-item,
.bg-gradient-primary .breadcrumb-item a,
.bg-gradient-primary .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.7) !important;
}
.bg-gradient-primary .breadcrumb-item a:hover {
    color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════
   Utility Classes — use these instead of hardcoded colors
   ═══════════════════════════════════════════════════════════ */

/* ── Text ─────────────────────────────────────────────── */
.text-av-primary      { color: var(--av-primary)       !important; }
.text-av-secondary    { color: var(--av-secondary)     !important; }
.text-av-accent       { color: var(--av-accent)        !important; }
.text-av-muted        { color: var(--av-text-muted)    !important; }
.text-av-heading      { color: var(--av-text-primary)  !important; }
.text-av-body         { color: var(--av-text-secondary) !important; }

/* ── Backgrounds ──────────────────────────────────────── */
.bg-av-primary        { background-color: var(--av-primary)        !important; }
.bg-av-secondary      { background-color: var(--av-secondary)      !important; }
.bg-av-accent         { background-color: var(--av-accent)         !important; }
.bg-av-surface        { background-color: var(--av-surface)        !important; }
.bg-av-bg             { background-color: var(--av-bg)             !important; }
.bg-av-surface-low    { background-color: var(--av-surface-low)    !important; }

/* ── Soft / Container Backgrounds ─────────────────────── */
.bg-av-primary-soft   { background-color: var(--av-primary-container)   !important; color: var(--av-navy-dark) !important; }
.bg-av-secondary-soft { background-color: var(--av-secondary-container) !important; color: var(--av-teal-dark) !important; }
.bg-av-accent-soft    { background-color: var(--av-accent-container)    !important; color: var(--av-gold-dark) !important; }
.bg-av-success-soft   { background-color: var(--av-success-container)   !important; color: var(--av-success-dark) !important; }
.bg-av-warning-soft   { background-color: var(--av-warning-container)   !important; color: var(--av-warning-dark) !important; }
.bg-av-info-soft      { background-color: var(--av-info-container)      !important; color: var(--av-info-dark) !important; }
.bg-av-error-soft     { background-color: var(--av-error-container)     !important; color: var(--av-error-dark) !important; }

/* ── Borders ──────────────────────────────────────────── */
.border-av            { border-color: var(--av-border)       !important; }
.border-av-light      { border-color: var(--av-border-light) !important; }
.border-av-primary    { border-color: var(--av-primary)      !important; }

/* ── Shadows ──────────────────────────────────────────── */
.shadow-av-sm         { box-shadow: var(--av-shadow-sm) !important; }
.shadow-av-md         { box-shadow: var(--av-shadow-md) !important; }
.shadow-av-lg         { box-shadow: var(--av-shadow-lg) !important; }

/* ── Radii ────────────────────────────────────────────── */
.rounded-av-sm        { border-radius: var(--av-radius-sm)   !important; }
.rounded-av-md        { border-radius: var(--av-radius-md)   !important; }
.rounded-av-lg        { border-radius: var(--av-radius-lg)   !important; }
.rounded-av-xl        { border-radius: var(--av-radius-xl)   !important; }
.rounded-av-full      { border-radius: var(--av-radius-full) !important; }

/* ═══════════════════════════════════════════════════════════
   Reusable Component Patterns
   Replace inline <style> blocks in views with these classes.
   ═══════════════════════════════════════════════════════════ */

/* ── Quick Filters (assets/index etc.) ─────────────────── */
.av-filter.active,
.av-filter-active {
    background-color: var(--av-primary) !important;
    color: #fff !important;
    border-color: var(--av-primary) !important;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(16, 48, 77, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.av-filter-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #fff;
    background-color: var(--av-primary);
    border-radius: var(--av-radius-sm);
}
.av-filter-tag .close {
    margin-left: 0.5rem;
    color: #fff;
    text-shadow: none;
    opacity: 0.8;
}
.av-filter-tag .close:hover { opacity: 1; }

/* ── Nav Tabs (branded active state) ───────────────────── */
.av-nav-tabs .nav-link {
    padding: 0.5rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--av-text-secondary);
}
.av-nav-tabs .nav-link.active {
    color: var(--av-primary);
    background-color: transparent;
    border-bottom: 2px solid var(--av-primary);
}
.av-nav-tabs .nav-link:hover {
    border-color: transparent;
}

/* ── Section Titles ────────────────────────────────────── */
.av-section-title {
    color: var(--av-text-primary);
    font-weight: 700;
}
.av-section-subtitle {
    color: var(--av-text-secondary);
    font-size: 0.875rem;
}

/* ── Login Page: Background Image with Overlay ─────────────── */
.main-bg-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
                      url('/assets/img/johannesburg-skyline.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Safari/iOS ignores background-attachment: fixed on non-body elements */
@media (hover: none) {
    .main-bg-image {
        background-attachment: scroll;
    }
}

/* ═══════════════════════════════════════════════════════════
   Landing Page — partnersca.co.za style
   ═══════════════════════════════════════════════════════════ */

/* Lighter overlay scoped to landing page only (login/auth pages unchanged) */
body.landing-page .main-bg-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
                      url('/assets/img/johannesburg-skyline.jpeg') !important;
}

/* Pale mint section background — matches partnersca.co.za */
.landing-section {
    padding: 80px 0;
    background-color: #EEF5F0;
}

/* Hero: transparent so skyline shows through */
.landing-hero {
    min-height: 75vh;
    display: flex;
    align-items: center;
    background: transparent;
    padding: 80px 0 60px;
    position: relative;
}

/* Pillar icon circles */
.landing-pillar-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #467483;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #467483;
    font-size: 1.4rem;
}

/* Service/feature list items */
.landing-service-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    color: #467483;
    font-weight: 500;
    font-size: 0.925rem;
}
.landing-service-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: #467483;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 14px;
    font-size: 1rem;
}

/* Teal CTA banner */
.landing-cta-banner {
    background: #467483;
    padding: 70px 0;
}

/* Testimonial cards */
.landing-testimonial-card {
    background: white;
    border-radius: 12px;
    padding: 40px 48px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin: 0 70px;
}
.landing-testimonial-title {
    color: #467483;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 14px;
}
#landingTestimonials .carousel-control-prev,
#landingTestimonials .carousel-control-next {
    width: 52px;
}
#landingTestimonials .carousel-control-prev-icon,
#landingTestimonials .carousel-control-next-icon {
    background-color: #467483;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background-size: 50%;
}

/* FAQ accordion — teal items */
.landing-faq .card {
    border: none;
    border-radius: 8px !important;
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: none;
}
.landing-faq .card-header {
    background: #467483;
    border: none;
    padding: 0;
}
.landing-faq .card-header button {
    color: white;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    text-align: left;
    background: transparent;
    border: none;
    font-size: 0.9rem;
    letter-spacing: 0.2px;
}
.landing-faq .card-header button:focus {
    outline: none;
    box-shadow: none;
}
.landing-faq .card-header button .faq-icon {
    font-size: 1.2rem;
    font-weight: 300;
    flex-shrink: 0;
    margin-left: 12px;
}
.landing-faq .card-body {
    background: #3d6673;
    color: rgba(255, 255, 255, 0.9);
    padding: 12px 20px 18px;
    font-size: 0.875rem;
    line-height: 1.6;
}
.landing-faq .card-body a {
    color: #DBB55C !important;
}

/* Landing/login page body — replace dark bg-default */
body.landing-page {
    background-color: #EEF5F0 !important;
}
body.landing-page .main-content {
    background: transparent;
}

/* Landing topbar — white bar with inline sign-in form */
/* Fix 1: Argon .navbar base sets display:flex — overriding to block collapses the flex row.
   Use flex so logo and form sit on the same horizontal line. */
body.landing-page .navbar-top {
    display: flex !important;
}
.landing-topbar {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important;
    padding: 10px 0 !important;
}
.navbar-login-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.navbar-input-wrap {
    position: relative;
}
.navbar-input-wrap i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #467483;
    font-size: 0.8rem;
    z-index: 2;
    pointer-events: none;
}
.navbar-login-input {
    border: 1.5px solid #c8dce1 !important;
    border-radius: 6px !important;
    padding: 6px 10px 6px 30px !important;
    height: 38px !important;
    font-size: 0.85rem !important;
    color: #2D4D6B !important;
    width: 165px;
    box-shadow: none !important;
    background: #f8fbfc !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.navbar-login-input:focus {
    border-color: #467483 !important;
    box-shadow: 0 0 0 2px rgba(70, 116, 131, 0.15) !important;
    background: #fff !important;
    outline: none;
}
.navbar-login-input::placeholder { color: #94aab5; }
.navbar-login-btn {
    height: 38px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 6px 18px;
    white-space: nowrap;
    flex-shrink: 0;
}
.navbar-forgot-link {
    color: #467483;
    font-size: 0.78rem;
    white-space: nowrap;
    text-decoration: none;
    opacity: 0.8;
    flex-shrink: 0;
}
.navbar-forgot-link:hover { color: #2D4D6B; text-decoration: underline; opacity: 1; }

/* Validation error stripe — clears absolute topbar, shows below it after failed login */
.login-error-strip {
    margin-top: 66px; /* clear the absolutely-positioned topbar */
    background: rgba(252, 232, 232, 0.95);
    border-left: 4px solid #e55353;
    color: #a01010;
    font-size: 0.88rem;
    padding: 10px 20px;
    text-align: center;
    position: relative;
    z-index: 2; /* sit above the skyline bg */
}

/* Narrow desktop (768–900px): shrink inputs to prevent overflow */
@media (min-width: 768px) and (max-width: 900px) {
    .navbar-login-input { width: 130px; }
    .navbar-forgot-link { display: none; } /* hide "Forgot?" at smallest inline size */
}

/* Mobile: form stacks in collapse */
@media (max-width: 767px) {
    .navbar-login-form { flex-direction: column; align-items: stretch; padding: 12px 0; gap: 10px; }
    .navbar-login-input { width: 100%; }
    .navbar-login-btn { width: 100%; height: 42px; }
    .navbar-forgot-link { text-align: center; display: block; }
    .login-hero-title { font-size: 1.7rem; }
    .login-hero-subtitle { font-size: 0.95rem; }
    .login-hero { padding-top: calc(66px + 50px); padding-bottom: 60px; }
}


/* Shared landing/login footer */
.landing-footer {
    background: #2D4D6B;
    padding: 24px 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.84rem;
}

/* Hero — skyline bg, centered headline */
.login-hero {
    padding-top: calc(66px + 80px); /* clear absolute topbar + breathing room */
    padding-bottom: 90px;
    display: flex;
    align-items: center;
}
.login-hero-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 18px;
}
.login-hero-subtitle {
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    line-height: 1.6;
}

/* Cards section — transparent so <main> skyline shows through */
.login-content-section {
    background-color: transparent;
    padding-top: 60px;
    padding-bottom: 80px;
}

/* Info card — strong shadow to lift off the dark skyline */
.login-info-card {
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32) !important;
    margin-bottom: 0;
}
.login-info-card .card-header {
    background: #467483 !important;
    border-top: 4px solid #DBB55C !important;
    border-bottom: none !important;
    padding: 20px 24px 16px;
}
.login-info-card .card-header h2 {
    color: white !important;
    font-size: 1.3rem;
    margin: 0 0 4px;
    font-weight: 700;
}
.login-info-card .card-subtitle-text {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
    display: block;
}
.login-info-card .card-body {
    background: #EEF5F0 !important;
    color: #3a4a5c !important;
    padding: 28px !important;
    line-height: 1.75;
}
.login-info-card .card-body p,
.login-info-card .card-body h4,
.login-info-card .card-body strong {
    color: #3a4a5c !important;
}

/* Icon-based feature list — replaces plain <ul> */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(70, 116, 131, 0.09);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li i {
    color: #467483;
    font-size: 0.72rem;
    margin-top: 5px;
    flex-shrink: 0;
}
.feature-list li span {
    color: #3a4a5c;
    font-size: 0.9rem;
    line-height: 1.55;
}


/* ── Gold Accent Button (branding) ────────────────────────── */
.btn-gold {
    background-color: #DBB55C;
    border-color: #DBB55C;
    color: white !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-gold:hover,
.btn-gold:focus,
.btn-gold:active {
    background-color: #B18A32;
    border-color: #B18A32;
    color: white !important;
    box-shadow: 0 4px 6px rgba(219, 181, 92, 0.3);
}