/* =========================
   SYSTEM COLOR ENGINE
   ========================= */
:root {
    /* === BRAND DEFAULTS ===
       House defaults so the platform is themeable WITHOUT a per-brand stylesheet.
       White-label injects :root{--MainColor:...} per host (pre-login) / per admin
       (post-login) to override --MainColor. --TextOverMain / --LoginLogoBackColor
       were identical across every legacy brand file, so they live here as constants.
       (These replace the retired accountadmin getsystemimage?type=512 brand vars.) */
    --MainColor: #36454f;
    --TextOverMain: #f2f4f3;
    --LoginLogoBackColor: #ffffff;
    /* === INPUTS (only these change per theme) === */
    /* === DERIVED COLORS (do not edit per theme) === */
    --ButtonColor: var(--MainColor);
    --bg: var(--BackGround); /* change this = whole UI shifts */
    --main: var(--MainColor);
    /* Text poles (never pure black/white) */
    /* fallback default */
    /* Decide readable text color purely from bg */
    --text-base: var(--Text);
    --text-base-over-main: var(--TextOverMain);
    /* Surfaces derived from bg */
    --surface: color-mix(in srgb, var(--bg), var(--MainColor) 4%);
    --surface-1: color-mix(in srgb, var(--bg), var(--MainColor) 8%);
    --surface-2: color-mix(in srgb, var(--bg), var(--MainColor) 14%);
    --surface-3: color-mix(in srgb, var(--bg), var(--MainColor) 20%);
    --surface-4: color-mix(in srgb, var(--bg), var(--MainColor) 40%);
    --surface-5: color-mix(in srgb, var(--bg), var(--MainColor) 60%);
    --surface-6: color-mix(in srgb, var(--bg), var(--MainColor) 80%);
    /* Text hierarchy */
    --text: color-mix(in srgb, var(--text-base) 92%, var(--bg));
    --text-muted: color-mix(in srgb, var(--text-base) 72%, var(--bg));
    --text-subtle: color-mix(in srgb, var(--text-base) 60%, var(--bg));
    /* Text hierarchy */
    --text-over-main: color-mix(in srgb, var(--text-base-over-main) 92%, var(--bg));
    --text-muted-over-main: color-mix(in srgb, var(--text-base-over-main) 72%, var(--bg));
    --text-subtle-over-main: color-mix(in srgb, var(--text-base-over-main) 60%, var(--bg));
    /* Borders */
    --border: color-mix(in srgb, var(--bg), var(--text-base) 12%);
    --border-strong: color-mix(in srgb, var(--bg), var(--text-base) 18%);
    /* Accent */
    --main-hard: color-mix(in srgb, var(--main), transparent 22%);
    --main-soft: color-mix(in srgb, var(--main), transparent 72%);
    --main-border: color-mix(in srgb, var(--main), transparent 55%);
    --main-hover: color-mix(in srgb, var(--main), var(--text-base) 12%);
    /* Glass (derived from bg, not mode) */
    --glass-blur: 18px;
    --glass-tint: color-mix(in srgb, var(--bg), transparent 28%);
    --glass-border: color-mix(in srgb, var(--text-base), transparent 86%);
    --focus-ring: color-mix(in srgb, var(--main), transparent 75%);
    /* Bottom is a lighter version of main */
    --main-light: color-mix( in srgb, var(--main), white 28% );
    /* Optional softer variant (for subtle areas) */
    --main-lighter: color-mix( in srgb, var(--main), white 45% );
    /* Linear gradient helpers */
    --main-gradient: linear-gradient( 180deg, var(--main) 0%, var(--main-light) 100% );
    --main-gradient-soft: linear-gradient( 180deg, var(--main) 0%, var(--main-lighter) 100% );
    --surface-hover: color-mix(in srgb, var(--bg), var(--MainColor) 80%);
}


    :root:not([data-theme]) {
        --BackGround: #2b2b2b;
        --Text: #f4f6f6;
    }


    /* 2) Dark theme overrides */
    :root[data-theme="dark"] {
        --BackGround: #2b2b2b;
        --Text: #f4f6f6;
    }

    /* 3) Light theme overrides (optional if :root already is light) */
    :root[data-theme="light"] {
        --BackGround: #f4f6f6;
        --Text: #2b2b2b;
    }


/* default for dark bg */
@supports (color: color-contrast(#333 vs white, black)) {
    :root {
        --text-base: color-contrast(var(--bg) vs var(--paper), var(--ink));
    }
}

:root {
    --text: color-mix(in srgb, var(--text-base) 92%, var(--bg));
}


/* Cards / surfaces */
.ui-card {
    background: var(--main-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 5px 10px 5px 5px;
    background: linear-gradient( 180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02) ), var(--main-soft);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
}

.ui-card-2 {
    background: var(--main-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 5px 10px 5px 5px;
    background: linear-gradient( 180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02) ), var(--surface-2);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
}
/* Typography helpers */
.ui-title {
    font-weight: 700;
    color: var(--text);
}

.ui-muted {
    color: var(--text-muted);
}

.ui-subtle {
    color: var(--text-subtle);
}

/* =========================
   BUTTONS
   ========================= */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.ui-btn {
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface), white 4%);
    color: var(--text);
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    box-sizing: border-box;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    /* Hover */
    button:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    .ui-btn:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
    }

    /* Focus */
    button:focus-visible,
    input[type="button"]:focus-visible,
    input[type="submit"]:focus-visible,
    input[type="reset"]:focus-visible,
    .ui-btn:focus-visible {
        outline: none;
        border-color: var(--main-border);
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

    /* Active */
    button:active,
    input[type="button"]:active,
    input[type="submit"]:active,
    input[type="reset"]:active,
    .ui-btn:active {
        transform: translateY(1px);
    }

    /* Disabled */
    button:disabled,
    input[type="button"]:disabled,
    input[type="submit"]:disabled,
    input[type="reset"]:disabled,
    .ui-btn:disabled,
    .ui-btn.is-disabled {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.ui-btn-primary {
    background: var(--main);
    border-color: var(--main-border);
    color: var(--text-over-main);
}

    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .ui-btn-primary:hover {
        background: var(--main-hover);
    }

.ui-iconbtn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface), white 3%);
    color: var(--text);
    cursor: pointer;
}

    .ui-iconbtn:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
    }

/* =========================
   INPUTS (text-like only)
   ========================= */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
.ui-input {
    width: 100%;
    padding: 9px 10px;
    border-radius: 12px;
    /* Softer border for glass */
    border: 1px solid color-mix(in srgb, var(--border), transparent 35%);
    /* Frosted / glassy fill (instead of solid grey) */
    background: color-mix(in srgb, var(--surface), transparent 45%);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    color: var(--text);
    outline: none;
    box-sizing: border-box;
    /* Depth without heaviness */
    box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 55%), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease, background 120ms ease;
}

    /* Optional: small hover lift */
    input[type="text"]::placeholder,
    input[type="search"]::placeholder,
    input[type="email"]::placeholder,
    input[type="password"]::placeholder,
    input[type="tel"]::placeholder,
    input[type="number"]::placeholder {
        color: var(--text-muted);
    }

    /* Optional: small hover lift */
    input[type="text"]:hover,
    input[type="search"]:hover,
    input[type="email"]:hover,
    input[type="password"]:hover,
    input[type="tel"]:hover,
    input[type="number"]:hover,
    textarea:hover,
    .ui-input:hover {
        background: color-mix(in srgb, var(--surface), transparent 35%);
        border-color: color-mix(in srgb, var(--border-strong, var(--border)), transparent 25%);
    }

    /* Focus styles */
    input[type="text"]:focus,
    input[type="search"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="tel"]:focus,
    input[type="number"]:focus,
    textarea:focus,
    .ui-input:focus,
    input[type="text"]:focus-visible,
    input[type="search"]:focus-visible,
    input[type="email"]:focus-visible,
    input[type="password"]:focus-visible,
    input[type="tel"]:focus-visible,
    input[type="number"]:focus-visible,
    textarea:focus-visible,
    .ui-input:focus-visible {
        /* Make focus feel premium but not neon */
        border-color: color-mix(in srgb, var(--main), white 35%);
        background: color-mix(in srgb, var(--surface), transparent 25%);
        box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 50%), 0 0 0 3px var(--focus-ring), 0 6px 18px rgba(0, 0, 0, 0.12);
    }

    /* Readonly/disabled shouldn't look "dead grey" */
    input[readonly],
    textarea[readonly],
    .ui-input[readonly],
    input:disabled,
    textarea:disabled,
    .ui-input:disabled {
        background: color-mix(in srgb, var(--surface), transparent 60%);
        color: var(--text-muted, var(--text));
        box-shadow: none;
        opacity: 1; /* stop the browser washing it out */
    }

/* Keep your size helper */
.ui-input-sm {
    width: 80px;
}


/* =========================
   SELECT / DROPDOWN STYLES
   (compact: 4px shorter)
   ========================= */
select,
.ui-select,
.GTDropdown {
    width: 100%;
    padding: 7px 40px 7px 12px; /* ↓ 4px total height vs 9px/9px */
    border-radius: 12px;
    border: 1px solid var(--border);
    background-color: color-mix(in srgb, var(--surface) 88%, black 12%);
    color: color-mix(in srgb, var(--text) 92%, white 8%);
    -webkit-text-fill-color: color-mix(in srgb, var(--text) 92%, white 8%);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--text) 85%, white 15%) 50%), linear-gradient(135deg, color-mix(in srgb, var(--text) 85%, white 15%) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

    /* Hover */
    select:hover,
    .ui-select:hover,
    .GTDropdown:hover {
        border-color: var(--border-strong);
        background-color: color-mix(in srgb, var(--surface) 82%, black 18%);
    }

    /* Focus */
    select:focus,
    select:focus-visible,
    .ui-select:focus,
    .ui-select:focus-visible,
    .GTDropdown:focus,
    .GTDropdown:focus-visible {
        border-color: var(--main-border);
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

    /* Placeholder / unselected */
    select:required:invalid,
    select option[value=""] {
        color: color-mix(in srgb, var(--text) 55%, white 45%);
        -webkit-text-fill-color: color-mix(in srgb, var(--text) 55%, white 45%);
    }

    /* Options list (limited) */
    select option {
        background: var(--surface);
        color: var(--text);
    }

    /* Disabled */
    select:disabled,
    .ui-select:disabled,
    .GTDropdown:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background-color: color-mix(in srgb, var(--surface) 90%, black 10%);
    }

/* =========================
   TABS
   ========================= */
.ui-tabs-wrap {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 6px;
}

/* The actual tab list */
.ui-tabs {
    display: flex;
    gap: 8px;
    padding: 2px;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    /* hide scrollbar */
    scrollbar-width: none;
}

    .ui-tabs::-webkit-scrollbar {
        display: none;
    }


.ui-tab {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    flex: 0 0 auto;
}

    .ui-tab:hover {
        background: color-mix(in srgb, var(--surface), white 6%);
        color: var(--text);
    }

    .ui-tab.is-active,
    .ui-tab.is-active:hover,
    .ui-tab.is-active:active,
    .ui-tab.is-active:focus {
        background: var(--main-soft);
        border-color: var(--main-border);
        color: var(--text);
    }

    .ui-tab:focus,
    .ui-tab:active {
        outline: none;
        box-shadow: none;
    }

/* =====================================================
   UI DIALOG (generic)
   ===================================================== */
.ui-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
    color: var(--text);
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.ui-dialog__header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--surface), white 2%);
    border-bottom: 1px solid var(--border);
}

.ui-dialog__body {
    padding: 12px 14px;
    overflow: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0; /* ✅ critical for flex scrolling */
    overflow: hidden; /* body itself doesn't scroll */
}

.ui-dialog__footer {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: color-mix(in srgb, var(--surface), white 2%);
}

/* Optional size helpers */
.ui-dialog--sm {
    max-width: 420px;
}

.ui-dialog--md {
    max-width: 600px;
}

.ui-dialog--lg {
    max-width: 860px;
}

/* =========================
   GLASS CHECKBOX
   ========================= */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    /* Unchecked: frosted glass */
    background: color-mix(in srgb, var(--surface), transparent 45%);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid color-mix(in srgb, var(--border-strong), transparent 35%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 55%), 0 1px 3px rgba(0, 0, 0, 0.08);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    vertical-align: middle;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    /* Tick base */
    input[type="checkbox"]::before {
        content: "";
        width: 10px;
        height: 6px;
        border-left: 2px solid transparent;
        border-bottom: 2px solid transparent;
        transform: rotate(-45deg) scale(0.6);
        transition: transform 120ms ease, border-color 120ms ease;
    }

    /* Checked state */
    input[type="checkbox"]:checked {
        /* Main-driven fill */
        --cb-fill: color-mix(in srgb, var(--main), black 12%);
        background: var(--cb-fill);
        border-color: color-mix(in srgb, var(--main), black 25%);
        /* Auto-select readable tick color */
        --cb-tick: white;
    }

@supports (color: color-contrast(white vs black)) {
    input[type="checkbox"]:checked {
        --cb-tick: color-contrast( var(--cb-fill) vs white, #1f2326 );
    }
}

/* Checked tick */
input[type="checkbox"]:checked::before {
    border-left-color: var(--cb-tick);
    border-bottom-color: var(--cb-tick);
    transform: rotate(-45deg) scale(1);
}

/* Hover */
input[type="checkbox"]:hover {
    border-color: color-mix(in srgb, var(--border-strong), white 20%);
}

/* Active (press) */
input[type="checkbox"]:active {
    transform: translateY(1px);
}

/* Focus ring */
input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring), inset 0 1px 0 color-mix(in srgb, white, transparent 55%);
}

/* Disabled */
input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
}

/* =========================
   CHECKBOX ROW (recommended)
   ========================= */
label.check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    line-height: 1.2;
}

    /* =========================
   GLASS CHECKBOX
   ========================= */
    label.check input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        flex: 0 0 auto; /* don't stretch */
        width: 18px;
        height: 18px;
        border-radius: 6px;
        /* Unchecked: frosted */
        background: color-mix(in srgb, var(--surface), transparent 45%);
        backdrop-filter: blur(6px) saturate(120%);
        -webkit-backdrop-filter: blur(6px) saturate(120%);
        border: 1px solid color-mix(in srgb, var(--border-strong), transparent 35%);
        box-shadow: inset 0 1px 0 color-mix(in srgb, white, transparent 55%), 0 1px 3px rgba(0, 0, 0, 0.08);
        display: grid;
        place-items: center;
        margin: 0; /* kill default offset */
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
    }

        /* Tick */
        label.check input[type="checkbox"]::before {
            content: "";
            width: 10px;
            height: 6px;
            border-left: 2px solid transparent;
            border-bottom: 2px solid transparent;
            transform: rotate(-45deg) translateY(-0.5px) scale(0.6); /* tiny nudge */
            transform-origin: center;
            transition: transform 120ms ease, border-color 120ms ease;
        }

        /* Checked */
        label.check input[type="checkbox"]:checked {
            --cb-fill: color-mix(in srgb, var(--main), black 12%);
            background: var(--cb-fill);
            border-color: color-mix(in srgb, var(--main), black 25%);
            --cb-tick: white; /* fallback */
        }

@supports (color: color-contrast(white vs black)) {
    label.check input[type="checkbox"]:checked {
        --cb-tick: color-contrast(var(--cb-fill) vs white, #1f2326);
    }
}

label.check input[type="checkbox"]:checked::before {
    border-left-color: var(--cb-tick);
    border-bottom-color: var(--cb-tick);
    transform: rotate(-45deg) translateY(-0.5px) scale(1);
}

/* Hover */
label.check input[type="checkbox"]:hover {
    border-color: color-mix(in srgb, var(--border-strong), white 20%);
}

/* Active */
label.check input[type="checkbox"]:active {
    transform: translateY(1px);
}

/* Focus ring */
label.check input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring), inset 0 1px 0 color-mix(in srgb, white, transparent 55%);
}

/* Disabled */
label.check input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

    label.check input[type="checkbox"]:disabled + span {
        opacity: 0.7;
        cursor: not-allowed;
    }


/* Utility */
.ui-header {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;

}

/* Dialog headers: full-bleed title strip. Cancels the panel's 8px padding so the header colour
   runs from the dialog's very top edge to both sides (no inset "floating card"), squares off the
   bottom corners, and slims the bar. Scoped to dialogs so in-page ui-header panels keep their look. */
.GTDialog .ui-panel > .ui-card.ui-header {
    margin: -8px -8px 0 -8px;                 /* bleed through .ui-panel's padding */
    border-radius: 15px 15px 0 0;              /* nest inside .GTDialog's 16px outer radius */
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 4px 10px 4px 14px;                /* slimmer bar */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);   /* keep the sheen, drop the heavy drop-shadow */
}

    .GTDialog .ui-panel > .ui-card.ui-header .ui-title {
        font-size: 15px;
        line-height: 1.2;
    }

    /* Header buttons: ONE uniform row. The glass close's own styling (36px circle, offset
       drop-shadow, 50% radius) made it sit visually off against the square buttons beside it —
       inside a dialog header every icon button gets the same size, radius, background and
       baseline, so refresh / full-screen / pop-out / close align perfectly. */
    .GTDialog .ui-panel > .ui-card.ui-header .ui-iconbtn,
    .GTDialog .ui-panel > .ui-card.ui-header .ui-iconbtn.ui-close {
        width: 30px;
        height: 30px;
        top: auto;
        right: auto;
        margin: 0;
        border-radius: 10px;
        background: color-mix(in srgb, var(--surface, #fff), white 3%);
        border: 1px solid var(--border, rgba(127,127,127,.35));
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

        .GTDialog .ui-panel > .ui-card.ui-header .ui-iconbtn:hover,
        .GTDialog .ui-panel > .ui-card.ui-header .ui-iconbtn.ui-close:hover {
            background: var(--surface-hover);
            border-color: var(--border-strong);
            box-shadow: none;
            transform: none;
        }

        .GTDialog .ui-panel > .ui-card.ui-header .ui-iconbtn i,
        .GTDialog .ui-panel > .ui-card.ui-header .ui-iconbtn.ui-close i {
            font-size: 15px;
        }

.ui-close {
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: var(--MainColor);
}

/* Tab arrows */
.ui-tab-arrow {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface), white 4%);
    color: var(--text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .ui-tab-arrow:hover {
        background: var(--surface-hover);
        border-color: var(--border-strong);
    }

    .ui-tab-arrow:disabled {
        opacity: 0.3;
        cursor: default;
    }


.ui-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
}

.ui-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100% - 0px);
    width: calc(100% - 0px);
    gap: 8px;
    padding: 8px;
    /*box-sizing: border-box;
    background: var(--bg);*/
    color: var(--text);
}

/* =========================
   GLASS CLOSE BUTTON
   ========================= */
.ui-iconbtn.ui-close {
    
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    /* Icon inside */
    .ui-iconbtn.ui-close i {
        font-size: 18px;
        color: var(--MainColor);
        transition: color 120ms ease, transform 120ms ease;
    }

    /* Hover */
    .ui-iconbtn.ui-close:hover {
        background: rgba(255, 255, 255, 0.7);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        transform: translateY(-1px);
    }

        .ui-iconbtn.ui-close:hover i {
            color: var(--text);
            transform: scale(1.05);
        }

    /* Active (press) */
    .ui-iconbtn.ui-close:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    /* Keyboard focus */
    .ui-iconbtn.ui-close:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus-ring), 0 6px 18px rgba(0, 0, 0, 0.18);
    }


/* Accordion panel container */
.ui-acc {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border), transparent 30%);
    /*background: color-mix(in srgb, var(--surface), transparent 45%);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);*/
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    overflow: clip;
    margin: 3px 0;
}

    /* Remove default disclosure marker */
    .ui-acc > summary {
        list-style: none;
    }

/* ── Time-only flatpickr (GTTime inputs — e.g. the history "between" times) ─────────────
   The stock flatpickr time spinner is two bare white boxes; theme it into a proper card
   with brand-coloured focus/hover so it matches the rest of the UI. Scoped to
   .noCalendar.hasTime so date calendars are untouched. */
.flatpickr-calendar.noCalendar.hasTime {
    width: auto !important;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(128,128,128,.35));
    background: var(--surface-1, #fff);
    box-shadow: 0 14px 34px rgba(0,0,0,.26);
}

    .flatpickr-calendar.noCalendar.hasTime:before,
    .flatpickr-calendar.noCalendar.hasTime:after {
        display: none;   /* drop the speech-bubble arrow — it never lines up with the themed card */
    }

    .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
        border: none;
        height: 44px;
        max-height: 44px;
        display: flex;
        align-items: center;
    }

        .flatpickr-calendar.noCalendar.hasTime .flatpickr-time .numInputWrapper {
            height: 40px;
            margin: 0 2px;
            border-radius: 8px;
            overflow: hidden;
        }

        .flatpickr-calendar.noCalendar.hasTime .flatpickr-time input {
            height: 40px;
            font-size: 17px;
            font-weight: 600;
            color: var(--text, #222);
            background: var(--surface-2, rgba(128,128,128,.08));
            border-radius: 8px;
        }

            .flatpickr-calendar.noCalendar.hasTime .flatpickr-time .numInputWrapper:hover input,
            .flatpickr-calendar.noCalendar.hasTime .flatpickr-time input:hover {
                background: color-mix(in srgb, var(--MainColor, #C33A31) 10%, var(--surface-1, #fff));
            }

            .flatpickr-calendar.noCalendar.hasTime .flatpickr-time input:focus {
                background: color-mix(in srgb, var(--MainColor, #C33A31) 16%, var(--surface-1, #fff));
                outline: 2px solid var(--MainColor, #C33A31);
                outline-offset: -2px;
            }

        .flatpickr-calendar.noCalendar.hasTime .flatpickr-time .flatpickr-time-separator {
            color: var(--MainColor, #C33A31);
            font-weight: 700;
            line-height: 40px;
        }

        /* spinner arrows: theme + always visible (stock only shows them on hover) */
        .flatpickr-calendar.noCalendar.hasTime .flatpickr-time .numInputWrapper span {
            opacity: .55;
            border: none;
            width: 18px;
        }

            .flatpickr-calendar.noCalendar.hasTime .flatpickr-time .numInputWrapper span:hover {
                opacity: 1;
                background: transparent;
            }

            .flatpickr-calendar.noCalendar.hasTime .flatpickr-time .numInputWrapper span.arrowUp:after {
                border-bottom-color: var(--MainColor, #C33A31);
            }

            .flatpickr-calendar.noCalendar.hasTime .flatpickr-time .numInputWrapper span.arrowDown:after {
                border-top-color: var(--MainColor, #C33A31);
            }

        .ui-acc > summary::-webkit-details-marker {
            display: none;
        }

/* Header row */
.ui-acc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    color: var(--text);
    background: color-mix(in srgb, var(--surface), transparent 25%);
    border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 35%);
}

    /* Hover: subtle lift */
    .ui-acc__header:hover {
        background: color-mix(in srgb, var(--surface), transparent 15%);
    }

/* Chev rotation */
.ui-acc__chev {
    transition: transform 140ms ease;
    opacity: 0.8;
}

.ui-acc[open] .ui-acc__chev {
    transform: rotate(180deg);
}

/* Body */
.ui-acc__body {
    padding: 14px;
}


/* jconfirm isolation layer */
.jconfirm button {
    all: unset;
}

.jconfirm .jconfirm-buttons button {
    all: revert;
}

/* =========================
   GENERIC BRANDED PLACEHOLDER BADGE
   Shown when a white-label logo or menu icon is NOT set: a rounded-square
   badge in the brand colour (--wl-badge, set inline; slate #64748b when no
   brand colour) with a white location-arrow. Mirrors the fallback favicon in
   WhiteLabelService.FallbackFaviconDataUri. Lives here in ui-kit.css so it's
   available on every surface (tracking + admin login, admin portal, platform).
   ========================= */
.wl-badge {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    color: #fff;
    border-radius: 22%;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--wl-badge, #64748b), #fff 14%),
        color-mix(in srgb, var(--wl-badge, #64748b), #000 22%));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--wl-badge, #64748b), transparent 58%),
                inset 0 1px 0 rgba(255,255,255,.28);
}

    .wl-badge i {
        line-height: 1;
    }

/* login logo size — a bold, generous badge */
.wl-badge--logo {
    width: 76px;
    height: 76px;
    font-size: 36px;
    border-radius: 18px;
}

/* ---------------------------------------------------------------------------
   LOGIN BACKDROP — when no white-label login background image is set, paint a
   nice shaded slate-grey gradient instead of the near-black login defaults.
   The body gets .wl-loginbg from the login layouts when there's no WL image.
   --------------------------------------------------------------------------- */
body.wl-loginbg {
    background:
        radial-gradient(1200px 820px at 50% -12%, #828d9c, transparent 60%),
        linear-gradient(165deg, #5b6573 0%, #434b57 46%, #2f353e 100%) !important;
    background-attachment: fixed !important;
}

    /* neutralise the GPSBob cinematic ::before (its --dark/--dark2 gradient can
       drop to near-black on unbranded hosts) — keep just a soft light sheen */
    body.wl-loginbg::before {
        background:
            radial-gradient(900px 600px at 16% 12%, rgba(255,255,255,.07), transparent 55%),
            radial-gradient(900px 620px at 86% 26%, rgba(255,255,255,.05), transparent 55%) !important;
    }