/* Villa KRAVE — Schwimm dich happy
   Premium Design System */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    /* Primary purple scale */
    --purple-50:  #f5f1ff;
    --purple-100: #ebe4ff;
    --purple-200: #d5c8ff;
    --purple-300: #b49dff;
    --purple-400: #8f6bfa;
    --purple-500: #673de6;
    --purple-600: #5025d1;
    --purple-700: #401baa;
    --purple-800: #2f1c6a;
    --purple-900: #1a0e3d;

    /* Neutrals — warm to complement purple */
    --gray-25:  #fcfcfd;
    --gray-50:  #f8f8fb;
    --gray-100: #f1f1f5;
    --gray-200: #e4e4ec;
    --gray-300: #c8c8d6;
    --gray-400: #9d9daf;
    --gray-500: #6b6b80;
    --gray-600: #4e4e63;
    --gray-700: #33334a;
    --gray-800: #1e1e2d;
    --gray-900: #0f0f1a;

    /* Semantic */
    --success: #00b090;
    --success-light: #e6f9f5;
    --warning: #f5a623;
    --warning-light: #fff8eb;
    --danger: #e5384f;
    --danger-light: #fef2f3;
    --info: #357df9;
    --info-light: #eff5ff;

    /* Surfaces */
    --bg-primary: #ffffff;
    --bg-secondary: var(--gray-50);
    --border-default: var(--gray-200);
    --border-subtle: var(--gray-100);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15,15,26,0.04);
    --shadow-sm: 0 1px 3px rgba(15,15,26,0.06), 0 1px 2px rgba(15,15,26,0.04);
    --shadow-md: 0 4px 8px -2px rgba(15,15,26,0.06), 0 2px 4px -2px rgba(15,15,26,0.04);
    --shadow-lg: 0 12px 24px -4px rgba(15,15,26,0.08), 0 4px 8px -2px rgba(15,15,26,0.03);
    --shadow-purple: 0 4px 14px rgba(103,61,230,0.15);

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Fonts */
    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-800);
    background: var(--bg-secondary);
    display: flex;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--gray-900);
}

h1 { font-size: 1.875rem; letter-spacing: -0.025em; }
h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
h3 { font-size: 1.125rem; letter-spacing: -0.015em; }
h4 { font-size: 0.9375rem; }

a { color: var(--purple-500); text-decoration: none; transition: color 150ms var(--ease-in-out); }
a:hover { color: var(--purple-600); }

/* ── Sidebar ──────────────────────────────── */

.sidebar {
    width: 260px;
    background: #ffffff;
    color: var(--gray-700);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    z-index: 100;
    border-right: 1px solid var(--gray-200);
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}

.sidebar-brand {
    padding: 0 12px;
    margin-bottom: 36px;
}

.sidebar-brand h1 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}

.sidebar-brand .slogan {
    font-size: 0.8rem;
    color: var(--purple-500);
    font-style: italic;
    margin-top: 2px;
    font-weight: 400;
}

.sidebar-section {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    padding: 0 12px;
    margin: 24px 0 8px;
}

.sidebar-nav {
    flex: 1;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--gray-600);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 150ms var(--ease-in-out);
    position: relative;
}

.sidebar-nav a:hover {
    background: var(--purple-50);
    color: var(--purple-700);
}

.sidebar-nav a.active {
    background: rgba(103,61,230,0.08);
    color: var(--purple-700);
    font-weight: 600;
}

.sidebar-nav a.active::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--purple-500);
    border-radius: var(--radius-full);
}

.sidebar-nav a .nav-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform 150ms var(--ease-out);
}

.sidebar-nav a:hover .nav-icon,
.sidebar-nav a.active .nav-icon {
    opacity: 1;
    color: var(--purple-500);
}

.sidebar-nav a:hover .nav-icon {
    transform: translateX(2px);
}

.sidebar-footer {
    padding: 16px 12px;
    border-top: 1px solid var(--gray-200);
    margin-top: 16px;
}

.sidebar-footer a {
    font-size: 0.75rem;
    color: var(--gray-400);
    text-decoration: none;
    transition: color 150ms;
}

.sidebar-footer a:hover { color: var(--gray-300); }

/* ── Main ─────────────────────────────────── */

.main {
    margin-left: 260px;
    flex: 1;
    padding: 32px 40px;
    max-width: 1400px;
}

/* ── Page header ──────────────────────────── */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}

.page-header h2 {
    margin-bottom: 2px;
}

.page-header .subtitle {
    color: var(--gray-500);
    font-size: 0.9375rem;
}

.breadcrumb {
    font-size: 0.8125rem;
    color: var(--gray-400);
    margin-bottom: 4px;
}

.breadcrumb a {
    color: var(--gray-500);
    font-weight: 500;
}

.breadcrumb a:hover { color: var(--purple-500); }

/* ── Cards ────────────────────────────────── */

.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-xs);
    margin-bottom: 20px;
    transition: box-shadow 200ms var(--ease-in-out);
}

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

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

/* ── Stats ────────────────────────────────── */

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

.stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-xs);
    transition: all 200ms var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-default);
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin-bottom: 16px;
}

.stat-icon.purple { background: var(--purple-100); color: var(--purple-600); }
.stat-icon.blue { background: var(--info-light); color: var(--info); }
.stat-icon.green { background: var(--success-light); color: var(--success); }
.stat-icon.amber { background: var(--warning-light); color: var(--warning); }
.stat-icon.pink { background: var(--danger-light); color: var(--danger); }

.stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Featured stat card */
.stat-card.featured {
    background: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-700) 100%);
    border: none;
}

.stat-card.featured .stat-label { color: rgba(255,255,255,0.7); }
.stat-card.featured .stat-value { color: #fff; }
.stat-card.featured .stat-icon { background: rgba(255,255,255,0.15); color: #fff; }

/* ── Tables ───────────────────────────────── */

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

thead th {
    background: var(--gray-50);
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    text-align: left;
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

tbody td {
    padding: 14px 16px;
    color: var(--gray-700);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

tbody tr {
    transition: background 150ms var(--ease-in-out);
}

tbody tr:hover {
    background: var(--gray-25);
}

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

/* User cell with avatar */
.cell-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--purple-100);
    color: var(--purple-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    font-family: var(--font-heading);
}

.avatar.sm { width: 28px; height: 28px; font-size: 0.6875rem; }
.avatar.lg { width: 44px; height: 44px; font-size: 0.9375rem; }

.cell-name {
    font-weight: 600;
    color: var(--gray-900);
}

.cell-sub {
    font-size: 0.8125rem;
    color: var(--gray-400);
}

/* ── Badges ───────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    white-space: nowrap;
    line-height: 1.5;
}

.badge-level {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-draft { background: var(--gray-100); color: var(--gray-600); }
.badge-sent { background: var(--info-light); color: #1a5cd6; }
.badge-paid { background: var(--success-light); color: #007a63; }
.badge-overdue { background: var(--danger-light); color: #b91c33; }
.badge-cancelled { background: var(--gray-100); color: var(--gray-500); }
.badge-active { background: var(--success-light); color: #007a63; }
.badge-trial { background: var(--purple-100); color: var(--purple-700); }
.badge-present     { background: var(--success-light); color: #007a63; }
.badge-rescheduled { background: #dbeafe; color: #1d4ed8; }
.badge-absent      { background: var(--danger-light); color: #b91c33; }
.badge-excused     { background: var(--warning-light); color: #8c5e00; }

/* ── Buttons ──────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 150ms var(--ease-in-out);
    white-space: nowrap;
    text-decoration: none;
}

.btn-primary {
    background: var(--purple-500);
    color: #fff;
    box-shadow: 0 1px 2px rgba(103,61,230,0.2);
}

.btn-primary:hover {
    background: var(--purple-600);
    color: #fff;
    box-shadow: var(--shadow-purple);
    transform: translateY(-1px);
}

.btn-primary:active {
    background: var(--purple-700);
    transform: translateY(0);
    box-shadow: none;
}

.btn-secondary {
    background: var(--bg-primary);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xs);
}

.btn-danger {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}
.btn-danger:hover {
    background: #dc2626;
    color: white;
}

.btn-secondary:hover {
    background: var(--gray-50);
    color: var(--gray-800);
    border-color: var(--gray-300);
}

.btn-success {
    background: var(--success);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,176,144,0.2);
}

.btn-success:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #fff;
}

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

.btn-danger:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--gray-600);
    padding: 10px 12px;
}

.btn-ghost:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.btn-sm { padding: 6px 14px; font-size: 0.8125rem; }
.input-sm { padding: 4px 8px; font-size: 0.8125rem; border: 1px solid var(--gray-200); border-radius: 6px; background: var(--white); color: var(--gray-900); cursor: pointer; }
.btn-lg { padding: 12px 28px; font-size: 1rem; }
.btn-icon { padding: 8px 10px; }

.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Forms ────────────────────────────────── */

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

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--gray-800);
    background: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    transition: all 150ms var(--ease-in-out);
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--gray-400);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: var(--gray-300);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--purple-500);
    box-shadow: 0 0 0 3px rgba(103,61,230,0.1);
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.form-section {
    margin-bottom: 28px;
}

.form-section h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h3 .section-icon {
    color: var(--purple-400);
}

.form-hint {
    font-size: 0.8125rem;
    color: var(--gray-400);
    margin-top: 4px;
}

/* Checkbox / toggle */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--purple-500);
    cursor: pointer;
}

.form-check label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 500;
}

/* ── Progress tracking ────────────────────── */

.progress-list {
    list-style: none;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 150ms;
}

.progress-item:last-child { border-bottom: none; }
.progress-item:hover { background: var(--gray-25); }

.progress-status {
    width: 120px;
    flex-shrink: 0;
}

.progress-status select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    background: white;
    cursor: pointer;
    transition: all 150ms;
}

.progress-status select.status-completed {
    border-color: var(--success);
    background: var(--success-light);
}

.progress-status select.status-in_progress {
    border-color: var(--info);
    background: var(--info-light);
}

.progress-skill-name {
    font-weight: 500;
    flex: 1;
    color: var(--gray-700);
}

.progress-bar-wrap {
    background: var(--gray-100);
    border-radius: var(--radius-full);
    height: 8px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--purple-400), var(--purple-500));
    transition: width 400ms var(--ease-out);
}

.progress-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.progress-pct {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--purple-500);
    letter-spacing: -0.02em;
}

/* ── Schedule ─────────────────────────────── */

.schedule-day {
    margin-bottom: 28px;
}

.schedule-day-header {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-800);
    padding: 8px 0;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--purple-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-day-header .day-de {
    color: var(--gray-400);
    font-weight: 500;
    font-size: 0.875rem;
}

.schedule-entry {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    box-shadow: var(--shadow-xs);
    transition: all 200ms var(--ease-in-out);
}

.schedule-entry:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--border-default);
}

.schedule-time {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--purple-600);
    min-width: 56px;
    font-variant-numeric: tabular-nums;
}

.schedule-details { flex: 1; }

.schedule-client {
    font-weight: 600;
    color: var(--gray-800);
}

.schedule-client a {
    color: var(--gray-800);
}

.schedule-client a:hover {
    color: var(--purple-500);
}

.schedule-meta {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin-top: 2px;
}

/* ── Level cards ──────────────────────────── */

.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.level-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 200ms var(--ease-in-out);
    text-decoration: none;
    color: inherit;
    display: block;
    box-shadow: var(--shadow-xs);
}

.level-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-default);
}

.level-card-header {
    padding: 18px 20px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.level-card-header h3 {
    font-size: 1.0625rem;
    margin-bottom: 2px;
    color: #fff;
}

.level-card-header .level-de {
    font-size: 0.8125rem;
    opacity: 0.85;
}

.level-card-body {
    padding: 16px 20px;
}

.level-card-body .level-phase {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--gray-400);
    margin-bottom: 4px;
}

.level-card-body .level-age {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.level-card-body .level-students {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 10px;
    color: var(--gray-700);
}

/* ── Filters ──────────────────────────────── */

.filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.filters select,
.filters input[type="text"],
.filters input[type="search"] {
    padding: 8px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    background: var(--bg-primary);
    transition: all 150ms;
    outline: none;
}

.filters select:focus,
.filters input:focus {
    border-color: var(--purple-500);
    box-shadow: 0 0 0 3px rgba(103,61,230,0.1);
}

/* ── Flash messages ───────────────────────── */

.flash {
    padding: 12px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeInDown 300ms var(--ease-out);
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.flash-success { background: var(--success-light); color: #007a63; border: 1px solid #b8e8dd; }
.flash-error { background: var(--danger-light); color: #b91c33; border: 1px solid #fecaca; }
.flash-info { background: var(--info-light); color: #1a5cd6; border: 1px solid #bfdbfe; }
.flash-warning { background: var(--warning-light); color: #8c5e00; border: 1px solid #fde68a; }

/* ── Invoice print ────────────────────────── */

.invoice-print {
    max-width: 800px;
    margin: 0 auto;
    padding: 48px;
    background: white;
    font-family: var(--font-body);
}

.invoice-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 44px;
}

.invoice-brand h1 {
    color: var(--purple-600);
    font-size: 1.5rem;
    font-family: var(--font-heading);
}

.invoice-brand .slogan {
    color: var(--gray-500);
    font-style: italic;
    font-size: 0.8125rem;
}

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

.invoice-info h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--purple-600);
    letter-spacing: -0.02em;
}

.invoice-addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 32px;
}

.invoice-addresses h4 {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    font-weight: 600;
    margin-bottom: 6px;
}

.invoice-table {
    width: 100%;
    margin-bottom: 24px;
}

.invoice-table th {
    background: var(--purple-50);
    color: var(--purple-700);
    padding: 10px 14px;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.invoice-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.invoice-totals {
    display: flex;
    justify-content: flex-end;
}

.invoice-totals table { width: 280px; }
.invoice-totals td { padding: 6px 14px; }

.invoice-totals .total-row {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--purple-600);
    border-top: 2px solid var(--purple-500);
}

/* ── Attendance ───────────────────────────── */

.attendance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.attendance-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px;
    text-align: center;
    transition: all 150ms;
}

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

.attendance-card .name {
    font-weight: 600;
    font-size: 0.8125rem;
    margin-bottom: 8px;
}

.attendance-btns {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.attendance-btns button {
    padding: 4px 8px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: white;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms;
}

.attendance-btns button.active-present {
    background: var(--success-light);
    border-color: var(--success);
    color: #007a63;
}

.attendance-btns button.active-absent {
    background: var(--danger-light);
    border-color: var(--danger);
    color: #b91c33;
}

.attendance-btns button.active-excused {
    background: var(--warning-light);
    border-color: var(--warning);
    color: #8c5e00;
}

.attendance-btns button.active-no_show {
    background: #fef2f3;
    border-color: #e5384f;
    color: #b91c33;
}

.attendance-btns button.active-cancelled {
    background: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--gray-600);
}

.badge-no_show    { background: #fff7ed; color: #c2410c; }

/* ── Empty state ──────────────────────────── */

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--gray-400);
}

.empty-state .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.3;
}

.empty-state p {
    margin-bottom: 16px;
    font-size: 0.9375rem;
}

/* ── Content grid layouts ─────────────────── */

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.content-grid-3 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

/* ── Mobile top bar ───────────────────────── */

.mobile-topbar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: #ffffff;
    border-bottom: 1px solid var(--gray-200);
    align-items: center;
    padding: 0 16px;
    z-index: 200;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gray-700);
    border-radius: 2px;
    transition: all 200ms var(--ease-in-out);
}

.mobile-logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}
.mobile-logo span {
    color: var(--purple-500);
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 400;
    margin-left: 6px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
    backdrop-filter: blur(2px);
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 1024px) {
    .content-grid,
    .content-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Show mobile top bar */
    .mobile-topbar { display: flex; }

    /* Sidebar becomes a slide-in drawer */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 280ms var(--ease-out);
        z-index: 100;
        width: 280px;
        padding-top: 24px;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.active { display: block; }

    /* Keep all sidebar sections visible in drawer */
    .sidebar-section { display: block; }
    .sidebar-footer { display: block; }

    /* Main content — top padding for topbar */
    .main {
        margin-left: 0;
        padding: 72px 16px 32px;
    }

    body { flex-direction: column; }

    /* Layouts */
    .form-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .content-grid, .content-grid-3 { grid-template-columns: 1fr; }

    /* Larger touch targets */
    .sidebar-nav a { padding: 12px 12px; min-height: 44px; }
    .btn { min-height: 42px; font-size: 0.875rem; }
    .btn-sm { min-height: 36px; }

    /* Tables — horizontal scroll */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 520px; }

    /* Card padding reduction on mobile */
    .card { padding: 16px; }
    .card-header { flex-wrap: wrap; gap: 8px; }

    /* Page header buttons wrap */
    .page-header .btn-group, .page-header > div:last-child { flex-wrap: wrap; gap: 8px; }

    /* Stats on mobile */
    .stats-grid { gap: 12px; }
    .stat-card { padding: 16px; }
}

@media print {
    .sidebar, .btn, .flash, .no-print, .filters { display: none !important; }
    .main { margin-left: 0; padding: 0; }
    body { background: white; }
}

/* ── Animations ───────────────────────────── */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeInUp 400ms var(--ease-out) both;
}

.animate-stagger > * { animation: fadeInUp 400ms var(--ease-out) both; }
.animate-stagger > *:nth-child(1) { animation-delay: 0ms; }
.animate-stagger > *:nth-child(2) { animation-delay: 50ms; }
.animate-stagger > *:nth-child(3) { animation-delay: 60ms; }
.animate-stagger > *:nth-child(4) { animation-delay: 90ms; }
.animate-stagger > *:nth-child(5) { animation-delay: 120ms; }

/* ── Utilities ────────────────────────────── */

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--gray-500); }
.text-primary { color: var(--purple-500); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.gap-1 { gap: 8px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.hidden { display: none; }
.font-heading { font-family: var(--font-heading); }

/* ── Weekly Notes ─────────────────────────── */

.weekly-notes-list {
    max-height: 500px;
    overflow-y: auto;
}

.weekly-note-entry {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.weekly-note-entry:last-child { border-bottom: none; }

.weekly-note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.weekly-note-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.mood-indicator {
    font-size: 1.1rem;
    line-height: 1;
}

.weekly-note-text {
    font-size: 0.875rem;
    color: var(--gray-700);
    line-height: 1.65;
    padding-left: 30px;
}

.btn-icon-delete {
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: all 150ms;
    line-height: 1;
}

.btn-icon-delete:hover {
    background: var(--danger-light);
    color: var(--danger);
}

.weekly-note-form {
    background: var(--gray-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}

/* ── Attendance Summary Grid ─────────────── */

.attendance-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.att-stat {
    text-align: center;
    padding: 10px 6px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.att-stat-num {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2px;
}

.att-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.att-present { background: var(--success-light); }
.att-present .att-stat-num { color: #007a63; }
.att-present .att-stat-label { color: #007a63; }

.att-absent { background: var(--danger-light); }
.att-absent .att-stat-num { color: #b91c33; }
.att-absent .att-stat-label { color: #b91c33; }

.att-excused { background: var(--warning-light); }
.att-excused .att-stat-num { color: #8c5e00; }
.att-excused .att-stat-label { color: #8c5e00; }

.att-no-show { background: #fef2f3; }
.att-no-show .att-stat-num { color: #b91c33; }
.att-no-show .att-stat-label { color: #b91c33; }

.att-cancelled { background: var(--gray-100); }
.att-cancelled .att-stat-num { color: var(--gray-600); }
.att-cancelled .att-stat-label { color: var(--gray-600); }

/* ── Client Report ───────────────────────── */

.report-doc {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 48px;
    max-width: 900px;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 24px;
    margin-bottom: 32px;
    border-bottom: 3px solid var(--purple-500);
}

.report-brand {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--purple-600);
    letter-spacing: -0.02em;
}

.report-slogan {
    font-size: 0.875rem;
    color: var(--gray-500);
    font-style: italic;
    margin-top: 2px;
}

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

.report-title {
    font-size: 1.25rem;
    color: var(--gray-800);
    font-weight: 700;
}

.report-section {
    margin-bottom: 32px;
}

.report-section-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple-600);
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--purple-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.report-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.report-info-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-400);
}

.report-info-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-800);
}

.report-progress-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--purple-50);
    border-radius: var(--radius-md);
}

.report-progress-pct {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--purple-600);
    letter-spacing: -0.02em;
    min-width: 72px;
}

.report-progress-detail { flex: 1; }

.report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.report-table thead th {
    background: var(--gray-50);
    padding: 10px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    text-align: left;
    border-bottom: 1px solid var(--border-default);
}

.report-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--gray-700);
}

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

/* Attendance report cards */
.report-attendance-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.report-att-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--gray-50);
    gap: 6px;
}

.report-att-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gray-800);
}

.report-att-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    line-height: 1.3;
}

.report-att-present { background: var(--success-light); border-color: #b8e8dd; }
.report-att-present .report-att-num { color: #007a63; }
.report-att-rescheduled { background: #dbeafe; border-color: #bfdbfe; }
.report-att-rescheduled .report-att-num { color: #1d4ed8; }
.report-att-noshow { background: #fff7ed; border-color: #fed7aa; }
.report-att-noshow .report-att-num { color: #c2410c; }
.report-att-cancelled { background: var(--gray-100); border-color: var(--gray-200); }
.report-att-cancelled .report-att-num { color: var(--gray-600); }

.report-note {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.report-note:last-child { border-bottom: none; }

.report-note-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.report-note-text {
    font-size: 0.875rem;
    color: var(--gray-700);
    line-height: 1.65;
    padding-left: 4px;
}

.report-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid var(--purple-100);
    text-align: center;
    font-size: 0.8125rem;
}

.report-footer-brand {
    color: var(--purple-600);
    font-size: 0.9375rem;
    margin-bottom: 4px;
}

.report-footer-contact {
    color: var(--gray-500);
}

/* Print overrides for report */
@media print {
    .report-doc {
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        max-width: none;
    }

    .report-section { break-inside: avoid; }

    .report-attendance-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ── Wizard ───────────────────────────────── */

.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    gap: 0;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    position: relative;
}

.wizard-step-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9375rem;
    background: var(--gray-100);
    color: var(--gray-400);
    border: 2px solid var(--gray-200);
    transition: all 300ms var(--ease-out);
}

.wizard-step.active .wizard-step-num {
    background: var(--purple-500);
    color: #fff;
    border-color: var(--purple-500);
    box-shadow: 0 0 0 4px rgba(103,61,230,0.15);
}

.wizard-step.completed .wizard-step-num {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.wizard-step-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-400);
    text-align: center;
    white-space: nowrap;
    transition: color 200ms;
}

.wizard-step.active .wizard-step-label {
    color: var(--purple-600);
}

.wizard-step.completed .wizard-step-label {
    color: var(--success);
}

.wizard-step-line {
    flex: 1;
    height: 2px;
    background: var(--gray-200);
    max-width: 80px;
    min-width: 24px;
    margin: 0 4px;
    margin-bottom: 22px;
    transition: background 300ms;
}

.wizard-step-line.completed {
    background: var(--success);
}

.wizard-card {
    max-width: 800px;
}

.wizard-panel {
    display: none;
}

.wizard-panel.active {
    display: block;
    animation: fadeInUp 300ms var(--ease-out);
}

.wizard-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.wizard-panel-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.wizard-panel-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 2px;
}

.wizard-sub-heading {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--purple-500);
    margin-top: 24px;
    margin-bottom: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}

.wizard-consent-list {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

/* Nav badge for pending registrations */
.nav-badge {
    display: inline-block;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.6;
}
.badge { display:inline-block; background:#e5e7eb; color:#374151; font-size:12px; font-weight:600; border-radius:10px; padding:2px 8px; margin-left:6px; }
.badge-purple { background:#ede9fe; color:#6d28d9; }
.badge-green { background:#d1fae5; color:#065f46; }

/* Digital registration form section inside wizard */
.reg-form-section {
    background: #f5f0ff;
    border: 1.5px solid #d4c2f9;
    border-radius: 10px;
    padding: 18px 20px;
    margin: 20px 0 4px;
}
.reg-form-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}
.reg-form-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.alert {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 10px;
}
.alert-success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}
.alert-warning {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
}
.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.wizard-consent-list .form-check {
    margin-bottom: 14px;
}

.wizard-consent-list .form-check:last-child {
    margin-bottom: 0;
}

/* Level picker grid */
.wizard-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.wizard-level-card {
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all 200ms var(--ease-in-out);
}

.wizard-level-card:hover {
    border-color: var(--purple-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.wizard-level-card.selected {
    border-color: var(--purple-500);
    box-shadow: 0 0 0 3px rgba(103,61,230,0.15), var(--shadow-md);
}

.wizard-level-header {
    padding: 12px 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.wizard-level-header strong {
    display: block;
    font-size: 0.9375rem;
}

.wizard-level-header span {
    font-size: 0.75rem;
    opacity: 0.85;
}

.wizard-level-body {
    padding: 10px 14px;
}

.wizard-level-phase {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--gray-400);
}

.wizard-level-desc {
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin-top: 4px;
    line-height: 1.4;
}

.wizard-level-age {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 600;
    margin-top: 6px;
}

/* Summary card in schedule step */
.wizard-summary-card {
    background: var(--purple-50);
    border: 1px solid var(--purple-100);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

/* Completion page */
.wizard-complete-card {
    text-align: center;
    padding: 48px 24px;
    max-width: 600px;
    margin: 0 auto;
}

.wizard-complete-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    line-height: 1;
}

.wizard-complete-card h2 {
    font-size: 1.75rem;
    color: var(--purple-600);
    margin-bottom: 8px;
}

.wizard-complete-sub {
    font-size: 1.0625rem;
    color: var(--gray-500);
    margin-bottom: 32px;
}

.wizard-complete-summary {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: left;
    box-shadow: var(--shadow-sm);
}

.wizard-complete-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.wizard-complete-detail {
    font-size: 0.9375rem;
    padding: 6px 0;
    color: var(--gray-700);
}

/* ── Status Tabs (Client List) ── */
.status-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-default);
    padding-bottom: 0;
}

.status-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.status-tab:hover {
    color: var(--gray-700);
    background: var(--gray-50);
}

.status-tab.active {
    color: var(--purple-600);
    border-bottom-color: var(--purple-500);
    font-weight: 600;
}

.status-tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot-active   { background: var(--success); }
.dot-paused   { background: var(--warning); }
.dot-graduated { background: var(--info); }
.dot-archived { background: var(--gray-400); }

.status-tab-count {
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 2px;
}

.status-tab.active .status-tab-count {
    background: var(--purple-100);
    color: var(--purple-600);
}

/* ── Status Badges (table & detail) ── */
.badge-active   { background: var(--success-light); color: #007a63; }
.badge-paused   { background: var(--warning-light); color: #9a6700; }
.badge-graduated { background: var(--info-light); color: #1a56db; }
.badge-archived-status { background: var(--gray-100); color: var(--gray-500); }

/* ── Client Lifecycle Card ── */
.lifecycle-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.lifecycle-current {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.lifecycle-current .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lifecycle-current .status-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.lifecycle-current .status-sub {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin-top: 2px;
}

.lifecycle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lifecycle-actions form {
    display: inline;
}

.btn-lifecycle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-primary);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.btn-lifecycle:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.btn-lifecycle.btn-lifecycle-pause {
    border-color: var(--warning);
    color: #9a6700;
}
.btn-lifecycle.btn-lifecycle-pause:hover {
    background: var(--warning-light);
}

.btn-lifecycle.btn-lifecycle-graduate {
    border-color: var(--info);
    color: #1a56db;
}
.btn-lifecycle.btn-lifecycle-graduate:hover {
    background: var(--info-light);
}

.btn-lifecycle.btn-lifecycle-archive {
    border-color: var(--danger);
    color: var(--danger);
}
.btn-lifecycle.btn-lifecycle-archive:hover {
    background: var(--danger-light);
}

.btn-lifecycle.btn-lifecycle-reactivate {
    border-color: var(--success);
    color: #007a63;
}
.btn-lifecycle.btn-lifecycle-reactivate:hover {
    background: var(--success-light);
}

:focus-visible {
    outline: 2px solid var(--purple-500);
    outline-offset: 2px;
}

/* ─── Logo ──────────────────────────────────────────────────────────── */
.sidebar-logo {
    width: 100%;
    max-width: 160px;
    height: auto;
    display: block;
    margin: 0 auto 4px;
    border-radius: 8px;
}

.report-logo {
    height: 48px;
    width: auto;
    display: block;
    object-fit: contain;
}

.report-header-brand {
    display: flex;
    align-items: center;
}

/* ─── Report language buttons ───────────────────────────────────────── */
.report-lang-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.report-lang-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 2px;
}

/* ─── Calendar ──────────────────────────────────────────────────────── */
.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.cal-leg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 500;
}
.cal-leg::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.cal-leg-scheduled   { background: #ede9fe; color: #5b21b6; }
.cal-leg-scheduled::before   { background: #673DE6; }
.cal-leg-present     { background: #d1fae5; color: #065f46; }
.cal-leg-present::before     { background: #10b981; }
.cal-leg-rescheduled { background: #dbeafe; color: #1d4ed8; }
.cal-leg-rescheduled::before { background: #3b82f6; }
.cal-leg-no_show     { background: #ffedd5; color: #9a3412; }
.cal-leg-no_show::before     { background: #f97316; }
.cal-leg-cancelled   { background: #f3f4f6; color: #374151; }
.cal-leg-cancelled::before   { background: #6b7280; }
.cal-leg-unrecorded  { background: #f3f4f6; color: #6b7280; }
.cal-leg-unrecorded::before  { background: #9ca3af; }

.cal-wrap {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 16px;
}

.fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 700; }
.fc .fc-button { font-size: 0.8125rem !important; }
.fc .fc-button-primary {
    background: var(--purple-500) !important;
    border-color: var(--purple-500) !important;
}
.fc .fc-button-primary:not(.fc-button-active):hover {
    background: var(--purple-600, #5b21b6) !important;
    border-color: var(--purple-600, #5b21b6) !important;
}
.fc-event { cursor: pointer; border-radius: 5px !important; }
.fc-event-inner {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 4px;
    font-size: 0.75rem;
    line-height: 1.3;
}
.fc-event-icon { font-size: 0.7rem; opacity: 0.85; }
.fc-event-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-event-loc { opacity: 0.85; font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Modal ─────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-box {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}
.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 20px 12px;
    border-bottom: 1px solid var(--border);
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 0 4px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 16px 20px; }
.modal-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.875rem;
    margin-bottom: 16px;
    color: var(--text-muted);
}
.modal-info-row strong { color: var(--text); }
.modal-status-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.status-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.status-btn {
    padding: 7px 14px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    color: var(--text-muted);
    transition: all 0.15s;
}
.status-btn:hover { opacity: 0.85; }
.status-btn.status-present     { border-color: #10b981; }
.status-btn.status-rescheduled { border-color: #3b82f6; }
.status-btn.status-no_show     { border-color: #f97316; }
.status-btn.status-cancelled   { border-color: #6b7280; }
.status-btn.active.status-present     { background: #10b981; color: #fff; }
.status-btn.active.status-rescheduled { background: #3b82f6; color: #fff; }
.status-btn.active.status-no_show     { background: #f97316; color: #fff; }
.status-btn.active.status-cancelled   { background: #6b7280; color: #fff; }
.modal-notes-wrap { margin-top: 4px; }
.modal-notes-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.modal-notes-wrap textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}