/* ── Viewport Skeleton ── */
html {
    height: 100%;
    overflow-x: hidden;
}

/* ── Base Typography & Body ── */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1;
}

body > footer {
    flex-shrink: 0;
}

/* ── Responsive Card Grid ── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min-width)), 1fr));
    gap: var(--space-lg);
}

/* ── Dashboard Search ── */
.dashboard-search {
    max-width: min(90%, 25rem);
    margin-inline: auto;
}

/* ── KPI Grid (smaller cards) ── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-md);
}

.badge-rate {
    background-color: hsl(min(calc(var(--rate) * 1.2), 120) 72% 40%);
    color: #ffffff;
}

.collapse-chevron {
    transition: transform 0.2s;
}

.collapse-chevron[aria-expanded="false"] {
    transform: rotate(180deg);
}

/* ── Bootstrap Overrides ── */

/* Navbar */
.navbar-dark.bg-dark {
    background-color: var(--color-primary) !important;
}

/* Cards */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background-color: var(--color-bg-card);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

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

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--color-accent-focus);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* Alerts */
.alert-success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
    border-inline-start-width: 4px;
}

.alert-danger {
    background-color: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
    border-inline-start-width: 4px;
}

.alert-warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
    border-inline-start-width: 4px;
}

.alert-info {
    background-color: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--color-info);
    border-inline-start-width: 4px;
}

/* Form controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem var(--color-accent-focus-light);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--color-primary) !important;
}

/* Links */
a {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

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

/* ── Formset Highlight ── */
.schedule-form {
    transition: background-color var(--transition-slow);
}

.schedule-form--new {
    background-color: var(--color-info-bg);
}

/* ── Dashboard Cards ── */
.dashboard-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.dashboard-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}

.dashboard-icon {
    color: var(--color-primary);
}

.dashboard-card:hover .dashboard-icon {
    color: var(--color-accent);
}