/**
 * AllForTest shared layout theme
 *
 * This is the single source of truth for site-wide geometry. Keep colours in
 * bizcode.css and page-specific presentation in each module stylesheet.
 * Change the variables below to adjust the common shell without editing pages.
 */

:root {
    /* Page shell */
    --bz-layout-page-max: 1320px;
    --bz-layout-page-wide-max: 1440px;
    --bz-layout-page-form-max: 1060px;
    --bz-layout-page-focus-max: 760px;
    --bz-layout-page-pad: 16px;
    --bz-layout-page-pad-mobile: 12px;
    --bz-layout-section-gap: 32px;

    /* Actions and card grids */
    --bz-layout-action-gap: 8px;
    --bz-layout-action-gap-compact: 6px;
    --bz-layout-card-gap: 16px;
    --bz-layout-card-min: 260px;

    /* Title banner */
    --bz-layout-banner-gap-from-nav: 12px;
    --bz-layout-banner-min-height: 124px;
    --bz-layout-banner-pad-y: 25px;
    --bz-layout-banner-pad-x: 32px;
    --bz-layout-banner-gap-after: 32px;
    --bz-layout-banner-radius: 12px 12px 20px 20px;
    --bz-layout-banner-title-size: 1.38rem;
    --bz-layout-banner-desc-size: .82rem;

    /* Content surfaces */
    --bz-layout-surface-radius: 12px;
    --bz-layout-table-radius: 12px;
    --bz-layout-table-head-bg: rgba(var(--bz-accent-rgb), .08);
    --bz-layout-table-head-color: var(--bz-ink);
    --bz-layout-table-cell-pad-y: .7rem;
    --bz-layout-table-cell-pad-x: .85rem;

    /* Pagination and footer */
    --bz-layout-page-control-size: 34px;
    --bz-layout-page-control-radius: 8px;
    --bz-layout-footer-gap-top: 48px;

    /* Backwards-compatible aliases used by existing pages. */
    --bz-page-max-pc: var(--bz-layout-page-max);
    --bz-page-max-wide: var(--bz-layout-page-wide-max);
    --bz-page-pad: var(--bz-layout-page-pad);
    --bz-page-pad-mobile: var(--bz-layout-page-pad-mobile);
}

/* Use these on new pages. Existing container pages inherit the same widths
   through bz-redesign.css. */
.bz-page,
.bz-page-wide,
.bz-page-form,
.bz-page-focus {
    box-sizing: border-box;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--bz-layout-page-pad);
    padding-right: var(--bz-layout-page-pad);
}
.bz-page { max-width: var(--bz-layout-page-max); }
.bz-page-wide { max-width: var(--bz-layout-page-wide-max); }
.bz-page-form { max-width: var(--bz-layout-page-form-max); }
.bz-page-focus { max-width: var(--bz-layout-page-focus-max); }

.bz-page-banner,
.bz-layout-banner {
    min-height: var(--bz-layout-banner-min-height);
    margin-bottom: var(--bz-layout-banner-gap-after);
    padding: var(--bz-layout-banner-pad-y) var(--bz-layout-banner-pad-x);
    border-radius: var(--bz-layout-banner-radius);
}
/* Adapter applied to legacy operational title banners by bz-layout-rules.js. */
[data-bz-theme] .bz-auto-standard-banner {
    min-height: var(--bz-layout-banner-min-height);
    margin-top: var(--bz-layout-banner-gap-from-nav) !important;
    margin-bottom: var(--bz-layout-banner-gap-after) !important;
    padding: var(--bz-layout-banner-pad-y) var(--bz-layout-banner-pad-x) !important;
    border-radius: var(--bz-layout-banner-radius) !important;
    background: #385c55 !important;
    color: #fff !important;
}
.bz-auto-standard-banner :is(h1, h2),
.bz-auto-standard-banner .bz-auto-banner-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    font-size: var(--bz-layout-banner-title-size) !important;
    line-height: 1.25;
}
.bz-auto-standard-banner :is(p, .desc, [class*="desc"]),
.bz-auto-standard-banner .bz-auto-banner-desc {
    color: rgba(255,255,255,.78) !important;
    font-size: var(--bz-layout-banner-desc-size) !important;
}
.bz-banner-leading-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.14);
    font-size: 1.18rem;
    line-height: 1;
}
/* Standard pages begin their title banner at a predictable distance below
   the navbar. Keep page-specific banners inside this shared rhythm. */
.bz-page > .bz-page-banner:first-child,
.bz-page > .bz-layout-banner:first-child {
    margin-top: var(--bz-layout-banner-gap-from-nav);
}
.bz-page-banner .bz-pb-title,
.bz-layout-banner__title {
    font-size: var(--bz-layout-banner-title-size);
    line-height: 1.25;
}
.bz-page-banner .bz-pb-desc,
.bz-layout-banner__desc {
    font-size: var(--bz-layout-banner-desc-size);
    line-height: 1.55;
}

/* Public Online Exam uses the same operational banner treatment for the
   landing and results screens, despite legacy theme banner selectors. */
[data-bz-theme] .exam-beta-hero,
[data-bz-theme] .exam-result-hero {
    background: #385c55 !important;
}

/* Shared administrative banner used by System and Staff operational pages. */
.sys-mail-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    background: #385c55;
    color: #fff;
}
.sys-mail-banner__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    font-size: 1.45rem;
}
.sys-mail-banner__body { min-width: 0; }
.sys-mail-banner__title { font-size: var(--bz-layout-banner-title-size); font-weight: 800; }
.sys-mail-banner__desc { margin-top: 3px; color: rgba(255,255,255,.78); font-size: var(--bz-layout-banner-desc-size); }
.sys-mail-banner__action { margin-left: auto; }
.sys-mail-banner__action.btn {
    border-color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.1);
    color: #fff;
}
.sys-mail-banner__action.btn:hover { background: rgba(255,255,255,.2); color: #fff; }

.bz-content-section { margin-bottom: var(--bz-layout-section-gap); }

/* Use for page-level commands and repeated content cards. */
.bz-action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bz-layout-action-gap);
}
.bz-action-group--compact { gap: var(--bz-layout-action-gap-compact); }
/* Existing pages predominantly use Bootstrap flex wrappers. Normalize only
   wrappers that contain direct buttons, without affecting form input groups. */
.bz-page :is(.d-flex, .d-inline-flex):not(.input-group):has(> .btn),
.container :is(.d-flex, .d-inline-flex):not(.input-group):has(> .btn),
.container-fluid :is(.d-flex, .d-inline-flex):not(.input-group):has(> .btn) {
    gap: var(--bz-layout-action-gap);
    flex-wrap: wrap;
}
.bz-page :is(.d-flex, .d-inline-flex):not(.input-group):has(> .btn-sm),
.container :is(.d-flex, .d-inline-flex):not(.input-group):has(> .btn-sm),
.container-fluid :is(.d-flex, .d-inline-flex):not(.input-group):has(> .btn-sm) {
    gap: var(--bz-layout-action-gap-compact);
}
.bz-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bz-layout-card-gap);
}
.bz-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bz-card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bz-table-wrap,
.table-responsive:not(.modal .table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--bz-layout-table-radius);
}
.bz-table-wrap > .table > thead > tr > th,
.table-responsive > .table > thead > tr > th {
    background: var(--bz-layout-table-head-bg);
    color: var(--bz-layout-table-head-color);
    padding: var(--bz-layout-table-cell-pad-y) var(--bz-layout-table-cell-pad-x);
    font-size: .78rem;
    font-weight: 750;
    vertical-align: middle;
}
.bz-table-wrap > .table > tbody > tr > :is(td, th),
.table-responsive > .table > tbody > tr > :is(td, th) {
    padding: var(--bz-layout-table-cell-pad-y) var(--bz-layout-table-cell-pad-x);
    vertical-align: middle;
}

.pagination { gap: .25rem; }
.pagination .page-link,
.pg-btn {
    min-width: var(--bz-layout-page-control-size);
    min-height: var(--bz-layout-page-control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bz-layout-page-control-radius);
}

.bz-footer { margin-top: var(--bz-layout-footer-gap-top); }

/* Native fields must not extend beyond a shared page shell on narrow screens. */
.bz-page :is(.form-control, .form-select, input, select, textarea),
.bz-page-wide :is(.form-control, .form-select, input, select, textarea),
.bz-page-form :is(.form-control, .form-select, input, select, textarea),
.bz-page-focus :is(.form-control, .form-select, input, select, textarea) {
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .bz-page,
    .bz-page-wide,
    .bz-page-form,
    .bz-page-focus {
        padding-left: var(--bz-layout-page-pad-mobile);
        padding-right: var(--bz-layout-page-pad-mobile);
    }
    .bz-page-banner,
    .bz-layout-banner {
        min-height: 0;
        margin-bottom: 24px;
        padding: 16px;
        border-radius: 10px 10px 16px 16px;
    }
    .bz-auto-standard-banner {
        min-height: 0;
        margin-top: 8px !important;
        margin-bottom: 24px !important;
        padding: 16px !important;
        border-radius: 10px 10px 16px 16px !important;
    }
    .bz-auto-standard-banner :is(h1, h2),
    .bz-auto-standard-banner .bz-auto-banner-title { font-size: 1.12rem !important; }
    .bz-banner-leading-icon { width:36px; height:36px; flex-basis:36px; font-size:1.05rem; }
    .bz-page > .bz-page-banner:first-child,
    .bz-page > .bz-layout-banner:first-child { margin-top: 8px; }
    .bz-page-banner .bz-pb-title,
    .bz-layout-banner__title { font-size: 1.12rem; }
    .sys-mail-banner { align-items: flex-start; gap: 10px; }
    .sys-mail-banner__icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 1.2rem; }
    .sys-mail-banner__title { font-size: 1.12rem; }
    .sys-mail-banner__action { margin-left: 0; }
    .bz-content-section { margin-bottom: 24px; }
    .bz-action-group { gap: var(--bz-layout-action-gap-compact); }
    .bz-card-grid,
    .bz-card-grid--three,
    .bz-card-grid--two { grid-template-columns: 1fr; gap: 12px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .bz-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}