/* ==========================================================================
   BRAND THEME - Sunamganj District Tax Bar Association
   Single source of truth for the brand palette, derived from the logo.

   Palette anchor: --brand-primary: #00369F
   Accent taken from the red detail in the logo mark.
   Load this file LAST so it wins over the vendor/theme stylesheets.
   ========================================================================== */

:root {
    /* --- Brand blue ramp (anchored on #00369F) --- */
    --brand-primary: #00369F;
    --brand-primary-hover: #002E87;
    --brand-primary-active: #00266F;
    --brand-primary-light: #335DB2;
    --brand-primary-lighter: #668CCC;
    --brand-primary-soft: #E1E9F4;
    --brand-primary-soft-2: #D2DEF2;
    --brand-primary-border: #B3C7E5;

    /* --- Accent (red detail in the logo) --- */
    --brand-accent: #D40000;
    --brand-accent-hover: #A80000;
    --brand-accent-soft: #FCE8E8;

    /* --- Neutrals --- */
    --brand-ink: #0F1B33;
    --brand-body: #46536B;
    --brand-muted: #8A94A6;
    --brand-line: #E4E8EF;
    --brand-surface: #F6F8FC;
    --brand-white: #FFFFFF;

    /* --- Feedback (kept distinct from brand so states stay readable) --- */
    --brand-success: #1B7F4B;
    --brand-warning: #B26A00;
    --brand-danger: #C62828;
    --brand-info: #00369F;
}

/* ==========================================================================
   ADMIN PANEL THEME OVERRIDES
   assets/admin/stylesheets/theme.css exposes its palette through :root vars.
   Re-point the brand-bearing tokens at our palette. The theme also hardcodes
   #346cb0 in ~150 rules, so the nav states below are pinned explicitly.
   ========================================================================== */

:root {
    --primary: var(--brand-primary);
    --info: var(--brand-info);
    --blue: var(--brand-primary);
    --indigo: var(--brand-primary-light);
    --cyan: var(--brand-primary-lighter);
    /* Semantic tokens kept off the brand hue so states stay self-evident. */
    --success: var(--brand-success);
    --warning: var(--brand-warning);
    --danger: var(--brand-danger);
    --secondary: var(--brand-surface);
    --light: var(--brand-surface);
    --gray: var(--brand-muted);
    --gray-dark: var(--brand-ink);
    --dark: var(--brand-ink);
}

/* Legacy template aliases consumed via var() in assets/web/css/*. */
:root {
    --theme-color: var(--brand-primary);
    --theme-secondary-color: var(--brand-primary-light);
    --theme-caption-color: var(--brand-primary-light);
    --theme-header: var(--brand-primary-active);
    --theme-nav: var(--brand-primary-active);
    --theme-alt-color: var(--brand-ink);
    --logo-color: var(--brand-primary);
    --link-color: var(--brand-primary);
    --link-alt-color: var(--brand-primary);
    --link-hover-color: var(--brand-primary-hover);
    --icon-color: var(--brand-primary);
    --nav-menu-color: var(--brand-white);
    --ash-color: var(--brand-primary-soft);
}

/* Admin chrome */
.app-header,
.app-header-dark {
    background-color: var(--brand-primary);
    color: rgba(255, 255, 255, 0.85);
}

.app-header-dark .btn-account,
.app-header .btn-account {
    color: var(--brand-white);
}

.app-header-dark .btn-account:hover,
.app-header-dark .btn-account:focus,
.app-header-dark .btn-account.show,
.app-header-dark .btn-account:active,
.app-header-dark .top-bar-brand {
    background-color: var(--brand-primary-hover);
    color: var(--brand-white);
}

/* Sidebar sits on a brand tint rather than neutral grey. */
.app-aside-light,
.app-aside {
    background-color: var(--brand-surface);
    border-right-color: var(--brand-primary-border);
}

.aside-header,
.sidebar-header {
    background-color: var(--brand-primary);
    border-bottom: 1px solid var(--brand-primary-active);
}

.aside-header .btn-account {
    color: var(--brand-white);
}

.aside-header .btn-account:hover,
.aside-header .btn-account:focus,
.aside-header .btn-account.show,
.aside-header .btn-account:active {
    background-color: var(--brand-primary-hover);
    color: var(--brand-white);
}

/* Active nav item - the theme hardcodes its old primary here. */
.app-aside .nav-link.active,
.app-aside .active > .nav-link,
.app-aside .nav-link:hover,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-color: var(--brand-primary-soft);
}

.app-aside .nav-link.active:hover {
    background-color: var(--brand-primary-soft-2);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand-primary);
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
    color: var(--brand-primary);
}

/* ==========================================================================
   BOOTSTRAP-CLASS REMAP
   The templates lean on Bootstrap utility + component classes. Repoint the
   brand-ish ones so pages pick up the new palette without markup changes.
   ========================================================================== */

.text-primary {
    color: var(--brand-primary) !important;
}
.bg-primary {
    background-color: var(--brand-primary) !important;
}
.border-primary {
    border-color: var(--brand-primary) !important;
}
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

a {
    color: var(--brand-primary);
}
a:hover,
a:focus {
    color: var(--brand-primary-hover);
}

/* ==========================================================================
   SHARED COMPONENTS
   Tables, pagination, badges and form focus across every panel.
   ========================================================================== */

.table thead th,
.table th {
    color: var(--brand-ink);
    border-bottom: 2px solid var(--brand-primary-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--brand-surface);
}

.page-link {
    color: var(--brand-primary);
    border-color: var(--brand-primary-border);
}

.page-link:hover {
    color: var(--brand-primary-hover);
    background-color: var(--brand-primary-soft);
    border-color: var(--brand-primary-lighter);
}

.page-item.active .page-link {
    color: var(--brand-white);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.badge-primary,
.badge.bg-primary {
    background-color: var(--brand-primary);
    color: var(--brand-white);
}

.card {
    border-color: var(--brand-line);
}

.modal-header,
.modal-footer {
    border-color: var(--brand-line);
}

.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--brand-primary-lighter);
}

/* ==========================================================================
   STATUS COLOURS
   Kept off the brand hue so success / danger still read as themselves.
   ========================================================================== */

.text-success {
    color: var(--brand-success) !important;
}
.bg-success {
    background-color: var(--brand-success) !important;
}
.text-warning {
    color: var(--brand-warning) !important;
}
.text-danger,
.text-red {
    color: var(--brand-danger) !important;
}
.bg-danger {
    background-color: var(--brand-danger) !important;
}
.text-info {
    color: var(--brand-info) !important;
}

/* ==========================================================================
   ACCESSIBILITY
   Primary blue is dark enough to sit behind white body copy at ~9.4:1.
   ========================================================================== */

.btn-primary,
.btn-primary:focus {
    color: #FFFFFF;
}

/* ==========================================================================
   FOCUS RING
   Keyboard focus stays visible against both light and dark surfaces.
   ========================================================================== */

.btn:focus,
.btn-primary:focus,
.form-control:focus,
a:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 54, 159, 0.35);
    outline: none;
}

/* ==========================================================================
   PRINT
   Keep printed notices/payslips legible by forcing brand colours back to ink.
   ========================================================================== */

@media print {
    .btn-primary,
    .text-primary {
        color: #000000 !important;
        background: transparent !important;
    }
}