/* Components — Stripe Dashboard inspired. */

/* ================= Headings ================= */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
    letter-spacing: -.012em;
    line-height: var(--lh-tight);
    margin: 0;
}
h1, .h1 { font-size: var(--fs-3xl); letter-spacing: -.022em; font-weight: var(--fw-bold); }
h2, .h2 { font-size: var(--fs-2xl); letter-spacing: -.018em; }
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-lg); }
h5, .h5 { font-size: var(--fs-md); }
h6, .h6 { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }

p { margin: 0 0 var(--sp-3); color: var(--text); }
.lead { font-size: var(--fs-lg); color: var(--text-muted); }

.text-muted, .text-secondary { color: var(--text-muted) !important; }
.text-subtle { color: var(--text-subtle) !important; }
.small, small { font-size: var(--fs-sm); }
.fw-medium { font-weight: var(--fw-medium); }

hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-4) 0; opacity: 1; }

/* ================= Cards ================= */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-color: var(--text);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--r-md);
    --bs-card-cap-bg: var(--surface);
    --bs-card-cap-color: var(--text-strong);
    --bs-card-cap-padding-y: var(--sp-3);
    --bs-card-cap-padding-x: var(--sp-5);
    box-shadow: var(--shadow-xs);
    border-color: var(--border);
}
.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    padding: var(--sp-3) var(--sp-5);
}
.card-footer {
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-sm);
}
.card-body { padding: var(--sp-5); color: var(--text); }
.card-title { color: var(--text-strong); font-weight: var(--fw-semibold); }

/* ================= Buttons ================= */
.btn {
    --bs-btn-padding-x: var(--sp-4);
    --bs-btn-padding-y: .45rem;
    --bs-btn-font-size: var(--fs-md);
    --bs-btn-font-weight: var(--fw-semibold);
    --bs-btn-border-radius: var(--r);
    --bs-btn-border-width: 1px;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
    letter-spacing: -.005em;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active { transform: translateY(1px); }
.btn-sm {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .35rem;
    --bs-btn-font-size: var(--fs-sm);
    --bs-btn-border-radius: var(--r-sm);
}
.btn-lg {
    --bs-btn-padding-x: var(--sp-5);
    --bs-btn-padding-y: .6rem;
    --bs-btn-font-size: var(--fs-md);
    --bs-btn-border-radius: var(--r-md);
}

/* Primary — Stripe blurple solid with subtle gradient + shadow */
.btn-primary {
    --bs-btn-color: var(--accent-fg);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-fg);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-bg: var(--accent-active);
    --bs-btn-active-border-color: var(--accent-active);
    --bs-btn-disabled-color: var(--accent-fg);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0));
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 2px 5px rgba(99, 91, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn-primary:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 4px 8px rgba(99, 91, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
}

/* Secondary — outlined neutral */
.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--text-strong);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text-strong);
    --bs-btn-hover-bg: var(--bg-muted);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-color: var(--text-strong);
    --bs-btn-active-bg: var(--bg-muted);
    --bs-btn-active-border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}

/* Danger */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: #c01a3a;
    --bs-btn-hover-border-color: #c01a3a;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 2px 5px rgba(223, 27, 65, .25);
}
.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--danger-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
}

/* Warning */
.btn-warning,
.btn-outline-warning {
    --bs-btn-color: var(--warning);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--warning-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
}

/* Success */
.btn-success,
.btn-outline-success {
    --bs-btn-color: var(--success);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--success-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--success);
    --bs-btn-hover-border-color: var(--success);
}

/* Link */
.btn-link {
    --bs-btn-color: var(--accent);
    --bs-btn-hover-color: var(--accent-hover);
    text-decoration: none;
    padding: .25rem .35rem;
    font-weight: var(--fw-medium);
}
.btn-link:hover { text-decoration: underline; }

.btn.disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }

/* ================= Forms ================= */
.form-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-strong);
    margin-bottom: 6px;
    letter-spacing: -.005em;
}
.form-text { color: var(--text-muted); font-size: var(--fs-sm); }

.form-control,
.form-select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    font-size: var(--fs-md);
    padding: .5rem .75rem;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    line-height: 1.4;
}
.form-control::placeholder { color: var(--text-subtle); }
.form-control:hover,
.form-select:hover { border-color: var(--neutral-400); }
.form-control:focus,
.form-select:focus {
    background: var(--surface);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
    outline: none;
}
.form-control-sm,
.form-select-sm { font-size: var(--fs-sm); padding: .35rem .6rem; border-radius: var(--r-sm); }
.form-control-lg { font-size: var(--fs-md); padding: .65rem .85rem; border-radius: var(--r-md); }

textarea.form-control { min-height: 96px; line-height: var(--lh-snug); }

.form-check-input {
    background-color: var(--surface);
    border-color: var(--border-strong);
    width: 1rem; height: 1rem;
    margin-top: .25rem;
    box-shadow: var(--shadow-xs);
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.form-check-input:focus { box-shadow: var(--shadow-focus); border-color: var(--accent); }
.form-check-label { color: var(--text); font-size: var(--fs-md); margin-left: .25rem; }

.input-group-text {
    background: var(--bg-subtle);
    color: var(--text-muted);
    border-color: var(--border-strong);
    font-size: var(--fs-sm);
}

.invalid-feedback { color: var(--danger); font-size: var(--fs-sm); }
.is-invalid {
    border-color: var(--danger) !important;
}
.is-invalid:focus { box-shadow: 0 0 0 4px rgba(223, 27, 65, .15) !important; }

/* ================= Tables ================= */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--bg-subtle);
    --bs-table-hover-color: var(--text);
    margin-bottom: 0;
    font-size: var(--fs-md);
}
.table > :not(caption) > * > * {
    padding: .75rem var(--sp-4);
    border-bottom-color: var(--border);
}
.table > thead {
    background: var(--bg-subtle);
}
.table > thead > tr > th {
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--border);
    padding-top: .65rem;
    padding-bottom: .65rem;
    white-space: nowrap;
}
.table > tbody > tr {
    transition: background var(--t-fast);
}
.table > tbody > tr:hover > * {
    background: var(--bs-table-hover-bg);
}
.table > tbody > tr > td { color: var(--text); }
.table-sm > :not(caption) > * > * { padding: .55rem var(--sp-3); }

/* ================= Status Pills ================= */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 3px 10px 3px 8px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: .01em;
    border: 1px solid var(--pill-completed-bd);
    background: var(--pill-completed-bg);
    color: var(--pill-completed-fg);
    line-height: 1.5;
    text-transform: capitalize;
}
.status-pill::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pill-completed-dot);
    flex-shrink: 0;
}

.status-pill--running   { color: var(--pill-running-fg);   background: var(--pill-running-bg);   border-color: var(--pill-running-bd); }
.status-pill--running::before   { background: var(--pill-running-dot); box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); animation: pulse-dot 1.6s ease-in-out infinite; }

.status-pill--scheduled { color: var(--pill-scheduled-fg); background: var(--pill-scheduled-bg); border-color: var(--pill-scheduled-bd); }
.status-pill--scheduled::before { background: var(--pill-scheduled-dot); }

.status-pill--paused    { color: var(--pill-paused-fg);    background: var(--pill-paused-bg);    border-color: var(--pill-paused-bd); }
.status-pill--paused::before    { background: var(--pill-paused-dot); }

.status-pill--failed    { color: var(--pill-failed-fg);    background: var(--pill-failed-bg);    border-color: var(--pill-failed-bd); }
.status-pill--failed::before    { background: var(--pill-failed-dot); }

.status-pill--completed { color: var(--pill-completed-fg); background: var(--pill-completed-bg); border-color: var(--pill-completed-bd); }
.status-pill--completed::before { background: var(--pill-completed-dot); }

.status-pill--draft     { color: var(--pill-draft-fg);     background: var(--pill-draft-bg);     border-color: var(--pill-draft-bd); }
.status-pill--draft::before     { background: var(--pill-draft-dot); }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .65; transform: scale(1.25); }
}

/* ================= Badges ================= */
.badge {
    font-weight: var(--fw-semibold);
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    letter-spacing: .02em;
    border: 1px solid transparent;
}

/* ================= KPI Cards ================= */
.kpi-card {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
.kpi-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.kpi-card .card-body { padding: var(--sp-5); }

.kpi-card__label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-3);
    letter-spacing: -.005em;
}

.kpi-card__value {
    font-size: 28px;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.kpi-card__hint {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.kpi-card--danger { border-color: var(--danger-border); background: var(--danger-bg); }
.kpi-card--danger .kpi-card__value { color: var(--danger); }

/* ================= Project picker ================= */
.project-card {
    display: block;
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-fast);
    box-shadow: var(--shadow-xs);
}
.project-card:hover {
    border-color: var(--accent-soft-bd);
    box-shadow: var(--shadow-card-hover);
    color: var(--text);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ================= Progress ================= */
.progress {
    --bs-progress-bg: var(--bg-muted);
    --bs-progress-bar-bg: var(--accent);
    --bs-progress-bar-color: var(--accent-fg);
    --bs-progress-border-radius: var(--r-pill);
    --bs-progress-font-size: var(--fs-xs);
    height: 8px;
    border: none;
    overflow: hidden;
}
.progress-bar {
    background: linear-gradient(90deg, var(--accent), var(--brand-700));
    font-weight: var(--fw-semibold);
    transition: width var(--t-base);
}

/* ================= Alerts ================= */
.alert {
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}
.alert-success { border-color: var(--success-border); background: var(--success-bg); color: var(--success-fg); }
.alert-danger  { border-color: var(--danger-border);  background: var(--danger-bg);  color: var(--danger-fg); }
.alert-warning { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); }
.alert-info    { border-color: var(--info-border);    background: var(--info-bg);    color: var(--info-fg); }

[data-bs-theme="dark"] .alert-success { color: var(--success); }
[data-bs-theme="dark"] .alert-danger  { color: var(--danger); }
[data-bs-theme="dark"] .alert-warning { color: var(--warning); }
[data-bs-theme="dark"] .alert-info    { color: var(--info); }

/* ================= Code ================= */
code, .font-monospace, kbd, samp {
    font-family: var(--font-mono);
    font-size: .9em;
    color: var(--text);
}
code:not(pre code) {
    background: var(--bg-muted);
    padding: 1px 6px;
    border-radius: var(--r-xs);
    border: 1px solid var(--border);
    font-size: .85em;
    color: var(--text-strong);
}

/* ================= Active batch list ================= */
.active-batch-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-height: 24rem;
    overflow-y: auto;
}
.active-batch {
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-subtle);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.active-batch:hover {
    border-color: var(--border-strong);
    background: var(--surface);
}
.active-batch + .active-batch { margin-top: 0; }

/* ================= Details/summary ================= */
details > summary {
    cursor: pointer;
    list-style: none;
    color: var(--text-subtle);
    font-weight: var(--fw-semibold);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: "›";
    display: inline-block;
    margin-right: var(--sp-2);
    transition: transform var(--t-fast);
    font-size: 14px;
}
details[open] > summary::before { transform: rotate(90deg); }

/* ================= Btn group / pagination ================= */
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-top-left-radius: var(--r); border-bottom-left-radius: var(--r); }
.btn-group .btn:last-child  { border-top-right-radius: var(--r); border-bottom-right-radius: var(--r); }

/* ================= Definition list ================= */
dl.row dt {
    color: var(--text-muted);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
}
dl.row dd { color: var(--text); font-size: var(--fs-md); }

/* ================= Misc colors ================= */
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-warning { color: var(--warning) !important; }
.text-info    { color: var(--info)    !important; }

/* Page header pattern */
.container-fluid { padding-left: var(--sp-6); padding-right: var(--sp-6); }
section.container-fluid > header { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); }
section.container-fluid > header h1 { color: var(--text-strong); }