/*
 * SMKK inventory modernization lane 002:
 * Shared design tokens and UI primitives for core app pages.
 */

:root {
    --ui-space-1: 8px;
    --ui-space-2: 12px;
    --ui-space-3: 16px;
    --ui-space-4: 24px;
    --ui-radius-1: 10px;
    --ui-radius-2: 14px;
    --ui-radius-3: 20px;
    --ui-shadow-soft: 0 12px 26px rgba(4, 10, 20, 0.38);
    --ui-shadow-strong: 0 20px 42px rgba(3, 8, 18, 0.48);
}

.app-shell {
    --ui-border: var(--app-border, rgba(87, 192, 255, 0.2));
    --ui-text: var(--app-ink, #e8f0ff);
    --ui-text-muted: var(--app-muted, #9bb1d1);
    --ui-accent: var(--app-accent, #57c0ff);
    --ui-surface: linear-gradient(160deg, rgba(16, 28, 50, 0.94), rgba(8, 14, 24, 0.82));
    --ui-surface-soft: linear-gradient(160deg, rgba(18, 36, 66, 0.95), rgba(9, 16, 28, 0.85));
}

.ui-stack-sm {
    display: grid;
    gap: var(--ui-space-2);
}

.ui-stack-md {
    display: grid;
    gap: var(--ui-space-3);
}

.ui-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
}

.ui-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1);
}

.ui-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
}

.ui-surface {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-3);
    box-shadow: var(--ui-shadow-soft);
}

.ui-surface-soft {
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-3);
    box-shadow: var(--ui-shadow-soft);
}

.ui-note {
    color: var(--ui-text-muted);
    font-size: 0.84rem;
    line-height: 1.4;
}

.ui-kpi-grid {
    gap: var(--ui-space-2);
}

.ui-kpi-grid > .app-kpi {
    min-width: 170px;
}

@media (max-width: 900px) {
    .ui-inline-actions,
    .ui-cluster {
        align-items: stretch;
    }
}

.record-correction-bar {
    display: grid;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-4);
    background:
        radial-gradient(circle at top right, rgba(87, 192, 255, 0.18), transparent 38%),
        linear-gradient(145deg, rgba(18, 36, 66, 0.96), rgba(8, 14, 24, 0.88));
    border: 1px solid rgba(87, 192, 255, 0.26);
}

.record-correction-copy {
    display: grid;
    gap: 6px;
}

.record-correction-eyebrow {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ui-accent);
}

.record-correction-bar h3 {
    margin: 0;
}

.record-correction-summary,
.record-correction-caption {
    margin: 0;
    color: var(--ui-text-muted);
}

.record-correction-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

.record-correction-actions .app-btn {
    text-decoration: none;
}

@media (max-width: 900px) {
    .record-correction-actions {
        display: grid;
    }
}