/* ==========================================================================
   GOSCHOOL DESIGN SYSTEM & STYLESHEET (VANILLA CSS)
   ========================================================================== */

/* Variables & Themes */
:root {
    /* Fonts */
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Light Mode Colors (Clean, Corporate, Warm Accent) */
    --bg-primary: #f6f8fb;
    --bg-secondary: #ffffff;
    --bg-sidebar: #0f172a; /* Sleek dark sidebar even in light mode */
    --bg-card-hover: #fafbfc;
    
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    
    --accent-color: #4f46e5;      /* Indigo */
    --accent-glow: rgba(79, 70, 229, 0.15);
    --accent-gradient: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
    
    --border-color: #e2e8f0;
    --border-focus: #818cf8;
    
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 8px -1px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 30px -3px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
    
    /* Sidebar specific */
    --sidebar-text: #94a3b8;
    --sidebar-active-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-text: #ffffff;
    --sidebar-border: rgba(255, 255, 255, 0.05);
    
    /* Utilities */
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.1);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.1);
    --info: #06b6d4;
    --info-bg: rgba(6, 182, 212, 0.1);
    
    --border-radius-sm: 8px;
    --border-radius-md: 14px;
    --border-radius-lg: 20px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Aliases used by newer modules */
    --primary: var(--accent-color);
    --card-bg: var(--bg-secondary);
    --hover-bg: var(--bg-card-hover);
    --sidebar-bg: var(--bg-sidebar);
}

[data-theme="dark"] {
    /* Dark Mode Colors (Glassmorphic, Deep Indigo-Gray) */
    --bg-primary: #090d16;
    --bg-secondary: #111827;
    --bg-sidebar: #0b0f19;
    --bg-card-hover: #172033;
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --accent-color: #6366f1;
    --accent-glow: rgba(99, 102, 241, 0.25);
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #60a5fa 100%);
    
    --border-color: rgba(255, 255, 255, 0.07);
    --border-focus: #818cf8;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 4px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    
    --sidebar-text: #64748b;
    --sidebar-active-bg: rgba(99, 102, 241, 0.15);
    --sidebar-active-text: #f8fafc;
    --sidebar-border: rgba(255, 255, 255, 0.03);
}

/* Reset & Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    height: 100vh;
    scroll-behavior: smooth;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* App Container Layout */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ==========================================================================
   SIDEBAR STYLES
   ========================================================================== */
.sidebar {
    width: 270px;
    background-color: var(--bg-sidebar);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
    border-right: 1px solid var(--sidebar-border);
    z-index: 10;
    transition: var(--transition-smooth);
}

.sidebar-brand {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--sidebar-border);
}

.brand-icon {
    font-size: 28px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sidebar-menu {
    flex-grow: 1;
    padding: 20px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 16px 0 6px 12px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
}

.menu-item i {
    font-size: 18px;
    transition: var(--transition-smooth);
}

.menu-item:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.04);
    transform: translateX(4px);
}

.menu-item.active {
    color: var(--sidebar-active-text);
    background-color: var(--sidebar-active-bg);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.menu-item.active i {
    color: var(--accent-color);
    transform: scale(1.1);
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-placeholder {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 13px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.user-role {
    font-size: 11px;
    color: var(--text-muted);
}

.user-version {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.65;
    margin-top: 2px;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   MAIN CONTENT & HEADER STYLES
   ========================================================================== */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.header {
    background-color: var(--bg-secondary);
    padding: 20px 32px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    z-index: 5;
    transition: var(--transition-smooth);
}

.header-left h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.header-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.datetime-widget {
    background-color: var(--bg-primary);
    padding: 8px 16px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
}

.content-body {
    flex-grow: 1;
    padding: 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* SPA views showing/hiding */
.content-view {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.content-view.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 32px;
}

/* ==========================================================================
   BUTTONS & ACTIONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-primary {
    background: var(--accent-gradient);
    color: #ffffff;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--accent-glow);
}

.btn-secondary {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--border-color);
}

.btn-danger {
    background-color: var(--danger-bg);
    color: var(--danger);
}

.btn-danger:hover {
    background-color: var(--danger);
    color: white;
}

.btn-icon-only {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
}

.btn-action {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: var(--transition-smooth);
    background: transparent;
}

.btn-action-edit {
    color: var(--accent-color);
    background-color: var(--accent-glow);
}
.btn-action-edit:hover {
    background-color: var(--accent-color);
    color: white;
}

.btn-action-delete {
    color: var(--danger);
    background-color: var(--danger-bg);
}
.btn-action-delete:hover {
    background-color: var(--danger);
    color: white;
}

.view-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.view-info-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.search-box {
    position: relative;
    width: 320px;
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
}

.search-input {
    width: 100%;
    padding: 10px 14px 10px 42px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 14px;
    transition: var(--transition-smooth);
}

.search-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ==========================================================================
   CARDS & DASHBOARD METRICS
   ========================================================================== */
.card {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    padding: 24px;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.card-link {
    font-size: 13px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.card-link:hover {
    text-decoration: underline;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 12px;
}

.stat-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 24px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-card::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background: var(--accent-glow);
    border-radius: 50%;
    right: -30px;
    top: -30px;
    z-index: 1;
    filter: blur(10px);
}

.stat-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
    z-index: 2;
}

.stat-students .stat-icon-wrapper { background-color: var(--info-bg); color: var(--info); }
.stat-teachers .stat-icon-wrapper { background-color: var(--success-bg); color: var(--success); }
.stat-courses .stat-icon-wrapper { background-color: var(--accent-glow); color: var(--accent-color); }
.stat-classes .stat-icon-wrapper { background-color: var(--warning-bg); color: var(--warning); }

.stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    z-index: 2;
}

.stat-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 4px;
    z-index: 2;
}

.dashboard-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 24px;
}

/* Finance Metrics Grid Detailed */
.finance-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.finance-stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
}

.finance-stat-card .stat-icon-wrapper {
    margin-bottom: 0;
    font-size: 24px;
}

.finance-stat-card .stat-icon-wrapper.income { background-color: var(--success-bg); color: var(--success); }
.finance-stat-card .stat-icon-wrapper.expense { background-color: var(--danger-bg); color: var(--danger); }
.finance-stat-card .stat-icon-wrapper.net { background-color: var(--accent-glow); color: var(--accent-color); }

.finance-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.finance-stat-value {
    font-size: 22px;
    font-weight: 700;
}

/* ==========================================================================
   FINANCE STYLES & METRICS
   ========================================================================== */
.finance-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.finance-metric-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.finance-metric-val {
    font-size: 16px;
    font-weight: 700;
}

.finance-metric.highlight {
    background-color: var(--bg-primary);
    padding: 16px 12px;
    border-radius: var(--border-radius-sm);
    margin-top: 12px;
}

.finance-metric.highlight .finance-metric-val {
    font-size: 20px;
}

.income { color: var(--success); }
.expense { color: var(--danger); }

.divider {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 8px 0;
}

.list-group {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-smooth);
}

.list-group-item:last-child {
    border-bottom: none;
}

.list-group-item:hover {
    background-color: var(--bg-card-hover);
}

.list-item-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.list-item-title {
    font-size: 13px;
    font-weight: 600;
}

.list-item-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
}

.list-item-val {
    font-size: 14px;
    font-weight: 700;
}

.list-group-placeholder {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ==========================================================================
   DATA TABLES
   ========================================================================== */
.overflow-x {
    overflow-x: auto;
}

.p-0 {
    padding: 0 !important;
}

.mt-4 { margin-top: 24px; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

.data-table th {
    background-color: var(--bg-primary);
    padding: 16px 24px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.data-table td {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: var(--transition-smooth);
}

.data-table tbody tr:hover {
    background-color: var(--bg-card-hover);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.table-placeholder {
    text-align: center;
    color: var(--text-muted);
    padding: 40px !important;
    font-size: 14px;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* Status badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-active { background-color: var(--success-bg); color: var(--success); }
.badge-completed { background-color: var(--info-bg); color: var(--info); }
.badge-cancelled { background-color: var(--danger-bg); color: var(--danger); }
.badge-scheduled { background-color: var(--warning-bg); color: var(--warning); }
.badge-present { background-color: var(--success-bg); color: var(--success); }
.badge-absent { background-color: var(--danger-bg); color: var(--danger); }
.badge-late { background-color: var(--warning-bg); color: var(--warning); }
.badge-category { background-color: var(--accent-glow); color: var(--accent-color); }

/* ==========================================================================
   BILINGUAL (ZH/EN) DISPLAY STYLES
   ========================================================================== */
.bilingual-cell { display: flex; flex-direction: column; gap: 2px; }
.bilingual-cell .lang-en { font-weight: 600; line-height: 1.3; }
.bilingual-cell .lang-zh { display: none; font-size: 0.78rem; color: var(--text-muted); line-height: 1.3; font-weight: 400; }
.bilingual-cell.zh-active .lang-en { display: none; }
.bilingual-cell.zh-active .lang-zh { display: block; font-size: 0.9rem; color: var(--text-primary); font-weight: 600; }

/* Language toggle button */
.lang-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    letter-spacing: 0.05em;
}
.lang-toggle-btn:hover, .lang-toggle-btn.active {
    background: var(--accent-color);
    color: #fff;
}
.lang-toggle-btn .toggle-label { pointer-events: none; }

/* Side-by-side form fields for ZH/EN pairs */
.form-bilingual-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 640px) { .form-bilingual-row { grid-template-columns: 1fr; } }

.modal-body.lang-en .form-bilingual-row { grid-template-columns: 1fr; }
.modal-body.lang-en .form-bilingual-row .form-group:last-child { display: none; }

.form-lang-toggle { display: flex; gap: 4px; margin-right: 8px; }
.lang-pill { padding: 3px 12px; border-radius: 20px; border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); font-size: 0.75rem; cursor: pointer; font-weight: 600; transition: all 0.15s; }
.lang-pill.active { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }


/* ==========================================================================
   MODAL DIALOG STYLES
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 16px;          /* keeps a visible gap so the modal reads as a window */
    overflow-y: auto;           /* scroll the overlay if a modal is taller than the gap allows */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-card {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    width: 100%;
    max-width: min(70vw, 1200px);   /* ~70% on desktop, capped for ultrawide; mobile overridden below */
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-overlay.active .modal-card {
    transform: scale(1);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 700;
}

.btn-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.btn-close:hover {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-form {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.modal-form.active {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.required {
    color: var(--danger);
}

.form-control {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 10px 14px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition-smooth);
}

.form-control:focus {
    outline: none;
    background-color: var(--bg-secondary);
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    resize: vertical;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.toast {
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--accent-color);
    border-radius: var(--border-radius-sm);
    padding: 16px 20px;
    box-shadow: var(--shadow-md);
    min-width: 280px;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    transform: translateX(120%);
    animation: slideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: var(--transition-smooth);
}

.toast.toast-success { border-left-color: var(--success); }
.toast.toast-error { border-left-color: var(--danger); }
.toast.toast-info { border-left-color: var(--info); }
.toast.toast-warning { border-left-color: var(--warning); }

.toast.removing {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideIn {
    to { transform: translateX(0); }
}

@keyframes slideOut {
    to { transform: translateX(120%); opacity: 0; }
}

/* ==========================================================================
   SALES ORDERS & PARENT CREDITS CUSTOM STYLES
   ========================================================================== */
.modal-lg {
    max-width: 800px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.small-table th, .small-table td {
    padding: 10px 14px;
}

.small-text {
    font-size: 12px;
}

.font-semibold {
    font-weight: 600;
}

.text-muted {
    color: var(--text-muted);
}

.bg-light {
    background-color: var(--bg-primary);
}

.border-radius {
    border-radius: var(--border-radius-sm);
}

.border-top {
    border-top: 1px solid var(--border-color);
}

.border-bottom {
    border-bottom: 1px solid var(--border-color);
}

.pb-2 { padding-bottom: 8px; }
.pt-3 { padding-top: 12px; }
.mb-2 { margin-bottom: 8px; }
.mt-1 { margin-top: 4px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 24px; }
.p-2 { padding: 8px; }

/* Status Badges for Orders */
.status-paid {
    background-color: var(--success-bg);
    color: var(--success);
}

.status-pending {
    background-color: var(--warning-bg);
    color: var(--warning);
}

.status-refunded {
    background-color: var(--info-bg);
    color: var(--info);
}

.status-cancelled {
    background-color: var(--danger-bg);
    color: var(--danger);
}
.status-partial-refund {
    background-color: #fff3cd;
    color: #92400e;
}

/* Order Details Grid */
.order-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    background-color: var(--bg-primary);
    padding: 20px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

.label-muted {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 4px;
}

.value-highlight {
    font-size: 16px;
    font-weight: 700;
}

/* Parent Credit Chips */
.credit-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    font-weight: 700;
    font-size: 13px;
    border: 1px solid transparent;
}

.credit-chip.positive {
    background-color: var(--success-bg);
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.2);
}

.credit-chip.zero {
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.credit-chip-btn {
    cursor: pointer;
    font-size: 12px;
    color: var(--accent-color);
    background-color: var(--accent-glow);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.credit-chip-btn:hover {
    background-color: var(--accent-color);
    color: white;
}

/* ── Attendance Roster ────────────────────────────────────────────────────── */
.attendance-picker-card { padding: 16px 20px; margin-bottom: 16px; }
.attendance-picker-row { display: flex; gap: 16px; align-items: flex-end; }
.attendance-picker-row .form-group { margin-bottom: 0; }

.att-status-btns { display: flex; gap: 4px; }
.att-status-btn { padding: 4px 12px; border-radius: 20px; border: 1.5px solid var(--border-color); background: transparent; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.att-status-btn.present.active  { background: #16a34a; color: #fff; border-color: #16a34a; }
.att-status-btn.late.active     { background: #d97706; color: #fff; border-color: #d97706; }
.att-status-btn.absent.active   { background: #dc2626; color: #fff; border-color: #dc2626; }
.att-status-btn:not(.active):hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.att-notes-input { border: none; border-bottom: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font-size: 0.82rem; padding: 2px 4px; width: 100%; outline: none; }
.att-notes-input:focus { border-bottom-color: var(--accent-primary); }

/* Note preset chips (modal form) */
.note-preset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.note-preset-chip { padding: 3px 10px; border-radius: 20px; border: 1px solid var(--accent-color); color: var(--accent-color); background: transparent; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.note-preset-chip:hover { background: var(--accent-glow); }

/* Roster row note preset picker */
.roster-note-wrap { display: flex; align-items: center; gap: 4px; }
.roster-preset-wrap { position: relative; flex-shrink: 0; }
.roster-preset-btn { background: transparent; border: 1px solid var(--border-color); border-radius: 6px; padding: 2px 6px; cursor: pointer; color: var(--text-muted); font-size: 0.75rem; transition: all 0.15s; }
.roster-preset-btn:hover { border-color: var(--accent-color); color: var(--accent-color); }
.roster-preset-dropdown { display: none; position: absolute; right: 0; top: 100%; z-index: 200; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); min-width: 180px; padding: 4px 0; }
.roster-preset-wrap:hover .roster-preset-dropdown,
.roster-preset-btn:focus + .roster-preset-dropdown { display: block; }
.roster-preset-item { padding: 7px 14px; font-size: 0.82rem; cursor: pointer; color: var(--text-primary); white-space: nowrap; }
.roster-preset-item:hover { background: var(--bg-hover); color: var(--accent-color); }

/* ── Form section divider ─────────────────────────────────────────────────── */
.form-section-divider { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-top: 1px solid var(--border-color); margin: 16px 0 12px; padding-top: 12px; }

/* ── Printable Cards ──────────────────────────────────────────────────────── */
.printable-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-card); font-family: 'Outfit', sans-serif; }
.card-header-band { display: flex; justify-content: space-between; align-items: center; background: var(--accent-primary); color: #fff; padding: 10px 16px; }
.pickup-band { background: #7c3aed; }
.card-school-name { font-size: 0.85rem; font-weight: 700; }
.card-type-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; opacity: 0.85; text-transform: uppercase; background: rgba(255,255,255,0.15); border-radius: 4px; padding: 2px 8px; }
.card-body-layout { display: flex; justify-content: space-between; align-items: center; padding: 16px; gap: 12px; }
.card-info { flex: 1; }
.card-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 2px; }
.card-name { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.card-pickup-name { font-size: 1rem; font-weight: 700; color: #7c3aed; margin-bottom: 4px; }
.card-meta { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }
.card-qr { flex-shrink: 0; width: 90px; height: 90px; }
.card-qr canvas, .card-qr img { width: 90px !important; height: 90px !important; border-radius: 6px; }
.card-footer-band { background: var(--bg-secondary); color: var(--text-muted); font-size: 0.68rem; text-align: center; padding: 6px; font-weight: 500; }

@media print {
    body > *:not(.modal-overlay.active) { display: none !important; }
    .modal-overlay.active { position: static !important; background: none !important; }
    .modal-card { box-shadow: none !important; border: none !important; max-width: 100% !important; }
    .modal-header { display: none !important; }
    .printable-card { border: none !important; }
}

/* ── Parent Credit Modal ──────────────────────────────────────────────────── */
.credit-tabs { display: flex; border-bottom: 1px solid var(--border-color); }
.credit-tab { flex: 1; padding: 12px 8px; background: none; border: none; border-bottom: 2px solid transparent; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.credit-tab.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.credit-tab:hover:not(.active) { color: var(--text-primary); }
.credit-panel { display: block; }

/* Sortable column headers */
.sort-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sort-th:hover { color: var(--primary); }
.sort-icon {
    margin-left: 4px;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Status filter pill bar */
.status-filter-bar {
    display: flex;
    gap: 6px;
    padding: 10px 16px 4px;
    flex-wrap: wrap;
}
.status-pill {
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.status-pill:hover { border-color: var(--primary); color: var(--primary); }
.status-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.status-pill.pill-active { border-color: var(--success); color: var(--success); }
.status-pill.pill-active.active { background: var(--success); color: #fff; }
.status-pill.pill-completed { border-color: var(--text-muted); color: var(--text-muted); }
.status-pill.pill-completed.active { background: var(--text-muted); color: #fff; }
.status-pill.pill-cancelled { border-color: var(--danger); color: var(--danger); }
.status-pill.pill-cancelled.active { background: var(--danger); color: #fff; }
.status-pill.pill-income { border-color: var(--success); color: var(--success); }
.status-pill.pill-income.active { background: var(--success); color: #fff; }
.status-pill.pill-expense { border-color: var(--danger); color: var(--danger); }
.status-pill.pill-expense.active { background: var(--danger); color: #fff; }
.status-pill.pill-paid { border-color: var(--success); color: var(--success); }
.status-pill.pill-paid.active { background: var(--success); color: #fff; }
.status-pill.pill-pending { border-color: var(--warning, #d97706); color: var(--warning, #d97706); }
.status-pill.pill-pending.active { background: var(--warning, #d97706); color: #fff; }
.status-pill.pill-refunded { border-color: var(--primary); color: var(--primary); }
.status-pill.pill-refunded.active { background: var(--primary); color: #fff; }
.status-pill.pill-scheduled { border-color: var(--primary); color: var(--primary); }
.status-pill.pill-scheduled.active { background: var(--primary); color: #fff; }
.credit-panel .form-group { margin-bottom: 14px; }

/* ── View Toolbar (new views) ─────────────────────────────────────────────── */
.view-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}
.table-container {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    overflow-x: auto;
    box-shadow: var(--shadow-md);
}
.view-toolbar .search-box {
    width: auto;
    min-width: 260px;
    padding: 10px 14px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 14px;
}
.view-toolbar .search-box:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Timetable ────────────────────────────────────────────────────────────── */
.timetable-grid { padding: 8px 0; }
.timetable-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.timetable-day { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.timetable-day-header { background: var(--bg-sidebar); color: var(--sidebar-text); font-weight: 700; font-size: 0.78rem; text-align: center; padding: 10px 4px; letter-spacing: 0.5px; text-transform: uppercase; }
.timetable-day-sessions { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.timetable-no-session { text-align: center; color: var(--text-muted); font-size: 1.2rem; padding: 20px 0; }
.timetable-session-card { border-radius: 8px; padding: 10px 12px; border-left: 3px solid var(--accent-color); background: var(--bg-primary); }
.timetable-session-card.session-completed { border-left-color: var(--success); opacity: 0.8; }
.timetable-session-card.session-cancelled { border-left-color: var(--danger); opacity: 0.6; }
.ts-time { font-size: 0.78rem; font-weight: 700; color: var(--accent-color); margin-bottom: 2px; }
.ts-course { font-weight: 600; font-size: 0.88rem; margin-bottom: 2px; }
.ts-meta { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px; }
.timetable-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 1rem; }
.toolbar-week-label { font-weight: 600; padding: 0 12px; font-size: 0.95rem; }

/* ── Roster rows ──────────────────────────────────────────────────────────── */
.roster-row select { padding: 4px 8px; font-size: 0.85rem; }

/* ── Badge additions ──────────────────────────────────────────────────────── */
.badge-pending { background: var(--warning-bg); color: var(--warning); }
.badge-info { background: #e7f5ff; color: #1971c2; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-secondary { background: var(--border-color); color: var(--text-secondary); }

/* Pending evaluation rows — subtle amber tint + accent bar */
.data-table tr.row-pending td { background: var(--warning-bg); }
.data-table tr.row-pending td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

@media (max-width: 900px) {
    .timetable-days { grid-template-columns: repeat(3, 1fr); }
}

/* Reports */
.section-heading { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.section-heading i { color: var(--primary); }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.report-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; cursor: pointer; transition: all 0.2s; }
.report-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.report-card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 12px; }
.report-card-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.report-card-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }

.report-header { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 20px; }
.report-header h2 { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.report-actions { display: flex; gap: 8px; }
.report-filters { display: flex; gap: 16px; align-items: end; margin-bottom: 16px; padding: 14px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; flex-wrap: wrap; }
.report-filters label { display: flex; flex-direction: column; font-size: 0.78rem; color: var(--text-muted); gap: 4px; }
.form-control.inline { width: auto; min-width: 140px; }

.report-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.summary-tile { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; border-left: 4px solid var(--primary); }
.summary-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.summary-value { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }

.report-empty { padding: 40px; text-align: center; color: var(--text-muted); background: var(--card-bg); border-radius: 10px; }
.report-table { margin-top: 0; }
.roster-block { margin-bottom: 24px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.roster-block-header { padding: 12px 16px; background: var(--hover-bg); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.roster-block-header small { color: var(--text-muted); font-size: 0.78rem; }

/* Custom Report Builder */
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; padding: 10px; background: var(--hover-bg); border-radius: 8px; max-height: 200px; overflow-y: auto; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; padding: 2px; }
.cr-filter-row { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.form-row { display: flex; gap: 12px; }

/* ── Timetable Holiday Enhancements ─────────────────────────────── */
.timetable-holiday-strip {
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border: 1px solid #fbbf24; border-radius: 8px;
    padding: 8px 14px; font-size: 0.82rem; color: #92400e;
    margin-bottom: 12px; display: flex; align-items: center;
    flex-wrap: wrap; gap: 4px 10px;
}
[data-theme="dark"] .timetable-holiday-strip {
    background: linear-gradient(135deg, #451a03, #422006);
    border-color: #b45309; color: #fcd34d;
}
.timetable-holiday-strip i { color: #f59e0b; margin-right: 6px; }
.hol-date { opacity: 0.7; font-size: 0.78rem; }

.timetable-day-holiday { background: rgba(251,191,36,0.06) !important; border-color: #fbbf24 !important; }
[data-theme="dark"] .timetable-day-holiday { background: rgba(180,83,9,0.12) !important; border-color: #b45309 !important; }

.timetable-day-header { display: flex; justify-content: space-between; align-items: baseline; }
.timetable-day-date { font-size: 0.8rem; opacity: 0.65; }

.timetable-holiday-tag {
    background: #fef9c3; color: #92400e; font-size: 0.72rem;
    padding: 3px 8px; border-radius: 4px; margin: 2px 0 6px;
    display: flex; align-items: center; gap: 4px;
}
[data-theme="dark"] .timetable-holiday-tag { background: #451a03; color: #fcd34d; }

/* ── HK Holidays Panel ──────────────────────────────────────────── */
.hol-month-block { margin-bottom: 20px; }
.hol-month-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-color); margin-bottom: 8px; }
.hol-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-color); font-size: 0.87rem; }
.hol-day-num { min-width: 44px; font-weight: 700; color: var(--text-primary); display: flex; align-items: baseline; gap: 4px; }
.hol-day-num small { font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
.hol-name { flex: 1; color: var(--text-primary); }
.hol-name-zh { color: var(--text-muted); font-size: 0.82rem; }

/* ── Student Avatar Thumbnails (table) ──────────────────────────── */
.student-avatar-thumb {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--border-color); flex-shrink: 0;
}
.student-avatar-initials {
    background: var(--accent-color); color: #fff; font-size: 0.8rem;
    font-weight: 700; display: inline-flex; align-items: center;
    justify-content: center;
}

/* ── Student Profile Modal ─────────────────────────────────────── */
.sp-header {
    display: flex; gap: 20px; align-items: flex-start;
    padding-bottom: 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px;
}
.sp-avatar-wrap { position: relative; flex-shrink: 0; }
.sp-avatar {
    width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--accent-color);
}
.sp-avatar-placeholder {
    width: 90px; height: 90px; border-radius: 50%;
    background: var(--accent-color); color: #fff; font-size: 2.2rem;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--accent-color);
}
.sp-upload-btn {
    position: absolute; bottom: 0; right: 0;
    background: var(--accent-color); color: #fff; border-radius: 50%;
    width: 28px; height: 28px; display: flex; align-items: center;
    justify-content: center; font-size: 0.75rem; cursor: pointer;
    border: 2px solid var(--bg-primary); transition: opacity .2s;
}
.sp-upload-btn:hover { opacity: 0.85; }
.sp-meta { flex: 1; }
.sp-name { font-size: 1.35rem; font-weight: 700; margin: 0 0 8px; color: var(--text-primary); }
.sp-details { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; color: var(--text-muted); }

.sp-section-title {
    font-size: 0.9rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--accent-color);
    margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}

.sp-empty { color: var(--text-muted); text-align: center; padding: 30px 0; }

.sp-enr-card {
    border: 1px solid var(--border-color); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 12px; background: var(--bg-secondary);
    transition: border-color .2s;
}
.sp-enr-card:hover { border-color: var(--accent-color); }
.sp-enr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.sp-enr-course { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.sp-enr-meta {
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;
}
.sp-enr-meta span { display: flex; align-items: center; gap: 4px; }
.sp-feedback {
    font-size: 0.85rem; color: var(--text-secondary);
    background: var(--bg-card-hover); border-left: 3px solid var(--accent-color);
    padding: 8px 12px; border-radius: 0 6px 6px 0; margin-top: 8px;
    font-style: italic;
}
.sp-eval-date { font-size: 0.78rem; color: var(--text-muted); margin-left: 4px; }

/* Grade badges */
.sp-grade {
    font-size: 0.85rem; font-weight: 700; padding: 2px 10px;
    border-radius: 20px; min-width: 32px; text-align: center;
}
.sp-grade-a, .sp-grade-a  { background: #d1fae5; color: #065f46; }
.sp-grade-b               { background: #dbeafe; color: #1e40af; }
.sp-grade-c               { background: #fef9c3; color: #854d0e; }
.sp-grade-d               { background: #ffedd5; color: #9a3412; }
.sp-grade-f               { background: #fee2e2; color: #991b1b; }
.sp-grade-na              { background: var(--bg-card-hover); color: var(--text-muted); }
[data-theme="dark"] .sp-grade-a  { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .sp-grade-b  { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .sp-grade-c  { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .sp-grade-d  { background: #431407; color: #fdba74; }
[data-theme="dark"] .sp-grade-f  { background: #450a0a; color: #fca5a5; }

/* Form avatar upload (teachers / parents) */
.form-avatar-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.2rem;
}
.avatar-actions {
    display: flex;
    gap: 6px;
}
.btn-avatar-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.78rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-avatar-action:hover { border-color: var(--primary); color: var(--primary); }
.btn-avatar-remove { border-color: var(--danger-bg); color: var(--danger); }
.btn-avatar-remove:hover { background: var(--danger-bg); }
.form-avatar-circle {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
}
.form-avatar-circle:hover { border-color: var(--primary); }
.form-avatar-circle #teacher-avatar-placeholder,
.form-avatar-circle #parent-avatar-placeholder,
.form-avatar-circle #student-avatar-placeholder {
    font-size: 2rem;
    opacity: 0.35;
    pointer-events: none;
}
.form-avatar-cam {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--primary);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #fff;
    pointer-events: none;
}

/* Searchable select wrapper */
.ss-wrap { position: relative; }
.ss-input {
    width: 100%;
    padding: 5px 10px 5px 30px;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.156a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") no-repeat 9px center;
    background-color: var(--bg-input);
    color: var(--text-primary);
    box-sizing: border-box;
    margin-bottom: 4px;
    display: block;
}
.ss-input:focus { outline: none; border-color: var(--primary); }

/* ==========================================================================
   RESPONSIVE — desktop + tablet + mobile
   ========================================================================== */
/* Header gets a menu button on small screens; hidden on desktop. */
.header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header-titles { min-width: 0; }
.hamburger { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 860px) {
    /* Off-canvas sidebar */
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
        transform: translateX(-100%);
        z-index: 60; box-shadow: 6px 0 32px rgba(0,0,0,0.32);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay {
        display: block; position: fixed; inset: 0;
        background: rgba(15,18,32,0.5); z-index: 50;
        opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
    }
    .sidebar-overlay.open { opacity: 1; pointer-events: auto; }

    /* Menu button */
    .hamburger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; flex-shrink: 0; cursor: pointer;
        border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
        background: var(--bg-secondary); color: var(--text-primary); font-size: 22px;
    }
    .hamburger:hover { border-color: var(--primary); color: var(--primary); }

    /* Header + content spacing */
    .header { padding: 12px 16px; }
    .header-left h1 { font-size: 19px; }
    .header-subtitle { display: none; }
    .datetime-widget { display: none; }
    .header-right { gap: 8px; }
    .content-view.active { padding: 16px; }

    /* Toolbars & search stack */
    .view-actions { flex-wrap: wrap; gap: 10px; }
    .search-box { width: 100%; }

    /* Two-column form rows collapse */
    .form-group-row, .form-bilingual-row { grid-template-columns: 1fr; }

    /* Modals fill the screen with a margin */
    .modal-card { max-width: none; width: calc(100% - 24px); max-height: 88vh; }

    /* Timetable: one column, comfortable to scroll */
    .timetable-days { grid-template-columns: 1fr !important; }
}

/* Very small phones */
@media (max-width: 420px) {
    .header-left h1 { font-size: 17px; }
    .content-view.active { padding: 12px; }
    .btn { padding: 9px 14px; }
}

/* Interface language toggle (header) */
.lang-toggle { display:inline-flex; border:1px solid var(--border-color); border-radius:var(--border-radius-sm); overflow:hidden; }
.lang-btn { border:0; background:var(--bg-secondary); color:var(--text-secondary); font-family:var(--font-primary); font-size:13px; font-weight:600; padding:7px 11px; cursor:pointer; line-height:1; }
.lang-btn.active { background:var(--accent-color); color:#fff; }
.lang-btn:not(.active):hover { color:var(--text-primary); background:var(--hover-bg); }

/* Row action buttons — keep edit + delete on one line; action/code cells don't wrap */
.row-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.row-actions form { display: inline-flex; margin: 0; }
.data-table td.text-right { white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* A column that is exactly as wide as its content: the free width goes to the columns without it
   (Classes: Course and Date). A column is always as wide as its widest cell, so an unusually long
   class ref is allowed to wrap instead of pushing every other column into its minimum width. */
.data-table th.col-fit { width: 1%; white-space: nowrap; }

/* ── Multi-date picker under "Class dates" (ui.js gsDates) ───────────────────── */
.gs-dates .dp { margin-top: 8px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-primary); padding: 10px 12px; }
.dp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dp-title { flex: 1; text-align: center; font-size: .9rem; }
.dp-count { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-dow { text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); padding: 2px 0 4px; }
.dp-day { height: 36px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-primary);
          font-family: var(--font-primary); font-size: .88rem; cursor: pointer; transition: var(--transition-smooth); }
.dp-day:hover { border-color: var(--accent-color); }
.dp-day.today { font-weight: 800; color: var(--accent-color); }
.dp-day.on { background: var(--accent-color); color: #fff; font-weight: 700; }
.dp-day.on:hover { opacity: .88; }

/* ── Start / end time picker under "Class time" (ui.js gsTime) ─────────────────── */
.gs-time .tp { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.tp-field { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.tp-field input[type=time] { width: 150px; }
.tp-arrow { color: var(--text-muted); padding-bottom: 12px; }
.tp-dur { font-weight: 700; color: var(--accent-color); padding-bottom: 11px; }

/* ── Attendance: a day of classes as tap cards, then a one-tap roster ──────────── */
.att-days { padding: 14px 16px; margin-bottom: 14px; }
.att-days-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.att-date-form { display: flex; align-items: center; gap: 8px; }
.att-date-form input[type=date] { width: auto; min-width: 170px; }
.att-teacher-form { margin-left: auto; }
.att-teacher-form select { width: auto; max-width: 260px; }
.att-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.att-day { display: flex; flex-direction: column; align-items: center; padding: 8px 4px 6px; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color);
           color: var(--text-secondary); text-decoration: none; line-height: 1.25; transition: var(--transition-smooth); }
.att-day:hover { border-color: var(--accent-color); color: var(--text-primary); }
.att-day .dow { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; }
.att-day .dom { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.att-day .n { font-size: .7rem; font-weight: 700; margin-top: 2px; min-width: 20px; text-align: center; border-radius: 10px; padding: 0 6px; background: var(--accent-glow); color: var(--accent-color); }
.att-day.none .n { background: transparent; color: var(--text-muted); }
.att-day.today .dow { color: var(--accent-color); }
.att-day.on { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.att-day.on .dom, .att-day.on .dow { color: #fff; }
.att-day.on .n { background: rgba(255,255,255,.22); color: #fff; }
.att-h2 { font-size: 1.05rem; font-weight: 700; margin: 4px 0 12px; display: flex; align-items: baseline; gap: 10px; }
.att-h2 small { font-weight: 500; color: var(--text-muted); }
.att-count { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.att-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color);
            border-left: 5px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); color: var(--text-primary); text-decoration: none; transition: var(--transition-smooth); }
.att-card:hover { transform: translateY(-1px); border-color: var(--accent-color); }
.att-card.done { border-left-color: var(--success); }
.att-card.part { border-left-color: var(--warning); }
.att-card.todo { border-left-color: var(--accent-color); }
.att-card.off { border-left-color: var(--text-muted); opacity: .65; }
.att-time { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; min-width: 62px; }
.att-body { flex: 1; min-width: 0; }
.att-course { font-weight: 700; line-height: 1.3; }
.att-zh { display: block; font-weight: 500; color: var(--text-muted); }
.att-meta { font-size: .78rem; color: var(--text-muted); margin-top: 3px; }
.att-meta code { font-weight: 700; color: var(--text-secondary); }
.att-state { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .78rem; color: var(--text-muted); }
.att-go { color: var(--text-muted); }
.att-empty { text-align: center; color: var(--text-muted); padding: 40px 20px; }
.att-empty i { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.att-empty p { margin: 0 auto; max-width: 520px; line-height: 1.6; }
.att-jump { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
/* roster */
.att-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; }
.att-head-text { flex: 1; min-width: 200px; }
.att-progress { font-size: .95rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.att-progress strong { font-size: 1.3rem; color: var(--text-primary); }
.att-roster .att-empty { padding: 32px; }
.att-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
.att-row:last-child { border-bottom: none; }
.att-row.marked { background: var(--bg-card-hover); }
.att-name { flex: 1; min-width: 160px; font-weight: 700; font-size: 1rem; }
.att-saved { font-weight: 600; color: var(--success); font-size: .75rem; margin-left: 6px; }
.att-saved.err { color: var(--danger); }
.att-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; }
.att-opt { position: relative; }
.att-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.att-opt span { display: flex; align-items: center; justify-content: center; min-width: 84px; min-height: 44px; padding: 0 14px; font-weight: 700; font-size: .9rem;
                color: var(--text-secondary); background: var(--bg-primary); border-right: 1px solid var(--border-color); cursor: pointer; user-select: none; transition: var(--transition-smooth); }
.att-opt:last-child span { border-right: none; }
.att-opt:hover span { color: var(--text-primary); }
.att-opt.present input:checked + span { background: var(--success); color: #fff; }
.att-opt.late    input:checked + span { background: var(--warning); color: #fff; }
.att-opt.absent  input:checked + span { background: var(--danger);  color: #fff; }
.att-opt input:focus-visible + span { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.att-note-btn { width: 44px; height: 44px; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-muted); cursor: pointer; font-size: 1rem; }
.att-note-btn.has { color: var(--accent-color); border-color: var(--accent-color); }
.att-note { flex-basis: 100%; }
.att-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.att-auto { font-size: .82rem; color: var(--text-muted); }
.att-next { margin-left: auto; }
@media (max-width: 640px) {
    .att-time { min-width: 52px; font-size: 1.15rem; }
    .att-name { flex: 0 0 100%; min-width: 0; }          /* name on its own line; the buttons + note icon share the next */
    .att-seg { flex: 1 1 auto; display: flex; }
    .att-part { flex: 1 1 auto; }                         /* each part (office / teacher) spans the row on a phone */
    .att-opt { flex: 1; }
    .att-opt { flex: 1; }
    .att-opt span { min-width: 0; width: 100%; padding: 0 6px; white-space: nowrap; }
    .att-head .btn-primary { width: 100%; justify-content: center; }
    .att-next { margin-left: 0; width: 100%; justify-content: center; }
    .att-teacher-form { margin-left: 0; width: 100%; }
    .att-teacher-form select { width: 100%; max-width: none; }
}
.data-table code.cls-ref { font-weight: 700; white-space: nowrap; }
.data-table code.cls-ref-long { display: inline-block; min-width: 120px; max-width: 200px; white-space: normal; overflow-wrap: break-word; }

/* ── Per-page Help panel (slide-in from the right) ── */
.help-overlay { position: fixed; inset: 0; background: rgba(15,18,32,.4); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.help-overlay.open { opacity: 1; pointer-events: auto; }
.help-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw; background: var(--bg-secondary); border-left: 1px solid var(--border-color); box-shadow: -10px 0 40px rgba(0,0,0,.22); z-index: 70; transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; }
.help-panel.open { transform: translateX(0); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border-color); }
.help-head h3 { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 9px; color: var(--text-primary); }
.help-head h3 i { color: var(--primary); }
.help-close { background: none; border: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0 4px; }
.help-close:hover { color: var(--text-primary); }
.help-body { padding: 20px; overflow-y: auto; }
.help-intro { color: var(--text-secondary); margin-bottom: 18px; line-height: 1.6; }
.help-steps-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); font-weight: 700; margin-bottom: 10px; }
.help-steps { margin: 0; padding: 0; list-style: none; counter-reset: hs; }
.help-steps li { counter-increment: hs; position: relative; padding: 10px 0 10px 36px; border-bottom: 1px solid var(--border-color); font-size: .9rem; line-height: 1.5; color: var(--text-primary); }
.help-steps li:last-child { border-bottom: none; }
.help-steps li::before { content: counter(hs); position: absolute; left: 0; top: 9px; width: 24px; height: 24px; border-radius: 7px; background: var(--accent-glow); color: var(--primary); font-size: .78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ── Rich-text field ── */
.gs-rte { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; background: var(--bg-secondary); }
.gs-rte-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: var(--bg-primary); border-bottom: 1px solid var(--border-color); }
.gs-rte-toolbar button { width: 30px; height: 28px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); border-radius: 6px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.gs-rte-toolbar button:hover { background: var(--hover-bg); color: var(--text-primary); border-color: var(--border-color); }
.gs-rte-sep { width: 1px; background: var(--border-color); margin: 2px 4px; }
.gs-rte-editable { min-height: 96px; max-height: 260px; overflow-y: auto; padding: 10px 12px; font-size: 14px; line-height: 1.6; color: var(--text-primary); outline: none; }
.gs-rte-editable:focus { box-shadow: inset 0 0 0 2px var(--accent-glow); }
.gs-rte-editable ul, .gs-rte-editable ol { padding-left: 1.4em; margin: .3em 0; }
.gs-rte-editable a { color: var(--primary); }

/* ==========================================================================
   LOGIN PAGE (standalone, no sidebar)
   ========================================================================== */
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1100px 560px at 82% -12%, var(--accent-glow), transparent 60%),
        var(--bg-primary);
    padding: 24px;
}
.login-wrap { width: 100%; max-width: 400px; }
.login-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px 32px 26px;
}
.login-lang { position: absolute; top: 16px; right: 16px; display: flex; gap: 4px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-brand i { font-size: 2rem; color: var(--accent-color); }
.login-brand h1 { font-size: 1.55rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.login-tagline { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 24px; }
.login-form { display: flex; flex-direction: column; gap: 15px; }
.login-form .form-control { padding: 12px 14px; }
.login-submit { width: 100%; justify-content: center; padding: 12px; font-size: 0.95rem; margin-top: 4px; }
.login-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--border-radius-sm);
    padding: 10px 14px; font-size: 0.85rem; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.login-foot { text-align: center; color: var(--text-muted); font-size: 0.72rem; margin-top: 20px; }

/* ==========================================================================
   ADMIN — permission matrix (groups.php)
   ========================================================================== */
.perm-cats { display: flex; flex-direction: column; gap: 16px; }
.perm-cat-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px;
}
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.perm-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); cursor: pointer;
    font-size: 13px; background: var(--bg-primary); user-select: none;
    transition: var(--transition-smooth);
}
.perm-item:hover { border-color: var(--accent-color); }
.perm-item input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent-color); flex-shrink: 0; }
.perm-item i { color: var(--text-secondary); }
.perm-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sidebar sign-out button */
.sidebar-logout {
    margin-left: auto;
    color: var(--sidebar-text);
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; transition: var(--transition-smooth); text-decoration: none;
}
.sidebar-logout:hover { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); }

/* ==========================================================================
   SYNC DIRECTION CHIPS (Store Sync)
   ========================================================================== */
.sync-dir {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.sync-dir-in  { background: var(--success-bg); color: var(--success); }
.sync-dir-out { background: var(--warning-bg); color: var(--warning, #d97706); }

/* ==========================================================================
   INPUT SURFACES — editable fields are WHITE; only read-only fields are gray,
   so a field's colour tells you whether you can type in it.
   ========================================================================== */
:root {
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-border-hover: #94a3b8;
    --input-bg-readonly: #eef2f6;
    --bg-input: var(--input-bg);   /* the searchable-select filter box used this, but it was never defined */
    --placeholder: #a3aebd;        /* example text — clearly lighter than typed text (--text-primary) */
}
[data-theme="dark"] {
    --input-bg: #0b1220;
    --input-border: rgba(255, 255, 255, 0.14);
    --input-border-hover: rgba(255, 255, 255, 0.26);
    --input-bg-readonly: #161f2e;
    --bg-input: var(--input-bg);
    --placeholder: #5a6a82;
}
/* Placeholders are EXAMPLES, never values: light + italic (and worded "e.g. …" via eg() in lib/form.php),
   so they can't be mistaken for what was typed or saved. */
input::placeholder, textarea::placeholder, .form-control::placeholder, .search-input::placeholder, .ss-input::placeholder {
    color: var(--placeholder);
    font-style: italic;
    font-weight: 400;
    opacity: 1;   /* Firefox dims placeholders by default */
}
/* A value that overrides an automatic one (e.g. a class option mapping) */
.form-control.is-override { border-color: var(--accent-color); font-weight: 600; }
.field-hint { display: block; font-size: .74rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.field-hint code { font-size: .72rem; color: var(--text-secondary); background: var(--bg-primary); padding: 0 4px; border-radius: 4px; }
.field-hint .warn { color: var(--danger); }
.field-hint button.link { border: 0; background: none; padding: 0; color: var(--accent-color); font-size: inherit; font-weight: 600; cursor: pointer; }
.form-control { background-color: var(--input-bg); border-color: var(--input-border); }
.form-control:hover:not(:disabled):not([readonly]) { border-color: var(--input-border-hover); }
.form-control:focus { background-color: var(--input-bg); border-color: var(--border-focus); }
.form-control:disabled, .form-control[readonly] {
    background-color: var(--input-bg-readonly);
    color: var(--text-secondary);
    cursor: not-allowed;
}
.search-input { background-color: var(--input-bg); border-color: var(--input-border); }
.ss-input { border-color: var(--input-border); }
.gs-rte { border-color: var(--input-border); }
.gs-rte-editable { background: var(--input-bg); }

/* Modal header subtitle (e.g. the generated class ref on the class form) */
.modal-title-wrap { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.modal-subtitle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .78rem; color: var(--text-muted); }
.modal-subtitle code {
    font-size: .92rem; font-weight: 700; color: var(--text-primary);
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 6px; padding: 2px 9px; letter-spacing: .02em;
}

/* ── Course Options: list tabs (Course Types / Mediums of Instruction) ── */
.opt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.opt-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-color);
           background: var(--bg-secondary); color: var(--text-secondary); font-size: .85rem; font-weight: 600; text-decoration: none; transition: all .15s; }
.opt-tab:hover { color: var(--text-primary); border-color: var(--accent-color); }
.opt-tab.active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.opt-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
                 background: var(--border-color); color: var(--text-secondary); font-size: .72rem; font-weight: 700; }
.opt-tab.active .opt-tab-count { background: rgba(255,255,255,.25); color: #fff; }
/* Small note under a form field */
.field-note { font-size: .78rem; color: var(--text-muted); margin: 6px 0 14px; line-height: 1.45; }
.field-note a { color: var(--accent-color); text-decoration: none; font-weight: 600; }

/* The HTML `hidden` attribute must win over any component `display` rule (.btn, .badge…),
   otherwise element.hidden = true does nothing for those elements. */
[hidden] { display: none !important; }

/* ── WooCommerce sync: live progress panel + recent runs ── */
.wc-progress { border-left: 4px solid var(--accent-color); margin-bottom: 18px; }
.wc-progress.done { border-left-color: var(--success); }
.wc-progress.error { border-left-color: var(--danger); }
.wc-progress.cancelled { border-left-color: var(--text-muted); }
.wcp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wcp-bar-wrap { height: 10px; background: var(--border-color); border-radius: 999px; overflow: hidden; margin: 14px 0 8px; }
.wcp-bar { height: 100%; width: 0; background: var(--accent-color); border-radius: 999px; transition: width .35s ease; }
.wc-progress.done .wcp-bar { background: var(--success); }
.wc-progress.error .wcp-bar { background: var(--danger); }
.wc-progress.cancelled .wcp-bar { background: var(--text-muted); }
.wcp-meta { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--text-secondary); }
.wcp-log { max-height: 180px; overflow: auto; font-size: .76rem; line-height: 1.55; background: var(--bg-primary); border: 1px solid var(--border-color);
           border-radius: var(--border-radius-sm); padding: 10px 12px; margin: 10px 0 0; white-space: pre-wrap; color: var(--text-secondary); }
.wcp-log:empty { display: none; }
.wcp-spin { display: inline-block; animation: wcp-rot 1s linear infinite; }
@keyframes wcp-rot { to { transform: rotate(360deg); } }
.wc-runs { font-size: .8rem; width: 100%; border-collapse: collapse; margin-top: 8px; }
.wc-runs th, .wc-runs td { padding: 6px 6px; border-top: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.wc-runs th { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); border-top: 0; }
.wc-runs a { color: var(--accent-color); font-weight: 600; text-decoration: none; }

/* ── Bulk update: row tick boxes, selection bar, "What to update" list ── */
.data-table .bulk-col { width: 36px; padding-right: 0; text-align: center; }
.data-table .bulk-col input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-color); }
.data-table tr.bulk-picked td { background: var(--accent-glow); }
.bulk-bar { position: sticky; top: 8px; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
            margin: 0 0 12px; padding: 10px 14px; border-radius: var(--border-radius-md); background: var(--bg-secondary);
            border: 1px solid var(--accent-color); box-shadow: 0 6px 20px rgba(15, 23, 42, .12); font-size: .88rem; }
.bulk-bar > i { color: var(--accent-color); font-size: 1.1rem; }
.bulk-bar > span { margin-right: auto; }
.bulk-field { display: grid; grid-template-columns: minmax(180px, 38%) 1fr; gap: 12px; align-items: center; padding: 8px 10px;
              border-radius: var(--border-radius-sm); margin-bottom: 4px; opacity: .72; transition: opacity .15s, background .15s; }
.bulk-field.on { opacity: 1; background: var(--accent-glow); }
.bulk-tick { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; font-weight: 600; cursor: pointer; margin: 0; }
.bulk-tick input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent-color); flex-shrink: 0; }
@media (max-width: 640px) { .bulk-field { grid-template-columns: 1fr; gap: 6px; } }

/* ── Dense lists (Classes, Courses): many columns — tighter cells, so a laptop screen shows the whole row
   without a horizontal scroll. The wrapper keeps overflow-x: auto for phones. ───────────────────────── */
.data-table.table-dense { font-size: 13px; }
.data-table.table-dense .badge { font-size: .64rem; padding: 3px 7px; }
.data-table.table-dense th, .data-table.table-dense td { padding: 11px 12px; }
.data-table.table-dense th { font-size: 11px; letter-spacing: .4px; }
.data-table.table-dense th:first-child, .data-table.table-dense td:first-child { padding-left: 16px; }
.data-table.table-dense th:last-child, .data-table.table-dense td:last-child { padding-right: 16px; }
.data-table.table-dense .bulk-col { width: 30px; padding-right: 0; }
.data-table.table-dense .btn-action { width: 30px; height: 30px; }
/* "09:30 - 11:00" over "(1.5 hrs)": the time column stays narrow */
.data-table td.cell-time small { display: block; line-height: 1.35; white-space: nowrap; }
.data-table td.cell-time small + small { color: var(--text-muted); }

/* The number of paid seats waiting for confirmation, on the Enrollments menu item */
.menu-badge { margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--warning); color: #fff;
              font-size: .7rem; font-weight: 800; text-align: center; line-height: 1.4; }

/* Enrollments → Awaiting confirmation (paid seats from the store or a GoSchool order) */
.enr-queue { border-left: 4px solid var(--warning); margin-bottom: 18px; }
.enr-queue .card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.enr-queue .enr-pick { min-width: 220px; max-width: 340px; font-size: .82rem; padding: 6px 8px; margin-bottom: 4px; }
.src-badge { display: inline-block; vertical-align: middle; margin-left: 4px; font-size: .62rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
             padding: 2px 6px; border-radius: 5px; background: var(--hover-bg); color: var(--text-secondary); }
.src-badge.wc { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.fin-order { color: var(--accent-color); text-decoration: none; margin-left: 4px; }
/* Order / class statuses that had no pill style (badge_class() maps the status text to .badge-<status>) */
.badge-paid, .badge-confirmed { background: var(--success-bg); color: var(--success); }
.badge-refunded, .badge-partial-refund { background: var(--danger-bg); color: var(--danger); }
.badge-tentative { background: var(--warning-bg); color: var(--warning); }
/* Attendance in two parts: the office's Arrived / Absent (+ the reason) beside the teacher's Present / Late */
.att-part { display: flex; flex-direction: column; gap: 4px; }
.att-part-label { font-size: .64rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.att-opt.arrived input:checked + span { background: var(--info, #1971c2); color: #fff; }
.att-reason input { min-width: 220px; font-size: .84rem; padding: 6px 10px; }
.att-row.absent { background: var(--danger-bg); }
.att-office-tag { display: inline-block; margin-left: 8px; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--hover-bg); color: var(--text-secondary); }
.att-office-tag.absent { background: var(--danger-bg); color: var(--danger); }
.att-cancelled { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 14px; border-left: 4px solid var(--danger); }
.att-cancelled > i { font-size: 1.6rem; color: var(--danger); }
.att-cancelled > div { flex: 1; min-width: 220px; }
.att-cancelled small { display: block; color: var(--text-muted); }
.att-locked .att-roster { opacity: .55; }
/* Profiles: an order drilled down — child → class → the lessons with that child's attendance */
.sp-order { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); margin-bottom: 12px; overflow: hidden; }
.sp-order-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--bg-primary); font-size: .9rem; }
.sp-order-head a { text-decoration: none; }
.sp-order-item { padding: 10px 14px; border-top: 1px solid var(--border-color); }
.sp-order-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.sp-order-line a { text-decoration: none; color: inherit; }
.sp-order-lessons { margin-top: 6px; }
.sp-lessons summary { cursor: pointer; font-size: .82rem; color: var(--accent-color); font-weight: 600; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.sp-lessons summary::-webkit-details-marker { display: none; }
.sp-lessons summary::before { content: '▸'; font-size: .8em; }
.sp-lessons[open] summary::before { content: '▾'; }
.sp-lessons-table { margin-top: 6px; font-size: .84rem; }
.sp-lessons-table th, .sp-lessons-table td { padding: 7px 10px; }
/* A name that opens its record (lib/form.php lnk_*) — quiet until hovered */
.lnk { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--text-muted); }
.lnk:hover { color: var(--accent-color); border-bottom-color: var(--accent-color); }

/* Header: back to the last page */
.gs-back { flex-shrink: 0; }
@media (max-width: 640px) { .gs-back { display: none; } }

/* Sales order form: the lessons of the chosen class (a partial seat = some unticked) */
.ol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; margin-bottom: 4px; }
.ol-item { display: flex; gap: 6px; align-items: center; font-size: .82rem; cursor: pointer; }
.ol-item.off { opacity: .5; text-decoration: line-through; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   PHONES (≤ 640px): readable, no sideways scrolling.
   Tables become cards: thead hidden, each row a block, each cell a "HEADING  value" line (ui.js
   writes the heading into data-label). Dense desktop sizes are undone, inline min-widths too.
   ══════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .data-table.stacked { font-size: 14px; }
    .data-table.stacked > thead { display: none; }
    .data-table.stacked, .data-table.stacked > tbody, .data-table.stacked > tbody > tr, .data-table.stacked > tbody > tr > td,
    .data-table.stacked > tfoot, .data-table.stacked > tfoot > tr, .data-table.stacked > tfoot > tr > td { display: block; width: 100%; box-sizing: border-box; }
    .data-table.stacked > tbody > tr { padding: 10px 14px 12px; border-bottom: 1px solid var(--border-color); }
    .data-table.stacked > tbody > tr:last-child { border-bottom: none; }
    /* The heading sits in a left column (absolute), the cell's own content flows normally to its right — so a
       cell made of several lines (name + 中文 + teacher…) keeps its lines instead of spreading sideways. */
    .data-table.stacked > tbody > tr > td { position: relative; padding: 4px 0 4px 34% !important; border: 0; min-width: 0 !important; max-width: none !important; white-space: normal; min-height: 22px; }
    .data-table.stacked > tbody > tr > td::before { content: attr(data-label); position: absolute; left: 0; top: 7px; width: 30%; font-size: .66rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }
    .data-table.stacked > tbody > tr > td[data-label=""], .data-table.stacked > tbody > tr > td.bulk-col { padding-left: 0 !important; }
    .data-table.stacked > tbody > tr > td[data-label=""]::before, .data-table.stacked > tbody > tr > td.bulk-col::before { display: none; }
    .data-table.stacked > tbody > tr > td.text-right { text-align: left; }
    .data-table.stacked > tbody > tr > td br { display: initial; }
    .data-table.stacked > tbody > tr > td .row-actions { justify-content: flex-start; }
    .data-table.stacked > tbody > tr > td.bulk-col { display: none; }      /* bulk selection is a desktop job */
    .data-table.stacked > tbody > tr > td.table-placeholder { display: block; text-align: center; }
    .data-table.stacked > tbody > tr > td > * { min-width: 0; }
    .data-table.stacked > tfoot > tr > td { padding: 6px 0 !important; border: 0; text-align: left; }
    .data-table.stacked code.cls-ref-long { max-width: none; }
    .data-table.stacked .badge { font-size: .7rem; }
    .data-table.stacked td.cell-time small { display: inline; white-space: normal; }
    .data-table.stacked td.cell-time small + small { margin-left: 4px; }
    .data-table.table-dense.stacked th, .data-table.table-dense.stacked td { font-size: 14px; }
    .data-table.table-dense.stacked .badge { font-size: .7rem; padding: 3px 8px; }
    .data-table.stacked > tbody > tr > td small { font-size: .82rem; }

    /* Toolbars: every filter / action takes a full or half row */
    .view-actions { flex-direction: column; align-items: stretch; }
    .view-actions > div { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    .view-actions .btn { flex: 1 1 auto; justify-content: center; }
    .view-actions form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    .cf-bar > select.form-control, .cf-bar > .search-box, .act-filters > select.form-control, .act-filters > input.form-control { flex: 1 1 45% !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
    .cf-bar > .search-box { flex-basis: 100% !important; }
    .cf-bar > .btn, .act-filters > .btn { flex: 1 1 45%; justify-content: center; }
    .form-control { font-size: 16px; }                  /* iOS zooms into fields smaller than 16px */
    .form-control, input, select, textarea, .card, .form-group, .ss-wrap { max-width: 100%; min-width: 0; box-sizing: border-box; }
    .ss-wrap select { width: 100%; }
    .dashboard-row > *, .stats-grid > *, .cs-grid > *, .att-grid > * { min-width: 0; }   /* grid items default to min-width:auto, which lets long text push them past the screen */
    .header-left h1 { font-size: 16px; }
    .header-right { flex-wrap: nowrap; }
    .field-hint, .field-note, p { overflow-wrap: anywhere; }

    /* Dashboard: two compact stat tiles per row, finance stacked */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .stat-card { padding: 14px 14px 12px; min-height: 0; }
    .stat-card .stat-icon-wrapper { width: 34px; height: 34px; font-size: 1rem; margin-bottom: 8px; }
    .stat-card .stat-value { font-size: 1.5rem; }
    .stat-card .stat-label { font-size: .74rem; }
    .dashboard-row { grid-template-columns: 1fr !important; }

    /* Forms and modals: full-screen sheet, one column, buttons on one row */
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-card { width: 100% !important; max-width: none !important; max-height: 100vh; border-radius: 16px 16px 0 0; }
    .modal-body { padding: 14px 16px; }
    .modal-header { padding: 14px 16px; }
    .modal-footer { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
    .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
    .modal-footer .gs-back { flex-basis: 100%; }
    .form-group-row, .form-bilingual-row { grid-template-columns: 1fr !important; }
    .order-item-row { grid-template-columns: 1fr !important; }
    .order-item-row input[name="item_price[]"] { width: 100% !important; }

    /* Profiles */
    .sp-header { flex-direction: column; align-items: flex-start; }
    .sp-order-head, .sp-order-line { gap: 6px 10px; }
    .sp-lessons-table.stacked > tbody > tr > td::before { flex-basis: 26%; }

    /* Enrollments queue, pending credits, cancel-a-day: the row's form controls stack */
    .enr-queue .card-header { flex-direction: column; align-items: stretch; }
    .enr-queue .enr-pick { max-width: none; width: 100%; }

    /* Class Sales / attendance cards / report tiles already stack; headings shrink a little */
    .cs-summary { grid-template-columns: repeat(2, 1fr); }
    .report-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .header-right { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 640px) {
    .header-right { flex-wrap: nowrap !important; }
    .wc-runs { display: block; overflow-x: auto; }           /* the sync-runs table scrolls inside its card, the page does not */
    .wc-runs th, .wc-runs td { white-space: nowrap; }
}

/* Course form: its classes */
.form-section-divider { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.course-classes th, .course-classes td { padding: 8px 10px; font-size: .86rem; }

/* Attendance roster: the child's Chinese name, sex and age under the name */
.att-zh-name { font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.att-who { display: block; font-size: .78rem; font-weight: 500; color: var(--text-muted); margin-top: 2px; }

/* The record id after a student's or parent's name — two people can share a name */
.rid { font-size: .72rem; font-weight: 600; color: var(--text-muted); font-family: var(--font-mono, monospace); letter-spacing: 0; }
.sp-name .rid { font-size: .9rem; vertical-align: middle; }

/* A person's Chinese name after the English one */
.zh-name { font-weight: 500; color: var(--text-muted); margin-left: 2px; }

/* ── Finance Reports (finance_reports.php): tabs, filter bar, dense report tables ── */
.fr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.fr-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card, var(--bg-secondary)); color: var(--text-secondary); font-size: .84rem; font-weight: 600; text-decoration: none; }
.fr-tab:hover { color: var(--text-primary); border-color: var(--accent-color); }
.fr-tab.active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.fr-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; padding: 16px 18px; margin-bottom: 16px; align-items: end; }
.fr-filters .form-group { margin: 0; min-width: 0; } .fr-filters .form-control, .fr-filters .ss-wrap { min-width: 0; width: 100%; max-width: 100%; }
.fr-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; grid-column: 1 / -1; }
.fr-hint { grid-column: 1 / -1; margin: 0; }
.fr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; } .fr-period { color: var(--text-muted); margin-left: auto; }
.fr-table { font-size: .78rem; } .fr-table th, .fr-table td { padding: 7px 9px !important; white-space: nowrap; }
.fr-table th { font-size: .68rem; } .fr-table tfoot td { background: var(--bg-primary); border-top: 2px solid var(--border-color); }
.fr-zero { color: var(--text-muted); opacity: .6; } .fr-h3 { font-size: .95rem; margin: 14px 18px 6px; display: flex; gap: 8px; align-items: center; }
@media (max-width: 640px) { .fr-filters { grid-template-columns: 1fr 1fr; } }