/* GBSApply / interview shared visual contract, 105-6.
   Screen-only compatibility layer: keep each page's layout, state and print rules.
   !important is limited to design properties overridden by legacy inline styles. */
:root {
    --ui-font: "Segoe UI", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
    --ui-bg: #f4f7fb;
    --ui-surface: #fff;
    --ui-text: #1e293b;
    --ui-muted: #64748b;
    --ui-border: #dbe3ec;
    --ui-primary: #1e4f82;
    --ui-primary-hover: #173d66;
    --ui-primary-soft: #edf3fa;
    --ui-success: #16734a;
    --ui-success-bg: #edf8f1;
    --ui-success-border: #b9ddc9;
    --ui-warning: #9a5b08;
    --ui-warning-bg: #fff8e7;
    --ui-warning-border: #ebd6aa;
    --ui-danger: #b42334;
    --ui-danger-bg: #fff1f2;
    --ui-danger-border: #ecc3ca;
    --ui-radius: 14px;
    --ui-control-radius: 8px;
    --ui-shadow: 0 3px 14px rgb(30 41 59 / 4%);
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --app-bg: var(--ui-bg);
    --app-card: var(--ui-surface);
    --app-text: var(--ui-text);
    --app-muted: var(--ui-muted);
    --app-border: var(--ui-border);
    --app-primary: var(--ui-primary);
    --app-primary-hover: var(--ui-primary-hover);
    --app-soft: var(--ui-primary-soft);
    --app-radius: var(--ui-radius);
    --app-shadow: var(--ui-shadow);
}

html.gbs-ui { background: var(--ui-bg); color-scheme: light; }
.gbs-ui body {
    margin: 0;
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    font: 400 14px/1.55 var(--ui-font) !important;
    -webkit-font-smoothing: antialiased;
}
.gbs-ui *, .gbs-ui *::before, .gbs-ui *::after { box-sizing: border-box; }
.gbs-ui [hidden] { display: none !important; }
.gbs-ui :is(button, input, select, textarea, table) { font-family: var(--ui-font) !important; }
.gbs-ui :is(h1, .page-title, h1.title) { font-size: 24px !important; font-weight: 750; line-height: 1.35; letter-spacing: -.5px; color: var(--ui-text); }
.gbs-ui :is(h2, .section-title) { font-size: 18px !important; font-weight: 700; line-height: 1.45; letter-spacing: -.25px; color: var(--ui-text); }
.gbs-ui h3 { font-size: 16px !important; font-weight: 700; line-height: 1.5; color: var(--ui-text); }
.gbs-ui h4 { font-size: 14px !important; line-height: 1.5; }
.gbs-ui :is(.page-subtitle, .subtitle, .section-note, .hero p, .interview-head p, .prediction-hero p, .review-top p) {
    color: var(--ui-muted) !important; font-size: 14px !important; line-height: 1.65;
}
.gbs-ui :is(.small-text, .muted, .help, .help-text, .hint, .interview-help, .small, .sub,
    .summary-label, .stat-label, .metric-label, .metric-sub, .student-meta, .history-time,
    .quick-desc, .home-quick-description, .section-head p, .status-summary-label, .info-label) {
    color: var(--ui-muted) !important; font-size: 12px !important; line-height: 1.6;
}
.gbs-ui :is(.stat-number, .summary-value, .metric-number) { font-size: 24px !important; font-weight: 750; font-variant-numeric: tabular-nums; }
.gbs-ui :is(.metric-value, .status-summary-number) { font-variant-numeric: tabular-nums; }
.gbs-ui :is(.body-text, .interview-preline, .question-copy) { line-height: 1.8; overflow-wrap: anywhere; }
.gbs-ui small { font-size: 12px; }
.gbs-ui :is([style*="font-size:9px"], [style*="font-size:10px"], [style*="font-size:11px"],
    [style*="font-size: 9px"], [style*="font-size: 10px"], [style*="font-size: 11px"]) { font-size: 12px !important; }
.gbs-ui a { color: var(--ui-primary); text-underline-offset: 3px; }
.gbs-ui :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--ui-primary) !important;
    outline-offset: 3px;
}

/* Cards share edges and typography; content state backgrounds remain meaningful. */
.gbs-ui :is(.card, .page-card, .section, .box, .title-box, .filter-box, .filter-card,
    .hero, .summary-card, .stat-card, .result-card, .quick-card, .menu-card, .audit-card,
    .student-card, .interview-card, .evidence-card, .counseling-card, .followup-card) {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow);
}
.gbs-ui :is(.hero, .prediction-hero, .title-box) {
    background: var(--ui-surface) !important; color: var(--ui-text) !important;
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow);
}
.gbs-ui :is(.page-card, .section, .interview-card, .card) { padding: 24px; }
.gbs-ui :is(.filter-box, .filter-card) { padding: 16px; }
.gbs-ui :is(.empty, .interview-empty, .good-empty, .slot-empty) {
    color: var(--ui-muted); font-size: 14px; line-height: 1.7; border-radius: var(--ui-radius);
}
.gbs-ui :is(.table-scroll, .scroll, .table-wrap) { border-radius: 10px; }

/* Table text and numbers: preserve values, IDs, units, sort order and colspans. */
.gbs-ui table { font-size: 13px; font-variant-numeric: tabular-nums; }
.gbs-ui table th {
    font-size: 12px !important; font-weight: 700; color: var(--ui-muted) !important;
    background: #f7f9fc; border-color: var(--ui-border); line-height: 1.5; padding: 10px 12px;
}
.gbs-ui table td { font-size: 13px !important; line-height: 1.55; border-color: var(--ui-border); padding: 10px 12px; }
.gbs-ui table :is(td.num, td.number, th.num, th.number) { text-align: right; font-variant-numeric: tabular-nums; }
.gbs-ui table :is(.small-text, .muted) { font-size: 12px !important; }
.gbs-ui .sortable-header { color: var(--ui-muted); text-decoration: none; }
.gbs-ui .sortable-header:hover { color: var(--ui-primary); }

/* Controls use one shape and spacing scale, with compact fields inside tables. */
.gbs-ui label { font-size: 13px; line-height: 1.5; }
.gbs-ui :is(.field, .filter-item, .filter-field) > label { font-weight: 650; color: var(--ui-muted); font-size: 13px !important; }
.gbs-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea) {
    font-size: 14px !important; line-height: 1.5; min-height: 38px;
    border: 1px solid #bdcad8; border-radius: var(--ui-control-radius) !important;
    background: var(--ui-surface); color: var(--ui-text); padding: 8px 10px;
    max-width: 100%; box-shadow: none;
}
.gbs-ui textarea { resize: vertical; }
.gbs-ui :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ui-primary); }
.gbs-ui table :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { font-size: 13px !important; min-height: 34px; padding: 6px 8px; }
.gbs-ui :is(input, select, textarea):focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px rgb(30 79 130 / 10%); }

.gbs-ui :is(button, a.btn, a.btn2, a.button, a.button-link, a.primary, a.secondary, a.btn-primary,
    a.interview-primary, a.interview-secondary, a.interview-small-primary, a.interview-danger-link,
    a.page-action-link, a.quick-link, a.export-button, a.download-button, a.template-button,
    .filter-actions a, .result-workflow-subnav-link, .actual-app-subnav-link) {
    min-height: 36px; padding: 8px 12px; border-radius: var(--ui-control-radius) !important;
    font-size: 13px !important; font-weight: 650; line-height: 1.35;
    text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.gbs-ui button, .gbs-ui a.btn-primary, .gbs-ui a.primary,
.gbs-ui a.interview-primary, .gbs-ui a.interview-small-primary, .gbs-ui a.export-button {
    border: 1px solid var(--ui-primary); background: var(--ui-primary); color: #fff;
}
.gbs-ui button:hover:not(:disabled), .gbs-ui a.btn-primary:hover, .gbs-ui a.primary:hover,
.gbs-ui a.interview-primary:hover, .gbs-ui a.interview-small-primary:hover, .gbs-ui a.export-button:hover {
    background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: #fff;
}
.gbs-ui :is(.btn, .btn2, a.button, .button-link, a.secondary, button.secondary, button.btn,
    .interview-secondary, .page-action-link, .quick-link, .download-button, .template-button,
    .filter-actions a, .add-button, .clear-button, .reset-button, .print-button, .logout-button,
    .outcome-students-close, .outcome-students-more, .outcome-students-retry) {
    border: 1px solid var(--ui-border); background: #fff; color: var(--ui-primary);
}
.gbs-ui :is(.btn, .btn2, a.button, .button-link, a.secondary, button.secondary,
    .interview-secondary, .page-action-link, .quick-link, .download-button, .template-button,
    .filter-actions a, .add-button, .clear-button, .reset-button, .print-button, .logout-button,
    .outcome-students-close, .outcome-students-more, .outcome-students-retry):hover:not(:disabled) {
    background: var(--ui-primary-soft); border-color: #b6c9de; color: var(--ui-primary);
}
.gbs-ui :is(.btn.primary, .btn-primary, .button.primary, .reviews .btn:not(.secondary):not(.danger):not(.return)) {
    background: var(--ui-primary); border-color: var(--ui-primary); color: #fff;
}
.gbs-ui :is(.btn.success, .btn.green, button.success) { color: var(--ui-success); background: var(--ui-success-bg); border-color: var(--ui-success-border); }
.gbs-ui :is(.btn.success, .btn.green, button.success):hover:not(:disabled) { color: var(--ui-success); background: #dff1e7; border-color: var(--ui-success); }
.gbs-ui :is(.btn.danger, .btn-danger, button.danger, .delete-button, .counseling-delete-button, .interview-danger-link) {
    color: var(--ui-danger); background: var(--ui-danger-bg); border: 1px solid var(--ui-danger-border);
}
.gbs-ui :is(.btn.danger, .btn-danger, button.danger, .delete-button, .counseling-delete-button, .interview-danger-link):hover:not(:disabled) {
    color: var(--ui-danger); background: #fce4e8; border-color: var(--ui-danger);
}
.gbs-ui .reviews .btn.return { color: var(--ui-warning); background: var(--ui-warning-bg); border-color: var(--ui-warning-border); }
.gbs-ui .reviews { color: var(--ui-text); }
.gbs-ui .reviews td a { color: var(--ui-primary); }
.gbs-ui .reviews .btn.secondary { color: var(--ui-primary); background: #fff; border-color: var(--ui-border); }
.gbs-ui .reviews .btn.secondary:hover { color: var(--ui-primary); background: var(--ui-primary-soft); border-color: #b6c9de; }
.gbs-ui .reviews .btn.danger { color: var(--ui-danger); background: var(--ui-danger-bg); border-color: var(--ui-danger-border); }
.gbs-ui .reviews .btn.danger:hover { color: var(--ui-danger); background: #fce4e8; border-color: var(--ui-danger); }
.gbs-ui :is(button, input, select, textarea):disabled { opacity: .55; cursor: not-allowed; }
.gbs-ui button:disabled { box-shadow: none; }

/* Badges: the word remains visible, so meaning is not carried by color alone. */
.gbs-ui :is(.badge, .status, .status-badge, .chip, .summary-chip, .rank-badge, .role-badge,
    .evidence-badge, .followup-badge, .evidence-teacher-badge, .evidence-recent-badge,
    .counseling-badge, .interview-admin-badge, .interview-progress-badge, .overall-badge,
    .group-badge, .severity-badge, .role-banner) {
    font-size: 12px !important; font-weight: 650; line-height: 1.5; border-radius: 999px;
    padding: 4px 9px; font-variant-numeric: tabular-nums;
}
/* Color defaults have zero specificity so an unlisted legacy state remains visible. */
:where(.gbs-ui) :where(.badge, .status, .status-badge, .chip, .summary-chip, .rank-badge, .role-badge,
    .evidence-badge, .followup-badge, .evidence-teacher-badge, .evidence-recent-badge,
    .counseling-badge, .interview-admin-badge, .interview-progress-badge, .overall-badge,
    .group-badge, .severity-badge, .role-banner) {
    background: #eef2f6; color: var(--ui-muted);
}
.gbs-ui :is(.badge.done, .badge.ready, .badge.approved, .badge.direct, .badge.REVIEWED, .status.on, .status.done,
    .evidence-badge.verified, .evidence-teacher-badge.verified, .evidence-recent-badge.verified,
    .status-REGISTERED, .status-ACCEPTED, .status-CONFIRMED, .status-PASS, .status-ready,
    .severity-NORMAL, .chip.chip-ok, .chip.evidence-verified, .chip.result-registered, .chip.result-success,
    .badge.cat-registration_pending, .interview-progress-feedback_visible) {
    color: var(--ui-success) !important; background: var(--ui-success-bg) !important; border-color: var(--ui-success-border) !important;
}
.gbs-ui :is(.badge.partial, .badge.high, .badge.supplementary, .badge.pending, .badge.RETURNED,
    .status.change, .followup-badge.high, .evidence-badge.pending,
    .evidence-teacher-badge.pending, .evidence-recent-badge.pending,
    .status-WAITLIST, .status-REVIEW_REQUIRED, .status-WARN, .severity-CHECK,
    .badge.priority-20, .badge.priority-30, .badge.cat-result_missing, .badge.cat-final_pending,
    .chip.evidence-pending, .chip.result-pending, .chip.result-waitlist, .chip.result-stage, .chip.result-submitted,
    .interview-progress-evaluating, .interview-progress-needs_evaluator) {
    color: var(--ui-warning) !important; background: var(--ui-warning-bg) !important; border-color: var(--ui-warning-border) !important;
}
.gbs-ui :is(.badge.urgent, .badge.exclude, .badge.rejected, .badge.warn, .followup-badge.urgent,
    .evidence-badge.revision, .evidence-badge.rejected, .evidence-teacher-badge.problem, .evidence-recent-badge.problem,
    .status-MULTIPLE_REGISTERED, .status-INCONSISTENT, .status-FAIL, .status-blocked, .severity-CRITICAL,
    .badge.priority-10, .badge.cat-review_pending, .chip.chip-no, .chip.evidence-missing, .chip.result-missing, .chip.result-fail) {
    color: var(--ui-danger) !important; background: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important;
}
.gbs-ui :is(.badge.SUBMITTED, .badge.review, .badge.unmapped, .status-SUBMITTED, .status-PENDING, .status-INFO,
    .role-badge.super-badge, .interview-progress-planned, .interview-progress-evaluation_done, .interview-progress-interview_done) {
    color: var(--ui-primary) !important; background: var(--ui-primary-soft) !important; border-color: #c4d4e6 !important;
}
.gbs-ui :is(.status.off, .status-NOT_SUBMITTED, .status-NO_RESULT, .status-COMPLETED, .status-RESULT_SAVED,
    .severity-MISSING, .badge.priority-40, .badge.priority-50, .badge.priority-60, .badge.cat-identity_missing) {
    color: var(--ui-muted) !important; background: #eef2f6 !important; border-color: var(--ui-border) !important;
}
.gbs-ui .chip.active { color: #fff; background: var(--ui-primary); }
.gbs-ui :is(.notice, .message, .message-box, .msg, .interview-message) {
    border-radius: 10px; font-size: 13px !important; line-height: 1.65;
    border-color: var(--ui-border); background: var(--ui-primary-soft); color: var(--ui-primary);
}
.gbs-ui :is(.notice, .message, .message-box, .msg, .interview-message).success {
    color: var(--ui-success) !important; background: var(--ui-success-bg) !important; border-color: var(--ui-success-border) !important;
}
.gbs-ui :is(.notice, .message, .message-box, .msg, .interview-message):is(.warning, .required),
.gbs-ui :is(.warning, .confirm-box) {
    color: var(--ui-warning); background: var(--ui-warning-bg); border-color: var(--ui-warning-border);
}
.gbs-ui :is(.notice, .message, .message-box, .msg, .interview-message).error {
    color: var(--ui-danger) !important; background: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important;
}
.gbs-ui :is(.error, .errorlist, .first-stage-final-conflict) { color: var(--ui-danger) !important; }
.gbs-ui .first-stage-final-note { color: var(--ui-muted); font-size: 12px; }
.gbs-ui .interview-video-saved-recordings-card { background: var(--ui-success-bg); border-color: var(--ui-success-border); }

/* One navigation treatment for both full-page and standalone templates. */
.gbs-ui .common-nav { background: rgb(255 255 255 / 97%); border-bottom: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); }
.gbs-ui .common-nav-inner { max-width: 1560px; padding: 10px 20px; gap: 12px; }
.gbs-ui .common-nav-brand { font-size: 13px; color: var(--ui-text); }
.gbs-ui .common-nav :is(a, button, .nav-menu > summary) {
    min-height: 36px; border-radius: 8px !important; font-size: 13px !important; font-weight: 650;
    background: transparent; border: 1px solid transparent; color: var(--ui-muted); padding: 8px 10px;
}
.gbs-ui .common-nav :is(a, button, .nav-menu > summary):hover { background: var(--ui-primary-soft); border-color: transparent; color: var(--ui-primary); }
.gbs-ui .common-nav :is(a[aria-current], .nav-menu.is-current > summary) { background: var(--ui-primary-soft); color: var(--ui-primary); border-color: #d7e4f1; }
.gbs-ui .common-nav a.nav-home[aria-current="page"] { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); }
.gbs-ui .common-nav .nav-menu-panel { border-color: var(--ui-border); border-radius: 12px; box-shadow: 0 12px 32px rgb(30 41 59 / 12%); }
.gbs-ui .common-nav .nav-menu-panel a { min-height: 38px; }
.gbs-ui .common-nav :is(.nav-account, .common-nav-left > button) { border-color: var(--ui-border); background: #fff; }
.gbs-ui .common-nav button.nav-logout { color: var(--ui-danger); border-color: var(--ui-border); background: #fff; }
.gbs-ui .common-nav button.nav-logout:hover { color: var(--ui-danger); background: var(--ui-danger-bg); border-color: var(--ui-danger-border); }
.gbs-ui .common-nav .nav-role { font-size: 12px; color: var(--ui-muted); }
.gbs-ui :is(.actual-app-subnav, .result-workflow-subnav) { border-color: var(--ui-border); border-radius: 12px; background: #eef3f8; padding: 8px; gap: 6px; }
.gbs-ui :is(.actual-app-subnav-link, .result-workflow-subnav-link) { color: var(--ui-muted); border-color: transparent; background: transparent; }
.gbs-ui :is(.actual-app-subnav-link, .result-workflow-subnav-link):hover { color: var(--ui-primary); background: #fff; }
.gbs-ui :is(.actual-app-subnav-link, .result-workflow-subnav-link).active { color: #fff; background: var(--ui-primary); border-color: var(--ui-primary); }
.gbs-ui .result-pagination :is(a, .current-page) { font-size: 13px; border-radius: 8px; }
.gbs-ui .result-pagination .current-page { background: var(--ui-primary); border-color: var(--ui-primary); }

/* Deliberately light data controls; never turn a clickable count into a primary action. */
.gbs-ui .outcome-count { background: transparent; border: 1px solid transparent; color: var(--ui-primary); padding: 5px 7px; font-variant-numeric: tabular-nums; }
.gbs-ui .outcome-count:hover:not(:disabled) { background: var(--ui-primary-soft); border-color: #c4d4e6; color: var(--ui-primary); }
.gbs-ui .outcome-count.is-selected { color: #fff; background: var(--ui-primary); border-color: var(--ui-primary); }
.gbs-ui .outcome-count.is-selected:hover:not(:disabled) { color: #fff; background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); }
.gbs-ui .outcome-students-panel { border-color: var(--ui-border); }
.gbs-ui .home-quick-link { border-color: var(--ui-border); border-radius: 12px; color: var(--ui-text); }
.gbs-ui .home-quick-icon { color: var(--ui-primary); background: var(--ui-primary-soft); border-color: #d4e1ee; }
.gbs-ui .home-menu-group { border-color: var(--ui-border); border-radius: 12px; }
.gbs-ui .home-menu-group > summary { font-size: 14px; }

/* Auth pages share the same surface, type and input contract without changing authentication. */
.gbs-ui .auth-page { padding: 56px 16px; }
.gbs-ui .auth-page :is(.login-box, .auth-box) {
    width: min(440px, 100%); margin: 0 auto; padding: 32px;
    background: #fff; border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow);
}
.gbs-ui .auth-page .wrap { width: min(520px, 100%); margin: 0 auto; }
.gbs-ui .auth-page label { display: block; font-weight: 650; margin: 16px 0 6px; }
.gbs-ui .auth-page input { width: 100%; }
.gbs-ui .auth-page .subtitle { margin-bottom: 24px; }
.gbs-ui .auth-page .login-box button { width: 100%; margin-top: 24px; min-height: 40px; }

@media (max-width: 700px) {
    .gbs-ui :is(h1, .page-title, h1.title) { font-size: 22px !important; }
    .gbs-ui :is(.card, .page-card, .section, .interview-card) { padding: 16px; }
    .gbs-ui table :is(th, td) { padding: 9px 10px; }
    .gbs-ui .common-nav-inner { padding: 8px 12px; }
    .gbs-ui .auth-page { padding: 32px 16px; }
    .gbs-ui .auth-page :is(.login-box, .auth-box) { padding: 24px; }
    .gbs-ui .common-nav :is(a, button, .nav-menu > summary) { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .gbs-ui *, .gbs-ui *::before, .gbs-ui *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}