/* ========================================================================== */
/* TrailPlanner Design System — components.css                                */
/* Buttons, cards, KPI cards, tables, badges, forms                            */
/* ========================================================================== */

:where(.btn,.button,button.button,a.button){--btn-bg:var(--color-surface);--btn-bg-hover:var(--color-slate-50);--btn-bg-active:var(--color-slate-100);--btn-color:var(--color-text-primary);--btn-border:var(--color-border-strong);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:2.5rem;padding:.625rem 1rem;border:1px solid var(--btn-border);border-radius:var(--radius-md);color:var(--btn-color);background:var(--btn-bg);font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1;text-decoration:none;white-space:nowrap;box-shadow:var(--shadow-xs);cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}
:where(.btn,.button,button.button,a.button):hover{background:var(--btn-bg-hover);color:var(--btn-color);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
:where(.btn,.button,button.button,a.button):active{background:var(--btn-bg-active);transform:translateY(0);box-shadow:var(--shadow-xs)}
:where(.btn,.button,button.button,a.button):disabled,:where(.btn,.button,button.button,a.button)[aria-disabled="true"]{opacity:.55;pointer-events:none;box-shadow:none;transform:none}
:where(.btn-primary,.primary-link,.button:not(.secondary):not(.danger)){--btn-bg:linear-gradient(135deg,var(--color-brand-600),var(--color-accent-600));--btn-bg-hover:linear-gradient(135deg,var(--color-brand-700),var(--color-accent-700));--btn-bg-active:linear-gradient(135deg,var(--color-brand-800),var(--color-accent-700));--btn-color:var(--color-text-inverse);--btn-border:transparent}
:where(.btn-secondary,.button.secondary){--btn-bg:var(--color-brand-50);--btn-bg-hover:var(--color-brand-100);--btn-bg-active:var(--color-brand-200);--btn-color:var(--color-brand-800);--btn-border:var(--color-brand-200)}
.btn-outline{--btn-bg:transparent;--btn-bg-hover:var(--color-brand-50);--btn-bg-active:var(--color-brand-100);--btn-color:var(--color-brand-700);--btn-border:var(--color-brand-300)}
.btn-small,.compact-button{min-height:2rem;padding:.4375rem .75rem;border-radius:var(--radius-sm);font-size:var(--fs-xs)} .btn-large{min-height:3rem;padding:.8125rem 1.25rem;border-radius:var(--radius-lg);font-size:var(--fs-md)}

.card,.panel,.course-card,.empty-card,.settings-card,.result-card{border:1px solid var(--color-border-subtle)!important;border-radius:var(--radius-xl)!important;background:var(--color-surface)!important;box-shadow:var(--shadow-sm)!important}.card-header,.settings-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}.card-body{padding:var(--space-5)}
.app-page-header{margin:var(--space-3) 0 var(--space-5)!important;padding:clamp(1rem,2vw,1.5rem)!important;border:1px solid var(--color-border-subtle)!important;border-radius:var(--radius-2xl)!important;background:linear-gradient(135deg,rgb(239 246 255 / .9) 0%,rgb(248 250 252 / .96) 42%,rgb(255 255 255 / .98) 100%)!important;box-shadow:var(--shadow-sm)!important}.app-page-header h1{margin:var(--space-1) 0 var(--space-2)!important;color:var(--color-text-primary)!important;font-size:clamp(1.55rem,3vw,2.35rem)!important;font-weight:var(--fw-extrabold)!important;line-height:var(--lh-tight)!important;letter-spacing:0!important}.app-page-header p{margin:0!important;color:var(--color-text-secondary)!important;font-size:var(--fs-sm)!important;line-height:var(--lh-relaxed)!important}.app-page-header .eyebrow{color:var(--color-text-brand)!important;font-size:var(--fs-xs)!important;font-weight:var(--fw-extrabold)!important;letter-spacing:var(--letter-wider)!important;text-transform:uppercase!important}@media (max-width:760px){.app-page-header{flex-direction:column!important;align-items:stretch!important}}

.kpi-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(18rem,.75fr)!important;gap:var(--space-4)!important;margin:var(--space-4) 0!important}.kpi-card{min-height:8.25rem;display:flex;flex-direction:column;justify-content:space-between;border-radius:var(--radius-xl)!important;padding:var(--space-5)!important;overflow:hidden}.kpi-title,.metric-label{color:var(--color-text-muted)!important;font-size:var(--fs-xs)!important;font-weight:var(--fw-extrabold)!important;letter-spacing:var(--letter-wider)!important;text-transform:uppercase!important}.metric-value{color:var(--color-text-primary);font-size:clamp(1.2rem,1.7vw,1.75rem)!important;font-weight:var(--fw-extrabold)!important;line-height:var(--lh-tight);letter-spacing:var(--letter-tight);font-variant-numeric:tabular-nums}

.table-wrap,.settings-table-shell{width:100%;max-height:720px;overflow:auto;border:1px solid var(--color-border-subtle)!important;border-radius:var(--radius-xl)!important;background:var(--color-surface);box-shadow:var(--shadow-sm)!important;-webkit-overflow-scrolling:touch}:where(.plan-table,.settings-table){width:100%;border-collapse:separate!important;border-spacing:0!important;font-size:var(--fs-sm)!important}:where(.plan-table,.settings-table) :where(th,td){padding:var(--table-cell-y) var(--table-cell-x)!important;border-bottom:1px solid var(--color-border-subtle)!important;vertical-align:middle}:where(.plan-table,.settings-table) thead th{position:sticky;top:0;z-index:var(--z-sticky);background:var(--table-header-bg)!important;color:var(--color-text-secondary)!important;font-size:var(--fs-xs)!important;font-weight:var(--fw-extrabold)!important;letter-spacing:var(--letter-wider);text-transform:uppercase;white-space:nowrap}:where(.plan-table,.settings-table) tbody tr:hover{background:var(--table-row-hover)}:where(.plan-table,.settings-table) tbody tr:last-child td{border-bottom:0!important}

.badge{display:inline-flex;align-items:center;border-radius:var(--radius-pill);padding:.3rem .6rem;border:1px solid var(--color-brand-200);background:var(--color-brand-50);color:var(--color-brand-800);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
@media (max-width:1100px){.kpi-row{grid-template-columns:1fr!important}}

.segment-row.segment-excluded{opacity:.52;background:var(--color-slate-50)}.segment-row.segment-suspect:not(.segment-excluded){background:#fff7ed}.segment-row.segment-atypical:not(.segment-excluded){background:#fef2f2}.segment-row.segment-atypical:not(.segment-excluded) td{border-bottom-color:#fecaca!important}.audit-flag-danger{border-color:#fecaca!important;background:#fee2e2!important;color:#991b1b!important}.activity-segments-table td{white-space:nowrap}.activity-segments-table td:last-child{white-space:normal;min-width:12rem}.table-sort-button{display:inline-flex;align-items:center;gap:.35rem;border:0;background:transparent;color:inherit;font:inherit;font-weight:var(--fw-extrabold);letter-spacing:var(--letter-wider);text-transform:uppercase;cursor:pointer}.table-sort-button::after{content:"";width:.42rem;height:.42rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;color:var(--color-text-muted);transform:rotate(45deg);opacity:.65}.table-sort-button.is-desc::after{color:#991b1b;transform:rotate(-135deg);opacity:1}
.fatigue-row-strong:not(.fatigue-row-low){background:#fef2f2}.fatigue-row-strong:not(.fatigue-row-low) td{border-bottom-color:#fecaca!important}.fatigue-row-low{opacity:.62}.activity-fatigue-table td{white-space:nowrap}.activity-fatigue-table td:last-child{white-space:normal;min-width:16rem}
.drift-high{background:#fef2f2}.drift-medium{background:#fff7ed}.drift-light{background:#fffbeb}.drift-stable{background:#f0fdf4}.drift-negative{background:#ecfeff}.drift-unknown{background:var(--color-slate-50);opacity:.72}.confidence-badge.confidence-low{border-color:var(--color-border-strong);background:var(--color-slate-100);color:var(--color-text-secondary)}.confidence-badge.confidence-medium{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}.confidence-badge.confidence-high{border-color:#bbf7d0;background:#f0fdf4;color:#15803d}.activity-fatigue-bin-table td{min-width:8rem;white-space:nowrap}
.activity-list-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap}.activity-list-controls label{min-width:min(100%,18rem);flex:1}.activity-list-controls input{width:100%;min-height:2.5rem;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:.625rem .75rem}.activity-sort-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.course-notes-panel{margin:var(--space-3) 0}.course-notes-line{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.course-notes-content{margin-top:var(--space-2);max-height:11rem;overflow:auto;padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-slate-50);color:var(--color-text-primary);white-space:pre-wrap;line-height:var(--lh-relaxed)}