@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* Design fixes — 2026-03-26 design review */

/* FINDING-001: Body font size 14px → 15px for readability */
:root {
    --tblr-font-size: 0.9375rem;
}
body {
    font-size: 0.9375rem !important; /* 15px — balanced between Tabler's 14px and full 16px */
}

/* FINDING-004: Sidebar nav items touch targets — 36px → 44px */
.navbar-nav .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* FINDING-012: Focus-visible rings for keyboard navigation */
.nav-link:focus-visible,
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid rgba(1, 38, 57, 0.6);
    outline-offset: 2px;
}

/* Design fixes — 2026-07-03 design review */

/* FINDING-005 (revised): Brand the Backpack admin to the SB Joinery identity.
   Canonical values from DESIGN.md (the project's source of truth):
     SB Navy #012639 (Pantone 539c)   ·   SB Gold #AB9767 (Pantone 7503c)
   Primary, links, active states and form focus move from default Tabler blue
   to the brand navy. Gold is used sparingly as an accent (link hover, active
   nav marker, active tab underline) so it reads as premium, not decorative. */
:root {
    --tblr-primary: #012639;
    --tblr-primary-rgb: 1, 38, 57;
    --tblr-link-color: #012639;
    --tblr-link-color-rgb: 1, 38, 57;
    /* Navy links sit close to the dark body text, so links resolve to brand
       gold on hover — both an affordance cue and a natural home for the accent. */
    --tblr-link-hover-color: #AB9767;
    --tblr-link-hover-color-rgb: 171, 151, 103;
}

/* Primary buttons: brand navy is near-black, so lift (not darken) on hover
   so the state change stays visible. */
.btn-primary {
    --tblr-btn-bg: #012639;
    --tblr-btn-border-color: #012639;
    --tblr-btn-hover-bg: #0a3750;
    --tblr-btn-hover-border-color: #0a3750;
    --tblr-btn-active-bg: #00141e;
    --tblr-btn-active-border-color: #00141e;
    --tblr-btn-disabled-bg: #012639;
    --tblr-btn-disabled-border-color: #012639;
}
.btn-outline-primary {
    --tblr-btn-color: #012639;
    --tblr-btn-border-color: #012639;
    --tblr-btn-hover-bg: #012639;
    --tblr-btn-hover-border-color: #012639;
    --tblr-btn-active-bg: #012639;
    --tblr-btn-active-border-color: #012639;
}

/* Gold accent: mark the active sidebar item with a brand-gold bar so the
   current section reads at a glance without shouting. */
.navbar-vertical .nav-item .nav-link.active,
.navbar-nav .nav-item .nav-link.active {
    box-shadow: inset 3px 0 0 0 #AB9767;
}

/* Gold accent: active project tab underline in brand gold. */
.tracker-tabs .nav-link.active {
    border-bottom: 2px solid #AB9767;
}

/* ── DESIGN.md alignment — Phase 3: Navy sidebar ────────────────────────
   The signature SB Joinery look: SB Navy #012639 sidebar with inverse text,
   gold active marker and gold section labels. */
.navbar-vertical.navbar-light,
.navbar-vertical {
    background-color: #012639 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
/* Nav links (and the account toggle) use inverse text. */
.navbar-vertical .nav-link {
    color: #C3CBD1;
}
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}
.navbar-vertical .nav-item .nav-link.active,
.navbar-vertical .navbar-nav .nav-link.active {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 3px 0 0 0 #AB9767;
}
/* Expanded (open) category toggles: Tabler colours .show toggles dark, which
   is invisible on navy once the mouse leaves. Keep them inverse. */
.navbar-vertical .nav-link.show,
.navbar-vertical .nav-link[aria-expanded="true"] {
    color: #C3CBD1 !important;
}
.navbar-vertical .nav-link.show:hover,
.navbar-vertical .nav-link[aria-expanded="true"]:hover {
    color: #ffffff !important;
}
/* Dropdown caret: Tabler recolours the ::after to --tblr-primary (navy) on
   hover, making it vanish against the navy sidebar. Pin its colour explicitly
   across every state so it stays visible. */
.navbar-vertical .nav-link.dropdown-toggle::after,
.navbar-vertical .nav-link.dropdown-toggle:hover::after,
.navbar-vertical .nav-link.dropdown-toggle:focus::after,
.navbar-vertical .nav-link.dropdown-toggle.show::after,
.navbar-vertical .nav-link.dropdown-toggle[aria-expanded="true"]::after {
    color: #C3CBD1 !important;
    border-top-color: #C3CBD1 !important;
}
/* Account toggle ("Demo User"): its .nav-link carries .text-reset, which
   forces color:inherit !important — override it and its children to light. */
.navbar-vertical .nav-link.text-reset,
.navbar-vertical .nav-link.text-reset * {
    color: #C3CBD1 !important;
}
/* Inline accordion submenu items (Departments → Projects/Design/…). Scoped to
   the vertical menu via :not(.flex-row) so the account popover (My Account /
   Logout, a light floating menu) keeps its default dark-on-white styling. */
.navbar-vertical .navbar-nav:not(.flex-row) .dropdown-item {
    color: #C3CBD1 !important;
}
.navbar-vertical .navbar-nav:not(.flex-row) .dropdown-item:hover,
.navbar-vertical .navbar-nav:not(.flex-row) .dropdown-item.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06);
}
/* Section separator labels ("Data", "Departments", …) in brand gold. */
.navbar-vertical .nav-separator {
    color: #AB9767;
    opacity: 1;
}
/* Brand logo: the shared project_logo is the dark version (for the light
   login/register pages); invert it to white inside the navy sidebar. */
.navbar-vertical .navbar-brand img {
    filter: brightness(0) invert(1);
}
/* Collapsed-width hamburger: Tabler renders the toggler icon dark, invisible
   on the navy bar. Force a white-stroke icon. */
.navbar-vertical .navbar-toggler {
    color: #ffffff;
}
.navbar-vertical .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* FINDING-007: Status badges. Tabler's default solid bright badges
   (bright green / orange) clash with the muted brand palette. Re-map the
   semantic badge colours to DESIGN.md's muted semantic set — soft tinted
   background + darker semantic text. Scoped to .badge so buttons/other
   utilities are unaffected. Higher specificity + !important beats Tabler's
   own !important bg utilities. */
.badge.bg-success {
    background-color: #D4EDDF !important;
    color: #2A7A4B !important;
}
.badge.bg-warning,
.badge.bg-warning.text-dark {
    background-color: #F5E6CC !important;
    color: #C27A1A !important;
}
.badge.bg-danger {
    background-color: #F5D4D4 !important;
    color: #A02828 !important;
}
.badge.bg-info {
    background-color: #D4E5F5 !important;
    color: #2E6B9E !important;
}
/* Completed / neutral — warm sunken tone with secondary-text navy-grey. */
.badge.bg-secondary {
    background-color: #E4DFD4 !important;
    color: #5A6A75 !important;
}

/* ── DESIGN.md alignment — Phase 1: Typography ──────────────────────────
   Montserrat for all UI/body/headings, Geist Mono for data. Fonts loaded via
   the @import at the top of this file. */
:root {
    --tblr-font-sans-serif: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --tblr-font-monospace: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    /* Dashboard data font. DESIGN.md specifies Geist Mono for tabular data;
       overridden to Arial here per explicit request (dashboard only — the
       rest of the app keeps --tblr-font-monospace / Geist Mono). Revert by
       setting this back to var(--tblr-font-monospace). */
    --sbj-mono: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
    font-family: var(--tblr-font-sans-serif);
}
/* DESIGN.md: headings Montserrat with 0.04em tracking. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--tblr-font-sans-serif);
    letter-spacing: 0.04em;
}
/* DESIGN.md: tabular numerals so ref codes, prices and dates align in tables. */
.table td, .table th {
    font-variant-numeric: tabular-nums;
}

/* ── DESIGN.md alignment — Phase 2: Warm background hierarchy ────────────
   Lightened one step from the raw DESIGN.md values (base #F5F0EB felt a touch
   dark for large surfaces): base #F9F5F0 (page) · surface #F1ECE4 (cards) ·
   sunken #E9E4D9 (stripes). Keeps the warm tonal ramp, just brighter. */
:root {
    --tblr-body-bg: #F9F5F0;
    --tblr-card-bg: #F1ECE4;
    --tblr-table-striped-bg: #E9E4D9;
    --tblr-border-color: #D4CFBF;
    --tblr-border-color-translucent: #D4CFBF;
}
body {
    background-color: #F9F5F0;
}
/* Cards/panels sit on the warm surface tone. */
.card {
    --tblr-card-bg: #F1ECE4;
    background-color: #F1ECE4 !important;
}
/* Tables sit on the warm surface so stripes read as a gentle warm two-tone
   rather than a harsh beige-on-white. */
.table {
    --tblr-table-bg: transparent;
}
/* Warm alternating table stripes (DESIGN.md: tables are the hero component). */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --tblr-table-accent-bg: #E9E4D9;
    background-color: #E9E4D9;
}

/* FINDING-008: Tighten list table rows. Backpack list cells carry ~16px
   vertical padding which, with Montserrat's taller metrics, made rows feel
   over-padded (~54px). Bring them to a comfortable ~40px while staying
   touch-friendly. */
.table > :not(caption) > * > *,
table.dataTable > tbody > tr > td,
table.dataTable > thead > tr > th {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
table.dataTable > tbody > tr > td {
    line-height: 1.35;
}

/* ────────────────────────────────────────────────────────────────────
   Dashboard (admin/dashboard) — DESIGN.md-compliant blocks.
   Approved mockup: ~/.gstack/projects/barter27293-sbj-app/designs/
   admin-dashboard-20260703/dashboard-mockup.html
   ──────────────────────────────────────────────────────────────────── */

/* 11px uppercase tracked mono label (DESIGN.md "Label" scale) */
.sbj-label {
    font-family: var(--sbj-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5A6A75;
}

/* KPI stat cards */
.sbj-kpi-value {
    font-family: var(--sbj-mono);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    color: #012639;
}
.sbj-kpi-sub {
    font-size: 13px;
    color: #5A6A75;
    margin-top: 6px;
    min-height: 20px;
}
a.sbj-kpi-card { text-decoration: none; color: inherit; }
a.sbj-kpi-card:hover { border-color: #D4C9AE; }

/* Semantic badges (4B: badges, never coloured card borders) */
.sbj-badge-error {
    display: inline-block;
    background: #F5D4D4;
    color: #A02828;
    font-family: var(--sbj-mono);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.sbj-badge-warning {
    display: inline-block;
    background: #F5E6CC;
    color: #C27A1A;
    font-family: var(--sbj-mono);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

/* CSS bar charts */
.sbj-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 96px;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.sbj-bar-track {
    background: #E9E4D9;
    border-radius: 4px;
    height: 20px;
    overflow: hidden;
}
.sbj-bar-fill { height: 100%; border-radius: 4px; }
.sbj-bar-value {
    font-family: var(--sbj-mono);
    font-size: 12px;
    text-align: right;
    color: #012639;
}
.sbj-bar-value small { color: #8C9AA3; display: block; font-size: 10px; }
.sbj-chart-footnote {
    font-family: var(--sbj-mono);
    font-size: 12px;
    color: #8C9AA3;
    margin-top: 12px;
}

/* Needs-attention rows (44px touch targets) */
.sbj-attn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
}
.sbj-attn-row:hover { background: #E8E0D0; color: inherit; }
.sbj-attn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Refs in navy 600 mono — SB Gold fails WCAG AA below ~18px on card surfaces */
.sbj-ref {
    font-family: var(--sbj-mono);
    font-size: 12px;
    font-weight: 600;
    color: #012639;
    flex-shrink: 0;
}
.sbj-attn-title {
    font-size: 13px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sbj-age { font-family: var(--sbj-mono); font-size: 12px; flex-shrink: 0; }
.sbj-age-error { color: #A02828; }
.sbj-age-warning { color: #C27A1A; }
.sbj-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #2A7A4B;
    font-size: 13px;
}
.sbj-attn-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    font-weight: 600;
    margin: 16px 0 4px;
}
.sbj-attn-heading:first-of-type { margin-top: 0; }
.sbj-attn-heading a { font-size: 12px; font-weight: 500; color: #2E6B9E; text-decoration: none; }

/* Activity feed */
.sbj-feed-row {
    display: block;
    min-height: 44px;
    padding: 8px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    color: inherit;
}
.sbj-feed-row:hover { background: #E8E0D0; color: inherit; }
.sbj-feed-when {
    font-family: var(--sbj-mono);
    font-size: 11px;
    color: #8C9AA3;
    display: block;
    margin-top: 2px;
}

/* Degraded-block panel */
.sbj-block-error {
    border: 1px dashed #D4CFBF;
    border-radius: 4px;
    padding: 12px;
    color: #5A6A75;
    font-size: 13px;
    background: #F9F5F0;
}

/* Quick-link pills */
.sbj-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.sbj-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #D4CFBF;
    background: #F1ECE4;
    border-radius: 9999px;
    padding: 6px 14px 6px 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: #012639;
    min-height: 44px;
}
.sbj-pill:hover { border-color: #D4C9AE; color: #012639; }
.sbj-pill-chip {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #012639;
    color: #AB9767;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Header controls */
.sbj-seg { display: inline-flex; border: 1px solid #D4CFBF; border-radius: 4px; overflow: hidden; }
.sbj-seg button {
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    color: #5A6A75;
    cursor: pointer;
    min-height: 36px;
}
.sbj-seg button[aria-pressed="true"] { background: #012639; color: #F5F0EB; }
.sbj-stamp {
    font-family: var(--sbj-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8C9AA3;
}

/* Gold focus rings (a11y package) — hover transitions ≤80ms per DESIGN.md */
.sbj-attn-row, .sbj-feed-row, .sbj-pill, a.sbj-kpi-card, .sbj-seg button { transition: background-color 80ms ease-out, border-color 80ms ease-out; }
.sbj-attn-row:focus-visible, .sbj-feed-row:focus-visible, .sbj-pill:focus-visible,
a.sbj-kpi-card:focus-visible, .sbj-seg button:focus-visible {
    outline: 2px solid #AB9767;
    outline-offset: 2px;
}

/* Responsive: 768–1199 charts/panels stack (Bootstrap col-lg handles it);
   <768 pills wrap, grids single-column via Bootstrap cols. */
@media (max-width: 575.98px) {
    .sbj-kpi-value { font-size: 24px; }
    .sbj-bar-row { grid-template-columns: 90px 1fr 80px; }
}

/* Breathing room around the dashboard date line (user request 2026-07-03) */
.sbj-dash-date {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Match the header's bottom breathing room to the card gutter (g-3 = 16px)
   so the toggle/Customise buttons don't crowd the KPI row (user request). */
.sbj-dash-header {
    margin-bottom: 1rem;
}

/* Design fixes — 2026-07-13 design review (admin polish) */

/* FINDING-001: Backpack's default CRUD save button ships Tabler green
   (.btn-success → #2FB344). DESIGN.md reserves green for the *success*
   semantic (badges/status) and mandates SB Navy for primary actions — so
   the most important control on every create/edit form was off-brand and
   fighting the navy "Add"/"Edit" buttons everywhere else. Re-skin the save
   buttons to brand navy, scoped to Backpack's #saveActions group so any
   genuine success button elsewhere keeps its green. Mirrors the .btn-primary
   treatment above (lift, don't darken, on hover). */
#saveActions .btn-success {
    --tblr-btn-bg: #012639;
    --tblr-btn-border-color: #012639;
    --tblr-btn-hover-bg: #0a3750;
    --tblr-btn-hover-border-color: #0a3750;
    --tblr-btn-active-bg: #00141e;
    --tblr-btn-active-border-color: #00141e;
    --tblr-btn-color: #F5F0EB;
    --tblr-btn-hover-color: #F5F0EB;
    --tblr-btn-active-color: #F5F0EB;
    /* Backpack disables the button while the form submits; without these the
       disabled state falls back to Tabler's green (#2FB344) — a muted green
       flash after clicking. Keep it navy like .btn-primary. */
    --tblr-btn-disabled-bg: #012639;
    --tblr-btn-disabled-border-color: #012639;
    --tblr-btn-disabled-color: #F5F0EB;
}