/* Shared visual foundation. Loaded after legacy styles to support gradual migration. */
:root {
  --ux-blue: #175cd3; --ux-navy: #102a43; --ux-muted: #526579;
  --ux-surface: #fff; --ux-bg: #f4f7fb; --ux-line: #dce5ef;
  --ux-radius: 14px; --ux-shadow: 0 6px 24px rgb(16 42 67 / 5%);
  --color-primary: #175cd3; --color-primary-hover: #144eaf;
  --color-primary-light: #edf4ff; --color-sidebar-bg: #102a43;
  --font-headings: 'Plus Jakarta Sans', system-ui, sans-serif;
}
[data-bs-theme="dark"] {
  --ux-surface: #152338; --ux-bg: #0c1726; --ux-line: #2b3d54; --ux-muted: #a9b9cc;
  --color-primary-light: #19365b;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #3984ed; outline-offset: 4px;
}
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10000; padding: 12px 20px; background: #fff; color: #102a43; border: 2px solid #175cd3; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.portal-app { background: var(--ux-bg); }
.portal-app .main-content-layout { min-width: 0; }
.portal-app .topbar-custom { border-bottom: 1px solid var(--ux-line); box-shadow: none; }
.portal-app .card { border-radius: var(--ux-radius); box-shadow: var(--ux-shadow); }
.portal-app .card-header { padding: 18px 22px; border-bottom-color: var(--ux-line); }
.portal-app .card-stat-modern { border: 1px solid var(--ux-line); }
.portal-app .card-stat-modern:hover { transform: translateY(-2px); }
.portal-app .sidebar-link { border-radius: 9px; margin-bottom: 4px; }
.portal-app .sidebar-link.active { box-shadow: none; }
.portal-app .sidebar-submenu { border-left-color: #6397dc; }
.portal-app .btn { --bs-btn-border-radius: 9px; font-weight: 600; }
.portal-app .btn-primary { --bs-btn-bg: #175cd3; --bs-btn-border-color: #175cd3; --bs-btn-hover-bg: #144eaf; --bs-btn-hover-border-color: #144eaf; }
.portal-app .form-control, .portal-app .form-select { min-height: 42px; border-radius: 9px; border-color: var(--ux-line); }
.portal-app textarea.form-control { min-height: 100px; }
.portal-app .table { vertical-align: middle; font-size: .875rem; }
.portal-app .table > :not(caption) > * > * { padding: 14px 16px; }
.portal-app .table thead th { font-size: .75rem; letter-spacing: .025em; font-weight: 700; white-space: nowrap; }
.portal-app .badge { line-height: 1.4; }
.portal-app .modal-content { border-radius: 18px; }
.portal-app .modal-header, .portal-app .modal-footer { border-color: var(--ux-line); padding: 18px 24px; }
.portal-app .welcome-banner-gradient { background: linear-gradient(115deg, #102a43, #175cd3); border-radius: 18px; }
.portal-app .footer-custom { border-top: 1px solid var(--ux-line); }
.workspace-context { display: flex; flex-direction: column; gap: 2px; margin-left: 12px; padding-left: 18px; border-left: 1px solid var(--ux-line); }
.workspace-context small { color: var(--ux-muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.workspace-context strong { font-size: .9rem; color: var(--bs-emphasis-color); }
.public-app.bg-public-dark { background: var(--ux-bg); }
.public-app .auth-card { border: 1px solid var(--ux-line); border-radius: 22px; box-shadow: 0 20px 65px rgb(16 42 67 / 10%); }
.public-app .auth-sidebar { background: linear-gradient(145deg, #102a43, #164a7b); }
.public-app .auth-sidebar::before { opacity: .25; }
.public-app .hero-title-main { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.2; letter-spacing: -.04em; }
.public-app .hero-desc-text { line-height: 1.8; }
.public-app .auth-form-panel { background: var(--ux-surface); }
.public-app .btn-login-submit { background: #175cd3; border-radius: 10px; box-shadow: none; min-height: 48px; }
.public-app .form-input-field { min-height: 48px; border-radius: 10px; }
.public-app .form-label-custom { letter-spacing: .025em; }
.public-app .auth-footer-clean { border-top: 1px solid var(--ux-line); }
.public-app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .public-app select { scroll-margin-top: 100px; }
.form-guidance { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 16px 20px; margin-bottom: 24px; border: 1px solid var(--ux-line); border-radius: 12px; background: var(--ux-surface); color: var(--ux-muted); font-size: .85rem; }
.form-guidance i { color: #175cd3; margin-right: 6px; }
@media (max-width: 767px) {
  .workspace-context { display: none; }
  .portal-app main > .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
  .portal-app .table > :not(caption) > * > * { padding: 12px; }
  .public-app .auth-container { padding: 16px 12px; }
  .public-app .auth-form-panel { padding: 28px 22px; }
  .public-app .auth-card { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .skip-link, .workspace-context { display: none; }
}

.public-app .apply-container { background: var(--ux-surface); border: 1px solid var(--ux-line); box-shadow: 0 18px 60px rgb(16 42 67 / 8%); }
.public-app .apply-card-body { background: var(--ux-surface); color: var(--bs-body-color); }
.public-app .brand-header { border-bottom: 1px solid var(--ux-line); padding-bottom: 24px; margin-bottom: 24px; }
.public-app .form-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.035em; }
.public-app .perk-card { border-color: var(--ux-line); box-shadow: none; border-radius: 12px; }
.public-app .form-group label { font-weight: 600; }
.public-app .form-group input, .public-app .form-group select, .public-app .form-group textarea { border-radius: 9px; }
.public-app .hero-title-main { font-size: clamp(1.8rem, 2.5vw, 2.2rem); }
@media (max-width: 575px) {
 .public-app .apply-card-body { padding: 24px 18px; }
 .public-app .apply-container { margin: 16px auto; }
}

@media (max-width: 767px) {
 .public-app .auth-sidebar { padding: 24px; }
 .public-app .auth-sidebar .hero-title-main { font-size: 1.65rem; margin: 20px 0 0; }
 .public-app .auth-sidebar .hero-desc-text,
 .public-app .auth-sidebar .feature-badges-list,
 .public-app .auth-sidebar .sidebar-bottom-action { display: none; }
}

.portal-app .card-stat-modern > .d-flex { gap: 10px; }
.portal-app .card-stat-modern > .d-flex > div:first-child { min-width: 0; }
.portal-app .card-stat-modern h2 { font-size: clamp(1.6rem, 2.1vw, 2.4rem); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.portal-app .card-stat-modern .stat-icon-bubble-glass { width: 42px; height: 42px; font-size: 1.25rem; }
.enrollment-bars { display: flex; align-items: stretch; justify-content: space-around; gap: 12px; height: 100%; padding-top: 16px; }
.enrollment-bar-column { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; gap: 10px; }
.enrollment-bar-count { font-size: .8rem; font-weight: 700; color: var(--bs-emphasis-color); }
.enrollment-bar-track { height: 100%; width: min(100%, 58px); display: flex; align-items: flex-end; background: var(--color-primary-light); border-radius: 7px; overflow: hidden; }
.enrollment-bar-fill { width: 100%; background: #175cd3; border-radius: 7px 7px 0 0; }
.enrollment-bar-label { font-size: .7rem; color: var(--ux-muted); text-align: center; }
.track-distribution { display: flex; flex-direction: column; justify-content: center; gap: 24px; list-style: none; padding: 12px 0; margin: 0; height: 100%; }
.track-distribution li > div:first-child { display: flex; justify-content: space-between; gap: 16px; font-size: .85rem; margin-bottom: 10px; }
.distribution-track { height: 7px; border-radius: 8px; background: var(--color-primary-light); overflow: hidden; }
.distribution-track span { height: 100%; display: block; background: #175cd3; border-radius: inherit; }

[data-bs-theme="dark"] .portal-app .card-stat-modern h2.text-success { color: #6ee7b7 !important; }
[data-bs-theme="dark"] .portal-app .card-stat-modern h2.text-primary { color: #93c5fd !important; }
[data-bs-theme="dark"] .portal-app .badge.bg-success-subtle { color: #a7f3d0 !important; }
[data-bs-theme="dark"] .portal-app .welcome-banner-gradient .badge { background: #eaf3ff !important; color: #174a7b !important; border-color: #b8d4fa !important; }
[data-bs-theme="dark"] .portal-app .welcome-banner-gradient .badge i { color: inherit !important; }

.portal-app .workspace-hero { background: linear-gradient(115deg, #102a43, #175cd3); box-shadow: none !important; }
.portal-app .workspace-hero > .card-body { padding: 30px !important; }
.record-actions { display: grid; grid-template-columns: repeat(3, max-content); gap: 6px; align-items: center; justify-content: end; }
[data-bs-theme="dark"] .portal-app .workspace-hero .badge { background: #eaf3ff !important; color: #174a7b !important; border-color: #b8d4fa !important; }
[data-bs-theme="dark"] .portal-app .workspace-hero .badge i { color: inherit !important; }
@media (max-width: 575px) {
 .portal-app .workspace-hero > .card-body { padding: 24px !important; }
 .portal-app .topbar-custom > .container-fluid { flex-wrap: nowrap; gap: 8px; }
 .portal-app .mobile-brand-link span.text-truncate { max-width: 105px !important; }
}

@media (max-width: 575px) {
 .portal-app .mobile-brand-link span.text-truncate { display: none; }
 .portal-app .topbar-custom > .container-fluid > .d-flex { flex-shrink: 0; }
}