/* =============================================================================
   Flux Theme — "Vibrant Modern"
   Design tokens (dark default + light), component classes, sidebar styles.
   Loaded via {% static 'flux_front/css/flux-theme.css' %} in base templates.
   ========================================================================== */

/* ---- Tokens: dark (default) ---- */
:root {
    --flux-bg:           #0e0f14;
    --flux-surface:      rgba(255, 255, 255, 0.03);
    --flux-surface-2:    rgba(255, 255, 255, 0.05);
    --flux-border:       rgba(255, 255, 255, 0.07);
    --flux-border-strong:rgba(255, 255, 255, 0.18);
    --flux-text:         #eef0f6;
    --flux-muted:        #8e94a8;
    --flux-subtle:       #5d6378;
    --flux-accent:       #818cf8;
    --flux-accent-soft:  rgba(129, 140, 248, 0.13);
    --flux-accent-indigo:#6366f1;
    --flux-accent-violet:#c084fc;
    --flux-accent-pink:  #f0abfc;
    --flux-good:         #4ade80;
    --flux-warn:         #fbbf24;
    --flux-bad:          #f87171;
    --flux-grad-primary:   linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    --flux-grad-secondary: linear-gradient(135deg, #4f86d6 0%, #5fb1c4 100%);
    --flux-grad-alt:       linear-gradient(135deg, #c084fc 0%, #f0abfc 100%);
    --flux-grad-text:      linear-gradient(135deg, #818cf8 0%, #c084fc 60%, #f0abfc 100%);
    --flux-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
    --flux-shadow-card:  0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.35);
    --flux-shadow-elev:  0 30px 80px rgba(0, 0, 0, 0.5);
    --flux-tint-strength:15%;
    --flux-radius-card:  16px;
    --flux-radius-md:    10px;
    --flux-radius-sm:    8px;

    /* Back-compat aliases for legacy templates still using the old names */
    --bg-color:        var(--flux-bg);
    --sidebar-bg:      var(--flux-bg);
    --card-bg:         var(--flux-surface);
    --text-primary:    var(--flux-text);
    --text-secondary:  var(--flux-muted);
    --accent-color:    var(--flux-accent);
    --accent-hover:    #6366f1;
    --border-color:    var(--flux-border);
}

/* ---- Tokens: light ---- */
[data-theme="light"] {
    --flux-bg:           #fafbfd;
    --flux-surface:      #ffffff;
    --flux-surface-2:    #f4f5f9;
    --flux-border:       rgba(20, 20, 40, 0.18);
    --flux-border-strong:rgba(20, 20, 40, 0.26);
    --flux-text:         #181a23;
    --flux-muted:        #5e6478;
    --flux-subtle:       #9097ab;
    --flux-accent:       #6366f1;
    --flux-accent-soft:  rgba(99, 102, 241, 0.14);
    --flux-accent-indigo:#6366f1;
    --flux-accent-violet:#a855f7;
    --flux-accent-pink:  #d946ef;
    --flux-good:         #16a34a;
    --flux-warn:         #b45309;
    --flux-bad:          #b91c1c;
    --flux-grad-primary:   linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    --flux-grad-secondary: linear-gradient(135deg, #4078c8 0%, #4ea0b4 100%);
    --flux-grad-alt:       linear-gradient(135deg, #a855f7 0%, #d946ef 100%);
    --flux-grad-text:      linear-gradient(135deg, #6366f1 0%, #a855f7 60%, #d946ef 100%);
    --flux-shadow-sm:    0 1px 2px rgba(20, 20, 40, 0.05);
    --flux-shadow-card:  0 1px 2px rgba(20, 20, 40, 0.04), 0 8px 24px rgba(20, 20, 40, 0.08);
    --flux-shadow-elev:  0 4px 12px rgba(20, 20, 40, 0.08), 0 24px 48px rgba(20, 20, 40, 0.12);
    --flux-tint-strength:22%;
}

/* ---- Body & global ---- */
body {
    background-color: var(--flux-bg);
    color: var(--flux-text);
    font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
    font-feature-settings: "ss01", "cv11";
}

/* Tell the browser to render native widgets (select option lists, date pickers,
   scrollbars, etc.) in the matching theme. Without this, native select dropdowns
   render with OS default colors (usually white bg) and our light text becomes
   illegible in dark mode. */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* Belt-and-suspenders: explicitly style <option> elements inside .flux-input
   selects. Browsers vary in how much they honor this (Firefox respects it most
   reliably, Chrome partially, Safari minimally) — color-scheme above does the
   heavy lifting. */
.flux-input option {
    background-color: var(--flux-bg);
    color: var(--flux-text);
}

/* Smooth theme transitions for surface-color shifts */
body, .sidebar, .flux-card, .flux-kpi, .flux-table, .flux-input {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* ---- Sidebar ---- */
.sidebar {
    background-color: var(--flux-bg);
    border-right: 1px solid var(--flux-border);
}

/* Nav links — used by both base.html and super_base.html */
.nav-link {
    color: var(--flux-muted);
    border-radius: var(--flux-radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover {
    background-color: var(--flux-surface);
    color: var(--flux-text);
}
.nav-link.active {
    background: var(--flux-grad-primary);
    color: #ffffff;
}
.nav-link.active i { color: #ffffff; }

/* ---- Component: card ---- */
.flux-card {
    background-color: var(--flux-surface);
    border: 1px solid var(--flux-border);
    border-radius: var(--flux-radius-card);
    padding: 18px;
    box-shadow: var(--flux-shadow-sm);
}
.flux-card--elevated {
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--flux-shadow-card);
}

/* ---- Component: KPI ---- */
.flux-kpi { /* extends .flux-card; padding tightened */
    background-color: var(--flux-surface);
    border: 1px solid var(--flux-border);
    border-radius: var(--flux-radius-card);
    padding: 16px;
}
.flux-kpi__label {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    color: var(--flux-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.flux-kpi__value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--flux-text);
}

/* ---- Component: badge ---- */
.flux-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 9px;
    background-color: var(--flux-surface-2);
    color: var(--flux-muted);
    border: 1px solid transparent;
}
.flux-badge--good {
    background-color: color-mix(in srgb, var(--flux-good) var(--flux-tint-strength), transparent);
    color: var(--flux-good);
    border-color: color-mix(in srgb, var(--flux-good) 35%, transparent);
}
.flux-badge--warn {
    background-color: color-mix(in srgb, var(--flux-warn) var(--flux-tint-strength), transparent);
    color: var(--flux-warn);
    border-color: color-mix(in srgb, var(--flux-warn) 35%, transparent);
}
.flux-badge--bad {
    background-color: color-mix(in srgb, var(--flux-bad) var(--flux-tint-strength), transparent);
    color: var(--flux-bad);
    border-color: color-mix(in srgb, var(--flux-bad) 35%, transparent);
}
.flux-badge--accent {
    background-color: var(--flux-accent-soft);
    color: var(--flux-accent);
}
.flux-badge--neutral {
    background-color: var(--flux-surface-2);
    color: var(--flux-muted);
}

/* ---- Component: gradient pill (full-width, used for active nav) ---- */
.flux-pill-grad {
    background: var(--flux-grad-primary);
    color: #ffffff;
    border-radius: var(--flux-radius-md);
}

/* ---- Component: mono label ---- */
.flux-mono-label {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    color: var(--flux-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Component: display heading ---- */
.flux-display {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--flux-text);
}

/* ---- Utility: accent text color (theme-aware shorthand) ---- */
.flux-accent-text { color: var(--flux-accent); }

/* ---- Utility: theme-aware border-color (works with Tailwind border-b/r/etc.) ---- */
.flux-cal-border { border-color: var(--flux-border); }

/* ---- Component: gradient text ---- */
.flux-gradient-text {
    background: var(--flux-grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- Component: 3-color gradient text (headline emphasis, matches landing's .grad-text) ---- */
.flux-grad-text {
    background: var(--flux-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- Component: serif italic accent word (matches landing's .serif-it) ---- */
.flux-serif-it {
    font-family: 'Instrument Serif', 'Geist', serif;
    font-style: italic;
    font-weight: 400;
    padding: 0 2px;
}

/* ---- Component: page title (codifies the T6 Vibrant convention) ---- */
.flux-page-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--flux-text);
    margin: 0;
}

/* ---- Component: eyebrow (mono uppercase label above page titles) ---- */
.flux-eyebrow {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    color: var(--flux-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* ---- Component: avatar ---- */
.flux-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--flux-grad-primary);
    color: #ffffff;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}
.flux-avatar--alt {
    background: var(--flux-grad-alt);
}
.flux-avatar--square {
    border-radius: 9px;
}

/* ---- Component: table ---- */
.flux-table {
    width: 100%;
    border-collapse: collapse;
}
.flux-table th {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    color: var(--flux-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 11px 16px;
    border-bottom: 1px solid var(--flux-border);
    font-weight: 500;
}
.flux-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--flux-border);
    font-size: 12.5px;
    color: var(--flux-text);
}
.flux-table tbody tr:first-child td { border-top: none; }
.flux-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--flux-accent) 6%, var(--flux-surface));
}

/* ---- Component: input (filter forms) ---- */
.flux-input {
    background-color: var(--flux-surface-2);
    border: 1px solid var(--flux-border);
    border-radius: var(--flux-radius-md);
    color: var(--flux-text);
    padding: 7px 11px;
    font-size: 12px;
    outline: none;
}
.flux-input::placeholder { color: var(--flux-subtle); }
.flux-input:focus {
    border-color: var(--flux-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--flux-accent) 25%, transparent);
}
.flux-input--lg { padding: 8px 12px; font-size: 14px; }
.flux-input--block { display: block; width: 100%; }
.flux-input:disabled { opacity: 0.55; cursor: not-allowed; }
textarea.flux-input { resize: vertical; min-height: 72px; }

/* ---- Component: form label ---- */
.flux-form-label {
    display: block;
    font-size: 12px;
    color: var(--flux-muted);
    font-weight: 500;
    margin-bottom: 4px;
}

/* ---- Component: button ---- */
.flux-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--flux-radius-md);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1.2;
    text-decoration: none;
}
.flux-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.flux-btn--primary {
    background: var(--flux-grad-primary);
    color: #ffffff;
}
.flux-btn--primary:hover:not(:disabled) { opacity: 0.92; }
.flux-btn--secondary {
    background-color: var(--flux-surface);
    color: var(--flux-text);
    border-color: var(--flux-border);
}
.flux-btn--secondary:hover:not(:disabled) {
    background-color: var(--flux-surface-2);
}
.flux-btn--danger {
    background-color: color-mix(in srgb, var(--flux-bad) 15%, transparent);
    color: var(--flux-bad);
    border-color: color-mix(in srgb, var(--flux-bad) 35%, transparent);
}
.flux-btn--danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--flux-bad) 25%, transparent);
}
.flux-btn--ghost {
    background-color: transparent;
    color: var(--flux-muted);
}
.flux-btn--ghost:hover:not(:disabled) {
    background-color: var(--flux-surface);
    color: var(--flux-text);
}
.flux-btn--sm { padding: 6px 10px; font-size: 12px; }

/* ---- Component: tab pill (segmented controls — inbox channel/status, etc.) ---- */
.flux-tab {
    flex: 1;
    padding: 6px 10px;
    border-radius: var(--flux-radius-sm);
    font-size: 11px;
    font-weight: 500;
    background-color: var(--flux-surface-2);
    color: var(--flux-muted);
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    text-align: center;
}
.flux-tab:hover:not(.is-active) {
    background-color: var(--flux-surface);
    color: var(--flux-text);
}
.flux-tab.is-active {
    background: var(--flux-grad-primary);
    color: #ffffff;
}
.flux-tab--good.is-active {
    background: none;
    background-color: color-mix(in srgb, var(--flux-good) 22%, transparent);
    color: var(--flux-good);
    border-color: color-mix(in srgb, var(--flux-good) 50%, transparent);
}

/* ---- Component: tab link (underline-indicator tabs — contact profile, location detail, etc.) ---- */
.flux-tab-link {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--flux-muted);
    border: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
    background: none;
}
.flux-tab-link:hover:not(.is-active) { color: var(--flux-text); }
.flux-tab-link.is-active {
    color: var(--flux-accent);
    border-bottom-color: var(--flux-accent);
}

/* ---- Skeleton loader (ported from base.html, theme-aware) ---- */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--flux-surface) 25%,
        var(--flux-surface-2) 50%,
        var(--flux-surface) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================================================
   Admin (super_base.html) accent override — keeps orange brand cue
   ========================================================================== */
.flux-admin {
    --flux-accent:       #fb923c;  /* orange-400 */
    --flux-accent-soft:  rgba(251, 146, 60, 0.14);
    --flux-grad-primary:   linear-gradient(135deg, #facc15 0%, #fb923c 100%);
    --flux-grad-secondary: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
    --flux-grad-alt:       linear-gradient(135deg, #f97316 0%, #fb923c 100%);
}
[data-theme="light"] .flux-admin {
    --flux-accent:       #c2410c;  /* orange-700 */
    --flux-accent-soft:  rgba(194, 65, 12, 0.14);
    --flux-grad-primary:   linear-gradient(135deg, #d97706 0%, #ea580c 100%);
    --flux-grad-alt:       linear-gradient(135deg, #d97706 0%, #ea580c 100%);
}