/* ════════════════════════════════════════════════════════════════════════
   skywatch.custom.css — SKYWATCH theme (charcoal + amber)
   Inspired by SkyWatch.  All dark — no light variant exists.
   Loaded AFTER skywatch.min.css (Darkly Bootswatch base) so these values win.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* Canvas */
    --surface:        #14161b;
    --surface-alt:    #1c1f26;
    --surface-raised: #23272f;
    --surface-hover:  #2c313a;

    /* Accent (amber) */
    --accent:         #ffb020;
    --accent-hover:   #ffc14a;
    --accent-soft:    rgba(255, 176, 32, 0.14);
    --accent-border:  rgba(255, 176, 32, 0.40);

    /* Borders & text */
    --border:         #2e333d;
    --border-strong:  #3b4150;
    --text:           #ecedef;
    --text-muted:     #9ba0aa;
    --text-light:     #70757f;

    /* Status */
    --success: #4ade80;
    --warning: #fbbf24;
    --danger:  #f87171;
    --info:    #60a5fa;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow:    0 2px 10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.75);
    --shadow-glow: 0 0 20px rgba(255, 176, 32, 0.18);
}

html, body {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* ── Bootstrap overrides ─────────────────────────────────────────────── */
.bg-dark, .bg-primary { background-color: var(--surface-alt) !important; }
.text-primary { color: var(--accent) !important; }
.btn-primary,
.btn-primary:focus {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #1a1200;
    font-weight: 600;
}
.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #000;
}
.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}
.btn-outline-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #1a1200;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

.card {
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--text);
}
.card-header { background-color: var(--surface-alt); border-bottom: 1px solid var(--border); }

.table { color: var(--text); }
.table > :not(caption) > * > * { border-color: var(--border); }

.form-control, .form-select {
    background-color: var(--surface-alt);
    border-color: var(--border);
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    background-color: var(--surface-alt);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

.modal-content { background-color: var(--surface-raised); color: var(--text); }
.dropdown-menu {
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover { background-color: var(--surface-hover); color: var(--accent); }

.alert-primary { background-color: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-hover); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }