.zz-ui-v2 {
    --zz-font-sans: "Segoe UI", Arial, sans-serif;
    --zz-bg: #f4f6f8;
    --zz-surface: #ffffff;
    --zz-surface-muted: #f8fafc;
    --zz-border: #d9e0e8;
    --zz-border-strong: #b8c4d2;
    --zz-text: #172033;
    --zz-text-muted: #607087;
    --zz-primary: #0b5cad;
    --zz-primary-hover: #084b8e;
    --zz-primary-soft: #e7f1fb;
    --zz-success: #147d64;
    --zz-success-soft: #e1f5ef;
    --zz-warning: #b65c12;
    --zz-warning-soft: #fff1df;
    --zz-danger: #c23b45;
    --zz-danger-soft: #fdebed;
    --zz-info: #087f8c;
    --zz-info-soft: #e2f5f7;
    --zz-on-primary: #ffffff;
    --zz-on-success: #ffffff;
    --zz-on-danger: #ffffff;
    --zz-on-warning: #ffffff;
    --zz-on-info: #ffffff;
    --zz-on-secondary: #ffffff;
    --zz-soft-text: #26384d;
    --zz-header: #102a43;
    --zz-header-strong: #0b1f33;
    --zz-sidebar: #ffffff;
    --zz-sidebar-active: #e7f1fb;
    --zz-radius: 8px;
    --zz-radius-sm: 6px;
    --zz-shadow-sm: 0 1px 2px rgba(16, 42, 67, .08);
    --zz-shadow-md: 0 8px 24px rgba(16, 42, 67, .12);
    --zz-header-height: 52px;
    --zz-sidebar-width: 264px;
    --zz-sidebar-collapsed-width: 76px;
    --zz-control-height: 38px;
    --zz-transition: 160ms ease;
    background: #f4f6f8;
    background: var(--zz-bg);
    color: #172033;
    color: var(--zz-text);
    font-family: "Segoe UI", Arial, sans-serif;
    font-family: var(--zz-font-sans);
}

.zz-ui-v2 *,
.zz-ui-v2 *::before,
.zz-ui-v2 *::after {
    box-sizing: border-box;
}

/* Shared visual corrections.  This sheet is loaded by every ZZ UI 2 shell,
   including standalone report/candidate pages, so controls do not inherit
   the legacy theme's low-contrast colors or fixed-width layout. */
.zz-ui-v2,
.zz-ui-v2 > form,
.zz-ui-v2 .wrapper,
.zz-ui-v2 .zz-shell {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.zz-ui-v2 .btn,
.zz-ui-v2 input[type="button"],
.zz-ui-v2 input[type="submit"],
.zz-ui-v2 input[type="reset"] {
    font-family: var(--zz-font-sans);
    line-height: 1.25;
    text-shadow: none !important;
}

.zz-ui-v2 .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-dark):not(.btn-light):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-secondary):not(.btn-outline-dark),
.zz-ui-v2 input[type="button"]:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-dark):not(.btnSubmit),
.zz-ui-v2 input[type="submit"]:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-dark):not(.btnSubmit),
.zz-ui-v2 input[type="reset"]:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-dark):not(.btnSubmit) {
    color: var(--zz-soft-text) !important;
    background: var(--zz-surface) !important;
    border-color: var(--zz-border-strong) !important;
}

.zz-ui-v2 .btn-primary,
.zz-ui-v2 .btn-success,
.zz-ui-v2 .btn-danger,
.zz-ui-v2 .btn-warning,
.zz-ui-v2 .btn-info,
.zz-ui-v2 .btn-secondary,
.zz-ui-v2 .btn-dark,
.zz-ui-v2 input.btn-primary,
.zz-ui-v2 input.btn-success,
.zz-ui-v2 input.btn-danger,
.zz-ui-v2 input.btn-warning,
.zz-ui-v2 input.btn-info,
.zz-ui-v2 input.btn-secondary,
.zz-ui-v2 input.btn-dark {
    color: #ffffff !important;
    border-style: solid !important;
}

.zz-ui-v2 .btn-primary,
.zz-ui-v2 input.btn-primary {
    background: #0b5cad !important;
    border-color: #0b5cad !important;
}

.zz-ui-v2 .btn-success,
.zz-ui-v2 input.btn-success {
    background: #08755b !important;
    border-color: #08755b !important;
}

.zz-ui-v2 .btn-danger,
.zz-ui-v2 input.btn-danger {
    background: #b52f3a !important;
    border-color: #b52f3a !important;
}

.zz-ui-v2 .btn-warning,
.zz-ui-v2 input.btn-warning {
    background: #995007 !important;
    border-color: #995007 !important;
}

.zz-ui-v2 .btn-info,
.zz-ui-v2 input.btn-info {
    background: #087483 !important;
    border-color: #087483 !important;
}

.zz-ui-v2 .btn-secondary,
.zz-ui-v2 input.btn-secondary,
.zz-ui-v2 .btn-dark,
.zz-ui-v2 input.btn-dark {
    background: #52647b !important;
    border-color: #52647b !important;
}

.zz-ui-v2 .btn-light,
.zz-ui-v2 input.btn-light {
    color: #26384d !important;
    background: #e2e8f0 !important;
    border-color: #b8c4d2 !important;
}

.zz-ui-v2 .btn-link {
    color: #0b5cad !important;
    background: transparent !important;
    border-color: transparent !important;
}

.zz-ui-v2 .btn-outline-primary,
.zz-ui-v2 .btn-outline-success,
.zz-ui-v2 .btn-outline-danger,
.zz-ui-v2 .btn-outline-warning,
.zz-ui-v2 .btn-outline-info,
.zz-ui-v2 .btn-outline-secondary,
.zz-ui-v2 .btn-outline-dark {
    background: #ffffff !important;
}

.zz-ui-v2 .btn-outline-primary { color: #0b5cad !important; border-color: #0b5cad !important; }
.zz-ui-v2 .btn-outline-success { color: #08755b !important; border-color: #08755b !important; }
.zz-ui-v2 .btn-outline-danger { color: #a52a35 !important; border-color: #b52f3a !important; }
.zz-ui-v2 .btn-outline-warning { color: #7a3d04 !important; border-color: #995007 !important; }
.zz-ui-v2 .btn-outline-info { color: #086572 !important; border-color: #087483 !important; }
.zz-ui-v2 .btn-outline-secondary,
.zz-ui-v2 .btn-outline-dark { color: #3f5065 !important; border-color: #52647b !important; }

.zz-ui-v2 .btn-outline-primary:hover,
.zz-ui-v2 .btn-outline-success:hover,
.zz-ui-v2 .btn-outline-danger:hover,
.zz-ui-v2 .btn-outline-warning:hover,
.zz-ui-v2 .btn-outline-info:hover,
.zz-ui-v2 .btn-outline-secondary:hover,
.zz-ui-v2 .btn-outline-dark:hover,
.zz-ui-v2 .btn-outline-primary:focus,
.zz-ui-v2 .btn-outline-success:focus,
.zz-ui-v2 .btn-outline-danger:focus,
.zz-ui-v2 .btn-outline-warning:focus,
.zz-ui-v2 .btn-outline-info:focus,
.zz-ui-v2 .btn-outline-secondary:focus,
.zz-ui-v2 .btn-outline-dark:focus {
    color: #ffffff !important;
}

.zz-ui-v2 .btn-outline-primary:hover,
.zz-ui-v2 .btn-outline-primary:focus { background: #0b5cad !important; }
.zz-ui-v2 .btn-outline-success:hover,
.zz-ui-v2 .btn-outline-success:focus { background: #08755b !important; }
.zz-ui-v2 .btn-outline-danger:hover,
.zz-ui-v2 .btn-outline-danger:focus { background: #b52f3a !important; }
.zz-ui-v2 .btn-outline-warning:hover,
.zz-ui-v2 .btn-outline-warning:focus { background: #995007 !important; }
.zz-ui-v2 .btn-outline-info:hover,
.zz-ui-v2 .btn-outline-info:focus { background: #087483 !important; }
.zz-ui-v2 .btn-outline-secondary:hover,
.zz-ui-v2 .btn-outline-secondary:focus,
.zz-ui-v2 .btn-outline-dark:hover,
.zz-ui-v2 .btn-outline-dark:focus { background: #52647b !important; }

.zz-ui-v2 .btn > i,
.zz-ui-v2 .btn > .fa,
.zz-ui-v2 .btn > .fas,
.zz-ui-v2 .btn > .far,
.zz-ui-v2 .btn > .fab,
.zz-ui-v2 .btn > svg,
.zz-ui-v2 .btn > span,
.zz-ui-v2 button > i,
.zz-ui-v2 button > svg {
    color: inherit !important;
    fill: currentColor;
    stroke: currentColor;
}

/* Legacy templates sometimes wrap the icon in a span (or add a second
   nesting level).  Keep every icon in a button on the button's resolved
   foreground colour so blue icons cannot disappear on blue action buttons. */
.zz-ui-v2 .btn i,
.zz-ui-v2 .btn svg,
.zz-ui-v2 button i,
.zz-ui-v2 button svg {
    color: inherit !important;
    fill: currentColor;
    stroke: currentColor;
}

.zz-ui-v2 .badge,
.zz-ui-v2 .label {
    border: 1px solid transparent;
    font-weight: 700;
    text-shadow: none !important;
}

.zz-ui-v2 .badge-primary,
.zz-ui-v2 .label-primary { color: #ffffff !important; background: #0b5cad !important; border-color: #0b5cad !important; }
.zz-ui-v2 .badge-success,
.zz-ui-v2 .label-success { color: #ffffff !important; background: #08755b !important; border-color: #08755b !important; }
.zz-ui-v2 .badge-danger,
.zz-ui-v2 .label-danger { color: #ffffff !important; background: #b52f3a !important; border-color: #b52f3a !important; }
.zz-ui-v2 .badge-warning,
.zz-ui-v2 .label-warning { color: #6a3500 !important; background: #ffe1b3 !important; border-color: #e7b873 !important; }
.zz-ui-v2 .badge-info,
.zz-ui-v2 .label-info { color: #075f69 !important; background: #d6f1f3 !important; border-color: #9dd9df !important; }
.zz-ui-v2 .badge-secondary,
.zz-ui-v2 .label-default,
.zz-ui-v2 .badge-dark { color: #ffffff !important; background: #52647b !important; border-color: #52647b !important; }
.zz-ui-v2 .badge-light { color: #26384d !important; background: #e2e8f0 !important; border-color: #b8c4d2 !important; }

.zz-ui-v2 .badge > i,
.zz-ui-v2 .badge > svg,
.zz-ui-v2 .label > i,
.zz-ui-v2 .label > svg {
    color: inherit !important;
    fill: currentColor;
    stroke: currentColor;
}

.zz-ui-v2 .text-muted { color: #52647b !important; }
.zz-ui-v2 .text-secondary { color: #42526a !important; }
.zz-ui-v2 .zz-contrast-auto-light { color: #ffffff !important; }
.zz-ui-v2 .zz-contrast-auto-dark { color: #172033 !important; }

/* Remove the legacy fixed-width gutters that leave an empty slab at the
   right of wide screens.  Inner cards can still opt into a readable max-width
   when their own shell deliberately requires it. */
.zz-ui-v2 .zz-main.main-panel {
    width: calc(100% - var(--zz-sidebar-width));
    max-width: none !important;
    margin-right: 0 !important;
    right: auto !important;
    flex: 1 1 auto;
}

.zz-ui-v2 .zz-page.page-inner {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.zz-ui-v2 .zz-page .container,
.zz-ui-v2 .zz-page .container-fluid,
.zz-ui-v2 .zz-page-body {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
}

/* Bootstrap's nested container gutters are useful for old pages, but inside
   the V2 page canvas they create a second, asymmetric slab of empty space.
   The canvas already owns the responsive gutter, so nested containers fill it. */
.zz-ui-v2 .zz-page .container-fluid {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.zz-ui-v2 .zz-page .container {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.zz-ui-v2 .zz-page .container-fluid > .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.zz-ui-v2 .zz-page .container-fluid > .row > .col-12:only-child {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* A responsive Bootstrap column often carries both col-12 and a wider-screen
   width (for example col-12 col-lg-8).  Removing its gutter just because it
   contains col-12 makes adjacent columns touch.  Only a genuinely single
   full-width child drops the nested gutter; multi-column layouts retain their
   normal visual separation. */

.zz-ui-v2 .zz-page-body > [class*="col-"]:only-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* A ContentPlaceHolder can emit several top-level blocks.  Because the host
   is a Bootstrap row, those ordinary blocks otherwise become intrinsic-width
   flex items and sit beside each other, leaving the rest of the canvas blank.
   Real Bootstrap columns keep their declared responsive widths. */
.zz-ui-v2 .zz-page-body.row > div:not([class*="col-"]),
.zz-ui-v2 .zz-page-body.row > section:not([class*="col-"]),
.zz-ui-v2 .zz-page-body.row > article:not([class*="col-"]),
.zz-ui-v2 .zz-page-body.row > main:not([class*="col-"]),
.zz-ui-v2 .zz-page-body.row > fieldset:not([class*="col-"]),
.zz-ui-v2 .zz-page-body.row > table:not([class*="col-"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
}

/* Auto-migrated InvalidAjax pages are wrapped in a semantic workspace div
   instead of a Bootstrap column.  As the only row child it otherwise keeps
   its intrinsic content width and leaves a large empty slab on the right. */
.zz-ui-v2 .zz-page-body.row > :only-child,
.zz-ui-v2 .zz-page-body.row > .zz-utility-workspace--admin {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
}

.zz-ui-v2 .zz-report-main,
.zz-ui-v2 .zz-test-preview-shell .zz-report-main,
.zz-ui-v2 .zz-test-content-shell .zz-report-main,
.zz-ui-v2 .zz-test-decorate-shell .zz-report-main,
.zz-ui-v2 .zz-question-content-shell .zz-report-main,
.zz-ui-v2 .zz-candidate-status-shell .zz-report-main {
    width: 100% !important;
    max-width: none !important;
}

.zz-ui-v2.zz-candidate-shell-v2 .zz-candidate-page-v2,
.zz-ui-v2.zz-candidate-standalone-v2 .zz-candidate-standalone-form,
.zz-ui-v2.zz-candidate-standalone-v2 .zz-candidate-standalone-main,
.zz-ui-v2.zz-candidate-exam-v2 .zz-candidate-exam-shell {
    width: 100% !important;
    max-width: none !important;
}