/* /pages — quiz-builder palette + dark header (requires quiz-app-tokens + quiz-app-shell) */

/* Page header typography: quiz-app-shell.css (shared with /quizzes) */

/* Segmented tabs: quiz-app-segmented-tabs.css + .qb-view-tab */

body.quiz-app .pages-tab-content {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Pages tab: single surface — folder column | toolbar + table */
body.quiz-app #pagesTab .pages-content-layout.pages-tab-panel {
    position: relative;
    gap: 0;
    align-items: stretch;
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius);
    box-shadow: var(--qb-shadow-group);
}

body.quiz-app #pagesTab .pages-tab-panel .folder-sidebar-shell--collapsed {
    border: none;
    background: transparent;
    box-shadow: none;
}

body.quiz-app #pagesTab .pages-tab-panel .folder-sidebar-shell--collapsed ~ .pages-main-content {
    border-radius: var(--qb-radius);
}

body.quiz-app #pagesTab .pages-tab-panel .folder-sidebar-shell {
    background: var(--qb-surface);
    border-right: 1px solid var(--qb-border);
    border-radius: var(--qb-radius) 0 0 var(--qb-radius);
}

body.quiz-app .app-list-toolbar--filters-row .pages-toolbar-primary-actions {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

body.quiz-app .pages-show-folders-btn {
    align-items: center;
    min-height: 36px;
}

body.quiz-app #pagesTab .pages-tab-panel .folder-sidebar {
    border: none;
    padding: 16px 18px;
    background: var(--qb-surface);
    border-radius: 0;
    align-self: stretch;
}

body.quiz-app #pagesTab .pages-tab-panel .pages-main-content {
    flex: 1;
    min-width: 0;
    border-radius: 0 var(--qb-radius) var(--qb-radius) 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.quiz-app #pagesTab .pages-tab-panel .pages-main-content .app-list-shell {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    min-height: 0;
}

@media (max-width: 768px) {
    body.quiz-app #pagesTab .pages-tab-panel .folder-sidebar-shell {
        border-right: none;
        border-bottom: 1px solid var(--qb-border);
        border-radius: var(--qb-radius) var(--qb-radius) 0 0;
    }

    body.quiz-app #pagesTab .pages-tab-panel .pages-main-content {
        border-radius: 0 0 var(--qb-radius) var(--qb-radius);
    }
}

/* Analytics tab — white card (same pattern as /quizzes submissions + quiz analytics) */
body.quiz-app #analyticsTab .quiz-tab-panel-shell {
    display: flex;
    flex-direction: column;
    background: var(--qb-surface);
    border-radius: var(--qb-radius-sm);
    box-shadow: var(--qb-shadow-group);
    border: 1px solid var(--qb-border);
    padding: 24px 28px 28px;
    max-width: 100%;
    min-height: min(720px, calc(100vh - 200px));
    box-sizing: border-box;
    overflow: hidden;
}

body.quiz-app #analyticsTab .quiz-tab-panel-shell .loading-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

body.quiz-app #analyticsTab #analyticsContent {
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    overflow: auto;
}

/* Pages list toolbar — match /quizzes .quizzes-filters (Create + controls row) */
body.quiz-app .pages-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    background: transparent;
    border-radius: 0;
}

body.quiz-app .app-list-toolbar .pages-filters {
    margin-bottom: 0;
}

body.quiz-app .pages-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.quiz-app .pages-filters .filter-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--qb-text-secondary);
}

body.quiz-app .pages-filters .filter-select,
body.quiz-app .pages-filters .filter-input {
    padding: 8px 12px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--qb-surface);
    color: var(--qb-text);
    min-width: 160px;
}

body.quiz-app .pages-filters .filter-input {
    min-width: 240px;
}

body.quiz-app .pages-filters .filter-select:focus,
body.quiz-app .pages-filters .filter-input:focus {
    outline: none;
    border-color: var(--qb-h-primary-border-mid);
    box-shadow: var(--ui-focus-ring);
}

@media (max-width: 768px) {
    body.quiz-app .app-list-toolbar--filters-row .pages-filters {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    body.quiz-app .pages-filters {
        flex-direction: column;
    }

    body.quiz-app .app-list-toolbar--filters-row .pages-filters {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Status filter segments — mirrors quizzes.css; /pages does not load quizzes.css */
body.quiz-app .quizzes-status-segments {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

body.quiz-app .quizzes-status-seg {
    padding: 8px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-sm);
    background: var(--qb-surface);
    color: var(--qb-text-secondary);
    cursor: pointer;
    line-height: 1.2;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.quiz-app .quizzes-status-seg:hover {
    border-color: var(--qb-border-hover);
    color: var(--qb-text);
}

body.quiz-app .quizzes-status-seg.active {
    border-color: var(--qb-h-primary-border-mid);
    background: var(--lmpb-tab-active-bg);
    font-weight: 600;
    color: var(--lmpb-tab-active-text);
}

body.quiz-app .quizzes-status-seg:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

body.quiz-app .app-list-toolbar--filters-row:has(.quizzes-status-segments) {
    align-items: center;
}

body.quiz-app .app-list-toolbar--filters-row:has(.quizzes-status-segments) .pages-filters {
    align-items: center;
}

body.quiz-app .app-list-shell .pages-list-container {
    background: var(--qb-surface);
    border: none;
    border-radius: 0;
}

body.quiz-app .pages-list-container {
    background: var(--qb-surface);
    border-color: var(--qb-border);
}

body.quiz-app .pages-table-container {
    background: var(--qb-surface);
    border-color: var(--qb-border);
}

/* Table sits inside rounded .app-list-shell — no second card radius or inner border */
body.quiz-app .app-list-shell .pages-table-container {
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

body.quiz-app #pagesTab .pages-tab-panel .pages-list-container {
    border-radius: 0;
}

body.quiz-app #pagesTab .pages-tab-panel .pages-table-container {
    border-radius: 0;
    border: none;
    box-shadow: none;
}

body.quiz-app .pages-table thead {
    background: var(--qb-surface-elevated);
    border-bottom-color: var(--qb-border);
}

body.quiz-app .pages-table th {
    color: var(--qb-text-secondary);
    border-bottom-color: var(--qb-border);
}

body.quiz-app .pages-table tbody tr {
    border-bottom-color: var(--qb-line-hair);
}

body.quiz-app .pages-table tbody tr:hover {
    background: var(--qb-surface-muted);
    box-shadow: none;
}

body.quiz-app .loading-state .spinner {
    border-color: var(--qb-border);
    border-top-color: var(--qb-primary);
}

body.quiz-app .empty-state svg {
    color: var(--qb-text-tertiary);
}

body.quiz-app .empty-state h3 {
    color: var(--qb-text-heading);
}

body.quiz-app .empty-state p {
    color: var(--qb-text-secondary);
}

/* Domains tab — one shell: action row + list/table (no inner bordered card, no toolbar strip) */
body.quiz-app #domainsTab .domains-tab-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 10px;
    flex-shrink: 0;
}

body.quiz-app #domainsTab .domains-table-container {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.quiz-app #domainsTab .domains-container > .loading-state,
body.quiz-app #domainsTab .domains-container > .empty-state {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 20px;
}

/* Domains */
body.quiz-app .domains-table-container {
    border-color: var(--qb-border);
    background: var(--qb-surface);
}

body.quiz-app .domains-table thead {
    background: var(--qb-surface-elevated);
    border-bottom-color: var(--qb-border);
}

body.quiz-app .domains-table th {
    color: var(--qb-text-secondary);
    border-bottom-color: var(--qb-border);
}

body.quiz-app .domains-table tbody tr {
    border-bottom-color: var(--qb-line-hair);
}

body.quiz-app .domains-table tbody tr:hover {
    background: var(--qb-surface-muted);
    box-shadow: none;
}

body.quiz-app .domains-table td {
    color: var(--qb-text);
}

body.quiz-app .domain-name {
    color: var(--qb-text-heading);
}

body.quiz-app .domain-pages-count {
    color: var(--qb-text-secondary);
}

body.quiz-app .domain-details-row {
    background: var(--qb-surface-muted);
}

body.quiz-app .domain-row[data-expanded="true"] {
    background: var(--qb-surface-muted);
}

body.quiz-app .domain-card {
    background: var(--qb-surface);
    border-color: var(--qb-border);
}

body.quiz-app .domain-card:hover {
    border-color: var(--qb-border-hover);
}

body.quiz-app .domain-card-header {
    border-bottom-color: var(--qb-border);
}

body.quiz-app .domain-card-header:hover {
    background: var(--qb-surface-muted);
}

body.quiz-app .domain-card-toggle {
    color: var(--qb-text-secondary);
}

body.quiz-app .domain-details {
    border-top-color: var(--qb-border);
    background-color: var(--qb-surface-muted);
}

body.quiz-app .dns-instructions-section h4 {
    color: var(--qb-text-heading);
}

body.quiz-app .dns-instructions-section h5 {
    color: var(--qb-text);
}

body.quiz-app .dns-instructions-intro {
    color: var(--qb-text-secondary);
}

body.quiz-app .dns-record-box {
    background: var(--qb-surface);
    border-color: var(--qb-border);
}

body.quiz-app .dns-record-box code.dns-value {
    background: var(--qb-surface-muted);
    color: var(--qb-text);
}

body.quiz-app .domain-card-actions {
    border-top-color: var(--qb-border);
}

body.quiz-app .domain-card-actions .btn-secondary {
    background: var(--qb-surface-muted);
    border-color: var(--qb-border);
    color: var(--qb-text);
}

body.quiz-app .domain-card-actions .btn-secondary:hover {
    background: var(--qb-surface-elevated);
    border-color: var(--qb-border-hover);
}

body.quiz-app .btn-small {
    background: var(--qb-primary);
    color: var(--ui-color-primary-contrast);
}

body.quiz-app .btn-small:hover {
    background: var(--qb-primary-hover);
}

body.quiz-app .spinner-small {
    border-color: var(--qb-border);
    border-top-color: var(--qb-primary);
}

body.quiz-app .loading-state-small {
    color: var(--qb-text-secondary);
}

/* Folder sidebar */
body.quiz-app .folder-sidebar-header h3 {
    color: var(--qb-text-heading);
}

body.quiz-app .btn-icon {
    border-color: var(--qb-border);
    color: var(--qb-text-secondary);
}

body.quiz-app .btn-icon:hover {
    background: var(--qb-surface-muted);
    border-color: var(--qb-border-hover);
    color: var(--qb-text);
}

body.quiz-app .folder-item {
    color: var(--qb-text);
}

body.quiz-app .folder-item:hover {
    background: var(--qb-surface-muted);
}

body.quiz-app .folder-item.active {
    background: var(--qb-primary-soft);
    color: var(--qb-brand-deep);
}

body.quiz-app .folder-item.active .folder-count {
    background: var(--lmpb-tab-active-bg);
    color: var(--qb-brand-deep);
}

body.quiz-app .folder-count {
    color: var(--qb-text-tertiary);
    background: var(--qb-surface-muted);
}

body.quiz-app .folder-toggle {
    color: var(--qb-text-secondary);
}

body.quiz-app .btn-icon-small {
    color: var(--qb-text-secondary);
}

body.quiz-app .btn-icon-small:hover {
    background: var(--qb-surface-muted);
    color: var(--qb-text);
}

body.quiz-app .move-folder-list {
    border-color: var(--qb-border);
}

body.quiz-app .move-folder-option:hover {
    background: var(--qb-surface-muted);
}

body.quiz-app .move-folder-option {
    color: var(--qb-text);
}

/* Analytics tab */
body.quiz-app .analytics-card {
    background: var(--qb-surface-muted);
    border-color: var(--qb-border);
}

body.quiz-app .analytics-card-label {
    color: var(--qb-text-secondary);
}

body.quiz-app .analytics-card-value {
    color: var(--qb-text-heading);
}

body.quiz-app .analytics-table thead {
    background: var(--qb-surface-muted);
    border-bottom-color: var(--qb-border);
}

body.quiz-app .analytics-table th {
    color: var(--qb-text-secondary);
}

body.quiz-app .visitor-sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

body.quiz-app .visitor-sortable-th:hover {
    color: var(--qb-text-heading);
}

body.quiz-app .analytics-table td {
    border-bottom-color: var(--qb-border);
    color: var(--qb-text-secondary);
}

body.quiz-app .analytics-table tbody tr:hover {
    background: var(--qb-surface-muted);
}

body.quiz-app .analytics-list-item {
    border-bottom-color: var(--qb-border);
}

body.quiz-app .analytics-list-label {
    color: var(--qb-text);
}

body.quiz-app .analytics-list-value {
    color: var(--qb-text-secondary);
}

body.quiz-app .analytics-trim-controls {
    background: var(--qb-surface-muted);
    border-color: var(--qb-border);
}

body.quiz-app .btn-reset-analytics,
body.quiz-app .btn-refresh-analytics {
    background: var(--qb-surface);
    border-color: var(--qb-border);
    color: var(--qb-text-secondary);
}

body.quiz-app .btn-refresh-analytics:hover:not(:disabled) {
    border-color: var(--qb-h-primary-border-mid);
    color: var(--qb-primary);
}

body.quiz-app .analytics-bot-traffic-details {
    border-color: var(--qb-border);
    background: var(--qb-surface);
}

body.quiz-app .section-title {
    color: var(--qb-text-heading);
}

body.quiz-app .guides-section .form-input {
    border-color: var(--qb-border);
}

body.quiz-app .guides-section .form-input:focus {
    border-color: var(--qb-h-primary-border-mid);
    box-shadow: var(--ui-focus-ring);
}

body.quiz-app .guide-item {
    border-color: var(--qb-border);
}

body.quiz-app .guide-item-title {
    color: var(--qb-text-heading);
}

body.quiz-app .guide-item-meta {
    color: var(--qb-text-secondary);
}

body.quiz-app .guide-item:hover {
    background: var(--qb-surface-muted);
    border-color: var(--qb-h-primary-border-mid);
}

body.quiz-app .modal-divider::before,
body.quiz-app .modal-divider::after {
    border-bottom-color: var(--qb-border);
}

body.quiz-app .modal-description {
    color: var(--qb-text-secondary);
}

body.quiz-app .auto-generate-container {
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    box-shadow: var(--qb-shadow-group);
}

body.quiz-app .modal-header h2 {
    color: var(--qb-text-heading);
}

body.quiz-app .form-group label {
    color: var(--qb-text);
}

body.quiz-app .form-help {
    color: var(--qb-text-secondary);
}

/* Domain / page status row (pages table) */
body.quiz-app .status-tab.active {
    color: var(--qb-primary);
    border-bottom-color: var(--qb-primary);
}

body.quiz-app .status-tab:hover {
    color: var(--qb-text);
    background: var(--qb-surface-muted);
}

body.quiz-app .page-url-link {
    color: var(--qb-primary);
}

body.quiz-app .page-table-description {
    color: var(--qb-text-secondary);
}

body.quiz-app .page-title-button:focus-visible {
    outline-color: var(--qb-h-primary-border-mid);
}

/* /okrs — list page (same shell stack as /projects: segmented-tabs + app-list-shell) */
body.quiz-app .okrs-page .projects-toolbar-heading {
    flex-shrink: 0;
}

body.quiz-app .okrs-page .projects-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--qb-text);
    margin: 0;
    letter-spacing: -0.01em;
}

body.quiz-app .okrs-page .app-list-toolbar--filters-row .okr-list-actions {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: flex-end;
    min-width: 0;
    margin: 0;
    padding: 0;
}

body.quiz-app .okrs-page .okr-new-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    justify-content: flex-end;
    width: 100%;
}

body.quiz-app .okrs-page .okr-new-row input[type="text"] {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 420px;
    padding: 10px 12px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-sm);
    background: var(--qb-surface);
    color: var(--qb-text);
    font-size: 14px;
    font-family: inherit;
}

body.quiz-app .okrs-page .okr-new-row input[type="text"]:focus {
    outline: none;
    border-color: var(--qb-h-primary-border-mid);
    box-shadow: var(--ui-focus-ring);
}

body.quiz-app .okrs-page .okr-new-share-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--qb-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

body.quiz-app .okrs-page .okr-new-row input[type="checkbox"] {
    width: auto;
    accent-color: var(--qb-primary);
}

body.quiz-app .okrs-page .okr-new-row button {
    padding: 10px 18px;
    border-radius: var(--qb-radius-sm);
    border: none;
    background: var(--qb-brand-primary);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s ease;
}

body.quiz-app .okrs-page .okr-new-row button:hover {
    filter: brightness(1.08);
}

body.quiz-app .okrs-page .okr-new-row button:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

/* Visibility — same pill language as /pages shared badge + neutral private */
body.quiz-app .okrs-page .shared-badge {
    margin-left: 0;
}

body.quiz-app .okrs-page .okr-visibility-private {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--qb-border);
    background: var(--qb-surface-muted);
    color: var(--qb-text-secondary);
    white-space: nowrap;
}

body.quiz-app .okrs-page .pages-list-container {
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

body.quiz-app .okrs-page .page-actions-cell {
    width: auto;
    min-width: 104px;
}

body.quiz-app .okrs-page .pages-list-container > .loading-state,
body.quiz-app .okrs-page .pages-list-container > .empty-state {
    flex: 1 1 auto;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.quiz-app .okrs-page .pages-table td {
    color: var(--qb-text);
}

body.quiz-app .okrs-page .pages-table strong {
    color: var(--qb-text-heading);
    font-weight: 600;
}

@media (max-width: 720px) {
    body.quiz-app .okrs-page .app-list-toolbar--filters-row .okr-list-actions {
        width: 100%;
        justify-content: stretch;
    }

    body.quiz-app .okrs-page .okr-new-row {
        justify-content: stretch;
    }

    body.quiz-app .okrs-page .okr-new-row input[type="text"] {
        max-width: none;
    }
}