/* Shared workspace dimensions. Colours always come from the active theme. */
:root{--class-columns:1;--class-gap:14px;--class-padding:16px;--header-block-size:78px;--header-layer:12;--header-gutter:clamp(12px,2.3vw,32px)}
html{scroll-padding-block-start:calc(var(--header-block-size) + 16px)}
.topbar{position:sticky;inset-block-start:0;z-index:var(--header-layer);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);min-height:78px;height:auto;padding:12px var(--header-gutter);gap:12px;background:var(--surface);box-shadow:0 4px 16px color-mix(in srgb,var(--text) 4%,transparent)}
.topbar-start{gap:10px;min-width:0}.topbar-actions{justify-self:end;gap:10px;min-width:0}
.topbar .user-chip{display:flex;gap:10px;color:var(--text);min-width:0;max-width:100%;border-radius:var(--radius-sm)}
.topbar .avatar{flex:0 0 40px;width:40px;height:40px;border:1px solid var(--border);border-radius:14px}
.topbar .user-identity{display:block!important;min-width:0;max-width:240px}
.user-identity strong{display:block;font-size:13px;line-height:1.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .user-identity small{font-size:10px;line-height:1.8}
.topbar-date{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);font-size:12px;white-space:nowrap}
.topbar-date>svg{width:18px;height:18px;flex:0 0 18px}.topbar-date time{display:flex;gap:8px;align-items:center}
[data-header-date]{color:var(--text);font-variant-numeric:tabular-nums}
.topbar .icon-button{background:var(--surface-soft);border-color:var(--border);border-radius:13px}
.topbar .icon-button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.main-content{padding-block-start:24px}.dashboard-tools{display:flex;justify-content:flex-end;margin-block-end:16px}
.dashboard-courses{display:grid;grid-template-columns:repeat(var(--class-columns),minmax(0,1fr));gap:var(--class-gap)}
.dashboard-courses>.empty-state{grid-column:1/-1}
.dashboard-courses .teacher-course-card,.dashboard-courses .course-card{padding:var(--class-padding);border-radius:var(--radius);min-width:0}
.dashboard-courses .teacher-course-card{border-block-start-width:2px}
.dashboard-courses .teacher-course-title h3,.dashboard-courses .course-title h3{font-size:16px;line-height:1.9;overflow-wrap:anywhere}
.dashboard-courses .teacher-course-count{display:flex;flex-wrap:wrap;gap:5px;align-items:baseline;margin-block:8px 18px;font-size:12px;line-height:1.8}
.dashboard-courses .teacher-course-count strong{font-size:14px;font-weight:700;line-height:inherit}
.dashboard-courses .teacher-course-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.dashboard-courses .teacher-course-actions .button{width:100%;min-height:44px;font-size:12px;line-height:1.7;padding:9px 6px;white-space:normal;overflow-wrap:anywhere;text-align:center}
.dashboard-courses .teacher-course-actions svg{width:17px;height:17px;flex-shrink:0}
.dashboard-courses .course-top{flex-wrap:wrap;gap:8px}.dashboard-courses .tag{white-space:normal;overflow-wrap:anywhere}
.dashboard-courses .course-metrics{flex-wrap:wrap;gap:6px;font-size:11px}.dashboard-courses .text-link{font-size:12px}
@media(min-width:375px){:root{--class-columns:2}}
@media(min-width:768px){:root{--class-columns:4}}
@media(min-width:1400px){:root{--class-gap:18px;--class-padding:20px}.dashboard-courses .teacher-course-title h3{font-size:18px}}
@media(max-width:1100px){.topbar .connection>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.topbar .connection{gap:0}.topbar-date{font-size:11px}.topbar .user-identity{max-width:180px}}
@media(max-width:767px){
  :root{--class-gap:12px;--class-padding:14px;--header-block-size:104px}
  .topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'identity actions' 'date date';gap:7px 10px;padding-block:10px 8px;min-height:96px}
  .topbar-start{grid-area:identity;gap:8px}.topbar-actions{grid-area:actions;gap:8px}.topbar-date{grid-area:date;justify-self:stretch;border-block-start:1px solid var(--border);padding-block-start:6px;font-size:11px}
  .topbar-date>svg{width:15px;height:15px;flex-basis:15px}.topbar .user-identity{max-width:100%}.topbar .user-identity strong{font-size:12px}.topbar .avatar{display:none}
  .topbar .user-chip{flex:1;min-width:0}.topbar .connection{margin-inline-end:2px}
  .notification-panel{position:fixed;inset-inline:12px;width:auto;max-width:none;inset-block-start:calc(var(--header-block-size) + 6px);max-height:calc(100dvh - var(--header-block-size) - 20px)}
  .main-content{padding-inline:14px;padding-block-start:18px}
  .dashboard-courses .teacher-course-title h3,.dashboard-courses .course-title h3{font-size:15px}
}
@media(max-width:374px){:root{--class-padding:18px}.topbar-actions{gap:6px}.dashboard-courses .teacher-course-actions{grid-template-columns:1fr 1fr}.dashboard-courses .teacher-course-title h3{font-size:17px}}
@media(max-height:450px){.topbar{position:sticky}.notification-panel{inset-block-start:calc(var(--header-block-size) + 4px);max-height:calc(100dvh - var(--header-block-size) - 10px)}}
@media(prefers-reduced-motion:reduce){.dashboard-courses .course-card:hover{transform:none}}
@media print{.topbar{display:none!important}.dashboard-courses{--class-columns:2}}

/* Desktop dashboard columns have no panel background, border or divider. */
:root{--dashboard-column-gap:24px;--dashboard-card-min:180px;--dashboard-calendar-min:300px}
.dashboard-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.dashboard-class-panel,.dashboard-calendar-panel{min-width:0}
.dashboard-calendar-panel>.calendar-section{margin-block-start:0}
@media(min-width:1024px){
  /* In the RTL grid the first named area is the right-hand column. */
  .dashboard-layout-split{grid-template-columns:minmax(0,1.2fr) minmax(var(--dashboard-calendar-min),.85fr);grid-template-areas:'classes calendar';gap:var(--dashboard-column-gap)}
  .dashboard-layout-split>.dashboard-class-panel{grid-area:classes}
  .dashboard-layout-split>.dashboard-calendar-panel{grid-area:calendar}
  .dashboard-layout-split .dashboard-courses{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--dashboard-card-min)),1fr));--class-padding:16px;--class-gap:14px}
  .dashboard-layout-split .hero{min-height:0;padding:12px 16px;border-radius:var(--radius)}
  .dashboard-layout-split .hero-copy{max-width:none;width:100%}
  .dashboard-layout-split .hero-visual,.dashboard-layout-split .hero .pill,.dashboard-layout-split .hero p,.dashboard-layout-split .hero h2 br{display:none}
  .dashboard-layout-split .hero h2{font-size:16px;line-height:1.6;margin:0}
  .dashboard-layout-split .stats-grid{gap:10px;margin-block:14px 20px}
  .dashboard-layout-split .stat{padding:12px;gap:9px;min-width:0}
  .dashboard-layout-split .stat-icon{width:32px;height:32px;flex:0 0 32px;border-radius:10px}
  .dashboard-layout-split .stat-icon svg{width:18px;height:18px}
  .dashboard-layout-split .stat strong{font-size:22px}
  .dashboard-layout-split .stat div>span{font-size:10px}
  .dashboard-layout-split .approval-alert{flex-wrap:wrap;gap:8px;text-align:start}
  .dashboard-layout-split .calendar-section{--cal-gap:12px;--cal-cell-height:44px;--cal-day-size:24px;max-width:none}
  .dashboard-layout-split .calendar-heading{gap:10px;margin-block-end:12px}
  .dashboard-layout-split .calendar-heading .eyebrow,.dashboard-layout-split .calendar-heading p{display:none}
  .dashboard-layout-split .calendar-heading h2{font-size:18px;margin:0}
  .dashboard-layout-split .calendar-heading-actions{gap:6px;flex-wrap:wrap}
  .dashboard-layout-split .calendar-heading-actions .button{padding:8px 11px;font-size:11px}
  .dashboard-layout-split .calendar-board{grid-template-columns:minmax(0,1fr)}
  .dashboard-layout-split .calendar-toolbar,.dashboard-layout-split .calendar-month-nav{gap:4px}
  .dashboard-layout-split .calendar-month-nav h3{min-width:88px;font-size:13px}
  .dashboard-layout-split .calendar-today{padding-inline:10px;font-size:11px}
  .dashboard-layout-split .calendar-filter-row{margin-block:6px 8px}
  .dashboard-layout-split .calendar-filter-row select{max-width:100%;font-size:11px}
  .dashboard-layout-split .calendar-weekdays{font-size:11px}
  .dashboard-layout-split .calendar-day{min-height:var(--cal-cell-height);padding:2px;gap:2px}
  .dashboard-layout-split .calendar-day-number{font-size:12px}
  .dashboard-layout-split .calendar-legend{margin-top:9px;gap:9px;font-size:10px}
  .dashboard-layout-split .calendar-agenda{border-inline-start:0;border-block-start:1px solid var(--border);padding:10px 12px}
  .dashboard-layout-split .calendar-agenda-head .eyebrow{display:none}
  .dashboard-layout-split .calendar-agenda-head h3{font-size:12px;line-height:1.8;margin-block:0 6px}
  .dashboard-layout-split .calendar-agenda-empty{padding-block:4px;font-size:11px;line-height:1.8}
  .dashboard-layout-split .calendar-agenda-empty strong{display:inline;font-size:11px;margin-inline-end:4px}
  /* The header's New event button uses the same selected day. */
  .dashboard-layout-split .calendar-add-day{display:none}
  .dashboard-layout-split .calendar-status{min-height:0;margin-top:6px;font-size:11px}
}
@media print{.dashboard-layout-split{display:block}.dashboard-calendar-panel{margin-block-start:24px}}