/* ==========================================================================
   Verdora brand system  —  "Commerce, composed."
   Palette: Porcelain Atelier (see branding/verdora_luxury_assurance_brand_guide.pdf)
   This file is the single source of truth for brand tokens, typography,
   reusable component classes, and the splash/hero motion.
   Utility colors are also exposed to Tailwind via the tailwind.config block
   in base.html (bg-porcelain, text-graphite, bg-champagne, ...).
   ========================================================================== */

:root {
    --porcelain:   #F4EFE5;   /* page ground                     */
    --mist:        #F9F6EF;   /* raised surfaces / centre bloom  */
    --champagne:   #B79A5B;   /* metal accent ONLY (rules, ring) */
    --graphite:    #24302F;   /* ink / text / dark bars          */
    --graphite-soft:#2E3B39;  /* nav bar, one step off graphite  */
    --sage:        #84927D;   /* secondary text                  */
    --sage-deep:   #4B564C;   /* muted body / positive           */
    --oxblood:     #6A2E2A;   /* restrained destructive accent   */
    --line:        #24302f1f; /* hairline borders (graphite 12%) */
}

:root { color-scheme: light; }

html, body {
    background: var(--porcelain);
    color: var(--graphite);
}
body { font-family: 'Jost', system-ui, -apple-system, sans-serif; }

.font-display { font-family: 'Playfair Display', Georgia, serif; }

/* --- Reusable components (swap Tailwind button clusters onto these) ------- */

.v-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.55rem 1.15rem; border-radius: 0.375rem;
    font-size: 0.85rem; letter-spacing: 0.02em; line-height: 1;
    border: 1px solid transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
    cursor: pointer; text-decoration: none;
}
/* primary: graphite fill, champagne is a thin accent on hover (per brand guide) */
.v-btn-primary { background: var(--graphite); color: var(--porcelain); }
.v-btn-primary:hover { background: #1b2423; box-shadow: inset 0 -2px 0 0 var(--champagne); }

/* secondary / neutral: outlined graphite on porcelain */
.v-btn-secondary { background: transparent; color: var(--graphite); border-color: var(--line); }
.v-btn-secondary:hover { border-color: var(--champagne); }

/* positive (enable / save-path): sage, still quiet */
.v-btn-positive { background: var(--sage-deep); color: var(--mist); }
.v-btn-positive:hover { background: #3d473e; }

/* destructive (logout / disable): restrained oxblood, never bright red */
.v-btn-danger { background: var(--oxblood); color: var(--mist); }
.v-btn-danger:hover { background: #571f1c; }

/* caution (password reset): porcelain w/ champagne edge */
.v-btn-caution { background: var(--mist); color: var(--graphite); border-color: var(--champagne); }
.v-btn-caution:hover { background: #efe7d6; }

.v-btn:disabled, .v-btn.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* surfaces */
.v-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: 0.5rem; box-shadow: 0 1px 2px #24302f0d;
}

/* form controls */
.v-input {
    width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem;
    border: 1px solid var(--line); background: #fff; color: var(--graphite);
}
.v-input:focus {
    outline: none; border-color: var(--champagne);
    box-shadow: 0 0 0 2px #b79a5b40;
}

/* Nudge form-control accents from browser-blue toward champagne.
   accent-color recolors checkboxes / radios / range in all modern browsers
   (it does NOT affect the <select> popup). option:checked/:hover below paints
   the OPEN <select> list only in Firefox, which honors it. Chromium and Safari
   draw that popup natively and ignore CSS, so their open list stays OS-blue by
   design — an accepted trade-off (the only full fix was a custom dropdown). */
select, input, textarea { accent-color: var(--champagne); }

select.v-input option:checked,
select.v-input option:hover {
    background: var(--champagne);
    color: var(--graphite);
}

/* Drag-select highlight, so text selection isn't browser-blue either */
::selection { background: #b79a5b59; color: var(--graphite); }

/* a hairline champagne rule */
.v-rule { height: 1px; background: var(--champagne); border: 0; }

/* status text */
.v-status-on  { color: var(--sage-deep); font-weight: 500; }
.v-status-off { color: var(--oxblood);   font-weight: 500; }

/* data table: the brand table shell, aligned with the product workspace look
   (mist uppercase header, hairline row dividers, no heavy per-cell borders).
   Replaces the hand-rolled `border border-graphite/10` cell grids. Per-cell
   alignment (text-left / text-right / text-center) stays as utility classes on
   the th/td so those utilities keep winning -- .v-table deliberately does NOT
   set text-align, to avoid a specificity fight. */
.v-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.v-table th, .v-table td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); }
.v-table thead th {
    background: var(--mist);
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--sage-deep);
}
.v-table tbody tr:hover { background: var(--mist); }
/* nested lot-detail table (on-hand FIFO layers) sits on mist already, so give it
   white rows to stay legible against the expanded row's mist background. */
.v-table .v-table thead th { background: #fff; }

/* ==========================================================================
   Splash + hero motion (opacity/transform only — GPU friendly)
   ========================================================================== */

@keyframes vFadeScale { from { opacity:0; transform:scale(.965) } to { opacity:1; transform:none } }
@keyframes vFadeUp    { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
@keyframes vRuleIn    { from { transform:scaleX(0) } to { transform:scaleX(1) } }

#splash { transition: opacity 1.13s ease; }
#splash.is-leaving { opacity: 0; pointer-events: none; }

#splash .s-seal { opacity:0; animation: vFadeScale 1.44s cubic-bezier(.2,.7,.2,1) .25s forwards; }
#splash .s-name { opacity:0; animation: vFadeUp   1.25s cubic-bezier(.2,.7,.2,1) .94s forwards; }
#splash .s-rule { transform:scaleX(0); transform-origin:center;
                  animation: vRuleIn 1.13s cubic-bezier(.2,.7,.2,1) 1.38s forwards; }
#splash .s-tag  { opacity:0; animation: vFadeUp   1.25s cubic-bezier(.2,.7,.2,1) 1.75s forwards; }
#splash .s-skip { opacity:0; animation: vFadeUp   1.25s cubic-bezier(.2,.7,.2,1) 2.25s forwards; }

@media (prefers-reduced-motion: reduce) {
    #splash .s-seal, #splash .s-name, #splash .s-rule, #splash .s-tag, #splash .s-skip {
        animation: none; opacity: 1; transform: none;
    }
}

/* faded seal watermark behind the login card */
.v-watermark {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: .06; z-index: 0;
}
.v-watermark svg { width: min(70vw, 520px); height: auto; }