/* =====================================================================
   ZIQSY CMS — FINANCE & OPS view group polish
   ---------------------------------------------------------------------
   Scoped, additive, CSS-ONLY. No markup / JS / class changes.
   Loads AFTER css/design-system.css — reuses its --zq-* tokens.

   Screens covered (classes verified against the real blade markup):
     • invoices/index, invoices/dashboard, invoices/show
     • finance/invoices/pending
     • budget/index, budget/expenses, budget/payments, budget/clients/*
     • credentials/index
     • social-media/index

   NOTE ON LEVERAGE:
     - invoices/* and credentials/index ship inline <style> blocks that
       hard-code an indigo (#6366f1) palette and render AFTER this file,
       so they win on equal-specificity ties. Where those views leave a
       property UNSET (e.g. the empty .page-header / .dashboard-header
       background) we fill it with the brand; elsewhere we use slightly
       higher-specificity, scoped selectors to refine without fighting JS.
     - ai-interview/{form,results} are standalone Tailwind-CDN HTML pages
       that do NOT @extend layouts.app, so this stylesheet never loads
       there and is intentionally NOT targeted.

   Scoping: every rule hangs off a class that only appears in this group
   (.invoice-table, .status-badge, .stat-card, .credential-card,
   .border-left-*, .sprint-id-badge, .totals-section, .action-bar …),
   so there is no global element-selector bleed into other groups.
   ===================================================================== */


/* ------------------------------------------------------------------ *
 * 1. PAGE / DASHBOARD HEADERS
 *    The blade files define .page-header & .dashboard-header WITHOUT a
 *    background (only padding + shadow), so this is a clean fill: a
 *    trustworthy brand gradient instead of the unstyled white band.
 * ------------------------------------------------------------------ */
.page-header,
.dashboard-header {
    /* Shared hero spine (--zq-hero-bg): deep navy→azure, white text AAA. Converged
       off the old brand-500→brand-700 (whose #00aeef edge failed white-text AA) so
       finance/invoice/budget heroes match tasks, leave & the home dashboard. */
    background: var(--zq-hero-bg);
    color: #fff;
    box-shadow: var(--zq-hero-shadow) !important;
    border-radius: var(--zq-radius-lg);
}
.page-header h1,
.page-header h5,
.dashboard-header h5,
.page-header p,
.dashboard-header p,
.page-header small,
.dashboard-header small {
    color: #fff;
}
.page-header .opacity-90,
.dashboard-header .opacity-90 { opacity: .9; }

/* Light action button sitting on the brand header reads as a crisp chip */
.page-header .btn-light,
.dashboard-header .btn-light {
    background: rgba(255, 255, 255, .95);
    border-color: rgba(255, 255, 255, .9);
    color: var(--zq-brand-700);
    font-weight: 600;
}
.page-header .btn-light:hover,
.dashboard-header .btn-light:hover {
    background: #fff;
    color: var(--zq-brand-800);
}


/* ------------------------------------------------------------------ *
 * 2. INVOICE TABLES  (invoices/index, dashboard, show + finance/pending)
 *    Crisp header band, comfortable rows, monospaced-aligned numbers.
 *    The inline <style> sets an indigo thead; we restyle it on the
 *    brand with a compound selector so it wins on light surfaces.
 * ------------------------------------------------------------------ */
.invoice-table {
    border-radius: var(--zq-radius);
    overflow: hidden;
    box-shadow: var(--zq-shadow-sm);
}
.invoice-table thead,
.invoice-table > thead {
    /* brand-700→800 so the white column labels clear WCAG AA (the old
       brand-500/#00aeef edge was 2.5:1). */
    background: linear-gradient(180deg, var(--zq-brand-700), var(--zq-brand-800));
}
.invoice-table thead th,
.invoice-table > thead th {
    color: #fff;
    letter-spacing: .04em;
    border: none !important;
}
.invoice-table tbody td {
    vertical-align: middle;
    border-bottom: 1px solid var(--zq-border);
    color: var(--zq-text);
}
.invoice-table tbody tr:last-child td { border-bottom: none; }
.invoice-table tbody tr:hover { background: var(--zq-brand-50); }

/* Right-aligned money columns get tabular figures for clean column edges */
.invoice-table td.text-end,
.invoice-table th.text-end,
.invoice-table td .fw-bold,
.totals-section,
.total-row {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Generic finance/pending table (plain Bootstrap .table) — number emphasis */
.table .text-success.fs-5,
.table strong.text-success { color: var(--zq-success-strong) !important; }


/* ------------------------------------------------------------------ *
 * 3. STATUS PILLS  (invoices: .status-badge / .status-*)
 *    Remap the indigo-era statuses onto the token semantic palette so
 *    paid / sent / draft / cancelled read instantly and accessibly.
 *    Compound `.status-badge.status-*` raises specificity over the
 *    single-class inline rules.
 * ------------------------------------------------------------------ */
.status-badge {
    border-radius: var(--zq-radius-pill);
    padding: .35rem .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1;
    border: 1px solid transparent;
}
.status-badge.status-paid {
    background: #dcfce7;
    color: var(--zq-success-strong);
    border-color: #bbf7d0;
}
.status-badge.status-sent {
    background: var(--zq-brand-50);
    color: var(--zq-brand-700);
    border-color: var(--zq-brand-100);
}
.status-badge.status-draft {
    background: var(--zq-slate-100);
    color: var(--zq-slate-600);
    border-color: var(--zq-slate-200);
}
.status-badge.status-cancelled {
    background: #fee2e2;
    color: var(--zq-danger-strong);
    border-color: #fecaca;
}

/* Inline overdue chip (invoices/index uses .overdue-badge) */
.overdue-badge {
    border-radius: var(--zq-radius-pill);
    background: #fee2e2;
    color: var(--zq-danger-strong);
    font-weight: 700;
    letter-spacing: .02em;
}


/* ------------------------------------------------------------------ *
 * 4. STAT / SUMMARY CARDS  (invoices/dashboard .stat-card + .stat-icon,
 *    finance/pending .stat-icon)
 * ------------------------------------------------------------------ */
.stat-card {
    border-radius: var(--zq-radius);
    border: 1px solid var(--zq-border);
    box-shadow: var(--zq-shadow-sm);
    background: var(--zq-surface);
}
.stat-card:hover { box-shadow: var(--zq-shadow-md); }
.stat-card .stat-label {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--zq-fs-xs);
    color: var(--zq-text-muted);
}
.stat-card .stat-value { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* finance/pending soft-tinted square icons — give the flat bg utilities depth */
.stat-icon { box-shadow: var(--zq-shadow-xs); }
.stat-icon.bg-warning { background: var(--zq-warning) !important; }
.stat-icon.bg-info    { background: var(--zq-info) !important; }
.stat-icon.bg-success { background: var(--zq-success) !important; }


/* ------------------------------------------------------------------ *
 * 5. BUDGET SUMMARIES  (budget/index, budget/expenses)
 *    .border-left-* accent cards + gradient hero banners.
 *    The blade inline <style> uses legacy bootstrap-3 hex values; we
 *    re-point the accents (and the value numerals) to the token ramp.
 * ------------------------------------------------------------------ */
.border-left-success { border-left: 4px solid var(--zq-success) !important; }
.border-left-danger  { border-left: 4px solid var(--zq-danger)  !important; }
.border-left-warning { border-left: 4px solid var(--zq-warning) !important; }
.border-left-info    { border-left: 4px solid var(--zq-info)    !important; }

.border-left-success,
.border-left-danger,
.border-left-warning,
.border-left-info {
    border-radius: var(--zq-radius);
    box-shadow: var(--zq-shadow-sm);
}
.border-left-success .h5,
.border-left-danger .h5,
.border-left-warning .h5,
.border-left-info .h5 {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* Budget hero balance banners (.bg-gradient-primary / .bg-gradient-danger
   are defined inline with off-brand hues; restyle to the shared hero spine
   + token red so the balance banner matches every other premium header) */
.card.bg-gradient-primary {
    background: var(--zq-hero-bg) !important;
    box-shadow: var(--zq-hero-shadow) !important;
}
.card.bg-gradient-danger {
    background: linear-gradient(135deg, var(--zq-danger) 0%, var(--zq-danger-strong) 100%) !important;
}

/* Expense schedule grouped-table headers use .card-header.bg-* — tighten radius
   so the coloured cap meets the rounded card cleanly */
.card-header.bg-danger,
.card-header.bg-warning,
.card-header.bg-info,
.card-header.bg-primary { border-top-left-radius: inherit; border-top-right-radius: inherit; }

/* Subtotal / total rows in expense tfoot + totals — emphasise the bottom line */
.table tfoot.table-light td,
.table tr.table-info td {
    font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------------ *
 * 6. INVOICE "SHOW" DOCUMENT  (invoices/show)
 *    Totals panel + address blocks. Inline file hard-codes most of this;
 *    we refine the totals grand-total accent + number alignment only.
 * ------------------------------------------------------------------ */
.totals-section { border-radius: var(--zq-radius); }
.total-row.main { border-top-color: var(--zq-brand-500) !important; }
.address-section { border-radius: var(--zq-radius); }

.action-bar {
    border-radius: var(--zq-radius);
    box-shadow: var(--zq-shadow-sm);
    border: 1px solid var(--zq-border);
}


/* ------------------------------------------------------------------ *
 * 7. SPRINT / META BADGES  (finance/invoices/pending)
 * ------------------------------------------------------------------ */
.sprint-id-badge {
    background: var(--zq-slate-100) !important;
    color: var(--zq-slate-600) !important;
    border-radius: var(--zq-radius-sm);
    font-weight: 600;
    letter-spacing: .02em;
}
.sprint-color-indicator { border-radius: var(--zq-radius-pill); }
.avatar-sm {
    box-shadow: var(--zq-shadow-xs);
    background: linear-gradient(135deg, var(--zq-brand-400), var(--zq-brand-600)) !important;
}


/* ------------------------------------------------------------------ *
 * 8. CREDENTIAL VAULT  (credentials/index)
 *    Tidy cards with a brand reveal accent. The inline <style> uses
 *    indigo for .credential-icon gradient + hover accent; we re-point
 *    them to the brand with scoped, higher-specificity selectors.
 * ------------------------------------------------------------------ */
.credential-card {
    border-radius: var(--zq-radius);
    border-color: var(--zq-border);
    background: var(--zq-surface);
}
.credential-card::before { background: var(--zq-brand-500); }
.credential-card:hover {
    border-color: var(--zq-brand-300);
    box-shadow: var(--zq-shadow-lg);
}
.credential-card .credential-icon {
    border-radius: var(--zq-radius);
    background: linear-gradient(135deg, var(--zq-brand-400) 0%, var(--zq-brand-600) 100%) !important;
    box-shadow: var(--zq-shadow-brand) !important;
}
.credential-card .credential-name { color: var(--zq-text); }
.credential-card .credential-email { color: var(--zq-text-muted); }
.credential-card .action-btn { border-radius: var(--zq-radius-sm); border-color: var(--zq-border); }
.credential-card .action-btn:hover {
    background: var(--zq-brand-500);
    border-color: var(--zq-brand-500);
}
.credential-card .action-btn.delete:hover {
    background: var(--zq-danger);
    border-color: var(--zq-danger);
}

/* Permission + access-log rows inside the view modal */
.permission-item,
.log-item {
    border-radius: var(--zq-radius-sm);
    border-color: var(--zq-border);
}


/* ------------------------------------------------------------------ *
 * 9. SOCIAL-MEDIA VERIFICATION  (social-media/index — pure Bootstrap)
 *    The only Finance-Ops screen with no inline <style>, so plain,
 *    high-leverage Bootstrap-component polish lands fully here.
 *    Scoped via the form's follow-checkbox ids to avoid global bleed.
 * ------------------------------------------------------------------ */
.form-check-input#follows_linkedin:checked,
.form-check-input#follows_facebook:checked,
.form-check-input#follows_instagram:checked {
    background-color: var(--zq-success);
    border-color: var(--zq-success);
}


/* ------------------------------------------------------------------ *
 * 10. DARK MODE
 *     Header gradients + brand chips already read on dark. Re-point the
 *     surfaces that the inline light files hard-code to white so they
 *     don't glow against a dark shell.
 * ------------------------------------------------------------------ */
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .credential-card,
[data-bs-theme="dark"] .action-bar {
    background: var(--zq-surface);
    border-color: var(--zq-border);
}
[data-bs-theme="dark"] .invoice-table tbody td { color: var(--zq-text); }
[data-bs-theme="dark"] .invoice-table tbody tr:hover { background: var(--zq-surface-2); }

/* projects/index (and siblings reusing these classes) hard-code white on the
   filter bar, the inactive filter chips and a #666 stat label. Re-point them for
   Eclipse so text isn't light-on-white or dim-on-dark. The active filter chip
   keeps its brand gradient (it sets its own bg/colour at higher specificity). */
[data-bs-theme="dark"] .filter-section {
    background: var(--zq-surface);
    border-color: var(--zq-border);
}
[data-bs-theme="dark"] .filter-badge:not(.active) {
    background: var(--zq-surface-2);
    border-color: var(--zq-border-strong);
    color: var(--zq-text);
}
[data-bs-theme="dark"] .stat-content p { color: var(--zq-text-muted); }

[data-bs-theme="dark"] .status-badge.status-draft {
    background: var(--zq-slate-700);
    color: var(--zq-slate-200);
    border-color: var(--zq-slate-600);
}
[data-bs-theme="dark"] .sprint-id-badge {
    background: var(--zq-slate-700) !important;
    color: var(--zq-slate-200) !important;
}


/* ------------------------------------------------------------------ *
 * 11. MOTION-REDUCE GUARD
 *     design-system.css already neutralises transitions globally under
 *     reduced-motion; this re-asserts it for the few hover transforms
 *     introduced by the inline blade <style> on these screens.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .credential-card,
    .invoice-table tbody tr,
    .border-left-success,
    .border-left-danger,
    .border-left-warning,
    .border-left-info {
        transition: none !important;
    }
}