/* Shared layout fixes, loaded after all existing admin styles. */ :root { color-scheme: dark; } .analytics-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 100%; } .analytics-controls > * { flex: 0 0 auto; } .analytics-controls .analytics-button { width: auto; max-width: 100%; height: auto; min-height: 40px; white-space: normal; overflow-wrap: anywhere; } #openActivitySummary { min-width: 215px; } .class-session-start-area .class-session-select-group { min-width: 0; } .theme-toggle { margin-top: auto; min-height: 40px; flex-shrink: 0; } @media (max-width: 640px) { .analytics-controls { justify-content: flex-start; } .analytics-controls > * { flex: 1 1 140px; min-width: 0; } #openActivitySummary { min-width: 0; flex-basis: 100%; } } /* Light palette: Skool reference: warm white, charcoal, pale yellow accents. */ :root[data-admin-theme="light"] { color-scheme: light; --black: #f8f7f5; --bg: #f8f7f5; --panel: #ffffff; --panel-light: #fdf1d5; --panel-elevated: #fff; --panel-soft: #f8f7f5; --border: #e4e4e4; --border-light: #d4d4d4; --border-gold: #e4e4e4; --gold: #202124; --gold-bright: #202124; --gold-dark: #c49a39; --gold-faint: rgba(248,212,129,.24); --white: #202124; --gray: #666666; --gray-soft: #707070; --green: #087b4d; --danger: #b63d42; --danger-border: #d49ca0; --shadow-lg: 0 20px 60px rgba(29,39,53,.16); --shadow-md: 0 3px 12px rgba(29,39,53,.045); } /* Color overrides only: all existing layout rules remain shared. */ :root[data-admin-theme="light"] ::selection { color: var(--white); } :root[data-admin-theme="light"] ::-webkit-scrollbar-track { background-color: var(--panel); } :root[data-admin-theme="light"] ::-webkit-scrollbar-thumb { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .form-group input, :root[data-admin-theme="light"] .form-group select, :root[data-admin-theme="light"] .form-group textarea, :root[data-admin-theme="light"] #attendanceType, :root[data-admin-theme="light"] #attendanceStudentSelect, :root[data-admin-theme="light"] #attendanceActivityName, :root[data-admin-theme="light"] #attendanceWorkshopSelect, :root[data-admin-theme="light"] #planSelect, :root[data-admin-theme="light"] #planStartDate { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .form-group input::placeholder, :root[data-admin-theme="light"] .form-group textarea::placeholder { color: var(--gray); } :root[data-admin-theme="light"] .form-group input:hover, :root[data-admin-theme="light"] .form-group select:hover, :root[data-admin-theme="light"] .form-group textarea:hover, :root[data-admin-theme="light"] #attendanceType:hover, :root[data-admin-theme="light"] #attendanceStudentSelect:hover, :root[data-admin-theme="light"] #attendanceActivityName:hover, :root[data-admin-theme="light"] #attendanceWorkshopSelect:hover, :root[data-admin-theme="light"] #planSelect:hover, :root[data-admin-theme="light"] #planStartDate:hover { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .form-group input:focus, :root[data-admin-theme="light"] .form-group select:focus, :root[data-admin-theme="light"] .form-group textarea:focus, :root[data-admin-theme="light"] #attendanceType:focus, :root[data-admin-theme="light"] #attendanceStudentSelect:focus, :root[data-admin-theme="light"] #attendanceActivityName:focus, :root[data-admin-theme="light"] #attendanceWorkshopSelect:focus, :root[data-admin-theme="light"] #planSelect:focus, :root[data-admin-theme="light"] #planStartDate:focus { background-color: var(--panel); box-shadow: 0 0 0 2px var(--gold-faint); } :root[data-admin-theme="light"] select option { background-color: var(--panel); } :root[data-admin-theme="light"] .gold-button { color: var(--white); border-top-color: var(--border-gold); border-right-color: var(--border-gold); border-bottom-color: var(--border-gold); border-left-color: var(--border-gold); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .gold-button:hover { background-color: var(--panel-light); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .logout-button { color: var(--gray); background-color: var(--panel); } :root[data-admin-theme="light"] .logout-button:hover { background-color: var(--panel-light); } :root[data-admin-theme="light"] .danger-button { background-color: var(--panel); } :root[data-admin-theme="light"] .danger-button:hover { color: var(--danger); background-color: var(--panel-light); border-top-color: var(--danger-border); border-right-color: var(--danger-border); border-bottom-color: var(--danger-border); border-left-color: var(--danger-border); } :root[data-admin-theme="light"] .login-view { background-color: var(--panel); } :root[data-admin-theme="light"] .login-panel { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .login-message { color: var(--danger); } :root[data-admin-theme="light"] .partner-divider { background-color: var(--panel); } :root[data-admin-theme="light"] .sidebar { background-color: var(--panel); border-right-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .sidebar-title { border-bottom-color: var(--border); } :root[data-admin-theme="light"] .nav-item { color: var(--gray); } :root[data-admin-theme="light"] .nav-item:hover { background-color: var(--panel-light); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .nav-item.active { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .nav-item.active::before { box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .sidebar-partners { border-top-color: var(--border); } :root[data-admin-theme="light"] .sidebar-divider { background-color: var(--panel); } :root[data-admin-theme="light"] .admin-user { border-left-color: var(--border); } :root[data-admin-theme="light"] .admin-user strong { color: var(--white); } :root[data-admin-theme="light"] .admin-user span { color: var(--gray); } :root[data-admin-theme="light"] .welcome-section { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .stat-card { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .stat-card:hover { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .stat-card p { color: var(--gray); } :root[data-admin-theme="light"] .status-online::before { box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .quick-card { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] #studentsMessage, :root[data-admin-theme="light"] #plansMessage, :root[data-admin-theme="light"] #attendanceMessage, :root[data-admin-theme="light"] #workshopsMessage, :root[data-admin-theme="light"] #attendanceSelectedInfo { color: var(--white); } @media (max-width: 750px) { :root[data-admin-theme="light"] .admin-user { border-top-color: var(--border); } } :root[data-admin-theme="light"] .analytics-controls select, :root[data-admin-theme="light"] .analytics-controls input { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .analytics-kpi { background-color: var(--panel); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); border-top-color: var(--border-gold); } :root[data-admin-theme="light"] .analytics-panel { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .analytics-panel-heading { border-bottom-color: var(--border); } :root[data-admin-theme="light"] .analytics-row, :root[data-admin-theme="light"] .ledger-row { border-bottom-color: var(--border); } :root[data-admin-theme="light"] .analytics-row span, :root[data-admin-theme="light"] .ledger-row span { color: var(--white); } :root[data-admin-theme="light"] .ledger-summary > div { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .ledger-columns > section, :root[data-admin-theme="light"] .ledger-attendance-section { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .ledger-plan-covered { border-top-color: var(--green); border-right-color: var(--green); border-bottom-color: var(--green); border-left-color: var(--green); } :root[data-admin-theme="light"] .pricing-row { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .pricing-money-field input { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .pricing-money-field input:focus { box-shadow: 0 0 0 2px var(--gold-faint); } :root[data-admin-theme="light"] .stat-card-clickable:hover, :root[data-admin-theme="light"] .stat-card-clickable:focus-visible { background-color: var(--panel-light); } :root[data-admin-theme="light"] .analytics-subheading { border-top-color: var(--border); } :root[data-admin-theme="light"] .attendance-history-controls select, :root[data-admin-theme="light"] .attendance-history-controls input { color: var(--white); background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-time-picker-button { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-time-picker-button:hover, :root[data-admin-theme="light"] .workshop-time-picker-button:focus-visible { background-color: var(--panel-light); } :root[data-admin-theme="light"] .class-session-console { border-top-color: var(--border-gold); border-right-color: var(--border-gold); border-bottom-color: var(--border-gold); border-left-color: var(--border-gold); background-color: var(--panel); } :root[data-admin-theme="light"] .class-session-live-badge { border-top-color: var(--green); border-right-color: var(--green); border-bottom-color: var(--green); border-left-color: var(--green); color: var(--green); } :root[data-admin-theme="light"] .class-session-stat { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); background-color: var(--panel); } :root[data-admin-theme="light"] .class-session-stat span { color: var(--gold); } :root[data-admin-theme="light"] .class-session-stat strong { color: var(--white); } :root[data-admin-theme="light"] .class-session-message { color: var(--gray); } :root[data-admin-theme="light"] #attendanceActivityName.is-session-locked { border-top-color: var(--border-gold); border-right-color: var(--border-gold); border-bottom-color: var(--border-gold); border-left-color: var(--border-gold); color: var(--gold); } :root[data-admin-theme="light"] .class-session-card { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); background-color: var(--panel); } :root[data-admin-theme="light"] .class-session-card.is-selected { border-top-color: var(--border-gold); border-right-color: var(--border-gold); border-bottom-color: var(--border-gold); border-left-color: var(--border-gold); background-color: var(--panel-light); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .class-session-card-main strong { color: var(--white); } :root[data-admin-theme="light"] .class-session-card-main span:not(.class-session-card-status) { color: var(--gray); } :root[data-admin-theme="light"] .class-session-card-status { border-top-color: var(--green); border-right-color: var(--green); border-bottom-color: var(--green); border-left-color: var(--green); color: var(--green); } :root[data-admin-theme="light"] .class-session-card-stats { border-top-color: var(--border); color: var(--gray); } :root[data-admin-theme="light"] .class-session-card-stats strong { color: var(--gold); } :root[data-admin-theme="light"] .class-session-select-button, :root[data-admin-theme="light"] .class-session-finish-button { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); color: var(--gray); } :root[data-admin-theme="light"] .class-session-select-button:hover, :root[data-admin-theme="light"] .class-session-select-button.is-selected { border-top-color: var(--border-gold); border-right-color: var(--border-gold); border-bottom-color: var(--border-gold); border-left-color: var(--border-gold); color: var(--gold); } :root[data-admin-theme="light"] .class-session-finish-button:hover { border-top-color: var(--danger-border); border-right-color: var(--danger-border); border-bottom-color: var(--danger-border); border-left-color: var(--danger-border); color: var(--danger); } :root[data-admin-theme="light"] .workshop-live-badge { border-top-color: var(--green); border-right-color: var(--green); border-bottom-color: var(--green); border-left-color: var(--green); color: var(--green); } :root[data-admin-theme="light"] .workshop-live-class-stats article { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); background-color: var(--panel); } :root[data-admin-theme="light"] .class-session-qr-button { border-top-color: var(--border-gold); border-right-color: var(--border-gold); border-bottom-color: var(--border-gold); border-left-color: var(--border-gold); color: var(--gold); } :root[data-admin-theme="light"] .class-session-qr-button:hover { border-top-color: var(--border-gold); border-right-color: var(--border-gold); border-bottom-color: var(--border-gold); border-left-color: var(--border-gold); } :root[data-admin-theme="light"] .session-qr-visual { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); background-color: var(--panel-soft); color: var(--white); } :root[data-admin-theme="light"] .session-qr-link-box { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); background-color: var(--panel); } :root[data-admin-theme="light"] .session-qr-link-box code { color: var(--white); } :root[data-admin-theme="light"] #studentPhotoArea { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] #studentPhotoPlaceholder { color: var(--gray); } :root[data-admin-theme="light"] #studentDetailAlias, :root[data-admin-theme="light"] #studentDetailGroup, :root[data-admin-theme="light"] #studentDetailPlan, :root[data-admin-theme="light"] #studentDetailAccount, :root[data-admin-theme="light"] #studentDetailStatus { color: var(--gray); } :root[data-admin-theme="light"] #studentMembershipHistory, :root[data-admin-theme="light"] #studentAttendanceHistory, :root[data-admin-theme="light"] #studentWorkshopHistory { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] #studentMembershipHistory > p, :root[data-admin-theme="light"] #studentAttendanceHistory > p, :root[data-admin-theme="light"] #studentWorkshopHistory > p { color: var(--gray); border-bottom-color: var(--border); } :root[data-admin-theme="light"] .student-danger-zone { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .students-suggestions, :root[data-admin-theme="light"] .attendance-student-suggestions { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .student-suggestion-item { border-bottom-color: var(--border); } :root[data-admin-theme="light"] .student-suggestion-meta { color: var(--gray); } :root[data-admin-theme="light"] .students-suggestion-empty { color: var(--gray); } :root[data-admin-theme="light"] .students-directory-list { border-top-color: var(--border); } :root[data-admin-theme="light"] .students-directory-item { border-bottom-color: var(--border); } :root[data-admin-theme="light"] .students-directory-item span { color: var(--gray); } :root[data-admin-theme="light"] .students-directory-empty { color: var(--gray); } :root[data-admin-theme="light"] .admin-dialog { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .admin-dialog::backdrop { background-color: rgba(28, 34, 42, .42); } :root[data-admin-theme="light"] .admin-dialog p:not(.section-label):not([id$="Message"]) { color: var(--gray); } :root[data-admin-theme="light"] .dialog-close { color: var(--gray); background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .dialog-close:hover { background-color: var(--panel-light); } :root[data-admin-theme="light"] .dialog-actions { border-top-color: var(--border); } :root[data-admin-theme="light"] .form-hint { color: var(--gray); } :root[data-admin-theme="light"] .attendance-form-card { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .attendance-step-heading { border-bottom-color: var(--border); } :root[data-admin-theme="light"] .attendance-step-heading strong { color: var(--white); } :root[data-admin-theme="light"] .attendance-step-heading p { color: var(--gray); } :root[data-admin-theme="light"] #attendanceSelectedInfo { color: var(--gray); } :root[data-admin-theme="light"] #singleVisitorFields { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] #singleVisitorFields > p { color: var(--gray); } :root[data-admin-theme="light"] .attendance-payment-card { border-top-color: var(--border); } :root[data-admin-theme="light"] .attendance-submit-bar { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] #attendanceResult { border-top-color: var(--green); border-right-color: var(--green); border-bottom-color: var(--green); border-left-color: var(--green); } :root[data-admin-theme="light"] .plan-student-suggestions { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .plan-student-suggestion-item { border-bottom-color: var(--border); } :root[data-admin-theme="light"] .plan-suggestion-meta, :root[data-admin-theme="light"] .plan-suggestion-empty { color: var(--gray); } :root[data-admin-theme="light"] .plan-management-card { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .plan-management-card > p:not(.section-label) { color: var(--gray); } :root[data-admin-theme="light"] #planMembershipHistory { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .plan-history-row { border-bottom-color: var(--border); } :root[data-admin-theme="light"] .plan-history-row strong { color: var(--white); } :root[data-admin-theme="light"] .plan-history-row span { color: var(--gray); } :root[data-admin-theme="light"] .workshop-card { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-card:hover { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-card span:not(.workshop-card-status) { color: var(--gray); } :root[data-admin-theme="light"] .workshop-card-status { color: var(--gray); } :root[data-admin-theme="light"] .workshop-empty-state { color: var(--gray); background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-enrollment-section { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-student-suggestions { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .workshop-student-suggestion { border-bottom-color: var(--border); } :root[data-admin-theme="light"] .workshop-student-suggestion span, :root[data-admin-theme="light"] .workshop-suggestion-empty { color: var(--gray); } :root[data-admin-theme="light"] #workshopSelectedStudentInfo, :root[data-admin-theme="light"] #workshopEnrollmentMessage, :root[data-admin-theme="light"] #workshopsMessage, :root[data-admin-theme="light"] #workshopCreateMessage, :root[data-admin-theme="light"] #workshopVisitorMessage, :root[data-admin-theme="light"] #workshopStatusDialogMessage { color: var(--gray); } :root[data-admin-theme="light"] .workshop-registration-row { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-registration-row:hover { background-color: var(--panel-light); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-registration-info strong { color: var(--white); } :root[data-admin-theme="light"] .workshop-registration-info span { color: var(--gray); } :root[data-admin-theme="light"] .workshop-history-item { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-history-item:hover { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-history-main small { color: var(--gray); } :root[data-admin-theme="light"] .workshop-history-metrics span { color: var(--gray); background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] #workshopHistoryMessage { color: var(--gray); } :root[data-admin-theme="light"] .workshop-history-suggestions { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .workshop-history-suggestion { border-bottom-color: var(--border); } :root[data-admin-theme="light"] .workshop-history-suggestion span { color: var(--gray); } :root[data-admin-theme="light"] .workshop-history-detail-heading { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-history-detail-heading > p:not(.section-label) { color: var(--gray); } :root[data-admin-theme="light"] .workshop-history-stat { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-history-stat strong { color: var(--white); } :root[data-admin-theme="light"] .workshop-history-participants-section { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-history-participant { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .workshop-history-participant strong { color: var(--white); } :root[data-admin-theme="light"] .workshop-history-participant span { color: var(--gray); } :root[data-admin-theme="light"] .academy-filter-field select, :root[data-admin-theme="light"] .academy-class-form-grid select, :root[data-admin-theme="light"] .academy-class-form-grid input, :root[data-admin-theme="light"] .academy-schedule-field select, :root[data-admin-theme="light"] .academy-schedule-field input { color: var(--white); background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .academy-filter-field select:focus, :root[data-admin-theme="light"] .academy-class-form-grid select:focus, :root[data-admin-theme="light"] .academy-class-form-grid input:focus, :root[data-admin-theme="light"] .academy-schedule-field select:focus, :root[data-admin-theme="light"] .academy-schedule-field input:focus { box-shadow: 0 0 0 2px var(--gold-faint); } :root[data-admin-theme="light"] .academy-filter-field select option, :root[data-admin-theme="light"] .academy-class-form-grid select option, :root[data-admin-theme="light"] .academy-schedule-field select option { color: var(--white); background-color: var(--panel); } :root[data-admin-theme="light"] .academy-class-card { box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .academy-class-schedule-chip { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); background-color: var(--panel); color: var(--white); } :root[data-admin-theme="light"] .academy-schedule-row { background-color: var(--panel); } :root[data-admin-theme="light"] .activity-summary-controls input, :root[data-admin-theme="light"] .activity-summary-controls select { color: var(--white); background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .activity-summary-controls input:focus, :root[data-admin-theme="light"] .activity-summary-controls select:focus { box-shadow: 0 0 0 2px var(--gold-faint); } :root[data-admin-theme="light"] .activity-summary-controls select option { color: var(--white); background-color: var(--panel); } :root[data-admin-theme="light"] .activity-summary-switch button, :root[data-admin-theme="light"] .activity-summary-tabs button { background-color: var(--panel); } :root[data-admin-theme="light"] .activity-summary-switch button.is-active, :root[data-admin-theme="light"] .activity-summary-tabs button.is-active { color: var(--white); } :root[data-admin-theme="light"] .activity-ranking-row.is-podium { border-top-color: var(--border-gold); border-right-color: var(--border-gold); border-bottom-color: var(--border-gold); border-left-color: var(--border-gold); } @media (max-width: 820px) { :root[data-admin-theme="light"] .mobile-admin-bar { background-color: var(--panel); border-bottom-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .mobile-menu-button { background-color: var(--panel); border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .mobile-admin-brand strong { color: var(--white); } :root[data-admin-theme="light"] .mobile-admin-mark { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); border-left-color: var(--border); } :root[data-admin-theme="light"] .sidebar { background-color: var(--panel); border-right-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .mobile-menu-backdrop { background-color: rgba(28, 34, 42, .42); } } /* Deliberate hierarchy: canvas → white panels → quiet inset areas. */ :root[data-admin-theme="light"] body, :root[data-admin-theme="light"] .admin-main, :root[data-admin-theme="light"] .login-view { background: var(--bg); color: var(--white); } :root[data-admin-theme="light"] .sidebar { background: #fff; border-right-color: var(--border); box-shadow: none; } :root[data-admin-theme="light"] :is(.sidebar-logo,.sidebar-mqr,.sidebar-emuna,.login-logo,.partner-logo) { filter: none; } :root[data-admin-theme="light"] :is(.sidebar-title,.sidebar-partners,.admin-user) { border-color: var(--border); } :root[data-admin-theme="light"] .nav-item { color: var(--gray); } :root[data-admin-theme="light"] .nav-item:hover { background: #f8f7f5; color: var(--white); } :root[data-admin-theme="light"] .nav-item.active { background: #fdf1d5; color: #202124; border-color: #f8d481; } :root[data-admin-theme="light"] :is(.welcome-section,.stat-card,.analytics-section,.attendance-form-card,.class-session-card,.academy-class-card,.workshop-card,.login-panel) { background: var(--panel); border-color: var(--border); box-shadow: var(--shadow-md); } :root[data-admin-theme="light"] .welcome-section::before { background: #f8d481; } :root[data-admin-theme="light"] .stat-card { border-top-color: #e4e4e4; } :root[data-admin-theme="light"] .analytics-section { background: #fff; } :root[data-admin-theme="light"] .analytics-kpi { background: #f8f7f5; border-color: var(--border); border-top-color: #e4e4e4; } :root[data-admin-theme="light"] .analytics-panel { background: #fff; border-color: var(--border); } :root[data-admin-theme="light"] :is(input,select,textarea) { background: #fff; color: var(--white); border-color: var(--border-light); } :root[data-admin-theme="light"] :is(input,textarea)::placeholder { color: #767676; } :root[data-admin-theme="light"] :is(input,select,textarea):focus { border-color: #c49a39; box-shadow: 0 0 0 2px rgba(248,212,129,.24); } :root[data-admin-theme="light"] :is(.gold-button,.gold-button:hover) { background: #f8d481; border-color: #f1d07c; color: #202124; box-shadow: none; } :root[data-admin-theme="light"] .gold-button:hover { background: #f1d07c; } :root[data-admin-theme="light"] :is(.logout-button,.dialog-close,.academy-class-card-actions button) { background: #fff; color: #666666; border-color: var(--border-light); box-shadow: none; } :root[data-admin-theme="light"] :is(.logout-button,.dialog-close,.academy-class-card-actions button):hover { background: #fdf1d5; border-color: #e4e4e4; color: #202124; } :root[data-admin-theme="light"] :is(.danger-button,.academy-archive-button) { color: var(--danger); background: #fff7f7; border-color: var(--danger-border); } :root[data-admin-theme="light"] .academy-class-card-actions button.academy-archive-button { color: #a83232; background: #fff2f2; border-color: #dda8a8; } :root[data-admin-theme="light"] .academy-class-card-actions button.academy-archive-button:hover, :root[data-admin-theme="light"] .academy-class-card-actions button.academy-archive-button:focus-visible { color: #862525; background: #ffe3e3; border-color: #b95b5b; } :root[data-admin-theme="light"] .admin-dialog { background: #fff; border-color: #d4d4d4; box-shadow: var(--shadow-lg); } :root[data-admin-theme="light"] .admin-dialog-card { background: #fff; } :root[data-admin-theme="light"] :is(.admin-dialog,.students-directory-dialog)::backdrop { background: rgba(28,34,42,.42); backdrop-filter: blur(4px); } :root[data-admin-theme="light"] #activitySummaryDialog .activity-ranking-row { background: #f8f7f5; border-color: var(--border); } :root[data-admin-theme="light"] #activitySummaryDialog .activity-ranking-value strong { color: var(--white); } :root[data-admin-theme="light"] #activitySummaryDialog :is(.activity-summary-tabs,.activity-summary-switch) button { background: #f8f7f5; color: #666666; border-color: var(--border); } :root[data-admin-theme="light"] #activitySummaryDialog :is(.activity-summary-tabs,.activity-summary-switch) button.is-active { background: #fdf1d5; color: #202124; border: 1px solid #f8d481; } :root[data-admin-theme="light"] #academyClassDialog .academy-schedule-row { background: #f8f7f5; border-color: var(--border); } :root[data-admin-theme="light"] * { scrollbar-color: #c9c9c9 #f8f7f5; } :root[data-admin-theme="light"] *::-webkit-scrollbar-track { background: #f8f7f5; } :root[data-admin-theme="light"] *::-webkit-scrollbar-thumb { background: #c9c9c9; border-color: #f8f7f5; } :root[data-admin-theme="light"] ::selection { background: #fae3ac; color: #202124; } :root[data-admin-theme="light"] a { color: #2e6ef5; } /* Approved logo variants, October 9. */ :root .sidebar-logo, :root .login-logo { content: url("logo-mambo-claro.png"); } :root[data-admin-theme="dark"] :is(.sidebar-logo,.login-logo) { filter: brightness(1.85) saturate(.65); } :root[data-admin-theme="light"] :is(.sidebar-mqr,.mqr-logo) { content: url("logo-mqr-claro.png"); filter: none; } :root[data-admin-theme="light"] :is(.sidebar-emuna,.emuna-logo) { content: url("logo-emuna-claro.png"); filter: none; } /* Compact branding and attendance controls in light mode. */ :root .sidebar-logo { width: 104px; max-height: 48px; height: auto; } :root .login-logo { width: 140px; max-height: 64px; height: auto; object-fit: contain; } :root[data-admin-theme="light"] #attendanceView select { background: #fff; color: #202124; border: 1px solid #cfcfcf; border-radius: 6px; color-scheme: light; } :root[data-admin-theme="light"] #attendanceView select:disabled { background: #f2f1ef; color: #707070; opacity: 1; } :root[data-admin-theme="light"] #attendanceView select.is-session-locked { background: #fdf1d5; color: #202124; border-color: #d4bd87; } :root[data-admin-theme="light"] #attendanceView select:focus { border-color: #c49a39; box-shadow: 0 0 0 2px #fdf1d5; } :root[data-admin-theme="light"] #attendanceView select option { background: #fff; color: #202124; } :root[data-admin-theme="dark"] :is(.sidebar-mqr,.mqr-logo) { content: url("logo-mqr-oscuro.png"); filter: none; } .login-development-credit { width: 100%; margin: 16px 0 0; text-align: center; font-size: 10px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; color: #999; } :root[data-admin-theme="light"] .login-development-credit { color: #707070; } .student-plan-breakdown { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; } .student-plan-breakdown > div + div { border-left: 1px solid var(--border); padding-left: 12px; } .student-plan-breakdown strong { display: block; margin: 0 0 5px; } .student-plan-breakdown span { display: block; color: var(--gray); font-size: 11px; line-height: 1.4; letter-spacing: 0; } :root[data-admin-theme="light"] #workshopHistoryDialog .workshop-history-item { background: #fff; color: #202124; border-color: #cfcfcf; } :root[data-admin-theme="light"] #workshopHistoryDialog .workshop-history-item:hover, :root[data-admin-theme="light"] #workshopHistoryDialog .workshop-history-item:focus-visible { background: #fdf1d5; border-color: #c49a39; } :root[data-admin-theme="light"] #workshopHistoryDialog .workshop-history-main small { color: #595959; font-size: 11px; } :root[data-admin-theme="light"] #workshopHistoryDialog .workshop-history-metrics span { background: #f8f7f5; color: #595959; border-color: #cfcfcf; font-size: 10px; } :root[data-admin-theme="light"] #workshopHistoryDialog .workshop-history-metrics b { color: #202124; font-size: 12px; } #attendanceHistorySummary { grid-template-columns: repeat(3,minmax(0,1fr)); } #attendanceHistorySummary small { display: block; margin-top: 6px; color: var(--gray); font-size: 10px; line-height: 1.4; } .students-directory-group-heading { margin: 14px 0 8px; font-size: 12px; color: var(--white); } @media(max-width:600px) { #attendanceHistorySummary { grid-template-columns: 1fr; } } /* Planes: sustituir también el gradiente oscuro de los campos con selector por ID. */ :root[data-admin-theme="light"] :is(#planSelect, #planStartDate) { background: #fff; color: #202124; border: 1px solid var(--border-light); border-radius: 6px; color-scheme: light; } :root[data-admin-theme="light"] :is(#planSelect, #planStartDate):hover { border-color: #b9b9b9; } :root[data-admin-theme="light"] :is(#planSelect, #planStartDate):focus { background: #fff; border-color: #c49a39; box-shadow: 0 0 0 2px rgba(248,212,129,.24); } :root[data-admin-theme="light"] :is(#planSelect, #planStartDate):disabled { background: #f2f1ef; color: #666; opacity: 1; } :root[data-admin-theme="light"] #planSelect option { background: #fff; color: #202124; }