/* ═══════════════════════════════════════════════════════════
   Native Element Overrides — Actualize Design System
   Replaces browser-default chrome on scrollbars, inputs,
   selects, date pickers, file inputs, focus rings, etc.
   Shared across main app and CRM.
   ═══════════════════════════════════════════════════════════ */

/* ── Scrollbar variables ──────────────────────────────── */
:root {
    --sb-track: transparent;
    --sb-thumb: rgba(74, 173, 224, 0.2);
    --sb-thumb-hover: rgba(74, 173, 224, 0.35);
}
body.light-mode,
html.light-mode {
    --sb-track: #f1f5f9;
    --sb-thumb: rgba(36, 137, 189, 0.3);
    --sb-thumb-hover: rgba(36, 137, 189, 0.5);
}

/* ── Scrollbars ───────────────────────────────────────── */
::-webkit-scrollbar {
    width: var(--scrollbar-w);
    height: var(--scrollbar-w);
}
::-webkit-scrollbar-track {
    background: var(--sb-track);
}
::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sb-thumb-hover);
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
}
body.light-mode * {
    scrollbar-color: rgba(36, 137, 189, 0.3) #f1f5f9;
}

/* ── Select Dropdown Arrow ────────────────────────────── */
.form-select,
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239498A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ── Number Input — Hide Native Spinners ──────────────── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* ── Date Input — Custom Picker Icon ──────────────────── */
input[type="date"] {
    color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6) sepia(1) saturate(3) hue-rotate(175deg);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ── File Input ───────────────────────────────────────── */
input[type="file"] {
    background: var(--void);
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-family: 'Figtree', sans-serif;
    font-size: var(--text-xs);
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.2s;
    width: 100%;
}
input[type="file"]:hover {
    border-color: var(--corona);
}
input[type="file"]::file-selector-button {
    background: var(--corona-bg);
    border: 1px solid var(--corona-border-subtle);
    border-radius: var(--radius-lg);
    color: var(--corona);
    font-family: 'Figtree', sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 4px 12px;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
input[type="file"]::file-selector-button:hover {
    background: var(--corona);
    color: #fff;
}

/* ── Placeholder ──────────────────────────────────────── */
::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* ── Focus Rings ──────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--corona);
    outline-offset: 2px;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--corona);
    box-shadow: 0 0 0 3px var(--corona-glow);
}

/* ── Text Selection ───────────────────────────────────── */
::selection {
    background: rgba(36, 137, 189, 0.3);
    color: var(--text-primary);
}