/* ─────────────────────────────────────────────────────────────────────────
   pacia-components.css — explicit Bootstrap class re-skins
   Imported by pacia.css. These cover the components Bootstrap CSS variables
   alone don't reach: cards, navbar, dropdown, alert, toast, form, list-group,
   table, modal, button, badge, plus a small utility tail.
   ───────────────────────────────────────────────────────────────────────── */

/* ── .card (197 uses — most impactful) ──────────────────────────────────── */
.card {
    background: var(--pacia-surface);
    border: 1px solid var(--pacia-border);
    border-radius: 10px;
    box-shadow: var(--pacia-shadow-fine);
    color: var(--pacia-text-body);
}
.card-header,
.card-footer {
    background: transparent;
    border-color: var(--pacia-border);
    padding: 14px 18px;
    color: var(--pacia-text);
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 { margin: 0; }
.card-body { padding: 18px 22px; }
.card-title { color: var(--pacia-text); letter-spacing: -0.025em; font-weight: 800; }
.card-subtitle { color: var(--pacia-muted); }

/* ── Navbar ────────────────────────────────────────────────────────────── */
.navbar {
    padding: 16px 0;
    border-bottom: 1px solid var(--pacia-border);
    background: var(--pacia-bg) !important;
    box-shadow: none;
}
.navbar.bg-primary { background: var(--pacia-bg) !important; }
.navbar-brand {
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    font-size: 1.05rem;
    color: var(--pacia-text) !important;
    display: inline-flex;
    align-items: center;
}
.navbar-brand:hover { color: var(--pacia-text) !important; }

.navbar-nav .nav-link {
    color: var(--pacia-muted) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 4px !important;
    margin-right: 18px;
    position: relative;
    transition: color 0.15s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus { color: var(--pacia-text) !important; }
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--pacia-text) !important;
    font-weight: 600;
}
.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px;
    bottom: -17px;
    height: 1px;
    background: var(--pacia-accent-ink);
}
.navbar-toggler {
    border: 1px solid var(--pacia-border-strong);
    color: var(--pacia-text);
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--pacia-accent-soft); }

/* ── Dropdown ──────────────────────────────────────────────────────────── */
.dropdown-menu {
    background: var(--pacia-surface);
    border: 1px solid var(--pacia-border);
    border-radius: 10px;
    box-shadow: var(--pacia-shadow-lift);
    padding: 6px;
}
.dropdown-item {
    border-radius: 6px;
    color: var(--pacia-text-body);
    font-size: 13.5px;
    padding: 8px 12px;
    font-weight: 500;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--pacia-surface-2);
    color: var(--pacia-text);
}
.dropdown-item.active,
.dropdown-item:active {
    background: var(--pacia-accent);
    color: var(--pacia-accent-ink);
}
.dropdown-divider { border-color: var(--pacia-border); }

/* ── Alerts ────────────────────────────────────────────────────────────── */
.alert {
    border: 1px solid var(--pacia-border);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--pacia-text-body);
    background: var(--pacia-surface);
}
.alert-success { border-left-color: var(--pacia-completed); background: var(--pacia-completed-bg); color: var(--pacia-completed); }
.alert-info    { border-left-color: var(--pacia-muted); background: var(--pacia-surface-2); color: var(--pacia-text); }
.alert-warning { border-left-color: var(--pacia-data); background: #fbf2dc; color: #8a6512; }
.alert-danger  { border-left-color: var(--pacia-missed); background: var(--pacia-missed-bg); color: var(--pacia-missed); }
.alert-primary { border-left-color: var(--pacia-accent-ink); background: var(--pacia-surface); color: var(--pacia-text); }
.alert-secondary { border-left-color: var(--pacia-muted-soft); background: var(--pacia-surface-2); color: var(--pacia-muted); }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast {
    background: var(--pacia-surface);
    border: 1px solid var(--pacia-border);
    border-radius: 10px;
    box-shadow: var(--pacia-shadow-lift);
    color: var(--pacia-text-body);
}
.toast-header {
    background: transparent;
    border-bottom: 1px solid var(--pacia-border);
    color: var(--pacia-text);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    background: var(--pacia-surface);
    border: 1px solid var(--pacia-border-strong);
    color: var(--pacia-text);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    letter-spacing: -0.01em;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus,
.form-select:focus {
    background: var(--pacia-surface);
    border-color: var(--pacia-accent-ink);
    color: var(--pacia-text);
    box-shadow: 0 0 0 3px var(--pacia-accent-soft);
}
.form-control::placeholder { color: var(--pacia-muted-soft); }
.form-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--pacia-muted-soft);
    font-weight: 700;
    margin-bottom: 6px;
}
.form-text { color: var(--pacia-muted); font-size: 11.5px; }
.form-check-input {
    background-color: var(--pacia-surface);
    border-color: var(--pacia-border-strong);
}
.form-check-input:checked {
    background-color: var(--pacia-accent-ink);
    border-color: var(--pacia-accent-ink);
}
.form-check-input:focus { box-shadow: 0 0 0 3px var(--pacia-accent-soft); border-color: var(--pacia-accent-ink); }
.form-check-label { color: var(--pacia-text-body); }
.invalid-feedback { color: var(--pacia-missed); font-weight: 500; }
.is-invalid { border-color: var(--pacia-missed) !important; }

/* ── List group ────────────────────────────────────────────────────────── */
.list-group { border-radius: 10px; }
.list-group-item {
    background: var(--pacia-surface);
    border-color: var(--pacia-border);
    color: var(--pacia-text-body);
    padding: 14px 18px;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background: var(--pacia-surface-2);
    color: var(--pacia-text);
}
.list-group-item.active {
    background: var(--pacia-accent);
    border-color: var(--pacia-accent-ink);
    color: var(--pacia-accent-ink);
}

/* ── Table ─────────────────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--pacia-text-body);
    --bs-table-border-color: var(--pacia-border);
    --bs-table-striped-bg: var(--pacia-surface-2);
    --bs-table-striped-color: var(--pacia-text);
    --bs-table-hover-bg: var(--pacia-surface-2);
    --bs-table-hover-color: var(--pacia-text);
    color: var(--pacia-text-body);
}
.table > thead {
    color: var(--pacia-muted-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.table > thead th {
    border-bottom: 1.5px solid var(--pacia-border-strong);
    font-weight: 700;
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-content {
    background: var(--pacia-surface);
    border: 1px solid var(--pacia-border);
    border-radius: 12px;
    box-shadow: var(--pacia-shadow-lift);
    color: var(--pacia-text-body);
}
.modal-header {
    border-bottom: 1px solid var(--pacia-border);
    color: var(--pacia-text);
}
.modal-footer { border-top: 1px solid var(--pacia-border); }
.modal-title { color: var(--pacia-text); letter-spacing: -0.025em; font-weight: 800; }

/* ── Buttons (polish on top of variable remap) ─────────────────────────── */
.btn {
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: 8px;
    transition: transform 0.1s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.btn:focus,
.btn:focus-visible { box-shadow: 0 0 0 3px var(--pacia-accent-soft); }

.btn-primary {
    background: var(--pacia-accent-ink);
    border-color: var(--pacia-accent-ink);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #2a241c;
    border-color: #2a241c;
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--pacia-accent-ink);
    color: var(--pacia-accent-ink);
    background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: var(--pacia-accent-ink);
    color: #fff;
    border-color: var(--pacia-accent-ink);
}

.btn-outline-secondary {
    border-color: var(--pacia-border-strong);
    color: var(--pacia-text-body);
    background: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background: var(--pacia-surface-2);
    color: var(--pacia-text);
    border-color: var(--pacia-text);
}

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 10.5px;
}
.badge.bg-warning { color: var(--pacia-accent-ink); }
.badge.bg-light { color: var(--pacia-text); }
.badge.bg-info {
    /* Used widely across very different contexts — keep neutral so it
       doesn't compete with lime. AI credits, deload, race type, etc. */
    background-color: var(--pacia-surface-2) !important;
    color: var(--pacia-text) !important;
    border: 1px solid var(--pacia-border-strong);
}

/* ── Misc utilities ────────────────────────────────────────────────────── */
.shadow,
.shadow-sm,
.shadow-lg { box-shadow: var(--pacia-shadow-lift) !important; }
.bg-white { background-color: var(--pacia-surface) !important; }
.border { border-color: var(--pacia-border) !important; }
.spinner-border { color: var(--pacia-accent-ink); }
hr { border-color: var(--pacia-border); opacity: 1; }

.page-link {
    color: var(--pacia-text);
    background: var(--pacia-surface);
    border-color: var(--pacia-border);
}
.page-link:hover { background: var(--pacia-surface-2); color: var(--pacia-text); border-color: var(--pacia-border-strong); }
.page-item.active .page-link {
    background: var(--pacia-accent-ink);
    border-color: var(--pacia-accent-ink);
    color: #fff;
}

.progress { background: var(--pacia-surface-2); border-radius: 999px; }
.progress-bar { background: var(--pacia-accent-ink); }

/* ─────────────────────────────────────────────────────────────────────
   Dashboard calendar strip + Pacia Coach card
   Migrated from inline <style> in dashboard.html. Keeps the original
   class names so the partials (_dashboard_week, _dashboard_day_detail)
   inherit automatically with zero template edits.
   ───────────────────────────────────────────────────────────────────── */
.plan-day {
    flex: 1;
    border-radius: 8px;
    padding: 12px 10px;
    text-align: center;
    border: 1px solid var(--pacia-border);
    position: relative;
    min-width: 0;
    background: var(--pacia-surface);
    transition: border-color 0.15s, transform 0.15s;
}
.plan-day:hover { border-color: var(--pacia-border-strong); transform: translateY(-1px); }
.plan-day.state-completed,
.plan-day.state-today-completed {
    border-left: 4px solid var(--pacia-completed);
    background: var(--pacia-completed-bg);
}
.plan-day.state-today {
    border: 2px solid var(--pacia-accent-ink);
    background: #f3f7d0;  /* pale lime tint */
    box-shadow: 0 0 0 4px var(--pacia-accent-soft);
}
.plan-day.state-rest { opacity: 0.55; background: var(--pacia-surface-2); }
.plan-day.state-missed {
    border-left: 4px solid var(--pacia-missed);
    background: var(--pacia-missed-bg);
}
.plan-day-name {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pacia-muted-soft);
    font-weight: 700;
    margin-bottom: 6px;
}
.plan-day.state-today .plan-day-name,
.plan-day.state-today-completed .plan-day-name {
    color: var(--pacia-accent-ink);
    font-weight: 800;
}
.plan-day-type {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pacia-text);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plan-day-detail {
    font-size: 10.5px;
    color: var(--pacia-text-body);
}
.plan-day-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pacia-completed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    box-shadow: 0 0 0 3px var(--pacia-completed-glow);
}
.plan-day-indicator {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--pacia-accent-ink);
    border-radius: 50%;
    border: 2px solid var(--pacia-bg);
}

.ai-rec-box {
    background: linear-gradient(135deg, #f9f4dd 0%, #efe8c8 100%);
    border: 1px solid #d8cea4;
    border-left: 4px solid var(--pacia-accent-ink);
    border-right: 4px solid var(--pacia-accent-ink);
    border-radius: 10px;
    padding: 16px 18px;
}
.ai-rec-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--pacia-accent-ink);
    color: var(--pacia-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(26, 22, 18, 0.18);
}
.ai-rec-tag {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pacia-accent-ink);
    font-weight: 800;
}

/* ── Breadcrumb (top of plan/race/session detail pages) ────────────────── */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: 12px;
}
.breadcrumb-item {
    color: var(--pacia-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--pacia-muted-soft);
    content: "·";
}
.breadcrumb-item a {
    color: var(--pacia-muted);
    text-decoration: none;
}
.breadcrumb-item a:hover { color: var(--pacia-text); }
.breadcrumb-item.active { color: var(--pacia-text); }

/* ── Bootstrap nav-tabs (plan detail Phases / Calendar tabs) ───────────── */
.nav-tabs {
    border-bottom: 1px solid var(--pacia-border);
    gap: 4px;
}
.nav-tabs .nav-link {
    color: var(--pacia-muted);
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: -1px;
    background: transparent;
    position: relative;
}
.nav-tabs .nav-link:hover {
    color: var(--pacia-text);
    border-color: transparent;
    background: var(--pacia-surface-2);
}
.nav-tabs .nav-link.active {
    color: var(--pacia-text);
    background: var(--pacia-surface);
    border-color: var(--pacia-border) var(--pacia-border) var(--pacia-surface);
    font-weight: 700;
}
.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px;
    bottom: -1px;
    height: 2px;
    background: var(--pacia-accent-ink);
}