/* ═══════════════════════════════════════════════════════════════
   HELIX — Shared Dark Theme Override
   Load AFTER page-specific CSS to enforce the PCX dark palette
   across dashboard, cases, login, and register pages.
   ═══════════════════════════════════════════════════════════════ */

html { font-size: 18px; }

:root {
    --hx-bg:        #131928;
    --hx-surface:   #181e2e;
    --hx-card:      #1a2034;
    --hx-border:    #252f47;
    --hx-active:    #00c8d4;
    --hx-active-bg: rgba(0, 200, 212, 0.10);
    --hx-text:      #ffffff;
    --hx-muted:     #ffffff;
    --hx-red:       #e05252;
    --hx-amber:     #e8a020;
    --hx-blue:      #4a8de0;
    --hx-green:     #3ab56a;
    --hx-violet:    #a77be8;
    --hx-orange:    #f97316;
    --hx-yellow:    #eab308;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--hx-bg) !important;
    color: var(--hx-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ══ Dashboard & Cases ══════════════════════════════════════════ */

/* Stat cards */
.dash-stat-card {
    background: var(--hx-card);
    border-color: var(--hx-border);
    box-shadow: none;
}
.dash-stat-card:hover { box-shadow: none; border-color: rgba(0,200,212,0.3); }
.dash-stat-card__label { color: var(--hx-muted); font-size: 0.6875rem; letter-spacing: 0.06em; }
.dash-stat-card__value { color: var(--hx-text); }

.dash-stat-card__icon--blue   { background: rgba(74,141,224,0.15);  color: var(--hx-blue); }
.dash-stat-card__icon--amber  { background: rgba(232,160,32,0.15);  color: var(--hx-amber); }
.dash-stat-card__icon--violet { background: rgba(167,123,232,0.15); color: var(--hx-violet); }
.dash-stat-card__icon--green  { background: rgba(58,181,106,0.15);  color: var(--hx-green); }
.dash-stat-card__icon--red    { background: rgba(224,82,82,0.15);   color: var(--hx-red); }
.dash-stat-card__icon--orange { background: rgba(249,115,22,0.15);  color: var(--hx-orange); }
.dash-stat-card__icon--yellow { background: rgba(234,179,8,0.15);   color: var(--hx-yellow); }

/* Page header */
.dash-page-title { color: var(--hx-text); }
.dash-page-sub   { color: var(--hx-muted); }

/* Tabs */
.dash-tabs {
    border-bottom-color: var(--hx-border);
    background: rgba(0,0,0,0.12);
    padding: 0 0.5rem;
    gap: 0;
    margin-bottom: 1.25rem;
}
.dash-tab                     { color: var(--hx-muted); font-size: 0.8125rem; }
.dash-tab:hover               { color: var(--hx-text); }
.dash-tab.active              { color: var(--hx-active); border-bottom-color: var(--hx-active); background: rgba(0,200,212,0.05); }

/* Tab panes */
.dash-pane         { display: none; }
.dash-pane.active  { display: block; }

/* Cards */
.dash-card           { background: var(--hx-surface); border-color: var(--hx-border); box-shadow: none; }
.dash-card__header   { border-bottom-color: var(--hx-border); background: rgba(0,0,0,0.12); }
.dash-card__title    { color: var(--hx-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Tables */
.dash-table thead tr             { background: rgba(0,0,0,0.2);         border-bottom-color: var(--hx-border); }
.dash-table th                   { color: var(--hx-muted);               font-size: 0.6875rem; letter-spacing: 0.06em; }
.dash-table td                   { color: var(--hx-text);                border-bottom-color: rgba(37,47,71,0.7); }
.dash-table tbody tr:hover td    { background: rgba(255,255,255,0.03);   }

/* Inline table selects (user approval, status) */
.dash-table select {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--hx-border);
    border-radius: 4px;
    color: var(--hx-text);
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    outline: none;
}
.dash-table select option { background: #1a2034; color: var(--hx-text); }

/* Filters */
.dash-filters        { background: rgba(0,0,0,0.1); border-bottom-color: var(--hx-border); }
.dash-filter-label   { color: var(--hx-muted); }
.dash-map-filters    { background: rgba(0,0,0,0.1); border-bottom-color: var(--hx-border); }

/* Inputs & selects */
.dash-select,
.dash-input {
    background: rgba(255,255,255,0.06);
    border-color: var(--hx-border);
    color: var(--hx-text);
    height: 34px;
}
.dash-select:focus,
.dash-input:focus { border-color: var(--hx-active); box-shadow: 0 0 0 2px rgba(0,200,212,0.12); }
.dash-input::placeholder { color: var(--hx-muted); }
select.dash-select,
select.dash-input { padding-right: 2.25rem; }
.dash-select option      { background: #1a2034; color: var(--hx-text); }

/* Buttons */
.dash-btn--primary             { background: rgba(0,200,212,0.12); color: var(--hx-active); border-color: rgba(0,200,212,0.28); }
.dash-btn--primary:hover       { background: rgba(0,200,212,0.22); border-color: var(--hx-active); box-shadow: none; }
.dash-btn--ghost               { background: rgba(255,255,255,0.05); color: var(--hx-text); border-color: var(--hx-border); }
.dash-btn--ghost:hover         { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); color: var(--hx-text); }

/* Load more */
.dash-load-more { border-top-color: var(--hx-border); }

/* Map filter pills */
.dash-pill                     { background: rgba(255,255,255,0.05); border-color: var(--hx-border); color: var(--hx-muted); }
.dash-pill:hover,
.dash-pill.active              { background: var(--hx-active-bg); border-color: var(--hx-active); color: var(--hx-active); }
.dash-pill--danger:hover,
.dash-pill--danger.active      { background: rgba(224,82,82,0.15);  border-color: var(--hx-red);   color: var(--hx-red); }
.dash-pill--warning:hover,
.dash-pill--warning.active     { background: rgba(232,160,32,0.15); border-color: var(--hx-amber); color: var(--hx-amber); }
.dash-pill--success:hover,
.dash-pill--success.active     { background: rgba(58,181,106,0.15); border-color: var(--hx-green); color: var(--hx-green); }

/* ══ Bootstrap modal dark overrides (cases.html) ════════════════ */
.modal-content {
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    color: var(--hx-text);
}
.modal-header,
.modal-footer    { border-color: var(--hx-border); background: rgba(0,0,0,0.15); }
.modal-title     { color: var(--hx-text) !important; }
.modal-body      { color: var(--hx-text); background: var(--hx-surface); }
.btn-close       { filter: invert(1) brightness(0.65); }

/* Bootstrap form controls inside modals */
.form-control,
.form-select {
    background: #1e2840 !important;
    border-color: var(--hx-border) !important;
    color: var(--hx-text) !important;
    /* Override the Bootstrap dark arrow with a light one */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aab4c8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}
.form-control:not(select) {
    background-image: none !important;
}
.form-control:focus,
.form-select:focus {
    background: #232e4a !important;
    border-color: var(--hx-active) !important;
    box-shadow: 0 0 0 2px rgba(0,200,212,0.12) !important;
    color: var(--hx-text) !important;
}
.form-control::placeholder { color: var(--hx-muted) !important; }
.form-label                { color: var(--hx-text); font-size: 0.8125rem; font-weight: 500; }
textarea.form-control      { resize: vertical; background-image: none !important; }
.form-select option        { background: #1e2840; color: var(--hx-text); }
select.form-control option { background: #1e2840; color: var(--hx-text); }

/* ══ Login ══════════════════════════════════════════════════════ */
.form-panel { background: var(--hx-bg) !important; }

.form-header__org   { color: var(--hx-active); }
.form-header__title { color: var(--hx-text); }
.form-header__sub   { color: var(--hx-muted); }

/* Login form card */
.form-panel form {
    background: var(--hx-surface) !important;
    border-color: var(--hx-border) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.45) !important;
}

.field-label           { color: var(--hx-text); }
.field-input {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--hx-border) !important;
    color: var(--hx-text) !important;
}
.field-input::placeholder { color: var(--hx-muted) !important; }
.field-input:focus {
    border-color: var(--hx-active) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 2px rgba(0,200,212,0.12) !important;
}
.field-toggle       { color: var(--hx-muted); }
.field-toggle:hover { color: var(--hx-text); }

/* Sign-in button */
.btn-signin {
    background: rgba(0,200,212,0.12) !important;
    color: var(--hx-active) !important;
    border: 1px solid rgba(0,200,212,0.3) !important;
}
.btn-signin:hover {
    background: rgba(0,200,212,0.22) !important;
    border-color: var(--hx-active) !important;
    box-shadow: 0 4px 14px rgba(0,200,212,0.2) !important;
}
.btn-signin:disabled {
    background: rgba(0,200,212,0.05) !important;
    color: var(--hx-muted) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.form-footer           { color: var(--hx-muted); }
.form-footer a         { color: var(--hx-muted); }
.form-footer a:hover   { color: var(--hx-active); }

.modal-error-icon { background: rgba(224,82,82,0.15); color: var(--hx-red); }

/* ══ Register ═══════════════════════════════════════════════════ */
.register-container {
    background: var(--hx-surface) !important;
    border: 1px solid var(--hx-border) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}
.register-title {
    background: transparent !important;
    color: var(--hx-text) !important;
    font-size: 1.375rem !important;
    padding: 0 !important;
}
.register-required { color: var(--hx-red) !important; }
.register-message  { color: var(--hx-green) !important; }

.register-form-fields label { color: var(--hx-text); font-size: 0.8125rem; }
.register-form-fields input {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--hx-border) !important;
    border-radius: 5px !important;
    color: var(--hx-text) !important;
    padding: 0.5rem 0.75rem !important;
    width: 100%;
    font-size: 0.9rem !important;
    transition: border-color 0.15s;
}
.register-form-fields input:focus   { border-color: var(--hx-active) !important; }
.register-form-fields input::placeholder { color: var(--hx-muted) !important; }

/* Register submit */
.register-submit,
.register-container .btn,
.register-container .btn-primary {
    background: rgba(0,200,212,0.12) !important;
    border: 1px solid rgba(0,200,212,0.3) !important;
    color: var(--hx-active) !important;
    border-radius: 5px !important;
}
.register-submit:hover,
.register-container .btn:hover,
.register-container .btn-primary:hover {
    background: rgba(0,200,212,0.22) !important;
    border-color: var(--hx-active) !important;
}