/* =====================================================================
   Xplocc design system (v3): vibrant gradient, Bootstrap 5 + jQuery.
   Tokens -> base -> shell -> components -> pages. Dark mode: <html data-theme="dark" data-bs-theme="dark">.
   Component classes use the .xp- prefix; charts are drawn by xp-viz.js.
   ===================================================================== */

:root {
    --xp-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --xp-bg: #f3f4fb;
    --xp-surface: #ffffff;
    --xp-surface-2: #f7f7fd;
    --xp-border: #e6e8f4;
    --xp-text: #1b1b3a;
    --xp-text-muted: #6b6f8d;
    --xp-accent: #6366f1;

    /* brand colours (also used as per-item colours for the menu, tiles and charts) */
    --c-indigo: #6366f1;
    --c-violet: #8b5cf6;
    --c-fuchsia: #d946ef;
    --c-sky: #0ea5e9;
    --c-teal: #14b8a6;
    --c-emerald: #10b981;
    --c-amber: #f59e0b;
    --c-rose: #f43f5e;
    --c-orange: #f97316;

    --xp-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%);
    --xp-grad-warm: linear-gradient(135deg, #f97316 0%, #f43f5e 100%);
    --xp-grad-cool: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    --xp-grad-fresh: linear-gradient(135deg, #14b8a6 0%, #10b981 100%);

    /* status pairs: solid / tint / ink-on-tint */
    --xp-run: #10b981;  --xp-run-tint: #d8f7ea;  --xp-run-ink: #0b7a55;
    --xp-stop: #f43f5e; --xp-stop-tint: #ffe1e7; --xp-stop-ink: #be1238;
    --xp-idle: #f59e0b; --xp-idle-tint: #fdefcf; --xp-idle-ink: #8a5a00;

    --xp-radius: 16px;
    --xp-radius-sm: 10px;
    --xp-shadow: 0 1px 2px rgba(40, 40, 100, .05), 0 8px 24px -8px rgba(60, 60, 140, .14);
    --xp-shadow-hover: 0 2px 4px rgba(40, 40, 100, .06), 0 16px 32px -10px rgba(99, 102, 241, .32);
    --xp-space: 8px;

    --xp-nav-grad: linear-gradient(185deg, #1e1b4b 0%, #2d1f6e 55%, #4a1d7a 100%);
    --xp-nav-text: rgba(255, 255, 255, .72);
    --xp-nav-text-strong: #fff;
    --xp-nav-line: rgba(255, 255, 255, .1);
    --xp-topbar-h: 64px;
    --xp-sidebar-w: 272px;
    --xp-sidebar-w-collapsed: 76px;
}

:root[data-theme="dark"] {
    --xp-bg: #0e0f21;
    --xp-surface: #181a34;
    --xp-surface-2: #1f2242;
    --xp-border: #2b2e57;
    --xp-text: #eceefe;
    --xp-text-muted: #9ea3c9;
    --xp-accent: #8b8cf8;
    --xp-run: #34d399;  --xp-run-tint: #0f3a2d;  --xp-run-ink: #7ff0c1;
    --xp-stop: #fb7185; --xp-stop-tint: #4a1a26; --xp-stop-ink: #ffa3b3;
    --xp-idle: #fbbf24; --xp-idle-tint: #3f2f0a; --xp-idle-ink: #fcd978;
    --xp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .5);
    --xp-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 32px -10px rgba(139, 140, 248, .35);
    --xp-nav-grad: linear-gradient(185deg, #12112e 0%, #1b1442 55%, #2a1252 100%);
}

/* ---------- Bootstrap 5 bridge ---------- */
:root {
    --bs-body-font-family: var(--xp-font);
    --bs-body-bg: var(--xp-bg);
    --bs-body-color: var(--xp-text);
    --bs-border-color: var(--xp-border);
    --bs-primary: var(--xp-accent);
    --bs-primary-rgb: 99, 102, 241;
    --bs-link-color: var(--xp-accent);
    --bs-link-hover-color: var(--xp-accent);
    --bs-link-color-rgb: 99, 102, 241;
    --bs-link-hover-color-rgb: 99, 102, 241;
    --bs-border-radius: 10px;
}
:root[data-theme="dark"] {
    --bs-primary-rgb: 139, 140, 248;
    --bs-link-color-rgb: 139, 140, 248;
    --bs-link-hover-color-rgb: 139, 140, 248;
}
.btn { border-radius: 10px; font-weight: 600; }
/* Buttons: solid, with a darker lower edge so they read as pressable and stand apart from cards and the gradient hero */
.btn { --bs-btn-padding-y: .32rem; --bs-btn-padding-x: .85rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: 8px; padding: .32rem .85rem; font-size: .85rem; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.btn-primary {
    --xp-btn-edge: #3a3fd0;
    --bs-btn-bg: #4f52e8;
    --bs-btn-border-color: var(--xp-btn-edge);
    --bs-btn-hover-bg: #4347e0;
    --bs-btn-hover-border-color: var(--xp-btn-edge);
    --bs-btn-active-bg: #3d40d2;
    --bs-btn-active-border-color: var(--xp-btn-edge);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    background-image: none;
    border-width: 1px 1px 3px;
    box-shadow: 0 6px 14px -8px rgba(79, 82, 232, .8);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 18px -8px rgba(79, 82, 232, .9); }
.btn-primary:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: none; }
:root[data-theme="dark"] .btn-primary { --xp-btn-edge: #2f33b8; --bs-btn-bg: #6366f1; --bs-btn-hover-bg: #5558e6; --bs-btn-active-bg: #4b4edc; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-primary:focus-visible { outline: 3px solid color-mix(in srgb, var(--xp-accent) 45%, transparent); outline-offset: 2px; }
/* buttons inside the filter bars keep their natural width, aligned with the inputs */
.xp-filterbar .btn { width: auto; min-width: 120px; justify-self: start; }
.xp-filterbar .btn.w-100 { width: auto !important; }
@media (max-width: 575.98px) { .xp-filterbar .btn, .xp-filterbar .btn.w-100 { width: 100% !important; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; } /* standalone pages (login, 404) do not load Bootstrap */
body { font-family: var(--xp-font); background-color: var(--xp-bg); color: var(--xp-text); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; }
a:focus-visible, button:focus-visible, .form-control:focus-visible, .xp-tile:focus-visible { outline: 2px solid var(--xp-accent); outline-offset: 2px; }
.text-muted { color: var(--xp-text-muted) !important; }

.card, .hk-sec-wrapper {
    background-color: var(--xp-surface);
    color: var(--xp-text);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-radius);
    box-shadow: var(--xp-shadow);
}
.card-header { background-color: var(--xp-surface-2); border-bottom-color: var(--xp-border); }
.form-control, .form-select {
    background-color: var(--xp-surface); color: var(--xp-text); border-color: var(--xp-border);
    border-radius: 8px; min-height: 34px; padding: .3rem .7rem; font-size: .875rem;
}
.form-control:focus, .form-select:focus { border-color: var(--xp-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xp-accent) 22%, transparent); }
.table { color: var(--xp-text); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--xp-border); }
.modal-content { background-color: var(--xp-surface); color: var(--xp-text); border: 0; border-radius: var(--xp-radius); box-shadow: 0 24px 64px -16px rgba(30, 27, 75, .5); }
.modal-header, .modal-footer { border-color: var(--xp-border); }
.dropdown-menu { border: 1px solid var(--xp-border); border-radius: 12px; box-shadow: var(--xp-shadow); padding: 6px; }
.dropdown-item { border-radius: 8px; padding: 8px 12px; }

/* =====================================================================
   App shell
   ===================================================================== */
body.xp-no-scroll { overflow: hidden; }

/* sidebar: full-height gradient with the logo on top */
.xp-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040;
    width: var(--xp-sidebar-w); display: flex; flex-direction: column;
    background: var(--xp-nav-grad); color: var(--xp-nav-text);
    transition: width .22s ease, transform .22s ease;
}
.xp-sidebar::after { /* soft glow */
    content: ""; position: absolute; inset: auto 0 0 0; height: 220px; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 100%, rgba(217, 70, 239, .28), transparent 70%);
}
.xp-sidebar-head { display: flex; align-items: center; justify-content: space-between; height: var(--xp-topbar-h); padding: 0 16px; flex: 0 0 auto; }
.xp-brand { display: inline-flex; align-items: center; }
.xp-brand img { max-height: 36px; background: #fff; border-radius: 10px; padding: 3px 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.xp-nav-close { display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 18px; }
.xp-sidebar-scroll { position: relative; z-index: 1; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0 24px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }

.xp-nav-search { padding: 4px 16px 12px; position: relative; }
.xp-nav-search i { position: absolute; left: 30px; top: 50%; transform: translateY(-62%); color: var(--xp-nav-text); font-size: 13px; pointer-events: none; }
.xp-nav-search input {
    width: 100%; height: 40px; padding: 0 12px 0 36px; color: #fff; font-size: .85rem;
    background: rgba(255, 255, 255, .09); border: 1px solid var(--xp-nav-line); border-radius: 12px;
}
.xp-nav-search input::placeholder { color: var(--xp-nav-text); }
.xp-nav-search input:focus { outline: none; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .14); }

.xp-menu { list-style: none; margin: 0; padding: 0; }
.xp-menu ul { list-style: none; margin: 0; padding: 0; }
.xp-menu > .nav-item { --tile: var(--c-indigo); }
.xp-menu .nav-link {
    display: flex; align-items: flex-start; gap: 12px; margin: 2px 12px; padding: 8px 10px;
    border-radius: 12px; color: var(--xp-nav-text); font-size: .9rem; font-weight: 500;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
    transition: background .15s, color .15s;
}
.xp-menu .nav-link:hover, .xp-menu .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .1); }
.xp-menu .nav-link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.xp-menu .nav-link > .nav-link-text { flex: 1 1 auto; min-width: 0; padding-top: 5px; }
/* coloured icon tile, one colour per top-level item */
.xp-menu > .nav-item > .nav-link > i {
    flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 16px; color: #fff;
    background: linear-gradient(135deg, var(--tile), color-mix(in srgb, var(--tile) 55%, #fff));
    box-shadow: 0 6px 14px -6px var(--tile);
}
.xp-menu > .nav-item:nth-child(8n+1) { --tile: #6366f1; }
.xp-menu > .nav-item:nth-child(8n+2) { --tile: #0ea5e9; }
.xp-menu > .nav-item:nth-child(8n+3) { --tile: #14b8a6; }
.xp-menu > .nav-item:nth-child(8n+4) { --tile: #f59e0b; }
.xp-menu > .nav-item:nth-child(8n+5) { --tile: #f43f5e; }
.xp-menu > .nav-item:nth-child(8n+6) { --tile: #d946ef; }
.xp-menu > .nav-item:nth-child(8n+7) { --tile: #10b981; }
.xp-menu > .nav-item:nth-child(8n+8) { --tile: #f97316; }
#ks_menu_items_ul > .nav-item:nth-child(8n+1) { --tile: #8b5cf6; } /* second list starts one colour later than the Dashboard link */

.xp-menu .nav-item.active > .nav-link {
    color: #fff; font-weight: 600;
    background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 20px -10px rgba(0, 0, 0, .6);
}
.xp-menu .nav-link[data-bs-toggle="collapse"]::after {
    content: ""; flex: 0 0 auto; margin: 12px 4px 0 auto; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s ease; opacity: .8;
}
.xp-menu .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after { transform: rotate(225deg); }
.xp-menu .collapse-level-1, .xp-menu .collapse-level-2 { margin: 2px 0 6px 28px; padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, .14); }
.xp-menu .collapse-level-1 .nav-link, .xp-menu .collapse-level-2 .nav-link { margin: 1px 8px 1px 0; padding: 6px 10px; font-size: .84rem; }
/* sub items: small icon in the colour of their parent's tile */
.xp-menu .collapse-level-1 .nav-link > i, .xp-menu .collapse-level-2 .nav-link > i {
    flex: 0 0 20px; width: 20px; margin-top: 2px; font-size: 14px; line-height: 1.35; text-align: center;
    color: color-mix(in srgb, var(--tile) 55%, #fff); opacity: 1;
}
.xp-menu .collapse-level-1 .nav-link:hover > i, .xp-menu .collapse-level-2 .nav-link:hover > i,
.xp-menu .collapse-level-1 .nav-item.active > .nav-link > i, .xp-menu .collapse-level-2 .nav-item.active > .nav-link > i { color: #fff; }
.xp-menu .collapse-level-1 .nav-link, .xp-menu .collapse-level-2 .nav-link { gap: 10px; }
.xp-menu .collapse-level-1 .nav-link > .nav-link-text, .xp-menu .collapse-level-2 .nav-link > .nav-link-text { padding-top: 0; }
.xp-nav-empty { padding: 12px 22px; font-size: .8rem; color: var(--xp-nav-text); display: none; position: relative; z-index: 1; }

/* top bar */
.xp-topbar {
    position: fixed; top: 0; right: 0; left: var(--xp-sidebar-w); z-index: 1030; height: var(--xp-topbar-h);
    display: flex; align-items: center; gap: 10px; padding: 0 24px;
    background: color-mix(in srgb, var(--xp-bg) 82%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--xp-border);
    transition: left .22s ease;
}
.xp-topbar .xp-brand-top { display: none; margin-right: auto; }
.xp-topbar .xp-brand-top img { max-height: 32px; background: transparent; box-shadow: none; padding: 0; }
.xp-spacer { margin-right: auto; }
.xp-icon-btn, .xp-theme-btn {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--xp-border); border-radius: 10px; background: var(--xp-surface); color: var(--xp-text);
    font-size: 17px; cursor: pointer; box-shadow: var(--xp-shadow);
}
.xp-icon-btn:hover, .xp-theme-btn:hover { border-color: var(--xp-accent); color: var(--xp-accent); }
.xp-user { display: flex; align-items: center; gap: 10px; color: var(--xp-text); background: var(--xp-surface); border: 1px solid var(--xp-border); padding: 4px 12px 4px 4px; border-radius: 999px; box-shadow: var(--xp-shadow); }
.xp-user:hover, .xp-user:focus-visible { border-color: var(--xp-accent); color: var(--xp-text); }
.xp-user img { width: 34px; height: 34px; border-radius: 50%; padding: 2px; background: var(--xp-grad); }
.xp-user span { font-size: .85rem; font-weight: 600; }

/* content area */
.xp-main {
    min-height: 100vh; display: flex; flex-direction: column;
    margin-left: var(--xp-sidebar-w); padding-top: var(--xp-topbar-h);
    background:
        radial-gradient(900px 420px at 85% -80px, color-mix(in srgb, var(--c-violet) 14%, transparent), transparent 70%),
        radial-gradient(700px 360px at 0% 0%, color-mix(in srgb, var(--c-sky) 10%, transparent), transparent 70%),
        var(--xp-bg);
    transition: margin-left .22s ease;
}
.xp-main > .xp-content { flex: 1 0 auto; padding: 24px; }
.xp-main, .xp-content, .xp-content .row > * { min-width: 0; }
.xp-app-bare .xp-main, .xp-app-no-sidebar .xp-main { margin-left: 0; }
.xp-app-bare .xp-main { padding-top: 0; }
.xp-app-no-sidebar .xp-topbar { left: 0; }

/* sidebar collapsed to an icon rail (desktop); expands over the content on hover/focus */
.xp-collapsed .xp-sidebar { width: var(--xp-sidebar-w-collapsed); }
.xp-collapsed .xp-topbar { left: var(--xp-sidebar-w-collapsed); }
.xp-collapsed .xp-main { margin-left: var(--xp-sidebar-w-collapsed); }
.xp-collapsed .xp-sidebar .nav-link-text, .xp-collapsed .xp-sidebar .xp-nav-search,
.xp-collapsed .xp-sidebar .nav-link::after, .xp-collapsed .xp-sidebar .collapse { display: none !important; }
.xp-collapsed .xp-sidebar .xp-brand img { max-width: 44px; object-fit: cover; object-position: left; }
.xp-collapsed .xp-sidebar:hover, .xp-collapsed .xp-sidebar:focus-within { width: var(--xp-sidebar-w); box-shadow: 12px 0 32px rgba(20, 16, 60, .35); }
.xp-collapsed .xp-sidebar:hover .nav-link-text, .xp-collapsed .xp-sidebar:focus-within .nav-link-text { display: block !important; }
.xp-collapsed .xp-sidebar:hover .xp-nav-search, .xp-collapsed .xp-sidebar:focus-within .xp-nav-search { display: block !important; }
.xp-collapsed .xp-sidebar:hover .nav-link::after, .xp-collapsed .xp-sidebar:focus-within .nav-link::after { display: block !important; }
.xp-collapsed .xp-sidebar:hover .collapse.show, .xp-collapsed .xp-sidebar:focus-within .collapse.show { display: block !important; }
.xp-collapsed .xp-sidebar:hover .xp-brand img, .xp-collapsed .xp-sidebar:focus-within .xp-brand img { max-width: none; }

.xp-backdrop { display: none; position: fixed; inset: 0; z-index: 1035; background: rgba(14, 10, 40, .6); backdrop-filter: blur(2px); }

/* footer */
.xp-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding: 16px 24px; color: var(--xp-text-muted); font-size: .8rem;
}
.xp-footer a { color: var(--xp-text); font-weight: 600; text-decoration: none; }
.xp-footer-links a { margin-left: 16px; font-weight: 500; color: var(--xp-text-muted); }
.xp-footer-links a:hover { color: var(--xp-accent); }

/* below 1200px the sidebar is an off-canvas drawer */
@media (max-width: 1199.98px) {
    .xp-topbar, .xp-collapsed .xp-topbar { left: 0; padding: 0 14px; }
    .xp-topbar .xp-brand-top { display: inline-flex; }
    .xp-main, .xp-collapsed .xp-main { margin-left: 0; }
    .xp-sidebar, .xp-collapsed .xp-sidebar { width: min(86vw, var(--xp-sidebar-w)); transform: translateX(-100%); box-shadow: none; }
    .xp-collapsed .xp-sidebar .nav-link-text, .xp-collapsed .xp-sidebar .xp-nav-search { display: block !important; }
    .xp-collapsed .xp-sidebar .nav-link::after { display: block !important; }
    .xp-collapsed .xp-sidebar .collapse.show { display: block !important; }
    .xp-collapsed .xp-sidebar .xp-brand img { max-width: none; }
    .xp-drawer-open .xp-sidebar { transform: none; box-shadow: 16px 0 40px rgba(14, 10, 40, .5); }
    .xp-drawer-open .xp-backdrop { display: block; }
    .xp-nav-close { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 575.98px) {
    .xp-main > .xp-content { padding: 16px 12px 20px; }
    .xp-user span { display: none; }
    .xp-user { padding: 4px; }
    .xp-footer { padding: 14px 16px; justify-content: center; text-align: center; }
}

/* =====================================================================
   Components
   ===================================================================== */

/* page header */
.xp-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.xp-page-title { font-size: 1.6rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.xp-page-sub { color: var(--xp-text-muted); font-size: .9rem; margin: 4px 0 0; }
.xp-live { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--xp-text-muted); padding: 6px 12px; border-radius: 999px; background: var(--xp-surface); border: 1px solid var(--xp-border); }
.xp-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--xp-text-muted); }
.xp-live.is-on { color: var(--xp-run-ink); }
.xp-live.is-on::before { background: var(--xp-run); animation: xp-pulse 1.8s ease-out infinite; }

/* hero banner */
.xp-hero {
    position: relative; overflow: hidden; color: #fff; border-radius: 24px; padding: 28px 32px; margin-bottom: 20px;
    background: var(--xp-grad); box-shadow: 0 20px 40px -18px rgba(99, 102, 241, .65);
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center;
}
.xp-hero::before, .xp-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .12); }
.xp-hero::before { width: 320px; height: 320px; right: -80px; top: -140px; }
.xp-hero::after { width: 200px; height: 200px; right: 160px; bottom: -120px; background: rgba(255, 255, 255, .08); }
.xp-hero > * { position: relative; z-index: 1; }
.xp-hero-eyebrow { font-size: .8rem; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: .08em; }
.xp-hero h2 { color: #fff; font-size: 1.7rem; font-weight: 800; margin: 6px 0 6px; line-height: 1.2; }
.xp-hero p { margin: 0; opacity: .9; max-width: 46ch; }
.xp-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.xp-hero-stat { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; padding: 12px 14px; backdrop-filter: blur(6px); }
.xp-hero-stat b { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.xp-hero-stat span { font-size: .72rem; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }

/* KPI cards */
.xp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.xp-kpi { --k: var(--c-indigo); position: relative; overflow: hidden; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.xp-kpi::after { content: ""; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 50%; background: color-mix(in srgb, var(--k) 14%, transparent); }
.xp-kpi-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.xp-kpi-ico {
    width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
    border-radius: 13px; background: linear-gradient(135deg, var(--k), color-mix(in srgb, var(--k) 55%, #fff)); box-shadow: 0 8px 16px -8px var(--k);
}
.xp-kpi-label { font-size: .78rem; font-weight: 600; color: var(--xp-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.xp-kpi-value { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; position: relative; z-index: 1; }
.xp-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--xp-text-muted); position: relative; z-index: 1; }
.xp-kpi .xp-spark { flex: 0 0 auto; }
.xp-trend { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .75rem; padding: 2px 8px; border-radius: 999px; }
.xp-trend.up { background: var(--xp-run-tint); color: var(--xp-run-ink); }
.xp-trend.down { background: var(--xp-stop-tint); color: var(--xp-stop-ink); }
.xp-trend.flat { background: var(--xp-surface-2); color: var(--xp-text-muted); }
.xp-kpi.is-run { --k: var(--c-emerald); } .xp-kpi.is-stop { --k: var(--c-rose); } .xp-kpi.is-idle { --k: var(--c-amber); }
.xp-kpi.is-sky { --k: var(--c-sky); } .xp-kpi.is-violet { --k: var(--c-violet); } .xp-kpi.is-teal { --k: var(--c-teal); }

/* panels (chart cards) */
.xp-panels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.xp-panel { padding: 20px; min-width: 0; }
.xp-panel.span-4 { grid-column: span 4; } .xp-panel.span-5 { grid-column: span 5; } .xp-panel.span-6 { grid-column: span 6; }
.xp-panel.span-7 { grid-column: span 7; } .xp-panel.span-8 { grid-column: span 8; } .xp-panel.span-12 { grid-column: span 12; }
.xp-panel-title { font-size: 1rem; font-weight: 700; margin: 0 0 2px; }
.xp-panel-sub { font-size: .8rem; color: var(--xp-text-muted); margin: 0 0 16px; }
@media (max-width: 991.98px) { .xp-panel[class*="span-"] { grid-column: span 12; } .xp-hero { grid-template-columns: 1fr; padding: 22px 20px; } }

/* donut / ring */
.xp-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.xp-donut svg { flex: 0 0 auto; max-width: 100%; height: auto; }
.xp-donut-center-big { font-size: 26px; font-weight: 800; fill: var(--xp-text); }
.xp-donut-center-small { font-size: 11px; font-weight: 600; fill: var(--xp-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.xp-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 140px; }
.xp-legend li { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.xp-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: 0 0 auto; }
.xp-legend b { margin-left: auto; padding-left: 12px; font-weight: 700; }
.xp-legend small { color: var(--xp-text-muted); font-weight: 500; }
.xp-ring-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.xp-ring-text { font-size: 17px; font-weight: 800; fill: var(--xp-text); }

/* ranking / progress bars */
.xp-bars { display: grid; gap: 14px; }
.xp-bar-row { display: grid; gap: 6px; }
.xp-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .85rem; }
.xp-bar-head b { font-weight: 600; overflow-wrap: anywhere; }
.xp-bar-head span { color: var(--xp-text-muted); font-size: .78rem; white-space: nowrap; }
.xp-bar-track { height: 10px; border-radius: 999px; background: var(--xp-surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--xp-border); }
.xp-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }

/* shift timeline */
.xp-timeline { display: grid; gap: 6px; }
.xp-timeline-track { position: relative; display: flex; height: 22px; border-radius: 8px; overflow: hidden; background: var(--xp-surface-2); box-shadow: inset 0 0 0 1px var(--xp-border); }
.xp-timeline-seg { height: 100%; min-width: 2px; }
.xp-timeline-seg.running { background: var(--xp-run); } .xp-timeline-seg.stopped { background: var(--xp-stop); } .xp-timeline-seg.ideal { background: var(--xp-idle); }
.xp-timeline-axis { display: flex; justify-content: space-between; font-size: .7rem; color: var(--xp-text-muted); }

/* heat cells (filling status matrices) */
.xp-heat { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 8px; border-radius: 8px; font-size: .75rem; font-weight: 700; }
.xp-heat.ok { background: var(--xp-run-tint); color: var(--xp-run-ink); }
.xp-heat.nf { background: var(--xp-stop-tint); color: var(--xp-stop-ink); }
.xp-heat.part { background: var(--xp-idle-tint); color: var(--xp-idle-ink); }
.xp-cell-ok { background: color-mix(in srgb, var(--xp-run) 22%, transparent) !important; }
.xp-cell-nf { background: color-mix(in srgb, var(--xp-stop) 26%, transparent) !important; color: var(--xp-stop-ink); font-weight: 700; font-size: .7rem; }

/* pills / badges */
.xp-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; 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, .xp-pill.ok { background: var(--xp-run-tint); color: var(--xp-run-ink); }
.xp-pill.stopped, .xp-pill.nf { background: var(--xp-stop-tint); color: var(--xp-stop-ink); }
.xp-pill.ideal, .xp-pill.part { background: var(--xp-idle-tint); color: var(--xp-idle-ink); }
.xp-pill.running::before { animation: xp-pulse 1.8s ease-out infinite; }
.xp-pill.is-slow::before { animation: xp-blink 1s steps(2) infinite; }
.badge-success, .badge-warning, .badge-danger { border-radius: 999px; padding: .4em .8em; font-weight: 700; }

/* filter bar */
.xp-filterbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; padding: 18px 20px; margin-bottom: 20px; }
.xp-filterbar label { display: block; font-size: .75rem; font-weight: 600; color: var(--xp-text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.xp-filterbar > div { margin: 0; }

/* category / product tiles */
.xp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.xp-tile {
    --t: var(--c-indigo);
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px;
    background: var(--xp-surface); color: var(--xp-text); border: 1px solid var(--xp-border); border-radius: var(--xp-radius);
    box-shadow: var(--xp-shadow); cursor: pointer; text-decoration: none; min-height: 168px;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.xp-tile::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--t), color-mix(in srgb, var(--t) 50%, #fff)); }
.xp-tile::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--t) 12%, transparent); }
.xp-tile:hover { transform: translateY(-4px); box-shadow: var(--xp-shadow-hover); border-color: color-mix(in srgb, var(--t) 55%, var(--xp-border)); color: var(--xp-text); text-decoration: none; }
.xp-tile > * { position: relative; z-index: 1; }
.xp-tile-icon-wrap {
    width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--t) 22%, #fff), color-mix(in srgb, var(--t) 8%, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 28%, transparent);
}
:root[data-theme="dark"] .xp-tile-icon-wrap { background: color-mix(in srgb, var(--t) 20%, var(--xp-surface)); }
.xp-tile-icon { width: 38px; height: 38px; object-fit: contain; }
.xp-tile-name { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.xp-tile-action { font-size: .78rem; font-weight: 600; color: var(--t); }
.xp-tile-count {
    position: absolute; top: 14px; right: 14px; z-index: 2; min-width: 32px; padding: 3px 10px; text-align: center;
    border-radius: 999px; color: #fff; font-size: .8rem; font-weight: 800; background: linear-gradient(135deg, var(--t), color-mix(in srgb, var(--t) 55%, #fff));
}
.xp-empty { padding: 48px 16px; text-align: center; color: var(--xp-text-muted); }

/* machine cards (RPM) */
.xp-grid { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.xp-grid > [id^="card_"] { padding: 8px; display: flex; }
.xp-machine { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; border-left: 6px solid var(--xp-border); }
.xp-machine.running { border-left-color: var(--xp-run); } .xp-machine.stopped { border-left-color: var(--xp-stop); } .xp-machine.ideal { border-left-color: var(--xp-idle); }
.xp-machine-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.xp-machine-name { font-size: 1.05rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.xp-machine-time { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.xp-machine-meta { font-size: .78rem; color: var(--xp-text-muted); }
.xp-machine-body { flex: 1 1 auto; padding: 12px 18px 8px; }
.xp-machine-body:has(> .hk-row:empty) { display: none; }
.xp-machine-foot { border-top: 1px solid var(--xp-border); background: var(--xp-surface-2); text-align: center; margin-top: auto; }
.xp-machine-foot a { display: block; padding: 10px; font-size: .85rem; font-weight: 600; color: var(--xp-accent); text-decoration: none; }
.xp-machine-foot a:hover { text-decoration: underline; }
.xp-machine.xp-solid .xp-machine-head { color: #fff; }
.xp-machine.xp-solid .xp-machine-meta { color: rgba(255, 255, 255, .88); }
.xp-machine.xp-solid.running .xp-machine-head { background: linear-gradient(135deg, #10b981, #059669); }
.xp-machine.xp-solid.stopped .xp-machine-head { background: linear-gradient(135deg, #fb7185, #e11d48); }
.xp-machine.xp-solid.ideal .xp-machine-head { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #2b1d00; }
.xp-machine.xp-solid.ideal .xp-machine-meta { color: rgba(43, 29, 0, .8); }
.xp-machine.xp-solid .xp-pill { background: rgba(255, 255, 255, .24); color: inherit; }
.xp-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 991.98px) { .xp-summary { grid-template-columns: repeat(2, 1fr); } }
.xp-stat { padding: 14px 18px; border-left: 5px solid var(--xp-border); }
.xp-stat .xp-stat-n { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.xp-stat .xp-stat-l { font-size: .75rem; font-weight: 600; color: var(--xp-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.xp-stat.running { border-left-color: var(--xp-run); } .xp-stat.stopped { border-left-color: var(--xp-stop); } .xp-stat.ideal { border-left-color: var(--xp-idle); }

/* ---------- legacy report shell (.hk-sec-wrapper > .card-header + .card-body with .callout filters) ---------- */
.hk-sec-wrapper { padding: 20px; }
.hk-sec-wrapper > .card-header { background: transparent; border-bottom: 1px solid var(--xp-border); padding: 0 0 14px; margin-bottom: 18px; }
.hk-sec-wrapper > .card-header h5, .hk-sec-title { font-size: 1.15rem; font-weight: 800; color: var(--xp-text); margin: 0; }
.hk-sec-wrapper .btn-light { background: var(--xp-surface-2); border: 1px solid var(--xp-border); color: var(--xp-text); border-radius: 8px; min-width: 34px; min-height: 32px; }
.hk-sec-wrapper .btn-light:hover { border-color: var(--xp-accent); color: var(--xp-accent); }
.callout { background: var(--xp-surface-2); border: 1px solid var(--xp-border); border-left: 4px solid var(--xp-accent); border-radius: 12px; padding: 10px 14px; }
.callout small { display: block; font-size: .72rem; font-weight: 700; color: var(--xp-text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
/* column headers get the gradient; title rows inside a dark thead (they carry .bg-white / .bg-light) keep a light surface */
.table thead.table-dark th, .table thead.table-dark td:not([class*="bg-"]), .table .thead-dark th { background: linear-gradient(135deg, #2d1f6e, #4a1d7a); border-color: #3b2a85; color: #fff; }
.table thead.table-dark td.bg-white, .table thead.table-dark th.bg-white { background: var(--xp-surface) !important; color: var(--xp-text) !important; }
.table thead.table-dark td.bg-white h4, .table thead.table-dark td.bg-white b { color: var(--xp-text); }
@media print { .table thead.table-dark td.bg-white { background: #fff !important; color: #000 !important; } }
.table-hover tbody tr:hover { background-color: color-mix(in srgb, var(--xp-accent) 8%, transparent); }
.table td, .table th { vertical-align: middle; }
:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); }
.table-responsive, .xp-content .dataTables_wrapper { max-width: 100%; overflow-x: auto; }
.xp-content img, .xp-content canvas, .xp-content svg { max-width: 100%; }

/* =====================================================================
   Standalone pages: login, 404, narrow cards
   ===================================================================== */
.xp-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--xp-bg); }
.xp-auth-aside { position: relative; overflow: hidden; background: var(--xp-nav-grad); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.xp-auth-aside::before { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 70, 239, .5), transparent 70%); }
.xp-auth-aside::after { content: ""; position: absolute; width: 380px; height: 380px; left: -120px; bottom: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(14, 165, 233, .45), transparent 70%); }
.xp-auth-aside > * { position: relative; z-index: 1; }
.xp-auth-aside > img { max-height: 44px; align-self: flex-start; background: #fff; border-radius: 12px; padding: 4px 12px; }
.xp-auth-aside h2 { font-size: 2rem; font-weight: 800; line-height: 1.2; max-width: 16ch; margin: 0 0 16px; color: #fff; }
.xp-auth-aside p { color: rgba(255, 255, 255, .78); max-width: 38ch; margin: 0; }
.xp-auth-states { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.xp-auth-states span { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); }
.xp-auth-states span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.xp-auth-main { display: flex; align-items: center; justify-content: center; padding: 32px 20px; min-width: 0; }
.xp-auth-card { width: 100%; max-width: 420px; min-width: 0; background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: 24px; padding: 32px; box-shadow: var(--xp-shadow); }
.xp-auth-card h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 4px; color: var(--xp-text); }
.xp-auth-card .xp-page-sub { margin-bottom: 24px; }
.xp-field { margin-bottom: 16px; }
.xp-field label { display: block; font-size: .78rem; font-weight: 600; color: var(--xp-text-muted); margin-bottom: 6px; }
.xp-field input { width: 100%; height: 40px; padding: 0 14px; font: inherit; color: var(--xp-text); background: var(--xp-surface); border: 1px solid var(--xp-border); border-radius: 12px; }
.xp-field input:focus { outline: none; border-color: var(--xp-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xp-accent) 22%, transparent); }
.xp-field input:read-only { background: var(--xp-surface-2); color: var(--xp-text-muted); }
.xp-pw { position: relative; }
.xp-pw input { padding-right: 64px; }
.xp-pw button { position: absolute; right: 4px; top: 4px; height: 38px; padding: 0 12px; border: 0; background: transparent; color: var(--xp-accent); font-size: .8rem; font-weight: 700; border-radius: 8px; cursor: pointer; }
.xp-btn { width: 100%; height: 42px; border: 1px solid #3a3fd0; border-bottom-width: 3px; border-radius: 12px; cursor: pointer; background: #4f52e8; color: #fff; font: inherit; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(79, 82, 232, .9); transition: transform .12s ease, box-shadow .12s ease; }
.xp-btn:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: none; }
.xp-btn:hover { background: #4347e0; transform: translateY(-1px); }
.xp-btn:disabled { opacity: .6; cursor: wait; }
.xp-msg { display: none; padding: 10px 12px; border-radius: 10px; font-size: .85rem; margin-bottom: 16px; }
.xp-msg.is-error { display: block; background: var(--xp-stop-tint); color: var(--xp-stop-ink); }
.xp-msg.is-info { display: block; background: var(--xp-run-tint); color: var(--xp-run-ink); }
.xp-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--xp-bg); color: var(--xp-text); font-family: var(--xp-font); }
.xp-404 { font-size: clamp(5rem, 16vw, 9rem); font-weight: 800; line-height: 1; margin: 0; background: var(--xp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xp-center p { color: var(--xp-text-muted); margin: 12px 0 24px; }
.xp-center .xp-btn { display: inline-block; width: auto; padding: 14px 28px; line-height: 20px; text-decoration: none; }
.xp-card-narrow { max-width: 480px; margin: 24px auto; padding: 32px; }
.xp-card-narrow h1 { font-size: 1.4rem; font-weight: 800; margin: 0 0 4px; }
/* login captcha */
.xp-captcha { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.xp-captcha canvas { flex: 1 1 auto; min-width: 0; max-width: 100%; height: 48px; border: 1px solid var(--xp-border); border-radius: 12px; background: #fff; user-select: none; }
.xp-captcha-refresh { flex: 0 0 42px; border: 1px solid var(--xp-border); border-radius: 12px; background: var(--xp-surface); color: var(--xp-accent); font-size: 22px; line-height: 1; cursor: pointer; }
.xp-captcha-refresh:hover { border-color: var(--xp-accent); }
#captcha_input { letter-spacing: .2em; font-variant-numeric: tabular-nums; }
#captcha_input::placeholder { letter-spacing: 0; }

/* login panel: per-client product content */
.xp-auth-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: 10px; }
.xp-auth-products { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; max-width: 420px; }
.xp-auth-products li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.xp-auth-product-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.xp-auth-product-ico img { width: 28px; height: 28px; object-fit: contain; }
.xp-auth-products b { display: block; font-size: .92rem; font-weight: 700; }
.xp-auth-products small { display: block; font-size: .78rem; color: rgba(255, 255, 255, .75); }
@media (max-width: 767px) {
    .xp-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .xp-auth-products, .xp-auth-eyebrow { display: none; }
    .xp-auth-aside { padding: 22px 20px; gap: 12px; justify-content: flex-start; }
    .xp-auth-aside h2 { font-size: 1.3rem; margin-bottom: 8px; }
    .xp-auth-states, .xp-auth-aside p, .xp-auth-aside small { display: none; }
    .xp-auth-card { padding: 24px 20px; border-radius: 20px; }
}

/* ---------- motion, phones, print ---------- */
@keyframes xp-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes xp-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
    .xp-live.is-on::before, .xp-pill::before { animation: none !important; }
    .xp-tile, .xp-sidebar, .xp-main, .xp-topbar, .xp-bar-fill, .xp-menu .nav-link::after { transition: none !important; }
    .xp-tile:hover { transform: none; }
}
@media (max-width: 575.98px) {
    .xp-page-title { font-size: 1.3rem; }
    .xp-filterbar { grid-template-columns: 1fr 1fr; padding: 14px; }
    .xp-filterbar .xp-wide { grid-column: 1 / -1; }
    .xp-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .xp-tile { padding: 14px; min-height: 150px; }
    .xp-hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .xp-hero-stat { padding: 10px; } .xp-hero-stat b { font-size: 1.3rem; }
    .xp-kpis { grid-template-columns: 1fr 1fr; gap: 12px; } .xp-kpi { padding: 14px; } .xp-kpi-value { font-size: 1.6rem; }
    .xp-machine-time { font-size: 1.3rem; }
    .xp-grid > [id^="card_"] { flex: 0 0 100%; max-width: 100%; }
    .modal-dialog { margin: .5rem; } .modal-body { padding: .75rem; }
    .btn, .form-control, .form-select { min-height: 38px; }
    .hk-sec-wrapper { padding: 14px; }
    .hk-sec-wrapper > .card-header { flex-wrap: wrap; gap: 8px; }
}

/* Never print the dark theme or the screen chrome: reports print on white. */
@media print {
    :root, :root[data-theme="dark"] {
        --xp-bg: #fff; --xp-surface: #fff; --xp-surface-2: #f7f7fd; --xp-border: #dcdff0;
        --xp-text: #1b1b3a; --xp-text-muted: #55597a; --xp-accent: #6366f1;
        --xp-run-tint: #d8f7ea; --xp-run-ink: #0b7a55; --xp-stop-tint: #ffe1e7; --xp-stop-ink: #be1238; --xp-idle-tint: #fdefcf; --xp-idle-ink: #8a5a00;
    }
    body { background: #fff !important; color: #1b1b3a !important; }
    .xp-topbar, .xp-sidebar, .xp-footer, .xp-backdrop, .xp-icon-btn, .xp-theme-btn, .xp-filterbar { display: none !important; }
    .xp-main { margin-left: 0 !important; padding-top: 0 !important; background: #fff !important; }
    .xp-main > .xp-content { padding: 0; }
    .card, .hk-sec-wrapper { box-shadow: none; }
    .hk-sec-wrapper { padding: 0; border: 0; }
    .xp-hero, .xp-kpi::after, .xp-tile::after { display: none !important; }
}

/* login card: decorative infographic tiles (shapes only) */
.xp-card-viz { display: flex; gap: 10px; margin-bottom: 22px; }
.xp-viz-tile {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px;
    border-radius: 14px; border: 1px solid var(--xp-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--xp-accent) 10%, var(--xp-surface)), color-mix(in srgb, var(--c-fuchsia) 8%, var(--xp-surface)));
}
.xp-viz-tile svg { max-width: 100%; height: auto; }
.xp-viz-tile span { max-width: 100%; font-size: .66rem; font-weight: 700; color: var(--xp-text-muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="dark"] .xp-viz-tile svg [fill="#e6e8f4"] { fill: #2b2e57; }
:root[data-theme="dark"] .xp-viz-tile svg [stroke="#e6e8f4"] { stroke: #2b2e57; }
.xp-menu .collapse-level-1 .nav-link[data-bs-toggle="collapse"]::after { margin-top: 7px; } /* arrow of a nested group lines up with its first text line */

/* ---------- report table borders: clearly visible on screen and in print, so a printout can be submitted as a report ---------- */
:root { --xp-grid: #8f96bd; }
:root[data-theme="dark"] { --xp-grid: #565c96; }
.table-bordered, .table-bordered > :not(caption) > * > *, .table-bordered > :not(caption) > * { border-color: var(--xp-grid); border-width: 1px; }
.table-bordered { border: 1px solid var(--xp-grid); border-collapse: collapse; }
.table-bordered > thead > tr:last-child > * { border-bottom-width: 2px; } /* heavier line under the column headers */
@media print {
    :root, :root[data-theme="dark"] { --xp-grid: #222; }
    .table-bordered, .table-bordered > :not(caption) > * > *, .table-bordered > :not(caption) > * { border-color: #222 !important; border-style: solid !important; border-width: 1px !important; }
    .table-bordered { border-collapse: collapse !important; border-width: 1.5px !important; }
    .table-bordered > thead > tr:last-child > * { border-bottom-width: 2px !important; }
    table { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* keep green/red cell fills and header colours on paper */
    .xp-cell-ok, .xp-cell-nf, .xp-heat, .xp-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media print {
    /* Bootstrap's dark colour mode sets light text; paper is always white, so restore dark text */
    :root, :root[data-bs-theme="dark"] {
        color-scheme: light;
        --bs-body-color: #1b1b3a; --bs-body-bg: #fff; --bs-emphasis-color: #000; --bs-secondary-color: #55597a;
        --bs-tertiary-bg: #f7f7fd; --bs-border-color: #222;
    }
    .table { --bs-table-color: #111; --bs-table-bg: transparent; --bs-table-striped-bg: transparent; color: #111; }
    .table > :not(caption) > * > * { color: #111; background-color: var(--bs-table-bg); }
    .table thead.table-dark th, .table thead.table-dark td:not([class*="bg-"]) { background: #e9eaf6 !important; color: #000 !important; } /* ink-friendly header row */
}

/* header clock */
.xp-clock {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
    border: 1px solid var(--xp-border); border-radius: 999px; background: var(--xp-surface); box-shadow: var(--xp-shadow);
    font-size: .82rem; color: var(--xp-text-muted); white-space: nowrap;
}
.xp-clock i { color: var(--xp-accent); font-size: 15px; }
.xp-clock-time { color: var(--xp-text); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .xp-clock-date { display: none; } }
@media (max-width: 400px) { .xp-clock { padding: 0 10px; } .xp-clock i { display: none; } }
@media print { .xp-clock { display: none !important; } }
@media (max-width: 575.98px) { /* keep the whole top bar on screen on phones */
    .xp-topbar { gap: 6px; padding: 0 10px; }
    .xp-topbar .xp-brand-top img { max-height: 26px; }
    .xp-clock { padding: 0 10px; font-size: .78rem; } .xp-clock i { display: none; }
    .xp-user.dropdown-toggle::after { display: none; }
}

/* ---------- date range picker (bootstrap-daterangepicker): follow the theme tokens, readable in dark mode ---------- */
body .daterangepicker { background: var(--xp-surface); color: var(--xp-text); border: 1px solid var(--xp-border); border-radius: 14px; box-shadow: var(--xp-shadow-hover); font-family: var(--xp-font); overflow: hidden; }
body .daterangepicker:before { border-bottom-color: var(--xp-border); }
body .daterangepicker:after { border-bottom-color: var(--xp-surface); }
body .daterangepicker.drop-up:before { border-top-color: var(--xp-border); }
body .daterangepicker.drop-up:after { border-top-color: var(--xp-surface); }
body .daterangepicker .ranges li { color: var(--xp-text); border-radius: 8px; margin: 2px 6px; padding: 8px 12px; }
body .daterangepicker .ranges li:hover { background: var(--xp-surface-2); color: var(--xp-accent); }
body .daterangepicker .ranges li.active { background: var(--xp-accent); color: #fff; }
body .daterangepicker .calendar-table { background: var(--xp-surface); border: 0; }
body .daterangepicker .calendar-table th, body .daterangepicker .calendar-table td { color: var(--xp-text); border-radius: 8px; }
body .daterangepicker .calendar-table th { color: var(--xp-text-muted); font-weight: 700; }
body .daterangepicker td.off, body .daterangepicker td.off.in-range, body .daterangepicker td.off.start-date, body .daterangepicker td.off.end-date { background: transparent; color: var(--xp-text-muted); opacity: .55; }
body .daterangepicker td.available:hover, body .daterangepicker th.available:hover { background: var(--xp-surface-2); color: var(--xp-accent); }
body .daterangepicker td.in-range { background: color-mix(in srgb, var(--xp-accent) 16%, var(--xp-surface)); color: var(--xp-text); }
body .daterangepicker td.active, body .daterangepicker td.active:hover { background: var(--xp-accent); color: #fff; }
body .daterangepicker td.disabled, body .daterangepicker option.disabled { color: var(--xp-text-muted); opacity: .4; text-decoration: line-through; }
body .daterangepicker .calendar-table .next span, body .daterangepicker .calendar-table .prev span { border-color: var(--xp-text); }
body .daterangepicker select.monthselect, body .daterangepicker select.yearselect, body .daterangepicker select.hourselect, body .daterangepicker select.minuteselect, body .daterangepicker select.ampmselect {
    background: var(--xp-surface); color: var(--xp-text); border: 1px solid var(--xp-border); border-radius: 8px; padding: 2px 4px;
}
body .daterangepicker .drp-buttons { border-top: 1px solid var(--xp-border); }
body .daterangepicker .drp-selected { color: var(--xp-text-muted); }
body .daterangepicker .drp-buttons .btn { border-radius: 8px; font-weight: 700; }
body .daterangepicker .drp-buttons .btn.btn-default, body .daterangepicker .drp-buttons .btn.cancelBtn { background: var(--xp-surface-2); color: var(--xp-text); border: 1px solid var(--xp-border); }
body .daterangepicker .drp-buttons .btn.applyBtn { background: var(--xp-accent); border-color: var(--xp-accent); color: #fff; }
body .daterangepicker.show-calendar .ranges { border-right: 1px solid var(--xp-border); }
@media (max-width: 575.98px) { body .daterangepicker { max-width: calc(100vw - 16px); } }

/* timeline drawn at real positions (see XP.timelineAt) */
.xp-timeline-track.is-at { display: block; position: relative; }
.xp-timeline-seg.at { position: absolute; top: 0; bottom: 0; }
.xp-timeline-now { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--xp-text); border-radius: 2px; z-index: 2; }
.xp-timeline-ticks { position: relative; height: 16px; margin-top: 4px; font-size: .68rem; color: var(--xp-text-muted); }
.xp-timeline-tick { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.xp-timeline-tick:first-child { transform: none; }
.xp-timeline-tick:last-child { transform: translateX(-100%); }