/* ==========================================================================
   Legacy page helpers (was the "premium" theme layer).
   The look of the app now comes from wwwroot/css/app/*.css (app.min.css, loaded after this file):
   tokens, shell, components and the Bootstrap bridge. What stays here are layout helpers that pages
   still use (list toolbars, filter grids, legacy cards, auth pages), restated with the tokens:
   radius 6/8/12, flat cards with a 1px line, no gradients, no purple.
   ========================================================================== */
:root {
    /* Old names kept for pages and partials that still read them (Dashboard, Branding, question pool, _BrandingHead). */
    --app-font-sans: var(--font-sans, Inter, system-ui, sans-serif);
    --app-font-heading: var(--font-sans, Inter, system-ui, sans-serif);
    --app-bg: var(--bg-canvas, #f6f8fb);
    --app-bg-accent: var(--accent-50, #eff4ff);
    --app-surface: #ffffff;
    --app-surface-solid: #ffffff;
    --app-surface-muted: var(--n-50, #f6f8fb);
    --app-border: var(--border-subtle, #e5e7eb);
    --app-border-strong: var(--border-default, #d1d6de);
    --app-text: var(--text-primary, #1f2937);
    --app-text-muted: var(--text-secondary, #5b6472);
    --app-title: var(--text-strong, #0f2238);
    --app-primary: var(--accent-500, #2563eb);
    --app-primary-hover: var(--accent-600, #1d4ed8);
    --app-primary-soft: var(--accent-50, #eff4ff);
    --app-success: var(--success-500, #12805c);
    --app-danger: var(--danger-500, #b42318);
    --app-warning: var(--warning-500, #b45309);
    --app-shadow-sm: none;
    --app-shadow-md: var(--shadow-md);
    --app-shadow-lg: var(--shadow-lg);
    --app-radius-sm: 6px;
    --app-radius-md: 8px;
    --app-radius-lg: 12px;
    --app-transition: 160ms ease;
}

.page-inner > .card:first-child,
.page-inner > form > .card:first-child,
.page-inner > .container > .card:first-child {
    margin-top: 0;
}

.card-header > .d-flex,
.card-header form.row,
.page-caption.flex-grow-1 {
    gap: 12px;
}

.list-shell-card {
    overflow: visible;
}

.list-shell-card > .card-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.filter-dropdown .filter-menu-panel {
    z-index: 1050;
}

.page-toolbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.page-actions .btn,
.page-actions .btn-round,
.page-actions .btn-create {
    margin-left: 0 !important;
}

.search-form-grid {
    row-gap: 8px;
}

.list-region {
    padding: 20px;
}

.search-label {
    min-width: 108px;
    justify-content: center;
    background: var(--n-50);
    color: var(--text-secondary);
    font-weight: 600;
}

.students-list-wrapper,
.sort-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.compact-table {
    overflow: hidden;
    background: #ffffff;
}

.compact-table thead th,
.compact-table tbody td {
    white-space: nowrap;
}

.mobile-card-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tree-table-surface {
    background: #ffffff;
}

.stacked-filter-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.filter-toolbar {
    align-items: center;
    flex-wrap: wrap;
}

.filter-search-group {
    flex: 1 1 320px;
}

.filter-dropdown {
    flex: 0 0 auto;
}

.filter-menu-panel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.filter-grid-row {
    gap: 12px;
}

.filter-grid-row > .form-group {
    flex: 1 1 0;
}

.filter-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px !important;
}

.selection-caption .form-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.selection-caption .form-check-label {
    margin-bottom: 0;
}

.list-stack-region {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.testgroup-list-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.testgroup-card {
    margin: 0 !important;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: #ffffff;
    overflow-x: clip;
}

.testgroup-card .card-body {
    padding: 16px 20px;
}

.testgroup-metrics {
    padding-top: 4px;
}

.testgroup-card .row,
.testgroup-card .row > [class*="col"] {
    min-width: 0;
}

.testgroup-quick-actions {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    row-gap: 8px;
}

.testgroup-actions-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-top: 4px;
    max-width: 100%;
}

.testgroup-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1.2;
    max-width: 100%;
}

@media (max-width: 1199.98px) {
    .testgroup-quick-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .testgroup-actions-inline {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}

.question-search-grid,
.table-list-search {
    align-items: stretch;
}

/* Search rows: one bordered field with a label cell and a button cell. */
.table-list-search.row,
.question-search-grid.row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
    margin: 0 !important;
}

.table-list-search > div,
.question-search-grid > div {
    padding: 0 !important;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.table-list-search > div:nth-of-type(1),
.question-search-grid > div:nth-of-type(1),
.question-search-grid > div:nth-of-type(3) {
    grid-column: span 9;
}

.table-list-search > div:nth-of-type(2),
.question-search-grid > div:nth-of-type(2),
.question-search-grid > div:nth-of-type(4) {
    grid-column: span 3;
}

.table-list-search .input-group,
.question-search-grid .input-group {
    gap: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #ffffff;
}

.table-list-search .search-label,
.table-list-search .input-group > .input-group-text,
.question-search-grid .search-label,
.question-search-grid .input-group > .input-group-text {
    margin: 0;
    min-height: 34px;
    border: 0 !important;
    border-right: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    background: var(--n-50);
}

.table-list-search .input-group > .form-control,
.table-list-search .input-group > .form-select,
.table-list-search .input-group > .bts_dropdown,
.question-search-grid .input-group > .form-control,
.question-search-grid .input-group > .form-select,
.question-search-grid .input-group > .bts_dropdown {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    min-height: 34px;
    box-shadow: none !important;
}

.table-list-search .input-group > .bts_dropdown,
.question-search-grid .input-group > .bts_dropdown {
    flex: 1 1 auto;
    width: 1%;
}

.table-list-search .input-group > .bts_dropdown .dropdown-toggle,
.question-search-grid .input-group > .bts_dropdown .dropdown-toggle {
    min-height: 34px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.table-list-search .input-group > .btn,
.question-search-grid .input-group > .btn {
    border: 0 !important;
    border-left: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    min-width: 44px;
    min-height: 34px;
    box-shadow: none !important;
}

.table-list-search .input-group:focus-within,
.question-search-grid .input-group:focus-within {
    border-color: var(--accent-500);
    box-shadow: var(--shadow-focus);
}

@media (max-width: 991.98px) {
    .question-search-grid > div:nth-of-type(1),
    .question-search-grid > div:nth-of-type(2),
    .question-search-grid > div:nth-of-type(3),
    .question-search-grid > div:nth-of-type(4),
    .table-list-search > div:nth-of-type(1),
    .table-list-search > div:nth-of-type(2) {
        grid-column: span 12;
    }
}

.question-list-region {
    min-height: 55vh;
}

.sort-controls {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--n-25);
}

.sort-btn {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--n-700);
    font-weight: 500;
}

.user-card,
.student-card,
.survey-card,
.order-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: none;
}

.student-card .student-name,
.user-card h6 {
    color: var(--text-strong);
}

.survey-card .btn-item-details {
    color: var(--text-strong);
    text-decoration: none;
}

.survey-card .btn-item-details:hover {
    color: var(--text-accent);
}

.user-card-header {
    border-bottom: 1px solid var(--n-100);
}

.order-card .card-header {
    padding: 16px 20px 12px;
}

.order-card .card-body {
    padding: 8px 20px;
}

.order-card .actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 20px 20px;
}

.question-bank-item .card-title {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
}

.item-meta-group {
    color: var(--text-secondary);
}

.item-action-group {
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.item-action-group .dropdown .btn {
    min-width: 36px;
}

.empty-state-shell .rounded-4 {
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    border-color: var(--border-subtle) !important;
}

.page-caption {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-strong);
}

.bg-grey2,
.form-control.bg-grey2,
.form-control.bg-light {
    background: var(--n-50) !important;
}

.form-group,
.mb-2,
.mb-3,
.mb-4 {
    position: relative;
}

/* ---------- signed-out pages (sign in, register, reset) ---------- */
.select-container,
.login-form,
.register-form.login-form,
.login-form-2,
.change-password-form {
    padding: 24px;
}

.login-form,
.select-container,
.form.login-form.rounded,
.register-form.login-form,
.empty-state-container {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    background: #ffffff;
    box-shadow: none;
}

.app-shell-empty {
    min-height: 100vh;
    background: var(--bg-canvas);
}

.app-shell-empty .container {
    max-width: 1180px;
}

.auth-shell {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-shell-column {
    padding-top: 32px;
    padding-bottom: 32px;
}

.auth-shell .login-form {
    margin-top: 0;
    max-width: 100%;
    width: 100%;
}

.auth-shell-subtitle {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--text-secondary);
}

.login-form-title {
    margin-bottom: 18px;
    font-size: 20px;
    font-weight: 700;
}

.password-toggle {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    color: var(--text-secondary);
}

.password-toggle:hover {
    color: var(--text-accent);
}

.select-description {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.select-form {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.auth-footer {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.select-container {
    max-width: 720px;
    padding: 32px;
}

.select-header {
    margin-bottom: 20px;
}

.app-logo {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
}

.app-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -.02em;
}

.select-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: none;
}

.select-card:hover {
    border-color: var(--border-strong);
}

.empty-state-container {
    max-width: 680px;
    padding: 32px;
    text-align: center;
}

.empty-state-title {
    font-size: 20px;
    font-weight: 700;
    margin: 14px 0 8px;
}

.empty-state-message {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.create-button,
.help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 16px;
    margin-top: 16px;
    border-radius: var(--radius-sm);
}

.help-link {
    color: var(--text-accent);
    background: transparent;
}

.help-panel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.help-panel .title {
    background: var(--brand-navy);
    color: #fff;
    padding: 14px 16px;
}

.circle-small-top-avatar,
.img-thumbnail.rounded-circle {
    border: 1px solid var(--border-subtle);
    box-shadow: none;
}

#page-progress-bar {
    background: rgba(15, 34, 56, 0.24);
}

@media (max-width: 767.98px) {
    .list-region {
        padding: 16px;
    }

    .auth-shell {
        min-height: auto;
        align-items: stretch;
        /* Keep the container's side padding: the Bootstrap row inside has negative margins and overflowed the screen without it. */
        padding: 16px 12px;
    }

    .auth-shell-column {
        padding-top: 18px;
        padding-bottom: 12px;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .select-container,
    .login-form {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sort-controls,
    .page-actions,
    .item-action-group {
        align-items: flex-start;
    }

    .page-actions {
        justify-content: flex-start;
    }

    .filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-dropdown,
    .filter-search-group {
        width: 100%;
    }

    .filter-dropdown .btn,
    .filter-search-group .input-group {
        width: 100%;
    }

    .filter-grid-row {
        flex-direction: column;
    }

    .testgroup-card .row {
        gap: 12px 0;
    }

    .search-label {
        min-width: 92px;
    }

    .compact-table thead th,
    .compact-table tbody td {
        white-space: normal;
    }
}