/* === WIDGETS.CSS ===
 * assets/css/widgets.css
 * НАЗНАЧЕНИЕ: Компоненты Mindway - cards, buttons, chips, timeline, dialog, toast
 * СВЯЗИ: main.css, themes.css
 * РАЗМЕР: ~310 строк
 */

.glass-card,
.panel-card,
.metric-card,
.source-card,
.person-card,
.stack-item,
.timeline-card,
.mindway-dialog {
    border: 1px solid var(--line);
    background: color-mix(in oklch, var(--panel) 94%, white 6%);
    box-shadow: var(--shadow-panel);
    backdrop-filter: blur(12px);
    min-width: 0;
}

.glass-card,
.panel-card,
.mindway-dialog {
    border-radius: var(--radius-lg);
}

.panel-card,
.source-card,
.timeline-card,
.stack-item {
    padding: var(--space-3);
}

.metric-card,
.source-card,
.person-card,
.stack-item {
    border-radius: var(--radius-md);
}

.metric-card {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
}

.metric-card strong,
.person-card__name {
    font-size: 1.2rem;
    font-family: var(--font-heading);
}

.person-card__name {
    display: block;
}

.metric-label,
.sidebar-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--font-display);
}

.button,
.tab-button,
.theme-toggle {
    appearance: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.22s var(--ease-out-quart), border-color 0.22s var(--ease-out-quart), background 0.22s var(--ease-out-quart);
}

.button:hover,
.tab-button:hover,
.theme-toggle:hover {
    transform: translateY(-1px);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.button-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: oklch(19% 0.02 248);
    font-weight: 700;
}

.button-secondary {
    background: color-mix(in oklch, var(--panel-strong) 90%, white 10%);
    color: var(--text);
}

.button-small {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 0.88rem;
}

.button-block {
    width: 100%;
}

.theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--panel-strong) 86%, white 14%);
    color: var(--text);
    border: 1px solid var(--line);
}

.theme-toggle-wide {
    width: auto;
    padding-inline: 14px;
    border-radius: 999px;
    gap: 8px;
}

.theme-toggle__text {
    font-size: 0.86rem;
    font-family: var(--font-display);
}

.tab-button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 14px;
    min-height: 44px;
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--panel-strong) 74%, white 26%);
    color: var(--text-soft);
    text-align: left;
    line-height: 1.15;
    white-space: normal;
    border: 1px solid transparent;
}

.tab-button.is-active {
    background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 18%, var(--panel-strong) 82%), color-mix(in oklch, var(--accent-strong) 12%, var(--panel-strong) 88%));
    color: var(--text);
    border: 1px solid var(--line-strong);
}

.panel-card-emphasis {
    border-color: color-mix(in oklch, var(--accent) 24%, var(--line));
    background: color-mix(in oklch, var(--panel) 90%, white 10%);
}

.dashboard-status-card {
    display: grid;
    gap: 4px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: color-mix(in oklch, var(--panel-strong) 84%, white 16%);
}

.dashboard-status-card span {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.dashboard-status-card strong {
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

.dashboard-status-card small {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.field,
.field-inline label {
    display: grid;
    gap: 8px;
}

.field span,
.field-inline span {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-family: var(--font-display);
}

.field input,
.field textarea,
.field-inline select,
.filter-input {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: color-mix(in oklch, var(--panel-strong) 92%, white 8%);
    color: var(--text);
    padding: 12px 14px;
    outline: none;
}

.field input:focus,
.field textarea:focus,
.field-inline select:focus,
.filter-input:focus {
    border-color: color-mix(in oklch, var(--accent) 45%, white 12%);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}

.notice-card {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: color-mix(in oklch, var(--panel-strong) 84%, white 16%);
    color: var(--text-soft);
}

.notice-error {
    border-color: color-mix(in oklch, var(--danger) 35%, transparent);
    color: color-mix(in oklch, var(--danger) 82%, white 18%);
    background: color-mix(in oklch, var(--danger) 12%, var(--panel-strong) 88%);
}

.is-hidden {
    display: none !important;
}

.filter-bar {
    display: grid;
    gap: var(--space-2);
}

.toolbar-summary,
.source-card__meta,
.source-card__hint {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--panel-strong) 78%, white 22%);
    border: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 0.84rem;
}

.chip-danger {
    border-color: color-mix(in oklch, var(--danger) 38%, transparent);
    color: var(--danger);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in oklch, var(--panel-strong) 84%, white 16%);
}

.status-pill-ok {
    color: var(--accent);
}

.status-pill-error,
.status-pill-fail {
    color: var(--danger);
}

.activity-bars,
.timeline-list,
.stack-list,
.people-list,
.sidebar-stack {
    display: grid;
    gap: var(--space-2);
}

.activity-row,
.axis-row,
.stack-item__head,
.source-card__top,
.split-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.stack-item__head {
    align-items: flex-start;
    flex-wrap: wrap;
}

.stack-item__head > * {
    min-width: 0;
}

.stack-item__title,
.stack-item__head strong,
.stack-item p,
.timeline-card p,
.summary-text,
.person-card__name,
.source-card h3,
.source-card__meta,
.source-card__hint,
.metric-hint {
    overflow-wrap: anywhere;
}

.stack-item__meta-label {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-family: var(--font-display);
}

.activity-row__bar,
.axis-track {
    position: relative;
    flex: 1 1 auto;
    min-height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in oklch, var(--panel-strong) 82%, white 18%);
    border: 1px solid var(--line);
}

.activity-row__bar i,
.axis-track i {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.person-card {
    width: 100%;
    padding: var(--space-3);
    text-align: left;
    background: color-mix(in oklch, var(--panel-strong) 82%, white 18%);
    border: 1px solid transparent;
    color: var(--text);
}

.person-card.is-active {
    border-color: color-mix(in oklch, var(--accent) 42%, white 16%);
    background: color-mix(in oklch, var(--accent) 10%, var(--panel-strong) 90%);
}

.person-card__badge {
    display: inline-flex;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.summary-text,
.stack-item p,
.timeline-card p {
    margin: 0;
    line-height: 1.55;
    color: var(--text-soft);
}

.welcome-card {
    display: grid;
    gap: var(--space-3);
}

.welcome-card__copy {
    display: grid;
    gap: var(--space-2);
}

.sidebar-block {
    display: grid;
    gap: 8px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: color-mix(in oklch, var(--panel-strong) 86%, white 14%);
}

.timeline-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-family: var(--font-display);
}

.source-card h3 {
    margin: 12px 0 6px;
}

.source-card.is-active {
    border-color: color-mix(in oklch, var(--accent) 38%, white 14%);
    background: color-mix(in oklch, var(--accent) 8%, var(--panel-strong) 92%);
}

.source-card__meta,
.source-card__hint {
    margin: 0;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mindway-dialog {
    width: min(520px, calc(100vw - 24px));
    padding: 0;
    color: var(--text);
}

.mindway-dialog::backdrop {
    background: rgba(7, 10, 18, 0.64);
    backdrop-filter: blur(10px);
}

.dialog-form {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.toast-root {
    position: fixed;
    inset: auto var(--space-3) var(--space-3) auto;
    display: grid;
    gap: 10px;
    z-index: 100;
}

.toast-item {
    min-width: 220px;
    max-width: 360px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    color: white;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.24s var(--ease-out-quart), transform 0.24s var(--ease-out-quart);
    box-shadow: var(--shadow-soft);
}

.toast-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background: color-mix(in oklch, var(--accent) 70%, black 18%);
}

.toast-warning {
    background: color-mix(in oklch, var(--warning) 70%, black 18%);
}

.toast-error {
    background: color-mix(in oklch, var(--danger) 74%, black 18%);
}

.toast-info {
    background: color-mix(in oklch, var(--info) 72%, black 18%);
}

.panel-footer-actions {
    margin-top: var(--space-2);
}