/* Sprint 6G — iPad workflow polish + instructor appearance controls. */ #appView{ --cs-gradient-1:#7654df; --cs-gradient-2:#31a8dc; --cs-dark-bg:#0e1823; --cs-dark-surface:#172534; --cs-dark-surface-2:#1d2d3c; --cs-dark-border:#385064; --cs-dark-text:#edf5fb; --cs-dark-muted:#a9bdcc; min-height:100vh; } #appView .week2-board, #appView .month2-shell, #enquiries .rc6c-enquiry-list, #enquiryEditor .rc6c1-enquiry-editor-shell, #driveEditor.rc6c3-drive-editor, #pupils .rc6d-pupil-canvas, #editor .rc6d1-pupil-canvas, #payments .rc6e-payment-canvas, #dashboard,#tools, #settings form{ background:linear-gradient(120deg,var(--cs-gradient-1),var(--cs-gradient-2))!important; } /* iPad/compact Week: day-by-day vertical agenda instead of squeezed columns. */ @media(max-width:1024px){ #appView .week2-board{display:block;overflow:visible;padding:10px;border-radius:15px} #appView .week2-day{margin-bottom:10px;padding:10px;min-height:0} #appView .week2-day:last-child{margin-bottom:0} #appView .week2-list{min-height:0} } /* Request-payment text action on genuinely unpaid Week cards. */ .week2-request-payment{ display:inline-flex;align-items:center;justify-content:center; margin-top:8px;padding:7px 9px;border-radius:8px; background:#e8f2ff;color:#0759a8;border:1px solid #b9d7f2; font-size:.7rem;font-weight:900;line-height:1;box-shadow:none; } .week2-request-payment:hover{background:#d7eaff} .week2-request-payment:active{transform:translateY(1px)} /* iPad safety for add-to-diary and available-drive offer flows. Do not force a grid shape here: Safari may expose a narrower CSS viewport than the physical iPad screenshot. Let the existing responsive form choose one/two columns. */ @media(max-width:1024px){ #driveEditor #driveForm>div,#offerEditor #offerForm>div{min-width:0} #driveEditor input,#driveEditor select,#driveEditor textarea, #offerEditor input,#offerEditor select,#offerEditor textarea{width:100%;max-width:100%;box-sizing:border-box} #driveEditor #driveForm>.full.row{display:flex!important;flex-wrap:wrap!important} #driveEditor #driveForm>.full.row button{width:auto!important;flex:1 1 150px} #driveEditor #driveForm>.full.row .danger{grid-column:auto!important} #offerEditor .offer-candidate{min-width:0;overflow:hidden} #offerEditor .offer-candidate label{min-width:0;width:100%} #offerEditor .offer-candidate label>span{min-width:0;overflow-wrap:anywhere} #offerEditor .offer-send-row>.row{align-items:stretch!important;flex-direction:column} #offerEditor .offer-send-row>.row>.row{display:grid!important;grid-template-columns:1fr 1fr;width:100%} #offerEditor .offer-send-row button{width:100%;min-width:0} #offerEditor #offerForm .full>.row{align-items:stretch!important} #offerEditor #selectMatchingOffers{width:100%;margin-top:7px} } /* Pupil Passed state is derived from Retirement reason = Passed. */ .rc6d-pupil-card.passed{--pupil-accent:#1685e8} .rc6d-pupil-card.passed .rc6d-pupil-status{background:#1685e8} /* Settings appearance controls — simple brand-safe swatches. */ .rc6g-theme-grid{display:grid;grid-template-columns:1fr 1fr minmax(150px,.55fr) minmax(180px,.8fr);gap:14px;align-items:end} .rc6g-theme-grid label{margin:0} .rc6g-swatch-group{display:grid;gap:7px} .rc6g-swatch-heading{font-weight:800;font-size:.9rem;color:#17324d} .rc6g-swatches{display:flex;gap:7px;flex-wrap:wrap} .rc6g-swatch{position:relative;width:36px;height:36px;padding:0;border-radius:9px;background:var(--swatch);border:2px solid #fff;box-shadow:0 0 0 1px #afbdc8;transition:transform .1s ease,box-shadow .12s ease} .rc6g-swatch:hover{transform:translateY(-1px);box-shadow:0 0 0 2px #17324d55} .rc6g-swatch.selected{box-shadow:0 0 0 3px #17324d} .rc6g-swatch.selected::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:1000;font-size:1rem;text-shadow:0 1px 3px #0008} .rc6g-theme-mode{display:grid;gap:5px} .rc6g-theme-preview-wrap{display:grid;gap:5px} .rc6g-theme-preview{height:46px;border-radius:12px;border:1px solid #ffffff55;box-shadow:inset 0 0 0 1px #17324d18} .rc6g-theme-actions{margin-top:12px} #rc6gThemeSyncNote{font-size:.82rem} .rc6g1-request-payment{background:#0b78df!important;color:#fff!important;box-shadow:0 3px 9px #0b78df2b} .rc6g1-request-payment:hover{background:#0869c5!important} #appView.theme-dark .rc6g-swatch-heading{color:var(--cs-dark-text)} #appView.theme-dark .rc6g-swatch{border-color:#22384a;box-shadow:0 0 0 1px #6f8596} #appView.theme-dark .rc6g-swatch.selected{box-shadow:0 0 0 3px #edf5fb} @media(max-width:950px){.rc6g-theme-grid{grid-template-columns:1fr 1fr}.rc6g-theme-preview-wrap{grid-column:2}.rc6g-theme-mode{grid-column:1}} @media(max-width:560px){.rc6g-theme-grid{grid-template-columns:1fr}.rc6g-theme-preview-wrap,.rc6g-theme-mode{grid-column:auto}} /* Dark mode: instructor app neutral surfaces only; status colours remain fixed. */ #appView.theme-dark{background:var(--cs-dark-bg);color:var(--cs-dark-text)} #appView.theme-dark main{background:var(--cs-dark-bg);color:var(--cs-dark-text)} #appView.theme-dark .card, #appView.theme-dark .week2-day, #appView.theme-dark .week2-card, #appView.theme-dark .month2-calendar-panel, #appView.theme-dark .month2-agenda, #appView.theme-dark .month2-cell, #appView.theme-dark .month2-agenda-card, #appView.theme-dark .rc6c-enquiry-card, #appView.theme-dark .rc6c1-editor-head, #appView.theme-dark .rc6c1-editor-section, #appView.theme-dark .rc6c1-contact-section, #appView.theme-dark .rc6d-pupil-card, #appView.theme-dark .rc6d1-detail-section, #appView.theme-dark .lesson-credit-card, #appView.theme-dark .retire-panel, #appView.theme-dark .rc6e-payment-card, #appView.theme-dark .rc6e-history-card, #appView.theme-dark #dashboard>.card, #appView.theme-dark #tools>.card, #appView.theme-dark #settings>.card, #appView.theme-dark #settings .settings-card, #appView.theme-dark #settings form>.row:last-child, #appView.theme-dark #dashboard .stat, #appView.theme-dark #dashboard .alert-controls, #appView.theme-dark #tools .pupil, #appView.theme-dark .settings-card{ background:var(--cs-dark-surface)!important; border-color:var(--cs-dark-border)!important; color:var(--cs-dark-text)!important; box-shadow:0 3px 14px #0003; } #appView.theme-dark .week2-card.status-block, #appView.theme-dark .month2-agenda-card.status-block{background:var(--cs-dark-surface-2)!important} #appView.theme-dark h1,#appView.theme-dark h2,#appView.theme-dark h3, #appView.theme-dark label, #appView.theme-dark .week2-name,#appView.theme-dark .week2-time, #appView.theme-dark .week2-day-title b, #appView.theme-dark .rc6c-enquiry-name, #appView.theme-dark .rc6d-pupil-name, #appView.theme-dark .rc6e-payment-name, #appView.theme-dark .rc6e-payment-amount, #appView.theme-dark .rc6e-history-main, #appView.theme-dark .month2-card-name{color:var(--cs-dark-text)!important} #appView.theme-dark .muted, #appView.theme-dark .week2-day-title span, #appView.theme-dark .week2-meta, #appView.theme-dark .rc6c-enquiry-detail, #appView.theme-dark .rc6d-pupil-detail, #appView.theme-dark .rc6d-pupil-note, #appView.theme-dark .rc6e-payment-meta, #appView.theme-dark .month2-card-meta{color:var(--cs-dark-muted)!important} #appView.theme-dark input,#appView.theme-dark textarea,#appView.theme-dark select{background:#101c28!important;color:var(--cs-dark-text)!important;border-color:#40576a!important} #appView.theme-dark input::placeholder,#appView.theme-dark textarea::placeholder{color:#7890a2} #appView.theme-dark .secondary, #appView.theme-dark .rc6c-filter-chip, #appView.theme-dark .rc6d-pupil-chip, #appView.theme-dark .rc6e-payment-tabs .payment-view{background:#26394a;color:var(--cs-dark-text);border-color:#40576a} #appView.theme-dark .rc6c-enquiry-search, #appView.theme-dark .rc6d-pupil-search, #appView.theme-dark .rc6e-history-search{background:#101c28;border-color:#40576a} #appView.theme-dark .month2-head div,#appView.theme-dark .week2-count{background:#26394a;color:#dce8f1;border-color:#40576a} #appView.theme-dark .week2-empty, #appView.theme-dark .month2-empty, #appView.theme-dark .rc6d-pupil-empty, #appView.theme-dark .rc6e-payment-empty{background:#132230!important;color:#9fb3c3!important;border-color:#52697b!important} #appView.theme-dark .privacy-details{background:#142432;border-color:#40576a} #appView.theme-dark .privacy-details p{color:var(--cs-dark-muted)} /* Sprint 6G.6 — iPad Safari native date/time width normalisation. The issue was the intrinsic width of date/time controls, not the form grid. */ #driveEditor #driveDate, #driveEditor #driveTime, #offerEditor #offerDate, #offerEditor #offerTime{ display:block!important; inline-size:100%!important; width:100%!important; min-inline-size:0!important; min-width:0!important; max-inline-size:100%!important; max-width:100%!important; box-sizing:border-box!important; } #driveEditor #driveDate::-webkit-date-and-time-value, #driveEditor #driveTime::-webkit-date-and-time-value, #offerEditor #offerDate::-webkit-date-and-time-value, #offerEditor #offerTime::-webkit-date-and-time-value{ text-align:left; min-width:0; } /* Sprint 6G.7 — iPad/WebKit time control column-fit fix. Screenshots confirmed Date is correct and only input[type=time] overruns the right grid column in Add to Calendar and Offer available drive. */ @media (min-width:651px) and (max-width:1100px){ #driveEditor #driveTime, #offerEditor #offerTime{ width:-webkit-fill-available!important; inline-size:-webkit-fill-available!important; max-width:-webkit-fill-available!important; min-width:0!important; margin-left:0!important; margin-right:0!important; } } /* Sprint 6G.8 — structural containment for iPad native date/time fields. 6G.7 screenshots showed both native date/time controls could render wider than their grid tracks. Keep equal minmax(0,1fr) tracks, then make a correctly sized wrapper own the visible border and clip only the native control's intrinsic overflow. */ @media (min-width:651px) and (max-width:1100px){ #driveEditor #driveForm, #offerEditor #offerForm{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; } #driveEditor #driveForm>div, #offerEditor #offerForm>div{ min-width:0!important; max-width:100%!important; } } #driveEditor .rc6g8-native-field, #offerEditor .rc6g8-native-field{ min-width:0!important; max-width:100%!important; contain:inline-size; } #driveEditor .rc6g8-native-box, #offerEditor .rc6g8-native-box{ display:block; width:100%; min-width:0; max-width:100%; overflow:hidden; box-sizing:border-box; border:1px solid #afbdc8; border-radius:10px; background:#fff; } #driveEditor .rc6g8-native-box>input, #offerEditor .rc6g8-native-box>input{ display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-sizing:border-box!important; } #appView.theme-dark #driveEditor .rc6g8-native-box, #appView.theme-dark #offerEditor .rc6g8-native-box{ background:#101c28!important; border-color:#40576a!important; } /* Sprint 6G.9 — preventative native field containment audit. Apply the proven 6G.8 wrapper pattern to every remaining visible date/time field so iPad/Chromium/WebKit intrinsic controls cannot expand a grid track. */ .rc6g9-native-field{ min-width:0!important; max-width:100%!important; contain:inline-size; } .rc6g9-native-box{ display:block; width:100%; min-width:0; max-width:100%; overflow:hidden; box-sizing:border-box; border:1px solid #afbdc8; border-radius:10px; background:#fff; } .rc6g9-native-box>input[type="date"], .rc6g9-native-box>input[type="time"]{ display:block!important; inline-size:100%!important; width:100%!important; min-inline-size:0!important; min-width:0!important; max-inline-size:100%!important; max-width:100%!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-sizing:border-box!important; } .rc6g9-native-box>input[type="date"]::-webkit-date-and-time-value, .rc6g9-native-box>input[type="time"]::-webkit-date-and-time-value{ text-align:left; min-width:0; } #appView.theme-dark .rc6g9-native-box{ background:#101c28!important; border-color:#40576a!important; } /* Prevent the last two app-specific two-column grids from growing to native content width on tablet layouts. */ @media (max-width:950px){ .rc6g-theme-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; } .rc6g-theme-grid>*{min-width:0} } @media (min-width:651px) and (max-width:1100px){ #offerEditor .offer-send-row>.row>.row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; } #offerEditor .offer-send-row>.row>.row>*{min-width:0} } @media (max-width:560px){ .rc6g-theme-grid{grid-template-columns:minmax(0,1fr)!important} .rc6g-theme-preview-wrap,.rc6g-theme-mode{grid-column:auto!important} }