/*
  BReVal IMS — design tokens
  Direction: an industrial "control room" aesthetic — not warehouse-cute,
  not generic SaaS. Deep graphite + cyan scan-line accent evokes the
  scanning/sensor core of the product (QR/NFC/barcode reads pulse cyan
  throughout). Monospace is used specifically for anything that is a
  *code* a human might scan or type (SKU, location code, tag UID) so
  the eye learns: monospace = machine-readable identifier.
*/

:root {
    --bg-void:        #0B0F14;
    --bg-surface:     #10161D;
    --bg-glass:       rgba(22, 30, 38, 0.55);
    --border-glass:   rgba(255, 255, 255, 0.08);
    --accent-scan:    #35E7C6;
    --accent-scan-dim:#1B8A76;
    --accent-warn:    #F2A93B;
    --accent-danger:  #E5566B;
    --text-primary:   #E8EDF2;
    --text-muted:     #8A97A5;
    --font-display:   'Space Grotesk', 'Inter', sans-serif;
    --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:       'IBM Plex Mono', ui-monospace, monospace;
    --radius-lg: 18px;
    --radius-md: 12px;
}

[data-bs-theme="light"] {
    --bg-void:        #F3F5F7;
    --bg-surface:     #FFFFFF;
    --bg-glass:       rgba(255, 255, 255, 0.65);
    --border-glass:   rgba(15, 23, 31, 0.08);
    --text-primary:   #10161D;
    --text-muted:     #5B6774;
}

* { box-sizing: border-box; }

body {
    background: radial-gradient(circle at 20% -10%, rgba(53, 231, 198, 0.10), transparent 45%),
                var(--bg-void);
    color: var(--text-primary);
    font-family: var(--font-body);
    min-height: 100vh;
    transition: background-color .25s ease, color .25s ease;
}

.font-display { font-family: var(--font-display); letter-spacing: -0.01em; }
.font-mono { font-family: var(--font-mono); }

.glass-panel {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.scan-accent { color: var(--accent-scan); }

.btn-scan {
    background: linear-gradient(135deg, var(--accent-scan), var(--accent-scan-dim));
    border: none;
    color: #04120F;
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 0.65rem 1.25rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-scan:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(53, 231, 198, 0.25);
    color: #04120F;
}

.text-muted-2 { color: var(--text-muted); }

.form-control-glass {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}
.form-control-glass:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-scan);
    box-shadow: 0 0 0 3px rgba(53, 231, 198, 0.15);
    color: var(--text-primary);
    outline: none;
}
.form-control-glass::placeholder { color: var(--text-muted); }

.theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
}

.sidebar-nav a {
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.925rem;
}
.sidebar-nav a.active, .sidebar-nav a:hover {
    background: rgba(53, 231, 198, 0.10);
    color: var(--text-primary);
}

.kpi-card { padding: 1.25rem 1.5rem; }
.kpi-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}