/* ══════════════════════════════════════════════════════════════ BLine — Mobile App Polish Loaded on all BLine dashboard pages. Desktop behaviour preserved. ══════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────── 1. SUPPRESS WORDPRESS / THEME CHROME INSIDE THE APP Any page using a BLine dashboard shortcode gets `.pt-app-mode` on . Hide theme footer, breadcrumbs, page titles, widgets. ──────────────────────────────────────────────────────────── */ body.pt-app-mode { background: #F8FAFC; } /* Hide the WordPress/theme site header on dashboard (app) pages. It rendered as a thin white bar above the app's own .ds-header — redundant chrome that looked unprofessional. style.css force-shows the theme header globally (a staging regression fix), so these need higher specificity + !important to win; scoped to .pt-app-mode so signup/public/onboarding pages keep their theme header. */ body.pt-app-mode #masthead, body.pt-app-mode .site-header, body.pt-app-mode header.site-header, body.pt-app-mode .ast-above-header-wrap, body.pt-app-mode .ast-primary-header-bar, body.pt-app-mode .ast-main-header-wrap, body.pt-app-mode .main-header-bar-wrap { display: none !important; } /* Hide theme footer completely inside app pages */ body.pt-app-mode footer, body.pt-app-mode .site-footer, body.pt-app-mode .ast-footer, body.pt-app-mode .footer-widgets-wrap, body.pt-app-mode .footer-primary, body.pt-app-mode .site-below-footer-wrap, body.pt-app-mode .site-above-footer-wrap, body.pt-app-mode #colophon, body.pt-app-mode .ast-small-footer, body.pt-app-mode .astra-footer, body.pt-app-mode .elementor-location-footer { display: none !important; } /* Hide theme page titles, breadcrumbs, sidebars, and default page padding the theme wraps around shortcode content. */ body.pt-app-mode .entry-title, body.pt-app-mode .entry-header, body.pt-app-mode .ast-single-post-order, body.pt-app-mode .ast-breadcrumbs-wrapper, body.pt-app-mode .ast-breadcrumbs, body.pt-app-mode .post-navigation, body.pt-app-mode .page-header, body.pt-app-mode #secondary, body.pt-app-mode .widget-area, body.pt-app-mode .nav-links, body.pt-app-mode .entry-meta { display: none !important; } /* Strip default theme padding/max-width around the app content */ body.pt-app-mode .site-content, body.pt-app-mode #primary, body.pt-app-mode .ast-container, body.pt-app-mode .entry-content, body.pt-app-mode .site-main, body.pt-app-mode article.post, body.pt-app-mode article.page { max-width: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } body.pt-app-mode .ast-container-fluid, body.pt-app-mode .ast-row { margin: 0 !important; padding: 0 !important; } /* ──────────────────────────────────────────────────────────── 2. APP SHELL — header spacing & bottom-nav safe areas ──────────────────────────────────────────────────────────── */ .ds-instructor-wrap { /* Reserve space for bottom nav + iOS home indicator */ padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } /* Pupil wrap mirrors instructor wrap bottom padding + 8px for floating nav lift */ .ds-pupil-wrap { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } /* viewport-fit=cover lets the page draw under the notch/status bar. Instead of reserving that inset as a neutral (grey) strip ABOVE the header — which read as a stray bar and sat differently in Safari vs the installed PWA — let the white header background FILL the inset. The header sticks to the very top and pads its own content down by the inset, so the status bar sits on the header's white background and the whole top reads as one deliberate header bar, the same in Safari and standalone. env() is 0 without a notch, so this is a no-op there (header is just its base height). */ .ds-wrap { padding-top: 0 !important; } .ds-header { top: 0 !important; height: auto !important; min-height: calc(56px + env(safe-area-inset-top, 0px)) !important; padding-top: env(safe-area-inset-top, 0px) !important; box-sizing: border-box !important; } .ds-header-inner { height: 56px !important; } /* Bottom nav polish — safe-area inset for iPhone home bar */ .ds-instr-bottom-nav { /* Grow the bar by the home-indicator inset so the buttons keep their full height and sit ABOVE the indicator. The base height is fixed, so without adding the inset to height the safe-area padding would just squash the buttons. */ height: calc(72px + env(safe-area-inset-bottom, 0px)) !important; padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important; /* Centre via margins, NOT translateX. Under viewport-fit=cover, iOS Safari lets a position:fixed element that carries a translate transform and/or will-change:transform drift up the page during momentum scroll (it tracks a stale composited position). Centring with left/right:0 + margin auto removes the translateX, and dropping will-change stops the over-promotion. A bare translateZ(0) is kept as a harmless GPU-layer hint to avoid the original repaint lag. */ left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; will-change: auto !important; } /* Pupil nav: floating pill at all widths, not just ≥480px. Lifts 8px off the bottom edge, shrinks to leave breathing room on either side, and rounds all four corners. */ .ds-pupil-bottom-nav { /* Floating pill: lift it above the home indicator by the inset rather than padding it, so it stays a compact pill that clears the bar. */ bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; width: calc(100% - 24px) !important; border-radius: 20px !important; border: 1px solid #E2E8F0 !important; padding-bottom: 8px !important; /* Same fix as the instructor nav: centre with margins (not translateX) and drop will-change, so viewport-fit=cover doesn't make this fixed pill drift up the page during momentum scroll. translateZ(0) kept as a layer hint. */ left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; will-change: auto !important; } /* Floating-pill height must NOT include the home-indicator inset. Both navs now float, lifted clear of the indicator by `bottom: calc(8px + safe-area-inset)`, so the `.ds-instr-bottom-nav { height: calc(72px + inset) }` rule above (a leftover from the old edge-to-edge nav) double-counts the inset and inflates the pill by ~34px inside the installed PWA — the extra depth under the labels. Pin the height so the instructor and pupil pills stay compact and identical in standalone mode. The two-class selector (0,2,0) beats every single-class height rule regardless of source order. */ .ds-instr-bottom-nav.ds-pupil-bottom-nav { height: 72px !important; } /* Larger nav tap targets across both dashboards. mobile.css loads last, so these win over the pupil nav's several legacy icon-size blocks in style.css without having to edit each one. */ .ds-instr-bottom-nav a svg, .ds-instr-bottom-nav .ds-nav-more svg, .ds-pupil-bottom-nav a svg { width: 24px !important; height: 24px !important; } .ds-instr-bottom-nav a, .ds-pupil-bottom-nav a { font-size: .72rem !important; } /* Fit the icon-pill + label column inside the bar so the label isn't clipped. The 34px pill + gap + label + paddings overflowed the bar's inner height, and justify-content:center then pushed the overflow off both ends — shaving the bottom off the wording. Shrink the pill a touch and tighten the vertical padding/gap so the whole column clears with room to spare. */ .ds-instr-bottom-nav .ds-nav-pill { height: 30px !important; } .ds-instr-bottom-nav a, .ds-instr-bottom-nav .ds-nav-more { padding-top: 4px !important; padding-bottom: 4px !important; gap: 2px !important; } /* ──────────────────────────────────────────────────────────── 3. MOBILE BOTTOM-SHEET MODALS (PT.* modals) Desktop keeps centred modal; mobile gets full-width bottom sheet. ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .pt-modal-overlay { align-items: flex-end !important; padding: 0 !important; } .pt-modal-overlay.is-open .pt-modal { animation: pt-sheet-up 280ms cubic-bezier(0.16, 1, 0.3, 1); } .pt-modal { width: 100% !important; max-width: 100% !important; max-height: 92vh !important; border-radius: 20px 20px 0 0 !important; margin: 0 !important; display: flex; flex-direction: column; overflow: hidden; } /* Drag handle */ .pt-modal::before { content: ""; display: block; width: 44px; height: 4px; background: #CBD5E1; border-radius: 2px; margin: 10px auto 2px; flex-shrink: 0; } .pt-modal-head { padding: 14px 20px 10px !important; border-bottom: 1px solid #E2E8F0 !important; flex-shrink: 0; } .pt-modal-title { font-size: 1.05rem !important; font-weight: 800 !important; } .pt-modal-close { width: 34px !important; height: 34px !important; font-size: 1.3rem !important; border-radius: 50% !important; background: #F1F5F9 !important; color: #64748B !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; } .pt-modal-body { flex: 1; overflow-y: auto; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)) !important; -webkit-overflow-scrolling: touch; } .pt-modal-row { grid-template-columns: 1fr !important; gap: 14px !important; } /* Larger tap targets on mobile */ .pt-field-input { min-height: 46px !important; font-size: 1rem !important; /* prevents iOS zoom-on-focus */ padding: 12px 14px !important; } .pt-field-label { font-size: .82rem !important; margin-bottom: 6px !important; } /* Action buttons stick to bottom, full width, no cramped row */ .pt-modal-actions { flex-direction: column-reverse !important; gap: 10px !important; padding-top: 14px !important; border-top: 1px solid #F1F5F9 !important; margin-top: 18px !important; } .pt-modal-actions .pt-btn { width: 100% !important; min-height: 48px !important; font-size: .95rem !important; justify-content: center !important; } } @keyframes pt-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ──────────────────────────────────────────────────────────── 4. LESSON PANEL — already slide-in, but tighten for mobile ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .pt-panel { width: 100% !important; max-width: 100% !important; padding-bottom: env(safe-area-inset-bottom, 0px); } .pt-panel-header { padding: 18px 20px 14px !important; } .pt-panel-body { padding: 18px 20px !important; } .pt-panel-footer { flex-wrap: wrap !important; gap: 10px !important; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) !important; } .pt-panel-footer .pt-btn--green { width: 100%; order: 1; min-height: 50px; justify-content: center; } .pt-panel-footer .pt-btn--ghost { flex: 1; order: 2; } .pt-panel-footer-status { flex: 1 1 100%; order: 0; text-align: center; } } /* ──────────────────────────────────────────────────────────── 5. PREMIUM EMPTY STATE ──────────────────────────────────────────────────────────── */ .pt-empty-state { padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .pt-empty-state--compact { padding: 28px 20px; } .pt-empty-state-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 4px; opacity: .85; } .pt-empty-state-title { font-size: 1.05rem; font-weight: 800; color: #0F172A; font-family: 'Syne', sans-serif; } .pt-empty-state-desc { font-size: .88rem; color: #64748B; max-width: 320px; line-height: 1.5; margin-bottom: 8px; } .pt-empty-state .ds-btn, .pt-empty-state .pt-btn { margin-top: 4px; } /* ──────────────────────────────────────────────────────────── 6. PUPILS TAB — mobile list/detail behaviour ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .pt-pupils-tab.ds-content { display: block !important; } /* When viewing a pupil detail on mobile: hide the sidebar list */ .pt-pupils-tab--detail .ds-content-sidebar { display: none; } /* When viewing the list: hide the empty welcome main column */ .pt-pupils-tab--list .ds-content-main { display: none; } .pt-pupils-tab .ds-content-sidebar, .pt-pupils-tab .ds-content-main { width: 100% !important; max-width: 100% !important; flex: none !important; } } /* Pupil list item polish */ .pt-pupils-tab .ds-pupil-item { min-height: 64px; } /* ──────────────────────────────────────────────────────────── 7. PUPIL DETAIL — progressive disclosure on mobile Sections get collapsible via .pt-section-toggle class applied by JS. ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .ds-pupil-detail { padding: 0 !important; } .ds-pupil-detail-header { padding: 18px !important; gap: 12px !important; } .ds-pupil-detail-header .ds-pupil-detail-avatar { width: 48px !important; height: 48px !important; font-size: 1.2rem !important; } .ds-pupil-detail-info h2 { font-size: 1.15rem !important; margin-bottom: 4px !important; } .ds-pupil-detail-meta { font-size: .78rem !important; } /* Actions: wrap to single column where needed */ .ds-pupil-detail-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 14px 18px !important; } .ds-pupil-detail-actions .ds-btn { width: 100%; justify-content: center; font-size: .85rem; padding: 10px 12px; } .ds-pupil-detail-actions .ds-btn-primary { grid-column: 1 / -1; } /* Cards: increase breathing room between sections */ .ds-pupil-detail .ds-card { margin-bottom: 14px !important; border-radius: 14px !important; } /* Collapsible sections on mobile */ .ds-pupil-detail .ds-card-header { cursor: pointer; user-select: none; position: relative; padding-right: 44px !important; } .ds-pupil-detail .ds-card-header::after { content: "▾"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 1rem; transition: transform 0.2s ease; } .ds-pupil-detail .ds-card.pt-collapsed .ds-card-header::after { transform: translateY(-50%) rotate(-90deg); } .ds-pupil-detail .ds-card.pt-collapsed > *:not(.ds-card-header) { display: none !important; } /* Break 3-column grids into single column on mobile */ .ds-pupil-detail .ds-card [style*="grid-template-columns:repeat(3,"], .ds-pupil-detail .ds-card [style*="grid-template-columns: repeat(3,"] { grid-template-columns: 1fr !important; } } /* ──────────────────────────────────────────────────────────── 8. MESSAGES TAB polish ──────────────────────────────────────────────────────────── */ .pt-conv-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 16px !important; border-bottom: 1px solid #F1F5F9 !important; cursor: pointer; transition: background 0.15s ease; } .pt-conv-item:hover, .pt-conv-item.active { background: #F8FAFC; } .pt-conv-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #0EA5E9, #0369A1); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; flex-shrink: 0; } .pt-conv-body { flex: 1; min-width: 0; } /* NOTE: .pt-conv-name and .pt-conv-preview live further down in this file (around lines 3481/3501) as part of the Messages Pass 3/4 rebuild. The earlier flat definitions were removed in v3.8.9.38 — keep them in the rebuild block so future edits don't fragment the styling. */ .pt-conv-badge { background: #EF4444 !important; color: #fff !important; min-width: 22px !important; height: 22px !important; border-radius: 11px !important; font-size: .72rem !important; font-weight: 700 !important; padding: 0 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Messages tab — single-column master/detail for phones AND tablet portrait. Landscape tablets keep the side-by-side layout (it fits the width). In portrait the long conversation list pushed the composer off the bottom of the screen, so when a chat is opened we present it as a full-screen pane with the message list scrolling and the composer pinned above the home bar. */ @media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) { .pt-messages-tab .ds-msg-layout { display: block !important; /* Base layout is a fixed height:580px grid (desktop); in block/list mode that would clip the list. Size to content so the page scroll owns it. */ height: auto !important; } .pt-messages-tab .ds-msg-sidebar, .pt-messages-tab .pt-chat-card { width: 100% !important; max-width: 100% !important; flex: none !important; } /* In list mode on phones / portrait the sidebar IS the whole view. The desktop base caps it into a 60vh nested-scroll region (style.css), but on iOS that region clipped the conversation list and refused to scroll, so pupils below the fold were unreachable. Drop the cap and let the list grow to its natural height and scroll with the PAGE — the same scroll model every other tab uses (.ds-instructor-wrap already reserves bottom padding to clear the fixed nav). The chat-open rule below still hides the sidebar when a conversation is open, so this only affects the list view. */ .pt-messages-tab .ds-msg-sidebar { max-height: none !important; height: auto !important; overflow: visible !important; } /* The conversation list is the default view; the chat pane only appears once a conversation is opened. Without this, the empty "Select a pupil" placeholder stacks below the list as dead space. Specificity note: the desktop base rule `.ds-msg-layout > .ds-card:last-child { display:flex !important }` is (0,3,0) and was beating the old (0,2,0) `.pt-messages-tab .pt-chat-card` hide selector even inside this media query, so the empty pane never collapsed on mobile. Mirror the base rule's :last-child to reach (0,4,0) and win cleanly. The open-state rule below is bumped to match. */ .pt-messages-tab .ds-msg-layout > .pt-chat-card:last-child { display: none !important; } /* When a chat is opened: hide the list and show the chat as a full-screen flex pane, so the composer is always reachable regardless of list length. */ body.pt-chat-open .pt-messages-tab .ds-msg-sidebar { display: none; } body.pt-chat-open .pt-messages-tab .ds-msg-layout > .pt-chat-card:last-child { display: flex !important; position: fixed; inset: 0; z-index: 9990; border-radius: 0 !important; padding-top: env(safe-area-inset-top, 0px); } body.pt-chat-open #ds-chat-messages { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; } body.pt-chat-open #ds-chat-input { flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom, 0px); } /* Lock the background while the full-screen chat is up. */ body.pt-chat-open { overflow: hidden; } .pt-chat-back-btn { display: inline-flex !important; } } /* ──────────────────────────────────────────────────────────── 9. CALENDAR — mobile cleanup ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* Calendar toolbars */ .fc .fc-toolbar { flex-direction: column !important; gap: 10px !important; margin-bottom: 14px !important; } .fc .fc-toolbar-title { font-size: 1rem !important; } .fc .fc-button { font-size: .78rem !important; padding: 6px 10px !important; } /* Tighten calendar grid */ .fc .fc-daygrid-day-number { font-size: .78rem !important; padding: 4px !important; } .fc-event { font-size: .72rem !important; } /* "Post a Gap" controls — restrain */ .ds-diary-gap-controls, .ds-post-gap-controls { flex-direction: column !important; gap: 8px !important; } .ds-diary-gap-controls > *, .ds-post-gap-controls > * { width: 100% !important; } } /* ──────────────────────────────────────────────────────────── 10. FINANCE / SETTINGS — mobile forms polish ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .ds-finance-wrap, .ds-settings-wrap { padding: 12px !important; } .ds-form-group input, .ds-form-group select, .ds-form-group textarea, .ds-input { min-height: 44px !important; font-size: 1rem !important; } .ds-form-row { grid-template-columns: 1fr !important; gap: 12px !important; } /* Toggle / switch spacing */ .ds-toggle-row, .ds-settings-row { padding: 14px 0 !important; border-bottom: 1px solid #F1F5F9; } } /* ──────────────────────────────────────────────────────────── 11. GLOBAL TYPOGRAPHY + SPACING TIGHTENING ON MOBILE ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* All cards get consistent mobile radius + margin */ .ds-card { border-radius: 14px !important; margin-bottom: 12px; } .ds-card-header { padding: 14px 16px !important; font-size: .92rem !important; } /* Dashboard dense greeting row */ .pt-greeting { margin-bottom: 16px !important; } .pt-greeting-name { font-size: 1.15rem !important; } /* Dashboard grid stacks on mobile */ .pt-grid { grid-template-columns: 1fr !important; gap: 14px !important; } /* Dashboard hero metrics — keep 2-up on phone but tighter */ .pt-hero { gap: 10px !important; margin-bottom: 20px !important; } .pt-hero-metric { padding: 16px 18px !important; } .pt-hero-metric-value { font-size: 2rem !important; } .pt-hero-metric-meta { font-size: .75rem !important; } .pt-head-title { font-size: 1.55rem !important; } .pt-head-sub { font-size: .82rem !important; } /* Larger tap targets for links/buttons */ .pt-btn, .ds-btn { min-height: 40px; } .pt-btn--sm, .ds-btn-sm { min-height: 36px; } } /* ──────────────────────────────────────────────────────────── 12. TOAST positioning respects bottom nav ──────────────────────────────────────────────────────────── */ .pt-toast-container { position: fixed !important; bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 10000 !important; display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: auto; max-width: 90vw; } .pt-toast { pointer-events: auto; } /* ──────────────────────────────────────────────────────────── 13. PUPILS TAB empty state full-height on mobile ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .pt-pupils-tab--list .pt-empty-state { padding: 48px 24px; } } /* ════════════════════════════════════════════════════════════ 14. PUPIL DETAIL (.pt-pd) — new hierarchical layout (Pass 1) ════════════════════════════════════════════════════════════ */ .pt-pd { padding: 0; } /* Status strip: at-a-glance facts right below the header */ .pt-pd-status-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 18px; } .pt-pd-stat { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px 14px; min-width: 0; } .pt-pd-stat-label { font-size: .68rem; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .pt-pd-stat-value { font-size: 1.15rem; font-weight: 800; color: #0F172A; font-family: 'Syne', sans-serif; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-pd-stat-value--sm { font-size: .85rem; font-family: 'DM Sans', sans-serif; font-weight: 700; } .pt-pd-stat--good { background: #ECFDF5; border-color: #A7F3D0; } .pt-pd-stat--good .pt-pd-stat-value { color: #047857; } .pt-pd-stat--warn { background: #FEF2F2; border-color: #FECACA; } .pt-pd-stat--warn .pt-pd-stat-value { color: #B91C1C; } /* Primary section (lessons) — always expanded, prominent */ .pt-pd-primary { margin-bottom: 16px; } /* Accordion sections */ .pt-pd-section { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: box-shadow 0.2s ease; } .pt-pd-section[open] { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04); } /* Hide default disclosure triangle */ .pt-pd-section summary { list-style: none; } .pt-pd-section summary::-webkit-details-marker { display: none; } .pt-pd-section-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; user-select: none; background: #F8FAFC; transition: background 0.15s ease; min-height: 56px; } .pt-pd-section-header:hover { background: #F1F5F9; } .pt-pd-section[open] .pt-pd-section-header { background: #fff; border-bottom: 1px solid #E2E8F0; } .pt-pd-section-icon { color: #64748B; flex-shrink: 0; } .pt-pd-section[open] .pt-pd-section-icon { color: #0EA5E9; } .pt-pd-section-title { font-size: .95rem; font-weight: 700; color: #0F172A; flex: 1; font-family: 'Syne', sans-serif; } .pt-pd-section-meta { font-size: .78rem; color: #64748B; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .pt-pd-chevron { color: #94A3B8; transition: transform 0.25s ease; flex-shrink: 0; } .pt-pd-section[open] .pt-pd-chevron { transform: rotate(180deg); } .pt-pd-section-body { padding: 16px 18px 20px; } /* Inside a section body, existing .ds-card children should not look like double-cards. Strip their border/bg so they merge with section bg. */ .pt-pd-section-body > .ds-card { border: none !important; box-shadow: none !important; margin: 0 0 16px !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; } .pt-pd-section-body > .ds-card:last-child { margin-bottom: 0 !important; } .pt-pd-section-body > .ds-card > .ds-card-header { padding: 6px 0 10px !important; border-bottom: 1px solid #F1F5F9 !important; background: transparent !important; font-size: .85rem !important; color: #334155 !important; margin-bottom: 12px !important; } /* ── Header tightening inside pt-pd ─────────────────────────── */ .pt-pd > .ds-pupil-detail-header { border-radius: 14px !important; padding: 18px !important; margin-bottom: 0 !important; } /* Primary actions row on pupil detail */ .pt-pd .ds-pupil-detail-actions { flex-wrap: wrap; gap: 8px !important; } /* ── Mobile-specific tweaks ─────────────────────────────────── */ @media (max-width: 640px) { .pt-pd-status-strip { grid-template-columns: 1fr 1fr; gap: 8px; } .pt-pd-stat { padding: 10px 12px; } .pt-pd-stat-value { font-size: 1rem; } .pt-pd-stat-value--sm { font-size: .78rem; } .pt-pd-section-header { padding: 14px 14px; min-height: 52px; gap: 10px; } .pt-pd-section-title { font-size: .9rem; } .pt-pd-section-meta { font-size: .72rem; } .pt-pd-section-body { padding: 14px 14px 16px; } } /* ── Desktop: status strip stays as 4 columns, sections stay full width ── */ @media (min-width: 901px) { .pt-pd { max-width: 960px; margin: 0 auto; } .pt-pd-status-strip { grid-template-columns: repeat(4, 1fr); } /* Desktop: 2-column layout for sections with lots of content */ .pt-pd-section[open] .pt-pd-section-body { padding: 20px 22px 22px; } } /* Override the old mobile.css accordion that targeted .ds-pupil-detail > .ds-card since we now use proper
elements */ @media (max-width: 900px) { .pt-pd .ds-card-header::after { content: none !important; } .pt-pd .ds-card { cursor: default !important; } /* Reset the old pt-collapsed behaviour since it's replaced by
*/ .pt-pd .pt-collapsed > *:not(.ds-card-header) { display: block !important; } } /* ════════════════════════════════════════════════════════════ 15. CALENDAR REWRITE (Pass 2) Mobile-first: listWeek agenda view by default, collapsed gaps, compact header, stronger empty states. ════════════════════════════════════════════════════════════ */ /* ── Compact head: title + Add Lesson ───────────────────────── */ .pt-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .pt-cal-head-title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 800; color: #0F172A; font-family: 'Syne', sans-serif; } .pt-cal-head-title svg { color: #0EA5E9; } .pt-cal-add-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } /* ── Help hints: collapsible on mobile, always-open on desktop ── */ .pt-cal-help { background: #F1F5F9; border-radius: 10px; margin-bottom: 14px; border: 1px solid #E2E8F0; overflow: hidden; } .pt-cal-help summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #475569; font-weight: 600; user-select: none; } .pt-cal-help summary::-webkit-details-marker { display: none; } .pt-cal-help summary svg:first-of-type { color: #64748B; flex-shrink: 0; } .pt-cal-help-chevron { margin-left: auto; color: #94A3B8; transition: transform 0.25s ease; flex-shrink: 0; } .pt-cal-help[open] .pt-cal-help-chevron { transform: rotate(180deg); } .pt-cal-help-body { padding: 4px 14px 14px 36px; display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: #475569; line-height: 1.5; } /* Desktop: auto-expand hints for new users, but stay compact */ @media (min-width: 769px) { .pt-cal-help[open] { background: #F8FAFC; } } /* ── Calendar main card ─────────────────────────────────────── */ .pt-cal-main { margin-bottom: 18px !important; } .pt-cal-legend-row { justify-content: flex-start !important; padding: 10px 14px !important; font-size: .78rem !important; } /* ── Upcoming lessons card ──────────────────────────────────── */ .pt-cal-upcoming { margin-bottom: 16px !important; } /* ── Diary Gaps (demoted to collapsible) ────────────────────── */ .pt-cal-gaps-section { border: 1px solid #E2E8F0; border-radius: 14px; background: #fff; margin-bottom: 16px; overflow: hidden; } .pt-cal-gaps-section[open] { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04); } .pt-cal-gaps-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #F8FAFC; user-select: none; transition: background 0.15s ease; } .pt-cal-gaps-summary::-webkit-details-marker { display: none; } .pt-cal-gaps-summary:hover { background: #F1F5F9; } .pt-cal-gaps-section[open] .pt-cal-gaps-summary { background: #fff; border-bottom: 1px solid #E2E8F0; } .pt-cal-gaps-summary > svg:first-of-type { color: #64748B; flex-shrink: 0; } .pt-cal-gaps-section[open] .pt-cal-gaps-summary > svg:first-of-type { color: #0EA5E9; } .pt-cal-gaps-title { font-size: .95rem; font-weight: 700; color: #0F172A; font-family: 'Syne', sans-serif; } .pt-cal-gaps-hint { font-size: .78rem; color: #64748B; font-weight: 500; margin-left: 4px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-cal-gaps-chevron { color: #94A3B8; transition: transform 0.25s ease; flex-shrink: 0; } .pt-cal-gaps-section[open] .pt-cal-gaps-chevron { transform: rotate(180deg); } .pt-cal-gaps-section .ds-gaps-outer-grid { padding: 16px 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 !important; } .pt-cal-gaps-section .ds-gaps-outer-grid > .ds-card { border: 1px solid #E2E8F0; border-radius: 10px; margin: 0 !important; box-shadow: none !important; } @media (max-width: 720px) { .pt-cal-gaps-section .ds-gaps-outer-grid { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px 16px; } } /* ── FullCalendar styling refinements ───────────────────────── */ /* Make the list view (agenda) visually calmer */ .fc .fc-list-day-cushion { background: #F8FAFC !important; padding: 10px 14px !important; font-weight: 700 !important; } .fc .fc-list-event:hover td { background: #F1F5F9 !important; } .fc .fc-list-event-time, .fc .fc-list-event-title { padding: 12px 14px !important; } .fc .fc-list-empty { padding: 32px 20px !important; color: #64748B !important; font-size: .88rem !important; background: transparent !important; } /* Remove the tacky default toolbar gradient borders */ .fc .fc-toolbar-title { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; color: #0F172A !important; } .fc .fc-button-primary { background: #fff !important; border: 1px solid #E2E8F0 !important; color: #334155 !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; font-weight: 600 !important; } .fc .fc-button-primary:hover { background: #F1F5F9 !important; border-color: #CBD5E1 !important; } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: #0EA5E9 !important; border-color: #0EA5E9 !important; color: #fff !important; } /* ── Mobile-specific tweaks ─────────────────────────────────── */ @media (max-width: 768px) { /* Hide the legend row on mobile — list view doesn't need it */ .pt-cal-legend-row { display: none !important; } /* Hide help details on mobile entirely — gestures are discoverable and the tab is for daily use, not first-run onboarding. */ .pt-cal-help { display: none !important; } .pt-cal-head { margin-bottom: 12px; } .pt-cal-head-title { font-size: 1rem; } /* Calendar container */ #ds-calendar { padding: 4px !important; } /* Force toolbar onto a single row: prev/next | title | today. FullCalendar's default lets chunks wrap at narrow widths, which on mobile produces the awkward stacked "title-then-Today-floating-below" layout. We pin them in one row and let the title shrink/ellipsis. */ .fc .fc-toolbar.fc-header-toolbar { display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px !important; padding: 8px 10px !important; } .fc .fc-toolbar-chunk { display: flex; align-items: center; flex-shrink: 0; gap: 4px; } .fc .fc-toolbar-chunk:nth-child(2) { flex: 1 1 auto; min-width: 0; justify-content: center; } .fc .fc-toolbar-title { font-size: 0.95rem !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: none !important; margin: 0 !important; } .fc .fc-button { padding: 5px 10px !important; font-size: 0.78rem !important; } /* List view entries on mobile */ .fc-theme-standard .fc-list { border: none !important; } .fc .fc-list-table { font-size: .88rem; } .fc .fc-list-day-cushion { padding: 8px 12px !important; font-size: .78rem !important; } .fc .fc-list-event-time, .fc .fc-list-event-title { padding: 10px 12px !important; } /* Friendly empty state for the listWeek view (replaces FullCalendar's terse default "No events to display"). Rendered via noEventsContent which inserts our HTML INSIDE .fc-list-empty-cushion — so we must neutralise the cushion's default styling rather than hide it. */ .fc .fc-list-empty { background: transparent !important; padding: 0 !important; } .fc .fc-list-empty-cushion { background: transparent !important; padding: 0 !important; margin: 0 !important; } .pt-cal-empty { padding: 28px 20px 32px; text-align: center; color: var(--ds-text-muted, #64748B); } .pt-cal-empty-icon { margin: 0 auto 10px; display: block; opacity: 0.85; } .pt-cal-empty-title { font-size: 1rem; font-weight: 600; color: var(--ds-text, #0F172A); margin-bottom: 6px; } .pt-cal-empty-desc { font-size: 0.85rem; line-height: 1.5; max-width: 280px; margin: 0 auto; } .pt-cal-empty-desc strong { color: var(--ds-text, #0F172A); font-weight: 600; } } /* Desktop also gets the friendly empty state (smaller, centered) */ @media (min-width: 769px) { .pt-cal-empty { padding: 36px 24px 40px; text-align: center; color: var(--ds-text-muted, #64748B); } .pt-cal-empty-icon { margin: 0 auto 12px; display: block; opacity: 0.85; } .pt-cal-empty-title { font-size: 1.05rem; font-weight: 600; color: var(--ds-text, #0F172A); margin-bottom: 6px; } .pt-cal-empty-desc { font-size: 0.9rem; line-height: 1.5; max-width: 360px; margin: 0 auto; } .pt-cal-empty-desc strong { color: var(--ds-text, #0F172A); font-weight: 600; } .fc .fc-list-empty { background: transparent !important; padding: 0 !important; } .fc .fc-list-empty-cushion { background: transparent !important; padding: 0 !important; margin: 0 !important; } } /* Desktop: keep FullCalendar roomy, but polished */ @media (min-width: 769px) { .pt-cal-head { margin-bottom: 18px; } .pt-cal-head-title { font-size: 1.25rem; } } /* ════════════════════════════════════════════════════════════ 16. MESSAGING THREADED VIEW (Pass 3) Bubble-style threaded chat with day separators & grouping. ════════════════════════════════════════════════════════════ */ /* Chat messages panel container */ #ds-chat-messages { padding: 12px 14px 16px !important; background: #F8FAFC; } /* Day separator */ .pt-msg-day { display: flex; justify-content: center; margin: 14px 0 10px; } .pt-msg-day span { background: #E2E8F0; color: #475569; font-size: .72rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; letter-spacing: .02em; } /* Message row */ .pt-msg { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-end; } .pt-msg--grouped { margin-bottom: 3px; } .pt-msg--sent { justify-content: flex-end; } .pt-msg--received { justify-content: flex-start; } /* Avatar for received messages */ .pt-msg-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #0EA5E9, #0369A1); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; flex-shrink: 0; } .pt-msg-avatar--spacer { background: transparent; visibility: hidden; } /* Bubble wrapper */ .pt-msg-bubble-wrap { max-width: 78%; display: flex; flex-direction: column; min-width: 0; } .pt-msg--sent .pt-msg-bubble-wrap { align-items: flex-end; } /* Sender name (shown only for received, non-grouped messages) */ .pt-msg-sender-name { font-size: .72rem; font-weight: 700; color: #475569; margin: 0 0 3px 12px; } /* The bubble */ .pt-msg-bubble { padding: 9px 13px; border-radius: 16px; position: relative; word-wrap: break-word; overflow-wrap: break-word; min-width: 50px; } .pt-msg--sent .pt-msg-bubble { background: linear-gradient(135deg, #0EA5E9, #0284C7); color: #fff; border-bottom-right-radius: 4px; } .pt-msg--received .pt-msg-bubble { background: #fff; color: #0F172A; border: 1px solid #E2E8F0; border-bottom-left-radius: 4px; } /* Grouped bubbles get softer corners (connect visually) */ .pt-msg--sent.pt-msg--grouped .pt-msg-bubble { border-top-right-radius: 4px; border-bottom-right-radius: 16px; } .pt-msg--received.pt-msg--grouped .pt-msg-bubble { border-top-left-radius: 4px; border-bottom-left-radius: 16px; } .pt-msg-body { font-size: .9rem; line-height: 1.45; white-space: pre-wrap; } .pt-msg-body br { display: block; content: ""; margin-top: 2px; } /* Time inside the bubble */ .pt-msg-time { font-size: .68rem; margin-top: 3px; text-align: right; opacity: 0.7; font-weight: 500; } .pt-msg--received .pt-msg-time { color: #94A3B8; } /* Empty conversation state */ .pt-msg-empty-state { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .pt-msg-empty-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 4px; opacity: .8; } .pt-msg-empty-title { font-size: 1rem; font-weight: 700; color: #0F172A; font-family: 'Syne', sans-serif; } .pt-msg-empty-desc { font-size: .85rem; color: #64748B; max-width: 260px; line-height: 1.5; } /* Loading and error states inside chat panel */ .pt-msg-loading, .pt-msg-error { padding: 24px 16px; text-align: center; color: #64748B; font-size: .85rem; } .pt-msg-error { color: #DC2626; } /* Input area polish */ #ds-chat-input { background: #fff; border-top: 1px solid #E2E8F0 !important; } #ds-chat-input > div { align-items: flex-end !important; padding: 12px 14px !important; } #ds-msg-body { min-height: 40px !important; max-height: 140px !important; padding: 9px 12px !important; border: 1px solid #E2E8F0 !important; border-radius: 20px !important; font-size: .9rem !important; resize: none !important; transition: border-color 0.15s ease; overflow-y: auto; } #ds-msg-body:focus { outline: none; border-color: #0EA5E9 !important; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important; } #ds-chat-input button { min-width: 44px; min-height: 44px; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; background: #0EA5E9 !important; border: none !important; } #ds-chat-input button:disabled { opacity: 0.5; cursor: not-allowed; } /* Active conversation highlight */ .pt-conv-item.active, .ds-conv-item.active { background: #ECFEFF !important; border-left: 3px solid #0EA5E9; } /* ── Mobile tweaks ──────────────────────────────────────────── */ @media (max-width: 640px) { #ds-chat-messages { padding: 10px 10px 14px !important; } .pt-msg-bubble-wrap { max-width: 82%; } .pt-msg-avatar { width: 26px; height: 26px; font-size: .72rem; } .pt-msg-body { font-size: .88rem; } #ds-chat-input > div { padding: 10px 12px !important; } } /* ════════════════════════════════════════════════════════════ 17. WAITING LIST (Pass 4 — revised) ════════════════════════════════════════════════════════════ */ .pt-wl-wrap { padding: 20px 24px 40px !important; max-width: 920px; margin: 0 auto; } /* ── Head ────────────────────────────────────────────── */ /* (Removed in v21.11: .pt-wl-head*, .pt-wl-add-btn were left over from a pre-shared-tab-header version of this tab. Header is now built from the standard .pt-tab-header / .pt-tab-header-actions classes used elsewhere.) */ /* ── Explainer ───────────────────────────────────────── */ .pt-wl-explainer { background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 10px; margin-bottom: 18px; overflow: hidden; } .pt-wl-explainer summary { list-style: none; cursor: pointer; padding: 11px 14px; display: flex; align-items: center; gap: 10px; font-size: .85rem; color: #475569; font-weight: 600; user-select: none; } .pt-wl-explainer summary::-webkit-details-marker { display: none; } .pt-wl-explainer summary svg:first-of-type { color: #64748B; flex-shrink: 0; } .pt-wl-chev { margin-left: auto; color: #94A3B8; transition: transform 0.25s ease; flex-shrink: 0; } .pt-wl-explainer[open] .pt-wl-chev { transform: rotate(180deg); } .pt-wl-explainer-body { padding: 4px 14px 14px 40px; font-size: .85rem; color: #475569; line-height: 1.5; } .pt-wl-explainer-body p { margin: 0; } /* ── Empty state ─────────────────────────────────────── */ .pt-wl-empty { background: #fff; border: 1px dashed #CBD5E1; border-radius: 16px; padding: 44px 28px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 20px 0; max-width: 460px; margin-left: auto; margin-right: auto; } .pt-wl-empty-icon { font-size: 2.8rem; line-height: 1; margin-bottom: 6px; opacity: .9; } .pt-wl-empty-title { font-family: 'Syne', sans-serif; font-size: 1.15rem; font-weight: 800; color: #0F172A; margin-bottom: 4px; } .pt-wl-empty-desc { font-size: .9rem; color: #64748B; max-width: 340px; line-height: 1.55; margin-bottom: 12px; } /* ── List ────────────────────────────────────────────── */ .pt-wl-list { display: flex; flex-direction: column; gap: 10px; transition: background 0.4s ease; } .pt-wl-list.pt-wl-saved { background: #ECFDF5; border-radius: 12px; } .pt-wl-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 12px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; cursor: default; transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .pt-wl-row:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); border-color: #CBD5E1; } .pt-wl-row.pt-wl-dragging { opacity: 0.5; border: 2px dashed #0EA5E9; background: #F0F9FF; } .pt-wl-drag { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #94A3B8; cursor: grab; border-radius: 6px; flex-shrink: 0; touch-action: none; /* Let SortableJS own touch gestures on the handle */ transition: background 0.15s ease, color 0.15s ease; } .pt-wl-drag:hover { background: #F1F5F9; color: #475569; } .pt-wl-drag:active { cursor: grabbing; } .pt-wl-pos { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.05rem; color: #0EA5E9; min-width: 34px; text-align: center; flex-shrink: 0; } .pt-wl-body { flex: 1; min-width: 0; } .pt-wl-row .pt-wl-name { font-weight: 700; font-size: .95rem; color: #0F172A; text-decoration: none !important; /* Defeats theme `a` rules with !important / high specificity */ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-wl-row .pt-wl-name:hover { color: #0EA5E9; text-decoration: underline !important; } .pt-wl-meta { font-size: .78rem; color: #64748B; margin-top: 3px; } .pt-wl-note { font-size: .8rem; color: #475569; margin-top: 8px; padding: 6px 10px; background: #F8FAFC; border-left: 3px solid #CBD5E1; border-radius: 4px; font-style: italic; } .pt-wl-actions { display: flex; gap: 6px; flex-shrink: 0; } /* ── Add-choice sheet: two big tappable cards ────────── */ .pt-wl-choice-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 16px; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; cursor: pointer; font-family: inherit; text-align: left; margin-bottom: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .pt-wl-choice-card:hover { border-color: #0EA5E9; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1); } .pt-wl-choice-card:active { transform: scale(0.98); } .pt-wl-choice-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } .pt-wl-choice-body { flex: 1; min-width: 0; } .pt-wl-choice-title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 800; color: #0F172A; margin-bottom: 2px; } .pt-wl-choice-desc { font-size: .82rem; color: #64748B; line-height: 1.4; } .pt-wl-choice-card svg:last-child { color: #94A3B8; flex-shrink: 0; } /* ── Pupil-side waiting list banner (on pupil dashboard) ─ */ .pt-wl-pupil-banner { background: linear-gradient(135deg, #F0F9FF, #E0F2FE); border: 1px solid #BAE6FD; border-radius: 16px; padding: 20px 22px; margin: 16px auto; display: flex; gap: 16px; align-items: flex-start; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08); } .pt-wl-pupil-banner-icon { font-size: 2.4rem; line-height: 1; flex-shrink: 0; margin-top: 2px; } .pt-wl-pupil-banner-body { flex: 1; min-width: 0; } .pt-wl-pupil-banner-title { font-size: 1.05rem; font-weight: 800; color: #0C4A6E; font-family: 'Syne', sans-serif; margin-bottom: 6px; } .pt-wl-pupil-banner-position { font-size: 1.4rem; color: #075985; font-weight: 600; line-height: 1.2; margin-bottom: 8px; } .pt-wl-pupil-banner-position strong { font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 800; color: #0369A1; } .pt-wl-pupil-banner-meta { font-size: .88rem; color: #475569; line-height: 1.5; } .pt-wl-pupil-banner-note { margin-top: 10px; font-size: .85rem; color: #334155; padding: 8px 12px; background: rgba(255, 255, 255, 0.6); border-radius: 8px; } /* ── Status toggle in Add Pupil modal ────────────────── */ .pt-status-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .pt-status-opt { padding: 14px 14px; background: #fff; border: 2px solid #E2E8F0; border-radius: 10px; cursor: pointer; text-align: left; font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease; } .pt-status-opt:hover { border-color: #CBD5E1; background: #F8FAFC; } .pt-status-opt.is-active { border-color: #0EA5E9; background: #F0F9FF; } .pt-status-opt-title { font-weight: 700; font-size: .9rem; color: #0F172A; margin-bottom: 2px; } .pt-status-opt-desc { font-size: .78rem; color: #64748B; line-height: 1.3; } /* ── Mobile tweaks ───────────────────────────────────── */ @media (max-width: 640px) { .pt-wl-wrap { padding: 14px 14px 28px !important; } .pt-wl-row { padding: 12px 12px 12px 8px; gap: 10px; flex-wrap: wrap; } .pt-wl-drag { width: 24px; } .pt-wl-pos { font-size: .95rem; min-width: 28px; } .pt-wl-actions { width: 100%; margin-top: 8px; padding-left: 62px; } .pt-wl-actions .pt-btn--primary { flex: 1; } .pt-wl-empty { padding: 32px 20px 28px; margin: 16px 0; } .pt-wl-empty-icon { font-size: 2.2rem; } .pt-wl-empty-title { font-size: 1.05rem; } .pt-wl-empty-desc { font-size: .85rem; } .pt-status-toggle { grid-template-columns: 1fr; } .pt-wl-pupil-banner { padding: 16px; margin: 12px; gap: 12px; } .pt-wl-pupil-banner-icon { font-size: 2rem; } .pt-wl-pupil-banner-position { font-size: 1.15rem; } .pt-wl-pupil-banner-position strong { font-size: 1.5rem; } } /* ════════════════════════════════════════════════════════════ 18. TESTS ON CALENDAR + ADI STANDARDS PANEL ════════════════════════════════════════════════════════════ */ /* ── Test Performance card (dashboard-home) ──────────────────── */ .pt-adi-card { display: flex; flex-direction: column; } .pt-adi-card .pt-card-head { justify-content: flex-start; gap: 8px; padding-bottom: 14px; margin-bottom: 2px; border-bottom: 1px solid #F1F5F9; } .pt-adi-badge { margin-left: auto; font-size: .72rem; font-weight: 600; color: #64748B; background: #F1F5F9; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .pt-adi-window-note { font-size: .76rem; color: #64748B; margin: 8px 0 2px; padding: 0 20px; line-height: 1.35; } .pt-adi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px 8px; margin: 0; } .pt-adi-metric { padding: 12px 12px 11px 14px; border-radius: 10px; border: 1px solid #E2E8F0; background: #fff; position: relative; overflow: hidden; transition: border-color 0.15s ease; } .pt-adi-metric::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #CBD5E1; } .pt-adi-metric-label { font-size: .68rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; min-height: 1.7em; } .pt-adi-metric-val { font-family: 'Syne', sans-serif; font-size: 1.45rem; font-weight: 800; color: #0F172A; line-height: 1.1; margin: 6px 0 8px; letter-spacing: -0.01em; } .pt-adi-metric-target { font-size: .68rem; color: #94A3B8; font-weight: 500; line-height: 1.3; } /* Color-coded status variants — softer tones that read as "good/bad" without screaming off the card */ .pt-adi-metric--good::before { background: #16A34A; } .pt-adi-metric--good .pt-adi-metric-val { color: #166534; } .pt-adi-metric--good { background: #F0FDF4; border-color: #BBF7D0; } .pt-adi-metric--warn::before { background: #F59E0B; } .pt-adi-metric--warn .pt-adi-metric-val { color: #92400E; } .pt-adi-metric--warn { background: #FFFBEB; border-color: #FDE68A; } .pt-adi-metric--bad::before { background: #DC2626; } .pt-adi-metric--bad .pt-adi-metric-val { color: #991B1B; } .pt-adi-metric--bad { background: #FEF2F2; border-color: #FECACA; } .pt-adi-metric--none::before { background: #CBD5E1; } /* Summary alert banners — sits at top of card body, above the metric grid */ .pt-adi-alert { margin: 14px 20px 8px; padding: 11px 14px; border-radius: 10px; font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: 10px; line-height: 1.4; } .pt-adi-alert-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: .78rem; font-weight: 700; flex-shrink: 0; } .pt-adi-alert--good { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; } .pt-adi-alert--good .pt-adi-alert-mark { background: #BBF7D0; color: #166534; } .pt-adi-alert--warn { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; } .pt-adi-alert--warn .pt-adi-alert-mark { background: #FDE68A; color: #92400E; } .pt-adi-alert--bad { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; } .pt-adi-alert--bad .pt-adi-alert-mark { background: #FECACA; color: #991B1B; } /* Awaiting-result banner — sits directly below card head */ .pt-adi-awaiting { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 20px; background: #FFFBEB; border-bottom: 1px solid #FDE68A; font-size: .82rem; color: #92400E; font-weight: 600; flex-wrap: wrap; } .pt-adi-awaiting-text { display: inline-flex; align-items: center; gap: 8px; } .pt-adi-awaiting-text::before { content: '⏰'; font-size: 1rem; line-height: 1; } .pt-adi-awaiting-link { color: #92400E; text-decoration: none; font-weight: 700; white-space: nowrap; } .pt-adi-awaiting-link:hover { text-decoration: underline; } /* Actions row — also padded to match card insets */ .pt-adi-actions { display: flex; align-items: center; gap: 12px; padding: 16px 20px 20px; flex-wrap: wrap; border-top: 1px solid #F1F5F9; margin-top: 16px; } .pt-adi-upcoming { font-size: .78rem; color: #64748B; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .pt-adi-upcoming::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8B5CF6; } /* Empty state */ .pt-adi-empty { padding: 28px 20px 24px; text-align: center; } .pt-adi-empty-title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 800; color: #0F172A; margin-bottom: 6px; } .pt-adi-empty-desc { font-size: .85rem; color: #64748B; line-height: 1.5; margin-bottom: 14px; max-width: 320px; margin-left: auto; margin-right: auto; } /* ── Calendar: test-event styling ───────────────────────────── */ .ds-fc-event-test { font-weight: 700 !important; } .ds-fc-event-test .fc-event-title { font-weight: 700; } .fc .fc-list-event.ds-fc-event-test .fc-list-event-title a { font-weight: 700; } /* Dashed border for cancelled tests */ .ds-fc-event-cancelled { opacity: 0.6; text-decoration: line-through; } /* ── Test modal: extra-wide + ghost-danger button ───────────── */ .pt-modal--lg { max-width: 560px; } .pt-btn--ghost-danger { background: transparent; border: 1px solid #FECACA; color: #B91C1C; padding: 8px 14px; font-size: .85rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background 0.15s ease; } .pt-btn--ghost-danger:hover { background: #FEF2F2; } .pt-btn--xs { font-size: .75rem; padding: 4px 10px; } /* ── Pupil-side upcoming test banner ────────────────────────── */ .pt-test-pupil-banner { background: linear-gradient(135deg, #FAF5FF, #F3E8FF); border: 1px solid #E9D5FF; border-radius: 16px; padding: 20px 22px; margin: 16px; display: flex; gap: 16px; align-items: center; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.08); } .pt-test-pupil-banner-icon { font-size: 2.4rem; line-height: 1; flex-shrink: 0; } .pt-test-pupil-banner-body { flex: 1; min-width: 0; } .pt-test-pupil-banner-title { font-size: .88rem; font-weight: 700; color: #6B21A8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .pt-test-pupil-banner-when { font-family: 'Syne', sans-serif; font-size: 1.15rem; font-weight: 800; color: #581C87; margin-bottom: 4px; line-height: 1.2; } .pt-test-pupil-banner-meta { font-size: .85rem; color: #7C3AED; font-weight: 500; } .pt-test-pupil-banner-countdown { text-align: center; background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 12px 16px; min-width: 80px; flex-shrink: 0; } .pt-test-pupil-banner-countdown-num { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 800; color: #6B21A8; line-height: 1; } .pt-test-pupil-banner-countdown-label { font-size: .7rem; color: #7C3AED; font-weight: 600; text-transform: uppercase; margin-top: 2px; } /* ── Mobile tweaks ──────────────────────────────────────────── */ @media (max-width: 640px) { .pt-adi-grid { gap: 8px; padding: 14px 16px 6px; } .pt-adi-metric { padding: 12px 12px 11px 14px; } .pt-adi-metric-val { font-size: 1.35rem; margin: 5px 0 6px; } .pt-adi-alert { margin: 4px 16px 0; font-size: .78rem; padding: 10px 12px; flex-direction: column; align-items: flex-start; } .pt-adi-actions { padding: 14px 16px 16px; } .pt-test-pupil-banner { padding: 16px; margin: 12px; gap: 12px; } .pt-test-pupil-banner-icon { font-size: 2rem; } .pt-test-pupil-banner-when { /* v0.9.366 — scale with the viewport and never split a word: "Thursday 16 Jul at 09:00" was breaking mid-word ("Thursda/y") in the narrow column next to the countdown box. keep-all + overflow-wrap:normal force wrapping at spaces only. */ font-size: clamp(.9rem, 4.3vw, 1.05rem); overflow-wrap: normal; word-break: keep-all; } .pt-test-pupil-banner-body { min-width: 0; } .pt-test-pupil-banner-countdown { padding: 10px 12px; min-width: 64px; } .pt-test-pupil-banner-countdown-num { font-size: 1.2rem; } } /* ════════════════════════════════════════════════════════════ 19. PUPILS TAB — filter chips + waiting tag ════════════════════════════════════════════════════════════ */ /* Header row with title + count + add button */ .pt-pupils-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pt-pupils-head-title { font-weight: 700; color: #0F172A; font-family: 'Syne', sans-serif; } .pt-pupils-head-count { font-weight: 500; color: #94A3B8; font-family: 'DM Sans', sans-serif; font-size: .9em; } /* Filter chip strip */ .pt-pupils-filter { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #F1F5F9; background: #FAFBFC; } .pt-pupils-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff; border: 1px solid #E2E8F0; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #475569; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .pt-pupils-filter-chip:hover { border-color: #CBD5E1; color: #0F172A; } .pt-pupils-filter-chip.is-active { background: #0F172A; border-color: #0F172A; color: #fff; } .pt-pupils-filter-count { background: rgba(148, 163, 184, 0.2); color: inherit; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 700; opacity: 0.9; } .pt-pupils-filter-chip.is-active .pt-pupils-filter-count { background: rgba(255, 255, 255, 0.2); } /* Waiting tag on pupil rows */ .pt-pupil-waiting-tag { display: inline-block; font-size: .65rem; font-weight: 700; color: #7C3AED; background: #F3E8FF; padding: 2px 7px; border-radius: 999px; margin-left: 6px; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; } /* Subtle row tint for waiting pupils */ .ds-pupil-item--waiting { background: linear-gradient(to right, #FAF5FF 0%, #fff 40%); } .ds-pupil-item--waiting:hover { background: linear-gradient(to right, #F3E8FF 0%, #FAFBFC 40%); } .ds-pupil-item--waiting.active { background: linear-gradient(to right, #F3E8FF 0%, #EFF6FF 40%); } /* Mobile: tighter filter chips */ @media (max-width: 640px) { .pt-pupils-filter { padding: 8px 12px; gap: 4px; } .pt-pupils-filter-chip { padding: 5px 10px; font-size: .75rem; } } /* ════════════════════════════════════════════════════════════ 20. PUPIL HERO (Session 3 — clean rewrite) ════════════════════════════════════════════════════════════ */ .pt-pupil-hero { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; padding: 22px 24px 20px; margin-bottom: 18px; box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 1px 3px rgba(15,23,42,.04); } /* The pupil header is the first grid item inside .ds-pupil-main, so it fills the same column as the content cards below — no own width/centering needed (the grid's gap handles spacing). */ .ds-pupil-wrap .pt-pupil-hero--self { max-width: none; width: auto; margin: 0; } /* Top row: avatar + identity */ .pt-pupil-hero-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .pt-pupil-hero-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800; flex-shrink: 0; letter-spacing: -.01em; } .pt-pupil-hero-id { flex: 1; min-width: 0; } .pt-pupil-hero-name { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 800; color: #0F172A; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pt-pupil-hero-name .ds-traffic-light { width: 10px; height: 10px; flex-shrink: 0; /* slight nudge so the dot sits visually centered with the cap-height of Syne 1.5rem */ margin-top: 4px; } .pt-pupil-hero-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; } .pt-pupil-hero-contact-item { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: #64748B; text-decoration: none; font-weight: 500; transition: color .15s ease; } .pt-pupil-hero-contact-item:hover { color: #0F172A; text-decoration: none; } .pt-pupil-hero-contact-item svg { color: #94A3B8; flex-shrink: 0; } /* Stats row */ .pt-pupil-hero-stats { display: flex; align-items: center; gap: 22px; padding: 14px 0; margin: 0 0 18px; border-top: 1px solid #F1F5F9; border-bottom: 1px solid #F1F5F9; flex-wrap: wrap; } .pt-pupil-hero-stat { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; } .pt-pupil-hero-stat-val { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 800; color: #0F172A; letter-spacing: -.01em; white-space: nowrap; } .pt-pupil-hero-stat-label { font-size: .78rem; color: #64748B; font-weight: 500; white-space: nowrap; } /* Balance state colors — meaning carried in the formatted text */ .pt-pupil-hero-stat--credit .pt-pupil-hero-stat-val { color: #047857; } .pt-pupil-hero-stat--owed .pt-pupil-hero-stat-val { color: #B91C1C; } /* Latest-mock indicator — verdict-led, colour follows the result */ .pt-pupil-hero-stat--mock-pass .pt-pupil-hero-stat-val { color: #047857; } .pt-pupil-hero-stat--mock-fail .pt-pupil-hero-stat-val { color: #B91C1C; } .pt-pupil-hero-stat-val.pt-mock-stat-empty { color: #94A3B8; font-weight: 600; } /* ── Pupil stats carousel ───────────────────────────────────────────── Persistent progress ring + a swipeable stack of context cards. Replaces the flat stat strip on the instructor pupil tab (and the pupil dashboard). Unique `pt-pstat-` prefix so it can't collide with the Scenarios `pt-sc-` classes. Card height is controlled by a min-height on the viewport (not by whichever card happens to be tallest), so the panel stays compact. */ /* Prevent grid blowout on the pupil dashboard: .ds-pupil-main is display:grid with an implicit auto column and default min-width:auto, so a wide child (the stats carousel) stretched the column past the viewport — bleeding the carousel AND the cards below off the right on mobile. Constrain its column to minmax(0,1fr) and let the column itself shrink in the parent grid. */ .ds-pupil-wrap .ds-pupil-main { min-width: 0; grid-template-columns: minmax(0, 1fr); } /* min-width:0 + max-width:100% stop the inner flex track from forcing the grid column wider than the viewport (grid/flex blowout) — without this the carousel and the cards below it bleed off the right on a narrow phone. */ .pt-pstat-carousel { display: flex; gap: 20px; align-items: center; padding: 16px 18px; margin: 4px 0 16px; background: #F8FAFC; border: 1px solid #EDF1F6; border-radius: 14px; outline: none; min-width: 0; max-width: 100%; } .pt-pstat-ring { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 108px; } .pt-pstat-ring svg { display: block; } .pt-pstat-ring-state { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; } .pt-pstat-ring-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .pt-pstat-ring-state--green { color: #0F6E56; } .pt-pstat-ring-state--amber { color: #854F0B; } .pt-pstat-ring-state--red { color: #A32D2D; } .pt-pstat-ring-state--grey { color: #64748B; } .pt-pstat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Fixed card-area height + overflow:hidden so the theme's content margins (large

/

spacing in the portal page) can't inflate the panel. */ .pt-pstat-viewport { overflow: hidden; min-width: 0; touch-action: pan-y; cursor: grab; height: 158px; } .pt-pstat-viewport:active { cursor: grabbing; } .pt-pstat-track { display: flex; align-items: stretch; height: 100%; transition: transform .3s ease; will-change: transform; } /* Every card fills the viewport height and vertically centres its content. */ .pt-pstat-card { flex: 0 0 100%; min-width: 0; height: 100%; box-sizing: border-box; padding-right: 4px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } /* Neutralise inherited theme margins on the card's children (the carousel renders inside the theme's content area), then re-apply our own spacing. */ .pt-pstat-card > *, .pt-pstat-card p { margin: 0; } .pt-pstat-card .pt-pstat-card-label { margin: 0 0 7px; } .pt-pstat-card .pt-pstat-sub { margin: 4px 0 0; } .pt-pstat-card .pt-pstat-chips { margin: 11px 0 0; } .pt-pstat-card .pt-pstat-bar { margin: 9px 0 0; } .pt-pstat-card .pt-pstat-gates { margin: 10px 0 0; } .pt-pstat-card-label { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; margin: 0 0 7px; } .pt-pstat-card-ico { display: inline-flex; color: #94A3B8; } .pt-pstat-card-ico svg { width: 14px; height: 14px; display: block; } .pt-pstat-headline { font-size: 1.3rem; font-weight: 700; color: #0F172A; line-height: 1.15; } .pt-pstat-headline--pass { color: #047857; } .pt-pstat-headline--fail { color: #B91C1C; } .pt-pstat-headline--muted { color: #94A3B8; } .pt-pstat-sub { font-size: .82rem; color: #64748B; margin: 4px 0 0; line-height: 1.45; } .pt-pstat-sub b { color: #334155; font-weight: 700; } /* flex-wrap so the unit ("in credit") drops below a long value instead of squeezing it; the value itself never breaks mid-number (see nowrap below). */ .pt-pstat-metric { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .pt-pstat-big { font-family: 'Syne', sans-serif; font-size: 1.85rem; font-weight: 800; color: #0F172A; letter-spacing: -.01em; line-height: 1; white-space: nowrap; } .pt-pstat-big--credit { color: #047857; } .pt-pstat-big--owed { color: #B91C1C; } /* Money amounts can be large (e.g. £1,350.00 for prepaid blocks/Motability), so shrink to fit a narrow card rather than wrapping the number across two lines. */ .pt-pstat-big--credit, .pt-pstat-big--owed { font-size: clamp(1.2rem, 6.5vw, 1.85rem); } .pt-pstat-unit { font-size: .8rem; color: #64748B; font-weight: 500; } .pt-pstat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } .pt-pstat-chip { display: inline-flex; align-items: center; font-size: .73rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: #EEF2F7; color: #475569; } .pt-pstat-chip--accent { background: #E6F1FB; color: #185FA5; } .pt-pstat-chip--success { background: #E1F5EE; color: #0F6E56; } .pt-pstat-chip--warning { background: #FAEEDA; color: #854F0B; } .pt-pstat-chip--danger { background: #FCEBEB; color: #A32D2D; } .pt-pstat-chip--muted { background: #EEF2F7; color: #64748B; } /* Slim progress bar (hours-vs-target etc.) */ .pt-pstat-bar { height: 6px; background: #E6EBF1; border-radius: 99px; overflow: hidden; margin: 9px 0 0; } .pt-pstat-bar > span { display: block; height: 100%; background: #1D9E75; border-radius: 99px; } /* Readiness gates (Skills / Hours / Mock) */ .pt-pstat-gates { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .pt-pstat-gate { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: #EEF2F7; color: #94A3B8; } .pt-pstat-gate-mark { font-size: .72rem; line-height: 1; } .pt-pstat-gate.is-met { background: #E1F5EE; color: #0F6E56; } /* Mocks card — up to 3 recent results as rows */ .pt-pstat-mocklist { display: flex; flex-direction: column; gap: 8px; } .pt-pstat-mockrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .pt-pstat-mockres { font-size: .92rem; font-weight: 700; white-space: nowrap; } .pt-pstat-mockres--pass { color: #047857; } .pt-pstat-mockres--fail { color: #B91C1C; } .pt-pstat-mockfaults { font-weight: 500; color: #64748B; font-size: .8rem; } .pt-pstat-mockdate { font-size: .78rem; color: #94A3B8; white-space: nowrap; } .pt-pstat-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; } .pt-pstat-arrow { border: none; background: transparent; color: #94A3B8; font-size: 1.25rem; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 6px; -webkit-tap-highlight-color: transparent; } .pt-pstat-arrow:focus { outline: none; } /* Hover tint only on real pointers, so it never sticks after a tap. */ @media (hover: hover) { .pt-pstat-arrow:hover { color: #0F172A; } } .pt-pstat-dots { display: flex; gap: 6px; } .pt-pstat-dot { width: 6px; height: 6px; padding: 0; border: none; border-radius: 3px; background: #CBD5E1; cursor: pointer; transition: width .2s ease, background .2s ease; } .pt-pstat-dot.is-active { width: 18px; background: #0F172A; } /* Taller card area on small screens — the Readiness card's gates + chips wrap to more rows on a narrow column, which the fixed desktop height would clip. */ @media (max-width: 700px) { .pt-pstat-viewport { height: 200px; } } @media (max-width: 380px) { .pt-pstat-viewport { height: 218px; } } @media (max-width: 480px) { .pt-pstat-carousel { gap: 14px; padding: 14px; } .pt-pstat-ring { width: 88px; } .pt-pstat-ring svg { width: 84px; height: 84px; } .pt-pstat-big { font-size: 1.6rem; } .pt-pstat-headline { font-size: 1.15rem; } } /* Actions row */ .pt-pupil-hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pt-pupil-hero-primary { display: inline-flex !important; align-items: center; gap: 6px; padding: 8px 16px !important; font-size: .85rem !important; } @media (max-width: 560px){ .pt-pupil-hero-primary { flex: 0 0 auto !important; } } /* More dropdown */ .pt-pupil-hero-more { position: relative; } .pt-pupil-hero-more-btn { display: inline-flex !important; align-items: center; gap: 6px; } .pt-pupil-hero-more-btn svg { transition: transform .15s ease; } .pt-pupil-hero-more.is-open .pt-pupil-hero-more-btn svg { transform: rotate(180deg); } .pt-pupil-hero-more-sheet { position: absolute; top: calc(100% + 6px); left: 0; width: 240px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06); padding: 6px; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 50; } .pt-pupil-hero-more.is-open .pt-pupil-hero-more-sheet { opacity: 1; transform: translateY(0); pointer-events: auto; } .pt-pupil-hero-more-item { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: transparent; border: none; border-radius: 8px; font-size: .85rem; font-weight: 500; color: #334155; cursor: pointer; text-align: left; font-family: inherit; transition: background .12s ease, color .12s ease; } .pt-pupil-hero-more-item:hover { background: #F8FAFC; color: #0F172A; } .pt-pupil-hero-more-item svg { color: #64748B; flex-shrink: 0; } .pt-pupil-hero-more-item:hover svg { color: #0F172A; } .pt-pupil-hero-more-item--danger { color: #DC2626; } .pt-pupil-hero-more-item--danger svg { color: #DC2626; } .pt-pupil-hero-more-item--danger:hover { background: #FEF2F2; color: #991B1B; } .pt-pupil-hero-more-item--danger:hover svg { color: #991B1B; } .pt-pupil-hero-more-divider { height: 1px; background: #F1F5F9; margin: 4px 6px; } /* Mobile: stack hero contents tighter */ @media (max-width: 640px) { .pt-pupil-hero { padding: 18px 18px 16px; margin-bottom: 14px; } .pt-pupil-hero-top { gap: 14px; margin-bottom: 14px; } .pt-pupil-hero-avatar { width: 48px; height: 48px; font-size: 1.2rem; } .pt-pupil-hero-name { font-size: 1.25rem; } .pt-pupil-hero-contact { gap: 2px 14px; } .pt-pupil-hero-contact-item { font-size: .78rem; } .pt-pupil-hero-stats { gap: 14px; padding: 12px 0; margin-bottom: 14px; } .pt-pupil-hero-stat-val { font-size: .95rem; } .pt-pupil-hero-stat-label { font-size: .72rem; } /* Mobile: hero primary stays a normal-sized button (not full-width) */ .pt-pupil-hero-actions { gap: 8px; } .pt-pupil-hero-primary { flex: 0 0 auto; } /* Mobile: anchor the More button to the right edge so its right-aligned sheet (below) sits inside the content area instead of spilling off the left of the screen. */ .pt-pupil-hero-more { margin-left: auto; } /* Mobile: dropdown opens to align with the right of the More button */ .pt-pupil-hero-more-sheet { right: 0; left: auto; width: calc(100vw - 36px); max-width: 280px; } } /* ════════════════════════════════════════════════════════════ 21. TRAFFIC-LIGHT TOOLTIP (Session 3 polish) Reliable hover/focus tooltip for the status dot. ════════════════════════════════════════════════════════════ */ /* Wrap the dot in a hover-capable area without changing visual size */ .ds-traffic-light { position: relative; cursor: help; /* Bigger transparent hit-target so hover is forgiving */ outline: none; } .ds-traffic-light::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; /* invisible but receives pointer events for easier hover */ } /* Tooltip — appears above the dot on hover/focus */ .ds-traffic-light[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: #0F172A; color: #FFFFFF; padding: 6px 10px; border-radius: 6px; font-size: .72rem; font-weight: 600; font-family: 'DM Sans', system-ui, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s ease, transform .15s ease; z-index: 1000; letter-spacing: 0; text-transform: none; box-shadow: 0 4px 12px rgba(15,23,42,.15); } /* Arrow pointing down to the dot */ .ds-traffic-light[data-tooltip]::after { /* (keeping ::after for the bubble; ::before reserved for hit-target) */ } .ds-traffic-light[data-tooltip]:hover::after, .ds-traffic-light[data-tooltip]:focus::after, .ds-traffic-light[data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* Make sure parent overflow doesn't clip tooltips on pupil rows */ .ds-pupil-item { position: relative; overflow: visible; } /* The status-dot tooltip sits above the dot, but the card wrapping the pupil list is clipped by the broad `.ds-instructor-wrap .ds-card { overflow:hidden }` rule, so the first row's tooltip was cut off at the card's top edge. Let that one card overflow visibly so the tooltip escapes. Needs (0,3,0) specificity to beat the (0,2,0) !important card rule regardless of stylesheet order (same trap as the messages-scroll fix). The list itself already fits its content (it grows the page rather than scrolling), so nothing needs internal clipping. */ .ds-instructor-wrap .ds-content-sidebar .ds-card { overflow: visible !important; } /* ════════════════════════════════════════════════════════════ 22. FINANCE DASHBOARD (Session 4) ════════════════════════════════════════════════════════════ */ .pt-finance { display: flex; flex-direction: column; gap: 18px; } /* ── KPI strip ── */ .pt-fin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .pt-fin-kpi { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; padding: 18px 18px 16px; transition: box-shadow .15s ease, border-color .15s ease; min-width: 0; } .pt-fin-kpi:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .04); } .pt-fin-kpi--primary { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); color: #FFFFFF; border-color: #0F172A; } .pt-fin-kpi--primary .pt-fin-kpi-label { color: rgba(255, 255, 255, 0.65); } .pt-fin-kpi--primary .pt-fin-kpi-value { color: #FFFFFF; } .pt-fin-kpi--primary .pt-fin-kpi-meta { color: rgba(255, 255, 255, 0.6); } .pt-fin-kpi--ok { background: #F0FDF4; border-color: #BBF7D0; } .pt-fin-kpi--ok .pt-fin-kpi-value { color: #166534; } .pt-fin-kpi--warn { background: #FFFBEB; border-color: #FDE68A; } .pt-fin-kpi--warn .pt-fin-kpi-value { color: #92400E; } .pt-fin-kpi-label { font-size: .72rem; font-weight: 700; color: #64748B; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-fin-kpi-value { font-family: 'Syne', sans-serif; font-size: 1.85rem; font-weight: 800; color: #0F172A; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-fin-kpi-meta { font-size: .76rem; color: #64748B; font-weight: 500; line-height: 1.4; min-height: 2.2em; } .pt-fin-kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; line-height: 1.4; min-height: 2.2em; } .pt-fin-kpi-trend--up { color: #22C55E; } .pt-fin-kpi-trend--down { color: #F87171; } .pt-fin-kpi-trend--neutral { color: rgba(255, 255, 255, 0.55); font-weight: 500; } .pt-fin-kpi-trend-arrow { font-size: .9rem; line-height: 1; } /* ── 6-month trend chart ── */ .pt-fin-trend { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 24px 24px 18px; height: 220px; align-items: end; } .pt-fin-trend-col { display: flex; flex-direction: column; align-items: center; height: 100%; gap: 6px; min-width: 0; } .pt-fin-trend-amt { font-family: 'Syne', sans-serif; font-size: .82rem; font-weight: 700; color: #475569; margin-bottom: 4px; white-space: nowrap; } .pt-fin-trend-track { flex: 1; width: 100%; max-width: 64px; background: #F1F5F9; border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; min-height: 0; } .pt-fin-trend-bar { width: 100%; background: linear-gradient(180deg, #94A3B8 0%, #64748B 100%); border-radius: 6px 6px 0 0; min-height: 3px; transition: height .3s ease; } .pt-fin-trend-bar--current { background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%); } .pt-fin-trend-bar--empty { background: #E2E8F0; opacity: .6; } .pt-fin-trend-lbl { font-size: .72rem; font-weight: 600; color: #94A3B8; text-transform: uppercase; letter-spacing: .04em; } /* Empty-state overlay sits above ghost bars */ .pt-fin-trend { position: relative; } .pt-fin-trend-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #94A3B8; font-size: .85rem; font-style: italic; padding: 20px; pointer-events: none; } /* ── Top earners + Who owes you grid ── */ .pt-fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .pt-fin-list { padding: 8px 0; } .pt-fin-list-row { display: flex; align-items: center; gap: 12px; padding: 11px 20px; text-decoration: none; color: inherit; border-bottom: 1px solid #F1F5F9; transition: background .12s ease; } .pt-fin-list-row:last-child { border-bottom: none; } .pt-fin-list-row:hover { background: #FAFBFC; text-decoration: none; } .pt-fin-rank { width: 22px; height: 22px; border-radius: 50%; background: #F1F5F9; color: #475569; font-size: .75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; flex-shrink: 0; } .pt-fin-list-row:nth-child(1) .pt-fin-rank { background: #FEF3C7; color: #92400E; } .pt-fin-list-name { flex: 1; font-weight: 600; color: #0F172A; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .pt-fin-list-amt { font-family: 'Syne', sans-serif; font-weight: 800; color: #0F172A; font-size: .95rem; white-space: nowrap; } .pt-fin-list-amt--owed { color: #B91C1C; } /* ── Recent transactions (collapsed details) ── */ .pt-fin-recent { /* details element styling */ } .pt-fin-recent-head { cursor: pointer; list-style: none; user-select: none; } .pt-fin-recent-head::-webkit-details-marker { display: none; } .pt-fin-recent-head .pt-fin-recent-chev { margin-left: auto; color: #94A3B8; transition: transform .2s ease; flex-shrink: 0; } .pt-fin-recent[open] .pt-fin-recent-chev { transform: rotate(180deg); } .pt-fin-recent-body { padding: 0; border-top: 1px solid #F1F5F9; } .pt-fin-tx-list { padding: 6px 0; } .pt-fin-tx { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 11px 20px; border-bottom: 1px solid #F1F5F9; } .pt-fin-tx:last-child { border-bottom: none; } .pt-fin-tx-pupil { font-weight: 600; color: #0F172A; font-size: .9rem; } .pt-fin-tx-amt { font-family: 'Syne', sans-serif; font-weight: 800; color: #0F172A; font-size: .95rem; grid-row: 1 / span 2; align-self: center; white-space: nowrap; } .pt-fin-tx-meta { font-size: .76rem; color: #64748B; display: flex; gap: 6px; flex-wrap: wrap; } .pt-fin-tx-refund { color: #B91C1C; font-weight: 600; } /* ── Empty states ── */ .pt-fin-empty { padding: 28px 20px; text-align: center; color: #94A3B8; font-size: .88rem; font-style: italic; } .pt-fin-empty--good { color: #166534; font-style: normal; font-weight: 600; } /* ── Mobile breakpoints ── */ @media (max-width: 900px) { .pt-fin-kpis { grid-template-columns: 1fr 1fr; } .pt-fin-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .pt-fin-kpi { padding: 14px 16px 12px; } .pt-fin-kpi-value { font-size: 1.5rem; } .pt-fin-trend { height: 180px; padding: 18px 14px 12px; gap: 8px; } .pt-fin-trend-amt { font-size: .7rem; } .pt-fin-trend-lbl { font-size: .65rem; } .pt-fin-list-row, .pt-fin-tx { padding-left: 16px; padding-right: 16px; } } /* ══════════════════════════════════════════════════════════ PASS 5 — PUPILS TAB POLISH ══════════════════════════════════════════════════════════ */ /* Mobile back link from pupil detail to list */ .pt-pd-back { display: none; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: #475569; text-decoration: none; padding: 4px 10px 4px 6px; margin: -4px 0 12px; border-radius: 6px; width: fit-content; transition: color .12s, background .12s; } .pt-pd-back:hover { color: #0F172A; background: #F1F5F9; } @media (max-width: 768px) { .pt-pd-back { display: inline-flex; } /* When the only pupil is auto-opened into detail, "All pupils" leads nowhere (it just reloads the same auto-selected pupil), so hide it. */ .pt-pupils-shell-body.is-autosingle .pt-pd-back { display: none !important; } } /* Next-lesson status pill */ .pt-pd-next-lesson { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin: 12px 0 16px; background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 999px; font-size: .82rem; color: #075985; } .pt-pd-next-lesson-label { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; color: #0369A1; } .pt-pd-next-lesson-value { font-weight: 600; color: #0C4A6E; } /* Standardised empty state inside cards */ .pt-empty-state--card { text-align: center; padding: 32px 20px; } .pt-empty-state--card .pt-empty-state-icon { margin: 0 auto 8px; color: #94A3B8; } .pt-empty-state--card .pt-empty-state-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; color: #0F172A; margin: 0 0 4px; letter-spacing: -.01em; } .pt-empty-state--card .pt-empty-state-desc { font-size: .85rem; color: #64748B; margin: 0 auto 14px; max-width: 360px; line-height: 1.5; } /* Count pill in lesson card header */ .pt-pd-count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px; margin-left: 8px; background: #E2E8F0; color: #475569; border-radius: 999px; font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0; } /* Force navy buttons (override any amber inheritance from theme) */ .pt-pd-btn-navy { background: #1A3461 !important; color: #FFFFFF !important; border: 1px solid #1A3461 !important; box-shadow: 0 2px 8px rgba(26,52,97,.22) !important; } .pt-pd-btn-navy:hover { background: #0F172A !important; border-color: #0F172A !important; color: #FFFFFF !important; } /* Send button: spacing for icon + label */ .ds-msg-send-btn { display: inline-flex !important; align-items: center; gap: 6px; } /* Welcome card layout — cleaner grid with proper spacing */ .ds-welcome-card .ds-stats-row { margin-top: 24px; gap: 32px; } @media (max-width: 560px) { .ds-welcome-card .ds-stats-row { gap: 16px; } .ds-welcome-card .ds-stat-num { font-size: 2rem !important; } } /* ════════════════════════════════════════════════════════════ MESSAGES TAB — POLISH (v21.7) Sidebar previews, search, archive, read receipts, attachments, composer redesign, optimistic-send states. ════════════════════════════════════════════════════════════ */ /* ── Sidebar search input ───────────────────────────────────── */ .pt-conv-search-wrap { position: relative; padding: 10px 12px 8px; border-bottom: 1px solid var(--ds-border, #E2E8F0); } /* Use input.pt-conv-search for higher specificity than any global input rule. iOS Safari aggressively reskins type=search; the resets here ensure our custom padding and pill border-radius actually apply. */ input.pt-conv-search, input[type="search"].pt-conv-search { width: 100%; box-sizing: border-box; padding: 9px 14px 9px 38px !important; border: 1px solid var(--ds-border, #E2E8F0); border-radius: 999px; background: #fff; font-size: 0.85rem; line-height: 1.3; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Hide Safari's built-in clear button to avoid double UI */ input.pt-conv-search::-webkit-search-decoration, input.pt-conv-search::-webkit-search-cancel-button, input.pt-conv-search::-webkit-search-results-button, input.pt-conv-search::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } input.pt-conv-search:focus { outline: none; border-color: #0EA5E9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12); } .pt-conv-search-icon { position: absolute; left: 24px; /* 12px wrapper padding + 12px input inset */ top: 50%; transform: translateY(-50%); color: #94A3B8; pointer-events: none; z-index: 1; } .pt-conv-empty-search { padding: 24px 16px; text-align: center; color: #94A3B8; font-size: 0.85rem; } /* ── Conversation list rows: previews + timestamps + menu ───── */ .pt-conv-list { display: block; } .pt-conv-item { position: relative; padding-right: 36px; /* leave space for the ⋯ menu button */ } .pt-conv-item--unread .pt-conv-name { font-weight: 700; } .pt-conv-item--archived { opacity: 0.78; } .pt-conv-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .pt-conv-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin-top: 2px; } .pt-conv-name { font-weight: 600; font-size: 0.92rem; color: var(--ds-text, #0F172A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; } .pt-conv-time { font-size: 0.72rem; color: #94A3B8; white-space: nowrap; flex: 0 0 auto; } .pt-conv-item--unread .pt-conv-time { color: #0EA5E9; font-weight: 600; } .pt-conv-preview { font-size: 0.82rem; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; } .pt-conv-item--unread .pt-conv-preview { color: #0F172A; font-weight: 500; } /* ⋯ menu button on each row — always visible at low opacity, brightens on hover/focus. Hover-only UI is a touch-device anti-pattern: phones have no hover, so a hover-revealed button is effectively invisible on the device most instructors will use. */ .pt-conv-menu-btn { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: #64748B; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.45; transition: opacity .15s, background .15s; } .pt-conv-item:hover .pt-conv-menu-btn, .pt-conv-menu-btn:hover, .pt-conv-menu-btn:focus, .pt-conv-menu-btn:focus-visible { opacity: 1; } .pt-conv-menu-btn:hover { background: rgba(15, 23, 42, 0.06); } .pt-conv-menu { position: absolute; right: 8px; top: 38px; background: #fff; border: 1px solid var(--ds-border, #E2E8F0); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); z-index: 10; min-width: 130px; overflow: hidden; } .pt-conv-menu button { display: block; width: 100%; padding: 9px 14px; border: none; background: transparent; text-align: left; font-size: 0.85rem; color: var(--ds-text, #0F172A); cursor: pointer; } .pt-conv-menu button:hover { background: #F1F5F9; } /* ── Archived
section ─────────────────────────────── */ .pt-conv-archived-section { border-top: 1px solid var(--ds-border, #E2E8F0); margin-top: 8px; } .pt-conv-archived-toggle { list-style: none; cursor: pointer; padding: 10px 14px; font-size: 0.78rem; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; user-select: none; } .pt-conv-archived-toggle::-webkit-details-marker { display: none; } .pt-conv-archived-toggle::before { content: '▶'; font-size: 0.6rem; transition: transform .15s; color: #94A3B8; } .pt-conv-archived-section[open] .pt-conv-archived-toggle::before { transform: rotate(90deg); } .pt-conv-archived-count { background: #E2E8F0; color: #475569; border-radius: 999px; padding: 2px 8px; font-size: 0.7rem; margin-left: auto; } /* ── Read receipts on sent bubbles ──────────────────────────── */ .pt-msg-receipt { display: inline-block; margin-left: 6px; font-size: 0.72rem; line-height: 1; letter-spacing: -1px; opacity: 0.85; } .pt-msg-receipt--read { color: #BAE6FD; /* lighter cyan, visible against the blue bubble */ opacity: 1; } .pt-msg-receipt--sent { color: rgba(255, 255, 255, 0.7); } /* ── Attachments inside bubbles ─────────────────────────────── */ .pt-msg-attachment-image-link { display: block; margin: -2px -3px 6px; border-radius: 12px; overflow: hidden; line-height: 0; } .pt-msg-attachment-image { display: block; max-width: 100%; max-height: 280px; width: auto; height: auto; border-radius: 10px; } .pt-msg-attachment-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.18); border-radius: 10px; text-decoration: none; color: inherit; margin-bottom: 4px; } .pt-msg--received .pt-msg-attachment-file { background: #F1F5F9; } .pt-msg-attachment-icon { font-size: 1.1rem; flex-shrink: 0; } .pt-msg-attachment-meta { display: flex; flex-direction: column; min-width: 0; } .pt-msg-attachment-name { font-size: 0.85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .pt-msg-attachment-size { font-size: 0.7rem; opacity: 0.75; } .pt-msg-attachment-file:hover { text-decoration: underline; } /* ── Composer redesign (icon attach + textarea + icon send) ── */ .pt-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ds-border, #E2E8F0); background: #fff; } .pt-composer-attach, .pt-composer-send { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; background: #F1F5F9; color: #475569; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .pt-composer-attach:hover { background: #E2E8F0; } .pt-composer-send { background: #0EA5E9; color: #fff; } .pt-composer-send:hover:not(:disabled) { background: #0284C7; } .pt-composer-send:disabled { opacity: 0.6; cursor: not-allowed; } .pt-composer-input { flex: 1 1 auto; min-height: 38px; max-height: 140px; padding: 9px 14px; border: 1px solid var(--ds-border, #E2E8F0); border-radius: 19px; background: #fff; font-size: 0.92rem; line-height: 1.35; resize: none; font-family: inherit; box-sizing: border-box; overflow-y: auto; } .pt-composer-input:focus { outline: none; border-color: #0EA5E9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12); } /* Pending attachment preview pill above the composer */ .pt-attachment-preview { padding: 8px 12px 0; background: #fff; border-top: 1px solid var(--ds-border, #E2E8F0); } .pt-attachment-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 999px; font-size: 0.82rem; max-width: 100%; } .pt-attachment-pill-icon { flex-shrink: 0; } .pt-attachment-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; color: #0F172A; } .pt-attachment-pill-size { color: #64748B; font-size: 0.72rem; flex-shrink: 0; } .pt-attachment-pill-remove { width: 22px; height: 22px; border-radius: 50%; border: none; background: #CBD5E1; color: #fff; cursor: pointer; line-height: 1; font-size: 1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .pt-attachment-pill-remove:hover { background: #94A3B8; } /* ── Optimistic-send + failed states ────────────────────────── */ .pt-msg--pending .pt-msg-bubble { opacity: 0.7; } .pt-msg-pending-label { font-style: italic; opacity: 0.85; } .pt-msg--failed .pt-msg-bubble { background: linear-gradient(135deg, #DC2626, #B91C1C) !important; border-color: #B91C1C !important; } .pt-msg-failed-label { color: #FEE2E2; } /* ───────────────────────────────────────────────────────────── FINANCE v25 — Tax-year switcher, P&L card, expenses & mileage sections. Sits alongside the existing .pt-fin-* primitives defined earlier in this file. ───────────────────────────────────────────────────────────── */ /* Tax-year switcher pill */ .pt-fin-tyswitch { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 6px 8px; margin-bottom: 18px; } .pt-fin-tyswitch-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: #475569; text-decoration: none; transition: background .15s ease, color .15s ease; flex-shrink: 0; } .pt-fin-tyswitch-btn:hover { background: #F1F5F9; color: #0F172A; } .pt-fin-tyswitch-disabled { color: #CBD5E1; cursor: not-allowed; } .pt-fin-tyswitch-disabled:hover { background: transparent; color: #CBD5E1; } .pt-fin-tyswitch-label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center; } .pt-fin-tyswitch-prefix { font-size: .76rem; color: #64748B; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } .pt-fin-tyswitch-value { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 800; color: #0F172A; } .pt-fin-tyswitch-chip { font-size: .68rem; font-weight: 700; background: #DBEAFE; color: #1E40AF; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; } /* P&L tax-year card */ .pt-fin-pl { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 18px; padding: 20px 22px 18px; margin-bottom: 18px; } .pt-fin-pl-head { display: flex; /* v3.8.9.38 — was 'baseline' before the v26 vehicle-expense-method patch added a method chip; flex-start is required so the chip aligns to the top of the header row instead of dropping below the title baseline. */ align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #F1F5F9; flex-wrap: wrap; } .pt-fin-pl-head-title { font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 800; color: #0F172A; letter-spacing: -.01em; } .pt-fin-pl-head-sub { font-size: .8rem; color: #64748B; font-weight: 500; } .pt-fin-pl-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; } .pt-fin-pl-item { min-width: 0; } .pt-fin-pl-label { font-size: .68rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .pt-fin-pl-value { font-family: 'Syne', sans-serif; font-size: 1.35rem; font-weight: 800; color: #0F172A; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-fin-pl-sub { font-size: .7rem; color: #94A3B8; margin-top: 2px; } .pt-fin-pl-op { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 700; color: #CBD5E1; line-height: 1; padding-bottom: 6px; } .pt-fin-pl-item--profit .pt-fin-pl-label { color: #475569; } .pt-fin-pl-item--profit.is-positive .pt-fin-pl-value { color: #166534; } .pt-fin-pl-item--profit.is-negative .pt-fin-pl-value { color: #B91C1C; } .pt-fin-pl-footnote { margin: 14px 0 0; font-size: .76rem; color: #64748B; line-height: 1.5; font-style: italic; } /* Expense category breakdown bars */ .pt-fin-cat-list { padding: 18px 20px 6px; display: flex; flex-direction: column; gap: 12px; } .pt-fin-cat { display: flex; flex-direction: column; gap: 4px; } .pt-fin-cat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .pt-fin-cat-name { font-size: .85rem; color: #1E293B; font-weight: 500; } .pt-fin-cat-amt { font-size: .85rem; font-weight: 700; color: #0F172A; font-variant-numeric: tabular-nums; } .pt-fin-cat-bar { height: 6px; background: #F1F5F9; border-radius: 3px; overflow: hidden; } .pt-fin-cat-bar-fill { height: 100%; background: linear-gradient(90deg, #6366F1, #818CF8); border-radius: 3px; } /* Expense + mileage row lists (shared markup) */ .pt-fin-exp-head { font-size: .68rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .05em; padding: 14px 20px 8px; border-top: 1px solid #F1F5F9; } .pt-fin-exp-list, .pt-fin-mil-list { padding: 0 6px 12px; } .pt-fin-exp-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; transition: background .15s ease; } .pt-fin-exp-row:hover { background: #F8FAFC; } .pt-fin-exp-main { min-width: 0; } .pt-fin-exp-cat { font-size: .9rem; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-fin-exp-desc { font-size: .76rem; color: #64748B; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-fin-exp-right { text-align: right; flex-shrink: 0; } .pt-fin-exp-amt { font-family: 'Syne', sans-serif; font-size: .95rem; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; } .pt-fin-exp-date { font-size: .72rem; color: #94A3B8; margin-top: 2px; } .pt-fin-row-del { background: none; border: 0; color: #CBD5E1; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 6px 8px; border-radius: 6px; transition: background .15s ease, color .15s ease; } .pt-fin-row-del:hover { background: #FEE2E2; color: #B91C1C; } /* Mileage card summary + bands */ .pt-fin-mil-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 20px 6px; } .pt-fin-mil-stat { background: #F8FAFC; border-radius: 12px; padding: 12px 14px; } .pt-fin-mil-stat-label { font-size: .68rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .pt-fin-mil-stat-value { font-family: 'Syne', sans-serif; font-size: 1.25rem; font-weight: 800; color: #0F172A; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .pt-fin-mil-bands { padding: 12px 20px 4px; display: flex; flex-direction: column; gap: 12px; } .pt-fin-mil-band { display: flex; flex-direction: column; gap: 4px; } .pt-fin-mil-band-bar { height: 6px; background: #F1F5F9; border-radius: 3px; overflow: hidden; } .pt-fin-mil-band-fill { height: 100%; background: linear-gradient(90deg, #14B8A6, #2DD4BF); border-radius: 3px; transition: width .25s ease; } .pt-fin-mil-band-fill--low { background: linear-gradient(90deg, #F59E0B, #FBBF24); } .pt-fin-mil-band-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: .72rem; } .pt-fin-mil-band-label { color: #64748B; font-weight: 500; } .pt-fin-mil-band-val { color: #0F172A; font-weight: 700; font-variant-numeric: tabular-nums; } /* Padded empty-state variant (used inside expense/mileage cards) */ .pt-fin-empty--padded { padding: 28px 20px; text-align: center; color: #64748B; font-size: .9rem; line-height: 1.5; } /* Inline modal status line */ .pt-modal-status { font-size: .82rem; color: #6B7280; min-height: 1.2em; margin-top: 4px; } /* Mobile responsiveness */ @media (max-width: 760px) { .pt-fin-pl-grid { grid-template-columns: 1fr; gap: 6px; } .pt-fin-pl-op { display: none; } .pt-fin-pl-item { background: #F8FAFC; border-radius: 10px; padding: 10px 12px; } .pt-fin-pl-item--profit { background: #ECFDF5; border: 1px solid #BBF7D0; } .pt-fin-pl-item--profit.is-negative { background: #FEF2F2; border-color: #FECACA; } .pt-fin-mil-summary { grid-template-columns: 1fr 1fr; } .pt-fin-tyswitch { padding: 4px 6px; } .pt-fin-tyswitch-value { font-size: .95rem; } } /* ───────────────────────────────────────────────────────────── FINANCE v26 — Vehicle expense method (HMRC simplified vs actual) ───────────────────────────────────────────────────────────── */ /* Method chip in the P&L card header. (The .pt-fin-pl-head align-items was merged into the primary definition in v3.8.9.38; this block now starts with .pt-fin-pl-head-main.) */ .pt-fin-pl-head-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pt-fin-method-chip { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 999px; padding: 6px 10px 6px 12px; font-size: .76rem; color: #1E293B; cursor: pointer; transition: background .15s ease, border-color .15s ease; line-height: 1.2; } .pt-fin-method-chip:hover { background: #F1F5F9; border-color: #CBD5E1; } .pt-fin-method-chip-label { color: #64748B; font-weight: 500; } .pt-fin-method-chip-value { font-weight: 700; color: #0F172A; } .pt-fin-method-chip-edit { background: #2563EB; color: #FFFFFF; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 2px; letter-spacing: .02em; } /* When actual costs is in play, the P&L grid has only 5 cells, not 7. */ .pt-fin-pl-grid--no-mileage { grid-template-columns: 1fr auto 1fr auto 1fr; } .pt-fin-pl-grid--with-mileage { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; } /* Simplified-mode explainer note inside the Expenses card */ .pt-fin-method-note { background: #EFF6FF; border-left: 3px solid #3B82F6; color: #1E40AF; padding: 10px 14px; margin: 0 14px 6px; border-radius: 0 8px 8px 0; font-size: .8rem; line-height: 1.5; } .pt-fin-method-note a { color: #1E40AF; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pt-fin-method-note a:hover { color: #1E3A8A; } /* When the mileage card is hidden, force the expenses card to full width rather than half-row. */ .pt-fin-grid--single { grid-template-columns: 1fr !important; } /* ── Method picker modal ─────────────────────────────────── */ .pt-method-modal-intro { font-size: .9rem; color: #475569; line-height: 1.55; margin: 0 0 16px; } .pt-method-option { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: #FFFFFF; border: 2px solid #E2E8F0; border-radius: 14px; cursor: pointer; margin-bottom: 12px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .pt-method-option:hover { border-color: #CBD5E1; background: #F8FAFC; } .pt-method-option.is-selected { border-color: #2563EB; background: #EFF6FF; box-shadow: 0 0 0 1px #2563EB inset; } .pt-method-option input[type="radio"] { margin-top: 3px; accent-color: #2563EB; flex-shrink: 0; width: 18px; height: 18px; cursor: pointer; } .pt-method-option-body { flex: 1; min-width: 0; } .pt-method-option-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1rem; color: #0F172A; margin-bottom: 6px; letter-spacing: -.01em; } .pt-method-option-desc { font-size: .84rem; color: #475569; line-height: 1.55; } .pt-method-option-desc strong { color: #1E293B; font-weight: 700; } .pt-method-modal-warn { font-size: .78rem; color: #64748B; line-height: 1.5; margin: 8px 0 0; padding: 10px 12px; background: #FEFCE8; border-radius: 8px; border: 1px solid #FDE68A; } /* Mobile: stack the P&L head vertically, full-width chip */ @media (max-width: 760px) { .pt-fin-pl-head { flex-direction: column; align-items: stretch; } .pt-fin-method-chip { justify-content: space-between; width: 100%; } /* Both modifier classes must stack on mobile, not just --no-mileage. Without this, the v26 modifier rules (declared outside the v25 mobile media query) win the cascade and force the desktop multi-column grid on phones, which makes every label render one letter wide. */ .pt-fin-pl-grid--no-mileage, .pt-fin-pl-grid--with-mileage { grid-template-columns: 1fr !important; } .pt-fin-method-note { margin: 0 6px 6px; } } /* ───────────────────────────────────────────────────────────── FINANCE v28 — Recurring expenses + CSV export polish ───────────────────────────────────────────────────────────── */ /* Expenses card header — multi-action layout */ .pt-card-head-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .pt-card-head-link { background: transparent; border: 0; color: #475569; font-size: .8rem; font-weight: 600; padding: 4px 8px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; transition: background .15s ease, color .15s ease; } .pt-card-head-link:hover { background: #F1F5F9; color: #0F172A; } .pt-card-head-link--btn { background: #EFF6FF; color: #1E40AF; } .pt-card-head-link--btn:hover { background: #DBEAFE; color: #1E3A8A; } /* Recurring badge on expense rows */ .pt-fin-exp-recur-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #DBEAFE; color: #1E40AF; margin-left: 6px; vertical-align: -3px; } /* Recurring modal body */ .pt-recur-modal-intro { font-size: .88rem; color: #475569; line-height: 1.55; margin: 0 0 18px; } .pt-recur-section-head { font-size: .7rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #F1F5F9; } .pt-recur-section-head--muted { color: #94A3B8; } .pt-recur-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; } .pt-recur-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; transition: background .15s ease; } .pt-recur-row:hover { background: #F1F5F9; } .pt-recur-row--paused { opacity: 0.65; } .pt-recur-row-main { flex: 1; min-width: 0; } .pt-recur-row-title { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; font-size: .9rem; font-weight: 700; color: #0F172A; } .pt-recur-row-amt { font-family: 'Syne', sans-serif; font-size: .92rem; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; white-space: nowrap; } .pt-recur-row-meta { font-size: .76rem; color: #64748B; margin-top: 3px; } .pt-recur-row-desc { font-size: .76rem; color: #94A3B8; margin-top: 2px; font-style: italic; } .pt-recur-row-actions { display: flex; gap: 4px; flex-shrink: 0; } .pt-recur-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 1px solid #E2E8F0; color: #475569; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .pt-recur-btn:hover { background: #FFFFFF; border-color: #CBD5E1; color: #0F172A; } .pt-recur-btn--del:hover { background: #FEE2E2; border-color: #FECACA; color: #B91C1C; } .pt-recur-empty { padding: 14px; text-align: center; color: #94A3B8; font-size: .85rem; font-style: italic; } /* Cadence radio cards */ .pt-recur-cadence-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pt-recur-cadence-opt { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #FFFFFF; border: 2px solid #E2E8F0; border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease; font-weight: 600; color: #1E293B; font-size: .88rem; } .pt-recur-cadence-opt:hover { border-color: #CBD5E1; } .pt-recur-cadence-opt.is-selected { border-color: #2563EB; background: #EFF6FF; } .pt-recur-cadence-opt input[type="radio"] { accent-color: #2563EB; width: 16px; height: 16px; cursor: pointer; } .pt-recur-hint { font-weight: 400; color: #94A3B8; font-size: .75rem; } /* Mobile tweaks */ @media (max-width: 760px) { .pt-card-head-actions { gap: 4px; } .pt-card-head-link { font-size: .76rem; padding: 4px 6px; } .pt-recur-row { padding: 10px 12px; } .pt-recur-row-title { flex-wrap: wrap; gap: 6px; } } /* ───────────────────────────────────────────────────────────── FINANCE v29 — Hourly rate chip, VAT tracker, Top pupils LTV ───────────────────────────────────────────────────────────── */ /* Hourly-rate chip in P&L card */ .pt-fin-pl-hourly { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #F8FAFC; border-left: 3px solid #94A3B8; } .pt-fin-pl-hourly.is-good { background: #ECFDF5; border-left-color: #16A34A; } .pt-fin-pl-hourly.is-ok { background: #FEFCE8; border-left-color: #CA8A04; } .pt-fin-pl-hourly.is-warn { background: #FEF2F2; border-left-color: #DC2626; } .pt-fin-pl-hourly-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pt-fin-pl-hourly-label { font-size: .78rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .03em; } .pt-fin-pl-hourly.is-good .pt-fin-pl-hourly-label { color: #166534; } .pt-fin-pl-hourly.is-ok .pt-fin-pl-hourly-label { color: #854D0E; } .pt-fin-pl-hourly.is-warn .pt-fin-pl-hourly-label { color: #991B1B; } .pt-fin-pl-hourly-val { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800; color: #0F172A; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .pt-fin-pl-hourly.is-good .pt-fin-pl-hourly-val { color: #166534; } .pt-fin-pl-hourly.is-warn .pt-fin-pl-hourly-val { color: #B91C1C; } .pt-fin-pl-hourly-sub { font-size: .76rem; color: #64748B; line-height: 1.5; margin-top: 4px; } /* VAT threshold tracker */ .pt-fin-vat { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 16px 20px 14px; margin-bottom: 18px; } .pt-fin-vat--comfortable { background: #FFFFFF; } .pt-fin-vat--aware { background: #FFFFFF; border-color: #E2E8F0; } .pt-fin-vat--near { background: #FEFCE8; border-color: #FDE68A; } .pt-fin-vat--over { background: #FEF2F2; border-color: #FECACA; } .pt-fin-vat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .pt-fin-vat-title { font-size: .82rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .04em; } .pt-fin-vat-pct { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; } .pt-fin-vat--near .pt-fin-vat-pct { color: #854D0E; } .pt-fin-vat--over .pt-fin-vat-pct { color: #B91C1C; } .pt-fin-vat-bar { position: relative; height: 8px; background: #F1F5F9; border-radius: 4px; overflow: hidden; margin-bottom: 6px; } .pt-fin-vat-bar-fill { height: 100%; background: linear-gradient(90deg, #14B8A6, #2DD4BF); border-radius: 4px; transition: width .3s ease; } .pt-fin-vat--aware .pt-fin-vat-bar-fill { background: linear-gradient(90deg, #6366F1, #818CF8); } .pt-fin-vat--near .pt-fin-vat-bar-fill { background: linear-gradient(90deg, #F59E0B, #FBBF24); } .pt-fin-vat--over .pt-fin-vat-bar-fill { background: linear-gradient(90deg, #DC2626, #EF4444); } .pt-fin-vat-foot { display: flex; justify-content: space-between; font-size: .78rem; color: #64748B; } .pt-fin-vat-foot-current { font-weight: 700; color: #0F172A; font-variant-numeric: tabular-nums; } .pt-fin-vat-foot-thresh { color: #94A3B8; font-variant-numeric: tabular-nums; } .pt-fin-vat-note { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #FEFCE8; border: 1px solid #FDE68A; font-size: .82rem; color: #854D0E; line-height: 1.55; } .pt-fin-vat-note--alert { background: #FEE2E2; border-color: #FECACA; color: #991B1B; } .pt-fin-vat-note--muted { background: #F8FAFC; border-color: #E2E8F0; color: #64748B; } .pt-fin-vat-note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } /* Top pupils LTV card */ .pt-fin-ltv { display: flex; flex-direction: column; } .pt-fin-ltv-head, .pt-fin-ltv-row { display: grid; grid-template-columns: 38px 1.6fr 1fr .7fr .8fr 1fr; align-items: center; gap: 8px; padding: 10px 16px; } .pt-fin-ltv-head { font-size: .68rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #F1F5F9; background: #F8FAFC; } .pt-fin-ltv-row { text-decoration: none; color: inherit; border-bottom: 1px solid #F8FAFC; transition: background .15s ease; } .pt-fin-ltv-row:last-child { border-bottom: 0; } .pt-fin-ltv-row:hover { background: #F8FAFC; } .pt-fin-ltv-rank { font-size: .8rem; font-weight: 700; color: #94A3B8; font-variant-numeric: tabular-nums; } .pt-fin-ltv-name { font-size: .9rem; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-fin-ltv-paid { font-family: 'Syne', sans-serif; font-size: .92rem; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; white-space: nowrap; /* keep "£1,350.00" on one line */ } .pt-fin-ltv-out { white-space: nowrap; } .pt-fin-ltv-hours, .pt-fin-ltv-rate { font-size: .85rem; color: #475569; font-variant-numeric: tabular-nums; } .pt-fin-ltv-out { font-size: .85rem; color: #94A3B8; font-variant-numeric: tabular-nums; text-align: right; } .pt-fin-ltv-out.is-owed { color: #B91C1C; font-weight: 700; } .pt-fin-ltv-foot { margin: 14px 16px 0; font-size: .76rem; color: #64748B; line-height: 1.5; font-style: italic; } /* Mobile responsiveness */ @media (max-width: 760px) { .pt-fin-pl-hourly-main { flex-direction: column; align-items: flex-start; gap: 4px; } .pt-fin-vat { padding: 14px 16px 12px; } /* LTV card mobile: hide Hours and £/hr columns; keep rank/name/paid/owes. Give "Total paid" enough of the row that a value like £1,350.00 fits on one line; "Owes" is usually just "—" so it can be narrow. */ .pt-fin-ltv-head, .pt-fin-ltv-row { grid-template-columns: 28px 1.3fr 1.05fr .5fr; padding: 10px 12px; gap: 6px; } .pt-fin-ltv-col-hours, .pt-fin-ltv-col-rate, .pt-fin-ltv-hours, .pt-fin-ltv-rate { display: none; } .pt-fin-ltv-paid { font-size: .82rem; } .pt-fin-ltv-foot { margin: 12px; font-size: .72rem; } } /* ───────────────────────────────────────────────────────────── FINANCE v31 — Payment method breakdown + backfill prompt ───────────────────────────────────────────────────────────── */ .pt-fin-pm { padding: 16px 20px 18px; } .pt-fin-pm-bar { display: flex; height: 14px; background: #F1F5F9; border-radius: 7px; overflow: hidden; margin-bottom: 16px; } .pt-fin-pm-seg { height: 100%; transition: opacity .15s ease; } .pt-fin-pm-seg:hover { opacity: 0.85; } .pt-fin-pm-list { display: flex; flex-direction: column; gap: 8px; } .pt-fin-pm-item { display: grid; grid-template-columns: 14px 1fr auto auto auto; align-items: center; gap: 10px; font-size: .85rem; } .pt-fin-pm-swatch { width: 12px; height: 12px; border-radius: 3px; } .pt-fin-pm-label { color: #0F172A; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-fin-pm-amt { font-family: 'Syne', sans-serif; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; } .pt-fin-pm-pct { color: #475569; font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; } .pt-fin-pm-count { color: #94A3B8; font-size: .76rem; font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; } /* Backfill prompt */ .pt-fin-pm-backfill-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 10px 14px; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px; font-size: .82rem; color: #1E40AF; } .pt-fin-pm-backfill-btn { background: #2563EB; color: #FFFFFF; border: 0; border-radius: 6px; padding: 6px 12px; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s ease; } .pt-fin-pm-backfill-btn:hover:not(:disabled) { background: #1E40AF; } .pt-fin-pm-backfill-btn:disabled { background: #93C5FD; cursor: not-allowed; } .pt-fin-pm-backfill-status { margin-top: 8px; font-size: .8rem; color: #475569; min-height: 1.2em; } @media (max-width: 760px) { .pt-fin-pm-item { grid-template-columns: 14px 1fr auto auto; gap: 8px; font-size: .82rem; } /* Drop the "N tx" count on mobile — least important column */ .pt-fin-pm-count { display: none; } .pt-fin-pm-backfill-prompt { flex-direction: column; align-items: stretch; gap: 8px; } } /* ───────────────────────────────────────────────────────────── v3.8.9.60 — Lesson payment-state pills + booking cost tone ───────────────────────────────────────────────────────────── - .ds-lesson-paystate : pill on pupil-detail lesson rows - .pt-badge--paystate-* : pill in dashboard Today's Lessons - .pt-cost-tone-* : live colouring on the cost field in the booking modal ───────────────────────────────────────────────────────────── */ /* Pupil-detail lesson row pill (sits next to .ds-lesson-status) */ .ds-lesson-paystate { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-left: 4px; } .ds-lesson-paystate--prepaid { background: #DBEAFE; color: #1E40AF; } .ds-lesson-paystate--paid { background: #DCFCE7; color: #166534; } .ds-lesson-paystate--unpaid { background: #FEE2E2; color: #991B1B; } /* v0.9.330 — upcoming lesson not yet covered by credit. Amber, not the red of an overdue delivered lesson: it's a "collect payment" nudge, not a debt. */ .ds-lesson-paystate--due { background: #FEF3C7; color: #92400E; } .ds-lesson-paystate--cancelled { background: #F1F5F9; color: #475569; } /* Dashboard Today's Lessons pill (riff on existing .pt-badge--dot) */ .pt-badge--paystate { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-left: 6px; vertical-align: 1px; } .pt-badge--paystate-prepaid { background: #DBEAFE; color: #1E40AF; } .pt-badge--paystate-paid { background: #DCFCE7; color: #166534; } .pt-badge--paystate-unpaid { background: #FEE2E2; color: #991B1B; } .pt-badge--paystate-due { background: #FEF3C7; color: #92400E; } .pt-badge--paystate-cancelled { background: #F1F5F9; color: #475569; } /* Live tone on the booking modal cost field */ .pt-cost-tone-ok { /* Default look — keep neutral; we don't want green flashing for the common "has credit" state. */ border-color: #CBD5E1 !important; } .pt-cost-tone-warn { border-color: #F59E0B !important; background-color: #FFFBEB !important; color: #92400E !important; } .pt-cost-tone-warn:focus { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important; } .pt-cost-tone-bad { border-color: #DC2626 !important; background-color: #FEF2F2 !important; color: #991B1B !important; } .pt-cost-tone-bad:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important; } /* Mobile: keep pills compact in tight lesson rows */ @media (max-width: 760px) { .ds-lesson-paystate, .pt-badge--paystate { font-size: .62rem; padding: 2px 7px; } } /* ───────────────────────────────────────────────────────────── v3.8.9.61 — Grading modal summary strip ───────────────────────────────────────────────────────────── */ .pt-grade-summary { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 14px; margin: 0 0 16px; background: #F1F5F9; border-radius: 10px; border: 1px solid #E2E8F0; } .pt-grade-summary-row { display: flex; flex-direction: column; gap: 2px; } .pt-grade-summary-label { font-size: .65rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .05em; } .pt-grade-summary-val { font-weight: 700; color: #0F172A; font-size: .95rem; }