/* =========================================================================
 * Theme — slate dark, single-accent
 * Change --accent (and optionally --accent-hover / --accent-fg) to retheme.
 * ========================================================================= */

:root {
    /* Surfaces */
    --bg:              #0c0e12;
    --surface:         #14171f;
    --surface-2:       #1a1e28;
    --surface-3:       #222733;

    /* Borders */
    --border:          #262c36;
    --border-strong:   #343b48;

    /* Text */
    --text:            #e4e6eb;
    --text-muted:      #9097a3;
    --text-subtle:     #6b7180;

    /* Accent (single variable retheme) */
    --accent:          #7c8cff;
    --accent-hover:    #9aa6ff;
    --accent-fg:       #ffffff;
    --accent-soft:     rgba(124, 140, 255, 0.12);

    /* Status */
    --danger:          #f87171;
    --danger-soft:     rgba(248, 113, 113, 0.12);
    --success:         #34d399;
    --success-soft:    rgba(52, 211, 153, 0.12);
    --warning:         #fbbf24;
    --warning-soft:    rgba(251, 191, 36, 0.12);
    --info:            #60a5fa;
    --info-soft:       rgba(96, 165, 250, 0.12);

    /* Geometry */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 10px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.4);

    /* Bootstrap variable overrides (5.0 has limited support, but these help) */
    --bs-body-bg:        var(--bg);
    --bs-body-color:     var(--text);
    --bs-primary:        var(--accent);
    --bs-border-color:   var(--border);
}

/* =========================================================================
 * Base
 * ========================================================================= */

html, body {
    background: var(--bg);
    color: var(--text);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Reserve room for fixed-bottom footer so content doesn't slide under it */
    padding-bottom: 56px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

hr, .dropdown-divider {
    border-color: var(--border) !important;
    opacity: 1;
}

code, pre, kbd {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                 Monaco, Consolas, "Liberation Mono", monospace;
    color: var(--text);
}
code {
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.875em;
}

/* Bootstrap utility re-mappings — preserves existing markup */
.bg-white   { background-color: var(--surface) !important; }
.bg-light   { background-color: var(--surface) !important; }
.bg-dark    { background-color: var(--bg) !important; }
.text-muted { color: var(--text-muted) !important; }
.border     { border-color: var(--border) !important; }
.shadow-sm  { box-shadow: var(--shadow-sm) !important; }
.shadow     { box-shadow: var(--shadow) !important; }

/* =========================================================================
 * Navbar
 * ========================================================================= */

.navbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.navbar-brand {
    color: var(--text) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 1.0625rem;
}

.navbar .nav-link {
    color: var(--text-muted) !important;
    font-size: 0.875rem;
    padding: 0.375rem 0.625rem !important;
    border-radius: var(--radius-sm);
    transition: color 120ms ease, background-color 120ms ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--text) !important;
    background: var(--surface-2);
}
.navbar .nav-link.active {
    color: var(--text) !important;
    background: var(--surface-3);
}

.navbar .nav-item.p-2 { padding: 0 !important; }
.navbar-nav { gap: 0.125rem; }

.navbar-toggler {
    border-color: var(--border);
    color: var(--text-muted);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%239097a3' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =========================================================================
 * Dropdowns
 * ========================================================================= */

.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.25rem;
    min-width: 12rem;
}
.dropdown-item {
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.625rem;
    font-size: 0.875rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--surface-2);
    color: var(--text);
}
.dropdown-item.active,
.dropdown-item:active {
    background: var(--accent-soft);
    color: var(--accent);
}

/* =========================================================================
 * Forms
 * ========================================================================= */

.form-control,
.form-select {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-control:hover,
.form-select:hover { border-color: var(--border-strong); }
.form-control:focus,
.form-select:focus {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.form-control::placeholder { color: var(--text-subtle); }
.form-control:disabled,
.form-control[readonly] {
    background: var(--surface);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-label, .col-form-label {
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}
.form-text { color: var(--text-muted); font-size: 0.8125rem; }

.form-check-input {
    background-color: var(--surface-2);
    border-color: var(--border-strong);
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-check-label { color: var(--text-muted); font-size: 0.875rem; }

/* =========================================================================
 * Buttons
 * ========================================================================= */

.btn {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn-sm { padding: 0.3125rem 0.625rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.625rem 1.25rem; font-size: 0.9375rem; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-fg);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.btn-primary:active,
.btn-primary:disabled {
    background: var(--accent);
    border-color: var(--accent);
    opacity: 0.8;
}

.btn-secondary {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-outline-success {
    border-color: var(--border);
    color: var(--text-muted);
    background: transparent;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #1a1a1a;
}
.btn-danger:hover,
.btn-danger:focus {
    background: #fb8989;
    border-color: #fb8989;
    color: #1a1a1a;
}

.btn-link { color: var(--accent); }
.btn-link:hover { color: var(--accent-hover); }

/* =========================================================================
 * Panels / cards
 * ========================================================================= */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
}
.card-body { color: var(--text); }
.card-header,
.card-footer {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

/* =========================================================================
 * Modals
 * ========================================================================= */

.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
}
.modal-header,
.modal-footer { border-color: var(--border); }
.modal-title { color: var(--text); }
.btn-close {
    filter: invert(1) grayscale(100%) brightness(0.85);
    opacity: 0.6;
}
.btn-close:hover { opacity: 1; }

/* =========================================================================
 * Alerts
 * ========================================================================= */

.alert {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
}
.alert-danger {
    background: var(--danger-soft);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--danger);
}
.alert-success {
    background: var(--success-soft);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--success);
}
.alert-warning {
    background: var(--warning-soft);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--warning);
}
.alert-info {
    background: var(--info-soft);
    border-color: rgba(96, 165, 250, 0.3);
    color: var(--info);
}

/* =========================================================================
 * Tables
 * ========================================================================= */

.table {
    --bs-table-bg: transparent;
    color: var(--text);
    border-color: var(--border);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text);
    border-bottom-color: var(--border);
    padding: 0.625rem 0.75rem;
}
.table > thead > tr > th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--surface);
    color: var(--text);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--surface-2);
    color: var(--text);
}

/* =========================================================================
 * Badges, pills, nav-pills
 * ========================================================================= */

.badge.bg-primary  { background: var(--accent) !important; color: var(--accent-fg) !important; }
.badge.bg-secondary{ background: var(--surface-3) !important; color: var(--text) !important; }
.badge.bg-success  { background: var(--success-soft) !important; color: var(--success) !important; }
.badge.bg-danger   { background: var(--danger-soft)  !important; color: var(--danger) !important; }
.badge.bg-warning  { background: var(--warning-soft) !important; color: var(--warning) !important; }

.nav-pills .nav-link {
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--accent-soft);
    color: var(--accent);
}

/* =========================================================================
 * Footer (overrides legacy starter-template.css rules)
 * ========================================================================= */

.footer {
    background: var(--surface) !important;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}
.footer .text-muted { color: var(--text-subtle) !important; }

/* =========================================================================
 * Misc legacy overrides
 *   starter-template.css uses light backgrounds in a few spots;
 *   these patch them without rewriting the legacy file.
 * ========================================================================= */

.minioverlay,
.tloading:before {
    background-color: rgba(12, 14, 18, 0.7) !important;
}
.tptime-picker {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}
.tpoverlay { background: rgba(0, 0, 0, 0.6); }

/* The legacy .loadnew uses a base64 light-spinner image as background.
 * Preserve the layout but tone the overlay to match the theme. */
.loadnew {
    background-color: rgba(12, 14, 18, 0.65) !important;
}

.invalid {
    border: 1px solid var(--danger) !important;
}

/* Chat (legacy chat.css uses pinkish whites) */
#chat-box,
.chat-box-html,
.chat-box-message,
.chat-input {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.chat-box-message:hover { background-color: var(--surface-2) !important; }
.chat-connection-ack    { color: var(--success) !important; }
.error                  { color: var(--danger) !important; }

/* =========================================================================
 * Auth page layout (login / register / reset-password)
 * ========================================================================= */

.auth-wrap {
    min-height: calc(100vh - 60px - 56px); /* navbar + footer */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.auth-panel {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.auth-panel h1 {
    font-size: 1.25rem;
    margin: 0 0 1.5rem;
    text-align: center;
}
.auth-panel .form-label { font-weight: 500; }
.auth-panel .footer-link {
    text-align: center;
    margin: 1.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* =========================================================================
 * Selection / scrollbar
 * ========================================================================= */

::selection { background: var(--accent-soft); color: var(--text); }

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg); }
*::-webkit-scrollbar          { width: 10px; height: 10px; }
*::-webkit-scrollbar-track    { background: var(--bg); }
*::-webkit-scrollbar-thumb    { background: var(--border-strong); border-radius: var(--radius-sm); border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }