/* =========================================================
   NGAA — SHARED UX STATES (shared/css/ux.css)
   One state system for every actor portal (HOS, Manager,
   Client, Developer). Loaded by each portal's shell so the
   eleven interaction rules read the same everywhere:
     · loading  → skeleton shaped like what is coming, never a spinner
     · empty    → why it is empty + the next step
     · error    → what went wrong, whose fault, how to fix it
     · denied   → why the permission is needed + a way back
     · offline  → cached content stays, the banner says what still works
     · progress → real percent, plus a lighter path when slow
     · success  → toast that reassures and shows what happens next
     · forms    → the exact field flagged inline, fix written beside it
   All colours fall back to the locked NGAA brand palette, so a
   portal without its own tokens still renders correctly.
   ========================================================= */

:root {
    --ux-brand: var(--nga-brand-700, #455799);
    --ux-brand-soft: var(--dashboard-primary-light, #eaedf7);
    --ux-ink: var(--nga-ink, #2b2a40);
    --ux-muted: var(--nga-text-muted, #8f8ba8);
    --ux-line: var(--nga-border, #e9e6f0);
    --ux-surface: var(--nga-surface, #ffffff);
    --ux-bg: var(--nga-background, #faf8fb);
    --ux-danger: var(--nga-danger, #b42318);
    --ux-danger-bg: #fff0ee;
    --ux-success: var(--nga-success, #18794e);
    --ux-success-bg: #e8f6ee;
    --ux-warn: #b54708;
    --ux-warn-bg: #fff5d9;
    --ux-radius: 14px;
}

/* ---------------- Skeleton (loading = the shape of what is coming) -------- */

.ux-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f1eef6, #e9e6f0);
    border-radius: 10px;
}

.ux-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: translateX(-100%);
    animation: ux-shimmer 1.25s ease-in-out infinite;
}

@keyframes ux-shimmer {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .ux-skeleton::after { animation: none; }
}

.ux-skel-line { height: 13px; margin: 9px 0; }
.ux-skel-line.w40 { width: 40%; }
.ux-skel-line.w60 { width: 60%; }
.ux-skel-line.w80 { width: 80%; }

.ux-skel-stack { display: grid; gap: 8px; }

.ux-skel-kpis { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.ux-skel-kpi {
    flex: 1 1 150px;
    min-width: 140px;
    height: 88px;
    padding: 14px;
    border: 1px solid var(--ux-line);
    border-radius: var(--ux-radius);
    background: var(--ux-surface);
    display: grid;
    align-content: start;
    gap: 10px;
}
.ux-skel-kpi .ux-skel-line:first-child { height: 11px; width: 55%; }
.ux-skel-kpi .ux-skel-line:last-child { height: 22px; width: 38%; }

.ux-skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ux-skel-card {
    height: 120px;
    padding: 16px;
    border: 1px solid var(--ux-line);
    border-radius: var(--ux-radius);
    background: var(--ux-surface);
    display: grid;
    align-content: start;
    gap: 10px;
}

.ux-skel-table { width: 100%; border-collapse: collapse; }
.ux-skel-table td { padding: 8px 10px; }
.ux-skel-table .ux-skeleton { height: 13px; }

.ux-skel-chart { height: 210px; border-radius: var(--ux-radius); }

.ux-skel-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.ux-skel-head .ux-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; }

/* ---------------- State block (empty / error / denied / offline) ---------- */

.ux-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 34px 22px;
    border: 1px dashed var(--ux-line);
    border-radius: var(--ux-radius);
    background: var(--ux-surface);
    color: var(--ux-muted);
    font-size: 14px;
    line-height: 1.55;
}

.ux-state .ux-state-emoji { font-size: 30px; line-height: 1; }
.ux-state .ux-state-title { color: var(--ux-ink); font-size: 16px; font-weight: 700; }
.ux-state .ux-state-reason { max-width: 46ch; }
.ux-state .ux-state-fix { max-width: 52ch; }

/* "whose fault" chip: you / the server / the connection */
.ux-state .ux-fault {
    align-self: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ux-brand-soft);
    color: var(--ux-brand);
}

.ux-state.ux-state-error { border-style: solid; border-color: #f3c6bf; background: var(--ux-danger-bg); }
.ux-state.ux-state-error .ux-state-title { color: var(--ux-danger); }
.ux-state.ux-state-error .ux-fault { background: #ffd8d3; color: var(--ux-danger); }

.ux-state.ux-state-denied { border-style: solid; border-color: #f2d9a6; background: var(--ux-warn-bg); }
.ux-state.ux-state-denied .ux-state-title { color: var(--ux-warn); }
.ux-state.ux-state-denied .ux-fault { background: #ffe6ad; color: var(--ux-warn); }

.ux-state .ux-state-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }

.ux-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--ux-brand);
    border-radius: 10px;
    background: var(--ux-brand);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.ux-state-btn:hover { filter: brightness(1.08); }
.ux-state-btn.ux-ghost { background: transparent; color: var(--ux-brand); }
.ux-state-btn[hidden] { display: none; }

/* In-table empty cells keep the row height honest */
td > .ux-state, th > .ux-state { padding: 26px 16px; border: none; background: transparent; }

/* ---------------- Offline / stale banner ("no intent" rule) --------------- */

.ux-offline-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 10px 16px;
    border: 1px solid #f2d9a6;
    border-radius: 12px;
    background: var(--ux-warn-bg);
    color: #7a4d06;
    font-size: 13.5px;
    line-height: 1.5;
}
.ux-offline-banner strong { color: #5c3904; }
.ux-offline-banner .ux-offline-works { flex: 1 1 320px; }
.ux-offline-banner button {
    border: 1px solid #d9ab52;
    background: #fff;
    color: #7a4d06;
    border-radius: 8px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.ux-offline-banner button:hover { background: #ffefcf; }
.ux-offline-banner[hidden] { display: none; }

/* ---------------- Toast (success + info) ---------------------------------- */

.ux-toast-wrap {
    position: fixed;
    right: 18px;
    bottom: 84px;
    z-index: 9999;
    display: grid;
    gap: 10px;
    max-width: min(360px, calc(100vw - 36px));
}

.ux-toast {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid var(--ux-line);
    background: var(--ux-surface);
    box-shadow: 0 10px 30px rgba(32, 38, 67, .18);
    color: var(--ux-ink);
    font-size: 14px;
    line-height: 1.5;
    animation: ux-toast-in .18s ease-out;
}
.ux-toast.ux-hide { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.ux-toast .ux-toast-emoji { font-size: 20px; line-height: 1.2; }
.ux-toast .ux-toast-title { font-weight: 700; }
.ux-toast .ux-toast-next { color: var(--ux-muted); font-size: 12.5px; margin-top: 2px; }
.ux-toast.ux-toast-success { border-color: #bfe3cd; background: var(--ux-success-bg); }
.ux-toast.ux-toast-success .ux-toast-title { color: var(--ux-success); }
.ux-toast.ux-toast-error { border-color: #f3c6bf; background: var(--ux-danger-bg); }
.ux-toast.ux-toast-error .ux-toast-title { color: var(--ux-danger); }
.ux-toast.ux-toast-warn { border-color: #f2d9a6; background: var(--ux-warn-bg); }

@keyframes ux-toast-in {
    from { opacity: 0; transform: translateY(8px); }
}

/* ---------------- Progress (slow network rule) ---------------------------- */

.ux-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--ux-line);
    border-radius: 12px;
    background: var(--ux-surface);
    color: var(--ux-ink);
    font-size: 13.5px;
}
.ux-progress .ux-progress-track {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--ux-brand-soft);
    overflow: hidden;
}
.ux-progress .ux-progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ux-brand), var(--nga-brand-600, #5a6aa8));
    transition: width .2s ease-out;
}
.ux-progress.ux-progress-indet .ux-progress-bar {
    width: 34%;
    animation: ux-indeterminate 1.1s ease-in-out infinite;
}
@keyframes ux-indeterminate {
    0% { left: -34%; }
    100% { left: 100%; }
}
.ux-progress .ux-progress-pct { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 42px; text-align: right; }
.ux-progress .ux-progress-light {
    border: 1px solid var(--ux-brand);
    background: transparent;
    color: var(--ux-brand);
    border-radius: 8px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.ux-progress[hidden] { display: none; }

/* ---------------- Form field states (validation rule) --------------------- */

.ux-field-error {
    display: block;
    margin-top: 5px;
    color: var(--ux-danger);
    font-size: 12.5px;
    line-height: 1.45;
}
.ux-field-error[hidden] { display: none; }

input.ux-input-error, select.ux-input-error, textarea.ux-input-error {
    border-color: var(--ux-danger) !important;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
}

input.ux-input-ok, select.ux-input-ok, textarea.ux-input-ok {
    border-color: var(--ux-success) !important;
}

.ux-form-help { color: var(--ux-muted); font-size: 12px; margin-top: 4px; }

/* ---------------- Session-expiry restore note ------------------------------ */

.ux-restore-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid #bfe3cd;
    border-radius: 12px;
    background: var(--ux-success-bg);
    color: #14603f;
    font-size: 13px;
}
.ux-restore-note button {
    margin-left: auto;
    border: 1px solid var(--ux-success);
    background: #fff;
    color: var(--ux-success);
    border-radius: 8px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.ux-restore-note[hidden] { display: none; }