/* Faculty portal: restrained navy identity and service-specific layouts. */
:root { --navy: #17365f; --navy-deep: #102746; --blue: #365f9b; }
body { color: #23334a; }
#main-content:focus { outline: none; }
h1, h2, h3 { color: #1f3048; letter-spacing: -.025em; }
.sidebar { background: var(--navy-deep); border-right: 0; padding: 28px 18px 20px; overflow-y: auto; }
.brand { padding-bottom: 25px; }
.brand-name { color: #fff; }
.brand-period { color: #91b3e9; }
.brand-mark { background: #315380; color: #e0ecff; border: 1px solid #ffffff12; }
.brand small { color: #bdcce0; }
.sidebar-section-label { color: #8fa6c4; padding-bottom: 12px; }
.sidebar nav { gap: 3px; }
.nav-item { color: #c2d1e5; min-height: 43px; padding: 11px 14px; font-size: 13px; border-radius: 9px; }
.nav-item:hover { background: #ffffff0b; color: white; }
.nav-item.active { background: #2b4b75; color: #fff; }
.sidebar-onboarding { color: #adc2df; border-color: #ffffff15; margin-top: 15px; font-size: 12px; }
.sidebar-onboarding.active { color: white; }
.sidebar .help-button { color: #adc2df; }
.sidebar-footer { padding-top: 25px; }
.sidebar-concept { color: #91a6c2; padding-bottom: 15px; }
.sidebar-concept span { color: #91a6c2; }
.sidebar .profile-button { border-color: #ffffff15; color: #f1f5fc; padding-top: 16px; }
.sidebar .profile-button small { color: #a3b7d1; font-size: 11px; }
.sidebar .profile-button > svg { color: #91a6c2; }
.sidebar .avatar { background: #30517b; color: #dbe7f8; }
.topbar { background: #ffffffb8; }
.hero-card { background: linear-gradient(118deg, #16365f, #244a7d); box-shadow: 0 10px 28px #17365f16; }
.hero-title { color: white; }
.hero-card .hero-count, .hero-card .hero-meta { color: #c4d4eb; }
.hero-time span { color: #adc4e4; }
.hero-teacher { color: #d0dff3; }
.hero-teacher .avatar { background: #42648f; color: #e6effb; }
.hero-type { color: #d2e0f2; background: #ffffff0c; }
.login-story { background: linear-gradient(145deg, #102746, #214b7d); }
.login-story h1, .login-story h2 { color: white; }
.login-story .brand-mark { background: #ffffff12; }
.login-story .brand small, .login-story-content > p, .login-features, .login-disclaimer { color: #c2d4ef; }
.login-form-wrap { width: 100%; max-width: 410px; }
.forgot-password { display: block; width: fit-content; margin: 12px 0 22px auto; padding: 4px 0; color: #345f9c; font-size: 12px; background: none; }
.forgot-password:hover { text-decoration: underline; }
.form-help, .modal-intro { color: #5c6c83; }
.card, .service-card, .campus-feature { border-color: #e1e7ef; }
.section-description, .resource-card p, .slot-info small, .place-card p, .place-details, .step-content p, .message p, .notification-row p { color: #62718a; }
.action-content small, .request-row-main small { color: #66758c; }
.profile-fields dd, .detail-list dd { color: #334b6a; }
.profile-fields dt, .detail-list dt { color: #718098; }
.onboarding-card { background: #ecf2fc; border-color: #dce6f5; }
.onboarding-card h2, .onboarding-card p, .next-step, .progress-caption { color: #3e5879; }
.progress-fill { background: #688ec4; }
.progress-track { background: #dce5f2; }
.campus-feature-art { background: #e7edf7; }
.date-summary { color: #6d7d94; }
.date-summary strong { color: #536b8a; }
.date-summary span { color: #7b89a0; }
.page-footer { color: #78869b; font-size: 10px; }
.badge, .filter-chip, .stat-card p { font-size: 11px; }
.status-green, .status-ready, .status-completed { color: #365d52; background: #edf5f2; }
.status-blue, .status-new { color: #3c6090; background: #edf2fa; }
.status-gray { color: #63738c; background: #eff2f7; }
.status-amber, .status-in_progress { color: #8a642d; background: #fbf3e6; }
.tone-green, .tone-gray, .tone-blue { color: #577cb0; background: #edf2fa; }
.notice strong { color: inherit; }
.notice-change { color: #496486; background: #edf3fc; border-color: #dbe6f4; }
.notice-warning { color: #8d652c; background: #fdf5e9; border-color: #f1dfbf; }
.notice-success { color: #3f6b59; background: #edf5f1; border-color: #dae8e1; }
.text-link { color: #315b93; }
.slot-info p, .profile-cover p, .grade-result > span { color: #6a7a92; }
.place-card .place-status { color: #5f738e; font-size: 12px; }
.stat-card strong { color: #254b7b; }
.stat-card > span { color: #667894; font-size: 12px; }
.btn-primary { background: #244d83; color: white; }
.btn-primary:hover { background: #173c6b; }
.btn-secondary { color: #315780; border-color: #d8e2ef; background: white; }
.btn-secondary:hover { background: #f0f5fd; }
.filter-chip.active { color: #2e568b; background: #e9f0fb; border-color: #ceddf0; }
.today-section-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; }
.today-section-links > a { display: flex; align-items: center; gap: 13px; padding: 20px; border: 1px solid var(--line); background: white; border-radius: 14px; color: #31547f; }
.today-section-links strong { display: block; font-size: 15px; }
.today-section-links small { display: block; margin-top: 5px; color: #738198; font-size: 11px; }
.today-section-links > a > svg:last-child { margin-left: auto; }
.grade-preview-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); padding: 15px 0; font-size: 13px; }
.grade-preview-row:last-child { border-bottom: 0; padding-bottom: 0; }
.grade-preview-row strong { font-weight: 550; line-height: 1.5; }
.grade-preview-row small { display: block; margin-top: 5px; color: #72829a; font-size: 11px; }
.grade-preview-row .badge { flex-shrink: 0; }
.semester-filter { max-width: 340px; min-width: 200px; }
.semester-filter label { display: block; margin-bottom: 7px; font-size: 11px; color: #6a7e99; }
.semester-filter select { width: 100%; border: 1px solid #dce5f0; padding: 11px 13px; border-radius: 10px; background: white; color: #33577f; }
.grades-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: white; }
.grades-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.grades-table th { color: #61728d; font-weight: 550; font-size: 11px; background: #f7f9fc; padding: 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grades-table td { padding: 18px 16px; border-bottom: 1px solid #ebeff5; line-height: 1.6; vertical-align: top; }
.grades-table tr:last-child td { border-bottom: 0; }
.grades-table td:first-child { min-width: 220px; }
.grades-table td strong { display: block; font-size: 13px; font-weight: 550; }
.grades-table td small { display: block; color: #7a879b; font-size: 10px; margin-top: 5px; }
.grades-table .teacher-link { font-size: 11px; margin-top: 4px; }
.housing-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.housing-layout > * { min-width: 0; }
.residence-summary { background: linear-gradient(120deg, #eaf1fc, #f7f9fd); border: 1px solid #dce6f4; }
.residence-summary h2 { font-size: 24px; margin: 14px 0; }
.residence-summary p { color: #59708f; font-size: 13px; }
.invoice-list { display: flex; flex-direction: column; }
.invoice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.invoice-row:last-child { border-bottom: 0; padding-bottom: 0; }
.invoice-meta { flex: 1; min-width: 150px; }
.invoice-meta strong { display: block; font-size: 13px; }
.invoice-meta small, .invoice-meta p { display: block; color: #74829a; font-size: 11px; margin: 6px 0 0; }
.invoice-amount { font-size: 20px; font-weight: 600; color: #294d7c; white-space: nowrap; }
.invoice-row .btn { font-size: 11px; min-height: 38px; }
.housing-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 28px; }
.housing-service-button { text-align: left; background: white; border: 1px solid #dfe7f1; border-radius: 14px; padding: 20px; color: #2c517d; min-height: 116px; }
.housing-service-button:hover { border-color: #93b0d7; background: #f6f9ff; }
.housing-service-button svg { margin-bottom: 14px; width: 23px; height: 23px; }
.housing-service-button strong, .housing-service-button span { display: block; line-height: 1.6; }
.housing-service-button small { display: block; color: #7b8ba4; font-size: 11px; line-height: 1.5; margin-top: 6px; }
.housing-request-row { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 18px 0; }
.housing-request-row:last-child { border-bottom: 0; }
.housing-request-row strong { font-size: 13px; }
.housing-request-row p, .housing-request-row small { font-size: 11px; color: #6b7f9a; line-height: 1.6; margin-top: 5px; }
.housing-request-row .badge { flex-shrink: 0; }
.events-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.event-card { display: flex; flex-direction: column; min-width: 0; position: relative; overflow: hidden; }
.event-card h2, .event-card h3 { font-size: 20px; line-height: 1.4; margin: 16px 0 12px; }
.event-card > p { color: #71829a; font-size: 12px; line-height: 1.75; }
.event-date { color: #446b9e; font-size: 12px; font-weight: 600; }
.event-date strong { font-size: 27px; }
.event-meta { display: grid; gap: 10px; font-size: 11px; color: #6c7f99; margin: 14px 0 20px; }
.event-meta span { display: flex; gap: 8px; align-items: center; }
.event-meta svg { width: 15px; height: 15px; }
.event-footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.event-footer .btn { font-size: 12px; }
.event-footer small { color: #73839c; font-size: 11px; }
.event-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.event-preview { display: block; width: 100%; padding: 18px 0; text-align: left; background: none; border-bottom: 1px solid var(--line); }
.event-preview:first-of-type { padding-top: 0; }
.event-preview .lesson-tag { color: #607fa8; font-size: 10px; }
.event-preview strong { display: block; font-size: 13px; line-height: 1.6; color: #304969; margin: 6px 0; }
.event-preview small { display: block; font-size: 11px; color: #7c8ba2; line-height: 1.5; }
.event-preview .badge { margin-top: 10px; }
.today-events > .text-link { margin-top: 18px; }
.today-grades .card-header { margin-bottom: 6px; }
.today-grades > .text-link { margin-top: 18px; }
.housing-layout + section, .housing-layout + .card, .main-content > .card + .card { margin-top: 24px; }
.housing-layout .housing-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.housing-layout .housing-service-button { padding: 18px 14px; min-height: 90px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 10px; }
.housing-layout .housing-service-button svg { width: 14px; height: 14px; margin: 0; }
.invoice-meta h3 { font-size: 14px; margin: 0; }
.housing-request-row h3 { font-size: 14px; margin-bottom: 8px; }
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.event-lesson .lesson-detail { border-color: #a9bce0; }
.help-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; }
.help-faq details { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.help-faq details:last-child { border: 0; }
.help-faq summary { cursor: pointer; color: #36567d; line-height: 1.6; font-weight: 550; }
.help-faq details p { margin: 12px 0 0; color: #6f8098; font-size: 12px; line-height: 1.8; }
.housing-steps { margin: 0; padding-left: 22px; color: #607590; font-size: 13px; line-height: 1.8; }
.housing-steps li { padding: 7px 0 13px 6px; }
.notification-settings { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 24px; }
.notification-settings h2 { font-size: 18px; margin-bottom: 10px; }
.notification-settings p { color: #677c97; font-size: 12px; line-height: 1.7; margin-bottom: 0; }
.notification-settings > .btn { flex-shrink: 0; }
.payment-total { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; color: #62738c; }
.payment-total strong { font-size: 24px; color: #2d517f; }
.grade-caption { color: #7b89a0; font-size: 11px; line-height: 1.7; margin: 18px 0 0; }
.date-note { font-size: 11px; line-height: 1.6; color: #7487a1; padding-top: 12px; }
.tour-card { position: fixed; right: 24px; bottom: 24px; width: min(370px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 24px; background: white; border: 1px solid #bacce4; border-radius: 18px; box-shadow: 0 15px 65px #1336612b; z-index: 90; }
.tour-card h2, .tour-card h3 { font-size: 19px; margin: 12px 0; }
.tour-card p { font-size: 13px; color: #667b99; line-height: 1.7; }
.tour-progress { font-size: 11px; color: #577bac; display: flex; justify-content: space-between; align-items: center; }
.tour-actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 20px; }
.tour-actions .btn { font-size: 12px; }
.tour-highlight { outline: 3px solid #6e98d6 !important; outline-offset: 4px; transition: outline-color .2s; }
#notice-root { position: fixed; right: 24px; top: 100px; width: min(360px, calc(100vw - 32px)); z-index: 80; }
.welcome-notice { background: white; border: 1px solid #cbd9ec; border-left: 4px solid #4f79b6; border-radius: 14px; padding: 20px; box-shadow: 0 14px 55px #193e6b25; }
.welcome-notice-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.welcome-notice-header h3 { margin: 0; font-size: 15px; }
.welcome-notice-header .icon-button { width: 26px; height: 26px; background: #f4f7fb; border: 0; }
.welcome-notice p { color: #617794; font-size: 12px; line-height: 1.6; margin: 10px 0 15px; }
.welcome-notice-actions { display: flex; justify-content: flex-end; gap: 12px; }
.welcome-notice-actions .btn { min-height: 34px; font-size: 11px; }
.more-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.more-menu-item { display: flex; flex-direction: column; gap: 12px; padding: 19px 15px; border: 1px solid #e0e7f1; border-radius: 13px; color: #3a5c88; font-size: 13px; background: white; text-align: left; }
.more-menu-item svg { width: 23px; height: 23px; }
.more-menu-item:hover { background: #f2f6fd; }
.mobile-nav a, .mobile-nav button { color: #7c8ba0; }
.mobile-nav a.active, .mobile-nav button.active { color: #244e86; }
.modal .notice p { font-size: 12px; }
@media (max-width: 1100px) {
  .housing-layout { grid-template-columns: 1fr; }
  .housing-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events-grid { gap: 16px; }
  .help-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mobile-nav .nav-item.active { background: #eaf1fc; color: #244e86; }
  .mobile-nav .nav-item:hover { background: #f3f6fc; color: #315b93; }
  .today-section-links { gap: 10px; margin-bottom: 18px; }
  .today-section-links > a { padding: 15px 12px; gap: 9px; flex-wrap: wrap; }
  .today-section-links strong { font-size: 13px; }
  .today-section-links small { font-size: 10px; line-height: 1.6; }
  .today-section-links > a > svg:last-child { display: none; }
  .events-grid { grid-template-columns: 1fr; }
  .housing-service-grid { gap: 10px; }
  .housing-service-button { padding: 17px 14px; font-size: 12px; }
  .housing-request-row { gap: 12px; }
  .housing-request-row .badge { max-width: 90px; font-size: 10px; }
  .invoice-row { gap: 12px; }
  .invoice-meta { min-width: 130px; }
  .invoice-amount { font-size: 18px; }
  .grades-table { min-width: 670px; }
  .grades-table th, .grades-table td { padding: 13px; }
  .grades-table td:first-child { min-width: 200px; }
  .semester-filter { max-width: 100%; }
  .event-card h2, .event-card h3 { font-size: 18px; }
  .tour-card { right: 16px; bottom: 88px; padding: 20px; max-height: calc(100dvh - 112px); }
  #notice-root { right: 16px; top: 78px; }
  .welcome-notice { padding: 16px; }
  .grade-preview-row { gap: 10px; font-size: 12px; }
  .grade-preview-row .badge { max-width: 90px; font-size: 10px; }
  .page-footer { font-size: 9px; }
  .notification-settings { align-items: flex-start; flex-direction: column; gap: 16px; }
  .notification-settings > .btn { min-height: 42px; font-size: 11px; }
  .housing-steps { font-size: 12px; }
}
@media (max-width: 600px) {
  .grades-table:has(td[data-label]) { min-width: 0; display: block; }
  .grades-table:has(td[data-label]) thead { display: none; }
  .grades-table:has(td[data-label]) tbody { display: block; }
  .grades-table:has(td[data-label]) tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .grades-table:has(td[data-label]) tr:last-child { border-bottom: 0; }
  .grades-table:has(td[data-label]) td { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; width: 100%; min-width: 0; padding: 8px 0; border: 0; }
  .grades-table:has(td[data-label]) td::before { content: attr(data-label); color: #7e8ba0; font-size: 11px; flex-shrink: 0; max-width: 105px; }
  .grades-table:has(td[data-label]) td:first-child { display: block; padding: 4px 0 12px; margin-bottom: 6px; border-bottom: 1px solid #f0f3f7; }
  .grades-table:has(td[data-label]) td:first-child::before { display: none; }
  .grades-table:has(td[data-label]) td:first-child strong { font-size: 15px; }
  .grades-table:has(td[data-label]) td .badge { max-width: 165px; }
}