/*
 * Bibliopolis Theme Override — BookRouter Admin
 * Single consolidated file · load AFTER admin.css
 * ─────────────────────────────────────────────────────
 *
 * TODO (step 2 — once the rebrand look is locked): fold this into
 * css/admin.scss instead of shipping it as a separate override file.
 *   • Move the section-1 --mdb-* token block to the top of admin.scss
 *     (right after the libraries.scss import) — keep it as --mdb-*
 *     custom properties, do NOT rewrite as MDB $Sass vars.
 *   • Append sections 2–14 as normal SCSS rules (most !important can
 *     come off once they're not fighting load-order).
 *   • Delete this file + its <link> in cp_head_xhtml_1.php and recompile.
 * Keeping the brand in the --mdb-* layer also leaves the door open for a
 * runtime-selectable multi-skin system later, if we ever want one.
 *
 * NOTE: the DM Sans font is loaded via a <link> in cp_head_xhtml_1.php
 * (next to Poppins) — NOT an @import here (an @import would block on the
 * stylesheet fetch before even discovering the font).
 *
 * SECTIONS
 *  1.  Fonts & root token overrides
 *  2.  Base / body / layout
 *  3.  Sidenav (gradient, links, icons)
 *  4.  Topbar / navbar
 *  5.  Cards
 *  6.  Icon chips — .br-icon-chip (dashboard snapshot)
 *  7.  Icon chips — .landing-section-icon (landing pages)
 *  8.  Section header icons — .br-header-icon
 *  9.  Marketplace logo tiles
 * 10.  Buttons
 * 11.  Links
 * 12.  Badges / alerts
 * 13.  Scrollbar
 * 14.  Suggestions / TODO notes
 * ─────────────────────────────────────────────────────
 */


/* ══════════════════════════════════════════════════
   1. FONTS & ROOT TOKEN OVERRIDES
   Overrides MDB's CSS variable layer so every
   component that references these vars cascades
   automatically — minimal !important needed.
   ══════════════════════════════════════════════════ */
:root,
[data-mdb-theme='light'] {
    /* Font */
    --mdb-font-sans-serif:       'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mdb-body-font-family:      'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mdb-body-font-size:        0.9rem;

    /* Primary — MDB blue → Bibliopolis cobalt */
    --mdb-primary:               #2b4d9b;
    --mdb-primary-rgb:           43, 77, 155;
    --mdb-primary-text-emphasis: #1a2e5a;
    --mdb-primary-bg-subtle:     #dce8f7;
    --mdb-primary-border-subtle: #c0d0e8;

    /* Indigo / purple accents */
    --mdb-indigo:                #2b4d9b;
    --mdb-purple:                #1a2e5a;

    /* Orange — MDB amber → Bibliopolis orange */
    --mdb-orange:                #e8621a;
    --mdb-warning:               #f0a030;
    --mdb-warning-rgb:           240, 160, 48;
    --mdb-warning-bg-subtle:     #fff3ec;
    --mdb-warning-text-emphasis: #c04d0f;

    /* Body */
    --mdb-body-color:            #1a2e5a;
    --mdb-body-bg:               #eef3fb;

    /* Links */
    --mdb-link-color:            #2b4d9b;
    --mdb-link-color-rgb:        43, 77, 155;
    --mdb-link-hover-color:      #e8621a;
    --mdb-link-hover-color-rgb:  232, 98, 26;

    /* Borders */
    --mdb-border-color:          #c0d0e8;

    /* Surface (cards, dropdowns) */
    --mdb-surface-bg:            #ffffff;
    --mdb-surface-color:         #1a2e5a;
    --mdb-surface-color-rgb:     26, 46, 90;
    --mdb-highlight-bg-color:    #dce8f7;

    /* Landing pages use --primaryColor as an RGB triplet */
    --primaryColor: 43, 77, 155;   /* cobalt in r,g,b form */

    /* NOTE: --mdb-sidenav-* tokens are deliberately NOT overridden here.
       The .sidenav class is shared by the main nav (#sidebar) AND every
       right-side slideout panel (#dialog-ebay/#dialog-amz, advanced
       filters, notifications). Theming via :root tokens (or bare .sidenav
       rules) leaks the navy gradient onto those white form panels. All
       main-nav theming is therefore scoped to #sidebar in section 3, and
       the slideouts keep MDB's default white panel. */
}

/* Main-nav sidenav tokens — scoped so slideout panels are unaffected */
#sidebar {
    --mdb-sidenav-background-color:                      transparent;
    --mdb-sidenav-color:                                 rgba(255,255,255,0.80);
    --mdb-sidenav-link-hover-color:                      #ffffff;
    --mdb-sidenav-link-hover-background-color:           rgba(255,255,255,0.07);
    --mdb-sidenav-link-active-color:                     #e8621a;
    --mdb-sidenav-link-active-focus-color:               #e8621a;
    --mdb-sidenav-link-active-focus-background-color:    rgba(232,98,26,0.10);
    --mdb-sidenav-data-color-light-color:                rgba(255,255,255,0.60);
    --mdb-sidenav-light-color:                           rgba(255,255,255,0.60);
}


/* ══════════════════════════════════════════════════
   2. BASE / BODY / LAYOUT
   ══════════════════════════════════════════════════ */
body {
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #1a2e5a;
}

.cp_main > main,
#main-content,
.content-wrapper {
    background-color: #eef3fb !important;
}


/* ══════════════════════════════════════════════════
   3. SIDENAV (main nav only)
   IMPORTANT: scoped to #sidebar, NOT bare .sidenav. The
   .sidenav class is shared by the right-side slideout
   panels (#dialog-ebay/#dialog-amz, #advanced-form-filter,
   notifications) — theming bare .sidenav paints the navy
   gradient onto those white form panels. Keep every rule
   here under #sidebar.
   ══════════════════════════════════════════════════ */

/* Navy→cobalt vertical gradient */
#sidebar.sidenav {
    background: linear-gradient(
        to bottom,
        #0f1e3d 0%,
        #0f1e3d 40%,
        #1a3264 65%,
        #2b4d9b 100%
    ) !important;
    background-color: transparent !important;
    color: rgba(255,255,255,0.80) !important;
}

/* Keep gradient visible through inner wrappers */
#sidebar .sidenav-menu-wrapper,
#sidebar .sidenav-menu {
    background: transparent !important;
}

/* Extra vertical space below last nav item */
#sidebar .sidenav-menu {
    padding-bottom: 4rem !important;
}

/* Brand / logo area */
#sidebar .navbar-brand {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
}

/* Nav links — default */
#sidebar .sidenav-link {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.75) !important;
    letter-spacing: 0.01em;
}

/* Hover */
#sidebar .sidenav-link:hover,
#sidebar .sidenav-link:focus {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.07) !important;
}

/* Active — solid dark chip + orange left accent bar, deliberately
   decoupled from the gradient so contrast is constant down the whole
   menu (white text 16.5:1; orange bar/icon 4.9:1 — both pass AA).
   Orange-on-gradient TEXT failed WCAG below the top of the menu
   (2.35:1 at the cobalt end), so orange is now an accent, not the text. */
#sidebar .sidenav-link.active {
    color: #ffffff !important;
    background-color: #0f1e3d !important;
    box-shadow: inset 3px 0 0 #e8621a !important;
    font-weight: 500 !important;
}

/* Top-level section headers */
#sidebar .sidenav-link.nav-header {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    color: rgba(255,255,255,0.80) !important;
}

/* Sub-items — .75 (was .60) so they clear AA 4.5:1 even over the
   light cobalt bottom of the gradient (.60 dropped to 3.99:1 there) */
#sidebar .sidenav-collapse .sidenav-link {
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.75) !important;
}

#sidebar .sidenav-collapse .sidenav-link:hover {
    color: #ffffff !important;
}

/* Active sub-item: white text (the base .active rule supplies the dark
   chip + orange bar); orange text here would fail contrast over cobalt */
#sidebar .sidenav-collapse .sidenav-link.active {
    color: #ffffff !important;
}

/* Nav icons — default muted, orange on active/hover.
   .60 (was .50) keeps icons ≥3:1 (non-text contrast) over cobalt */
#sidebar .nav-icon {
    color: rgba(255,255,255,0.60) !important;
    transition: color 0.2s !important;
}

#sidebar .sidenav-link:hover .nav-icon,
#sidebar .sidenav-link.active .nav-icon {
    color: #e8621a !important;
}

/* Collapse arrow */
#sidebar .rotate-icon {
    color: rgba(255,255,255,0.40) !important;
}

/* Admin badges in nav (Admin / Webmaster) */
#sidebar .sn-badge,
#sidebar .badge {
    font-size: 9px !important;
    background: #f0a030 !important;
    color: #0f1e3d !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
}

/* FA solid icons in sidenav — .60 (was .55) for ≥3:1 over cobalt */
#sidebar .fas,
#sidebar .far,
#sidebar .fal,
#sidebar .fa-solid {
    color: rgba(255,255,255,0.60) !important;
    transition: color 0.2s !important;
}

#sidebar .sidenav-link:hover .fas,
#sidebar .sidenav-link:hover .far,
#sidebar .sidenav-link:hover .fal,
#sidebar .sidenav-link:hover .fa-solid,
#sidebar .sidenav-link.active .fas,
#sidebar .sidenav-link.active .far,
#sidebar .sidenav-link.active .fal,
#sidebar .sidenav-link.active .fa-solid {
    color: #e8621a !important;
}

/* FA duotone in sidenav */
#sidebar .fad,
#sidebar .fa-duotone {
    --fa-primary-color:   rgba(255,255,255,0.85);
    --fa-secondary-color: #e8621a;
    --fa-secondary-opacity: 0.7;
}

#sidebar .sidenav-link.active .fad,
#sidebar .sidenav-link.active .fa-duotone {
    --fa-primary-color:   #e8621a;
    --fa-secondary-color: #f0a030;
    --fa-secondary-opacity: 0.6;
}


/* ══════════════════════════════════════════════════
   4. TOPBAR / NAVBAR
   ══════════════════════════════════════════════════ */
nav.navbar:not(.sidenav),
.navbar:not(.sidenav) {
    background-color: #ffffff !important;
    border-bottom: 1px solid #c0d0e8 !important;
    box-shadow: 0 1px 4px rgba(26,46,90,0.06) !important;
}

.navbar-brand,
.navbar .navbar-brand {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    color: #1a2e5a !important;
}

.navbar .form-control,
.navbar input[type="search"],
.navbar input[type="text"] {
    border-color: #c0d0e8 !important;
    background: #f5f8fd !important;
    color: #1a2e5a !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* Mobile menu (hamburger) toggler — admin.scss colors #navbar-brand-toggler
   white for the original dark mobile top bar. Section 4 above forces the top
   bar WHITE at every width, so the white icon went white-on-white and the
   mobile menu button vanished. Recolor it navy so it shows on the white bar. */
#navbar-brand-toggler {
    color: #1a2e5a !important;
}


/* ══════════════════════════════════════════════════
   5. CARDS
   ══════════════════════════════════════════════════ */
.card {
    border-color: #c0d0e8 !important;
    border-radius: 2px !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(26,46,90,0.05) !important;
}

.card-header {
    background-color: #f5f8fd !important;
    border-bottom-color: #c0d0e8 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    color: #1a2e5a !important;
}

.card-title {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    color: #1a2e5a !important;
}

.card-footer {
    background-color: #f5f8fd !important;
    border-top-color: #c0d0e8 !important;
}

/* Landing section cards — left accent bar in cobalt */
.landing-section {
    border-left-color: rgba(43, 77, 155, 0.3) !important;
    border-radius: 2px !important;
}

.landing-section .landing-section-header {
    background: #f5f8fd !important;
    border-bottom-color: #c0d0e8 !important;
}

.landing-section .landing-section-header h5,
.landing-section .landing-section-header .h5 {
    color: #1a2e5a !important;
    font-weight: 500 !important;
}


/* ══════════════════════════════════════════════════
   6. ICON CHIPS — .br-icon-chip
   Dashboard snapshot cards (Total Items, In Stock, etc.)
   Strips the oval bubble; cobalt default, orange on hover.
   ══════════════════════════════════════════════════ */

/* Strip bubble from ALL badge colour variants */
.br-icon-chip,
.badge-primary.br-icon-chip,
.badge-secondary.br-icon-chip,
.badge-warning.br-icon-chip,
.badge-info.br-icon-chip,
.badge-danger.br-icon-chip,
.badge-success.br-icon-chip,
.badge-light.br-icon-chip,
.badge-dark.br-icon-chip {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Icon colour — cobalt */
.br-icon-chip i {
    color: #2b4d9b !important;
    transition: color 0.2s !important;
}

/* Warning icon stays orange (Missing Images etc.) */
.br-icon-chip i.fa-triangle-exclamation {
    color: #e8621a !important;
}

/* Hover — whole card turns icon orange */
.br-kpi-card:hover .br-icon-chip i {
    color: #e8621a !important;
}


/* ══════════════════════════════════════════════════
   7. ICON CHIPS — .landing-section-icon
   Website / Settings / Reports landing pages
   ══════════════════════════════════════════════════ */
.landing-section .landing-section-icon {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

.landing-section .landing-section-icon i {
    color: #2b4d9b !important;
    font-size: 1.1rem !important;
    transition: color 0.2s !important;
}

.landing-section:hover .landing-section-icon i,
.landing-card:hover .landing-section-icon i {
    color: #e8621a !important;
}


/* ══════════════════════════════════════════════════
   8. SECTION HEADER ICONS — .br-header-icon
   Inventory Snapshot / Marketplaces / Sales headings
   ══════════════════════════════════════════════════ */
.br-header-icon {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.br-header-icon i {
    color: #2b4d9b !important;
    font-size: 1.1rem !important;
    transition: color 0.2s !important;
}


/* ══════════════════════════════════════════════════
   9. MARKETPLACE LOGO TILES
   Strips borders and backgrounds from the logo chip
   containers on the Marketplaces Snapshot card.
   The logo images themselves stay untouched.
   ══════════════════════════════════════════════════ */
.br-snapshots [class*="logo"],
.br-snapshots [class*="chip"],
.br-marketplace-logo,
.br-mkt-logo,
.br-channel-logo {
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2px !important;
}

/* Fallback: any small bordered image container inside
   the marketplaces snapshot card */
.br-snapshots .card img,
.br-snapshots [class*="icon"],
.br-snapshots [style*="border"] {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ══════════════════════════════════════════════════
   10. BUTTONS
   ══════════════════════════════════════════════════ */

/* Primary — navy → orange hover */
.btn-primary {
    --mdb-btn-bg:                #0f1e3d;
    --mdb-btn-border-color:      #0f1e3d;
    --mdb-btn-hover-bg:          #e8621a;
    --mdb-btn-hover-border-color:#e8621a;
    --mdb-btn-active-bg:         #c04d0f;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    border-radius: 2px !important;
}

/* Outline primary */
.btn-outline-primary {
    --mdb-btn-color:        #2b4d9b;
    --mdb-btn-border-color: #2b4d9b;
    --mdb-btn-hover-bg:     #2b4d9b;
    --mdb-btn-hover-color:  #ffffff;
    border-radius: 2px !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* Secondary outline (MANAGE INVENTORY / VIEW ALL buttons) */
.btn-outline-secondary {
    color: #5a6e8a !important;
    border-color: #c0d0e8 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
}
.btn-outline-secondary:hover {
    background-color: #dce8f7 !important;
    color: #1a2e5a !important;
    border-color: #2b4d9b !important;
}

/* All buttons */
.btn {
    font-family: 'DM Sans', sans-serif !important;
    border-radius: 2px !important;
}


/* ══════════════════════════════════════════════════
   11. LINKS
   ══════════════════════════════════════════════════ */
a {
    color: #2b4d9b;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: #e8621a;
}

/* Landing page list links */
.landing-links .landing-link {
    color: #1a2e5a !important;
    font-family: 'DM Sans', sans-serif !important;
}
.landing-links .landing-link:hover {
    color: #e8621a !important;
    background-color: #eef3fb !important;
}

/* Chevron arrows in landing links */
.landing-links .landing-link i.fa-angle-right {
    color: #c0d0e8 !important;
    transition: color 0.2s !important;
}
.landing-links .landing-link:hover i.fa-angle-right {
    color: #e8621a !important;
}


/* ══════════════════════════════════════════════════
   12. BADGES / ALERTS / FORM INPUTS
   ══════════════════════════════════════════════════ */

/* Warning / admin badge pills */
.badge.bg-warning,
.badge[class*="warning"] {
    background-color: #f0a030 !important;
    color: #0f1e3d !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.06em !important;
    border-radius: 3px !important;
}

/* Info alert (notification banner) */
.alert-info {
    background-color: #eef3fb !important;
    border-color: #c0d0e8 !important;
    color: #1a2e5a !important;
}

/* Warning alert */
.alert-warning {
    background-color: #fff8ee !important;
    border-color: #f0a030 !important;
    color: #1a2e5a !important;
}

/* Form inputs */
.form-control,
.form-select {
    border-color: #c0d0e8 !important;
    border-radius: 2px !important;
    color: #1a2e5a !important;
    font-family: 'DM Sans', sans-serif !important;
}
.form-control:focus,
.form-select:focus {
    border-color: #2b4d9b !important;
    box-shadow: 0 0 0 3px rgba(43,77,155,0.12) !important;
}


/* ══════════════════════════════════════════════════
   13. SCROLLBAR
   ══════════════════════════════════════════════════ */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: #eef3fb; }
::-webkit-scrollbar-thumb  { background: #c0d0e8; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #5a6e8a; }


/* ══════════════════════════════════════════════════
   14. FA DUOTONE — global fallback
   For any duotone icons outside the sidenav/chips.
   Specific contexts above take precedence.
   ══════════════════════════════════════════════════ */
.fad,
.fa-duotone {
    --fa-primary-color:   #2b4d9b;
    --fa-secondary-color: #e8621a;
    --fa-secondary-opacity: 0.5;
}


/* ══════════════════════════════════════════════════
   15. RESPONSIVE FIXES (mobile)
   ══════════════════════════════════════════════════ */

/* Confirm dialog (admin.confirm → #modal-confirm) footer buttons.
   The base rule (admin.scss ~3547, compiled into admin.css) sets the footer
   and its .btn to display:block below 576px, which leaves the buttons
   shrink-wrapped, left-aligned and cramped (e.g. the Enable Multi-Channel
   Sales dialog). Make them clean full-width stacked buttons with spacing,
   primary action on top. Affects every confirm dialog on phones.
   Eventual home: correct the rule in admin.scss and recompile, then drop this. */
@media (max-width: 575.98px) {
    #modal-confirm .modal-footer {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    #modal-confirm .modal-footer .btn {
        display: block;
        width: 100%;
        margin: 0;
    }
}

/* Phone: hide the inventory quick-search in the top bar. On narrow screens it
   competes with / overlaps the business name, and the business name is the only
   indicator of which client's admin you're in — so keep the name, drop the
   search. Hides the search input, its inline icon, and the mobile search
   toggle, then lets the name use the reclaimed width (still truncates, so it
   never overlaps the right-side icons).
   Scope = phones (<576px); bump to 767.98px to also cover small tablets. */
@media (max-width: 575.98px) {
    #topnav-autocomplete-input,
    #topnav-search .input-group-text,
    #topnav-utils > li.d-sm-none {
        display: none !important;
    }
    #topnav-search #topnav-brand {
        flex-basis: auto !important;
        max-width: calc(100vw - 160px) !important;
    }
}