:root {
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #eef3f1;
    --ink: #17211f;
    --muted: #65726e;
    --line: #dfe7e3;
    --border: #dfe7e3;
    --brand: #163832;
    --brand-2: #2f6f64;
    --accent: #c56a3a;
    --warning: #f2b84b;
    --danger: #b42318;
    --success: #17614f;
    --sidebar: #163832;
    --sidebar-ink: #dce9e5;
    --header-bg: rgba(255, 255, 255, 0.92);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #171c1b;
    --surface: #222927;
    --surface-2: #2b3431;
    --ink: #edf4f1;
    --muted: #aab9b4;
    --line: #3b4844;
    --border: #3b4844;
    --brand: #2f7567;
    --brand-2: #78c4b1;
    --accent: #f0a06d;
    --warning: #e8b34f;
    --sidebar: #111715;
    --sidebar-ink: #e5efeb;
    --header-bg: rgba(34, 41, 39, 0.96);
    color-scheme: dark;
}

:root[data-theme="github-dark"] {
    --bg: #0d1117;
    --surface: #161b22;
    --surface-2: #21262d;
    --ink: #f0f6fc;
    --muted: #8b949e;
    --line: #30363d;
    --border: #30363d;
    --brand: #238636;
    --brand-2: #58a6ff;
    --accent: #d29922;
    --warning: #d29922;
    --sidebar: #010409;
    --sidebar-ink: #f0f6fc;
    --header-bg: rgba(22, 27, 34, 0.96);
    color-scheme: dark;
}

:root[data-theme="contrast"] {
    --bg: #000000;
    --surface: #000000;
    --surface-2: #111111;
    --ink: #ffffff;
    --muted: #ffffff;
    --line: #ffffff;
    --border: #ffffff;
    --brand: #007f5f;
    --brand-2: #00ffb3;
    --accent: #ffdc00;
    --warning: #ffdc00;
    --sidebar: #000000;
    --sidebar-ink: #ffffff;
    --header-bg: #000000;
    color-scheme: dark;
}

:root[data-theme="pastel"] {
    --bg: #fff7fb;
    --surface: #ffffff;
    --surface-2: #f8e8f2;
    --ink: #3d2133;
    --muted: #7d5a70;
    --line: #e8cddd;
    --border: #e8cddd;
    --brand: #8b2f67;
    --brand-2: #7551a6;
    --accent: #c83f62;
    --warning: #d98a36;
    --danger: #b42346;
    --success: #477f6b;
    --sidebar: #6f315d;
    --sidebar-ink: #fff7fb;
    --header-bg: rgba(255, 247, 251, 0.96);
    color-scheme: light;
}

html,
body {
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

h1,
h2,
h3,
p {
    margin: 0;
}

a,
.btn-link {
    color: var(--brand-2);
}

.btn {
    border-radius: 7px;
    font-weight: 700;
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}

.btn-primary:hover {
    background: #0f2925;
    border-color: #0f2925;
}

.btn-outline-secondary {
    border-color: #b9c5c0;
    color: var(--ink);
}

.content {
    padding-bottom: 2rem;
    padding-top: 1.4rem;
}

.dashboard-header,
.page-header {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.dashboard-header h1,
.page-header h1 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.35rem;
}

.page-header p,
.lead {
    color: var(--muted);
    max-width: 760px;
}

.eyebrow {
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}

.role-badges span {
    background: #eef3f1;
    border: 1px solid #cbd9d4;
    border-radius: 999px;
    color: var(--brand);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.32rem 0.6rem;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.metric-grid,
.module-grid,
.work-grid {
    display: grid;
    gap: 1rem;
}

.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.work-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
}

.module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card,
.work-panel,
.module-card,
.table-panel,
.attendance-panel,
.settings-panel,
.preview-panel,
.auth-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(18, 36, 32, 0.06);
}

.metric-card,
.module-card {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
}

.metric-card span,
.module-card span,
.activity-list span,
.task-list span {
    color: var(--muted);
}

.metric-card strong {
    font-size: 1.7rem;
    line-height: 1.1;
}

.metric-card small,
.module-card small {
    color: var(--brand-2);
    font-weight: 700;
}

.metric-card.warning {
    border-color: #efd28f;
    background: #fffaf0;
}

.metric-card.access-code {
    background: var(--surface-2);
    border-color: var(--line);
}

.compact-page {
    margin: 0 auto;
    max-width: 860px;
    width: 100%;
}

.compact-page-wide {
    max-width: 1040px;
}

.compact-page .settings-panel,
.compact-page .profile-panel,
.compact-page .preview-panel {
    max-width: none;
}

.metric-card.access-code strong {
    font-size: 1.35rem;
    letter-spacing: 0;
}

.work-panel,
.table-panel,
.attendance-panel,
.settings-panel,
.preview-panel,
.auth-panel {
    padding: 1rem;
}

.auth-panel {
    display: grid;
    gap: 0.9rem;
    max-width: 720px;
}

.form-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr 1fr;
}

.form-field {
    display: grid;
    gap: 0.35rem;
}

.form-field label {
    font-weight: 800;
}

.form-message {
    border-radius: 7px;
    font-weight: 700;
    padding: 0.75rem;
}

.form-message.success {
    background: color-mix(in srgb, var(--success) 18%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--success) 55%, var(--line));
    color: var(--ink);
}

.form-message.error {
    background: color-mix(in srgb, var(--danger) 18%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--line));
    color: var(--ink);
    white-space: pre-wrap;
}

.role-checks {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
}

.role-checks label {
    align-items: center;
    color: var(--ink);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 800;
    gap: 0.35rem;
    margin: 0;
    white-space: nowrap;
}

.role-checks input {
    accent-color: var(--brand-2);
    height: 1rem;
    width: 1rem;
}

.muted-control {
    color: var(--muted) !important;
    opacity: 0.55;
}

.settings-panel {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1rem;
    max-width: 760px;
}

.settings-panel label {
    font-weight: 800;
}

.settings-group {
    display: grid;
    gap: 0.65rem;
}

.settings-row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr auto;
}

.settings-help {
    color: var(--muted);
    font-size: 0.92rem;
}

.preview-panel {
    display: grid;
    gap: 0.2rem;
    max-width: 420px;
}

.brand-preview-logo {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    display: flex;
    height: 4rem;
    justify-content: center;
    margin: 0.35rem 0;
    overflow: hidden;
    width: 4rem;
}

.brand-preview-logo img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.preview-panel span,
.preview-panel small {
    color: var(--muted);
}

.preview-panel strong {
    font-size: 1.5rem;
}

@media (max-width: 640px) {
    .settings-row {
        grid-template-columns: 1fr;
    }
}

.panel-title {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    padding-bottom: 0.75rem;
}

.panel-title h2 {
    font-size: 1rem;
    font-weight: 800;
}

.panel-title span {
    background: var(--surface-2);
    border-radius: 999px;
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.25rem 0.6rem;
}

.task-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding-left: 1.25rem;
}

.task-list li,
.activity-list div {
    gap: 0.15rem;
}

.task-list li,
.activity-list div,
.module-card {
    display: grid;
}

.activity-list {
    display: grid;
    gap: 0.85rem;
}

.data-table {
    border-collapse: collapse;
    width: 100%;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--line);
    padding: 0.85rem 0.7rem;
    text-align: left;
}

.data-table th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.empty-state {
    color: var(--muted);
    font-weight: 700;
    padding: 1rem 0;
}

.status {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.25rem 0.55rem;
}

.status.ok {
    background: color-mix(in srgb, var(--success) 20%, var(--surface));
    color: var(--ink);
}
.settings-navigation { background: var(--surface-2); display: flex; gap: 0.35rem; margin-bottom: 1rem; overflow-x: auto; padding: 0.4rem; position: sticky; top: 0; z-index: 5; }
.settings-navigation button { background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; flex: 0 0 auto; font-weight: 700; padding: 0.5rem 0.7rem; }
.settings-navigation button:hover, .settings-navigation button:focus { background: var(--surface); color: var(--ink); }
.settings-navigation button.active { background: var(--brand-2); border-color: var(--brand-2); color: var(--on-brand); }
.settings-block-heading { border-top: 1px solid var(--border); display: grid; gap: 0.2rem; margin-top: 1.25rem; padding-top: 1.25rem; scroll-margin-top: 4rem; }
.settings-block-heading:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.settings-block-heading h2, .settings-block-heading p { margin: 0; }
.settings-block-heading span { color: var(--muted); font-size: 0.85rem; }

.status.muted {
    background: var(--surface-2);
    color: var(--muted);
}

.status.warning {
    background: color-mix(in srgb, var(--warning) 22%, var(--surface));
    color: var(--ink);
}

.status.danger {
    background: color-mix(in srgb, var(--danger) 20%, var(--surface));
    color: var(--ink);
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-tab {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    font-weight: 800;
    padding: 0.45rem 0.75rem;
}

.filter-tab.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.badge-info {
    background: color-mix(in srgb, var(--success) 18%, var(--surface));
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 0.45rem;
    padding: 0.18rem 0.45rem;
}

.row-highlight {
    background: color-mix(in srgb, var(--warning) 12%, var(--surface));
}

.text-danger {
    color: #9a301d !important;
    font-weight: 800;
}

.table-select {
    min-width: 9rem;
}

.student-alerts {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.student-alert {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
}

.student-alert strong {
    font-weight: 800;
}

.student-alert span {
    color: var(--muted);
}

.student-alert.ok {
    background: color-mix(in srgb, var(--success) 18%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 55%, var(--line));
}

.student-alert.warning {
    background: color-mix(in srgb, var(--warning) 20%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 55%, var(--line));
}

.student-alert.danger {
    background: color-mix(in srgb, var(--danger) 18%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}

.payment-info-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 1rem;
}

.payment-data-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payment-data-grid div {
    background: var(--surface-2);
    border-radius: 7px;
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem;
}

.payment-data-grid span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.payment-data-grid strong {
    overflow-wrap: anywhere;
}

.payment-instructions {
    color: var(--muted);
    margin: 0.85rem 0 0;
}

.date-control {
    display: grid;
    gap: 0.35rem;
    min-width: 12rem;
}

.date-control label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.attendance-summary {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 0.9rem;
    margin-bottom: 1rem;
    max-width: 760px;
    padding: 0.8rem 1rem;
}

.attendance-summary span {
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
}

.attendance-summary small {
    color: var(--muted);
}

.attendance-panel {
    display: grid;
    gap: 0.75rem;
}

.attendance-groups { display: grid; gap: 1rem; }
.attendance-page, .wardrobe-page { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.attendance-page > .page-header, .wardrobe-page > .page-header, .attendance-page > .attendance-summary { margin-bottom: 0; }
.attendance-groups .attendance-panel { margin: 0; }
.attendance-controls { align-items: end; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.group-multiselect { min-width: 240px; position: relative; }
.group-multiselect summary {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    min-height: 38px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    position: relative;
}
.group-multiselect summary::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; content: ""; position: absolute; right: 0.75rem; top: 1rem; }
.group-multiselect-menu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: 0 14px 30px rgba(10, 24, 20, 0.18);
    display: grid;
    gap: 0.25rem;
    left: 0;
    max-height: 280px;
    min-width: 100%;
    overflow-y: auto;
    padding: 0.65rem;
    position: absolute;
    top: calc(100% + 0.3rem);
    z-index: 20;
}
.group-multiselect-menu > label { align-items: center; display: flex; gap: 0.5rem; padding: 0.35rem; white-space: nowrap; }
.group-multiselect-menu > label:hover { background: var(--surface-2); }

.attendance-row {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr repeat(3, minmax(96px, auto));
    padding: 0.75rem;
}

.attendance-student {
    display: grid;
    gap: 0.15rem;
}

.attendance-student strong {
    font-weight: 800;
}

.attendance-student small {
    color: var(--muted);
}

.attendance-action {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid #b9c5c0;
    border-radius: 7px;
    color: var(--ink);
    font-weight: 700;
    padding: 0.45rem 0.7rem;
}

.attendance-action.present.active {
    background: color-mix(in srgb, var(--success) 20%, var(--surface));
    border-color: var(--success);
    color: var(--ink);
}

.attendance-action.late.active {
    background: color-mix(in srgb, var(--warning) 20%, var(--surface));
    color: var(--ink);
    border-color: var(--warning);
}

.attendance-action.absent.active {
    background: color-mix(in srgb, var(--danger) 18%, var(--surface));
    color: var(--ink);
    border-color: var(--danger);
}

.attendance-action:disabled {
    cursor: wait;
    opacity: 0.75;
}

#blazor-error-ui {
    background: #fff4d6;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    color: #3a2a00;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading-progress {
    display: block;
    height: 8rem;
    margin: 20vh auto 1rem;
    position: relative;
    width: 8rem;
}

.loading-progress circle {
    fill: none;
    stroke: #d8dedb;
    stroke-width: 0.6rem;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.loading-progress circle:last-child {
    stroke: var(--brand-2);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
}

.loading-progress-text {
    font-weight: 800;
    inset: calc(20vh + 3.25rem) 0 auto 0;
    position: absolute;
    text-align: center;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Cargando");
}

.auth-shell {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
    min-height: 100vh;
}

.auth-brand {
    background: #163832;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
}

.auth-brand span {
    color: #d6b86a;
    font-weight: 900;
    margin-bottom: 1rem;
}

.auth-brand h1 {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1rem;
    max-width: 580px;
}

.auth-brand p {
    color: #dce9e5;
    max-width: 520px;
}

.auth-card {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.auth-card .page-header,
.auth-card .auth-panel {
    width: min(100%, 560px);
}

.auth-card .page-header {
    margin-bottom: 1rem;
}

.auth-switch {
    color: var(--muted);
    margin-top: 0.25rem;
}

.forgot-link {
    display: inline-block;
    margin: -0.25rem 0 0.75rem;
    font-size: 0.9rem;
}

.form-hint {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0;
}

.profile-panel {
    max-width: 760px;
}
.profile-page { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.profile-page > .page-header { margin-bottom: 0; }
.profile-tabs { background: var(--surface-2); display: flex; gap: 0.35rem; padding: 0.4rem; }
.profile-tabs button { background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; flex: 1; font-weight: 700; padding: 0.6rem; }
.profile-tabs button.active { background: var(--brand-2); border-color: var(--brand-2); color: var(--on-brand); }
.profile-page .profile-panel { margin: 0; }
.profile-actions { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }

.password-panel {
    margin-top: 1rem;
}

.password-reset-inline {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.65rem;
    min-width: 190px;
}

.platform-admin-list,
.platform-admin {
    display: grid;
    gap: 0.4rem;
}

.platform-admin + .platform-admin {
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.platform-admin small,
.empty-inline {
    color: var(--muted);
}

.communications-summary,
.communications-panel,
.communication-detail,
.communication-editor {
    margin-top: 1rem;
}

.communications-summary {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}

.communication-list {
    display: grid;
    gap: 0;
}

.communication-row {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    display: grid;
    gap: 0.4rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1rem 0;
    text-align: left;
    width: 100%;
}

button.communication-row {
    cursor: pointer;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.communication-row.unread {
    border-left: 3px solid var(--brand-2);
    padding-left: 0.75rem;
}

.communication-main {
    cursor: pointer;
    display: grid;
    gap: 0.35rem;
}

.communication-main p,
.communication-detail p {
    margin: 0;
    white-space: pre-wrap;
}

.communication-main small,
.communication-row small {
    color: var(--muted);
}

.communication-actions {
    align-items: flex-end;
    display: grid;
    gap: 0.4rem;
    justify-items: end;
}

.communication-type,
.new-badge {
    color: var(--brand-2);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.new-badge {
    background: var(--success);
    border: 1px solid color-mix(in srgb, #ffffff 30%, var(--success));
    border-radius: 4px;
    color: #ffffff;
    padding: 0.2rem 0.4rem;
}

.app-modal-surface.platform-reset-modal {
    max-width: 520px;
}

.platform-reset-identity {
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: grid;
    gap: 0.2rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
}

.platform-reset-identity span,
.platform-reset-identity small {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.platform-reset-actions {
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.65rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
}

@media (max-width: 640px) {
    .platform-reset-actions {
        margin-top: auto;
    }

    .platform-reset-actions .btn {
        flex: 1;
    }
}

.nav-link .nav-label {
    min-width: 0;
}

.nav-notification-badge {
    align-items: center;
    background: var(--danger);
    border: 2px solid var(--sidebar);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 900;
    height: 1.35rem;
    justify-content: center;
    margin-left: auto;
    min-width: 1.35rem;
    padding: 0 0.3rem;
}
.wardrobe-actions { align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.wardrobe-modal { max-width: 760px; }
.wardrobe-modal .settings-panel { margin: 0; }
.wardrobe-modal .settings-group { border-bottom: 0; padding-bottom: 0; }
.wardrobe-tabs { background: var(--surface-2); display: flex; gap: 0.35rem; padding: 0.4rem; }
.wardrobe-tabs button { background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; font-weight: 700; padding: 0.55rem 0.8rem; }
.wardrobe-tabs button span { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 0.72rem; margin-left: 0.35rem; padding: 0.15rem 0.4rem; }
.wardrobe-tabs button.active { background: var(--brand-2); border-color: var(--brand-2); color: var(--on-brand); }
.wardrobe-tabs button.active span { background: color-mix(in srgb, var(--surface) 20%, transparent); border-color: currentColor; color: inherit; }

.communication-detail {
    border-left: 3px solid var(--primary);
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.communication-detail.full {
    border-top: 1px solid var(--border);
}

.communication-content {
    min-height: 150px;
}

.editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.raffle-editor,
.raffle-confirmation,
.raffle-result {
    margin: 1rem 0;
}

.raffle-confirmation {
    background: var(--surface);
    border-left: 3px solid var(--warning);
    color: var(--ink);
    padding: 1rem 1.25rem;
}

.raffle-result {
    background: var(--surface);
    border-top: 4px solid var(--brand-2);
    color: var(--ink);
    padding: 1.25rem;
}

.raffle-result span,
.raffle-result p {
    color: var(--muted);
}

.raffle-result h2,
.raffle-result p {
    margin: 0.25rem 0;
}

.raffle-result .raffle-invalid {
    border-color: var(--border);
    color: var(--ink);
}

.raffles-page { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.raffles-page > .page-header { margin-bottom: 0; }
.raffle-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28); max-width: 760px; overflow: hidden; }
.raffle-modal .raffle-editor { background: var(--surface); color: var(--ink); margin: 0; padding: 0; }
.raffle-modal-header { border-bottom: 1px solid var(--border); margin: 0; padding: 1rem 1.25rem; }
.raffle-modal-header h2, .raffle-modal-header p { margin: 0; }
.raffle-primary-fields { padding: 1rem 1.25rem 0; }
.raffle-prize-field { margin: 0; padding: 0.75rem 1.25rem 0; }
.raffle-modal .raffle-participants { margin: 1rem 1.25rem 0; padding: 1rem 0 0; }
.raffle-modal .raffle-participants > .panel-title { align-items: center; border: 0; margin: 0 0 0.85rem; padding: 0; }
.raffle-modal .raffle-participants h3 { font-size: 1rem; margin: 0; }
.raffle-modal .raffle-participants .panel-title span { color: var(--muted); font-size: 0.78rem; }
.raffle-modal-footer { align-items: center; background: var(--surface-2); border-top: 1px solid var(--border); display: flex; gap: 1rem; justify-content: space-between; margin-top: 1rem; padding: 0.85rem 1.25rem; }
.raffle-modal-footer span { color: var(--muted); font-size: 0.78rem; }
.raffle-confirm-modal, .raffle-result-modal { max-width: 560px; }
.raffle-confirm-modal .raffle-confirmation, .raffle-result-modal .raffle-result { margin: 0; }

.raffle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.raffle-name {
    display: grid;
    gap: 0.3rem;
    min-width: 150px;
}

.raffle-name small {
    color: var(--muted);
    display: block;
    line-height: 1.35;
    position: static;
}

.raffle-participants {
    border-top: 1px solid var(--border);
    margin: 1rem 0;
    padding-top: 1rem;
}

.participant-multiselect {
    display: grid;
    gap: 0.65rem;
}

.participant-multiselect > label {
    font-weight: 700;
}

.selected-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    max-height: 180px;
    overflow-y: auto;
    padding: 0.15rem;
}

.participant-chip {
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: inline-flex;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.35rem 0.4rem 0.35rem 0.6rem;
}

.participant-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-chip button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.15rem;
    height: 1.35rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 1.35rem;
}

.communication-item { border-bottom: 1px solid var(--border); }
.communication-item .communication-row { border-bottom: 0; }
.communication-detail.inline { background: var(--surface-2); border-left: 3px solid var(--brand-2); margin: 0 0 0.75rem; }
.communications-panel { border-radius: 8px; overflow: hidden; }
.communications-toolbar { align-items: end; border-bottom: 1px solid var(--border); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(230px, 340px); margin: -0.25rem 0 0.5rem; padding-bottom: 1rem; }
.communications-toolbar .filter-tabs { margin: 0; }
.communications-toolbar .filter-tab { align-items: center; cursor: pointer; display: inline-flex; gap: 0.45rem; }
.communications-toolbar .filter-tab span { background: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 4px; font-size: 0.7rem; min-width: 1.35rem; padding: 0.12rem 0.3rem; text-align: center; }
.communications-toolbar .filter-tab.active span { background: rgba(255,255,255,0.18); }
.communications-search { min-width: 0; }
.communications-search input { width: 100%; }
.communication-editor { border-radius: 8px; display: grid; gap: 1rem; }
.communication-editor > .panel-title { border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.communication-editor .panel-title h2 { margin: 0.2rem 0 0; }
.communication-item { border-bottom: 1px solid var(--border); }
.communication-item:last-child { border-bottom: 0; }
.communication-item .communication-row { padding: 1rem 0.75rem; transition: background 150ms ease; }
.communication-item .communication-row:hover, .communication-item .communication-row.expanded { background: var(--surface-2); }
.communication-title-line { align-items: center; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.communication-title-line > strong { font-size: 1rem; }
.communication-type { border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.4rem; }
.communication-type.note { background: color-mix(in srgb, var(--brand-2) 10%, var(--surface)); }
.communication-type.event { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); color: var(--ink); }
.communication-toggle { align-items: center; border: 1px solid var(--border); border-radius: 4px; display: inline-flex; font-size: 1rem; height: 28px; justify-content: center; width: 28px; }
.communication-detail.inline { border-left: 0; border-top: 1px solid var(--border); margin: 0; padding: 1.25rem; }
.communication-detail-heading { border-bottom: 1px solid var(--border); padding-bottom: 0.85rem; }
.communication-detail-heading > div { display: grid; gap: 0.35rem; }
.communication-detail-heading h2 { font-size: 1.35rem; margin: 0.15rem 0 0; }
.communication-detail-heading small { color: var(--muted); }
.communication-event-data { background: var(--surface); border: 1px solid var(--border); display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.communication-event-data > div { display: grid; gap: 0.25rem; padding: 0.75rem; }
.communication-event-data > div + div { border-left: 1px solid var(--border); }
.communication-event-data span { color: var(--muted); font-size: 0.75rem; }
.communication-editor .editor-actions { border-top: 1px solid var(--border); justify-content: flex-end; padding-top: 1rem; }

.auth-shell-unified {
    align-items: center;
    background-image: linear-gradient(90deg, rgba(12, 34, 29, 0.08), rgba(12, 34, 29, 0.02)), url("../images/login-background.png");
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    min-height: 100vh;
    padding: clamp(1.5rem, 5vw, 5rem);
    position: relative;
}

.auth-logo {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    left: clamp(1.5rem, 4vw, 4rem);
    position: absolute;
    top: clamp(1.25rem, 4vw, 3rem);
}

.auth-logo img {
    background: #fff;
    border-radius: 8px;
    height: 54px;
    object-fit: cover;
    width: 54px;
}

.auth-logo strong {
    color: #123d31;
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    font-weight: 900;
}

.auth-card-unified {
    display: block;
    padding: 0;
    width: min(100%, 540px);
}

.auth-card-unified .auth-panel {
    width: 100%;
}

.auth-card-unified .page-header {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(22, 56, 50, 0.12);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    color: #17211f;
    margin: 0;
    padding: 1.5rem 1.5rem 0.85rem;
    width: 100%;
}

.auth-card-unified .page-header h1 { color: #123d31; }
.auth-card-unified .page-header p { color: #65726e; }
.auth-card-unified .page-header + .auth-panel {
    border-radius: 0 0 8px 8px;
    border-top: 0;
    box-shadow: 0 24px 65px rgba(15, 36, 31, 0.22);
    padding-top: 0.5rem;
}

.unified-login-panel {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(22, 56, 50, 0.12);
    box-shadow: 0 24px 65px rgba(15, 36, 31, 0.22);
    color: #17211f;
    gap: 1rem;
    padding: clamp(1.35rem, 3vw, 2.25rem);
}

.login-heading { display: grid; gap: 0.35rem; margin: 0.35rem 0; }
.login-heading h1 { color: #123d31; font-size: 2rem; font-weight: 900; }
.login-heading p { color: #65726e; }
.unified-login-panel .form-field label { color: #17211f; }
.unified-login-panel .form-control { background: #fff; border-color: #c9d2cf; color: #17211f; min-height: 46px; }

.password-field { position: relative; }
.password-field .form-control { padding-right: 5.4rem; }
.password-field button {
    background: transparent;
    border: 0;
    color: #2f6f64;
    font-size: 0.82rem;
    font-weight: 800;
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
}

.login-submit { min-height: 48px; width: 100%; }
.login-submit:disabled { background: #165b48; border-color: #165b48; color: #fff; opacity: 0.58; }
.login-secondary-action { border-top: 1px solid #dfe7e3; display: grid; gap: 0.25rem; padding-top: 1rem; text-align: center; }
.login-secondary-action span { color: #65726e; font-size: 0.88rem; }
.login-secondary-action a { font-weight: 800; }
.login-registration-options { display: grid; gap: 0.35rem; grid-template-columns: 1fr 1fr; }
.login-registration-options a { border: 1px solid #cad7d2; border-radius: 7px; padding: 0.55rem; text-decoration: none; }
.login-registration-options a:hover { background: #eef3f1; }

@media (max-width: 900px) {
    .auth-shell-unified {
        align-items: flex-end;
        background-position: 38% center;
        padding: 7.5rem 1.5rem 1.5rem;
    }
    .auth-card-unified { width: min(100%, 520px); }
}

@media (max-width: 640px) {
    .auth-shell-unified {
        background-position: 40% top;
        background-size: auto 34vh;
        background-repeat: no-repeat;
        background-color: #f6f7fb;
        min-height: 100svh;
        padding: 8.5rem 0.75rem 0.75rem;
    }
    .auth-logo { left: 1rem; top: 1rem; }
    .auth-logo img { height: 42px; width: 42px; }
    .auth-logo strong { color: #123d31; font-size: 1.25rem; }
    .unified-login-panel { padding: 1.15rem; }
    .login-heading h1 { font-size: 1.55rem; }
    .login-registration-options { grid-template-columns: 1fr; }
    .auth-card-unified .page-header { padding: 1.1rem 1.1rem 0.7rem; }
}

.realtime-notification {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-2);
    border-radius: 8px;
    bottom: 1.25rem;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
    color: var(--ink);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    max-width: min(440px, calc(100vw - 2rem));
    padding: 1rem;
    position: fixed;
    right: 1.25rem;
    width: 100%;
    z-index: 1200;
}

.realtime-notification-content {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.realtime-notification-content strong,
.realtime-notification-content p {
    overflow-wrap: anywhere;
}

.realtime-notification-content p {
    color: var(--muted);
    font-size: 0.9rem;
}

.realtime-notification-label {
    color: var(--brand-2);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.realtime-notification-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 0.35rem;
}

.realtime-notification-close {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    display: inline-flex;
    font-size: 1.4rem;
    height: 2.25rem;
    justify-content: center;
    padding: 0;
    width: 2.25rem;
}

.realtime-notification-close:hover,
.realtime-notification-close:focus-visible {
    color: var(--ink);
}

@media (max-width: 640px) {
    .realtime-notification {
        align-items: stretch;
        bottom: 0.75rem;
        flex-direction: column;
        gap: 0.75rem;
        left: 0.75rem;
        max-width: none;
        right: 0.75rem;
        width: auto;
    }

    .realtime-notification-actions .btn {
        flex: 1;
    }
}

.form-field-wide {
    grid-column: 1 / -1;
}

.form-actions {
    margin-top: 1rem;
}

.toggle-field {
    align-items: center;
    display: flex;
    gap: 0.55rem;
}

.toggle-field input {
    accent-color: var(--brand-2);
    height: 1.05rem;
    width: 1.05rem;
}

.compact-toggle { white-space: nowrap; }
.muted-text { color: var(--muted); display: block; margin-top: 0.25rem; max-width: 220px; }
.inline-editor { display: grid; gap: 0.4rem; margin-top: 0.5rem; min-width: 210px; }
.destructive-action { margin-top: 0.5rem; }

.theme-selector {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    margin: 0;
}

.theme-selector span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.theme-selector select {
    min-width: 132px;
}

@media (max-width: 640px) {
    .theme-selector > span { display: none; }
    .theme-selector select { min-width: 118px; width: 118px; }
}

.quota-selection {
    border: 1px solid var(--line);
    border-radius: 7px;
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
}

.quota-selection-header,
.quota-selection-header > div,
.compact-actions {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    justify-content: space-between;
}

.quota-selection-header > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.1rem;
}

.quota-selection-header small { color: var(--muted); }

.quota-candidate-list {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.15rem;
    max-height: 220px;
    overflow-y: auto;
    padding-top: 0.5rem;
}

.quota-candidate-list label {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    padding: 0.35rem;
}

.quota-candidate-list label:hover { background: var(--surface-2); }

:root[data-theme]:not([data-theme="light"]) .metric-card.warning,
:root[data-theme]:not([data-theme="light"]) .module-card.warning,
:root[data-theme]:not([data-theme="light"]) .role-badges span {
    background: var(--surface-2);
    color: var(--ink);
}

:root[data-theme]:not([data-theme="light"]) .form-control,
:root[data-theme]:not([data-theme="light"]) .form-select,
:root[data-theme]:not([data-theme="light"]) .btn-outline-secondary {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.settings-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.settings-section-heading .settings-help { margin:4px 0 0; }
.integration-summary { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 18px; margin:16px 0; }
.integration-summary span { color:var(--muted); }
.payment-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; min-width:220px; }
.operation-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 28px; margin:20px 0; }
.operation-detail-grid div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.operation-detail-grid span { color:var(--muted); font-size:.82rem; }
.operation-detail-grid code { overflow-wrap:anywhere; }
@media (max-width: 720px) { .operation-detail-grid { grid-template-columns:1fr; } }

.member-editor {
    margin-bottom: 1rem;
}

.member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.members-page { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.members-page > .page-header { margin-bottom: 0; }
.member-metrics { display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.member-metrics > div { background: var(--surface); border: 1px solid var(--border); display: grid; gap: 0.25rem; min-width: 0; padding: 0.85rem 1rem; }
.member-metrics span { color: var(--muted); font-size: 0.78rem; }
.member-metrics strong { font-size: 1.45rem; }
.members-toolbar { align-items: end; background: var(--surface-2); display: grid; gap: 0.75rem; grid-template-columns: minmax(260px, 1fr) 170px 180px; padding: 0.85rem; }
.members-toolbar .form-field { margin: 0; min-width: 0; }
.member-directory { background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.member-table-wrap { min-width: 0; overflow-x: auto; }
.member-table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.member-table th { background: var(--surface-2); color: var(--muted); font-size: 0.75rem; font-weight: 700; padding: 0.7rem 1rem; text-align: left; text-transform: uppercase; }
.member-table th:first-child { width: 34%; }
.member-table th:nth-child(2) { width: auto; }
.member-table th:nth-child(3) { width: 120px; }
.member-table th:last-child { width: 120px; }
.member-table td { border-top: 1px solid var(--border); min-width: 0; padding: 0.75rem 1rem; vertical-align: middle; }
.member-table tbody tr:hover { background: var(--surface-2); }
.member-row-inactive { opacity: 0.72; }
.member-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-table-action { text-align: right; }
.member-pagination { align-items: center; border-top: 1px solid var(--border); color: var(--muted); display: flex; font-size: 0.82rem; gap: 1rem; justify-content: space-between; padding: 0.75rem 1rem; }
.member-pagination > div { align-items: center; display: flex; gap: 0.65rem; }
.paged-viewport { height: auto; min-height: 0; overflow: visible; scroll-margin-top: 1rem; }
.role-list-viewport { display: block; }
.member-modal { max-width: 760px; }
.member-fee-setting { background: var(--surface-2); display: grid; gap: 0.75rem; margin: 1rem 0; padding: 0.85rem; }
.member-fee-setting .form-field { margin: 0; }
.member-modal-actions, .member-management-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: flex-end; margin-top: 1rem; }
.member-management-section { border-bottom: 1px solid var(--border); display: grid; gap: 0.75rem; padding: 1rem 0; }
.member-section-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.member-section-heading h3 { font-size: 1rem; margin: 0; }
.member-section-heading span { color: var(--muted); font-size: 0.78rem; text-align: right; }
.member-role-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; }
.member-role-grid label { margin: 0; }
.member-inline-confirm { align-items: end; background: var(--surface-2); display: grid; gap: 0.5rem; grid-template-columns: minmax(180px, 1fr) auto auto; padding: 0.75rem; }
.member-inline-confirm .form-field { margin: 0; }
.member-delete-confirm { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-left: 3px solid var(--danger); display: grid; gap: 0.4rem; margin-top: 1rem; padding: 0.85rem; }
.member-delete-confirm > div { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.member-delete-confirm span { color: var(--muted); }

.roles-page, .groups-page { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.roles-page > .page-header, .groups-page > .page-header { margin-bottom: 0; }
.role-guide { display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.role-guide article { background: var(--surface); border: 1px solid var(--border); display: grid; gap: 0.35rem; min-width: 0; padding: 0.9rem; }
.role-guide span, .role-guide small { color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.role-guide small { color: var(--danger); font-weight: 700; }
.role-unavailable { opacity: 0.58; }
.roles-toolbar, .groups-toolbar { align-items: end; background: var(--surface-2); display: grid; gap: 0.75rem; grid-template-columns: minmax(260px, 1fr) 190px; padding: 0.85rem; }
.roles-toolbar .form-field, .groups-toolbar .form-field { margin: 0; min-width: 0; }
.role-directory, .group-directory { background: var(--surface); border: 1px solid var(--border); }
.role-row { align-items: center; display: grid; gap: 0.75rem; grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.25fr) 90px 100px; min-width: 0; padding: 0.75rem 1rem; }
.role-row + .role-row, .group-row + .group-row { border-top: 1px solid var(--border); }
.role-row:hover, .group-row:hover { background: var(--surface-2); }
.role-person, .group-name, .group-schedule, .group-count { display: grid; gap: 0.2rem; min-width: 0; }
.role-person span, .group-name span, .group-schedule small, .group-count span { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-assigned { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; }
.role-assigned span { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.5rem; }
.role-assigned .role-empty { background: transparent; border-color: transparent; color: var(--muted); font-weight: 400; padding-left: 0; }
.role-modal { max-width: 650px; }
.role-option-list { display: grid; gap: 0.65rem; margin-top: 1rem; }
.role-option-list label { align-items: center; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; display: grid; gap: 0.75rem; grid-template-columns: auto minmax(0, 1fr); margin: 0; padding: 0.85rem; }
.role-option-list input { accent-color: var(--brand-2); height: 1.15rem; width: 1.15rem; }
.role-option-list label > span { display: grid; gap: 0.2rem; }
.role-option-list small { color: var(--muted); }
.group-metrics { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.group-metrics > div { background: var(--surface); border: 1px solid var(--border); display: grid; gap: 0.25rem; padding: 0.85rem 1rem; }
.group-metrics span { color: var(--muted); font-size: 0.78rem; }
.group-metrics strong { font-size: 1.45rem; }
.group-row { align-items: center; display: grid; gap: 0.75rem; grid-template-columns: minmax(170px, 1.2fr) minmax(150px, 1fr) 90px 80px 100px; padding: 0.75rem 1rem; }
.group-count { text-align: center; }
.group-modal { max-width: 820px; }
.group-participants { border-top: 1px solid var(--border); display: grid; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; }
.group-participants .member-section-heading > div { display: grid; gap: 0.2rem; }
.group-participants .form-field { margin: 0; }
.group-participants-empty { background: var(--surface-2); color: var(--muted); margin: 0; padding: 0.75rem; text-align: center; }
.group-selected-participants { background: var(--surface-2); border: 1px solid var(--border); max-height: 190px; padding: 0.65rem; }
.group-selected-participants .participant-chip { background: var(--surface); border-color: var(--border); color: var(--ink); }
.group-selected-participants .participant-chip button { color: var(--muted); }
.group-modal-actions { align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; margin-top: 1rem; }
.group-modal-actions > div { display: flex; gap: 0.65rem; margin-left: auto; }
.inactive-card { opacity: 0.68; }
.app-modal-overlay {
    align-items: center;
    background: rgba(15, 28, 24, 0.62);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 1100;
}

.app-modal-surface {
    max-height: calc(100vh - 2rem);
    max-width: 700px;
    overflow-y: auto;
    width: 100%;
}

.payment-manager {
    background: var(--surface);
    color: var(--ink);
    border-radius: 8px;
    box-shadow: 0 20px 55px rgba(10, 24, 20, 0.28);
    margin: 0;
    padding: 1.25rem;
}

.payment-manager > .panel-title {
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
}

.payment-history-title {
    border-top: 1px solid var(--border);
    font-size: 1rem;
    margin: 0;
    padding-top: 1rem;
}

.payment-history {
    display: grid;
    gap: 0;
}

.payment-history-item {
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 0.45rem;
    padding: 1rem 0;
}

.payment-history-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.payment-history span,
.payment-history small {
    color: var(--muted);
}

.payment-history-heading .status {
    color: inherit;
}

.payment-void-button {
    justify-self: start;
    margin-top: 0.25rem;
    width: auto;
}

.field-invalid {
    border-color: #b42318 !important;
    box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.12);
}

.field-error {
    color: #b42318;
    display: block;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

.modal-form-error {
    margin: 0 0 0.75rem;
}

.reported-payments-alert {
    background: color-mix(in srgb, var(--warning) 16%, var(--surface));
    border-left: 3px solid var(--warning);
    margin: 1rem 0;
    padding: 1rem;
}

.reported-payment-list {
    display: grid;
    gap: 0.4rem;
}

.reported-payment-list button {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    color: inherit;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    text-align: left;
}

.reported-payment-list button span:first-child,
.reported-payment-list button small {
    display: block;
}

.reported-payment-list button small {
    color: var(--muted);
    margin-top: 0.2rem;
}

.reported-payment-list button > span:last-child {
    color: var(--brand-2);
    font-weight: 700;
}

.report-date-filter { align-items: end; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.report-date-filter label { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 0.25rem; }
.online-payments-page, .reports-page { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.online-payment-detail-page { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.online-payment-detail-page > .page-header, .online-payment-detail-page > .settings-panel, .online-payment-detail-page > .table-panel { margin-bottom: 0; }
.online-payments-page > .page-header, .reports-page > .page-header { margin-bottom: 0; }
.online-payments-actions { align-items: end; flex-wrap: wrap; }
.online-payments-actions .form-field { margin: 0; min-width: 190px; }
.online-payment-table td small { display: block; margin-top: 0.2rem; }
.report-selector { background: var(--surface-2); display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.4rem; }
.report-selector button { background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; flex: 0 0 auto; font-weight: 700; padding: 0.55rem 0.8rem; }
.report-selector button:hover { background: var(--surface); color: var(--ink); }
.report-selector button.active { background: var(--brand-2); border-color: var(--brand-2); color: var(--on-brand); }
.reports-page .report-section { background: var(--surface); border: 1px solid var(--border); margin-top: 0; padding: 1rem; }

.error-log-filters { align-items: end; display: grid; gap: 0.75rem; grid-template-columns: 150px 180px minmax(240px, 1fr) auto; margin-bottom: 1rem; }
.error-log-search { min-width: 0; }
.error-log-summary, .error-log-pagination { align-items: center; display: flex; justify-content: space-between; margin: 0.8rem 0; }
.error-log-pagination { justify-content: flex-end; gap: 0.6rem; }
.platform-types-panel { margin-bottom: 1rem; }
.platform-type-form { align-items: end; background: var(--surface-2); display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr 110px auto; margin: 1rem 0; padding: 1rem; }
.platform-type-actions, .table-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rich-text-editor { display: flex; flex-direction: column; min-width: 0; }
.rich-text-editor .ql-toolbar { background: var(--surface-2); border-color: var(--border); border-radius: 6px 6px 0 0; flex: 0 0 auto; }
.rich-text-editor .ql-container { background: var(--surface); border-color: var(--border); border-radius: 0 0 6px 6px; color: var(--ink); flex: 0 0 auto; font-family: inherit; font-size: 1rem; height: auto; min-height: 220px; position: relative; }
.rich-text-editor .ql-editor { min-height: 180px; }
.rich-text-editor .ql-editor img, .communication-rich-content img { display: block; height: auto; margin: 1rem auto; max-height: 640px; max-width: 100%; object-fit: contain; }
.rich-text-editor > small { color: var(--muted); display: block; flex: 0 0 auto; line-height: 1.4; margin-top: 0.5rem; position: static; }
.communication-content-field { margin-bottom: 0; min-width: 0; }
.communication-schedule { border-top: 1px solid var(--border); clear: both; display: grid; gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; position: relative; }
.communication-schedule-heading { display: grid; gap: 0.25rem; }
.communication-schedule-heading h3 { font-size: 1rem; letter-spacing: 0; margin: 0; }
.communication-schedule-heading p, .communication-schedule .form-field small { color: var(--muted); margin: 0; }
.schedule-status { border-left: 3px solid var(--success); color: var(--ink); font-size: 0.9rem; padding: 0.55rem 0.75rem; }
.schedule-status.scheduled { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border-left-color: var(--warning); }
.schedule-status.immediate { background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.communication-storage { border-top: 1px solid var(--border); padding-top: 1rem; }
.storage-progress { background: var(--surface-2); border: 1px solid var(--border); height: 12px; overflow: hidden; width: 100%; }
.storage-progress span { background: var(--success); display: block; height: 100%; min-width: 2px; transition: width 180ms ease; }
.storage-progress.warning span { background: var(--warning); }
.storage-progress.danger span { background: var(--danger); }
.storage-meta { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 0.85rem; gap: 0.75rem; justify-content: space-between; }
.storage-meta strong { color: var(--danger); }
.subscription-plan-form { display: grid; gap: 1rem; margin-bottom: 1rem; }
.subscription-modules { border: 1px solid var(--border); padding: 0.85rem; }
.subscription-modules legend { float: none; font-size: 0.9rem; font-weight: 800; margin: 0; padding: 0 0.35rem; width: auto; }
.subscription-academies .table-input { min-width: 145px; }
.subscription-page { padding-bottom: 2rem; }
.subscription-current-plan { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: grid; gap: 1.5rem; padding: 1.5rem; }
.subscription-current-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.subscription-current-heading h2 { font-size: 1.7rem; margin: 0.55rem 0 0.25rem; }
.subscription-current-heading p { color: var(--muted); margin: 0; }
.subscription-title-line { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.subscription-current-label { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.subscription-current-price { min-width: 150px; text-align: right; }
.subscription-current-price strong { display: block; font-size: 1.7rem; }
.subscription-current-price small { color: var(--muted); display: block; font-size: 0.82rem; }
.subscription-pending { background: color-mix(in srgb, var(--warning) 13%, var(--surface)); border-left: 3px solid var(--warning); display: grid; gap: 0.3rem; padding: 0.8rem 1rem; }
.subscription-pending span { color: var(--muted); }
.subscription-usage-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.subscription-usage { border: 1px solid var(--border); display: grid; gap: 0.65rem; padding: 1rem; }
.subscription-usage > div:first-child { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.subscription-usage span, .subscription-usage small { color: var(--muted); }
.subscription-progress { background: var(--surface-2); border: 1px solid var(--border); height: 10px; overflow: hidden; }
.subscription-progress span { background: var(--success); display: block; height: 100%; min-width: 2px; }
.subscription-progress.warning span { background: var(--warning); }
.subscription-progress.danger span { background: var(--danger); }
.subscription-details-grid { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.subscription-details-grid > div { border-left: 1px solid var(--border); display: grid; gap: 0.25rem; padding: 0.35rem 1rem; }
.subscription-details-grid > div:first-child { border-left: 0; padding-left: 0; }
.subscription-details-grid span { color: var(--muted); font-size: 0.78rem; }
.subscription-features { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.subscription-features h3 { font-size: 1rem; margin: 0 0 0.75rem; }
.subscription-module-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.subscription-module-list span { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; font-size: 0.82rem; padding: 0.35rem 0.55rem; }
.subscription-options { margin-top: 2rem; }
.subscription-options .section-heading { margin-bottom: 1rem; }
.subscription-options .section-heading h2 { margin-bottom: 0.25rem; }
.subscription-options .section-heading p:last-child { color: var(--muted); margin: 0; }
.subscription-plan-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.subscription-plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
.subscription-plan-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.subscription-plan-heading h3 { margin: 0 0 0.3rem; }
.subscription-plan-heading p { color: var(--muted); margin: 0; }
.subscription-plan-heading > span { background: var(--surface-2); border: 1px solid var(--border); font-size: 0.75rem; padding: 0.3rem 0.45rem; white-space: nowrap; }
.subscription-plan-price { color: var(--ink); font-size: 1.55rem; }
.subscription-plan-capacity { border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); display: grid; gap: 0.45rem; padding: 0.8rem 0; }
.subscription-plan-capacity span { color: var(--muted); }
.subscription-plan-capacity strong { color: var(--ink); }
.subscription-plan-card .btn { margin-top: auto; width: 100%; }
.subscription-loading { background: var(--surface); border: 1px solid var(--border); display: grid; gap: 0.75rem; padding: 1.5rem; }
.subscription-loading span { animation: subscription-pulse 1.2s ease-in-out infinite alternate; background: var(--surface-2); height: 16px; width: 100%; }
.subscription-loading span:last-child { width: 60%; }
.subscription-confirm-modal { max-width: 620px; }
.subscription-change-summary { align-items: center; display: grid; gap: 0.75rem; grid-template-columns: 1fr auto 1fr; }
.subscription-change-summary > div { background: var(--surface-2); display: grid; gap: 0.3rem; padding: 0.9rem; }
.subscription-change-summary span, .subscription-confirm-price span { color: var(--muted); font-size: 0.78rem; }
.subscription-change-arrow { color: var(--brand-2); font-size: 1.25rem; font-weight: 800; }
.subscription-confirm-price { align-items: center; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); display: flex; justify-content: space-between; margin: 1rem 0; padding: 1rem 0; }
.subscription-confirm-benefits { display: grid; gap: 0.5rem; }
.subscription-confirm-benefits span { color: var(--muted); padding-left: 1rem; position: relative; }
.subscription-confirm-benefits span::before { color: var(--success); content: "\2713"; left: 0; position: absolute; }
.subscription-modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }
@keyframes subscription-pulse { to { opacity: 0.45; } }
.platform-plans-page { display: grid; gap: 1.75rem; padding-bottom: 2rem; }
.platform-plans-page > .page-header { margin-bottom: 0; }
.platform-plan-metrics { display: grid; gap: 0.75rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.platform-plan-metrics > div { background: var(--surface); border: 1px solid var(--border); display: grid; gap: 0.3rem; min-width: 0; padding: 0.9rem 1rem; }
.platform-plan-metrics span { color: var(--muted); font-size: 0.78rem; }
.platform-plan-metrics strong { font-size: 1.45rem; }
.subscription-plan-form { border-radius: 8px; }
.subscription-plan-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28); max-width: 780px; overflow: hidden; }
.subscription-plan-modal .subscription-plan-form { background: var(--surface); gap: 0; margin: 0; padding: 0; }
.subscription-plan-form > .panel-title { border-bottom: 1px solid var(--border); margin: 0; padding: 1rem 1.25rem; }
.subscription-plan-form .panel-title h2 { margin-top: 0.2rem; }
.subscription-form-section { display: grid; gap: 0.85rem; padding: 1rem 1.25rem; }
.subscription-form-section + .subscription-form-section { background: var(--surface-2); border-top: 1px solid var(--border); padding-top: 1rem; }
.subscription-form-section h3 { font-size: 1rem; margin: 0; }
.subscription-plan-modal .subscription-modules { border: 0; border-top: 1px solid var(--border); margin: 0; padding: 1rem 1.25rem; }
.subscription-plan-modal .subscription-modules legend { padding-top: 1rem; }
.subscription-form-actions { background: var(--surface-2); border-top: 1px solid var(--border); display: flex; gap: 0.75rem; justify-content: flex-end; padding: 0.85rem 1.25rem; }
.platform-plans-section, .platform-academies-section { min-width: 0; }
.platform-plans-section > .section-heading, .platform-academies-section > .section-heading { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.platform-plans-section .section-heading h2, .platform-academies-section .section-heading h2 { margin: 0.15rem 0; }
.platform-plans-section .section-heading p:last-child, .platform-academies-section .section-heading p:last-child { color: var(--muted); margin: 0; }
.section-count { background: var(--surface-2); border: 1px solid var(--border); min-width: 42px; padding: 0.35rem 0.6rem; text-align: center; }
.platform-plan-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.platform-plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 1.15rem; }
.platform-plan-card-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.platform-plan-card-heading h3 { margin: 0.45rem 0 0; }
.platform-plan-card-heading small, .platform-plan-description { color: var(--muted); }
.platform-plan-badges { align-items: center; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.platform-plan-badges > span:not(.status) { background: var(--surface-2); border: 1px solid var(--border); font-size: 0.72rem; padding: 0.25rem 0.4rem; }
.platform-plan-price { font-size: 1.25rem; font-weight: 800; text-align: right; white-space: nowrap; }
.platform-plan-price small { display: block; font-size: 0.72rem; font-weight: 500; }
.platform-plan-description { margin: 0; min-height: 2.7rem; }
.platform-plan-limits { display: grid; gap: 0; grid-template-columns: 1fr 1fr; }
.platform-plan-limits > div { border-top: 1px solid var(--border); display: grid; gap: 0.2rem; padding: 0.7rem 0; }
.platform-plan-limits > div:nth-child(even) { padding-left: 0.8rem; }
.platform-plan-limits span { color: var(--muted); font-size: 0.75rem; }
.platform-plan-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.platform-plan-list { border: 1px solid var(--border); display: grid; }
.platform-plan-row { align-items: center; background: var(--surface); display: grid; gap: 1rem; grid-template-columns: minmax(190px, 1.1fr) 120px minmax(170px, 0.9fr) minmax(180px, 1fr) auto; min-width: 0; padding: 0.9rem 1rem; }
.platform-plan-row + .platform-plan-row { border-top: 1px solid var(--border); }
.platform-plan-row:hover { background: var(--surface-2); }
.platform-plan-row-name { display: grid; gap: 0.35rem; min-width: 0; }
.platform-plan-row-name h3 { margin: 0.35rem 0 0; }
.platform-plan-row-name small { color: var(--muted); }
.platform-plan-row .platform-plan-description { font-size: 0.78rem; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-plan-row-limits { display: grid; gap: 0.25rem; }
.platform-plan-row-limits span { color: var(--muted); font-size: 0.75rem; }
.platform-plan-row-limits strong { color: var(--ink); }
.platform-plan-row-modules { max-height: 68px; overflow: auto; }
.platform-plan-row .platform-plan-actions { justify-content: flex-end; margin: 0; }
.app-quick-grid { border-collapse: collapse; table-layout: fixed; width: 100%; }
.app-quick-grid thead th { background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.72rem; padding: 0.7rem 0.8rem; text-align: left; text-transform: uppercase; }
.app-quick-grid tbody td { border-bottom: 1px solid var(--border); color: var(--ink); min-width: 0; padding: 0.8rem; vertical-align: middle; }
.app-quick-grid tbody tr:last-child td { border-bottom: 0; }
.app-quick-grid tbody tr:hover { background: var(--surface-2); }
.app-quick-grid tbody tr:not(:has(td:not(:empty))) { display: none; }
.app-quick-grid th button { color: inherit; font: inherit; }
.plans-quick-grid th:nth-child(1) { width: 26%; }
.plans-quick-grid th:nth-child(2) { width: 13%; }
.plans-quick-grid th:nth-child(3) { width: 19%; }
.plans-quick-grid th:nth-child(4) { width: 24%; }
.plans-quick-grid th:nth-child(5) { width: 18%; }
.academies-quick-grid th:nth-child(1) { width: 20%; }
.academies-quick-grid th:nth-child(2) { width: 18%; }
.academies-quick-grid th:nth-child(3) { width: 9%; }
.academies-quick-grid th:nth-child(4) { width: 18%; }
.academies-quick-grid th:nth-child(5) { width: 35%; }
.audit-quick-grid-panel { background: var(--surface); border: 1px solid var(--border); }
.audit-quick-grid th:nth-child(1) { width: 110px; }
.audit-quick-grid th:nth-child(2) { width: 24%; }
.audit-quick-grid th:nth-child(3) { width: 25%; }
.audit-quick-grid th:nth-child(4) { width: auto; }
.audit-quick-grid th:nth-child(5) { width: 110px; }
.audit-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; max-width: 900px; }
.audit-modal-content { display: grid; gap: 1rem; padding: 1rem; }
.audit-modal-content > .panel-title { border-bottom: 1px solid var(--border); padding-bottom: 0.85rem; }
.quick-grid-paginator { background: var(--surface-2); border: 1px solid var(--border); border-top: 0; color: var(--ink); padding: 0.65rem 0.85rem; }
.quick-grid-paginator .paginator { color: inherit; }
.quick-grid-primary { display: grid; gap: 0.2rem; min-width: 0; }
.quick-grid-primary small { color: var(--muted); }
.platform-academy-toolbar { align-items: end; background: var(--surface-2); display: grid; gap: 0.75rem; grid-template-columns: minmax(240px, 1fr) 190px; margin-bottom: 0.75rem; padding: 0.85rem; }
.platform-academy-toolbar .form-field { margin: 0; }
.platform-academy-list { border: 1px solid var(--border); display: grid; }
.platform-academy-row { align-items: end; background: var(--surface); border-bottom: 1px solid var(--border); display: grid; gap: 0.65rem; grid-template-columns: minmax(170px, 1.2fr) minmax(150px, 1fr) 135px 145px 145px minmax(170px, 1fr) auto; padding: 0.85rem; }
.platform-academy-row:last-child { border-bottom: 0; }
.platform-academy-row .form-field { margin: 0; min-width: 0; }
.platform-academy-row .form-field label { color: var(--muted); font-size: 0.7rem; margin-bottom: 0.25rem; }
.platform-academy-name { align-self: center; display: grid; gap: 0.25rem; min-width: 0; }
.platform-academy-name strong, .platform-academy-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-academy-name span { color: var(--muted); font-size: 0.78rem; }
.audit-filters { align-items: end; background: var(--surface-2); display: grid; gap: 0.75rem; grid-template-columns: minmax(220px, 1.5fr) 150px 180px 150px 150px auto; margin-bottom: 1rem; padding: 1rem; }
.audit-filters .form-field { margin: 0; min-width: 0; }
.audit-summary { color: var(--muted); display: flex; justify-content: space-between; margin: 0.75rem 0; }
.audit-list { border: 1px solid var(--border); display: grid; }
.audit-item { background: var(--surface); border-bottom: 1px solid var(--border); min-width: 0; }
.audit-item:last-child { border-bottom: 0; }
.audit-item-main { align-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; display: grid; gap: 0.85rem; grid-template-columns: 105px minmax(180px, 1fr) minmax(220px, auto); padding: 0.85rem 1rem; text-align: left; width: 100%; }
.audit-item-main > div { display: grid; gap: 0.2rem; min-width: 0; }
.audit-item-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-action { border: 1px solid var(--border); font-size: 0.72rem; font-weight: 800; padding: 0.3rem 0.45rem; text-align: center; }
.audit-action.alta { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); }
.audit-action.modificacion { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
.audit-action.eliminacion { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }
.audit-detail { background: var(--surface-2); border-top: 1px solid var(--border); display: grid; gap: 1rem; padding: 1rem; }
.audit-meta { display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.audit-meta > div { display: grid; gap: 0.2rem; min-width: 0; }
.audit-meta span { color: var(--muted); font-size: 0.72rem; }
.audit-meta strong { overflow-wrap: anywhere; }
.audit-values { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; min-width: 0; }
.audit-values > div { min-width: 0; }
.audit-values h3 { font-size: 0.9rem; margin: 0 0 0.4rem; }
.audit-values pre { background: var(--surface); border: 1px solid var(--border); color: var(--ink); margin: 0; max-height: 340px; overflow: auto; padding: 0.75rem; white-space: pre-wrap; word-break: break-word; }
.platform-dashboard-metrics { display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.25rem; }
.platform-dashboard-metrics > div { background: var(--surface); border: 1px solid var(--border); display: grid; gap: 0.3rem; min-width: 0; padding: 1rem; }
.platform-dashboard-metrics > div.warning { border-left: 3px solid var(--warning); }
.platform-dashboard-metrics > div.danger { border-left: 3px solid var(--danger); }
.platform-dashboard-metrics span, .platform-dashboard-metrics small { color: var(--muted); }
.platform-dashboard-metrics strong { font-size: 1.55rem; overflow-wrap: anywhere; }
.platform-dashboard-metrics a { color: var(--brand-2); }
.platform-dashboard-content { display: grid; gap: 1rem; grid-template-columns: 1.5fr 1fr; margin-bottom: 1rem; }
.platform-dashboard-section { background: var(--surface); border: 1px solid var(--border); min-width: 0; padding: 1rem; }
.platform-dashboard-section > .panel-title { border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; padding-bottom: 0.75rem; }
.platform-plan-distribution { display: grid; gap: 0; }
.platform-plan-distribution > div { align-items: center; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; padding: 0.65rem 0; }
.platform-plan-distribution > div:last-child { border-bottom: 0; }
.platform-audit-today { display: grid; gap: 0.35rem; padding: 1rem 0; text-align: center; }
.platform-audit-today strong { font-size: 2.2rem; }
.platform-audit-today span { color: var(--muted); }
.platform-recent-academies { display: grid; }
.platform-recent-academies > div { align-items: center; border-bottom: 1px solid var(--border); display: grid; gap: 0.75rem; grid-template-columns: minmax(180px, 1fr) 160px 90px; padding: 0.7rem 0; }
.platform-recent-academies > div:last-child { border-bottom: 0; }
.platform-recent-academies > div > div { display: grid; gap: 0.2rem; }
.platform-recent-academies span { color: var(--muted); }
.superadmin-platform-page { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.superadmin-platform-page > .page-header, .superadmin-platform-page > .table-panel { margin-bottom: 0; }
.platform-tabs { background: var(--surface-2); display: flex; gap: 0.35rem; padding: 0.4rem; }
.platform-tabs button { background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; font-weight: 700; padding: 0.55rem 0.8rem; }
.platform-tabs button span { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 0.7rem; margin-left: 0.3rem; padding: 0.12rem 0.38rem; }
.platform-tabs button.active { background: var(--brand-2); border-color: var(--brand-2); color: var(--on-brand); }
.platform-tabs button.active span { background: transparent; border-color: currentColor; color: inherit; }
.platform-academy-search { align-items: end; background: var(--surface-2); display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 0.75rem; padding: 0.75rem; }
.platform-academy-search .form-field { margin: 0; max-width: 420px; width: 100%; }
.platform-academy-search > span { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }

@media (max-width: 1180px) {
    .platform-plan-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .platform-academy-row { grid-template-columns: 1fr 1fr 1fr; }
    .platform-academy-name { grid-column: 1 / -1; }
    .platform-academy-note { grid-column: span 2; }
    .audit-filters { grid-template-columns: 1fr 1fr 1fr; }
    .platform-dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .member-metrics { grid-template-columns: 1fr 1fr; }
    .role-guide { grid-template-columns: 1fr 1fr; }
    .role-row { grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) 90px 100px; }
}
@media (max-width: 700px) {
    .platform-tabs { overflow-x: auto; }
    .platform-tabs button { flex: 1 0 auto; }
    .platform-academy-search { align-items: stretch; display: grid; }
    .superadmin-responsive-table, .superadmin-responsive-table tbody { display: block; }
    .superadmin-responsive-table thead { display: none; }
    .superadmin-responsive-table tr { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; padding: 0.85rem; }
    .superadmin-responsive-table tr + tr { border-top: 1px solid var(--border); }
    .superadmin-responsive-table td { border: 0; min-width: 0; padding: 0; }
    .superadmin-responsive-table td::before { color: var(--muted); content: attr(data-label); display: block; font-size: 0.68rem; font-weight: 700; margin-bottom: 0.2rem; text-transform: uppercase; }
    .superadmin-responsive-table .table-actions, .platform-management-table td:nth-child(5), .platform-management-table td:nth-child(6) { grid-column: 1 / -1; }
    .superadmin-responsive-table .table-actions::before { display: none; }
    .superadmin-responsive-table .table-actions, .superadmin-responsive-table .table-actions .btn { width: 100%; }
    .platform-management-table .role-checks { display: grid; grid-template-columns: 1fr 1fr; }
    .subscription-current-heading, .subscription-plan-heading { display: grid; }
    .subscription-current-price { text-align: left; }
    .subscription-usage-grid, .subscription-details-grid { grid-template-columns: 1fr; }
    .subscription-details-grid > div, .subscription-details-grid > div:first-child { border-left: 0; border-top: 1px solid var(--border); padding: 0.75rem 0; }
    .subscription-details-grid > div:first-child { border-top: 0; }
    .subscription-change-summary { grid-template-columns: 1fr; }
    .subscription-change-arrow { transform: rotate(90deg); }
    .subscription-modal-actions { display: grid; grid-template-columns: 1fr; }
    .subscription-modal-actions .btn { width: 100%; }
    .platform-plans-header { align-items: stretch; display: grid; }
    .platform-plans-header .btn { width: 100%; }
    .platform-plan-metrics { grid-template-columns: 1fr 1fr; }
    .platform-plan-grid { grid-template-columns: 1fr; }
    .platform-plan-card-heading { display: grid; }
    .platform-plan-price { text-align: left; }
    .platform-plan-description { min-height: 0; }
    .platform-academy-toolbar, .platform-academy-row { grid-template-columns: 1fr; }
    .platform-academy-name, .platform-academy-note { grid-column: auto; }
    .platform-academy-name strong, .platform-academy-name span { white-space: normal; }
    .platform-academy-row > .btn { min-height: 42px; width: 100%; }
    .subscription-form-actions { display: grid; grid-template-columns: 1fr; }
    .subscription-form-actions .btn { width: 100%; }
    .platform-plan-row { align-items: stretch; grid-template-columns: 1fr; }
    .platform-plan-row .platform-plan-price { text-align: left; }
    .platform-plan-row .platform-plan-description { white-space: normal; }
    .platform-plan-row .platform-plan-actions { display: grid; grid-template-columns: 1fr; }
    .platform-plan-row .platform-plan-actions .btn { width: 100%; }
    .app-quick-grid, .app-quick-grid tbody { display: block; }
    .app-quick-grid thead { display: none; }
    .app-quick-grid tbody tr { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; padding: 0.85rem; }
    .app-quick-grid tbody tr + tr { border-top: 1px solid var(--border); }
    .app-quick-grid tbody td { border: 0; display: block; min-width: 0; padding: 0; }
    .app-quick-grid tbody td::before { color: var(--muted); display: block; font-size: 0.68rem; font-weight: 700; margin-bottom: 0.2rem; text-transform: uppercase; }
    .plans-quick-grid tbody td:nth-child(1), .plans-quick-grid tbody td:nth-child(4), .plans-quick-grid tbody td:nth-child(5), .academies-quick-grid tbody td:nth-child(1), .academies-quick-grid tbody td:nth-child(5) { grid-column: 1 / -1; }
    .plans-quick-grid tbody td:nth-child(1)::before { content: "Plan"; }
    .plans-quick-grid tbody td:nth-child(2)::before { content: "Precio"; }
    .plans-quick-grid tbody td:nth-child(3)::before { content: "Límites"; }
    .plans-quick-grid tbody td:nth-child(4)::before { content: "Módulos"; }
    .plans-quick-grid tbody td:nth-child(5)::before { content: "Acciones"; }
    .academies-quick-grid tbody td:nth-child(1)::before { content: "Academia"; }
    .academies-quick-grid tbody td:nth-child(2)::before { content: "Tipo"; }
    .academies-quick-grid tbody td:nth-child(3)::before { content: "Alumnos"; }
    .academies-quick-grid tbody td:nth-child(4)::before { content: "Estado"; }
    .academies-quick-grid tbody td:nth-child(5)::before { content: "Administradores"; }
    .audit-quick-grid tbody td:nth-child(1)::before { content: "Acción"; }
    .audit-quick-grid tbody td:nth-child(2)::before { content: "Entidad"; }
    .audit-quick-grid tbody td:nth-child(3)::before { content: "Contexto"; }
    .audit-quick-grid tbody td:nth-child(4)::before { content: "Fecha"; }
    .audit-quick-grid tbody td:nth-child(5)::before { content: "Detalle"; }
    .audit-quick-grid tbody td:nth-child(2), .audit-quick-grid tbody td:nth-child(3), .audit-quick-grid tbody td:nth-child(4), .audit-quick-grid tbody td:nth-child(5) { grid-column: 1 / -1; }
    .audit-filters, .audit-item-main, .audit-meta, .audit-values { grid-template-columns: 1fr; }
    .audit-filters .btn { width: 100%; }
    .audit-item-main small { white-space: normal; }
    .audit-action { justify-self: start; }
    .platform-dashboard-header { display: grid; }
    .platform-dashboard-metrics, .platform-dashboard-content { grid-template-columns: 1fr; }
    .platform-recent-academies > div { align-items: start; grid-template-columns: 1fr auto; }
    .platform-recent-academies > div > div { grid-column: 1 / -1; }
    .communications-toolbar { grid-template-columns: 1fr; }
    .communications-toolbar .filter-tabs { flex-wrap: nowrap; margin: 0 -0.25rem; overflow-x: auto; padding: 0.25rem; }
    .communications-toolbar .filter-tab { flex: 0 0 auto; }
    .communication-item .communication-row { grid-template-columns: 1fr; padding: 0.9rem 0.25rem; }
    .communication-actions { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; }
    .communication-toggle { margin-left: auto; }
    .communication-detail.inline { margin-left: -0.75rem; margin-right: -0.75rem; padding: 1rem; }
    .communication-event-data { grid-template-columns: 1fr; }
    .communication-event-data > div + div { border-left: 0; border-top: 1px solid var(--border); }
    .communication-editor .editor-actions { display: grid; grid-template-columns: 1fr; }
    .communication-editor .editor-actions .btn { width: 100%; }
    .members-header { align-items: stretch; display: grid; }
    .members-header .btn { width: 100%; }
    .members-toolbar { grid-template-columns: 1fr; }
    .member-table-wrap { overflow: visible; }
    .member-table-wrap.paged-viewport { overflow: visible; }
    .member-table, .member-table tbody { display: block; }
    .member-table thead { display: none; }
    .member-table tr { align-items: center; display: grid; gap: 0.35rem 0.75rem; grid-template-columns: minmax(0, 1fr) auto; padding: 0.8rem; }
    .member-table tr + tr { border-top: 1px solid var(--border); }
    .member-table td { border: 0; display: block; min-width: 0; padding: 0; }
    .member-table td:first-child { grid-column: 1; grid-row: 1; }
    .member-table td:nth-child(2) { color: var(--muted); grid-column: 1; grid-row: 2; }
    .member-table td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
    .member-table-action { grid-column: 2; grid-row: 2; }
    .member-email { max-width: 100%; }
    .member-pagination { align-items: stretch; display: grid; text-align: center; }
    .member-pagination > div { justify-content: space-between; }
    .member-inline-confirm { grid-template-columns: 1fr; }
    .member-inline-confirm .btn { width: 100%; }
    .member-modal-actions, .member-management-actions { display: grid; grid-template-columns: 1fr; }
    .member-modal-actions .btn, .member-management-actions .btn { width: 100%; }
    .groups-header { align-items: stretch; display: grid; }
    .groups-header .btn { width: 100%; }
    .role-guide, .group-metrics, .roles-toolbar, .groups-toolbar { grid-template-columns: 1fr; }
    .role-row { align-items: start; grid-template-columns: minmax(0, 1fr) auto; padding: 0.85rem; }
    .role-person { grid-column: 1; grid-row: 1; }
    .role-assigned { grid-column: 1 / -1; grid-row: 2; }
    .role-row > .status { grid-column: 2; grid-row: 1; }
    .role-row > .btn { grid-column: 1 / -1; grid-row: 3; width: 100%; }
    .group-row { grid-template-columns: minmax(0, 1fr) auto; padding: 0.85rem; }
    .group-name { grid-column: 1; grid-row: 1; }
    .group-row > .status { grid-column: 2; grid-row: 1; }
    .group-schedule { grid-column: 1; grid-row: 2; }
    .group-count { grid-column: 2; grid-row: 2; text-align: right; }
    .group-row > .btn { grid-column: 1 / -1; grid-row: 3; width: 100%; }
    .group-modal-actions { align-items: stretch; display: grid; }
    .group-modal-actions > .btn, .group-modal-actions > div, .group-modal-actions > div .btn { width: 100%; }
    .group-modal-actions > div { display: grid; grid-template-columns: 1fr; }
    .online-payments-header, .reports-header { align-items: stretch; display: grid; }
    .online-payment-detail-header { align-items: stretch; display: grid; }
    .online-payment-detail-header .btn { width: 100%; }
    .online-payments-actions, .report-date-filter { display: grid; grid-template-columns: 1fr; }
    .online-payments-actions .btn, .report-date-filter .btn { width: 100%; }
    .online-payment-metrics { grid-template-columns: 1fr 1fr; }
    .online-payment-table, .online-payment-table tbody { display: block; }
    .online-payment-table thead { display: none; }
    .online-payment-table tr { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; padding: 0.85rem; }
    .online-payment-table tr + tr { border-top: 1px solid var(--border); }
    .online-payment-table td { border: 0; min-width: 0; padding: 0; }
    .online-payment-table td::before { color: var(--muted); content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 700; margin-bottom: 0.15rem; text-transform: uppercase; }
    .online-payment-table td:nth-child(2), .online-payment-table td:nth-child(5), .online-payment-table td:nth-child(6), .online-payment-row-actions { grid-column: 1 / -1; }
    .online-payment-row-actions::before { display: none !important; }
    .online-payment-row-actions .payment-actions, .online-payment-row-actions .btn { width: 100%; }
    .online-payment-row-actions .payment-actions { display: grid; grid-template-columns: 1fr; min-width: 0; }
    .attendance-header, .wardrobe-header { align-items: stretch; display: grid; }
    .attendance-controls { display: grid; grid-template-columns: 1fr; width: 100%; }
    .attendance-controls .form-field, .group-multiselect { min-width: 0; width: 100%; }
    .group-multiselect-menu { position: static; }
    .attendance-summary { align-items: start; display: grid; gap: 0.2rem; }
    .attendance-row { gap: 0.55rem; grid-template-columns: repeat(3, 1fr); }
    .attendance-student { grid-column: 1 / -1; }
    .attendance-action { min-height: 42px; padding: 0.45rem 0.25rem; }
    .wardrobe-actions { display: grid; grid-template-columns: 1fr; }
    .wardrobe-actions .btn { width: 100%; }
    .wardrobe-tabs { overflow-x: auto; }
    .wardrobe-tabs button { flex: 1 0 auto; }
    .profile-page > .page-header { align-items: stretch; display: grid; }
    .profile-page > .page-header .btn, .profile-actions .btn { width: 100%; }
    .profile-password-grid { grid-template-columns: 1fr; }
    .raffles-header { align-items: stretch; display: grid; }
    .raffles-header .btn { width: 100%; }
    .raffle-actions, .raffle-result .editor-actions, .raffle-confirmation .editor-actions { display: grid; grid-template-columns: 1fr; }
    .raffle-actions .btn, .raffle-result .btn, .raffle-confirmation .btn, .raffle-editor > .btn { width: 100%; }
    .raffle-modal-header { align-items: center; display: flex; }
    .raffle-primary-fields { grid-template-columns: 1fr; }
    .raffle-modal .raffle-participants > .panel-title { align-items: stretch; display: grid; }
    .raffle-modal .raffle-participants .raffle-actions { grid-template-columns: 1fr 1fr; }
    .raffle-modal .raffle-participants .raffle-actions .btn:nth-child(3) { grid-column: 1 / -1; }
    .raffle-modal-footer { align-items: stretch; display: grid; }
    .raffle-modal-footer .btn { width: 100%; }
    .raffle-table, .raffle-table tbody { display: block; }
    .raffle-table thead { display: none; }
    .raffle-table tr { display: grid; gap: 0.55rem; grid-template-columns: 1fr 1fr; padding: 0.85rem; }
    .raffle-table tr + tr { border-top: 1px solid var(--border); }
    .raffle-table td { border: 0; padding: 0; }
    .raffle-table td::before { color: var(--muted); content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 700; margin-bottom: 0.15rem; text-transform: uppercase; }
    .raffle-table td:first-child, .raffle-table td:last-child { grid-column: 1 / -1; }
    .raffle-table td:last-child::before { display: none; }
}
.communication-rich-content { color: var(--ink); line-height: 1.65; overflow-wrap: anywhere; }
.communication-rich-content h2, .communication-rich-content h3 { font-size: 1.2rem; letter-spacing: 0; margin: 1rem 0 0.5rem; }
.communication-rich-content a { color: var(--brand-2); text-decoration: underline; }
.communication-rich-content blockquote { border-left: 3px solid var(--brand-2); margin-left: 0; padding-left: 1rem; }
.error-log-table code { overflow-wrap: anywhere; }
.error-log-detail-row td { background: var(--surface-2); padding: 1rem; }
.error-log-detail-row pre { box-sizing: border-box; max-width: 100%; min-width: 0; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.error-log-detail { display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0.8rem; }
.error-log-detail span { color: var(--muted); display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.error-log-detail pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--ink); margin: 0; max-height: 360px; overflow: auto; padding: 0.9rem; white-space: pre-wrap; }
.superadmin-errors-page, .superadmin-audit-page { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.superadmin-errors-page > .page-header, .superadmin-errors-page > .table-panel, .superadmin-audit-page > .page-header, .superadmin-audit-page > .audit-filters { margin-bottom: 0; }

@media (max-width: 900px) {
    .error-log-filters { grid-template-columns: 1fr 1fr; }
    .error-log-detail { grid-template-columns: 1fr 1fr; }
    .platform-type-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .error-log-filters, .error-log-detail { grid-template-columns: 1fr; }
    .platform-type-form { grid-template-columns: 1fr; }
    .superadmin-error-table, .superadmin-error-table tbody { display: block; }
    .superadmin-error-table thead { display: none; }
    .superadmin-error-table tr:not(.error-log-detail-row) { display: grid; gap: 0.55rem; grid-template-columns: 1fr 1fr; padding: 0.85rem; }
    .superadmin-error-table tr:not(.error-log-detail-row) + tr:not(.error-log-detail-row) { border-top: 1px solid var(--border); }
    .superadmin-error-table tr:not(.error-log-detail-row) td { border: 0; min-width: 0; padding: 0; }
    .superadmin-error-table tr:not(.error-log-detail-row) td::before { color: var(--muted); content: attr(data-label); display: block; font-size: 0.68rem; font-weight: 700; margin-bottom: 0.2rem; text-transform: uppercase; }
    .superadmin-error-table tr:not(.error-log-detail-row) td:nth-child(4), .superadmin-error-table tr:not(.error-log-detail-row) td:nth-child(5), .superadmin-error-table .error-row-action { grid-column: 1 / -1; }
    .superadmin-error-table .error-row-action::before { display: none; }
    .superadmin-error-table .error-row-action .btn { width: 100%; }
    .error-log-detail-row, .error-log-detail-row td { display: block; width: 100%; }
}
.report-section { border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 1.25rem; }
.report-section > h3 { font-size: 1rem; margin: 1.25rem 0 0.65rem; }
.report-inline-list { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); }
.report-inline-list > div { border: 1px solid var(--border); display: grid; gap: 0.25rem; padding: 0.75rem; }
.report-inline-list span,.report-inline-list small { color: var(--muted); }

@media (max-width: 640px) {
    .app-modal-overlay {
        align-items: stretch;
        padding: 0;
    }

    .app-modal-surface {
        max-height: 100vh;
        max-width: none;
    }

    .payment-manager {
        border-radius: 0;
        min-height: 100vh;
        padding: 1rem;
    }
}

@media (max-width: 700px) {
    button.communication-row,
    .communication-row {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .communication-actions {
        justify-items: start;
    }
}

.student-shell {
    min-height: 100vh;
}

.student-topbar {
    align-items: center;
    background: var(--header-bg);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.student-topbar strong,
.student-topbar span {
    display: block;
}

.student-topbar strong {
    font-weight: 900;
}

.student-topbar span {
    color: var(--muted);
    font-size: 0.9rem;
}

.student-content {
    margin: 0 auto;
    max-width: 1100px;
    padding: 1.5rem;
}

@media (max-width: 900px) {
    .metric-grid,
    .module-grid,
    .work-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-header,
    .page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .header-actions {
        justify-content: flex-start;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        min-height: 260px;
        padding: 2rem;
    }

    .auth-brand h1 {
        font-size: 1.9rem;
    }
}

@media (max-width: 640px) {
    .content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .dashboard-header h1,
    .page-header h1 {
        font-size: 1.55rem;
    }

    .metric-grid,
    .module-grid,
    .work-grid {
        grid-template-columns: 1fr;
    }

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

    .attendance-row {
        grid-template-columns: 1fr;
    }

    .settings-row {
        grid-template-columns: 1fr;
    }

    .payment-data-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}