/*
    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;
}

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;
}

/* 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;
}

/* Let a wide grid keep natural column widths and scroll, rather than squeezing text columns */
body.kz-theme-modern .kz_Child > .PageChild.table { width: auto !important; min-width: 100%; }
body.kz-theme-modern .kz_Child > .PageChild > tbody > tr > td:not(:first-child):not(:last-child) { min-width: 140px; }

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);
}

/* ---------- 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 ---------- */
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; }

    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; }

/* 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;
}

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; }

/* =========================================================
   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; }

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; }

/* =========================================================
   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;
}

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;
}

/* 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) ---------- */
body.kz-theme-modern #SQlObjectList {
    margin: 12px 0 12px 12px;
    padding: 12px !important;
    border: 1px solid var(--kz-border);
    border-radius: var(--kz-radius-lg);
    background: var(--kz-surface);
    box-shadow: var(--kz-shadow-sm);
    font-size: 13px;
    color: var(--kz-text);
    width: calc(25% - 12px) !important;
    max-height: calc(100vh - 24px);
    overflow: auto !important;
}

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 { padding: 12px 12px 12px 16px !important; }
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;
    }
}