:root {
  --excelcs-navy: #0D1321;
  --excelcs-purple: #6D28D9;
  --excelcs-blue: #2563EB;
  --excelcs-cyan: #06B6D4;
  --excelcs-bg: #f5f7fb;
  --excelcs-border: #e4e8f0;
}

* { box-sizing: border-box; }
body { font-family: Inter, system-ui, sans-serif; background: var(--excelcs-bg); color: var(--excelcs-navy); }
.accounts-topbar { height: 68px; background: var(--excelcs-navy); position: sticky; top: 0; z-index: 1030; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1.05; color: #fff; }
.brand-word { font-size: 1.15rem; font-weight: 800; }
.brand-cs, .login-brand span { background: linear-gradient(90deg, var(--excelcs-purple), var(--excelcs-blue), var(--excelcs-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { margin-top: .2rem; font-size: .72rem; color: rgba(255,255,255,.65); letter-spacing: .08em; text-transform: uppercase; }
.accounts-layout { min-height: calc(100vh - 68px); }
.accounts-sidebar { position: fixed; top: 68px; bottom: 0; width: 238px; background: #fff; border-right: 1px solid var(--excelcs-border); }
.accounts-sidebar .nav-link, .offcanvas .nav-link { color: #445; border-radius: .75rem; padding: .72rem .85rem; }
.accounts-sidebar .nav-link.active { color: #fff; background: linear-gradient(90deg, var(--excelcs-purple), var(--excelcs-blue)); }
.accounts-sidebar .nav-link.disabled { opacity: .45; cursor: default; }
.accounts-main { margin-left: 238px; }
.accounts-card { border: 1px solid var(--excelcs-border) !important; border-radius: 1rem; box-shadow: 0 8px 22px rgba(13,19,33,.04); }
.stat-card { border-top: 3px solid var(--excelcs-blue) !important; }
.eyebrow { color: var(--excelcs-blue); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.btn-excelcs { border: 0; color: #fff; background: linear-gradient(90deg, var(--excelcs-purple), var(--excelcs-blue), var(--excelcs-cyan)); }
.btn-excelcs:hover, .btn-excelcs:focus { color: #fff; filter: brightness(.96); }
.login-page { min-height: 100vh; display: flex; align-items: center; background: radial-gradient(circle at top, #eef2ff, var(--excelcs-bg) 48%); }
.login-brand { font-size: 2rem; font-weight: 800; color: var(--excelcs-navy); }
.form-control:focus { border-color: var(--excelcs-blue); box-shadow: 0 0 0 .25rem rgba(37,99,235,.12); }
@media (max-width: 991.98px) { .accounts-main { margin-left: 0; } }

/* Onboarding */
.offcanvas .nav-link.active { color: #fff; background: linear-gradient(90deg, var(--excelcs-purple), var(--excelcs-blue)); }
.onboarding-table thead th { padding: 1rem 1.25rem; border-bottom-color: var(--excelcs-border); color: #6b7280; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.onboarding-table tbody td { padding: 1rem 1.25rem; border-bottom-color: var(--excelcs-border); }
.onboarding-table tbody tr:last-child td { border-bottom: 0; }
.status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .38rem .68rem; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.status-interest_received { background: #eef2ff; color: #4338ca; }
.status-invite_sent { background: #ecfeff; color: #0e7490; }
.status-form_completed { background: #f5f3ff; color: #6d28d9; }
.status-payment_pending { background: #fff7ed; color: #c2410c; }
.status-complete { background: #ecfdf5; color: #047857; }
.empty-state-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-grid; place-items: center; background: #eef2ff; color: var(--excelcs-blue); font-size: 1.6rem; font-weight: 500; }
.invitation-alert { background: linear-gradient(135deg, #eef2ff, #ecfeff); color: var(--excelcs-navy); }
.timeline { position: relative; }
.timeline-item { display: grid; grid-template-columns: 34px 1fr; gap: .75rem; padding-bottom: 1.5rem; position: relative; }
.timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 28px; bottom: 0; width: 2px; background: var(--excelcs-border); }
.timeline-marker { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f3f4f6; color: #9ca3af; font-weight: 800; z-index: 1; }
.timeline-item.is-done .timeline-marker { background: linear-gradient(135deg, var(--excelcs-purple), var(--excelcs-blue)); color: #fff; }
.timeline-item.is-done:not(:last-child)::before { background: #c7d2fe; }
.detail-list dt { color: #6b7280; font-weight: 600; }
.detail-list dd, .detail-list dt { padding-top: .38rem; padding-bottom: .38rem; margin-bottom: 0; }
@media (max-width: 767.98px) {
  .onboarding-table thead th, .onboarding-table tbody td { padding-left: .9rem; padding-right: .9rem; }
}

/* Parent onboarding form */
.onboarding-public { min-height: 100vh; background: radial-gradient(circle at top, #eef2ff, var(--excelcs-bg) 42%); }
.onboarding-form-container { max-width: 880px; }
.consent-panel .consent-check { padding: .9rem 1rem .9rem 2.5rem; border: 1px solid var(--excelcs-border); border-radius: .85rem; background: #fff; }
.success-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.8rem; font-weight: 800; background: linear-gradient(135deg, var(--excelcs-purple), var(--excelcs-blue), var(--excelcs-cyan)); }
.activation-check { padding: .85rem 0; border-bottom: 1px solid var(--excelcs-border); }
.status-withdrawn { background: #f3f4f6; color: #4b5563; }
.timeline-item.is-withdrawn .timeline-marker { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }


/* Students */
.students-table thead th { padding: 1rem 1.25rem; border-bottom-color: var(--excelcs-border); color: #6b7280; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.students-table tbody td { padding: 1rem 1.25rem; border-bottom-color: var(--excelcs-border); }
.students-table tbody tr:last-child td { border-bottom: 0; }
.student-status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .38rem .68rem; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.student-status-pending_activation { background: #fff7ed; color: #c2410c; }
.student-status-active { background: #ecfdf5; color: #047857; }
.student-status-paused { background: #fefce8; color: #a16207; }
.student-status-left { background: #f3f4f6; color: #4b5563; }
.student-status-unknown { background: #f3f4f6; color: #6b7280; }
.payment-chip-paid{background:#dcfce7;color:#166534}
.payment-chip-pending{background:#fef3c7;color:#92400e}
.payment-chip-failed{background:#fee2e2;color:#991b1b}
.payment-chip-refunded{background:#ede9fe;color:#6d28d9}
.payment-chip-not_enrolled,.payment-chip-not_in_block{background:#eef1f5;color:#52606d}
.student-payment-block{border-width:1px;border-style:solid;border-radius:14px;padding:14px}
.payment-card-paid{background:#f0fdf4;border-color:#86efac}
.payment-card-pending{background:#fffbeb;border-color:#fcd34d}
.payment-card-failed{background:#fef2f2;border-color:#fca5a5}
.payment-card-refunded{background:#f5f3ff;border-color:#c4b5fd}
.payment-card-not_enrolled{background:#f8fafc;border-color:#d1d5db}
@media (max-width: 767.98px) {
  .students-table thead th, .students-table tbody td { padding-left: .9rem; padding-right: .9rem; }
}


/* Classes & Schedules */
.class-card { color: inherit; transition: transform .15s ease, border-color .15s ease; }
.class-card:hover { transform: translateY(-2px); border-color: #c7d2fe !important; }
.payment-session-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .65rem; }
.payment-session-option { margin: 0; padding: .75rem .8rem .75rem 2.2rem; border: 1px solid var(--excelcs-border); border-radius: .75rem; background: #fff; }
.payment-block { padding: 1rem; border: 1px solid var(--excelcs-border); border-radius: .85rem; background: #f8fafc; }

/* Student schedule, attendance and payment tracking */
.lesson-row,.student-enrolment-row,.attendance-row{border:1px solid #e7eaf0;border-radius:14px;padding:14px;background:#fff}.lesson-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.lesson-row-cancelled{background:#fff9ed}.status-chip{display:inline-flex;align-items:center;border-radius:999px;padding:.3rem .65rem;font-size:.78rem;font-weight:700}.status-chip-neutral{background:#eef1f5;color:#52606d}.status-chip-present{background:#e7f8ef;color:#167348}.status-chip-absent{background:#fdecec;color:#a12a2a}.status-chip-refunded{background:#fff2d9;color:#8a5a00}.attendance-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.attendance-options{display:flex;flex-wrap:wrap;gap:8px}.attendance-choice{position:relative}.attendance-choice input{position:absolute;opacity:0;pointer-events:none}.attendance-choice span{display:inline-block;border:1px solid #d8dde6;border-radius:10px;padding:.48rem .75rem;cursor:pointer;background:#fff;font-size:.88rem;font-weight:600}.attendance-choice input:checked+span{border-color:#3157d5;background:#edf2ff;color:#173ba6}.attendance-choice-present input:checked+span{border-color:#61b988;background:#e7f8ef;color:#167348}.attendance-choice-absent input:checked+span{border-color:#de8585;background:#fdecec;color:#a12a2a}.attendance-choice-refunded input:checked+span{border-color:#d6a64c;background:#fff2d9;color:#8a5a00}.student-schedule-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#6c7785}.payment-status-select{width:auto;min-width:135px}@media (max-width:767.98px){.lesson-row,.attendance-row{align-items:flex-start;flex-direction:column}.attendance-options{width:100%}.attendance-choice{flex:1}.attendance-choice span{width:100%;text-align:center}}

/* Payments dashboard */
.payments-table thead th { padding: 1rem 1.1rem; border-bottom-color: var(--excelcs-border); color: #6b7280; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.payments-table tbody td { padding: 1rem 1.1rem; border-bottom-color: var(--excelcs-border); }
.payment-summary-card { border-left: 4px solid transparent !important; }
.payment-summary-pending { background: #fffbeb; border-left-color: #d97706 !important; }
.payment-summary-failed { background: #fef2f2; border-left-color: #dc2626 !important; }
.payment-summary-paid { background: #ecfdf5; border-left-color: #059669 !important; }
.payment-summary-refunded { background: #f5f3ff; border-left-color: #7c3aed !important; }
.payment-badge { display: inline-flex; border-radius: 999px; padding: .35rem .65rem; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.payment-badge-pending { background: #fef3c7; color: #92400e; }
.payment-badge-paid { background: #d1fae5; color: #065f46; }
.payment-badge-failed { background: #fee2e2; color: #991b1b; }
.payment-badge-refunded { background: #ede9fe; color: #5b21b6; }
.payment-badge-unknown { background: #f3f4f6; color: #4b5563; }
.payment-row-failed { background: #fffafa; }
.payment-inline-form .form-select { width: 125px; }


@media (max-width: 767.98px) {
  .payments-table thead th, .payments-table tbody td { padding-left: .85rem; padding-right: .85rem; }
}

/* Payments dashboard: lesson-level breakdown and partial refunds */
.payment-badge-partially-refunded { background: #f3e8ff; color: #6b21a8; }
.payment-badge-not-enrolled { background: #f3f4f6; color: #4b5563; }
.payment-row-partially_refunded { background: #fdfaff; }
.payment-expand-btn { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; }
.payment-lessons-row > td { padding: 0 !important; background: #f8fafc; }
.payment-lesson-breakdown { padding: 1rem 1.25rem 1.25rem 4rem; border-bottom: 1px solid var(--excelcs-border); }
.payment-lesson-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid var(--excelcs-border); border-radius: 12px; background: #fff; padding: .7rem .8rem; }
@media (max-width: 767.98px) { .payment-lesson-breakdown { padding-left: 1rem; } }

/* Attention Required */
.attention-section { border-left: 4px solid var(--excelcs-border) !important; }
.attention-section-danger { border-left-color: #dc2626 !important; }
.attention-section-warning { border-left-color: #d97706 !important; }
.attention-section-primary { border-left-color: var(--excelcs-blue) !important; }
.attention-section-secondary { border-left-color: #6b7280 !important; }
.accounts-sidebar .nav-link .badge, .offcanvas .nav-link .badge { font-size: .68rem; }