/* ZNR Driving School Manager — Mobile Upgrade 6 */
@media screen and (max-width: 750px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  header{padding:12px 10px!important;gap:8px!important}
  header h1{font-size:18px!important;line-height:1.15!important}
  header small{font-size:11px!important}
  header>div:last-child{gap:5px!important}
  header .secondary{min-height:40px!important;padding:7px 9px!important;font-size:12px!important}

  #nav{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;padding:5px 6px!important;overflow-x:auto!important;overflow-y:hidden!important;width:100%!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
  #nav::-webkit-scrollbar{display:none!important}
  #nav button{flex:0 0 auto!important;width:auto!important;min-width:auto!important;padding:9px 12px!important;font-size:12px!important;line-height:1.1!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}

  main{width:100%!important;max-width:none!important;padding:10px!important}

  /* Dashboard: force a visible 2 x 2 layout */
  #dashboard>.grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important}
  #dashboard>.grid>.card{width:100%!important;min-width:0!important;height:92px!important;min-height:92px!important;padding:12px!important;border-radius:12px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
  #dashboard>.grid>.card .muted{font-size:12px!important;line-height:1.2!important;white-space:normal!important}
  #dashboard>.grid>.card .stat{font-size:24px!important;line-height:1.05!important;margin-top:5px!important}

  /* Upcoming lessons/tests: force two equal columns */
  #dashboard>.profile2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:8px!important;width:100%!important}
  #dashboard>.profile2>.card{width:100%!important;min-width:0!important;padding:11px!important;border-radius:12px!important;overflow:hidden!important}
  #dashboard>.profile2 h3{font-size:15px!important;line-height:1.2!important;margin:0 0 8px!important}
  #dashboard>.profile2 .listitem{padding:8px 0!important;font-size:11px!important;line-height:1.25!important;overflow-wrap:anywhere!important}
  #dashboard>.profile2 .listitem b{font-size:11px!important}
  #dashboard>.profile2 .muted{font-size:10px!important}

  /* Other pages */
  .toolbar{gap:7px!important}
  .toolbar>*{max-width:100%!important}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .formgrid{grid-template-columns:1fr!important}
  .formgrid .full{grid-column:auto!important}
  .card{border-radius:12px!important}
  .tablewrap{width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}

@media screen and (max-width:380px){
  header h1{font-size:17px!important}
  header .secondary{font-size:11px!important;padding:7px!important}
  #nav button{font-size:11px!important;padding:8px 10px!important}
  #dashboard>.grid{gap:6px!important}
  #dashboard>.grid>.card{height:86px!important;min-height:86px!important;padding:10px!important}
  #dashboard>.grid>.card .stat{font-size:22px!important}
  #dashboard>.profile2{gap:6px!important}
  #dashboard>.profile2>.card{padding:9px!important}
  #dashboard>.profile2 h3{font-size:14px!important}
}


/* ZNR Schedule Upgrade 8 — weekly timetable like a driving-school calendar */
.weekSchedule{background:#fff;border:1px solid #e4e8ef;border-radius:12px;overflow:hidden;min-width:0}
.weekTop{display:flex;border-bottom:1px solid #e4e8ef;position:sticky;top:0;z-index:2;background:#fff}
.timeCorner{width:48px;flex:0 0 48px;padding:9px 3px;text-align:center;font-size:10px;color:#687386;font-weight:700}
.weekDays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:1}
.weekDay{min-width:0;text-align:center;padding:7px 1px;border-left:1px solid #edf0f4;font-size:10px;color:#687386}
.weekDay b{display:block;font-size:14px;color:#172033;margin-top:2px}.weekDay.isToday{background:#eaf1ff;color:#1769ff}.weekDay.isToday b{color:#1769ff}
.weekBody{display:flex;max-height:650px;overflow-y:auto;overflow-x:hidden}
.timeAxis{width:48px;flex:0 0 48px;background:#fafbfc}.timeLabel{font-size:9px;color:#7b8493;text-align:right;padding:3px 4px 0 0;border-bottom:1px solid #eef1f5}
.weekColumns{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:1;position:relative}
.weekCol{height:832px;min-width:0;position:relative;border-left:1px solid #eef1f5;background:linear-gradient(to bottom,transparent 0,transparent 51px,#eef1f5 52px);background-size:100% 52px}
.todayCol{background-color:#fbfdff}.hourLine{position:absolute;left:0;right:0;border-top:1px solid #eef1f5;pointer-events:none}
.scheduleEvent{position:absolute;z-index:1;border-radius:6px;padding:3px 3px 2px;overflow:hidden;cursor:pointer;line-height:1.05;font-size:9px;border-left:3px solid #1769ff;background:#eaf1ff}
.scheduleEvent b,.scheduleEvent span,.scheduleEvent small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scheduleEvent b{font-size:9px}.scheduleEvent span{font-weight:700;margin-top:2px}.scheduleEvent small{font-size:7px;color:#687386;margin-top:2px}
.scheduleEvent.eventTest{background:#fff1d6;border-left-color:#f59e0b}.scheduleEvent.eventTest small{color:#925400}
@media(max-width:750px){
 .calendarCard{padding:6px!important}.weekSchedule{border-radius:10px}.timeCorner,.timeAxis{width:34px;flex-basis:34px}.timeLabel{font-size:8px;padding-right:3px}.weekDay{font-size:9px;padding:6px 0}.weekDay b{font-size:12px}.weekBody{max-height:620px}.weekCol{height:832px;background-size:100% 52px}.scheduleEvent{padding:3px 2px;font-size:8px;border-left-width:2px}.scheduleEvent b{font-size:8px}.scheduleEvent span{font-size:8px}.scheduleEvent small{font-size:6.5px}
}
@media(max-width:380px){.timeCorner,.timeAxis{width:30px;flex-basis:30px}.weekDay{font-size:8px}.weekDay b{font-size:11px}.scheduleEvent{font-size:7px}.scheduleEvent b,.scheduleEvent span{font-size:7px}.scheduleEvent small{font-size:6px}}

/* ZNR Schedule Upgrade 9 — fix calendar container width + improve colour/size */
#calendarGrid{display:block!important;width:100%!important;max-width:100%!important;overflow:hidden!important}
#calendarGrid .weekSchedule{width:100%!important;max-width:100%!important;display:block!important}
.weekSchedule{border:1px solid #d8dee8!important;border-radius:14px!important;box-shadow:0 3px 12px rgba(23,32,51,.08)!important}
.weekTop{background:#f7f9fc!important;border-bottom:2px solid #dbe2ec!important}
.timeCorner{width:62px!important;flex-basis:62px!important;font-size:11px!important;color:#4b5563!important;background:#f7f9fc!important}
.weekDay{padding:9px 3px!important;font-size:11px!important;background:#f7f9fc!important;border-left:1px solid #dfe5ed!important}
.weekDay b{font-size:17px!important;color:#111827!important}
.weekDay.isToday{background:#dbeafe!important;color:#1d4ed8!important}
.weekDay.isToday b{color:#1d4ed8!important}
.timeAxis{width:62px!important;flex-basis:62px!important;background:#fbfcfe!important}
.timeLabel{font-size:10px!important;color:#667085!important;border-bottom:1px solid #e1e7ef!important;padding:4px 6px 0 0!important}
.weekCol{height:896px!important;background:repeating-linear-gradient(to bottom,#fff 0,#fff 55px,#e5eaf1 56px,#fff 57px)!important;border-left:1px solid #e1e7ef!important}
.todayCol{background-color:#f5f9ff!important}
.hourLine{border-top:1px solid #e5eaf1!important}
.scheduleEvent{border-radius:8px!important;padding:5px 5px 4px!important;font-size:11px!important;border-left-width:4px!important;box-shadow:0 2px 5px rgba(23,32,51,.12)!important;background:#dbeafe!important;border-left-color:#2563eb!important}
.scheduleEvent b{font-size:11px!important;color:#0f172a!important}.scheduleEvent span{font-size:11px!important;color:#172033!important;margin-top:3px!important}.scheduleEvent small{font-size:9px!important;color:#475569!important;margin-top:3px!important}
.scheduleEvent.eventTest{background:#ffedd5!important;border-left-color:#f97316!important}.scheduleEvent.eventTest small{color:#9a3412!important}
.scheduleEvent.eventLesson:nth-of-type(odd){background:#dcfce7!important;border-left-color:#16a34a!important}
.scheduleEvent.eventLesson:nth-of-type(even){background:#dbeafe!important;border-left-color:#2563eb!important}
@media(max-width:750px){
 #calendarGrid{width:100%!important;display:block!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important}
 #calendarGrid .weekSchedule{width:100%!important;min-width:0!important}
 .timeCorner,.timeAxis{width:48px!important;flex-basis:48px!important}
 .weekDay{padding:8px 2px!important;font-size:10px!important}.weekDay b{font-size:15px!important}
 .weekCol{height:960px!important}
 .scheduleEvent{padding:5px 4px!important;font-size:10px!important;border-left-width:3px!important}.scheduleEvent b{font-size:10px!important}.scheduleEvent span{font-size:10px!important}.scheduleEvent small{font-size:8px!important}
}
@media(max-width:420px){
 .timeCorner,.timeAxis{width:44px!important;flex-basis:44px!important}.timeLabel{font-size:9px!important;padding-right:4px!important}
 .weekDay{font-size:9px!important}.weekDay b{font-size:14px!important}
 .weekCol{height:960px!important}.scheduleEvent{padding:4px 3px!important}.scheduleEvent b,.scheduleEvent span{font-size:9px!important}.scheduleEvent small{font-size:7px!important}
}


/* ZNR Schedule Upgrade 10 — larger, richer mobile timetable */
@media screen and (max-width:750px){
  #calendarGrid{overflow-x:auto!important;overflow-y:hidden!important;width:100%!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important}
  #calendarGrid .weekSchedule{min-width:720px!important;width:720px!important;max-width:none!important}
  #calendarGrid .weekDays,#calendarGrid .weekColumns{grid-template-columns:repeat(7,92px)!important}
  #calendarGrid .timeCorner,#calendarGrid .timeAxis{width:50px!important;flex-basis:50px!important}
  #calendarGrid .weekDay{font-size:11px!important;padding:10px 2px!important;min-height:52px!important}
  #calendarGrid .weekDay b{font-size:17px!important;margin-top:3px!important}
  #calendarGrid .weekCol{height:960px!important;min-width:92px!important;background:repeating-linear-gradient(to bottom,#fff 0,#fff 55px,#d9e2ef 56px,#fff 57px)!important}
  #calendarGrid .todayCol{background-color:#eef6ff!important}
  #calendarGrid .scheduleEvent{border-radius:9px!important;padding:6px 6px 5px!important;font-size:11px!important;border-left-width:4px!important;box-shadow:0 2px 6px rgba(23,32,51,.16)!important}
  #calendarGrid .scheduleEvent b{font-size:11px!important;line-height:1.15!important}
  #calendarGrid .scheduleEvent span{font-size:11px!important;line-height:1.15!important;margin-top:3px!important}
  #calendarGrid .scheduleEvent small{font-size:9px!important;line-height:1.1!important;margin-top:3px!important}
  #calendarGrid .scheduleEvent.eventLesson:nth-of-type(odd){background:#bbf7d0!important;border-left-color:#16a34a!important}
  #calendarGrid .scheduleEvent.eventLesson:nth-of-type(even){background:#bfdbfe!important;border-left-color:#2563eb!important}
  #calendarGrid .scheduleEvent.eventTest{background:#fed7aa!important;border-left-color:#ea580c!important}
}
@media screen and (max-width:420px){
  #calendarGrid .weekSchedule{min-width:720px!important;width:720px!important}
  #calendarGrid .weekDays,#calendarGrid .weekColumns{grid-template-columns:repeat(7,92px)!important}
  #calendarGrid .weekDay{font-size:11px!important}
  #calendarGrid .weekDay b{font-size:17px!important}
  #calendarGrid .scheduleEvent b,#calendarGrid .scheduleEvent span{font-size:11px!important}
  #calendarGrid .scheduleEvent small{font-size:9px!important}
}

/* ZNR Schedule 2.0 */
.scheduleToolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.scheduleToolbar>#diaryInstructorFilter{min-width:190px;font-weight:600}.calendarNav,.calendarViews{display:flex;gap:6px}.calendarViews .activeView{background:#1769ff;color:#fff;border-color:#1769ff}.weekDay{cursor:pointer}.quickSlot{position:absolute;left:0;right:0;z-index:0;cursor:pointer}.quickSlot:hover{background:rgba(23,105,255,.06)}.scheduleEvent{z-index:3}.eventBooked{background:#bfdbfe!important;border-left-color:#2563eb!important}.eventCompleted{background:#bbf7d0!important;border-left-color:#16a34a!important}.eventCancelled{background:#fecaca!important;border-left-color:#dc2626!important;opacity:.82}.eventTest{background:#fed7aa!important;border-left-color:#ea580c!important}.dayTitle{display:flex;justify-content:space-between;align-items:center;padding:8px 2px 10px;font-size:15px}.monthCalendar{background:#fff;border:1px solid #d8dee8;border-radius:14px;overflow:hidden}.monthWeekdays,.monthGrid{display:grid;grid-template-columns:repeat(7,1fr)}.monthWeekdays>div{padding:10px 6px;background:#f7f9fc;border-right:1px solid #e5eaf1;border-bottom:1px solid #d8dee8;font-size:12px;font-weight:800;text-align:center}.monthCell{min-height:110px;padding:6px;border-right:1px solid #e5eaf1;border-bottom:1px solid #e5eaf1;cursor:pointer;background:#fff}.monthCell.outside{background:#f8fafc;color:#98a2b3}.monthCell.monthToday{background:#eef6ff}.monthCellHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.monthCellHead button{border:0;background:#eef2ff;color:#1769ff;border-radius:6px;width:24px;height:24px;cursor:pointer}.monthEvent{font-size:11px;line-height:1.2;border-left:3px solid #2563eb;border-radius:5px;padding:4px 5px;margin:3px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:#bfdbfe}.monthEvent.eventCompleted{border-left-color:#16a34a;background:#bbf7d0!important}.monthEvent.eventCancelled{border-left-color:#dc2626;background:#fecaca!important}.monthEvent.eventTest{border-left-color:#ea580c;background:#fed7aa!important}.monthEvent b{margin-right:3px}.monthCalendar + *{margin-top:12px}@media(max-width:750px){.scheduleToolbar{gap:6px}.scheduleToolbar .calendarNav,.scheduleToolbar .calendarViews{flex:1}.scheduleToolbar .calendarNav button,.scheduleToolbar .calendarViews button{flex:1;padding:9px 6px;font-size:11px}.scheduleToolbar>#addLesson{width:100%}.scheduleToolbar>#diaryInstructorFilter{width:100%;min-width:0}.scheduleToolbar>#calRange{width:100%;text-align:center}.monthCalendar{min-width:650px}.monthGrid{min-width:650px}.monthWeekdays{min-width:650px}.monthCell{min-height:90px}.monthEvent{font-size:10px;padding:3px}.dayTitle{font-size:14px}}

/* ZNR Schedule Upgrade 12 — refined mobile proportions + stronger navigation */
#nav button{font-weight:800!important;letter-spacing:.1px!important}
@media(max-width:750px){
  #nav{gap:3px!important;padding:5px 6px!important}
  #nav button{font-weight:800!important;padding:8px 10px!important;font-size:12px!important}
  #calendarGrid .weekSchedule{min-width:680px!important;width:680px!important}
  #calendarGrid .weekDays,#calendarGrid .weekColumns{grid-template-columns:repeat(7,86px)!important}
  #calendarGrid .weekCol{min-width:86px!important}
  .monthCalendar,.monthGrid,.monthWeekdays{min-width:610px!important}
  .monthCell{min-height:82px!important;padding:5px!important}
  .monthWeekdays>div{padding:8px 4px!important;font-size:11px!important}
  .monthEvent{font-size:9px!important;padding:3px 4px!important}
}

/* ZNR Schedule Upgrade 13 — compact week/day timetable and stronger booking visibility */
@media screen and (max-width:750px){
  #calendarGrid{overflow-x:auto!important;overflow-y:hidden!important}
  #calendarGrid .weekSchedule{min-width:610px!important;width:610px!important}
  #calendarGrid .weekDays,#calendarGrid .weekColumns{grid-template-columns:repeat(7,80px)!important}
  #calendarGrid .timeCorner,#calendarGrid .timeAxis{width:50px!important;flex-basis:50px!important}
  #calendarGrid .weekDay{padding:8px 2px!important;font-size:10px!important;min-height:48px!important}
  #calendarGrid .weekDay b{font-size:15px!important}
  #calendarGrid .weekCol{height:800px!important;min-width:80px!important;background:repeating-linear-gradient(to bottom,#fff 0,#fff 49px,#dbe3ee 50px,#fff 51px)!important}
  #calendarGrid .weekBody{max-height:560px!important}
  #calendarGrid .timeLabel{font-size:9px!important;height:50px!important;padding-top:3px!important}
  #calendarGrid .scheduleEvent{border-radius:8px!important;padding:4px 4px 3px!important;font-size:9px!important;border-left-width:3px!important;box-shadow:0 2px 5px rgba(23,32,51,.14)!important}
  #calendarGrid .scheduleEvent b{font-size:9px!important;line-height:1.1!important}
  #calendarGrid .scheduleEvent span{font-size:9px!important;line-height:1.1!important;margin-top:2px!important}
  #calendarGrid .scheduleEvent small{font-size:7px!important;line-height:1.05!important;margin-top:2px!important}
  #calendarGrid .eventBooked{background:#bfdbfe!important;border-left-color:#2563eb!important}
  #calendarGrid .eventCompleted{background:#bbf7d0!important;border-left-color:#16a34a!important}
  #calendarGrid .eventCancelled{background:#fecaca!important;border-left-color:#dc2626!important}
  #calendarGrid .eventTest{background:#fed7aa!important;border-left-color:#ea580c!important}
}
@media screen and (max-width:420px){
  #calendarGrid .weekSchedule{min-width:590px!important;width:590px!important}
  #calendarGrid .weekDays,#calendarGrid .weekColumns{grid-template-columns:repeat(7,77px)!important}
  #calendarGrid .weekCol{min-width:77px!important}
  #calendarGrid .scheduleEvent{padding:3px!important}
  #calendarGrid .scheduleEvent b,#calendarGrid .scheduleEvent span{font-size:8.5px!important}
  #calendarGrid .scheduleEvent small{font-size:6.5px!important}
}
/* Make the day view use the screen width while keeping the timetable compact */
@media screen and (max-width:750px){
  .dayCalendar #calendarGrid .weekSchedule{min-width:0!important;width:100%!important}
  .dayCalendar #calendarGrid .weekDays,.dayCalendar #calendarGrid .weekColumns{grid-template-columns:minmax(0,1fr)!important}
  .dayCalendar #calendarGrid .weekCol{min-width:0!important}
}


/* ZNR Schedule Upgrade 14 — visible mobile week-view refinement + cache-bust */
@media screen and (max-width:750px){
  /* Keep the whole week visible instead of forcing a wide 680px canvas */
  #calendarGrid{overflow-x:hidden!important;width:100%!important}
  #calendarGrid .weekSchedule{width:100%!important;min-width:0!important;max-width:none!important}
  #calendarGrid .weekDays,#calendarGrid .weekColumns{grid-template-columns:repeat(7,minmax(0,1fr))!important}
  #calendarGrid .timeCorner,#calendarGrid .timeAxis{width:42px!important;flex-basis:42px!important}
  #calendarGrid .weekDay{padding:7px 1px!important;font-size:9px!important;line-height:1.05!important}
  #calendarGrid .weekDay b{font-size:13px!important;display:block!important;margin-top:2px!important}
  #calendarGrid .weekDay small{font-size:7px!important}
  #calendarGrid .weekCol{min-width:0!important;height:720px!important;background:repeating-linear-gradient(to bottom,#fff 0,#fff 44px,#d9e2ef 45px,#fff 46px)!important}
  #calendarGrid .weekBody{max-height:540px!important}
  #calendarGrid .timeLabel{height:45px!important;font-size:8px!important;padding:3px 3px 0 0!important}
  #calendarGrid .scheduleEvent{padding:4px 2px!important;border-radius:7px!important;border-left-width:3px!important}
  #calendarGrid .scheduleEvent b,#calendarGrid .scheduleEvent span{font-size:8px!important;line-height:1.05!important}
  #calendarGrid .scheduleEvent small{font-size:6.5px!important;line-height:1!important}
}
@media screen and (max-width:420px){
  #calendarGrid .timeCorner,#calendarGrid .timeAxis{width:39px!important;flex-basis:39px!important}
  #calendarGrid .weekDay{font-size:8px!important}
  #calendarGrid .weekDay b{font-size:12px!important}
  #calendarGrid .weekCol{height:720px!important}
  #calendarGrid .scheduleEvent b,#calendarGrid .scheduleEvent span{font-size:7.5px!important}
}

/* ZNR Schedule Upgrade 15 — mobile month view horizontal scrolling */
@media screen and (max-width:750px){
  .calendarCard{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
  #calendarGrid.monthCalendarGrid{display:block!important;width:680px!important;min-width:680px!important;max-width:none!important;overflow:visible!important}
  #calendarGrid.monthCalendarGrid .monthCalendar{width:680px!important;min-width:680px!important;max-width:none!important}
  #calendarGrid.monthCalendarGrid .monthWeekdays,#calendarGrid.monthCalendarGrid .monthGrid{width:680px!important;min-width:680px!important;grid-template-columns:repeat(7,1fr)!important}
  #calendarGrid.monthCalendarGrid .monthCell{min-height:86px!important}
}
@media screen and (max-width:420px){
  #calendarGrid.monthCalendarGrid,#calendarGrid.monthCalendarGrid .monthCalendar{width:630px!important;min-width:630px!important}
  #calendarGrid.monthCalendarGrid .monthWeekdays,#calendarGrid.monthCalendarGrid .monthGrid{width:630px!important;min-width:630px!important}
}

/* ZNR Student Management 2.0 */
.studentProfileHeader{display:flex;align-items:center;gap:14px;margin-bottom:14px}.studentAvatar{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e8f0ff;color:#1769ff;font-size:25px;font-weight:800}.studentProfileTitle h2{margin:0 0 4px}.studentProfileTitle .badge{display:inline-block;margin-top:7px}.studentQuickActions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.studentStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.studentStats .card{min-width:0}.studentStats .stat{font-size:22px}.studentDue{color:#991b1b}.studentInfoGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.detailLine{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}.detailLine:last-child{border-bottom:0}.detailLine span{color:var(--muted)}.detailLine b{text-align:right;overflow-wrap:anywhere}.nextBox{padding:10px 12px;background:#f7f9fc;border-radius:10px;margin:8px 0}.nextBox b,.nextBox span,.nextBox small{display:block}.nextBox span{margin-top:3px}.nextBox small{margin-top:3px;color:var(--muted)}.studentHistoryCard{margin-top:12px}.studentHistoryCard h3{margin-top:0}.studentHistoryRow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}.studentHistoryRow:last-child{border-bottom:0}.studentHistoryRow>div{min-width:0}.studentHistoryRow b,.studentHistoryRow .muted{display:block;overflow-wrap:anywhere}.studentHistoryRow button{flex-shrink:0}.studentNotes{margin-top:12px}.studentNotes h3{margin-top:0}
@media(max-width:750px){.studentStats{grid-template-columns:1fr 1fr;gap:8px}.studentInfoGrid{grid-template-columns:1fr;gap:8px}.studentProfileHeader{gap:10px}.studentAvatar{width:50px;height:50px;font-size:22px}.studentQuickActions button{flex:1 1 calc(50% - 8px)}.studentHistoryRow{align-items:flex-start}.studentHistoryRow button{padding:8px 10px;font-size:12px}.studentStats .card{padding:10px}.studentStats .stat{font-size:20px}}

.studentProgress{margin-bottom:12px;padding:14px 16px}.progressTop{display:flex;justify-content:space-between;align-items:center;gap:16px}.studentProgress b{display:block;font-size:18px;margin-top:3px}.progressMeta{display:flex;gap:18px;color:var(--muted);font-size:13px;text-align:right}.progressBar{height:8px;background:#edf0f4;border-radius:999px;overflow:hidden;margin-top:12px}.progressBarFill{height:100%;border-radius:999px;background:var(--accent);transition:width .2s ease}.rowActions{display:flex;gap:6px;align-items:center;flex-shrink:0}.successBtn{border:1px solid #b7e4c7;background:#e9f9ef;color:#176b35;border-radius:9px;padding:8px 10px;font-weight:700;cursor:pointer}.sectionCount{font-size:12px;color:var(--muted);font-weight:600;margin-left:5px}.testNext{border-left:4px solid #f59e0b}
@media(max-width:750px){.progressTop{display:block}.progressMeta{justify-content:space-between;text-align:left;margin-top:8px;gap:8px}.rowActions{flex-direction:column;align-items:stretch}.rowActions button{width:100%}.studentQuickActions button{flex:1 1 calc(50% - 8px)}}

/* ZNR Student Progress 2.2 — instructor progress tracking */
.progressDetails{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #edf0f4}.progressDetails>div{display:flex;flex-direction:column;gap:3px;min-width:0}.progressDetails b{font-size:13px;line-height:1.35;font-weight:600;overflow-wrap:anywhere}.studentNotes{line-height:1.5}@media(max-width:750px){.progressDetails{grid-template-columns:1fr;gap:8px}.progressDetails b{font-size:12px}}

/* ZNR STUDENT PROGRESS 2.4 - clearer progress card */
.studentProgress{padding:16px 18px!important;margin-bottom:12px}.progressHeading{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.progressHeading b{display:block;font-size:20px;margin-top:4px}.progressPercent{font-size:18px;font-weight:800;color:var(--accent)}.progressBar{height:12px!important;background:#e5e7eb!important;border-radius:999px!important;overflow:hidden;margin-top:12px!important}.progressBarFill{height:100%;min-width:4px;background:var(--accent)!important;border-radius:999px;transition:width .25s ease}.progressMeta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;margin-top:8px}.progressDetails{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #edf0f4}.progressDetails>div{background:#f8fafc;border:1px solid #edf0f4;border-radius:10px;padding:11px;display:flex;flex-direction:column;gap:5px;min-width:0}.progressDetails b{font-size:13px;line-height:1.4;overflow-wrap:anywhere}.progressNotes{margin-top:12px;padding:12px;background:#f8fafc;border:1px solid #edf0f4;border-radius:10px;line-height:1.5}.progressNotes .muted{display:block;margin-bottom:5px}.progressNotes div{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:750px){.studentProgress{padding:14px!important}.progressHeading b{font-size:18px}.progressPercent{font-size:16px}.progressMeta{font-size:12px}.progressDetails{grid-template-columns:1fr;gap:8px}.progressDetails>div{padding:10px}.progressNotes{font-size:13px}}

/* ZNR Schedule 3.2 — drag and drop */
.draggableLesson{cursor:grab}.draggableLesson:active{cursor:grabbing}.draggingLesson{opacity:.55;transform:scale(.98)}.dropTarget{outline:2px dashed var(--accent);outline-offset:-3px}

/* Schedule 3.5 - student balance on lesson cards */
.eventBalance,.listBalance{font-weight:700}.dueBalance{color:#b91c1c}.paidBalance{color:#15803d}.scheduleEvent .eventBalance{display:inline-block;margin-top:2px}.lesson .listBalance{font-size:13px}

.lessonNotePreview{display:inline;overflow-wrap:anywhere}.formgrid textarea{min-height:78px;resize:vertical}.lessonNotesBlock{margin-top:6px}

/* Schedule 3.8 - quick payment panel */
.paymentStudentSummary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;padding:12px 14px;border:1px solid #dbe2ea;border-radius:12px;background:#f8fafc}.paymentStudentSummary>div{display:flex;flex-direction:column;gap:4px}.paymentStudentSummary b{font-size:16px}.paymentStudentSummary strong{font-size:18px}.dueText{color:#b91c1c}.paidText{color:#15803d}.paymentQuickAmounts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 4px}.paymentQuickAmounts button{min-height:40px}@media(max-width:650px){.paymentStudentSummary{grid-template-columns:1fr}.paymentQuickAmounts{align-items:stretch}.paymentQuickAmounts button{flex:1}}


/* ZNR Payment 3.9 - confirmation and receipt */
.paymentConfirmation{text-align:left}.successIcon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#dcfce7;color:#15803d;font-size:28px;font-weight:800;margin-bottom:10px}.receiptCard{display:grid;gap:0;margin-top:16px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#f8fafc}.receiptCard>div{display:flex;justify-content:space-between;gap:18px;padding:12px 14px;border-bottom:1px solid #e5e7eb}.receiptCard>div:last-child{border-bottom:0}.receiptCard b,.receiptCard strong{text-align:right}.receiptNote{align-items:flex-start!important;flex-direction:column}.paymentConfirmation .actions{justify-content:flex-end;margin-top:16px}

/* Student profile lesson groups */
.lessonGroup h4{margin:0 0 8px;font-size:15px}
.lessonGroup .studentHistoryRow{margin-bottom:6px}


/* =========================================================
   ZNR DIARY V1 — Total Drive inspired mobile timetable
   UI recreation only; uses the existing ZNR calendar/data.
   ========================================================= */
.diaryMobileHeader{display:none}

@media screen and (max-width:750px){
  /* Hide the desktop-style schedule toolbar on the phone.
     The existing controls remain available below for desktop. */
  .diaryMobileHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:58px;
    margin:-10px -10px 0;
    padding:10px 12px;
    background:linear-gradient(135deg,#10b8ee,#168ff0);
    color:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.16);
  }
  .diaryMonthTitle{
    font-size:22px;
    font-weight:800;
    letter-spacing:.1px;
  }
  .diaryMobileActions{
    display:flex;
    align-items:center;
    gap:5px;
  }
  .diaryMobileActions button{
    min-width:40px;
    height:40px;
    min-height:40px;
    padding:0 9px;
    border:0;
    background:transparent;
    color:#fff;
    border-radius:9px;
    font-size:21px;
    font-weight:700;
    cursor:pointer;
  }
  .diaryMobileActions #diaryMobileToday{
    font-size:13px;
    padding:0 8px;
  }
  .diaryMobileActions button:active{
    background:rgba(255,255,255,.16);
  }

  /* Total Drive-like day strip */
  #schedule .scheduleToolbar{
    display:flex!important;
    margin:0 -2px 8px;
    padding:7px 0 0;
    gap:5px!important;
    background:#fff;
    flex-wrap:nowrap!important;
  }
  #schedule .scheduleToolbar > #addLesson{
    display:none!important;
  }
  #schedule .scheduleToolbar .calendarNav{
    display:flex;
    order:1;
    flex:0 0 auto!important;
  }
  #schedule .scheduleToolbar .calendarViews{
    display:flex;
    order:2;
    flex:1!important;
  }
  #schedule .scheduleToolbar .calendarNav button,
  #schedule .scheduleToolbar .calendarViews button{
    min-height:38px!important;
    padding:7px 8px!important;
    font-size:11px!important;
  }
  #schedule .scheduleToolbar #calPrev{
    font-size:0!important;
  }
  #schedule .scheduleToolbar #calPrev:after{content:"‹";font-size:24px;line-height:1}
  #schedule .scheduleToolbar #calNext{
    font-size:0!important;
  }
  #schedule .scheduleToolbar #calNext:after{content:"›";font-size:24px;line-height:1}
  #schedule .scheduleToolbar #calToday{
    font-size:11px!important;
  }
  #schedule .scheduleToolbar #calRange{
    order:3;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:120px;
    text-align:right!important;
    font-size:10px!important;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  #schedule .calendarCard{
    margin:0 -2px;
    padding:0!important;
    background:#fff!important;
    border:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  /* Make the seven columns fit the phone, like the supplied screenshot. */
  #calendarGrid{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    display:block!important;
  }
  #calendarGrid .weekSchedule{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    border:1px solid #e1e5ea!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  #calendarGrid .weekTop{
    position:sticky;
    top:0;
    z-index:4;
    background:#fff!important;
    border-bottom:1px solid #d9dde3!important;
  }
  #calendarGrid .timeCorner,
  #calendarGrid .timeAxis{
    width:40px!important;
    flex-basis:40px!important;
  }
  #calendarGrid .timeCorner{
    padding:7px 2px!important;
    font-size:8px!important;
    color:#737b86!important;
    background:#fff!important;
  }
  #calendarGrid .weekDays,
  #calendarGrid .weekColumns{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
  }
  #calendarGrid .weekDay{
    min-width:0!important;
    padding:7px 1px 6px!important;
    font-size:9px!important;
    line-height:1.05!important;
    background:#fff!important;
    border-left:1px solid #eceff2!important;
  }
  #calendarGrid .weekDay b{
    margin-top:3px!important;
    font-size:14px!important;
    line-height:1!important;
  }
  #calendarGrid .weekDay small{
    display:block!important;
    margin-top:2px!important;
    font-size:7px!important;
    color:#7b8490!important;
  }
  #calendarGrid .weekDay.isToday{
    background:#f0f8ff!important;
    color:#168ff0!important;
    box-shadow:inset 0 -3px 0 #11b7ed;
  }
  #calendarGrid .weekDay.isToday b{
    color:#168ff0!important;
  }
  #calendarGrid .weekBody{
    max-height:calc(100vh - 230px)!important;
    min-height:520px;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  #calendarGrid .weekCol{
    min-width:0!important;
    height:900px!important;
    background:repeating-linear-gradient(
      to bottom,
      #fff 0,
      #fff 50px,
      #e9edf1 51px,
      #fff 52px
    )!important;
    border-left:1px solid #edf0f3!important;
  }
  #calendarGrid .todayCol{
    background-color:#fbfdff!important;
  }
  #calendarGrid .timeLabel{
    height:52px!important;
    padding:3px 3px 0 0!important;
    font-size:8px!important;
    color:#737b86!important;
    background:#fff!important;
    border-bottom:1px solid #e9edf1!important;
  }
  #calendarGrid .hourLine{
    border-top:1px solid #e9edf1!important;
  }
  #calendarGrid .scheduleEvent{
    border-radius:5px!important;
    padding:4px 3px!important;
    border-left-width:3px!important;
    box-shadow:0 1px 3px rgba(0,0,0,.12)!important;
    line-height:1.05!important;
    overflow:hidden!important;
  }
  #calendarGrid .scheduleEvent b{
    font-size:8px!important;
    line-height:1.05!important;
  }
  #calendarGrid .scheduleEvent span{
    font-size:8px!important;
    line-height:1.08!important;
    margin-top:2px!important;
  }
  #calendarGrid .scheduleEvent small{
    font-size:6.5px!important;
    line-height:1.05!important;
    margin-top:2px!important;
  }
  #calendarGrid .eventBooked{
    background:#dceeff!important;
    border-left-color:#1b8fe8!important;
  }
  #calendarGrid .eventCompleted{
    background:#d9f5df!important;
    border-left-color:#25a65a!important;
  }
  #calendarGrid .eventCancelled{
    background:#fde0e0!important;
    border-left-color:#d83b3b!important;
  }
  #calendarGrid .eventTest{
    background:#fff0d5!important;
    border-left-color:#ee8a00!important;
  }

  /* Total Drive-like day view: use full phone width. */
  #calendarGrid.dayCalendarGrid .weekSchedule{
    width:100%!important;
  }
  #calendarGrid.dayCalendarGrid .weekDays,
  #calendarGrid.dayCalendarGrid .weekColumns{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #calendarGrid.dayCalendarGrid .weekCol{
    min-width:0!important;
  }

  /* Hide the duplicate long lesson list on phones; the timetable is the primary diary. */
  #scheduleList{
    margin-top:8px!important;
  }
  #scheduleList .card{
    border-radius:10px!important;
    padding:10px!important;
  }

  /* Month view remains scrollable because seven full calendar columns need room. */
  #calendarGrid.monthCalendarGrid{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
}

/* Very small phones */
@media screen and (max-width:380px){
  .diaryMonthTitle{font-size:21px}
  .diaryMobileActions button{min-width:36px;padding:0 7px}
  #schedule .scheduleToolbar .calendarNav button,
  #schedule .scheduleToolbar .calendarViews button{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  #calendarGrid .timeCorner,
  #calendarGrid .timeAxis{
    width:36px!important;
    flex-basis:36px!important;
  }
  #calendarGrid .weekDay{font-size:8px!important}
  #calendarGrid .weekDay b{font-size:13px!important}
  #calendarGrid .scheduleEvent b,
  #calendarGrid .scheduleEvent span{font-size:7.5px!important}
  #calendarGrid .scheduleEvent small{font-size:6px!important}
}

/* =========================================================
   ZNR DIARY V2 — mobile timetable readability
   ========================================================= */
.eventMetaMobile,.shortEventStudent{display:none!important}

@media screen and (max-width:750px){
  /* Keep the 7-day week visible on normal phone widths, but give each day enough room
     for readable lesson cards. Narrower phones can swipe horizontally. */
  #calendarGrid{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
  #calendarGrid::-webkit-scrollbar{display:none}
  #calendarGrid .weekSchedule{width:672px!important;min-width:672px!important;max-width:none!important}
  #calendarGrid .weekDays,#calendarGrid .weekColumns{grid-template-columns:repeat(7,90px)!important}
  #calendarGrid .timeCorner,#calendarGrid .timeAxis{width:42px!important;flex-basis:42px!important}
  #calendarGrid .weekDay{height:58px!important;min-height:58px!important;padding:8px 2px!important;font-size:10px!important;line-height:1.05!important}
  #calendarGrid .weekDay span{display:block!important;font-weight:700!important;color:#667085!important}
  #calendarGrid .weekDay b{font-size:16px!important;line-height:1.05!important;margin-top:4px!important}
  #calendarGrid .weekDay small{font-size:7px!important;margin-top:3px!important;color:#7b8490!important}
  #calendarGrid .weekDay.isToday{box-shadow:inset 0 -3px 0 #168ff0!important}
  #calendarGrid .weekBody{max-height:calc(100vh - 360px)!important;min-height:520px!important}
  #calendarGrid .weekCol{height:832px!important;min-width:90px!important;background:repeating-linear-gradient(to bottom,#fff 0,#fff 51px,#e1e6ed 52px,#fff 53px)!important}
  #calendarGrid .todayCol{background-color:#f7fbff!important}
  #calendarGrid .timeLabel{height:52px!important;padding:4px 4px 0 0!important;font-size:9px!important;font-weight:600!important;color:#697386!important}
  #calendarGrid .hourLine{border-top:1px solid #e1e6ed!important}

  /* Clearer lesson cards */
  #calendarGrid .scheduleEvent{
    border-radius:9px!important;
    padding:5px 5px 4px!important;
    border-left-width:4px!important;
    box-shadow:0 1px 4px rgba(15,23,42,.14)!important;
    line-height:1.08!important;
  }
  #calendarGrid .scheduleEvent .eventTime{
    display:block!important;
    font-size:11px!important;
    line-height:1.05!important;
    font-weight:800!important;
    letter-spacing:.1px!important;
  }
  #calendarGrid .scheduleEvent .fullEventStudent{display:none!important}
  #calendarGrid .scheduleEvent .shortEventStudent{
    display:block!important;
    font-size:11px!important;
    line-height:1.12!important;
    margin-top:3px!important;
    font-weight:800!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #calendarGrid .scheduleEvent .eventMetaDesktop{display:none!important}
  #calendarGrid .scheduleEvent .eventMetaMobile{
    display:block!important;
    font-size:8px!important;
    line-height:1.05!important;
    margin-top:4px!important;
    font-weight:600!important;
    color:#475569!important;
  }
  #calendarGrid .eventBooked{background:#d8ebff!important;border-left-color:#1677df!important}
  #calendarGrid .eventCompleted{background:#d7f5df!important;border-left-color:#18a957!important}
  #calendarGrid .eventCancelled{background:#fde0e0!important;border-left-color:#dc3b3b!important;opacity:.86!important}
  #calendarGrid .eventTest{background:#ffe9c7!important;border-left-color:#ed8500!important}

  /* Short cards for very short lessons: prioritise time + student. */
  #calendarGrid .scheduleEvent[style*="height:34px"] .eventMetaMobile,
  #calendarGrid .scheduleEvent[style*="height:38px"] .eventMetaMobile{display:none!important}
}

@media screen and (max-width:700px){
  #calendarGrid .weekSchedule{width:672px!important;min-width:672px!important}
}

@media screen and (max-width:380px){
  #calendarGrid .weekSchedule{width:672px!important;min-width:672px!important}
  #calendarGrid .timeCorner,#calendarGrid .timeAxis{width:40px!important;flex-basis:40px!important}
  #calendarGrid .weekDays,#calendarGrid .weekColumns{grid-template-columns:repeat(7,90px)!important}
  #calendarGrid .scheduleEvent .eventTime{font-size:10px!important}
  #calendarGrid .scheduleEvent .shortEventStudent{font-size:10px!important}
  #calendarGrid .scheduleEvent .eventMetaMobile{font-size:7.5px!important}
}


/* =========================================================
   ZNR DIARY V3 — phone week view: all 7 days visible
   ========================================================= */
@media screen and (max-width:750px){
  #calendarGrid{overflow-x:hidden!important;overflow-y:hidden!important;width:100%!important}
  #calendarGrid .weekSchedule{width:100%!important;min-width:0!important;max-width:none!important}
  #calendarGrid .weekDays,#calendarGrid .weekColumns{grid-template-columns:repeat(7,minmax(0,1fr))!important}
  #calendarGrid .timeCorner,#calendarGrid .timeAxis{width:42px!important;flex-basis:42px!important;min-width:42px!important}
  #calendarGrid .weekDay{height:58px!important;min-height:58px!important;padding:7px 1px!important;font-size:9px!important}
  #calendarGrid .weekDay b{font-size:16px!important}
  #calendarGrid .weekDay small{font-size:7px!important}
  #calendarGrid .weekBody{max-height:calc(100vh - 350px)!important;min-height:520px!important}
  #calendarGrid .weekCol{height:832px!important;min-width:0!important;background:repeating-linear-gradient(to bottom,#fff 0,#fff 51px,#e1e6ed 52px,#fff 53px)!important}
  #calendarGrid .scheduleEvent{
    left:2px!important;right:2px!important;
    border-radius:8px!important;
    padding:5px 3px 4px!important;
    border-left-width:4px!important;
    box-shadow:0 1px 3px rgba(15,23,42,.13)!important;
    line-height:1.05!important;
  }
  #calendarGrid .scheduleEvent .eventTime{
    font-size:10px!important;font-weight:800!important;line-height:1.05!important;
  }
  #calendarGrid .scheduleEvent .shortEventStudent{
    font-size:10px!important;font-weight:800!important;line-height:1.08!important;
    margin-top:3px!important;white-space:nowrap!important;overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #calendarGrid .scheduleEvent .eventMetaMobile{
    display:block!important;font-size:7.5px!important;line-height:1.05!important;
    margin-top:3px!important;font-weight:600!important;color:#475569!important;
  }
}
@media screen and (max-width:380px){
  #calendarGrid .timeCorner,#calendarGrid .timeAxis{width:38px!important;flex-basis:38px!important;min-width:38px!important}
  #calendarGrid .weekDay{font-size:8px!important}
  #calendarGrid .weekDay b{font-size:14px!important}
  #calendarGrid .weekDay small{font-size:6.5px!important}
  #calendarGrid .scheduleEvent .eventTime,#calendarGrid .scheduleEvent .shortEventStudent{font-size:8.5px!important}
  #calendarGrid .scheduleEvent .eventMetaMobile{font-size:7px!important}
}

/* =========================================================
   ZNR DIARY V4 — readable lesson cards on narrow phones
   ========================================================= */
@media screen and (max-width:750px){
  #calendarGrid .scheduleEvent{
    padding:5px 2px 4px!important;
    border-left-width:4px!important;
    border-radius:8px!important;
  }
  #calendarGrid .scheduleEvent .eventTime{
    display:block!important;
    font-size:10px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  #calendarGrid .scheduleEvent .shortEventStudent{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    font-size:9.5px!important;
    line-height:1.08!important;
    margin-top:3px!important;
    font-weight:800!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  #calendarGrid .scheduleEvent .eventMetaMobile{
    font-size:7.5px!important;
    line-height:1.05!important;
    margin-top:3px!important;
    white-space:nowrap!important;
  }
}
@media screen and (max-width:380px){
  #calendarGrid .scheduleEvent .eventTime{font-size:9px!important}
  #calendarGrid .scheduleEvent .shortEventStudent{font-size:8.5px!important}
  #calendarGrid .scheduleEvent .eventMetaMobile{font-size:7px!important}
}

/* =========================================================
   ZNR DIARY V5 — clean phone lesson cards
   Keep names readable; never split a student's name mid-word.
   ========================================================= */
@media screen and (max-width:750px){
  #calendarGrid .scheduleEvent{
    padding:5px 3px 4px!important;
    border-radius:8px!important;
    overflow:hidden!important;
  }
  #calendarGrid .scheduleEvent .eventTime{
    font-size:10px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #calendarGrid .scheduleEvent .shortEventStudent{
    display:block!important;
    font-size:10px!important;
    line-height:1.1!important;
    margin-top:3px!important;
    font-weight:800!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  #calendarGrid .scheduleEvent .eventMetaMobile{
    display:block!important;
    font-size:7.5px!important;
    line-height:1.05!important;
    margin-top:3px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}
@media screen and (max-width:380px){
  #calendarGrid .scheduleEvent .eventTime{font-size:9px!important}
  #calendarGrid .scheduleEvent .shortEventStudent{font-size:9px!important}
  #calendarGrid .scheduleEvent .eventMetaMobile{font-size:7px!important}
}

/* =========================================================
   ZNR DIARY V6 — phone lesson cards: prioritise student name
   ========================================================= */
@media screen and (max-width:750px){
  #calendarGrid .scheduleEvent{
    padding:5px 3px 4px!important;
    border-radius:8px!important;
  }
  #calendarGrid .scheduleEvent .eventTime{
    font-size:10px!important;
    font-weight:900!important;
    line-height:1.05!important;
    letter-spacing:-.1px!important;
  }
  #calendarGrid .scheduleEvent .shortEventStudent{
    font-size:9px!important;
    line-height:1.08!important;
    margin-top:3px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    letter-spacing:-.15px!important;
  }
  #calendarGrid .scheduleEvent .eventMetaMobile{
    font-size:7.5px!important;
    line-height:1.05!important;
    margin-top:3px!important;
    font-weight:700!important;
  }
}
@media screen and (max-width:380px){
  #calendarGrid .scheduleEvent .eventTime{font-size:9px!important}
  #calendarGrid .scheduleEvent .shortEventStudent{font-size:8.5px!important}
  #calendarGrid .scheduleEvent .eventMetaMobile{font-size:7px!important}
}

/* ZNR Diary V7 — tap a lesson to open a clean details card */
.lessonDetailsModal{max-width:680px;margin:0 auto}
.lessonDetailsHead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border-bottom:1px solid #e8edf4;padding-bottom:14px}
.lessonDetailsEyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;color:#1769ff;margin-bottom:4px}
.lessonDetailsHead h2{margin:0;font-size:25px;line-height:1.15;color:#111827}
.lessonDetailsDate{margin-top:7px;color:#687386;font-size:14px;font-weight:600}
.lessonDetailsClose{border:0;background:#f1f4f8;color:#445064;width:38px;height:38px;border-radius:50%;font-size:25px;line-height:1;cursor:pointer;flex:0 0 auto}
.lessonDetailsStatus{display:inline-flex;margin:14px 0 12px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:800}
.detailStatusBooked{background:#dbeafe;color:#1d4ed8}.detailStatusCompleted{background:#dcfce7;color:#15803d}.detailStatusCancelled{background:#fee2e2;color:#b91c1c}
.lessonDetailsGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.lessonDetailItem{background:#f7f9fc;border:1px solid #e7ebf1;border-radius:10px;padding:11px 10px;min-width:0}
.lessonDetailItem span{display:block;font-size:10px;color:#7b8493;font-weight:700;margin-bottom:4px}.lessonDetailItem b{font-size:14px;color:#172033;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lessonDetailsNotes{margin-top:14px;border-top:1px solid #e8edf4;padding-top:12px}.lessonDetailsNotes h3{margin:0 0 8px;font-size:16px}
.lessonNoteRow{padding:9px 0;border-bottom:1px solid #eef1f5;font-size:13px;line-height:1.4}.lessonNoteRow b{display:block;color:#172033;margin-bottom:3px}.lessonNoteRow div{color:#4d596b;overflow-wrap:anywhere}
.lessonDetailsEmpty{margin-top:14px;padding:13px;background:#f7f9fc;border-radius:10px;color:#687386;font-size:13px}
.lessonDetailsActions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:18px}
@media(max-width:750px){
 .lessonDetailsModal{width:100%}
 .lessonDetailsHead h2{font-size:22px}
 .lessonDetailsDate{font-size:13px}
 .lessonDetailsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .lessonDetailItem{padding:10px}.lessonDetailItem b{font-size:13px}
 .lessonDetailsActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lessonDetailsActions button{width:100%;min-height:44px}
 .lessonDetailsActions .primary{grid-column:1/-1;order:-1}
}

/* ZNR Diary V8 — edit lesson date/time directly in the lesson details window */
.lessonDetailEditItem label{display:block;font-size:10px;color:#7b8493;font-weight:700;margin-bottom:5px}
.lessonDetailEditItem input{width:100%;box-sizing:border-box;border:1px solid #d9e0ea;background:#fff;border-radius:8px;padding:7px 6px;font:inherit;font-size:14px;font-weight:800;color:#172033;outline:none}
.lessonDetailEditItem input:focus{border-color:#1769ff;box-shadow:0 0 0 2px rgba(23,105,255,.12)}
.lessonDetailsSaveTime{display:block;width:100%;margin-top:10px;border:1px solid #1769ff;background:#eef5ff;color:#1769ff;border-radius:10px;min-height:42px;font-size:14px;font-weight:800;cursor:pointer}
.lessonDetailsSaveTime:active{transform:translateY(1px)}
@media(max-width:750px){
 .lessonDetailEditItem input{min-height:40px;font-size:14px}
 .lessonDetailsSaveTime{min-height:44px}
}


/* ZNR Diary V11 — clearer one-tap lesson quick actions */
.lessonDetailsActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.lessonDetailsActions button{min-height:46px;font-size:14px;font-weight:800;border-radius:10px}
.lessonDetailsActions .lessonQuickEdit{grid-column:1/-1;order:1}
.lessonDetailsActions .lessonQuickStudent{order:2}
.lessonDetailsActions .lessonQuickCancel{order:3}
.lessonDetailsActions .lessonQuickComplete{order:4}
.lessonDetailsActions .lessonQuickDelete{order:5;grid-column:1/-1}
.lessonDetailsActions .lessonQuickClose{order:6;grid-column:1/-1}
@media(max-width:750px){
 .lessonDetailsActions{grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
 .lessonDetailsActions button{min-height:48px;font-size:14px}
 .lessonDetailsActions .lessonQuickEdit{grid-column:1/-1}
 .lessonDetailsActions .lessonQuickClose{grid-column:1/-1}
}

/* ZNR Diary V14 — comfortable Edit Lesson form with date/time and optional payment */
.editLessonModal{max-width:1080px;margin:0 auto}
.editLessonHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.editLessonHeader h2{margin:0;color:#111827;font-size:27px;line-height:1.1}
.editLessonHeader p{margin:5px 0 0;color:#687386;font-size:14px}
.editLessonClose{border:0;background:#f1f4f8;color:#445064;width:42px;height:42px;border-radius:50%;font-size:27px;line-height:1;cursor:pointer;flex:0 0 auto}
.editLessonTopGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
.editField{min-width:0}
.editField label{display:block;font-size:12px;color:#445064;font-weight:800;margin:0 0 6px}
.editField input,.editField select,.editField textarea{width:100%;box-sizing:border-box;border:1px solid #d5dce7;background:#fff;border-radius:9px;padding:10px 11px;font:inherit;font-size:14px;color:#172033;outline:none}
.editField input,.editField select{min-height:42px}
.editField textarea{min-height:76px;resize:vertical;line-height:1.4}
.editField input:focus,.editField select:focus,.editField textarea:focus{border-color:#1769ff;box-shadow:0 0 0 3px rgba(23,105,255,.10)}
.editFieldStudent{grid-column:span 2}.editFieldRepeat{grid-column:span 2}
.currencyInput{display:flex;align-items:center;border:1px solid #d5dce7;background:#fff;border-radius:9px;overflow:hidden}
.currencyInput span{padding-left:11px;color:#687386;font-weight:800}
.currencyInput input{border:0!important;box-shadow:none!important;border-radius:0!important;padding-left:7px}
.editPaymentCard{grid-column:span 2;border:1px solid #bcd8ff;background:#f4f9ff;border-radius:12px;padding:12px}
.editPaymentHead b{display:block;color:#1769ff;font-size:14px}.editPaymentHead small{display:block;color:#687386;margin-top:3px;font-size:11px}
.editPaymentFields{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.editPaymentBottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:9px 10px;border-radius:10px;background:#e5f8ed}
.editPaymentBottom span{display:block;font-size:10px;color:#16804b;font-weight:700}.editPaymentBottom strong{display:block;font-size:16px;color:#087443;margin-top:2px}.editPaymentBottom button{min-height:40px;white-space:nowrap}
.editLessonNotes{border-top:1px solid #e4e8ef;margin-top:18px;padding-top:16px}
.editNotesHeading h3{margin:0;color:#172033;font-size:18px}.editNotesHeading p{margin:3px 0 12px;color:#687386;font-size:12px}
.editNotesGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.editFieldOther{grid-column:1/-1}
.editLessonActions{display:flex;justify-content:flex-end;align-items:center;gap:9px;margin-top:18px;padding-top:14px;border-top:1px solid #e4e8ef}
.editLessonActions button{min-height:44px;font-weight:800}
.editSaveButton{min-width:150px}
@media(max-width:750px){
 .editLessonModal{width:100%}
 .editLessonHeader h2{font-size:24px}.editLessonHeader p{font-size:13px}
 .editLessonTopGrid{grid-template-columns:1fr 1fr;gap:9px}
 .editFieldStudent,.editFieldRepeat{grid-column:1/-1}
 .editPaymentCard{grid-column:1/-1}
 .editPaymentFields{grid-template-columns:1fr 1fr}
 .editNotesGrid{grid-template-columns:1fr;gap:9px}
 .editFieldOther{grid-column:auto}
 .editLessonActions{display:grid;grid-template-columns:1fr 1fr}
 .editLessonActions .editSaveButton{grid-column:1/-1;order:-1;width:100%}
 .editLessonActions button{width:100%;min-height:48px}
 .editPaymentBottom{align-items:stretch;flex-direction:column}.editPaymentBottom button{width:100%}
}
@media(max-width:380px){
 .editLessonHeader h2{font-size:22px}.editLessonTopGrid{grid-template-columns:1fr}.editFieldStudent,.editFieldRepeat,.editPaymentCard{grid-column:auto}.editPaymentFields{grid-template-columns:1fr}
 .editLessonActions{grid-template-columns:1fr}
 .editLessonActions .editSaveButton{grid-column:auto}
}

/* ZNR Diary V16 — dedicated comfortable mobile Edit Lesson layout */
@media screen and (max-width:750px){
  .editLessonModal{width:100%;max-width:none;margin:0}
  .editLessonHeader{margin-bottom:20px;gap:12px}
  .editLessonHeader h2{font-size:25px;line-height:1.15}
  .editLessonHeader p{font-size:14px;line-height:1.35;margin-top:6px}
  .editLessonClose{width:46px;height:46px;font-size:28px}

  /* One clear field per row; date/time and duration/price remain paired. */
  .editLessonTopGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .editFieldStudent,.editFieldStatus,.editFieldRepeat,.editPaymentCard{grid-column:1/-1!important}
  .editFieldDate,.editFieldTime,.editFieldDuration,.editFieldPrice{grid-column:auto!important}
  .editField label{font-size:14px;margin-bottom:7px}
  .editField input,.editField select{min-height:50px;padding:12px 13px;font-size:16px;border-radius:11px}
  .currencyInput{min-height:50px;border-radius:11px}
  .currencyInput input{min-height:48px!important;font-size:16px!important}

  .editPaymentCard{padding:14px;border-radius:13px;margin-top:1px}
  .editPaymentHead b{font-size:16px;line-height:1.25}
  .editPaymentHead small{font-size:13px;line-height:1.3;margin-top:4px}
  .editPaymentFields{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .editPaymentFields .editField label{font-size:13px}
  .editPaymentBottom{flex-direction:row;align-items:center;padding:11px 12px;margin-top:11px}
  .editPaymentBottom span{font-size:11px}.editPaymentBottom strong{font-size:17px}
  .editPaymentBottom button{width:auto;min-height:46px;padding:10px 13px}

  .editLessonNotes{margin-top:22px;padding-top:20px}
  .editNotesHeading h3{font-size:21px}
  .editNotesHeading p{font-size:13px;margin:4px 0 14px}
  .editNotesGrid{display:grid;grid-template-columns:1fr;gap:13px}
  .editField textarea{min-height:92px;padding:12px 13px;font-size:16px;border-radius:11px;line-height:1.45}

  .editLessonActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;padding-top:16px}
  .editLessonActions button{width:100%;min-height:52px;font-size:15px}
  .editLessonActions .editSaveButton{grid-column:1/-1;order:-1}

  /* Let the modal scroll; never reduce the readable type to force a fit. */
  .modal{align-items:flex-end;padding:0!important}
  .modalbox{width:100%;max-width:none;max-height:94vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 16px 24px;border-radius:20px 20px 0 0}
}

@media screen and (max-width:420px){
  .editLessonTopGrid{grid-template-columns:1fr 1fr;gap:10px}
  .editField label{font-size:13px}
  .editField input,.editField select{font-size:16px}
  .editPaymentFields{grid-template-columns:1fr}
  .editPaymentBottom{flex-direction:column;align-items:stretch;gap:9px}
  .editPaymentBottom button{width:100%}
  .editLessonHeader h2{font-size:24px}
}

/* ZNR Diary V17 — selected student profile preview inside Edit Lesson */
.editStudentProfilePreview{grid-column:1/-1;margin-top:-2px}
.editStudentProfileCard{border:1px solid #cfe0f7;background:#f7fbff;border-radius:13px;padding:12px 14px}
.editStudentProfileMain{display:flex;align-items:center;gap:10px}
.editStudentAvatar{width:38px;height:38px;border-radius:50%;background:#e2efff;color:#1769ff;display:grid;place-items:center;font-weight:900;flex:0 0 auto}
.editStudentProfileMain strong{display:block;color:#172033;font-size:15px}
.editStudentProfileMain span{display:block;color:#687386;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.editStudentProfileStats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.editStudentProfileStats>div{background:#fff;border:1px solid #e2e8f0;border-radius:9px;padding:8px 9px;min-width:0}
.editStudentProfileStats span,.editStudentProfileDetails span{display:block;color:#687386;font-size:10px;font-weight:700}
.editStudentProfileStats b{display:block;color:#172033;font-size:13px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.editStudentProfileDetails{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.editStudentProfileDetails>div{background:#fff;border-radius:9px;padding:8px 9px;border:1px solid #e2e8f0}
.editStudentProfileDetails b{display:block;color:#172033;font-size:12px;margin-top:3px}
.editStudentProfileButton{margin-top:9px;min-height:38px!important}
@media screen and (max-width:750px){
 .editStudentProfilePreview{grid-column:1/-1}
 .editStudentProfileCard{padding:12px}
 .editStudentProfileStats{grid-template-columns:1fr 1fr;gap:8px}
 .editStudentProfileStats b{font-size:14px}
 .editStudentProfileDetails{grid-template-columns:1fr}
 .editStudentProfileButton{width:100%;min-height:46px!important}
}

/* ZNR Add Student Shine V2 */
.studentFormModal{max-width:760px;margin:0 auto}
.studentFormHeader{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid #e8edf3}
.studentFormIcon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#e8f1ff;color:#1769ff;font-size:25px;font-weight:900;flex:0 0 auto}
.studentFormEyebrow{font-size:11px;line-height:1;font-weight:800;letter-spacing:.12em;color:#1769ff;margin-bottom:5px}
.studentFormHeader h2{margin:0;font-size:24px;line-height:1.15;color:#172033}
.studentFormHeader p{margin:5px 0 0;font-size:13px}
.studentFormSection{padding:15px 0;border-bottom:1px solid #edf1f5}
.studentFormSectionTitle{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.studentFormSectionTitle>span{width:34px;height:34px;border-radius:10px;background:#f3f6fa;display:grid;place-items:center;font-size:16px}
.studentFormSectionTitle b{display:block;font-size:15px;color:#172033}
.studentFormSectionTitle small{display:block;color:#748094;font-size:11px;margin-top:2px}
.studentFormGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.studentFormField{display:block;min-width:0}
.studentFormField.full{grid-column:1/-1}
.studentFormField>span{display:block;font-size:12px;font-weight:700;color:#465166;margin-bottom:6px}
.studentFormField em,.studentFormRequired em{font-style:normal;color:#dc3545}
.studentFormField input,.studentFormField select,.studentFormField textarea{width:100%;box-sizing:border-box;border:1px solid #d8e0e9;background:#fff;color:#172033;border-radius:10px;padding:11px 12px;font:inherit;font-size:14px;min-height:44px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.studentFormField textarea{min-height:92px;resize:vertical;line-height:1.45}
.studentFormField input:focus,.studentFormField select:focus,.studentFormField textarea:focus{border-color:#4c8dff;box-shadow:0 0 0 3px rgba(23,105,255,.10)}
.studentFormField input::placeholder,.studentFormField textarea::placeholder{color:#a0a9b7}
.studentFormFooter{padding-top:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.studentFormFooter .actions{margin:0;justify-content:flex-end}
.studentFormFooter .actions button{min-height:44px}
.studentFormRequired{font-size:11px;color:#7b8595}
.studentSaveButton{min-width:125px}
.studentAddedConfirmation{text-align:center;padding:8px 4px 2px}
.studentAddedIcon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:#e8f8ef;color:#16834b;font-size:28px;font-weight:900}
.studentAddedConfirmation h2{margin:4px 0 5px}
.studentAddedConfirmation>p{margin:0 auto 15px;max-width:500px}
.studentAddedSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px;text-align:left}
.studentAddedSummary span{padding:10px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:9px;font-size:12px;overflow-wrap:anywhere}
.studentAddedConfirmation .actions{justify-content:center}
@media(max-width:750px){
 .studentFormModal{max-width:none}
 .studentFormHeader{align-items:flex-start}
 .studentFormHeader h2{font-size:22px}
 .studentFormGrid{grid-template-columns:1fr;gap:11px}
 .studentFormField.full{grid-column:auto}
 .studentFormFooter{display:block}
 .studentFormRequired{margin-bottom:10px}
 .studentFormFooter .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .studentFormFooter .actions button{width:100%;min-height:48px}
 .studentFormFooter .actions .studentSaveButton{grid-column:1/-1;order:-1}
 .studentAddedSummary{grid-template-columns:1fr}
 .studentAddedConfirmation .actions{display:grid;grid-template-columns:1fr 1fr}
 .studentAddedConfirmation .actions button{width:100%}
}
@media(max-width:420px){
 .studentFormHeader{gap:10px}
 .studentFormIcon{width:40px;height:40px;font-size:22px}
 .studentFormHeader p{font-size:12px}
 .studentFormField input,.studentFormField select,.studentFormField textarea{font-size:16px}
 .studentFormFooter .actions{grid-template-columns:1fr}
 .studentFormFooter .actions .studentSaveButton{grid-column:auto;order:-1}
 .studentAddedConfirmation .actions{grid-template-columns:1fr}
}


/* ZNR Student Pipeline — Active / Waiting / Inactive / Enquiries / Passed */
.studentToolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.studentToolbar input{flex:1;min-width:220px}.studentStatusTabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.studentStatusTab{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:999px;padding:9px 14px;font-weight:700;cursor:pointer;box-shadow:0 2px 7px rgba(15,23,42,.05);transition:.15s ease}.studentStatusTab:hover{transform:translateY(-1px);border-color:#b8cdfa}.studentStatusTab.active{background:#eaf2ff;border-color:#b7d0ff;color:#1769ff;box-shadow:0 3px 10px rgba(23,105,255,.12)}.studentStatusCount{display:inline-flex;min-width:22px;height:22px;align-items:center;justify-content:center;border-radius:999px;background:#eef2f7;font-size:11px;margin-left:4px;padding:0 6px}.studentStatusTab.active .studentStatusCount{background:#1769ff;color:#fff}.studentStatusBadge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}.status-active{background:#e8f7ee;color:#137333}.status-waiting{background:#fff7df;color:#9a6700}.status-inactive{background:#f1f3f5;color:#667085}.status-enquiry{background:#eee9ff;color:#6842c2}.status-passed{background:#e6f7ff;color:#0969a2}.studentStatusChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.studentStatusChoices button{width:100%}@media(max-width:700px){.studentStatusTabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.studentStatusTab{width:100%}.studentStatusChoices{grid-template-columns:1fr}.studentToolbar{align-items:stretch}.studentToolbar input{min-width:0;width:100%}.studentToolbar .primary{width:100%}}

.znrManagerTimePicker{display:grid;grid-template-columns:1fr auto 1fr 1.18fr;gap:6px;align-items:center}
.znrManagerTimePicker select{width:100%;box-sizing:border-box;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:10px;padding:10px 9px;min-height:44px;font:inherit;font-size:14px;outline:none;cursor:pointer}
.znrManagerTimePicker select:focus{border-color:#1769ff;box-shadow:0 0 0 3px rgba(23,105,255,.10)}
.znrManagerTimePicker span{font-weight:900;color:var(--muted);text-align:center}
.znrAmPmToggle{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border:1px solid var(--border);background:#f3f6fa;border-radius:10px;min-height:44px;box-sizing:border-box}
.znrAmPmToggle button{border:0;background:transparent;color:#687386;border-radius:7px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;min-width:0}
.znrAmPmToggle button:hover{background:#e8eef7;color:#172033}
.znrAmPmToggle button.selected{background:#1769ff;color:#fff;box-shadow:0 1px 4px rgba(23,105,255,.22)}
@media(max-width:600px){.znrManagerTimePicker{grid-template-columns:1fr auto 1fr 1.18fr}}


/* ===== Diary: 1 / 3 / 5 / 7-day views (keep last) ===== */
.calendarViews .vSm{display:none}
@media screen and (max-width:750px){.calendarViews .vLg{display:none}.calendarViews .vSm{display:inline}#schedule .scheduleToolbar .calendarViews button{padding:7px 0!important;flex:1 1 0!important;min-width:30px!important}}
#calendarGrid.weekCalendarGrid .weekDays,
#calendarGrid.weekCalendarGrid .weekColumns{grid-template-columns:repeat(var(--cols,7),minmax(0,1fr))!important}
#calendarGrid.daysFew .weekSchedule{width:100%!important;min-width:0!important;max-width:none!important}
#calendarGrid.daysFew .weekCol{min-width:0!important}
#calendarGrid.daysFew .weekDay{font-size:12px!important}
#calendarGrid.daysFew .weekDay b{font-size:18px!important}
#calendarGrid .quickSlot:hover{background:rgba(23,105,255,.06)}


/* ===== Diary: Total Drive look (keep last) ===== */
.eventEnd,.eventPay,.diaryFab{display:none}
.nowLine{position:absolute;left:0;right:0;height:0;border-top:2px solid #1769ff;z-index:6;pointer-events:none}
.nowLine i{position:absolute;left:-1px;top:-6px;width:10px;height:10px;border-radius:50%;background:#1769ff}
@media screen and (max-width:750px){
 #calendarGrid .timeCorner{font-size:0!important}
 #calendarGrid .weekDay small{display:none!important}
 #calendarGrid .weekDay,#calendarGrid .weekDay.isToday{background:#fff!important;box-shadow:none!important;border-bottom:0!important}
 #calendarGrid .weekDay::after{display:none!important}
 #calendarGrid .weekDay span{font-size:12px!important;font-weight:500!important;color:#4b5563!important}
 #calendarGrid .weekDay b{width:34px!important;height:34px!important;margin:4px auto 0!important;display:grid!important;place-items:center;border-radius:50%;font-size:19px!important;font-weight:500!important}
 #calendarGrid .weekDay.isToday b{background:#1769ff!important;color:#fff!important}
 #calendarGrid .weekDay.isToday span{color:#1769ff!important}

 #calendarGrid .scheduleEvent.draggableLesson,#calendarGrid .scheduleEvent{display:flex!important;flex-direction:column!important;gap:0!important;border:0!important;border-left:0!important;border-radius:4px!important;padding:4px 4px 24px!important;color:#fff!important;overflow:hidden!important;box-shadow:none!important;text-align:left!important}
 #calendarGrid .scheduleEvent.evShort{padding-bottom:4px!important}
 #calendarGrid .scheduleEvent *{color:#fff!important;font-size:11px!important;line-height:1.25!important}
 #calendarGrid .scheduleEvent .fullEventStudent{display:block!important;order:1;font-weight:400!important}
 #calendarGrid .scheduleEvent .shortEventStudent,#calendarGrid .scheduleEvent .eventMetaDesktop,#calendarGrid .scheduleEvent .eventMetaMobile{display:none!important}
 #calendarGrid .scheduleEvent .eventTime{order:2;display:block!important;font-weight:700!important}
 #calendarGrid .scheduleEvent .eventEnd{order:3;display:block!important;font-weight:700!important}
 #calendarGrid .scheduleEvent .eventTestTag{order:4;font-weight:400!important}
 #calendarGrid .scheduleEvent .eventPay{display:block!important;position:absolute;left:0;right:0;bottom:0;height:20px;line-height:20px!important;text-align:center;font-style:normal;font-weight:600!important}
 #calendarGrid .scheduleEvent .eventPay.isPaid{background:#4caf50}
 #calendarGrid .scheduleEvent .eventPay.isUnpaid{background:#e91e63}
 #calendarGrid .scheduleEvent.evShort .eventPay{display:none!important}
 #calendarGrid .scheduleEvent.eventBooked,#calendarGrid .scheduleEvent.eventCompleted{background:#0a8f3c!important}
 #calendarGrid .scheduleEvent.eventCancelled{background:#9ca3af!important;opacity:.85}
 #calendarGrid .scheduleEvent.eventTest{background:#262626!important}

 .diaryFab{position:fixed;right:18px;bottom:22px;z-index:30;width:56px;height:56px;min-height:56px;border:0;border-radius:50%;background:#12a8ff;color:#fff;font-size:34px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.28);cursor:pointer}
 #schedule.active .diaryFab{display:block}
}


/* ZNR V20 — Lesson reminder centre */
.reminderSummary{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.reminderSummary>div{border:1px solid var(--border);background:#f8fafc;border-radius:10px;padding:10px 13px}.reminderSummary strong{font-size:18px;margin-right:5px}.reminderSummary span{font-size:12px;color:#667085}.reminderRow{border:1px solid var(--border);border-radius:12px;padding:14px;margin:10px 0;background:#fff}.reminderMain{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.reminderMessagePreview{margin:9px 0;font-size:13px}.reminderActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.reminderSent{font-size:12px;font-weight:700;color:#087443}.reminderSettings{display:flex;align-items:center;gap:8px}@media(max-width:650px){.reminderMain{flex-direction:column}.reminderSettings{width:100%}.reminderSettings select{width:100%}.reminderActions button{flex:1}.reminderActions{width:100%}}


/* ZNR Instructor + Lesson Assignment V1 */
.instructorRows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.instructorCard{border:1px solid var(--border);border-radius:14px;padding:14px;background:#fff}
.instructorMain{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.instructorAvatar{width:42px;height:42px;border-radius:50%;background:#e8f1ff;color:#1769ff;display:grid;place-items:center;font-weight:900}
.instructorMain h3{margin:0 0 3px;font-size:16px}
.instructorFields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.instructorFields label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--muted)}
.instructorFields input[type=text],.instructorFields input:not([type]){width:100%}
.instructorCheck{flex-direction:row!important;align-items:center;justify-content:flex-start;padding-top:22px}
.instructorCheck input{width:auto!important}
.editFieldInstructor{min-width:0}
@media(max-width:750px){.instructorRows{grid-template-columns:1fr}.instructorFields{grid-template-columns:1fr}.instructorCheck{padding-top:0}.editFieldInstructor{grid-column:1/-1}}

/* ===== ZNR V6 Instructor Dashboard ===== */
.dashboardHero{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px;padding:18px 20px;background:linear-gradient(135deg,#111827,#1f3b6d);color:#fff;border:0;box-shadow:0 8px 24px rgba(15,23,42,.12)}
.dashboardHero h2{margin:3px 0 4px;font-size:25px}.dashboardHero .muted{color:#d7deea}.dashboardEyebrow{font-size:11px;font-weight:800;letter-spacing:1.3px;opacity:.72}.dashboardDate{font-weight:700;font-size:14px;white-space:nowrap;opacity:.95}
.dashboardStats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px}.dashboardStatCard{min-width:0;text-align:left;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:13px;padding:13px;box-shadow:0 2px 8px rgba(15,23,42,.04);display:flex;flex-direction:column;gap:4px;cursor:default}.dashboardStatCard[type=button]{cursor:pointer}.dashboardStatCard[type=button]:hover{border-color:#b9cef7;transform:translateY(-1px)}.dashboardStatCard strong{font-size:22px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboardStatCard small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboardStatIcon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#eef4ff;font-size:15px;margin-bottom:2px}
.dashboardColumns{display:grid;grid-template-columns:1.35fr .65fr;gap:12px}.dashboardBottom{grid-template-columns:1fr 1fr;margin-top:12px}.dashboardPanel{min-width:0}.dashboardPanelHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.dashboardPanelHead h3{margin:0 0 3px;font-size:17px}.dashboardPanelHead .secondary{padding:8px 10px;font-size:12px;white-space:nowrap}
.dashboardList{display:flex;flex-direction:column;gap:7px}.dashboardListItem{width:100%;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;border:1px solid #edf0f4;background:#fafbfc;border-radius:10px;padding:9px 10px;color:var(--text);cursor:pointer;font:inherit}.dashboardListItem:hover{background:#f5f8ff;border-color:#cbdafa}.dashboardTime{font-weight:800;font-size:13px;color:#1769ff}.dashboardItemMain{min-width:0}.dashboardItemMain b,.dashboardItemMain small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboardItemMain b{font-size:13px}.dashboardItemMain small{font-size:11px;color:var(--muted);margin-top:2px}.dashboardStatus{font-size:10px;font-weight:800;padding:4px 7px;border-radius:999px;background:#e8f7ee;color:#137333;text-transform:capitalize;white-space:nowrap}.dashboardStatus.completed{background:#dcfce7;color:#166534}.dashboardStatus.cancelled{background:#f1f3f5;color:#667085}.dashboardStatus.no_show{background:#fee2e2;color:#991b1b}.dashboardStatus.testStatus{background:#fff1d6;color:#925400}.dashboardEmpty{padding:18px 8px;text-align:center;color:var(--muted);font-size:13px}.dashboardQuickActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dashboardQuickActions button{width:100%;min-height:46px;text-align:left}
@media(max-width:1050px){.dashboardStats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:750px){.dashboardHero{padding:14px;align-items:flex-start}.dashboardHero h2{font-size:21px}.dashboardDate{font-size:12px;text-align:right}.dashboardStats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dashboardStatCard{padding:11px}.dashboardStatCard strong{font-size:20px}.dashboardColumns,.dashboardBottom{grid-template-columns:1fr}.dashboardQuickActions{grid-template-columns:1fr 1fr}.dashboardListItem{grid-template-columns:50px minmax(0,1fr);gap:7px}.dashboardStatus{display:none}}
@media(max-width:420px){.dashboardHero{gap:8px}.dashboardDate{max-width:100px}.dashboardQuickActions{grid-template-columns:1fr}.dashboardStatCard strong{font-size:19px}}

/* ZNR V7 Student Progress */
.progressHeader{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:12px;flex-wrap:wrap}.progressStudentPicker label{display:flex;flex-direction:column;gap:6px;font-weight:700}.progressStudentPicker select{min-width:260px}.progressSummary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.progressStat{background:var(--card,#fff);border:1px solid var(--border,#ddd);border-radius:12px;padding:12px}.progressStat strong{display:block;font-size:22px;margin-top:3px}.progressUnits{display:grid;gap:10px}.progressUnit{background:var(--card,#fff);border:1px solid var(--border,#ddd);border-radius:14px;overflow:hidden}.progressUnitHead{padding:12px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center;background:#f8fafc}.progressUnitHead h3{margin:0;font-size:16px}.progressUnitBody{padding:0 14px}.progressItem{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:14px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--border,#eee)}.progressItem:last-child{border-bottom:0}.progressItemTitle{font-weight:600;font-size:14px}.progressSkillNo{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#eef4ff;margin-right:8px;font-size:11px;font-weight:800}.progressSelect{width:100%;min-height:38px}.progressPill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700}.progressEmpty{padding:20px;text-align:center}@media(max-width:800px){.progressSummary{grid-template-columns:repeat(2,1fr)}.progressItem{grid-template-columns:1fr;gap:7px}.progressStudentPicker{width:100%}.progressStudentPicker select{width:100%;min-width:0}.progressUnitHead{align-items:flex-start;flex-direction:column}.progressSelect{min-height:42px}}


/* ZNR V8 Step 1 — Lesson Record window */
.lessonRecordModal{max-width:760px;margin:0 auto}
.lessonRecordHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.lessonRecordHeader h2{margin:0;color:#111827;font-size:27px;line-height:1.1}
.lessonRecordHeader p{margin:6px 0 0;font-size:14px}
.lessonRecordEyebrow{font-size:11px;font-weight:900;letter-spacing:.12em;color:#1769ff;margin-bottom:6px}
.lessonRecordSummary{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.lessonRecordSummary>div{background:#f7f9fc;border:1px solid #e1e7ef;border-radius:11px;padding:11px 12px}
.lessonRecordSummary span,.lessonRecordPreview span{display:block;font-size:11px;color:#687386;font-weight:700}
.lessonRecordSummary b{display:block;margin-top:4px;font-size:14px;color:#172033;overflow-wrap:anywhere}
.lessonRecordIntro{display:flex;gap:12px;align-items:flex-start;border:1px solid #cfe0f7;background:#f5f9ff;border-radius:13px;padding:14px;margin-top:4px}
.lessonRecordIcon{width:42px;height:42px;border-radius:11px;background:#e2efff;display:grid;place-items:center;font-size:21px;flex:0 0 auto}
.lessonRecordIntro h3{margin:0;font-size:17px;color:#172033}.lessonRecordIntro p{margin:5px 0 0;color:#596579;font-size:13px;line-height:1.45}
.lessonRecordPreview{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.lessonRecordPreview>div{border:1px solid #e1e7ef;border-radius:11px;padding:11px 12px;background:#fff}
.lessonRecordPreview strong{display:block;margin-top:4px;color:#1769ff;font-size:13px}
.lessonRecordActions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;padding-top:14px;border-top:1px solid #e4e8ef}
.lessonRecordActions button{min-height:44px;font-weight:800}
.lessonRecordBtn{border:1px solid #bcd8ff;background:#f4f9ff;color:#1769ff;border-radius:9px;padding:8px 10px;font-weight:800;cursor:pointer}
.lessonRecordBtn:hover{background:#e8f2ff}
@media(max-width:750px){
 .lessonRecordModal{width:100%;max-width:none}
 .lessonRecordHeader h2{font-size:24px}.lessonRecordHeader p{font-size:13px;line-height:1.35}
 .lessonRecordSummary{grid-template-columns:1fr 1fr;gap:8px}.lessonRecordSummary b{font-size:13px}
 .lessonRecordIntro{padding:13px}.lessonRecordIntro p{font-size:13px}
 .lessonRecordPreview{grid-template-columns:1fr;gap:8px}
 .lessonRecordActions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.lessonRecordActions .primary{grid-column:1/-1;order:-1}
 .lessonRecordActions button{width:100%;min-height:48px}
}
@media(max-width:380px){.lessonRecordSummary{grid-template-columns:1fr}.lessonRecordActions{grid-template-columns:1fr}.lessonRecordActions .primary{grid-column:auto}}

/* V8 STEP 2 - DVSA skills in lesson record */
.lessonSkillIntro{display:flex;gap:12px;align-items:flex-start;border:1px solid #cfe0f7;background:#f5f9ff;border-radius:13px;padding:14px;margin-top:4px}
.lessonSkillIntro h3{margin:0;font-size:17px;color:#172033}.lessonSkillIntro p{margin:5px 0 0;color:#596579;font-size:13px;line-height:1.45}
.lessonSkillLegend{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0;color:#687386;font-size:11px;font-weight:700}
.lessonSkillsWrap{display:grid;gap:10px;margin-top:8px}
.lessonSkillUnit{border:1px solid #e1e7ef;border-radius:12px;background:#fff;overflow:hidden}
.lessonSkillUnitHead{padding:10px 12px;background:#f7f9fc;border-bottom:1px solid #e6eaf0}
.lessonSkillUnitHead b{display:block;font-size:13px;color:#172033}.lessonSkillUnitHead span{display:block;margin-top:2px;font-size:11px;color:#687386}
.lessonSkillList{display:grid}
.lessonSkillRow{display:grid;grid-template-columns:78px minmax(0,1fr) 142px;gap:10px;align-items:center;padding:9px 10px;border-bottom:1px solid #eef1f4;transition:.12s ease;background:#fff}
.lessonSkillRow:last-child{border-bottom:0}.lessonSkillRow.isSelected{background:#f8fbff}
.lessonSkillCheck{display:flex;align-items:center;gap:7px;min-width:0}.lessonSkillCheck input{width:20px;height:20px;min-height:20px;accent-color:var(--accent);cursor:pointer}.lessonSkillNo{font-size:11px;font-weight:900;color:#1769ff;background:#eaf2ff;border-radius:7px;padding:4px 6px;white-space:nowrap}
.lessonSkillName{min-width:0}.lessonSkillName b{display:block;font-size:13px;color:#172033;line-height:1.25}.lessonSkillName small{display:block;margin-top:2px;font-size:10px;color:#687386}
.lessonSkillStatus{width:100%;min-height:40px;padding:8px 9px;font-size:12px}.lessonSkillStatus:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}
@media(max-width:750px){
  .lessonSkillRow{grid-template-columns:58px minmax(0,1fr);gap:7px;padding:10px 9px}
  .lessonSkillStatus{grid-column:2;min-height:42px}
  .lessonSkillCheck{gap:5px}.lessonSkillNo{font-size:10px;padding:4px 5px}.lessonSkillName b{font-size:12px}.lessonSkillName small{font-size:10px}
  .lessonSkillLegend{display:grid;gap:4px}.lessonSkillIntro{padding:12px}
}
@media(max-width:380px){
  .lessonSkillRow{grid-template-columns:50px minmax(0,1fr)}
}

/* V8 Step 3 — Lesson reflection */
.lessonReflectionIntro{display:flex;gap:12px;align-items:flex-start;border:1px solid #dce8dc;background:#f7fbf7;border-radius:13px;padding:14px;margin-top:16px}
.lessonReflectionIntro h3{margin:0;font-size:17px;color:#172033}.lessonReflectionIntro p{margin:5px 0 0;color:#596579;font-size:13px;line-height:1.45}
.lessonReflectionGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.lessonReflectionField{border:1px solid #e1e7ef;border-radius:12px;background:#fff;padding:11px 12px}
.lessonReflectionField label{display:block;font-size:12px;font-weight:800;color:#172033;margin-bottom:7px}
.lessonReflectionField textarea{width:100%;min-height:92px;resize:vertical;border:1px solid #d8dee8;border-radius:9px;padding:9px 10px;font:inherit;font-size:13px;line-height:1.4;box-sizing:border-box;background:#fff}
.lessonReflectionField textarea:focus{outline:2px solid rgba(23,105,255,.12);border-color:#9fc2ff}
.lessonReflectionActions{display:flex;justify-content:flex-end;margin-top:10px}
.lessonReflectionActions button{min-height:44px;font-weight:800}
@media(max-width:700px){.lessonReflectionGrid{grid-template-columns:1fr}.lessonReflectionField textarea{min-height:82px}.lessonReflectionActions button{width:100%}}

/* =========================================================
   ZNR Manager — Mobile Friendly Step 1
   Mobile-only presentation cleanup. No functionality/DB changes.
   ========================================================= */
@media screen and (max-width:750px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{font-size:14px}

  /* Compact header */
  header{padding:10px!important;gap:8px!important;min-height:58px}
  header>div:first-child{min-width:0;flex:1}
  header h1{font-size:17px!important;line-height:1.15!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header small{display:block;font-size:10px!important;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header>div:last-child{display:flex!important;gap:5px!important;flex:0 0 auto}
  header .secondary{min-height:38px!important;height:38px!important;padding:6px 9px!important;font-size:11px!important}

  /* One clean, swipeable navigation row — avoids a cramped 2-row menu */
  nav,#nav{position:sticky!important;top:0;z-index:30;display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;align-items:center!important;gap:5px!important;padding:6px!important;overflow-x:auto!important;overflow-y:hidden!important;width:100%!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;box-shadow:0 2px 8px rgba(15,23,42,.06)}
  nav::-webkit-scrollbar,#nav::-webkit-scrollbar{display:none}
  nav button,#nav button{flex:0 0 auto!important;width:auto!important;min-width:max-content!important;padding:9px 12px!important;font-size:12px!important;line-height:1.1!important;border-radius:9px!important;white-space:nowrap!important}

  main{width:100%!important;max-width:none!important;padding:9px!important}
  .section{width:100%!important}
  .card{width:100%;min-width:0;padding:12px!important;border-radius:12px!important;box-shadow:0 1px 5px rgba(15,23,42,.05)!important}

  /* Dashboard */
  #dashboard>.grid,.dashboardStats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #dashboard>.grid>.card,.dashboardStatCard{min-width:0!important;padding:10px!important;min-height:82px!important}
  #dashboard>.grid .muted,.dashboardStatCard .muted{font-size:11px!important;line-height:1.2!important}
  #dashboard>.grid .stat,.dashboardStatCard strong{font-size:20px!important;line-height:1.1!important;margin-top:3px!important}
  .dashboardHero{padding:13px!important;margin-bottom:9px!important;border-radius:12px!important}
  .dashboardHero h2{font-size:19px!important}
  .dashboardDate{font-size:11px!important}
  .dashboardColumns,.dashboardBottom{grid-template-columns:1fr!important;gap:8px!important;margin-top:8px!important}
  .dashboardPanelHead{gap:7px!important}
  .dashboardPanelHead h3{font-size:15px!important}
  .dashboardPanelHead .secondary{padding:7px 9px!important;font-size:11px!important}
  .dashboardQuickActions{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .dashboardQuickActions button{min-height:44px!important;padding:8px!important;font-size:12px!important}
  .dashboardListItem{grid-template-columns:48px minmax(0,1fr)!important;padding:8px!important}

  /* Toolbars/forms */
  .toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-bottom:9px!important}
  .toolbar input,.toolbar select{width:100%!important;min-width:0!important}
  .toolbar>input:first-child,.toolbar>select:first-child{grid-column:1/-1}
  .toolbar .primary,.toolbar .secondary{width:100%!important;min-width:0!important;padding:9px 8px!important;font-size:12px!important}
  .studentToolbar{grid-template-columns:1fr!important}
  .studentToolbar input,.studentToolbar button{grid-column:1!important}
  input,select,textarea{min-height:42px!important;font-size:14px!important;max-width:100%!important}
  button.primary,button.secondary,button.danger{min-height:42px!important}

  /* Student status tabs */
  .studentStatusTabs{display:flex!important;gap:5px!important;overflow-x:auto!important;white-space:nowrap!important;padding:2px 0 7px!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
  .studentStatusTabs::-webkit-scrollbar{display:none}
  .studentStatusTab{flex:0 0 auto!important;padding:8px 10px!important;font-size:11px!important}

  /* Student list becomes readable cards instead of a tiny 8-column table */
  #students .tablewrap{overflow:visible!important}
  #students table{display:block!important;width:100%!important;min-width:0!important;background:transparent!important}
  #students thead{display:none!important}
  #students tbody{display:grid!important;gap:8px!important}
  #students tbody tr{display:grid!important;grid-template-columns:1fr 1fr!important;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 1px 5px rgba(15,23,42,.04)}
  #students tbody tr td{display:flex!important;flex-direction:column!important;justify-content:center;min-width:0;white-space:normal!important;overflow-wrap:anywhere!important;padding:8px 10px!important;border-bottom:1px solid #eef1f4!important;font-size:12px!important;line-height:1.25}
  #students tbody tr td::before{font-size:9px;font-weight:800;color:#8a94a6;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
  #students tbody tr td:nth-child(1){grid-column:1/-1;background:#f8fafc;font-size:13px!important}
  #students tbody tr td:nth-child(1)::before{content:'Student'}
  #students tbody tr td:nth-child(2)::before{content:'Phone'}
  #students tbody tr td:nth-child(3)::before{content:'Transmission'}
  #students tbody tr td:nth-child(4)::before{content:'Instructor'}
  #students tbody tr td:nth-child(5)::before{content:'Test'}
  #students tbody tr td:nth-child(6)::before{content:'Balance'}
  #students tbody tr td:nth-child(7)::before{content:'Status'}
  #students tbody tr td:nth-child(8){grid-column:1/-1;border-bottom:0!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:5px!important;padding:9px 10px!important}
  #students tbody tr td:nth-child(8)::before{content:'';display:none}
  #students tbody tr td:nth-child(8) button{flex:1 1 70px!important;min-height:38px!important;padding:7px 8px!important;font-size:11px!important}
  #students tbody tr td.empty{grid-column:1/-1;display:block!important;text-align:center;padding:25px!important}

  /* Progress */
  .progressHeader{display:block!important;margin-bottom:9px!important}
  .progressHeader h2{font-size:19px!important}
  .progressStudentPicker{width:100%!important;margin-top:10px!important}
  .progressStudentPicker select{width:100%!important;min-width:0!important}
  .progressSummary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .progressStat{padding:10px!important}
  .progressStat strong{font-size:19px!important}
  .progressUnitHead{padding:10px!important}
  .progressUnitBody{padding:0 9px!important}
  .progressItem{grid-template-columns:1fr!important;gap:6px!important;padding:9px 2px!important}
  .progressSelect{min-height:42px!important}

  /* Diary controls */
  .diaryMobileHeader{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:8px!important}
  .diaryMonthTitle{font-size:17px!important;font-weight:800!important}
  .diaryMobileActions{display:flex!important;gap:5px!important}
  .diaryMobileActions button{min-width:38px!important;min-height:38px!important;padding:6px 9px!important}
  .scheduleToolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  .scheduleToolbar>#addLesson{grid-column:1/-1!important;width:100%!important}
  .scheduleToolbar>#diaryInstructorFilter{grid-column:1/-1!important;width:100%!important;min-width:0!important}
  .scheduleToolbar .calendarNav,.scheduleToolbar .calendarViews{display:flex!important;min-width:0!important;gap:5px!important}
  .scheduleToolbar .calendarNav button,.scheduleToolbar .calendarViews button{flex:1!important;min-width:0!important;padding:8px 5px!important;font-size:10px!important}
  .scheduleToolbar #calRange{grid-column:1/-1!important;text-align:center!important;font-size:11px!important}
  .calendarCard{padding:6px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  #calendarGrid{max-width:none!important}

  /* Week/day timetable: readable and swipeable, rather than squeezing seven days into 360px */
  #calendarGrid.weekCalendarGrid .weekSchedule{width:610px!important;min-width:610px!important}
  #calendarGrid.weekCalendarGrid .weekDays,#calendarGrid.weekCalendarGrid .weekColumns{grid-template-columns:repeat(7,80px)!important}
  #calendarGrid.weekCalendarGrid .weekCol{min-width:80px!important}
  #calendarGrid.dayCalendarGrid .weekSchedule{width:100%!important;min-width:0!important}
  #calendarGrid.dayCalendarGrid .weekDays,#calendarGrid.dayCalendarGrid .weekColumns{grid-template-columns:minmax(0,1fr)!important}
  #calendarGrid.dayCalendarGrid .weekCol{min-width:0!important}

  /* Month diary: swipe horizontally on small screens */
  #calendarGrid.monthCalendarGrid{width:680px!important;min-width:680px!important}
  #calendarGrid.monthCalendarGrid .monthCalendar{width:680px!important;min-width:680px!important}

  /* Schedule list cards */
  #scheduleList .lesson{padding:10px!important;font-size:12px!important}
  #scheduleList .lesson b{font-size:13px!important;line-height:1.3!important}
  #scheduleList .lesson button{margin-top:5px!important;min-height:38px!important;padding:7px 9px!important;font-size:11px!important}

  /* Payments and tests: card-style rows */
  #payments .tablewrap,#tests .tablewrap{overflow:visible!important}
  #payments table,#tests table{display:block!important;width:100%!important;min-width:0!important;background:transparent!important}
  #payments thead,#tests thead{display:none!important}
  #payments tbody,#tests tbody{display:grid!important;gap:8px!important}
  #payments tbody tr,#tests tbody tr{display:grid!important;grid-template-columns:1fr 1fr!important;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
  #payments tbody tr td,#tests tbody tr td{display:flex!important;flex-direction:column!important;min-width:0;white-space:normal!important;overflow-wrap:anywhere!important;padding:8px 10px!important;border-bottom:1px solid #eef1f4!important;font-size:12px!important;line-height:1.25}
  #payments tbody tr td::before,#tests tbody tr td::before{font-size:9px;font-weight:800;color:#8a94a6;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
  #payments tbody tr td:nth-child(1)::before{content:'Date'}
  #payments tbody tr td:nth-child(2)::before{content:'Student'}
  #payments tbody tr td:nth-child(3)::before{content:'Amount'}
  #payments tbody tr td:nth-child(4)::before{content:'Method'}
  #payments tbody tr td:nth-child(5)::before{content:'Note'}
  #payments tbody tr td:nth-child(6){grid-column:1/-1;border-bottom:0;display:block!important}
  #payments tbody tr td:nth-child(6)::before{display:none}
  #payments tbody tr td:nth-child(6) button{width:100%!important}
  #tests tbody tr td:nth-child(1)::before{content:'Date'}
  #tests tbody tr td:nth-child(2)::before{content:'Time'}
  #tests tbody tr td:nth-child(3)::before{content:'Student'}
  #tests tbody tr td:nth-child(4)::before{content:'Test centre'}
  #tests tbody tr td:nth-child(5)::before{content:'Status'}
  #tests tbody tr td:nth-child(6)::before{content:'Notes'}
  #tests tbody tr td:nth-child(7){grid-column:1/-1;border-bottom:0;display:flex!important;flex-direction:row!important;gap:6px!important}
  #tests tbody tr td:nth-child(7)::before{display:none}
  #tests tbody tr td:nth-child(7) button{flex:1!important}

  /* Top stat strips on payments/tests */
  #payments>.grid,#tests>.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #payments>.grid .card,#tests>.grid .card{padding:10px!important;min-height:72px!important}
  #payments>.grid .stat,#tests>.grid .stat{font-size:19px!important}

  /* Instructors, reminders and requests */
  .instructorRows{display:grid!important;gap:8px!important}
  .instructorRows>*{min-width:0!important}
  .reminderSummary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #requests .card,#loginRequests .card,#reminders .card,#instructors .card{padding:12px!important}

  /* Modals become comfortable bottom sheets */
  .modal{padding:0!important;align-items:flex-end!important}
  .modalbox{width:100%!important;max-width:none!important;max-height:94vh!important;border-radius:17px 17px 0 0!important;padding:14px!important;overflow:auto!important}
  .modalbox h2{font-size:19px!important;line-height:1.2!important}
  .formgrid{grid-template-columns:1fr!important;gap:8px!important}
  .formgrid .full{grid-column:auto!important}
  .actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;position:sticky!important;bottom:-14px!important;background:#fff!important;padding:10px 0 0!important;margin-top:12px!important}
  .actions button{width:100%!important;min-height:44px!important}

  /* Lesson record / skill rows */
  .lessonRecordSummary{grid-template-columns:1fr 1fr!important}
  .lessonRecordPreview{grid-template-columns:1fr!important}
  .lessonSkillRow{grid-template-columns:52px minmax(0,1fr)!important;gap:7px!important}
  .lessonSkillStatus{grid-column:2!important;min-height:42px!important}
  .lessonReflectionGrid{grid-template-columns:1fr!important}
  .lessonReflectionActions button{width:100%!important}
}

@media screen and (max-width:420px){
  header h1{font-size:16px!important}
  header .secondary{padding:6px 8px!important;font-size:10px!important}
  nav button,#nav button{padding:8px 10px!important;font-size:11px!important}
  main{padding:7px!important}
  .card{padding:10px!important}
  .dashboardQuickActions{grid-template-columns:1fr!important}
  .progressSummary{grid-template-columns:1fr 1fr!important}
  .scheduleToolbar{grid-template-columns:1fr!important}
  .scheduleToolbar .calendarNav,.scheduleToolbar .calendarViews{grid-column:1!important}
  #payments>.grid,#tests>.grid{grid-template-columns:1fr 1fr!important}
  #students tbody tr td,#payments tbody tr td,#tests tbody tr td{padding:7px 9px!important;font-size:11px!important}
  #students tbody tr td:nth-child(8) button,#tests tbody tr td:nth-child(7) button{font-size:10px!important;padding:6px!important}
}


/* ZNR Mobile Tabs Step 2 — clean five-tab layout inspired by Total Drive */
.mobileBottomNav,.mobileMoreSheet{display:none}
@media screen and (max-width:750px){
  body{padding-bottom:74px}
  #appView{padding-bottom:0}
  #appView>header{position:sticky;top:0;z-index:30}
  #appView>nav#nav{display:none!important}
  .mobileBottomNav{
    position:fixed;left:0;right:0;bottom:0;height:70px;z-index:100;
    display:grid;grid-template-columns:repeat(5,1fr);gap:0;
    background:#fff;border-top:1px solid #e5e7eb;
    box-shadow:0 -5px 18px rgba(15,23,42,.08);
    padding:5px 4px calc(5px + env(safe-area-inset-bottom));
  }
  .mobileBottomNav button{
    position:relative;border:0;background:transparent;color:#9aa1aa;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;font:600 11px/1 system-ui,-apple-system,Segoe UI,sans-serif;
    border-radius:12px;min-height:58px;cursor:pointer;
  }
  .mobileBottomNav button.active{color:#111827}
  .mobileBottomNav button.active:before{
    content:"";position:absolute;top:0;left:22%;right:22%;height:3px;
    background:var(--accent);border-radius:0 0 4px 4px;
  }
  .mobileNavIcon{font-size:24px;line-height:25px;font-weight:500}
  .mobileNavBadge,.mobileMorePanel .mobileNavBadge{position:absolute;top:6px;right:25%;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#dc3545;color:#fff;font-size:9px;line-height:16px}

  /* Keep the main dashboard calm on a phone */
  #dashboard .dashboardHero{padding:14px!important;margin-bottom:10px!important}
  #dashboard .dashboardHero h2{font-size:22px!important;margin:2px 0!important}
  #dashboard .dashboardStats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #dashboard .dashboardStatCard{min-height:88px!important;padding:12px!important}
  #dashboard .dashboardColumns,#dashboard .dashboardBottom{grid-template-columns:1fr!important;gap:10px!important}
  #dashboard .dashboardPanel{padding:12px!important}
  #dashboard .dashboardPanelHead h3{font-size:16px!important}
  #dashboard .dashboardQuickActions{grid-template-columns:1fr 1fr!important;gap:8px!important}
  #dashboard .dashboardQuickActions button{min-width:0!important}

  .mobileMoreSheet{position:fixed;inset:0;z-index:120}
  .mobileMoreSheet[hidden]{display:none!important}
  .mobileMoreBackdrop{position:absolute;inset:0;background:rgba(15,23,42,.42)}
  .mobileMorePanel{
    position:absolute;left:0;right:0;bottom:0;background:#fff;
    border-radius:22px 22px 0 0;padding:16px 14px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 35px rgba(15,23,42,.18);
  }
  .mobileMoreHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .mobileMoreHead div{display:flex;flex-direction:column;gap:2px}
  .mobileMoreHead strong{font-size:21px}
  .mobileMoreHead span{font-size:12px;color:var(--muted)}
  .mobileMoreHead button{width:38px;height:38px;border:0;border-radius:50%;background:#f3f4f6;font-size:25px;line-height:1;color:#374151}
  .mobileMoreGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
  .mobileMoreGrid button{
    min-height:82px;border:1px solid #e5e7eb;border-radius:14px;background:#f8fafc;
    color:#17202a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    font:inherit;cursor:pointer
  }
  .mobileMoreGrid button span{font-size:25px;color:var(--accent)}
  .mobileMoreGrid button b{font-size:12px}
  .mobileSignOut{width:100%;margin-top:12px;min-height:46px;border:1px solid #f1b4bb;border-radius:12px;background:#fff;color:#dc3545;font-weight:700}
}
@media screen and (min-width:751px){
  .mobileBottomNav,.mobileMoreSheet{display:none!important}
}


/* ===== ZNR Mobile Step 3 — Total Drive style ===== */
.mobileHeader,.mobileFab,.mList{display:none}
@media screen and (max-width:750px){
  #appView>header{display:none!important}
  .mobileHeader{display:flex;position:sticky;top:0;z-index:40;align-items:center;justify-content:space-between;
    padding:calc(14px + env(safe-area-inset-top)) 16px 12px;color:#fff;background:linear-gradient(90deg,#1593ff,#1a8cff 55%,#0f9bff)}
  .mobileHeader h2{margin:0;font-size:26px;font-weight:800}
  .mobileHeaderBtns button{min-height:40px;min-width:40px;border:0;background:transparent;color:#fff;font-size:26px}
  main{padding:0!important}
  .section.active{padding:0}
  #dashboard,#schedule,#progress,#payments>.toolbar,#tests,#reminders,#instructors,#requests,#loginRequests{padding:10px}
  .desktopOnly{display:none!important}
  .mList{display:block}
  .mobileFab{display:flex;position:fixed;right:18px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:90;width:58px;height:58px;
    border-radius:50%;border:0;background:#13a0ff;color:#fff;font-size:36px;line-height:1;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,100,200,.35)}
  /* pupils */
  #students .studentToolbar{padding:8px 12px;margin:0}
  #students .studentToolbar #addStudent{display:none}
  #students .studentToolbar input{width:100%;flex:1 1 100%}
  .studentStatusTabs{display:flex!important;flex-direction:row!important;overflow-x:auto;gap:0!important;background:#03213f;margin:0!important;padding:0!important;position:sticky;top:64px;z-index:35}
  .studentStatusTab{flex:0 0 auto;background:transparent!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;
    color:#b9c7d8!important;padding:14px 18px!important;font-size:17px;font-weight:500;box-shadow:none!important;width:auto!important}
  .studentStatusTab.active{color:#fff!important;font-weight:700;border-bottom-color:#13a0ff!important}
  .studentStatusCount{display:none}
  .mRow{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border-bottom:1px solid #eef0f3}
  .mAvatar{flex:0 0 54px;height:54px;border-radius:50%;background:#e9eff3;color:#8aa3b3;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
  .mMain{flex:1;min-width:0}.mMain b{display:block;font-size:19px;font-weight:600;line-height:1.2}
  .mSub{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;font-size:15px}
  .mNext{color:#1769ff}.mNone{color:#9aa3b2}.mGood{color:#1a8a2e}.mBad{color:#c0262d}
  .mChev{font-size:30px;color:#111}
  /* money */
  #payments>.grid{grid-template-columns:1fr 1fr!important;padding:10px 10px 0}
  .mDate{padding:18px 16px 8px;font-size:17px;text-transform:uppercase;color:#111827}
  .mPay{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 12px 10px;padding:16px;background:#fff;border-radius:10px;border-left:6px solid #23a67b;box-shadow:0 2px 8px rgba(0,0,0,.08)}
  .mPay b{font-size:19px;font-weight:600}
  .mAmt{background:#23a67b;color:#fff;border-radius:99px;padding:10px 18px;font-size:19px;white-space:nowrap}
  /* bottom nav: icons only, grey/black like Total Drive */
  .mobileBottomNav button span:not(.mobileNavIcon):not(.mobileNavBadge){display:none}
  .mobileBottomNav button.active:before{display:none}
  /* More sheet as settings list */
  .mobileMoreGrid{grid-template-columns:1fr!important;gap:0!important}
  .mobileMoreGrid button{flex-direction:row!important;justify-content:flex-start!important;min-height:62px!important;border:0!important;border-bottom:1px solid #e5e7eb!important;border-radius:0!important;background:#fff!important;gap:16px!important;padding:0 8px}
  .mobileMoreGrid button span{flex:0 0 40px;height:40px;border-radius:9px;background:#1a73ff;color:#fff!important;font-size:20px!important;display:flex;align-items:center;justify-content:center}
  .mobileMoreGrid button b{font-size:18px!important;font-weight:600}
}


/* ===== ZNR Mobile Step 4 — Tools dashboard + Diary ===== */
.mobileTools{display:none}
@media screen and (max-width:750px){
  #dashboard{padding:0!important}
  #dashboard>*:not(#mobileTools){display:none!important}
  .mobileTools{display:block;padding:12px}
  .mtBanner{display:flex;justify-content:space-between;align-items:center;background:#03213f;color:#fff;border-radius:12px;padding:16px 18px;margin-bottom:14px}
  .mtBanner b{display:block;font-size:19px}.mtBanner span{font-size:15px;opacity:.85}.mtArrow{font-size:30px!important}
  .mtGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .mtGrid button{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:3px solid #e6eef7;border-radius:14px;padding:14px 12px;min-height:88px;font:inherit;color:#0b7bb0;font-size:15px;line-height:1.25}
  .mtGrid i{flex:0 0 50px;height:50px;border-radius:50%;background:#0b7fb3;color:#fff;font-style:normal;font-size:22px;display:flex;align-items:center;justify-content:center}
  .mtGrid span{display:block}.mtGrid b{display:block;font-size:20px;color:#0a5f8a}
  .mtHead{margin:20px 0 10px;padding:12px 16px;background:#f3f5f9;border-radius:22px;font-size:18px}
  .mtDark{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .mtDark button{background:#03213f;color:#fff;border:0;border-radius:12px;min-height:96px;font:600 15px system-ui;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
  .mtDark i{font-style:normal;font-size:28px}
  .mtList{margin-top:14px}.mtList button{width:100%;display:flex;justify-content:space-between;align-items:center;background:#fff;border:0;border-bottom:1px solid #e5e7eb;border-radius:0;padding:18px 6px;font:inherit;font-size:19px}
  .mtList span{font-size:28px}
  /* diary */
  body[data-page="schedule"] .mobileHeader{display:none}
  body[data-page="schedule"] #schedule{padding:0!important}
  #schedule .diaryMobileHeader{display:flex!important;position:sticky;top:0;z-index:40;align-items:center;justify-content:space-between;color:#fff;
    padding:calc(14px + env(safe-area-inset-top)) 16px 12px;background:linear-gradient(90deg,#1593ff,#0f9bff)}
  #schedule .diaryMonthTitle{font-size:26px;font-weight:800;color:#fff}
  #schedule .diaryMobileActions button{background:transparent!important;border:0!important;color:#fff!important;font-size:22px;box-shadow:none!important}
  #schedule .diaryMobileActions #diaryMobileAdd{display:none}
  #schedule .scheduleToolbar{background:#03213f;padding:8px 10px;margin:0;display:flex;flex-wrap:wrap;gap:6px}
  #schedule .scheduleToolbar #addLesson{display:none}
  #schedule .scheduleToolbar select{flex:1 1 100%;background:#0a3355;color:#fff;border:0}
  #schedule .scheduleToolbar .calendarNav{display:flex;gap:6px;flex:1 1 100%;overflow-x:auto}
  #schedule .scheduleToolbar .calendarNav button{flex:1 0 auto;background:transparent;color:#cfe0f2;border:0;border-bottom:3px solid transparent;border-radius:0;font-size:15px;padding:8px 10px}
  #schedule .scheduleToolbar .calendarNav button.active{color:#fff;border-bottom-color:#13a0ff;font-weight:700}
  #schedule .calendarCard{border-radius:0;border:0;padding:8px}
  #schedule .calEvent{background:#fff;border-left:5px solid #1593ff;box-shadow:0 2px 6px rgba(0,0,0,.08);border-radius:8px;padding:10px;font-size:13px}
  #schedule .calToday{outline:0;background:#eaf5ff}
}


/* ===== ZNR Mobile Step 5 — fixes: bottom nav, floating items, diary toolbar ===== */
@media screen and (max-width:750px){
  .modal{z-index:300!important}
  #diaryFab,#schedule #diaryMobileAdd{display:none!important}
  .studentStatusTabs{position:static!important}
  /* bottom nav: beat the old generic "nav" rules */
  #mobileBottomNav{position:fixed!important;top:auto!important;left:0!important;right:0!important;bottom:0!important;z-index:100!important;
    display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:0!important;overflow:visible!important;flex-wrap:nowrap!important;
    height:calc(62px + env(safe-area-inset-bottom))!important;padding:0 0 env(safe-area-inset-bottom)!important;margin:0!important;
    background:#fff!important;border-top:1px solid #e5e7eb!important;box-shadow:none!important}
  #mobileBottomNav button{width:auto!important;min-width:0!important;flex:none!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
    background:transparent!important;color:#9aa4b2!important;font-size:0!important;min-height:0!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;position:relative}
  #mobileBottomNav button.active{background:transparent!important;color:#111827!important}
  #mobileBottomNav button>span:not(.mobileNavIcon):not(.mobileNavBadge){display:none!important}
  #mobileBottomNav .mobileNavIcon{display:flex!important;align-items:center;justify-content:center;font-size:0!important}
  #mobileBottomNav .mobileNavIcon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #mobileBottomNav .mobileNavBadge{top:12px!important;right:28%!important;font-size:10px!important}
  .mobileFab{bottom:calc(78px + env(safe-area-inset-bottom))!important}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
  /* diary toolbar */
  #schedule .scheduleToolbar{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding:10px!important;background:#03213f!important;margin:0!important}
  #schedule .scheduleToolbar>*{min-width:0!important;width:100%!important;position:static!important}
  #schedule #diaryInstructorFilter{order:1;background:#0a3355!important;color:#fff!important;border:0!important;min-width:0!important}
  #schedule .calendarNav{order:2;display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:6px!important}
  #schedule .calendarNav button{background:#0a3355!important;color:#fff!important;border:0!important;border-radius:9px!important;padding:8px 4px!important;font-size:14px!important;min-width:0!important}
  #schedule #calRange{order:3;text-align:center;color:#cfe0f2!important;font-size:14px!important;background:transparent!important;padding:0!important;border:0!important;white-space:normal!important}
  #schedule .calendarViews{order:4;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:0!important}
  #schedule .calendarViews button{background:transparent!important;color:#b9c7d8!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;
    padding:10px 0!important;font-size:16px!important;min-width:0!important;width:auto!important;flex:none!important;box-shadow:none!important}
  #schedule .calendarViews button.activeView{color:#fff!important;font-weight:700;border-bottom-color:#13a0ff!important;background:transparent!important}
}


/* ===== ZNR Mobile Step 6 — fewer diary views, Settings page ===== */
#calView3,#calView5{display:none!important}
@media screen and (max-width:750px){
  #schedule .calendarViews{grid-template-columns:repeat(3,1fr)!important}
  /* Settings opens as a full page like Total Drive */
  .mobileMoreBackdrop{display:none}
  .mobileMorePanel{top:0!important;border-radius:0!important;overflow-y:auto;background:#fff!important;padding:0 0 calc(80px + env(safe-area-inset-bottom))!important;box-shadow:none!important}
  .mobileMoreSheet{z-index:95!important}
  .mobileMoreHead{margin:0!important;padding:calc(14px + env(safe-area-inset-top)) 16px 12px;color:#fff;background:linear-gradient(90deg,#1593ff,#0f9bff)}
  .mobileMoreHead strong{font-size:26px!important;font-weight:800}
  .mobileMoreHead button{background:rgba(255,255,255,.2)!important;color:#fff!important}
  .mobileMoreGrid{padding:0 16px}
  .mSetHead{padding:18px 0 8px;font-size:15px;letter-spacing:.3px;text-transform:uppercase;color:#8a93a0}
  .mobileSignOut{width:calc(100% - 32px)!important;margin:18px 16px 0!important}
  body.settingsOpen .mobileFab{display:none!important}
}


/* ===== ZNR Mobile Step 7 — badge only when needed, labels under tabs ===== */
@media screen and (max-width:750px){
  #mobileBottomNav .mobileNavBadge:empty,.mobileNavBadge:empty{display:none!important}
  #mobileBottomNav button{flex-direction:column!important;gap:3px!important}
  #mobileBottomNav button>span:not(.mobileNavIcon):not(.mobileNavBadge){display:block!important;font:600 11px/1 system-ui,-apple-system,sans-serif!important;color:inherit}
  #mobileBottomNav .mobileNavIcon svg{width:25px;height:25px}
}


/* ===== ZNR Step 8 — desktop students table fit ===== */
@media screen and (min-width:751px){
  main{max-width:1320px}
  #students .tablewrap{overflow-x:visible}
  #students table{table-layout:auto;width:100%}
  #students th,#students td{padding:12px 10px;white-space:normal;vertical-align:middle}
  #students td:first-child{min-width:190px;word-break:break-word}
  #students td:last-child{white-space:normal;min-width:250px}
  #students td:last-child button{padding:7px 12px;min-height:36px;font-size:13px;margin:2px 2px 2px 0}
  nav#nav .badge:empty{display:none}
}


/* ===== ZNR Mobile Step 9 — fit width, 7-day week, student profile tabs ===== */
@media screen and (max-width:750px){
  html,body{overflow-x:hidden!important;max-width:100%!important;width:100%!important}
  main,.section,#schedule,#students,#payments,#dashboard{max-width:100%!important;min-width:0!important}
  #schedule *{box-sizing:border-box}
  #schedule .scheduleToolbar{width:100%!important;max-width:100%!important}
  .calendarCard{overflow-x:hidden!important;padding:0!important}
  #calendarGrid .weekSchedule{width:100%!important;min-width:0!important;max-width:100%!important;border-radius:0!important;border-left:0;border-right:0}
  #calendarGrid .weekDays,#calendarGrid .weekColumns{grid-template-columns:repeat(7,minmax(0,1fr))!important}
  #calendarGrid .weekCol{min-width:0!important}
  #calendarGrid .timeCorner,#calendarGrid .timeAxis{width:38px!important;flex:0 0 38px!important}
  #calendarGrid .timeLabel{font-size:9px!important;padding-right:3px!important}
  #calendarGrid .weekDay{font-size:10px!important}#calendarGrid .weekDay b{font-size:14px!important}
  #calendarGrid .scheduleEvent{font-size:8px!important;padding:2px!important;border-left-width:2px!important}
  #calendarGrid .scheduleEvent b{font-size:8px!important;white-space:normal!important;line-height:1.1}
  #calendarGrid .scheduleEvent small{display:none!important}
  .monthCalendar,.monthGrid,.monthWeekdays{min-width:0!important;width:100%!important}
  .mobileFab{right:14px!important}
  /* student profile as full page with sub-tabs */
  #modalBox:has(.mStTabs){position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;border-radius:0!important;padding:0 0 40px!important;overflow-y:auto;background:#f3f5f9!important}
  #modalBox:has(.mStTabs)>*:not(.studentProfileHeader):not(.mStTabs){margin-left:12px!important;margin-right:12px!important}
  #modalBox:has(.mStTabs) .studentProfileHeader{margin:0!important;padding:calc(16px + env(safe-area-inset-top)) 16px 14px!important;border-radius:0!important;background:linear-gradient(90deg,#1593ff,#0f9bff)!important;color:#fff!important}
  #modalBox:has(.mStTabs) .studentProfileHeader h2,#modalBox:has(.mStTabs) .studentProfileHeader .muted{color:#fff!important}
  .mStTabs{display:flex;overflow-x:auto;background:#03213f;position:sticky;top:0;z-index:5;margin:0 0 12px}
  .mStTabs button{flex:0 0 auto;background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;color:#b9c7d8;padding:14px 18px;font-size:17px;font-weight:500}
  .mStTabs button.active{color:#fff;font-weight:700;border-bottom-color:#13a0ff}
  .mStHide{display:none!important}
}

/* ===== ZNR Mobile Step 10 — force-fit (higher specificity) ===== */
@media screen and (max-width:750px){
  html body #schedule #calendarGrid .weekSchedule,
  html body #schedule #calendarGrid.monthCalendarGrid,
  html body #schedule #calendarGrid.monthCalendarGrid .monthCalendar{width:100%!important;min-width:0!important;max-width:100%!important}
  html body #schedule #calendarGrid .weekDays,
  html body #schedule #calendarGrid .weekColumns{grid-template-columns:repeat(7,minmax(0,1fr))!important;width:auto!important}
  html body #schedule #calendarGrid .weekCol{min-width:0!important;width:auto!important}
  html body #schedule #calendarGrid.monthCalendarGrid .monthWeekdays,
  html body #schedule #calendarGrid.monthCalendarGrid .monthGrid{width:100%!important;min-width:0!important;grid-template-columns:repeat(7,minmax(0,1fr))!important}
  html body #schedule .calendarCard{overflow:hidden!important}
}
@media screen and (max-width:750px){
  html body #schedule .scheduleToolbar #calRange{display:block!important;width:100%!important;text-align:center!important;white-space:nowrap!important;font-size:13px!important;margin:0!important;padding:0!important}
}


/* ===== ZNR Mobile Step 11 — Total Drive student pages ===== */
@media screen and (max-width:750px){
  .mStHeader{display:flex!important;align-items:center;gap:10px}
  .mStHeader h2{flex:1;margin:0;font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mStHeader button{background:transparent;border:0;color:#fff;font-size:34px;line-height:1;padding:0 6px;min-height:0}
  #modalBox:has(.mStTabs)>.mStBody{margin:0!important;padding:0 0 30px;background:#fff;min-height:70vh}
  .mStrip{display:flex;justify-content:space-between;gap:8px;background:#eef2f7;padding:16px}
  .mStrip div{display:flex;flex-direction:column}.mStrip b{font-size:21px;font-weight:600}.mStrip span{font-size:17px;color:#2b3445}
  .mSeg{display:flex;background:#eef2f7;border-radius:99px;margin:16px;padding:4px}
  .mSeg button{flex:1;border:0;background:transparent;border-radius:99px;padding:10px;font-weight:700;color:#03213f;font-size:16px}
  .mSeg button.on{background:#03213f;color:#fff}
  .mLRow{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #e6e9ee;background:#fff}
  .mHours{flex:0 0 58px;border-radius:6px;overflow:hidden;text-align:center;background:#eef2f7}
  .mHours b{display:block;font-size:24px;font-weight:500;padding:6px 0 2px;color:#03213f}
  .mHours span{display:block;background:#03213f;color:#fff;font-size:15px;padding:2px 0}
  .mLMain{flex:1;min-width:0}.mLDate{font-size:18px;margin-bottom:6px}.mMuted{color:#6b7482;font-size:15px}
  .mBadge{display:inline-block;border-radius:99px;padding:4px 12px;margin:0 6px 4px 0;font-size:15px;font-weight:600;color:#fff}
  .bOrange{background:#ff8a00}.bGreen{background:#1a9b4b}.bRed{background:#e05a5a}.bGrey{background:#8a93a0}.bLight{background:#eef2f7;color:#03213f}
  .mDots{border:0;background:transparent;font-size:28px;color:#555;min-height:0}
  .mEmpty{padding:30px 16px;color:#6b7482;text-align:center}
  .mQuick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px}
  .mQuick button{background:#03213f;color:#fff;border:0;border-radius:12px;padding:14px 4px;font-weight:700;font-size:15px}
  .mCard{margin:12px 16px;padding:14px 16px;border:1px solid #e6e9ee;border-radius:12px;font-size:17px}.mCard h4{margin:0 0 6px;color:#03213f}
  .mSyl{display:flex;justify-content:space-between;padding:18px 16px 8px;font-size:21px}.mBar{margin:0 16px 16px;height:26px;border-radius:99px;background:#eef2f7;overflow:hidden}
  .mBar i{display:block;height:100%;background:#20a67b;border-radius:99px}
  .mBlue{margin:0 16px 12px;background:#1a73ff;color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:700;font-size:16px}
  .mUnit{display:flex;justify-content:space-between;align-items:center;background:#f3f5f9;margin:12px 0 4px;padding:16px 20px;font-size:21px;border-radius:0 30px 30px 0;color:#03213f}
  .mSkill{padding:12px 16px}.mSkill>div:first-child{font-size:20px}.mSkill small{display:block;color:#6b7482;font-size:17px;margin-bottom:8px}
  .mDotsRow{display:flex;justify-content:space-between;position:relative}.mDotsRow:before{content:"";position:absolute;left:6px;right:6px;top:50%;height:6px;margin-top:-3px;background:#e1e1e1;border-radius:3px}
  .mDotsRow i{width:16px;height:16px;border-radius:50%;position:relative;z-index:1;display:block}
  .mTiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px}
  .mTile{background:#eef2f7;border:0;border-radius:14px;min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:600;color:#03213f}.mTile i{font-style:normal;font-size:26px}
  .mH{margin:24px 16px 10px;color:#03213f;font-size:21px}.mChips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px}
  .mChip{background:#eef2f7;border:0;border-radius:12px;padding:16px 4px;font-size:16px;color:#03213f}
  .mDet{display:flex;justify-content:space-between;padding:16px;border-bottom:1px solid #e6e9ee;font-size:17px}.mDet span{color:#6b7482}
}
@media screen and (max-width:750px){
  #modalBox:has(.mStTabs)>*:not(.studentProfileHeader):not(.mStTabs):not(.mStBodyX){margin-left:0!important;margin-right:0!important}
  #modalBox:has(.mStTabs){background:#fff!important}
}


/* ===== ZNR Mobile Step 12 — compact diary header, search on demand ===== */
.mobileSearchBtn{display:none}
@media screen and (max-width:750px){
  .mobileHeader{padding:calc(10px + env(safe-area-inset-top)) 16px 10px!important}
  .mobileHeader h2{font-size:24px!important}
  .mobileHeaderBtns{display:flex;align-items:center}
  .mobileHeaderBtns button{display:inline-flex;align-items:center;justify-content:center;min-height:38px!important;min-width:38px!important}
  body[data-searchable="1"] .mobileSearchBtn{display:inline-flex}
  body:not(.searchOpen) #students .studentToolbar,body:not(.searchOpen) #payments>.toolbar{display:none!important}
  body.searchOpen #students .studentToolbar,body.searchOpen #payments>.toolbar{display:flex!important;background:#fff;padding:8px 12px!important;gap:8px;border-bottom:1px solid #e6e9ee}
  /* diary header + toolbar compact */
  html body #schedule .diaryMobileHeader{padding:calc(8px + env(safe-area-inset-top)) 14px 8px!important}
  html body #schedule .diaryMonthTitle{font-size:22px!important}
  html body #schedule .scheduleToolbar{grid-template-columns:1fr 1fr!important;gap:6px!important;padding:8px 10px!important}
  html body #schedule #diaryInstructorFilter{grid-column:1/-1;height:36px!important;min-height:0!important;padding:0 10px!important;font-size:15px!important}
  html body #schedule .calendarNav{order:2;grid-template-columns:repeat(3,1fr)!important;gap:4px!important}
  html body #schedule .calendarNav button{height:34px!important;min-height:0!important;padding:0 4px!important;font-size:13px!important}
  html body #schedule .calendarViews{order:3;grid-template-columns:repeat(3,1fr)!important}
  html body #schedule .calendarViews button{padding:7px 0!important;font-size:15px!important;min-height:0!important;height:34px!important}
  html body #schedule .scheduleToolbar #calRange{display:none!important}
}
@media screen and (max-width:750px){
  html body #schedule .calendarNav{grid-column:1!important;grid-row:2!important}
  html body #schedule .calendarViews{grid-column:2!important;grid-row:2!important}
  html body #schedule .calendarNav button{font-size:12px!important}
}


/* ===== ZNR Mobile Step 13 — Total Drive Tests / Progress / Reminders ===== */
@media screen and (max-width:750px){
  .mTabBar{display:flex;overflow-x:auto;background:#03213f}
  .mTabBar button{flex:1 0 auto;background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;color:#b9c7d8;padding:14px 16px;font-size:16px;font-weight:500;min-height:0}
  .mTabBar button.active{color:#fff;font-weight:700;border-bottom-color:#13a0ff}
  #tests{padding:0!important}#tests>.grid{display:none!important}
  #tests>.toolbar>*:not(#testSearch){display:none!important}
  body:not(.searchOpen) #tests>.toolbar{display:none!important}
  body.searchOpen #tests>.toolbar{display:flex!important;background:#fff;padding:8px 12px!important;border-bottom:1px solid #e6e9ee}
  #tests .mList{background:#fff;min-height:60vh}
  /* progress */
  #progress{padding:0!important}
  #progress .progressHeader{background:#03213f!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:10px 12px!important;margin:0!important}
  #progress .progressHeader>div:first-child,#progress .progressStudentPicker label>span{display:none!important}
  #progress .progressStudentPicker,#progress .progressStudentPicker label{display:block;width:100%;margin:0}
  #progress #progressStudent{width:100%;background:#0a3355;color:#fff;border:0;border-radius:10px;height:42px;font-size:16px;font-weight:600;padding:0 10px}
  #progressSummary,#progressUnits{display:none!important}
  #progress .mList{background:#fff;padding-bottom:20px}
  .mDotsRow.mEdit:before{left:18px;right:18px}
  .mDotsRow>b{width:38px;height:38px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;margin:-10px 0}
  .mDotsRow>b>i{width:18px;height:18px;border-radius:50%;display:block}
  /* reminders */
  #reminders{padding:0!important}
  #reminders>.card{border:0!important;box-shadow:none!important;border-radius:0!important;background:#fff!important;padding:0!important}
  #reminders>.card>div:first-child>div:first-child{display:none}
  #reminders>.card>div:first-child{padding:10px 12px;background:#03213f;display:block!important}
  #reminders .reminderSettings{display:flex!important;align-items:center;justify-content:space-between;gap:10px}
  #reminders .reminderSettings label{color:#cfe0f2!important;font-size:15px!important}
  #reminders #reminderWindow{background:#0a3355;color:#fff;border:0;border-radius:10px;height:38px;min-width:0}
  #reminderSummary{padding:0 12px}
  .reminderRow{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px!important;border:0!important;border-bottom:1px solid #e6e9ee!important;border-radius:0!important;background:#fff!important}
  .reminderRow b{display:block;font-size:17px;font-weight:600}.reminderRow .muted{display:block;font-size:14px;margin-top:3px}
  .reminderRow button{background:#1a73ff!important;color:#fff!important;border:0!important;border-radius:99px!important;padding:9px 16px!important;font-weight:700;min-height:0;white-space:nowrap}
}
@media screen and (max-width:750px){
  body:not([data-searchable="1"]) .mobileHeaderBtns .mobileSearchBtn{display:none!important}
  .reminderRow b{font-size:16px!important}
  .reminderRow button{font-size:14px!important;padding:8px 12px!important}
  #progress .progressHeader{padding:8px 12px!important}#progress .progressStudentPicker{padding:0!important}
}


/* ===== ZNR Step 14 — payment action sheet ===== */
.mPayMenu{position:fixed;inset:0;z-index:500}
.mPayBack{position:absolute;inset:0;background:rgba(3,33,63,.45)}
.mPaySheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.mPayTitle{text-align:center;color:#03213f;font-weight:700;font-size:17px;margin-bottom:4px}
.mPaySheet button{border:0;border-radius:12px;padding:16px;background:#3aa3ff;color:#fff;font-size:18px;font-weight:700;min-height:0}
.mPaySheet button.mPayCancel{background:#eef2f7;color:#03213f}

@media screen and (max-width:750px){.mHint{margin:-6px 16px 10px;color:#6b7482;font-size:14px}}


/* ===== ZNR Mobile Settings — Total Drive style full page ===== */
@media screen and (max-width:750px){
  body.settingsOpen #mobileHeader,
  body.settingsOpen .mobileFab{display:none!important}
  #mobileMoreSheet{
    z-index:95!important;
    background:#eef2f6;
  }
  #mobileMoreSheet .mobileMoreBackdrop{display:none!important}
  #mobileMoreSheet .mobileMorePanel{
    position:absolute!important;
    inset:0 auto auto 0!important;
    width:100%!important;
    height:100%!important;
    top:0!important;
    bottom:auto!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#eef2f6!important;
    overflow-y:auto;
    padding:0 0 calc(88px + env(safe-area-inset-bottom))!important;
  }
  #mobileMoreSheet .mobileMoreHead{
    display:flex;
    align-items:flex-end;
    margin:0!important;
    padding:calc(12px + env(safe-area-inset-top)) 16px 12px!important;
    color:#fff;
    background:linear-gradient(90deg,#1593ff,#1a8cff 55%,#0f9bff);
    min-height:calc(56px + env(safe-area-inset-top));
  }
  #mobileMoreSheet .mobileMoreHead strong{
    display:block;
    font-size:26px!important;
    font-weight:800!important;
    letter-spacing:.2px;
  }
  #mobileMoreSheet .mSetProfile{
    display:flex;
    align-items:center;
    gap:14px;
    margin:14px 16px 6px;
    padding:14px 16px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 1px 4px rgba(15,23,42,.06);
  }
  #mobileMoreSheet .mSetAvatar{
    flex:0 0 52px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#03213f;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:800;
  }
  #mobileMoreSheet .mSetProfileText{min-width:0}
  #mobileMoreSheet .mSetProfileText b{
    display:block;
    font-size:18px;
    color:#03213f;
    line-height:1.2;
  }
  #mobileMoreSheet .mSetProfileText span{
    display:block;
    margin-top:4px;
    font-size:13px;
    color:#6b7482;
  }
  #mobileMoreSheet .mSetHead{
    padding:18px 20px 8px!important;
    font-size:12px!important;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:#8a93a0!important;
  }
  #mobileMoreSheet .mobileMoreGrid{
    display:block!important;
    margin:0 16px 4px;
    padding:0!important;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 1px 4px rgba(15,23,42,.06);
  }
  #mobileMoreSheet .mobileMoreGrid button{
    width:100%;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    min-height:58px!important;
    margin:0;
    padding:10px 14px 10px 12px!important;
    border:0!important;
    border-bottom:1px solid #eef1f5!important;
    border-radius:0!important;
    background:#fff!important;
    text-align:left;
    box-shadow:none!important;
  }
  #mobileMoreSheet .mobileMoreGrid button:last-child{border-bottom:0!important}
  #mobileMoreSheet .mobileMoreGrid button span{
    flex:0 0 38px!important;
    width:38px;
    height:38px;
    border-radius:10px;
    background:#1a73ff;
    color:#fff!important;
    font-size:18px!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
  }
  #mobileMoreSheet .mobileMoreGrid button b{
    flex:1;
    min-width:0;
    font-size:17px!important;
    font-weight:600!important;
    color:#17202a;
  }
  #mobileMoreSheet .mobileMoreGrid button:after{
    content:"›";
    flex:0 0 auto;
    color:#c5ccd6;
    font-size:28px;
    line-height:1;
    font-weight:300;
  }
  #mobileMoreSheet .mobileSignOut{
    width:calc(100% - 32px)!important;
    margin:18px 16px 8px!important;
    min-height:54px!important;
    border:0!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#dc3545!important;
    font-size:17px;
    font-weight:700;
    box-shadow:0 1px 4px rgba(15,23,42,.06);
  }
}
@media screen and (min-width:751px){
  #mobileMoreSheet,.mSetProfile,.mSetAvatar,.mSetProfileText{display:none!important}
}

/* ===== ZNR Step 16 — Settings page tabs ===== */
@media screen and (max-width:750px){
  .mSetTabs{display:flex;background:#03213f}
  .mSetTabs button{flex:1;background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;color:#b9c7d8;padding:15px 8px;font-size:18px;font-weight:500;min-height:0}
  .mSetTabs button.active{color:#fff;font-weight:700;border-bottom-color:#13a0ff}
  .mobileMoreGrid[hidden]{display:none!important}
  .mobileMoreGrid button{position:relative}
  .mobileMoreGrid button b{flex:1;text-align:left}
  .mobileMoreGrid button em{font-style:normal;font-size:30px;color:#8a93a0;margin-left:auto;padding-right:6px}
  .mobileMoreGrid button span svg{display:block}
  .mobileMoreGrid button span{flex:0 0 44px!important;height:44px!important;border-radius:10px!important}
}
@media screen and (max-width:750px){
  .mobileMoreSheet:not([hidden]){display:block!important}
  .mobileBottomNav{display:grid!important}
}
@media screen and (max-width:750px){.mobileMoreGrid button b{font-weight:500!important;font-size:19px!important}}

@media screen and (max-width:750px){
  #mobileMoreSheet .mobileMoreGrid[hidden]{display:none!important}
  .mobileMoreGrid button em{display:none!important}
}

/* ===== ZNR Step 18 — single instructor: hide multi-instructor controls ===== */
#diaryInstructorFilter,.editFieldInstructor{display:none!important}
@media screen and (max-width:750px){
  html body #schedule .scheduleToolbar{grid-template-columns:1fr 1fr!important}
}


/* ===== ZNR Step 19 — tidy Progress page + School Terms ===== */
.mSegs,.mUnitBar{display:none}
.mSkillT em{display:none}
.termsCard{max-width:860px;margin:0 auto}
.termsHead{display:flex;justify-content:space-between;align-items:center}
.termsHead h2{margin:0}
.termsText{white-space:pre-wrap;line-height:1.65;font-size:16px;margin:12px 0 16px}
.termsEdit{width:100%;min-height:340px;line-height:1.55;font-size:16px;margin:12px 0;box-sizing:border-box}
.termsActions{display:flex;gap:10px;flex-wrap:wrap}
@media screen and (min-width:751px){
  #progressUnits{display:none!important}
  #mobileProgressList{display:block!important}
  #mobileProgressList .mSyl,#mobileProgressList .mBar{display:none}
  #progress .progressHeader{background:linear-gradient(90deg,#1593ff,#0f9bff)!important;color:#fff!important;border:0!important;border-radius:16px!important;padding:22px 26px!important}
  #progress .progressHeader h2,#progress .progressHeader p,#progress .progressHeader label,#progress .progressHeader label span{color:#fff!important}
  #progress .progressHeader p{opacity:.9}
  #progress #progressStudent{background:#fff;color:#03213f;font-weight:700;border:0;border-radius:10px;min-width:260px}
  .progressSummary{display:grid!important;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
  .progressStat{background:#fff;border:0!important;border-radius:14px!important;padding:16px 18px!important;box-shadow:0 2px 10px rgba(3,33,63,.08);border-top:4px solid #1593ff!important}
  .progressStat:nth-child(2){border-top-color:#8b5cf6!important}.progressStat:nth-child(3){border-top-color:#22c55e!important}.progressStat:nth-child(4){border-top-color:#0d9488!important}
  .progressStat strong{font-size:34px;color:#03213f}
  .mUnitWrap{background:#fff;border-radius:16px;box-shadow:0 2px 10px rgba(3,33,63,.08);margin-bottom:18px;overflow:hidden}
  .mUnitWrap .mUnit{display:flex;justify-content:space-between;align-items:center;background:#f3f7fc;margin:0;padding:16px 22px;border-radius:0}
  .mUnitWrap .mUnit b{display:block;font-size:19px;color:#03213f}.mUnitWrap .mUnit small{color:#6b7482;font-size:13px}
  .mUnitWrap .mUnit span{font-size:18px;font-weight:800;color:#1593ff;background:#fff;border-radius:99px;padding:6px 14px}
  .mUnitBar{display:block;height:5px;background:#e3eaf3}.mUnitBar i{display:block;height:100%;background:linear-gradient(90deg,#1593ff,#22c55e)}
  .mUnitWrap .mSkill{display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:center;gap:10px 18px;padding:12px 22px;border-top:1px solid #edf1f6}
  .mUnitWrap .mSkill:hover{background:#fafcff}
  .mUnitWrap .mSkill>small,.mUnitWrap .mDotsRow{display:none}
  .mSkillT{display:flex!important;align-items:center;gap:12px;font-size:16px!important;font-weight:600;color:#1f2937}
  .mSkillT em{display:inline-flex;align-items:center;justify-content:center;font-style:normal;min-width:30px;height:30px;border-radius:9px;background:#e8f1ff;color:#1593ff;font-size:13px;font-weight:800}
  .mSegs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .mSegs button{border:1.5px solid #dbe3ee;background:#fff;color:#4b5563;border-radius:99px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;min-height:0}
  .mSegs button:hover{border-color:#1593ff;color:#1593ff}.mSegs button.on:hover{color:#fff}
}
@media screen and (max-width:750px){
  #schoolTerms{padding:12px!important}
  .termsText{font-size:17px;line-height:1.55}
  .termsActions button{min-width:110px}
}


/* ===== ZNR Mobile Step 19 — selected pupil summary, Total Drive inspired ===== */
@media screen and (max-width:750px){
  #modalBox:has(.mStTabs) .mPupilActionRow{display:flex;gap:0;background:#f4f5f8;border-bottom:1px solid #dfe3e8;overflow-x:auto;position:sticky;top:0;z-index:6}
  #modalBox:has(.mStTabs) .mPupilActionRow button{flex:0 0 auto;border:0;background:transparent;padding:13px 17px;font-size:16px;font-weight:700;color:#111;min-height:0}
  #modalBox:has(.mStTabs) .mPupilActionRow button:disabled{color:#999}
  #modalBox:has(.mStTabs) .mHeroLesson{margin:0;background:#fff;padding:24px 30px 20px;border-bottom:1px solid #e4e7eb}
  #modalBox:has(.mStTabs) .mHeroLesson.mNoNext{padding:24px 30px}
  #modalBox:has(.mStTabs) .mHeroDate{font-size:27px;font-weight:700;color:#111;line-height:1.25}
  #modalBox:has(.mStTabs) .mHeroTime{font-size:25px;font-weight:700;color:#111;margin-top:5px}
  #modalBox:has(.mStTabs) .mBadgeRow{margin-top:16px}
  #modalBox:has(.mStTabs) .mLessonMeta{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:17px;font-size:17px;color:#062b50}
  #modalBox:has(.mStTabs) .mChecked{color:#1c9b58}.mNotChecked{color:#e05262}
  #modalBox:has(.mStTabs) .mSectionCard{margin:14px 16px;padding:20px 22px;background:#fff;border:1px solid #e3e6ea;border-radius:12px;box-shadow:0 2px 7px rgba(0,0,0,.08)}
  #modalBox:has(.mStTabs) .mSectionCard h3{margin:0 0 16px;color:#062b50;font-size:24px}
  #modalBox:has(.mStTabs) .mDirections{padding-bottom:12px}
  #modalBox:has(.mStTabs) .mWazeButton{width:100%;margin-top:16px;border:0;border-radius:9px;background:#238ef2;color:#fff;font-size:18px;font-weight:700;padding:14px 16px;min-height:50px;cursor:pointer}
  #modalBox:has(.mStTabs) .mWazeButton:active{transform:scale(.99)}
  #modalBox:has(.mStTabs) .mDirectionRow{display:grid;grid-template-columns:34px 95px 1fr;align-items:center;gap:8px;margin:11px 0;font-size:17px;min-height:42px}
  #modalBox:has(.mStTabs) .mDirectionIcon{width:34px;height:34px;border-radius:7px;background:#238ef2;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
  #modalBox:has(.mStTabs) .mDirectionValue{font-size:17px;color:#111;overflow-wrap:anywhere}
  #modalBox:has(.mStTabs) .mActionGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 16px;background:#062b50;border-radius:12px;overflow:hidden}
  #modalBox:has(.mStTabs) .mBigAction{border:0;background:transparent;color:#fff;min-height:110px;padding:14px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:16px}
  #modalBox:has(.mStTabs) .mBigAction span{font-size:36px;line-height:1}
  #modalBox:has(.mStTabs) .mBigAction b{font-size:16px}
  #modalBox:has(.mStTabs) .mProgressHero{margin:14px 16px 0;background:#238ef2;color:#fff;padding:20px 22px 22px;border-radius:10px}
  #modalBox:has(.mStTabs) .mProgressHero>div{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:17px}
  #modalBox:has(.mStTabs) .mProgressHero b{font-size:22px}.mProgressHero span{font-size:18px;text-align:right}
  #modalBox:has(.mStTabs) .mProgressTrack{height:20px!important;background:rgba(255,255,255,.42);border-radius:99px;overflow:hidden;margin:0!important;display:block!important}
  #modalBox:has(.mStTabs) .mProgressTrack i{display:block;height:100%;background:#fff;border-radius:99px}
  #modalBox:has(.mStTabs) .mLargeNote{font-size:17px;line-height:1.5;color:#1b2735;min-height:28px;margin-bottom:22px}
  #modalBox:has(.mStTabs) .mLastLesson{padding-top:22px}
  #modalBox:has(.mStTabs) .mSectionEyebrow{font-size:16px;font-weight:700;color:#062b50;margin-bottom:14px}
  #modalBox:has(.mStTabs) .mLastDate{font-size:22px;color:#111;margin-bottom:18px}
  #modalBox:has(.mStTabs) .mLastGrid{display:grid;grid-template-columns:1fr;gap:18px}
  #modalBox:has(.mStTabs) .mLastGrid div{display:flex;flex-direction:column;gap:6px}
  #modalBox:has(.mStTabs) .mLastGrid span{font-size:16px;font-weight:700;color:#062b50}.mLastGrid b{font-size:17px;font-weight:500;color:#111}
  #modalBox:has(.mStTabs) .mFull{width:100%;margin:18px 0 0}
  #modalBox:has(.mStTabs) .mEmergency{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:16px 16px 28px;padding:18px 20px;background:#c92b21;color:#fff;border-radius:10px}
  #modalBox:has(.mStTabs) .mEmergency>div{display:flex;flex-direction:column;gap:5px}.mEmergency b{font-size:20px}.mEmergency span{font-size:16px}
  #modalBox:has(.mStTabs) .mEmergency button{border:0;border-radius:8px;background:#fff;color:#b42318;font-weight:700;padding:11px 17px;font-size:16px}
  #modalBox:has(.mStTabs) .mPupilActionRow~.mSectionCard{box-sizing:border-box}
}
@media (max-width:750px){
  .mStudentRow{touch-action:pan-y;-webkit-touch-callout:none;width:100%;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;}
  .mStudentRow:active{background:#f2f6fb!important;}
  .mStudentRow .mMain{min-width:0;flex:1;}
}


/* ===== Desktop horizontal navigation ===== */
#desktopNav{display:none}
@media(min-width:751px){
  #nav{display:none!important}
  #desktopNav{display:flex;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;background:#fff;border-bottom:1px solid var(--border);padding:8px;white-space:nowrap;scrollbar-width:thin}
  #desktopNav::-webkit-scrollbar{height:6px}
  #desktopNav button{border:0;background:transparent;padding:10px 14px;border-radius:9px;white-space:nowrap;font-weight:800;cursor:pointer;flex:0 0 auto}
  #desktopNav button.active{background:#e8f0ff;color:var(--accent)}
  #desktopNav button:hover{background:#f2f6fc}
}
@media(max-width:750px){#desktopNav{display:none!important}}

/* ===== Desktop nav dropdown ===== */
.navMore{position:relative;display:inline-block}
.navMoreBtn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:9px;font-weight:800;cursor:pointer;user-select:none;white-space:nowrap;position:relative;color:inherit;transition:background .15s}
.navMoreBtn:hover,.navMore.open .navMoreBtn{background:#eef3fb}
.navMore.hasActive .navMoreBtn{background:#e8f0ff;color:var(--accent,#1769ff)}
.navMoreBtn svg{transition:transform .18s}
.navMore.open .navMoreBtn svg{transform:rotate(180deg)}
.navMoreDot{display:none;position:absolute;top:6px;right:5px;width:8px;height:8px;border-radius:50%;background:#e5484d;border:2px solid #fff;box-sizing:content-box}
.navMoreMenu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:#fff;border:1px solid #e1e8f2;border-radius:14px;padding:8px;box-shadow:0 18px 40px rgba(18,32,60,.18);z-index:60}
.navMore.open .navMoreMenu{display:block;animation:navDrop .14s ease-out}
@keyframes navDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.navMoreMenu button{display:flex!important;align-items:center;justify-content:space-between;width:100%!important;text-align:left;padding:11px 14px!important;border-radius:9px!important;font-weight:700!important;font-size:14px!important;flex:none!important}
.navMoreMenu button:hover{background:#f2f6fc!important}
.navMoreMenu button.active{background:#e8f0ff!important;color:var(--accent,#1769ff)!important}
@media(min-width:751px){#nav{overflow:visible!important}}
@media(max-width:750px){.navMore{display:contents}.navMoreBtn{display:none}.navMoreMenu{display:contents;position:static;box-shadow:none;border:0;padding:0;background:none}.navMoreMenu button{display:inline-block!important;width:auto!important}}

/* ===== Add / edit student window ===== */
.modal{background:rgba(10,20,45,.62)!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modalbox:has(.studentFormModal){border-radius:20px;box-shadow:0 30px 80px rgba(8,20,50,.45),0 0 0 1px rgba(23,105,255,.18);padding:0!important;overflow:auto;border-top:5px solid #1769ff}
.studentFormModal{max-width:none;padding:0 26px 22px}
.studentFormHeader{margin:0 -26px 6px;padding:22px 26px 18px;background:linear-gradient(135deg,#eaf2ff 0%,#f6f9ff 100%);border-bottom:1px solid #d9e6fb}
.studentFormIcon{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#1769ff,#4c8dff);color:#fff;box-shadow:0 8px 18px rgba(23,105,255,.35);font-size:28px}
.studentFormHeader h2{font-size:26px;letter-spacing:-.2px}
.studentFormSection{margin-top:12px;padding:16px 18px;background:#f8fafd;border:1px solid #e6edf6;border-radius:14px}
.studentFormSectionTitle>span{background:#fff;box-shadow:0 2px 6px rgba(20,40,80,.1)}
.studentFormField>span:first-child{color:#2c3a52}
.studentFormField input,.studentFormField select,.studentFormField textarea{border:1.5px solid #d2dcea;border-radius:11px;background:#fff}
.studentFormField input:hover,.studentFormField select:hover{border-color:#a9c3ee}
.studentFormField input:focus,.studentFormField select:focus,.studentFormField textarea:focus{border-color:#1769ff;box-shadow:0 0 0 4px rgba(23,105,255,.16)}
.studentFormFooter{position:sticky;bottom:-22px;margin:16px -26px -22px;padding:14px 26px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid #e3eaf4}
.studentSaveButton{background:linear-gradient(135deg,#1769ff,#3b82ff)!important;box-shadow:0 8px 18px rgba(23,105,255,.35);padding:12px 24px!important;font-weight:800}
.studentSaveButton:hover{filter:brightness(1.06)}

/* ===== Date & time pickers ===== */
.pickWrap{display:flex!important;align-items:center;gap:0;position:relative;margin:0!important}
.pickIcon{position:absolute;left:12px;font-size:16px;pointer-events:none;z-index:1}
.studentFormField .pickInput{padding-left:40px!important;cursor:pointer;font-weight:600}
.studentFormField select.pickInput{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231769ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center}
input[type=date],input[type=time]{accent-color:#1769ff;cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}
@media(max-width:750px){.studentFormModal{padding:0 16px 18px}.studentFormHeader{margin:0 -16px 6px;padding:18px 16px 14px}.studentFormFooter{margin:14px -16px -18px;padding:12px 16px}}

/* ===== Student row Actions dropdown + time chips ===== */
.rowActionsCell{white-space:nowrap;text-align:right}
.rowMenuBtn{display:inline-flex;align-items:center;gap:7px}
.rowMenuBtn[aria-expanded=true]{background:#e8f0ff;border-color:#9dbcf5;color:#1769ff}
.rowMenuBtn svg{transition:transform .15s}.rowMenuBtn[aria-expanded=true] svg{transform:rotate(180deg)}
.rowMenu{position:fixed;z-index:400;min-width:230px;background:#fff;border:1px solid #e1e8f2;border-radius:14px;padding:7px;box-shadow:0 18px 40px rgba(18,32,60,.2);animation:navDrop .13s ease-out}
.rowMenu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;padding:11px 12px;border-radius:9px;font:inherit;font-size:14px;font-weight:700;color:#172033;cursor:pointer}
.rowMenu button:hover{background:#eef4ff;color:#1769ff}
.rowMenu button i{font-style:normal;width:26px;height:26px;border-radius:8px;background:#f1f5fb;display:grid;place-items:center;font-size:14px}
.timeChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.timeChips button{border:1px solid #d2dcea;background:#fff;border-radius:99px;padding:4px 11px;font-size:12px;font-weight:700;color:#465166;cursor:pointer}
.timeChips button:hover{background:#e8f0ff;border-color:#1769ff;color:#1769ff}

/* ===== Total Drive style time-grid diary (final overrides) ===== */
#calendarGrid .weekCol{height:960px!important;background:repeating-linear-gradient(to bottom,#fff 0,#fff 59px,#e6ebf2 59px,#e6ebf2 60px)!important}
#calendarGrid .timeLabel{height:60px!important;font-weight:600;color:#6b7686}
#calendarGrid .weekBody{max-height:calc(100vh - 250px)!important;min-height:360px}
#calendarGrid .tdEv{position:absolute;z-index:2;border-radius:6px;padding:4px 4px 18px;overflow:hidden;cursor:pointer;color:#fff;line-height:1.15;font-size:10px;text-align:left;box-shadow:0 1px 3px rgba(0,0,0,.18)}
#calendarGrid .tdEv b{display:block;font-size:11px;font-weight:700;overflow-wrap:break-word;hyphens:manual;max-height:3.45em;overflow:hidden}
#calendarGrid .tdEv>span{display:block;font-weight:700;margin-top:2px}
#calendarGrid .tdEv em{display:block;font-style:normal;font-weight:500;margin-top:2px}
#calendarGrid .tdEv .tdPay{position:absolute;left:0;right:0;bottom:0;height:16px;line-height:16px;text-align:center;font-style:normal;font-size:10px;font-weight:600;background:#e91e63;color:#fff}
#calendarGrid .tdEv .tdPaid{background:#43a047}
#calendarGrid .tdBooked{background:#f68b1f}#calendarGrid .tdDone{background:#0b8a3a}#calendarGrid .tdTest{background:#262626}#calendarGrid .tdCancelled{background:#8c8c8c;opacity:.85}
#calendarGrid .tdCancelled b{text-decoration:line-through}
#calendarGrid .tdNow{position:absolute;left:0;right:0;height:2px;background:#e11d48;z-index:3;pointer-events:none}
#calendarGrid .tdNow:before{content:"";position:absolute;left:-1px;top:-3px;width:8px;height:8px;border-radius:50%;background:#e11d48}
#calendarGrid .tdOne .tdEv{font-size:13px;padding:8px 10px 22px}#calendarGrid .tdOne .tdEv b{font-size:15px}
#calendarGrid .tdOne .tdEv .tdPay{height:20px;line-height:20px;font-size:12px}
@media(max-width:600px){#calendarGrid .tdEv .tdEnd{display:none}#calendarGrid .tdOne .tdEv .tdEnd{display:inline}#calendarGrid .tdEv{font-size:9px;padding:3px 3px 16px}#calendarGrid .tdEv b{font-size:9px;letter-spacing:-.1px}#calendarGrid .tdEv .tdPay{font-size:8.5px}#calendarGrid .tdOne .tdEv{font-size:13px}#calendarGrid .tdOne .tdEv b{font-size:15px}}

/* ===== Add sheet (Lesson / Gap / Away) + gap and away blocks ===== */
.modalbox.tdMode{padding:0!important;width:min(520px,100%)!important;max-height:94vh!important;border-radius:16px!important;overflow:hidden;display:flex;flex-direction:column;background:#f7f9fc}
.tdSheet{display:flex;flex-direction:column;min-height:0;max-height:94vh}
.tdHead{background:linear-gradient(135deg,#0f9bff,#1488ff);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;flex:none}
.tdHead h2{margin:0;font-size:20px}.tdHead button{background:none;border:0;color:#fff;font-size:30px;line-height:1;min-width:44px;min-height:44px;cursor:pointer}
.tdSeg{display:flex;background:#eef1f7;border-radius:99px;margin:14px 14px 4px;padding:5px;flex:none}
.tdSeg button{flex:1;border:0;background:none;padding:11px 0;border-radius:99px;font-weight:700;color:#0b1f36;cursor:pointer}
.tdSeg button.on{background:#04223f;color:#fff}
.tdBody{overflow-y:auto;padding:6px 14px 28px;-webkit-overflow-scrolling:touch}
.tdRow{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start;margin:12px 0}
.tdRow>label{color:#6b7686;padding-top:14px}
.tdRow input,.tdRow select,.tdBody textarea{width:100%;background:#eef1f7;border:0;border-radius:10px;padding:12px;font:inherit;min-height:48px}
.tdBody textarea{min-height:90px;resize:none;margin-top:8px}
.tdTwo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tdChips{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.tdChips button{border:1px solid #d2dcea;background:#fff;border-radius:99px;padding:4px 12px;min-height:32px;font-weight:700;font-size:12px;color:#465166;cursor:pointer}
.tdAdvBtn{display:block;margin:16px auto;border:0;background:none;font-weight:800;font-size:15px;cursor:pointer}
.tdInfo{font-weight:600;margin:12px 0 4px;line-height:1.35}
.tdCheck{display:flex;gap:10px;align-items:center;font-weight:700;margin:14px 0}.tdCheck input{width:22px;height:22px;min-height:0}
.tdExtra{margin-top:20px;display:grid;gap:10px;border-top:1px solid #e3e8f0;padding-top:16px}
@media(max-width:750px){.modal:has(.tdMode){padding:0;align-items:flex-end}.modalbox.tdMode{width:100%!important;height:94vh;border-radius:16px 16px 0 0!important}.tdRow{grid-template-columns:84px 1fr}}
#calendarGrid .tdGap{background:#e7f6ec;color:#0b6b2e;border:2px dashed #2e9e57;box-shadow:none}
#calendarGrid .tdGap b,#calendarGrid .tdGap span,#calendarGrid .tdGap em{color:#0b6b2e}
#calendarGrid .tdAway{z-index:1;background:repeating-linear-gradient(45deg,#8a94a6 0,#8a94a6 6px,#a0a9ba 6px,#a0a9ba 12px);box-shadow:none;opacity:.92}

/* ===== Step 18: mobile diary header, swipe, colours, sheet polish ===== */
#calendarGrid{touch-action:pan-y}
#calendarGrid .tdAway{background:#8c8c8c;opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.18)}
#calendarGrid .tdCancelled{background:#e53935;opacity:1}
#calendarGrid .tdCancelled b{text-decoration:line-through}
.tdSeg button{font-weight:800;font-size:16px}
.tdRow>div{min-width:0}
.tdB>label{font-weight:800;color:#0b1f36}
.tdRow input[type=date],.tdRow input[type=time]{display:block;width:100%;max-width:100%;min-width:0;-webkit-appearance:none;appearance:none;text-align:left;font-weight:800;font-size:16px;color:#0b1f36}
.tdRow input[type=date]::-webkit-date-and-time-value,.tdRow input[type=time]::-webkit-date-and-time-value{text-align:left;font-weight:800;margin:0;min-width:0}
@media(max-width:750px){
  #schedule .scheduleToolbar .calendarNav,#schedule .scheduleToolbar .calendarViews,#schedule .scheduleToolbar #calRange{display:none!important}
  #schedule .scheduleToolbar{display:none!important}
  #schedule .diaryMobileActions #diaryMobileMonth,#schedule .diaryMobileActions #diaryMobileToday{font-size:18px!important;font-weight:700!important;color:#fff!important}
  #calendarGrid .weekBody{max-height:calc(100dvh - 205px)!important}
}

/* ===== Step 20: stop iPhone auto-zoom on input focus (needs 16px+) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:750px){input,select,textarea{font-size:16px!important}}

/* Small optional note shown when creating a new student. */
.studentInitialNote{min-height:64px!important;height:64px;resize:vertical}

/* No price set on lesson */
#calendarGrid .tdEv .tdNoPrice{background:#9e9e9e}

/* ===== v14: phone layout — no top tab bar, full-screen friendly ===== */
@media screen and (max-width:750px), screen and (max-device-width:750px){
  #nav,#desktopNav,#appView>nav,#appView>header{display:none!important}
  html,body{min-height:100dvh;overscroll-behavior-y:none}
  body{padding-top:0!important}
}

/* v15: Complete button in lesson action row */
#modalBox:has(.mStTabs) .mPupilActionRow button.mCompleteBtn{color:#15803d!important}

/* ===== v16: Pupils status tabs - bolder text and counts ===== */
@media screen and (max-width:750px){
  .studentStatusTab{font-weight:700!important;font-size:15px!important;padding:14px 14px!important;color:#d3deea!important}
  .studentStatusTab.active{font-weight:800!important;color:#fff!important}
  .studentStatusCount{display:inline-flex!important;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:5px;border-radius:10px;background:rgba(255,255,255,.2);color:#fff;font-size:12px;font-weight:800;line-height:1;vertical-align:1px}
  .studentStatusTab.active .studentStatusCount{background:#13a0ff}
}

/* ===== v17: Pupils status tabs - fit on one row ===== */
@media screen and (max-width:750px){
  .studentStatusTabs{overflow-x:auto!important;justify-content:space-between!important}
  .studentStatusTab{flex:1 1 auto!important;text-align:center;white-space:nowrap;font-size:12.5px!important;padding:13px 5px!important;letter-spacing:0}
  .studentStatusCount{min-width:15px!important;height:15px!important;padding:0 4px!important;margin-left:3px!important;font-size:10px!important;border-radius:8px!important}
}
@media screen and (max-width:380px){
  .studentStatusTab{font-size:11.5px!important;padding:13px 3px!important}
}

/* ===== v18: counts only on Active + Passed; never wrap to a 2nd line ===== */
@media screen and (max-width:750px){
  .studentStatusTabs{flex-wrap:nowrap!important}
  .studentStatusTab{white-space:nowrap!important;display:inline-flex!important;align-items:center;justify-content:center;flex-wrap:nowrap!important}
  .studentStatusTab:not([data-status="active"]):not([data-status="passed"]) .studentStatusCount{display:none!important}
}

/* ===== v19: compact desktop/laptop layout - diary fits the screen ===== */
@media screen and (min-width:751px){
  html body header{padding:8px 18px!important}
  html body header h1{font-size:17px!important}
  html body header small{font-size:11px!important;margin-top:1px!important}
  html body header .secondary{padding:6px 12px!important;font-size:13px!important;min-height:0!important;height:auto!important}
  html body #desktopNav{padding:4px 8px!important;gap:4px!important}
  html body #desktopNav button{padding:7px 12px!important;font-size:14px!important}
  html body main{padding:10px 14px!important}
  html body #schedule .scheduleToolbar{margin-bottom:8px!important;gap:6px!important}
  html body #schedule .scheduleToolbar button{padding:7px 12px!important;font-size:14px!important;min-height:0!important}
  html body #schedule .calendarCard{padding:8px!important}
  html body #calendarGrid .weekTop .timeCorner{font-size:12px!important}
  html body #calendarGrid .weekDay{padding:4px 2px!important}
  html body #calendarGrid .weekDay b{font-size:15px!important;line-height:1.15!important}
  html body #calendarGrid .weekDay span,html body #calendarGrid .weekDay small{font-size:11px!important}
  html body #calendarGrid .weekBody{max-height:calc(100vh - 235px)!important;min-height:300px!important}
}

/* ===== v20: mobile Add New menu + Add Pupil screen ===== */
#mAddNewOv{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px}
#mAddNewOv .mAddNewCard{background:#fff;border-radius:16px;padding:16px 14px 18px;width:100%;max-width:360px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
#mAddNewOv h3{margin:0 0 14px;text-align:center;font-size:19px}
#mAddNewOv .mAddNewGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 6px}
#mAddNewOv .mAddNewGrid button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px;font-size:13px;color:#111;min-height:0}
#mAddNewOv .mAddNewGrid button span{font-size:26px;line-height:1;color:#1a3a5c}
#mAddNewOv .mAddNewGrid button b{font-weight:600}
#modalBox:has(.mAddPupil){position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;border-radius:0!important;padding:0!important;overflow-y:auto;background:#fff!important}
.mAddHead{display:flex;align-items:center;gap:8px;padding:calc(14px + env(safe-area-inset-top)) 14px 12px;color:#fff;background:linear-gradient(90deg,#1593ff,#0f9bff);position:sticky;top:0;z-index:5}
.mAddHead h2{flex:1;margin:0;font-size:22px;color:#fff}
.mAddHead button{background:transparent;border:0;color:#fff;font-size:34px;line-height:1;padding:0 8px;min-height:0}
.mAddHead .mAddSave{font-size:28px}
.mAddBody{padding:10px 8px calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;background:#fff}
.mAddBody input[type=text],.mAddBody input:not([type]),.mAddBody input[type=tel],.mAddBody input[type=email],.mAddBody select{width:100%;box-sizing:border-box;border:1px solid transparent;background:#eef0f4;border-radius:4px;padding:14px 12px;font-size:16px;color:#111;min-height:48px}
.mAddBody input.mErr{border-color:#e5484d;background:#fdeeee}
.mAddBody .mAddSw{display:flex;align-items:center;justify-content:space-between;padding:10px 4px;font-size:15px;font-weight:600;gap:10px}
.mAddBody .mAddSw input{appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:14px;background:#cfd4dc;position:relative;flex:0 0 auto;transition:background .15s;border:0;padding:0;min-height:0}
.mAddBody .mAddSw input::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.mAddBody .mAddSw input:checked{background:#34c759}
.mAddBody .mAddSw input:checked::after{left:20px}
.mAddHint{font-size:12px;color:#6b7280;padding:2px 4px}


/* Dashboard lists: date/time column never overlaps the name (tablet + phone) */
.dashboardListItem{grid-template-columns:minmax(64px,max-content) minmax(0,1fr) auto!important;column-gap:12px!important}
.dashboardTime{white-space:nowrap;min-width:64px}
@media(max-width:750px){
  .dashboardListItem{grid-template-columns:minmax(58px,max-content) minmax(0,1fr)!important;column-gap:10px!important}
  .dashboardListItem .dashboardStatus{grid-column:2;justify-self:start;margin-top:2px}
}


/* =========================================================
   ZNR Requests notification — pending student action
   ========================================================= */
#desktopNav button.requestPending,
.navMoreMenu button.requestPending{
  background:#fff1f2!important;
  color:#b42318!important;
  box-shadow:inset 0 0 0 1px #fecaca;
}
.navMoreMenu button.requestPending .badge,
#desktopNav button.requestPending .badge{
  background:#dc2626!important;
  color:#fff!important;
}
.navMore.requestPendingMenu .navMoreBtn{
  background:#fff1f2!important;
  color:#b42318!important;
}
.navMore.requestPendingMenu .navMoreDot{
  display:block!important;
  background:#dc2626!important;
}
.mobileBottomNav button.requestPending{
  color:#b42318!important;
  background:#fff1f2!important;
}
.mobileBottomNav button.requestPending .mobileNavBadge{
  background:#dc2626!important;
  color:#fff!important;
}


/* ===== ZNR — booking confirmation email option ===== */
.emailConfirmLabel{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.emailConfirmLabel input{width:20px;height:20px;margin:0}
.editFieldEmail{grid-column:1/-1}

/* diary sheet: Paid / Unpaid switch */
.tdPaySeg{display:flex;gap:0;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden}
.tdPaySeg button{flex:1;padding:11px 8px;font-weight:700;background:#fff;color:#475569;border:0;border-radius:0}
.tdPaySeg button+button{border-left:1px solid #cbd5e1}
.tdPaySeg button.on.unpaid{background:#fee2e2;color:#b91c1c}
.tdPaySeg button.on.paid{background:#dcfce7;color:#15803d}

/* diary sheet: driving test time */
.tdTestTime{display:flex;align-items:center;gap:8px}
.tdTestTime select{width:auto!important;min-width:64px;text-align:center}
.tdTestTime b{font-size:20px}
.tdClockNote{color:#94a3b8;font-size:13px;margin-left:6px}

.tdTestTime{flex-wrap:nowrap!important}
.tdTestTime select{flex:1 1 0!important;min-width:0!important;width:auto!important}
.tdClockNote{white-space:nowrap}
.tdHint{margin:4px 0 8px;padding:8px 12px;font-size:12.5px;color:#475569;background:#f1f5f9;border-radius:10px}

/* Tests boxes (Booked / Passed / Failed / Moved) */
.testBoxTabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.testBoxTab{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:999px;padding:9px 14px;font-weight:700;cursor:pointer;box-shadow:0 2px 7px rgba(15,23,42,.05)}
.testBoxTab:hover{border-color:#b8cdfa}
.testBoxTab.active{background:#eaf2ff;border-color:#b7d0ff;color:#1769ff}
.testBoxCount{display:inline-block;min-width:20px;padding:1px 7px;margin-left:4px;border-radius:99px;background:#eef2f7;font-size:12px;text-align:center}
.testBoxTab.active .testBoxCount{background:#1769ff;color:#fff}

/* ===== Simple visual Add lesson window ===== */
#modalBox:has(.nlModal){width:min(600px,96vw)!important;max-width:600px!important}
.nlModal{display:grid;gap:14px}
.nlHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.nlHead h2{margin:0;font-size:26px}.nlHead p{margin:4px 0 0;color:#6b7686}
.nlClose{width:40px;height:40px;border-radius:50%;border:0;background:#eef2f7;font-size:24px;line-height:1;cursor:pointer;padding:0}
.nlBlock{display:grid;gap:7px}
.nlBlock>label{font-weight:800;font-size:13px;color:#0b1f36}
.nlBlock select,.nlBlock input[type=date],.nlBlock input[type=number]{width:100%;min-height:46px;border-radius:12px;font-size:16px}
.nlRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.nlRow input[type=date]{flex:1 1 170px;width:auto}
.nlRow2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nlChips{display:flex;gap:8px;flex-wrap:wrap}
.nlChip{border:1.5px solid var(--border);background:#fff;color:#0b1f36;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer;min-height:0}
.nlChip:hover{border-color:#9bbcff}.nlChip.on{background:#1769ff;border-color:#1769ff;color:#fff}
.nlTime{display:flex;align-items:center;gap:8px}.nlTime select{width:auto!important;min-width:84px;text-align:center;font-weight:800;font-size:20px!important;min-height:52px!important}
.nlTime b{font-size:24px}.nlNote{color:#94a3b8;font-size:13px;margin-left:4px}
.nlPupilChip{display:flex;align-items:center;gap:10px;background:#f4f8ff;border:1px solid #dbe7ff;border-radius:14px;padding:10px 12px}
.nlPupilInfo{display:grid;flex:1;min-width:0}.nlPupilInfo span{color:#6b7686;font-size:13px}
.nlBal{border-radius:99px;padding:4px 12px;font-size:12px;font-weight:800}.nlBal.ok{background:#dcfce7;color:#166534}.nlBal.due{background:#fee2e2;color:#991b1b}
.nlEmail{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.nlSummary{background:#0b1f36;color:#fff;border-radius:14px;padding:13px 16px;font-size:15px;min-height:20px}.nlSummary:empty{display:none}
.nlActions{display:flex;gap:10px;justify-content:flex-end}.nlActions .nlSave{flex:1;max-width:260px;min-height:50px;font-size:16px;font-weight:800;border-radius:12px}
@media(max-width:560px){.nlRow2{grid-template-columns:1fr}.nlActions .nlSave{max-width:none}}
.nlModal .currencyInput{display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;background:#fff;padding-left:12px;overflow:hidden}
.nlModal .currencyInput input{border:0!important;box-shadow:none!important;outline:none!important;background:transparent;flex:1;min-width:0}
.nlModal .currencyInput:focus-within{border-color:#1769ff}

/* Apple-style calendar */
.nlLabelRow{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.nlLabelRow .nlChip{padding:6px 14px;font-size:13px}
.nlCal{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px 14px 10px}
.nlCalHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.nlCalHead b{font-size:20px;color:#0b1f36}
.nlCalHead span{display:flex;gap:6px}.nlCalHead button{width:36px;height:36px;border-radius:50%;border:0;background:#eef2f7;color:#1769ff;font-size:24px;line-height:1;padding:0;cursor:pointer;min-height:0}
.nlCalWeek,.nlCalGrid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.nlCalWeek span{font-size:12px;font-weight:700;color:#8a93a0;padding:4px 0}
.nlDay{height:42px;border:0;background:transparent;font-size:18px;font-weight:500;color:#0b1f36;border-radius:50%;cursor:pointer;padding:0;margin:2px auto;width:42px;min-height:0}
.nlDay.empty{cursor:default}.nlDay:not(.empty):not(.sel):hover{background:#eef2f7}
.nlDay.today{color:#e5322d;font-weight:800}
.nlDay.sel{background:#1769ff;color:#fff;font-weight:800}.nlDay.today.sel{background:#e5322d;color:#fff}
.nlDay{height:36px;width:36px;font-size:16px;margin:1px auto}.nlCalHead b{font-size:18px}.nlCal{padding:10px 12px 6px}

.loginSyncRow{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;font-size:13px;line-height:1.4;color:#475467}
.loginSyncRow input{width:auto!important;min-height:0!important;margin-top:2px;accent-color:#1769ff}

.mobileBackupBtn{width:100%;margin-top:12px;min-height:46px;border:1px solid #b9d3f5;border-radius:12px;background:#fff;color:#1769ff;font-weight:700;font-size:16px}
.mobileBackupBtn:disabled{opacity:.6}
.mobileBackupInfo{margin:8px 4px 0;font-size:12px;line-height:1.4;color:#667085;text-align:center}
@media (max-width:750px){#mobileMoreSheet .mobileBackupBtn,.mobileBackupBtn{width:calc(100% - 32px);margin:18px 16px 0}.mobileBackupInfo{margin:8px 16px 0}}

/* ===== Mock test marking (DL25) - added 2026-10-15 ===== */
#mocks .dl25-card{background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px #00000008}
#mocks h2{margin:0 0 4px;font-size:20px}#mocks h3{margin:0 0 10px;font-size:16px}
#mocks .dl25-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
#mocks .dl25-head p{margin:0}
#mocks .dl25-headTools{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
#mocks .dl25-headTools label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted,#6b7280);font-weight:600}
#mocks .dl25-headTools select{min-width:200px}
#mocks .dl25-warn{border-color:#f5c26b;background:#fff8eb}
#mocks .dl25-warn p{margin:6px 0 0}
#mocks .dl25-small{font-size:12px;color:var(--muted,#6b7280)}
#mocks .dl25-listCard{padding:0;overflow:hidden}
#mocks .dl25-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--border,#e5e7eb);padding:14px 16px;cursor:pointer;font:inherit;color:inherit}
#mocks .dl25-row:last-child{border-bottom:0}
#mocks .dl25-row:hover{background:#f8fafc}
#mocks .dl25-rowMain{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#mocks .dl25-rowMain span,#mocks .dl25-tot{font-size:13px;color:var(--muted,#6b7280)}
#mocks .dl25-rowSide{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#mocks .dl25-chev{font-size:22px;color:#9aa3af}
#mocks .dl25-empty{padding:28px 16px;text-align:center;color:var(--muted,#6b7280)}
#mocks .dl25-badge{display:inline-block;border-radius:99px;padding:3px 10px;font-size:12px;font-weight:700}
#mocks .dl25-pass{background:#dcfce7;color:#166534}
#mocks .dl25-fail{background:#fee2e2;color:#991b1b}
#mocks .dl25-prog{background:#fff1d6;color:#925400}
#mocks .dl25-stats{display:flex;gap:24px;margin-bottom:10px}
#mocks .dl25-stats div{display:flex;flex-direction:column}
#mocks .dl25-stats b{font-size:22px}
#mocks .dl25-stats span{font-size:12px;color:var(--muted,#6b7280)}
#mocks .dl25-pattern{list-style:none;margin:0;padding:0}
#mocks .dl25-pattern li{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--border,#e5e7eb)}
#mocks .dl25-pattern li span{font-size:13px;color:var(--muted,#6b7280)}
#mocks .dl25-pattern li.dl25-repeat b{color:#b42318}
#mocks .dl25-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:13px;font-weight:600;color:var(--muted,#6b7280)}
#mocks .dl25-field input,#mocks .dl25-field textarea{font-weight:400;color:var(--text,#17202a)}
.dl25-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:13px;font-weight:600}
.dl25-modalBtns{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}

/* Marking sheet */
#mocks .dl25-bar{position:sticky;top:0;z-index:20;background:#111827;color:#fff;border-radius:14px;padding:10px 12px;margin-bottom:12px;box-shadow:0 6px 16px #0000002a}
#mocks .dl25-barTop{display:flex;align-items:center;gap:10px}
#mocks .dl25-barTop .secondary{background:#1f2937;color:#fff;border-color:#374151;white-space:nowrap}
#mocks .dl25-barTop .secondary:disabled{opacity:.4}
#mocks .dl25-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#mocks .dl25-who b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mocks .dl25-who span{font-size:12px;color:#cbd5e1}
#mocks .dl25-save{font-style:normal}
#mocks .dl25-save.error{color:#fca5a5}
#mocks .dl25-retry{background:#7f1d1d;color:#fff;border:0;border-radius:6px;padding:2px 6px;font:inherit;font-size:12px;cursor:pointer}
#mocks .dl25-barBottom{display:grid;grid-template-columns:repeat(3,56px) 1fr;gap:8px;margin-top:10px;align-items:stretch}
#mocks .dl25-count{background:#1f2937;border-radius:10px;padding:6px 4px;display:flex;flex-direction:column;align-items:center}
#mocks .dl25-count b{font-size:20px;line-height:1.1}
#mocks .dl25-count span{font-size:10px;color:#cbd5e1;text-transform:uppercase;letter-spacing:.03em}
#mocks .dl25-count.bad{background:#b42318}
#mocks .dl25-verdict{border-radius:10px;padding:6px 10px;display:flex;flex-direction:column;justify-content:center}
#mocks .dl25-verdict.ok{background:#166534}
#mocks .dl25-verdict.bad{background:#b42318}
#mocks .dl25-verdict b{font-size:15px}
#mocks .dl25-verdict span{font-size:12px;opacity:.9}
#mocks .dl25-eta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px}
#mocks .dl25-etaLabel{flex:1;font-size:13px;font-weight:600;color:var(--muted,#6b7280)}
#mocks .dl25-etaBtn{border:1px solid #d1d5db;background:#fff;border-radius:9px;padding:9px 12px;font:inherit;font-weight:600;cursor:pointer;min-height:44px}
#mocks .dl25-etaBtn.on{background:#fff1d6;border-color:#f5c26b;color:#925400}
#mocks .dl25-item{display:grid;grid-template-columns:1fr 64px 52px 52px;gap:6px;align-items:center}
#mocks .dl25-group{background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:14px;margin-bottom:10px;overflow:hidden}
#mocks .dl25-gTitle{font-weight:700;font-size:14px;padding:10px 12px 4px}
#mocks .dl25-item{padding:5px 10px 5px 12px;border-top:1px solid #f1f3f5}
#mocks .dl25-gTitle+.dl25-item{border-top:0}
#mocks .dl25-item.has{background:#fffbeb}
#mocks .dl25-iName{display:flex;align-items:center;gap:6px;font-size:14px;min-height:20px}
#mocks .dl25-clear{display:none;border:0;background:#e5e7eb;color:#374151;border-radius:99px;width:22px;height:22px;line-height:20px;padding:0;font-size:16px;cursor:pointer}
#mocks .dl25-item.has .dl25-clear{display:inline-block}
#mocks .dl25-f{height:46px;border-radius:10px;border:1.5px solid #d1d5db;background:#fff;font:inherit;font-size:18px;font-weight:800;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#mocks .dl25-f:active{transform:scale(.95)}
#mocks .dl25-f:not(.on){color:#b6bdc7;font-size:12px;font-weight:700}
#mocks .dl25-fm.on{background:#fde68a;border-color:#f59e0b;color:#78350f}
#mocks .dl25-fs.on{background:#fca5a5;border-color:#dc2626;color:#7f1d1d}
#mocks .dl25-fd.on{background:#7f1d1d;border-color:#7f1d1d;color:#fff}
#mocks .dl25-fs{border-color:#f3c4c4}
#mocks .dl25-fd{border-color:#e7a3a3}
#mocks .dl25-notes textarea{min-height:90px}
#mocks .dl25-endBtns{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media(max-width:750px){
 #mocks .dl25-head{flex-direction:column;align-items:stretch}
 #mocks .dl25-headTools{flex-direction:column;align-items:stretch}
 #mocks .dl25-headTools select{min-width:0;width:100%}
 #mocks .dl25-card{border-radius:12px;padding:12px}
 #mocks .dl25-bar{position:fixed;left:0;right:0;top:0;z-index:60;border-radius:0 0 14px 14px;margin:0;padding:calc(8px + env(safe-area-inset-top)) 10px 8px}
 #mocks .dl25-barTop .secondary{padding:8px 10px}
 #mocks .dl25-barBottom{grid-template-columns:44px 44px 44px 1fr;gap:6px;margin-top:8px}
 #mocks .dl25-count{padding:4px 2px}
 #mocks .dl25-count b{font-size:17px}
 #mocks .dl25-count span{font-size:8px}
 #mocks .dl25-verdict{padding:4px 8px}
 #mocks .dl25-verdict b{font-size:14px}
 #mocks .dl25-verdict span{font-size:11px}
 #mocks .dl25-item{grid-template-columns:1fr 58px 48px 48px}
 #mocks .dl25-endBtns button{flex:1}
}

/* ===== Theory certificate tracker - added 2026-10-18 ===== */
#theory .th-card{background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px #00000008}
#theory h2{margin:0 0 4px;font-size:20px}
#theory .th-head p{margin:0 0 12px}
#theory .th-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#theory .th-stats div{border-radius:10px;padding:8px 10px;display:flex;flex-direction:column}
#theory .th-stats b{font-size:22px}
#theory .th-stats span{font-size:12px}
#theory .th-stats .th-expired,#theory .th-stats .th-beforeTest{background:#fee2e2;color:#991b1b}
#theory .th-stats .th-soon{background:#fef3c7;color:#92400e}
#theory .th-stats .th-missing{background:#f1f5f9;color:#475569}
#theory .th-list{padding:0;overflow:hidden}
#theory .th-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border,#e5e7eb);border-left:4px solid transparent}
#theory .th-row:last-child{border-bottom:0}
#theory .th-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#theory .th-main span{font-size:13px;color:var(--muted,#6b7280)}
#theory .th-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#theory .th-badge{border-radius:99px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap}
#theory .th-expired,#theory .th-beforeTest{border-left-color:#dc2626}
#theory .th-expired .th-badge,#theory .th-beforeTest .th-badge{background:#fee2e2;color:#991b1b}
#theory .th-soon{border-left-color:#f59e0b}
#theory .th-soon .th-badge{background:#fef3c7;color:#92400e}
#theory .th-ok .th-badge{background:#dcfce7;color:#166534}
#theory .th-missing .th-badge{background:#f1f5f9;color:#475569}
#theory .th-empty{padding:24px;text-align:center;color:var(--muted,#6b7280)}
.theoryAlert{display:flex;align-items:center;gap:10px;background:#fff7ed;border:1px solid #fdba74;border-radius:12px;padding:10px 14px;margin:0 0 12px;cursor:pointer;color:#7c2d12}
.theoryAlert span{flex:1;font-size:13px}
.theoryAlert em{font-style:normal;font-size:22px;color:#c2410c}
@media(max-width:750px){
 #theory .th-stats{grid-template-columns:repeat(2,1fr)}
 #theory .th-row{flex-direction:column;align-items:stretch}
 #theory .th-side{flex-direction:row;justify-content:space-between;align-items:center}
 .theoryAlert{margin:8px 8px 10px}
}
#dashboard>#theoryAlert.theoryAlert:not([hidden]){display:flex!important}

/* ===== Learning resources - added 2026-10-18 ===== */
#resources .rs-card{background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px #00000008}
#resources .rs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
#resources .rs-head h2{margin:0 0 4px;font-size:20px}#resources .rs-head p{margin:0}
#resources .rs-group h3{margin:0 0 6px;font-size:16px}
#resources .rs-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #f1f3f5}
#resources .rs-group h3+.rs-item{border-top:0}
#resources .rs-thumb{position:relative;flex:0 0 96px;height:64px;border-radius:10px;overflow:hidden;background:#111827;display:flex;align-items:center;justify-content:center;text-decoration:none}
#resources .rs-thumb img{width:100%;height:100%;object-fit:cover}
#resources .rs-thumb i{position:absolute;color:#fff;font-style:normal;font-size:20px;text-shadow:0 1px 4px #000}
#resources .rs-thumb.rs-link{background:#e8f0ff}#resources .rs-thumb.rs-link i{color:#1769ff;text-shadow:none}
#resources .rs-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#resources .rs-main span{font-size:13px;color:var(--muted,#6b7280)}
#resources .rs-main em{font-style:normal;font-size:12px;color:#1769ff}
#resources .rs-warn{border-color:#f5c26b;background:#fff8eb}#resources .rs-warn p{margin:6px 0 0}
#resources .rs-small{font-size:12px;color:var(--muted,#6b7280)}
#resources .rs-empty{text-align:center;color:var(--muted,#6b7280)}
@media(max-width:750px){#resources .rs-head{flex-direction:column;align-items:stretch}#resources .rs-thumb{flex-basis:76px;height:56px}}

/* ===== Reflective logs - added 2026-10-18 ===== */
#reflections .rf-card{background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px #00000008}
#reflections h2{margin:0 0 4px;font-size:20px}#reflections h3{margin:0 0 8px;font-size:16px}
#reflections .rf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
#reflections .rf-head p{margin:0}
#reflections .rf-head label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted,#6b7280)}
#reflections .rf-head select{min-width:200px}
#reflections .rf-warn{border-color:#f5c26b;background:#fff8eb}#reflections .rf-warn p{margin:6px 0 0}
#reflections .rf-small{font-size:12px;color:var(--muted,#6b7280)}
.rf-item{padding:10px 0;border-top:1px solid #f1f3f5}
.rf-item:first-of-type{border-top:0}
.rf-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rf-top span{font-size:13px;color:var(--muted,#6b7280)}
.rf-item p{margin:5px 0 0;font-size:14px}
.rf-item p em{font-style:normal;font-weight:700;color:#374151}
.rf-dots{display:inline-flex;gap:3px}.rf-dots i{width:9px;height:9px;border-radius:50%;background:#dbe2ea}.rf-dots i.on{background:#1769ff}
#reflections .rf-wait{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #f1f3f5;font-size:14px}
#reflections .rf-wait:first-of-type{border-top:0}#reflections .rf-wait span{color:var(--muted,#6b7280)}
#reflections .rf-trend{display:flex;align-items:flex-end;gap:8px;height:120px;padding:4px 0}
#reflections .rf-trend div{flex:1;max-width:44px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
#reflections .rf-trend i{width:100%;background:#1769ff;border-radius:6px 6px 2px 2px;min-height:4px}
#reflections .rf-trend span{font-size:10px;color:var(--muted,#6b7280);white-space:nowrap}
.rf-profile{margin:14px 0 4px;padding:14px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:#fff}
.rf-profileHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
@media(max-width:750px){#reflections .rf-head{flex-direction:column;align-items:stretch}#reflections .rf-head select{min-width:0;width:100%}.rf-profile{margin:12px}}

/* ===== Hide money - added 2026-10-22 ===== */
.moneyHiddenNote{display:none!important}
body.hideMoney #payments>*:not(.moneyHiddenNote){display:none!important}
body.hideMoney #payments>.moneyHiddenNote{display:block!important}
body.hideMoney #mobileMoneyToggle{opacity:.85}