/* ============================================================
   Dashboard Refresh — bolder modern layer
   Loaded AFTER sitecss.css (admin dashboard only). Reversible:
   remove the <link> in _layout_css.cshtml to fully revert.
   ============================================================ */

:root {
    --dr-gold: #d4af37;
    --dr-gold-lite: #e9c874;
    --dr-gold-deep: #b8860b;
    --dr-navy: #0f2a4a;
    --dr-navy-2: #163a63;
    --dr-radius: 16px;
    --dr-shadow: 0 4px 12px rgba(16, 24, 40, .05), 0 12px 28px rgba(16, 24, 40, .07);
    --dr-shadow-lg: 0 12px 24px rgba(16, 24, 40, .10), 0 26px 52px rgba(16, 24, 40, .14);
    --dr-grad-gold: linear-gradient(135deg, #e9c874 0%, #d4af37 48%, #b8860b 100%);
    --dr-grad-navy: linear-gradient(135deg, #1f4e79 0%, #0f2a4a 100%);
}

/* ---- App canvas -------------------------------------------------- */
.main-content {
    background: linear-gradient(180deg, #eef1f7 0%, #e8ecf4 100%);
}

/* ---- Cards ------------------------------------------------------- */
.card {
    border: 1px solid rgba(16, 24, 40, .06);
    border-radius: var(--dr-radius) !important;
    box-shadow: var(--dr-shadow);
    transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}

.card .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(16, 24, 40, .06);
}

.card .card-header .card-title {
    font-weight: 700;
    letter-spacing: -.2px;
}

/* Stat / KPI cards: bold gradient accent + lift + icon glow */
.card-animate {
    position: relative;
    overflow: hidden;
}

.card-animate::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--dr-grad-gold);
}

.card-animate:hover {
    transform: translateY(-5px);
    box-shadow: var(--dr-shadow-lg);
}

.card-animate .avatar-title {
    box-shadow: 0 10px 20px rgba(15, 42, 74, .18);
}

.card-animate .fs-22 {
    letter-spacing: -.5px;
    font-size: 1.2rem !important; /* was 22px — dialled down a touch */
}

/* Slightly smaller card section titles across the dashboard. */
.card-header .card-title,
.card-body > .card-title {
    font-size: .95rem;
}

/* ---- Icon chips -------------------------------------------------- */
.avatar-title.rounded-circle {
    box-shadow: 0 8px 18px rgba(15, 42, 74, .14);
}

/* ---- Sidebar ----------------------------------------------------- */
/* Light sidebar: soft off-white menu, slate text, gold hover/active accents.
   The compact logo header stays navy so the branded (light-coloured) logo remains legible. */
.app-menu.navbar-menu {
    background: linear-gradient(180deg, #ffffff 0%, #eef2f9 100%) !important;
    box-shadow: 1px 0 0 rgba(16, 24, 40, .06), 6px 0 24px rgba(16, 24, 40, .05);
    border-right: 0;
}

.app-menu.navbar-menu .navbar-brand-box {
    background: linear-gradient(135deg, #163a63 0%, #0f2a4a 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.navbar-menu .navbar-nav .nav-link {
    color: #4a5568 !important;
    border-radius: 10px;
    margin: 2px 12px;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

.navbar-menu .navbar-nav .nav-link i {
    color: #8a94a6 !important;
}

.navbar-menu .navbar-nav .nav-link:hover {
    background: rgba(212, 175, 55, .14);
    color: var(--dr-navy) !important;
}

.navbar-menu .navbar-nav .nav-link:hover i {
    color: var(--dr-gold-deep) !important;
}

.navbar-menu .navbar-nav .nav-link.active {
    background: rgba(212, 175, 55, .18);
    color: var(--dr-navy) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--dr-gold);
}

[dir="rtl"] .navbar-menu .navbar-nav .nav-link.active {
    box-shadow: inset -3px 0 0 var(--dr-gold);
}

.navbar-menu .navbar-nav .nav-link.active i {
    color: var(--dr-gold-deep) !important;
}

.navbar-menu .menu-title {
    color: rgba(15, 42, 74, .5) !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 600;
}

.navbar-menu .navbar-nav .menu-dropdown .nav-link:hover {
    background: rgba(212, 175, 55, .1);
}

/* ---- Topbar ------------------------------------------------------ */
#page-topbar {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .05), 0 10px 26px rgba(16, 24, 40, .05);
}

/* ---- Footer ------------------------------------------------------ */
/* Navy brand bar with a gold top accent. The footer markup uses light text, so a dark
   background is required (the light-theme default rendered that text nearly invisible). */
.main-content .footer {
    background: linear-gradient(90deg, #12233f 0%, #0c1526 100%) !important;
    border-top: 2px solid var(--dr-gold) !important;
    color: rgba(255, 255, 255, .55) !important;
}

.main-content .footer a {
    color: var(--dr-gold-lite);
}

/* ---- Buttons ----------------------------------------------------- */
.btn {
    border-radius: 9px;
    font-weight: 500;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Brand CTA = gold gradient. Covers admin + the standalone login/register pages
   (which load this file via _layout_css). :not(.btn-icon) keeps the coloured social
   icon buttons intact. The public storefront does NOT load this file, so its green
   WhatsApp button stays green. */
/* !important is required to beat sitecss.css's `.btn-success { background:#0ab39c !important }`. */
.btn-primary:not(.btn-icon),
.btn-success:not(.btn-icon) {
    background: var(--dr-grad-gold) !important;
    border: none !important;
    color: #3a2c00 !important;
    box-shadow: 0 6px 16px rgba(212, 175, 55, .35);
}

.btn-primary:not(.btn-icon):hover,
.btn-primary:not(.btn-icon):focus,
.btn-success:not(.btn-icon):hover,
.btn-success:not(.btn-icon):focus {
    color: #3a2c00 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(212, 175, 55, .48);
    filter: brightness(1.05);
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--dr-gold-deep) !important;
    border-color: var(--dr-gold) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
    background: var(--dr-gold) !important;
    border-color: var(--dr-gold) !important;
    color: #3a2c00 !important;
}

/* Premium gold button (opt-in via .btn-gold) */
.btn-gold {
    background: var(--dr-grad-gold);
    border: none;
    color: #3a2c00;
    box-shadow: 0 6px 16px rgba(212, 175, 55, .35);
}

.btn-gold:hover {
    color: #3a2c00;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(212, 175, 55, .48);
}

/* ---- Badges ------------------------------------------------------ */
.badge {
    border-radius: 7px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: .38em .62em;
}

.badge-gold {
    background: var(--dr-grad-gold);
    color: #3a2c00;
}

/* ---- Tables ------------------------------------------------------ */
.table > :not(caption) > * > * {
    padding: .85rem .9rem;
}

.table thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .6px;
    color: #6b7280;
    background: #f6f8fc;
    border-bottom: 1px solid #eceff4;
    font-weight: 700;
}

.table tbody tr {
    transition: background .18s ease;
}

.table tbody tr:hover {
    background: rgba(212, 175, 55, .06);
}

/* ---- Forms ------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: 10px;
    border-color: #e2e7f0;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dr-gold);
    box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .18);
}

/* ---- Dropdowns --------------------------------------------------- */
.dropdown-menu {
    border-radius: 12px;
    border: 1px solid rgba(16, 24, 40, .06);
    box-shadow: var(--dr-shadow);
    padding: .4rem;
}

.dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: .5rem .75rem;
    transition: background .18s ease;
}

/* ---- Page title -------------------------------------------------- */
.page-title-box h4 {
    font-weight: 700;
    letter-spacing: -.2px;
}

/* ---- Modals ------------------------------------------------------ */
.modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: var(--dr-shadow-lg);
}

/* ---- Scrollbar --------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 42, 74, .22);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 42, 74, .38);
}

/* ---- Soft entrance for the page --------------------------------- */
.page-content > .container-fluid > .row {
    animation: drFadeUp .5s cubic-bezier(.23, 1, .32, 1) both;
}

@keyframes drFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Fix: avatar icon rendered as a stretched oval ----------------
   Several stat cards put both the size class and .avatar-title on the SAME
   element (e.g. <span class="avatar-sm avatar-title rounded-circle">). Velzon's
   .avatar-title sets width:100%, which then stretches the icon into a full-width
   oval. The compound selectors below (more specific) restore a fixed circle.
   Only matches when both classes are on one element, so normal
   <div class="avatar-sm"><span class="avatar-title"> markup is unaffected. */
.avatar-xs.avatar-title { width: 2rem; height: 2rem; }
.avatar-sm.avatar-title { width: 3rem; height: 3rem; }
.avatar-md.avatar-title { width: 4.5rem; height: 4.5rem; }
.avatar-lg.avatar-title { width: 6rem; height: 6rem; }
.avatar-xs.avatar-title, .avatar-sm.avatar-title,
.avatar-md.avatar-title, .avatar-lg.avatar-title {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

/* ============================================================
   Fancy DataTable / list row-action buttons
   Upgrades the small "view / pencil / toggle / delete" action controls in every
   admin table into cohesive rounded, soft-tinted icon chips that fill + lift on
   hover. Works for BOTH markup patterns without touching any view:
     A) DataTables inline icons:  <ul.list-inline> <li.list-inline-item> <a.text-*><i></a>
     B) server-rendered buttons:  <td> <a|button.btn.btn-sm.btn-*><i></btn>
   Scoped to table cells so nothing else (breadcrumbs, footers, toolbars) is touched.
   ============================================================ */

/* shared chip shape */
td .list-inline .list-inline-item > a,
td .d-flex > .btn.btn-sm,
td .hstack > .btn.btn-sm,
td > .d-flex .btn.btn-sm {
    --dt-act: 34px;
    width: var(--dt-act);
    height: var(--dt-act);
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, background-color .2s ease, color .2s ease, filter .2s ease;
    vertical-align: middle;
}
td .list-inline .list-inline-item > a i,
td .d-flex > .btn.btn-sm i,
td .hstack > .btn.btn-sm i,
td > .d-flex .btn.btn-sm i {
    font-size: 15px !important;
    line-height: 1;
    margin: 0 !important;
}
td .list-inline { margin-bottom: 0; }
td .list-inline .list-inline-item { margin: 0 2px; padding: 0; }

/* lift + shadow on hover (shared) */
td .list-inline .list-inline-item > a:hover,
td .d-flex > .btn.btn-sm:hover,
td .hstack > .btn.btn-sm:hover,
td > .d-flex .btn.btn-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(16, 24, 40, .18) !important;
    filter: none;
}

/* ---- Pattern A: colour by the icon's text-* class ---- */
td .list-inline .list-inline-item > a.text-primary   { background: rgba(212,175,55,.14);  color: var(--dr-gold-deep) !important; }
td .list-inline .list-inline-item > a.text-primary:hover   { background: var(--dr-grad-gold); color: #3a2c00 !important; }
td .list-inline .list-inline-item > a.text-info      { background: rgba(41,156,219,.14);  color: #299cdb !important; }
td .list-inline .list-inline-item > a.text-info:hover      { background: #299cdb; color: #fff !important; }
td .list-inline .list-inline-item > a.text-success   { background: rgba(10,179,156,.14);  color: #0ab39c !important; }
td .list-inline .list-inline-item > a.text-success:hover   { background: #0ab39c; color: #fff !important; }
td .list-inline .list-inline-item > a.text-warning   { background: rgba(247,184,75,.18);  color: #e09c2a !important; }
td .list-inline .list-inline-item > a.text-warning:hover   { background: #f7b84b; color: #fff !important; }
td .list-inline .list-inline-item > a.text-danger    { background: rgba(240,101,72,.14);  color: #f06548 !important; }
td .list-inline .list-inline-item > a.text-danger:hover    { background: #f06548; color: #fff !important; }
td .list-inline .list-inline-item > a.text-secondary { background: rgba(135,138,153,.16); color: #878a99 !important; }
td .list-inline .list-inline-item > a.text-secondary:hover { background: #878a99; color: #fff !important; }

/* ---- Pattern B: soften the solid btn-sm action buttons into the same chips ---- */
td .btn.btn-sm.btn-info,   td .btn.btn-sm.btn-soft-info    { background: rgba(41,156,219,.14)  !important; color: #299cdb !important; }
td .btn.btn-sm.btn-info:hover                              { background: #299cdb !important; color: #fff !important; }
td .btn.btn-sm.btn-primary,td .btn.btn-sm.btn-soft-primary { background: rgba(212,175,55,.16)  !important; color: var(--dr-gold-deep) !important; }
td .btn.btn-sm.btn-primary:hover                           { background: var(--dr-grad-gold) !important; color: #3a2c00 !important; }
td .btn.btn-sm.btn-success, td .btn.btn-sm.btn-soft-success{ background: rgba(10,179,156,.14)  !important; color: #0ab39c !important; }
td .btn.btn-sm.btn-success:hover                           { background: #0ab39c !important; color: #fff !important; }
td .btn.btn-sm.btn-warning, td .btn.btn-sm.btn-soft-warning{ background: rgba(247,184,75,.18)  !important; color: #e09c2a !important; }
td .btn.btn-sm.btn-warning:hover                           { background: #f7b84b !important; color: #fff !important; }
td .btn.btn-sm.btn-danger,  td .btn.btn-sm.btn-soft-danger { background: rgba(240,101,72,.14)  !important; color: #f06548 !important; }
td .btn.btn-sm.btn-danger:hover                            { background: #f06548 !important; color: #fff !important; }
td .btn.btn-sm.btn-secondary,td .btn.btn-sm.btn-soft-secondary { background: rgba(135,138,153,.16) !important; color: #878a99 !important; }
td .btn.btn-sm.btn-secondary:hover                        { background: #878a99 !important; color: #fff !important; }

/* ============================================================
   Look & feel polish — cohesive refinements over the base layer.
   ============================================================ */

/* ---- Table thumbnails: soft-rounded with a hairline ring -------- */
.product-img,
.table td img:not(.rounded-circle):not([class*="avatar"]):not([class*="logo"]) {
    border-radius: 10px;
    object-fit: cover;
    background: #f4f6fb;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
    border: 1px solid rgba(16, 24, 40, .05);
}

/* ---- Card headers: consistent, quiet divider, navy title -------- */
.card > .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(16, 24, 40, .06);
}
.card-header .card-title,
.card-header > h4,
.card-header > h5 {
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--dr-navy);
    margin-bottom: 0;
}

/* ---- Soft secondary buttons (filter "Clear All", etc.) → neutral slate */
.btn-soft-secondary:not(.btn-icon) {
    background: #eef1f6 !important;
    color: #51607a !important;
    border: none !important;
}
.btn-soft-secondary:not(.btn-icon):hover {
    background: #e3e8f0 !important;
    color: var(--dr-navy) !important;
}

/* ---- Tabs & pills → gold active -------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--dr-grad-gold) !important;
    color: #3a2c00 !important;
    box-shadow: 0 6px 14px rgba(212, 175, 55, .30);
}
.nav-tabs .nav-link.active,
.nav-tabs-custom .nav-link.active {
    color: var(--dr-navy) !important;
    border-bottom-color: var(--dr-gold) !important;
}
.nav-tabs-custom .nav-item .nav-link::after { background: var(--dr-gold) !important; }

/* ---- Pagination → gold current page (Bootstrap + DataTables) ---- */
.pagination .page-link { color: var(--dr-navy); border-radius: 8px; margin: 0 2px; border-color: #e6e9f0; }
.pagination .page-link:hover { background: rgba(212, 175, 55, .12); color: var(--dr-navy); }
.pagination .page-item.active .page-link,
.dataTables_paginate .paginate_button.current {
    background: var(--dr-grad-gold) !important;
    border-color: transparent !important;
    color: #3a2c00 !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, .30);
}
.dataTables_paginate .paginate_button:hover { background: rgba(212, 175, 55, .14) !important; color: var(--dr-navy) !important; border-color: transparent !important; }

/* ---- Checks & switches → gold when on -------------------------- */
.form-check-input:checked {
    background-color: var(--dr-gold);
    border-color: var(--dr-gold);
}
.form-check-input:focus {
    border-color: var(--dr-gold-lite);
    box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .18);
}

/* ---- Breadcrumbs → gold separator, navy current ---------------- */
.breadcrumb-item + .breadcrumb-item::before { color: var(--dr-gold); font-weight: 700; }
.page-title-box .breadcrumb-item a { color: #6b7280; }
.page-title-box .breadcrumb-item.active { color: var(--dr-navy); font-weight: 600; }

/* ---- Inputs: group add-ons + rounded selects ------------------- */
.input-group-text { border-radius: 10px; background: #f6f8fc; border-color: #e2e7f0; color: #51607a; }
.dataTables_filter input, .dataTables_length select { border-radius: 9px !important; }

/* ---- Alerts, list groups, offcanvas: softer corners ------------ */
.alert { border: none; border-radius: 12px; }
.list-group-item.active { background: var(--dr-grad-gold); border-color: transparent; color: #3a2c00; }
.offcanvas { border: none; box-shadow: var(--dr-shadow-lg); }

/* ---- Nav submenu links: quiet, gold on hover/active ------------ */
.navbar-menu .navbar-nav .menu-dropdown .nav-link {
    color: #6b7688 !important;
    font-size: .84rem;
}
.navbar-menu .navbar-nav .menu-dropdown .nav-link.active {
    color: var(--dr-gold-deep) !important;
    background: rgba(212, 175, 55, .12);
}

/* ============================================================
   Look & feel polish — round 3: dialogs, charts, empty states.
   ============================================================ */

/* ---- Bootstrap modals ------------------------------------------ */
.modal-header {
    border-bottom: 1px solid rgba(16, 24, 40, .06);
    padding: 1.1rem 1.4rem;
}
.modal-title { color: var(--dr-navy); font-weight: 700; letter-spacing: -.2px; }
.modal-footer { border-top: 1px solid rgba(16, 24, 40, .06); padding: 1rem 1.4rem; }
.modal-body { padding: 1.25rem 1.4rem; }
.modal-backdrop.show { opacity: .5; }

/* ---- SweetAlert2 dialogs → on-brand ----------------------------
   Shape/typography use !important so they always apply. The confirm-button
   BACKGROUND is deliberately NOT !important so a per-dialog confirmButtonColor
   (e.g. red '#d33' on delete confirmations) still wins via its inline style. */
.swal2-popup {
    border-radius: 18px !important;
    box-shadow: var(--dr-shadow-lg) !important;
    padding: 1.75rem !important;
}
.swal2-title { color: var(--dr-navy) !important; font-weight: 700 !important; font-size: 1.35rem !important; }
.swal2-html-container { color: #5b6578 !important; }
.swal2-actions { gap: .5rem; }
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    border-radius: 9px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: transform .18s ease, filter .18s ease;
}
.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-cancel:hover { transform: translateY(-1px); filter: brightness(1.03); }
/* Default confirm = solid gold COLOUR (not a gradient image, which would paint over the
   per-dialog inline background-color). A delete's inline confirmButtonColor:'#d33' still wins. */
button.swal2-styled.swal2-confirm { background-color: #d4af37; background-image: none; color: #3a2c00; }
.swal2-styled.swal2-cancel { background: #eef1f6 !important; color: #51607a !important; }
.swal2-icon.swal2-warning { border-color: var(--dr-gold) !important; color: var(--dr-gold-deep) !important; }
.swal2-icon.swal2-question { border-color: var(--dr-navy) !important; color: var(--dr-navy) !important; }
.swal2-timer-progress-bar { background: var(--dr-gold) !important; }

/* Toast-style SweetAlerts */
.swal2-toast { border-radius: 12px !important; box-shadow: var(--dr-shadow) !important; }

/* ---- ApexCharts: refined tooltip, grid, legend, toolbar -------- */
.apexcharts-tooltip.apexcharts-theme-light {
    border-radius: 10px !important;
    box-shadow: var(--dr-shadow) !important;
    border: 1px solid rgba(16, 24, 40, .08) !important;
}
.apexcharts-tooltip-title {
    background: #f6f8fc !important;
    border-bottom: 1px solid #eceff4 !important;
    font-weight: 700 !important;
    color: var(--dr-navy) !important;
}
.apexcharts-gridline { stroke: rgba(16, 24, 40, .045); }
.apexcharts-legend-text { color: #6b7280 !important; font-weight: 500; }
.apexcharts-menu {
    border-radius: 10px !important;
    box-shadow: var(--dr-shadow) !important;
    border: 1px solid rgba(16, 24, 40, .06) !important;
    padding: .3rem !important;
}
.apexcharts-menu-item { border-radius: 6px !important; }
.apexcharts-xaxis-label, .apexcharts-yaxis-label { fill: #8a94a6; }

/* ---- Empty states → warm, on-brand ----------------------------- */
.no-data-placeholder i,
.table-empty-state i {
    color: var(--dr-gold-lite) !important;
    opacity: .85;
}
.no-data-placeholder h5,
.table-empty-state h5 {
    color: var(--dr-navy) !important;
    font-weight: 600;
}
.no-data-placeholder {
    border: 1px dashed rgba(16, 24, 40, .1);
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f7fb 100%);
}

/* ---- Auth pages (login / register / …) ------------------------- */
/* Retint the page canvas from the off-brand lavender to a clean light slate that
   harmonises with the navy hero + gold accents. (Overrides sitecss.css.) */
.auth-page-wrapper {
    background: linear-gradient(160deg, #f6f8fc 0%, #edf1f8 55%, #f4eede 100%) !important;
}
.auth-card {
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(15, 42, 74, .16) !important;
    border: 1px solid rgba(255, 255, 255, .6);
}
/* Auth headings → navy; "forgot password" / links → gold-deep. */
.auth-page-wrapper h5,
.auth-page-wrapper .auth-title { color: var(--dr-navy) !important; }
.auth-page-wrapper a:not(.btn):not([class*="social"]) { color: var(--dr-gold-deep); }
.auth-page-wrapper a:not(.btn):not([class*="social"]):hover { color: var(--dr-gold-deep); text-decoration: underline; }

/* ============================================================
   Fixes round 4 — button sizing, solid-card contrast, table font.
   ============================================================ */

/* Slightly smaller buttons across the system (default + large; icon/sm chips untouched). */
.btn:not(.btn-icon):not(.btn-sm) { padding: .42rem .8rem; font-size: .8rem; }
.btn-lg { padding: .55rem 1.05rem; font-size: .88rem; }

/* Solid-colour stat cards must keep light text (e.g. Reports "Active Customers" navy card). */
.card.bg-primary, .card.bg-primary h1, .card.bg-primary h2, .card.bg-primary h3,
.card.bg-primary h4, .card.bg-primary h5, .card.bg-primary h6, .card.bg-primary p,
.card.bg-primary span:not(.badge), .card.bg-primary a, .card.bg-primary .text-white { color: #fff !important; }
.card.bg-primary .text-white-50, .card.bg-primary .text-uppercase { color: rgba(255, 255, 255, .72) !important; }
.card.bg-primary .avatar-title { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }

/* Table content a touch smaller. */
.table > :not(caption) > * > * { font-size: .84rem; }
.table h5.fs-16, .table .fs-16 { font-size: .95rem !important; }