/*
 * XP theme (UI v2): design tokens, layout shell and components. Every redesigned page uses these; pages do not invent colours.
 *
 * Tokens are CSS variables named --xp-*.  Light is the default theme; dark is <html data-theme="dark"> (the header toggle, see xp-ui.js).
 * A client's accent colour is one value, --xp-accent (set inline by the layout shell from the client's settings); the gradient, tints and
 * sidebar are derived from it.
 *
 * Sections:  1 tokens  2 base  3 legacy components (old pages inside the new shell)  4 layout shell  5 components  6 print
 */

/* ------------------------------------------------------------------ 1. tokens */
:root {
    --xp-accent: #5048e5;
    /* fallbacks for browsers without color-mix (the indigo defaults) */
    --xp-accent-2: #8b5cf6;
    --xp-accent-tint: rgba(80, 72, 229, .12);
    --xp-accent-ink: #4038c4;
    --xp-side-top: #1d1856;
    --xp-side-bottom: #110e35;

    --xp-bg: #f4f5fb;
    --xp-surface: #ffffff;
    --xp-surface-2: #f8f9fd;
    --xp-border: #e3e5f1;
    --xp-border-strong: #c9ccdf;
    --xp-text: #1f2140;
    --xp-text-2: #646888;
    --xp-text-3: #8f93b0;
    --xp-head-bg: #2c2f55;            /* table header row */
    --xp-head-text: #ffffff;
    --xp-shadow: 0 1px 2px rgba(31, 33, 64, .05), 0 8px 24px rgba(31, 33, 64, .07);
    --xp-shadow-lg: 0 18px 48px rgba(31, 33, 64, .18);

    /* status: running / stopped / idle / info, each with a tint and an ink (text on the tint) */
    --xp-running: #16a37f;
    --xp-running-tint: rgba(22, 163, 127, .13);
    --xp-running-ink: #0b7a5d;
    --xp-stopped: #e5484d;
    --xp-stopped-tint: rgba(229, 72, 77, .12);
    --xp-stopped-ink: #b8262b;
    --xp-idle: #e8a50f;
    --xp-idle-tint: rgba(232, 165, 15, .16);
    --xp-idle-ink: #8f6200;
    --xp-info: #2f8fe8;
    --xp-info-tint: rgba(47, 143, 232, .13);
    --xp-info-ink: #1b64ac;

    /* chart colours (categorical) */
    --xp-c1: var(--xp-accent);
    --xp-c2: #14b8a6;
    --xp-c3: #f59e0b;
    --xp-c4: #ec4899;
    --xp-c5: #38bdf8;
    --xp-c6: #8b5cf6;
    --xp-grid: rgba(100, 104, 136, .18);

    /* sidebar icon tiles, one colour per top-level group */
    --xp-t1: #8b87ff;
    --xp-t2: #2dd4bf;
    --xp-t3: #fbbf24;
    --xp-t4: #f472b6;
    --xp-t5: #38bdf8;
    --xp-t6: #a78bfa;
    --xp-t7: #fb923c;
    --xp-t8: #4ade80;

    --xp-r-sm: 8px;
    --xp-r: 14px;
    --xp-r-lg: 20px;
    --xp-font: "Segoe UI Variable", "Segoe UI", Inter, "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --xp-accent-2: color-mix(in srgb, var(--xp-accent) 72%, #c084fc);
        --xp-accent-tint: color-mix(in srgb, var(--xp-accent) 13%, transparent);
        --xp-accent-ink: color-mix(in srgb, var(--xp-accent) 78%, #000);
        --xp-side-top: color-mix(in srgb, var(--xp-accent) 40%, #0b0a24);
        --xp-side-bottom: color-mix(in srgb, var(--xp-accent) 22%, #090820);
    }

    [data-theme="dark"] {
        --xp-accent-ink: color-mix(in srgb, var(--xp-accent) 60%, #fff);
    }
}

[data-theme="dark"] {
    --xp-bg: #0e0f21;
    --xp-surface: #181a31;
    --xp-surface-2: #1f2240;
    --xp-border: #2a2d50;
    --xp-border-strong: #3a3e68;
    --xp-text: #eceefb;
    --xp-text-2: #a4a8c8;
    --xp-text-3: #7d82a6;
    --xp-head-bg: #2f3362;
    --xp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
    --xp-shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
    --xp-accent-ink: #b4b0ff;

    --xp-running: #2dd4a0;
    --xp-running-tint: rgba(45, 212, 160, .16);
    --xp-running-ink: #5ff0c0;
    --xp-stopped: #ff6b70;
    --xp-stopped-tint: rgba(255, 107, 112, .16);
    --xp-stopped-ink: #ff9a9e;
    --xp-idle: #f5b942;
    --xp-idle-tint: rgba(245, 185, 66, .17);
    --xp-idle-ink: #ffd27a;
    --xp-info: #55a9f2;
    --xp-info-tint: rgba(85, 169, 242, .17);
    --xp-info-ink: #8fc7fa;
    --xp-grid: rgba(164, 168, 200, .16);
    color-scheme: dark;
}

/* ------------------------------------------------------------------ 2. base */
html[data-xp] body {
    background: var(--xp-bg);
    color: var(--xp-text);
    font-family: var(--xp-font);
}

html[data-xp] a {
    color: var(--xp-accent-ink);
}

html[data-xp] h1, html[data-xp] h2, html[data-xp] h3, html[data-xp] h4, html[data-xp] h5, html[data-xp] h6 {
    color: var(--xp-text);
}

html[data-xp] label {
    color: var(--xp-text);
}

html[data-xp] .text-muted, html[data-xp] small.text-muted {
    color: var(--xp-text-2) !important;
}

html[data-xp] :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--xp-accent) 55%, transparent);
    outline-offset: 2px;
}

html[data-xp] ::selection {
    background: var(--xp-accent-tint);
}

/* ------------------------------------------------------------------ 3. legacy components (old pages shown inside the new shell) */
html[data-xp] .card {
    background: var(--xp-surface);
    color: var(--xp-text);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r);
    box-shadow: var(--xp-shadow);
}

html[data-xp] .card-header, html[data-xp] .card-footer {
    background: transparent;
    border-color: var(--xp-border);
    color: var(--xp-text);
}

html[data-xp] .card-title, html[data-xp] .card-header h5 {
    color: var(--xp-text);
}

/* controls look like controls: visible border, clear focus */
html[data-xp] .form-control, html[data-xp] .form-select, html[data-xp] .input-group-text,
html[data-xp] .select2-container--default .select2-selection--single,
html[data-xp] .select2-container--default .select2-selection--multiple {
    background-color: var(--xp-surface);
    color: var(--xp-text);
    border: 1px solid var(--xp-border-strong);
    border-radius: var(--xp-r-sm);
}

html[data-xp] .form-control::placeholder {
    color: var(--xp-text-3);
}

html[data-xp] .form-control:focus, html[data-xp] .form-select:focus {
    background-color: var(--xp-surface);
    color: var(--xp-text);
    border-color: var(--xp-accent);
    box-shadow: 0 0 0 3px var(--xp-accent-tint);
}

html[data-xp] .form-control:disabled, html[data-xp] .form-select:disabled {
    background-color: var(--xp-surface-2);
    color: var(--xp-text-3);
}

html[data-xp] .form-select {
    --bs-form-select-bg-img: none;
}

html[data-xp] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--xp-text);
}

html[data-xp] .select2-dropdown {
    background: var(--xp-surface);
    border-color: var(--xp-border-strong);
    color: var(--xp-text);
}

html[data-xp] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--xp-accent);
    color: #fff;
}

html[data-xp] .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--xp-surface);
    color: var(--xp-text);
    border-color: var(--xp-border-strong);
}

/* buttons are clearly buttons */
html[data-xp] .btn {
    border-radius: var(--xp-r-sm);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(31, 33, 64, .12);
    transition: transform .08s, filter .15s, background-color .15s;
}

html[data-xp] .btn:active {
    transform: translateY(1px);
}

html[data-xp] .btn-primary {
    background: linear-gradient(180deg, var(--xp-accent), color-mix(in srgb, var(--xp-accent) 84%, #000));
    border-color: color-mix(in srgb, var(--xp-accent) 80%, #000);
    color: #fff;
}

html[data-xp] .btn-primary:hover {
    filter: brightness(1.08);
    color: #fff;
}

html[data-xp] .btn-light, html[data-xp] .btn-secondary, html[data-xp] .btn-label-secondary, html[data-xp] .btn-outline-secondary {
    background: var(--xp-surface);
    color: var(--xp-text);
    border: 1px solid var(--xp-border-strong);
}

html[data-xp] .btn-light:hover, html[data-xp] .btn-secondary:hover, html[data-xp] .btn-outline-secondary:hover {
    background: var(--xp-surface-2);
    color: var(--xp-text);
}

html[data-xp] .btn-success {
    background: var(--xp-running);
    border-color: var(--xp-running);
    color: #fff;
}

html[data-xp] .btn-danger {
    background: var(--xp-stopped);
    border-color: var(--xp-stopped);
    color: #fff;
}

html[data-xp] .btn-warning {
    background: var(--xp-idle);
    border-color: var(--xp-idle);
    color: #2b2100;
}

/* tables keep visible borders and a dark header row, so a page can be printed and submitted as a report */
html[data-xp] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--xp-text);
    --bs-table-border-color: var(--xp-border-strong);
    --bs-table-striped-bg: var(--xp-surface-2);
    --bs-table-hover-bg: var(--xp-accent-tint);
    color: var(--xp-text);
    border-color: var(--xp-border-strong);
}

html[data-xp] .table > :not(caption) > * > * {
    border-color: var(--xp-border-strong);
    color: inherit;
    background-color: var(--bs-table-bg);
}

html[data-xp] .table-bordered > :not(caption) > * > * {
    border-width: 1px;
}

html[data-xp] .table > thead > tr > th, html[data-xp] .table > thead > tr > td,
html[data-xp] .table-light, html[data-xp] .table-light > tr > th, html[data-xp] .table-light > tr > td {
    background-color: var(--xp-head-bg) !important;
    color: var(--xp-head-text) !important;
    border-color: color-mix(in srgb, var(--xp-head-bg) 70%, #fff) !important;
    font-weight: 600;
}

html[data-xp] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--xp-surface-2);
}

html[data-xp] .table-hover > tbody > tr:hover > * {
    background-color: var(--xp-accent-tint);
}

html[data-xp] .dropdown-menu, html[data-xp] .modal-content, html[data-xp] .popover {
    background: var(--xp-surface);
    color: var(--xp-text);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r);
    box-shadow: var(--xp-shadow-lg);
}

html[data-xp] .dropdown-item {
    color: var(--xp-text);
}

html[data-xp] .dropdown-item:hover, html[data-xp] .dropdown-item:focus {
    background: var(--xp-accent-tint);
    color: var(--xp-text);
}

html[data-xp] .dropdown-divider {
    border-color: var(--xp-border);
}

html[data-xp] .modal-header, html[data-xp] .modal-footer {
    border-color: var(--xp-border);
}

html[data-xp] .btn-close {
    filter: none;
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1);
}

html[data-xp] .nav-tabs {
    border-color: var(--xp-border);
}

html[data-xp] .nav-tabs .nav-link {
    color: var(--xp-text-2);
}

html[data-xp] .nav-tabs .nav-link.active {
    background: var(--xp-surface);
    color: var(--xp-accent-ink);
    border-color: var(--xp-border) var(--xp-border) var(--xp-surface);
}

html[data-xp] .badge.bg-label-primary, html[data-xp] .bg-label-primary {
    background: var(--xp-accent-tint) !important;
    color: var(--xp-accent-ink) !important;
}

html[data-xp] .bg-label-success {
    background: var(--xp-running-tint) !important;
    color: var(--xp-running-ink) !important;
}

html[data-xp] .bg-label-danger {
    background: var(--xp-stopped-tint) !important;
    color: var(--xp-stopped-ink) !important;
}

html[data-xp] .bg-label-warning {
    background: var(--xp-idle-tint) !important;
    color: var(--xp-idle-ink) !important;
}

html[data-xp] .bg-label-info {
    background: var(--xp-info-tint) !important;
    color: var(--xp-info-ink) !important;
}

html[data-xp] .bg-label-secondary {
    background: var(--xp-surface-2) !important;
    color: var(--xp-text-2) !important;
}

html[data-xp] .alert {
    border-radius: var(--xp-r-sm);
}

html[data-xp] .text-dark, html[data-xp] .text-body {
    color: var(--xp-text) !important;
}

html[data-xp] .border, html[data-xp] .border-top, html[data-xp] .border-bottom {
    border-color: var(--xp-border) !important;
}

html[data-xp] hr {
    border-color: var(--xp-border);
    opacity: 1;
}

/* date range picker (every report page uses it) */
html[data-xp] .daterangepicker {
    background: var(--xp-surface);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r);
    box-shadow: var(--xp-shadow-lg);
    color: var(--xp-text);
    font-family: var(--xp-font);
}

html[data-xp] .daterangepicker:before, html[data-xp] .daterangepicker:after {
    border-bottom-color: var(--xp-surface);
}

html[data-xp] .daterangepicker .calendar-table {
    background: var(--xp-surface);
    border-color: var(--xp-surface);
}

html[data-xp] .daterangepicker td.off, html[data-xp] .daterangepicker td.off.in-range, html[data-xp] .daterangepicker td.off.start-date, html[data-xp] .daterangepicker td.off.end-date {
    background: var(--xp-surface);
    color: var(--xp-text-3);
}

html[data-xp] .daterangepicker td.available:hover, html[data-xp] .daterangepicker th.available:hover {
    background: var(--xp-accent-tint);
    color: var(--xp-text);
}

html[data-xp] .daterangepicker td.in-range {
    background: var(--xp-accent-tint);
    color: var(--xp-text);
}

html[data-xp] .daterangepicker td.active, html[data-xp] .daterangepicker td.active:hover {
    background: var(--xp-accent);
    color: #fff;
}

html[data-xp] .daterangepicker select.monthselect, html[data-xp] .daterangepicker select.yearselect,
html[data-xp] .daterangepicker .drp-selected {
    background: var(--xp-surface);
    color: var(--xp-text);
    border-color: var(--xp-border-strong);
}

html[data-xp] .daterangepicker .ranges li {
    color: var(--xp-text);
    border-radius: var(--xp-r-sm);
}

html[data-xp] .daterangepicker .ranges li:hover {
    background: var(--xp-accent-tint);
}

html[data-xp] .daterangepicker .ranges li.active {
    background: var(--xp-accent);
    color: #fff;
}

html[data-xp] .daterangepicker .drp-buttons {
    border-color: var(--xp-border);
}

/* preloader and DataTables follow the theme too */
html[data-xp] #preloader, html[data-xp] #pre_progress_bar {
    background-color: color-mix(in srgb, var(--xp-bg) 92%, transparent);
}

html[data-xp] .dataTables_wrapper, html[data-xp] .dataTables_wrapper label, html[data-xp] .dataTables_info {
    color: var(--xp-text);
}

html[data-xp] .page-link {
    background: var(--xp-surface);
    color: var(--xp-text);
    border-color: var(--xp-border);
}

html[data-xp] .page-item.active .page-link {
    background: var(--xp-accent);
    border-color: var(--xp-accent);
    color: #fff;
}

/* ------------------------------------------------------------------ 4. layout shell (the Sneat structure, restyled) */
html[data-xp] .layout-page, html[data-xp] .content-wrapper {
    background: var(--xp-bg);
}

html[data-xp] #layout-menu.layout-menu {
    background: linear-gradient(180deg, var(--xp-side-top) 0%, var(--xp-side-bottom) 100%) !important;
    color: rgba(255, 255, 255, .78);
    box-shadow: none;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

html[data-xp] #layout-menu .app-brand {
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    padding: 1.1rem 1.25rem !important;
}

html[data-xp] #layout-menu .app-brand .logo_header {
    max-height: 40px !important;
    background: #fff;
    border-radius: 10px;
    padding: 5px 9px;
}

html[data-xp] #layout-menu.layout-menu {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1200px) {
    html[data-xp] #layout-menu.layout-menu {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
    }
}

html[data-xp] #layout-menu .menu-inner {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

html[data-xp] #layout-menu .app-brand, html[data-xp] #layout-menu .xp-menu-search, html[data-xp] #layout-menu .xp-side-support {
    flex: 0 0 auto;
    box-sizing: border-box;
    max-width: 100%;
}

html[data-xp] #layout-menu.layout-menu {
    overflow: hidden;
}

@media (max-width: 1199.98px) {
    html[data-xp] #layout-menu .app-brand .layout-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-left: auto;
        padding: 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }
}

html[data-xp] #layout-menu .menu-inner-shadow {
    display: none;
}

html[data-xp] .xp-menu-search {
    padding: .85rem 1rem .4rem;
}

html[data-xp] .xp-menu-search .input-wrap {
    position: relative;
}

html[data-xp] .xp-menu-search i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .55);
    font-size: 1rem;
    pointer-events: none;
}

html[data-xp] .xp-menu-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .85rem;
    outline: none;
}

html[data-xp] .xp-menu-search input::placeholder {
    color: rgba(255, 255, 255, .5);
}

html[data-xp] .xp-menu-search input:focus {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .13);
}

html[data-xp] #layout-menu .menu-inner {
    padding: .35rem .6rem 1rem !important;
}

html[data-xp] #layout-menu .menu-item {
    margin: 2px 0;
    border: 0 !important;
}

html[data-xp] #layout-menu .menu-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .65rem;
    border-radius: 12px;
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
    line-height: 1.25;
}

html[data-xp] #layout-menu .menu-link > div {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0;
}

html[data-xp] #layout-menu .menu-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

html[data-xp] #layout-menu .menu-item.active > .menu-link:not(.menu-toggle) {
    background: linear-gradient(120deg, var(--xp-accent), var(--xp-accent-2)) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
    font-weight: 600;
}

html[data-xp] #layout-menu .menu-item.open > .menu-link.menu-toggle, html[data-xp] #layout-menu .menu-item.active > .menu-link.menu-toggle {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}

/* an icon on every item; the top-level icon sits in a coloured tile, one colour per group */
html[data-xp] #layout-menu .menu-inner > .menu-item > .menu-link .menu-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    border-radius: 11px;
    background: color-mix(in srgb, var(--xp-tile, var(--xp-t1)) 24%, transparent);
    color: var(--xp-tile, var(--xp-t1)) !important;
    font-size: 1.05rem !important;
    text-align: center !important;
}

html[data-xp] #layout-menu .menu-inner > .menu-item:nth-child(8n+1) { --xp-tile: var(--xp-t1); }
html[data-xp] #layout-menu .menu-inner > .menu-item:nth-child(8n+2) { --xp-tile: var(--xp-t2); }
html[data-xp] #layout-menu .menu-inner > .menu-item:nth-child(8n+3) { --xp-tile: var(--xp-t3); }
html[data-xp] #layout-menu .menu-inner > .menu-item:nth-child(8n+4) { --xp-tile: var(--xp-t4); }
html[data-xp] #layout-menu .menu-inner > .menu-item:nth-child(8n+5) { --xp-tile: var(--xp-t5); }
html[data-xp] #layout-menu .menu-inner > .menu-item:nth-child(8n+6) { --xp-tile: var(--xp-t6); }
html[data-xp] #layout-menu .menu-inner > .menu-item:nth-child(8n+7) { --xp-tile: var(--xp-t7); }
html[data-xp] #layout-menu .menu-inner > .menu-item:nth-child(8n+8) { --xp-tile: var(--xp-t8); }

html[data-xp] #layout-menu .menu-inner > .menu-item.active:not(.open) > .menu-link .menu-icon {
    background: rgba(255, 255, 255, .22);
    color: #fff !important;
}

html[data-xp] #layout-menu .menu-sub {
    margin: 2px 0 6px 1.1rem;
    padding-left: .35rem;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

html[data-xp] #layout-menu .menu-sub::before {
    display: none;
}

html[data-xp] #layout-menu .menu-sub .menu-link {
    padding: .4rem .55rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .74);
}

html[data-xp] #layout-menu .menu-sub .menu-link::before {
    display: none;
}

html[data-xp] #layout-menu .menu-sub .menu-icon {
    flex: 0 0 18px;
    width: 18px;
    margin: 0 !important;
    font-size: .9rem !important;
    color: rgba(255, 255, 255, .6) !important;
    text-align: center;
}

html[data-xp] #layout-menu .menu-sub .menu-item.active > .menu-link .menu-icon {
    color: #fff !important;
}

html[data-xp] #layout-menu .menu-item.xp-hidden {
    display: none !important;
}

html[data-xp] .xp-menu-empty {
    padding: 1rem;
    color: rgba(255, 255, 255, .6);
    font-size: .85rem;
}

/* support block (phone, WhatsApp, the Android app) at the foot of the sidebar */
html[data-xp] .xp-side-support {
    margin: .4rem 1rem 1.2rem;
    padding: .85rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    font-size: .82rem;
}

html[data-xp] .xp-side-support .title {
    margin-bottom: .45rem;
    color: rgba(255, 255, 255, .55);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html[data-xp] .xp-side-support a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem 0;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

html[data-xp] .xp-side-support a:hover {
    color: #fff;
}

html[data-xp] .xp-side-support .xp-apk img {
    max-width: 100%;
    margin-top: .5rem;
    border-radius: 8px;
}

/* collapsed sidebar (desktop): only the icon tiles; the name is the tooltip */
@media (min-width: 1200px) {
    html.xp-collapsed #layout-menu.layout-menu {
        width: 84px;
        min-width: 84px;
        transition: width .15s;
    }

    html.xp-collapsed #layout-menu .app-brand,
    html.xp-collapsed #layout-menu .xp-menu-search,
    html.xp-collapsed #layout-menu .xp-side-support,
    html.xp-collapsed #layout-menu .menu-sub,
    html.xp-collapsed #layout-menu .menu-link > div,
    html.xp-collapsed #layout-menu .menu-toggle::after {
        display: none !important;
    }

    html.xp-collapsed #layout-menu .menu-inner {
        width: 84px;
        padding: 1rem .6rem !important;
    }

    html.xp-collapsed #layout-menu .menu-item, html.xp-collapsed #layout-menu .menu-link {
        width: 100% !important;
        min-width: 0;
    }

    html.xp-collapsed #layout-menu .menu-link {
        justify-content: center;
        padding: .4rem 0;
    }
}

/* header */
html[data-xp] #layout-navbar.layout-navbar {
    position: sticky;
    top: .75rem;
    z-index: 20;
    margin: .75rem 1.25rem 0;
    padding: .45rem .9rem;
    max-width: none;
    background: var(--xp-surface) !important;
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r);
    box-shadow: var(--xp-shadow);
    backdrop-filter: none;
}

html[data-xp] #layout-navbar .navbar-nav.flex-grow-1 {
    min-width: 0;
}

/* Sneat gives the right-hand group a 100% basis, which left the title a few letters on a phone */
html[data-xp] #layout-navbar #navbar-collapse {
    flex: 0 0 auto;
}

html[data-xp] #layout-navbar #navbar-collapse > ul {
    margin-left: 0 !important;
}

html[data-xp] #layout-navbar #header-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--xp-text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    html[data-xp] #layout-navbar #header-title {
        font-size: .92rem;
    }
}

html[data-xp] #layout-navbar .xp-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--xp-border-strong);
    border-radius: 11px;
    background: var(--xp-surface);
    color: var(--xp-text);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background-color .15s;
}

html[data-xp] #layout-navbar .xp-iconbtn:hover {
    background: var(--xp-surface-2);
}

html[data-xp] .xp-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: .9rem;
    line-height: 1.15;
    text-align: right;
    white-space: nowrap;
}

html[data-xp] .xp-clock b {
    color: var(--xp-text);
    font-size: .98rem;
    font-variant-numeric: tabular-nums;
}

html[data-xp] .xp-clock small {
    color: var(--xp-text-2);
    font-size: .72rem;
}

html[data-xp] .content-wrapper > .container-xxl {
    max-width: 1480px;
}

html[data-xp] .content-footer {
    background: transparent;
    color: var(--xp-text-2);
}

html[data-xp] .content-footer a {
    color: var(--xp-accent-ink);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    html[data-xp] #layout-navbar.layout-navbar {
        margin: .5rem .5rem 0;
        padding: .4rem .6rem;
    }

    html[data-xp] .xp-clock small {
        display: none;
    }

    html[data-xp] .xp-clock {
        margin-right: .5rem;
    }

    /* room below the page for the floating chat button */
    html[data-xp] .content-wrapper {
        padding-bottom: 4.5rem;
    }
}

@media (max-width: 479.98px) {
    html[data-xp] .xp-clock {
        display: none;
    }

    html[data-xp] .content-wrapper > .container-xxl {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

/* ------------------------------------------------------------------ 5. components */
/* 12 column panel grid */
.xp-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.xp-grid > * {
    min-width: 0;
}

.xp-grid > * > .xp-panel, .xp-grid > .xp-panel {
    height: 100%;
}

.xp-col-12 { grid-column: span 12; }
.xp-col-8 { grid-column: span 8; }
.xp-col-7 { grid-column: span 7; }
.xp-col-6 { grid-column: span 6; }
.xp-col-5 { grid-column: span 5; }
.xp-col-4 { grid-column: span 4; }
.xp-col-3 { grid-column: span 3; }

@media (max-width: 1199.98px) {
    .xp-col-4, .xp-col-3 { grid-column: span 6; }
    .xp-col-8, .xp-col-7, .xp-col-5 { grid-column: span 12; }
}

@media (max-width: 767.98px) {
    .xp-col-8, .xp-col-7, .xp-col-6, .xp-col-5, .xp-col-4, .xp-col-3 { grid-column: span 12; }
}

/* hero: gradient banner with the day's three headline numbers */
.xp-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    overflow: hidden;
    padding: 1.5rem 1.75rem;
    border-radius: var(--xp-r-lg);
    background: linear-gradient(120deg, var(--xp-accent) 0%, var(--xp-accent-2) 100%);
    color: #fff;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--xp-accent) 35%, transparent);
}

.xp-hero::before, .xp-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}

.xp-hero::before { width: 280px; height: 280px; right: -80px; top: -120px; }
.xp-hero::after { width: 170px; height: 170px; right: 220px; bottom: -100px; }

.xp-hero > * { position: relative; z-index: 1; }
html[data-xp] .xp-hero h1, html[data-xp] .xp-hero h2, html[data-xp] .xp-hero h3 { color: #fff; margin: 0; font-weight: 800; }
.xp-hero h2 { font-size: 1.75rem; line-height: 1.2; }
.xp-hero .xp-hero-eyebrow { margin-bottom: .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.xp-hero .xp-hero-sub { margin-top: .35rem; font-size: .92rem; opacity: .92; }
html[data-xp] .xp-hero a { color: #fff; }

.xp-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.xp-hero-stat {
    min-width: 128px;
    padding: .7rem 1rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(4px);
}

.xp-hero-stat b { display: block; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.xp-hero-stat span { display: block; margin-top: .15rem; font-size: .75rem; opacity: .88; }

@media (max-width: 575.98px) {
    .xp-hero { padding: 1.1rem 1rem; }
    .xp-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: 100%; }
    .xp-hero-stat { min-width: 0; padding: .55rem .6rem; }
    .xp-hero-stat b { font-size: 1.1rem; }
    .xp-hero-stat span { font-size: .68rem; }
}

/* KPI card: icon, label, value, one line of context */
.xp-kpi {
    display: flex;
    gap: .9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    background: var(--xp-surface);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r);
    box-shadow: var(--xp-shadow);
    color: var(--xp-text);
}

.xp-kpi-icon {
    --xp-kpi: var(--xp-accent);
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--xp-kpi) 16%, transparent);
    color: var(--xp-kpi);
    font-size: 1.25rem;
}

.xp-kpi-icon.is-running { --xp-kpi: var(--xp-running); }
.xp-kpi-icon.is-stopped { --xp-kpi: var(--xp-stopped); }
.xp-kpi-icon.is-idle { --xp-kpi: var(--xp-idle); }
.xp-kpi-icon.is-info { --xp-kpi: var(--xp-info); }

.xp-kpi-body { min-width: 0; flex: 1 1 auto; }
.xp-kpi-label { color: var(--xp-text-2); font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.xp-kpi-value { margin: .1rem 0; font-size: 1.6rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.xp-kpi-value small { color: var(--xp-text-2); font-size: .8rem; font-weight: 600; }
.xp-kpi-note { color: var(--xp-text-2); font-size: .78rem; }
.xp-kpi a.stretched { color: inherit; text-decoration: none; }

.xp-delta { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.xp-delta.up { background: var(--xp-running-tint); color: var(--xp-running-ink); }
.xp-delta.down { background: var(--xp-stopped-tint); color: var(--xp-stopped-ink); }
.xp-delta.flat { background: var(--xp-surface-2); color: var(--xp-text-2); }

/* panel */
.xp-panel {
    display: flex;
    flex-direction: column;
    height: auto;                  /* as tall as its content; inside a grid cell it fills the cell (rule below) */
    background: var(--xp-surface);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r);
    box-shadow: var(--xp-shadow);
    color: var(--xp-text);
}

.xp-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1.1rem .4rem;
}

.xp-panel-title { margin: 0; font-size: 1rem; font-weight: 700; }
.xp-panel-sub { color: var(--xp-text-2); font-size: .78rem; }
.xp-panel-body { flex: 1 1 auto; min-width: 0; padding: .5rem 1.1rem 1.1rem; }

.xp-section-title { margin: 1.4rem 0 .6rem; color: var(--xp-text-2); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* filter bar, chips, status pills */
.xp-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .7rem .9rem;
    background: var(--xp-surface);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r);
}

.xp-filterbar .xp-grow { flex: 1 1 200px; }

.xp-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.xp-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem;
    border: 1px solid var(--xp-border-strong);
    border-radius: 999px;
    background: var(--xp-surface);
    color: var(--xp-text);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.xp-chip:hover { background: var(--xp-surface-2); }
.xp-chip.is-active { background: var(--xp-accent-tint); border-color: var(--xp-accent); color: var(--xp-accent-ink); }
.xp-chip .count { padding: 0 .4rem; border-radius: 999px; background: var(--xp-surface-2); color: var(--xp-text-2); font-size: .72rem; }
.xp-chip.is-active .count { background: var(--xp-accent); color: #fff; }

.xp-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.xp-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.xp-pill.running { background: var(--xp-running-tint); color: var(--xp-running-ink); }
.xp-pill.stopped { background: var(--xp-stopped-tint); color: var(--xp-stopped-ink); }
.xp-pill.idle { background: var(--xp-idle-tint); color: var(--xp-idle-ink); }
.xp-pill.info { background: var(--xp-info-tint); color: var(--xp-info-ink); }
.xp-pill.muted { background: var(--xp-surface-2); color: var(--xp-text-2); }

/* live indicator */
.xp-live { display: inline-flex; align-items: center; gap: .4rem; color: var(--xp-text-2); font-size: .78rem; font-weight: 600; }
.xp-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--xp-running); box-shadow: 0 0 0 0 color-mix(in srgb, var(--xp-running) 55%, transparent); }
.xp-live.is-off::before { background: var(--xp-text-3); }

@media (prefers-reduced-motion: no-preference) {
    .xp-live:not(.is-off)::before { animation: xp-pulse 2.2s infinite; }
    @keyframes xp-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
}

/* ranking bars (HTML, built by XPCharts.rank) */
.xp-rank { display: flex; flex-direction: column; gap: .55rem; }
.xp-rank-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; align-items: baseline; font-size: .85rem; }
.xp-rank-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xp-text); }
.xp-rank-row .name small { margin-left: .35rem; color: var(--xp-text-2); }
.xp-rank-row .val { font-weight: 700; font-variant-numeric: tabular-nums; }
.xp-rank-track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--xp-surface-2); overflow: hidden; }
.xp-rank-track > i { display: block; height: 100%; border-radius: 999px; background: var(--xp-bar, var(--xp-c1)); }
.xp-rank-track.xp-stack { display: flex; gap: 2px; }
.xp-rank-track.xp-stack > i { border-radius: 0; }
.xp-rank-track.xp-stack > i:first-child { border-radius: 999px 0 0 999px; }
.xp-rank-track.xp-stack > i:last-child { border-radius: 0 999px 999px 0; }
.xp-rank-track.xp-stack > i:only-child { border-radius: 999px; }

/* SVG charts, tooltip */
.xp-chart { position: relative; width: 100%; }
.xp-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.xp-chart .grid { stroke: var(--xp-grid); stroke-width: 1; }
.xp-chart .axis-label { fill: var(--xp-text-2); font-size: 11px; font-family: var(--xp-font); }
.xp-chart .center-value { fill: var(--xp-text); font-size: 20px; font-weight: 800; font-family: var(--xp-font); }
.xp-chart .center-label { fill: var(--xp-text-2); font-size: 11px; font-family: var(--xp-font); }
.xp-chart .hit { fill: transparent; }
.xp-chart .crosshair { stroke: var(--xp-text-3); stroke-dasharray: 3 3; }

.xp-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .5rem; color: var(--xp-text-2); font-size: .78rem; }
.xp-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.xp-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--xp-lg, var(--xp-c1)); }

.xp-tip {
    position: fixed;
    z-index: 2000;
    max-width: 260px;
    padding: .45rem .65rem;
    border-radius: 10px;
    background: var(--xp-surface);
    border: 1px solid var(--xp-border-strong);
    box-shadow: var(--xp-shadow-lg);
    color: var(--xp-text);
    font-size: .78rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .08s;
}

.xp-tip.is-on { opacity: 1; }
.xp-tip b { display: block; margin-bottom: .15rem; }
.xp-tip .row-line { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.xp-tip .row-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--xp-lg); }

/* heat map and timeline strip */
.xp-heat { display: grid; gap: 3px; font-size: .72rem; overflow-x: auto; }
.xp-heat .cell { display: flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 .25rem; border-radius: 6px; background: var(--xp-surface-2); color: var(--xp-text); font-variant-numeric: tabular-nums; }
.xp-heat .head { min-height: 0; background: transparent; color: var(--xp-text-2); font-weight: 600; }
.xp-heat .cell.ok { background: var(--xp-running-tint); color: var(--xp-running-ink); font-weight: 700; }
.xp-heat .cell.warn { background: var(--xp-idle-tint); color: var(--xp-idle-ink); font-weight: 700; }
.xp-heat .cell.bad { background: var(--xp-stopped-tint); color: var(--xp-stopped-ink); font-weight: 700; }
.xp-heat .row-name { justify-content: flex-start; background: transparent; color: var(--xp-text); font-weight: 600; white-space: nowrap; }

.xp-timeline { display: flex; height: 18px; overflow: hidden; border-radius: 6px; background: var(--xp-surface-2); }
.xp-timeline > i { display: block; height: 100%; min-width: 2px; }
.xp-timeline .running { background: var(--xp-running); }
.xp-timeline .stopped { background: var(--xp-stopped); }
.xp-timeline .idle { background: var(--xp-idle); }
.xp-timeline .nodata { background: repeating-linear-gradient(45deg, var(--xp-grid), var(--xp-grid) 4px, transparent 4px, transparent 8px); }

/* empty state, inline message, toast, confirm dialog */
.xp-empty { padding: 2rem 1rem; text-align: center; color: var(--xp-text-2); }
.xp-empty i { display: block; margin-bottom: .5rem; color: var(--xp-text-3); font-size: 2rem; }
.xp-empty b { display: block; color: var(--xp-text); }

.xp-msg { padding: .55rem .85rem; border-radius: var(--xp-r-sm); font-size: .88rem; font-weight: 600; }
.xp-msg.success { background: var(--xp-running-tint); color: var(--xp-running-ink); }
.xp-msg.error { background: var(--xp-stopped-tint); color: var(--xp-stopped-ink); }
.xp-msg.info { background: var(--xp-info-tint); color: var(--xp-info-ink); }
.xp-msg.warning { background: var(--xp-idle-tint); color: var(--xp-idle-ink); }

.xp-toasts { position: fixed; z-index: 3000; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; max-width: min(380px, calc(100vw - 2rem)); }
.xp-toasts .xp-msg { box-shadow: var(--xp-shadow-lg); border: 1px solid var(--xp-border); background-clip: padding-box; }

.xp-dialog-backdrop { position: fixed; z-index: 3500; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(10, 10, 30, .55); }
.xp-dialog { width: min(440px, 100%); padding: 1.4rem; border: 1px solid var(--xp-border); border-radius: var(--xp-r-lg); background: var(--xp-surface); box-shadow: var(--xp-shadow-lg); color: var(--xp-text); }
.xp-dialog h5 { margin: 0 0 .5rem; font-weight: 800; }
.xp-dialog p { margin: 0 0 1.2rem; color: var(--xp-text-2); }
.xp-dialog.xp-dialog-modal { display: flex; flex-direction: column; width: min(600px, 100%); max-height: calc(100vh - 2rem); padding: 0; }
.xp-dialog.xp-dialog-modal.wide { width: min(1000px, 100%); }
.xp-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--xp-border); }
.xp-dialog-head h5 { margin: 0; }
.xp-dialog-body { padding: 1.25rem; overflow: auto; }
.xp-dialog .actions { display: flex; justify-content: flex-end; gap: .6rem; }

/* tables for reports: borders and a dark header row, so they print and can be submitted */
.xp-table { width: 100%; border-collapse: collapse; color: var(--xp-text); font-size: .88rem; }
.xp-table th, .xp-table td { padding: .45rem .65rem; border: 1px solid var(--xp-border-strong); vertical-align: middle; }
.xp-table thead th { background: var(--xp-head-bg); border-color: color-mix(in srgb, var(--xp-head-bg) 70%, #fff); color: var(--xp-head-text); font-weight: 600; white-space: nowrap; }
.xp-table tbody tr:nth-child(even) td { background: var(--xp-surface-2); }
.xp-table tbody tr:hover td { background: var(--xp-accent-tint); }
.xp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.xp-table-wrap { overflow-x: auto; }

/* password field with a show/hide button, and the strength hint */
.xp-pw { position: relative; }
.xp-pw .form-control { padding-right: 2.6rem; }
.xp-pw-toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 2.6rem; padding: 0; border: 0; background: transparent; color: var(--xp-text-2); font-size: 1.15rem; cursor: pointer; }
.xp-pw-toggle:hover { color: var(--xp-text); }

.xp-strength { display: flex; align-items: center; gap: .6rem; min-height: 1.1rem; color: var(--xp-text-2); font-size: .78rem; font-weight: 600; }
.xp-strength .bars { display: flex; gap: 4px; flex: 0 0 120px; }
.xp-strength .bars i { flex: 1; height: 5px; border-radius: 999px; background: var(--xp-border-strong); }
.xp-strength[data-score="1"] .bars i:nth-child(-n+1) { background: var(--xp-stopped); }
.xp-strength[data-score="2"] .bars i:nth-child(-n+2) { background: var(--xp-idle); }
.xp-strength[data-score="3"] .bars i:nth-child(-n+3) { background: var(--xp-info); }
.xp-strength[data-score="4"] .bars i:nth-child(-n+4) { background: var(--xp-running); }

/* page head, table tools and the table of a report */
.xp-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.xp-page-head h4 { margin: 0; font-weight: 800; }
.xp-page-head .sub { color: var(--xp-text-2); font-size: .85rem; }

.xp-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.xp-table-tools .xp-tt-search { width: min(240px, 100%); }
.xp-table thead th.xp-sortable { cursor: pointer; user-select: none; }
.xp-table thead th.xp-sortable:hover { filter: brightness(1.2); }
.xp-table tfoot td { background: var(--xp-surface-2); border-color: var(--xp-border-strong); }
/* the formal printable report table of xp-sheet.js */
.xp-sheet-table th, .xp-sheet-table td { text-align: center; }
.xp-sheet-table thead tr.xp-sheet-title th { font-size: 1rem; }
.xp-sheet-table thead tr.xp-sheet-note th { text-align: right; font-weight: 400; font-size: .78rem; }
.xp-sheet-table td.neg, .xp-sheet-table tr.neg td { background: var(--xp-stopped-tint) !important; color: var(--xp-stopped-ink); font-weight: 700; }
.xp-sheet-table tr.warn td { background: var(--xp-idle-tint) !important; }
/* the report tables of the old interface, kept as they were for the official reports (xp-sheet.js option v1): Calibri, black rules, plain white cells, no padding, bold headings */
.xp-sheet-v1 { background: #fff; border-collapse: collapse; }
.xp-sheet-v1 th, .xp-sheet-v1 td { padding: 0 !important; border: 1px solid #000 !important; background-color: #fff !important; color: #000 !important; font-family: Calibri, Carlito, Arial, sans-serif !important; font-size: var(--v1-size, 10pt) !important; line-height: 1.5; text-align: center !important; vertical-align: middle; white-space: normal; }
.xp-sheet-v1 th { font-weight: 700 !important; }
.xp-sheet-v1 thead tr.xp-sheet-title th { font-size: 1rem !important; }
.xp-sheet-v1 thead tr.xp-sheet-title:first-child th { font-size: 1.25rem !important; }
.xp-sheet-v1 tr.row-red > td { background-color: var(--bs-danger, #ff4c51) !important; }
.xp-sheet-v1 tr.row-green > td { background-color: var(--bs-success, #72e128) !important; font-weight: 700; }
.xp-sheet-v1 td.hl { background-color: #ffc107 !important; font-weight: 700; }
.xp-sheet-v1 tfoot td { font-weight: 700; }
.xp-sheet-oldlook .xp-sheet-footnote { color: #000; font-size: 1rem; }
.xp-sheet-footnote { margin-top: .75rem; font-size: .82rem; color: var(--xp-text-2); }
.xp-sheet-footnote:empty { display: none; }
.xp-sheet-footnote ol { margin: .3rem 0 0; padding-left: 1.2rem; }
.xp-sheet:fullscreen { background: var(--xp-bg); padding: 1rem; overflow: auto; }
.xp-tt-more { margin-top: .6rem; text-align: center; }
.xp-zoom-reset { position: absolute; top: 0; right: 0; }

/* skeleton while loading */
.xp-skeleton { border-radius: 8px; background: linear-gradient(90deg, var(--xp-surface-2), var(--xp-border), var(--xp-surface-2)); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) {
    .xp-skeleton { animation: xp-shimmer 1.4s infinite linear; }
    @keyframes xp-shimmer { to { background-position: -200% 0; } }
}

/* ------------------------------------------------------------------ 6. print */
@media print {
    body.xp-printing * { visibility: hidden !important; }
    body.xp-printing .xp-print-target, body.xp-printing .xp-print-target * { visibility: visible !important; }
    body.xp-printing .xp-print-target { position: absolute; left: 0; top: 0; width: 100%; }
    html[data-xp] body, html[data-xp] .layout-page, html[data-xp] .content-wrapper { background: #fff !important; color: #000 !important; }
    html[data-xp] #layout-menu, html[data-xp] #layout-navbar, html[data-xp] .content-footer, html[data-xp] .layout-overlay,
    html[data-xp] #whatsapp-chat-widget, html[data-xp] .xp-noprint, html[data-xp] .xp-filterbar, html[data-xp] .xp-toasts,
    html[data-xp] .btn, html[data-xp] .xp-chips { display: none !important; }
    html[data-xp] .layout-page { padding-left: 0 !important; }
    html[data-xp] .container-xxl { max-width: none !important; padding: 0 !important; }
    html[data-xp] .card, html[data-xp] .xp-panel, html[data-xp] .xp-kpi { box-shadow: none !important; break-inside: avoid; border: 1px solid #999 !important; background: #fff !important; }
    html[data-xp] .xp-hero { background: #fff !important; color: #000 !important; box-shadow: none !important; border: 1px solid #999; }
    html[data-xp] .xp-hero * { color: #000 !important; }
    .xp-table thead th, html[data-xp] .table > thead > tr > th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .xp-table td, .xp-table th { border-color: #666 !important; }
    /* the official printed reports (xp-sheet.js): as the old reports print - black rules, plain white headings, every column on the sheet, no scroll bar */
    .xp-print-target .xp-table-wrap { overflow: visible !important; }
    .xp-print-target .xp-sheet-table { width: 100% !important; min-width: 0 !important; table-layout: auto; border-collapse: collapse; }
    .xp-print-target .xp-sheet-table:not(.xp-sheet-v1) th, .xp-print-target .xp-sheet-table:not(.xp-sheet-v1) td { padding: 3px 3px !important; font-size: 8pt !important; line-height: 1.2; white-space: normal !important; border: 1px solid #000 !important; color: #000 !important; }
    .xp-print-target .xp-sheet-table:not(.xp-sheet-v1) thead th, .xp-print-target .xp-sheet-table:not(.xp-sheet-v1) tfoot td { background: #fff !important; font-weight: 700; }
    .xp-print-target .xp-sheet-table:not(.xp-sheet-v1) tbody tr:nth-child(even) td { background-color: #fff; }
    .xp-print-target .xp-sheet-table:not(.xp-sheet-v1) thead tr.xp-sheet-title th { font-size: 13pt !important; padding: 4px !important; }
    .xp-print-target .xp-sheet-footnote { margin-top: 6px; font-size: 8pt; color: #000; }
}

/* ---------------------------------------------------------------- dark state cards
   The cards of the Bag Counter, Molasses and Polarimeter overviews: a dark card whose state colour (--c) glows on the border,
   chip, ring, bars and link, so it can be read from across a room. is-on green, is-late amber, is-off red, is-idle grey, is-note black. */
.xp-dc { --c: #1fb98a; --dc-fg2: #98a3bd; display: flex; flex-direction: column; height: 100%; border-radius: 16px; color: #eef1f8; overflow: hidden; background: radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--c) 35%, #1a2036), #161b2e 60%); border: 1px solid color-mix(in srgb, var(--c) 55%, #161b2e); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 28%, transparent), 0 10px 24px rgba(0, 0, 0, .25); transition: transform .15s ease, box-shadow .15s ease; }
.xp-dc.is-late { --c: #f2b01e; }
.xp-dc.is-off { --c: #ee5a5f; }
.xp-dc.is-idle { --c: #8a93a5; }
.xp-dc.is-note { --c: #6b7385; background: #0d0d10; border-color: #2a2a33; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.xp-dc:hover { transform: translateY(-3px); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 40%, transparent), 0 16px 30px rgba(0, 0, 0, .3); }
.xp-dc-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .8rem .9rem .3rem; }
.xp-dc-name { font-size: 1.15rem; font-weight: 800; color: #fff; word-break: break-word; }
.xp-dc-chip { display: inline-block; margin-top: .3rem; padding: .12rem .55rem; white-space: nowrap; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid var(--c); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.xp-dc-sub { margin-top: .25rem; font-size: .72rem; color: var(--dc-fg2); }
.xp-dc-dot { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; border: 1px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }
.xp-dc-ring { flex: 0 0 76px; width: 76px; --xp-surface-2: rgba(255, 255, 255, .1); }
.xp-dc-ring .center-value { fill: #fff !important; font-size: 17px; }
.xp-dc-ring .center-label { fill: var(--dc-fg2) !important; font-size: 9px; }
.xp-dc-ring circle:nth-of-type(2) { stroke: var(--c) !important; filter: drop-shadow(0 0 4px var(--c)); }
.xp-dc-body { padding: .3rem .9rem .7rem; display: flex; flex-direction: column; gap: .5rem; }
.xp-dc-label { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dc-fg2); }
.xp-dc-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: #fff; }
.xp-dc-value small { margin-left: .35rem; font-size: .74rem; font-weight: 700; color: var(--dc-fg2); }
.xp-dc-text { font-weight: 700; color: #fff; }
.xp-dc-bar { display: flex; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: .3rem; }
.xp-dc-bar i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.xp-dc-panel { padding: .55rem .6rem; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.xp-dc-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.xp-dc-row .xp-dc-label { white-space: nowrap; font-size: .66rem; letter-spacing: .02em; color: #fff; }
.xp-dc-two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .35rem 0; }
.xp-dc-two small { display: block; font-size: .68rem; color: var(--dc-fg2); }
.xp-dc-two b { font-size: 1.05rem; color: #fff; }
.xp-dc-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff !important; text-decoration: none; font-size: 1.05rem; cursor: pointer; }
.xp-dc-ico:hover { background: rgba(255, 255, 255, .18); }
.xp-dc-foot { margin-top: auto; padding: .55rem .9rem; background: rgba(0, 0, 0, .2); font-size: .84rem; }
.xp-dc-foot a { color: var(--c) !important; font-weight: 700; text-decoration: none; }
.xp-dc-note { padding: .8rem .9rem; color: var(--dc-fg2); }