/* ==========================================================================
   TAPNAIJA WEB: BRAND LAYER (matches the mobile app)
   Lime #B7CD3C on deep navy-black. Loaded after design-tokens.css, so it only re-points the brand tokens
   and the few components that assumed white text on the old magenta gradient.
   ========================================================================== */

:root {
    --ami-lime: #B7CD3C;
    --ami-lime-deep: #A3B82F;
    --ami-on-lime: #000000;
    --ami-ink: #0B0F19;          /* app background */
    --ami-ink-2: #161C28;        /* app card surface */
    --ami-ink-3: #1E2638;

    /* old magenta tokens now resolve to the brand. Text uses the deep olive in light mode so it keeps 4.5:1 on white. */
    --ami-brand-gradient: linear-gradient(135deg, #B7CD3C 0%, #A3B82F 100%);
    --ami-brand-gradient-hover: linear-gradient(135deg, #C4D94A 0%, #B7CD3C 100%);
    --ami-brand-magenta: #566610;
    --ami-brand-navy: #0B0F19;
    --ami-brand-navy-light: #161C28;
    --ami-brand-glow: rgba(183, 205, 60, 0.28);
    --ami-shadow-hero: 0 12px 28px -8px rgba(11, 15, 25, 0.45);
}

[data-theme="dark"] {
    --ami-bg: #0B0F19;
    --ami-surface: #161C28;
    --ami-surface-subtle: #1E2638;
    --ami-surface-hover: #283248;
    --ami-border: #263046;
    --ami-brand-magenta: #B7CD3C;
}

/* ---- buttons -------------------------------------------------------------------------------------- */
.btn-ami-primary {
    background: var(--ami-lime);
    color: var(--ami-on-lime) !important;
    box-shadow: none;
    font-weight: 700;
}
.btn-ami-primary:hover {
    background: #C4D94A;
    box-shadow: 0 6px 16px -4px rgba(183, 205, 60, 0.55);
}
.btn-ami-hero {
    background: var(--ami-lime);
    color: var(--ami-on-lime) !important;
    box-shadow: none;
}
.btn-ami-hero:hover { background: #C4D94A; }

.ami-chip.active {
    background: var(--ami-lime);
    color: var(--ami-on-lime);
    box-shadow: none;
}
.ami-network-tile .tile-check { color: var(--ami-on-lime); }

/* hero cards stay dark so white text on them is always readable */
.ami-hero-card {
    background: linear-gradient(135deg, #0B0F19 0%, #1B2433 100%);
    color: #FFFFFF;
}
.ami-hero-card::after {
    background: radial-gradient(circle, rgba(183, 205, 60, 0.22) 0%, rgba(183, 205, 60, 0) 70%);
}

/* ---- navigation ----------------------------------------------------------------------------------- */
.navbar .nav-link { position: relative; }
.navbar .nav-link:hover { color: var(--ami-text-primary) !important; }
.navbar-nav .nav-link.is-active { color: var(--ami-text-primary) !important; }
.navbar-nav .nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 2px;
    height: 3px; border-radius: 2px;
    background: var(--ami-lime);
}
.ami-bottom-nav-item.active { color: var(--ami-text-primary); }
.ami-bottom-nav-item.active i {
    background: var(--ami-lime);
    color: var(--ami-on-lime);
    border-radius: 14px;
    padding: 2px 16px;
}
[data-theme="dark"] .ami-bottom-nav-item.active { color: #F8FAFC; }


/* ---- phone shell: same anatomy as the app (slim top, five tabs) ------------------------------------ */
@media (max-width: 991.98px) {
    .nav-auth .m-hide-auth { display: none !important; }
    .nav-auth { padding-top: 6px; padding-bottom: 6px; }
    .nav-auth .navbar-brand img { height: 30px; }
    body:has(.dash) .navbar { display: none; }
    body { padding-bottom: 76px; }
    .ami-bottom-nav {
        height: 66px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: var(--ami-surface); border-top: 1px solid var(--ami-border); box-shadow: none;
    }
    .ami-bottom-nav-item { font-size: .64rem; font-weight: 600; padding: 2px 0; gap: 2px; }
    .ami-bottom-nav-item i { font-size: 1.2rem; margin: 0; padding: 3px 16px; border-radius: 14px; transition: background .15s; }
    .ami-bottom-nav-item.active i { background: var(--ami-lime); color: #000; }
}


/* ---- desktop shell: glass bar, calm links ----------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar.nav-auth {
        background: color-mix(in srgb, var(--ami-surface) 78%, transparent) !important;
        -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
        border-bottom: 1px solid var(--ami-border) !important;
        padding-top: 10px; padding-bottom: 10px;
    }
    .navbar .navbar-nav .nav-link { font-size: .88rem; font-weight: 600 !important; padding-left: 14px !important; padding-right: 14px !important; border-radius: 10px; }
    .navbar .navbar-nav .nav-link:hover { background: var(--ami-surface-subtle); }
    .navbar .btn-ami-primary { border-radius: 999px; font-weight: 700; padding: 8px 18px !important; box-shadow: 0 8px 20px -10px rgba(183,205,60,.8); }
    .navbar .dropdown-menu { border: 1px solid var(--ami-border) !important; box-shadow: 0 24px 48px -20px rgba(0,0,0,.45) !important; padding: 8px; border-radius: 16px !important; }
    .navbar .dropdown-item { border-radius: 10px; font-size: .88rem; }
    .navbar .dropdown-item:hover { background: var(--ami-surface-subtle); }
}


/* ---- logo theme swap ----------------------------------------------------------------------------- */
/* Primary lockup (navy "Tap") on light surfaces, reversed lockup (white "Tap") on dark ones. */
.brand-logo-dark { display: none; }
[data-theme="dark"] .brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark { display: inline-block; }


/* ---- sidebar: fixed rail on desktop (>= 992px), slide-in drawer on mobile ---------------------------- */
/* Desktop state lives on <html data-sb="open|rail|hidden"> (set before paint by an inline script in base.html).
   Mobile: <html class="sb-m-open"> shows the drawer; the menu button in the top bar opens it. */
.sb-reopen { display: none !important; }
.ami-sb {
    position: fixed; inset: 0 auto 0 0; z-index: 1045; display: flex; flex-direction: column; width: 264px;
    background: linear-gradient(180deg, #0B0F19 0%, #0D1220 100%); border-right: 1px solid rgba(255, 255, 255, .06);
    transition: width .28s cubic-bezier(.16, 1, .3, 1), transform .28s cubic-bezier(.16, 1, .3, 1), visibility .28s;
}
.sb-backdrop { display: none; position: fixed; inset: 0; z-index: 1044; background: rgba(0, 0, 0, .55); }
@media (max-width: 991.98px) {
    .ami-sb { width: min(300px, 86vw); transform: translateX(-102%); visibility: hidden; }
    html.sb-m-open .ami-sb { transform: none; visibility: visible; }
    html.sb-m-open .sb-backdrop { display: block; }
    html.sb-m-open body { overflow: hidden; }
    .sb-collapse { display: none !important; }
}
@media (min-width: 992px) {
    .ami-sb { z-index: 1035; }
    body.has-sb { padding-left: var(--sb-w, 264px); transition: padding-left .28s cubic-bezier(.16, 1, .3, 1); }
    html[data-sb="open"]   body.has-sb { --sb-w: 264px; }
    html[data-sb="rail"]   body.has-sb { --sb-w: 78px; }
    html[data-sb="hidden"] body.has-sb { --sb-w: 0px; }
    body.has-sb .navbar.nav-auth { display: none; }
    html[data-sb="rail"] .ami-sb { width: 78px; }
    html[data-sb="hidden"] .ami-sb { transform: translateX(-102%); visibility: hidden; }
}
.sb-head { display: flex; align-items: center; gap: 6px; padding: 18px 14px 14px 18px; min-height: 70px; }
.sb-brand { flex: 1; min-width: 0; display: flex; align-items: center; }
.sb-logo-mark { display: none; }
.sb-btn { width: 36px; height: 36px; flex: none; border: 0; border-radius: 11px; background: transparent; color: #8D97AA; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; padding: 0; transition: background .15s, color .15s; }
.sb-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 12px 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; }
.sb-label { margin: 18px 10px 8px; font-size: .64rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #566176; white-space: nowrap; }
.sb-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 12px; margin-bottom: 2px; border-radius: 13px; color: #A7B0C0; font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.sb-item i { width: 22px; flex: none; text-align: center; font-size: 1.12rem; }
.sb-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sb-item.active { background: rgba(183, 205, 60, .14); color: #C4D94A; }
.sb-item.active::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: #B7CD3C; }

.sb-foot { padding: 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
.sb-wallet { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; text-decoration: none; color: #000; background: linear-gradient(135deg, #C4D94A, #A9BF34); white-space: nowrap; }
.sb-wallet i { width: 22px; flex: none; text-align: center; font-size: 1.1rem; }
.sb-wallet small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; opacity: .7; line-height: 1.1; }
.sb-wallet b { font-size: .98rem; font-variant-numeric: tabular-nums; }
.sb-wallet:hover { color: #000; filter: brightness(1.05); }
.sb-row { display: flex; align-items: center; gap: 6px; }
.sb-user { flex: 1; min-width: 0; }
.sb-me { width: 100%; display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border: 0; border-radius: 12px; background: transparent; color: #fff; text-align: left; min-width: 0; }
.sb-me:hover { background: rgba(255, 255, 255, .08); }
.sb-me img { border-radius: 50%; flex: none; object-fit: cover; border: 1px solid rgba(255, 255, 255, .18); }
.sb-me span { min-width: 0; line-height: 1.15; }
.sb-me b { display: block; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-me small { display: block; font-size: .68rem; color: #8D97AA; white-space: nowrap; }
.sb-dot { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #EF4444; color: #fff; font-size: .6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #0B0F19; }


@media (min-width: 992px) {
    /* rail: icons only */
    html[data-sb="rail"] .sb-head { flex-direction: column; padding: 14px 0 8px; gap: 8px; }
    html[data-sb="rail"] .sb-brand { flex: none; justify-content: center; }
    html[data-sb="rail"] .sb-logo-full, html[data-sb="rail"] .sb-hide { display: none; }
    html[data-sb="rail"] .sb-logo-mark { display: block; }
    html[data-sb="rail"] .sb-label { height: 1px; margin: 12px 12px; padding: 0; overflow: hidden; background: rgba(255, 255, 255, .08); color: transparent; font-size: 0; }
    html[data-sb="rail"] .sb-item { justify-content: center; padding: 12px 0; }
    html[data-sb="rail"] .sb-item span { display: none; }
    html[data-sb="rail"] .sb-wallet { justify-content: center; padding: 11px 0; }
    html[data-sb="rail"] .sb-wallet span, html[data-sb="rail"] .sb-me span { display: none; }
    html[data-sb="rail"] .sb-row { flex-direction: column; }
    html[data-sb="rail"] .sb-user { flex: none; }
    html[data-sb="rail"] .sb-me { padding: 4px; justify-content: center; }

    /* hidden: floating reopen button */
    html[data-sb="hidden"] .sb-reopen { display: inline-flex !important; }
    .sb-reopen { position: fixed; top: 16px; left: 16px; z-index: 1034; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--ami-border); border-radius: 14px; background: var(--ami-surface); color: var(--ami-text-primary); font-size: 1.4rem; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .5); }
    .sb-reopen:hover { border-color: rgba(183, 205, 60, .8); }
}
@media (prefers-reduced-motion: reduce) { body.has-sb, .ami-sb { transition: none !important; } }


/* ---- readability layer: every text colour must hold WCAG AA (4.5:1) in both themes ----------------- */
/* Verified with an automated contrast audit of every signed-in page, light and dark, phone and desktop. */
:root { --ami-text-muted: #55657A; }                 /* was #94A3B8 (2.6:1 on white) */
[data-theme="dark"] { --ami-text-muted: #9AA8BC; }   /* was #64748B (3.6:1 on the dark surface) */

/* Bootstrap utility colours are light-mode values; re-point them to theme-aware ones */
.text-muted, .text-body-secondary { color: var(--ami-text-muted) !important; }
.text-secondary { color: var(--ami-text-secondary) !important; }
.text-success { color: #146C43 !important; }
.text-primary { color: #0A58CA !important; }
.text-danger  { color: #B02A37 !important; }
.text-warning { color: #8A5A00 !important; }
.text-info    { color: #087990 !important; }
code { color: #B02068; }
.bg-primary-subtle.text-primary, .badge.bg-light.text-primary { color: #084298 !important; }
.btn-outline-secondary { color: #3F4A5A; border-color: #8795A8; }
.btn-outline-secondary:hover { color: var(--ami-text-primary); background: var(--ami-surface-subtle); border-color: #5E6C80; }

[data-theme="dark"] .text-dark, [data-theme="dark"] .text-body, [data-theme="dark"] .text-black { color: var(--ami-text-primary) !important; }
[data-theme="dark"] .text-secondary { color: var(--ami-text-secondary) !important; }
[data-theme="dark"] .text-success { color: #4ADE80 !important; }
[data-theme="dark"] .text-primary { color: #8DB8FF !important; }
[data-theme="dark"] .text-danger  { color: #FF8A8A !important; }
[data-theme="dark"] .text-warning { color: #FBBF24 !important; }
[data-theme="dark"] .text-info    { color: #5CD2EE !important; }
[data-theme="dark"] code { color: #FF9CC8; }
[data-theme="dark"] .bg-light { background-color: var(--ami-surface-subtle) !important; }
[data-theme="dark"] .bg-white { background-color: var(--ami-surface) !important; }
[data-theme="dark"] .bg-primary-subtle { background-color: rgba(61, 139, 253, .18) !important; }
[data-theme="dark"] .bg-primary-subtle.text-primary, [data-theme="dark"] .badge.bg-light.text-primary { color: #9EC5FE !important; }
[data-theme="dark"] .btn-outline-secondary { color: var(--ami-text-secondary); border-color: var(--ami-border-strong); }
[data-theme="dark"] .btn-outline-secondary:hover { color: var(--ami-text-primary); background: var(--ami-surface-hover); border-color: var(--ami-border-strong); }
[data-theme="dark"] .btn-light { background: var(--ami-surface-subtle); border-color: var(--ami-border); color: var(--ami-text-primary); }

/* Anything still inheriting Bootstrap's near-black body colour (plain .btn, form text) follows the theme */
[data-theme="dark"] {
    --bs-body-color: #F8FAFC;
    --bs-body-color-rgb: 248, 250, 252;
    --bs-secondary-color: #CBD5E1;
    --bs-emphasis-color: #FFFFFF;
    --bs-border-color: #2E3A4D;
}

/* Form controls: Bootstrap keeps inputs white in dark mode, which hides typed text and placeholders */
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
    background-color: var(--ami-surface-subtle);
    border-color: var(--ami-border-strong);
    color: var(--ami-text-primary);
}
[data-theme="dark"] .form-control::placeholder { color: var(--ami-text-muted); opacity: 1; }
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus {
    background-color: var(--ami-surface-subtle);
    border-color: #B7CD3C;
    box-shadow: 0 0 0 .2rem rgba(183, 205, 60, .25);
    color: var(--ami-text-primary);
}
[data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: var(--ami-surface); color: var(--ami-text-secondary); }
[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBD5E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
[data-theme="dark"] .input-group-text { background-color: var(--ami-surface-subtle); border-color: var(--ami-border-strong); color: var(--ami-text-secondary); }
[data-theme="dark"] .form-control:-webkit-autofill { -webkit-text-fill-color: var(--ami-text-primary); box-shadow: 0 0 0 1000px var(--ami-surface-subtle) inset; }
[data-theme="dark"] .form-check-input { background-color: var(--ami-surface-subtle); border-color: var(--ami-border-strong); }
[data-theme="dark"] .form-check-input:checked { background-color: #B7CD3C; border-color: #B7CD3C; }

/* Tables: Bootstrap paints cells white; follow the theme instead */
[data-theme="dark"] .table {
    --bs-table-color: var(--ami-text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ami-border);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-striped-color: var(--ami-text-primary);
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
    --bs-table-hover-color: var(--ami-text-primary);
    color: var(--ami-text-primary);
}
[data-theme="dark"] .table-light, [data-theme="dark"] .table > thead.table-light > tr > * { --bs-table-bg: var(--ami-surface-subtle); --bs-table-color: var(--ami-text-secondary); color: var(--ami-text-secondary); }

/* Form labels / helpers that were inheriting Bootstrap's near-black body colour in dark mode */
[data-theme="dark"] .form-label { color: var(--ami-text-secondary); }
[data-theme="dark"] .ami-form-label { color: var(--ami-text-secondary); }

/* ---- prefix + field on ONE line (+234 / ₦ boxes beside their inputs) --------------------------------- */
/* .ami-form-control is width:100%, which pushed it under the prefix box inside Bootstrap's flex-wrap group. */
.input-group { flex-wrap: nowrap; }
.input-group > .ami-form-control { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .input-group-text { flex: none; white-space: nowrap; align-items: center; }