/* ---------- Card ---------- */

.card {
    background: var(--surface-raised);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}

.card--flush { padding: 0; overflow: hidden; }
.card--sunken { background: var(--surface-inset); box-shadow: none; }
.card--accent {
    background: linear-gradient(140deg, var(--role-accent, var(--color-accent-500)), var(--role-accent-2, var(--color-violet-500)));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-accent);
}

.card--accent h1, .card--accent h2, .card--accent h3, .card--accent h4 { color: #fff; }
.card--accent .muted, .card--accent .subtle { color: rgba(255, 255, 255, .78); }

.card--interactive {
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
    display: block;
    color: inherit;
}

.card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
    color: inherit;
}

.card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.card__title { font-size: var(--text-md); }
.card__hint { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.card__actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.card__body { padding: var(--space-5); }
.card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 38px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--surface-raised);
    color: var(--text-default);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.btn:hover { border-color: var(--border-strong); color: var(--text-strong); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }

.btn--primary {
    background: var(--role-accent, var(--accent));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn--primary:hover { background: var(--accent-hover); color: #fff; }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-inset); color: var(--text-strong); }

.btn--subtle { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.btn--subtle:hover { color: var(--accent-hover); }

.btn--sm { height: 30px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--lg { height: 46px; padding: 0 var(--space-6); font-size: var(--text-base); border-radius: var(--radius-md); }
.btn--block { width: 100%; }

/* ---------- Badges, chips, pills ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 650;
    background: var(--surface-inset);
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    white-space: nowrap;
}

.badge--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge--info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.badge--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-default);
    background: var(--surface-raised);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 550;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.chip:hover { border-color: var(--border-strong); color: var(--text-strong); }

.chip.is-active,
.chip[aria-pressed="true"] {
    background: var(--role-accent, var(--accent));
    border-color: transparent;
    color: #fff;
}

.chip--static { cursor: default; }
.chip__remove { opacity: .6; font-size: var(--text-md); line-height: 1; }

.chip-set { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Avatar ---------- */

.avatar {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--text-xs);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent-500), var(--color-violet-500));
    letter-spacing: .02em;
}

.avatar--lg { width: 52px; height: 52px; font-size: var(--text-base); }
.avatar--xl { width: 76px; height: 76px; font-size: var(--text-lg); }
.avatar--sm { width: 26px; height: 26px; font-size: 10px; }

.avatar--a { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.avatar--b { background: linear-gradient(135deg, #14b8a6, #34d399); }
.avatar--c { background: linear-gradient(135deg, #f59e0b, #fb7185); }
.avatar--d { background: linear-gradient(135deg, #38bdf8, #6366f1); }
.avatar--e { background: linear-gradient(135deg, #f43f5e, #8b5cf6); }

.avatar-stack { display: flex; }
.avatar-stack .avatar { border: 2px solid var(--surface-raised); margin-left: -10px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- KPI tiles ---------- */

.kpi {
    background: var(--surface-raised);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
}

.kpi::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--role-accent, var(--color-accent-500)), var(--role-accent-2, var(--color-violet-500)));
    opacity: .75;
}

.kpi__label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 550;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kpi__label svg { width: 15px; height: 15px; opacity: .7; }

.kpi__value {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -.03em;
    line-height: 1;
}

.kpi__unit { font-size: var(--text-lg); font-weight: 600; color: var(--text-muted); }

.kpi__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 650;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
}

.kpi__delta--up { color: var(--success); background: var(--success-soft); }
.kpi__delta--down { color: var(--danger); background: var(--danger-soft); }
.kpi__delta--flat { color: var(--text-muted); background: var(--surface-inset); }
.kpi__delta svg { width: 12px; height: 12px; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th {
    text-align: left;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-subtle);
    font-weight: 650;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
    background: var(--surface-inset);
}

.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-default);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-inset); }

.table--sortable th[data-sort] { cursor: pointer; user-select: none; }
.table--sortable th[data-sort]::after { content: "\2195"; opacity: .35; margin-left: 6px; }
.table--sortable th[data-sort-dir="asc"]::after { content: "\2191"; opacity: 1; color: var(--accent); }
.table--sortable th[data-sort-dir="desc"]::after { content: "\2193"; opacity: 1; color: var(--accent); }

.table__num { text-align: right; font-variant-numeric: tabular-nums; }
.table__person { display: flex; align-items: center; gap: var(--space-3); }
.table__person strong { color: var(--text-strong); font-weight: 600; }

tr.is-child td { background: var(--surface-inset); font-size: var(--text-sm); }
tr.is-child.is-hidden { display: none; }

.table__expand {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: var(--radius-xs);
}

.table__expand svg { width: 14px; height: 14px; transition: transform var(--duration) var(--ease); }
.table__expand[aria-expanded="true"] svg { transform: rotate(90deg); }
.table__expand:hover { background: var(--surface-sunken); color: var(--accent); }

/* ---------- Tabs ---------- */

.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: var(--space-5);
    overflow-x: auto;
}

.tabs__tab {
    border: 0;
    background: transparent;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.tabs__tab:hover { color: var(--text-strong); }

.tabs__tab[aria-selected="true"] {
    color: var(--role-accent, var(--accent));
    border-bottom-color: var(--role-accent, var(--accent));
}

.tabs__panel[hidden] { display: none; }

/* ---------- Segmented control ---------- */

.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
    border: 1px solid var(--border-soft);
    gap: 2px;
}

.segmented button {
    border: 0;
    background: transparent;
    padding: 5px var(--space-3);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.segmented button[aria-pressed="true"] {
    background: var(--surface-raised);
    color: var(--text-strong);
    box-shadow: var(--shadow-xs);
}

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.field__hint { font-size: var(--text-xs); color: var(--text-muted); }

.input, .select, .textarea {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--surface-raised);
    padding: 9px var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-default);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.textarea { min-height: 92px; resize: vertical; line-height: 1.55; }

.select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) 47%, calc(100% - 12px) 47%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--space-8);
}

.range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    border: 1px solid var(--border-soft);
    cursor: pointer;
}

.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--role-accent, var(--accent));
    border: 3px solid var(--surface-raised);
    box-shadow: var(--shadow-sm);
    cursor: grab;
}

.range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--role-accent, var(--accent));
    border: 3px solid var(--surface-raised);
    box-shadow: var(--shadow-sm);
    cursor: grab;
}

.range-row { display: flex; align-items: center; gap: var(--space-4); }
.range-row output {
    min-width: 62px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    color: var(--text-strong);
    font-size: var(--text-sm);
}

.switch {
    position: relative;
    width: 42px;
    height: 24px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration) var(--ease);
}

.switch[aria-checked="true"] { background: var(--role-accent, var(--accent)); border-color: transparent; }
.switch[aria-checked="true"]::after { transform: translateX(18px); }

.switch-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-soft);
}

.switch-row:last-child { border-bottom: 0; }
.switch-row__text { line-height: 1.35; }
.switch-row__text strong { display: block; color: var(--text-strong); font-size: var(--text-sm); }
.switch-row__text span { font-size: var(--text-xs); color: var(--text-muted); }

.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); }

.option {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: var(--surface-raised);
    cursor: pointer;
    text-align: left;
    transition: all var(--duration) var(--ease);
}

.option strong { display: block; font-size: var(--text-sm); color: var(--text-strong); }
.option span { font-size: var(--text-xs); color: var(--text-muted); }

.option:hover { border-color: var(--border-strong); }

.option[aria-pressed="true"] {
    border-color: var(--role-accent, var(--accent));
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--role-accent, var(--accent));
}

/* ---------- Progress ---------- */

.bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}

.bar__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--role-accent, var(--color-accent-500)), var(--role-accent-2, var(--color-violet-500)));
}

.bar--sm { height: 5px; }
.bar__fill--success { background: var(--success); }
.bar__fill--warning { background: var(--warning); }
.bar__fill--danger { background: var(--danger); }

.meter-row { display: grid; gap: var(--space-2); }
.meter-row__head { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); }
.meter-row__head strong { color: var(--text-strong); font-weight: 600; }
.meter-row__head span { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Timeline ---------- */

.timeline { position: relative; padding-left: var(--space-6); }

.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--border-default);
}

.timeline__item { position: relative; padding-bottom: var(--space-5); }
.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-6) + 2px);
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface-raised);
    border: 2px solid var(--border-strong);
}

.timeline__item.is-done::before { background: var(--success); border-color: var(--success); }
.timeline__item.is-current::before { background: var(--role-accent, var(--accent)); border-color: var(--role-accent, var(--accent)); box-shadow: 0 0 0 4px var(--accent-soft); }

.timeline__title { font-size: var(--text-sm); font-weight: 650; color: var(--text-strong); }
.timeline__meta { font-size: var(--text-xs); color: var(--text-muted); }
.timeline__body { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }

/* ---------- Stepper ---------- */

.stepper { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.stepper__step {
    flex: 1;
    min-width: 150px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: all var(--duration) var(--ease);
}

.stepper__index {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-subtle);
    letter-spacing: .1em;
}

.stepper__label { display: block; font-size: var(--text-sm); font-weight: 650; color: var(--text-strong); }
.stepper__desc { font-size: var(--text-xs); color: var(--text-muted); }

.stepper__step[aria-pressed="true"] {
    border-color: var(--role-accent, var(--accent));
    background: var(--accent-soft);
}

.stepper__step[aria-pressed="true"] .stepper__index { color: var(--role-accent, var(--accent)); }

/* ---------- Alerts / notes ---------- */

.alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: var(--surface-inset);
    font-size: var(--text-sm);
}

.alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.alert strong { display: block; color: var(--text-strong); }
.alert p { color: var(--text-muted); font-size: var(--text-sm); }

.alert--warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.alert--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.alert--success { background: var(--success-soft); border-color: transparent; color: var(--success); }
.alert--info { background: var(--info-soft); border-color: transparent; color: var(--info); }

/* ---------- List items ---------- */

.list { display: flex; flex-direction: column; }

.list__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-soft);
}

.list__item:first-child { padding-top: 0; }
.list__item:last-child { border-bottom: 0; padding-bottom: 0; }

.list__icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
}

.list__icon svg { width: 18px; height: 18px; }
.list__icon--success { background: var(--success-soft); color: var(--success); }
.list__icon--warning { background: var(--warning-soft); color: var(--warning); }
.list__icon--danger { background: var(--danger-soft); color: var(--danger); }

.list__text { min-width: 0; }
.list__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); }
.list__meta { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- Modal & toast ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    background: var(--surface-overlay);
    backdrop-filter: blur(3px);
}

.modal[hidden] { display: none; }

.modal__panel {
    width: min(520px, 100%);
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    border: 1px solid var(--border-soft);
}

.toast-host {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-inverted);
    color: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    font-weight: 550;
    animation: toast-in 260ms var(--ease);
}

.toast.is-leaving { animation: toast-out 200ms var(--ease) forwards; }
.toast svg { width: 18px; height: 18px; color: var(--color-emerald-400); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(8px) scale(.97); }
}

/* ---------- Empty / placeholder ---------- */

.placeholder {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.divider { height: 1px; background: var(--border-soft); margin: var(--space-5) 0; }

/* ---------- Heatmap ---------- */

.heatmap { display: grid; gap: 4px; font-size: var(--text-xs); overflow-x: auto; }

.heatmap__cell {
    border-radius: var(--radius-xs);
    padding: var(--space-3) var(--space-2);
    text-align: center;
    font-weight: 650;
    color: var(--text-strong);
    background: var(--surface-inset);
    cursor: default;
    transition: transform var(--duration) var(--ease);
}

.heatmap__cell:hover { transform: scale(1.06); box-shadow: var(--shadow-sm); }

.heatmap__cell[data-level="1"] { background: color-mix(in srgb, var(--danger) 24%, var(--surface-raised)); }
.heatmap__cell[data-level="2"] { background: color-mix(in srgb, var(--warning) 26%, var(--surface-raised)); }
.heatmap__cell[data-level="3"] { background: color-mix(in srgb, var(--warning) 14%, var(--surface-raised)); }
.heatmap__cell[data-level="4"] { background: color-mix(in srgb, var(--success) 24%, var(--surface-raised)); }
.heatmap__cell[data-level="5"] { background: color-mix(in srgb, var(--success) 42%, var(--surface-raised)); }

.heatmap__head {
    font-size: var(--text-xs);
    color: var(--text-subtle);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: var(--space-2);
    text-align: center;
}

.heatmap__row-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-strong);
    font-weight: 600;
    padding-right: var(--space-3);
    white-space: nowrap;
}

.legend { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); flex-wrap: wrap; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; }