.dashboard-card {
    border-radius: 12px;
    transition: 0.2s;
}

    .dashboard-card:hover {
        transform: translateY(-3px);
    }

    /* See site.css: disable the hover-lift while a Bootstrap modal is
       open, so dashboard tiles sitting behind the modal backdrop don't
       keep re-triggering this transform/transition as the mouse moves
       anywhere on the page. */
    body.modal-open .dashboard-card:hover {
        transform: none;
    }

.dashboard-number {
    font-size: 42px;
    font-weight: bold;
}

.status-online {
    color: green;
    font-weight: bold;
}

.status-warning {
    color: orange;
    font-weight: bold;
}


/* ==========================================================
   Dashboard v2 - header, stat tiles, pipeline, status list
   ========================================================== */

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.dash-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Alert banner */

.alert-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.45);
    color: #fca5a5;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.95rem;
}

.alert-banner-icon {
    font-size: 1.1rem;
}

/* The banner is a link to Alerts/Index - explicit overrides so the
   browser's own anchor defaults (blue text, underline) never show
   through instead of the red-alert styling above, plus a small hover
   state so it reads as clickable. */
a.alert-banner,
a.alert-banner:hover,
a.alert-banner:visited {
    color: #fca5a5;
    text-decoration: none;
}

    a.alert-banner:hover {
        background: rgba(220, 38, 38, 0.18);
        border-color: rgba(220, 38, 38, 0.65);
    }

/* Stat tiles */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
}

.stat-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: 0.15s ease;
}

    .stat-tile:hover {
        border-color: var(--border-strong);
        transform: translateY(-2px);
        color: inherit;
    }

.stat-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--tint-accent);
    font-size: 20px;
}

.stat-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.1;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Ticket pipeline */

.pipeline-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pipeline-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 150px;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: 0.15s ease;
}

    .pipeline-item:hover {
        border-color: var(--border-strong);
        color: var(--hover-text);
    }

.pipeline-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
}

.dot-danger { background: #ef4444; }
.dot-primary { background: #38bdf8; }
.dot-warning { background: #f59e0b; }
.dot-success { background: #22c55e; }

.pipeline-label {
    font-size: 0.85rem;
    color: var(--text-primary);
    flex: 1;
}

.pipeline-count {
    font-weight: 700;
    color: var(--text-heading);
}

/* Status list (Monitoring & Status card) */

.status-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .status-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 0;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.92rem;
        color: var(--text-primary);
    }

    .status-list li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }


/* ==========================================================
   Fix: prevent long unbroken table content (e.g. OS strings)
   from forcing the whole page wider than the viewport.
   ========================================================== */

.table-fixed {
    table-layout: fixed;
    width: 100%;
}

    .table-fixed td,
    .table-fixed th {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.table-responsive {
    max-width: 100%;
}

/* Slightly brighter status-list values for readability */
.status-list li span:first-child {
    color: var(--text-heading);
}


/* Clickable values inside the status list (Devices Online/Offline) */
.status-list .status-link {
    text-decoration: none;
    cursor: pointer;
}

    .status-list .status-link:hover {
        text-decoration: underline;
    }


/* ==========================================================
   Customisable dashboard (grid, edit mode, search widgets)
   ========================================================== */

.dash-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.dash-widget {
    grid-column: span var(--w, 6);
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.dash-widget-body {
    flex: 1 1 auto;
    min-height: 0;
}

.dash-widget-body > .card,
.dash-widget-body > .stat-tile,
.dash-widget-body > .search-widget,
.dash-widget-body > .alert-banner {
    height: 100%;
}

/* A fixed height clips the content and scrolls instead of overflowing. */
.dash-widget:not([data-h="0"]) .dash-widget-body {
    overflow: auto;
}

@media (max-width: 991.98px) {
    .dash-widget { grid-column: span 12; }
    .dash-widget.dw-narrow { grid-column: span 6; }
    .dash-resize { display: none; }
}

@media (max-width: 575.98px) {
    .dash-widget.dw-narrow { grid-column: span 12; }
}

.dash-empty {
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
}

    .dash-empty[hidden] { display: none; }

.alert-banner-idle {
    opacity: 0.55;
    border-style: dashed;
}

.dash-viewing-note {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 10px;
    padding: 10px 16px;
}

    .dash-viewing-note form { margin: 0; }


/* Layout switcher menu */

.dash-layout-menu {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    min-width: 270px;
}

    .dash-layout-menu .dropdown-header { color: var(--text-muted); }
    .dash-layout-menu .dropdown-divider { border-color: var(--border-color); }

    .dash-layout-menu .dropdown-item {
        color: var(--text-primary);
        width: 100%;
        text-align: left;
        background: none;
    }

        .dash-layout-menu .dropdown-item:hover { background: var(--hover-surface); color: var(--hover-text); }
        .dash-layout-menu .dropdown-item.active { background: #0284c7; color: #fff; }

.dash-layout-row { display: flex; align-items: center; }
.dash-layout-row form { margin: 0; }
.dash-layout-main { flex: 1 1 auto; }

.dash-layout-act {
    background: none;
    border: 0;
    color: var(--text-muted);
    padding: 6px 10px;
    text-decoration: none;
    font-size: 0.85rem;
}

    .dash-layout-act:hover { color: var(--accent-text); }


/* Edit mode */

.dash-editbar {
    position: sticky;
    top: 8px;
    z-index: 50;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-hover);
}

.dash-editbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.dash-edit-field { flex: 1 1 220px; max-width: 340px; }
.dash-share { flex: 1 1 260px; }
.dash-share .form-text { color: var(--text-muted); }
.dash-edit-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }

.dash-widget-count { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.dash-widget-count.is-full { color: #fbbf24; font-weight: 600; }

.dash-hint { margin: 0 0 20px; font-size: 0.82rem; color: var(--text-muted); }
.dash-grip-sample { color: var(--accent-text); font-size: 1rem; }

.dash-status { min-height: 1.2em; margin-top: 4px; font-size: 0.85rem; }
.dash-status.is-error { color: #fca5a5; }
.dash-status.is-ok { color: #86efac; }

.dash-editing .dash-widget {
    outline: 1px dashed #4b5563;
    outline-offset: 5px;
    border-radius: 12px;
}

.dash-editing .dash-widget-body {
    pointer-events: none;
    user-select: none;
}

.dash-editing .card:hover,
.dash-editing .stat-tile:hover,
.dash-editing .search-widget:hover {
    transform: none;
}

/* The dashboard owner's own title for a widget (LayoutItem.Label) -
   shown above it whether or not the dashboard is being edited, unlike
   .dash-widget-name below which only ever appears in the edit-mode bar.
   Used to default to a small/muted/uppercase "quiet caption" look (e.g.
   "By status" vs "By priority" on two similar charts), with the pencil
   button's font/size picker needed to make it read as a real title -
   but a renamed PRESET widget (e.g. "Tickets" -> "Global Tickets", which
   has no other way to change its own built-in name - see IsPreset in
   _Widget.cshtml) is a real title from the moment it's set, not a quiet
   caption, so that's the default now: matched to site.css's own real
   <h5> (Bootstrap's 1.25rem plus site.css's global "h1..h6{ font-weight:
   700; letter-spacing: -0.015em }"), the same tag "Ticket Pipeline" is
   set in, rather than guessed at separately here. labelFontStack/
   labelSize from the picker still apply as inline style on top of this,
   for whoever wants something different again. */
.dash-widget-label {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--text-heading);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Once a widget has its own custom title above it (.dash-widget-label,
   just above), a search widget's own built-in title/summary underneath
   is a second, redundant one - .sw-title (the "Tickets" in "Tickets ·
   global tickets"), .sw-summary (count-mode's own EntityLabel/Summary
   line) and .sw-header/.sw-meta (list- and chart-mode's equivalent -
   see _Search.cshtml) all get hidden rather than shown twice. Scoped to
   :has(> .dash-widget-label) so this only touches a widget that
   actually has a label set - every other widget's own title is
   untouched. */
.dash-widget:has(> .dash-widget-label) .sw-title,
.dash-widget:has(> .dash-widget-label) .sw-summary,
.dash-widget:has(> .dash-widget-label) .sw-header,
.dash-widget:has(> .dash-widget-label) .sw-meta {
    display: none;
}

    .dash-widget-label.is-editing {
        overflow: visible;
    }

    /* Holds the title text box plus its font/size pickers side by side
       while editing (see dashboard-editor.js's startLabelEdit). */
    .dash-widget-label-row {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .dash-widget-label-input {
        flex: 1 1 140px;
        min-width: 100px;
        background: var(--bg-surface-alt);
        border: 1px solid var(--accent-text);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: normal;
        padding: 3px 8px;
    }

    .dash-widget-label-font,
    .dash-widget-label-size {
        flex: 0 0 auto;
        background: var(--bg-surface-alt);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: normal;
        padding: 3px 6px;
    }

    .dash-widget-label-font {
        max-width: 100px;
    }

    .dash-widget-label-size {
        width: 56px;
    }

    .dash-widget-label-input:focus,
    .dash-widget-label-font:focus,
    .dash-widget-label-size:focus {
        outline: none;
        border-color: var(--accent-text);
        box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
    }

.dash-widget-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 2px 6px;
    margin-bottom: 8px;
    /* The whole bar is the drag handle (not just the grip icon), so it
       needs the same grab cursor and touch-action as .dash-grip used to
       have on its own. The buttons inside override this back to a
       normal pointer below. */
    cursor: grab;
    touch-action: none;
}

    .dash-widget.is-dragging .dash-widget-bar { cursor: grabbing; }

.dash-widget-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-grip {
    cursor: grab;
    touch-action: none;
    padding: 2px 8px;
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.2;
    user-select: none;
    border-radius: 6px;
}

    .dash-grip:hover,
    .dash-grip:focus-visible { color: var(--accent-text); outline: 2px solid var(--accent-text); outline-offset: 0; }

.dash-bar-btn {
    background: none;
    border: 0;
    color: var(--text-muted);
    padding: 0 6px;
    font-size: 1.1rem;
    line-height: 1.4;
    cursor: pointer;
    touch-action: auto;
}

    .dash-bar-btn:hover { color: var(--accent-text); }
    .dash-bar-btn[data-act="remove"]:hover { color: #f87171; }

.dash-widget.is-dragging { opacity: 0.45; outline-color: #38bdf8; }
.dash-widget.is-resizing { outline-color: #38bdf8; }

.dash-ghost {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    background: #0284c7;
    color: #fff;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.dash-resize {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 20px;
    height: 20px;
    cursor: nwse-resize;
    touch-action: none;
    background: linear-gradient(135deg, transparent 50%, #38bdf8 50%);
    border-radius: 0 0 10px 0;
}

.dash-size-badge {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    background: #0284c7;
    color: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.75rem;
    pointer-events: none;
}


/* Pop-ups (add widget / count something) */

.dash-modal {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .dash-modal .modal-header,
    .dash-modal .modal-footer { border-color: var(--border-color); }

    .dash-modal h5, .dash-modal h6 { color: var(--text-heading); }

.dash-editbar .form-control,
.dash-modal .form-control,
.dash-modal .form-select,
.dash-editbar .form-select {
    background-color: var(--bg-surface-alt);
    border-color: var(--border-color);
    color: var(--text-primary);
}

    .dash-editbar .form-control::placeholder,
    .dash-modal .form-control::placeholder { color: var(--text-muted); }

.dash-modal .form-select,
.dash-editbar .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.dash-add-search {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--bg-surface-alt);
    border: 1px dashed var(--accent-text);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 12px 14px;
}

    .dash-add-search:hover { background: var(--hover-surface); }
    .dash-add-search span { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

.dash-add-item {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

    .dash-add-item:last-child { border-bottom: 0; }
    .dash-add-item small { display: block; color: var(--text-muted); }

/* One of these wraps each group of widgets in the "Add a widget" list
   (Overview/Tickets/Assets/...) - a clickable header plus its (closed
   by default) items, like a small accordion, so a long catalog doesn't
   dump every widget on screen at once. */
.dash-add-section { border-bottom: 1px solid var(--border-color); }

    .dash-add-section:last-child { border-bottom: 0; }

.dash-add-category {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: 0;
    padding: 10px 2px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

    .dash-add-category:hover,
    .dash-add-category:focus-visible { color: var(--accent-text); }

.dash-add-arrow {
    display: inline-block;
    width: 0.9em;
    color: var(--text-muted);
}

.dash-add-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
}

.dash-add-category-items { padding: 0 0 6px; }


/* Colour swatches */

.sw-blue { --sw: #38bdf8; }
.sw-green { --sw: #22c55e; }
.sw-amber { --sw: #f59e0b; }
.sw-red { --sw: #ef4444; }
.sw-purple { --sw: #a78bfa; }
.sw-gray { --sw: #9ca3af; }

.sw-swatches { display: flex; gap: 12px; flex-wrap: wrap; }

.sw-swatch { position: relative; cursor: pointer; margin: 0; }

    .sw-swatch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

    .sw-swatch span {
        display: block;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--sw);
        border: 2px solid transparent;
    }

    .sw-swatch input:checked + span { border-color: #fff; box-shadow: 0 0 0 2px var(--sw); }
    .sw-swatch input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }


/* Search widget: a number from a saved search, shown as "matching of total" */

.search-widget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--sw, #38bdf8);
    border-radius: 12px;
    padding: 16px 18px;
    min-height: 100px;
    text-decoration: none;
    color: inherit;
    transition: 0.15s ease;
}

    .search-widget:hover { border-color: var(--border-strong); border-left-color: var(--sw, #38bdf8); color: inherit; transform: translateY(-2px); }

.sw-title,
.sw-summary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sw-title { font-size: 0.85rem; color: var(--text-muted); }
.sw-summary { font-size: 0.75rem; color: var(--text-muted); }
.sw-numbers { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sw-matching { font-size: 2.2rem; font-weight: 700; color: var(--sw, #38bdf8); line-height: 1.1; }
.sw-of { font-size: 0.95rem; color: var(--text-muted); }
.sw-error { color: #fca5a5; font-size: 0.85rem; }

.sw-preview {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
}

.sw-preview-numbers { font-size: 2rem; font-weight: 700; color: var(--text-heading); line-height: 1.1; }
.sw-preview-of { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
.sw-preview-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }


/* ==========================================================
   Change management
   ========================================================== */

.chg-card:hover { transform: none; }

.chg-page .validation-summary-valid { display: none; }

/* dark form controls */
.chg-page .form-control,
.chg-page .form-select {
    background-color: #111827;
    border-color: #374151;
    color: #e5e7eb;
}

    .chg-page .form-control:focus,
    .chg-page .form-select:focus {
        background-color: #111827;
        border-color: #38bdf8;
        color: #e5e7eb;
        box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .2);
    }

    .chg-page .form-control::placeholder { color: #6b7280; }

.chg-page .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.chg-page input[type=datetime-local] { color-scheme: dark; }
.chg-page .form-text { color: #9ca3af; }
.chg-page .form-label { color: #d1d5db; }

.chg-page .form-check-input {
    background-color: #111827;
    border-color: #6b7280;
}

    .chg-page .form-check-input:checked {
        background-color: #0284c7;
        border-color: #0284c7;
    }

/* tabs */
.chg-tabs .nav-link {
    color: #9ca3af;
    border: 1px solid transparent;
}

    .chg-tabs .nav-link:hover {
        color: #e5e7eb;
        background: #1f2937;
    }

    .chg-tabs .nav-link.active {
        background: #0284c7;
        color: #fff;
    }

.chg-count {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0 .4rem;
    margin-left: .25rem;
    border-radius: 999px;
    background: #374151;
    color: #e5e7eb;
    font-size: .75rem;
    text-align: center;
}

.chg-tabs .nav-link.active .chg-count { background: rgba(255, 255, 255, .25); }

.chg-count-hot {
    background: #f59e0b !important;
    color: #111827 !important;
    font-weight: 700;
}

/* list */
.chg-number {
    font-weight: 700;
    color: #38bdf8;
    text-decoration: none;
    margin-right: .5rem;
}

.chg-title {
    color: #e5e7eb;
    text-decoration: none;
}

    .chg-number:hover,
    .chg-title:hover { text-decoration: underline; }

.chg-card .table tbody tr.chg-row-hot td { background-color: rgba(245, 158, 11, .10) !important; }

.chg-empty {
    text-align: center;
    padding: 36px 12px;
}

.chg-meter {
    height: 8px;
    background: #374151;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    margin-bottom: 4px;
}

.chg-meter-lg {
    height: 12px;
    margin-bottom: 8px;
}

.chg-meter-yes { background: #22c55e; display: block; }
.chg-meter-no { background: #ef4444; display: block; }

/* choosing approvers */
.chg-picker-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ca3af;
    font-weight: 700;
    margin-bottom: 6px;
}

.chg-picklist {
    max-height: 240px;
    overflow: auto;
}

.chg-pick {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .45rem .6rem;
    background: #111827;
    border: 1px solid #374151;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
}

    .chg-pick:hover { border-color: #4b5563; }

    .chg-pick:has(input:checked) {
        border-color: #38bdf8;
        background: rgba(56, 189, 248, .08);
    }

.chg-rule {
    font-size: .85rem;
    color: #38bdf8;
}

.chg-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 40px;
}

/* details page */
.chg-number-lg {
    color: #38bdf8;
    font-weight: 700;
    letter-spacing: .04em;
}

.chg-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
}

.chg-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: .9rem;
    margin-right: 6px;
}

    .chg-step + .chg-step::before {
        content: "";
        width: 28px;
        height: 2px;
        background: #374151;
        margin-right: 6px;
    }

.chg-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #1f2937;
    border: 2px solid #374151;
    font-size: .75rem;
    font-weight: 700;
}

.chg-step.done { color: #9ca3af; }
.chg-step.done .chg-dot { background: #166534; border-color: #22c55e; color: #fff; }
.chg-step.current { color: #f9fafb; font-weight: 700; }
.chg-step.current .chg-dot { background: #0284c7; border-color: #38bdf8; color: #fff; }
.chg-step.bad { color: #fca5a5; font-weight: 700; }
.chg-step.bad .chg-dot { background: #7f1d1d; border-color: #ef4444; color: #fff; }

.chg-card.chg-vote {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, .3);
}

.chg-approver {
    padding: 10px 12px;
    background: #111827;
    border: 1px solid #374151;
    border-left: 4px solid #6b7280;
    border-radius: 8px;
    margin-bottom: 8px;
}

    .chg-approver.is-yes { border-left-color: #22c55e; }
    .chg-approver.is-no { border-left-color: #ef4444; }

.chg-quote {
    margin-top: 6px;
    padding: 6px 10px;
    background: #1f2937;
    border-left: 3px solid #4b5563;
    border-radius: 4px;
    font-size: .88rem;
    white-space: pre-wrap;
    color: #d1d5db;
}

.chg-section { margin-bottom: 18px; }

    .chg-section h6 {
        color: #9ca3af;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 6px;
    }

.chg-text {
    white-space: pre-wrap;
    line-height: 1.6;
}

.chg-timeline li {
    display: flex;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #2d3748;
}

    .chg-timeline li:last-child { border-bottom: 0; }

.chg-time {
    flex: 0 0 130px;
    color: #9ca3af;
    font-size: .8rem;
}

.chg-facts dt {
    color: #9ca3af;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 10px;
}

    .chg-facts dt:first-child { margin-top: 0; }

.chg-facts dd { margin: 0; }

.chg-more > summary {
    cursor: pointer;
    color: #38bdf8;
    font-size: .9rem;
    margin-bottom: 4px;
}

@media (max-width: 576px) {
    .chg-timeline li { flex-direction: column; gap: 2px; }
    .chg-time { flex: none; }
}

/* alerts that suit the dark theme */
.chg-page .alert-success {
    background: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .45);
    color: #86efac;
}

.chg-page .alert-danger {
    background: rgba(220, 38, 38, .12);
    border-color: rgba(220, 38, 38, .45);
    color: #fca5a5;
}

.chg-page .alert-secondary {
    background: rgba(156, 163, 175, .12);
    border-color: rgba(156, 163, 175, .35);
    color: #d1d5db;
}


/* ==========================================================
   Change calendar
   ========================================================== */

.chg-page .form-control[readonly] {
    background-color: #111827;
    color: #9ca3af;
}

.chg-cal-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.chg-cal-title {
    margin: 0;
    font-size: 1.35rem;
}

.chg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: .78rem;
    color: #9ca3af;
}

.chg-ev-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 5px;
}

.chg-cal {
    border: 1px solid #374151;
    border-radius: 12px;
    overflow: hidden;
    background: #1f2937;
}

.chg-cal-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.chg-cal-head {
    background: #111827;
    color: #9ca3af;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

    .chg-cal-head > div { padding: 8px 10px; }

.chg-cal-day {
    min-height: 112px;
    padding: 6px;
    border-top: 1px solid #374151;
    border-left: 1px solid #374151;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.chg-cal-week > .chg-cal-day:first-child { border-left: 0; }

.chg-cal-day.is-out { background: #18202e; }
.chg-cal-day.is-out .chg-cal-num { color: #4b5563; }
.chg-cal-day.is-today { box-shadow: inset 0 0 0 2px #38bdf8; }

.chg-cal-num {
    font-size: .8rem;
    color: #9ca3af;
    font-weight: 600;
    text-align: right;
}

.chg-cal-day.is-today .chg-cal-num { color: #38bdf8; }

.chg-ev {
    display: block;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: .75rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    text-decoration: none;
    border-left: 3px solid rgba(255, 255, 255, .55);
}

    .chg-ev:hover {
        color: #fff;
        filter: brightness(1.2);
    }

.chg-ev-time {
    font-weight: 700;
    margin-right: 4px;
    opacity: .9;
}

.chg-ev-draft { background: #4b5563; }
.chg-ev-submitted { background: #0e7490; }
.chg-ev-inapproval { background: #b45309; }
.chg-ev-approved { background: #15803d; }
.chg-ev-implementing { background: #1d4ed8; }
.chg-ev-completed { background: #166534; }
.chg-ev-failed { background: #b91c1c; }
.chg-ev-rejected { background: #7f1d1d; }

a.chg-ev.chg-ev-draft { border-left-style: dashed; }
a.chg-ev.chg-ev-completed { opacity: .75; }
a.chg-ev.chg-ev-rejected { text-decoration: line-through; }

.chg-agenda li {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #2d3748;
}

    .chg-agenda li:last-child { border-bottom: 0; }

.chg-agenda-when {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    font-size: .9rem;
}

@media (max-width: 576px) {
    .chg-agenda li { flex-direction: column; gap: 2px; }
    .chg-agenda-when { flex: none; }
}

/* ==========================================================
   Backstage (live remote access)
   ========================================================== */

.rbs-page .form-control,
.rbs-page .form-select {
    background-color: #111827;
    border-color: #374151;
    color: #e5e7eb;
}

    .rbs-page .form-control:focus,
    .rbs-page .form-select:focus {
        background-color: #111827;
        border-color: #38bdf8;
        color: #e5e7eb;
        box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .2);
    }

    .rbs-page .form-control::placeholder { color: #6b7280; }

.rbs-page .form-text { color: #9ca3af; }
.rbs-page .form-label { color: #d1d5db; }

.rbs-tabs .nav-link {
    color: #9ca3af;
    border-radius: 999px;
    padding: 6px 16px;
}

    .rbs-tabs .nav-link:hover { color: #e5e7eb; }
    .rbs-tabs .nav-link.active { background: #0284c7; color: #fff; }

.rbs-term {
    background: #0b0f17;
    border: 1px solid #1f2937;
    border-radius: 10px;
    color: #d1d5db;
    font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
    font-size: .85rem;
    height: 65vh;
    min-height: 420px;
    max-height: 900px;
    overflow-y: auto;
    padding: 12px;
    white-space: pre-wrap;
    word-break: break-all;
}

.rbs-line-error { color: #fca5a5; }
.rbs-line-system { color: #38bdf8; }

.rbs-input-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.rbs-input-row .form-control { font-family: 'Cascadia Code', Consolas, 'Courier New', monospace; }

.rbs-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.rbs-table-wrap {
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid #1f2937;
    border-radius: 10px;
}

    .rbs-table-wrap table { margin-bottom: 0; }

    .rbs-table-wrap thead th {
        position: sticky;
        top: 0;
        background: #111827;
        color: #9ca3af;
        border-bottom: 1px solid #1f2937;
    }

    .rbs-table-wrap tbody tr:hover { background: rgba(56, 189, 248, .06); }

.rbs-dir-row { cursor: pointer; }
.rbs-dir-row .rbs-name::before { content: "📁 "; }
.rbs-file-row .rbs-name::before { content: "📄 "; }

.rbs-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.rbs-status-on { background: #22c55e; }
.rbs-status-off { background: #ef4444; }
.rbs-status-pending { background: #f59e0b; }

.rbs-muted { color: #9ca3af; }
.rbs-panel { display: none; }
.rbs-panel.active { display: block; }

.rbs-audit-detail {
    background: #0b0f17;
    border: 1px solid #1f2937;
    border-radius: 8px;
    padding: 8px 10px;
    font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
    font-size: .8rem;
    white-space: pre-wrap;
    word-break: break-all;
    color: #d1d5db;
    max-height: 200px;
    overflow-y: auto;
}

.rbs-empty {
    color: #9ca3af;
    padding: 24px;
    text-align: center;
}

/* Fleet Command - the device picker and its per-device output panels.
   Reuses .rbs-term/.rbs-status-dot/.rbs-toolbar/.rbs-input-row as-is
   (same shell channel as Backstage's Shell tab); these are just the
   bits specific to ticking several devices at once. */
.rfc-device-list {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rfc-device-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0;
}

    .rfc-device-row:hover {
        background: rgba(56, 189, 248, .08);
    }

.rfc-device-name {
    font-size: .9rem;
}

.rfc-device-customer {
    font-size: .78rem;
}

.rfc-term {
    height: 220px;
    min-height: 0;
}

.rbs-screen-wrap {
    position: relative;
    background: #000;
    border: 1px solid #1f2937;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.rbs-screen-canvas {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    cursor: default;
}

    .rbs-screen-canvas:focus { outline: 2px solid #38bdf8; outline-offset: -2px; }

.rbs-screen-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    padding: 24px;
    text-align: center;
}

/* Screen Control / Private Desktop pop-out window (ScreenWindow.cshtml) -
   a standalone page, not wrapped in the main app's layout, so it needs
   its own small amount of page-level spacing; everything else reuses
   the .rbs-* classes above unchanged. */
.rsw-root {
    padding: 16px;
}

.rsw-spacer {
    flex: 1 1 auto;
}

/* Screen Control: drag-and-drop file sharing + two-way chat (both
   screen mode only - see ScreenWindow.cshtml's razor guards). */
.rsw-drop-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: rgba(56, 189, 248, .12);
    border: 2px dashed #38bdf8;
    border-radius: 8px;
    color: #e0f2fe;
    font-weight: 500;
    pointer-events: none;
}

.rbs-screen-wrap.rsw-drag-over .rsw-drop-overlay { display: flex; }

.rsw-file-status {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(11, 15, 23, .9);
    border: 1px solid #1f2937;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: .8rem;
    color: #d1d5db;
}

.rsw-chat-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: .65rem;
}

.rsw-chat-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 300px;
    max-height: 360px;
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 20;
}

.rsw-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #1f2937;
    color: #e5e7eb;
    font-size: .85rem;
    font-weight: 600;
}

.rsw-chat-log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
    font-size: .82rem;
    color: #d1d5db;
    min-height: 120px;
    max-height: 240px;
}

.rsw-chat-msg {
    margin-bottom: 8px;
    line-height: 1.35;
}

    .rsw-chat-msg .rsw-chat-who {
        display: block;
        font-size: .7rem;
        color: #9ca3af;
    }

.rsw-chat-msg.rsw-chat-out { text-align: right; }
.rsw-chat-msg.rsw-chat-out .rsw-chat-who { color: #38bdf8; }

.rsw-chat-input-row {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid #1f2937;
}


/* ---- Site reorg: quick-create sidebar, nav search box, breadcrumbs ---- */

.page-wrapper.d-flex {
    align-items: stretch;
}

.poseidon-sidebar {
    flex: 0 0 210px;
    width: 210px;
    background-color: #1f2937;
    border-right: 1px solid #374151;
    padding: 20px 14px;
    min-height: calc(100vh - 56px);
}

.poseidon-sidebar-header {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
    margin-bottom: 12px;
}

.poseidon-sidebar-header-sub {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #374151;
}

.poseidon-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    color: #e5e7eb;
    text-decoration: none;
    font-size: .92rem;
    transition: .15s ease;
}

    .poseidon-sidebar-link:hover {
        background: #374151;
        color: #fff;
    }

    /* "You are here" (set in _Layout.cshtml via SidebarActive) - same
       treatment as :hover above, just persistent rather than momentary,
       plus a left accent bar so it still reads clearly even if the
       mouse happens to be hovering a different link right above/below. */
    .poseidon-sidebar-link.active {
        background: #374151;
        color: #fff;
        box-shadow: inset 3px 0 0 #38bdf8;
    }

.poseidon-sidebar-icon {
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
}

.poseidon-search-input {
    min-width: 220px;
    background-color: #111827;
    border: 1px solid #374151;
    color: #e5e7eb;
}

    .poseidon-search-input::placeholder {
        color: #6b7280;
    }

    .poseidon-search-input:focus {
        background-color: #111827;
        border-color: #38bdf8;
        color: #e5e7eb;
        box-shadow: 0 0 0 .15rem rgba(56, 189, 248, .25);
    }

.poseidon-breadcrumb .breadcrumb-item a {
    color: var(--accent-text);
    text-decoration: none;
}

    .poseidon-breadcrumb .breadcrumb-item a:hover {
        text-decoration: underline;
    }

.poseidon-breadcrumb .breadcrumb-item.active {
    color: var(--text-muted);
}

.poseidon-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--border-strong);
}

@media (max-width: 991.98px) {

    .page-wrapper.d-flex {
        flex-direction: column;
    }

    .poseidon-sidebar {
        width: 100%;
        min-height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid #374151;
    }

    .poseidon-sidebar-header {
        width: 100%;
        margin-bottom: 4px;
    }

    .poseidon-sidebar-link {
        margin-bottom: 0;
    }

}


/* ==========================================================
   Light theme - a few remaining fixed colors above were chosen
   to read well as light text on this app's original dark
   surfaces (pale red/green/amber, bright cyan) and don't carry
   over to a white one - rather than touch their dark-theme
   values (zero visual change there, same principle as the rest
   of this stylesheet), each gets a small, scoped correction
   here for :root[data-theme="light"] only.
   ========================================================== */

:root[data-theme="light"] .alert-banner,
:root[data-theme="light"] a.alert-banner,
:root[data-theme="light"] a.alert-banner:hover,
:root[data-theme="light"] a.alert-banner:visited {
    color: #b91c1c;
}

:root[data-theme="light"] .dash-widget-count.is-full {
    color: #b45309;
}

:root[data-theme="light"] .dash-status.is-error {
    color: #dc2626;
}

:root[data-theme="light"] .dash-status.is-ok {
    color: #16a34a;
}

:root[data-theme="light"] .dash-bar-btn[data-act="remove"]:hover {
    color: #dc2626;
}

:root[data-theme="light"] .sw-error {
    color: #b91c1c;
}


/* ==========================================================
   Light theme - real background colour on the widgets
   ----------------------------------------------------------
   The neutral-token pass above (same --bg-surface/--bg-surface-alt
   every other card uses) fixed the widgets that were stuck in dark
   colors, but left every one of them plain white/near-white - visually
   flat, and nothing told two different stat tiles or two pipeline
   stages apart. Each --sw-* swatch below is the tinted-background
   counterpart of the existing --sw custom property (.sw-blue etc.
   above, already used for a search widget's accent border/number) -
   dark theme already looks the way the tenant wants, so these only
   apply in light theme, and only set background/border, never text
   color (the token-based text colors above already read fine over a
   light tint of the same hue). */
:root[data-theme="light"] .sw-blue   { --sw-tint: rgba(2, 132, 199, .10); --sw-tint-border: rgba(2, 132, 199, .25); }
:root[data-theme="light"] .sw-green  { --sw-tint: rgba(22, 163, 74, .10); --sw-tint-border: rgba(22, 163, 74, .25); }
:root[data-theme="light"] .sw-amber  { --sw-tint: rgba(217, 119, 6, .10); --sw-tint-border: rgba(217, 119, 6, .25); }
:root[data-theme="light"] .sw-red    { --sw-tint: rgba(220, 38, 38, .10); --sw-tint-border: rgba(220, 38, 38, .25); }
:root[data-theme="light"] .sw-purple { --sw-tint: rgba(124, 58, 237, .10); --sw-tint-border: rgba(124, 58, 237, .25); }
:root[data-theme="light"] .sw-gray   { --sw-tint: rgba(100, 116, 139, .10); --sw-tint-border: rgba(100, 116, 139, .25); }

/* Stat tiles (Sites/Tickets/Assets/Customers/Changes) - each one
   carries its own sw-* class now (see _Widget.cshtml/_Stat.cshtml), so
   this gives every tile its own tinted card instead of one flat white
   rectangle; the icon badge goes crisp white so it still reads as a
   badge sitting on top of the tint rather than disappearing into it. */
:root[data-theme="light"] .stat-tile {
    background: var(--sw-tint, var(--bg-surface));
    border-color: var(--sw-tint-border, var(--border-color));
}
:root[data-theme="light"] .stat-icon {
    background: var(--bg-surface);
}

/* A custom search widget (count mode) - same idea, using whichever
   color was picked for it when it was created/edited. */
:root[data-theme="light"] .search-widget {
    background: var(--sw-tint, var(--bg-surface));
    border-color: var(--sw-tint-border, var(--border-color));
}

/* Ticket Pipeline - each stage already carries a status dot
   (dot-danger/-primary/-warning/-success); :has() lets the stage's own
   tile pick up that same color as a tint without touching the markup. */
:root[data-theme="light"] .pipeline-item:has(.dot-danger) {
    background: rgba(220, 38, 38, .10);
    border-color: rgba(220, 38, 38, .25);
}
:root[data-theme="light"] .pipeline-item:has(.dot-primary) {
    background: rgba(2, 132, 199, .10);
    border-color: rgba(2, 132, 199, .25);
}
:root[data-theme="light"] .pipeline-item:has(.dot-warning) {
    background: rgba(217, 119, 6, .10);
    border-color: rgba(217, 119, 6, .25);
}
:root[data-theme="light"] .pipeline-item:has(.dot-success) {
    background: rgba(22, 163, 74, .10);
    border-color: rgba(22, 163, 74, .25);
}