/* StudentDetailedView.css - Re-factored for the 7-Theme Dynamic Engine */

:root {
    /* Transitions for theme switching */
    --theme-transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    --bg-main: #eef4fb;
    --text-primary: #172033;
    --text-secondary: #516173;
    --text-muted: #64748b;
    --text-main: #172033;
    --card-bg: rgba(255, 255, 255, 0.94);
    --surface-raised: rgba(255, 255, 255, 0.86);
    --surface-soft: rgba(248, 250, 252, 0.96);
    --border-color: rgba(15, 23, 42, 0.12);
    --divider: rgba(226, 232, 240, 0.92);
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-light: rgba(37, 99, 235, 0.12);
    --panel-tint-strength: 14%;
    --panel-ink-strength: 88%;
    --telerik-blue: #1274e7;
    --telerik-blue-strong: #0b5ed7;
    --telerik-blue-dark: #084fb5;
    --telerik-blue-soft: rgba(18, 116, 231, 0.12);
    --action-success: #0f9f6e;
    --action-success-dark: #087f5b;
    --action-danger: #e5484d;
    --action-danger-dark: #c92a2a;
    --action-warning: #f59e0b;
    --panel-blue: #2563eb;
    --panel-cyan: #0891b2;
    --panel-emerald: #059669;
    --panel-amber: #d97706;
    --panel-rose: #e11d48;
    --panel-violet: #7c3aed;
    --panel-slate: #475569;
}

body {
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    min-height: 100vh;
    transition: var(--theme-transition);
}

html,
body {
    overflow-x: auto !important;
    max-width: none !important;
    touch-action: auto !important;
}

html {
    min-width: 360px;
}

body.theme-light,
body.theme-aurora-bloom,
body.theme-arctic-breeze {
    --text-primary: #172033;
    --text-secondary: #516173;
    --text-muted: #7b8794;
    --card-bg: rgba(255, 255, 255, 0.9);
    --border-color: rgba(15, 23, 42, 0.12);
    --divider: rgba(241, 245, 249, 0.92);
    --accent-light: rgba(37, 99, 235, 0.12);
    --panel-tint-strength: 14%;
    --panel-ink-strength: 88%;
}

body.theme-harvest-pulse {
    --text-primary: #223126;
    --text-secondary: #5c6b60;
    --text-muted: #70806f;
    --card-bg: rgba(255, 255, 255, 0.84);
    --border-color: rgba(52, 82, 48, 0.14);
    --divider: rgba(245, 249, 235, 0.92);
    --accent: #2f7d4f;
    --accent-hover: #256b42;
    --accent-light: rgba(47, 125, 79, 0.12);
    --panel-tint-strength: 13%;
    --panel-ink-strength: 88%;
}

body.theme-ember-graphite,
body.theme-neo-tactile,
body.theme-ocean {
    --surface-raised: rgba(255, 255, 255, 0.08);
    --surface-soft: rgba(255, 255, 255, 0.05);
    --panel-tint-strength: 20%;
    --panel-ink-strength: 78%;
}

body.theme-light,
body.theme-aurora-bloom,
body.theme-arctic-breeze,
body.theme-harvest-pulse {
    --surface-raised: rgba(255, 255, 255, 0.8);
    --surface-soft: rgba(248, 250, 252, 0.96);
}

.erp-page-brand__copy h1 {
    color: var(--text-primary);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

.erp-page-brand__copy p {
    color: var(--text-secondary);
    font-weight: 600;
}

.erp-page-brand__badge {
    color: var(--accent);
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,0.42), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(59, 130, 246, 0.18));
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

.erp-nav-chip {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.68);
    border-color: color-mix(in srgb, var(--accent) 14%, var(--border-color));
}

.erp-nav-chip:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent-light) 78%, var(--card-bg));
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
}

body .btn,
body .btn-outline,
body input,
body select,
body textarea,
body button {
    font-family: inherit;
}

.mobile-profile-actions,
.mobile-profile-tags {
    display: none;
}

/* Layout */
.sv-shell {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.5rem 1.5rem;
}

.sv-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    margin-top: 1.5rem;
}

.student-bottom-panels {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Base Cards */
.glass-panel {
    position: relative;
    background: var(--panel-bg, var(--card-bg));
    border: 1px solid var(--panel-border, var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: var(--theme-transition);
}
.glass-panel.padded {
    padding: 1.5rem 2rem;
}

.glass-panel.padded::before,
.search-results-panel::before,
.top-selector-panel::before,
.profile-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--panel-accent, var(--accent)), color-mix(in srgb, var(--panel-accent, var(--accent)) 18%, transparent));
    pointer-events: none;
}

.panel-tone-blue { --panel-accent: var(--panel-blue); }
.panel-tone-cyan { --panel-accent: var(--panel-cyan); }
.panel-tone-emerald { --panel-accent: var(--panel-emerald); }
.panel-tone-amber { --panel-accent: var(--panel-amber); }
.panel-tone-rose { --panel-accent: var(--panel-rose); }
.panel-tone-violet { --panel-accent: var(--panel-violet); }

.sv-shell .glass-panel {
    --panel-bg:
        radial-gradient(circle at top right, color-mix(in srgb, var(--panel-accent, var(--accent)) var(--panel-tint-strength, 14%), transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel-accent, var(--accent)) 5%, var(--card-bg)), color-mix(in srgb, var(--surface-soft) 72%, var(--card-bg)));
    --panel-border: color-mix(in srgb, var(--panel-accent, var(--accent)) 20%, var(--border-color));
}

.sv-shell .glass-panel .section-title i {
    color: var(--panel-accent, var(--accent));
}

.sv-shell .glass-panel .section-title {
    border-bottom-color: color-mix(in srgb, var(--panel-accent, var(--accent)) 20%, var(--border-color));
}

/* Top Selectors */
.top-selector-panel {
    --panel-accent: var(--panel-violet);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--panel-violet) 18%, transparent), transparent 24%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel-violet) 6%, var(--card-bg)), color-mix(in srgb, var(--surface-soft) 68%, var(--card-bg))),
        var(--card-bg);
}
.top-selector-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.top-selector-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(99,102,241,0.14));
    color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.top-selector-icon i {
    font-size: 1.45rem;
}
.top-selector-head h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}
.top-selector-head p {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.top-selector-controls {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(180px, 200px) minmax(280px, 360px);
    gap: 0.9rem;
    align-items: end;
}
.academic-year-banner {
    margin-left: auto;
    min-width: 210px;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--panel-violet) 12%, var(--surface-soft)), color-mix(in srgb, var(--panel-blue) 7%, var(--card-bg)));
    border: 1px solid color-mix(in srgb, var(--panel-violet) 22%, var(--border-color));
    display: grid;
    gap: 0.2rem;
}
.academic-year-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 700;
}
.academic-year-banner strong {
    font-size: 1.05rem;
    color: var(--text-primary);
}
.filter-group.compact { margin-bottom: 0; }
.student-picker { min-width: 0; }
.filter-group {
    margin-bottom: 1.25rem;
}
.filter-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.filter-group select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--divider);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}
.filter-group select:focus {
    border-color: var(--accent);
    background: var(--card-bg);
    box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}

/* Buttons */
.w-full { width: 100%; }
.btn {
    position: relative;
    min-height: 42px;
    padding: 0.72rem 1.08rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid rgba(15, 23, 42, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    letter-spacing: 0.005em;
    text-decoration: none;
    isolation: isolate;
    overflow: hidden;
    box-shadow:
        0 10px 20px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 58%);
    pointer-events: none;
    z-index: -1;
}
.btn i {
    font-size: 1.05em;
    line-height: 1;
}
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow:
        0 6px 14px rgba(15, 23, 42, 0.12),
        inset 0 2px 5px rgba(15, 23, 42, 0.12);
}
.btn:focus-visible,
.message-language-tab:focus-visible,
.tab-link:focus-visible,
.sub-tab-link:focus-visible {
    outline: 3px solid rgba(18, 116, 231, 0.25);
    outline-offset: 2px;
}
.btn-primary {
    background:
        linear-gradient(180deg, #258cf4 0%, var(--telerik-blue) 48%, var(--telerik-blue-strong) 100%);
    color: #fff;
    border-color: rgba(8, 79, 181, 0.42);
    box-shadow:
        0 14px 30px rgba(18, 116, 231, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:hover:not(:disabled) {
    background:
        linear-gradient(180deg, #3a99f5 0%, #147ce8 48%, var(--telerik-blue-dark) 100%);
}
.btn-secondary {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 96%, #fff 4%), color-mix(in srgb, var(--divider) 86%, var(--card-bg)));
    border-color: color-mix(in srgb, var(--telerik-blue) 20%, var(--border-color));
    color: color-mix(in srgb, var(--text-primary) 88%, var(--telerik-blue));
}
.btn-secondary:hover:not(:disabled) {
    background:
        linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.88));
    border-color: rgba(18, 116, 231, 0.42);
    color: var(--telerik-blue-strong);
}
.btn:disabled {
    opacity: 0.82;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary:disabled,
.btn-outline:disabled {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #64748b;
}

#btn-parent-message-whatsapp,
#btn-add-vaccination,
#btn-add-sickroom-visit {
    background:
        linear-gradient(180deg, #1fc98f, var(--action-success));
    border-color: rgba(8, 127, 91, 0.45);
    color: #fff;
    box-shadow:
        0 14px 28px rgba(15, 159, 110, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

#btn-parent-message-whatsapp:hover:not(:disabled),
#btn-add-vaccination:hover:not(:disabled),
#btn-add-sickroom-visit:hover:not(:disabled) {
    background:
        linear-gradient(180deg, #26d79b, var(--action-success-dark));
}

#btn-export-student-profile,
#sd-exams-analyze,
#btn-save-health-profile {
    background:
        linear-gradient(180deg, #258cf4 0%, var(--telerik-blue) 48%, var(--telerik-blue-strong) 100%);
    border-color: rgba(8, 79, 181, 0.42);
    color: #fff;
}

#sd-exams-clear {
    background:
        linear-gradient(180deg, #fff7ed, #ffedd5);
    border-color: rgba(245, 158, 11, 0.36);
    color: #9a3412;
}

.health-delete-btn {
    background:
        linear-gradient(180deg, #fff1f2, #ffe4e6);
    border-color: rgba(229, 72, 77, 0.34);
    color: #b91c1c;
}

.health-delete-btn:hover:not(:disabled) {
    background:
        linear-gradient(180deg, #fb7185, var(--action-danger));
    border-color: rgba(201, 42, 42, 0.56);
    color: #fff;
}

/* Profile Snapshot */
.profile-hero {
    --panel-accent: var(--panel-cyan);
    margin-top: 1.5rem;
    padding: 1.65rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--panel-cyan) 20%, transparent), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel-cyan) 7%, var(--surface-soft)), color-mix(in srgb, var(--card-bg) 96%, transparent)),
        var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.1);
}
.photo-container {
    width: 140px;
    height: 140px;
    border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface-soft)), var(--divider));
    margin: 0;
    overflow: hidden;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color));
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    flex-shrink: 0;
}
.photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-hero h2 {
    margin: 0 0 0.35rem 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-primary);
}
.roll-badge {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-light) 84%, var(--surface-soft)));
    color: var(--accent);
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: inline-block;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.year-badge-hero {
    display: inline-flex;
    align-items: center;
    margin-left: 0.75rem;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 88%, var(--accent-light));
    color: var(--accent);
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border-color));
}
.snapshot-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    text-align: left;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}
.snap-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    padding: 0.8rem 0.95rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border-color));
    min-width: 180px;
}
.snap-row i {
    color: var(--accent);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}
.hero-copy {
    flex: 1 1 auto;
    min-width: 0;
}
.profile-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.profile-nav-btn {
    min-width: 112px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.9));
    border-color: rgba(18, 116, 231, 0.28);
    color: var(--telerik-blue-strong);
    box-shadow:
        0 10px 22px rgba(18, 116, 231, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.profile-completeness-card {
    margin-top: 0.85rem;
    max-width: 560px;
    padding: 0.8rem 0.95rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-color));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%),
        color-mix(in srgb, var(--surface-soft) 88%, transparent);
}
.profile-completeness-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}
.profile-completeness-head span {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 0.9rem;
}
.profile-completeness-head small {
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.profile-completeness-track {
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--divider) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border-color));
}
.profile-completeness-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
    transition: width 0.35s ease;
}
.hero-metrics {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.search-results-panel {
    --panel-accent: var(--panel-blue);
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    color: var(--text-primary);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--panel-blue) 16%, transparent), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel-blue) 6%, var(--card-bg)), color-mix(in srgb, var(--surface-soft) 70%, var(--card-bg)));
}

.search-results-panel .section-title {
    margin-bottom: 0.55rem;
    padding-bottom: 0;
    border-bottom: none;
}

.search-results-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-results-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.search-results-body {
    margin-top: 1.1rem;
}

.search-results-panel.is-collapsed .search-results-body {
    display: none;
}

.results-collapse-btn {
    min-width: 132px;
    border-radius: 999px;
}

.search-results-table tbody tr.is-selected {
    background: rgba(59,130,246,0.08);
}

.search-results-grid-wrap {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: auto;
    background: var(--card-bg);
}

.search-results-panel .student-ux-bar {
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.search-results-panel .student-ux-input {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.search-results-panel .student-ux-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.search-results-panel .student-ux-input-wrap i,
.search-results-panel .student-ux-chip i {
    color: var(--accent);
}

.search-results-panel .student-ux-chip {
    background: var(--accent-light);
    border-color: rgba(37, 99, 235, 0.16);
    color: var(--accent);
}

.search-results-panel .btn-outline {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 96%, #fff 4%), color-mix(in srgb, var(--divider) 82%, var(--card-bg)));
    border: 1px solid color-mix(in srgb, var(--telerik-blue) 18%, var(--border-color));
    color: color-mix(in srgb, var(--text-primary) 86%, var(--telerik-blue));
    border-radius: 12px;
    text-decoration: none;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.search-results-panel .btn-outline:hover {
    background:
        linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.86));
    border-color: rgba(18, 116, 231, 0.38);
    color: var(--telerik-blue-strong);
}

.search-results-table .result-student {
    display: grid;
    gap: 0.2rem;
}

.search-results-table .result-subline {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.empty-cell {
    text-align: center;
    color: var(--text-secondary);
    padding: 1.4rem 1rem !important;
}

.cw-risk-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--divider) 80%, transparent);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.cw-risk-badge.danger {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

.cw-risk-badge.warning {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.cw-risk-badge.info {
    color: #075985;
    background: #e0f2fe;
    border-color: #bae6fd;
}

.cw-risk-badge.success {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.cw-risk-badge.muted {
    color: #475569;
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.student-intelligence-shell {
    display: grid;
    gap: 1rem;
}

.student-intelligence-grid,
.student-brief-grid,
.student-ai-grid {
    display: grid;
    gap: 1rem;
}

.student-intelligence-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.student-intel-card {
    padding: 1rem 1.05rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 94%, transparent), color-mix(in srgb, var(--divider) 58%, transparent));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
}

.student-intel-card.accent {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border-color));
}

.student-intel-card span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 900;
}

.student-intel-card strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-primary);
    font-size: clamp(1.4rem, 2vw, 1.95rem);
    line-height: 1;
}

.student-intel-card small,
.intelligence-copy {
    color: var(--text-secondary);
    line-height: 1.45;
    font-size: 0.84rem;
}

.student-alerts-panel,
.ai-summary-panel,
.parent-message-panel {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
        var(--card-bg);
}

.student-alerts-head,
.student-ai-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.student-alerts-head .section-title {
    margin-bottom: 0.35rem;
}

.smart-alerts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.student-ai-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
}

.student-ai-head span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 900;
}

.student-ai-head p {
    margin: 0.35rem 0 0;
    color: var(--text-primary);
    line-height: 1.6;
    font-weight: 700;
}

.student-ai-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #0f172a 60%));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 22%, transparent);
}

.message-language-tabs {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.message-language-tab {
    border: 1px solid color-mix(in srgb, var(--telerik-blue) 18%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 94%, #fff 6%), color-mix(in srgb, var(--divider) 72%, var(--card-bg)));
    color: color-mix(in srgb, var(--text-secondary) 80%, var(--telerik-blue));
    border-radius: 999px;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.message-language-tab:hover {
    transform: translateY(-1px);
    color: var(--telerik-blue-strong);
    border-color: rgba(18, 116, 231, 0.38);
}

.message-language-tab.active {
    color: #fff;
    border-color: rgba(8, 79, 181, 0.44);
    background:
        linear-gradient(180deg, #258cf4, var(--telerik-blue-strong));
    box-shadow:
        0 12px 24px rgba(18, 116, 231, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.message-output-wrap {
    display: grid;
    gap: 0.8rem;
}

.message-output {
    width: 100%;
    resize: vertical;
    min-height: 160px;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--divider) 72%, transparent);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.6;
}

.student-brief-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.brief-body {
    display: grid;
    gap: 0.7rem;
    padding: 0.25rem 0;
}

.brief-line {
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--divider) 72%, transparent);
    color: var(--text-primary);
    line-height: 1.5;
}

.export-card {
    display: grid;
    gap: 0.9rem;
}

.export-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.parent-connect-panel {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 96%, transparent), color-mix(in srgb, var(--divider) 54%, transparent));
}

.parent-connect-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-light) 82%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-color));
    font-size: 0.82rem;
    font-weight: 900;
}

.parent-connect-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(420px, 1.4fr) minmax(260px, 0.9fr);
    gap: 1rem;
    margin-top: 1rem;
}

.parent-connect-card {
    min-width: 0;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-soft) 88%, var(--card-bg));
}

.parent-connect-card h4 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    color: var(--text-primary);
    font-size: 0.98rem;
}

.parent-contact-list,
.parent-history-list {
    display: grid;
    gap: 0.7rem;
    max-height: 360px;
    overflow: auto;
    padding-right: 0.2rem;
}

.parent-history-list.compact {
    max-height: 320px;
}

.parent-contact-card,
.parent-history-item {
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-color));
    background: color-mix(in srgb, var(--card-bg) 82%, transparent);
}

/* Semantic panel tones */
.student-intel-card:nth-child(1) { --panel-accent: var(--panel-rose); }
.student-intel-card:nth-child(2) { --panel-accent: var(--panel-amber); }
.student-intel-card:nth-child(3) { --panel-accent: var(--panel-violet); }
.student-intel-card:nth-child(4) { --panel-accent: var(--panel-emerald); }

.student-intel-card,
.health-summary-card,
.marks-kpi,
.fin-card,
.attendance-kpi-card {
    border-color: color-mix(in srgb, var(--panel-accent, var(--accent)) 22%, var(--border-color));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--panel-accent, var(--accent)) 18%, transparent), transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel-accent, var(--accent)) 8%, var(--surface-soft)), color-mix(in srgb, var(--card-bg) 96%, transparent));
}

.student-alerts-panel { --panel-accent: var(--panel-amber); }
.ai-summary-panel { --panel-accent: var(--panel-violet); }
.parent-message-panel { --panel-accent: var(--panel-cyan); }
.student-brief-grid > .glass-panel:first-child { --panel-accent: var(--panel-emerald); }
.student-brief-grid > .glass-panel:last-child { --panel-accent: var(--panel-blue); }
.parent-connect-panel { --panel-accent: var(--panel-violet); }

#tab-personal > .glass-panel { --panel-accent: var(--panel-blue); }
#tab-attendance .attendance-hero-card { --panel-accent: var(--panel-emerald); }
#tab-attendance > .glass-panel:nth-of-type(2) { --panel-accent: var(--panel-blue); }
#tab-attendance .attendance-detail-grid > .glass-panel:first-child { --panel-accent: var(--panel-cyan); }
#tab-attendance .attendance-detail-grid > .glass-panel:last-child { --panel-accent: var(--panel-rose); }
#tab-attendance > .glass-panel:last-child { --panel-accent: var(--panel-amber); }
#tab-marks > .glass-panel { --panel-accent: var(--panel-violet); }
#tab-health .health-shell > .glass-panel { --panel-accent: var(--panel-rose); }
#tab-health .health-table-grid > .glass-panel:first-child { --panel-accent: var(--panel-emerald); }
#tab-health .health-table-grid > .glass-panel:last-child { --panel-accent: var(--panel-amber); }
#tab-finance > .glass-panel:nth-of-type(2) { --panel-accent: var(--panel-amber); }
#tab-finance > .glass-panel:nth-of-type(3) { --panel-accent: var(--panel-emerald); }
#tab-discipline > .glass-panel { --panel-accent: var(--panel-rose); }
#tab-qualifications > .glass-panel { --panel-accent: var(--panel-slate); }

.fin-card.target { --panel-accent: var(--panel-blue); }
.fin-card.paid { --panel-accent: var(--panel-emerald); }
.fin-card.balance { --panel-accent: var(--panel-amber); }

.health-summary-card:nth-child(1) { --panel-accent: var(--panel-rose); }
.health-summary-card:nth-child(2) { --panel-accent: var(--panel-emerald); }
.health-summary-card:nth-child(3) { --panel-accent: var(--panel-amber); }
.health-summary-card:nth-child(4) { --panel-accent: var(--panel-cyan); }

.parent-contact-card strong,
.parent-history-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.35;
}

.parent-contact-card span,
.parent-history-item p,
.parent-history-item small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-secondary);
    line-height: 1.45;
    font-size: 0.82rem;
}

.parent-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

.parent-history-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-light) 80%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.parent-history-chip.warn {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.parent-history-chip.danger {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

.parent-history-chip.good {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

/* Tabs Navigation */
.neo-tabs {
    display: flex;
    gap: 0.85rem;
    padding: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 84%, transparent), color-mix(in srgb, var(--card-bg) 96%, transparent)),
        var(--card-bg);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    overflow-x: auto;
    scrollbar-width: thin;
}
.tab-link {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 94%, transparent), color-mix(in srgb, var(--card-bg) 96%, transparent));
    border: 1px solid color-mix(in srgb, var(--telerik-blue) 12%, var(--border-color));
    border-radius: 16px;
    padding: 0.9rem 1.1rem;
    font-weight: 800;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    position: relative;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 48px;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.tab-link.active {
    color: #fff;
    background:
        linear-gradient(180deg, #258cf4 0%, var(--telerik-blue) 48%, var(--telerik-blue-strong) 100%);
    border-color: rgba(8, 79, 181, 0.42);
    box-shadow:
        0 14px 30px rgba(18, 116, 231, 0.26),
        inset 0 1px 0 rgba(255,255,255,0.26);
}
.tab-link:hover:not(.active) {
    color: var(--telerik-blue-strong);
    border-color: rgba(18, 116, 231, 0.34);
    background:
        linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.8));
    transform: translateY(-1px);
}
.tab-link.active::after {
    display: none;
}

.tab-content {
    display: none;
    animation: fadeIn 0.22s ease forwards;
}
.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Sections */
.section-title {
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-color));
}
.section-title i {
    color: var(--accent);
}

/* Grids */
.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}
.grid-2-col {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
}
.attendance-overview-grid {
    grid-template-columns: minmax(320px, 400px) 1fr;
}
.attendance-detail-grid {
    grid-template-columns: minmax(520px, 1.2fr) minmax(320px, 0.8fr);
    align-items: start;
}
.attendance-chart-card {
    margin-bottom: 1rem;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 86%, transparent), color-mix(in srgb, var(--card-bg) 98%, transparent)),
        var(--card-bg);
    padding: 1rem 1.1rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}
.attendance-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}
.attendance-chart-head h4 {
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.attendance-chart-head p {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}
.attendance-threshold-chip {
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.78rem;
    font-weight: 800;
    border: 1px solid #fecaca;
}
.attendance-chart-wrap {
    position: relative;
    height: 320px;
}

/* Info Boxes */
.info-box {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 84%, transparent), color-mix(in srgb, var(--card-bg) 98%, transparent)),
        var(--card-bg);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}
.info-box .lbl {
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    font-weight: 700;
}
.info-box .val {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.45;
}
.info-box.highlight {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent-light) 84%, var(--surface-soft))),
        var(--card-bg);
    border-color: color-mix(in srgb, var(--accent) 16%, var(--border-color));
}
.address-box {
    grid-column: 1 / -1;
}

.sub-tabs {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.sub-tab-link {
    border: 1px solid color-mix(in srgb, var(--telerik-blue) 14%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 94%, transparent), color-mix(in srgb, var(--card-bg) 96%, transparent));
    color: color-mix(in srgb, var(--text-secondary) 86%, var(--telerik-blue));
    padding: 0.78rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.sub-tab-link.active {
    background:
        linear-gradient(180deg, #258cf4, var(--telerik-blue-strong));
    border-color: rgba(8, 79, 181, 0.42);
    color: #fff;
    box-shadow:
        0 12px 24px rgba(18, 116, 231, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.24);
}
.sub-tab-link:hover:not(.active) {
    color: var(--telerik-blue-strong);
    border-color: rgba(18, 116, 231, 0.34);
    transform: translateY(-1px);
}
.sub-tab-content {
    display: none;
}
.sub-tab-content.active {
    display: block;
}

/* Marks Workspace */
.marks-workspace-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.marks-workspace-head .section-title {
    margin-bottom: 0.45rem;
}
.marks-intro {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}
.marks-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.sd-exam-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 80%, transparent), color-mix(in srgb, var(--divider) 96%, transparent));
    margin-bottom: 1.2rem;
}
.sd-exam-option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-color));
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 94%, transparent), color-mix(in srgb, var(--card-bg) 98%, transparent));
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}
.sd-exam-option input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 0.1rem;
}
.sd-exam-option span {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}
.sd-exam-option strong {
    color: var(--text-primary);
}
.sd-exam-option small {
    color: var(--text-secondary);
    line-height: 1.4;
}
.marks-dashboard {
    display: grid;
    gap: 1rem;
}
.marks-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 0.9rem;
}
.marks-kpi {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-color));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 84%, transparent), color-mix(in srgb, var(--card-bg) 98%, transparent));
    display: grid;
    gap: 0.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}
.marks-kpi span {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.74rem;
}
.marks-kpi strong {
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1.1;
}
.marks-kpi small {
    color: var(--text-secondary);
    line-height: 1.45;
}
.marks-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.marks-chart-card,
.sd-exam-card {
    border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border-color));
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 82%, transparent), color-mix(in srgb, var(--card-bg) 98%, transparent)),
        var(--card-bg);
    padding: 1rem 1.1rem;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.marks-card-head,
.sd-exam-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.marks-card-head h4,
.sd-exam-card-head h4 {
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.marks-card-head span,
.sd-exam-card-head p {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}
.sd-exam-card-head > span {
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    border: 1px solid transparent;
}
.sd-exam-card-head > span.good {
    background: var(--success-bg);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 18%, transparent);
}
.sd-exam-card-head > span.watch {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 18%, transparent);
}
.marks-chart-wrap {
    height: 280px;
    position: relative;
}
.marks-chart-wrap.subject-chart {
    height: 320px;
}
.sd-exam-report-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.marks-mini-chart {
    height: 220px;
    margin-top: 0.9rem;
}
.marks-matrix-table th,
.marks-matrix-table td {
    vertical-align: top;
}
.matrix-avg {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.health-shell {
    display: grid;
    gap: 1rem;
}

.health-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 1rem;
}

.health-summary-card {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-color));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 84%, transparent), color-mix(in srgb, var(--card-bg) 98%, transparent));
    display: grid;
    gap: 0.3rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.health-summary-card.accent {
    border-color: color-mix(in srgb, #dc2626 22%, var(--border-color));
}

.health-summary-card span {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.74rem;
}

.health-summary-card strong {
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1.1;
}

.health-summary-card small {
    color: var(--text-secondary);
    line-height: 1.45;
}

.health-form-grid,
.health-entry-grid {
    display: grid;
    gap: 0.9rem;
}

.health-form-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    margin-bottom: 1rem;
}

.health-entry-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    margin-bottom: 1rem;
}

.health-form-grid input,
.health-form-grid textarea,
.health-form-grid select,
.health-entry-grid input,
.health-entry-grid select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.78rem 0.88rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border-color));
    background: color-mix(in srgb, var(--surface-soft) 96%, transparent);
    color: var(--text-primary);
    font: inherit;
}

.health-form-grid textarea {
    resize: vertical;
}

.health-span-2 {
    grid-column: span 2;
}

.health-span-4 {
    grid-column: span 4;
}

.health-table-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Attendance Progress */
.radial-progress-container {
    position: relative;
    width: 140px;
    height: 140px;
}
.progress-bg {
    fill: none;
    stroke: var(--divider);
    stroke-width: 12;
}
.progress-bar {
    fill: none;
    stroke: var(--accent);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
}
.progress-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}
.attendance-summary-card {
    justify-content: center;
}
.attendance-hero-card {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
        linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(147, 197, 253, 0.04)),
        var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
.attendance-hero-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.attendance-hero-head .section-title {
    margin-bottom: 0.5rem;
    border-bottom: none;
    padding-bottom: 0;
}
.attendance-intro {
    margin: 0;
    color: var(--text-secondary);
    max-width: 740px;
    line-height: 1.6;
    font-size: 0.94rem;
}
.attendance-pill-large {
    padding: 0.95rem 1.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-light) 88%, var(--surface-soft)));
    color: var(--accent);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.attendance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 1rem;
}
.attendance-kpi-card {
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-color));
    padding: 1rem 1.15rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 88%, transparent), color-mix(in srgb, var(--card-bg) 98%, transparent));
    box-shadow: 0 10px 24px rgba(15,23,42,0.05);
    display: grid;
    gap: 0.2rem;
}
.attendance-kpi-card span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.attendance-kpi-card strong {
    font-size: 1.65rem;
    line-height: 1;
    color: var(--text-primary);
}
.attendance-kpi-card small {
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.attendance-kpi-card.working {
    background: linear-gradient(180deg, rgba(219,234,254,0.75), rgba(239,246,255,0.85));
}
.attendance-kpi-card.present {
    background: linear-gradient(180deg, rgba(220,252,231,0.78), rgba(240,253,244,0.88));
}
.attendance-kpi-card.absent {
    background: linear-gradient(180deg, rgba(254,226,226,0.8), rgba(255,241,242,0.9));
}
.attendance-kpi-card.dates {
    background: linear-gradient(180deg, rgba(237,233,254,0.78), rgba(245,243,255,0.9));
}
.attendance-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.attendance-year-badge {
    padding: 0.45rem 0.8rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-light) 88%, var(--surface-soft)));
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.attendance-groups {
    display: grid;
    gap: 1rem;
    max-height: 620px;
    overflow: auto;
    padding-right: 0.3rem;
}
.neo-table#attendance-summary-table th {
    width: 240px;
    background: rgba(219,234,254,0.5);
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.86rem;
}
.neo-table#attendance-summary-table td {
    font-weight: 700;
    color: var(--accent);
}
.absence-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    background: rgba(239,68,68,0.12);
    color: #dc2626;
}
.absence-status-badge.partial {
    background: rgba(245,158,11,0.14);
    color: #b45309;
}
.absence-period-list {
    color: var(--text-secondary);
    font-weight: 500;
}
.attendance-month-card {
    border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border-color));
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 86%, transparent), color-mix(in srgb, var(--card-bg) 98%, transparent)),
        var(--card-bg);
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.attendance-month-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.7);
}
.attendance-month-head h4 {
    margin: 0;
    font-size: 1rem;
}
.attendance-month-stats {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.absence-row-list {
    display: grid;
    gap: 0.8rem;
    padding: 1rem 1.2rem 1.2rem;
}
.absence-item {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-soft) 96%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border-color));
}
.absence-date {
    font-weight: 600;
    color: var(--text-primary);
}
.absence-periods {
    color: var(--text-secondary);
    font-size: 0.86rem;
    text-align: right;
}

/* Tables */
.neo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    overflow: hidden;
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-soft) 96%, transparent);
}
.neo-table th, .neo-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.neo-table th {
    background: linear-gradient(180deg, color-mix(in srgb, var(--divider) 92%, transparent), color-mix(in srgb, var(--surface-soft) 88%, transparent));
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}
.neo-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--accent-light) 52%, var(--surface-soft));
}
.attendance-matrix-table {
    table-layout: fixed;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--border-color);
}
.attendance-matrix-table th:first-child,
.attendance-matrix-table td:first-child {
    width: 170px;
}
.attendance-matrix-table thead th {
    background: linear-gradient(180deg, rgba(219,234,254,0.82), rgba(239,246,255,0.92));
    color: #2563eb;
    text-align: center;
    border-bottom: 1px solid rgba(191, 219, 254, 0.9);
}
.attendance-matrix-table thead th:first-child {
    text-align: left;
}
.attendance-matrix-table tbody td {
    text-align: center;
    font-weight: 600;
}
.attendance-matrix-table tbody td:first-child {
    text-align: left;
    color: var(--text-primary);
    background: rgba(248, 250, 252, 0.94);
}
.attendance-matrix-table tbody tr:nth-child(2) td {
    background: rgba(239, 253, 244, 0.5);
}
.attendance-matrix-table tbody tr:nth-child(3) td {
    background: rgba(255, 241, 242, 0.5);
}

/* KPI Cards */
.fin-card {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 84%, transparent), color-mix(in srgb, var(--card-bg) 98%, transparent));
    padding: 1.5rem;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-color));
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.fin-details p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.fin-details h3 {
    margin: 0.25rem 0 0 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Final tone overrides for panels declared later in the file */
.student-intel-card,
.health-summary-card,
.marks-kpi,
.fin-card,
.attendance-kpi-card,
.attendance-chart-card,
.marks-chart-card,
.sd-exam-card,
.attendance-month-card {
    border-color: color-mix(in srgb, var(--panel-accent, var(--accent)) 22%, var(--border-color));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--panel-accent, var(--accent)) 18%, transparent), transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel-accent, var(--accent)) 8%, var(--surface-soft)), color-mix(in srgb, var(--card-bg) 96%, transparent));
}

.attendance-hero-card {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--panel-accent, var(--accent)) 18%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--panel-accent, var(--accent)) 9%, var(--card-bg)), color-mix(in srgb, var(--surface-soft) 72%, var(--card-bg))),
        var(--card-bg);
}

.student-alerts-panel,
.ai-summary-panel,
.parent-message-panel,
.parent-connect-panel {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--panel-accent, var(--accent)) 18%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel-accent, var(--accent)) 7%, var(--card-bg)), color-mix(in srgb, var(--surface-soft) 74%, var(--card-bg)));
}

.parent-connect-card:nth-child(1) { --panel-accent: var(--panel-cyan); }
.parent-connect-card:nth-child(2) { --panel-accent: var(--panel-violet); }
.parent-connect-card:nth-child(3) { --panel-accent: var(--panel-amber); }
.parent-connect-card {
    border-color: color-mix(in srgb, var(--panel-accent, var(--accent)) 20%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--panel-accent, var(--accent)) 7%, var(--surface-soft)), color-mix(in srgb, var(--card-bg) 96%, transparent));
}

/* Loader */
.loader-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 10000;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-left-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}
.loader-text {
    font-size: 1rem;
    font-weight: 600;
}
.loader-progress {
    width: min(320px, calc(100vw - 3rem));
    height: 12px;
    margin-top: 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.loader-progress-bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #34d399);
    transition: width 0.2s ease;
}
.loader-progress-label {
    margin-top: 0.7rem;
    color: rgba(255,255,255,0.82);
    font-size: 0.88rem;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Utils */
.hidden { display: none !important; }

@media (max-width: 1180px) {
    .top-selector-panel,
    .profile-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-hero-actions {
        justify-content: flex-start;
    }

    .top-selector-controls {
        grid-template-columns: 1fr 1fr;
    }

    .academic-year-banner {
        width: 100%;
        margin-left: 0;
    }

    .student-picker {
        grid-column: 1 / -1;
    }

    .attendance-overview-grid,
    .attendance-detail-grid,
    .grid-2-col,
    .student-ai-grid,
    .student-brief-grid,
    .parent-connect-grid {
        grid-template-columns: 1fr;
    }

    .attendance-kpi-grid,
    .student-intelligence-grid,
    .health-summary-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .marks-kpi-grid,
    .marks-chart-grid,
    .sd-exam-report-list,
    .health-table-grid {
        grid-template-columns: 1fr 1fr;
    }

    .health-form-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .health-entry-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .attendance-hero-head,
    .attendance-section-head,
    .student-alerts-head,
    .student-ai-head {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 760px) {
    .sv-shell {
        padding: 0 1rem 1rem;
    }

    .top-selector-controls {
        grid-template-columns: 1fr;
    }

    .search-results-head {
        align-items: stretch;
    }

    .glass-panel.padded,
    .profile-hero {
        padding: 1.25rem;
    }

    .year-badge-hero {
        margin-left: 0;
        margin-top: 0.75rem;
    }

    .hero-metrics {
        flex-direction: column;
        gap: 0.7rem;
    }

    .profile-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .attendance-kpi-grid,
    .student-intelligence-grid,
    .health-summary-grid {
        grid-template-columns: 1fr;
    }

    .marks-kpi-grid,
    .marks-chart-grid,
    .sd-exam-report-list,
    .health-table-grid,
    .health-form-grid,
    .health-entry-grid {
        grid-template-columns: 1fr;
    }

    .health-span-2,
    .health-span-4 {
        grid-column: auto;
    }

    .marks-actions .btn {
        flex: 1 1 140px;
    }

    .attendance-pill-large {
        white-space: normal;
    }

    .parent-connect-summary {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .parent-contact-list,
    .parent-history-list {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .sv-shell {
        padding: 0 0.75rem 0.85rem;
    }

    .sv-main {
        gap: 1rem;
        margin-top: 1rem;
    }

    .top-selector-panel,
    .profile-hero,
    .glass-panel.padded,
    .search-results-panel {
        padding: 1rem;
        border-radius: 18px;
    }

    .top-selector-head {
        align-items: flex-start;
    }

    .top-selector-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .profile-hero {
        gap: 1rem;
    }

    .photo-container {
        width: 108px;
        height: 108px;
        border-radius: 18px;
    }

    .profile-hero h2 {
        font-size: 1.28rem;
        line-height: 1.2;
    }

    .profile-hero-actions,
    .marks-actions,
    .exam-toolbar-actions {
        grid-template-columns: 1fr;
        display: grid;
        width: 100%;
    }

    .profile-hero-actions .btn,
    .marks-actions .btn,
    .exam-toolbar-actions .btn {
        width: 100%;
    }

    .snap-row,
    .attendance-pill-large {
        min-width: 0;
    }

    .search-results-grid-wrap,
    .marks-table-wrap,
    .table-wrap,
    .health-table-grid,
    .attendance-groups {
        max-width: 100%;
        overflow-x: auto;
    }

    .neo-table,
    .attendance-matrix-table,
    .marks-matrix-table {
        min-width: 720px;
    }

    #attendance-summary-table {
        min-width: 560px;
    }

    .marks-chart-wrap,
    .marks-chart-wrap.subject-chart,
    .marks-mini-chart {
        height: 240px;
    }

    .attendance-month-head,
    .absence-item,
    .marks-card-head,
    .sd-exam-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .absence-periods {
        text-align: left;
    }

    .student-alert-card,
    .student-intel-card,
    .parent-connect-card,
    .health-summary-card,
    .marks-kpi,
    .fin-card,
    .attendance-kpi-card,
    .attendance-chart-card,
    .marks-chart-card,
    .sd-exam-card,
    .attendance-month-card {
        border-radius: 16px;
    }
}

@media (max-width: 560px) {
    body {
        overflow-x: auto;
        touch-action: auto !important;
    }

    .erp-page-purpose {
        padding: 0.9rem;
    }

    .erp-page-purpose h1 {
        font-size: 1.1rem;
    }

    .erp-page-purpose p,
    .search-results-copy,
    .top-selector-head p,
    .intelligence-copy,
    .attendance-intro,
    .marks-intro {
        font-size: 0.84rem;
        line-height: 1.45;
    }

    .sv-shell {
        padding: 0 0.6rem 0.85rem;
    }

    .search-results-panel,
    .top-selector-panel,
    .profile-hero,
    .glass-panel.padded {
        border-radius: 14px;
        padding: 0.85rem;
    }

    .search-results-head,
    .student-alerts-head,
    .marks-workspace-head,
    .attendance-hero-head,
    .attendance-section-head {
        gap: 0.75rem;
    }

    .results-collapse-btn {
        width: 100%;
        min-width: 0;
    }

    .top-selector-panel {
        gap: 0.9rem;
    }

    .top-selector-head {
        gap: 0.75rem;
    }

    .top-selector-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .top-selector-controls {
        width: 100%;
        gap: 0.75rem;
    }

    .academic-year-banner {
        min-width: 0;
        width: 100%;
        border-radius: 14px;
    }

    .filter-group select,
    .filter-group input,
    .filter-group textarea {
        min-height: 44px;
    }

    .profile-hero {
        align-items: center;
        text-align: center;
    }

    .photo-container {
        width: 96px;
        height: 96px;
        margin-inline: auto;
    }

    .hero-copy {
        width: 100%;
    }

    .roll-badge,
    .year-badge-hero {
        display: inline-flex;
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
    }

    .profile-completeness-card {
        max-width: none;
        text-align: left;
    }

    .hero-metrics {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .snap-row {
        justify-content: flex-start;
        text-align: left;
        word-break: break-word;
    }

    .profile-hero-actions {
        grid-template-columns: 1fr;
    }

    .student-intelligence-grid,
    .student-ai-grid,
    .student-brief-grid,
    .parent-connect-grid,
    .grid-layout,
    .attendance-kpi-grid,
    .marks-kpi-grid,
    .marks-chart-grid,
    .sd-exam-report-list,
    .health-summary-grid,
    .health-form-grid,
    .health-entry-grid,
    .health-table-grid,
    .finance-cards,
    .grid-3-col,
    .grid-2-col,
    .attendance-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .student-intel-card,
    .info-box,
    .parent-connect-card,
    .health-summary-card,
    .marks-kpi,
    .fin-card,
    .attendance-kpi-card {
        padding: 0.9rem;
    }

    .info-box .lbl {
        font-size: 0.68rem;
    }

    .info-box .val {
        font-size: 0.92rem;
        overflow-wrap: anywhere;
    }

    .neo-tabs,
    .sub-tabs,
    .message-language-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.45rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .neo-tabs {
        position: sticky;
        top: 0;
        z-index: 30;
        margin-inline: -0.15rem;
        border-radius: 14px;
        padding: 0.45rem;
    }

    .tab-link,
    .sub-tab-link,
    .message-language-tab {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0.65rem 0.8rem;
        font-size: 0.8rem;
        border-radius: 12px;
    }

    .section-title {
        font-size: 0.98rem;
        line-height: 1.25;
        margin-bottom: 1rem;
        padding-bottom: 0.7rem;
        align-items: flex-start;
    }

    .table-responsive,
    .search-results-grid-wrap,
    .marks-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }

    .neo-table {
        min-width: 680px;
        font-size: 0.82rem;
    }

    .search-results-table {
        min-width: 760px;
    }

    .neo-table th,
    .neo-table td {
        padding: 0.65rem 0.7rem;
        white-space: nowrap;
    }

    .address-box {
        grid-column: auto;
    }

    .attendance-chart-card,
    .marks-chart-card,
    .sd-exam-card {
        padding: 0.85rem;
        border-radius: 14px;
    }

    .attendance-chart-wrap,
    .marks-chart-wrap,
    .marks-chart-wrap.subject-chart,
    .marks-mini-chart {
        height: 220px;
    }

    .marks-actions,
    .exam-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .marks-actions .btn,
    .exam-toolbar-actions .btn,
    #btn-parent-message-whatsapp,
    #btn-export-student-profile,
    #btn-save-health-profile,
    #btn-add-vaccination,
    #btn-add-sickroom-visit {
        width: 100%;
    }

    .sd-exam-checklist {
        grid-template-columns: 1fr;
        padding: 0.75rem;
        border-radius: 14px;
    }

    .message-output {
        min-height: 150px;
    }

    .parent-connect-summary {
        border-radius: 14px;
    }

    .parent-contact-list,
    .parent-history-list,
    .attendance-groups {
        padding-right: 0;
    }

    .absence-item {
        padding: 0.75rem;
    }

    .fin-card {
        align-items: flex-start;
    }

    .mobile-profile-actions,
    .mobile-profile-tags {
        display: flex;
    }

    body {
        background:
            radial-gradient(ellipse at 18% -8%, rgba(255, 255, 255, 0.14), transparent 34%),
            linear-gradient(180deg, #0f9f59 0 300px, #f4f7f5 300px);
        overflow-x: auto;
        touch-action: auto !important;
    }

    .cw-school-strip.erp-page-topbar,
    .erp-page-purpose {
        display: flex;
        width: calc(100% - 1.2rem);
        margin-inline: auto;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.9));
        color: #111827;
        border-color: rgba(15, 23, 42, 0.1);
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
    }

    .cw-school-strip.erp-page-topbar .cw-school-brand h2,
    .erp-page-purpose h1 {
        color: #172033;
    }

    .cw-school-strip.erp-page-topbar .cw-school-brand p {
        color: #2563eb;
    }

    .cw-school-strip.erp-page-topbar .cw-school-brand span,
    .erp-page-purpose p {
        color: #64748b;
    }

    .cw-school-strip.erp-page-topbar {
        margin-top: 0.65rem;
        border-radius: 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .erp-page-purpose {
        margin-top: 0.75rem;
        border-radius: 18px;
        padding: 0.9rem;
    }

    .sv-shell {
        padding: 0 0.9rem 1rem;
    }

    .top-selector-panel {
        margin: 0.75rem 0 0.85rem;
        border-radius: 28px 28px 18px 18px;
        background: #f8fafc;
        border-color: rgba(15, 23, 42, 0.08);
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    }

    .top-selector-panel::before {
        display: none;
    }

    .search-results-panel {
        margin-top: 0.75rem;
        border-radius: 22px;
        background: #ffffff;
        color: #111827;
        box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16);
    }

    .search-results-panel::before {
        background: #0f9f59;
    }

    .profile-hero {
        display: block;
        margin: 1.1rem auto 1rem;
        padding: 1.15rem 1rem 1rem;
        border-radius: 24px;
        background: #ffffff;
        color: #101828;
        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 24px 50px rgba(15, 23, 42, 0.22);
        overflow: hidden;
        text-align: center;
    }

    .profile-hero::before {
        height: 78px;
        background: linear-gradient(135deg, #0f9f59, #07876b);
    }

    .photo-container {
        position: relative;
        z-index: 1;
        width: 96px;
        height: 96px;
        margin: 1.55rem auto 0.7rem;
        border-radius: 50%;
        border: 5px solid #ffffff;
        background: #f1f5f9;
        box-shadow: 0 16px 28px rgba(15, 23, 42, 0.2);
    }

    .photo-container img {
        border-radius: 50%;
    }

    .photo-overlay {
        right: -0.2rem;
        bottom: 0.05rem;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #ffffff;
        color: #0f9f59;
        border: 1px solid rgba(15, 23, 42, 0.16);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
    }

    .hero-copy {
        width: 100%;
        text-align: center;
    }

    .profile-hero h2 {
        margin-top: 0.2rem;
        font-size: 1.55rem;
        line-height: 1.12;
        color: #111827;
        font-weight: 800;
    }

    .roll-badge,
    .year-badge-hero {
        display: inline-flex;
        color: #166534;
        background: #eef8f1;
        border-color: #b7d6c0;
        margin-top: 0.5rem;
    }

    .profile-completeness-card {
        display: grid;
        margin: 0.85rem auto 0;
        max-width: 100%;
        background: #f8fafc;
        border-color: #e5e7eb;
        color: #111827;
        text-align: left;
    }

    .hero-metrics {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 0.85rem;
    }

    .hero-metrics .snap-row {
        background: #f8fafc;
        color: #111827;
        border-color: #e5e7eb;
    }

    .mobile-profile-actions {
        justify-content: center;
        gap: 1.05rem;
        margin: 1.1rem 0;
    }

    .mobile-profile-action {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #0f9f59;
        color: #ffffff;
        font-size: 1.4rem;
        text-decoration: none;
        box-shadow: 0 12px 24px rgba(15, 159, 89, 0.28);
    }

    .mobile-profile-tags {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.55rem;
    }

    .mobile-profile-tags span {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.4rem 0.75rem;
        border-radius: 10px;
        background: #eef8f1;
        color: #166534;
        border: 1px solid #b7d6c0;
        font-weight: 700;
    }

    .mobile-profile-tags > span:nth-child(2) {
        background: #fee2e2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .mobile-profile-tags > span:nth-child(3) {
        background: #dbeafe;
        color: #1e3a8a;
        border-color: #bfdbfe;
    }

    .profile-hero-actions {
        grid-template-columns: 1fr 1fr;
        margin-top: 1rem;
    }

    .profile-hero-actions .btn {
        border-radius: 999px;
        background: #f8fafc;
        color: #111827;
        border-color: #e5e7eb;
    }

    .neo-tabs {
        top: 0.55rem;
        background: rgba(255, 255, 255, 0.96);
        border-radius: 18px;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    }

    .tab-link.active,
    .sub-tab-link.active,
    .message-language-tab.active {
        color: #0f9f59;
        border-bottom-color: #0f9f59;
    }

    .student-intel-card,
    .student-alert-card,
    .parent-connect-card,
    .health-summary-card,
    .info-box,
    .fin-card,
    .attendance-kpi-card {
        background: #ffffff;
        color: #111827;
        border-color: #e5e7eb;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    }

    .student-intel-card,
    .parent-connect-card,
    .attendance-kpi-card,
    .fin-card {
        display: grid;
        grid-template-columns: 42px 1fr;
        align-items: center;
        column-gap: 0.85rem;
    }

    .student-intel-card::before,
    .parent-connect-card::before,
    .attendance-kpi-card::before,
    .fin-card::before {
        content: "";
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background:
            radial-gradient(circle at center, #0f9f59 0 4px, transparent 5px),
            #eef8f1;
        grid-row: 1 / span 3;
    }

    .search-results-grid-wrap {
        overflow: visible;
    }

    .search-results-table,
    .search-results-table thead,
    .search-results-table tbody,
    .search-results-table tr,
    .search-results-table td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .search-results-table thead {
        display: none;
    }

    .search-results-table tr {
        margin: 0 0 0.85rem;
        padding: 0.9rem;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    }

    .search-results-table td {
        padding: 0.25rem 0;
        border: 0;
        white-space: normal;
        color: #111827;
    }

    .search-results-table td:first-child {
        font-size: 1.05rem;
    }

    .search-results-table td:nth-child(n + 2):nth-child(-n + 6) {
        color: #4b5563;
        font-size: 0.9rem;
    }

    .search-results-table td:last-child {
        padding-top: 0.75rem;
    }

    .result-open-btn {
        width: 100%;
        justify-content: center;
        border-radius: 999px;
        background: #0f9f59;
        border-color: #0f9f59;
    }

    .table-responsive,
    .marks-table-wrap,
    .table-wrap,
    .attendance-groups {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 390px) {
    .sv-shell {
        padding-inline: 0.45rem;
    }

    .search-results-panel,
    .top-selector-panel,
    .profile-hero,
    .glass-panel.padded {
        padding: 0.75rem;
    }

    .tab-link,
    .sub-tab-link {
        font-size: 0.76rem;
        padding-inline: 0.7rem;
    }

    .student-intel-card strong,
    .marks-kpi strong,
    .health-summary-card strong,
    .attendance-kpi-card strong,
    .fin-details h3 {
        font-size: 1.2rem;
    }
}