/* =========================================================================
 *  MSK Software — Design Tokens (runtime stylesheet)
 *  Canonical source: resources/css/scss/_design-tokens.scss
 *  Documented in:    docs/core_system/msk_software_design_system_pack.md
 *
 *  This file is linked from src/MSKPortal/Views/layouts/portal.php so every
 *  portal screen sees the shared palette, typography stack, animations,
 *  and utility classes (.cond, .mono, .btn, .chip, .pill, .iconbtn, …).
 *
 *  Screens should reference tokens via CSS custom properties:
 *      color: var(--teal);
 *      background: var(--n75);
 *  rather than hard-coding hex values.
 * ========================================================================= */

:root {
    /* ── Brand teal ───────────────────────────────────────────────────────── */
    --teal:         #126F94;
    --teal-2:       #4D9CB7;
    --teal-tint:    #D6E8F0;
    --teal-soft:    #EEF7FB;
    --teal-soft-2:  #F7FBFD;   /* 50 % lighter than --teal-soft; alternating row tint */

    /* ── Navy (structural / active-state) ─────────────────────────────────── */
    --navy:         #0A3557;
    --navy-2:       #143E66;

    /* ── Neutral scale (11 stops, n50 → n900) ────────────────────────────── */
    --n50:          #F8FAFC;
    --n75:          #F4F7FA;
    --n100:         #EEF2F6;
    --n150:         #E2E8EF;
    --n200:         #D5DCE4;
    --n300:         #B7C0CC;
    --n400:         #8F9AA8;
    --n500:         #6B7785;
    --n600:         #4F5965;
    --n700:         #36404C;
    --n800:         #1F2731;
    --n900:         #0F1620;

    /* ── Semantic ─────────────────────────────────────────────────────────── */
    --ok:           #178A5B;   /* success / complete / active */
    --ok-tint:      #E4F4EC;
    --warn:         #B17105;   /* amber: pending, non-destructive caution, deactivate */
    --warn-tint:    #FBF1DD;
    --err:          #B8325A;   /* destructive only: delete, revoke, error state */
    --err-tint:     #FBE3EC;

    /* ── Focus ring ───────────────────────────────────────────────────────── */
    --focus-ring:   0 0 0 3px rgba(18,111,148,.22);
}

/* ===========================================================================
 *  Typography
 * =========================================================================== */

.cond { font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif; letter-spacing: .005em; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

.msi  {
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    line-height: 1;
    /* CRITICAL: ligature feature turns the text content (e.g. "menu") into the
       hamburger glyph. Without this declaration the glyph renders as plain
       letters and the icon appears as its own label. */
    -webkit-font-feature-settings: 'liga';
            font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    /* Keep ligatures intact even when the parent has letter-spacing rules. */
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    display: inline-block;
}
.msi.filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ===========================================================================
 *  Focus ring (consistent across every interactive control)
 * =========================================================================== */

.focusring:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--teal);
}

/* ===========================================================================
 *  Buttons
 * =========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 13.5px;
    transition: all .15s ease;
}

.btn-primary {
    background: var(--teal);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px -8px rgba(18,111,148,.55);
}
.btn-primary:hover    { background: #0F5E7E; }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.btn-navy        { background: var(--navy);  color: #fff; }
.btn-navy:hover  { background: var(--navy-2); }

.btn-danger       { background: var(--err); color: #fff; }
.btn-danger:hover { background: #971F45; }

.btn-ghost       { background: #fff; color: var(--navy); border: 1px solid var(--n200); }
.btn-ghost:hover { background: var(--teal-soft); border-color: var(--teal-tint); color: var(--teal); }

.btn-link          { background: transparent; color: var(--teal); padding: 8px 10px; }
.btn-link:hover    { background: var(--teal-soft); }
.btn-link:disabled { opacity: .4; cursor: not-allowed; }

/* ===========================================================================
 *  Chips and pills
 * =========================================================================== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--n600);
    cursor: pointer;
    background: transparent;
    border: none;
}
.pill .count {
    font-size: 11.5px;
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--n100);
    color: var(--n500);
}
.pill.active        { background: var(--navy); color: #fff; }
.pill.active .count { background: rgba(255,255,255,.18); color: #fff; }

/* ===========================================================================
 *  Forms — toolbar input
 * =========================================================================== */

.tbinput {
    background: #fff;
    border: 1px solid var(--n200);
    border-radius: 12px;
    padding: 8px 12px 8px 36px;
    font-size: 13.5px;
    color: var(--n800);
    min-width: 280px;
}

/* ===========================================================================
 *  Icon button (32 × 32, transparent → teal-soft on hover)
 * =========================================================================== */

.iconbtn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--n600);
    transition: all .12s;
}
.iconbtn:hover { background: var(--teal-soft); color: var(--teal); }

/* ===========================================================================
 *  Table row treatment (left rail driven by data-status)
 * ===========================================================================
 *  Apply class="dataRow" to <tr>, and the first cell gets a 3 px left rail
 *  whose colour reflects the row's status (data-status on the <tr>).
 */

tr.dataRow                       { border-bottom: 1px solid var(--n100); transition: background .12s ease; }
tr.dataRow:last-child            { border-bottom: none; }
tr.dataRow:hover                 { background: var(--teal-soft); }
tr.dataRow td:first-child        { position: relative; }
tr.dataRow td:first-child::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--n150);
    transition: background .12s;
}
tr.dataRow:hover                       td:first-child::before { background: var(--teal); }
tr.dataRow[data-status="running"]      td:first-child::before { background: var(--teal); }
tr.dataRow[data-status="in progress"]  td:first-child::before { background: var(--teal); }
tr.dataRow[data-status="error"]        td:first-child::before { background: var(--err); }
tr.dataRow[data-status="failed"]       td:first-child::before { background: var(--err); }
tr.dataRow[data-status="complete"]     td:first-child::before { background: var(--ok); }
tr.dataRow[data-status="completed"]    td:first-child::before { background: var(--ok); }

/* ===========================================================================
 *  Animations
 * ===========================================================================
 *  pulseRing — for live/running status dots (1.4 s loop)
 *  fadeUp    — modal entry (0.18 s)
 */

@keyframes pulseRing {
    0%       { transform: scale(.9); opacity: .6; }
    80%,100% { transform: scale(2);  opacity: 0;  }
}
.ring-pulse {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: currentColor;
    animation: pulseRing 1.4s cubic-bezier(.2,.7,.6,1) infinite;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.modal-card { animation: fadeUp .18s ease-out; }

/* ===========================================================================
 *  Alpine.js cloak (keep [x-cloak] hidden until Alpine initialises)
 * =========================================================================== */

[x-cloak] { display: none !important; }