/* ==========================================================================
   TaxOz brand theme  —  DOTS / TaxOz Super Portal
   --------------------------------------------------------------------------
   Visual-only layer applied on top of the Admiro template. Loaded LAST in
   backend/layouts/main.blade.php and auth/layouts/login.blade.php so it wins
   on equal specificity without editing any vendor file — template updates
   stay easy to apply.

   Brand source of truth: .claude/skills/taxoz-brand-formatter/references/brand-guide.md
   Discipline: navy + white + yellow do the work. Charcoal / cream / gray are
   supporting neutrals. No teal, orange, bright green or blue. The one red is
   desaturated and reserved for destructive + error states.
   ========================================================================== */

/* ---------- 1. Brand tokens ------------------------------------------------
   The template declares its palette on :root in assets/css/style.css
   (--theme-default was teal #308e87, --theme-secondary orange #f39159).
   Redeclaring the same custom properties here re-colours every component that
   references them, instead of hand-patching components one by one.          */

:root {
    /* TaxOz palette */
    --taxoz-navy:          #0B1D2D;
    --taxoz-navy-light:    #16304A;
    --taxoz-navy-lighter:  #1F3D5C;
    --taxoz-yellow:        #FFD400;
    --taxoz-yellow-dim:    #E6BF00;
    --taxoz-cream:         #FFF7CC;
    --taxoz-gray:          #E6E7EA;
    --taxoz-charcoal:      #222428;
    --taxoz-white:         #FFFFFF;
    --taxoz-on-navy:       #F5F7FA;
    --taxoz-on-navy-muted: #B9C4CF;
    --taxoz-danger:        #B3261E;   /* desaturated; destructive/error only */
    --taxoz-danger-soft:   #F7E4E2;

    --taxoz-font-heading: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
    --taxoz-font-body:    "Inter", Arial, Helvetica, sans-serif;

    /* --- remap the template's own tokens --- */
    --theme-default:          #0B1D2D;
    --primary-color:          #0B1D2D;
    --dropdown-toggle:        #0B1D2D;
    --theme-secondary:        #FFD400;
    --secondary-color:        #FFD400;
    --success-color:          #0B1D2D;
    --info-color:             #0B1D2D;
    --warning-color:          #E6BF00;
    --danger-color:           #B3261E;
    --body-font-color:        #222428;
    --theme-body-font-color:  #222428;
    --dark:                   #0B1D2D;
    --light-border:           #E6E7EA;
    --active-bg-color:        #E6E7EA;
    --border-color:           #E6E7EA;
    --table-border:           #E6E7EA;
    --body-color:             #F8F8F5;
    --light-background:       #F8F8F5;
}

/* ---------- 2. Typography --------------------------------------------------
   Plus Jakarta Sans 800 for headings, Inter for everything else. Fonts are
   linked from the layouts; the Arial/Helvetica fallback is deliberate —
   never fall back to a serif.                                              */

body,
.btn, button, input, select, textarea,
.form-control, .form-select, .form-label,
table, .table, td, th,
.sidebar-link, .badge, .nav-link, p, label, span, div, a, li {
    font-family: var(--taxoz-font-body);
}

body {
    color: var(--taxoz-charcoal);
    line-height: 1.6;
    background-color: var(--body-color);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title h3, .card-header h5, .card-header h6, .modal-title {
    font-family: var(--taxoz-font-heading);
    font-weight: 800;
    color: var(--taxoz-navy);
    letter-spacing: -0.015em;
}

h1, .h1 { letter-spacing: -0.02em; }

/* Small uppercase "eyebrow" micro-labels — the one place caps are on brand. */
.taxoz-eyebrow {
    font-family: var(--taxoz-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--taxoz-navy);
}

a { color: var(--taxoz-navy); }
a:hover, a:focus { color: var(--taxoz-yellow-dim); }

/* ---------- 3. Sidebar & navigation ---------------------------------------
   Navy panel, white/muted text, yellow marks the active section.           */

.page-sidebar,
.sidebar-wrapper,
.sidebar-main,
.page-sidebar .sidebar-main {
    background: linear-gradient(180deg, var(--taxoz-navy) 0%, var(--taxoz-navy-light) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.page-sidebar .sidebar-link,
.page-sidebar .sidebar-title,
.page-sidebar .sidebar-list a,
.sidebar-wrapper .sidebar-link {
    color: var(--taxoz-on-navy-muted);
    font-weight: 500;
}

.page-sidebar .sidebar-main-title,
.page-sidebar .submenu-title {
    color: var(--taxoz-on-navy-muted);
}

.page-sidebar .sidebar-link:hover,
.page-sidebar .sidebar-list a:hover {
    color: var(--taxoz-yellow-dim);
    background-color: rgba(255, 212, 0, 0.08);
}

/* Active section: yellow left border + yellow text, never a teal fill. */
.page-sidebar .sidebar-link.active,
.page-sidebar .menu-a.active,
.page-sidebar .sidebar-list a.active {
    color: var(--taxoz-yellow) !important;
    background-color: rgba(255, 212, 0, 0.12);
    border-left: 3px solid var(--taxoz-yellow);
    font-weight: 600;
}

.page-sidebar .sidebar-link.active svg,
.page-sidebar .sidebar-link.active i { color: var(--taxoz-yellow); }

.page-sidebar .sidebar-submenu { background-color: rgba(0, 0, 0, 0.18); }

/* The template renders nav labels inside <h6>, which the heading rule above
   would paint navy-on-navy, and it colours .sidebar-link with
   var(--body-font-color) — charcoal once remapped. Both are invisible on the
   navy panel, so the sidebar's text colours are set explicitly here. */
.page-sidebar .sidebar-link h6,
.page-sidebar .sidebar-link .h6,
.page-sidebar .sidebar-link span,
.page-sidebar .sidebar-link a,
.page-sidebar .sidebar-list h6,
.page-sidebar .sidebar-title,
.page-sidebar .sidebar-menu .sidebar-title,
.page-sidebar .sidebar-main-title h6,
.page-sidebar .sidebar-main-title span,
.page-sidebar .submenu-title {
    color: var(--taxoz-on-navy-muted) !important;
    font-family: var(--taxoz-font-body);
}

.page-sidebar .sidebar-main-title h6,
.page-sidebar .sidebar-main-title span {
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

/* Hover + active: the template hardcodes teal rgba(48,142,135,.2), so these
   need explicit overrides rather than a token remap. */
/* A translucent yellow wash over navy mixes to a muddy olive, so hover uses a
   neutral white wash and lets the text colour carry the state. */
.page-sidebar .sidebar-menu .sidebar-list:hover > .sidebar-link,
.page-sidebar .sidebar-menu .sidebar-list:hover .sidebar-link {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: var(--taxoz-yellow-dim) !important;
}
.page-sidebar .sidebar-menu .sidebar-list:hover .sidebar-link h6,
.page-sidebar .sidebar-menu .sidebar-list:hover .sidebar-link span {
    color: var(--taxoz-yellow-dim) !important;
}

/* Active section reads as a solid yellow pill with navy text. */
.page-sidebar .sidebar-menu .sidebar-list.active > .sidebar-link,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active,
.page-sidebar .sidebar-menu .sidebar-list.active .sidebar-link,
.page-sidebar .menu-a.active {
    background-color: var(--taxoz-yellow) !important;
    color: var(--taxoz-navy) !important;
    border-left: none;
    border-radius: 10px;
    font-weight: 700;
}
.page-sidebar .sidebar-menu .sidebar-list.active .sidebar-link h6,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active h6,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active span,
.page-sidebar .menu-a.active,
.page-sidebar .menu-a.active span,
.page-sidebar .menu-a.active h6 {
    color: var(--taxoz-navy) !important;
    font-weight: 700;
}

/* Icons in the sidebar follow the same states. */
.page-sidebar .sidebar-link svg,
.page-sidebar .sidebar-link i { color: var(--taxoz-on-navy-muted); }
.page-sidebar .sidebar-list.active .sidebar-link svg,
.page-sidebar .sidebar-list.active .sidebar-link i,
.page-sidebar .sidebar-link.active svg,
.page-sidebar .sidebar-link.active i { color: var(--taxoz-navy) !important; }

/* Required-field markers use the one brand red, not the template's bright one. */
.mandatory, .input-error, .invalid-feedback, .text-danger { color: var(--taxoz-danger) !important; }

/* ---------- 4. Buttons -----------------------------------------------------
   Consolidated to four roles instead of the template's per-button rainbow:
     navy   = primary action (Search, Filter, Submit, Download)
     yellow = the single most prominent CTA on a page (Create)
     gray   = neutral/secondary (Clear, Cancel)
     red    = destructive only
   The template drives Create from .btn-secondary, hence the yellow mapping. */

.btn-primary, .btn-success, .btn-info, .btn-dark {
    background-color: var(--taxoz-navy);
    border-color: var(--taxoz-navy);
    color: var(--taxoz-white);
    font-weight: 600;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-dark:hover,
.btn-primary:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus,
.btn-primary:active, .btn-success:active, .btn-info:active, .btn-dark:active {
    background-color: var(--taxoz-navy-light);
    border-color: var(--taxoz-navy-light);
    color: var(--taxoz-white);
}

.btn-secondary, .btn-warning {
    background-color: var(--taxoz-yellow);
    border-color: var(--taxoz-yellow);
    color: var(--taxoz-navy);
    font-weight: 700;
}
.btn-secondary:hover, .btn-warning:hover,
.btn-secondary:focus, .btn-warning:focus,
.btn-secondary:active, .btn-warning:active {
    background-color: var(--taxoz-yellow-dim);
    border-color: var(--taxoz-yellow-dim);
    color: var(--taxoz-navy);
}

.btn-light {
    background-color: var(--taxoz-gray);
    border-color: var(--taxoz-gray);
    color: var(--taxoz-charcoal);
}

.btn-danger {
    background-color: var(--taxoz-danger);
    border-color: var(--taxoz-danger);
    color: var(--taxoz-white);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: #8F1E17;
    border-color: #8F1E17;
    color: var(--taxoz-white);
}

/* Outline variants. Neutral actions and row-level icons stay quiet; only
   delete keeps a colour cue. */
.btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-dark {
    color: var(--taxoz-navy);
    border-color: var(--taxoz-gray);
    background-color: var(--taxoz-white);
}
.btn-outline-primary:hover, .btn-outline-success:hover,
.btn-outline-info:hover, .btn-outline-dark:hover {
    background-color: var(--taxoz-navy);
    border-color: var(--taxoz-navy);
    color: var(--taxoz-white);
}

.btn-outline-secondary, .btn-outline-light, .btn-outline-warning {
    color: var(--taxoz-charcoal);
    border-color: var(--taxoz-gray);
    background-color: var(--taxoz-white);
}
.btn-outline-secondary:hover, .btn-outline-light:hover, .btn-outline-warning:hover {
    background-color: var(--taxoz-gray);
    border-color: var(--taxoz-gray);
    color: var(--taxoz-navy);
}

.btn-outline-danger {
    color: var(--taxoz-danger);
    border-color: var(--taxoz-gray);
    background-color: var(--taxoz-white);
}
.btn-outline-danger:hover {
    background-color: var(--taxoz-danger);
    border-color: var(--taxoz-danger);
    color: var(--taxoz-white);
}

.btn:focus, .btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(255, 212, 0, 0.45);
    outline: none;
}

/* ---------- 5. Badges, pills, status tags ---------------------------------
   Default tag = gray pill, bold navy text. Bright green/teal/blue fills gone.
   "Active" keeps a distinct read via a small navy dot, not a colour fill.   */

.badge {
    font-family: var(--taxoz-font-body);
    font-weight: 600;
    color: var(--taxoz-navy);
    background-color: var(--taxoz-gray);
    border-radius: 999px;
    padding: 0.35em 0.75em;
}

.badge.bg-primary, .badge.bg-success, .badge.bg-info,
.badge.bg-secondary, .badge.bg-warning, .badge.bg-light,
.badge.badge-primary, .badge.badge-success, .badge.badge-info,
.badge.badge-secondary, .badge.badge-warning {
    background-color: var(--taxoz-gray) !important;
    color: var(--taxoz-navy) !important;
}

.badge.bg-success::before, .badge.badge-success::before {
    content: "";
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-right: 0.45em;
    border-radius: 50%;
    background-color: var(--taxoz-navy);
    vertical-align: middle;
}

.badge.bg-dark, .badge.badge-dark {
    background-color: var(--taxoz-navy) !important;
    color: var(--taxoz-white) !important;
}

/* Genuine error/destructive state keeps the one red, kept soft. */
.badge.bg-danger, .badge.badge-danger {
    background-color: var(--taxoz-danger-soft) !important;
    color: var(--taxoz-danger) !important;
}

/* ---------- 6. Tables ------------------------------------------------------ */

.table thead th,
.table > thead > tr > th,
.table-dark, .table .table-dark th {
    background-color: var(--taxoz-navy) !important;
    color: var(--taxoz-white) !important;
    font-family: var(--taxoz-font-body);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
    border-color: var(--taxoz-navy) !important;
}

.table > tbody > tr > td {
    color: var(--taxoz-charcoal);
    border-color: var(--taxoz-gray);
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #FAFBFC;
    color: var(--taxoz-charcoal);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--taxoz-cream);
    color: var(--taxoz-charcoal);
}

/* ---------- 7. Cards, panels, callouts ------------------------------------ */

.card {
    background-color: var(--taxoz-white);
    border: 1px solid var(--taxoz-gray);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11, 29, 45, 0.04);
}

.card-header {
    background-color: var(--taxoz-white);
    border-bottom: 1px solid var(--taxoz-gray);
}

.alert-info, .alert-primary, .alert-warning {
    background-color: var(--taxoz-cream);
    border: 1px solid var(--taxoz-yellow);
    color: var(--taxoz-navy);
}

.alert-danger {
    background-color: var(--taxoz-danger-soft);
    border: 1px solid var(--taxoz-danger);
    color: var(--taxoz-danger);
}

.alert-success {
    background-color: var(--taxoz-gray);
    border: 1px solid var(--taxoz-navy);
    color: var(--taxoz-navy);
}

/* ---------- 8. Forms -------------------------------------------------------
   Gray borders, yellow focus ring, navy control accents. Replaces the
   template's teal focus and teal checkbox fills.                            */

.form-control, .form-select, .input-group-text, textarea {
    border-color: var(--taxoz-gray);
    color: var(--taxoz-charcoal);
    font-family: var(--taxoz-font-body);
}

.form-control:focus, .form-select:focus, textarea:focus {
    border-color: var(--taxoz-yellow);
    box-shadow: 0 0 0 0.2rem rgba(255, 212, 0, 0.35);
}

.form-label, label {
    color: var(--taxoz-charcoal);
    font-weight: 500;
}

.form-check-input:checked {
    background-color: var(--taxoz-navy);
    border-color: var(--taxoz-navy);
}
.form-check-input:focus {
    border-color: var(--taxoz-yellow);
    box-shadow: 0 0 0 0.2rem rgba(255, 212, 0, 0.35);
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--taxoz-navy); }

/* Select2 — the template ships it with teal highlight/selection. */
.select2-container--bootstrap-5 .select2-selection { border-color: var(--taxoz-gray); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--taxoz-yellow);
    box-shadow: 0 0 0 0.2rem rgba(255, 212, 0, 0.35);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--selected,
.select2-results__option--highlighted[aria-selected] {
    background-color: var(--taxoz-navy) !important;
    color: var(--taxoz-white) !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--taxoz-gray);
    border-color: var(--taxoz-gray);
    color: var(--taxoz-navy);
}

/* ---------- 9. Dashboard stat cards ---------------------------------------
   The template gave every card its own saturated fill. One consistent card:
   white ground, navy figures, thin yellow top accent.                       */

.dashboard-card-inner {
    background-color: var(--taxoz-white) !important;
    color: var(--taxoz-navy) !important;
    border: 1px solid var(--taxoz-gray);
    border-top: 3px solid var(--taxoz-yellow);
    border-radius: 12px;
}

.dashboard-card-inner h2,
.dashboard-card-inner h4,
.dashboard-card-inner h5,
.dashboard-card-inner p,
.dashboard-card-inner span {
    color: var(--taxoz-navy) !important;
}

.dashboard-card-inner h2 {
    font-family: var(--taxoz-font-heading);
    font-weight: 800;
}

.dashboard-card-inner h4 {
    font-family: var(--taxoz-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--taxoz-charcoal) !important;
}

/* Metric worth flagging — kept desaturated, not a bright template red. */
.dashboard-card-inner.taxoz-card-flag {
    border-top-color: var(--taxoz-danger);
    background-color: var(--taxoz-danger-soft) !important;
}

.export-card-wrapper.card-selected .dashboard-card-inner {
    outline: 3px solid var(--taxoz-navy);
    outline-offset: -3px;
}

/* ---------- 9b. Logo lockup ------------------------------------------------
   The header markup emits both .light-logo and .dark-logo; the template has no
   rule to hide either, so both rendered side by side (the stray second mark).
   Show one, and cap its height so it can't crowd the sidebar heading below.  */

.logo-wrapper .dark-logo { display: none !important; }

.logo-wrapper .light-logo,
.logo-wrapper img {
    max-height: 38px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

/* Login lockup sits on white and uses the standard mark; keep it modest. */
.login-card .logo img,
.login-main .logo img { max-height: 54px; width: auto; }

/* ---------- 10. Header bar ------------------------------------------------- */

.page-header .header-wrapper { background-color: var(--taxoz-white); }
.page-header .header-wrapper .nav-right ul li a { color: var(--taxoz-navy); }

/* ---------- 11. Pagination ------------------------------------------------- */

.pagination .page-link { color: var(--taxoz-navy); border-color: var(--taxoz-gray); }
.pagination .page-item.active .page-link {
    background-color: var(--taxoz-navy);
    border-color: var(--taxoz-navy);
    color: var(--taxoz-white);
}
.pagination .page-link:hover { background-color: var(--taxoz-gray); color: var(--taxoz-navy); }

/* ---------- 12. Login page ------------------------------------------------- */

.login-card .btn-primary,
.login-main .btn-primary,
.theme-form .btn-primary {
    background-color: var(--taxoz-navy);
    border-color: var(--taxoz-navy);
    color: var(--taxoz-white);
}
.login-card .btn-primary:hover,
.login-main .btn-primary:hover,
.theme-form .btn-primary:hover {
    background-color: var(--taxoz-yellow);
    border-color: var(--taxoz-yellow);
    color: var(--taxoz-navy);
}

/* ---------- 13. Text/background utility overrides --------------------------
   Bootstrap utilities used directly in views still resolved to template
   colours; pin them to the brand so no teal/orange/green leaks through.     */

.text-primary, .text-info, .text-success { color: var(--taxoz-navy) !important; }
.text-secondary, .text-warning { color: var(--taxoz-yellow-dim) !important; }
.text-danger { color: var(--taxoz-danger) !important; }
.text-muted { color: #6B7280 !important; }

.bg-primary, .bg-info, .bg-dark { background-color: var(--taxoz-navy) !important; }
.bg-success { background-color: var(--taxoz-navy) !important; }
.bg-secondary, .bg-warning { background-color: var(--taxoz-yellow) !important; color: var(--taxoz-navy) !important; }
.bg-danger { background-color: var(--taxoz-danger) !important; }
.bg-light { background-color: var(--taxoz-gray) !important; }

.border-primary { border-color: var(--taxoz-navy) !important; }

/* ==========================================================================
   14. Bringing the UI closer to the TaxOz reference layouts
   Framing rule, brand chrome, page-title treatment, numbered row badges and
   the softer card/table rhythm from the reference screens.
   ========================================================================== */

/* ---------- Thin yellow rule across the very top edge --------------------
   A consistent framing device across TaxOz material.                       */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--taxoz-yellow);
    z-index: 10000;
}

/* ---------- Brand chrome: eyebrow under the logo, tagline at the foot ----- */
.page-header .logo-wrapper,
.logo-wrapper {
    background-color: var(--taxoz-navy) !important;
    background: var(--taxoz-navy) !important;
    flex-wrap: wrap;
    row-gap: 2px;
}

.taxoz-portal-eyebrow {
    display: block;
    width: 100%;
    font-family: var(--taxoz-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--taxoz-on-navy-muted);
    padding-left: 2px;
}
.taxoz-portal-eyebrow::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 7px;
    border: 2px solid var(--taxoz-yellow);
    border-radius: 50%;
    vertical-align: middle;
}

.taxoz-sidebar-tagline {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 14px 18px;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--taxoz-on-navy-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
}
.taxoz-sidebar-tagline::before {
    content: "";
    display: inline-block;
    width: 9px; height: 9px;
    margin-right: 8px;
    border: 2px solid var(--taxoz-yellow);
    border-radius: 50%;
    vertical-align: middle;
}

/* ---------- Page title: navy heading with a short yellow underline ------- */
.page-title { padding: 18px 10px 4px !important; }

.page-title h2 {
    font-family: var(--taxoz-font-heading);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.02em;
    color: var(--taxoz-navy);
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 12px;
}
.page-title h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 46px; height: 4px;
    border-radius: 2px;
    background: var(--taxoz-yellow);
}

/* Breadcrumb reads as a small uppercase eyebrow rather than body text. */
.page-title .breadcrumb {
    background: transparent;
    justify-content: flex-end;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.page-title .breadcrumb .breadcrumb-item,
.page-title .breadcrumb .breadcrumb-item a { color: #6B7280; }
.page-title .breadcrumb .breadcrumb-item:last-child { color: var(--taxoz-navy); }

/* ---------- Row number badge --------------------------------------------
   List tables render the id as <th scope="row">; the reference shows it as a
   navy disc with a yellow numeral.                                         */
.table tbody th[scope="row"] {
    color: transparent;
    position: relative;
    vertical-align: middle;
    width: 64px;
}
.table tbody th[scope="row"]::before {
    content: attr(data-row-id);
    position: absolute;
    top: 50%; left: 14px;
    transform: translateY(-50%);
    min-width: 30px; height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--taxoz-navy);
    color: var(--taxoz-yellow);
    font-family: var(--taxoz-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Card + table rhythm ------------------------------------------ */
.card { border-radius: 16px; box-shadow: 0 1px 3px rgba(11, 29, 45, 0.05); }
.card-header { padding: 16px 20px; border-radius: 16px 16px 0 0; }

.table > tbody > tr > td,
.table > tbody > tr > th { padding-top: 14px; padding-bottom: 14px; }

.table thead th { padding-top: 13px; padding-bottom: 13px; }

/* The theme's default table borders fight the rounded card; keep them light. */
.table-bordered > :not(caption) > * > * { border-color: var(--taxoz-gray); }

/* ---------- Header bar: avatar disc and notification badge ---------------- */
.page-header .header-wrapper .nav-right .badge.badge-primary,
.page-header .badge.rounded-pill.badge-primary {
    background-color: var(--taxoz-yellow) !important;
    color: var(--taxoz-navy) !important;
    font-weight: 700;
}

/* ---------- 15. Fixes found while matching the reference layouts ---------- */

/* Column headers are sortable <a> elements; the global link colour made them
   navy-on-navy inside the dark table head. */
.table thead th a,
.table thead th a:hover,
.table thead th a:focus,
.table > thead > tr > th a {
    color: var(--taxoz-white) !important;
    text-decoration: none;
}
.table thead th a:hover { color: var(--taxoz-yellow) !important; }

/* .page-sidebar is already position:fixed in the template, which is enough of a
   containing block for the absolutely-positioned tagline. Do NOT set
   position:relative here - it overrides the fixed positioning and drops the
   whole sidebar into the document flow. */
.page-sidebar .main-sidebar { padding-bottom: 56px; }

/* Stack the lockup and eyebrow, and pin the sidebar toggle to the right so it
   doesn't wrap. Both must fit the header's 77px band or the eyebrow clips. */
.logo-wrapper {
    position: relative;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.logo-wrapper .light-logo,
.logo-wrapper img { max-height: 30px; }

.taxoz-portal-eyebrow {
    position: static;
    width: auto;
    margin-top: 3px;
}

.logo-wrapper .close-btn.toggle-sidebar {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* .page-sidebar is height:100vh with a 77px top margin, so its own bottom edge
   sits below the viewport - anchoring the tagline to it would hide it. Pin to
   the viewport instead, matching the sidebar's 300px width. */
.taxoz-sidebar-tagline {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 300px;
    z-index: 4;
}

/* ==========================================================================
   16. Brand Guidelines 2026 alignment
   Palette names: TaxOz Navy #0B1D2D · Signal Yellow #FFD400 · White ·
   Mist #E6E7EA · Warm Cream #FFF7CC. Canvas is the warm off-white #F8F8F5.
   Stated balance: 65% navy / 20% white / 10% neutral / 5% yellow — yellow is
   one bold gesture per view, supporting lines stay fine and secondary.
   ========================================================================== */

/* Card headers stay in sentence case - the reference screens show plain
   headers here, and a blanket uppercase rule also caught the pagination
   summary ("Showing 1 to 3 of 3 results"). */

/* ---------- Callouts: fine yellow left bar, warm cream ground ------------
   The guidelines' "Choose: / Avoid:" note pattern.                        */
.alert-info, .alert-primary, .alert-warning {
    background-color: var(--taxoz-cream);
    border: none;
    border-left: 4px solid var(--taxoz-yellow);
    border-radius: 8px;
    color: var(--taxoz-navy);
}
.alert-success {
    background-color: var(--taxoz-white);
    border: 1px solid var(--taxoz-gray);
    border-left: 4px solid var(--taxoz-navy);
    border-radius: 8px;
    color: var(--taxoz-navy);
}
.alert-danger {
    background-color: var(--taxoz-danger-soft);
    border: none;
    border-left: 4px solid var(--taxoz-danger);
    border-radius: 8px;
    color: var(--taxoz-danger);
}

/* ---------- Headline metric tile: navy ground, yellow figure -------------
   Matches the reference report screen, and carries the navy-led balance.  */
.dashboard-card-inner.taxoz-card-primary {
    background: linear-gradient(135deg, var(--taxoz-navy) 0%, var(--taxoz-navy-light) 100%) !important;
    border: none;
    border-top: 3px solid var(--taxoz-yellow);
    position: relative;
    overflow: hidden;
}
.dashboard-card-inner.taxoz-card-primary h4 { color: var(--taxoz-on-navy-muted) !important; }
.dashboard-card-inner.taxoz-card-primary h2 { color: var(--taxoz-yellow) !important; }

/* The open ring as a quiet supporting mark on navy surfaces. */
.dashboard-card-inner.taxoz-card-primary::after {
    content: "";
    position: absolute;
    right: -26px; top: -26px;
    width: 88px; height: 88px;
    /* "Supporting lines should stay fine, quiet and secondary" - a hairline
       outline, not a heavy yellow band (the bold yellow gesture on this tile
       is already the top rule and the figure). */
    border: 2px solid rgba(245, 247, 250, 0.14);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.dashboard-card-inner.taxoz-card-primary > * { position: relative; z-index: 1; }

/* ---------- Footer: navy band, per the guidelines' closing strip --------- */
.footer, footer.footer {
    background-color: var(--taxoz-navy) !important;
    border-top: 3px solid var(--taxoz-yellow);
    color: var(--taxoz-on-navy) !important;
}
.footer p, .footer a, .footer span,
footer.footer p, footer.footer a, footer.footer span {
    color: var(--taxoz-on-navy) !important;
    font-weight: 500;
    margin-bottom: 0;
}
/* Guidelines' closing strip: statement left, muted descriptor right, on one
   line. A floated ::after wrapped and clipped, so lay the row out with flex. */
.footer .row,
.footer > .container-fluid > .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.footer::after {
    content: "Finance & Accounting Outsourcing";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--taxoz-on-navy-muted);
    white-space: nowrap;
}
.footer, footer.footer { position: relative; }

/* ---------- Fine section rule between major blocks ----------------------- */
.page-title { border-bottom: 1px solid rgba(11, 29, 45, 0.12); margin-bottom: 18px; }

/* ---------- Restraint: one dominant yellow gesture per view --------------
   Cards keep the yellow top rule fine rather than heavy.                   */
.dashboard-card-inner { border-top-width: 3px; }

/* ==========================================================================
   17. Reference-screen layout details
   ========================================================================== */

/* ---------- Page eyebrow: yellow ring + small caps, above the title ------- */
.taxoz-page-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--taxoz-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--taxoz-navy);
    margin-bottom: 6px;
}
.taxoz-page-eyebrow::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    margin-right: 9px;
    border: 2px solid var(--taxoz-yellow);
    border-radius: 50%;
}

.page-title { border-bottom: none; padding: 22px 10px 10px !important; }
.page-title h2 { font-size: 2.35rem; margin-bottom: 0; padding-bottom: 14px; }
.page-title h2::after { width: 52px; height: 4px; }

/* ---------- Primary page action ------------------------------------------ */
.taxoz-page-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

.taxoz-page-actions .btn {
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 0.92rem;
    font-weight: 700;
}
.taxoz-btn-create .taxoz-plus {
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
    margin-right: 2px;
}

/* ---------- Status: underlined small caps, not a filled pill -------------
   Matches the reference tables. The green is the deep, restrained #1B7A43
   sampled from those screens - not the template's bright success green.    */
.badge.bg-success,
.badge.badge-success {
    background-color: transparent !important;
    color: #1B7A43 !important;
    border-radius: 0;
    padding: 0 0 3px 0;
    border-bottom: 2px solid #1B7A43;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.badge.bg-success::before, .badge.badge-success::before { content: none; }

.badge.bg-danger,
.badge.badge-danger {
    background-color: transparent !important;
    color: var(--taxoz-danger) !important;
    border-radius: 0;
    padding: 0 0 3px 0;
    border-bottom: 2px solid var(--taxoz-danger);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* The activate / de-activate link below the status */
a.de_activate, a.activate {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--taxoz-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}
a.de_activate:hover, a.activate:hover { color: var(--taxoz-yellow-dim); }

/* ---------- Header: navy avatar disc -------------------------------------- */
.page-header .profile-nav img,
.page-header .profile-nav .media img {
    border-radius: 50%;
    border: 2px solid var(--taxoz-yellow);
}

/* ---------- Row action buttons: compact, quiet, delete keeps the cue ------ */
.table td .btn.btn-sm,
.table td .btn-outline-secondary.btn-sm,
.table td .btn-outline-danger.btn-sm {
    border-radius: 9px;
    padding: 7px 10px;
}