/*
 * SHARED CMS COPY of the Jarvis Design System admin layer (cdn.jarviscars.com.au/css/jarvis-ds/jds-admin.css).
 * Ported VERBATIM from Portal public/assets/css/jarvis-ds-admin.css at portal-centos commit
 * e7020cb514850eacb692a7b234555a12c4c795ad (2026-09-30), synced 2026-10-01 for log-monitor Stage 1.
 * Everything is scoped to .jds, so the CMS BS5 theme and every other page are untouched.
 * Re-sync from Portal by replacing the block between the PORTAL markers; CMS-only primitives live below it.
 * Not the older live-only jarvis-ds.css beside this file (that one sets :root tokens and defines --text-body twice).
 */

/* ── PORTAL SOURCE BEGIN ─────────────────────────────────────────────── */
/*
 * Jarvis Design System — admin composition layer for Portal.
 *
 * Source of truth: the Jarvis Design System artifact (claude.ai/artifact/B2uorHwc857Cc2euoZDUjX,
 * tokens synced 2026-09-28 from Jarvis Designs.fig). Token values below are copied verbatim.
 * Scoped to `.jds` so Portal's own theme (sidebar, topbar, other pages) is untouched.
 *
 * Gaps in the system (it has no CMS/staff screens yet), composed here from primitives and flagged:
 *   - data table      : hairline strokes (--border-hairline), type-small header, off-white row hover
 *   - status pills     : Badge shapes only; the system has NO success/warning/danger colours, so
 *                        "good" = blue chip, "attention" = accent (red-tint + red dot, INK text:
 *                        red text on red-tint is ~4.3:1 and fails 4.5:1 at 12px)
 *   - KPI tile         : Card (radius-card, border-card stroke, no shadow) + type-display value
 * Font: Open Sans from OUR CDN (cdn.jarviscars.com.au/fonts/open_sans/open-sans.css), linked by the
 * page — the system's own bundle.css imports Google Fonts, which Portal does not use (house rule).
 */

.jds {
    /* colour */
    --jarvis-blue: #1b43a0;
    --jarvis-blue-deep: #0b2663;
    --jarvis-blue-soft: #92a5d1;
    --jarvis-blue-pale: #dbe1f0;
    --jarvis-red: #ef4136;
    --jarvis-red-dark: #ce443c;
    --jarvis-red-pale: #fce1df;
    --jarvis-red-tint: #fef0ef;
    --ink: #3a393b;
    --ink-mid: #717072;
    --off-white: #f7f7f7;
    --white: #ffffff;
    --blue-a08: rgba(27, 67, 160, 0.08);
    --blue-a16: rgba(27, 67, 160, 0.16);
    --ink-a08: rgba(58, 57, 59, 0.08);
    --text-heading: var(--ink);
    --text-link: var(--jarvis-blue);
    --text-link-hover: var(--jarvis-red);
    --text-muted: var(--ink-mid);
    --surface-page: var(--white);
    --surface-wash: var(--off-white);
    --surface-card: var(--white);
    --surface-chip: var(--blue-a08);
    --border-hairline: var(--blue-a08);
    --border-field: var(--blue-a16);
    --border-card: var(--blue-a16);
    --focus-ring: var(--jarvis-blue);
    /* type */
    --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* space, radius, size */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
    --radius-pill: 40px; --radius-card: 16px; --radius-field: 8px; --radius-full: 50%;
    --control-height: 48px; --control-height-sm: 40px; --control-height-xs: 32px;
    --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
    --duration-fast: 120ms;

    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 22px;
    color: var(--ink);
}

/* ── Type ─────────────────────────────────────────────────────────── */
.jds .jds-display { font-weight: 600; font-size: 24px; line-height: 32px; color: var(--text-heading); margin: 0; }
.jds .jds-title   { font-weight: 600; font-size: 16px; line-height: 22px; color: var(--text-heading); margin: 0; }
.jds .jds-body    { font-weight: 400; font-size: 14px; line-height: 22px; }
.jds .jds-small   { font-weight: 600; font-size: 12px; line-height: 16px; }
.jds .jds-muted   { color: var(--text-muted); }
.jds a            { color: var(--text-link); transition: color var(--duration-fast); }
.jds a:hover      { color: var(--text-link-hover); }

/* ── Surfaces: cards (strokes, not shadows) ───────────────────────── */
.jds .jds-card {
    background: var(--surface-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    box-shadow: none;
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
@media (max-width: 575.98px) { .jds .jds-card { padding: var(--space-4); } }
.jds .jds-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }

/* KPI tiles (composed: card + display value) */
.jds .jds-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
@media (max-width: 991.98px) { .jds .jds-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .jds .jds-kpis { grid-template-columns: 1fr; } }
.jds .jds-kpi { border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: var(--space-4); background: var(--surface-card); }
.jds .jds-kpi-label { font-weight: 600; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.jds .jds-kpi-value { font-weight: 600; font-size: 24px; line-height: 32px; color: var(--ink); margin-top: var(--space-1); }
.jds .jds-kpi-sub   { font-size: 12px; line-height: 16px; color: var(--text-muted); margin-top: var(--space-1); }

/* ── Badges / status pills (Badge shape: 24px pill, type-small) ──── */
.jds .jds-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
    font-weight: 600; font-size: 12px; line-height: 16px; white-space: nowrap;
    background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-a08);
}
.jds .jds-pill--chip   { background: var(--surface-chip); color: var(--jarvis-blue); box-shadow: none; }
.jds .jds-pill--brand  { background: var(--jarvis-blue); color: var(--white); box-shadow: none; }
.jds .jds-pill--accent { background: var(--jarvis-red-tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--jarvis-red-pale); }
.jds .jds-pill--quiet  { background: var(--off-white); color: var(--ink-mid); box-shadow: none; }
.jds .jds-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.jds .jds-pill--accent .jds-dot { background: var(--jarvis-red); }
.jds .jds-pill--chip .jds-dot   { background: var(--jarvis-blue); }

/* ── Buttons (pill; blue -> red on hover, outline -> filled) ──────── */
.jds .jds-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: var(--control-height-sm); padding: 0 var(--space-5); border-radius: var(--radius-pill);
    font-weight: 600; font-size: 14px; line-height: 14px; text-decoration: none; cursor: pointer;
    transition: background-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}
.jds .jds-btn--outline { background: var(--white); color: var(--jarvis-blue); border: 0; box-shadow: inset 0 0 0 1px var(--blue-a16); }
.jds .jds-btn--outline:hover { background: var(--jarvis-blue); color: var(--white); box-shadow: none; }
.jds .jds-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Fields (8px stacked fields; search is the one pill input) ───── */
.jds .jds-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.jds .jds-field label { display: block; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--text-muted); margin-bottom: var(--space-1); }
.jds .jds-field .form-control,
.jds .jds-field .form-select {
    height: var(--control-height-sm); border-radius: var(--radius-field);
    border: 0; box-shadow: inset 0 0 0 1px var(--border-field);
    font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--ink); background-color: var(--white);
}
@media (min-width: 768px) {
    .jds .jds-field .form-control, .jds .jds-field .form-select { font-size: 14px; }
}
.jds .jds-field .form-select {
    /* Chevron always jarvis-blue, 12px (SelectField rule) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='none' stroke='%231b43a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3e%3c/svg%3e");
    background-size: 12px 12px; background-position: right 14px center;
}
.jds .jds-field .form-control::placeholder { color: var(--jarvis-blue-soft); opacity: 1; font-weight: 400; }
.jds .jds-field .form-control:focus,
.jds .jds-field .form-select:focus { box-shadow: inset 0 0 0 1px var(--jarvis-blue); outline: none; }
.jds .jds-field--search .form-control { border-radius: var(--radius-pill); padding-left: var(--space-4); }

/* ── Data table (GAP: composed from hairlines + type-small) ──────── */
.jds .jds-table-wrap { border: 1px solid var(--border-card); border-radius: var(--radius-card); overflow: hidden; }
.jds table.jds-table { margin: 0 !important; border-collapse: collapse !important; width: 100% !important; font-size: 14px; }
.jds table.jds-table > thead > tr > th {
    background: var(--surface-wash); color: var(--text-muted);
    font-weight: 600; font-size: 12px; line-height: 16px; text-transform: none;
    border: 0 !important; border-bottom: 1px solid var(--border-hairline) !important; padding: var(--space-3) var(--space-4);
}
.jds table.jds-table > tbody > tr > td {
    border: 0 !important; border-bottom: 1px solid var(--border-hairline) !important;
    padding: var(--space-3) var(--space-4); vertical-align: middle; color: var(--ink);
}
.jds table.jds-table > tbody > tr:last-child > td { border-bottom: 0 !important; }
.jds table.jds-table > tbody > tr.jds-row-link { cursor: pointer; transition: background-color var(--duration-fast); }
.jds table.jds-table > tbody > tr.jds-row-link:hover > td { background: var(--surface-wash); }
.jds table.jds-table .jds-cell-strong { font-weight: 600; }
.jds table.jds-table .jds-cell-sub { display: block; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.jds table.jds-table .text-end { text-align: right; }
.jds table.jds-table.jds-table--compact td, .jds table.jds-table.jds-table--compact th { padding: var(--space-2) var(--space-3); }

/* DataTables chrome inside .jds */
.jds .jds-table-wrap .dataTables_wrapper > .row { margin: 0; padding: var(--space-3) var(--space-4); }
.jds .jds-table-wrap .dataTables_wrapper > .row:has(> div > table) { padding: 0; }
.jds .jds-table-wrap .dataTables_wrapper > .row > [class*="col-"]:has(> table) { padding: 0; }
.jds .dataTables_wrapper .dataTables_length label,
.jds .dataTables_wrapper .dataTables_info { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.jds .dataTables_wrapper .dataTables_length select { border-radius: var(--radius-field); border: 0; box-shadow: inset 0 0 0 1px var(--border-field); height: 32px; }
.jds .dataTables_wrapper .pagination .page-link {
    border: 0; border-radius: var(--radius-pill) !important; margin: 0 2px; color: var(--jarvis-blue);
    font-weight: 600; font-size: 12px; min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px var(--blue-a16); background: var(--white);
}
.jds .dataTables_wrapper .pagination .page-item.active .page-link { background: var(--jarvis-blue); color: var(--white); box-shadow: none; }
.jds .dataTables_wrapper .pagination .page-link:hover { background: var(--jarvis-blue); color: var(--white); }
.jds .dataTables_wrapper .pagination .page-item.disabled .page-link { color: var(--ink-mid); opacity: .5; }
.jds .dataTables_wrapper .dataTables_processing { border: 1px solid var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }

/* ── Definition list (SpecList-like: label small grey above/beside semibold value) ── */
.jds .jds-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.jds .jds-dl dt { font-weight: 600; font-size: 12px; line-height: 22px; color: var(--text-muted); }
.jds .jds-dl dd { margin: 0; font-weight: 600; font-size: 14px; line-height: 22px; color: var(--ink); word-break: break-word; }
.jds .jds-dl dd .jds-muted { font-weight: 400; }
@media (max-width: 575.98px) {
    .jds .jds-dl { grid-template-columns: 1fr; gap: 0; }
    .jds .jds-dl dt { margin-top: var(--space-2); }
}

.jds .jds-pre {
    max-height: 520px; overflow: auto; margin: 0;
    font-size: 12px; line-height: 16px; color: var(--ink);
    background: var(--surface-wash); border-radius: var(--radius-field); padding: var(--space-4);
}
.jds details > summary { cursor: pointer; font-weight: 600; color: var(--jarvis-blue); }
.jds details > summary:hover { color: var(--jarvis-red); }
/* ── PORTAL SOURCE END ───────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
 * CMS ADDITIONS (log-monitor Stage 1, 2026-10-01) - NOT in the Portal source.
 * JDS primitives the explorer needs that the Portal layer does not carry yet. Every value is taken from the
 * Jarvis Design System component bundle (canvas copy jarvisdesignsystem_c4b474, version 1790817146-3a26):
 * Checkbox, Tabs, SearchField, SelectField, Button primary-fill / primary-outline sm, SegmentedControl,
 * FilterChip, Badge. Port these back to Portal when it next needs them.
 * ══════════════════════════════════════════════════════════════════════════════ */
.jds {
    --jarvis-blue-mid: #2d64b8;
    --scrim-light: rgba(0, 0, 0, 0.15);
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.jds .jds-icon { display: block; flex: 0 0 auto; overflow: visible; fill: currentColor; }

/* Checkbox: 16px box, 2px radius, blue-a16 stroke -> jarvis-blue when checked; tick 10px */
.jds .jds-check { position: relative; display: inline-flex; align-items: center; gap: 12px; margin: 0; cursor: pointer;
    font-weight: 400; font-size: 14px; line-height: 22px; color: var(--ink); min-width: 0; }
.jds .jds-check > input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.jds .jds-check__box { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 2px; background: var(--white);
    box-shadow: inset 0 0 0 1px var(--blue-a16); color: var(--jarvis-blue);
    display: inline-flex; align-items: center; justify-content: center;
    transition: box-shadow var(--duration-fast), color var(--duration-fast); }
.jds .jds-check__box .jds-icon { width: 10px; height: 10px; visibility: hidden; }
.jds .jds-check > input:checked + .jds-check__box { box-shadow: inset 0 0 0 1px var(--jarvis-blue); }
.jds .jds-check > input:checked + .jds-check__box .jds-icon { visibility: visible; }
.jds .jds-check > input:focus-visible + .jds-check__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.jds .jds-check__label { min-width: 0; transition: color var(--duration-fast); }
.jds .jds-check:hover .jds-check__label { color: var(--jarvis-blue); }

/* Tabs: 32px gap, hairline strip; active = jarvis-blue + 2px inset underline; inactive = blue-soft */
.jds .jds-tabs { display: flex; gap: 32px; box-shadow: inset 0 -1px 0 var(--blue-a08); }
.jds .jds-tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 12px; margin: 0; background: none; border: 0;
    font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 22px; color: var(--jarvis-blue-soft);
    cursor: pointer; text-decoration: none; transition: color var(--duration-fast), box-shadow var(--duration-fast); }
.jds .jds-tab .jds-icon { width: 12px; height: 12px; }
.jds .jds-tab:hover { color: var(--jarvis-blue); }
.jds .jds-tab.is-active { color: var(--jarvis-blue); box-shadow: inset 0 -2px 0 var(--jarvis-blue); }
.jds .jds-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* SearchField: 48px pill, padding 0 24, 16px search glyph */
.jds .jds-search { display: flex; align-items: center; gap: 12px; height: var(--control-height); padding: 0 24px;
    background: var(--white); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--blue-a16);
    color: var(--jarvis-blue); transition: box-shadow var(--duration-fast); min-width: 0; }
.jds .jds-search:focus-within { box-shadow: inset 0 0 0 1px var(--jarvis-blue); }
.jds .jds-search .jds-icon { width: 16px; height: 16px; }
.jds .jds-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; padding: 0;
    font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--ink); }
.jds .jds-search input::placeholder { color: var(--jarvis-blue-soft); opacity: 1; }

/* SelectField: 48px shell, radius 8, 12px chevron in jarvis-blue */
.jds .jds-select { position: relative; display: flex; align-items: center; height: var(--control-height); padding: 0 16px;
    background: var(--white); border-radius: var(--radius-field); box-shadow: inset 0 0 0 1px var(--blue-a16);
    transition: box-shadow var(--duration-fast); }
.jds .jds-select:focus-within { box-shadow: inset 0 0 0 1px var(--jarvis-blue); }
.jds .jds-select select { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
    -webkit-appearance: none; appearance: none; cursor: pointer; padding: 0 20px 0 0; margin: 0;
    font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--ink); }
.jds .jds-select .jds-icon { position: absolute; right: 16px; width: 12px; height: 12px; color: var(--jarvis-blue); pointer-events: none; }

/* Buttons: primary-fill (md 40px) and size sm (32px, padding 0 16, line-height 16) */
.jds .jds-btn--fill { background: var(--jarvis-blue); color: var(--white); border: 0; box-shadow: none; line-height: 22px; }
.jds .jds-btn--fill:hover { background: var(--jarvis-red); color: var(--white); }
.jds .jds-btn--fill:active { background: var(--jarvis-red-dark); }
.jds .jds-btn--outline:active { background: var(--jarvis-blue-deep); color: var(--white); }
.jds .jds-btn--sm { height: var(--control-height-xs); padding: 0 16px; line-height: 16px; }
.jds .jds-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* SegmentedControl: card-radius frame, 8px padding/gap, 32px pills; selected = blue-a08 fill, no stroke */
.jds .jds-segmented { display: grid; gap: 8px; padding: 8px; border-radius: var(--radius-card);
    box-shadow: inset 0 0 0 1px var(--blue-a16); background: var(--white); }
.jds .jds-segment { height: var(--control-height-xs); border: 0; border-radius: var(--radius-pill); cursor: pointer; margin: 0; padding: 0 8px;
    font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 16px; color: var(--jarvis-blue);
    background: var(--white); box-shadow: inset 0 0 0 1px var(--blue-a16); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color var(--duration-fast), box-shadow var(--duration-fast); }
.jds .jds-segment:hover { background: var(--blue-a08); box-shadow: none; }
.jds .jds-segment.is-selected { background: var(--blue-a08); box-shadow: none; }
.jds .jds-segment:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* FilterChip: 32px blue-a08 pill, 12px remove glyph; hover turns the whole chip red */
.jds .jds-filterchip { display: inline-flex; align-items: center; gap: 8px; height: var(--control-height-xs); padding: 0 16px; margin: 0;
    border: 0; border-radius: var(--radius-pill); background: var(--blue-a08); color: var(--jarvis-blue); cursor: pointer;
    font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 16px; white-space: nowrap;
    transition: background-color var(--duration-fast), color var(--duration-fast); }
.jds .jds-filterchip .jds-icon { width: 12px; height: 12px; }
.jds .jds-filterchip:hover { background: var(--jarvis-red); color: var(--white); }
.jds .jds-filterchip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Badge: 24px pill, padding 0 12, type-small; neutral = white + ink-a08 stroke; count = blue-a08 + jarvis-blue */
.jds .jds-badge { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 12px;
    border-radius: var(--radius-pill); font-weight: 600; font-size: 12px; line-height: 16px; white-space: nowrap;
    background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-a08); }
.jds .jds-badge--count { background: var(--blue-a08); color: var(--jarvis-blue); box-shadow: none; }