/* ══════════════════════════════════════════════════════════════════════
   Logistics — logistics-pr-shipment.css
   Palette: Navy + Slate Gray  |  Light & Dark mode
   ══════════════════════════════════════════════════════════════════════ */

/* ══ LIGHT MODE (Default) ═════════════════════════════════════════════ */
:root {
    --lgs-bg-page       : #f0f2f6;
    --lgs-surface       : #ffffff;
    --lgs-surface-alt   : #f6f8fb;
    --lgs-surface-raised: #ffffff;
    --lgs-hover         : #eef1f7;
    --lgs-border        : #dde1ea;
    --lgs-border-soft   : #edf0f6;
    --lgs-border-accent : #b8bfd3;

    --lgs-accent        : #64748b;
    --lgs-accent-md     : #78839a;
    --lgs-accent-lt     : #f1f5f9;
    --lgs-accent-ring   : rgba(100,116,139,.2);
    --lgs-accent-shadow : rgba(100,116,139,.22);

    --lgs-navy          : #1e4488;
    --lgs-navy-lt       : #dbeafe;

    --lgs-txt-1         : #0f1c2e;
    --lgs-txt-2         : #445168;
    --lgs-txt-3         : #8ea2bb;

    --lgs-input-bg      : #f6f8fb;
    --lgs-input-bdr     : #c8d0dc;

    --lgs-dot-bg        : #ffffff;
    --lgs-dot-bdr       : #c8d0dc;
    --lgs-track-bg      : #dde1ea;

    --lgs-pickup        : #f59e0b;
    --lgs-pickup-md     : #fbbf24;
    --lgs-pickup-ring   : rgba(245,158,11,.25);
    --lgs-pickup-shadow : rgba(245,158,11,.28);

    --lgs-deliver       : #2563eb;
    --lgs-deliver-md    : #3b82f6;
    --lgs-deliver-ring  : rgba(37,99,235,.24);
    --lgs-deliver-shadow: rgba(37,99,235,.26);

    --lgs-onboard       : #16a34a;
    --lgs-onboard-md    : #22c55e;
    --lgs-onboard-ring  : rgba(22,163,74,.24);
    --lgs-onboard-shadow: rgba(22,163,74,.26);

    --lgs-save-bg       : #22c55e;
    --lgs-save-bd       : #16a34a;
    --lgs-save-bg-hover : #16a34a;
    --lgs-save-txt      : #0f1c2e;

    --lgs-chip-bg       : #eef1f7;
    --lgs-chip-txt      : #445168;

    --lgs-shadow-sm     : 0 1px 3px rgba(15,28,46,.07), 0 1px 2px rgba(15,28,46,.04);
    --lgs-shadow-md     : 0 4px 14px rgba(15,28,46,.09);
    --lgs-shadow-btn    : 0 2px 8px var(--lgs-accent-shadow);
    --lgs-shadow-hover  : 0 5px 18px var(--lgs-accent-shadow);
}

/* ══ DARK MODE (Follow Filament Theme Toggle) ════════════════════════ */
.dark,
html.dark,
body.dark,
[data-theme="dark"],
.fi-page.dark,
.fi-body.dark {
    --lgs-bg-page       : #0d1521;
    --lgs-surface       : #16202e;
    --lgs-surface-alt   : #111a28;
    --lgs-surface-raised: #1c2a3c;
    --lgs-hover         : #1e2d3e;
    --lgs-border        : #243447;
    --lgs-border-soft   : #192638;
    --lgs-border-accent : rgba(148,163,184,.3);

    --lgs-accent        : #cbd5e1;
    --lgs-accent-md     : #d1d5db;
    --lgs-accent-lt     : rgba(148,163,184,.12);
    --lgs-accent-ring   : rgba(148,163,184,.2);
    --lgs-accent-shadow : rgba(148,163,184,.18);

    --lgs-navy          : #6fa3e0;
    --lgs-navy-lt       : rgba(111,163,224,.14);

    --lgs-txt-1         : #f0f6ff;
    --lgs-txt-2         : #8faac8;
    --lgs-txt-3         : #4a6280;

    --lgs-input-bg      : #0d1521;
    --lgs-input-bdr     : #243447;

    --lgs-dot-bg        : #16202e;
    --lgs-dot-bdr       : #34506e;
    --lgs-track-bg      : #243447;

    --lgs-pickup        : #fbbf24;
    --lgs-pickup-md     : #fcd34d;
    --lgs-pickup-ring   : rgba(251,191,36,.28);
    --lgs-pickup-shadow : rgba(251,191,36,.32);

    --lgs-deliver       : #60a5fa;
    --lgs-deliver-md    : #93c5fd;
    --lgs-deliver-ring  : rgba(96,165,250,.3);
    --lgs-deliver-shadow: rgba(96,165,250,.32);

    --lgs-onboard       : #4ade80;
    --lgs-onboard-md    : #86efac;
    --lgs-onboard-ring  : rgba(74,222,128,.3);
    --lgs-onboard-shadow: rgba(74,222,128,.3);

    --lgs-save-bg       : #22c55e;
    --lgs-save-bd       : #16a34a;
    --lgs-save-bg-hover : #16a34a;
    --lgs-save-txt      : #ffffff;

    --lgs-chip-bg       : #1c2a3c;
    --lgs-chip-txt      : #8faac8;

    --lgs-shadow-sm     : 0 1px 4px rgba(0,0,0,.5);
    --lgs-shadow-md     : 0 4px 18px rgba(0,0,0,.55);
    --lgs-shadow-btn    : 0 2px 10px var(--lgs-accent-shadow);
    --lgs-shadow-hover  : 0 6px 22px var(--lgs-accent-shadow);
}

/* ══════════════════════════════════════════════════════════════════════ */

.lgs-root { display:flex; flex-direction:column; gap:1.25rem; }

/* ── Page header ────────────────────────────────────────────────────── */
.lgs-header {
    display:flex; align-items:flex-start; gap:1.1rem;
    background:var(--lgs-surface);
    border:1px solid var(--lgs-border);
    border-top:3px solid var(--lgs-accent);
    border-radius:12px; padding:1.35rem 1.7rem;
    box-shadow:var(--lgs-shadow-md);
}

.lgs-header-icon {
    flex-shrink:0; width:2.9rem; height:2.9rem; border-radius:10px;
    background:var(--lgs-accent-lt);
    border:1px solid var(--lgs-border-accent);
    display:flex; align-items:center; justify-content:center;
}
.lgs-header-icon svg { width:1.4rem; height:1.4rem; color:var(--lgs-accent); }
.lgs-header-body { flex:1; }

.lgs-header-badge {
    display:inline-block; font-size:.62rem; font-weight:800;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--lgs-accent); background:var(--lgs-accent-lt);
    border:1px solid var(--lgs-border-accent);
    border-radius:999px; padding:.17rem .72rem; margin-bottom:.45rem;
}

.lgs-header-title {
    margin:0 0 .25rem; font-size:1.25rem; font-weight:900;
    color:var(--lgs-txt-1); line-height:1.2; letter-spacing:-.02em;
}
.lgs-header-desc { margin:0; font-size:.87rem; color:var(--lgs-txt-2); line-height:1.5; }

/* ── Back button ────────────────────────────────────────────────────── */
.lgs-btn-back {
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.87rem; font-weight:600;
    color:var(--lgs-txt-2);
    border:1px solid var(--lgs-border);
    border-radius:9px; padding:.55rem 1.05rem;
    background:var(--lgs-surface);
    text-decoration:none;
    box-shadow:var(--lgs-shadow-sm);
    transition:all .18s;
}
.lgs-btn-back:hover {
    color:var(--lgs-accent);
    border-color:var(--lgs-border-accent);
    background:var(--lgs-accent-lt);
}
.lgs-btn-back svg { width:.9rem; height:.9rem; }

/* ── Detail PR info header ──────────────────────────────────────────── */
.lgs-detail-header {
    display:flex; align-items:flex-start; gap:1.1rem;
    background:var(--lgs-surface);
    border:1px solid var(--lgs-border);
    border-left:3px solid var(--lgs-accent);
    border-radius:12px; padding:1.2rem 1.5rem;
    box-shadow:var(--lgs-shadow-sm);
}
.lgs-dh-icon {
    flex-shrink:0; width:2.5rem; height:2.5rem; border-radius:9px;
    background:var(--lgs-accent-lt);
    border:1px solid var(--lgs-border-accent);
    display:flex; align-items:center; justify-content:center;
}
.lgs-dh-icon svg { width:1.2rem; height:1.2rem; color:var(--lgs-accent); }
.lgs-dh-body { flex:1; }
.lgs-dh-title {
    margin:0 0 .55rem; font-size:1.05rem; font-weight:800;
    color:var(--lgs-txt-1); letter-spacing:-.01em;
}
.lgs-dh-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; }

.lgs-dh-chip {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.77rem; font-weight:600;
    color:var(--lgs-chip-txt); background:var(--lgs-chip-bg);
    border:1px solid var(--lgs-border); border-radius:6px;
    padding:.22rem .65rem;
}
.lgs-dh-chip svg { width:.78rem; height:.78rem; flex-shrink:0; opacity:.6; }
.lgs-dh-chip--accent {
    color:var(--lgs-accent); background:var(--lgs-accent-lt);
    border-color:var(--lgs-border-accent);
}
.lgs-dh-chip--navy {
    color:var(--lgs-navy); background:var(--lgs-navy-lt);
    border-color:transparent;
}

.lgs-dh-right { margin-left:auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; }
.lgs-dh-right-label { font-size:.7rem; font-weight:700; color:var(--lgs-txt-3); text-transform:uppercase; letter-spacing:.05em; }

.lgs-dh-delivery {
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.85rem; font-weight:700;
    color:var(--lgs-txt-1); background:var(--lgs-surface-alt);
    border:1px solid var(--lgs-border-accent);
    border-radius:8px; padding:.4rem .85rem;
    box-shadow:var(--lgs-shadow-sm);
}
.lgs-dh-delivery svg { width:1rem; height:1rem; color:var(--lgs-accent); }

/* ── Toolbar ────────────────────────────────────────────────────────── */
.lgs-toolbar {
    display:grid; grid-template-columns:1fr auto auto;
    gap:.75rem; align-items:center;
}
.lgs-search-wrap { position:relative; }
.lgs-search-ico {
    position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
    width:.95rem; height:.95rem; color:var(--lgs-txt-3); pointer-events:none;
}
.lgs-search-input {
    width:100%; border:1px solid var(--lgs-input-bdr); border-radius:9px;
    padding:.68rem .9rem .68rem 2.55rem; font-size:.9rem;
    background:var(--lgs-surface); color:var(--lgs-txt-1);
    box-shadow:var(--lgs-shadow-sm);
    transition:border-color .15s, box-shadow .15s;
}
.lgs-search-input::placeholder { color:var(--lgs-txt-3); }
.lgs-search-input:focus {
    outline:none; border-color:var(--lgs-accent);
    box-shadow:0 0 0 3px var(--lgs-accent-ring);
}

.lgs-select {
    border:1px solid var(--lgs-input-bdr); border-radius:9px;
    padding:.68rem .9rem; font-size:.88rem;
    background:var(--lgs-surface); color:var(--lgs-txt-1);
    cursor:pointer; min-width:175px;
    box-shadow:var(--lgs-shadow-sm);
}
.lgs-select:focus { outline:none; border-color:var(--lgs-accent); }

.lgs-btn-reset {
    display:inline-flex; align-items:center; gap:.4rem;
    border:1px solid var(--lgs-input-bdr); border-radius:9px;
    padding:.68rem 1.05rem; font-size:.88rem; font-weight:600;
    background:var(--lgs-surface); color:var(--lgs-txt-2); cursor:pointer;
    box-shadow:var(--lgs-shadow-sm);
    transition:all .15s;
}
.lgs-btn-reset:hover { background:var(--lgs-hover); color:var(--lgs-txt-1); }
.lgs-btn-reset svg { width:.95rem; height:.95rem; }

/* ── Table wrapper ──────────────────────────────────────────────────── */
.lgs-table-wrap {
    background:var(--lgs-surface);
    border:1px solid var(--lgs-border);
    border-radius:12px; overflow:hidden;
    box-shadow:var(--lgs-shadow-sm);
}

/* ── Empty state ────────────────────────────────────────────────────── */
.lgs-empty {
    display:flex; flex-direction:column; align-items:center; gap:.85rem;
    padding:4.5rem 1.5rem; text-align:center;
    background:var(--lgs-surface);
    border:1px solid var(--lgs-border);
    border-radius:12px;
}
.lgs-empty-icon {
    width:3.8rem; height:3.8rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--lgs-surface-alt); color:var(--lgs-txt-3);
    border:1px solid var(--lgs-border);
}
.lgs-empty-icon svg { width:1.9rem; height:1.9rem; }
.lgs-empty-title { margin:0; font-size:1rem; font-weight:700; color:var(--lgs-txt-1); }
.lgs-empty-sub   { margin:0; font-size:.87rem; color:var(--lgs-txt-2); max-width:38ch; }

/* ── Table ──────────────────────────────────────────────────────────── */
.lgs-table { width:100%; border-collapse:collapse; font-size:.875rem; color:var(--lgs-txt-1); }

.lgs-th {
    padding:.85rem 1.1rem; text-align:left;
    font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
    color:var(--lgs-txt-2); background:var(--lgs-surface-alt);
    border-bottom:2px solid var(--lgs-border); white-space:nowrap;
}

.lgs-th-emph {
    color: var(--lgs-txt-1);
    font-weight: 800;
}

.lgs-tr { transition:background-color .12s; }
.lgs-tr:not(:last-child) td { border-bottom:1px solid var(--lgs-border); }
.lgs-tr:hover { background:var(--lgs-hover); }

.lgs-td { padding:.95rem 1.1rem; vertical-align:middle; color:var(--lgs-txt-1); font-size:.9rem; }

/* ── Cell types ─────────────────────────────────────────────────────── */
.lgs-no-badge {
    display:inline-flex; align-items:center; justify-content:center;
    width:1.8rem; height:1.8rem; border-radius:7px;
    background:var(--lgs-surface-alt); color:var(--lgs-txt-2);
    font-size:.73rem; font-weight:800;
    border:1px solid var(--lgs-border);
}

.lgs-doc-no {
    font-size:.85rem; font-weight:800; color:var(--lgs-accent);
    font-family: ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
    letter-spacing:.02em;
}
.lgs-pr-num  { font-weight:800; color:var(--lgs-txt-1); }

.lgs-vessel-name { font-weight:700; color:var(--lgs-navy); }
.lgs-muted       { color:var(--lgs-txt-3); }
.lgs-muted-sm    { font-size:.83rem; color:var(--lgs-txt-2); font-weight:500; }

/* ── Status pill ────────────────────────────────────────────────────── */
.lgs-status-pill {
    display:inline-block; font-size:.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em;
    background:var(--lgs-accent-lt); color:var(--lgs-accent);
    border:1px solid var(--lgs-border-accent);
    border-radius:6px; padding:.2rem .65rem;
}

/* ── Item columns ───────────────────────────────────────────────────── */
.lgs-item-name { font-weight:700; color:var(--lgs-txt-1); line-height:1.3; }
.lgs-item-type { font-size:.77rem; color:var(--lgs-txt-3); margin-top:.12rem; }

.lgs-qty-val  { display:block; font-weight:800; font-size:.98rem; color:var(--lgs-txt-1); line-height:1.2; }
.lgs-qty-unit { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--lgs-txt-3); }

/* ── Detail button ──────────────────────────────────────────────────── */
.lgs-btn-detail {
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    font-size:.82rem; font-weight:600;
    color:var(--lgs-txt-2); background:var(--lgs-surface-alt);
    border:1px solid var(--lgs-border); border-radius:8px;
    padding:.46rem .95rem; text-decoration:none;
    transition:all .18s; white-space:nowrap;
}
.lgs-btn-detail:hover {
    color:var(--lgs-accent); border-color:var(--lgs-border-accent);
    background:var(--lgs-accent-lt);
    box-shadow:var(--lgs-shadow-btn);
}
.lgs-btn-detail svg { width:.85rem; height:.85rem; }

/* ── Timeline ────────────────────────────────────────────────────────── */
.lgs-td-status { padding:.8rem 1.1rem; }

.lgs-timeline {
    position:relative; display:flex;
    align-items:flex-start; justify-content:space-between;
    padding-top:.4rem; min-width:240px;
}

/* Track: full gray line */
.lgs-track {
    position:absolute; top:1.25rem;
    left:14%; right:14%;
    height:2px; border-radius:999px;
    background:var(--lgs-track-bg); z-index:0;
}

/* Step button */
.lgs-step {
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center; gap:.38rem;
    background:transparent; border:0; cursor:pointer; padding:0;
    transition:transform .15s;
}
.lgs-step:hover { transform:translateY(-1px); }

/* ── Dot: base (inactive) ── */
.lgs-dot {
    width:1.9rem; height:1.9rem; border-radius:50%;
    background:var(--lgs-dot-bg);
    border:2px solid var(--lgs-dot-bdr);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s, background .2s;
    position:relative; box-sizing:border-box;
}

/* ── Dot: done (gray filled + checkmark) ── */
.lgs-step.is-done .lgs-dot {
    background: var(--lgs-accent);
    border-color: var(--lgs-accent);
}
.lgs-step.is-done .lgs-dot svg {
    width:.7rem; height:.7rem;
    color: var(--lgs-surface); stroke-width:3.5;
}

/* ── Inner dot (only visible when active, radio-button style) ── */
.lgs-dot-inner {
    width:.72rem; height:.72rem; border-radius:50%;
}

.lgs-dot-qty {
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    color: var(--lgs-txt-2);
    letter-spacing: -.01em;
}

.lgs-step.is-done .lgs-dot-qty {
    color: var(--lgs-surface);
}

.lgs-step--picked-up.is-active .lgs-dot-qty { color: var(--lgs-pickup); }
.lgs-step--delivered.is-active .lgs-dot-qty { color: var(--lgs-deliver); }
.lgs-step--onboard.is-active .lgs-dot-qty { color: var(--lgs-onboard); }

/* ── ACTIVE states: outer ring = thick colored border, inner dot = filled ── */

/* Pickup = orange */
.lgs-step--picked-up.is-active .lgs-dot {
    background: var(--lgs-dot-bg);
    border: 3px solid var(--lgs-pickup);
    box-shadow: none;
}
.lgs-step--picked-up.is-active .lgs-dot-inner { background: var(--lgs-pickup); }
.lgs-step--picked-up.is-active .lgs-step-lbl  { color: var(--lgs-pickup); font-weight:800; }

/* Deliver = blue */
.lgs-step--delivered.is-active .lgs-dot {
    background: var(--lgs-dot-bg);
    border: 3px solid var(--lgs-deliver);
    box-shadow: none;
}
.lgs-step--delivered.is-active .lgs-dot-inner { background: var(--lgs-deliver); }
.lgs-step--delivered.is-active .lgs-step-lbl  { color: var(--lgs-deliver); font-weight:800; }

/* Onboard = green */
.lgs-step--onboard.is-active .lgs-dot {
    background: var(--lgs-dot-bg);
    border: 3px solid var(--lgs-onboard);
    box-shadow: none;
}
.lgs-step--onboard.is-active .lgs-dot-inner { background: var(--lgs-onboard); }
.lgs-step--onboard.is-active .lgs-step-lbl  { color: var(--lgs-onboard); font-weight:800; }

/* Label */
.lgs-step-lbl { font-size:.68rem; font-weight:700; color:var(--lgs-txt-3); white-space:nowrap; transition:color .2s; }
.lgs-step.is-done .lgs-step-lbl { color:var(--lgs-txt-2); }

/* ── Note textarea ──────────────────────────────────────────────────── */
.lgs-td-note { padding:.8rem 1.1rem; }

.lgs-note-input {
    width:100%; border:1px solid var(--lgs-input-bdr); border-radius:8px;
    padding:.55rem .75rem; font-size:.83rem; font-family:inherit;
    color:var(--lgs-txt-1); background:var(--lgs-input-bg);
    resize:vertical; min-height:2.8rem;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.lgs-note-input:focus {
    outline:none; border-color:var(--lgs-accent);
    background:var(--lgs-surface);
    box-shadow:0 0 0 3px var(--lgs-accent-ring);
}
.lgs-note-input::placeholder { color:var(--lgs-txt-3); font-style:italic; }

/* ── Save button ────────────────────────────────────────────────────── */
.lgs-btn-save {
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    border:1px solid var(--lgs-onboard); border-radius:10px; padding:.58rem 1.05rem;
    min-width: 112px;
    font-size:.84rem; font-weight:800; letter-spacing:.01em; cursor:pointer;
    background:var(--lgs-save-bg);
    border-color:var(--lgs-save-bd);
    color:var(--lgs-save-txt); white-space:nowrap;
    transition:background-color .18s ease, border-color .18s ease, transform .12s ease;
    box-shadow:none;
}
.lgs-btn-save:hover:not(:disabled) {
    transform:translateY(-1px);
    background:var(--lgs-save-bg-hover);
    border-color:var(--lgs-save-bg-hover);
}
.lgs-btn-save:active:not(:disabled) { transform:translateY(0); }
.lgs-btn-save:disabled {
    opacity:.56;
    cursor:not-allowed;
    transform:none;
    filter:none;
}
.lgs-btn-save span { display:inline-flex; align-items:center; gap:.4rem; }
.lgs-btn-save svg { width:.9rem; height:.9rem; }

/* ── Pickup Modal ───────────────────────────────────────────────────── */
.lgs-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lgs-modal {
    width: min(520px, 100%);
    border-radius: 12px;
    border: 1px solid var(--lgs-border);
    background: var(--lgs-surface);
    box-shadow: var(--lgs-shadow-md);
    overflow: hidden;
}

.lgs-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--lgs-border);
    background: var(--lgs-surface-alt);
}

.lgs-modal-title {
    margin: 0;
    font-size: .96rem;
    font-weight: 800;
    color: var(--lgs-txt-1);
}

.lgs-modal-close {
    border: 1px solid var(--lgs-border);
    background: var(--lgs-surface);
    color: var(--lgs-txt-2);
    border-radius: 8px;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lgs-modal-close svg {
    width: 1rem;
    height: 1rem;
}

.lgs-modal-body {
    padding: 1rem;
}

.lgs-modal-desc {
    margin: 0 0 .6rem;
    font-size: .84rem;
    color: var(--lgs-txt-2);
}

.lgs-modal-textarea {
    width: 100%;
    border: 1px solid var(--lgs-input-bdr);
    border-radius: 9px;
    padding: .65rem .8rem;
    font-size: .86rem;
    line-height: 1.4;
    resize: vertical;
    min-height: 96px;
    color: var(--lgs-txt-1);
    background: var(--lgs-input-bg);
}

.lgs-modal-textarea:focus {
    outline: none;
    border-color: var(--lgs-accent);
    box-shadow: 0 0 0 3px var(--lgs-accent-ring);
}

.lgs-modal-error {
    margin: .55rem 0 0;
    font-size: .78rem;
    color: #dc2626;
    font-weight: 600;
}

.lgs-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .85rem 1rem 1rem;
    border-top: 1px solid var(--lgs-border-soft);
    background: var(--lgs-surface);
}

.lgs-btn-cancel {
    border: 1px solid var(--lgs-border);
    background: var(--lgs-surface-alt);
    color: var(--lgs-txt-2);
    border-radius: 10px;
    padding: .55rem .95rem;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}

.lgs-btn-cancel:hover {
    background: var(--lgs-hover);
    color: var(--lgs-txt-1);
}

/* ── Pagination ─────────────────────────────────────────────────────── */
.lgs-pagination {
    display:flex; justify-content:space-between; align-items:center;
    padding:.9rem 1.25rem;
    border-top:1px solid var(--lgs-border);
    background:var(--lgs-surface-alt);
}
.lgs-pg-info { font-size:.83rem; color:var(--lgs-txt-2); }
.lgs-pg-info strong { color:var(--lgs-txt-1); font-weight:700; }
.lgs-pg-btns { display:flex; gap:.3rem; }
.lgs-pg-btn {
    min-width:2.1rem; height:2.1rem; padding:0 .45rem;
    border:1px solid var(--lgs-border); border-radius:7px;
    background:var(--lgs-surface); color:var(--lgs-txt-2);
    font-size:.85rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.lgs-pg-btn:hover:not(:disabled) { background:var(--lgs-hover); color:var(--lgs-txt-1); }
.lgs-pg-btn.is-current {
    background:linear-gradient(135deg, var(--lgs-accent-md), var(--lgs-accent));
    border-color:transparent; color:#fff; font-weight:800;
    box-shadow:var(--lgs-shadow-btn);
}
.lgs-pg-btn:disabled { opacity:.3; cursor:not-allowed; }

/* ── Spinner ────────────────────────────────────────────────────────── */
@keyframes lgs-spin { to { transform:rotate(360deg); } }
.lgs-spin { width:1rem; height:1rem; animation:lgs-spin .7s linear infinite; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:960px) {
    .lgs-toolbar { grid-template-columns:1fr; }
    .lgs-table-wrap { overflow-x:auto; }
    .lgs-table { min-width:820px; }
}
/* -- Stepper UI -------------------------------------------------------- */
.lgs-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0;
}
.lgs-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    width: 50px;
}
.lgs-stepper-item.is-disabled {
    cursor: default;
}
.lgs-stepper-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--lgs-surface-raised);
    border: 2px solid var(--lgs-border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    transition: all 0.2s ease;
    color: transparent;
}
.lgs-stepper-circle svg {
    width: 12px;
    height: 12px;
    stroke-width: 4;
}
input:checked + .lgs-stepper-circle {
    background-color: var(--lgs-accent-lt);
    border-color: var(--lgs-txt-3);
    color: var(--lgs-txt-1);
}
.lgs-stepper-item.is-onboard input:checked + .lgs-stepper-circle {
    background-color: var(--lgs-save-bg);
    border-color: var(--lgs-save-bg);
    color: var(--lgs-surface);
}
.lgs-stepper-label {
    font-size: 0.65rem;
    color: var(--lgs-txt-2);
    font-weight: 600;
}
.lgs-stepper-line {
    height: 2px;
    background-color: var(--lgs-border-accent);
    width: 35px;
    margin-top: -18px;
    z-index: 0;
}