/* PMS on the HRMS stack - the few things btshrms has no rule for.

   Loaded after HRMS's own sheets (public/css/hrms/*), which are copied from
   btshrms verbatim and never edited here. Nothing in this file restyles an
   HRMS component: it supplies layout utilities the views use that Bootstrap 4
   lacks, maps the soft colour utilities onto HRMS's own tint pairs (the
   --tint / --tint-bg ramp in main.css), and styles the handful of PMS-only
   pieces. Feature styles (schedule board, load grid, compliance audit...)
   live in pms-features.css. */

/* ---- Layout utilities Bootstrap 4 does not have ------------------------ */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Row gutters: .row.g-N sets both axes, gx/gy one each (Bootstrap 5's model). */
.row.g-0, .row.gx-0 { margin-left: 0; margin-right: 0; }
.row.g-0 > *, .row.gx-0 > * { padding-left: 0; padding-right: 0; }
.row.g-1, .row.gx-1 { margin-left: -.125rem; margin-right: -.125rem; }
.row.g-1 > *, .row.gx-1 > * { padding-left: .125rem; padding-right: .125rem; }
.row.g-2, .row.gx-2 { margin-left: -.25rem; margin-right: -.25rem; }
.row.g-2 > *, .row.gx-2 > * { padding-left: .25rem; padding-right: .25rem; }
.row.g-3, .row.gx-3 { margin-left: -.5rem; margin-right: -.5rem; }
.row.g-3 > *, .row.gx-3 > * { padding-left: .5rem; padding-right: .5rem; }
.row.g-4, .row.gx-4 { margin-left: -.75rem; margin-right: -.75rem; }
.row.g-4 > *, .row.gx-4 > * { padding-left: .75rem; padding-right: .75rem; }
.row.g-1, .row.gy-1 { row-gap: .25rem; }
.row.g-2, .row.gy-2 { row-gap: .5rem; }
.row.g-3, .row.gy-3 { row-gap: 1rem; }
.row.g-4, .row.gy-4 { row-gap: 1.5rem; }

.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }
.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: 1.25 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.min-w-0 { min-width: 0; }
.table.align-middle td, .table.align-middle th { vertical-align: middle; }
.position-sticky { position: sticky; }

/* ---- Soft colour utilities, on HRMS's tint pairs ----------------------- */
.bg-primary-subtle   { background-color: #e8f1fe !important; }
.bg-success-subtle   { background-color: #e4f6ec !important; }
.bg-danger-subtle    { background-color: #fdecec !important; }
.bg-warning-subtle   { background-color: #fdf3e0 !important; }
.bg-info-subtle      { background-color: #e2f6f8 !important; }
.bg-secondary-subtle,
.bg-light-subtle,
.bg-dark-subtle      { background-color: #eef1f7 !important; }
.text-primary-emphasis   { color: #1d5fbf !important; }
.text-success-emphasis   { color: #1a8a55 !important; }
.text-danger-emphasis    { color: #c53434 !important; }
.text-warning-emphasis   { color: #b0730b !important; }
.text-info-emphasis      { color: #0d7f8e !important; }
.text-secondary-emphasis,
.text-dark-emphasis      { color: #54658a !important; }
.border-primary-subtle   { border-color: #c7dcf9 !important; }
.border-success-subtle   { border-color: #bfe6cf !important; }
.border-danger-subtle    { border-color: #f6caca !important; }
.border-warning-subtle   { border-color: #f3dfa6 !important; }
.border-info-subtle      { border-color: #b7e5ea !important; }
.border-secondary-subtle,
.border-light-subtle,
.border-dark-subtle      { border-color: #d3e0f4 !important; }

/* ---- PMS pieces --------------------------------------------------------- */

/* Ticked rows announce themselves in a bar under the card header. */
.pms-selection-bar {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .5rem 1.15rem;
    background: #e8f1fe; border-bottom: 1px solid var(--dk-line, #e6ecf7);
    font-size: 13px;
}
.pms-selection-bar[hidden] { display: none; }
.pms-selection-bar .form-control { width: auto; min-width: 11rem; }

/* MFA setup: the QR is inline SVG (the secret never leaves the server), so
   it takes the size HRMS's auth sheet gives its <img>. */
.qr-frame svg { display: block; width: 140px; height: 140px; }
@media (max-width: 575.98px) { .qr-frame svg { width: 160px; height: 160px; } }

/* ---- Phones: no zoom on focus ------------------------------------------
   iOS zooms into any field whose text is under 16px and never zooms back.
   HRMS guards its sign-in screens against this (auth.css) but not the app;
   this extends the same guard to every field here, on phones only. */
@media (max-width: 991.98px) {
    input, select, textarea,
    .form-control, .form-control-sm, .custom-select, .custom-select-sm,
    .select2-container .select2-selection__rendered, .select2-search__field,
    .fd-search, .sb-search-input { font-size: 16px !important; }
}

/* ── Progress bars ──────────────────────────────────────────────────────────
   HRMS draws no progress bar of its own, so Bootstrap's saturated #007bff /
   #28a745 blocks came through. Thin rounded tracks in the --ui palette, the
   same tones the badges' washes are keyed to. */
.progress {
    height: 8px; border-radius: 999px; background: #eef1f6; box-shadow: none; overflow: hidden;
}
.progress-bar { background-color: var(--ui-primary); border-radius: 999px; font-size: 10px; font-weight: 600; }
.progress-bar.bg-success { background-color: #2f9e5b !important; }
.progress-bar.bg-warning { background-color: #e0a526 !important; }
.progress-bar.bg-danger  { background-color: #d64545 !important; }
.progress-bar.bg-info    { background-color: #3f86d8 !important; }
.progress.progress-lg    { height: 14px; }

/* A list that closes a card follows the card's rounded corners - square
   rows ran over HRMS's 14px radius and cut the border at the bottom. */
.card > .list-group-flush:last-child,
.card > .list-group-flush:last-child > .list-group-item:last-child,
.card > .collapse:last-child .list-group-flush > .list-group-item:last-child {
    border-bottom-left-radius: var(--dk-radius); border-bottom-right-radius: var(--dk-radius);
}

/* ── Row icon buttons ───────────────────────────────────────────────────────
   Up/down and similar inline controls: quiet ink, a primary wash on hover,
   never Bootstrap's default black. */
.bts-row-actions { display: flex; gap: 2px; justify-content: flex-end; white-space: nowrap; }
.btn.btn-icon {
    padding: 2px 6px; line-height: 1.2; font-size: 12px; color: #9aa8c2; min-width: 26px;
    background: transparent; border: 0; border-radius: 6px;
}
.btn.btn-icon:hover, .btn.btn-icon:focus-visible { color: var(--ui-primary); background: var(--ui-primary-wash); }
.btn.btn-icon:disabled { color: #9aa8c2; background: transparent; opacity: .35; }

/* Collapsible phase headers: the chevron is a quiet hint, not a black glyph. */
.collapse-toggle .chevron { color: #9aa8c2; font-size: 12px; width: 14px; }
.collapse-toggle:hover .chevron { color: var(--ui-primary); }

/* ── Task update history ────────────────────────────────────────────────────
   The task page's trail of events: small tinted dots on a hairline rail. */
.task-timeline { position: relative; }
.task-timeline > li { position: relative; }
.task-timeline > li:not(:last-child)::before {
    content: ''; position: absolute; left: 11px; top: 26px; bottom: -2px; width: 2px; background: var(--dk-line);
}
.timeline-dot {
    flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; background: #fff; border: 1px solid var(--dk-line-2); border-radius: 50%;
    position: relative; z-index: 1; box-shadow: 0 0 0 3px #fff;
}

/* A soft header's count badge sits with the title, not under the icon tile. */
.card-header.dk-soft .card-title > .badge { margin-left: 6px; }

/* A plain card header's icon takes the primary blue (HRMS writes text-primary
   on most of them) rather than inheriting the title's near-black ink. */
.card-header:not(.dk-soft):not([class*="bg-"]) .card-title > i:first-child:not([class*="text-"]) { color: var(--ui-primary); }

/* Segmented controls (Day/Week/Month, In the register/Deleted, …): the chosen
   segment is a primary wash, not Bootstrap's filled #6c757d block. */
.btn-group > .btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-group > .btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-group-toggle > .btn-outline-secondary:not(:disabled):not(.disabled).active {
    background: var(--ui-primary-wash); color: var(--ui-primary); border-color: #b9cff2; box-shadow: none; font-weight: 600;
    position: relative; z-index: 2;
}
.btn-outline-secondary { color: var(--dk-ink-2); border-color: var(--dk-line-2); }
.btn-outline-secondary:hover { background: #f1f4f9; color: var(--dk-ink); border-color: #c3d0e6; }

/* AdminLTE's .small sets font-weight:400, which flips a solid Font Awesome
   glyph on the same element to its outline (a hollow health dot). */
.fas.small, .fa-solid.small { font-weight: 900; }

/* ── Plan ordering ──────────────────────────────────────────────────────────
   A grip to drag by, the row's position, then the arrows. The save bar sticks
   to the bottom of the screen and says whether the last move has saved. */
.plan-handle { cursor: grab; color: #b9c6dd; padding: 0 4px; font-size: 12px; }
.plan-handle:hover { color: var(--ui-primary); }
.plan-handle:active { cursor: grabbing; }
.plan-pos { display: inline-block; min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.plan-move .bts-row-actions { align-items: center; }
table.table tr.plan-dragging { opacity: .45; }
/* The row that just moved: held long enough to find it again (about 1.5s),
   then fading out over the next second and a half - a flash at a glance is
   gone before the eye has followed the row to its new place. */
tr.plan-moved > td { animation: plan-moved 2.8s ease-out; }
tr.plan-moved > td:first-child { box-shadow: inset 3px 0 0 #e0a526; animation: plan-moved 2.8s ease-out, plan-moved-edge 2.8s ease-out forwards; }
@keyframes plan-moved {
    0%, 55% { background-color: #fff3cd; }
    100% { background-color: transparent; }
}
@keyframes plan-moved-edge {
    0%, 55% { box-shadow: inset 3px 0 0 #e0a526; }
    100% { box-shadow: inset 3px 0 0 transparent; }
}
.plan-order-bar {
    position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: var(--ui-primary-wash); border-top: 1px solid #b9cff2;
    color: var(--ui-primary-ink);
}
.plan-order-bar[hidden] { display: none; }
/* The fixed footer would sit on top of a bar stuck to the very bottom. */
.layout-footer-fixed .plan-order-bar { bottom: 38px; box-shadow: 0 6px 18px -8px rgba(22, 35, 63, .35); }
/* Saving happens on its own; the bar only reports it. */
.plan-order-bar[data-state="saved"] { background: var(--ui-ok-wash); border-top-color: #b7e2c6; color: var(--ui-ok); }
.plan-order-bar[data-state="error"] { background: var(--ui-danger-wash); border-top-color: #f2c4c4; color: var(--ui-danger); }
@media (hover: none) { .plan-handle { display: none; } }

/* ── Forms: btshrms's Add Employee form (css/hrms/form.css) ─────────────────
   Adapted only where PMS markup differs from the employee form's:
   - fields are col-* cells, not .form-group wrappers, so the label and
     help-text rules are restated for a label that is a cell's first child;
   - Bootstrap gutters are tightened to the employee form's 14px x 9px;
   - there is no section rail, so the bar sits flush under the section and
     sticks above the fixed footer while a long form scrolls. */
.ef-sec .row { margin-left: -7px; margin-right: -7px; row-gap: calc(9px * var(--ef-s)); }
.ef-sec .row > [class*="col"] { padding-left: 7px; padding-right: 7px; }
.ef-sec .row .row { row-gap: calc(6px * var(--ef-s)); }
.ef-sec label:not(.custom-control-label):not(.form-check-label):not(.mode-option) {
    display: block; font-size: calc(11.5px * var(--ef-s)); font-weight: 600; color: var(--dk-ink-2);
    margin-bottom: calc(3px * var(--ef-s));
}
.ef-sec label .text-danger { color: inherit !important; }
.ef-sec .form-text { margin-top: calc(3px * var(--ef-s)); color: var(--dk-muted) !important; line-height: 1.4; }
.ef-sec .form-control-sm { height: calc(32px * var(--ef-s)); font-size: calc(13px * var(--ef-s)); }
.ef-sec .form-check-label { font-size: calc(12px * var(--ef-s)); color: var(--dk-ink); }
.ef-sec h6 { margin-top: calc(2px * var(--ef-s)); }
.ef-sec > .row:last-child { padding-bottom: calc(10px * var(--ef-s)); }
.ef-sec-h .ef-num i { font-size: calc(11px * var(--ef-s)); }
.ef .ef-bar { margin-left: 0; position: sticky; bottom: 38px; z-index: 20; }
.ef .ef-bar-actions { margin-right: 0; }
.ef-bar-note { color: var(--dk-muted); font-size: 12px; margin-left: 8px; }

/* Role permissions: btshrms's Feature access grid (employees/_form_bar.php,
   #featureGroupsContainer) - a card per module, one line per switch, dark
   and bold when on, grey when off, and a count in the card's header. */
.pf-perms {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(205px * var(--ef-s)), 1fr));
    gap: calc(12px * var(--ef-s)); align-items: start; padding-bottom: calc(14px * var(--ef-s));
}
.pf-perm-group { background: #fff; border: 1px solid var(--dk-line); border-radius: 10px; overflow: hidden; }
.ef-sec .pf-perm-group > h6 {
    display: flex; align-items: center; gap: 8px; margin: 0;
    padding: calc(7px * var(--ef-s)) calc(10px * var(--ef-s));
    background: #f6f8fc; border-bottom: 1px solid var(--dk-line);
    font-size: calc(10.5px * var(--ef-s)); font-weight: 700; letter-spacing: .06em;
    color: var(--dk-ink-2); text-transform: uppercase;
}
.pf-perm-count {
    margin-left: auto; font-size: calc(11px * var(--ef-s)); font-weight: 600; letter-spacing: 0;
    text-transform: none; color: var(--dk-muted); font-variant-numeric: tabular-nums;
}
.pf-perm-count.is-all { color: var(--ui-ok); }
.pf-perm-count.is-none { color: #a8b2c6; }
.pf-perm-group { padding-bottom: calc(3px * var(--ef-s)); }
.pf-perm-item { padding: calc(4px * var(--ef-s)) calc(10px * var(--ef-s)) calc(4px * var(--ef-s)) calc(10px * var(--ef-s) + 2.25rem); margin: 0; transition: background-color .12s; }
.pf-perm-item:hover { background: #f8fafd; }
.ef-sec .pf-perm-item .custom-control-label { color: #7b879f; font-weight: 500; cursor: pointer; font-size: calc(12.5px * var(--ef-s)); text-transform: capitalize; }
.pf-perm-item:has(.custom-control-input:checked) .custom-control-label { color: var(--dk-ink); font-weight: 600; }

/* Project mode: two selectable tiles. Bootstrap 4 positions a bare
   .form-check-input absolutely (it expects a .form-check parent), which sat
   the radio on the tile's border. */
.mode-option {
    border: 1px solid var(--dk-line-2) !important; border-radius: 10px !important;
    padding: 10px 12px !important; margin: 0; cursor: pointer; font-size: 13px; color: var(--dk-ink);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.mode-option:hover { border-color: #b9cff2 !important; }
.mode-option:has(input:checked) { border-color: var(--ui-primary) !important; background: var(--ui-primary-wash); box-shadow: var(--ui-focus-ring); }
.mode-option .form-check-input { position: static; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--ui-primary); }
.mode-option strong { font-size: 13px; }
.mode-option .small { font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
/* PMS textareas hold real prose (plans, checklists): their rows decide the
   height, never less than the employee form's 54px. */
.ef-sec textarea.form-control { height: auto; min-height: calc(54px * var(--ef-s)); }
/* flatpickr makes its input readonly and Bootstrap greys readonly fields, so
   every date looked disabled - the employee form's fix, for all pickers. */
.form-control.flatpickr-input[readonly]:not([data-ef-ro]):not(:disabled) { background-color: #fff; cursor: pointer; }
/* As the employee form on a narrow screen: the actions take the bar's full
   width and sit at its right (PMS has no chat buttons to leave room for). */
@media (max-width: 991.98px) {
    .ef .ef-bar-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}

/* A checkbox straight in a table cell (row selection). Bootstrap 4 positions
   a bare .form-check-input absolutely - it expects a .form-check parent - so
   the boxes drifted out of their rows and stacked under the table. */
.table td > .form-check-input, .table th > .form-check-input {
    position: static; margin: 0; vertical-align: middle; accent-color: var(--ui-primary); cursor: pointer;
}

/* Select2 in a filter bar takes the size of the small controls beside it,
   not Bootstrap 4's full-size select ("All Types" read larger than the rest). */
.form-inline .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + .5rem + 2px) !important; font-size: .875rem; border-color: var(--ui-line-strong);
    padding: 0 18px 0 0 !important;   /* HRMS's 12px is for full-height fields */
}
.form-inline .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .5rem) !important; padding-left: .5rem; font-size: .875rem;
}
.form-inline .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { height: calc(1.5em + .5rem) !important; }

/* ── Lists: btshrms's employees table (employees/index.php, .emp-tbl) ───────
   Lists are not squeezed to the screen. They run their full height and the
   page scrolls (every .table-responsive carries .dk-nocap, the opt-out the
   HRMS layout script honours), and a wide list scrolls sideways inside its
   card instead of wrapping every cell onto three lines. Short attributes
   keep to one line; prose columns wrap at a readable width; the row actions
   stay pinned at the right edge, as the employee list's do. */
.table-responsive.dk-nocap > .table th,
.table-responsive.dk-nocap > .table td { white-space: nowrap; }
.table-responsive.dk-nocap > .table td:is([data-label="Task"], [data-label="Title"], [data-label="Name"],
    [data-label="Description"], [data-label="Risk"], [data-label="Issue"], [data-label="Change"], [data-label="Defect"],
    [data-label="Plan"], [data-label="Template"], [data-label="Application"], [data-label="Activity"],
    [data-label="Document"], [data-label="Product"], [data-label="Control"], [data-label="Communication"],
    [data-label="Notes"], [data-label="Remarks"], [data-label="Check"], [data-label="Approval"], [data-label="Message"]) {
    white-space: normal; min-width: 220px;
}
.table-responsive.dk-nocap > .table td[data-label="Changes"] { white-space: normal; min-width: 280px; max-width: 520px; word-break: break-word; }
/* Never a row that only carries a dialog, nor a cell holding one: a sticky
   cell is a stacking context, and a dialog inside it is trapped under
   Bootstrap's backdrop - visible, but nothing in it can be clicked. */
.table-responsive.dk-nocap > .table tr:not(.modal-row) > td:last-child:has(.btn, form):not(:has(.modal)) {
    position: sticky; right: 0; z-index: 2; background: #fff;
    box-shadow: -8px 0 10px -8px rgba(22, 35, 63, .22);
}
.table-responsive.dk-nocap > .table:has(tbody td:last-child .btn) > thead th:last-child {
    position: sticky; right: 0; z-index: 3; background: #fbfcfe;
}
.table-responsive.dk-nocap > .table.table-hover tbody tr:not(.modal-row):hover > td:last-child:has(.btn, form):not(:has(.modal)) { background: #fafcff; }

/* ── Starting an empty plan (Plan tab) ──────────────────────────────────── */
.pf-start {
    border: 1px solid var(--dk-line); border-radius: 12px; padding: 14px 16px; background: #fff;
    display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s;
}
.pf-start:hover { border-color: #b9cff2; box-shadow: var(--dk-shadow); }
.pf-start > .btn { align-self: flex-start; margin-top: auto; }
.pf-start-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--dk-ink); font-size: 13.5px; }
.pf-start-n {
    width: 22px; height: 22px; border-radius: 7px; background: var(--ui-primary-wash); color: var(--ui-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex: 0 0 22px;
}
.pf-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pf-suggest .btn-xs { padding: 1px 8px; font-size: 11.5px; border-radius: 999px; }
.pf-hint {
    display: flex; gap: 8px; margin-top: 6px; padding: 8px 10px; border-radius: 9px;
    background: #fff8e6; border: 1px solid #f3dfa6; color: #7a4f00; font-size: 11.5px; line-height: 1.45;
}
.pf-hint[hidden] { display: none; }
.pf-hint > i { margin-top: 2px; color: #b0730b; }

/* A file input styled as .form-control: Bootstrap 4 expects .form-control-file,
   so the native button overhung the box's edge. The box takes the input's own
   height and the button sits inside it as a tinted segment. */
input[type="file"].form-control {
    height: auto; padding: 3px; line-height: 1.5; font-size: 13px; color: var(--dk-ink-2); cursor: pointer;
}
input[type="file"].form-control::file-selector-button {
    margin: 0 10px 0 0; padding: 4px 12px; border: 0; border-radius: 6px;
    background: #eef1f6; color: var(--dk-ink); font: inherit; font-weight: 600; cursor: pointer;
    transition: background-color .15s;
}
input[type="file"].form-control:hover::file-selector-button { background: var(--ui-primary-wash); color: var(--ui-primary); }
input[type="file"].form-control-sm::file-selector-button { padding: 2px 10px; }

/* Compliance run: delete sits in the run's meta line, quiet until hovered. */
.cmp-run-delete { border: 0; background: none; padding: 0; font: inherit; color: #b4bdcf; cursor: pointer; }
.cmp-run-delete:hover, .cmp-run-delete:focus-visible { color: var(--ui-danger); }

/* ── Dialog forms: the Add Employee form's field style ─────────────────────
   The same quiet labels and 32px fields as css/hrms/form.css, for every
   form that opens in a dialog. */
.modal-body label:not(.custom-control-label):not(.form-check-label):not(.hc-choice) {
    display: block; font-size: 11.5px; font-weight: 600; color: var(--dk-ink-2); margin-bottom: 6px; line-height: 1.3;
}
.modal-body .form-control:not(textarea), .modal-body .custom-select { height: 36px; font-size: 13px; padding: 6px 12px; }
.modal-body textarea.form-control { font-size: 13px; padding: 8px 12px; min-height: 64px; line-height: 1.5; }
.modal-body .fds .fd-trigger { height: 32px; font-size: 13px; border-color: var(--ui-line-strong); }
.modal-body .form-text, .modal-body small { font-size: 10.5px; }
.modal-body .custom-control-label { font-size: 12.5px; color: var(--dk-ink); }

/* ── Hardening checks: result pill, tiles, dialog ─────────────────────── */
.hc-pill {
    display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 2px 10px;
    font-size: 11px; font-weight: 700; line-height: 1.5; background: #eef1f6; color: #4a5875; white-space: nowrap;
}
button.hc-pill { cursor: pointer; transition: box-shadow .15s; }
button.hc-pill:hover { box-shadow: 0 0 0 2px #c3d0e6; }
.hc-pill.is-passed { background: var(--ui-ok-wash); color: #10692f; }
.hc-pill.is-failed { background: var(--ui-danger-wash); color: #a31f1f; }
.hc-pill.is-na { background: #f1f4f9; color: #6b7a93; }
.hc-pill.is-pending { background: var(--ui-warn-wash); color: #7a4f00; }

.hc-field { margin-bottom: 14px; }
.hc-field:last-of-type { margin-bottom: 0; }
.hc-expect {
    display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; padding: 8px 10px; border-radius: 9px;
    background: var(--ui-primary-wash); color: var(--ui-primary-ink); font-size: 12.5px; line-height: 1.45;
}
.hc-expect > i { margin-top: 3px; }
.hc-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hc-choice {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    margin: 0; padding: 12px 6px 10px; border: 1px solid var(--dk-line-2); border-radius: 10px; cursor: pointer;
    font-size: 11.5px; font-weight: 600; color: var(--dk-ink-2); text-align: center; line-height: 1.2;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.hc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.hc-choice i { font-size: 16px; color: #a3aec4; transition: color .15s; }
.hc-choice:hover { border-color: #b9cff2; }
.hc-choice:has(input:focus-visible) { box-shadow: var(--ui-focus-ring); }
.hc-choice.is-passed:has(input:checked) { border-color: #16a34a; background: var(--ui-ok-wash); color: #10692f; }
.hc-choice.is-passed:has(input:checked) i { color: #16a34a; }
.hc-choice.is-failed:has(input:checked) { border-color: #dc2626; background: var(--ui-danger-wash); color: #a31f1f; }
.hc-choice.is-failed:has(input:checked) i { color: #dc2626; }
.hc-choice.is-na:has(input:checked) { border-color: #94a3b8; background: #f1f4f9; color: #4a5875; }
.hc-choice.is-na:has(input:checked) i { color: #64748b; }
.hc-choice.is-pending:has(input:checked) { border-color: #e0a526; background: var(--ui-warn-wash); color: #7a4f00; }
.hc-choice.is-pending:has(input:checked) i { color: #e0a526; }
.hc-form .custom-control { margin-top: 12px; }
.hc-note { margin: 12px 0 0; font-size: 11.5px; color: var(--dk-muted); }
.hc-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--dk-line); }
@media (max-width: 575.98px) { .hc-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Project guidance: the guide strip under the tabs ──────────────────── */
.pg-guide {
    display: flex; align-items: flex-start; gap: 12px; margin: -6px 0 14px; padding: 10px 12px 10px 14px;
    background: #f6f9fe; border: 1px solid #dbe6f7; border-left: 3px solid var(--ui-primary); border-radius: 10px;
}
.pg-guide[hidden] { display: none; }
.pg-guide-icon {
    flex: 0 0 28px; height: 28px; border-radius: 8px; background: var(--ui-primary-wash); color: var(--ui-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.pg-guide-main { flex: 1 1 auto; min-width: 0; }
.pg-guide-title { font-size: 13px; color: var(--dk-ink); line-height: 1.45; }
.pg-step {
    display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; background: var(--ui-primary);
    color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; vertical-align: 1px;
}
.pg-what { color: var(--dk-ink-2); margin-left: 4px; }
.pg-flow { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 5px; font-size: 12px; color: var(--dk-muted); }
.pg-flow i { color: var(--ui-primary); margin-right: 5px; opacity: .8; }
.pg-flow b { color: var(--dk-ink-2); margin-right: 4px; }
.pg-guide-side { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pg-close { border: 0; background: none; color: #a3aec4; font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer; }
.pg-close:hover { color: var(--dk-ink); }
.pg-tips { margin-top: 4px; font-size: 12px; color: var(--dk-ink-2); }
.pg-tips summary { cursor: pointer; color: var(--ui-primary); font-weight: 600; width: max-content; }
.pg-tips ul { margin: 4px 0 0; padding-left: 18px; }

/* ── SDLC: your role, the lifecycle path, the handbook ─────────────────── */
.sg-life { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.sg-life li { flex: 1 1 140px; min-width: 0; }
.sg-life a { display: block; height: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--dk-line); background: #fff; color: var(--dk-ink); text-decoration: none; }
.sg-life a:hover { border-color: var(--ui-primary); }
.sg-life .sg-n { font-size: 11px; font-weight: 700; color: var(--dk-muted); text-transform: uppercase; letter-spacing: .04em; }
.sg-life .sg-l { font-weight: 600; font-size: 13px; }
.sg-life .sg-note { font-size: 11.5px; color: var(--dk-muted); }
.sg-life .is-done a { background: var(--ui-ok-wash); border-color: #bfe5cd; }
.sg-life .is-done .sg-n { color: #10692f; }
.sg-life .is-current a { border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-wash); }
.sg-life .is-current .sg-n { color: var(--ui-primary); }
.sg-steps { list-style: none; margin: 0; padding: 0; }
.sg-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--dk-line); }
.sg-steps li:first-child { border-top: 0; }
.sg-steps .sg-tick { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid #c9d3e6; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; margin-top: 1px; }
.sg-steps .is-done .sg-tick { background: #1a8a55; border-color: #1a8a55; }
.sg-steps .is-next .sg-tick { border-color: var(--ui-primary); }
.sg-steps .is-done .sg-label { color: var(--dk-muted); text-decoration: line-through; }
.sg-steps .sg-hint { font-size: 12px; color: var(--dk-muted); }
.sg-can { columns: 2; column-gap: 18px; font-size: 12.5px; margin: 0; padding: 0; list-style: none; }
.sg-can li { break-inside: avoid; padding: 2px 0; }
.sg-role-card { border-left: 3px solid var(--ui-primary); }
.sg-role-head { display: flex; align-items: center; gap: 12px; }
.sg-role-icon { flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--ui-primary-wash); color: var(--ui-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.sg-toc a { display: inline-block; margin: 0 10px 6px 0; }
.sg-handbook h2 { font-size: 18px; margin: 28px 0 10px; scroll-margin-top: 80px; }
.sg-handbook h3 { font-size: 15px; margin: 0 0 4px; }
.sg-handbook .card { scroll-margin-top: 80px; }
.sg-handbook .is-you { border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-wash); }
.sg-role-summary { cursor: pointer; list-style: none; gap: 10px; }
.sg-role-summary::-webkit-details-marker { display: none; }
.sg-role-head { flex: 1 1 260px; min-width: 0; }
.sg-role-progress { text-align: right; margin-left: auto; }
@media (max-width: 575.98px) {
    .sg-can { columns: 1; }
    .sg-life li { flex-basis: 100%; }
    .sg-role-progress { width: 100%; text-align: left; margin-left: 52px; }
}
@media (max-width: 767.98px) {
    .pg-guide { flex-wrap: wrap; }
    .pg-guide-icon { display: none; }
    .pg-guide-side { width: 100%; justify-content: flex-end; }
}

/* ── Project journey (Overview) ───────────────────────────────────────── */
.pj-count { font-size: 12px; font-weight: 600; color: var(--dk-muted); margin-left: 8px; }
.pj-bar { width: 140px; height: 6px; }
.pj-next {
    display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--dk-line);
    background: linear-gradient(90deg, #fffaeb, #fff 70%);
}
.pj-next.is-done { background: var(--ui-ok-wash); color: #10692f; }
.pj-next-tag {
    flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: #fdf0d2; color: #8a5a00;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.pj-next-main { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--dk-ink); }
.pj-next-why { font-size: 12px; color: var(--dk-ink-2); margin-top: 2px; }
.pj-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 14px 18px 16px; }
.pj.is-folded .pj-stages { display: none; }
.pj-stage { border: 1px solid var(--dk-line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.pj-stage.is-done { background: #fbfefc; border-color: #cfeedd; }
.pj-stage-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dk-ink); margin-bottom: 6px; }
.pj-stage-n {
    width: 22px; height: 22px; border-radius: 7px; background: var(--ui-primary-wash); color: var(--ui-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.pj-stage.is-done .pj-stage-n { background: var(--ui-ok-wash); color: var(--ui-ok); }
.pj-stage-c { margin-left: auto; font-size: 11.5px; color: var(--dk-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.pj-stage ul { list-style: none; margin: 0; padding: 0; }
.pj-step { display: flex; gap: 8px; padding: 6px 4px; border-radius: 8px; }
.pj-step + .pj-step { border-top: 1px dashed var(--dk-line); }
.pj-step.is-next { background: #fffaeb; border-top-color: transparent; }
.pj-mark { flex: 0 0 auto; margin-top: 3px; font-size: 13px; color: #c3cbda; }
.pj-step.is-done .pj-mark { color: #16a34a; }
.pj-step.is-next .pj-mark { color: #e0a526; }
.pj-step-body { min-width: 0; }
.pj-step-top { font-size: 12.5px; font-weight: 600; }
.pj-step-top a { color: var(--dk-ink); }
.pj-step-top a:hover { color: var(--ui-primary); }
.pj-step.is-done .pj-step-top a, .pj-step.is-done .pj-step-top span { color: var(--dk-ink-2); }
.pj-opt { margin-left: 6px; font-size: 10px; font-weight: 600; color: #8a95ab; background: #f1f4f9; border-radius: 999px; padding: 1px 6px; }
.pj-detail { font-size: 11.5px; color: var(--dk-muted); }
.pj-why { font-size: 11.5px; color: #7f8aa0; line-height: 1.4; margin-top: 2px; }
.pj-step.is-done .pj-why { display: none; }
@media (max-width: 767.98px) {
    .pj-next { flex-wrap: wrap; }
    .pj-bar { display: none; }
}

/* ── Avatars: initials on a per-person colour (x-avatar) ─────────────────── */
.av {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%;
    color: #fff; font-weight: 700; letter-spacing: .02em; line-height: 1; vertical-align: middle; user-select: none;
}
.av-xs { width: 26px; height: 26px; font-size: 10.5px; }
.av-sm { width: 30px; height: 30px; font-size: 11.5px; }
.av-lg { width: 38px; height: 38px; font-size: 14px; }
.av-t0 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.av-t1 { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.av-t2 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.av-t3 { background: linear-gradient(135deg, #f59e0b, #b45309); }
.av-t4 { background: linear-gradient(135deg, #ec4899, #be185d); }
.av-t5 { background: linear-gradient(135deg, #22c55e, #15803d); }
.av-t6 { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.av-t7 { background: linear-gradient(135deg, #64748b, #334155); }
/* The sidebar's avatar keeps HRMS's rings (main.css styles its <img>). */
.main-sidebar .user-panel .image .av {
    box-shadow: 0 0 0 2px #0b1326, 0 0 0 4px rgb(var(--here, 56 189 248)), 0 0 18px rgb(var(--here, 56 189 248) / .45);
}
.main-header .nav-link .av { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--dk-line-2); }

/* ── Ports & connections: the device's front panel ───────────────────────── */
.pm-face {
    position: relative; padding: 12px 16px 14px; border-radius: 10px;
    background: linear-gradient(180deg, #2b3445 0%, #1d2433 55%, #171d29 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 6px 18px -10px rgba(22, 35, 63, .55);
    overflow-x: auto;
}
/* Rack ears with their screws. */
.pm-face::before, .pm-face::after {
    content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #9aa6ba, #4b5567 70%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}
.pm-face::before { left: 5px; } .pm-face::after { right: 5px; }
.pm-face-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.pm-face-name { color: #c9d3e3; font-weight: 700; }
.pm-face-host { color: #7f8ca3; font-weight: 600; }

.pm-bank { display: flex; flex-wrap: wrap; gap: 6px 5px; padding: 8px 10px; border-radius: 6px; background: rgba(0, 0, 0, .22); }
.pm-bank + .pm-bank { margin-top: 8px; }
/* Switches number their ports top-bottom-top: 1 over 2, 3 over 4... */
.pm-bank.is-two-row { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start; }

.pm-port {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 3px 2px 2px; min-width: 30px; border: 0; border-radius: 5px; background: transparent; cursor: pointer;
    transition: background-color .15s, transform .15s;
}
.pm-port:hover, .pm-port.is-hot { background: rgba(96, 165, 250, .16); transform: translateY(-1px); }
.pm-port.is-hot .pm-jack { box-shadow: 0 0 0 2px #60a5fa, 0 0 12px rgba(96, 165, 250, .8); }
.pm-port:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }

/* The status light. */
.pm-led { width: 6px; height: 6px; border-radius: 50%; background: #3a4456; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.pm-port.is-connected .pm-led { background: #22c55e; box-shadow: 0 0 6px #22c55e; animation: pm-activity 2.4s steps(1, end) infinite; animation-delay: var(--d, 0ms); }
.pm-port.is-faulty .pm-led { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; animation: pm-fault 1s ease-in-out infinite; }
.pm-port.is-disabled .pm-led { background: #ef4444; box-shadow: 0 0 4px rgba(239, 68, 68, .7); }
@keyframes pm-activity { 0%, 62%, 70%, 100% { opacity: 1; } 64%, 68% { opacity: .25; } }
@keyframes pm-fault { 50% { opacity: .15; } }

/* The socket itself, shaped by what it takes. */
.pm-jack {
    position: relative; width: 24px; height: 18px; border-radius: 2px;
    background: linear-gradient(180deg, #0b0f17, #141a26); box-shadow: inset 0 0 0 1px #4a5568, inset 0 2px 3px rgba(0, 0, 0, .8);
    transition: box-shadow .15s;
}
.pm-jack::after { /* the RJ45 latch notch */
    content: ''; position: absolute; left: 50%; bottom: -1px; width: 10px; height: 5px; margin-left: -5px;
    background: #0b0f17; box-shadow: inset 0 0 0 1px #4a5568; border-radius: 1px 1px 0 0;
}
.pm-port.k-sfp .pm-jack, .pm-port.k-fc .pm-jack { width: 20px; height: 13px; border-radius: 2px; background: linear-gradient(180deg, #1c2533, #0e131c); }
.pm-port.k-sfp .pm-jack::after, .pm-port.k-fc .pm-jack::after { width: 12px; height: 3px; bottom: 4px; margin-left: -6px; border-radius: 1px; }
.pm-port.k-fc .pm-jack { box-shadow: inset 0 0 0 1px #b48a2c, inset 0 2px 3px rgba(0, 0, 0, .8); }
.pm-port.k-mgmt .pm-jack { box-shadow: inset 0 0 0 1px #60a5fa, inset 0 2px 3px rgba(0, 0, 0, .8); }
.pm-port.k-console .pm-jack { box-shadow: inset 0 0 0 1px #94a3b8, inset 0 2px 3px rgba(0, 0, 0, .8); background: #1e2a3b; }
.pm-port.k-patch .pm-jack { background: linear-gradient(180deg, #0b0f17, #141a26); box-shadow: inset 0 0 0 1px #64748b, inset 0 2px 3px rgba(0, 0, 0, .8); }
/* A cabled port shows the plug in it. */
.pm-port.is-connected .pm-jack { background: linear-gradient(180deg, #2563eb, #1e40af); box-shadow: inset 0 0 0 1px #93c5fd; }
.pm-port.is-connected.k-fc .pm-jack, .pm-port.is-connected.k-sfp .pm-jack { background: linear-gradient(180deg, #d97706, #92400e); box-shadow: inset 0 0 0 1px #fcd34d; }
.pm-port.is-connected.k-patch .pm-jack { background: linear-gradient(180deg, #7c3aed, #5b21b6); box-shadow: inset 0 0 0 1px #c4b5fd; }

/* Power: round sockets. */
.pm-bank.is-power .pm-jack {
    width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #10151f 55%, #2a3446 56%);
    box-shadow: inset 0 0 0 1px #4a5568;
}
.pm-bank.is-power .pm-jack::after { width: 3px; height: 7px; left: 50%; top: 7px; bottom: auto; margin-left: -6px; border-radius: 1px; background: #5b6476; box-shadow: 9px 0 0 #5b6476; }
.pm-port.k-power_in .pm-jack { border-radius: 4px; }
.pm-port.is-connected.k-power_out .pm-jack, .pm-port.is-connected.k-power_in .pm-jack { background: radial-gradient(circle, #111827 50%, #16a34a 52%); box-shadow: inset 0 0 0 1px #86efac, 0 0 8px rgba(34, 197, 94, .45); }

.pm-num { font-size: 9.5px; font-weight: 700; color: #8b97ab; line-height: 1; font-variant-numeric: tabular-nums; }
.pm-port.is-connected .pm-num { color: #dbe4f1; }

.pm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; color: var(--dk-ink-2); }
.pm-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.pm-dot { width: 8px; height: 8px; border-radius: 50%; background: #3a4456; }
.pm-dot.is-connected { background: #22c55e; } .pm-dot.is-faulty { background: #f59e0b; } .pm-dot.is-disabled { background: #ef4444; }

/* State pills and the traced path. */
.pm-state { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #eef1f6; color: #4a5875; }
.pm-state.is-connected { background: var(--ui-ok-wash); color: #10692f; }
.pm-state.is-faulty { background: var(--ui-warn-wash); color: #7a4f00; }
.pm-state.is-disabled { background: var(--ui-danger-wash); color: #a31f1f; }
.pm-path { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 0; }
.pm-path + .pm-path { margin-top: 4px; }
.pm-hop {
    display: inline-flex; gap: 4px; align-items: baseline; padding: 2px 8px; border-radius: 7px; font-size: 11.5px;
    background: #f1f4f9; color: var(--dk-ink-2); border: 1px solid var(--dk-line); white-space: nowrap;
}
.pm-hop b { color: var(--dk-ink); font-weight: 700; }
.pm-hop.is-here { background: var(--ui-primary-wash); border-color: #b9cff2; }
.pm-hop.is-patch { background: #f5f3ff; border-color: #ddd6fe; }
a.pm-hop:hover { text-decoration: none; border-color: var(--ui-primary); }
/* The cable between two hops: a moving dash, so the link reads as live. */
.pm-wire {
    width: 22px; height: 2px; margin: 0 2px; border-radius: 2px;
    background: repeating-linear-gradient(90deg, #60a5fa 0 6px, transparent 6px 10px); background-size: 20px 2px;
    animation: pm-flow 1s linear infinite;
}
@keyframes pm-flow { to { background-position: 20px 0; } }
.pm-table tr.is-hot > td { background: #f2f7ff; }
.pm-table td[data-label="Path"] { white-space: nowrap; }

/* Power: what a source takes down, and what feeds a device. */
.pm-impact { margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid #cfeedd; background: #f6fcf8; }
.pm-impact.is-risk { border-color: #f6caca; background: #fff7f7; }
.pm-impact.is-none { border-color: var(--dk-line); background: #f8fafd; }
.pm-impact-h { font-size: 12.5px; color: var(--dk-ink); margin-bottom: 6px; }
.pm-impact-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef1f6; color: var(--dk-ink-2); }
.pm-chip.is-ok { background: var(--ui-ok-wash); color: #10692f; }
.pm-chip.is-down { background: var(--ui-danger-wash); color: #a31f1f; }
.pm-chip.is-off { background: #f1f4f9; color: #8a95ab; }
a.pm-chip:hover { text-decoration: none; filter: brightness(.97); }

/* The port dialog. */
.pm-dlg-meta { font-size: 12.5px; color: var(--dk-ink-2); margin-bottom: 12px; }
.pm-dlg-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 10px; border-radius: 9px; background: #f8fafd; border: 1px solid var(--dk-line); }
.pm-dlg-port { padding-top: 10px; border-top: 1px solid var(--dk-line); }
.pm-connect { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dk-line); }
.pm-connect[hidden] { display: none; }
.pm-connect-h { font-size: 12.5px; font-weight: 700; color: var(--dk-ink); margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
    .pm-port .pm-led, .pm-wire { animation: none !important; }
}

/* ── Infrastructure map (partials/infra-map, js/infra-map.js) ─────────────── */
.im-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.im-layers { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.im-layer {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--dk-line-2); background: #fff; color: #a3aec4; font-size: 11.5px; font-weight: 600;
    transition: color .15s, border-color .15s, background-color .15s;
}
.im-layer.is-on { color: var(--dk-ink); border-color: #c3d0e6; background: #f8fafd; }
.im-layer i, .im-t-sec i[class^="k-"] { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
i.k-data { background: #3b82f6; } i.k-fc { background: #d97706; } i.k-runs { background: #8b5cf6; }
i.k-power { background: repeating-linear-gradient(90deg, #16a34a 0 5px, transparent 5px 8px); }
i.k-host { background: repeating-linear-gradient(90deg, #94a3b8 0 2px, transparent 2px 5px); }
.im-layer:not(.is-on) i { opacity: .3; }
.im-search { width: 220px !important; }

/* Overview and trace side by side; the trace only while something is selected. */
.im { display: flex; align-items: stretch; background: #fbfcfe; min-height: 320px; }
.im-canvas { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.im-stage { position: relative; min-width: 720px; }
.im-edges { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.im-lanes { position: relative; }
.im-line { fill: none; opacity: .55; transition: opacity .2s; }
.im-line-n text { fill: #fff; font-size: 10px; font-weight: 700; }
.im-line-n { pointer-events: all; }
.im.has-sel .im-line, .im.has-sel .im-line-n { opacity: .12; }
.im-hot { fill: none; stroke-width: 2.2; stroke-dasharray: 7 5; animation: im-flow .8s linear infinite; }
@keyframes im-flow { to { stroke-dashoffset: -12; } }

.im-lane { position: relative; display: flex; border-bottom: 1px solid var(--dk-line); }
.im-lane:nth-child(even) { background: rgba(238, 242, 248, .5); }
.im-lane-label {
    flex: 0 0 150px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
    border-right: 1px solid var(--dk-line); background: rgba(255, 255, 255, .75);
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dk-ink-2);
}
.im-lane-label span { display: flex; flex-direction: column; line-height: 1.3; }
.im-lane-label em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--dk-muted); font-size: 11px; }
.im-lane-label i { width: 24px; height: 24px; border-radius: 7px; background: var(--ui-primary-wash); color: var(--ui-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex: 0 0 24px; }
.im-lane-body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px 28px; padding: 26px 24px; }

.im-group {
    position: relative; z-index: 2; background: #fff; border: 1px solid var(--dk-line-2); border-radius: 12px; max-width: 100%;
    box-shadow: 0 1px 2px rgba(22, 35, 63, .05), 0 6px 16px -12px rgba(22, 35, 63, .3);
}
.im-group-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 7px; border-bottom: 1px solid var(--dk-line); font-size: 12.5px; color: var(--dk-ink); }
.im-group-icon { flex: 0 0 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
    background: var(--ui-primary-wash); color: var(--ui-primary); }
.im-group.t-apps .im-group-icon { background: #f1ebfd; color: #6d28d9; }
.im-group.t-perimeter .im-group-icon { background: #fdecec; color: #c53434; }
.im-group.t-patch .im-group-icon, .im-group.t-facility .im-group-icon { background: #f1f4f9; color: #54658a; }
.im-group.t-virtual .im-group-icon { background: #e2f6f8; color: #0d7f8e; }
.im-group.t-fabric .im-group-icon, .im-group.t-storage .im-group-icon { background: #fdf3e0; color: #b0730b; }
.im-group.t-power .im-group-icon { background: #e7f6ec; color: #137a3a; }
.im-group-n { font-size: 11px; font-weight: 700; color: var(--dk-muted); background: #f1f4f9; border-radius: 999px; padding: 0 7px; }
.im-health { display: inline-flex; width: 54px; height: 5px; border-radius: 3px; overflow: hidden; background: #eef1f6; margin-left: auto; }
.im-health span { display: block; height: 100%; }
.im-names { border: 1px solid var(--dk-line-2); background: #fff; color: var(--dk-ink-2); border-radius: 6px; font-size: 10.5px; font-weight: 600; padding: 1px 7px; cursor: pointer; }
.im-names:hover { border-color: #b9cff2; color: var(--ui-primary); }
.im-group-body { padding: 8px 10px 10px; display: flex; flex-wrap: wrap; gap: 10px 16px; }
.im-block-head { font-size: 10.5px; font-weight: 600; color: var(--dk-muted); margin-bottom: 4px; white-space: nowrap; }
.im-block-head em { font-style: normal; color: #a3aec4; }

/* State colours: mapped / needs work / nothing connected yet. */
.s-ok { --s: #22c55e; } .s-todo { --s: #f59e0b; } .s-bare { --s: #c3cbda; }
.im-health .s-ok, .im-health .s-todo, .im-health .s-bare { background: var(--s); }
.im-sd { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--s, #c3cbda); }
.im-sd.is-outside { background: #fff; border: 1.5px dashed #94a3b8; }

.im-pills { display: flex; flex-wrap: wrap; gap: 5px; max-width: 700px; }
.im-pill {
    display: inline-flex; align-items: center; gap: 6px; width: 168px; padding: 4px 9px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--dk-line-2); background: #fff; font-size: 11.5px; font-weight: 600; color: var(--dk-ink); text-align: left;
    transition: border-color .15s, box-shadow .15s, opacity .2s;
}
.im-pill-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-pill:hover { border-color: #b9cff2; }
.im-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.im-tile {
    width: 14px; height: 14px; padding: 0; border-radius: 4px; cursor: pointer; border: 0;
    background: var(--s); opacity: .85; transition: transform .12s, box-shadow .15s, opacity .2s;
}
.im-tile:hover { transform: scale(1.35); opacity: 1; position: relative; z-index: 1; }
.im-pill.is-outside, .im-tile.is-outside { border: 1.5px dashed #94a3b8; }
.im-tile.is-outside { background: #fff; }
.im.has-sel .im-pill:not(.is-sel):not(.is-near), .im.has-sel .im-tile:not(.is-sel):not(.is-near) { opacity: .3; }
.im-pill.is-sel { border-color: var(--ui-primary); box-shadow: 0 0 0 3px rgba(29, 95, 191, .25); }
.im-pill.is-near { border-color: #93c5fd; background: #f3f8ff; }
.im-tile.is-sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ui-primary); opacity: 1; transform: scale(1.25); position: relative; z-index: 1; }
.im-tile.is-near { box-shadow: 0 0 0 2px #93c5fd; opacity: 1; }
.im-pill.is-match { box-shadow: 0 0 0 3px #fde68a; border-color: #e0a526; }
.im-tile.is-match { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e0a526; opacity: 1; }

/* The trace: one device's paths end to end, and what depends on it. */
.im-trace {
    position: sticky; top: 64px; align-self: flex-start; flex: 0 0 380px; max-width: 380px; max-height: calc(100vh - 80px); overflow: auto;
    border-left: 1px solid var(--dk-line); border-bottom: 1px solid var(--dk-line); background: #fff; padding: 14px 16px 16px;
}
.im-trace[hidden] { display: none; }
.im-t-type { font-size: 11px; font-weight: 700; color: var(--dk-muted); text-transform: uppercase; letter-spacing: .04em; }
.im-t-name { font-size: 16px; font-weight: 700; color: var(--dk-ink); margin: 2px 0 4px; word-break: break-word; padding-right: 20px; }
.im-t-line { font-size: 12px; color: var(--dk-ink-2); margin-bottom: 2px; }
.im-t-todo { list-style: none; padding: 7px 10px; margin: 8px 0 0; background: var(--ui-warn-wash); border-radius: 8px; font-size: 12px; color: #7a4f00; }
.im-t-todo i { margin-right: 6px; color: #e0a526; }
.im-t-sec { display: flex; align-items: center; gap: 7px; margin: 16px 0 7px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dk-ink-2); }
.im-t-sec span { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--dk-muted); }
.im-t-sec.is-impact { color: #a31f1f; padding-top: 12px; border-top: 1px dashed var(--dk-line); }
.im-t-empty { margin-top: 12px; font-size: 12px; color: var(--dk-muted); }
.im-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.im-chip {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px; border-radius: 6px;
    border: 1px solid var(--dk-line-2); border-left: 3px solid var(--s); background: #fff; font-size: 11.5px; font-weight: 600; color: var(--dk-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-chip i { font-size: 10px; color: var(--dk-muted); }
.im-chip:hover { text-decoration: none; border-color: #b9cff2; color: var(--ui-primary); }
.im-steps { list-style: none; padding: 0; margin: 0; }
.im-steps li { position: relative; padding: 0 0 12px 20px; }
.im-steps li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #b9c6dc; }
.im-steps li:not(:last-child)::after { content: ''; position: absolute; left: 8px; top: 17px; bottom: 0; width: 2px; background: #e3e9f3; }
.im-steps li.is-start { font-size: 12px; font-weight: 700; color: var(--dk-ink); }
.im-steps li.is-start::before { background: var(--ui-primary); border-color: var(--ui-primary); }
.im-step { margin-bottom: 4px; }
.im-step .im-chip { margin-right: 4px; }
.im-via { display: block; font-size: 10.5px; color: var(--dk-muted); margin-top: 2px; }
.im-via i { font-size: 9px; }

.im-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 9px 16px 11px; border-top: 1px solid var(--dk-line); font-size: 11.5px; color: var(--dk-ink-2); }
.im-key { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.im-foot-hint { flex: 1 1 340px; color: var(--dk-muted); text-align: right; }

.im-howto { padding-left: 18px; margin: 0 0 12px; color: var(--dk-ink-2); }
.im-howto li { margin-bottom: 3px; }
.im-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; padding-bottom: 12px; }
.im-check { border: 1px solid var(--dk-line); border-radius: 10px; padding: 8px 12px; background: #fff; }
.im-check summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--dk-ink); list-style: none; }
.im-check summary::-webkit-details-marker { display: none; }
.im-check-mark { color: #c3cbda; }
.im-check.is-done { background: #fbfefc; border-color: #cfeedd; }
.im-check.is-done .im-check-mark { color: #16a34a; }
.im-check.is-todo { border-color: #f6caca; }
.im-check.is-todo .im-check-mark { color: #dc2626; }
.im-check.is-warn { border-color: #f3dfa6; }
.im-check.is-warn .im-check-mark { color: #e0a526; }
.im-check-n { margin-left: auto; font-size: 11px; font-weight: 700; color: #a31f1f; background: var(--ui-danger-wash); border-radius: 999px; padding: 1px 8px; }
.im-check.is-warn .im-check-n { color: #7a4f00; background: var(--ui-warn-wash); }
.im-check-why { font-size: 11.5px; color: var(--dk-muted); margin: 6px 0 4px 22px; }
.im-check-items { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 22px; }
@media (max-width: 1199.98px) {
    .im { flex-direction: column; }
    .im-trace { position: relative; top: 0; align-self: stretch; flex-basis: auto; max-width: none; border-left: 0; border-top: 1px solid var(--dk-line); max-height: none; }
}
@media (max-width: 767.98px) {
    .im-search { width: 100% !important; }
    .im-lane-label { flex-basis: 96px; }
    .im-foot-hint { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .im-hot { animation: none; } }

/* Asset form: rows inside a section (Processors, Memory, Disks & RAID). */
.asset-subhead { margin: 2px 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-muted); }
.asset-subhead ~ .asset-subhead { margin-top: 8px; }
.asset-sum { margin-left: 10px; font-size: 12.5px; font-weight: 700; color: var(--dk-ink); }

/* Bootstrap 4 positions .form-check-input absolutely, for use inside a
   .form-check wrapper. A checkbox placed straight in a label or a table cell
   (the compliance control picker, bulk-select columns) would otherwise float
   out to the nearest positioned ancestor - a column of ticks down the page. */
.form-check-input:not(.form-check .form-check-input) { position: static; margin: 0; vertical-align: middle; flex: 0 0 auto; }
.cmp-picker-area li .form-check-input, .cmp-picker-area-toggle .form-check-input { margin-top: .15rem; width: 15px; height: 15px; }

/* ── Project work vs ad-hoc work (dashboard, My Work) ─────────────────────── */
.mw-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; line-height: 1.6; text-decoration: none !important; }
.mw-tag-project { background: #e8f0fd; color: #1d4f9f; }
.mw-tag-adhoc { background: #f1ebfd; color: #6d28d9; }
.mw-tag i { font-size: 9px; }
.mw-adhoc-row td:first-child { box-shadow: inset 3px 0 0 #8b5cf6; }

.mw-scope { margin-bottom: 1.25rem; }
.mw-scope + .mw-scope { padding-top: 1rem; border-top: 1px dashed var(--dk-line-2); }
.mw-scope-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--tint-bg, #f6f8fc); border: 1px solid var(--dk-line); }
.mw-scope-project .mw-scope-head { background: #f3f7fe; border-color: #d6e3f8; }
.mw-scope-adhoc .mw-scope-head { background: #f8f5fe; border-color: #e3d8fa; }
.mw-scope-head, .mw-scope-actions { flex-wrap: wrap; }
.mw-scope-actions, .db-scope .card-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mw-scope-icon { flex: 0 0 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.mw-scope-project .mw-scope-icon { background: #e1ebfb; color: #1d4f9f; }
.mw-scope-adhoc .mw-scope-icon { background: #ece3fc; color: #6d28d9; }
.mw-scope-title { font-size: 15px; font-weight: 700; color: var(--dk-ink); }
.mw-scope-hint { font-size: 12px; color: var(--dk-muted); }
.mw-scope-adhoc .mw-bucket .card-header { border-left: 3px solid #8b5cf6; }
.mw-scope-project .mw-bucket .card-header { border-left: 3px solid #3b82f6; }

.mw-scope-switch { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 12px; background: #f1f4f9; }
.mw-scope-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--dk-ink-2); text-decoration: none !important; }
.mw-scope-pill span { font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: rgba(22, 35, 63, .08); }
.mw-scope-pill:hover { color: var(--dk-ink); background: #fff; }
.mw-scope-pill.active { background: #fff; box-shadow: 0 1px 3px rgba(22, 35, 63, .12); color: var(--dk-ink); }
.mw-scope-pill.is-project.active { color: #1d4f9f; }
.mw-scope-pill.is-adhoc i, .mw-scope-pill.is-adhoc.active { color: #6d28d9; }
.mw-scope-pill.is-project i { color: #1d4f9f; }

.db-task-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.db-task-row .text-muted { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.db-scope-adhoc .card-header { border-left: 3px solid #8b5cf6; }
.db-scope-project .card-header { border-left: 3px solid #3b82f6; }

/* A settings pane someone may read but not change. */
.settings-readonly { border: 0; padding: 0; margin: 0; min-width: 0; }
.ef-sec .pf-perm-group > h6 .pf-perm-count { white-space: nowrap; align-self: flex-start; }
.ef-sec .pf-perm-group > h6 small { display: block; margin-top: 2px; font-size: calc(11px * var(--ef-s)); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dk-muted); }

/* ---- Reports ------------------------------------------------------------- */
.rp-lead { color: var(--dk-muted); font-size: 13px; margin: -4px 0 18px; max-width: 760px; }
.rp-group { margin-bottom: 26px; }
.rp-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rp-group-icon, .rp-card-icon { flex: 0 0 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--tint-bg, #eef1f7); color: var(--tint, #54658a); font-size: 15px; }
.rp-group-title { font-size: 16px; font-weight: 700; color: var(--dk-ink); margin: 0; }
.rp-group-hint { font-size: 12.5px; color: var(--dk-muted); }
.rp-group-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--dk-muted); white-space: nowrap; }
.rp-card { border-top: 3px solid var(--tint, #1d5fbf); transition: box-shadow .15s, transform .15s; }
.rp-card:hover { box-shadow: 0 6px 18px rgba(20, 40, 80, .10); transform: translateY(-1px); }
.rp-card-main { display: flex; gap: 12px; padding: 16px 16px 10px; color: inherit; text-decoration: none; flex: 1 1 auto; }
.rp-card-main:hover { text-decoration: none; color: inherit; }
.rp-card-title { font-size: 15px; font-weight: 700; color: var(--dk-ink); margin: 2px 0 4px; }
.rp-card-main:hover .rp-card-title { color: var(--tint, #1d5fbf); }
.rp-card-desc { font-size: 12.5px; color: var(--dk-muted); margin: 0; line-height: 1.45; }
.rp-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--dk-line); }
.rp-figure { font-size: 12px; color: var(--dk-muted); }
.rp-figure strong { font-size: 18px; font-weight: 700; margin-right: 2px; font-variant-numeric: tabular-nums; }
.rp-tone-danger strong { color: #c53434; }
.rp-tone-warning strong { color: #b0730b; }
.rp-tone-success strong { color: #1a8a55; }
.rp-tone-primary strong { color: #1d5fbf; }
.rp-tone-violet strong { color: #6d3fc4; }
.rp-tone-secondary strong { color: #54658a; }
.rp-intro { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px;
    background: var(--tint-bg, #f6f8fc); border: 1px solid var(--dk-line); }
.rp-intro-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tint, #54658a); }
.rp-intro-desc { font-size: 13.5px; color: var(--dk-ink); }
.rp-table th { font-size: 11.5px; }
.rp-table td { font-size: 12.5px; vertical-align: middle; }
.rp-sort { color: inherit; text-decoration: none; }
.rp-sort:hover, .rp-sort.is-sorted { color: var(--primary, #1d5fbf); text-decoration: none; }
.rp-title a, .rp-title strong { font-weight: 600; }
.rp-long { max-width: 320px; }
.rp-bar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: #e7ecf4; overflow: hidden; vertical-align: middle; }
.rp-bar > span { display: block; height: 100%; background: #3b82f6; border-radius: 3px; }
.rp-bar.is-bad > span { background: #dc3545; }
.rp-bar-val { display: inline-block; min-width: 34px; font-variant-numeric: tabular-nums; }
.rp-score { font-size: 12px; min-width: 48px; }
.rp-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.rp-related-label { font-size: 12px; font-weight: 600; color: var(--dk-muted); margin-right: 4px; }
.rp-related-chip { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--dk-line); background: #fff; color: var(--dk-ink); }
.rp-related-chip:hover { border-color: var(--primary, #1d5fbf); color: var(--primary, #1d5fbf); text-decoration: none; }
.rp-related-chip i { color: var(--dk-muted); margin-right: 3px; }

/* ---- AI provider (Settings > AI Manager) ---------------------------------- */
.ai-provider-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ai-provider-choice { margin-bottom: 10px; }
.ai-provider-anthropic { border: 1px solid var(--dk-line); border-radius: 10px; padding: 10px 12px 8px; margin: 0; min-width: 0; background: #fbfcfe; }
.ai-provider-anthropic legend { width: auto; font-size: 12.5px; font-weight: 700; padding: 0 6px; margin: 0; }
.ai-provider-note { margin-top: 4px; padding: 7px 10px; border-radius: 8px; background: #fdf3e0; color: #7a5208; }
.ai-provider-note i { margin-right: 4px; }

/* ---- Ports by component type --------------------------------------------- */
/* Power sockets wherever they are drawn, not only in a power bank. */
.pm-port.k-power_out .pm-jack, .pm-port.k-power_in .pm-jack {
    width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #10151f 55%, #2a3446 56%);
    box-shadow: inset 0 0 0 1px #4a5568;
}
.pm-port.k-power_in .pm-jack { border-radius: 5px; }
.pm-port.k-power_out .pm-jack::after, .pm-port.k-power_in .pm-jack::after { width: 3px; height: 7px; left: 50%; top: 7px; bottom: auto; margin-left: -6px; border-radius: 1px; background: #5b6476; box-shadow: 9px 0 0 #5b6476; }
.pm-port.is-connected.k-power_out .pm-jack, .pm-port.is-connected.k-power_in .pm-jack { background: radial-gradient(circle, #111827 50%, #16a34a 52%); box-shadow: inset 0 0 0 1px #86efac, 0 0 8px rgba(34, 197, 94, .45); }
.pm-port.k-sas .pm-jack { width: 22px; height: 11px; border-radius: 2px; background: linear-gradient(180deg, #1c2533, #0e131c); box-shadow: inset 0 0 0 1px #64748b; }
.pm-port.is-connected.k-sas .pm-jack { background: linear-gradient(180deg, #0f766e, #134e4a); box-shadow: inset 0 0 0 1px #5eead4; }

/* Role rings: what a port is for, at a glance. */
.pm-port.r-uplink .pm-jack, .pm-port.r-isl .pm-jack { outline: 2px solid #38bdf8; outline-offset: 1px; }
.pm-port.r-ha .pm-jack, .pm-port.r-sync .pm-jack, .pm-port.r-cluster .pm-jack, .pm-port.r-heartbeat .pm-jack { outline: 2px solid #f59e0b; outline-offset: 1px; }
.pm-port.k-mgmt .pm-jack { outline: 2px solid #a78bfa; outline-offset: 1px; }
.pm-ring { width: 10px; height: 10px; border-radius: 2px; border: 2px solid #38bdf8; }
.pm-ring.r-ha { border-color: #f59e0b; } .pm-ring.r-mgmt { border-color: #a78bfa; }
.pm-role { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; background: #eef1f6; color: #4a5875; }
.pm-role.r-uplink, .pm-role.r-isl { background: #e0f2fe; color: #075985; }
.pm-role.r-ha, .pm-role.r-sync, .pm-role.r-cluster, .pm-role.r-heartbeat { background: #fef3c7; color: #92400e; }
.pm-role.r-mgmt { background: #ede9fe; color: #5b21b6; }
.pm-role.r-wan { background: #fee2e2; color: #991b1b; } .pm-role.r-dmz { background: #ffedd5; color: #9a3412; } .pm-role.r-lan { background: #dcfce7; color: #166534; }
.pm-role.r-host, .pm-role.r-storage { background: #fef9c3; color: #854d0e; }

/* Faceplate: modules side by side, each with its caption. */
.pm-modules { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.pm-module-l { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7f8ca3; margin: 0 0 3px 2px; }
.pm-module .pm-bank + .pm-bank { margin-top: 0; }

/* Server rear: one box per slot - LOM, each PCIe card, the BMC, the PSUs. */
.pm-rear { position: relative; padding: 12px 16px 14px; border-radius: 10px; overflow-x: auto;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 6px), linear-gradient(180deg, #2a3242, #1a202c); }
.pm-rear-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-rslot { padding: 6px 8px 8px; border-radius: 6px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(148, 163, 184, .18); }
.pm-rslot.is-power { margin-left: auto; border-color: rgba(34, 197, 94, .25); }
.pm-rslot.is-mgmt { border-color: rgba(167, 139, 250, .35); }
.pm-rslot-l { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa6ba; margin-bottom: 5px; white-space: nowrap; }
.pm-rslot-p { display: flex; gap: 5px; }

/* Storage: one chassis row per controller / node, ports grouped by role. */
.pm-ctrls { display: grid; gap: 8px; }
.pm-ctrl { display: flex; gap: 12px; align-items: stretch; padding: 10px 14px; border-radius: 10px; overflow-x: auto;
    background: linear-gradient(180deg, #2b3445, #1a2130); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.pm-ctrl-name { flex: 0 0 auto; align-self: center; min-width: 92px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #c9d3e3; }
.pm-ctrl-ports { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-pgroup { padding: 5px 7px 7px; border-radius: 6px; background: rgba(0, 0, 0, .25); }
.pm-pgroup-l { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8b97ab; margin-bottom: 4px; white-space: nowrap; }
.pm-pgroup-p { display: flex; gap: 5px; }

/* PDU / UPS: banks of outlets on a strip. */
.pm-strip { display: grid; gap: 6px; padding: 10px 14px; border-radius: 10px; background: linear-gradient(180deg, #232b39, #161b26); overflow-x: auto; }
.pm-sbank { display: flex; align-items: center; gap: 10px; }
.pm-sbank-l { flex: 0 0 96px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa6ba; }
.pm-sbank-p { display: flex; flex-wrap: wrap; gap: 4px; }

/* Logical sections: vNICs, listeners, what this uses. */
.pm-sec { padding: 4px 16px 14px; }
.pm-sec + .pm-sec { border-top: 1px solid var(--dk-line); padding-top: 12px; }
.pm-sec-h { font-size: 12.5px; font-weight: 700; color: var(--dk-ink); margin-bottom: 8px; }
.pm-vnics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pm-vnic { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--dk-line); background: #fff; cursor: pointer; }
.pm-vnic:hover:not(:disabled) { border-color: #93c5fd; box-shadow: 0 4px 12px rgba(20, 40, 80, .08); }
.pm-vnic:disabled { cursor: default; opacity: 1; }
.pm-vnic-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dk-ink); }
.pm-vnic .pm-led { flex: 0 0 auto; }
.pm-vnic.is-connected .pm-led { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.pm-vnic.is-disabled .pm-led { background: #ef4444; } .pm-vnic.is-faulty .pm-led { background: #f59e0b; }
.pm-vnic-type { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 0 5px; }
.pm-vnic-net { font-size: 12px; font-weight: 600; color: #1d4f9f; }
.pm-vnic.is-free .pm-vnic-net { color: #94a3b8; font-weight: 500; font-style: italic; }
.pm-vnic-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--dk-muted); }
.pm-svcs { display: grid; gap: 8px; }
.pm-svc { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--dk-line); background: #fff; border-left: 3px solid #94a3b8; }
.pm-svc.is-connected { border-left-color: #22c55e; }
.pm-svc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.pm-svc-ep { display: inline-block; padding: 1px 7px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; background: #0f172a; color: #e2e8f0; }
.pm-svc-name { font-size: 13px; color: var(--dk-ink); }
.pm-svc-clients { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pm-svc-cl { font-size: 11.5px; font-weight: 700; color: var(--dk-ink-2); }
.pm-client { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 9px; border-radius: 999px; background: #f1f5fb; font-size: 12px; }
.pm-client a { font-weight: 700; }
.pm-client .text-muted { font-size: 10.5px; }
.pm-client-why { font-size: 10.5px; color: #6d3fc4; background: #f1ebfd; border-radius: 999px; padding: 0 6px; }
.pm-client-x { border: 0; background: transparent; color: #94a3b8; font-size: 15px; line-height: 1; padding: 0 4px; cursor: pointer; }
.pm-client-x:hover { color: #dc3545; }
.pm-svc-add { display: flex; gap: 6px; margin-top: 8px; }
.pm-svc-add select { flex: 1 1 45%; }
.pm-svc-add input { flex: 1 1 35%; }
.pm-uses { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-use { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 8px; border: 1px solid var(--dk-line); background: #fff; font-size: 12.5px; color: var(--dk-ink); }
.pm-use:hover { border-color: #93c5fd; text-decoration: none; }

/* Add dialog: templates. */
.pm-add-h { font-size: 12.5px; font-weight: 700; color: var(--dk-ink); margin-bottom: 8px; }
.pm-presets { max-height: 52vh; overflow-y: auto; }
.pm-preset { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin: 0 0 6px; border: 1px solid var(--dk-line); border-radius: 9px; cursor: pointer; font-weight: 400; }
.pm-preset:hover { border-color: #93c5fd; background: #f8fbff; }
.pm-preset input { margin-top: 3px; }
.pm-preset:has(input:checked) { border-color: #3b82f6; background: #eff6ff; }
@media (max-width: 576px) {
    .pm-svc-add { flex-direction: column; }
    .pm-sbank { flex-direction: column; align-items: flex-start; }
}

/* Smart search: the second line under an option. */
.fds-panel .fds-hint { display: block; font-size: 11px; font-weight: 400; color: #7b879f; margin-top: 1px; }

/* ── Screenshots on bug reports: the uploader and the gallery ──────────── */
.shot-drop {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
    border: 1.5px dashed #c3cfe4; border-radius: 10px; background: #f8faff; color: var(--dk-ink-2);
    transition: border-color .15s, background .15s;
}
.shot-drop:hover, .shot-drop:focus, .shot-drop.is-over { border-color: var(--ui-primary); background: var(--ui-primary-wash); outline: none; }
.shot-icon { font-size: 20px; color: var(--ui-primary); }
.shot-copy { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.shot-copy span { color: var(--dk-muted); font-size: 12px; }
.shot-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.shot-list:empty { margin-top: 0; }
.shot-item { position: relative; width: 132px; border: 1px solid var(--dk-line); border-radius: 8px; overflow: hidden; background: #fff; }
.shot-item img { display: block; width: 100%; height: 86px; object-fit: cover; background: #eef2f8; }
.shot-name { display: block; padding: 3px 6px; font-size: 11px; color: var(--dk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-remove {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%;
    background: rgba(17, 24, 39, .72); color: #fff; font-size: 15px; line-height: 20px; cursor: pointer;
}
.shot-note { width: 100%; font-size: 12px; color: #b0730b; }
.shot-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.shot-gallery a { display: block; border: 1px solid var(--dk-line); border-radius: 8px; overflow: hidden; background: #fff; color: var(--dk-ink-2); text-decoration: none; }
.shot-gallery a:hover { border-color: var(--ui-primary); }
.shot-gallery img { display: block; width: 100%; height: 100px; object-fit: cover; background: #eef2f8; }
.shot-gallery span { display: block; padding: 4px 7px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A listed record's screenshots: a camera and a count. */
.shot-count { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; border-radius: 9px;
    background: var(--ui-primary-wash); color: var(--ui-primary-ink); font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; vertical-align: middle; }
a.shot-count:hover { text-decoration: none; background: var(--ui-primary); color: #fff; }
.shot-count i { font-size: 10px; }
/* An image among a record's attachments shows as a small thumbnail. */
.att-thumb { display: inline-block; width: 40px; height: 30px; margin-right: 6px; border: 1px solid var(--dk-line); border-radius: 4px; overflow: hidden; vertical-align: middle; background: #eef2f8; flex-shrink: 0; }
.att-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.att-row { min-width: 0; }
.att-row a { word-break: break-word; }