/*
 * Copyright © 1996 - 2026 Gousse & Gousse Inc. or its Affiliates., All Rights Reserved.
 *  author: Al D. Gousse
 *    site: www.goussecorp.com
 *   email: info@goussecorp.com
 *  twitter: @goussecorp
 **/

/* Dark theme for employee-facing admin/back-office pages only — the
   storefront keeps its light brand look; this file is loaded on admin_*
   and *_list/*_form back-office templates instead of (loaded after)
   style.css. Palette adapted from a reference dark theme the user pointed
   to (brass/gold accent, warm near-black paper, cream ink), reusing
   style.css's own custom-property names so its generic body/form/table/
   button rules re-color automatically. Foundation's own components
   (`.button`, `.label`, `.callout`, `.table`) don't consume those
   variables at all, so they need explicit overrides below. */
:root {
    color-scheme: dark;
    --ink: #ece5d3;
    --muted: #9aa3b2;
    --border: #333846;
    --bg: #14161d;
    --panel: #1c1f28;
    --panel-raised: #262a35;
    --accent: #c9974e;
    --accent-hover: #e8c184;
    --focus: #e8c184;
    --radius: 6px;
}

body {
    background: var(--bg);
    color: var(--ink);
}

/* Foundation ships its own hardcoded (non-variable) link and table-header
   colors at equal-or-higher specificity than style.css's variable-driven
   rules, so they need restating here rather than just redefining the
   variables above. */
a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-hover);
}

.table thead th,
table thead th {
    color: var(--muted);
    background: transparent;
}

/* Foundation's default label color is near-black — invisible on a dark
   page. Covers every form label, including checkbox/radio option labels. */
label {
    color: var(--ink);
}

::selection {
    background: var(--accent);
    color: #14161d;
}

/* ---------- Foundation form controls ---------- */
/* Foundation styles inputs/selects/textareas independently of style.css's
   own rules; without this they'd stay white regardless of the variables
   above. */
input,
select,
textarea {
    background-color: var(--panel) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

/* ---------- Foundation .button ---------- */
/* Foundation's plain `.button` (no color modifier) renders hollow/outline
   using a near-black text+border, which disappears against a dark page. */
.button {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #14161d;
}

.button:hover,
.button:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #14161d;
}

.button.alert {
    background-color: #b8493c;
    border-color: #b8493c;
    color: #fff2f0;
}

.button.alert:hover,
.button.alert:focus {
    background-color: #d4574a;
    border-color: #d4574a;
}

.button.secondary {
    background-color: var(--panel-raised);
    border-color: var(--border);
    color: var(--ink);
}

.button.secondary:hover,
.button.secondary:focus {
    background-color: var(--border);
}

/* ---------- Foundation .callout ---------- */
.callout {
    background-color: var(--panel-raised);
    border-color: var(--border);
    color: var(--ink);
}

.callout.alert {
    background-color: #3a2222;
    border-color: #7a3b32;
    color: #f3c9c2;
}

.pending-stock-note {
    color: #e8d488;
}

.callout.success {
    background-color: #1f3324;
    border-color: #3f6b4a;
    color: #bfe8ca;
}

/* ---------- Foundation .label / .badge status pills ---------- */
/* Same data-status values as admin-badges.css and style.css's `.badge`,
   re-keyed to readable light-text-on-dark-fill pairs instead of the
   light-mode pastel-bg/dark-text pairs. */
.label,
.badge {
    background-color: var(--panel-raised);
    border-color: var(--border);
    color: var(--muted);
}

.label[data-status="APPROVED"],
.label[data-status="PUBLISHED"],
.label[data-status="Active"],
.badge[data-status="APPROVED"],
.badge[data-status="PUBLISHED"],
.badge[data-status="Active"] {
    background-color: #1f3324;
    border-color: #3f6b4a;
    color: #8fd6a2;
}

.label[data-status="PENDING"],
.label[data-status="TEXT_REVIEW_PENDING"],
.label[data-status="IMAGE_REVIEW_PENDING"],
.label[data-status="FINAL_APPROVAL_PENDING"],
.label[data-status="NOT_STARTED"],
.badge[data-status="PENDING"],
.badge[data-status="TEXT_REVIEW_PENDING"],
.badge[data-status="IMAGE_REVIEW_PENDING"],
.badge[data-status="FINAL_APPROVAL_PENDING"],
.badge[data-status="NOT_STARTED"] {
    background-color: #3a3218;
    border-color: #7a6a30;
    color: #e8d488;
}

.label[data-status="REJECTED"],
.label[data-status="Disabled"],
.badge[data-status="REJECTED"],
.badge[data-status="Disabled"] {
    background-color: #3a2222;
    border-color: #7a3b32;
    color: #f3a89c;
}

.label[data-status="DRAFT"],
.badge[data-status="DRAFT"] {
    background-color: var(--panel-raised);
    border-color: var(--border);
    color: var(--muted);
}

/* Vendor onboarding-stage badges (admin_vendors_list.html) -- re-keyed to
   readable light-text-on-dark-fill pairs, same as every other status pill
   above; see admin-badges.css for why these are lowercase and separate from
   "Active"/"Disabled". */
.label[data-status="account_created"] {
    background-color: var(--panel-raised);
    border-color: var(--border);
    color: var(--muted);
}

.label[data-status="profile_complete"] {
    background-color: #1c3550;
    border-color: #2f5a86;
    color: #8fc1f3;
}

.label[data-status="agreement_accepted"] {
    background-color: #123c34;
    border-color: #2a6b5c;
    color: #7fdcc7;
}

.label[data-status="catalog_submitted"] {
    background-color: #2e2352;
    border-color: #5a3f96;
    color: #c6aef7;
}

.label[data-status="photos_uploaded"] {
    background-color: #3a3218;
    border-color: #7a6a30;
    color: #e8d488;
}

.label[data-status="active"] {
    background-color: #1f3324;
    border-color: #3f6b4a;
    color: #8fd6a2;
}

/* ---------- Vendor portal monitoring dashboard (admin_vendors_list.html) ----------
   Plain-CSS stat cards + horizontal bar chart -- no JS/charting library, per
   the task's "matches this app's existing no-build-step template approach"
   instruction. Uses the same panel/border/accent variables as the rest of
   this dark theme so it doesn't need its own color system. */
.stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px 0 24px;
}

.stat-card {
    background: var(--panel-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    min-width: 200px;
}

.stat-card .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}

.stat-card .stat-label {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 4px;
}

.stage-bars {
    margin-bottom: 24px;
}

.stage-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.stage-bar-label {
    flex: 0 0 170px;
    text-align: right;
}

.stage-bar-track {
    flex: 1 1 auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    height: 14px;
    overflow: hidden;
}

.stage-bar-fill {
    height: 100%;
    background-color: var(--panel-raised);
    /* Width is set via a static `.w-N` class (below), never an inline
       `style="width: N%"` -- this app's CSP (`default-src 'self'`, no
       `style-src`/`unsafe-inline`) silently drops inline style attributes,
       which is what a first pass at this bar chart used and every bar
       rendered full-width regardless of its real percentage. */
    transition: width 0.2s ease;
}

/* Percent-width buckets in steps of 5, 0-100 -- `vendor_admin.rs` rounds
   each stage's share of the vendor total to the nearest one of these. */
.w-0 { width: 0; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.stage-bar-fill[data-status="account_created"] { background-color: var(--muted); }
.stage-bar-fill[data-status="profile_complete"] { background-color: #2f5a86; }
.stage-bar-fill[data-status="agreement_accepted"] { background-color: #2a6b5c; }
.stage-bar-fill[data-status="catalog_submitted"] { background-color: #5a3f96; }
.stage-bar-fill[data-status="photos_uploaded"] { background-color: #7a6a30; }
.stage-bar-fill[data-status="active"] { background-color: #3f6b4a; }

.stage-bar-count {
    flex: 0 0 32px;
    text-align: right;
    color: var(--muted);
}

/* ---------- Foundation .table ---------- */
table.table,
table {
    background-color: var(--panel);
    color: var(--ink);
    border-color: var(--border);
}

table.table thead,
table thead {
    background-color: var(--panel-raised);
}

/* Foundation ships its own odd/even row-striping default (a light color on
   odd rows) with enough specificity to beat a table-level background-color
   alone, so both parities need an explicit override here, not just even. */
table.table tbody tr:nth-child(odd),
table tbody tr:nth-child(odd) {
    background-color: var(--panel);
}

table.table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background-color: var(--panel-raised);
}

table.table td,
table.table th,
table td,
table th {
    border-color: var(--border);
    color: inherit;
}

/* ---------- Foundation fieldset/legend ---------- */
fieldset {
    border-color: var(--border);
}

legend {
    color: var(--ink);
    background-color: transparent;
}

/* Marks the cost/markup section on product_form.html as visibly distinct
   from the regular product-detail form — a plain gold accent border rather
   than a full callout, since it's not a warning, just clearly "different
   from what other employees see". */
.admin-only-panel fieldset {
    border-left: 3px solid var(--accent);
}

.admin-only-panel legend {
    color: var(--accent);
}

/*
 * Copyright © 1996 - 2026 Gousse & Gousse Inc. or its Affiliates., All Rights Reserved.
 *  author: Al D. Gousse
 *    site: www.goussecorp.com
 *   email: info@goussecorp.com
 *  twitter: @goussecorp
 **/

/* Portal hub page (portal_hub.html) — crest logo and centered header text.
   Uses real CSS classes rather than inline style attributes because this
   app's CSP has no style-src/unsafe-inline, so inline styles are silently
   dropped (see the same fix already applied to admin-badges.css). */
.portal-logo-wrap {
    text-align: center;
    margin-bottom: 16px;
}

.portal-logo {
    max-width: 160px;
    height: auto;
}

.portal-hub-heading {
    text-align: center;
}

.portal-tagline {
    text-align: center;
    font-style: italic;
}