/* ==========================================================================
   quickTAMS — Components
   Layer 4 of 4. Two jobs:
   1. Re-skin the stock Bootstrap components the existing pages already use,
      so every page benefits without being touched.
   2. Add the handful of app-specific components the pages opt into.
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    --bs-btn-padding-y: var(--space-2);
    --bs-btn-padding-x: var(--space-4);
    --bs-btn-font-size: var(--fs-base);
    --bs-btn-font-weight: var(--fw-medium);
    --bs-btn-border-radius: var(--r-md);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--accent-ring);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(0.5px); }

.btn-sm {
    --bs-btn-padding-y: var(--space-1);
    --bs-btn-padding-x: var(--space-3);
    --bs-btn-font-size: var(--fs-sm);
    --bs-btn-border-radius: var(--r-sm);
    min-height: 34px;
}

.btn-lg {
    --bs-btn-padding-x: var(--space-5);
    --bs-btn-font-size: var(--fs-md);
    --bs-btn-border-radius: var(--r-lg);
    min-height: 48px;
}

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-active-bg: var(--accent-active);
    --bs-btn-active-border-color: var(--accent-active);
    --bs-btn-active-color: var(--on-accent);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    --bs-btn-disabled-color: var(--on-accent);
    box-shadow: var(--shadow-xs);
}

/* "Secondary" in this app means a neutral outline, not a grey fill —
   grey fills read as disabled next to the teal primary. */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-light {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-color: var(--text);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text);
    --bs-btn-active-bg: var(--surface-3);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-active-color: var(--text);
    --bs-btn-disabled-bg: var(--surface-2);
    --bs-btn-disabled-border-color: var(--border);
    --bs-btn-disabled-color: var(--text-subtle);
    box-shadow: var(--shadow-xs);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-text);
    --bs-btn-hover-bg: var(--accent-soft);
    --bs-btn-hover-color: var(--accent-text);
    --bs-btn-border-color: var(--accent-border);
    --bs-btn-hover-border-color: var(--accent-border);
    --bs-btn-active-bg: var(--accent-soft-hover);
    --bs-btn-active-color: var(--accent-text);
}

.btn-success {
    --bs-btn-bg: var(--ok);
    --bs-btn-border-color: var(--ok);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ok-text);
    --bs-btn-hover-border-color: var(--ok-text);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ok-text);
    --bs-btn-active-color: #fff;
}

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--danger-text);
    --bs-btn-hover-border-color: var(--danger-text);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--danger-text);
    --bs-btn-active-color: #fff;
}

.btn-outline-danger {
    --bs-btn-color: var(--danger-text);
    --bs-btn-border-color: var(--danger-border);
    --bs-btn-bg: var(--surface);
    --bs-btn-hover-bg: var(--danger-soft);
    --bs-btn-hover-border-color: var(--danger-border);
    --bs-btn-hover-color: var(--danger-text);
    --bs-btn-active-bg: var(--danger-soft);
    --bs-btn-active-color: var(--danger-text);
}

.btn-warning {
    --bs-btn-bg: var(--warn);
    --bs-btn-border-color: var(--warn);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--warn-text);
    --bs-btn-hover-border-color: var(--warn-text);
    --bs-btn-hover-color: #fff;
}

.btn-link {
    --bs-btn-color: var(--accent-text);
    --bs-btn-hover-color: var(--accent-hover);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    box-shadow: none;
    text-decoration: none;
}

/* Compact table row actions shouldn't inherit the 44px tap floor. */
.btn-icon {
    width: 32px;
    min-height: 32px;
    height: 32px;
    padding: 0;
    flex-shrink: 0;
}

.btn-group > .btn { min-height: 38px; }
.btn-group-sm > .btn { min-height: 32px; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--r-lg);
    --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
    --bs-card-spacer-y: var(--space-5);
    --bs-card-spacer-x: var(--space-5);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: var(--space-4);
    --bs-card-cap-padding-x: var(--space-5);
    --bs-card-color: var(--text);
    box-shadow: var(--shadow-xs);
}

.card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: var(--fw-semibold);
}

.card-header .card-title,
.card-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

.card-header .btn-sm { margin-inline-start: auto; }
.card-footer {
    background-color: var(--surface-2);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--space-5);
}

@media (max-width: 575.98px) {
    .card {
        --bs-card-spacer-x: var(--space-4);
        --bs-card-spacer-y: var(--space-4);
        --bs-card-cap-padding-x: var(--space-4);
    }
}

/* ==========================================================================
   Page header
   ========================================================================== */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.page-header__text { min-width: 0; }

.page-header h1,
.page-header__title {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: var(--lh-tight);
}

.page-header__subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.breadcrumb-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.breadcrumb-line a { color: var(--text-muted); }
.breadcrumb-line a:hover { color: var(--accent-text); }
.breadcrumb-line i { font-size: 0.7rem; }

@media (max-width: 767.98px) {
    .page-header h1,
    .page-header__title { font-size: var(--fs-xl); }

    .page-header__actions { width: 100%; }
    .page-header__actions > .btn { flex: 1; }
}

/* ==========================================================================
   Stat tiles
   ========================================================================== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

@media (max-width: 575.98px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }
}

.stat-tile {
    position: relative;
    display: block;
    padding: var(--space-5);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    color: inherit;
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

a.stat-tile:hover {
    color: inherit;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.stat-tile__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.stat-tile__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    letter-spacing: 0;
}

.stat-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-inline-start: auto;
    border-radius: var(--r-sm);
    background-color: var(--neutral-soft);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.stat-tile__value {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text);
}

.stat-tile__value .money__currency { font-size: 0.5em; }

.stat-tile__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.stat-tile--accent .stat-tile__icon { background-color: var(--accent-soft); color: var(--accent); }
.stat-tile--ok .stat-tile__icon { background-color: var(--ok-soft); color: var(--ok); }
.stat-tile--warn .stat-tile__icon { background-color: var(--warn-soft); color: var(--warn); }
.stat-tile--danger .stat-tile__icon { background-color: var(--danger-soft); color: var(--danger); }
.stat-tile--info .stat-tile__icon { background-color: var(--info-soft); color: var(--info); }

/* The one tile carrying money at risk earns a tinted edge. */
.stat-tile--danger { border-color: var(--danger-border); }
.stat-tile--danger .stat-tile__value { color: var(--danger-text); }

.trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: var(--fw-medium);
}
.trend--up { color: var(--ok-text); }
.trend--down { color: var(--danger-text); }

@media (max-width: 575.98px) {
    .stat-tile { padding: var(--space-4); }
    .stat-tile__value { font-size: var(--fs-xl); }
    .stat-tile__icon { width: 24px; height: 24px; font-size: 0.8rem; }
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border-subtle);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--text);
    margin-bottom: 0;
    font-size: var(--fs-base);
}

.table > thead > tr > th {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-base);
    padding: var(--space-3) var(--space-4);
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    color: var(--text);
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table-hover > tbody > tr {
    transition: background-color var(--dur-fast) var(--ease-out);
}

.table tfoot td,
.table tfoot th {
    padding: var(--space-3) var(--space-4);
    background-color: var(--surface-2);
    border-top: 1px solid var(--border);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

/* Numeric columns line up on the decimal — OMR carries three places. */
.table .num,
.table .text-end { text-align: end; }
.table .num { font-variant-numeric: tabular-nums; }

.table .cell-strong { font-weight: var(--fw-semibold); }
.table .cell-muted { color: var(--text-muted); font-size: var(--fs-sm); }

/* A table that fills a card edge-to-edge. */
.card > .table-wrap { border-radius: inherit; overflow: hidden; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Mobile: tables become cards
   Labels come from the <thead>, copied onto each cell as data-label by
   app.js, so pages don't have to repeat their column names in markup.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .table-stack > thead { display: none; }

    .table-stack,
    .table-stack > tbody,
    .table-stack > tbody > tr,
    .table-stack > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .table-stack > tbody > tr {
        position: relative;
        padding: var(--space-4);
        margin-bottom: var(--space-3);
        background-color: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-xs);
    }

    .table-stack > tbody > tr:last-child { margin-bottom: 0; }

    .table-stack > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-2) 0 0;
        margin-top: var(--space-2);
        border: 0;
        border-top: 1px solid var(--border-subtle);
        font-size: var(--fs-sm);
        text-align: start;
    }

    .table-stack > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--text-subtle);
        font-size: var(--fs-xs);
        font-weight: var(--fw-medium);
    }

    /* Cells the page has given a role to opt out of the label/value row and
       compose the card head instead. */
    .table-stack > tbody > tr > td[data-role]::before { display: none; }

    .table-stack > tbody > tr > td[data-role="title"] {
        display: block;
        padding: 0;
        margin: 0;
        border-top: 0;
        padding-inline-end: 92px;
        font-size: var(--fs-md);
        font-weight: var(--fw-semibold);
        color: var(--text);
    }

    .table-stack > tbody > tr > td[data-role="subtitle"] {
        display: block;
        padding: 0;
        margin-top: var(--space-1);
        border-top: 0;
        padding-inline-end: 92px;
        color: var(--text-muted);
    }

    .table-stack > tbody > tr > td[data-role="status"] {
        position: absolute;
        inset-block-start: var(--space-4);
        inset-inline-end: var(--space-4);
        width: auto;
        padding: 0;
        margin: 0;
        border-top: 0;
    }

    .table-stack > tbody > tr > td[data-role="actions"] {
        justify-content: flex-start;
        gap: var(--space-2);
        margin-top: var(--space-3);
        padding-top: var(--space-3);
    }

    .table-stack > tbody > tr > td[data-role="hide"] { display: none; }

    /* An empty cell would otherwise render a stray label with no value. */
    .table-stack > tbody > tr > td.is-empty { display: none; }

    .table-stack > tfoot > tr > td { padding: var(--space-3); }

    .table-wrap { overflow-x: visible; }
    .card > .card-body > .table-stack { margin: 0; }
}

/* ==========================================================================
   Badges & status pills
   The status vocabulary (Draft / Unpaid / Partial / Paid / Cancelled) is the
   fastest thing to read on any screen here, so it gets a dot plus a soft
   fill rather than a saturated block.
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    line-height: 1.35;
    vertical-align: middle;
}

.badge.bg-success,
.badge.bg-danger,
.badge.bg-warning,
.badge.bg-info,
.badge.bg-secondary,
.badge.bg-primary,
.badge.bg-dark,
.badge.bg-light {
    --dot: currentColor;
}

.badge.bg-success::before,
.badge.bg-danger::before,
.badge.bg-warning::before,
.badge.bg-info::before,
.badge.bg-secondary::before,
.badge.bg-primary::before,
.badge.bg-dark::before {
    content: "";
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: var(--r-full);
    background-color: var(--dot);
}

.badge.bg-success {
    background-color: var(--ok-soft) !important;
    border-color: var(--ok-border);
    color: var(--ok-text) !important;
    --dot: var(--ok);
}

.badge.bg-danger {
    background-color: var(--danger-soft) !important;
    border-color: var(--danger-border);
    color: var(--danger-text) !important;
    --dot: var(--danger);
}

.badge.bg-warning {
    background-color: var(--warn-soft) !important;
    border-color: var(--warn-border);
    color: var(--warn-text) !important;
    --dot: var(--warn);
}

.badge.bg-info {
    background-color: var(--info-soft) !important;
    border-color: var(--info-border);
    color: var(--info-text) !important;
    --dot: var(--info);
}

.badge.bg-primary {
    background-color: var(--accent-soft) !important;
    border-color: var(--accent-border);
    color: var(--accent-text) !important;
    --dot: var(--accent);
}

.badge.bg-secondary,
.badge.bg-light {
    background-color: var(--neutral-soft) !important;
    border-color: var(--neutral-border);
    color: var(--neutral-text) !important;
    --dot: var(--neutral);
}

.badge.bg-dark {
    background-color: var(--neutral-soft) !important;
    border-color: var(--neutral-border);
    color: var(--text-muted) !important;
    --dot: var(--text-subtle);
}

/* Plain label chips (branch names, tags) read better without a status dot. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.chip--accent {
    background-color: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent-text);
}

/* ==========================================================================
   Filter bar — a form on desktop, a collapsible sheet on phones
   ========================================================================== */
.filter-bar {
    margin-bottom: var(--space-4);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
}

.filter-bar__toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
}

.filter-bar__toggle .bi-chevron-down {
    margin-inline-start: auto;
    transition: rotate var(--dur-base) var(--ease-out);
}

.filter-bar__toggle[aria-expanded="true"] .bi-chevron-down { rotate: 180deg; }

.filter-bar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: var(--r-full);
    background-color: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
}

.filter-bar__body { padding: var(--space-4); }

.filter-bar__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3);
    align-items: end;
}

.filter-bar__actions {
    display: flex;
    gap: var(--space-2);
}

.filter-bar__actions .btn { flex: 1; }

@media (max-width: 767.98px) {
    .filter-bar__toggle { display: flex; }
    .filter-bar__body {
        display: none;
        padding-top: 0;
        border-top: 1px solid var(--border-subtle);
        margin-top: 0;
        padding-top: var(--space-4);
    }
    .filter-bar.is-open .filter-bar__body { display: block; }
    .filter-bar__grid { grid-template-columns: 1fr 1fr; }
    .filter-bar__grid > .filter-bar__actions { grid-column: 1 / -1; }
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-5);
    text-align: center;
}

.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-2);
    border-radius: var(--r-lg);
    background-color: var(--surface-2);
    color: var(--text-subtle);
    font-size: 1.4rem;
}

.empty-state__title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.empty-state__text {
    margin: 0;
    max-width: 42ch;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.empty-state__action { margin-top: var(--space-3); }

/* ==========================================================================
   Detail lists — used by the invoice / customer / payment view pages
   ========================================================================== */
.detail-list {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    font-size: var(--fs-base);
}

.detail-list dt {
    color: var(--text-subtle);
    font-weight: var(--fw-normal);
    font-size: var(--fs-sm);
}

.detail-list dd {
    margin: 0;
    color: var(--text);
    font-weight: var(--fw-medium);
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .detail-list {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
    .detail-list dd { margin-bottom: var(--space-3); }
    .detail-list dd:last-child { margin-bottom: 0; }
}

/* A totals block — invoice summary, payment allocation. */
.totals { display: grid; gap: var(--space-2); }

.totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.totals__row--grand {
    padding-top: var(--space-3);
    margin-top: var(--space-1);
    border-top: 1px solid var(--border);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.totals__row--due { color: var(--danger-text); font-weight: var(--fw-semibold); }
.totals__value { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Alerts & toasts
   ========================================================================== */
.alert {
    --bs-alert-border-radius: var(--r-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
    font-size: var(--fs-base);
}

.alert-success { background-color: var(--ok-soft); border-color: var(--ok-border); color: var(--ok-text); }
.alert-danger  { background-color: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-text); }
.alert-warning { background-color: var(--warn-soft); border-color: var(--warn-border); color: var(--warn-text); }
.alert-info    { background-color: var(--info-soft); border-color: var(--info-border); color: var(--info-text); }

.alert .btn-close {
    margin-inline-start: auto;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.5;
}
.alert .btn-close:hover { opacity: 1; }

:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.toast-stack {
    position: fixed;
    inset-block-start: calc(var(--topbar-h) + var(--space-3));
    inset-inline-end: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(360px, calc(100vw - var(--space-8)));
    pointer-events: none;
}

@media (max-width: 767.98px) {
    /* Above the bottom nav, not under the topbar — thumbs live down here. */
    .toast-stack {
        inset-block-start: auto;
        inset-block-end: calc(var(--bottomnav-h) + var(--space-3) + env(safe-area-inset-bottom));
        inset-inline: var(--space-3);
        width: auto;
    }
}

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-size: var(--fs-sm);
    pointer-events: auto;
    animation: toast-in var(--dur-slow) var(--ease-out);
}

.toast-item.is-leaving { animation: toast-out var(--dur-base) var(--ease-out) forwards; }

.toast-item__icon { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }
.toast-item--success .toast-item__icon { color: var(--ok); }
.toast-item--danger .toast-item__icon { color: var(--danger); }
.toast-item--warning .toast-item__icon { color: var(--warn); }
.toast-item--info .toast-item__icon { color: var(--info); }
.toast-item__body { flex: 1; min-width: 0; }

.toast-item__close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--text-subtle);
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

/* ==========================================================================
   Dropdowns
   ========================================================================== */
.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: var(--r-lg);
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--surface-2);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-active-bg: var(--accent-soft);
    --bs-dropdown-link-active-color: var(--accent-text);
    --bs-dropdown-divider-bg: var(--border-subtle);
    --bs-dropdown-header-color: var(--text-subtle);
    padding: var(--space-2);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-base);
    z-index: var(--z-dropdown);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-sm);
    font-weight: var(--fw-medium);
}

.dropdown-item i { color: var(--text-subtle); font-size: 1rem; width: 18px; }
.dropdown-item:hover i { color: var(--text-muted); }
.dropdown-item.text-danger { color: var(--danger-text) !important; }
.dropdown-item.text-danger i { color: var(--danger); }
.dropdown-item.text-danger:hover { background-color: var(--danger-soft); }

.dropdown-header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.dropdown-item-text { padding: var(--space-1) var(--space-3); }
.dropdown-divider { margin: var(--space-2) 0; }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-content {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.modal-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.modal-body { padding: var(--space-5); }

.modal-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    gap: var(--space-2);
}

.modal-footer > * { margin: 0; }
.modal-backdrop { background-color: var(--overlay); }
.modal-backdrop.show { opacity: 1; }

/* On phones a dialog is a bottom sheet — reachable, and it doesn't fight
   the on-screen keyboard the way a centred dialog does. */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen) {
        margin: 0;
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        max-width: none;
    }

    .modal-content {
        border-start-start-radius: var(--r-2xl);
        border-start-end-radius: var(--r-2xl);
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        border-bottom: 0;
        max-height: 92dvh;
    }

    .modal-body {
        overflow-y: auto;
        padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    }

    .modal.fade .modal-dialog { transform: translateY(24px); }
    .modal.show .modal-dialog { transform: none; }
    .modal-footer { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
    .modal-footer > .btn { flex: 1; }
}

/* ==========================================================================
   Tabs & pagination
   ========================================================================== */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--border);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-color: var(--accent-text);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--accent);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-link-color: var(--text-muted);
    --bs-nav-link-hover-color: var(--text);
    gap: var(--space-1);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}

.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tabs .nav-link {
    padding: var(--space-3) var(--space-4);
    border-width: 0 0 2px;
    border-radius: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.pagination {
    --bs-pagination-bg: var(--surface);
    --bs-pagination-color: var(--text-muted);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-bg: var(--surface-2);
    --bs-pagination-hover-color: var(--text);
    --bs-pagination-hover-border-color: var(--border);
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-active-color: var(--on-accent);
    --bs-pagination-disabled-bg: var(--surface-2);
    --bs-pagination-disabled-color: var(--text-subtle);
    --bs-pagination-disabled-border-color: var(--border);
    --bs-pagination-border-radius: var(--r-md);
    --bs-pagination-font-size: var(--fs-sm);
}

/* ==========================================================================
   Progress, list groups, misc Bootstrap surfaces
   ========================================================================== */
.progress {
    background-color: var(--surface-3);
    border-radius: var(--r-full);
    height: 6px;
}

.progress-bar { background-color: var(--accent); }

.list-group {
    --bs-list-group-bg: var(--surface);
    --bs-list-group-border-color: var(--border);
    --bs-list-group-color: var(--text);
    --bs-list-group-action-hover-bg: var(--surface-2);
    --bs-list-group-action-hover-color: var(--text);
    --bs-list-group-border-radius: var(--r-lg);
}

.tooltip-inner {
    background-color: var(--zinc-900);
    color: var(--zinc-50);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    padding: var(--space-1) var(--space-2);
}

.accordion {
    --bs-accordion-bg: var(--surface);
    --bs-accordion-border-color: var(--border);
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-active-bg: var(--accent-soft);
    --bs-accordion-active-color: var(--accent-text);
    --bs-accordion-border-radius: var(--r-lg);
}

/* ==========================================================================
   DataTables
   ========================================================================== */
.dataTables_wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* The filter label is a flex container, so text-align alone can't push it
   to the end of the toolbar — justify the flex content instead. */
.dataTables_wrapper .dataTables_filter { text-align: end; }
.dataTables_wrapper .dataTables_filter label { justify-content: flex-end; }

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 220px;
    min-height: 38px;
    padding: var(--space-2) var(--space-3);
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background-color: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.dataTables_wrapper .dataTables_length select {
    min-height: 38px;
    padding: var(--space-1) var(--space-2);
    /* Keep Bootstrap's reserved room for the .form-select chevron,
       otherwise the arrow overlaps the number. Logical property so it
       flips correctly in RTL. */
    padding-inline-end: var(--space-8);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background-color: var(--surface);
    color: var(--text);
}

.dataTables_wrapper .dataTables_info {
    font-size: var(--fs-sm);
    color: var(--text-subtle);
    padding-top: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-height: 34px;
    border-radius: var(--r-md) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    font-size: var(--fs-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--on-accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { cursor: pointer; }

table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { color: var(--text); }

.dataTables_empty { color: var(--text-subtle); padding: var(--space-10) !important; }

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_filter { text-align: start; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; min-width: 0; }
    .dataTables_wrapper .dataTables_length { display: none; }
    .dataTables_wrapper .dataTables_paginate { display: flex; justify-content: center; flex-wrap: wrap; }
}

/* ==========================================================================
   Section heading used inside long forms (invoice create, customer form)
   ========================================================================== */
.section-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.section-head:first-child { margin-top: 0; }

.section-head__title {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* Sticky action bar for long forms — the save button stays reachable. */
.form-actions {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding: var(--space-4);
    background-color: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

.form-actions__spacer { flex: 1; }

@media (max-width: 767.98px) {
    .form-actions {
        inset-block-end: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
        margin-inline: calc(-1 * var(--space-1));
        border-radius: var(--r-lg);
    }
    .form-actions .btn { flex: 1; }
    .form-actions__spacer { display: none; }
}

/* ==========================================================================
   Timeline — activity log / invoice history
   ========================================================================== */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }

.timeline__item {
    position: relative;
    padding-inline-start: var(--space-6);
    padding-bottom: var(--space-5);
}

.timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 5px;
    inset-block: 6px 0;
    width: 1px;
    background-color: var(--border);
}

.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }

.timeline__dot {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 5px;
    width: 11px;
    height: 11px;
    border-radius: var(--r-full);
    background-color: var(--surface);
    border: 2px solid var(--border-strong);
}

.timeline__item--accent .timeline__dot { border-color: var(--accent); }
.timeline__time { font-size: var(--fs-xs); color: var(--text-subtle); }

/* ==========================================================================
   Skeleton loading
   ========================================================================== */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: skeleton 1.4s ease infinite;
    border-radius: var(--r-sm);
    color: transparent !important;
}

@keyframes skeleton {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* ==========================================================================
   Currency sign — official Omani rial symbol (U+20C4 lands Sept 2026;
   until fonts ship it, the glyph travels as inline SVG)
   ========================================================================== */
.omr-sign {
    height: 0.68em;
    width: auto;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    top: -0.02em;
}

/* Sign precedes the value with a space (CBO usage rule). */
.money__sign {
    margin-inline-end: 0.28em;
    color: var(--text-subtle);
}

.stat-tile__value .money__sign .omr-sign { height: 0.5em; }

/* ==========================================================================
   Brand
   ========================================================================== */
.brand { display: inline-flex; line-height: 0; }
.brand-mark { display: block; border-radius: var(--r-md); }

.brand-word {
    font-size: var(--fs-lg);
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.brand-word__light { color: var(--text-muted); font-weight: var(--fw-normal); }
.brand-word__bold { color: var(--text); font-weight: var(--fw-bold); }

/* Uploaded company logo in the app shell. Uploaded marks are designed for
   light paper, so dark mode gives them a small light backing plate. */
.brand-logo {
    display: block;
    max-height: 38px;
    max-width: 108px;
    flex: 0 1 auto;
    object-fit: contain;
}

.brand-app-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root[data-theme="dark"] .brand-logo {
    background: #FFFFFF;
    padding: 3px 8px;
    border-radius: var(--r-sm);
}

.brand--rail-fallback { display: none; }

@media (min-width: 992px) {
    .app-shell.is-collapsed .brand-logo { display: none; }
    .app-shell.is-collapsed .brand--rail-fallback { display: inline-flex; }
}

/* Settings: logo preview well */
.logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: var(--space-4);
    background:
        repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 0 0 / 16px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
}

.logo-preview img {
    max-height: 90px;
    max-width: 100%;
    object-fit: contain;
}

.logo-preview__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-subtle);
    font-size: var(--fs-sm);
    text-align: center;
}

.logo-preview__empty i { font-size: 1.5rem; }

/* ==========================================================================
   Small helpers used across pages
   ========================================================================== */
.min-w-0 { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.hide-sm { }
@media (max-width: 767.98px) { .hide-sm { display: none !important; } }
@media (min-width: 768px) { .show-sm { display: none !important; } }