/* Teacherflow reference branding / neon dark dashboard (Oct 2026) Keeps the existing layout and business interactions unchanged. */ :root{--ref-navy:#0C244D;--ref-cyan:#00FFFF;--ref-bg:#090B18;--ref-panel:#10142A;--ref-purple:#9900FF;--ref-green:#33CC33;--ref-yellow:#FFFF00;--ref-gold:#FFBE0B;--ref-ink:#FFFFFF;--ref-muted:#AABBCC} .tf-ref-lockup{display:inline-flex;align-items:center;gap:8px;max-width:100%;line-height:1;white-space:nowrap;vertical-align:middle;text-align:left!important} .tf-ref-lockup>img{width:36px;height:36px;object-fit:contain;flex:0 0 auto;background:transparent;filter:none!important;border:0!important;border-radius:0!important;box-shadow:none!important} .tf-ref-word{font-family:Inter,'IBM Plex Sans',Arial,Helvetica,sans-serif;font-weight:800;font-size:clamp(16px,1.6vw,22px);letter-spacing:-.75px;color:var(--ref-navy);display:inline-flex!important;align-items:baseline;line-height:1.15} .tf-ref-teacher{color:#0C244D}.tf-ref-flow{color:#ffba08} .tf-ref-on-dark .tf-ref-teacher{color:#f4f9ff}.tf-ref-on-dark .tf-ref-flow{color:#ffcc28} .tf-ref-logo-center{display:flex;justify-content:center;align-items:center} /* Small variants where header space is constrained. */ body.tf-auth-page .auth-brand-panel>.tf-ref-lockup{align-self:flex-start;margin-bottom:auto;z-index:2;position:relative} .tf-ref-on-dark>img{background:rgba(240,248,255,.09)!important;border-radius:9px!important;padding:3px!important} body.tf-auth-page .auth-brand-panel>.tf-ref-lockup .tf-ref-word{font-size:clamp(19px,2.35vw,28px)} body.tf-auth-page .auth-brand-panel>.tf-ref-lockup>img{width:52px;height:52px} body.tf-auth-page .brand .tf-ref-lockup{margin:0 auto 0 0} body.tf-auth-page .brand{justify-content:flex-start!important;text-align:left!important} body.tf-auth-page .card>.tf-ref-logo-head{margin:0 0 18px;text-align:left!important} body.tf-auth-page .card>.tf-ref-logo-head .tf-ref-word{font-size:20px} body.tf-admin-page .brand .tf-ref-lockup{justify-content:flex-start} body.tf-admin-page .top .brand img{object-fit:contain} body.tf-maintenance-page .maintenance>.tf-ref-lockup{display:flex!important;width:max-content!important;max-width:100%!important;margin:0 auto 20px!important;justify-content:center!important} body.tf-maintenance-page .maintenance>.status{display:flex!important;width:max-content!important;max-width:100%!important;margin:0 auto 18px!important;justify-content:center!important} body.tf-maintenance-page .tf-ref-word{font-size:23px} body.tf-share-page .tf-ref-lockup{margin-bottom:10px} body.tf-dashboard-page .tf-sidebar-brand-viewport .tf-ref-lockup{display:inline-flex!important;max-width:100%;overflow:visible} body.tf-dashboard-page .tf-dashboard-brand-above .tf-ref-lockup{display:inline-flex!important;max-width:100%;align-items:center} /* Respect existing themed navigation collapse behavior. */ body.tf-dashboard-page .tf-sidebar-brand-viewport img{object-fit:contain} body.tf-dashboard-page .app.sidebar-collapsed .tf-sidebar-brand-viewport .tf-ref-word{display:none!important} body.tf-dashboard-page:not(.dark-mode) .tf-sidebar-brand-viewport .tf-ref-teacher,body.tf-dashboard-page:not(.dark-mode) .tf-dashboard-brand-above .tf-ref-teacher{color:#0C244D!important} body.tf-dashboard-page:not(.dark-mode) .tf-sidebar-brand-viewport .tf-ref-flow,body.tf-dashboard-page:not(.dark-mode) .tf-dashboard-brand-above .tf-ref-flow{color:#EEAD00!important} /* Selectable bright reference palette; default dark for newly created accounts. Existing explicit DAY preference remains unmodified. */ @media screen{ body.tf-dashboard-page.dark-mode{ --bg:#090B18!important;--panel:#10142A!important;--ink:#FFFFFF!important;--muted:#AABBCC!important;--line:#29324D!important; --tf-canvas:#090B18!important;--tf-surface:#10142A!important;--tf-surface-2:#151B35!important;--tf-line:#303852!important;--tf-line-strong:#3A4560!important; --tf-ink:#FFFFFF!important;--tf-muted:#AABBCC!important; --tf-green:#00D9DB!important;--tf-green-deep:#06BBC8!important; color:#FFFFFF!important;background:radial-gradient(circle at 99% 6%,rgba(115,41,170,.17),transparent 28%),radial-gradient(circle at 32% 89%,rgba(0,255,255,.05),transparent 32%),#090B18!important;color-scheme:dark; } /* Strongest conflict overrides for old HTML-specific skins. */ html body.tf-dashboard-page.dark-mode .sidebar .tf-side-item.active, html body.tf-dashboard-page.dark-mode .sidebar button.tf-side-item.active, html body.tf-dashboard-page.dark-mode .app:not(.sidebar-collapsed) .sidebar .nav button.tf-side-item.active, html body.tf-dashboard-page.dark-mode .app:not(.sidebar-collapsed) .sidebar .nav button.active{background:#00FFFF!important;color:#081327!important;border:1px solid #00FFFF!important;box-shadow:0 0 0 1px rgba(0,255,255,.08)!important} html body.tf-dashboard-page.dark-mode .sidebar .tf-side-item.active :is(.nav-icon,.nav-label,svg), html body.tf-dashboard-page.dark-mode .app:not(.sidebar-collapsed) .sidebar .nav button.tf-side-item.active :is(.nav-icon,.nav-label,svg){color:#081327!important;stroke:#081327!important;background:transparent!important} html body.tf-dashboard-page.dark-mode #dashboard .tf-dashboard-brand-above{background:#090B18!important;border-color:transparent!important;box-shadow:none!important} html body.tf-dashboard-page.dark-mode #dashboard .dashboard-topbar{background:#090B18!important;border-color:transparent!important;box-shadow:none!important} html body.tf-dashboard-page.dark-mode #dashboard .tf-dashboard-brand-above .tf-ref-teacher, html body.tf-dashboard-page.dark-mode .sidebar .tf-ref-teacher{color:#F5F9FF!important} html body.tf-dashboard-page.dark-mode #dashboard .tf-dashboard-brand-above .tf-ref-flow, html body.tf-dashboard-page.dark-mode .sidebar .tf-ref-flow{color:#FFCA18!important} html body.tf-dashboard-page.dark-mode #dashboard .tf-hero-clean{background:#151B33!important} html body.tf-dashboard-page.dark-mode #dashboard .tf-hero-clean .tf-hero-art{background:transparent!important} html body.tf-dashboard-page.dark-mode #dashboard .upcoming-timer, html body.tf-dashboard-page.dark-mode #dashboard .upcoming-strip, html body.tf-dashboard-page.dark-mode #dashboard .upcoming-banner, html body.tf-dashboard-page.dark-mode #dashboard .dashboard-upcoming-strip{background:#14192E!important;border-color:#35405F!important;color:#FFFFFF!important} html body.tf-dashboard-page.dark-mode #dashboard .cards .card:before, html body.tf-dashboard-page.dark-mode #dashboard .cards .card:after{background:rgba(130,163,219,.045)!important;opacity:.55!important;border-color:transparent!important} html body.tf-dashboard-page.dark-mode #dashboard>.section, html body.tf-dashboard-page.dark-mode #dashboard .calendar-viewbar, html body.tf-dashboard-page.dark-mode #dashboard .calendar-toolbar, html body.tf-dashboard-page.dark-mode #dashboard .calendar-shell{background:#10142A!important;border-color:#313A56!important;color:#FFFFFF!important;box-shadow:none!important} html body.tf-dashboard-page.dark-mode #dashboard .toolbar, html body.tf-dashboard-page.dark-mode #dashboard .toolbar button{background:#171F39!important;border-color:#34415E!important;color:#DFEEFF!important} html body.tf-dashboard-page.dark-mode #dashboard .calendar-view-btn{background:#171F39!important;color:#C4D6E8!important;border-color:#34415E!important} html body.tf-dashboard-page.dark-mode #dashboard .calendar-view-btn.active{background:#00E6ED!important;color:#06162A!important;border-color:#00E6ED!important} body.tf-dashboard-page.dark-mode .app, body.tf-dashboard-page.dark-mode .main{background:transparent!important;color:#FFF!important} body.tf-dashboard-page.dark-mode .sidebar{ background:linear-gradient(180deg,#111B34 0%,#090B18 100%)!important;border-right:1px solid #28314C!important;box-shadow:none!important;color:#FFF!important } body.tf-dashboard-page.dark-mode .sidebar .tf-sidebar-header{background:transparent!important} body.tf-dashboard-page.dark-mode .tf-sidebar-brand{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important} body.tf-dashboard-page.dark-mode .tf-sidebar-brand-viewport{min-width:0;overflow:visible!important;width:100%!important;max-width:100%!important;display:flex!important;align-items:center!important;justify-content:flex-start!important} body.tf-dashboard-page.dark-mode .tf-sidebar-brand .tf-ref-lockup img{width:32px;height:32px} body.tf-dashboard-page.dark-mode .tf-sidebar-brand .tf-ref-word{font-size:19px} body.tf-dashboard-page.dark-mode .tf-side-item{background:transparent!important;border:1px solid transparent!important;color:#AABBCC!important;box-shadow:none!important;text-shadow:none!important} body.tf-dashboard-page.dark-mode .tf-side-item .nav-icon{color:#00DCE3!important;background:rgba(0,255,255,.05)!important;border-color:transparent!important} body.tf-dashboard-page.dark-mode .tf-side-item:hover{background:rgba(0,255,255,.085)!important;border-color:#1E4A5C!important;color:#EFFBFF!important} body.tf-dashboard-page.dark-mode .tf-side-item.active{background:#00FFFF!important;color:#091223!important;border-color:#2FFFFF!important;box-shadow:0 0 14px rgba(0,255,255,.12)!important} body.tf-dashboard-page.dark-mode .tf-side-item.active .nav-label, body.tf-dashboard-page.dark-mode .tf-side-item.active .nav-icon{color:#091223!important} body.tf-dashboard-page.dark-mode .tf-side-item.active .nav-icon{background:transparent!important;border:0!important} body.tf-dashboard-page.dark-mode #dashboard .tf-dashboard-brand-above{margin-bottom:10px!important;text-align:left!important} body.tf-dashboard-page.dark-mode #dashboard .tf-dashboard-brand-above .tf-ref-word{font-size:clamp(17px,2vw,24px)!important} body.tf-dashboard-page.dark-mode #dashboard .tf-dashboard-brand-above .tf-ref-lockup>img{height:40px;width:40px} body.tf-dashboard-page.dark-mode #dashboard .tf-hero-clean{ background:linear-gradient(100deg,rgba(23,30,58,.92),rgba(20,26,48,.98))!important;border:1px solid #343C60!important;border-radius:18px!important; box-shadow:0 0 0 1px rgba(153,0,255,.05),inset 0 1px 0 rgba(255,255,255,.035)!important;color:#FFF!important } body.tf-dashboard-page.dark-mode #dashboard .tf-hero-clean:before{opacity:.25!important} body.tf-dashboard-page.dark-mode #dashboard .tf-hero-kicker{color:#5EF9FF!important} body.tf-dashboard-page.dark-mode #dashboard #greeting, body.tf-dashboard-page.dark-mode #dashboard .tf-hero-greeting{color:#FFFFFF!important;text-shadow:none!important} body.tf-dashboard-page.dark-mode #dashboard .tf-teacher-id-display{color:#D7E7F4!important;background:#141C33!important;border-color:#3B4467!important} body.tf-dashboard-page.dark-mode #dashboard .tf-subscription-indicator{background:rgba(0,255,255,.09)!important;color:#76F8FF!important;border-color:#2B7A7F!important} body.tf-dashboard-page.dark-mode #dashboard .tf-head-date, body.tf-dashboard-page.dark-mode #dashboard .tf-head-time{background:#151A30!important;color:#D0E4F0!important;border:1px solid #303950!important;box-shadow:none!important} body.tf-dashboard-page.dark-mode #dashboard .tf-head-label{color:#AABBCC!important} body.tf-dashboard-page.dark-mode #dashboard .tf-head-value{color:#E7F4FE!important} body.tf-dashboard-page.dark-mode .hero-photo.dashboard-slideshow{ position:relative;border:1px solid #354769!important;border-radius:20px!important;overflow:hidden!important; background:linear-gradient(105deg,#183A60 0%,#222A5E 49%,#40165D 100%)!important; box-shadow:none!important } body.tf-dashboard-page.dark-mode .dashboard-slideshow .dashboard-slide{ background-image:linear-gradient(100deg,rgba(15,40,74,.20),rgba(39,24,83,.28)),url('/assets/teacherflow-neon-calendar.svg')!important; background-position:center,right center!important;background-repeat:no-repeat!important; background-size:cover,min(65%,630px) auto!important } body.tf-dashboard-page.dark-mode .dashboard-slide-shade{ background:linear-gradient(90deg,rgba(17,39,66,.95) 0%,rgba(18,34,73,.70) 47%,rgba(35,15,73,.16) 100%)!important } body.tf-dashboard-page.dark-mode .hero-photo-overlay{max-width:70%!important;text-align:left!important} body.tf-dashboard-page.dark-mode .hero-kicker{display:inline-block;border:1px solid rgba(195,229,255,.25)!important;background:rgba(255,255,255,.075)!important;border-radius:999px!important;padding:6px 10px!important;color:#E1F9FF!important;font-size:10px!important} body.tf-dashboard-page.dark-mode .hero-title{color:#FFFFFF!important;font-weight:750!important;letter-spacing:-.8px!important;text-shadow:0 2px 12px rgba(0,0,0,.10)!important} body.tf-dashboard-page.dark-mode .hero-copy{color:#BED1E3!important} body.tf-dashboard-page.dark-mode .dashboard-dot.active{background:#00FFFF!important;border-color:#00FFFF!important} body.tf-dashboard-page.dark-mode #dashboard .cards{gap:13px!important} body.tf-dashboard-page.dark-mode #dashboard .cards .card{ min-width:0!important;background:#10142A!important;border:1px solid #3E465F!important;color:#FFFFFF!important; border-radius:16px!important;box-shadow:none!important;position:relative;overflow:hidden!important } body.tf-dashboard-page.dark-mode #dashboard .cards .card:nth-child(1){border-color:rgba(153,0,255,.62)!important;background:radial-gradient(circle at 100% 100%,rgba(153,0,255,.16),transparent 33%),#10142A!important} body.tf-dashboard-page.dark-mode #dashboard .cards .card:nth-child(2){border-color:rgba(51,204,51,.52)!important;background:radial-gradient(circle at 100% 100%,rgba(51,204,51,.11),transparent 33%),#10142A!important} body.tf-dashboard-page.dark-mode #dashboard .cards .card:nth-child(3){border-color:rgba(255,255,0,.46)!important;background:radial-gradient(circle at 100% 100%,rgba(255,255,0,.09),transparent 33%),#10142A!important} body.tf-dashboard-page.dark-mode #dashboard .cards .card:nth-child(4){border-color:rgba(28,149,255,.55)!important;background:radial-gradient(circle at 100% 100%,rgba(28,149,255,.11),transparent 33%),#10142A!important} body.tf-dashboard-page.dark-mode #dashboard .cards .card:nth-child(1) .card-icon{color:#C15DFF!important;border-color:#9900FF!important;background:rgba(153,0,255,.13)!important} body.tf-dashboard-page.dark-mode #dashboard .cards .card:nth-child(2) .card-icon{color:#52F486!important;border-color:#33CC33!important;background:rgba(51,204,51,.12)!important} body.tf-dashboard-page.dark-mode #dashboard .cards .card:nth-child(3) .card-icon{color:#FFF766!important;border-color:#CFCF00!important;background:rgba(255,255,0,.10)!important} body.tf-dashboard-page.dark-mode #dashboard .cards .card:nth-child(4) .card-icon{color:#60BFFF!important;border-color:#188FFF!important;background:rgba(24,143,255,.12)!important} body.tf-dashboard-page.dark-mode #dashboard .cards .card .metric{color:#FFFFFF!important;font-weight:800!important} body.tf-dashboard-page.dark-mode #dashboard .cards .card .label{color:#AABBCC!important} body.tf-dashboard-page.dark-mode .section, body.tf-dashboard-page.dark-mode .card, body.tf-dashboard-page.dark-mode .setting-card, body.tf-dashboard-page.dark-mode .settings-panel, body.tf-dashboard-page.dark-mode .student-card, body.tf-dashboard-page.dark-mode .analytics-panel, body.tf-dashboard-page.dark-mode .analytics-kpi, body.tf-dashboard-page.dark-mode .today-panel, body.tf-dashboard-page.dark-mode .announcement, body.tf-dashboard-page.dark-mode .modal-card, body.tf-dashboard-page.dark-mode .data-table-wrap{ background:#10142A!important;border:1px solid #2C3452!important;border-radius:14px!important;color:#FFFFFF!important;box-shadow:none!important } body.tf-dashboard-page.dark-mode #schedule .regular-timetable-section, body.tf-dashboard-page.dark-mode #schedule .schedule-section-card, body.tf-dashboard-page.dark-mode #schedule .student-schedule-summary-card, body.tf-dashboard-page.dark-mode #schedule .student-schedule-class, body.tf-dashboard-page.dark-mode #schedule .student-schedule-overview{background:#10142A!important;border-color:#343C5D!important;color:#FFF!important} body.tf-dashboard-page.dark-mode #schedule .student-schedule-change{background:#181D35!important;color:#E3E9F5!important;border-color:#353F5C!important} body.tf-dashboard-page.dark-mode .calendar, body.tf-dashboard-page.dark-mode .calendar .day, body.tf-dashboard-page.dark-mode .calendar .event, body.tf-dashboard-page.dark-mode .regular-timetable td.slot{background:#12172F!important;color:#EAF6FF!important;border-color:#303954!important} body.tf-dashboard-page.dark-mode .calendar .dayname, body.tf-dashboard-page.dark-mode .regular-timetable thead th, body.tf-dashboard-page.dark-mode .regular-timetable .time-cell{background:#1C2440!important;color:#B7D3E7!important;border-color:#303954!important} body.tf-dashboard-page.dark-mode .regular-slot-content.available{color:#8296AF!important} body.tf-dashboard-page.dark-mode .regular-slot-content.booked{background:#142E39!important;color:#D8FDFF!important;border-color:#007D94!important} body.tf-dashboard-page.dark-mode .table thead th, body.tf-dashboard-page.dark-mode .data-table thead th{background:#1D2542!important;color:#B9C9E4!important;border-color:#37415B!important} body.tf-dashboard-page.dark-mode .table td, body.tf-dashboard-page.dark-mode .data-table td{color:#E1EAFA!important;border-color:#303954!important} body.tf-dashboard-page.dark-mode :is(.section,.card,.setting-card,.student-card,.analytics-panel,.announcement,.modal-card) :is(h1,h2,h3,strong){color:#F3F8FF!important} body.tf-dashboard-page.dark-mode :is(.section,.card,.setting-card,.student-card,.analytics-panel,.announcement,.modal-card) :is(p,small,.muted){color:#AABBCC!important} body.tf-dashboard-page.dark-mode .section-photo-hero{border-color:#394366!important;box-shadow:none!important} body.tf-dashboard-page.dark-mode .section-photo-hero .photo-copy{background:linear-gradient(90deg,rgba(9,11,24,.90),rgba(9,11,24,.32))!important} body.tf-dashboard-page.dark-mode button.primary, body.tf-dashboard-page.dark-mode .primary, body.tf-dashboard-page.dark-mode .class-list-pdf-btn{background:#00DDE7!important;border:1px solid #00DDE7!important;color:#091127!important;box-shadow:none!important} body.tf-dashboard-page.dark-mode button.primary:hover, body.tf-dashboard-page.dark-mode .primary:hover{background:#66F9FF!important;border-color:#66F9FF!important} body.tf-dashboard-page.dark-mode :is(.ghost,.action-icon,.regular-timetable-share,.regular-timetable-print){background:#171E35!important;color:#E7F5FF!important;border-color:#3A4869!important;box-shadow:none!important} body.tf-dashboard-page.dark-mode :is(input,select,textarea){background:#151B31!important;color:#EEF7FF!important;border-color:#3A4562!important} body.tf-dashboard-page.dark-mode :is(input,select,textarea):focus-visible{outline:2px solid #00CCCC!important;outline-offset:2px!important} body.tf-dashboard-page.dark-mode .tf-reminder-status, body.tf-dashboard-page.dark-mode .theme-choice{background:#1B2340!important;color:#EAF5FF!important;border-color:#34415F!important} body.tf-dashboard-page.dark-mode .quick-nav{background:rgba(17,21,41,.97)!important;border-color:#394362!important} body.tf-dashboard-page.dark-mode .quick-nav button{color:#D8E8F5!important} body.tf-dashboard-page.dark-mode .quick-nav button.active{background:#00F0FF!important;color:#071128!important} body.tf-dashboard-page.dark-mode .quick-nav button.active .nav-label, body.tf-dashboard-page.dark-mode .quick-nav button.active .nav-icon{color:#071128!important} body.tf-dashboard-page.dark-mode :is(.dashboard-subtitle,.section-subtitle,.breadcrumb){color:#AEC2D4!important} body.tf-dashboard-page.dark-mode #schedule .schedule-search, body.tf-dashboard-page.dark-mode #schedule .schedule-month-filter select{background:#131A30!important;border-color:#3A4564!important;color:#EDF7FF!important} } /* Maintain mobile cards, bottom nav and brand usability. */ @media screen and (max-width:900px){body.tf-dashboard-page.dark-mode .tf-sidebar-brand-viewport .tf-ref-word{font-size:16px}body.tf-dashboard-page.dark-mode .hero-photo-overlay{max-width:92%!important}} @media screen and (max-width:640px){body.tf-dashboard-page.dark-mode .dashboard-slideshow .dashboard-slide{background-size:cover,90% auto!important;background-position:center,right bottom!important}body.tf-dashboard-page.dark-mode .hero-photo-overlay{max-width:100%!important}body.tf-dashboard-page.dark-mode .dashboard-slide-shade{background:linear-gradient(90deg,rgba(11,29,56,.95),rgba(14,24,55,.77))!important}body.tf-dashboard-page.dark-mode #dashboard .cards .card{min-height:92px!important}} @media (prefers-reduced-motion:reduce){body.tf-dashboard-page .tf-ref-lockup{transition:none!important}} /* ======================================================================== TeacherFlow UI refinement 2026-10-04 Single auth brand; visible sidebar wordmark; contrast-safe transparent dashboard cards; compact, fully visible report controls. ======================================================================== */ /* AUTH: just one logo on the illustrated panel, no repeated form lockup. */ body.tf-auth-page .card>.tf-ref-logo-head{display:none!important} body.tf-auth-page .card>h1:first-of-type{margin-top:0!important} body.tf-auth-page #loginWelcomeHeading{font-size:clamp(23px,2.4vw,30px)!important;line-height:1.18!important;letter-spacing:-.65px!important} body.tf-auth-page .card::before{display:none!important;content:none!important} /* SIDEBAR: reserve actual width for the entire Teacherflow wordmark. */ @media (min-width:951px){ html body.tf-dashboard-page{--tf-sidebar-expanded:256px} html body.tf-dashboard-page .tf-sidebar-header{min-width:0!important;gap:5px!important} html body.tf-dashboard-page .tf-sidebar-brand{min-width:0!important;flex:1 1 auto!important;padding:3px 1px!important} html body.tf-dashboard-page .tf-sidebar-brand-viewport{display:flex!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:100%!important;height:38px!important;overflow:visible!important;align-items:center!important} html body.tf-dashboard-page .tf-sidebar-brand-viewport .tf-ref-lockup{display:flex!important;max-width:100%!important;gap:5px!important;overflow:visible!important} html body.tf-dashboard-page .tf-sidebar-brand-viewport .tf-ref-lockup>img{width:30px!important;height:30px!important;flex:0 0 30px!important} html body.tf-dashboard-page .tf-sidebar-brand-viewport .tf-ref-word{font-size:17px!important;letter-spacing:-.85px!important;white-space:nowrap!important} html body.tf-dashboard-page .sidebar-toggle-modern{width:32px!important;min-width:32px!important;flex:0 0 32px!important;height:34px!important} html body.tf-dashboard-page .app.sidebar-collapsed .tf-sidebar-brand-viewport{justify-content:center!important} html body.tf-dashboard-page .app.sidebar-collapsed .tf-sidebar-brand-viewport .tf-ref-word{display:none!important} } /* Dashboard panels are outlines on the page canvas rather than white/pink or colored fills. This intentionally excludes dialogs, form fields, status badges, popovers, and images, which need their own contrast. */ html body.tf-dashboard-page .view :is( .section,.card,.setting-card,.settings-panel,.settings-card,.student-card, .analytics-panel,.analytics-kpi,.today-panel,.announcement,.announcements-panel, .about-feature-card,.about-info-card,.about-intro-panel,.about-professional-intro, .schedule-section-card,.regular-timetable-section,.student-schedule-group, .student-schedule-summary-card,.student-schedule-overview, .student-schedule-change,.student-schedule-class,.student-schedule-trigger, .teaching-log-toolbar,.class-list-toolbar,.teaching-class-list-section, .data-table-wrap,.table-wrap,.student,.profile-card,.class-list-report-mark, .regular-timetable-note,.payment-summary,.summary-card ){ background:transparent!important;background-image:none!important; box-shadow:none!important; } /* Higher specificity than the old dashboard's #dashboard metric gradients. */ html body.tf-dashboard-page.dark-mode #dashboard .cards>.card:nth-child(n), html body.tf-dashboard-page:not(.dark-mode) #dashboard .cards>.card:nth-child(n), html body.tf-dashboard-page.dark-mode #dashboard>.section, html body.tf-dashboard-page:not(.dark-mode) #dashboard>.section{ background:transparent!important; background-image:none!important; box-shadow:none!important; } html body.tf-dashboard-page.dark-mode .view:is(#schedule,#history,#analytics,#students,#announcements,#about,#settings) :is(.section,.card,.setting-card,.student-card,.analytics-panel,.analytics-kpi,.about-feature-card,.about-info-card,.student-schedule-group,.teaching-log-toolbar,.class-list-toolbar,.today-panel,.announcement,.data-table-wrap), html body.tf-dashboard-page:not(.dark-mode) .view:is(#schedule,#history,#analytics,#students,#announcements,#about,#settings) :is(.section,.card,.setting-card,.student-card,.analytics-panel,.analytics-kpi,.about-feature-card,.about-info-card,.student-schedule-group,.teaching-log-toolbar,.class-list-toolbar,.today-panel,.announcement,.data-table-wrap){ background:transparent!important; background-image:none!important; box-shadow:none!important; } html body.tf-dashboard-page .view .cards>.card:nth-child(n){ background:transparent!important;background-image:none!important; box-shadow:none!important; } html body.tf-dashboard-page .view .cards>.card:before, html body.tf-dashboard-page .view .cards>.card:after{opacity:0!important;display:none!important} html body.tf-dashboard-page .view .calendar .day{background:transparent!important} html body.tf-dashboard-page .view .about-intro-meta span{ background:transparent!important; } /* Tables/inputs are kept legible; this affects the surface of panels, not the semantic styling of content such as Trial / Cancelled status labels. */ html body.tf-dashboard-page.dark-mode .view :is(.section,.card,.setting-card,.settings-panel,.settings-card,.student-card,.analytics-panel,.analytics-kpi,.today-panel,.announcement,.announcements-panel,.about-feature-card,.about-info-card,.about-intro-panel,.about-professional-intro,.schedule-section-card,.regular-timetable-section,.student-schedule-group,.student-schedule-summary-card,.student-schedule-overview,.student-schedule-change,.student-schedule-class,.student-schedule-trigger,.teaching-log-toolbar,.class-list-toolbar,.teaching-class-list-section,.data-table-wrap,.table-wrap,.student,.profile-card,.summary-card){ border-color:#303a55!important; color:#edf5ff!important; } html body.tf-dashboard-page:not(.dark-mode) .view :is(.section,.card,.setting-card,.settings-panel,.settings-card,.student-card,.analytics-panel,.analytics-kpi,.today-panel,.announcement,.announcements-panel,.about-feature-card,.about-info-card,.about-intro-panel,.about-professional-intro,.schedule-section-card,.regular-timetable-section,.student-schedule-group,.student-schedule-summary-card,.student-schedule-overview,.student-schedule-change,.student-schedule-class,.student-schedule-trigger,.teaching-log-toolbar,.class-list-toolbar,.teaching-class-list-section,.data-table-wrap,.table-wrap,.student,.profile-card,.summary-card){ border-color:#d5dce4!important; } /* INFO / ABOUT: make the formerly dark gradient headline usable on a transparent surface in BOTH the day and night appearances. */ html body.tf-dashboard-page #about .about-professional-intro, html body.tf-dashboard-page #about .about-intro-copy, html body.tf-dashboard-page #about .about-intro-panel{background:transparent!important;color:inherit!important} html body.tf-dashboard-page #about .about-professional-intro{ min-width:0!important;overflow:visible!important; border:1px solid var(--line)!important;border-radius:14px!important; } html body.tf-dashboard-page #about .about-intro-copy h2{font-size:clamp(22px,2.7vw,31px)!important;line-height:1.2!important} html body.tf-dashboard-page:not(.dark-mode) #about .about-intro-copy h2, html body.tf-dashboard-page:not(.dark-mode) #about .about-panel-title, html body.tf-dashboard-page:not(.dark-mode) #about .about-intro-meta b{color:#132d48!important} html body.tf-dashboard-page:not(.dark-mode) #about :is(.about-lead,.about-panel-label,.about-intro-panel p,.about-intro-meta span){color:#42576a!important} html body.tf-dashboard-page:not(.dark-mode) #about .about-intro-meta span{border-color:#cfdae3!important;color:#42576a!important} html body.tf-dashboard-page:not(.dark-mode) #about .about-eyebrow{color:#284c74!important} html body.tf-dashboard-page:not(.dark-mode) #about .about-intro-panel{border-color:#d5dce4!important} html body.tf-dashboard-page.dark-mode #about .about-intro-copy h2, html body.tf-dashboard-page.dark-mode #about .about-panel-title, html body.tf-dashboard-page.dark-mode #about .about-intro-meta b{color:#f4f9ff!important} html body.tf-dashboard-page.dark-mode #about :is(.about-lead,.about-panel-label,.about-intro-panel p,.about-intro-meta span){color:#c0d2e4!important} html body.tf-dashboard-page.dark-mode #about .about-intro-meta span{border-color:#384b65!important} html body.tf-dashboard-page.dark-mode #about .about-eyebrow{color:#90eaf2!important} html body.tf-dashboard-page.dark-mode #about .about-intro-panel{border-color:#384b65!important} /* TEACHING LOG: no icon-only 38px box around a full "Download PDF" label. */ html body.tf-dashboard-page #teachingLogIncomeToolbar, html body.tf-dashboard-page #teachingClassListToolbar{ box-sizing:border-box!important; width:100%!important;max-width:100%!important; min-width:0!important; display:flex!important;flex-wrap:wrap!important; align-items:center!important;gap:10px 12px!important; padding:12px 14px!important; border-radius:11px!important; overflow:visible!important; background:transparent!important;box-shadow:none!important; } html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar) :is(.teaching-log-toolbar-copy,.class-list-toolbar-copy){ min-width:0!important;flex:1 1 190px!important; gap:9px!important; } html body.tf-dashboard-page #teachingClassListToolbar .class-list-report-mark{ width:29px!important;height:29px!important;flex:0 0 29px!important; } html body.tf-dashboard-page #teachingClassListToolbar .class-list-report-mark svg{width:15px!important;height:15px!important} html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar) :is(.teaching-log-toolbar-text strong,.class-list-toolbar-text strong){font-size:12px!important;line-height:1.35!important} html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar) :is(.teaching-log-toolbar-text span,.class-list-toolbar-text span){font-size:10px!important;line-height:1.45!important} html body.tf-dashboard-page #teachingLogIncomeToolbar .teaching-log-income-actions, html body.tf-dashboard-page #teachingClassListToolbar .class-list-actions{ min-width:0!important;max-width:100%!important; display:flex!important;flex:1 1 370px!important;flex-wrap:wrap!important; margin-left:auto!important;align-items:flex-end!important;justify-content:flex-end!important; gap:8px!important; } html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar) :is(.teaching-log-month-control,.teaching-log-rate-control,.class-list-control){flex:0 1 auto!important;min-width:0!important;max-width:100%!important;gap:4px!important} html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar) :is(select,.teaching-log-month-select,.teaching-log-rate-select){min-width:0!important;max-width:100%!important;width:auto!important;height:38px!important;font-size:11px!important} html body.tf-dashboard-page #teachingClassListToolbar :is(#classListWeek,#classListMonth,#classListRate){min-width:0!important;max-width:168px!important} /* Respect the existing week/month toggle even though class-list-control is flex. */ html body.tf-dashboard-page :is(#classListWeekControl,#classListMonthControl)[hidden]{display:none!important} html body.tf-dashboard-page #teachingLogIncomeToolbar #teachingLogIncomePdf, html body.tf-dashboard-page #teachingClassListToolbar #classListPdfBtn{ box-sizing:border-box!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; flex:0 0 auto!important; width:auto!important;min-width:123px!important;max-width:100%!important; height:38px!important;min-height:38px!important; margin:0!important;padding:0 11px!important;gap:6px!important; border-radius:8px!important;font-size:10.5px!important;line-height:1.2!important; white-space:nowrap!important;overflow:visible!important; } html body.tf-dashboard-page :is(#teachingLogIncomePdf,#classListPdfBtn) svg{ display:block!important;width:14px!important;height:14px!important;min-width:14px!important;flex:0 0 14px!important; } html body.tf-dashboard-page :is(#teachingLogIncomePdf,#classListPdfBtn) span{ display:inline-block!important;white-space:nowrap!important; font-size:10.5px!important;line-height:1.2!important; } @media(max-width:1050px){ html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar) :is(.teaching-log-income-actions,.class-list-actions){justify-content:flex-start!important;margin-left:0!important} } @media(max-width:640px){ html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar){padding:11px!important;gap:10px!important} html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar) :is(.teaching-log-income-actions,.class-list-actions){width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar) :is(.teaching-log-month-control,.teaching-log-rate-control,.class-list-control){width:100%!important;max-width:100%!important;min-width:0!important} html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar) :is(select,.teaching-log-month-select,.teaching-log-rate-select){width:100%!important;max-width:100%!important} html body.tf-dashboard-page :is(#teachingLogIncomeToolbar,#teachingClassListToolbar) :is(#teachingLogIncomePdf,#classListPdfBtn){grid-column:1/-1!important;justify-self:start!important;width:auto!important;min-width:123px!important} html body.tf-dashboard-page #teachingClassListToolbar .class-list-actions .class-list-control:nth-child(3){grid-column:auto!important} }