/* ==========================================================================
   P9 Theme — "Paper & Ink" design system for the whole application
   --------------------------------------------------------------------------
   Loaded AFTER bootstrap + custom.css in every wrapper, this layer re-skins
   the entire app (public pages, auth pages, dashboard) to match the 2026
   landing redesign: paper surfaces, ink typography, green accent, pill
   buttons, soft 18px cards, mono kickers.

   Architecture:
   1. Design tokens        — override Bootstrap's :root variables
   2. Typography           — Space Grotesk display / Plus Jakarta Sans body
   3. Components           — buttons, cards, forms, tables, modals, alerts…
   4. App chrome           — navbar, sidebar, footer
   5. Accessibility        — focus rings, reduced motion
   6. Dark mode            — brand-aligned dark variant
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (light theme)
   -------------------------------------------------------------------------- */
:root,
[data-theme-style="light"] {
    /* Brand surface + ink */
    --p9-paper:      #f4f2ec;
    --p9-paper-2:    #ecebe4;
    --p9-card:       #ffffff;
    --p9-ink:        #0c0c0c;
    --p9-ink-2:      #3a3a3a;
    --p9-ink-3:      #6c6c66;
    --p9-line:       rgba(12,12,12,0.10);
    --p9-line-2:     rgba(12,12,12,0.18);
    --p9-accent:     #00c853;
    --p9-accent-ink: #003a1a;
    --p9-accent-2:   #ff5b2e;
    --p9-warn:       #ffbf3c;

    /* Radii + shadows */
    --p9-radius:     18px;
    --p9-radius-sm:  12px;
    --p9-shadow-soft: 0 1px 0 rgba(12,12,12,0.04), 0 14px 40px -20px rgba(12,12,12,0.18);
    --p9-shadow-card: 0 1px 0 rgba(12,12,12,0.05), 0 30px 60px -30px rgba(12,12,12,0.22);

    /* ---- Remap Bootstrap's variable system to the brand ---- */
    --primary: #00a346;                 /* WCAG AA on white for text/links */
    --primary-50:  #f0fdf4;
    --primary-100: #dcfce9;
    --primary-200: #bbf7d3;
    --primary-300: #86efad;
    --primary-400: #4ade7f;
    --primary-600: #008a3c;
    --primary-700: #007233;
    --primary-800: #005c2b;
    --primary-900: #003a1a;

    --secondary: #6c6c66;
    --success: #00a346;
    --danger:  #d44516;
    --warning: #ffbf3c;
    --info:    #13357a;
    --dark:    #0c0c0c;
    --light:   #f4f2ec;

    /* Warm paper-toned gray scale (replaces the cold blue-gray ramp) */
    --white:    #ffffff;
    --gray-50:  #faf9f5;
    --gray-100: #f4f2ec;
    --gray-200: #ecebe4;
    --gray-300: #dedcd2;
    --gray-400: #b9b7ac;
    --gray-500: #96948a;
    --gray-600: #6c6c66;
    --gray-700: #4c4c48;
    --gray-800: #2c2c2a;
    --gray-900: #0c0c0c;

    --font-family-sans-serif: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-monospace: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   -------------------------------------------------------------------------- */
body {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--gray-900);
    background: var(--gray-100);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}

code, pre, kbd, .text-monospace {
    font-family: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
}

a { color: var(--primary-600); }
a:hover { color: var(--primary-700); }

::selection { background: rgba(0,200,83,0.25); }

/* --------------------------------------------------------------------------
   3. COMPONENTS
   -------------------------------------------------------------------------- */

/* ---- Buttons: pill silhouette, ink primary, ghost outline ---- */
.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:not(.btn-sm):not(.btn-lg) { padding: .5rem 1.25rem; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--gray-900);
    border-color: var(--gray-900);
    color: var(--p9-paper, #f4f2ec);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 12px 28px -12px rgba(12,12,12,0.5);
}
.btn-primary:hover, .btn-primary:focus {
    background: #1c1c1c;
    border-color: #1c1c1c;
    color: #f4f2ec;
}

.btn-outline-primary {
    color: var(--gray-900);
    border-color: var(--p9-line-2, rgba(12,12,12,0.18));
    background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background: rgba(12,12,12,0.05);
    border-color: var(--gray-900);
    color: var(--gray-900);
}

.btn-success,
.btn-success:not(:disabled):not(.disabled):active {
    background: var(--p9-accent, #00c853);
    border-color: var(--p9-accent, #00c853);
    color: var(--p9-accent-ink, #003a1a);
    font-weight: 700;
}
.btn-success:hover, .btn-success:focus { background: #00b34a; border-color: #00b34a; color: #003a1a; }

.btn-light, .btn-gray-200 {
    background: var(--gray-200);
    border-color: var(--gray-200);
    color: var(--gray-800);
}
.btn-light:hover, .btn-gray-200:hover { background: var(--gray-300); border-color: var(--gray-300); color: var(--gray-900); }

.btn-link { color: var(--primary-600); }

/* ---- Cards: soft radius, hairline borders, gentle hover lift ---- */
.card {
    border-radius: var(--p9-radius, 18px);
    border: 1px solid var(--p9-line, rgba(12,12,12,0.10));
    background: var(--white);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--p9-line, rgba(12,12,12,0.10));
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
}
.card-footer { background: transparent; border-top: 1px solid var(--p9-line, rgba(12,12,12,0.10)); }

/* resource cards used on links / qr-codes / barcodes listing pages */
.card.link-card,
[data-links] .card,
[data-qr-codes] .card {
    transition: transform .18s ease, box-shadow .18s ease;
}
.card.link-card:hover,
[data-links] .card:hover,
[data-qr-codes] .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--p9-shadow-soft);
}

/* ---- Forms: 12px radius, generous padding, brand focus ring ---- */
.form-control, .custom-select {
    border-radius: var(--p9-radius-sm, 12px);
    border: 1.5px solid var(--p9-line-2, rgba(12,12,12,0.18));
    background-color: var(--white);
    color: var(--gray-900);
    padding: .55rem .9rem;
    height: auto;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--gray-900);
    box-shadow: 0 0 0 3px rgba(0,200,83,0.25);
    background-color: var(--white);
}
.form-control::placeholder { color: var(--gray-500); }

label, .col-form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--gray-800);
}

.input-group-text {
    border-radius: var(--p9-radius-sm, 12px);
    border: 1.5px solid var(--p9-line-2, rgba(12,12,12,0.18));
    background: var(--gray-100);
    color: var(--gray-600);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--p9-accent, #00c853);
    border-color: var(--p9-accent, #00c853);
}
.custom-switch .custom-control-label::before { border-radius: 999px; }

/* select2 (used across the app) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--p9-radius-sm, 12px) !important;
    border: 1.5px solid var(--p9-line-2, rgba(12,12,12,0.18)) !important;
    background: var(--white) !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--gray-900) !important;
    box-shadow: 0 0 0 3px rgba(0,200,83,0.25);
}
.select2-dropdown {
    border-radius: var(--p9-radius-sm, 12px) !important;
    border: 1px solid var(--p9-line, rgba(12,12,12,0.10)) !important;
    box-shadow: var(--p9-shadow-soft);
}

/* ---- Dropdowns ---- */
.dropdown-menu {
    border-radius: 14px;
    border: 1px solid var(--p9-line, rgba(12,12,12,0.10));
    box-shadow: var(--p9-shadow-card);
    padding: .5rem;
}
.dropdown-item {
    border-radius: 10px;
    padding: .5rem .75rem;
    font-weight: 500;
    color: var(--gray-800);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--gray-100); color: var(--gray-900); }
.dropdown-item.active, .dropdown-item:active {
    background: var(--gray-900);
    color: var(--p9-paper, #f4f2ec);
}
.dropdown-divider { border-color: var(--p9-line, rgba(12,12,12,0.10)); }

/* ---- Modals ---- */
.modal-content {
    border-radius: 20px;
    border: 1px solid var(--p9-line, rgba(12,12,12,0.10));
    box-shadow: var(--p9-shadow-card);
}
.modal-header { border-bottom: 1px solid var(--p9-line, rgba(12,12,12,0.10)); }
.modal-footer { border-top: 1px solid var(--p9-line, rgba(12,12,12,0.10)); }
.modal-backdrop.show { opacity: .35; }

/* ---- Tables ---- */
.table thead th {
    font-family: "JetBrains Mono", monospace;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-600);
    border-top: 0;
    border-bottom: 1px solid var(--p9-line, rgba(12,12,12,0.10));
    font-weight: 600;
}
.table td { border-color: var(--p9-line, rgba(12,12,12,0.10)); vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--gray-50); }

/* ---- Alerts / notifications ---- */
.alert { border-radius: var(--p9-radius-sm, 12px); border-width: 1px; font-weight: 500; }
.alert-success { background: #f0fdf4; border-color: rgba(0,200,83,0.35); color: #005c2b; }
.alert-danger  { background: #fef2ee; border-color: rgba(212,69,22,0.35); color: #9a3412; }
.alert-warning { background: #fffaf0; border-color: rgba(255,191,60,0.5);  color: #92600a; }
.alert-info    { background: #eef2ff; border-color: rgba(19,53,122,0.25);  color: #13357a; }

/* ---- Badges ---- */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: .02em; padding: .35em .7em; }
.badge-primary { background: var(--p9-accent, #00c853); color: var(--p9-accent-ink, #003a1a); }
.badge-light { background: var(--gray-200); color: var(--gray-700); }

/* ---- Pagination ---- */
.page-link {
    border-radius: 10px;
    margin: 0 2px;
    border: 1px solid var(--p9-line, rgba(12,12,12,0.10));
    color: var(--gray-800);
    font-weight: 600;
}
.page-item.active .page-link {
    background: var(--gray-900);
    border-color: var(--gray-900);
    color: var(--p9-paper, #f4f2ec);
}
.page-link:hover { background: var(--gray-100); color: var(--gray-900); }

/* ---- Nav tabs / pills ---- */
.nav-tabs { border-bottom: 1px solid var(--p9-line, rgba(12,12,12,0.10)); }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--gray-600);
    font-weight: 600;
}
.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--p9-accent, #00c853);
    color: var(--gray-900);
}
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--gray-700); }
.nav-pills .nav-link.active { background: var(--gray-900); color: var(--p9-paper, #f4f2ec); }

/* ---- Progress ---- */
.progress { border-radius: 999px; background: var(--gray-200); height: 8px; }
.progress-bar { background: var(--p9-accent, #00c853); border-radius: 999px; }

/* ---- Tooltips / popovers ---- */
.tooltip-inner {
    background: #0c0c0c;
    color: #f4f2ec;
    border-radius: 8px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
}
[data-theme-style="dark"] .tooltip-inner { background: #f4f2ec; color: #0c0c0c; }
.popover { border-radius: 14px; border: 1px solid var(--p9-line, rgba(12,12,12,0.10)); box-shadow: var(--p9-shadow-soft); }

/* --------------------------------------------------------------------------
   4. APP CHROME
   -------------------------------------------------------------------------- */

/* ---- Public navbar (menu.php) — the landing handoff's nav: full-width,
   sticky, translucent paper with a hairline bottom border ---- */
.p9-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 64px;
    padding-top: .4rem;
    padding-bottom: .4rem;
    background: rgba(244,242,236,0.88);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--p9-line, rgba(12,12,12,0.10));
}
[data-theme-style="dark"] .p9-nav {
    background: rgba(18,18,16,0.88);
    border-bottom-color: rgba(255,255,255,0.09);
}
.p9-nav .navbar-brand {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}
.p9-nav .navbar-logo { max-height: 32px; width: auto; }
.p9-nav .nav-link {
    font-weight: 600;
    font-size: .92rem;
    color: var(--gray-700);
    border-radius: 999px;
    padding: .45rem .85rem !important;
    transition: background .15s ease, color .15s ease;
}
.p9-nav .nav-link:hover { background: var(--gray-200); color: var(--gray-900); }
.p9-nav .navbar-nav { align-items: center; gap: .1rem; }
.p9-nav .navbar-custom-toggler { color: var(--gray-900); }
.p9-nav .dropdown-menu { margin-top: .65rem; }
/* Mobile: expanded menu items stack left-aligned with room to tap */
@media (max-width: 991.98px) {
    .p9-nav .navbar-nav { align-items: stretch; }
    .p9-nav .navbar-collapse { padding: .75rem 0 .5rem; }
    .p9-nav .nav-link { border-radius: 12px; }
}
.navbar-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* ---- App sidebar (app_sidebar.php) ---- */
.app, body.altum-app { background: var(--gray-100); }
.app-sidebar {
    background: var(--white);
    border-right: 1px solid var(--p9-line, rgba(12,12,12,0.10));
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}
.app-sidebar-title { padding: 1.4rem 1.4rem 1rem; }
.app-sidebar-links { padding: 0 .8rem; }
.app-sidebar-links li { border-radius: 12px; margin-bottom: 2px; }
.app-sidebar-links li a {
    border-radius: 12px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--gray-700);
    transition: background .12s ease, color .12s ease;
}
.app-sidebar-links li a:hover { background: var(--gray-100); color: var(--gray-900); }
.app-sidebar-links li.active { background: transparent; }
.app-sidebar-links li.active > a:first-child {
    background: var(--gray-900);
    color: var(--p9-paper, #f4f2ec);
    position: relative;
}
.app-sidebar-links li.active > a:first-child .fas,
.app-sidebar-links li.active > a:first-child .fab { color: var(--p9-accent, #00c853); }

/* "Green light" active indicator — the glowing bar from the landing dashboard
   mock, with a soft breathing pulse */
.app-sidebar-links li.active > a:first-child::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--p9-accent, #00c853);
    animation: p9-sidebar-light 2.4s ease-in-out infinite;
}
[dir="rtl"] .app-sidebar-links li.active > a:first-child::before { left: auto; right: 5px; }
@keyframes p9-sidebar-light {
    0%, 100% { opacity: 1;   box-shadow: 0 0 4px rgba(0,200,83,0.45); }
    50%      { opacity: .65; box-shadow: 0 0 10px rgba(0,200,83,0.8); }
}
@media (prefers-reduced-motion: reduce) {
    .app-sidebar-links li.active > a:first-child::before { animation: none; }
}

/* Section label inside the sidebar (progressive disclosure group) */
.p9-sidebar-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .55rem .9rem;
    border: 0;
    background: transparent;
    border-radius: 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gray-500);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.p9-sidebar-section:hover { color: var(--gray-800); background: var(--gray-100); }
.p9-sidebar-section .p9-caret { transition: transform .2s ease; font-size: .8rem; }
.p9-sidebar-section[aria-expanded="true"] .p9-caret { transform: rotate(180deg); }

/* Items inside the collapsible "More tools" group: the stock sidebar styles
   use strict child combinators (.app-sidebar-links > li > a) which do not
   reach these nested items — restore the exact same anatomy here, slightly
   indented to read as a subgroup. */
.app-sidebar-links #p9_more_tools > li {
    width: 100%;
    padding: .25rem .75rem .5rem 1.1rem;
    list-style: none;
}
.app-sidebar-links #p9_more_tools > li > a {
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 500;
    padding: .75rem 1rem;
    color: var(--gray-600);
    transition: background .12s ease, color .12s ease;
}
.app-sidebar-links #p9_more_tools > li > a:hover {
    background: var(--gray-100);
    color: var(--gray-700);
    text-decoration: none;
}
.app-sidebar-links #p9_more_tools > li > a.default { width: auto; }

.app-sidebar-footer { border-top: 1px solid var(--p9-line, rgba(12,12,12,0.10)); }
.app-sidebar-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }

/* ---- Page headers used across app views ---- */
.altum-title, .page-header h1 {
    font-family: "Space Grotesk", sans-serif;
    letter-spacing: -0.02em;
}

/* breadcrumbs → quiet mono trail */
.breadcrumb {
    background: transparent;
    padding-left: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: .75rem;
    letter-spacing: .05em;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--gray-400); }
.breadcrumb-item.active { color: var(--gray-600); }

/* ---- Footer: see section 9 ---- */

/* ---- Icon tiles (mirror of the landing's .index-icon-container) ---- */
.index-icon-container, .qr-template-icon, .icon-tile {
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITY (2026 baseline)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--p9-accent, #00c853);
    outline-offset: 2px;
}
.btn:focus { box-shadow: none; } /* kill Bootstrap's blue glow; focus-visible ring above covers keyboards */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Larger tap targets on touch devices */
@media (pointer: coarse) {
    .btn, .nav-link, .dropdown-item, .page-link { min-height: 44px; display: inline-flex; align-items: center; }
    .dropdown-item { display: flex; }
}

/* --------------------------------------------------------------------------
   6. DARK MODE — brand-aligned ink surfaces, same accent
   -------------------------------------------------------------------------- */
[data-theme-style="dark"] {
    --p9-paper:   #121210;
    --p9-paper-2: #1a1a18;
    --p9-card:    #1e1e1c;
    --p9-line:    rgba(255,255,255,0.09);
    --p9-line-2:  rgba(255,255,255,0.16);

    --primary: #00c853;
    --primary-50: #0c2b18;
    --primary-100: #0c2b18;
    --primary-600: #00e25e;

    --gray-50:  #161614;
    --gray-100: #1a1a18;
    --gray-200: #242422;
    --gray-300: #32322f;
    --gray-400: #565650;
    --gray-500: #7c7c74;
    --gray-600: #9c9c93;
    --gray-700: #c2c2b8;
    --gray-800: #e4e2da;
    --gray-900: #f4f2ec;
    --white: #1e1e1c;
}

[data-theme-style="dark"] body { background: #121210; color: #e4e2da; }
[data-theme-style="dark"] .card,
[data-theme-style="dark"] .modal-content,
[data-theme-style="dark"] .dropdown-menu,
[data-theme-style="dark"] .app-sidebar {
    background: #1e1e1c;
    border-color: rgba(255,255,255,0.09);
}
[data-theme-style="dark"] .btn-primary {
    background: var(--p9-accent, #00c853);
    border-color: var(--p9-accent, #00c853);
    color: #003a1a;
}
[data-theme-style="dark"] .btn-primary:hover { background: #00e25e; border-color: #00e25e; color: #003a1a; }
[data-theme-style="dark"] .form-control,
[data-theme-style="dark"] .custom-select {
    background-color: #161614;
    border-color: rgba(255,255,255,0.16);
    color: #e4e2da;
}
[data-theme-style="dark"] .table td { border-color: rgba(255,255,255,0.09); }
[data-theme-style="dark"] .app-sidebar-links li.active > a:first-child { background: #f4f2ec; color: #0c0c0c; }

/* --------------------------------------------------------------------------
   7. AUDIT FIXES — compiled Bootstrap hardcodes the old indigo into utility
   classes as !important literals; repaint them with the brand variables.
   -------------------------------------------------------------------------- */

/* Disabled primary buttons (auth cooldowns, lockouts) leaked old indigo */
.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--gray-900);
    border-color: var(--gray-900);
    color: var(--p9-paper, #f4f2ec);
    box-shadow: none;
    opacity: .55;
}
[data-theme-style="dark"] .btn-primary.disabled,
[data-theme-style="dark"] .btn-primary:disabled {
    background: var(--p9-accent, #00c853);
    border-color: var(--p9-accent, #00c853);
    color: var(--p9-accent-ink, #003a1a);
    box-shadow: none;
    opacity: .55;
}

/* Focus halo on primary buttons was the old indigo glow */
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 12px 28px -12px rgba(12,12,12,0.5);
}

/* Primary color utilities — compiled as static indigo hsl() !important */
.text-primary { color: var(--primary-600, #008a3c) !important; }
.text-primary-600 { color: var(--primary-600, #008a3c) !important; }
.bg-primary-50, .bg-primary-50:hover { background-color: var(--primary-50, #f0fdf4) !important; }
.bg-primary-100, .bg-primary-100:hover,
a.bg-primary-100:focus, button.bg-primary-100:hover, button.bg-primary-100:focus { background-color: var(--primary-100, #dcfce9) !important; }
.border-primary { border-color: var(--primary) !important; }

/* Sidebar "create" pill active state: bg-primary text-white was white-on-green
   (fails AA); pair the accent with its ink instead. */
.app-sidebar a.bg-primary,
.app-sidebar a.bg-primary.text-white {
    background-color: var(--p9-accent, #00c853) !important;
    color: var(--p9-accent-ink, #003a1a) !important;
}

/* badge-info compiled to cold cyan — align with the theme's navy info hue */
.badge-info { background: #eef2ff; color: #13357a; }
[data-theme-style="dark"] .badge-info { background: #1b2540; color: #aecbfa; }

/* Barcode preview SVGs have black bars on transparent bg — invisible on dark
   ink cards. Give them a deliberate white plate. */
img.barcode, #barcode { background: #ffffff; padding: .5rem; border-radius: 12px; }

/* Inlined illustration SVGs (404 page) keep cold hardcoded fills — retint via
   attribute selectors so they follow the palette in both modes. */
.card svg [fill="#3f3d56"] { fill: var(--gray-800); }
.card svg [fill="#f2f2f2"], .card svg [fill="#f0f0f0"] { fill: var(--gray-200); }
.card svg [fill="#e4e4e4"], .card svg [fill="#ccc"], .card svg [fill="#cacaca"] { fill: var(--gray-300); }

/* --------------------------------------------------------------------------
   8. AUDIT FIXES (round 2) — remaining compiled-palette leaks
   -------------------------------------------------------------------------- */

/* Badges kept the old cool mint/crimson/cyan pastels */
.badge-success { background: var(--primary-100, #dcfce9); color: var(--primary-800, #005c2b); }
[data-theme-style="dark"] .badge-success { background: #0c2b18; color: #00e25e; }
.badge-danger { background: #fef2ee; color: #9a3412; }
[data-theme-style="dark"] .badge-danger { background: #3a1a0e; color: #ff8470; }
.badge-warning { background: #fffaf0; color: #92600a; }
[data-theme-style="dark"] .badge-warning { background: #33270e; color: #ffd47f; }

/* Secondary / dark / outline buttons kept cold blue-gray compiled values */
.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active {
    background: var(--gray-200); border-color: var(--gray-200); color: var(--gray-800);
}
.btn-secondary:hover, .btn-secondary:focus { background: var(--gray-300); border-color: var(--gray-300); color: var(--gray-900); }
.btn-outline-secondary { color: var(--gray-700); border-color: var(--p9-line-2, rgba(12,12,12,0.18)); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background: var(--gray-200); border-color: var(--gray-300); color: var(--gray-900);
}
.btn-dark,
.btn-dark:not(:disabled):not(.disabled):active {
    background: var(--gray-900); border-color: var(--gray-900); color: var(--p9-paper, #f4f2ec);
}
.btn-outline-success { color: var(--primary-700, #007233); border-color: var(--primary, #00a346); }
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-success:not(:disabled):not(.disabled):active {
    background: var(--p9-accent, #00c853); border-color: var(--p9-accent, #00c853); color: var(--p9-accent-ink, #003a1a);
}
.btn-danger,
.btn-danger:not(:disabled):not(.disabled):active {
    background: var(--danger, #d44516); border-color: var(--danger, #d44516); color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus { background: #b93a10; border-color: #b93a10; color: #ffffff; }

/* Text/border utilities compiled to indigo/crimson/cyan literals */
.text-danger { color: var(--danger, #d44516) !important; }
.text-primary-900 { color: var(--primary-900, #003a1a) !important; }
[data-theme-style="dark"] .text-primary-900 { color: var(--primary-600, #00e25e) !important; }
.border-info { border-color: var(--info, #13357a) !important; }

/* Dark mode: fill the full green ramp (pickers reference --primary-700/800/900)
   and stop .bg-white painting stark white cards on ink surfaces */
[data-theme-style="dark"] {
    --primary-200: #0f3a20;
    --primary-300: #14532d;
    --primary-400: #166534;
    --primary-700: #00c853;
    --primary-800: #4ade7f;
    --primary-900: #86efad;
}
[data-theme-style="dark"] .bg-white { background-color: #1e1e1c !important; }

/* Spotlight overlay scrim: cold white haze → soft ink veil that works on paper */
.spotlight-overlay, #spotlight_overlay { background: rgba(12,12,12,0.35) !important; }

/* --------------------------------------------------------------------------
   9. FOOTER — light and coherent with the paper theme: quiet hairline-topped
   section on the page background, ink headings, muted links, mono copyright
   -------------------------------------------------------------------------- */
.app-footer {
    background: transparent;
    color: var(--gray-600);
    border: 0 !important;
    border-top: 1px solid var(--p9-line, rgba(12,12,12,0.10)) !important;
    border-radius: 0;
    padding: 2.5rem 0 1.25rem !important;
    margin-top: 3rem;
}
.app-footer a { color: var(--gray-600); }
.app-footer a:hover { color: var(--gray-900); text-decoration: none; }
.app-footer .footer-heading, .app-footer .footer-heading span { color: var(--gray-900); }
.app-footer .font-weight-600 { color: var(--gray-900); }
.app-footer .footer-logo { max-height: 36px; width: auto; }
.app-footer .font-size-xs {
    font-family: "JetBrains Mono", monospace;
    font-size: .72rem !important;
    letter-spacing: .05em;
    color: var(--gray-500) !important;
}
.app-footer .btn-link { color: var(--gray-600); }
.app-footer .btn-link:hover { color: var(--gray-900); }
.app-footer .footer-social-wrapper { border-radius: 10px; }
[data-theme-style="dark"] .app-footer { border-top-color: rgba(255,255,255,0.09) !important; }

/* --------------------------------------------------------------------------
   10. KPI TILES — the stat-tile anatomy promised by the landing dashboard mock
   -------------------------------------------------------------------------- */
.p9-kpi .p9-kpi-label {
    font-family: "JetBrains Mono", monospace;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-600);
    margin-bottom: .35rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p9-kpi .p9-kpi-value {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--gray-900);
}
.p9-kpi .p9-kpi-delta {
    font-family: "JetBrains Mono", monospace;
    font-size: .75rem;
    color: var(--p9-accent, #00c853);
    margin-top: .25rem;
}
.p9-kpi .p9-kpi-delta.is-down { color: var(--danger, #d44516); }
.p9-kpi-dark .p9-kpi-delta.is-down { color: #ff8470; }

/* Dark hero variant — the dashboard's headline scans tile */
.p9-kpi-dark {
    background: #0c0c0c !important;
    border-color: #0c0c0c !important;
    position: relative;
    overflow: hidden;
}
.p9-kpi-dark::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 90% 0%, rgba(0,200,83,0.22), transparent 55%);
    pointer-events: none;
}
.p9-kpi-dark .p9-kpi-label { color: rgba(244,242,236,0.55); }
.p9-kpi-dark .p9-kpi-value { color: #f4f2ec; font-size: 2.4rem; }
.p9-kpi-dark .p9-kpi-cta {
    background: var(--p9-accent, #00c853);
    color: var(--p9-accent-ink, #003a1a);
    font-weight: 700;
    position: relative; z-index: 1;
    white-space: nowrap;
}
.p9-kpi-dark .p9-kpi-cta:hover { background: #00b34a; color: var(--p9-accent-ink, #003a1a); }

/* Dashboard stat widgets: bump the number to display type */
[id^="total_"] .h6 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}