/* Theme overrides for Spectre.css */

/* === Design tokens === */
:root {
    /*--brand:        #4d8a9e; /* saturated cousin of the logo teal — used for accents/actions */
   --brand: #8aa6af;
    --brand-dark: #677d88;/* #3a6b7c; /* hover/active */
    --brand-tint:   #9aa6ab;/* #eef4f6; /* light wash for hovers, striping, focus ring */
    --ink:          #3f3f3f; /* body text */
    --muted:        #6c838c; /* secondary text / headers */
    --surface:      #ffffff; /* cards, tables, modals */
    --page-bg:      #f6f7f8; /* app background so surfaces lift off the page */
    --border:       #dde2e4; /* softer than the old #c0c0c0 */
    --shadow:       0 1px 3px rgba(63, 63, 63, .08), 0 1px 2px rgba(63, 63, 63, .06);
    --shadow-lg:    0 8px 24px rgba(63, 63, 63, .16);
    --radius:       6px;
}

/* === Base === */
body {
    color: var(--ink);
    background: var(--page-bg);
}

a,
a:visited {
    color: var(--brand);
}

a:hover,
a:focus,
a:active {
    color: var(--brand-dark);
}

/* === Buttons === */
.btn {
    color: var(--brand);
    border-color: var(--brand);
    border-radius: var(--radius);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover,
.btn:focus {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

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

.btn.btn-link:hover,
.btn.btn-link:focus {
    color: var(--brand-dark);
}

/* === Navbar === */
.navbar {
    border-bottom: 1px solid var(--border);
}

/* === Dividers === */
.divider {
    border-top-color: var(--border);
}

.divider[data-content]::after {
    background: var(--surface);
    color: var(--brand);
}

/* === Cards === */
.card {
    border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--surface);
}

.card .card-header {
    border-bottom-color: var(--border);
    color: var(--ink);
}

/* === Tables === */
.table {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.table th {
    color: var(--ink);
    border-bottom-color: var(--brand);
}

.table td {
    border-top-color: var(--border);
}

.table.table-striped tbody tr:nth-of-type(odd) {
    background: #fafbfb;
}

/* Softer hover: a light brand wash instead of flipping the whole row to solid color */
.table tbody tr:hover,
.table.table-hover tbody tr:hover {
    background: var(--brand-tint);
    color: inherit;
}

/* === Accordion === */
.accordion .accordion-header {
    background: var(--brand-dark);
    color: #fff;
    border-radius: var(--radius);
}

.accordion .accordion-header:hover {
    background: var(--brand);
    color: #fff;
}

/* === Panel === */
.panel {
    border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--surface);
    overflow: hidden;
}

.panel .panel-header {
    background: var(--brand-dark);
    color: #fff;
}

/* === Modals === */
.modal .modal-container {
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

/* === Forms === */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .1rem rgba(77, 138, 158, 0.2);
}

/* === Text utilities === */
.text-primary {
    color: var(--brand) !important;
}

/* === Labels / Badges === */
.label {
    background: var(--brand);
    color: #fff;
}

.label.label-primary {
    background: var(--brand);
}

.label.label-secondary {
    background: var(--brand-dark);
}

/* === Chips === */
.chip {
    background: var(--border);
    color: var(--ink);
}

/* === Login screens === */
.login-hero {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 15vh 1rem 1rem;
    background: linear-gradient(160deg, var(--brand-tint) 0%, var(--page-bg) 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
}

.login-card .card-header {
    text-align: center;
    padding: 1.0rem 1.0rem .5rem;
}

.login-card .card-body {
    padding: 1.5rem;
}

.login-logo {
    height: 148px;
    width: auto;
    margin-bottom: .75rem;
}