/*
    Kaizen modern theme
    Enabled with <add key="UiTheme" value="modern" /> in Web.config.
    Every rule is scoped to body.kz-theme-modern so the classic theme is untouched.
    Some rules use !important because kz_elementClassLigrary.js sets inline styles at runtime.
    Client overrides belong in ~/UserData/css/modern-custom.css (loaded after this file).
*/

/* ---------- Accent presets ----------
   Chosen with <html data-accent="...">: the company default comes from Web.config (UiAccent),
   and users can switch with the palette picker when UiAccentPicker is on (kaizen-modern.js).
   Each preset sets:
     --a1 / --a2      the two brand colours of the gradient (a1 is the main one); --a1h / --a2h are their hover shades
     --a3             a third colour for the top hairline and login glow
     --a1d / --a2d    lighter tones of a1 / a2 for dark mode
     --*-rgb          the same colours as "r, g, b" for translucent tints
   Everything else in this file is derived from these. Ocean is the default. */
html {
    --a1: #2563eb; --a1h: #1d4ed8; --a2: #4f46e5; --a2h: #4338ca; --a3: #0ea5e9;
    --a1-rgb: 37, 99, 235; --a2-rgb: 79, 70, 229; --a3-rgb: 14, 165, 233;
    --a1d: #7c9cff; --a2d: #a5a8ff; --a1d-rgb: 124, 156, 255; --a2d-rgb: 165, 168, 255;
}

html[data-accent="indigo"] {
    --a1: #4f46e5; --a1h: #4338ca; --a2: #7c3aed; --a2h: #6d28d9; --a3: #818cf8;
    --a1-rgb: 79, 70, 229; --a2-rgb: 124, 58, 237; --a3-rgb: 129, 140, 248;
    --a1d: #a5b4fc; --a2d: #c4b5fd; --a1d-rgb: 165, 180, 252; --a2d-rgb: 196, 181, 253;
}

html[data-accent="violet"] {
    --a1: #7c3aed; --a1h: #6d28d9; --a2: #c026d3; --a2h: #a21caf; --a3: #ec4899;
    --a1-rgb: 124, 58, 237; --a2-rgb: 192, 38, 211; --a3-rgb: 236, 72, 153;
    --a1d: #c4b5fd; --a2d: #f0abfc; --a1d-rgb: 196, 181, 253; --a2d-rgb: 240, 171, 252;
}

html[data-accent="rose"] {
    --a1: #db2777; --a1h: #be185d; --a2: #9333ea; --a2h: #7e22ce; --a3: #f472b6;
    --a1-rgb: 219, 39, 119; --a2-rgb: 147, 51, 234; --a3-rgb: 244, 114, 182;
    --a1d: #f9a8d4; --a2d: #d8b4fe; --a1d-rgb: 249, 168, 212; --a2d-rgb: 216, 180, 254;
}

html[data-accent="sunset"] {
    --a1: #ea580c; --a1h: #c2410c; --a2: #e11d48; --a2h: #be123c; --a3: #f59e0b;
    --a1-rgb: 234, 88, 12; --a2-rgb: 225, 29, 72; --a3-rgb: 245, 158, 11;
    --a1d: #fdba74; --a2d: #fda4af; --a1d-rgb: 253, 186, 116; --a2d-rgb: 253, 164, 175;
}

html[data-accent="gold"] {
    --a1: #b45309; --a1h: #92400e; --a2: #a16207; --a2h: #854d0e; --a3: #f59e0b;
    --a1-rgb: 180, 83, 9; --a2-rgb: 161, 98, 7; --a3-rgb: 245, 158, 11;
    --a1d: #fcd34d; --a2d: #fde68a; --a1d-rgb: 252, 211, 77; --a2d-rgb: 253, 230, 138;
}

html[data-accent="emerald"] {
    --a1: #059669; --a1h: #047857; --a2: #0d9488; --a2h: #0f766e; --a3: #22c55e;
    --a1-rgb: 5, 150, 105; --a2-rgb: 13, 148, 136; --a3-rgb: 34, 197, 94;
    --a1d: #6ee7b7; --a2d: #5eead4; --a1d-rgb: 110, 231, 183; --a2d-rgb: 94, 234, 212;
}

html[data-accent="graphite"] {
    --a1: #334155; --a1h: #1e293b; --a2: #0f172a; --a2h: #020617; --a3: #64748b;
    --a1-rgb: 51, 65, 85; --a2-rgb: 15, 23, 42; --a3-rgb: 100, 116, 139;
    --a1d: #cbd5e1; --a2d: #e2e8f0; --a1d-rgb: 203, 213, 225; --a2d-rgb: 226, 232, 240;
}

/* Graphite's near-black gradient vanishes on dark surfaces; lift it to mid slate there. */
html.kz-dark[data-accent="graphite"] {
    --a1: #64748b; --a1h: #475569; --a2: #475569; --a2h: #334155; --a3: #94a3b8;
    --a1-rgb: 100, 116, 139; --a2-rgb: 71, 85, 105; --a3-rgb: 148, 163, 184;
}

/* ---------- Design tokens ---------- */
body.kz-theme-modern {
    --kz-primary: var(--a1);
    --kz-primary-hover: var(--a1h);
    --kz-primary-soft: rgba(var(--a1-rgb), .08);
    --kz-primary-ring: rgba(var(--a1-rgb), .18);
    --kz-brand-dark: #0f1f4b;
    --kz-bg: #f4f6fb;
    --kz-surface: #ffffff;
    --kz-surface-2: #f8fafc;
    --kz-border: #e2e8f0;
    --kz-border-strong: #cbd5e1;
    --kz-text: #0f172a;
    --kz-text-2: #475569;
    --kz-muted: #94a3b8;
    --kz-success: #16a34a;
    --kz-danger: #dc2626;
    --kz-radius: 8px;
    --kz-radius-lg: 12px;
    --kz-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --kz-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --kz-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
    --kz-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --kz-topbar-h: 60px;
    background: var(--kz-bg) !important;
    color: var(--kz-text);
    font-family: var(--kz-font) !important;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

body.kz-theme-modern input,
body.kz-theme-modern select,
body.kz-theme-modern textarea,
body.kz-theme-modern button,
body.kz-theme-modern .btn,
body.kz-theme-modern h1, body.kz-theme-modern h2, body.kz-theme-modern h3,
body.kz-theme-modern h4, body.kz-theme-modern h5, body.kz-theme-modern h6 {
    font-family: var(--kz-font) !important;
}
/* An icon written as a button (<a class="btn fa fa-file-pdf-o">, as list views and procedures do) would take the
   rule above and show its glyph as a numbered box; the glyph itself keeps the icon font. */
body.kz-theme-modern .fa::before { font-family: FontAwesome; }

body.kz-theme-modern a { color: var(--kz-primary); }
body.kz-theme-modern a:hover { color: var(--kz-primary-hover); }

/* ---------- Base controls ---------- */
body.kz-theme-modern .form-control {
    border: 1px solid var(--kz-border-strong);
    border-radius: var(--kz-radius);
    color: var(--kz-text);
    background-color: var(--kz-surface);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.kz-theme-modern .form-control:hover { border-color: #94a3b8; }

body.kz-theme-modern .form-control:focus {
    border-color: var(--kz-primary);
    box-shadow: 0 0 0 3px var(--kz-primary-ring);
    outline: none;
}

body.kz-theme-modern .form-control::placeholder { color: var(--kz-muted); }

body.kz-theme-modern .btn {
    border-radius: var(--kz-radius);
    font-weight: 500;
    font-size: 14px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.kz-theme-modern .btn-primary {
    background: var(--kz-primary);
    border-color: var(--kz-primary);
}

body.kz-theme-modern .btn-primary:hover,
body.kz-theme-modern .btn-primary:focus {
    background: var(--kz-primary-hover);
    border-color: var(--kz-primary-hover);
    box-shadow: 0 0 0 3px var(--kz-primary-ring);
}

/* ---------- Login ---------- */
body.kz-theme-modern #loginSection {
    display: flex !important;
    min-height: 100vh;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--kz-surface);
}

body.kz-theme-modern #loginBrandPanel {
    position: relative;
    flex: 0 0 44%;
    max-width: 640px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 56px;
    background: var(--kz-brand-dark);
    color: #fff;
}

body.kz-theme-modern .kz-brand-shapes span {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
}

body.kz-theme-modern .kz-brand-shapes span:nth-child(1) { width: 520px; height: 520px; top: -180px; right: -200px; background: rgba(var(--a1-rgb), .35); border: 0; }
body.kz-theme-modern .kz-brand-shapes span:nth-child(2) { width: 360px; height: 360px; top: 120px; left: -140px; }
body.kz-theme-modern .kz-brand-shapes span:nth-child(3) { width: 220px; height: 220px; top: 60px; right: 80px; background: rgba(255, 255, 255, .05); }

body.kz-theme-modern .kz-brand-content { position: relative; z-index: 1; max-width: 440px; }

body.kz-theme-modern .kz-brand-tagline {
    margin: 0 0 28px;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #fff;
}

body.kz-theme-modern .kz-brand-points { list-style: none; margin: 0; padding: 0; }

body.kz-theme-modern .kz-brand-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #cbd5e1;
}

body.kz-theme-modern .kz-brand-points .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    background: rgba(var(--a1d-rgb), .16);
    color: var(--a1d);
}

body.kz-theme-modern #loginBoxDiv {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 48px 24px !important;
    position: static !important;
}

body.kz-theme-modern #loginBoxDiv > form {
    width: 100%;
    max-width: 400px;
}

body.kz-theme-modern #loginCompanyLogoDiv {
    float: none !important;
    margin: 0 0 32px;
    padding: 0;
}

body.kz-theme-modern #loginCompanyLogoDiv img {
    height: 40px !important;
    width: auto;
}

body.kz-theme-modern #loginMainDiv { background: none; box-shadow: none; }

body.kz-theme-modern #loginHeaderDiv {
    margin: 0 0 4px !important;
    padding: 0 !important;
    text-align: left !important;
    background: none !important;
    border: 0 !important;
}

body.kz-theme-modern #loginHeaderDiv > div,
body.kz-theme-modern #loginHeaderDiv > div > div {
    display: block !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    color: var(--kz-text) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    text-transform: none !important;
    box-shadow: none !important;
}

body.kz-theme-modern #loginHeaderDiv .fa { display: none; }

body.kz-theme-modern #loginHeaderDiv::after {
    content: "Enter your details to sign in.";
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--kz-text-2);
}

body.kz-theme-modern #loginPanelBody {
    padding: 24px 0 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.kz-theme-modern #loginPanelBody > label {
    display: block !important;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kz-text);
}

body.kz-theme-modern #loginDivUsername,
body.kz-theme-modern #loginDivPassword {
    display: block !important;
    position: relative;
    margin-bottom: 18px !important;
}

body.kz-theme-modern #loginPanelBody input[type="text"],
body.kz-theme-modern #loginPanelBody input[type="password"] {
    width: 100% !important;
    height: 46px !important;
    padding: 0 44px 0 14px !important;
    font-size: 15px;
    border-radius: var(--kz-radius) !important;
}

body.kz-theme-modern #LoginUserNameIcon,
body.kz-theme-modern #LoginPasswordIcon,
body.kz-theme-modern #loginPanelBody .md-line { display: none !important; }

body.kz-theme-modern .Login-toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%);
    z-index: 3;
    margin: 0 !important;
    cursor: pointer;
    color: var(--kz-muted);
}

body.kz-theme-modern .Login-toggle-password:hover { color: var(--kz-text-2); }

body.kz-theme-modern #loginButtonDiv {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    margin: 6px 0 0 !important;
}

body.kz-theme-modern #loginDivRememberMe {
    flex: 1 1 auto;
    max-width: none;
    padding: 0;
    font-size: 13px;
    color: var(--kz-text-2);
}

body.kz-theme-modern #loginDivButton {
    flex: 1 0 100%;
    max-width: 100%;
    padding: 0 !important;
    margin-top: 6px;
}

body.kz-theme-modern #Loginbutton {
    width: 100% !important;
    height: 46px;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600;
    border-radius: var(--kz-radius) !important;
}

body.kz-theme-modern #loginDivForgotPassword {
    padding: 18px 0 0 !important;
    text-align: center !important;
    max-width: 100%;
    flex: none;
}

body.kz-theme-modern #loginDivForgotPassword a {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: var(--kz-primary);
}

body.kz-theme-modern #loginDivForgotPassword a:hover { text-decoration: underline; }

body.kz-theme-modern #loginPanelBody .text-danger {
    display: block;
    padding: 10px 12px;
    border-radius: var(--kz-radius);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--kz-danger) !important;
    font-weight: 500;
    font-size: 13px;
    text-align: left !important;
}

body.kz-theme-modern #loginPanelBody .p-2,
body.kz-theme-modern #loginPanelBody .p-2 > .col-md-12 { padding: 0 0 12px !important; }

body.kz-theme-modern #kaizenLoginPageFooter {
    margin: 40px 0 0 !important;
    font-size: 12px;
    color: var(--kz-muted) !important;
}

@media (max-width: 900px) {
    body.kz-theme-modern #loginBrandPanel { display: none; }
}

/* ---------- App shell: top bar ---------- */
body.kz-theme-modern #pageHeaderNav {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    height: var(--kz-topbar-h);
    min-height: var(--kz-topbar-h);
    padding: 0 20px;
    gap: 12px;
    background: var(--kz-surface) !important;
    border-bottom: 1px solid var(--kz-border);
    box-shadow: none !important;
}

body.kz-theme-modern #topLogoContainer { margin: 0 8px 0 0; padding: 0; background: none; }
body.kz-theme-modern #topCompanyLogo { padding: 0; margin: 0; }
body.kz-theme-modern #topCompanyLogo img { height: 34px !important; width: auto; }

body.kz-theme-modern #pageHeaderNav .separator { display: none !important; }

body.kz-theme-modern #pageHeaderNav .form-inline { gap: 8px; }

body.kz-theme-modern #pageHeaderNav .form-inline select.form-control {
    height: 36px;
    max-width: 260px;
    margin: 0 !important;
    padding: 0 32px 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kz-text);
    background-color: var(--kz-surface-2);
    border-color: var(--kz-border);
    border-radius: var(--kz-radius);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

body.kz-theme-modern #pageHeaderNav > .mr-sm-4 { margin: 0 !important; }

body.kz-theme-modern #showNotification,
body.kz-theme-modern #logoffIcon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--kz-border) !important;
    border-radius: 50% !important;
    background: var(--kz-surface) !important;
    color: var(--kz-text-2) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease;
}

body.kz-theme-modern #showNotification:hover,
body.kz-theme-modern #logoffIcon:hover {
    background: var(--kz-surface-2) !important;
    color: var(--kz-text) !important;
}

body.kz-theme-modern #logoffIcon:hover { color: var(--kz-danger) !important; }

body.kz-theme-modern #showNotification i { font-size: 16px; color: inherit; }

body.kz-theme-modern #showNotification .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    border: 2px solid var(--kz-surface);
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
}

body.kz-theme-modern #showNotification .badge:empty { display: none; }

body.kz-theme-modern #kz_notification {
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius-lg);
    box-shadow: var(--kz-shadow-lg);
    overflow: hidden;
}

body.kz-theme-modern #userBoxDiv { margin: 0 !important; }

body.kz-theme-modern #userBoxDiv::after,
body.kz-theme-modern #userBoxDiv::before { display: none !important; }

body.kz-theme-modern #profilePictureDiv {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin: 0 !important;
    padding: 0 14px 0 4px !important;
    border: 1px solid var(--kz-border) !important;
    border-radius: 19px !important;
    background: var(--kz-surface) !important;
    color: var(--kz-text) !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
}

body.kz-theme-modern #userProfileImage {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    border-radius: 50%;
    object-fit: cover;
    background: var(--kz-primary-soft);
}

body.kz-theme-modern #pageHeaderNav .navbar-toggler {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--kz-border);
    border-radius: 50%;
    color: var(--kz-text-2);
}

body.kz-theme-modern #pageHeaderNav .navbar-toggler-icon {
    width: auto;
    height: auto;
    font-size: 15px;
    background: none;
}

@media (max-width: 991px) {
    body.kz-theme-modern #pageHeaderNav {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 12px;
        gap: 8px;
    }

    body.kz-theme-modern #topLogoContainer { margin-right: auto; }
    body.kz-theme-modern #topCompanyLogo img { height: 28px !important; }

    body.kz-theme-modern #navbarSupportedContent { order: 10; flex-basis: 100%; }
    body.kz-theme-modern #pageHeaderNav .form-inline { flex-direction: column; align-items: stretch; padding: 8px 0 4px; }
    body.kz-theme-modern #pageHeaderNav .form-inline select.form-control { max-width: none; width: 100%; }

    /* Avatar only: the name is a bare text node, so hide it with font-size. */
    body.kz-theme-modern #profilePictureDiv { padding: 0 3px !important; font-size: 0 !important; }

    body.kz-theme-modern #cssmenuDiv { top: 0 !important; position: relative !important; }
}

/* ---------- App shell: horizontal menu ---------- */
body.kz-theme-modern #cssmenuDiv {
    position: sticky;
    top: var(--kz-topbar-h);
    z-index: 1020;
    padding: 0 14px;
    background: var(--kz-surface);
    border-bottom: 1px solid var(--kz-border);
}

body.kz-theme-modern #cssmenu { font-family: var(--kz-font); }

body.kz-theme-modern #cssmenu > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
}

body.kz-theme-modern #cssmenu > ul > li { float: none; }

body.kz-theme-modern #cssmenu > ul > li::after { display: none !important; }

body.kz-theme-modern #cssmenu ul li a { border: 0 !important; }

body.kz-theme-modern #cssmenu > ul > li > a,
body.kz-theme-modern #cssmenu > ul > li.has-sub > a {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 10px !important;
    border-radius: var(--kz-radius);
    background: transparent !important;
    color: var(--kz-text-2) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body.kz-theme-modern #cssmenu > ul > li.has-sub > a { padding-right: 24px !important; }

body.kz-theme-modern #cssmenu > ul > li > a .fa { margin-right: 6px; font-size: 14px; color: var(--kz-muted); }

body.kz-theme-modern #cssmenu > ul > li:hover > a {
    background: var(--kz-surface-2) !important;
    color: var(--kz-text) !important;
}

body.kz-theme-modern #cssmenu > ul > li.active > a {
    background: var(--kz-primary-soft) !important;
    color: var(--kz-primary) !important;
}

body.kz-theme-modern #cssmenu > ul > li.active > a .fa { color: var(--kz-primary); }

/* Chevron replaces the dot and triangle. */
body.kz-theme-modern #cssmenu > ul > li.has-sub > a::before { display: none !important; }

body.kz-theme-modern #cssmenu > ul > li.has-sub > a::after,
body.kz-theme-modern #cssmenu > ul > li.has-sub:hover > a::after,
body.kz-theme-modern #cssmenu > ul > li.has-sub.active > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    border-radius: 0;
    background: none !important;
    transform: rotate(45deg);
    opacity: .6;
}

/* Home and search */
body.kz-theme-modern #menuLink0 { width: 36px; justify-content: center; padding: 0 !important; }
body.kz-theme-modern #menuLink0 .fa { margin: 0; font-size: 16px; }

body.kz-theme-modern #searchMenuDivHor { background: transparent !important; }

body.kz-theme-modern #searchMenu {
    width: 180px !important;
    height: 34px;
    margin: 0 6px 0 0;
    padding: 0 12px 0 34px;
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius);
    background: var(--kz-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center;
    font-size: 13px;
    color: var(--kz-text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body.kz-theme-modern #searchMenu:focus {
    background-color: var(--kz-surface);
    border-color: var(--kz-primary) !important;
    box-shadow: 0 0 0 3px var(--kz-primary-ring);
}

/* Dropdown panels */
body.kz-theme-modern #cssmenu ul li ul {
    width: 240px !important;
    padding: 6px;
    background: var(--kz-surface);
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius-lg);
    box-shadow: var(--kz-shadow-lg);
}

body.kz-theme-modern #cssmenu > ul > li > ul { margin-top: 4px; }

body.kz-theme-modern #cssmenu ul li ul li ul { margin-left: 6px; }

/* Invisible bridges over those gaps, so the pointer keeps :hover while moving into a submenu. */
body.kz-theme-modern #cssmenu > ul > li > ul::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

body.kz-theme-modern #cssmenu ul li ul li ul::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 12px;
}

body.kz-theme-modern #cssmenu ul li ul:empty { display: none !important; }

body.kz-theme-modern #cssmenu ul li ul li {
    width: 100% !important;
    background: transparent !important;
}

body.kz-theme-modern #cssmenu ul li ul li a,
body.kz-theme-modern #cssmenu ul li ul li ul li a {
    width: 100% !important;
    padding: 8px 28px 8px 10px !important;
    border-radius: 6px;
    background: transparent !important;
    color: var(--kz-text) !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

body.kz-theme-modern #cssmenu ul li ul li a .fa {
    width: 16px;
    margin-right: 6px;
    text-align: center;
    color: var(--kz-muted);
}

body.kz-theme-modern #cssmenu ul li ul li:hover > a {
    background: var(--kz-surface-2) !important;
    color: var(--kz-primary) !important;
}

body.kz-theme-modern #cssmenu ul li ul li.active > a {
    background: var(--kz-primary-soft) !important;
    color: var(--kz-primary) !important;
    font-weight: 500;
}

body.kz-theme-modern #cssmenu ul li ul li:hover > a .fa,
body.kz-theme-modern #cssmenu ul li ul li.active > a .fa { color: var(--kz-primary); }

body.kz-theme-modern #cssmenu ul li ul li.has-sub::before { display: none !important; }

body.kz-theme-modern #cssmenu ul li ul li.has-sub::after,
body.kz-theme-modern #cssmenu ul li ul li.has-sub:hover::after,
body.kz-theme-modern #cssmenu ul li ul li.has-sub.active::after {
    content: "";
    top: 50%;
    right: 12px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border: solid var(--kz-muted);
    border-width: 1.5px 1.5px 0 0;
    border-radius: 0;
    background: none !important;
    transform: rotate(45deg);
}

/* Small screens: the menu collapses behind the "Menu" button. */
body.kz-theme-modern #cssmenu #menu-button {
    padding: 12px 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--kz-text);
}

@media (max-width: 800px) {
    body.kz-theme-modern #cssmenu > ul { display: block; padding: 0; }
    body.kz-theme-modern #cssmenu > ul.open { padding: 6px 0 10px; border-top: 1px solid var(--kz-border); }
    body.kz-theme-modern #cssmenu ul li ul {
        width: 100% !important;
        padding: 0 0 0 12px;
        border: 0;
        box-shadow: none;
        margin: 0;
        background: transparent;
    }
    body.kz-theme-modern #cssmenu ul li ul li ul { margin-left: 0; }
    body.kz-theme-modern #searchMenu { width: 100% !important; margin: 4px 0; }
}

/* ---------- App shell: vertical (sidebar) navigation ----------
   Expanded: 256px sidebar. Collapsed (html.sidebar-left-collapsed): 72px icon rail that
   slides out over the page on hover. Phones: a drawer opened from the top bar's menu button.
   Several rules use !important because kz_elementClassLigrary.js sets inline colours and heights. */
body.kz-theme-modern.bodyVerticalNavigation { --kz-sidebar-w: 256px; }
html.sidebar-left-collapsed body.kz-theme-modern.bodyVerticalNavigation { --kz-sidebar-w: 72px; }

body.kz-theme-modern #verticalMenu {
    position: fixed !important;
    top: var(--kz-topbar-h) !important;
    bottom: 0;
    left: 0;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    width: var(--kz-sidebar-w) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--kz-surface) !important;
    border-right: 1px solid var(--kz-border);
    box-shadow: none !important;
    transition: width .2s ease, box-shadow .2s ease;
    overflow: hidden;
}

/* Header: search and collapse toggle */
body.kz-theme-modern #searchMenuDivVerHead {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: auto !important;
    padding: 12px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--kz-border);
}

body.kz-theme-modern #sidebarSeartch { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; }

body.kz-theme-modern #searchMenuDivVerHead #searchMenu {
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 10px 0 34px !important;
    border: 1px solid var(--kz-border) !important;
    background-color: var(--kz-surface-2) !important;
}

body.kz-theme-modern #verticalMenuToggle {
    position: static !important;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius);
    background: var(--kz-surface) !important;
    color: var(--kz-text-2) !important;
    font-size: 15px;
    line-height: 1 !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

body.kz-theme-modern #verticalMenuToggle:hover { background: var(--kz-surface-2) !important; color: var(--kz-text) !important; }
body.kz-theme-modern #verticalMenuToggle .fa { color: inherit; }

/* Scroll area (replaces the nanoScroller layout with native scrolling) */
body.kz-theme-modern #verticalMenuScroll {
    position: relative !important;
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow: hidden !important;
    box-shadow: none !important;
}

body.kz-theme-modern #verticalMenuContent {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 8px 0 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: transparent !important;
    scrollbar-width: thin;
}

body.kz-theme-modern #verticalMenuScroll .nano-pane { display: none !important; }

body.kz-theme-modern #verticalMenuContent::-webkit-scrollbar { width: 6px; }
body.kz-theme-modern #verticalMenuContent::-webkit-scrollbar-track { background: transparent; }
body.kz-theme-modern #verticalMenuContent::-webkit-scrollbar-thumb { border-radius: 3px; background: transparent; }
body.kz-theme-modern #verticalMenuContent:hover::-webkit-scrollbar-thumb { background: var(--kz-border-strong); }

/* Lists: drop the inline colours, borders and scroll boxes */
body.kz-theme-modern #verticalMenu ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
}

body.kz-theme-modern #verticalMenu li { display: block; margin: 0; padding: 0; }

/* The injected "▾" markers; a chevron on the link replaces them */
body.kz-theme-modern #verticalMenu span[style*="position:absolute"] { display: none !important; }

/* Links */
body.kz-theme-modern #verticalMenu .verticalMenuA {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin: 1px 10px !important;
    padding: 8px 32px 8px 10px !important;
    border-radius: var(--kz-radius);
    background: transparent !important;
    color: var(--kz-text-2) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .15s ease, color .15s ease;
}

body.kz-theme-modern #verticalMenu .verticalMenuA > .fa {
    flex: 0 0 18px;
    width: 18px;
    margin: 0 !important;
    font-size: 15px;
    text-align: center;
    color: var(--kz-muted);
}

body.kz-theme-modern #verticalMenu .verticalMenuA:hover {
    background: var(--kz-surface-2) !important;
    color: var(--kz-text) !important;
}

body.kz-theme-modern #verticalMenu .verticalMenuA:hover > .fa { color: var(--kz-text-2); }

/* Open sections */
body.kz-theme-modern #verticalMenu .verticalMenuA[aria-expanded="true"] { color: var(--kz-text) !important; }
body.kz-theme-modern #verticalMenu .verticalMenuA[aria-expanded="true"] > .fa { color: var(--kz-primary); }

/* Current page */
body.kz-theme-modern #verticalMenu .verticalMenuA.active {
    background: var(--kz-primary-soft) !important;
    color: var(--kz-primary) !important;
    font-weight: 600;
}

body.kz-theme-modern #verticalMenu .verticalMenuA.active > .fa { color: var(--kz-primary); }

/* Chevron on section links */
body.kz-theme-modern #verticalMenu .verticalMenuA[data-toggle="collapse"]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border: solid var(--kz-muted);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transition: transform .15s ease, margin .15s ease;
}

body.kz-theme-modern #verticalMenu .verticalMenuA[data-toggle="collapse"].collapsed::after {
    margin-top: -3px;
    transform: rotate(-45deg);
}

/* Nested levels: indent and a guide line */
body.kz-theme-modern #verticalMenu .collapse > ul,
body.kz-theme-modern #verticalMenu .collapsing > ul {
    position: relative;
}

body.kz-theme-modern #verticalMenu .collapse .verticalMenuA,
body.kz-theme-modern #verticalMenu .collapsing .verticalMenuA {
    min-height: 34px;
    margin-left: 26px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-weight: 400;
}

body.kz-theme-modern #verticalMenu .collapse .collapse .verticalMenuA,
body.kz-theme-modern #verticalMenu .collapse .collapsing .verticalMenuA { margin-left: 42px !important; }

body.kz-theme-modern #verticalMenu .collapse .collapse .collapse .verticalMenuA { margin-left: 58px !important; }

body.kz-theme-modern #verticalMenu .collapse .verticalMenuA > .fa { font-size: 13px; }

body.kz-theme-modern #verticalMenu .collapse.show,
body.kz-theme-modern #verticalMenu .collapsing { padding: 1px 0 4px; }

/* Developer edit pencil inside links */
body.kz-theme-modern #verticalMenu .verticalMenuA small { margin-left: auto; color: var(--kz-muted); }

/* ---------- Page content beside the sidebar ---------- */
body.kz-theme-modern.bodyVerticalNavigation #mainDiv {
    display: block !important;
    min-height: calc(100vh - var(--kz-topbar-h));
    overflow: visible !important;
}

body.kz-theme-modern.bodyVerticalNavigation #mainDivSub {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: var(--kz-sidebar-w) !important;
    transition: margin-left .2s ease;
}

body.kz-theme-modern.bodyVerticalNavigation #pageContentDiv { margin-left: 0 !important; }

body.kz-theme-modern.bodyVerticalNavigation #kaizenPageFooter {
    width: auto !important;
    max-width: none !important;
    margin-left: var(--kz-sidebar-w) !important;
    padding-left: 24px !important;
    transition: margin-left .2s ease;
}

/* ---------- Collapsed: icon rail, expands over the page on hover ---------- */
@media (min-width: 768px) {
    html.sidebar-left-collapsed body.kz-theme-modern #verticalMenu:not(:hover):not(:focus-within) #sidebarSeartch { display: none; }

    html.sidebar-left-collapsed body.kz-theme-modern #verticalMenu:not(:hover):not(:focus-within) #searchMenuDivVerHead { justify-content: center; padding: 12px 0 !important; }

    html.sidebar-left-collapsed body.kz-theme-modern #verticalMenu:not(:hover):not(:focus-within) .verticalMenuA {
        justify-content: center;
        margin: 2px 12px !important;
        padding: 10px 0 !important;
        font-size: 0;
    }

    html.sidebar-left-collapsed body.kz-theme-modern #verticalMenu:not(:hover):not(:focus-within) .verticalMenuA > .fa {
        flex-basis: auto;
        width: auto;
        font-size: 17px;
    }

    html.sidebar-left-collapsed body.kz-theme-modern #verticalMenu:not(:hover):not(:focus-within) .verticalMenuA::after,
    html.sidebar-left-collapsed body.kz-theme-modern #verticalMenu:not(:hover):not(:focus-within) .verticalMenuA small,
    html.sidebar-left-collapsed body.kz-theme-modern #verticalMenu:not(:hover):not(:focus-within) .collapse { display: none !important; }

    /* Keep the open section's icon highlighted in the rail */
    html.sidebar-left-collapsed body.kz-theme-modern #verticalMenu:not(:hover):not(:focus-within) .verticalMenuA[aria-expanded="true"] {
        background: var(--kz-primary-soft) !important;
    }

    /* Stays open while the pointer is over it or its search box has focus. */
    html.sidebar-left-collapsed body.kz-theme-modern #verticalMenu:hover,
    html.sidebar-left-collapsed body.kz-theme-modern #verticalMenu:focus-within {
        width: 256px !important;
        box-shadow: var(--kz-shadow-lg) !important;
    }
}

/* ---------- Phones: drawer opened from the top bar ---------- */
body.kz-theme-modern #mobile-collapse { display: none; }

@media (max-width: 767px) {
    body.kz-theme-modern.bodyVerticalNavigation #mobile-collapse {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px !important;
        height: 36px !important;
        border: 1px solid var(--kz-border);
        border-radius: 50%;
        background: var(--kz-surface) none !important;
        color: var(--kz-text-2);
        font-size: 15px !important;
        vertical-align: middle;
        cursor: pointer;
    }

    /* One more button in the top bar: keep everything on one row. */
    body.kz-theme-modern.bodyVerticalNavigation #pageHeaderNav { flex-wrap: nowrap; gap: 6px; padding: 10px 8px; }
    body.kz-theme-modern.bodyVerticalNavigation #pageHeaderNav > a { flex: 0 0 auto; }
    body.kz-theme-modern.bodyVerticalNavigation #topLogoContainer { min-width: 0; overflow: hidden; }
    body.kz-theme-modern.bodyVerticalNavigation #topCompanyLogo img { height: 24px !important; }
    body.kz-theme-modern.bodyVerticalNavigation #pageHeaderNav .navbar-toggler,
    body.kz-theme-modern.bodyVerticalNavigation #showNotification,
    body.kz-theme-modern.bodyVerticalNavigation #logoffIcon { width: 34px !important; height: 34px !important; flex: 0 0 auto; }
    body.kz-theme-modern.bodyVerticalNavigation #profilePictureDiv { height: 34px; }
    body.kz-theme-modern.bodyVerticalNavigation #userProfileImage { width: 26px !important; height: 26px !important; }
    body.kz-theme-modern.bodyVerticalNavigation #navbarSupportedContent.show,
    body.kz-theme-modern.bodyVerticalNavigation #navbarSupportedContent.collapsing {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 0 12px 8px;
        background: var(--kz-surface);
        border-bottom: 1px solid var(--kz-border);
    }

    /* Hidden until the menu button slides it in (jQuery sets display inline). */
    body.kz-theme-modern #verticalMenu {
        display: none;
        width: min(300px, 86vw) !important;
        box-shadow: var(--kz-shadow-lg) !important;
    }

    body.kz-theme-modern #verticalMenuToggle { display: none !important; }

    /* The drawer is shown as display:block, so scroll the whole panel instead of the flex scroll area. */
    body.kz-theme-modern #verticalMenu { overflow-y: auto; }
    body.kz-theme-modern #verticalMenuScroll { overflow: visible !important; }
    body.kz-theme-modern #verticalMenuContent { position: static !important; overflow: visible !important; }

    body.kz-theme-modern.bodyVerticalNavigation #mainDivSub,
    body.kz-theme-modern.bodyVerticalNavigation #kaizenPageFooter { margin-left: 0 !important; }
}

/* ---------- Page header ---------- */
body.kz-theme-modern #mainDivSub { padding: 0 !important; }

body.kz-theme-modern #pageContentDiv { background: transparent; }

body.kz-theme-modern #pageHeader {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    height: auto !important;
    margin: 0 !important;
    padding: 22px 24px 14px !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.kz-theme-modern #pageTitle {
    order: 0;
    float: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1.25 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
    color: var(--kz-text) !important;
}

body.kz-theme-modern #pageTitle::before,
body.kz-theme-modern #pageTitle::after { display: none !important; }

body.kz-theme-modern #pageHeader > .fa-info-circle {
    order: 1;
    font-size: 14px;
    color: var(--kz-muted);
    cursor: help;
}

body.kz-theme-modern #pageHeader > .right-wrapper {
    order: 2;
    float: none !important;
    margin-left: auto;
}

body.kz-theme-modern #pageHeader .right-wrapper .right-wrapper { float: none !important; }

body.kz-theme-modern .breadcrumbs {
    margin: 0 !important;
    line-height: 1 !important;
}

body.kz-theme-modern .breadcrumbs li { color: var(--kz-muted); font-weight: 400; }

body.kz-theme-modern .breadcrumbs li::after {
    content: "" !important;
    width: 5px;
    height: 5px;
    margin: 0 10px 0 8px !important;
    border: solid var(--kz-border-strong);
    border-width: 1.5px 1.5px 0 0;
    transform: rotate(45deg);
    vertical-align: middle;
}

body.kz-theme-modern .breadcrumbs a,
body.kz-theme-modern .breadcrumbs span {
    font-size: 13px !important;
    color: var(--kz-text-2);
}

body.kz-theme-modern .breadcrumbs li:last-child span { color: var(--kz-text); font-weight: 500; }

body.kz-theme-modern .breadcrumbs .fa-home { font-size: 15px !important; color: var(--kz-muted); }
body.kz-theme-modern .breadcrumbs a:hover .fa-home { color: var(--kz-primary); }

/* ---------- Page tabs and content card ---------- */
body.kz-theme-modern #pageContentDivDetail { padding: 0 24px !important; }

body.kz-theme-modern #pageContentDivColumn > .nav-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 14px;
    padding: 4px;
    border: 0;
    border-radius: 10px;
    background: #e8ecf3;
}

body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-item { margin: 0; }

body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--kz-text-2) !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
}

body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link::before,
body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link::after { display: none !important; }

body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link:hover { color: var(--kz-text) !important; }

body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link.active {
    background: var(--kz-surface) !important;
    color: var(--kz-text) !important;
    box-shadow: var(--kz-shadow) !important;
}

body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link .fa { font-size: 13px; color: inherit; }

body.kz-theme-modern #tabContent {
    padding: 20px !important;
    background: var(--kz-surface) !important;
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-lg) !important;
    box-shadow: var(--kz-shadow-sm) !important;
}

/* ---------- Footer ---------- */
body.kz-theme-modern #kaizenPageFooter {
    margin-top: 32px !important;
    padding: 16px 24px 24px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--kz-muted) !important;
    font-size: 12px;
}

body.kz-theme-modern #kaizenPageFooter .kaizenCompanyName { color: var(--kz-text-2); font-size: 12px; }
body.kz-theme-modern #kaizenPageFooter .kaizenVersion { margin-top: 2px; color: var(--kz-muted); font-size: 11px; }

/* Pages opened inside a modal (GeneralModalPopup) sit on white, not the page grey. */
body.kz-theme-modern.pageIsModal { background: var(--kz-surface) !important; }

/* =========================================================
   Phase 2: forms
   ========================================================= */

/* ---------- Sections ---------- */
body.kz-theme-modern .sectionFieldset {
    margin: 0 0 28px !important;
    padding: 0 !important;
    border: 0 !important;
}

body.kz-theme-modern .sectionFieldset:last-of-type { margin-bottom: 8px !important; }

body.kz-theme-modern .sectionLegend {
    position: relative !important;
    display: flex;
    align-items: center;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kz-border) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
    color: var(--kz-text) !important;
    cursor: pointer;
}

body.kz-theme-modern .sectionLegend::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -4px 4px 0 auto;
    border: solid var(--kz-muted);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

body.kz-theme-modern .sectionLegend.collapsed::after { margin-top: 2px; transform: rotate(-45deg); }

body.kz-theme-modern .sectionLegend:hover::after { border-color: var(--kz-text-2); }

body.kz-theme-modern .kz_sectionDiv { margin-left: -10px; margin-right: -10px; }

body.kz-theme-modern .kz_sectionDiv > .kz_fieldSectionDiv { padding-left: 10px; padding-right: 10px; }

/* Section list (shown for long forms) */
body.kz-theme-modern #sectionList {
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius-lg);
    overflow: hidden;
}

body.kz-theme-modern #sectionList .list-group-item {
    border: 0;
    border-bottom: 1px solid var(--kz-border);
    font-size: 13px;
    color: var(--kz-text-2);
}

body.kz-theme-modern #sectionList .list-group-item.active {
    background: var(--kz-surface-2);
    color: var(--kz-text);
    font-weight: 600;
}

body.kz-theme-modern #sectionList .list-group-item-action:hover { background: var(--kz-primary-soft); color: var(--kz-primary); }

/* ---------- Fields and labels ---------- */
body.kz-theme-modern .kz_fieldDivRow.form-group { margin-bottom: 18px; }

/* Fields sharing a group number stack inside one row. */
body.kz-theme-modern .kz_fieldDivRow > .kz-form-group + .kz-form-group { margin-top: 8px; }

body.kz-theme-modern .kz_fieldLabel {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 0 !important;
    padding: 0 0 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    color: var(--kz-text) !important;
}

body.kz-theme-modern .field-required { color: var(--kz-danger) !important; font-weight: 500; }

body.kz-theme-modern #kz_addnew .form-control,
body.kz-theme-modern #kz_addnew .form-control-sm,
body.kz-theme-modern .pageIsModal .form-control {
    height: 38px;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1.4;
    border-radius: var(--kz-radius) !important;
}

body.kz-theme-modern #kz_addnew textarea.form-control,
body.kz-theme-modern .pageIsModal textarea.form-control {
    height: auto;
    min-height: 90px;
    padding: 9px 12px !important;
}

body.kz-theme-modern #kz_addnew select.form-control,
body.kz-theme-modern .pageIsModal select.form-control {
    padding-right: 34px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

body.kz-theme-modern #kz_addnew select[multiple].form-control,
body.kz-theme-modern #kz_addnew select[size].form-control {
    height: auto;
    padding: 6px 8px !important;
    background-image: none;
}

body.kz-theme-modern .form-control[readonly]:not(.UploadSingleFile),
body.kz-theme-modern .form-control:disabled {
    background-color: var(--kz-surface-2) !important;
    color: var(--kz-text-2);
    cursor: not-allowed;
}

/* Checkboxes and radios were given .form-control, which stretches them. */
body.kz-theme-modern #kz_addnew input[type="checkbox"].form-control,
body.kz-theme-modern #kz_addnew input[type="radio"].form-control,
body.kz-theme-modern .pageIsModal input[type="checkbox"].form-control {
    width: 18px !important;
    height: 18px !important;
    min-height: 0;
    margin: 10px 0 0;
    padding: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    accent-color: var(--kz-primary);
    cursor: pointer;
}

body.kz-theme-modern input[type="checkbox"],
body.kz-theme-modern input[type="radio"] { accent-color: var(--kz-primary); }

/* ---------- Field buttons: lookup, clear, eye ---------- */
/* Inputs that carry a button get room on the right so text never runs under it. */
body.kz-theme-modern .kz-form-group .kz_fieldDiv:has(.kz_FieldButtons > i) > .form-control,
body.kz-theme-modern .kz-form-group .kz_fieldDiv:has(.toggle-password) > .form-control {
    padding-right: 46px !important;
}

body.kz-theme-modern .kz-form-group .kz_FieldButtons {
    position: absolute;
    top: 0;
    right: 4px;
    height: 38px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 2px;
}

body.kz-theme-modern .kz-form-group .kz_FieldButtons:empty { display: none; }

body.kz-theme-modern .kz-form-group .AutocompleteLookUp,
body.kz-theme-modern .kz-form-group .ShowLookUpModal,
body.kz-theme-modern .kz-form-group .ShowModal,
body.kz-theme-modern .kz-form-group .FieldDeleteIcon,
body.kz-theme-modern .tab-pane-filter .AutocompleteLookUp,
body.kz-theme-modern .tab-pane-filter .ShowLookUpModal {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    border-radius: 6px;
    background: transparent !important;
    color: var(--kz-muted) !important;
    font-size: 14px;
    opacity: 1 !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

body.kz-theme-modern .kz-form-group .AutocompleteLookUp:hover,
body.kz-theme-modern .kz-form-group .ShowLookUpModal:hover,
body.kz-theme-modern .kz-form-group .ShowModal:hover,
body.kz-theme-modern .tab-pane-filter .AutocompleteLookUp:hover,
body.kz-theme-modern .tab-pane-filter .ShowLookUpModal:hover {
    background: var(--kz-primary-soft) !important;
    color: var(--kz-primary) !important;
}

body.kz-theme-modern .kz-form-group .FieldDeleteIcon:hover {
    background: #fef2f2 !important;
    color: var(--kz-danger) !important;
}

body.kz-theme-modern .kz-form-group .toggle-password {
    position: absolute;
    top: 0;
    right: 4px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 38px;
    padding: 0;
    color: var(--kz-muted);
    cursor: pointer;
}

body.kz-theme-modern .kz-form-group .toggle-password:hover { color: var(--kz-text-2); }

/* File upload: the readonly text box is the click target. */
body.kz-theme-modern #kz_addnew input.UploadSingleFile[readonly] {
    padding-left: 36px !important;
    background: var(--kz-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M17 8l-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E") no-repeat 12px center !important;
    border-style: dashed !important;
    color: var(--kz-text-2);
    cursor: pointer;
}

/* Multi-file boxes: a one-line drop zone. The text inside repeats the file list shown below
   it, so it's hidden behind a "Click to add files" prompt. */
body.kz-theme-modern #kz_addnew textarea.UploadMultipleFiles,
body.kz-theme-modern .pageIsModal textarea.UploadMultipleFiles {
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    overflow: hidden;
    resize: none;
    border-style: dashed !important;
    background: var(--kz-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='16' viewBox='0 0 170 16'%3E%3Cg fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 10v2.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 12.5V10'/%3E%3Cpath d='M11 5L8 2 5 5'/%3E%3Cpath d='M8 2v8'/%3E%3C/g%3E%3Ctext x='24' y='12.5' font-family='Segoe UI, system-ui, sans-serif' font-size='13' fill='%2364748b'%3EClick to add files%3C/text%3E%3C/svg%3E") no-repeat 12px center !important;
    color: transparent !important;
    cursor: pointer;
}

body.kz-theme-modern #kz_addnew textarea.UploadMultipleFiles::placeholder { color: transparent; }

body.kz-theme-modern #kz_addnew textarea.UploadMultipleFiles:hover {
    border-color: var(--kz-primary) !important;
    background-color: var(--kz-primary-soft) !important;
}

/* Barcode scan fields (Models/Fields/TextArea.cs): a one-line box with a barcode icon and a "Scan" button. A click
   anywhere on it opens the camera scanner (Scripts/kz_functions.js), which writes the code into the box. The icon and
   button are drawn on the empty div.DivBarcodeScan in front of the box and let clicks through to it. */
body.kz-theme-modern .kz_fieldDiv:has(> textarea.kz_BarcodeScan) { position: relative; }

body.kz-theme-modern #kz_addnew textarea.kz_BarcodeScan,
body.kz-theme-modern .pageIsModal textarea.kz_BarcodeScan {
    height: 34px !important;
    min-height: 0 !important;
    padding: 7px 82px 7px 36px !important;
    line-height: 18px;
    overflow: hidden;
    white-space: nowrap;
    resize: none;
    cursor: pointer;
}

body.kz-theme-modern #kz_addnew textarea.kz_BarcodeScan:not([readonly]):hover,
body.kz-theme-modern .pageIsModal textarea.kz_BarcodeScan:not([readonly]):hover { border-color: var(--kz-primary) !important; }

body.kz-theme-modern .DivBarcodeScan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    z-index: 2;
    pointer-events: none;
}

body.kz-theme-modern .DivBarcodeScan::before {
    content: "\f02a";
    position: absolute;
    left: 12px;
    top: 0;
    font: 15px/34px FontAwesome;
    color: var(--kz-primary);
}

body.kz-theme-modern .DivBarcodeScan::after {
    content: "\f030\00a0\00a0Scan";
    position: absolute;
    right: 5px;
    top: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--kz-primary-soft);
    color: var(--kz-primary);
    font: 600 12px/24px FontAwesome, var(--kz-font);
}

body.kz-theme-modern .kz_fieldDiv:has(> textarea.kz_BarcodeScan[readonly]) .DivBarcodeScan::after { display: none; }

/* Uploaded files: one chip per file (name, then a small delete button) */
body.kz-theme-modern .FileUploadEditLink {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

body.kz-theme-modern .FileUploadEditLink:empty { display: none; }

body.kz-theme-modern .EditMultiUploadedSpan {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 32px;
    padding: 3px 3px 3px 10px;
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius);
    background: var(--kz-surface-2);
    font-size: 12.5px;
    transition: border-color var(--kz-dur-fast) var(--kz-ease), background-color var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern .EditMultiUploadedSpan:hover { border-color: var(--kz-border-strong); background: var(--kz-surface); }
body.kz-theme-modern .EditMultiUploadedSpan > br { display: none; }

body.kz-theme-modern .EditMultiUploadedSpan > a.ViewUploadedImageThumb {
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important; /* Site.css sizes .ViewUploadedImageThumb for image thumbnails (100px) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--kz-text) !important;
    font-weight: 500;
    text-decoration: none !important;
}

body.kz-theme-modern .EditMultiUploadedSpan > a.ViewUploadedImageThumb::before {
    content: "\f016";
    margin-right: 7px;
    font-family: FontAwesome;
    font-weight: 400;
    color: var(--kz-primary);
}

body.kz-theme-modern .EditMultiUploadedSpan > a.ViewUploadedImageThumb:hover { color: var(--kz-primary) !important; }

/* Inside child grids, keep file columns from growing without limit */
body.kz-theme-modern .PageChild .EditMultiUploadedSpan { width: 260px; max-width: 260px; }

/* Delete buttons: small icon buttons instead of the navy squares */
body.kz-theme-modern .ViewUploadedDelete,
body.kz-theme-modern .labelUploadMultipleFiles .FieldDeleteIcon,
body.kz-theme-modern .labelUploadSingleFile .FieldDeleteIcon {
    position: static !important;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px;
    background: transparent !important;
    color: var(--kz-muted) !important;
    font-size: 12px;
    cursor: pointer;
    transition: background-color var(--kz-dur-fast) var(--kz-ease), color var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern .ViewUploadedDelete:hover,
body.kz-theme-modern .labelUploadMultipleFiles .FieldDeleteIcon:hover,
body.kz-theme-modern .labelUploadSingleFile .FieldDeleteIcon:hover { background: rgba(220, 38, 38, .10) !important; color: var(--kz-danger) !important; }

/* The "clear all files" icon of a multi-file field sits inside the right end of its drop zone */
body.kz-theme-modern .kz_fieldDiv > .labelUploadMultipleFiles {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: inline-flex;
}

body.kz-theme-modern .PageChild .labelUploadMultipleFiles { display: inline-flex; }

/* Button holders with whitespace but no buttons would otherwise cover the top of the field */
body.kz-theme-modern .kz_FieldButtons:not(:has(*)) { display: none !important; }

body.kz-theme-modern #kz_addnew input.UploadSingleFile[readonly]:hover {
    border-color: var(--kz-primary) !important;
    background-color: var(--kz-primary-soft) !important;
}

/* ---------- Child grids (detail rows) ---------- */
/* Wide grids (many columns, long file names) scroll sideways instead of being cut off;
   overflow:auto still clips to the rounded corners. */
body.kz-theme-modern .kz_Child {
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-lg);
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--kz-surface);
    scrollbar-width: thin;
}

body.kz-theme-modern .kz_Child::-webkit-scrollbar { height: 8px; }

/* Scroll hint: a soft shadow shows on the edge that has more columns to scroll to
   ("local" covers hide the shadows when scrolled fully to that side). */
body.kz-theme-modern .kz_Child {
    background:
        linear-gradient(to right, var(--kz-surface) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--kz-surface) 30%, transparent) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .16), transparent) left center / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .16), transparent) right center / 14px 100% no-repeat scroll,
        var(--kz-surface);
}

html.kz-dark body.kz-theme-modern .kz_Child {
    background:
        linear-gradient(to right, var(--kz-surface) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--kz-surface) 30%, transparent) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .55), transparent) left center / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .55), transparent) right center / 14px 100% no-repeat scroll,
        var(--kz-surface) !important;
}

/* Child grid columns keep the same widths before and after rows are added: the grid fills its box, a column with a
   width set in the field editor keeps it, long headings wrap, and the grid scrolls sideways only when its columns
   really cannot fit. (A 140px minimum on every data cell used to widen all columns, and add a scrollbar, the moment
   the first row was added.) */
body.kz-theme-modern .kz_Child > .PageChild { width: 100% !important; }
body.kz-theme-modern .kz_Child > .PageChild > tbody > tr > td:not(:first-child):not(:last-child),
body.kz-theme-modern .kz_Child > .PageChild > tfoot > tr > td:not(:first-child):not(:last-child) { min-width: 72px; }
/* A set width (the heading carries --kz-col, e.g. 25 for 25%) is also its floor, as a share of the grid's box. */
body.kz-theme-modern .kz_Child { container-type: inline-size; }
body.kz-theme-modern .kz_Child > .PageChild > thead th[style*="--kz-col"] { min-width: calc(var(--kz-col) * 1cqw); }
/* A column holding only a checkbox needs no more room than its heading (e.g. Role Master's permission grid) */
body.kz-theme-modern .kz_Child > .PageChild > tbody > tr > td:has(> input[type=checkbox]):not(:has(input:not([type=checkbox]):not([type=hidden]), select, textarea)) { min-width: 0; }
/* Long headings ("Rate Before Tax") wrap onto two lines instead of widening their column. */
body.kz-theme-modern .kz_Child > .PageChild > thead th { white-space: normal; overflow-wrap: break-word; vertical-align: bottom; line-height: 1.3; }

body.kz-theme-modern .PageChild.table { margin: 0; border: 0 !important; }

body.kz-theme-modern .PageChild thead,
body.kz-theme-modern .PageChild thead tr,
body.kz-theme-modern .PageChild thead th {
    background: var(--kz-surface-2) !important;
}

body.kz-theme-modern .PageChild thead th {
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kz-border) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--kz-text-2) !important;
    white-space: nowrap;
}

body.kz-theme-modern .PageChild td {
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kz-border) !important;
    vertical-align: middle !important;
    color: var(--kz-text);
}

body.kz-theme-modern .PageChild.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
body.kz-theme-modern .PageChild tbody tr:hover { background: var(--kz-surface-2); }

/* Site.css paints hovered and selected child rows on the cells (#CFF5FF / #fef3c7); use the theme colours */
body.kz-theme-modern .PageChild > tbody > tr:hover > td { background-color: var(--kz-surface-2); }
body.kz-theme-modern .PageChild .PageChildSelectedRow td,
body.kz-theme-modern .PageChildSelectedRow td { background-color: var(--kz-primary-soft); }

/* The entry row lives in tfoot. */
body.kz-theme-modern .PageChild tfoot tr { background: var(--kz-primary-soft); }
body.kz-theme-modern .PageChild tfoot tr:last-child td { border-bottom: 0 !important; }

body.kz-theme-modern .PageChild tfoot .field-label {
    display: block;
    padding: 0 0 5px !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 500;
    color: var(--kz-text-2);
}

body.kz-theme-modern .PageChild .form-control {
    height: 36px;
    padding: 0 10px !important;
    font-size: 13px !important;
    border-radius: var(--kz-radius) !important;
}

body.kz-theme-modern .PageChild input[type="checkbox"].form-control {
    width: 18px !important;
    height: 18px !important;
    margin: 9px 0 0;
    padding: 0 !important;
    accent-color: var(--kz-primary);
}

body.kz-theme-modern .kz_Child .autocomplete { width: calc(100% - 42px) !important; margin-right: 0 !important; }

body.kz-theme-modern .kz_Child .AutocompleteLookUp,
body.kz-theme-modern .kz_Child .ShowLookUpModal {
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border: 1px solid var(--kz-border-strong);
    border-radius: var(--kz-radius);
    background: var(--kz-surface) !important;
    color: var(--kz-text-2) !important;
    cursor: pointer;
}

body.kz-theme-modern .kz_Child tfoot .AutocompleteLookUp,
body.kz-theme-modern .kz_Child tfoot .ShowLookUpModal { display: inline-flex; }

body.kz-theme-modern .kz_Child .AutocompleteLookUp:hover,
body.kz-theme-modern .kz_Child .ShowLookUpModal:hover {
    border-color: var(--kz-primary);
    color: var(--kz-primary) !important;
}

body.kz-theme-modern .PageChild .detailButton {
    height: 36px;
    min-width: 72px;
    margin-top: 19px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
}

body.kz-theme-modern .PageChild .PageChild_RowCount {
    width: 44px;
    border: 0;
    background: transparent;
    font-weight: 500;
    color: var(--kz-text-2);
}

body.kz-theme-modern .ChildGridEditButton,
body.kz-theme-modern .ChildGridDeleteButton,
body.kz-theme-modern .ChildGridduplicateButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}

/* Grid label tab above a child grid */
body.kz-theme-modern .kz_Child + .nav-tabs,
body.kz-theme-modern .kz_section .nav-tabs {
    margin-bottom: 10px;
    border: 0;
}

body.kz-theme-modern .kz_section .nav-tabs .nav-link {
    padding: 6px 2px;
    margin-right: 16px;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    background: transparent !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--kz-text-2);
}

body.kz-theme-modern .kz_section .nav-tabs .nav-link.active {
    border-bottom-color: var(--kz-primary) !important;
    color: var(--kz-text);
}

/* Sections grouped as tabs (Views/Shared/_SectionTabs.cshtml): without these, Bootstrap and
   UserData/css/style.css paint the tab links white / #f4f4f4, which stays white in dark mode. */
body.kz-theme-modern fieldset.SectionTabs > .nav-tabs {
    gap: 4px;
    margin: 0 0 12px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid var(--kz-border);
}

body.kz-theme-modern fieldset.SectionTabs > .nav-tabs .nav-item { margin: 0 0 -1px; }

body.kz-theme-modern fieldset.SectionTabs > .nav-tabs .nav-link {
    padding: 8px 14px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--kz-text-2) !important;
    font-size: 14px;
    font-weight: 500;
}

body.kz-theme-modern fieldset.SectionTabs > .nav-tabs .nav-link:hover { color: var(--kz-text) !important; }

body.kz-theme-modern fieldset.SectionTabs > .nav-tabs .nav-link.active {
    border-bottom-color: var(--kz-primary) !important;
    color: var(--kz-text) !important;
    font-weight: 600;
}

body.kz-theme-modern fieldset.SectionTabs > .nav-tabs .nav-link .fa { color: inherit; }

/* ---------- Form action bar ---------- */
body.kz-theme-modern #formButtonDiv {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start; /* Save first; Delete is pushed to the far right */
    align-items: center;
    gap: 8px;
    margin: 24px -20px -20px !important;
    padding: 14px 20px !important;
    background: var(--kz-surface) !important;
    border-top: 1px solid var(--kz-border);
    border-radius: 0 0 var(--kz-radius-lg) var(--kz-radius-lg);
}

body.kz-theme-modern #formButtonDiv .btn {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    min-width: 104px;
    height: 40px;
    margin: 0 !important;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
}

body.kz-theme-modern #formButtonDiv .btn .fa { font-size: 13px; }

body.kz-theme-modern #kz_submit { font-weight: 600 !important; }

/* Delete sits apart at the far right, away from Save */
body.kz-theme-modern #formButtonDiv #kz_delete { margin-left: auto !important; }

body.kz-theme-modern #formButtonDiv .btn-secondary,
body.kz-theme-modern #formButtonDiv .btn-warning,
body.kz-theme-modern #formButtonDiv .btn-info {
    background: var(--kz-surface) !important;
    border: 1px solid var(--kz-border-strong) !important;
    color: var(--kz-text) !important;
    box-shadow: none !important;
}

body.kz-theme-modern #formButtonDiv .btn-secondary:hover,
body.kz-theme-modern #formButtonDiv .btn-warning:hover,
body.kz-theme-modern #formButtonDiv .btn-info:hover { background: var(--kz-surface-2) !important; }

body.kz-theme-modern #kz_delete {
    color: var(--kz-danger) !important;
    border-color: #fecaca !important;
}

body.kz-theme-modern #kz_delete:hover { background: #fef2f2 !important; }

/* ---------- Validation and messages ---------- */
body.kz-theme-modern .has-error .form-control,
body.kz-theme-modern .form-control.error {
    border-color: var(--kz-danger) !important;
}

body.kz-theme-modern .has-error .form-control:focus,
body.kz-theme-modern .form-control.error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important; }

body.kz-theme-modern .has-error .kz_fieldLabel { color: var(--kz-danger) !important; }

body.kz-theme-modern .form-error,
body.kz-theme-modern .help-block.form-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--kz-danger) !important;
}

body.kz-theme-modern #divSubmitMessages {
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid #fecaca;
    border-radius: var(--kz-radius);
    background: #fef2f2;
    color: var(--kz-danger);
    font-size: 13px;
}

body.kz-theme-modern #divSubmitMessages.alert-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: var(--kz-success);
}

body.kz-theme-modern #ulSubmitMessages { margin: 0; padding: 10px 14px !important; }

/* ---------- Autocomplete dropdowns (menu search, lookups) ---------- */
/* Above the sticky top bar (1030) and menu bar (1020); jQuery UI's default is 100. */
body.kz-theme-modern .ui-autocomplete.ui-menu {
    z-index: 1045 !important;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-lg);
    background: var(--kz-surface);
    box-shadow: var(--kz-shadow-lg);
    font-family: var(--kz-font);
    font-size: 13px;
}

body.kz-theme-modern .ui-autocomplete .ui-menu-item-wrapper {
    padding: 7px 10px;
    border: 0 !important;
    border-radius: 6px;
    color: var(--kz-text);
}

body.kz-theme-modern .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    margin: 0;
    background: var(--kz-primary-soft) !important;
    color: var(--kz-primary) !important;
}

/* ---------- Lookup search popup ---------- */
body.kz-theme-modern #myModalLookUp .myModalLookUpTop {
    padding: 12px 0;
    background: var(--kz-surface) !important;
    border-bottom: 1px solid var(--kz-border);
}

body.kz-theme-modern #txtLookUpSearch {
    width: 100%;
    max-width: 420px;
    height: 38px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--kz-border-strong);
    border-radius: var(--kz-radius);
    background: var(--kz-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center;
    font-size: 14px;
    outline: none;
}

body.kz-theme-modern #txtLookUpSearch:focus {
    border-color: var(--kz-primary);
    box-shadow: 0 0 0 3px var(--kz-primary-ring);
}

body.kz-theme-modern #myModalLookUpSearchLable {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kz-text);
}

/* ---------- Modals (Bootstrap and jQuery UI dialogs) ---------- */
body.kz-theme-modern .modal-content {
    border: 0;
    border-radius: var(--kz-radius-lg);
    box-shadow: var(--kz-shadow-lg);
    overflow: hidden;
}

body.kz-theme-modern .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--kz-border);
}

body.kz-theme-modern .modal-title { font-size: 16px; font-weight: 600; color: var(--kz-text); }

body.kz-theme-modern .modal-footer { padding: 12px 20px; border-top: 1px solid var(--kz-border); }

body.kz-theme-modern .ui-dialog {
    padding: 0;
    border: 0 !important;
    border-radius: var(--kz-radius-lg);
    box-shadow: var(--kz-shadow-lg);
    overflow: hidden;
    font-family: var(--kz-font);
}

body.kz-theme-modern .ui-dialog .ui-dialog-titlebar {
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--kz-border);
    border-radius: 0;
    background: var(--kz-surface);
    color: var(--kz-text);
    font-size: 15px;
    font-weight: 600;
}

body.kz-theme-modern .ui-dialog .ui-dialog-titlebar-close {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    padding: 0;
    border: 0 !important;
    border-radius: 6px;
    background: transparent !important;
    box-shadow: none !important;
}

body.kz-theme-modern .ui-dialog .ui-dialog-title { color: var(--kz-text) !important; font-weight: 600; }

body.kz-theme-modern .ui-dialog .ui-dialog-titlebar-close:hover { background: var(--kz-surface-2); }

body.kz-theme-modern .ui-dialog .ui-dialog-titlebar-close::before {
    content: "\00d7";
    display: block;
    font-size: 22px;
    line-height: 28px;
    color: var(--kz-text-2);
}

body.kz-theme-modern .ui-dialog .ui-dialog-titlebar-close::after { display: none !important; }

body.kz-theme-modern .ui-dialog .ui-dialog-titlebar-close .ui-icon,
body.kz-theme-modern .ui-dialog .ui-dialog-titlebar-close .ui-button-text { display: none; }

/* DataTables search box and page size (lookups and lists) */
body.kz-theme-modern .dataTables_filter label,
body.kz-theme-modern .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--kz-text-2);
}

body.kz-theme-modern .dataTables_filter input,
body.kz-theme-modern .dataTables_length select {
    height: 36px;
    margin: 0 !important;
    padding: 0 12px;
    border: 1px solid var(--kz-border-strong);
    border-radius: var(--kz-radius);
    background-color: var(--kz-surface);
    font-size: 13px;
    color: var(--kz-text);
    outline: none;
}

body.kz-theme-modern .dataTables_filter input {
    min-width: 220px;
    padding-left: 34px;
    background: var(--kz-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center;
}

body.kz-theme-modern .dataTables_filter input:focus,
body.kz-theme-modern .dataTables_length select:focus {
    border-color: var(--kz-primary);
    box-shadow: 0 0 0 3px var(--kz-primary-ring);
}

body.kz-theme-modern .dataTables_info { font-size: 13px; color: var(--kz-text-2); }

body.kz-theme-modern .ui-widget-overlay { background: rgba(15, 23, 42, .45); opacity: 1; }

@media (max-width: 767px) {
    body.kz-theme-modern #formButtonDiv { justify-content: stretch; }
    /* One row, so the sticky bar costs as little screen as possible */
    body.kz-theme-modern #formButtonDiv { flex-wrap: nowrap; gap: 6px; }
    body.kz-theme-modern #formButtonDiv .btn { flex: 1 1 0 !important; min-width: 0; height: 38px; padding: 0 8px; font-size: 13px; }
    body.kz-theme-modern #kz_submit { flex-grow: 1.4 !important; }
}

/* =========================================================
   Phase 3: list grids, filters and pagination
   ========================================================= */

/* ---------- Table ---------- */
body.kz-theme-modern #kaizen_tablelist {
    margin-top: 2px !important;
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius-lg);
    background: var(--kz-surface);
}

/* An empty helper table is rendered before the real one. */
body.kz-theme-modern #kaizen_tablelist > table:empty { display: none; }

body.kz-theme-modern #kz_ListTable.getHtmlTable,
body.kz-theme-modern .kaizen_tableSublist .getHtmlTable {
    margin: 0;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    color: var(--kz-text);
}

body.kz-theme-modern #kz_ListTable.getHtmlTable td,
body.kz-theme-modern #kz_ListTable.getHtmlTable th {
    padding: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kz-border) !important;
    vertical-align: middle;
}

body.kz-theme-modern #kz_ListTable.getHtmlTable tbody tr:last-child td { border-bottom: 0 !important; }

body.kz-theme-modern #kz_ListTable.getHtmlTable thead tr:first-child td,
body.kz-theme-modern #kz_ListTable.getHtmlTable thead tr:first-child th {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    background: var(--kz-surface-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--kz-text-2);
}

body.kz-theme-modern #kz_ListTable.getHtmlTable thead tr:first-child td:first-child { border-top-left-radius: var(--kz-radius-lg); }
body.kz-theme-modern #kz_ListTable.getHtmlTable thead tr:first-child td:last-child { border-top-right-radius: var(--kz-radius-lg); }

body.kz-theme-modern #kz_ListTable .tablelist_column { cursor: pointer; transition: color .15s ease; }
body.kz-theme-modern #kz_ListTable .tablelist_column:hover { color: var(--kz-text); }

body.kz-theme-modern #kz_ListTable .fa-sort-asc,
body.kz-theme-modern #kz_ListTable .fa-sort-desc { padding-left: 6px; color: var(--kz-primary); }

body.kz-theme-modern #kz_ListTable.table-striped tbody tr:nth-of-type(odd) { background: transparent; }

body.kz-theme-modern #kz_ListTable.table-hover tbody tr:hover { background: var(--kz-surface-2); }

body.kz-theme-modern #kz_ListTable tbody tr.PageListSelectedRow,
body.kz-theme-modern #kz_ListTable tbody tr.PageListSelectedRow td { background: var(--kz-primary-soft) !important; }

/* Funnel that toggles the filter row */
body.kz-theme-modern #kz_ListTable .openSearch {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    margin-right: 4px;
    padding: 0 !important;
    border-radius: 6px;
    font-size: 12px;
    color: var(--kz-muted);
    vertical-align: middle;
    transition: background-color .15s ease, color .15s ease;
}

body.kz-theme-modern #kz_ListTable .openSearch:hover {
    background: var(--kz-primary-soft);
    color: var(--kz-primary);
}

/* ---------- Inline filter row ---------- */
/* Site.css paints the list's thead with a light gradient and a light 2px bottom border; the filter row's tinted cells
   let the gradient show through (a white band in dark mode). The header and filter cells carry their own colours and
   borders, so the thead itself stays clear. */
body.kz-theme-modern .kaizen_tablelist thead { background: none !important; border-bottom: 0 !important; }

body.kz-theme-modern #tablelist_Search td {
    padding: 8px 8px !important;
    background: var(--kz-primary-soft);
    border-bottom: 1px solid var(--kz-border) !important;
}

body.kz-theme-modern #tablelist_Search .filter-input,
body.kz-theme-modern #tablelist_Search .form-control {
    height: 34px;
    padding: 0 10px !important;
    font-size: 13px !important;
    border-radius: var(--kz-radius) !important;
    background-color: var(--kz-surface);
}

body.kz-theme-modern #tablelist_Search select.form-control {
    padding-right: 30px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

body.kz-theme-modern #tablelist_Search .list-search {
    white-space: nowrap;
    padding-right: 8px !important;
}

body.kz-theme-modern #tablelist_Search .list-search .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

body.kz-theme-modern #tablelist_Search .list-search .fa-search {
    background: var(--kz-primary);
    color: #fff;
}

body.kz-theme-modern #tablelist_Search .list-search .fa-search:hover { background: var(--kz-primary-hover); }

body.kz-theme-modern #tablelist_Search .list-search .fa-eraser {
    margin-left: 2px;
    background: var(--kz-surface);
    border: 1px solid var(--kz-border-strong);
    color: var(--kz-text-2);
}

body.kz-theme-modern #tablelist_Search .list-search .fa-eraser:hover { color: var(--kz-danger); }

/* ---------- Row actions (shown on hover) ---------- */
body.kz-theme-modern #kz_ListTable tbody tr { position: relative; }

body.kz-theme-modern .kz_ListRowButton {
    top: 50%;
    right: 12px !important;
    margin-top: 0 !important;
    transform: translateY(-50%);
    padding: 3px !important;
    gap: 2px;
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius);
    background: var(--kz-surface);
    box-shadow: var(--kz-shadow);
    font-size: 13px !important;
}

body.kz-theme-modern tr:hover .kz_ListRowButton { display: flex !important; }

body.kz-theme-modern .list-record-view,
body.kz-theme-modern .list-record-edit,
body.kz-theme-modern .list-record-delete,
body.kz-theme-modern .list-record-saveAs,
body.kz-theme-modern .list-record-plus {
    float: none !important;
    width: 28px;
    height: 28px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    transform: none !important;
    opacity: 1 !important;
}

body.kz-theme-modern .list-record-view { color: var(--kz-primary) !important; }
body.kz-theme-modern .list-record-edit { color: #d97706 !important; }
body.kz-theme-modern .list-record-delete { color: var(--kz-danger) !important; }
body.kz-theme-modern .list-record-saveAs,
body.kz-theme-modern .list-record-plus { color: var(--kz-success) !important; }

body.kz-theme-modern .list-record-view:hover { background: var(--kz-primary-soft) !important; }
body.kz-theme-modern .list-record-edit:hover { background: #fffbeb !important; }
body.kz-theme-modern .list-record-delete:hover { background: #fef2f2 !important; }
body.kz-theme-modern .list-record-saveAs:hover,
body.kz-theme-modern .list-record-plus:hover { background: #f0fdf4 !important; }

/* ---------- Footer: record count and pagination ---------- */
body.kz-theme-modern #kaizen_tablelistFooter {
    margin: 0 !important;
    padding: 12px 4px 0;
    background: transparent !important;
    border: 0 !important;
}

body.kz-theme-modern #navTableList {
    display: flex !important;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100% !important;
}

body.kz-theme-modern #navTableList > ul.nav {
    width: auto !important;
    margin: 0;
    font-size: 13px;
    color: var(--kz-text-2);
    text-align: left !important;
}

body.kz-theme-modern #navTableList .pagination {
    margin: 0;
    gap: 4px;
    flex-wrap: wrap;
}

body.kz-theme-modern #navTableList .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 10px;
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius) !important;
    background: var(--kz-surface);
    color: var(--kz-text-2);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
}

body.kz-theme-modern #navTableList a.page-link:hover {
    background: var(--kz-surface-2);
    color: var(--kz-text);
    text-decoration: none;
}

body.kz-theme-modern #navTableList .page-item.active .page-link {
    background: var(--kz-primary) !important;
    border-color: var(--kz-primary) !important;
    color: #fff !important;
}

body.kz-theme-modern #navTableList .page-item.disabled .page-link { color: var(--kz-muted); background: var(--kz-surface-2); }

/* Download list */
body.kz-theme-modern #DownloadList,
body.kz-theme-modern .DownloadList {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    height: 36px;
    margin-top: 14px !important;
    padding: 0 14px !important;
    border: 1px solid var(--kz-border-strong) !important;
    border-radius: var(--kz-radius) !important;
    background: var(--kz-surface) !important;
    color: var(--kz-text) !important;
    font-size: 13px !important;
    font-weight: 500;
    box-shadow: none !important;
}

body.kz-theme-modern #DownloadList:hover,
body.kz-theme-modern .DownloadList:hover {
    background: var(--kz-surface-2) !important;
    border-color: var(--kz-muted) !important;
}

body.kz-theme-modern #DownloadList .fa { color: var(--kz-text-2); }

/* Top scrollbar mirror for wide tables */
body.kz-theme-modern #kaizen_tablelistScroll { margin-bottom: 4px; }

/* ---------- Phones: rows become cards ---------- */
@media (max-width: 800px) {
    body.kz-theme-modern #kaizen_tablelist {
        border: 0;
        background: transparent;
    }

    body.kz-theme-modern .kaizen_tablelist #kz_ListTable tbody tr {
        margin-bottom: 12px;
        border: 1px solid var(--kz-border) !important;
        border-radius: var(--kz-radius-lg);
        background: var(--kz-surface);
        box-shadow: var(--kz-shadow-sm);
        overflow: hidden;
    }

    body.kz-theme-modern .kaizen_tablelist #kz_ListTable tbody td {
        padding: 9px 12px 9px 45% !important;
        border-bottom: 1px solid var(--kz-border) !important;
        font-size: 14px;
    }

    body.kz-theme-modern .kaizen_tablelist #kz_ListTable tbody td:before {
        left: 12px !important;
        width: 40% !important;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        font-weight: 500 !important;
        color: var(--kz-text-2);
    }

    body.kz-theme-modern .kaizen_tablelist #kz_ListTable tbody td:last-child {
        padding: 8px 12px !important;
        border-bottom: 0 !important;
        background: var(--kz-surface-2);
    }

    body.kz-theme-modern .kaizen_tablelist #kz_ListTable tbody td:last-child:before { display: none; }

    body.kz-theme-modern .kaizen_tablelist #kz_ListTable thead tr:first-child td:last-child {
        border: 1px solid var(--kz-border) !important;
        border-radius: var(--kz-radius);
        margin-bottom: 12px;
        background: var(--kz-surface);
    }

    body.kz-theme-modern .kz_ListRowButton {
        position: static !important;
        display: flex !important;
        justify-content: flex-end;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    body.kz-theme-modern .kz_ListRowButton spam { margin-left: 4px !important; }

    body.kz-theme-modern #navTableList { flex-direction: column-reverse; align-items: center; }

    body.kz-theme-modern .kaizen_tablelist #kz_ListTable thead tr { border: 0 !important; }

    /* The filter row becomes a card: each field's name above its box (MobileSite.css floats the names over the
       boxes), and the search / clear buttons once, at the bottom. */
    body.kz-theme-modern .kaizen_tablelist #kz_ListTable thead tr#tablelist_Search {
        margin-bottom: 12px;
        padding: 6px 0 4px;
        border: 1px solid var(--kz-border) !important;
        border-radius: var(--kz-radius-lg);
        background: var(--kz-surface);
        box-shadow: var(--kz-shadow-sm);
    }

    body.kz-theme-modern .kaizen_tablelist #tablelist_Search td {
        padding: 6px 12px !important;
        border: 0 !important;
        background: transparent;
    }

    body.kz-theme-modern .kaizen_tablelist #tablelist_Search td:before {
        position: static !important;
        display: block;
        width: auto !important;
        margin: 0 0 5px;
        padding: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        font-weight: 500 !important;
        color: var(--kz-text-2);
    }

    body.kz-theme-modern .kaizen_tablelist #tablelist_Search td.list-search:first-child { display: none !important; }

    body.kz-theme-modern .kaizen_tablelist #tablelist_Search td.list-search:last-child {
        display: flex !important;
        justify-content: flex-end;
        gap: 6px;
        margin-top: 4px;
        padding-top: 10px !important;
        border-top: 1px solid var(--kz-border) !important;
    }

    body.kz-theme-modern .kaizen_tablelist #tablelist_Search td.list-search:last-child:before { display: none; }

    body.kz-theme-modern .kaizen_tablelist #tablelist_Search .list-search .fa {
        width: auto;
        height: 34px;
        padding: 0 14px;
    }

    body.kz-theme-modern .kaizen_tablelist #tablelist_Search .list-search .fa-search:after { content: "Search"; margin-left: 6px; font: 600 13px var(--kz-font); }
    body.kz-theme-modern .kaizen_tablelist #tablelist_Search .list-search .fa-eraser:after { content: "Clear"; margin-left: 6px; font: 500 13px var(--kz-font); }

    body.kz-theme-modern #pageContentDivDetail { padding: 0 12px !important; }
    body.kz-theme-modern #pageHeader { padding: 16px 12px 10px !important; }
    body.kz-theme-modern #tabContent { padding: 12px !important; }
    body.kz-theme-modern #formButtonDiv { margin: 20px -12px -12px !important; padding: 12px !important; }
}

/* =========================================================
   Phase 4: dashboard, notifications and remaining screens
   ========================================================= */

/* ---------- Cards (dashboard panels and custom HTML widgets) ---------- */
body.kz-theme-modern .card {
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-lg) !important;
    background: var(--kz-surface);
    box-shadow: var(--kz-shadow-sm) !important;
}

/*
    Panels flow side by side. Each panel's configured width (--kz-panel-width, set by kz_DashBoard.js)
    is its preferred width: panels share a row while they fit, then stretch to fill the row's leftover space.
    The configured height still sets each chart's height.
*/
body.kz-theme-modern #DashboardPanel {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 -8px;
}

/* 0.9: a panel may shrink up to 10% below its configured width to stay beside its neighbour. */
body.kz-theme-modern #DashboardPanel > .col {
    flex: 1 1 calc(var(--kz-panel-width, 100%) * .9);
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 8px 16px !important;
    float: none !important;
}

/* Cards in a row share its height; table panels grow to fill it, never below their configured height. */
body.kz-theme-modern #DashboardPanel .DashboardDetailPanel.card {
    display: flex;
    flex-direction: column;
}

body.kz-theme-modern #DashboardPanel .DashboardDetailPanel.card > .card-block { flex: 1 1 auto; }

body.kz-theme-modern #DashboardPanel .DashboardDetailPanel-2 > .card-block {
    position: relative;
    height: auto !important;
    min-height: var(--kz-panel-height, 200px);
}

body.kz-theme-modern #DashboardPanel .DashboardDetailPanel-2 > .card-block > .google-visualization-table {
    position: absolute !important;
    top: 12px;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto !important;
    height: auto !important;
}

body.kz-theme-modern .DashboardDetailPanel.card {
    height: 100%;
    overflow: hidden;
    transition: box-shadow .15s ease;
}

body.kz-theme-modern .DashboardDetailPanel.card:hover { box-shadow: var(--kz-shadow) !important; }

body.kz-theme-modern .DashboardDetailPanel > .card-header {
    display: block;
    padding: 14px 16px !important;
    background: var(--kz-surface) !important;
    border-bottom: 1px solid var(--kz-border) !important;
}

body.kz-theme-modern .DashboardDetailPanel > .card-header h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--kz-text) !important;
}

body.kz-theme-modern .kz_RefreshDash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border-radius: 6px;
    font-size: 13px;
    color: var(--kz-muted);
    transition: background-color .15s ease, color .15s ease;
}

body.kz-theme-modern .kz_RefreshDash:hover {
    background: var(--kz-primary-soft);
    color: var(--kz-primary);
}

body.kz-theme-modern .DashboardDetailPanel > .card-block { padding: 12px 16px 16px; }

/* Panels without a header (custom HTML) */
body.kz-theme-modern .DashboardDetailPanel > h5:empty { display: none; }

/* Stat cards inside custom HTML panels */
body.kz-theme-modern .DashboardDetailPanel .card .card-block { padding: 22px 18px; }

body.kz-theme-modern .DashboardDetailPanel .card h4 {
    margin: 12px 0 4px !important;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--kz-text);
}

body.kz-theme-modern .DashboardDetailPanel .card p { color: var(--kz-text-2); font-size: 13px; }

body.kz-theme-modern .DashboardDetailPanel .card .fa.d-block {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--kz-primary-soft);
    color: var(--kz-primary);
    font-size: 18px !important;
}

body.kz-theme-modern .btn-round { border-radius: 999px !important; }

/* Google Charts tables */
body.kz-theme-modern .google-visualization-table-table {
    font-family: var(--kz-font) !important;
    font-size: 13px !important;
    border: 0 !important;
}

body.kz-theme-modern .google-visualization-table-table th,
body.kz-theme-modern .google-visualization-table-table td {
    padding: 8px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kz-border) !important;
}

body.kz-theme-modern .google-visualization-table-tr-head,
body.kz-theme-modern .google-visualization-table-tr-head th,
body.kz-theme-modern .google-visualization-table-th {
    background: var(--kz-surface-2) !important;
    background-image: none !important;
    font-size: 12px;
    font-weight: 600 !important;
    color: var(--kz-text-2) !important;
    text-align: left;
}

body.kz-theme-modern .google-visualization-table-tr-even,
body.kz-theme-modern .google-visualization-table-tr-odd { background: var(--kz-surface) !important; }

body.kz-theme-modern .google-visualization-table-tr-over,
body.kz-theme-modern .google-visualization-table-tr-over td { background: var(--kz-surface-2) !important; }

body.kz-theme-modern .google-visualization-table-tr-sel,
body.kz-theme-modern .google-visualization-table-tr-sel td { background: var(--kz-primary-soft) !important; }

body.kz-theme-modern .google-visualization-table-seq { color: var(--kz-muted) !important; }

/* ---------- Notification dropdown ---------- */
body.kz-theme-modern #kz_notification {
    top: calc(var(--kz-topbar-h) - 6px) !important;
    width: 340px !important;
    max-height: 420px;
    overflow-y: auto;
    padding: 6px;
    margin-top: 8px;
    background: var(--kz-surface);
}

body.kz-theme-modern #kz_notification:empty::before {
    content: "You're all caught up.";
    display: block;
    padding: 18px 12px;
    font-size: 13px;
    text-align: center;
    color: var(--kz-text-2);
}

body.kz-theme-modern #kz_notification .list-group-item {
    margin: 0 0 2px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--kz-radius) !important;
    background: transparent;
}

body.kz-theme-modern #kz_notification .list-group-item:hover { background: var(--kz-surface-2); }

body.kz-theme-modern #kz_notification .notification-user {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--kz-text);
}

body.kz-theme-modern #kz_notification .notification-msg {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--kz-text-2);
}

body.kz-theme-modern #kz_notification .notification-time { font-size: 11px; color: var(--kz-muted); }

body.kz-theme-modern #kz_notification .btn-danger {
    float: right;
    margin-top: -2px;
    padding: 2px 10px;
    border: 1px solid var(--kz-border-strong);
    border-radius: 999px;
    background: var(--kz-surface);
    color: var(--kz-primary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

body.kz-theme-modern #kz_notification .btn-danger:hover { background: var(--kz-primary-soft); }

/* ---------- Toasts (notify.js) ---------- */
body.kz-theme-modern .notify {
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 14px 40px 14px 16px;
    border: 1px solid var(--kz-border);
    border-left-width: 4px;
    border-radius: var(--kz-radius-lg);
    background: var(--kz-surface) !important;
    box-shadow: var(--kz-shadow-lg);
    color: var(--kz-text) !important;
    font-family: var(--kz-font);
    font-size: 14px;
}

body.kz-theme-modern .notify-success { border-left-color: var(--kz-success) !important; }
body.kz-theme-modern .notify-danger { border-left-color: var(--kz-danger) !important; }
body.kz-theme-modern .notify-warning { border-left-color: #f59e0b !important; }
body.kz-theme-modern .notify-info,
body.kz-theme-modern .notify-default,
body.kz-theme-modern .notify-toast { border-left-color: var(--kz-primary) !important; }

body.kz-theme-modern .notify > button.close {
    top: 12px;
    right: 12px;
    font-size: 20px;
    font-weight: 400;
    text-shadow: none;
    color: var(--kz-text-2);
    opacity: .7;
}

/* ---------- Alerts, badges and tooltips ---------- */
body.kz-theme-modern .alert {
    border-radius: var(--kz-radius);
    font-size: 14px;
}

body.kz-theme-modern .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
body.kz-theme-modern .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
body.kz-theme-modern .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
body.kz-theme-modern .alert-info { background: var(--kz-primary-soft); border-color: rgba(var(--a1-rgb), .30); color: var(--a1h); }

body.kz-theme-modern .badge {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 600;
}

body.kz-theme-modern .tooltip-inner {
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--kz-text);
    font-family: var(--kz-font);
    font-size: 12px;
}

/* ---------- Account pages (forgot/reset password, OTP, database) ---------- */
body.kz-theme-modern section.login {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px !important;
    background: var(--kz-bg) !important;
    background-image: none !important;
}

body.kz-theme-modern section.login .LoginBox,
body.kz-theme-modern section.login .login-card,
body.kz-theme-modern #loginSection .login-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto !important;
    padding: 32px !important;
    border: 1px solid var(--kz-border);
    border-radius: 16px !important;
    background: var(--kz-surface) !important;
    box-shadow: var(--kz-shadow-lg) !important;
    text-align: left;
}

body.kz-theme-modern section.login .txt-primary,
body.kz-theme-modern #loginSection .txt-primary {
    margin: 16px 0 6px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--kz-text) !important;
}

body.kz-theme-modern section.login img { max-height: 40px; width: auto; }

body.kz-theme-modern section.login .form-control,
body.kz-theme-modern #loginSection .login-card .form-control {
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
}

body.kz-theme-modern section.login .md-line { display: none; }

body.kz-theme-modern section.login .btn,
body.kz-theme-modern #loginSection .login-card .btn {
    height: 44px;
    font-size: 15px;
    font-weight: 600;
}

body.kz-theme-modern section.login .text-danger { color: var(--kz-danger) !important; font-size: 13px; }

/* ---------- User profile (a bare fieldset in the page) ---------- */
body.kz-theme-modern #mainDivSub > fieldset.section-fieldset {
    margin: 24px !important;
    padding: 20px 24px 8px !important;
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-lg);
    background: var(--kz-surface);
    box-shadow: var(--kz-shadow-sm);
}

body.kz-theme-modern #mainDivSub > fieldset.section-fieldset > legend {
    float: left;
    width: 100%;
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--kz-border);
    font-size: 18px;
    font-weight: 600;
    color: var(--kz-text);
}

body.kz-theme-modern #mainDivSub > fieldset.section-fieldset > legend + * { clear: both; }

body.kz-theme-modern #mainDivSub > fieldset.section-fieldset strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--kz-text-2);
}

body.kz-theme-modern #mainDivSub > fieldset.section-fieldset .form-control-static {
    margin: 0;
    font-size: 15px;
    color: var(--kz-text);
}

@media (max-width: 800px) {
    body.kz-theme-modern #mainDivSub > fieldset.section-fieldset { margin: 12px !important; padding: 16px !important; }
}

/* Reset password reuses the login IDs but has no brand panel */
body.kz-theme-modern #loginSection #loginMainDiv .row { margin: 0; }

/* =========================================================
   Compact density: more of the screen for forms and lists.
   Overrides the spacing above; tune here.
   ========================================================= */

/* Vertical mode: the old theme pins the page header and pads the content down to clear it. */
body.kz-theme-modern.bodyVerticalNavigation #mainDiv { padding-top: 0 !important; }
body.kz-theme-modern #pageContentDiv { padding: 0 !important; }
body.kz-theme-modern #pageHeader { position: static !important; }

/* Page header: one tight row */
body.kz-theme-modern #pageHeader { padding: 12px 16px 8px !important; }
body.kz-theme-modern #pageTitle { font-size: 19px !important; }
body.kz-theme-modern #pageContentDivDetail { padding: 0 16px !important; }

/* Tabs */
body.kz-theme-modern #pageContentDivColumn > .nav-tabs { margin-bottom: 8px; padding: 3px; }
body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link { height: 28px; padding: 0 12px !important; }

/* Content card */
body.kz-theme-modern #tabContent { padding: 14px 16px !important; }
body.kz-theme-modern #formButtonDiv { margin: 16px -16px -14px !important; padding: 10px 16px !important; }

/* Sections */
body.kz-theme-modern .sectionFieldset { margin-bottom: 16px !important; }
body.kz-theme-modern .sectionLegend { margin-bottom: 12px !important; padding-bottom: 8px !important; font-size: 14px !important; }
body.kz-theme-modern .kz_sectionDiv { margin-left: -6px; margin-right: -6px; }
body.kz-theme-modern .kz_sectionDiv > .kz_fieldSectionDiv { padding-left: 6px; padding-right: 6px; }

/* Fields */
body.kz-theme-modern .kz_fieldDivRow.form-group { margin-bottom: 10px; }
body.kz-theme-modern .kz_fieldLabel { padding-bottom: 4px !important; font-size: 12.5px !important; }

body.kz-theme-modern #kz_addnew .form-control,
body.kz-theme-modern #kz_addnew .form-control-sm,
body.kz-theme-modern .pageIsModal .form-control {
    height: 34px;
    padding: 0 10px !important;
    font-size: 13.5px !important;
}

body.kz-theme-modern #kz_addnew select.form-control,
body.kz-theme-modern .pageIsModal select.form-control { padding-right: 30px !important; background-position: right 10px center; }

body.kz-theme-modern #kz_addnew input.UploadSingleFile[readonly] { padding-left: 34px !important; }

body.kz-theme-modern .kz-form-group .kz_FieldButtons,
body.kz-theme-modern .kz-form-group .toggle-password { height: 34px; }

body.kz-theme-modern .kz-form-group .AutocompleteLookUp,
body.kz-theme-modern .kz-form-group .ShowLookUpModal,
body.kz-theme-modern .kz-form-group .ShowModal,
body.kz-theme-modern .kz-form-group .FieldDeleteIcon { width: 28px; height: 28px; }

body.kz-theme-modern #kz_addnew input[type="checkbox"].form-control { margin-top: 8px; }

/* Child grids */
body.kz-theme-modern .PageChild thead th { padding: 8px 10px !important; }
body.kz-theme-modern .PageChild td { padding: 6px 10px !important; }
body.kz-theme-modern .PageChild .form-control { height: 32px; }
body.kz-theme-modern .kz_Child .autocomplete { width: calc(100% - 38px) !important; }
/* The lookup button is positioned absolutely (style.css .kz-form-group .kz_FieldButtons). Anchor it to its grid cell,
   so it sits in the space reserved next to its input instead of the corner of the section. */
body.kz-theme-modern .kz_Child td { position: relative; }
body.kz-theme-modern .kz_Child td > .kz_FieldButtons,
body.kz-theme-modern .kz_Child td .kz_fieldDiv > .kz_FieldButtons { right: 10px; top: auto; }
body.kz-theme-modern .kz_Child .AutocompleteLookUp,
body.kz-theme-modern .kz_Child .ShowLookUpModal { width: 32px; height: 32px; }
body.kz-theme-modern .PageChild .detailButton { height: 32px; margin-top: 17px; }
/* Phones (MobileSite.css, up to 800px): each grid row becomes a card and every cell shows its column name above the
   value (td::before, pinned to the cell's top). The padding above left no room for it, so the name sat on the value. */
@media (max-width: 800px) {
    body.kz-theme-modern .PageChild tbody td[data-title],
    body.kz-theme-modern .PageChild tfoot tr:first-child td[data-title] { padding-top: 30px !important; }
    body.kz-theme-modern .PageChild tbody td[data-title]::before,
    body.kz-theme-modern .PageChild tfoot tr:first-child td[data-title]::before {
        top: 8px;
        left: 10px;
        width: calc(100% - 20px);
        overflow: hidden;
        color: var(--kz-text-2);
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        text-overflow: ellipsis;
    }
}

/* Lists */
body.kz-theme-modern #kz_ListTable.getHtmlTable td,
body.kz-theme-modern #kz_ListTable.getHtmlTable th { padding: 9px 12px !important; }
body.kz-theme-modern #kz_ListTable.getHtmlTable thead tr:first-child td { padding-top: 9px !important; padding-bottom: 9px !important; }
body.kz-theme-modern #kaizen_tablelistFooter { padding-top: 10px; }
body.kz-theme-modern #DownloadList { margin-top: 10px !important; }

/* Footer */
body.kz-theme-modern #kaizenPageFooter { margin-top: 16px !important; padding: 10px 16px 14px !important; }

/* Dashboard */
body.kz-theme-modern #DashboardPanel > .col { padding-bottom: 12px !important; }

@media (max-width: 800px) {
    body.kz-theme-modern #pageHeader { padding: 10px 10px 6px !important; }
    body.kz-theme-modern #pageContentDivDetail { padding: 0 8px !important; }
    body.kz-theme-modern #tabContent { padding: 10px !important; }
    body.kz-theme-modern #formButtonDiv { margin: 14px -10px -10px !important; padding: 10px !important; }
}

/* =========================================================
   Motion: page entrance, tab switches, login, menus, loading.
   Short and subtle; switched off for users who ask for reduced motion.
   ========================================================= */
@keyframes kzFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes kzFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kzDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@keyframes kzSlideInRight {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes kzFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-14px, 12px); }
}

@keyframes kzSpin { to { transform: rotate(360deg); } }

/* Opening a page, moving between menu pages and refreshing */
body.kz-theme-modern #pageHeader { animation: kzFadeIn .3s ease-out both; }
body.kz-theme-modern #pageContentDivDetail,
body.kz-theme-modern #DashboardPanel,
body.kz-theme-modern #mainDivSub > fieldset.section-fieldset { animation: kzFadeUp .35s cubic-bezier(.2, .7, .2, 1) .05s both; }

/* Dashboard panels arrive one after another */
body.kz-theme-modern #DashboardPanel > .col { animation: kzFadeUp .4s cubic-bezier(.2, .7, .2, 1) both; }
body.kz-theme-modern #DashboardPanel > .col:nth-child(2) { animation-delay: .05s; }
body.kz-theme-modern #DashboardPanel > .col:nth-child(3) { animation-delay: .1s; }
body.kz-theme-modern #DashboardPanel > .col:nth-child(4) { animation-delay: .15s; }
body.kz-theme-modern #DashboardPanel > .col:nth-child(n+5) { animation-delay: .2s; }

/* Switching between List, Add New, View and Print */
body.kz-theme-modern #tabContent > .tab-pane.active { animation: kzFadeIn .22s ease-out; }

/* List rows */
body.kz-theme-modern #kz_ListTable tbody tr { animation: kzFadeIn .25s ease-out both; }

/* Login */
body.kz-theme-modern #loginBoxDiv > form { animation: kzFadeUp .5s cubic-bezier(.2, .7, .2, 1) .1s both; }
body.kz-theme-modern .kz-brand-content { animation: kzFadeUp .6s cubic-bezier(.2, .7, .2, 1) .2s both; }
body.kz-theme-modern .kz-brand-shapes span:nth-child(1) { animation: kzFloat 14s ease-in-out infinite; }
body.kz-theme-modern .kz-brand-shapes span:nth-child(3) { animation: kzFloat 10s ease-in-out -4s infinite reverse; }
body.kz-theme-modern section.login .LoginBox,
body.kz-theme-modern section.login .login-card { animation: kzFadeUp .45s cubic-bezier(.2, .7, .2, 1) both; }

/* Menus and popups */
body.kz-theme-modern #cssmenu ul li:hover > ul { animation: kzDropIn .16s ease-out; }
body.kz-theme-modern #kz_notification { animation: kzDropIn .16s ease-out; }
body.kz-theme-modern .ui-autocomplete.ui-menu { animation: kzDropIn .14s ease-out; }
body.kz-theme-modern .modal.show .modal-content,
body.kz-theme-modern .ui-dialog { animation: kzFadeUp .22s cubic-bezier(.2, .7, .2, 1); }
body.kz-theme-modern .notify { animation: kzSlideInRight .25s ease-out; }

/* Buttons respond to presses */
body.kz-theme-modern .btn:active:not(:disabled) { transform: translateY(1px); }

/* Loading overlay (saving, loading lists): soft backdrop and a slim spinner instead of the black screen */
body.kz-theme-modern #loading {
    background: rgba(244, 246, 251, .55) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: kzFadeIn .15s ease-out;
}

body.kz-theme-modern #isItLoaded {
    width: 44px !important;
    height: 44px !important;
    border: 3px solid var(--kz-primary-ring) !important;
    border-top-color: var(--kz-primary) !important;
    border-radius: 50%;
    animation: kzSpin .7s linear infinite !important;
}

/* =========================================================
   Premium layer: gradients, depth, glass surfaces and refined motion.
   Signature gradient: blue to indigo. Used for primary actions,
   active states and brand moments only, never for body surfaces.
   ========================================================= */
body.kz-theme-modern {
    --kz-grad: linear-gradient(135deg, var(--a1) 0%, var(--a2) 100%);
    --kz-grad-hover: linear-gradient(135deg, var(--a1h) 0%, var(--a2h) 100%);
    --kz-grad-soft: linear-gradient(135deg, rgba(var(--a1-rgb), .10) 0%, rgba(var(--a2-rgb), .10) 100%);
    --kz-grad-line: linear-gradient(90deg, var(--a1) 0%, var(--a2) 50%, var(--a3) 100%);
    --kz-indigo: var(--a2);

    /* One elevation scale, tinted towards the brand for a softer, richer shadow */
    --kz-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --kz-shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --kz-shadow: 0 4px 14px -4px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .05);
    --kz-shadow-lg: 0 20px 44px -12px rgba(30, 41, 90, .22), 0 6px 14px -6px rgba(16, 24, 40, .08);
    --kz-shadow-primary: 0 1px 2px rgba(var(--a1-rgb), .30), 0 6px 16px -4px rgba(var(--a2-rgb), .45);
    --kz-ring: 0 0 0 4px rgba(var(--a2-rgb), .14);

    /* Motion tokens: decelerate on arrival (spring-like), shorter on exit */
    --kz-ease: cubic-bezier(.16, 1, .3, 1);
    --kz-ease-in: cubic-bezier(.4, 0, 1, 1);
    --kz-dur-fast: 120ms;
    --kz-dur: 200ms;
    --kz-dur-slow: 360ms;

    /* Soft brand glow behind the app, fixed so it doesn't scroll away */
    background:
        radial-gradient(1100px 420px at 0% -8%, rgba(var(--a1-rgb), .07), transparent 62%),
        radial-gradient(900px 380px at 100% -6%, rgba(var(--a2-rgb), .06), transparent 60%),
        var(--kz-bg) !important;
    background-attachment: fixed !important;
}

body.kz-theme-modern ::selection { background: rgba(var(--a2-rgb), .18); color: inherit; }

/* Headings: tighter tracking reads as more refined at display sizes */
body.kz-theme-modern #pageTitle { letter-spacing: -.02em; }

/* Tabular figures keep numbers in lists and grids aligned */
body.kz-theme-modern #kz_ListTable,
body.kz-theme-modern .PageChild,
body.kz-theme-modern .google-visualization-table-table { font-variant-numeric: tabular-nums; }

/* Thin, quiet scrollbars */
body.kz-theme-modern { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
body.kz-theme-modern ::-webkit-scrollbar { width: 10px; height: 10px; }
body.kz-theme-modern ::-webkit-scrollbar-track { background: transparent; }
body.kz-theme-modern ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    background: #cbd5e1;
    background-clip: padding-box;
}
body.kz-theme-modern ::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* Keyboard focus: always visible, never removed */
body.kz-theme-modern a:focus-visible,
body.kz-theme-modern button:focus-visible,
body.kz-theme-modern .btn:focus-visible,
body.kz-theme-modern .nav-link:focus-visible,
body.kz-theme-modern [tabindex]:focus-visible {
    outline: 2px solid var(--kz-indigo) !important;
    outline-offset: 2px;
}

/* ---------- Glass top bar and menu bar ---------- */
body.kz-theme-modern #pageHeaderNav,
body.kz-theme-modern #cssmenuDiv {
    background: rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: rgba(226, 232, 240, .85) !important;
}

/* Brand hairline across the very top */
body.kz-theme-modern #pageHeaderNav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--kz-grad-line);
    pointer-events: none;
}

/* Avatar ring */
body.kz-theme-modern #userProfileImage {
    padding: 2px;
    background: var(--kz-grad) !important;
}

body.kz-theme-modern #profilePictureDiv,
body.kz-theme-modern #showNotification,
body.kz-theme-modern #logoffIcon {
    transition: background-color var(--kz-dur) var(--kz-ease), border-color var(--kz-dur) var(--kz-ease), box-shadow var(--kz-dur) var(--kz-ease), color var(--kz-dur) var(--kz-ease) !important;
}

body.kz-theme-modern #profilePictureDiv:hover,
body.kz-theme-modern #showNotification:hover { box-shadow: var(--kz-shadow-sm) !important; border-color: var(--kz-border-strong) !important; }

body.kz-theme-modern #showNotification .badge { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; box-shadow: 0 2px 6px rgba(225, 29, 72, .4); }

/* ---------- Buttons ---------- */
body.kz-theme-modern .btn {
    transition: background var(--kz-dur) var(--kz-ease), box-shadow var(--kz-dur) var(--kz-ease), transform var(--kz-dur-fast) var(--kz-ease), border-color var(--kz-dur) var(--kz-ease), color var(--kz-dur) var(--kz-ease);
}

body.kz-theme-modern .btn-primary,
body.kz-theme-modern #Loginbutton,
body.kz-theme-modern #navTableList .page-item.active .page-link,
body.kz-theme-modern #tablelist_Search .list-search .fa-search {
    border-color: transparent !important;
    background: var(--kz-grad) !important;
    color: #fff !important;
    box-shadow: var(--kz-shadow-primary), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

body.kz-theme-modern .btn-primary:hover,
body.kz-theme-modern #Loginbutton:hover {
    background: var(--kz-grad-hover) !important;
    box-shadow: 0 2px 4px rgba(var(--a1-rgb), .30), 0 10px 22px -6px rgba(var(--a2-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    transform: translateY(-1px);
}

body.kz-theme-modern .btn-primary:active,
body.kz-theme-modern #Loginbutton:active { transform: translateY(0) scale(.98); box-shadow: var(--kz-shadow-primary) !important; }

/* Secondary buttons lift too, more quietly */
body.kz-theme-modern #formButtonDiv .btn-secondary:hover,
body.kz-theme-modern #formButtonDiv .btn-warning:hover,
body.kz-theme-modern #DownloadList:hover { box-shadow: var(--kz-shadow-sm) !important; transform: translateY(-1px); }

/* ---------- Inputs: focus glow and label that follows focus ---------- */
body.kz-theme-modern .form-control {
    transition: border-color var(--kz-dur) var(--kz-ease), box-shadow var(--kz-dur) var(--kz-ease), background-color var(--kz-dur) var(--kz-ease);
}

body.kz-theme-modern .form-control:focus,
body.kz-theme-modern #searchMenu:focus,
body.kz-theme-modern .dataTables_filter input:focus,
body.kz-theme-modern #txtLookUpSearch:focus {
    border-color: var(--kz-indigo) !important;
    box-shadow: var(--kz-ring) !important;
}

body.kz-theme-modern .kz_fieldLabel { transition: color var(--kz-dur) var(--kz-ease); }
body.kz-theme-modern .kz_fieldLableDiv:focus-within > .kz_fieldLabel { color: var(--kz-indigo) !important; }

/* ---------- Tabs: gradient underline on the active pill ---------- */
body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link {
    position: relative;
    transition: background-color var(--kz-dur) var(--kz-ease), color var(--kz-dur) var(--kz-ease), box-shadow var(--kz-dur) var(--kz-ease) !important;
}

body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link.active::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--kz-grad);
    animation: kzGrowX var(--kz-dur-slow) var(--kz-ease);
}

body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link.active .fa { color: var(--kz-indigo); }

/* ---------- Page title accent ---------- */
body.kz-theme-modern #pageTitle {
    position: relative;
    padding-left: 12px !important;
}

body.kz-theme-modern #pageTitle::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 4px;
    border-radius: 4px;
    background: var(--kz-grad);
}

/* ---------- Cards ---------- */
body.kz-theme-modern #tabContent,
body.kz-theme-modern .card,
body.kz-theme-modern #kaizen_tablelist { box-shadow: var(--kz-shadow-sm) !important; }

body.kz-theme-modern .DashboardDetailPanel.card {
    transition: box-shadow var(--kz-dur-slow) var(--kz-ease), transform var(--kz-dur-slow) var(--kz-ease);
}

body.kz-theme-modern .DashboardDetailPanel.card:hover { box-shadow: var(--kz-shadow) !important; transform: translateY(-2px); }

/* Dashboard stat tiles: gradient icon badges */
body.kz-theme-modern .DashboardDetailPanel .card .fa.d-block {
    background: var(--kz-grad) !important;
    color: #fff !important;
    box-shadow: var(--kz-shadow-primary);
}

/* Section titles: small gradient marker */
body.kz-theme-modern .sectionLegend > span { position: relative; padding-left: 12px; }
body.kz-theme-modern .sectionLegend > span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 2px;
    background: var(--kz-grad);
}

/* ---------- Navigation states ---------- */
/* Horizontal: active top-level item carries a soft gradient wash */
body.kz-theme-modern #cssmenu > ul > li.active > a { background: var(--kz-grad-soft) !important; }

body.kz-theme-modern #cssmenu > ul > li > a,
body.kz-theme-modern #cssmenu ul li ul li a,
body.kz-theme-modern #verticalMenu .verticalMenuA {
    transition: background-color var(--kz-dur) var(--kz-ease), color var(--kz-dur) var(--kz-ease), padding var(--kz-dur) var(--kz-ease) !important;
}

/* Dropdowns grow from their trigger */
body.kz-theme-modern #cssmenu ul li ul { transform-origin: top left; }

/* Vertical: gradient bar marks the current page */
body.kz-theme-modern #verticalMenu .verticalMenuA.active {
    background: var(--kz-grad-soft) !important;
}

body.kz-theme-modern #verticalMenu .verticalMenuA.active::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--kz-grad);
}

/* ---------- Lists: accent on the hovered row ---------- */
body.kz-theme-modern #kz_ListTable tbody tr { transition: background-color var(--kz-dur-fast) var(--kz-ease); }
body.kz-theme-modern #kz_ListTable.table-hover tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--kz-indigo); }

/* Stagger the first rows in, 30ms apart */
body.kz-theme-modern #kz_ListTable tbody tr:nth-child(2) { animation-delay: .03s; }
body.kz-theme-modern #kz_ListTable tbody tr:nth-child(3) { animation-delay: .06s; }
body.kz-theme-modern #kz_ListTable tbody tr:nth-child(4) { animation-delay: .09s; }
body.kz-theme-modern #kz_ListTable tbody tr:nth-child(5) { animation-delay: .12s; }
body.kz-theme-modern #kz_ListTable tbody tr:nth-child(n+6) { animation-delay: .15s; }

/* Form sections arrive one after another when a form opens */
body.kz-theme-modern #tabContent > .tab-pane.active .sectionFieldset { animation: kzFadeUp var(--kz-dur-slow) var(--kz-ease) both; }
body.kz-theme-modern #tabContent > .tab-pane.active .sectionFieldset:nth-of-type(2) { animation-delay: .05s; }
body.kz-theme-modern #tabContent > .tab-pane.active .sectionFieldset:nth-of-type(3) { animation-delay: .1s; }
body.kz-theme-modern #tabContent > .tab-pane.active .sectionFieldset:nth-of-type(n+4) { animation-delay: .14s; }

/* ---------- Login: richer brand panel ---------- */
body.kz-theme-modern #loginBrandPanel {
    background:
        radial-gradient(700px 500px at 110% -10%, rgba(var(--a2-rgb), .55), transparent 60%),
        radial-gradient(600px 500px at -20% 110%, rgba(var(--a3-rgb), .35), transparent 60%),
        linear-gradient(160deg, #0a0f1e 0%, #111a33 55%, #0d1022 100%) !important;
}

body.kz-theme-modern .kz-brand-shapes span:nth-child(1) { background: radial-gradient(circle at 30% 30%, rgba(var(--a2-rgb), .55), rgba(var(--a1-rgb), .15) 70%) !important; }

body.kz-theme-modern .kz-brand-tagline {
    background: linear-gradient(90deg, #ffffff 0%, var(--a2d) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.kz-theme-modern .kz-brand-points .fa { background: rgba(var(--a1d-rgb), .16) !important; color: var(--a1d) !important; }

/* ---------- Loading: slim gradient progress bar across the top ---------- */
body.kz-theme-modern #loading {
    background: rgba(244, 246, 251, .35) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.kz-theme-modern #loading::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 40%;
    height: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--kz-grad-line);
    box-shadow: 0 0 10px rgba(var(--a2-rgb), .5);
    animation: kzProgress 1.1s var(--kz-ease) infinite;
}

body.kz-theme-modern #isItLoaded {
    border-color: rgba(var(--a2-rgb), .14) !important;
    border-top-color: var(--kz-indigo) !important;
}

@keyframes kzGrowX { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

@keyframes kzProgress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}

/* Dropdowns and popovers use the shared easing */
body.kz-theme-modern #cssmenu ul li:hover > ul { animation: kzDropIn var(--kz-dur) var(--kz-ease); }
body.kz-theme-modern .ui-autocomplete.ui-menu,
body.kz-theme-modern #kz_notification { animation: kzDropIn var(--kz-dur) var(--kz-ease); }

/* =========================================================
   Dark mode (html.kz-dark, set by kaizen-modern.js).
   Same structure, a second set of tokens; then the few places
   that use fixed colours (Bootstrap, jQuery UI, charts, old theme).
   ========================================================= */

/* Toggle button (added to the top bar by kaizen-modern.js) */
body.kz-theme-modern #kzThemeToggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--kz-border);
    border-radius: 50%;
    background: var(--kz-surface);
    color: var(--kz-text-2);
    font-size: 15px;
    cursor: pointer;
    transition: background-color var(--kz-dur) var(--kz-ease), color var(--kz-dur) var(--kz-ease), box-shadow var(--kz-dur) var(--kz-ease), border-color var(--kz-dur) var(--kz-ease);
}

body.kz-theme-modern #kzThemeToggle:hover { background: var(--kz-surface-2); color: var(--kz-text); box-shadow: var(--kz-shadow-sm); border-color: var(--kz-border-strong); }
body.kz-theme-modern #kzThemeToggle .fa { animation: kzSpinIn var(--kz-dur-slow) var(--kz-ease); }
html.kz-dark body.kz-theme-modern #kzThemeToggle { color: #fbbf24; }

@keyframes kzSpinIn { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Colour picker (added to the top bar by kaizen-modern.js) ---------- */
body.kz-theme-modern #kzAccentPicker { position: relative; flex: 0 0 auto; }

body.kz-theme-modern #kzAccentToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--kz-border);
    border-radius: 50%;
    background: var(--kz-surface);
    color: var(--kz-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background-color var(--kz-dur) var(--kz-ease), box-shadow var(--kz-dur) var(--kz-ease), border-color var(--kz-dur) var(--kz-ease);
}

body.kz-theme-modern #kzAccentToggle:hover,
body.kz-theme-modern #kzAccentPicker.is-open #kzAccentToggle { background: var(--kz-surface-2); box-shadow: var(--kz-shadow-sm); border-color: var(--kz-border-strong); }

body.kz-theme-modern #kzAccentMenu {
    position: absolute;
    top: calc(100% + 10px);
    right: -8px;
    z-index: 1050;
    display: none;
    width: 264px;
    padding: 12px;
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius-lg);
    background: var(--kz-surface);
    box-shadow: var(--kz-shadow-lg);
    transform-origin: top right;
}

body.kz-theme-modern #kzAccentPicker.is-open #kzAccentMenu { display: block; animation: kzPopIn var(--kz-dur) var(--kz-ease); }

@keyframes kzPopIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }

@keyframes kzSheetUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

body.kz-theme-modern .kz-accent-title {
    margin: 0 2px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kz-text-2);
}

body.kz-theme-modern .kz-accent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

body.kz-theme-modern .kz-accent-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 2px 6px;
    border: 0;
    border-radius: var(--kz-radius);
    background: transparent;
    color: var(--kz-text-2);
    font-size: 11.5px;
    cursor: pointer;
    transition: background-color var(--kz-dur-fast) var(--kz-ease), color var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern .kz-accent-option:hover { background: var(--kz-surface-2); color: var(--kz-text); }
body.kz-theme-modern .kz-accent-option.is-active { color: var(--kz-text); font-weight: 600; }

body.kz-theme-modern .kz-accent-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 6px rgba(16, 24, 40, .18);
    transition: transform var(--kz-dur) var(--kz-ease), box-shadow var(--kz-dur) var(--kz-ease);
}

body.kz-theme-modern .kz-accent-option:hover .kz-accent-swatch { transform: scale(1.08); }
body.kz-theme-modern .kz-accent-swatch .fa { opacity: 0; transform: scale(.5); transition: opacity var(--kz-dur) var(--kz-ease), transform var(--kz-dur) var(--kz-ease); }
body.kz-theme-modern .kz-accent-option.is-active .kz-accent-swatch { box-shadow: 0 0 0 2px var(--kz-surface), 0 0 0 4px var(--kz-text-2); }
body.kz-theme-modern .kz-accent-option.is-active .kz-accent-swatch .fa { opacity: 1; transform: none; }

body.kz-theme-modern .kz-accent-name { line-height: 1.2; text-align: center; }
body.kz-theme-modern .kz-accent-name small { display: block; font-size: 10px; font-weight: 400; color: var(--kz-muted); }

@media (max-width: 767px) {
    body.kz-theme-modern #kzAccentToggle { width: 34px; height: 34px; }
    body.kz-theme-modern #kzAccentMenu { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; }
}

/* ---------- Phone top bar: logo, notifications and logout; the rest behind "more" ----------
   kaizen-modern.js adds #kzMobileMore and toggles #pageHeaderNav.kz-more-open. */
body.kz-theme-modern #kzMobileMore { display: none; }

@media (max-width: 767px) {
    body.kz-theme-modern #pageHeaderNav {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 56px;
        padding: 10px 10px !important;
        gap: 6px !important;
        row-gap: 0 !important;
    }

    /* Always visible, in this order */
    body.kz-theme-modern #pageHeaderNav > .kz-bar-menu { order: 0; flex: 0 0 auto; }
    body.kz-theme-modern #topLogoContainer { order: 1; display: flex; align-items: center; height: auto !important; margin-right: auto !important; flex-shrink: 0; }
    body.kz-theme-modern #topCompanyLogo { display: flex; align-items: center; height: auto !important; }
    body.kz-theme-modern #topCompanyLogo img { height: 26px !important; }
    body.kz-theme-modern #kzMobileMore { order: 2; }
    body.kz-theme-modern #pageHeaderNav > .kz-bar-bell { order: 3; }
    body.kz-theme-modern #pageHeaderNav > .kz-bar-logout { order: 4; }

    body.kz-theme-modern #kzMobileMore,
    body.kz-theme-modern #showNotification,
    body.kz-theme-modern #logoffIcon,
    body.kz-theme-modern.bodyVerticalNavigation #mobile-collapse { width: 36px !important; height: 36px !important; font-size: 15px !important; }

    body.kz-theme-modern #kzMobileMore {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--kz-border);
        border-radius: 50%;
        background: var(--kz-surface);
        color: var(--kz-text-2);
        cursor: pointer;
        transition: background-color var(--kz-dur) var(--kz-ease), color var(--kz-dur) var(--kz-ease), border-color var(--kz-dur) var(--kz-ease);
    }

    body.kz-theme-modern #pageHeaderNav.kz-more-open #kzMobileMore {
        background: var(--kz-primary-soft);
        border-color: transparent;
        color: var(--kz-primary);
    }

    body.kz-theme-modern #kzMobileMore .fa { animation: kzSpinIn var(--kz-dur) var(--kz-ease); }

    /* Hidden until "more" is opened */
    body.kz-theme-modern #pageHeaderNav .navbar-toggler,
    body.kz-theme-modern #pageHeaderNav #navbarSupportedContent,
    body.kz-theme-modern #pageHeaderNav #kzAccentPicker,
    body.kz-theme-modern #pageHeaderNav #kzThemeToggle,
    body.kz-theme-modern #pageHeaderNav #userBoxDiv,
    body.kz-theme-modern #pageHeaderNav .separator { display: none !important; }

    /* ---- Opened panel: profile, then dark mode and colour, then company and location ---- */
    body.kz-theme-modern #pageHeaderNav.kz-more-open #userBoxDiv {
        display: flex !important;
        order: 10;
        flex: 1 1 100%;
        margin: 10px 0 0 !important;
        padding: 12px 0 0 !important;
        border-top: 1px solid var(--kz-border);
        animation: kzDropIn var(--kz-dur) var(--kz-ease) backwards;
    }

    body.kz-theme-modern #pageHeaderNav.kz-more-open #profilePictureDiv {
        height: 40px !important;
        padding: 0 16px 0 4px !important;
        font-size: 14px !important;
        font-weight: 600;
    }

    body.kz-theme-modern #pageHeaderNav.kz-more-open #userProfileImage { width: 32px !important; height: 32px !important; }

    body.kz-theme-modern #pageHeaderNav.kz-more-open #kzThemeToggle,
    body.kz-theme-modern #pageHeaderNav.kz-more-open #kzAccentPicker {
        display: inline-flex !important;
        flex: 1 1 calc(50% - 3px);
        margin-top: 10px;
        animation: kzDropIn var(--kz-dur) var(--kz-ease) .03s backwards; /* "backwards": no transform left behind, which would trap the fixed colour sheet */
    }

    body.kz-theme-modern #pageHeaderNav.kz-more-open #kzThemeToggle { order: 11; }
    body.kz-theme-modern #pageHeaderNav.kz-more-open #kzAccentPicker { order: 12; }

    body.kz-theme-modern #pageHeaderNav.kz-more-open #kzThemeToggle,
    body.kz-theme-modern #pageHeaderNav.kz-more-open #kzAccentToggle {
        gap: 8px;
        width: 100% !important;
        height: 42px !important;
        border-radius: var(--kz-radius) !important;
        font-size: 14px !important;
    }

    body.kz-theme-modern #pageHeaderNav.kz-more-open #kzThemeToggle::after { content: "Dark mode"; font-size: 13.5px; font-weight: 500; color: var(--kz-text); }
    html.kz-dark body.kz-theme-modern #pageHeaderNav.kz-more-open #kzThemeToggle::after { content: "Light mode"; }
    body.kz-theme-modern #pageHeaderNav.kz-more-open #kzAccentToggle::after { content: "Colour"; font-size: 13.5px; font-weight: 500; color: var(--kz-text); }

    body.kz-theme-modern #pageHeaderNav.kz-more-open #navbarSupportedContent {
        display: block !important;
        position: static !important;
        order: 13;
        flex: 1 1 100%;
        height: auto !important;
        margin: 10px 0 2px;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        animation: kzDropIn var(--kz-dur) var(--kz-ease) .06s backwards;
    }

    body.kz-theme-modern #pageHeaderNav.kz-more-open #navbarSupportedContent .form-inline {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 0 !important;
    }

    body.kz-theme-modern #pageHeaderNav.kz-more-open #navbarSupportedContent select.form-control {
        width: 100% !important;
        max-width: none !important;
        height: 42px;
        margin: 0 !important;
        font-size: 14px;
    }

    /* On phones the colour panel is a bottom sheet, above everything else */
    body.kz-theme-modern #kzAccentMenu,
    body.kz-theme-modern #pageHeaderNav.kz-more-open #kzAccentMenu {
        position: fixed;
        top: auto;
        right: 8px;
        bottom: 8px;
        left: 8px;
        z-index: 1080;
        width: auto;
        padding: 14px 12px 16px;
        border-radius: 16px;
        transform-origin: bottom center;
    }

    body.kz-theme-modern #kzAccentPicker.is-open #kzAccentMenu { animation: kzSheetUp var(--kz-dur-slow) var(--kz-ease); }

    /* A backdrop-filter would make the bar the containing block for the fixed sheet; use a solid bar on phones. */
    body.kz-theme-modern #pageHeaderNav {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: var(--kz-surface) !important;
    }

    html.kz-dark body.kz-theme-modern #pageHeaderNav { background: var(--kz-surface) !important; }

    /* The sidebar drawer opens under the 60px bar */
    body.kz-theme-modern.bodyVerticalNavigation #verticalMenu { top: 60px !important; }
}


@media (max-width: 767px) {
    body.kz-theme-modern.bodyVerticalNavigation #kzThemeToggle { width: 34px; height: 34px; }
}

/* Brief colour cross-fade while switching */
@media (prefers-reduced-motion: no-preference) {
    html.kz-theme-switching body.kz-theme-modern,
    html.kz-theme-switching body.kz-theme-modern * {
        transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease !important;
    }
}

/* ---------- Dark tokens ---------- */
html.kz-dark { color-scheme: dark; }

html.kz-dark body.kz-theme-modern {
    --kz-primary: var(--a1d);
    --kz-primary-hover: var(--a2d);
    --kz-primary-soft: rgba(var(--a1d-rgb), .14);
    --kz-primary-ring: rgba(var(--a1d-rgb), .28);
    --kz-indigo: var(--a2d);
    --kz-bg: #0a0f1e;
    --kz-surface: #111827;
    --kz-surface-2: #172036;
    --kz-border: #243049;
    --kz-border-strong: #33415f;
    --kz-text: #e7eaf3;
    --kz-text-2: #a6b0c6;
    --kz-muted: #76829f;
    --kz-success: #4ade80;
    --kz-danger: #f87171;
    --kz-grad-soft: linear-gradient(135deg, rgba(var(--a1d-rgb), .20) 0%, rgba(var(--a2d-rgb), .18) 100%);
    --kz-ring: 0 0 0 4px rgba(var(--a2d-rgb), .20);
    --kz-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --kz-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30);
    --kz-shadow: 0 6px 18px -6px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .35);
    --kz-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .65), 0 8px 18px -8px rgba(0, 0, 0, .45);
    --kz-shadow-primary: 0 1px 2px rgba(var(--a1-rgb), .45), 0 8px 20px -6px rgba(var(--a2-rgb), .55);

    background:
        radial-gradient(1100px 420px at 0% -8%, rgba(var(--a1-rgb), .12), transparent 62%),
        radial-gradient(900px 380px at 100% -6%, rgba(var(--a2-rgb), .10), transparent 60%),
        var(--kz-bg) !important;
    color: var(--kz-text);
}

/* ---------- Surfaces with fixed colours ---------- */
html.kz-dark body.kz-theme-modern #pageHeaderNav,
html.kz-dark body.kz-theme-modern #cssmenuDiv {
    background: rgba(13, 19, 34, .78) !important;
    border-bottom-color: var(--kz-border) !important;
}

html.kz-dark body.kz-theme-modern #pageContentDivColumn > .nav-tabs { background: #172036; }
html.kz-dark body.kz-theme-modern #pageContentDivColumn > .nav-tabs .nav-link.active { background: #243049 !important; }

html.kz-dark body.kz-theme-modern .bg-white,
html.kz-dark body.kz-theme-modern .bg-light,
html.kz-dark body.kz-theme-modern .card,
html.kz-dark body.kz-theme-modern .card-header,
html.kz-dark body.kz-theme-modern .list-group-item,
html.kz-dark body.kz-theme-modern .modal-content,
html.kz-dark body.kz-theme-modern .dropdown-menu,
html.kz-dark body.kz-theme-modern .popover,
html.kz-dark body.kz-theme-modern .ui-widget-content,
html.kz-dark body.kz-theme-modern .ui-dialog,
html.kz-dark body.kz-theme-modern .ui-dialog .ui-dialog-titlebar,
html.kz-dark body.kz-theme-modern .myModalLookUpTop,
html.kz-dark body.kz-theme-modern #kz_notification {
    background-color: var(--kz-surface) !important;
    border-color: var(--kz-border) !important;
    color: var(--kz-text) !important;
}

html.kz-dark body.kz-theme-modern.pageIsModal { background: var(--kz-surface) !important; }

html.kz-dark body.kz-theme-modern .ui-widget,
html.kz-dark body.kz-theme-modern .ui-widget input,
html.kz-dark body.kz-theme-modern .ui-widget select { color: var(--kz-text); }

html.kz-dark body.kz-theme-modern .text-dark { color: var(--kz-text) !important; }
html.kz-dark body.kz-theme-modern .text-muted { color: var(--kz-muted) !important; }
html.kz-dark body.kz-theme-modern hr { border-color: var(--kz-border); }

/* Text the old theme hard-codes as black or grey */
html.kz-dark body.kz-theme-modern .sectionFieldset,
html.kz-dark body.kz-theme-modern #kz_view .kz_fieldDiv,
html.kz-dark body.kz-theme-modern #kz_view table td,
html.kz-dark body.kz-theme-modern .table,
html.kz-dark body.kz-theme-modern table,
html.kz-dark body.kz-theme-modern td,
html.kz-dark body.kz-theme-modern th,
html.kz-dark body.kz-theme-modern label { color: var(--kz-text); }

html.kz-dark body.kz-theme-modern td,
html.kz-dark body.kz-theme-modern th,
html.kz-dark body.kz-theme-modern table { border-color: var(--kz-border) !important; }

/* ---------- Inputs ---------- */
html.kz-dark body.kz-theme-modern .form-control,
html.kz-dark body.kz-theme-modern input[type="text"],
html.kz-dark body.kz-theme-modern input[type="password"],
html.kz-dark body.kz-theme-modern input[type="number"],
html.kz-dark body.kz-theme-modern input[type="email"],
html.kz-dark body.kz-theme-modern input[type="search"],
html.kz-dark body.kz-theme-modern textarea,
html.kz-dark body.kz-theme-modern select {
    background-color: #0e1526;
    border-color: var(--kz-border-strong);
    color: var(--kz-text);
}

html.kz-dark body.kz-theme-modern .form-control::placeholder { color: #5e6a88; }

html.kz-dark body.kz-theme-modern .form-control[readonly]:not(.UploadSingleFile),
html.kz-dark body.kz-theme-modern .form-control:disabled { background-color: var(--kz-surface-2) !important; }

html.kz-dark body.kz-theme-modern #kz_addnew select.form-control,
html.kz-dark body.kz-theme-modern .pageIsModal select.form-control,
html.kz-dark body.kz-theme-modern #pageHeaderNav .form-inline select.form-control,
html.kz-dark body.kz-theme-modern #tablelist_Search select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a6b0c6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

html.kz-dark body.kz-theme-modern #pageHeaderNav .form-inline select.form-control { background-color: var(--kz-surface-2); }

html.kz-dark body.kz-theme-modern #searchMenu,
html.kz-dark body.kz-theme-modern #searchMenuDivVerHead #searchMenu { background-color: var(--kz-surface-2) !important; color: var(--kz-text); }

html.kz-dark body.kz-theme-modern #kz_addnew input.UploadSingleFile[readonly] { background-color: var(--kz-surface-2) !important; }

/* Browser autofill keeps its yellow/white unless painted over */
html.kz-dark body.kz-theme-modern input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px #0e1526 inset !important;
    -webkit-text-fill-color: var(--kz-text) !important;
}

/* ---------- Lists, child grids and filters ---------- */
html.kz-dark body.kz-theme-modern #kz_ListTable.getHtmlTable thead tr:first-child td,
html.kz-dark body.kz-theme-modern .PageChild thead,
html.kz-dark body.kz-theme-modern .PageChild thead th,
html.kz-dark body.kz-theme-modern .PageChild thead tr { background: var(--kz-surface-2) !important; }

html.kz-dark body.kz-theme-modern .table-striped tbody tr:nth-of-type(odd),
html.kz-dark body.kz-theme-modern .table-hover tbody tr:hover { color: var(--kz-text); }

/* The old theme stripes even rows near-white and hovers in light grey */
html.kz-dark body.kz-theme-modern #kz_ListTable tbody tr,
html.kz-dark body.kz-theme-modern .kaizen_tablelist tbody tr,
html.kz-dark body.kz-theme-modern .PageChild tbody tr { background-color: transparent !important; }

html.kz-dark body.kz-theme-modern #kz_ListTable tbody tr:hover,
html.kz-dark body.kz-theme-modern .kaizen_tablelist tbody tr:hover,
html.kz-dark body.kz-theme-modern .PageChild tbody tr:hover { background-color: var(--kz-surface-2) !important; }

html.kz-dark body.kz-theme-modern #kz_ListTable tbody tr.PageListSelectedRow { background-color: var(--kz-primary-soft) !important; }

html.kz-dark body.kz-theme-modern .PageChild tfoot tr { background: var(--kz-primary-soft) !important; }

/* DataTables (lookups and some lists) paint their own white rows */
html.kz-dark body.kz-theme-modern table.dataTable,
html.kz-dark body.kz-theme-modern table.dataTable tbody tr,
html.kz-dark body.kz-theme-modern table.dataTable tbody tr.odd,
html.kz-dark body.kz-theme-modern table.dataTable tbody tr.even,
html.kz-dark body.kz-theme-modern table.dataTable tbody td,
html.kz-dark body.kz-theme-modern table.dataTable tbody tr > .sorting_1 {
    background-color: transparent !important;
    color: var(--kz-text) !important;
}

/* ...and the scroll boxes around them (scrollX / scrollY reports such as "Datatables" report type 1) and the
   FixedColumns clones from the CDN add-ons are white too, under the light dark-mode text. */
html.kz-dark body.kz-theme-modern .dataTables_wrapper .dataTables_scroll,
html.kz-dark body.kz-theme-modern .dataTables_wrapper .dataTables_scrollHead,
html.kz-dark body.kz-theme-modern .dataTables_wrapper .dataTables_scrollBody,
html.kz-dark body.kz-theme-modern .dataTables_wrapper .dataTables_scrollFoot,
html.kz-dark body.kz-theme-modern .dataTables_wrapper .DTFC_LeftWrapper,
html.kz-dark body.kz-theme-modern .dataTables_wrapper .DTFC_RightWrapper,
html.kz-dark body.kz-theme-modern .dataTables_wrapper .DTFC_LeftBodyWrapper,
html.kz-dark body.kz-theme-modern .dataTables_wrapper .DTFC_RightBodyWrapper,
html.kz-dark body.kz-theme-modern .dataTables_wrapper .DTFC_Blocker,
html.kz-dark body.kz-theme-modern table.DTFC_Cloned,
html.kz-dark body.kz-theme-modern table.DTFC_Cloned tbody tr {
    background-color: var(--kz-surface) !important;
    color: var(--kz-text) !important;
}

html.kz-dark body.kz-theme-modern table.dataTable thead th,
html.kz-dark body.kz-theme-modern table.dataTable thead td,
html.kz-dark body.kz-theme-modern table.dataTable tfoot th {
    background-color: var(--kz-surface-2) !important;
    color: var(--kz-text-2) !important;
    border-color: var(--kz-border) !important;
}

html.kz-dark body.kz-theme-modern table.dataTable tbody tr:hover,
html.kz-dark body.kz-theme-modern table.dataTable tbody tr:hover > td { background-color: var(--kz-surface-2) !important; cursor: pointer; }

html.kz-dark body.kz-theme-modern table.dataTable tbody tr.selected,
html.kz-dark body.kz-theme-modern table.dataTable tbody tr.selected > td { background-color: var(--kz-primary-soft) !important; }

html.kz-dark body.kz-theme-modern .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--kz-text-2) !important; }
html.kz-dark body.kz-theme-modern .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--kz-surface-2) !important; border-color: var(--kz-border) !important; color: var(--kz-text) !important; }
html.kz-dark body.kz-theme-modern .dataTables_wrapper .dataTables_info,
html.kz-dark body.kz-theme-modern .dataTables_wrapper .dataTables_length,
html.kz-dark body.kz-theme-modern .dataTables_wrapper .dataTables_filter { color: var(--kz-text-2) !important; }

html.kz-dark body.kz-theme-modern .table-info,
html.kz-dark body.kz-theme-modern .table-info > td,
html.kz-dark body.kz-theme-modern .table-info > th { background-color: var(--kz-surface-2) !important; }

/* Row actions and danger hovers: dark tints instead of pale ones */
html.kz-dark body.kz-theme-modern .list-record-edit:hover { background: rgba(245, 158, 11, .14) !important; }
html.kz-dark body.kz-theme-modern .list-record-delete:hover,
html.kz-dark body.kz-theme-modern .kz-form-group .FieldDeleteIcon:hover,
html.kz-dark body.kz-theme-modern #kz_delete:hover { background: rgba(248, 113, 113, .14) !important; }
html.kz-dark body.kz-theme-modern .list-record-saveAs:hover,
html.kz-dark body.kz-theme-modern .list-record-plus:hover { background: rgba(74, 222, 128, .14) !important; }
html.kz-dark body.kz-theme-modern .list-record-edit { color: #fbbf24 !important; }
html.kz-dark body.kz-theme-modern #kz_delete { border-color: rgba(248, 113, 113, .35) !important; }

/* ---------- Messages ---------- */
html.kz-dark body.kz-theme-modern #divSubmitMessages,
html.kz-dark body.kz-theme-modern .alert-danger,
html.kz-dark body.kz-theme-modern #loginPanelBody .text-danger { background: rgba(248, 113, 113, .10) !important; border-color: rgba(248, 113, 113, .30) !important; color: #fca5a5 !important; }
html.kz-dark body.kz-theme-modern #divSubmitMessages.alert-success,
html.kz-dark body.kz-theme-modern .alert-success { background: rgba(74, 222, 128, .10) !important; border-color: rgba(74, 222, 128, .30) !important; color: #86efac !important; }
html.kz-dark body.kz-theme-modern .alert-warning { background: rgba(251, 191, 36, .10); border-color: rgba(251, 191, 36, .30); color: #fcd34d; }
html.kz-dark body.kz-theme-modern .alert-info { background: var(--kz-primary-soft); border-color: rgba(var(--a1d-rgb), .30); color: var(--a2d); }
html.kz-dark body.kz-theme-modern .tooltip-inner { background: #e7eaf3; color: #0a0f1e; }

/* ---------- Google Charts and Google tables ---------- */
html.kz-dark body.kz-theme-modern .DashboardDetailPanel svg > rect:first-of-type,
html.kz-dark body.kz-theme-modern .DashboardDetailPanel svg > g > rect[fill="#ffffff"] { fill: transparent !important; }
/* Only Google's dark default text (legends, axes, titles); labels drawn in white on slices and bars stay white */
html.kz-dark body.kz-theme-modern .DashboardDetailPanel svg text[fill="#222222"],
html.kz-dark body.kz-theme-modern .DashboardDetailPanel svg text[fill="#444444"],
html.kz-dark body.kz-theme-modern .DashboardDetailPanel svg text[fill="#000000"],
html.kz-dark body.kz-theme-modern .DashboardDetailPanel svg text[fill="#404040"],
html.kz-dark body.kz-theme-modern .DashboardDetailPanel svg text[fill="#757575"] { fill: var(--kz-text-2) !important; }
html.kz-dark body.kz-theme-modern .DashboardDetailPanel svg rect[fill="#cccccc"],
html.kz-dark body.kz-theme-modern .DashboardDetailPanel svg rect[fill="#ebebeb"] { fill: var(--kz-border) !important; }
html.kz-dark body.kz-theme-modern .DashboardDetailPanel svg path[fill="#ffffff"] { fill: var(--kz-surface) !important; }
html.kz-dark body.kz-theme-modern .google-visualization-table-table td { color: var(--kz-text); }

/* ---------- Login and account pages ---------- */
html.kz-dark body.kz-theme-modern #loginSection { background: var(--kz-surface); }

/* Logos are drawn for light backgrounds; lift dark artwork slightly */
html.kz-dark body.kz-theme-modern #topCompanyLogo img,
html.kz-dark body.kz-theme-modern #loginCompanyLogoDiv img,
html.kz-dark body.kz-theme-modern section.login img { filter: brightness(1.25) saturate(1.05); }

/* ---------- Loading veil ---------- */
html.kz-dark body.kz-theme-modern #loading { background: rgba(10, 15, 30, .45) !important; }

/* Site.css paints the box around any read-only field grey (div:has(> input[readonly])). Its square corners showed
   behind the field's rounded ones, white in dark mode; the field itself already carries the read-only look. */
body.kz-theme-modern div:has(> input[readonly]),
body.kz-theme-modern div:has(> textarea[readonly]) { background-color: transparent; }

/* =========================================================
   Field states: read-only fields must not look like upload fields.
   Upload = white, dashed accent border, upload icon, reacts on hover.
   Read-only = flat grey, plain border, muted text, lock icon, no hover.
   ========================================================= */
body.kz-theme-modern #kz_addnew input.UploadSingleFile[readonly],
body.kz-theme-modern .pageIsModal input.UploadSingleFile[readonly],
body.kz-theme-modern #kz_addnew textarea.UploadMultipleFiles,
body.kz-theme-modern .pageIsModal textarea.UploadMultipleFiles {
    background-color: var(--kz-surface) !important;
    border: 1px dashed rgba(var(--a1-rgb), .50) !important;
    cursor: pointer;
}

body.kz-theme-modern #kz_addnew input.UploadSingleFile[readonly]::placeholder { color: var(--kz-primary); font-weight: 500; opacity: 1; }

body.kz-theme-modern #kz_addnew input.UploadSingleFile[readonly]:hover,
body.kz-theme-modern #kz_addnew textarea.UploadMultipleFiles:hover,
body.kz-theme-modern .pageIsModal textarea.UploadMultipleFiles:hover {
    border-style: solid !important;
    border-color: var(--kz-primary) !important;
    background-color: var(--kz-primary-soft) !important;
}

html.kz-dark body.kz-theme-modern #kz_addnew input.UploadSingleFile[readonly],
html.kz-dark body.kz-theme-modern #kz_addnew textarea.UploadMultipleFiles { border-color: rgba(var(--a1d-rgb), .45) !important; }

/* Read-only and disabled fields (pickers that are read-only only to force the picker are excluded) */
body.kz-theme-modern .form-control[readonly]:not(.UploadSingleFile):not(.UploadMultipleFiles):not([type="file"]):not(.hasDatepicker):not(.minicolors-input),
body.kz-theme-modern .form-control:disabled {
    padding-right: 32px !important;
    border-style: solid !important;
    border-color: var(--kz-border) !important;
    background: var(--kz-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat right 11px center !important;
    box-shadow: none !important;
    color: var(--kz-text-2) !important;
    cursor: not-allowed;
}

body.kz-theme-modern .form-control[readonly]:not(.UploadSingleFile):not(.UploadMultipleFiles):not([type="file"]):not(.hasDatepicker):not(.minicolors-input):hover { border-color: var(--kz-border) !important; }

/* Keep the lock's space when the form's own padding rule (#kz_addnew / .pageIsModal) would win, so long text stops short of it */
body.kz-theme-modern #kz_addnew .form-control:not(.numeric):not(.form-control-right)[readonly]:not(.UploadSingleFile):not(.UploadMultipleFiles):not([type="file"]):not(.hasDatepicker):not(.minicolors-input),
body.kz-theme-modern #kz_addnew .form-control:not(.numeric):not(.form-control-right):disabled,
body.kz-theme-modern .pageIsModal .form-control:not(.numeric):not(.form-control-right)[readonly]:not(.UploadSingleFile):not(.UploadMultipleFiles):not([type="file"]):not(.hasDatepicker):not(.minicolors-input),
body.kz-theme-modern .pageIsModal .form-control:not(.numeric):not(.form-control-right):disabled { padding-right: 32px !important; text-overflow: ellipsis; }

/* Numbers are right-aligned, so their lock sits on the left where it can't cover the value */
body.kz-theme-modern .form-control:is(.numeric, .form-control-right):is([readonly]:not(.hasDatepicker), :disabled),
body.kz-theme-modern #kz_addnew .form-control:is(.numeric, .form-control-right):is([readonly]:not(.hasDatepicker), :disabled),
body.kz-theme-modern .pageIsModal .form-control:is(.numeric, .form-control-right):is([readonly]:not(.hasDatepicker), :disabled) {
    padding-left: 30px !important;
    padding-right: 10px !important;
    background-position: left 10px center !important;
}

html.kz-dark body.kz-theme-modern .form-control[readonly]:not(.UploadSingleFile):not(.UploadMultipleFiles):not([type="file"]):not(.hasDatepicker):not(.minicolors-input),
html.kz-dark body.kz-theme-modern .form-control:disabled { background-color: var(--kz-surface-2) !important; }

/* In child grid cells the grey already says read-only: no lock icon, so a narrow column (Rate, Amount, GST) shows
   its whole value instead of losing it under the icon's padding. */
body.kz-theme-modern .kz_Child .form-control:is([readonly]:not(.hasDatepicker), :disabled),
body.kz-theme-modern #kz_addnew .kz_Child .form-control:is([readonly]:not(.hasDatepicker), :disabled),
body.kz-theme-modern .pageIsModal .kz_Child .form-control:is([readonly]:not(.hasDatepicker), :disabled) {
    padding-left: 6px !important;
    padding-right: 6px !important;
    background-image: none !important;
}
body.kz-theme-modern #kz_addnew .kz_Child .form-control:not(.numeric):not(.form-control-right)[readonly]:not(.UploadSingleFile):not(.UploadMultipleFiles):not([type="file"]):not(.hasDatepicker):not(.minicolors-input),
body.kz-theme-modern .pageIsModal .kz_Child .form-control:not(.numeric):not(.form-control-right)[readonly]:not(.UploadSingleFile):not(.UploadMultipleFiles):not([type="file"]):not(.hasDatepicker):not(.minicolors-input) { padding-right: 6px !important; }
@media (min-width: 801px) {
    body.kz-theme-modern .kz_Child > .PageChild > tbody > tr > td,
    body.kz-theme-modern .kz_Child > .PageChild > tfoot > tr > td,
    body.kz-theme-modern .kz_Child > .PageChild > thead > tr > th { padding-left: 6px !important; padding-right: 6px !important; }
    /* A lookup column (name box + search button, e.g. Product Name) stays readable even with no width set. */
    body.kz-theme-modern .kz_Child > .PageChild > tbody > tr > td:not(:first-child):not(:last-child):has(.autocomplete),
    body.kz-theme-modern .kz_Child > .PageChild > tfoot > tr > td:not(:first-child):not(:last-child):has(.autocomplete) { min-width: 220px; }
}

/* =========================================================
   Date and time picker (jQuery UI datepicker + timepicker add-on, one shared #ui-datepicker-div).
   kaizen-modern.js adds the month/year grids (.kz-dp-panel), "Today" and "Clear".
   ========================================================= */

/* Field cues: calendar icon on date fields, clock on time fields (not on locked read-only ones) */
body.kz-theme-modern input.datepicker:not([readonly]),
body.kz-theme-modern input.datetimepicker:not([readonly]) {
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}
/* Site.css moves the background of validated fields (input.valid / .error) to the top-left with !important,
   which put the calendar icon over the date once it passed validation. */
body.kz-theme-modern input.timepicker:not([readonly]) {
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}
/* Site.css moves the background of validated fields (input.valid / .error) to the top-left with !important,
   which put the calendar or clock icon over the value once the field passed validation. */
body.kz-theme-modern input.datepicker:not([readonly]).valid, body.kz-theme-modern input.datepicker:not([readonly]).error,
body.kz-theme-modern input.datetimepicker:not([readonly]).valid, body.kz-theme-modern input.datetimepicker:not([readonly]).error,
body.kz-theme-modern input.timepicker:not([readonly]).valid, body.kz-theme-modern input.timepicker:not([readonly]).error {
    background-position: right 11px center !important;
}

/* Popover */
body.kz-theme-modern #ui-datepicker-div {
    z-index: 1060 !important; /* the plugin sets 1, which falls under the sticky bars */
    width: 296px;
    margin-top: 6px;
    padding: 12px !important;
    border: 1px solid var(--kz-border) !important;
    border-radius: 14px !important;
    background: var(--kz-surface) !important;
    box-shadow: var(--kz-shadow-lg) !important;
    color: var(--kz-text);
    font-family: var(--kz-font) !important;
    font-size: 13px;
    animation: kzPopIn var(--kz-dur) var(--kz-ease);
    transform-origin: top left;
}

/* Header: clickable month / year title and round chevron buttons */
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0 0 8px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--kz-text) !important;
}

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-title {
    margin: 0 40px !important;
    padding: 0 10px;
    border-radius: var(--kz-radius);
    line-height: 34px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--kz-text);
}

body.kz-theme-modern #ui-datepicker-div .kz-dp-title { cursor: pointer; transition: background-color var(--kz-dur-fast) var(--kz-ease), color var(--kz-dur-fast) var(--kz-ease); }
body.kz-theme-modern #ui-datepicker-div .kz-dp-title::after,
body.kz-theme-modern .kz-dp-panel-title:not(.is-static)::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 0 3px 7px;
    border: solid currentColor;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
    opacity: .55;
}

body.kz-theme-modern #ui-datepicker-div .kz-dp-title:hover { background: var(--kz-primary-soft); color: var(--kz-primary); }

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-prev,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-next,
body.kz-theme-modern .kz-dp-nav {
    position: absolute !important;
    top: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    padding: 0;
    border: 1px solid var(--kz-border) !important;
    border-radius: 50% !important;
    background: var(--kz-surface) !important;
    color: var(--kz-text-2);
    cursor: pointer;
    transition: background-color var(--kz-dur-fast) var(--kz-ease), color var(--kz-dur-fast) var(--kz-ease), border-color var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-prev,
body.kz-theme-modern .kz-dp-prev { left: 0 !important; }
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-next,
body.kz-theme-modern .kz-dp-next { right: 0 !important; }

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-prev:hover,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-next:hover,
body.kz-theme-modern .kz-dp-nav:not(:disabled):hover {
    background: var(--kz-primary-soft) !important;
    border-color: transparent !important;
    color: var(--kz-primary);
}

/* Chevrons instead of the sprite icons */
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-prev .ui-icon,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-next .ui-icon { display: none !important; }

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-prev::before,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-next::before,
body.kz-theme-modern .kz-dp-nav::before {
    content: "";
    width: 7px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 0 1.8px 1.8px;
    transform: translateX(1px) rotate(45deg);
}

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-next::before,
body.kz-theme-modern .kz-dp-next::before { border-width: 1.8px 1.8px 0 0; transform: translateX(-1px) rotate(45deg); }

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-prev.ui-state-disabled,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-next.ui-state-disabled,
body.kz-theme-modern .kz-dp-nav:disabled { opacity: .35; cursor: default; }

/* Day grid */
body.kz-theme-modern #ui-datepicker-div table.ui-datepicker-calendar {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 13px;
}

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar th,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar th {
    height: 28px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kz-muted) !important;
}

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td a,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--kz-text) !important;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-decoration: none !important;
    transition: background-color var(--kz-dur-fast) var(--kz-ease), color var(--kz-dur-fast) var(--kz-ease), transform var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td a:hover { background: var(--kz-surface-2) !important; }
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td a:active { transform: scale(.94); }
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end a { color: var(--kz-text-2) !important; }

/* Today: accent ring */
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight {
    box-shadow: inset 0 0 0 1.5px rgba(var(--a1-rgb), .55);
    color: var(--kz-primary) !important;
    font-weight: 700;
}

/* Selected day: the accent gradient */
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day a {
    background: var(--kz-grad) !important;
    box-shadow: var(--kz-shadow-primary) !important;
    color: #fff !important;
    font-weight: 600;
}

/* Other months' days, and unavailable days */
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month a,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month span { color: var(--kz-muted) !important; font-weight: 400; }
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled { opacity: 1 !important; }
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span,
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled a { color: var(--kz-muted) !important; opacity: .4; text-decoration: line-through !important; cursor: not-allowed; }

/* Footer: Today / Now and Clear as text buttons, Done as a small gradient button */
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-buttonpane {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 10px 0 0 !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--kz-border) !important;
    background: transparent !important;
}

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-buttonpane button {
    float: none !important;
    height: 32px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: var(--kz-radius) !important;
    background: transparent !important;
    color: var(--kz-primary) !important;
    font-family: var(--kz-font);
    font-size: 13px;
    font-weight: 600;
    opacity: 1 !important;
    cursor: pointer;
    transition: background var(--kz-dur-fast) var(--kz-ease), box-shadow var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-buttonpane button:hover { background: var(--kz-primary-soft) !important; }
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-buttonpane .kz-dp-clear { color: var(--kz-text-2) !important; }
body.kz-theme-modern #ui-datepicker-div .ui-datepicker-buttonpane .kz-dp-clear:hover { background: var(--kz-surface-2) !important; color: var(--kz-danger) !important; }

body.kz-theme-modern #ui-datepicker-div .ui-datepicker-buttonpane .ui-datepicker-close {
    margin-left: auto !important;
    padding: 0 16px !important;
    background: var(--kz-grad) !important;
    box-shadow: var(--kz-shadow-primary) !important;
    color: #fff !important;
}

/* Month and year grids (overlay the calendar inside the same card) */
body.kz-theme-modern .kz-dp-panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 12px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    background: var(--kz-surface);
    animation: kzFadeIn var(--kz-dur) var(--kz-ease);
}

body.kz-theme-modern .kz-dp-panel-head {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 34px;
    margin-bottom: 10px;
}

body.kz-theme-modern .kz-dp-panel-title {
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--kz-radius);
    background: transparent;
    color: var(--kz-text);
    font-family: var(--kz-font);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

body.kz-theme-modern .kz-dp-panel-title:not(.is-static):hover { background: var(--kz-primary-soft); color: var(--kz-primary); }
body.kz-theme-modern .kz-dp-panel-title.is-static { cursor: default; }

body.kz-theme-modern .kz-dp-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-content: center;
}

body.kz-theme-modern .kz-dp-grid button {
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--kz-text);
    font-family: var(--kz-font);
    font-size: 13.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color var(--kz-dur-fast) var(--kz-ease), color var(--kz-dur-fast) var(--kz-ease), transform var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern .kz-dp-grid button:hover:not(:disabled) { background: var(--kz-surface-2); }
body.kz-theme-modern .kz-dp-grid button:active:not(:disabled) { transform: scale(.95); }
body.kz-theme-modern .kz-dp-grid button.is-today { box-shadow: inset 0 0 0 1.5px rgba(var(--a1-rgb), .55); color: var(--kz-primary); font-weight: 700; }
body.kz-theme-modern .kz-dp-grid button.is-current { background: var(--kz-grad); box-shadow: var(--kz-shadow-primary); color: #fff; font-weight: 600; }
body.kz-theme-modern .kz-dp-grid button:disabled { color: var(--kz-muted); opacity: .4; cursor: not-allowed; }

/* Time controls (date-time and time-only fields) */
body.kz-theme-modern #ui-datepicker-div .ui-timepicker-div {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--kz-border);
}

body.kz-theme-modern #ui-datepicker-div .ui-timepicker-div .ui-widget-header {
    margin-bottom: 6px;
    border: 0 !important;
    background: transparent !important;
    color: var(--kz-text-2) !important;
    font-size: 12px;
    font-weight: 600;
}

body.kz-theme-modern #ui-datepicker-div .ui-timepicker-div dl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
body.kz-theme-modern #ui-datepicker-div .ui-timepicker-div dt { margin: 0; font-size: 12px; font-weight: 500; color: var(--kz-text-2); }
body.kz-theme-modern #ui-datepicker-div .ui-timepicker-div dd { margin: 0 !important; }

body.kz-theme-modern #ui-datepicker-div .ui-timepicker-div select,
body.kz-theme-modern #ui-datepicker-div .ui-timepicker-select {
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--kz-border-strong);
    border-radius: 6px;
    background: var(--kz-surface);
    color: var(--kz-text);
    font-family: var(--kz-font);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

body.kz-theme-modern #ui-datepicker-div .ui-timepicker-div select:focus { border-color: var(--kz-indigo); box-shadow: var(--kz-ring); outline: none; }

/* Time-only: no calendar, so a narrower card */
body.kz-theme-modern #ui-datepicker-div:not(:has(.ui-datepicker-calendar)) { width: auto; min-width: 220px; }

@media (max-width: 480px) {
    body.kz-theme-modern #ui-datepicker-div { width: calc(100vw - 24px); max-width: 320px; }
    body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td a,
    body.kz-theme-modern #ui-datepicker-div .ui-datepicker-calendar td span { width: 38px; height: 38px; }
}

/* =========================================================
   Developer tools: page/field/section/child editors (Views/Editor),
   the SQL tool, and the developer controls shown on data pages.
   The editors share .page-wrapper > .page-body > .card > .card-block.
   ========================================================= */

/* ---------- Editor screens ---------- */
body.kz-theme-modern .page-wrapper { padding: 16px !important; background: transparent; }

body.kz-theme-modern .page-wrapper .page-body > .card {
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-lg) !important;
    background: var(--kz-surface) !important;
    box-shadow: var(--kz-shadow-sm) !important;
    animation: kzFadeUp var(--kz-dur-slow) var(--kz-ease) backwards;
}

body.kz-theme-modern .page-wrapper .card-block { padding: 18px 20px 0 !important; }

body.kz-theme-modern .page-wrapper .card-block > h5:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px !important;
    padding: 0 0 12px 12px;
    position: relative;
    border-bottom: 1px solid var(--kz-border);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--kz-text);
}

body.kz-theme-modern .page-wrapper .card-block > h5:first-child::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 15px;
    left: 0;
    width: 4px;
    border-radius: 4px;
    background: var(--kz-grad);
}

/* Inside a popup frame the dialog is already the card: render the editor flat */
html.kz-in-frame body.kz-theme-modern { background: var(--kz-surface) !important; }
html.kz-in-frame body.kz-theme-modern .page-wrapper { padding: 0 !important; }

html.kz-in-frame body.kz-theme-modern .page-wrapper .page-body > .card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none;
}

html.kz-in-frame body.kz-theme-modern .page-wrapper .card-block { padding: 14px 18px 0 !important; }
html.kz-in-frame body.kz-theme-modern .page-wrapper .footer { margin: 16px -18px 0; padding: 12px 18px !important; border-radius: 0; }

/* Labels, help icons and fields */
body.kz-theme-modern .page-wrapper .form-group { margin-bottom: 12px; }

body.kz-theme-modern .page-wrapper .form-group > label,
body.kz-theme-modern .page-wrapper .form-group label.control-label {
    margin: 0 0 4px !important;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--kz-text);
}

body.kz-theme-modern .page-wrapper .fa-question-circle {
    margin-left: 2px;
    font-size: 12px;
    color: var(--kz-muted);
    cursor: help;
}

body.kz-theme-modern .page-wrapper .form-control {
    height: 34px;
    padding: 0 10px;
    font-size: 13.5px;
    border-radius: var(--kz-radius);
}

body.kz-theme-modern .page-wrapper textarea.form-control { height: auto; min-height: 68px; padding: 8px 10px; }

body.kz-theme-modern .page-wrapper input[type="file"].form-control { padding: 5px 8px; height: 34px; }

body.kz-theme-modern .page-wrapper select.form-control {
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

body.kz-theme-modern .page-wrapper select[multiple].form-control { height: auto; background-image: none; padding: 6px 8px; }

body.kz-theme-modern .page-wrapper .checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}

body.kz-theme-modern .page-wrapper .checkbox input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--kz-primary); cursor: pointer; }
body.kz-theme-modern .page-wrapper .checkbox label { margin: 0 !important; font-size: 13px; font-weight: 500; cursor: pointer; }

/* Tutorial video links (the framework's own, marked by the play icon) */
body.kz-theme-modern a[href*="youtube.com"]:has(> .fa-youtube-play) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 2px;
    border-radius: 6px;
    background: rgba(239, 68, 68, .10);
    color: #ef4444 !important;
    font-size: 11px;
    text-decoration: none !important;
    vertical-align: middle;
    transition: background-color var(--kz-dur-fast) var(--kz-ease), transform var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern a[href*="youtube.com"]:has(> .fa-youtube-play) .fa { font-size: 11px !important; }
body.kz-theme-modern a[href*="youtube.com"]:has(> .fa-youtube-play):hover { background: rgba(239, 68, 68, .18); transform: scale(1.06); }

/* Script helper links (getText, getList, ModalPagePopup ...) as a row of pills */
body.kz-theme-modern .page-wrapper .FieldHtml,
body.kz-theme-modern .page-wrapper #CommonFunctionLink {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 2px;
    margin: 6px 0 2px;
}

body.kz-theme-modern .page-wrapper a[wizardname] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--kz-border);
    border-radius: 999px;
    background: var(--kz-surface-2);
    color: var(--kz-text-2) !important;
    font-size: 11.5px;
    font-weight: 500;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    text-decoration: none !important;
    transition: background-color var(--kz-dur-fast) var(--kz-ease), color var(--kz-dur-fast) var(--kz-ease), border-color var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern .page-wrapper a[wizardname]:hover {
    border-color: rgba(var(--a1-rgb), .35);
    background: var(--kz-primary-soft);
    color: var(--kz-primary) !important;
}

/* Linked SQL objects (stored procedures, views) shown under a field */
body.kz-theme-modern .SqlQueryEditorLink { margin: 6px 0 2px; }

body.kz-theme-modern .SqlQueryEditorLink .badge,
body.kz-theme-modern #BtnSplitViewScript {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(var(--a1-rgb), .30);
    border-radius: 6px;
    background: var(--kz-primary-soft) !important;
    color: var(--kz-primary) !important;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12px !important;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

body.kz-theme-modern .SqlQueryEditorLink .badge::before { content: "\f1c0"; font-family: FontAwesome; font-size: 11px; opacity: .8; }

/* No linked object yet: the badge is empty, so don't show an icon-only chip */
body.kz-theme-modern .SqlQueryEditorLink .badge:empty { display: none !important; }

body.kz-theme-modern #BtnSplitViewScript { margin-top: 4px; border-color: rgba(245, 158, 11, .40); background: rgba(245, 158, 11, .10) !important; color: #b45309 !important; }
html.kz-dark body.kz-theme-modern #BtnSplitViewScript { color: #fbbf24 !important; }

/* Save / Reset / Delete: the cyan footer becomes a sticky action bar */
body.kz-theme-modern .page-wrapper .footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin: 16px -20px 0;
    padding: 12px 20px !important;
    background: var(--kz-surface) !important;
    border-top: 1px solid var(--kz-border);
    border-radius: 0 0 var(--kz-radius-lg) var(--kz-radius-lg);
}

body.kz-theme-modern .page-wrapper .footer .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 104px;
    height: 38px;
    margin: 0 !important;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* Save first (markup order); Delete sits apart at the far right */
body.kz-theme-modern .page-wrapper .footer .btn-danger { margin-left: auto !important; }

body.kz-theme-modern .page-wrapper .footer .btn-secondary {
    background: var(--kz-surface) !important;
    border: 1px solid var(--kz-border-strong) !important;
    color: var(--kz-text) !important;
}

body.kz-theme-modern .page-wrapper .footer .btn-danger {
    background: var(--kz-surface) !important;
    border: 1px solid rgba(220, 38, 38, .35) !important;
    color: var(--kz-danger) !important;
}

body.kz-theme-modern .page-wrapper .footer .btn-danger:hover { background: rgba(220, 38, 38, .08) !important; }

body.kz-theme-modern .page-wrapper .alert { margin-bottom: 14px; }

@media (max-width: 767px) {
    body.kz-theme-modern .page-wrapper { padding: 10px !important; }
    body.kz-theme-modern .page-wrapper .card-block { padding: 14px 12px 0 !important; }
    body.kz-theme-modern .page-wrapper .footer { flex-wrap: nowrap; gap: 6px; margin: 14px -12px 0; padding: 10px 12px !important; }
    body.kz-theme-modern .page-wrapper .footer .btn { flex: 1 1 0 !important; min-width: 0; padding: 0 8px; font-size: 13px; }
    body.kz-theme-modern .page-wrapper .footer .btn[value="Save"] { flex-grow: 1.4 !important; }
}

/* Tabs inside editors (list editor) */
body.kz-theme-modern .page-wrapper .nav-tabs,
body.kz-theme-modern #SQlQuery > .nav-tabs {
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--kz-border);
}

body.kz-theme-modern .page-wrapper .nav-tabs .nav-link,
body.kz-theme-modern #SQlQuery > .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 8px 12px;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--kz-text-2) !important;
    font-size: 13px;
    font-weight: 500;
}

body.kz-theme-modern .page-wrapper .nav-tabs .nav-link.active,
body.kz-theme-modern #SQlQuery > .nav-tabs .nav-link.active {
    border-bottom-color: var(--kz-primary) !important;
    color: var(--kz-text) !important;
}

/* ---------- Code editors (CodeMirror) ---------- */
body.kz-theme-modern .CodeMirror {
    border: 1px solid var(--kz-border-strong);
    border-radius: var(--kz-radius);
    background: var(--kz-surface);
    color: var(--kz-text);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    transition: border-color var(--kz-dur) var(--kz-ease), box-shadow var(--kz-dur) var(--kz-ease);
}

body.kz-theme-modern .CodeMirror-focused { border-color: var(--kz-indigo); box-shadow: var(--kz-ring); }
body.kz-theme-modern .CodeMirror-gutters { border-right: 1px solid var(--kz-border); background: var(--kz-surface-2); border-radius: var(--kz-radius) 0 0 var(--kz-radius); }
body.kz-theme-modern .CodeMirror-linenumber { color: var(--kz-muted); }
body.kz-theme-modern .CodeMirror-hints { border: 1px solid var(--kz-border); border-radius: var(--kz-radius); box-shadow: var(--kz-shadow-lg); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; z-index: 1100; }
body.kz-theme-modern li.CodeMirror-hint-active { background: var(--kz-primary); }

html.kz-dark body.kz-theme-modern .CodeMirror { background: #0e1526; }
html.kz-dark body.kz-theme-modern .CodeMirror-cursor { border-left-color: var(--kz-text); }
html.kz-dark body.kz-theme-modern .CodeMirror-selected,
html.kz-dark body.kz-theme-modern .CodeMirror-focused .CodeMirror-selected { background: rgba(var(--a1d-rgb), .22); }
html.kz-dark body.kz-theme-modern .CodeMirror-activeline-background { background: rgba(255, 255, 255, .03); }
html.kz-dark body.kz-theme-modern .CodeMirror-hints { background: var(--kz-surface); }
html.kz-dark body.kz-theme-modern .CodeMirror-hint { color: var(--kz-text); }
html.kz-dark body.kz-theme-modern .cm-s-default .cm-keyword { color: #c792ea; }
html.kz-dark body.kz-theme-modern .cm-s-default .cm-string,
html.kz-dark body.kz-theme-modern .cm-s-default .cm-string-2 { color: #c3e88d; }
html.kz-dark body.kz-theme-modern .cm-s-default .cm-number,
html.kz-dark body.kz-theme-modern .cm-s-default .cm-atom { color: #f78c6c; }
html.kz-dark body.kz-theme-modern .cm-s-default .cm-comment { color: #7f8ca6; }
html.kz-dark body.kz-theme-modern .cm-s-default .cm-def,
html.kz-dark body.kz-theme-modern .cm-s-default .cm-variable-2 { color: #82aaff; }
html.kz-dark body.kz-theme-modern .cm-s-default .cm-variable { color: var(--kz-text); }
html.kz-dark body.kz-theme-modern .cm-s-default .cm-property,
html.kz-dark body.kz-theme-modern .cm-s-default .cm-operator { color: #89ddff; }
html.kz-dark body.kz-theme-modern .cm-s-default .cm-builtin,
html.kz-dark body.kz-theme-modern .cm-s-default .cm-variable-3,
html.kz-dark body.kz-theme-modern .cm-s-default .cm-type { color: #ffcb6b; }
html.kz-dark body.kz-theme-modern .cm-s-default .cm-bracket { color: var(--kz-text-2); }
html.kz-dark body.kz-theme-modern div.CodeMirror span.CodeMirror-matchingbracket { color: #a5f3a5; }

/* ---------- Developer controls on data pages ---------- */
/* "Add Field / Add Child / Add Sub Section / Add Filter ..." as dashed developer chips */
body.kz-theme-modern .kz_AddField,
body.kz-theme-modern .kz_AddChild,
body.kz-theme-modern .kz_AddSection,
body.kz-theme-modern .kz_AddPageListFilter,
body.kz-theme-modern .kz_EditPageListFilter,
body.kz-theme-modern .kz_Editprintlist,
body.kz-theme-modern .kz_AddDashboard {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px !important;
    border: 1px dashed rgba(var(--a1-rgb), .45) !important;
    border-radius: 999px !important;
    background: var(--kz-primary-soft) !important;
    color: var(--kz-primary) !important;
    font-size: 12px !important;
    font-weight: 600;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer;
    transition: border-color var(--kz-dur-fast) var(--kz-ease), background-color var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern .kz_AddField:hover,
body.kz-theme-modern .kz_AddChild:hover,
body.kz-theme-modern .kz_AddSection:hover,
body.kz-theme-modern .kz_AddPageListFilter:hover,
body.kz-theme-modern .kz_EditPageListFilter:hover,
body.kz-theme-modern .kz_Editprintlist:hover,
body.kz-theme-modern .kz_AddDashboard:hover {
    border-style: solid !important;
    background: rgba(var(--a1-rgb), .14) !important;
}

body.kz-theme-modern .kz_AddField .fa,
body.kz-theme-modern .kz_AddChild .fa,
body.kz-theme-modern .kz_AddSection .fa,
body.kz-theme-modern .kz_AddPageListFilter .fa { font-size: 10px; }

body.kz-theme-modern .section-editor-column {
    display: flex !important;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    margin: 4px 12px 8px 0;
    padding: 0 !important;
}

/* Editable names: field labels, section titles, child columns, the page title */
body.kz-theme-modern .kz_EditField,
body.kz-theme-modern .kz_EditSection,
body.kz-theme-modern .kz_EditChildField,
body.kz-theme-modern .kz_EditPage {
    cursor: pointer;
    border-radius: 4px;
    text-decoration: underline dotted transparent;
    text-underline-offset: 3px;
    transition: color var(--kz-dur-fast) var(--kz-ease), text-decoration-color var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern .kz_EditField:hover,
body.kz-theme-modern .kz_EditSection:hover,
body.kz-theme-modern .kz_EditChildField:hover,
body.kz-theme-modern .kz_EditPage:hover {
    color: var(--kz-primary) !important;
    text-decoration-color: var(--kz-primary);
}

/* Field / section ordering notes "(Order: 1 Group: 1)" */
body.kz-theme-modern .kz_fieldLabel > small,
body.kz-theme-modern .sectionLegend > small,
body.kz-theme-modern .PageChild th > small {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--kz-muted);
}

body.kz-theme-modern .kz_fieldLabel > small i,
body.kz-theme-modern .sectionLegend > small i,
body.kz-theme-modern .PageChild th > small i { font-style: normal; }

/* Hidden fields, shown to developers only: a dashed "developer" box instead of the grey block */
body.kz-theme-modern .kz_fieldLableDiv:has(> .kz_fieldLabel.Hidden),
body.kz-theme-modern [id^="kz_field_"]:has(> .kz_fieldLabel.Hidden) {
    margin: 0 0 8px;
    padding: 6px 8px 8px;
    border: 1px dashed rgba(var(--a1-rgb), .35);
    border-radius: var(--kz-radius);
    background: var(--kz-primary-soft) !important;
}

body.kz-theme-modern .kz_fieldLabel.Hidden::after {
    content: "hidden";
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--kz-surface);
    color: var(--kz-text-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Copy-script icons next to fields and sections */
body.kz-theme-modern .kz_PageFieldScript,
body.kz-theme-modern .kz_PageSectionScript,
body.kz-theme-modern .kz_ChildFieldScript {
    margin-left: 2px;
    padding: 2px;
    font-size: 11px !important;
    color: var(--kz-muted);
    cursor: pointer;
}

body.kz-theme-modern .kz_PageFieldScript:hover,
body.kz-theme-modern .kz_PageSectionScript:hover,
body.kz-theme-modern .kz_ChildFieldScript:hover { color: var(--kz-primary); }

/* Page header: copy page script and preview as small round buttons */
body.kz-theme-modern #pageHeader > .kz_PageScript,
body.kz-theme-modern #pageHeader > .PreviewPage {
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--kz-border);
    border-radius: 50%;
    background: var(--kz-surface);
    color: var(--kz-text-2) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: background-color var(--kz-dur-fast) var(--kz-ease), color var(--kz-dur-fast) var(--kz-ease);
}

body.kz-theme-modern #pageHeader > .PreviewPage .fa { font-size: 12px; }
body.kz-theme-modern #pageHeader > .kz_PageScript:hover,
body.kz-theme-modern #pageHeader > .PreviewPage:hover { background: var(--kz-primary-soft); color: var(--kz-primary) !important; }

/* Menu edit pencils (developer only) */
body.kz-theme-modern #cssmenu .fa-pencil-square-o,
body.kz-theme-modern #verticalMenu .fa-pencil-square-o { font-size: 11px; color: var(--kz-muted); }
body.kz-theme-modern #cssmenu .fa-pencil-square-o:hover,
body.kz-theme-modern #verticalMenu .fa-pencil-square-o:hover { color: var(--kz-primary); }

/* "Current Logged In N Developers!" as a small floating pill */
body.kz-theme-modern .onlineusers {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--kz-border);
    border-radius: 999px;
    background: var(--kz-surface);
    box-shadow: var(--kz-shadow);
    color: var(--kz-text-2);
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
}

body.kz-theme-modern .onlineusers::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kz-success);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}

body.kz-theme-modern.bodyVerticalNavigation .onlineusers { left: calc(var(--kz-sidebar-w) + 16px); }

/* ---------- Developer wizards (getText, getList, ...): bare inputs inside modals ---------- */
body.kz-theme-modern .modal-body { font-size: 13px; color: var(--kz-text-2); }

body.kz-theme-modern .modal-body input[type="text"]:not(.form-control) {
    height: 34px;
    margin: 4px 0 2px;
    padding: 0 10px;
    border: 1px solid var(--kz-border-strong);
    border-radius: var(--kz-radius);
    background: var(--kz-surface);
    color: var(--kz-text);
    font-size: 13px;
    outline: none;
}

body.kz-theme-modern .modal-body input[type="text"]:not(.form-control):focus { border-color: var(--kz-indigo); box-shadow: var(--kz-ring); }

body.kz-theme-modern .modal-body .multipleTextDiv {
    padding: 4px 6px;
    border-radius: var(--kz-radius);
    border-color: var(--kz-border-strong) !important;
}

body.kz-theme-modern .modal-body .multipleTextDiv input[type="text"] { border: 0 !important; box-shadow: none !important; margin: 0; }

body.kz-theme-modern .modal-body > button:not(.close) {
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--kz-radius);
    background: var(--kz-grad);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--kz-shadow-primary);
    cursor: pointer;
}

/* ---------- SQL tool (/sql/Default) ---------- */
/* The workspace layout (bar, Object Explorer, help) is in kz_sql_editor.css; these style the tree's items. */
body.kz-theme-modern #SQlObjectList > div { padding: 3px 4px; border-radius: 6px; }
/* Small expand / create icons are muted; object names (span.OpenScript) stay readable */
body.kz-theme-modern #SQlObjectList i.fa { color: var(--kz-muted); }
body.kz-theme-modern #SQlObjectList i.fa:hover { color: var(--kz-primary); }
body.kz-theme-modern #SQlObjectList span.OpenScript { color: var(--kz-text); font-weight: 500; }
body.kz-theme-modern #SQlObjectList span.OpenScript:hover { color: var(--kz-primary); }
body.kz-theme-modern #SQlObjectList .sqlObjectName { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; }
body.kz-theme-modern #SQlObjectList .sqlObjectName > * { display: block; padding: 2px 6px; border-radius: 4px; cursor: pointer; }
body.kz-theme-modern #SQlObjectList .sqlObjectName > *:hover { background: var(--kz-primary-soft); color: var(--kz-primary); }

body.kz-theme-modern #SQlQuery > .tab-content { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.kz-theme-modern #SQlQuery iframe { border: 1px solid var(--kz-border) !important; border-radius: var(--kz-radius-lg); background: var(--kz-surface); }

@media (prefers-reduced-motion: reduce) {
    body.kz-theme-modern *,
    body.kz-theme-modern *::before,
    body.kz-theme-modern *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
    }
}