/* =========================================================================
 * Re-skin of common Bootstrap components using our design tokens.
 * Bootstrap stays the base; we override what's needed to make light/dark
 * + brand colors consistent.
 * ========================================================================= */

/* ── Page header pattern ──────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width) solid var(--app-border);
}
.page-header__title {
    margin: 0;
    color: var(--app-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
}
.page-header__subtitle {
    margin-top: var(--space-1);
    color: var(--app-muted);
    font-size: var(--fs-sm);
}
.page-header__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Card (Bootstrap re-skin) ─────────────────────────────────────────── */
.card {
    background: var(--app-surface);
    border: var(--border-width) solid var(--app-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--app-shadow);
}
.card-header {
    background: var(--app-surface-2);
    border-bottom: var(--border-width) solid var(--app-border);
    font-weight: var(--fw-semibold);
}

/* ── Buttons — keep Bootstrap shapes, retint to brand ─────────────────── */
.btn {
    border-radius: var(--radius-md);
    font-weight: var(--fw-medium);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}
.btn-success { background: var(--brand-success); border-color: var(--brand-success); }
.btn-warning { background: var(--brand-warning); border-color: var(--brand-warning); color: #fff; }
.btn-danger  { background: var(--brand-danger);  border-color: var(--brand-danger);  }
.btn-info    { background: var(--brand-info);    border-color: var(--brand-info); color: #fff; }

/* ── Form controls ────────────────────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: var(--radius-md);
    background: var(--app-input-bg);
    color: var(--app-input-text);
    border-color: var(--app-input-border);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--focus-ring);
}
.form-label {
    color: var(--app-text);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.table {
    --bs-table-color: var(--app-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--app-border);
    color: var(--app-text);
}
.table > thead {
    background: var(--app-surface-2);
}
.table > thead th {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge {
    border-radius: var(--radius-pill);
    font-weight: var(--fw-medium);
}
.badge-soft {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

/* ── Stat tiles (used on dashboards) ──────────────────────────────────── */
.stat-tile {
    background: var(--app-surface);
    border: var(--border-width) solid var(--app-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.stat-tile__label {
    color: var(--app-muted);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stat-tile__value {
    color: var(--app-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
}
.stat-tile__trend--up   { color: var(--brand-success); }
.stat-tile__trend--down { color: var(--brand-danger); }

/* ── Pagination ───────────────────────────────────────────────────────── */
.page-link {
    color: var(--app-text);
    background: var(--app-surface);
    border-color: var(--app-border);
}
.page-item.active .page-link {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* ── Modal (Bootstrap re-skin) ────────────────────────────────────────── */
.modal-content {
    background: var(--app-surface);
    color: var(--app-text);
    border: var(--border-width) solid var(--app-border);
    border-radius: var(--radius-lg);
}

/* ── Utility classes used by views ────────────────────────────────────── */
.text-soft { color: var(--app-muted); }
.surface   { background: var(--app-surface); border: var(--border-width) solid var(--app-border); border-radius: var(--radius-lg); }
.surface-2 { background: var(--app-surface-2); border: var(--border-width) solid var(--app-border); border-radius: var(--radius-lg); }