/* Teacher-specific presentation, built on the shared student portal design. */ :root #svMobileWorkspace.sv-portal-designed .sv-design-board.sv-design-teacher-board { grid-template-areas: 'welcome zone' 'stats stats' 'lessons focus' 'week focus' 'salary salary'; grid-template-rows: auto auto auto auto auto; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-welcome { min-height: 248px; } :root #svMobileWorkspace.sv-portal-designed [data-teacher-priority="requests"] .sv-design-hero-title, :root #svMobileWorkspace.sv-portal-designed [data-teacher-priority="profile"] .sv-design-hero-title { font-size: clamp(24px,2.2vw,31px); } :root #svMobileWorkspace.sv-portal-designed :is([data-teacher-priority="requests"],[data-teacher-priority="profile"]) .sv-design-teaching-art { opacity: .22; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone { grid-area: zone; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: 248px; height: 100%; padding: 25px; gap: 18px; border: 1px solid #e7def2; border-radius: 22px; background: linear-gradient(135deg,#fff 35%,#faf7ff); box-shadow: 0 4px 16px #3c275503; overflow: hidden; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone:before, :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone:after { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-ring { position: absolute; top: 24px; right: 24px; width: 43px; height: 43px; border-radius: 14px; color: #9663c2; background: conic-gradient(#b696da 0 var(--zone-progress),#eee6f5 var(--zone-progress) 100%); box-shadow: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-ring:before { inset: 3px; border-radius: 11px; background: #faf6ff; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-ring:after { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-ring b { font-size: 13px; color: #8854b3; font-weight: 850; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-ring small { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone.complete .sv-zone-ring { background: #edf7f2; border: 1px solid #d9ebe2; color: #4f8c73; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone.complete .sv-zone-ring:before { background: #edf7f2; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone.complete .sv-zone-ring b { color: #4d8a71; font-size: 20px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-copy { padding-right: 41px; min-width: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-kicker { display: block; width: auto; margin: 0 0 9px; padding: 0; border: 0; background: none; color: #7f6594; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-copy h3 { color: #493255; font-size: 18px; letter-spacing: -.5px; line-height: 1.3; margin: 0 0 10px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-copy > p:not(.sv-zone-kicker) { max-width: none; font-size: 12px; color: #766380; line-height: 1.65; margin: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-copy :is(.sv-zone-readyline,.sv-zone-lead) { font-size: 10px; padding: 6px 8px; line-height: 1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-status { display: flex; flex-direction: column; align-items: stretch; gap: 13px; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-status > div { display: flex; align-items: center; gap: 8px; min-width: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-status i { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; color: #9b6cbe; background: #f1e8fb; border-radius: 8px; font-style: normal; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone.complete .sv-zone-status i { color: #50846b; background: #edf7f2; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-status b { color: #6c557c; font-size: 11px; line-height: 1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-status small { display: block; margin-top: 3px; font-size: 10px; color: #857090; line-height: 1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-status button { min-height: 40px; width: 100%; padding: 10px 14px; border: 1px solid #e8d9f3; border-radius: 11px; background: #f6effc; box-shadow: none; color: #8042aa; font: 750 11px/1.5 Manrope,Arial,sans-serif; } /* Actual counts from the existing overview, kept together in a quiet strip. */ :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-tools { grid-area: stats; display: grid; grid-template-columns: minmax(150px,.8fr) minmax(0,2fr); align-items: center; gap: 24px; padding: 20px 25px; border-radius: 18px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-tools-head { margin: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-tools h2 { color: #665074; font-size: 13px; font-weight: 800; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-tools p { font-size: 10px; color: #807087; line-height: 1.6; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-stat { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 0 20px; border: 0; border-left: 1px solid #ebe3f3; border-radius: 0; background: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-stat b { color: #8856b9; font-size: 27px; line-height: 1.3; letter-spacing: -.7px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-stat span { font-size: 10px; color: #7b6588; line-height: 1.6; margin: 0; max-width: 100px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-focus { grid-area: focus; min-height: 0; padding: 24px; border-radius: 21px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-focus:after { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-focus-header { margin-bottom: 17px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 72px; padding: 12px 5px; border: 0; border-bottom: 1px solid #f1ebf6; border-radius: 9px; background: transparent; text-align: left; font-family: Manrope,Arial,sans-serif; cursor: pointer; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action:last-child { border-bottom-color: transparent; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: #f3eafc; color: #a373c8; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-icon svg { width: 19px; height: 19px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action[data-view="messages"] .sv-design-work-icon { color: #829ecc; background: #ecf2ff; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action[data-view="students"] .sv-design-work-icon { color: #bc88ae; background: #fbedf5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action[data-view="lesson-cards"] .sv-design-work-icon { color: #8c93c6; background: #eeeeff; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action > div { flex: 1; min-width: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action b { display: block; color: #655071; font-size: 12px; font-weight: 800; line-height: 1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action small { display: block; margin-top: 4px; color: #82708f; font-size: 10px; line-height: 1.6; } :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action > svg { flex: 0 0 15px; width: 15px; height: 15px; color: #a387b6; transition: transform .22s var(--sv-design-ease); } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-glance { grid-area: week; min-width: 0; padding: 23px 25px; border-radius: 21px; overflow: hidden; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-glance-head { margin-bottom: 18px; gap: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-glance-head h2 { font-size: 16px; color: #493455; font-weight: 800; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-glance-head p { font-size: 11px; line-height: 1.6; color: #807087; margin-top: 5px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-glance-head button { min-height: 36px; color: #8553a9; font-size: 11px; flex: 0 0 auto; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); min-width: 0; width: 100%; gap: 5px; border: 0; border-radius: 0; background: none; overflow: visible; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; min-height: 102px; padding: 11px 4px; border: 1px solid transparent; border-radius: 12px; background: #faf8fd; text-align: center; color: #6d567e; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-day > span { color: #8a7598; font-size: 9px; font-weight: 750; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-day > strong { display: grid; place-items: center; width: 27px; height: 28px; margin-top: 6px; font-size: 15px; color: #70537f; border-radius: 9px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-day small { color: #887290; font-size: 9px; font-weight: 650; margin-top: 7px; line-height: 1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-day.today { background: #f2eafb; border-color: #e9daf7; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-day.today > strong { color: #fff; background: #9965d1; box-shadow: 0 3px 8px #8252bc1c; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-day.has-lessons small { color: #7949a6; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-dot { width: 4px; height: 4px; margin-top: 6px; background: #b08bd4; box-shadow: none; } /* Keep every amount, rate and qualification from the original remuneration card. */ :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-card { grid-area: salary; display: grid; grid-template-columns: auto minmax(0,1fr) minmax(220px,.45fr); align-items: center; gap: 21px; margin: 0; padding: 25px 28px; border-radius: 21px; border-color: #e9dff2; background: linear-gradient(115deg,#fcfaff,#fff); box-shadow: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-card:after { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; border: 1px solid #eaddf5; background: #f3ebfc; color: #ac7bcf; font-size: 22px; box-shadow: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-copy p:first-child { color: #7e6393; font-size: 8px; font-weight: 800; letter-spacing: 1px; margin: 0 0 8px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-copy h2 { color: #594064; font-size: 16px; letter-spacing: -.4px; margin: 0 0 7px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-copy p:not(:first-child) { max-width: 480px; color: #87718f; font-size: 11px; line-height: 1.7; margin: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-meta span { padding: 5px 8px; background: #f5effb; color: #8b6f9b; font-size: 9px; font-weight: 650; border: 1px solid #eee4f5; border-radius: 7px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-amount { grid-column: auto; padding-left: 24px; text-align: right; border-left: 1px solid #e9dff2; min-width: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-amount small { display: block; color: #8c779a; font-size: 8px; font-weight: 700; line-height: 1.7; letter-spacing: .7px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-amount strong { display: block; margin: 8px 0 5px; font-size: clamp(21px,2.6vw,33px); line-height: 1.2; font-weight: 800; letter-spacing: -1px; color: #8b55be; overflow-wrap: anywhere; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-amount span { color: #856b94; font-size: 11px; line-height: 1.6; } @media (hover:hover) { :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action:hover { background: #fbf7fe; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-status button:hover { border-color: #d8bee9; background: #f1e7fa; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-day:hover { background: #f4edfb; border-color: #e2d0f2; } } @media (hover:hover) and (prefers-reduced-motion:no-preference) { :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action:hover > svg { transform: translateX(3px); } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-week-day:hover { transform: translateY(-2px); } } @media (min-width:761px) and (max-width:1100px) { :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-tools { grid-template-columns: 1fr; gap: 17px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-tools-head p { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-overview-stat:first-child { padding-left: 0; border-left: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-card { grid-template-columns: minmax(0,1fr) minmax(190px,.6fr); } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-icon { display: none; } } @media (max-width:950px) { :root #svMobileWorkspace.sv-portal-designed .sv-design-board.sv-design-teacher-board { grid-template-columns: minmax(0,1fr); grid-template-areas: 'welcome' 'zone' 'stats' 'lessons' 'focus' 'week' 'salary'; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone { min-height: 0; } } @media (max-width:760px) { :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-zone { display: flex !important; grid-area: zone; min-height: 0 !important; padding: 23px !important; gap: 18px !important; border-radius: 20px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-zone-ring { width: 43px !important; height: 43px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-zone-copy h3 { font-size: 18px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-zone-status { display: flex !important; padding: 0 !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-zone-status button { width: 100% !important; min-height: 44px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-overview-tools { display: block !important; padding: 21px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-overview-tools-head { margin-bottom: 17px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-overview-tools-head p { display: none; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-overview-stats { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 0 !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-overview-stat { display: block; padding: 0 9px !important; border-radius: 0 !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-overview-stat:first-child { padding-left: 0 !important; border-left: 0; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-overview-stat b { font-size: 26px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-overview-stat span { font-size: 9px !important; margin-top: 5px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-focus { grid-area: focus; min-height: 0 !important; padding: 22px !important; border-radius: 20px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-design-work-action { min-height: 72px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-week-glance { padding: 21px 16px !important; border-radius: 20px !important; overflow: visible; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-week-glance-head { display: flex !important; flex-wrap: wrap; gap: 8px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-week-glance-head p { font-size: 10px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-week-strip { min-width: 0 !important; grid-template-columns: repeat(7,minmax(0,1fr)) !important; gap: 3px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-week-day { min-height: 95px !important; padding: 10px 2px !important; border-radius: 9px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-week-day > span { font-size: 8px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-week-day > strong { width: 24px; height: 27px; font-size: 14px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-week-day small { font-size: 8px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-salary-card { display: flex !important; flex-direction: column; align-items: stretch; gap: 20px; padding: 23px !important; border-radius: 20px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-salary-icon { display: none; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-salary-amount { padding: 18px 0 0 !important; border-left: 0 !important; border-top: 1px solid #e9dff2; text-align: left !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-teacher-board .sv-salary-amount strong { font-size: 30px !important; } } @media (prefers-reduced-motion:reduce) { :root #svMobileWorkspace.sv-portal-designed .sv-design-work-action > svg { transition: none; } } /* Match the shared workspace scale while retaining the teacher's own grid areas. */ @media (min-width: 761px) { :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board :is(.sv-zone,.sv-focus,.sv-overview-tools,.sv-week-glance,.sv-salary-card) { padding: 30px; border-radius: 24px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone { min-height: 294px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board :is(.sv-zone-copy h3,.sv-focus h3,.sv-week-glance h2,.sv-salary-copy h2) { font-size: 20px; color: #352b44; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-copy > p:not(.sv-zone-kicker), :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-salary-copy p:not(:first-child) { font-size: 14px; color: #73647f; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board :is(.sv-zone-kicker,.sv-salary-copy p:first-child,.sv-salary-amount small) { font-size: 10px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board :is(.sv-zone-status b,.sv-zone-status button,.sv-overview-tools h2,.sv-design-work-action b) { font-size: 14px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board :is(.sv-zone-status small,.sv-overview-tools p,.sv-design-work-action small,.sv-overview-stat span,.sv-salary-amount span) { font-size: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone-status button { min-height: 44px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-design-work-action { min-height: 76px; } } @media (min-width: 761px) and (max-width: 1200px) { :root #svMobileWorkspace.sv-portal-designed .sv-design-board.sv-design-teacher-board { grid-template-columns: minmax(0,1fr); grid-template-areas: 'welcome' 'zone' 'stats' 'lessons' 'focus' 'week' 'salary'; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-board .sv-zone { min-height: 0; } }