/* * Primary Learning Platform — Design System Components * Single source of truth for all reusable UI patterns. * Load this AFTER Tailwind CDN in every HTML page's . * * Usage: Add class="btn-primary" instead of repeating Tailwind classes. */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { /* Brand colours */ --color-primary: #2563eb; /* blue-600 — teacher/default */ --color-primary-dark: #1d4ed8; /* blue-700 */ --color-student: #9333ea; /* purple-600 — student portal */ --color-student-dark: #7e22ce; /* purple-700 */ --color-parent: #be185d; /* pink-700 — parent portal */ --color-parent-dark: #9d174d; /* pink-800 */ --color-admin: #1e3a5f; /* navy — admin portal */ --color-success: #16a34a; /* green-600 */ --color-warning: #d97706; /* amber-600 */ --color-danger: #dc2626; /* red-600 */ /* Neutrals */ --color-bg: #f9fafb; /* gray-50 */ --color-surface: #ffffff; --color-border: #e5e7eb; /* gray-200 */ --color-text: #111827; /* gray-900 */ --color-text-muted: #6b7280; /* gray-500 */ /* Spacing scale */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ /* Radius */ --radius-sm: 0.5rem; /* 8px */ --radius-md: 0.75rem; /* 12px */ --radius-lg: 1rem; /* 16px */ --radius-xl: 1.5rem; /* 24px */ /* Shadows */ --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-modal: 0 20px 60px rgba(0,0,0,.15); --shadow-toast: 0 8px 24px rgba(0,0,0,.12); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; } /* ============================================================ BASE RESET / GLOBAL ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--color-bg); color: var(--color-text); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Visible focus ring on everything interactive */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; /* py-2.5 px-5 */ min-height: 2.75rem; /* 44px — minimum touch target */ font-size: 0.875rem; font-weight: 600; line-height: 1; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast); white-space: nowrap; user-select: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; pointer-events: none; } /* Primary (blue — default teacher/platform) */ .btn-primary { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); } /* Secondary (gray) */ .btn-secondary { background-color: #f3f4f6; color: #374151; border-color: #e5e7eb; } .btn-secondary:hover { background-color: #e5e7eb; } /* Danger (red) */ .btn-danger { background-color: var(--color-danger); color: #fff; border-color: var(--color-danger); } .btn-danger:hover { background-color: #b91c1c; border-color: #b91c1c; } /* Success (green) */ .btn-success { background-color: var(--color-success); color: #fff; border-color: var(--color-success); } .btn-success:hover { background-color: #15803d; border-color: #15803d; } /* Ghost (outline) */ .btn-ghost { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-ghost:hover { background-color: #eff6ff; } /* Size variants */ .btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; min-height: 2rem; } .btn-lg { padding: 0.875rem 1.75rem; font-size: 1rem; min-height: 3.25rem; } .btn-full { width: 100%; } /* Role-specific colours */ .btn-student { background-color: var(--color-student); border-color: var(--color-student); color: #fff; } .btn-student:hover { background-color: var(--color-student-dark); border-color: var(--color-student-dark); } .btn-parent { background-color: var(--color-parent); border-color: var(--color-parent); color: #fff; } .btn-parent:hover { background-color: var(--color-parent-dark); border-color: var(--color-parent-dark); } /* ============================================================ CARDS ============================================================ */ .card { background-color: var(--color-surface); border-radius: var(--radius-xl); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); padding: var(--space-lg); /* 24px */ } .card-sm { padding: var(--space-md); } .card-lg { padding: var(--space-xl); } .card-hover { transition: transform var(--transition-normal), box-shadow var(--transition-normal); cursor: pointer; } .card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); } .card-header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-weight: 700; font-size: 1rem; } /* ============================================================ FORM INPUTS ============================================================ */ .form-group { margin-bottom: var(--space-md); } .form-label { display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.375rem; } .form-label .required { color: var(--color-danger); margin-left: 0.25rem; } .form-input, .form-select, .form-textarea { display: block; width: 100%; padding: 0.625rem 1rem; /* py-2.5 px-4 */ min-height: 2.75rem; /* 44px touch target */ font-size: 0.9375rem; font-family: inherit; color: var(--color-text); background-color: var(--color-surface); border: 2px solid #d1d5db; /* gray-300 */ border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; -webkit-appearance: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } .form-input::placeholder, .form-textarea::placeholder { color: #9ca3af; } /* Error state */ .form-input.error, .form-select.error { border-color: var(--color-danger); } .form-input.error:focus, .form-select.error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.15); } .form-error { font-size: 0.8125rem; color: var(--color-danger); margin-top: 0.25rem; display: flex; align-items: center; gap: 0.25rem; } .form-hint { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 0.25rem; } /* Password field wrapper */ .form-input-wrapper { position: relative; } .form-input-wrapper .form-input { padding-right: 3rem; } .form-input-addon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #6b7280; display: flex; align-items: center; padding: 0.25rem; min-height: 0; } .form-input-addon:hover { color: #374151; } /* ============================================================ DATA TABLES ============================================================ */ .data-table-wrapper { width: 100%; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); } .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; background: var(--color-surface); } .data-table thead { background-color: #f9fafb; border-bottom: 2px solid var(--color-border); } .data-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; color: #374151; vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background-color: #f9fafb; } /* Empty/loading rows */ .data-table .table-empty { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); } .data-table .table-empty .table-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; } .data-table .table-empty .table-empty-title { font-weight: 600; font-size: 0.9375rem; color: #374151; } /* Responsive: stack table cells on very small screens */ @media (max-width: 640px) { .data-table-responsive thead { display: none; } .data-table-responsive tr { display: block; margin-bottom: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.5rem; } .data-table-responsive td { display: flex; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid #f3f4f6; } .data-table-responsive td::before { content: attr(data-label); font-weight: 600; color: #6b7280; font-size: 0.75rem; text-transform: uppercase; } } /* ============================================================ BADGES / TAGS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; border-radius: 9999px; white-space: nowrap; } .badge-blue { background: #dbeafe; color: #1d4ed8; } .badge-green { background: #dcfce7; color: #15803d; } .badge-yellow { background: #fef9c3; color: #a16207; } .badge-red { background: #fee2e2; color: #b91c1c; } .badge-purple { background: #f3e8ff; color: #7e22ce; } .badge-gray { background: #f3f4f6; color: #374151; } .badge-pink { background: #fce7f3; color: #9d174d; } /* ============================================================ ALERT / INLINE MESSAGE BANNERS ============================================================ */ .alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: var(--radius-md); border: 1px solid transparent; font-size: 0.875rem; } .alert-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.4; } .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; } .alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; } /* ============================================================ MODALS ============================================================ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 1rem; opacity: 0; transition: opacity var(--transition-normal); } .modal-backdrop.active { opacity: 1; } .modal-box { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); width: 100%; max-width: 32rem; /* default medium */ max-height: 90vh; overflow-y: auto; transform: translateY(12px); transition: transform var(--transition-normal); } .modal-backdrop.active .modal-box { transform: translateY(0); } .modal-box.modal-sm { max-width: 24rem; } .modal-box.modal-lg { max-width: 48rem; } .modal-box.modal-xl { max-width: 64rem; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); font-weight: 700; font-size: 1.0625rem; } .modal-close-btn { background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 1.25rem; line-height: 1; padding: 0.25rem; border-radius: var(--radius-sm); transition: color var(--transition-fast); min-height: 0; } .modal-close-btn:hover { color: #374151; } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; gap: 0.75rem; justify-content: flex-end; padding: 1rem 1.5rem; border-top: 1px solid var(--color-border); } /* ============================================================ NAVIGATION (applied by nav-component.js) ============================================================ */ .plp-nav { background: var(--color-surface); box-shadow: 0 1px 3px rgba(0,0,0,0.07); position: sticky; top: 0; z-index: 500; } .plp-nav-inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; height: 4rem; display: flex; align-items: center; justify-content: space-between; } .plp-nav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--color-text); flex-shrink: 0; } .plp-nav-logo { width: 2.25rem; height: 2.25rem; background-color: var(--color-primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.875rem; flex-shrink: 0; } .plp-nav-brand-text .title { font-weight: 700; font-size: 1rem; color: var(--color-text); line-height: 1.2; } .plp-nav-brand-text .subtitle { font-size: 0.6875rem; color: var(--color-text-muted); line-height: 1.2; } /* Desktop links */ .plp-nav-links { display: flex; align-items: center; gap: 0.375rem; } .plp-nav-link { padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .plp-nav-link:hover { opacity: 0.85; } .plp-nav-link.active { font-weight: 700; } /* Colour variants for nav links */ .plp-nav-link-blue { background: #dbeafe; color: #1d4ed8; } .plp-nav-link-blue.active { background: #2563eb; color: #fff; } .plp-nav-link-teal { background: #ccfbf1; color: #0f766e; } .plp-nav-link-teal.active { background: #0d9488; color: #fff; } .plp-nav-link-emerald{ background: #d1fae5; color: #065f46; } .plp-nav-link-emerald.active{ background: #059669; color: #fff; } .plp-nav-link-pink { background: #fce7f3; color: #9d174d; } .plp-nav-link-pink.active { background: #be185d; color: #fff; } .plp-nav-link-purple { background: #f3e8ff; color: #7e22ce; } .plp-nav-link-purple.active { background: #9333ea; color: #fff; } .plp-nav-link-slate { background: #f1f5f9; color: #475569; } .plp-nav-link-slate.active { background: #475569; color: #fff; } .plp-nav-link-gray { background: #f3f4f6; color: #374151; } .plp-nav-link-orange { background: #fed7aa; color: #9a3412; } .plp-nav-link-orange.active { background: #ea580c; color: #fff; } .plp-nav-link-indigo { background: #c7d2fe; color: #3730a3; } .plp-nav-link-indigo.active { background: #4f46e5; color: #fff; } /* Right-side controls */ .plp-nav-controls { display: flex; align-items: center; gap: 0.5rem; } .plp-nav-class-badge { padding: 0.25rem 0.625rem; background: #dbeafe; color: #1e40af; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; } /* Hamburger button */ .plp-nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: var(--radius-sm); color: #374151; min-height: 0; } .plp-nav-hamburger:hover { background: #f3f4f6; } .plp-nav-hamburger svg { width: 1.5rem; height: 1.5rem; } /* Mobile drawer */ .plp-nav-mobile { display: none; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1.5rem 1rem; border-top: 1px solid var(--color-border); background: var(--color-surface); } .plp-nav-mobile .plp-nav-link { padding: 0.625rem 0.875rem; font-size: 0.9375rem; display: flex; align-items: center; gap: 0.5rem; } /* Responsive breakpoint */ @media (max-width: 767px) { .plp-nav-links { display: none; } .plp-nav-hamburger { display: flex; } .plp-nav-mobile.open { display: flex; } } /* ============================================================ PAGE HERO BANNERS ============================================================ */ .page-hero { padding: 2.5rem 1.5rem; color: #fff; } .page-hero-inner { max-width: 80rem; margin: 0 auto; } .page-hero h1 { font-size: 1.875rem; font-weight: 800; margin-bottom: 0.375rem; line-height: 1.2; } .page-hero p { font-size: 1rem; opacity: 0.85; } .hero-teacher { background: linear-gradient(135deg, #2563eb, #7c3aed); } .hero-student { background: linear-gradient(135deg, #9333ea, #ec4899); } .hero-parent { background: linear-gradient(135deg, #be185d, #9333ea); } .hero-admin { background: linear-gradient(135deg, #1e3a5f, #0f172a); } /* ============================================================ SECTION HEADERS ============================================================ */ .section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .section-icon { width: 2rem; height: 2rem; background: #dbeafe; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .section-title { font-size: 1.125rem; font-weight: 700; color: var(--color-text); } /* ============================================================ LOADING / SKELETON ============================================================ */ @keyframes plp-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .skeleton { border-radius: var(--radius-md); background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 1200px 100%; animation: plp-shimmer 1.5s infinite; } .skeleton-text { height: 1rem; margin-bottom: 0.5rem; } .skeleton-title { height: 1.5rem; width: 60%; margin-bottom: 0.75rem; } .skeleton-card { height: 8rem; } .skeleton-avatar { width: 3rem; height: 3rem; border-radius: 50%; } .skeleton-button { height: 2.5rem; width: 6rem; } .skeleton-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; } /* Loading Overlay - for covering content during async operations */ .loading-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: inherit; } .loading-overlay-dark { background: rgba(0,0,0,0.5); } /* Loading placeholder text */ .loading-placeholder { color: #9ca3af; text-align: center; padding: 2rem 1rem; } /* Spinner */ .spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: plp-spin 0.65s linear infinite; } .spinner-dark { border-color: rgba(37,99,235,0.25); border-top-color: var(--color-primary); } @keyframes plp-spin { to { transform: rotate(360deg); } } /* ============================================================ EMPTY STATES ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; color: var(--color-text-muted); } .empty-state-icon { font-size: 3rem; margin-bottom: 0.75rem; } .empty-state-title { font-size: 1rem; font-weight: 600; color: #374151; margin-bottom: 0.375rem; } .empty-state-desc { font-size: 0.875rem; } /* ============================================================ PAGE LAYOUT HELPERS ============================================================ */ .page-container { max-width: 80rem; margin: 0 auto; padding: 2rem 1.5rem; } .page-container-sm { max-width: 48rem; } .page-container-md { max-width: 64rem; } /* ============================================================ ACCESSIBILITY ============================================================ */ /* Skip-to-content link (hidden until focused) */ .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--color-primary); color: #fff; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-weight: 600; z-index: 9999; text-decoration: none; } .skip-link:focus { top: 1rem; } /* Ensure focus:outline-none from Tailwind doesn't hide keyboard focus */ /* This restores focus visibility for keyboard users even when Tailwind removes it */ *:focus-visible { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; } /* Minimum touch target size for mobile (48x48px per WCAG 2.5.5) */ @media (pointer: coarse) { button, a, [role="button"], input[type="checkbox"], input[type="radio"] { min-height: 44px; min-width: 44px; } } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* High contrast mode support */ @media (forced-colors: active) { .btn { border: 1px solid ButtonText; } .form-input, .form-select, .form-textarea { border: 1px solid ButtonText; } } /* ============================================================ UTILITY OVERRIDES ============================================================ */ /* Consistent transition for interactive elements */ a, button { transition: opacity var(--transition-fast), background-color var(--transition-fast); } /* Screen-reader only text */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Print helpers */ @media print { .no-print { display: none !important; } .plp-nav { display: none !important; } } /* ============================================================ PLANNER v2 — Unified Teacher Planner Built on the existing design tokens above. All sizes/colours use --radius-*, --space-*, --shadow-*, --color-* so the planner stays in lockstep with the rest of Riverbend. ============================================================ */ /* Hero ribbon at the top of the "This Week" hub -------------- */ .planner-hero { background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-xl); padding: var(--space-lg) var(--space-xl); box-shadow: var(--shadow-card); border-left: 4px solid #2563eb; } .planner-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .planner-hero-title { font-size: 1.625rem; font-weight: 800; margin: 0.5rem 0 0.25rem; line-height: 1.15; color: var(--color-text); } .planner-hero-subtitle { font-size: 0.9375rem; color: var(--color-text-muted); margin: 0; } .planner-hero-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: var(--space-md); } /* Context cards (Cambridge / Reading / Active week) ---------- */ .planner-ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); } .planner-ctx-card { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--space-md); display: flex; gap: 0.875rem; align-items: flex-start; box-shadow: var(--shadow-card); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .planner-ctx-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.1)); } .planner-ctx-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; flex-shrink: 0; } .planner-ctx-icon.is-cambridge { background: #dbeafe; color: #1d4ed8; } .planner-ctx-icon.is-reading { background: #ffedd5; color: #c2410c; } .planner-ctx-icon.is-teaching { background: #d1fae5; color: #047857; } .planner-ctx-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .planner-ctx-value { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); margin: 0.125rem 0 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .planner-ctx-meta { font-size: 0.75rem; color: var(--color-text-muted); } /* Progress summary tiles (Draft / Ready / Taught) ------------- */ .planner-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; } .planner-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid #2563eb; border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: 0.25rem; box-shadow: var(--shadow-card); } .planner-stat-value { font-size: 1.75rem; font-weight: 800; color: var(--color-text); line-height: 1; } .planner-stat-label { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .planner-stat.is-draft { border-left-color: #d97706; } .planner-stat.is-ready { border-left-color: #2563eb; } .planner-stat.is-taught { border-left-color: #16a34a; } .planner-stat.is-total { border-left-color: #6366f1; } /* Day cards (Mon–Fri schedule) ------------------------------- */ .planner-day-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); } .planner-day { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: 0.5rem; box-shadow: var(--shadow-card); } .planner-day-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.375rem; border-bottom: 1px solid var(--color-border); margin-bottom: 0.25rem; } .planner-day-title { font-size: 0.875rem; font-weight: 700; color: var(--color-text); margin: 0; } .planner-day-edit { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 0.75rem; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); min-height: 0; } .planner-day-edit:hover { color: var(--color-primary); background: #eff6ff; } .planner-period { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); border: 1px solid transparent; background: #f9fafb; font-size: 0.8125rem; transition: background-color var(--transition-fast); } .planner-period:hover { background: #f3f4f6; } .planner-period-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #d1d5db; flex-shrink: 0; } .planner-period-dot.is-draft { background: #f59e0b; } .planner-period-dot.is-ready { background: #2563eb; } .planner-period-dot.is-taught { background: #16a34a; } .planner-period-time { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; font-size: 0.75rem; flex-shrink: 0; } .planner-period-subject { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .planner-period-action { font-size: 0.6875rem; font-weight: 700; color: var(--color-primary); background: none; border: none; cursor: pointer; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); min-height: 0; text-transform: uppercase; letter-spacing: 0.04em; } .planner-period-action:hover { background: #eff6ff; } .planner-period.subject-phonics { background: #fef3c7; } .planner-period.subject-english { background: #dbeafe; } .planner-period.subject-reading { background: #ffedd5; } .planner-period.subject-writing { background: #fce7f3; } .planner-period.subject-math { background: #e0e7ff; } .planner-period.subject-science { background: #d1fae5; } .planner-period.subject-social { background: #fef9c3; } .planner-period.subject-spelling { background: #f3e8ff; } .planner-period.subject-grammar { background: #cffafe; } .planner-period.subject-break { background: #f3f4f6; color: var(--color-text-muted); } .planner-period.subject-lunch { background: #f3f4f6; color: var(--color-text-muted); } .planner-period.subject-specials { background: #ffe4e6; } .planner-empty { text-align: center; padding: 1rem 0.75rem; color: var(--color-text-muted); font-size: 0.8125rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); } /* Week grid cards (6-week overview) -------------------------- */ .planner-week-card { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: 0.625rem; transition: box-shadow var(--transition-fast); } .planner-week-card:hover { box-shadow: var(--shadow-card); } .planner-week-card.is-draft { border-top-color: #d97706; } .planner-week-card.is-ready { border-top-color: #2563eb; } .planner-week-card.is-taught { border-top-color: #16a34a; } .planner-week-card .planner-week-head { display: flex; justify-content: space-between; align-items: center; } .planner-week-number { font-size: 1rem; font-weight: 800; color: var(--color-text); margin: 0; } .planner-week-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.375rem; } .planner-week-day { display: flex; flex-direction: column; gap: 0.1875rem; } .planner-week-day label { font-size: 0.625rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .planner-week-day textarea { font-family: inherit; font-size: 0.75rem; padding: 0.375rem 0.5rem; border: 1px solid #d1d5db; border-radius: var(--radius-sm); min-height: 3rem; resize: vertical; background: #fafafa; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .planner-week-day textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); background: #fff; } .planner-week-status-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.375rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border); } .planner-status-btn { font-size: 0.6875rem; font-weight: 700; padding: 0.3125rem 0.625rem; border-radius: 9999px; border: 1.5px solid transparent; background: #f3f4f6; color: #6b7280; cursor: pointer; min-height: 0; transition: all var(--transition-fast); } .planner-status-btn.is-active.is-draft { background: #fef3c7; color: #92400e; border-color: #fde68a; } .planner-status-btn.is-active.is-ready { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; } .planner-status-btn.is-active.is-taught { background: #d1fae5; color: #166534; border-color: #a7f3d0; } .planner-status-btn:hover:not(.is-active) { background: #e5e7eb; color: var(--color-text); } /* Plan library preview --------------------------------------- */ .planner-library-preview { margin-top: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); } .planner-library-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .planner-library-title { font-size: 0.875rem; font-weight: 700; color: var(--color-text); margin: 0; } .planner-library-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem; } .planner-library-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; background: #f9fafb; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--transition-fast); } .planner-library-item:hover { background: #eff6ff; border-color: #bfdbfe; } .planner-library-item-title { flex: 1; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Modal sizing used by schedule editor + week grid ----------- */ .modal-box.modal-planner { max-width: 72rem; } /* ============================================================ * PLANNER v2.1 — Curriculum tagging + resource drawer + groups * ============================================================ * * Extends the planner v2 design system with dual-curriculum * visual affordances: Cambridge (blue), Reading/Wonders (amber), * Cross-curricular (purple). All classes build on existing * tokens so dark-mode / re-themes propagate. */ /* Curriculum dot/badge tokens --------------------------------- */ .planner-track-dot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 9999px; flex: 0 0 auto; } .planner-track-dot.dot-cambridge { background: #2563eb; } .planner-track-dot.dot-reading { background: #d97706; } .planner-track-dot.dot-cross { background: #7c3aed; } .planner-track-dot.dot-none { background: #9ca3af; } .badge-cambridge { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; } .badge-reading { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; } .badge-cross { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; } /* Track switch (Cambridge | Reading | Both) ------------------- */ .planner-track-switch { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 9999px; margin-bottom: 1rem; flex-wrap: wrap; } .planner-track-btn { padding: 0.5rem 1rem; border: none; background: transparent; color: var(--color-text-muted); font-size: 0.8125rem; font-weight: 600; border-radius: 9999px; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .planner-track-btn:hover { background: #f3f4f6; color: var(--color-text); } .planner-track-btn.is-active { background: var(--color-primary); color: white; box-shadow: var(--shadow-button); } .planner-track-btn[data-curriculum="reading"].is-active { background: #d97706; } .planner-track-btn[data-curriculum="cross"].is-active { background: #7c3aed; } /* Per-track section header (used in WeekGrid 'both' mode) ----- */ .planner-track-section { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem; background: var(--color-surface); margin-bottom: 1rem; } .planner-track-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); } .planner-track-title { font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 0; } /* Curriculum-colored week-card top borders ------------------- */ .planner-week-card[data-curriculum="cambridge"].is-draft { border-top-color: #2563eb; } .planner-week-card[data-curriculum="reading"].is-draft { border-top-color: #d97706; } .planner-week-card[data-curriculum="cross"].is-draft { border-top-color: #7c3aed; } /* Resource drawer (persistent sidebar on hub/week grid) ----- */ .resource-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 26rem; max-width: 92vw; background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-elevated); display: flex; flex-direction: column; z-index: 950; transform: translateX(100%); transition: transform var(--transition-smooth); } .resource-drawer.is-open { transform: translateX(0); } .resource-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); color: white; } .resource-drawer-title { font-weight: 700; font-size: 0.9375rem; margin: 0; } .resource-drawer-search { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 0.5rem; } .resource-drawer-body { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; } .resource-card { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem; background: #f9fafb; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 0.5rem; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .resource-card:hover { background: #eff6ff; border-color: #bfdbfe; } .resource-card-title { font-weight: 600; font-size: 0.8125rem; color: var(--color-text); line-height: 1.3; } .resource-card-meta { display: flex; gap: 0.375rem; flex-wrap: wrap; font-size: 0.6875rem; color: var(--color-text-muted); } .resource-card-actions { display: flex; gap: 0.375rem; margin-top: 0.25rem; } .resource-drawer-handle { position: fixed; top: 50%; right: 0; transform: translateY(-50%); background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); color: white; padding: 0.75rem 0.5rem; border: none; border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); cursor: pointer; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; writing-mode: vertical-rl; z-index: 940; box-shadow: var(--shadow-elevated); } .resource-drawer-handle:hover { filter: brightness(1.08); } /* Groups panel + standards chips ----------------------------- */ .planner-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; } .planner-group-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.625rem; background: #f9fafb; font-size: 0.75rem; } .planner-group-card .group-tier { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6875rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } .planner-group-card[data-tier="approaching"] { border-top: 3px solid #f59e0b; } .planner-group-card[data-tier="on"] { border-top: 3px solid #2563eb; } .planner-group-card[data-tier="beyond"] { border-top: 3px solid #16a34a; } .planner-group-card[data-tier="ell"] { border-top: 3px solid #9333ea; } .standard-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1875rem 0.5rem; background: #eff6ff; color: #1d4ed8; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; margin: 0.125rem 0.125rem 0.125rem 0; } .standard-chip.cambridge { background: #eff6ff; color: #1d4ed8; } .standard-chip.reading { background: #fef3c7; color: #92400e; } /* Substitute view print styles ------------------------------- */ .substitute-view { padding: 2rem; max-width: 48rem; margin: 0 auto; background: white; color: #111827; font-family: Georgia, 'Times New Roman', serif; } .substitute-view h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } .substitute-view .sub-period { margin-bottom: 1.25rem; padding: 0.75rem 1rem; border-left: 4px solid #2563eb; background: #f9fafb; } @media print { .substitute-view { padding: 0; } .no-print { display: none !important; } } /* ===================================================================== * LIBRARY v1 — Teacher-owned resource library manager * ===================================================================== */ .badge-teacher { background: #ecfccb; color: #3f6212; } .badge-class { background: #fef3c7; color: #92400e; } /* Source pill shown in picker/drawer cards */ .resource-card [data-source="teacher"], .resource-card [data-source="classShared"] { font-weight: 600; } /* Library-page stat cards */ .lib-stat-box { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; } .lib-stat-box .value { font-size: 20px; font-weight: 700; color: var(--color-text); } .lib-stat-box .label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); letter-spacing: 0.03em; } /* Track outline for library cards (reuses planner curriculum dots) */ .lib-card[data-curriculum="reading"] { border-top: 4px solid #f97316; } .lib-card[data-curriculum="cambridge"] { border-top: 4px solid #2563eb; } .lib-card[data-curriculum="both"] { border-top: 4px solid #7c3aed; } .lib-card[data-curriculum="null"] { border-top: 4px solid #94a3b8; }