:root {
    --ink: #1e293b;
    --muted: #64748b;
    --line: #cbd5e1;
    --paper: #ffffff;
    --surface: #f8fafc;
    --brand-blue: #1e3a8a;
    --brand-cyan: #3b82f6;
    --brand-teal: #3b82f6;
    --brand-mint: #3b82f6;
    --navy: #1e3a8a;
    --navy-deep: #1e293b;
    --orange: #fdd700;
    --green: #3b82f6;
    --violet: #8b5cf6;
    --dashboard-bg: #f8fafc;
    --dashboard-text: #1e293b;
    --dashboard-primary: #1e3a8a;
    --dashboard-secondary: #3b82f6;
    --dashboard-accent: #fdd700;
    --dashboard-workspace-bg: #FFFAA0;
    --schedule-open-bg: #dcfce7;
    --schedule-open-border: #86efac;
    --schedule-open-text: #14532d;
    --schedule-booked-bg: #fff1b8;
    --schedule-booked-border: #f2c94c;
    --schedule-booked-text: #102048;
    --schedule-booked-muted: #614b00;
    --schedule-closed-bg: #f1f5f9;
    --schedule-closed-border: #cbd5e1;
    --schedule-closed-text: #475569;
    --schedule-prime-bg: #fde2e2;
    --schedule-prime-border: #f8b4b4;
    --schedule-prime-booked-bg: #f8b4b4;
    --schedule-prime-booked-border: #ef8f8f;
    --schedule-prime-text: #501414;
    --schedule-prime-muted: #6f2525;
}

body.system-login-body,
body.system-login-body * {
    font-family: "Helvetica Now Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.system-login-body {
    min-height: 100vh;
    overflow: hidden;
    background: #2c221c;
    color: #ffffff;
}

.system-login-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 32px 18px;
    background: #2c221c;
    isolation: isolate;
}

.system-video-background {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
}

.system-video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    filter: brightness(1.45) saturate(1.12) contrast(0.96);
    transform: scale(1.02);
    transition: opacity 120ms linear;
}

.system-video-gradient {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: rgba(0, 0, 0, 0.03);
    pointer-events: none;
}

.system-video-vignette {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 0%, transparent 62%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 36%, rgba(0, 0, 0, 0.08));
    pointer-events: none;
}

.system-login-card {
    width: min(100%, 380px);
    padding: 31px 30px 28px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(22, 82, 112, 0.56), rgba(14, 58, 85, 0.42));
    box-shadow:
        0 24px 64px rgba(0, 9, 17, 0.32),
        0 0 32px rgba(53, 190, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    animation: system-card-enter 520ms ease-out both;
}

.system-login-brand {
    text-align: center;
}

.system-login-brand h1 {
    margin: 0;
    color: #ffffff;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 9px;
    line-height: 1;
}

.system-login-brand p {
    margin: 10px 0 22px;
    color: #58c7ff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 3px;
}

.system-login-brand span,
.system-login-form label > span:first-child {
    color: #bcecff;
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.system-login-title {
    margin: 14px 0 28px;
    text-align: center;
}

.system-login-title h2 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

.system-login-title p {
    margin: 10px 0 0;
    color: rgba(228, 246, 255, 0.82);
    font-size: 12px;
    font-weight: 800;
}

.system-login-error {
    margin: -12px 0 18px;
    padding: 10px 12px;
    border: 1px solid rgba(248, 113, 113, 0.48);
    border-radius: 6px;
    background: rgba(127, 29, 29, 0.34);
    color: #fee2e2;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.system-login-form {
    display: grid;
    gap: 18px;
}

.system-login-form label {
    display: grid;
    gap: 9px;
}

.system-login-form input[type="text"],
.system-login-form input[type="password"] {
    width: 100%;
    height: 39px;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 4px;
    outline: none;
    background: rgba(1, 15, 24, 0.92);
    color: #f8fbff;
    font-size: 14px;
    font-weight: 800;
    padding: 0 12px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.system-login-form input:focus {
    border-color: rgba(88, 199, 255, 0.78);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18), 0 0 24px rgba(88, 199, 255, 0.18);
    background: rgba(2, 20, 32, 0.96);
}

.system-password-field {
    position: relative;
    display: block;
}

.system-password-field input {
    padding-right: 46px;
}

.system-password-field button {
    position: absolute;
    top: 50%;
    right: 11px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    transform: translateY(-50%);
}

.system-password-field button:hover {
    background: rgba(88, 199, 255, 0.13);
}

.system-password-field svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.system-remember-row {
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: 10px !important;
}

.system-remember-row input {
    width: 13px;
    height: 13px;
    accent-color: #58c7ff;
}

.system-login-submit {
    height: 43px;
    border: 1px solid rgba(88, 199, 255, 0.48);
    border-radius: 999px;
    background: rgba(23, 94, 130, 0.44);
    color: #8bdcff;
    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.system-login-submit:hover {
    background: rgba(14, 165, 233, 0.2);
    box-shadow: 0 0 26px rgba(88, 199, 255, 0.26);
    color: #e0f7ff;
    transform: translateY(-1px);
}

.system-login-submit:active {
    transform: translateY(0);
}

@keyframes system-card-enter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
        box-shadow: 0 0 0 rgba(53, 190, 255, 0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    .system-login-page {
        padding: 22px 14px;
    }

    .system-login-card {
        padding: 28px 22px 24px;
    }

    .system-login-brand h1 {
        font-size: 32px;
        letter-spacing: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .system-login-card,
    .system-login-submit {
        animation: none;
        transition: none;
    }

    .system-video-background video {
        transition: none;
    }
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    overflow-y: scroll;
    background: var(--dashboard-bg);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--dashboard-bg);
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.app-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    border-right: 1px solid rgba(248, 250, 252, 0.28);
    padding: 24px 18px;
    color: #dbeafe;
    background: var(--dashboard-primary);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.brand {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 62px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--lesson-theme-text);
    text-decoration: none;
}

.brand-logo-panel {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.1);
}

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

.brand-title-panel {
    display: flex;
    min-width: 0;
    min-height: 58px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 8px 9px;
    background: rgba(255, 255, 255, 0.07);
}

.brand-mark {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 8px;
    color: white;
    background: linear-gradient(135deg, var(--dashboard-secondary), var(--dashboard-accent));
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.brand strong {
    display: block;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
}

.brand-title-panel small,
.admin-card small,
.topbar-actions small {
    display: block;
    color: inherit;
    opacity: 0.72;
}

.brand-title-panel small {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.nav-stack {
    display: grid;
    gap: 18px;
}

.nav-group {
    display: grid;
    gap: 8px;
}

.nav-group p {
    margin: 0 0 4px;
    color: #99b5d9;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.nav-link {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    padding: 0 14px;
    color: #dbeafe;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
    will-change: background, color, box-shadow;
}

.nav-link:hover,
.nav-link.is-active {
    color: #1e293b;
    background: var(--dashboard-accent);
    box-shadow: 0 12px 28px rgba(253, 215, 0, 0.24);
}

.nav-link svg,
.icon-button svg,
.primary-action svg,
.ai-form svg,
.row-action svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.25;
}

.admin-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.08);
}

.admin-card img,
.topbar-actions img {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    object-fit: cover;
}

.admin-card strong {
    display: block;
    color: var(--lesson-theme-text);
}

.admin-card button,
.icon-button,
.row-action {
    display: grid;
    border: 0;
    place-items: center;
    color: inherit;
    background: transparent;
}

.workspace {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid rgba(217, 227, 242, 0.8);
    padding: 14px 34px;
    background: rgba(250, 253, 255, 0.88);
    backdrop-filter: blur(16px);
}

.search-field,
.student-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.search-field {
    width: min(620px, 100%);
    padding: 0 14px;
}

.search-field input,
.student-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
}

.search-field input {
    min-height: 44px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-button {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: var(--ink);
}

.icon-button span {
    position: absolute;
    top: 2px;
    right: 3px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: var(--orange);
    font-size: 11px;
    font-weight: 800;
}

.content {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
    align-content: start;
    margin: 20px 24px 24px;
    padding: 0;
    height: calc(100dvh - 44px);
    min-height: calc(100vh - 44px);
    overflow-x: hidden;
    background: transparent;
}

.dashboard-workspace {
    display: grid;
    gap: 24px;
    align-content: start;
    grid-auto-rows: max-content;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-top: 18px;
    border: 1px solid rgba(233, 215, 112, 0.72);
    border-radius: 8px;
    padding: 24px;
    background-color: #FFFAA0;
    background: var(--dashboard-workspace-bg);
    box-shadow: 0 12px 28px rgba(23, 67, 124, 0.045);
}

.page-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.page-heading p {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
}

.page-heading h1 {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 16px;
    font-weight: 500;
}

.app-heading-bar {
    align-items: center;
    min-height: 74px;
    border-bottom: 1px solid rgba(30, 58, 138, 0.18);
    border-radius: 8px;
    background: var(--dashboard-primary);
    overflow: hidden;
}

.content > .page-heading.app-heading-bar {
    margin: 0;
    padding: 0 34px;
}

.app-heading-bar .breadcrumb,
.app-heading-bar .breadcrumb a,
.app-heading-bar .breadcrumb strong,
.app-heading-bar .breadcrumb span {
    color: #f8fafc;
}

.app-heading-bar .breadcrumb {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.app-heading-bar > div {
    display: grid;
    gap: 5px;
}

.app-heading-bar p,
.app-heading-bar h1 {
    color: #ffffff;
}

.app-heading-bar p {
    font-size: 24px;
    line-height: 1.1;
}

.app-heading-bar h1 {
    margin: 8px 0 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
}

.logout-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    border: 1px solid rgba(214, 231, 255, 0.22);
    min-height: 46px;
    border-radius: 8px;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.logout-form {
    display: block;
    margin-top: auto;
}

.logout-link span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.logout-link svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.25;
}

.finance-overview-page {
    align-content: start;
    gap: 18px;
}

.finance-overview {
    margin: 0 -20px;
    padding: 20px 20px 24px;
    background: #dbeafe;
}

.finance-overview h1 {
    margin: 0;
    color: #1e293b;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}

.finance-overview p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
}

.finance-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 16px;
}

.finance-stat {
    display: flex;
    min-height: 130px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #cbdcf3;
    border-radius: 8px;
    padding: 20px;
    background: #ffffff;
}

.finance-stat p {
    margin: 0 0 8px;
    color: #5b6a84;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.finance-stat strong {
    display: block;
    color: #1e293b;
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
}

.finance-stat small {
    display: block;
    margin-top: 5px;
    color: #536482;
    font-size: 12px;
    font-weight: 900;
}

.finance-stat span {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.finance-stat-blue span {
    color: #225df4;
    background: #edf4ff;
}

.finance-stat-green span {
    color: #10a66b;
    background: #dcfce9;
}

.finance-stat-orange span {
    color: #e18a06;
    background: #fff8df;
}

.finance-stat-violet span {
    color: #8a31ee;
    background: #f6ebff;
}

.finance-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-tabs button {
    display: flex;
    min-height: 78px;
    align-items: center;
    gap: 14px;
    border: 1px solid #c8ddf7;
    border-radius: 0;
    padding: 0 30px;
    color: #1e293b;
    background: #e4f2ff;
    text-align: left;
}

.finance-tabs button.is-active {
    background: #ffffff;
}

.finance-tabs button > span:first-child {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 6px;
    color: #265ff5;
    background: #eef5ff;
}

.finance-tabs strong,
.finance-tabs small {
    display: block;
}

.finance-tabs strong {
    font-size: 16px;
    font-weight: 900;
}

.finance-tabs small {
    color: #50627e;
    font-size: 12px;
    font-weight: 800;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #52688e;
    font-size: 13px;
    font-weight: 800;
}

.breadcrumb a {
    color: #52688e;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--brand-blue);
}

.breadcrumb strong {
    color: var(--ink);
}

.breadcrumb svg {
    width: 14px;
    height: 14px;
    color: #7f92b4;
}

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

.metric-card {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 120px;
    border: 1px solid rgba(217, 227, 242, 0.74);
    border-radius: 8px;
    padding: 22px;
    background: var(--paper);
    box-shadow: 0 18px 40px rgba(10, 34, 70, 0.06);
}

.metric-card > span {
    display: grid;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
}

.metric-card p,
.panel-title p {
    margin: 0;
    color: #4a5d82;
    font-size: 13px;
    font-weight: 800;
}

.metric-card strong {
    display: block;
    margin-top: 4px;
    font-size: 30px;
    line-height: 1;
}

.metric-card small {
    display: block;
    margin-top: 8px;
    color: #1f9d67;
    font-weight: 800;
}

.accent-orange > span {
    color: var(--orange);
    background: rgba(255, 107, 26, 0.16);
}

.accent-green > span {
    color: var(--green);
    background: rgba(34, 197, 94, 0.15);
}

.accent-blue > span {
    color: var(--brand-blue);
    background: rgba(59, 130, 246, 0.14);
}

.accent-violet > span {
    color: var(--violet);
    background: rgba(139, 92, 246, 0.14);
}

.panel {
    border: 1px solid rgba(217, 227, 242, 0.82);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 50px rgba(10, 34, 70, 0.08);
}

.panel-title,
.table-toolbar,
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-title {
    margin-bottom: 16px;
}

.panel-title h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
}

.finance-records {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid #c8ddf7;
    background: #ffffff;
}

.finance-records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
}

.finance-records-header h2 {
    margin: 0;
    color: #1e293b;
    font-size: 22px;
    font-weight: 900;
}

.finance-records-header p {
    margin: 8px 0 0;
    color: #5a6d89;
    font-size: 14px;
    font-weight: 800;
}

.finance-records .table-wrap {
    max-width: 100%;
    border-color: #d7e4f5;
    border-radius: 0;
    background: transparent;
}

.finance-records table {
    min-width: 860px;
}

.finance-records th {
    color: #53627a;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.finance-records th,
.finance-records td {
    padding: 16px 14px;
    font-size: 14px;
}

.finance-records .secondary-action {
    flex: 0 0 auto;
    white-space: nowrap;
}

.finance-records td {
    font-weight: 800;
}

.finance-records tfoot td {
    background: #dbeafe;
    border-bottom: 0;
}

.finance-filters {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid #e1ebf8;
    padding: 0 24px 16px;
}

.finance-filters label {
    display: grid;
    gap: 7px;
}

.finance-filters label span {
    color: #64748f;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.finance-filters select,
.finance-filters > strong {
    min-height: 38px;
    border: 1px solid #c8ddf7;
    border-radius: 7px;
    padding: 0 14px;
    color: #1e293b;
    background: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.finance-filters > strong {
    display: inline-flex;
    align-items: center;
    color: #173d8c;
}

.finance-gateway-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    border-top: 1px solid #e1ebf8;
    padding: 0 24px 18px;
}

.finance-gateway-selector button {
    display: grid;
    gap: 4px;
    min-height: 70px;
    border: 1px solid #c8ddf7;
    border-radius: 8px;
    padding: 14px 16px;
    color: #1e293b;
    background: #f8fbff;
    text-align: left;
}

.finance-gateway-selector button.is-active {
    border-color: #1d3a8a;
    background: #dbeafe;
}

.finance-gateway-selector strong,
.finance-gateway-selector small {
    display: block;
}

.finance-gateway-selector strong {
    font-size: 15px;
    font-weight: 900;
}

.finance-gateway-selector small {
    color: #53627a;
    font-size: 12px;
    font-weight: 900;
}

.finance-empty-state {
    padding: 34px 18px !important;
    color: #53627a;
    text-align: center;
    font-weight: 900;
}

.finance-open-payments {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    font-size: 14px;
}

.finance-open-payments svg,
.finance-stat svg,
.finance-tabs svg {
    width: 18px;
    height: 18px;
}

.ai-form button,
.primary-action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    padding: 0 18px;
    color: white;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-mint));
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(6, 175, 210, 0.26);
}

.table-toolbar {
    margin-bottom: 16px;
}

.student-search {
    min-width: 290px;
    padding: 0 12px;
}

.student-search input,
.table-toolbar select {
    min-height: 42px;
}

.table-toolbar select {
    min-width: 170px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: var(--paper);
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid #edf2f8;
    border-radius: 8px;
}

table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

th {
    color: #23395f;
    background: #f7fbff;
    font-size: 13px;
    text-align: left;
}

th,
td {
    padding: 13px 14px;
    border-bottom: 1px solid #edf2f8;
    vertical-align: middle;
}

td {
    color: #15284e;
    font-size: 14px;
}

td small {
    display: block;
    color: #52688e;
}

tbody tr:hover {
    background: #fbfdff;
}

.student-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-cell a {
    color: inherit;
    font-weight: 900;
    text-decoration: none;
}

.student-cell a:hover {
    color: var(--brand-blue);
}

.student-cell img {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #eef6ff;
}

.manager-avatar-link {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 999px;
}

.manager-name-link {
    color: #0f2f6f;
}

.manager-profile-page .dashboard-workspace {
    align-content: start;
}

.manager-profile-card {
    overflow: hidden;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    background: #ffffff;
}

.manager-profile-card > header {
    padding: 18px;
    border-bottom: 1px solid #dbe6f5;
    color: #ffffff;
    background: #00509D;
}

.flag {
    display: inline-grid;
    min-width: 28px;
    min-height: 19px;
    place-items: center;
    border-radius: 3px;
    margin-right: 8px;
    color: white;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-mint));
    font-size: 10px;
    font-weight: 900;
}

.level-badge,
.status-badge {
    display: inline-flex;
    min-width: 56px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 10px;
    font-weight: 900;
}

.level-starter {
    color: #26344f;
    background: #e9eef5;
}

.level-a1 {
    color: #876a00;
    background: #fff0a8;
}

.level-a2 {
    color: #047747;
    background: #c7f5df;
}

.level-b1 {
    color: #0746b8;
    background: #c9ddff;
}

.level-b2 {
    color: #6d28d9;
    background: #e6d5ff;
}

.level-associate {
    color: #047747;
    background: #c7f5df;
}

.level-advanced {
    color: #0746b8;
    background: #c9ddff;
}

.level-senior {
    color: #6d28d9;
    background: #e6d5ff;
}

.lesson-progress {
    display: grid;
    gap: 7px;
    min-width: 92px;
}

.lesson-progress span {
    position: relative;
    display: block;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5ebf3;
}

.lesson-progress span::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--progress);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan), var(--brand-mint));
    content: "";
}

.status-badge {
    color: #057345;
    background: #cdf7df;
}

.status-badge.is-completed {
    color: #0751b8;
    background: #dbeafe;
}

.status-badge.is-paused {
    color: #876a00;
    background: #fff0a8;
}

.rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8a5a00;
    font-weight: 900;
}

.rating-pill svg {
    width: 16px;
    height: 16px;
    fill: #f6b51e;
    stroke: #f6b51e;
}

.row-action {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #1f3159;
}

.row-action:hover,
.icon-button:hover {
    background: #eef6ff;
}

.pagination {
    justify-content: flex-end;
    margin-top: 16px;
}

.pagination button {
    display: grid;
    min-width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: #ffffff;
    font-weight: 800;
}

.pagination .is-current {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-mint));
}

.schedule-access {
    border-color: #c7e2ff;
    background: #ffffff;
}

.quick-access-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.quick-access-heading p {
    margin: 0 0 6px;
    color: #245dd8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.quick-access-heading h2 {
    margin: 0;
    color: #0b1b4f;
    font-size: 22px;
    font-weight: 900;
}

.secondary-action {
    min-height: 40px;
    border: 1px solid #bedcff;
    border-radius: 8px;
    padding: 0 16px;
    color: #2259d7;
    background: #eef6ff;
    font-weight: 900;
}

.schedule-filter-grid {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(280px, 1fr) minmax(280px, 1fr);
    gap: 14px;
}

.schedule-filter-grid label {
    display: grid;
    gap: 7px;
}

.schedule-filter-grid span {
    color: #465879;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.schedule-filter-grid select {
    min-height: 48px;
    width: 100%;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 0 16px;
    color: #111b3d;
    background: #ffffff;
    font-weight: 800;
}

.schedule-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    border-top: 1px solid #e3edf9;
    border-bottom: 1px solid #d6e6f8;
    padding: 12px 16px;
    background: #f7fbff;
}

.week-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.week-controls button {
    display: inline-grid;
    min-width: 42px;
    height: 40px;
    place-items: center;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    color: #215bd7;
    background: #ffffff;
    font-weight: 900;
}

.week-controls button:nth-child(2) {
    min-width: 76px;
    padding: 0 16px;
}

.week-controls svg {
    width: 18px;
    height: 18px;
}

.schedule-calendar-toolbar strong {
    color: #6a7894;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.schedule-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 14px;
    color: #2f456e;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 12px;
    background: #eef5ff;
    font-weight: 700;
    font-size: 13px;
}

.legend-item.is-historical {
    color: #b54c12;
    background: #fff7d6;
}

.legend-item.is-assigned {
    color: #174db6;
    background: #eaf3ff;
}

.legend-item.is-open {
    color: #61708c;
    background: #eef3f9;
}

.schedule-legend .legend-item i {
    width: 16px;
    height: 16px;
}

.schedule-wrap {
    margin-top: 10px;
}

.schedule-grid {
    width: 100%;
    min-width: 1260px;
    border-collapse: separate;
    border-spacing: 2px;
}

.schedule-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 10px;
    border: 0;
    border-radius: 8px;
    background: #dceafd;
    color: #0d1f58;
    text-align: center;
}

.schedule-grid thead th strong,
.schedule-grid thead th span {
    display: block;
}

.schedule-grid thead th strong {
    font-size: 14px;
    font-weight: 900;
}

.schedule-grid thead th span {
    margin-top: 3px;
    color: #60708a;
    font-size: 12px;
    font-weight: 800;
}

.schedule-grid th,
.schedule-grid td {
    border: 1px solid #dbe6f2;
}

.schedule-grid th {
    font-size: 12px;
}

.schedule-grid td {
    position: relative;
    height: 62px;
    width: 14%;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

.time-slot-label {
    width: 150px;
    min-width: 150px;
    border-radius: 8px;
    color: #5726a3;
    background: #f4efff;
    font-size: 15px;
    font-weight: 900;
    position: sticky;
    left: 0;
    z-index: 1;
}

.schedule-slot {
    height: 62px;
    border-radius: 8px;
}

.schedule-slot strong {
    display: block;
    margin-bottom: 3px;
    color: #1b4cae;
    font-size: 13px;
    font-weight: 900;
}

.schedule-slot span,
.schedule-slot small {
    display: block;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.schedule-slot small {
    color: #51708f;
}

.schedule-slot.empty {
    background: #e8eef6;
    color: #93a6cb;
}

.slot-selector {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border: 1px solid #cad8e8;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(8, 24, 63, 0.14);
}

.schedule-slot.occupied {
    color: #103463;
}

.schedule-slot.is-assigned {
    border-color: #c7dfff;
    background: #eef6ff;
}

.schedule-slot.is-historical {
    color: #bf551a;
    border-color: #ffe497;
    background: #fff9e9;
    text-transform: uppercase;
}

.user-management-page {
    gap: 22px;
}

.system-users-panel {
    overflow: hidden;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(10, 34, 70, 0.08);
}

.system-users-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #cfe0f8;
    padding: 14px 18px;
    background: #dcecff;
}

.system-users-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
}

.system-users-icon {
    display: grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid #bcd6fb;
    border-radius: 999px;
    color: var(--dashboard-secondary);
    background: #f7fef9;
}

.system-users-icon svg {
    width: 23px;
    height: 23px;
}

.system-users-header h2 {
    margin: 0;
    color: #0a1c4f;
    font-size: 21px;
    font-weight: 900;
}

.system-users-header p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.system-account-action {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 40px;
    padding: 0 18px;
    text-transform: uppercase;
}

.system-user-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #d9e7f9;
    padding: 14px 20px;
    background: #eef6ff;
}

.system-user-tabs button {
    min-height: 38px;
    border: 1px solid #d5e1f1;
    border-radius: 8px;
    padding: 0 18px;
    color: #334463;
    background: #ffffff;
    font-weight: 900;
}

.system-user-tabs button.is-active {
    color: #ffffff;
    border-color: transparent;
    background: var(--dashboard-primary);
    box-shadow: 0 10px 22px rgba(34, 88, 223, 0.2);
}

.system-users-table-wrap {
    min-height: 580px;
    overflow-x: auto;
    background: #ffffff;
}

.system-users-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
}

.system-users-table th {
    padding: 12px 18px;
    color: #4b5c77;
    background: #dcecff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-align: left;
    text-transform: uppercase;
}

.system-users-table td {
    height: 58px;
    border-bottom: 1px solid #e3edf8;
    padding: 10px 18px;
    color: #1a2b50;
    font-size: 14px;
    font-weight: 800;
}

.user-code {
    color: #244e9f;
    font-weight: 900;
}

.user-profile-link,
.user-name-link {
    color: #244e9f;
    text-decoration: none;
}

.user-profile-link:hover,
.user-name-link:hover {
    color: var(--dashboard-primary);
    text-decoration: underline;
}

.user-name-link {
    display: block;
    color: #1a2b50;
    font-weight: 900;
}

.system-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.system-user-cell img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.system-user-cell strong,
.system-user-cell small {
    display: block;
}

.system-user-cell small {
    color: #687997;
    font-size: 12px;
    font-weight: 800;
}

.role-badge {
    display: inline-flex;
    min-width: 68px;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 900;
}

.role-student {
    color: #b86b00;
    background: #fff4d7;
}

.role-teacher {
    color: #05885c;
    background: #dffbeb;
}

.role-staff {
    color: #0751b8;
    background: #dbeafe;
}

.role-admin {
    color: var(--dashboard-primary);
    background: #eaf2ff;
}

.user-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 5px 12px;
    color: #047857;
    background: #ddfaed;
    font-size: 12px;
    font-weight: 900;
}

.user-status-pill i {
    display: block;
    width: 18px;
    height: 7px;
    border-radius: 999px;
    background: #047857;
}

.user-status-pill.is-suspended {
    color: #b42318;
    background: #fee4e2;
}

.user-status-pill.is-suspended i {
    background: #b42318;
}

.system-users-table .row-action {
    border: 1px solid #d9e4f2;
    background: #ffffff;
}

.system-users-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #d9e7f9;
    padding: 16px 20px;
    background: #dcecff;
}

.system-users-pagination span,
.system-users-pagination button {
    display: inline-grid;
    min-height: 36px;
    place-items: center;
    border: 1px solid #d9e4f2;
    border-radius: 8px;
    padding: 0 12px;
    color: #1d2f56;
    background: #ffffff;
    font-weight: 900;
}

.system-users-pagination button {
    width: 36px;
}

.system-users-pagination button.is-current {
    color: #ffffff;
    border-color: transparent;
    background: var(--dashboard-primary);
}

.pricing-board {
    display: grid;
    gap: 20px;
    border: 1px solid #c7ddf5;
    border-radius: 8px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(10, 34, 70, 0.08);
}

.pricing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.pricing-toolbar h2,
.pricing-section-title h2 {
    margin: 0;
    color: #0b1f52;
    font-size: 20px;
    font-weight: 900;
}

.pricing-toolbar p {
    margin: 6px 0 0;
    color: #5d6f8f;
    font-size: 13px;
    font-weight: 800;
}

.pricing-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-toggle {
    display: flex;
    border: 1px solid #c9d8ea;
    border-radius: 8px;
    padding: 4px;
    background: #ffffff;
}

.pricing-toggle button,
.pricing-controls select {
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    padding: 0 16px;
    color: #172752;
    background: transparent;
    font-weight: 900;
}

.pricing-toggle button.is-active {
    color: #ffffff;
    background: var(--dashboard-primary);
    box-shadow: 0 10px 22px rgba(34, 88, 223, 0.18);
}

.pricing-controls select {
    min-width: 180px;
    border: 1px solid #c9d8ea;
    background: #ffffff;
}

.pricing-section-title,
.market-heading,
.package-card-top,
.package-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pricing-section-title span,
.market-heading span {
    border: 1px solid #b9d8ff;
    border-radius: 999px;
    padding: 5px 12px;
    color: #2463e8;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 900;
}

[data-package-cards-view] {
    display: grid;
    gap: 22px;
}

.market-panel {
    display: grid;
    gap: 14px;
    border: 1px solid #c5daf3;
    border-radius: 8px;
    padding: 14px;
    background: #d6e9ff;
}

.market-heading h3 {
    margin: 0;
    color: #0b1f52;
    font-size: 16px;
    font-weight: 900;
}

.package-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 12px;
}

.price-package-card {
    display: grid;
    gap: 14px;
    border: 1px solid #83e4b5;
    border-radius: 8px;
    padding: 14px;
}

.price-package-card.is-adult {
    background: #d1f8e5;
}

.price-package-card.is-kids {
    border-color: #f4d24e;
    background: #fff8be;
}

.packages-table-wrap {
    overflow-x: auto;
    border: 1px solid #c5daf3;
    border-radius: 8px;
    background: #ffffff;
}

.packages-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.packages-table th {
    padding: 13px 14px;
    color: #52617a;
    background: #dbeafe;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-align: left;
    text-transform: uppercase;
}

.packages-table td {
    border-top: 1px solid #d9e7f7;
    padding: 13px 14px;
    color: #101e4b;
    font-size: 13px;
    font-weight: 800;
}

.packages-table tbody tr.is-country-yellow td {
    background: #fff8d6;
}

.packages-table tbody tr.is-country-blue td {
    background: #eaf4ff;
}

.packages-table tbody tr.is-country-yellow:hover td {
    background: #fff3bf;
}

.packages-table tbody tr.is-country-blue:hover td {
    background: #deefff;
}

.packages-table .lesson-actions {
    position: relative;
}

.packages-table .lesson-action-menu {
    position: fixed;
    z-index: 1000;
}

.package-status-pill {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    border-radius: 999px;
    padding: 0 10px;
    color: #14532d;
    background: #dcfce7;
    font-size: 11px;
    font-weight: 900;
}

.package-status-message {
    margin: -8px 0 0;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 12px;
    color: #14532d;
    background: #dcfce7;
    font-size: 13px;
    font-weight: 900;
}

.package-modal .teacher-edit-dialog {
    width: min(820px, calc(100vw - 32px));
}

.package-delete-summary {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px;
    color: #172554;
    background: #fff7f7;
    font-weight: 900;
}

.package-delete-summary span,
.package-delete-summary small {
    color: #52637f;
}

.package-card-top small,
.price-fields small {
    display: block;
    color: #687997;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.package-card-top h4 {
    margin: 4px 0 0;
    color: #08205a;
    font-size: 18px;
    font-weight: 900;
}

.package-card-top > span {
    border: 1px solid #66db9f;
    border-radius: 8px;
    padding: 5px 12px;
    color: #0d7051;
    background: rgba(255, 255, 255, 0.36);
    font-size: 12px;
    font-weight: 900;
}

.is-kids .package-card-top > span {
    border-color: #e9bd2d;
    color: #8c6500;
}

.price-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.price-fields div {
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.9);
}

.price-fields strong {
    display: block;
    margin-top: 6px;
    color: #184eb8;
    font-size: 17px;
    font-weight: 900;
}

.package-card-footer > span {
    border-radius: 999px;
    padding: 4px 12px;
    color: #687997;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.package-card-footer > button {
    min-height: 34px;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    padding: 0 14px;
    color: var(--dashboard-primary);
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.clickable-table tbody tr {
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

.clickable-table tbody tr:hover {
    background: #f2f9ff;
    transform: translateX(2px);
}

.clickable-table .row-action {
    color: var(--dashboard-primary);
    text-decoration: none;
}

.student-profile-page {
    gap: 14px;
}

.student-profile-panel {
    overflow: hidden;
    border: 1px solid #b9d8fb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(10, 34, 70, 0.06);
}

.student-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    color: #ffffff;
    background: #00509D;
}

.student-profile-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.student-profile-identity > img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #eef6ff;
}

.student-profile-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-country-flag {
    display: inline-grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #d9e7f9;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 20px;
    line-height: 1;
}

.student-profile-title h2 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

.student-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 5px;
}

.student-profile-tags span {
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 6px;
    padding: 3px 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 12px;
    font-weight: 900;
}

.student-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    border-top: 1px solid #d8e7f8;
    border-bottom: 1px solid #d8e7f8;
    padding: 10px 18px;
    background: #d9eafa;
    scrollbar-width: thin;
}

.student-tabs button {
    flex: 0 0 auto;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    padding: 0 14px;
    color: #26344f;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.student-tabs button.is-active {
    color: #ffffff;
    background: var(--dashboard-primary);
}

.student-tabs button,
.teacher-profile-tabs button {
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

[data-panel][hidden] {
    display: none !important;
}

[data-panel]:not([hidden]),
[data-teacher-panel]:not([hidden]),
[data-settings-panel]:not([hidden]) {
    opacity: 1;
    transform: none;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 18px;
    background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
}

.student-profile-card {
    border: 1px solid #d8e7f8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(23, 67, 124, 0.06);
    overflow: hidden;
}

.student-profile-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e3edf8;
    background: #f7fbff;
}

.student-profile-card h3 {
    margin: 0;
    color: #102048;
    font-size: 17px;
    font-weight: 900;
}

.student-profile-card p {
    margin: 4px 0 0;
    color: #657590;
    font-size: 12px;
    font-weight: 800;
}

.student-profile-edit-button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #c9d8ee;
    border-radius: 8px;
    padding: 0 12px;
    color: #1f3159;
    background: #ffffff;
    font-size: 13px;
    font-weight: 900;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.student-profile-edit-button:hover,
.student-profile-edit-button:focus-visible {
    border-color: #9bb9e6;
    background: #eef6ff;
    box-shadow: 0 8px 18px rgba(30, 58, 138, 0.14);
}

.student-profile-edit-button:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.28);
    outline-offset: 2px;
}

.student-profile-edit-button:active {
    transform: translateY(1px);
}

.student-profile-edit-button svg {
    width: 16px;
    height: 16px;
}

.student-profile-kv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.student-profile-kv div {
    min-height: 74px;
    padding: 14px 18px;
    border-right: 1px solid #edf3fb;
    border-bottom: 1px solid #edf3fb;
}

.student-profile-kv div:nth-child(2n) {
    border-right: 0;
}

.student-profile-kv span {
    display: block;
    margin-bottom: 6px;
    color: #6b7890;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.student-profile-kv strong {
    display: block;
    color: #13244b;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
}

.lesson-credit-note {
    padding: 14px 18px;
    color: #315ebf;
    background: #eef6ff;
    font-size: 13px;
    font-weight: 800;
}

.student-recording-retention-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 18px 12px;
    border: 1px solid #c8dcf4;
    border-radius: 8px;
    padding: 10px 12px;
    color: #b91c1c;
    background: #f7fbff;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.student-recording-retention-note svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #2448dd;
}

.teacher-payroll-warning {
    margin: 10px 18px 8px;
    color: #b91c1c;
    background: transparent;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

.student-class-table {
    margin: 0 18px 18px;
    border-color: #d8e7f8;
}

.student-class-table table {
    min-width: 1480px;
}

.student-class-table th:nth-child(1),
.student-class-table td:nth-child(1) {
    width: 128px;
}

.student-class-table th:nth-child(6),
.student-class-table td:nth-child(6) {
    min-width: 220px;
}

.student-class-table th:nth-child(7),
.student-class-table td:nth-child(7),
.student-class-table th:nth-child(8),
.student-class-table td:nth-child(8),
.student-class-table th:nth-child(9),
.student-class-table td:nth-child(9) {
    width: 128px;
}

.student-class-table th:nth-child(10),
.student-class-table td:nth-child(10) {
    width: 150px;
}

.student-class-table td:last-child {
    text-align: center;
}

.student-class-table .lesson-actions {
    align-items: center;
    justify-content: center;
}

.student-lesson-more-button {
    width: 36px;
    height: 36px;
    border: 1px solid #c9d8ee;
    border-radius: 8px;
    color: #1f3159;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 35, 75, 0.06);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.student-lesson-more-button:hover,
.student-lesson-more-button:focus-visible,
.student-class-table .lesson-actions.is-open .student-lesson-more-button {
    border-color: #9bb9e6;
    background: #eef6ff;
    box-shadow: 0 8px 18px rgba(30, 58, 138, 0.14);
}

.student-lesson-more-button:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.28);
    outline-offset: 2px;
}

.student-lesson-more-button:active {
    transform: translateY(1px);
}

.student-class-table th:nth-child(11),
.student-class-table td:nth-child(11),
.student-class-table th:nth-child(12),
.student-class-table td:nth-child(12),
.student-class-table th:nth-child(13),
.student-class-table td:nth-child(13) {
    width: 84px;
    text-align: center;
}

.student-lesson-edit-button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #bad0f4;
    border-radius: 8px;
    padding: 0 10px;
    color: #2448dd;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.student-lesson-edit-button:hover {
    color: #ffffff;
    border-color: var(--dashboard-primary);
    background: var(--dashboard-primary);
}

.student-lesson-edit-button svg {
    width: 15px;
    height: 15px;
}

.teacher-class-table table {
    min-width: 1480px;
}

.teacher-class-table tbody tr {
    background: #ffffff;
}

.teacher-class-table tbody tr:hover {
    background: #fbfdff;
}

.teacher-class-table tbody td {
    background: #ffffff;
}

.teacher-class-table tbody tr:hover td {
    background: #fbfdff;
}

.teacher-class-table {
    overflow-x: auto;
    overflow-y: visible;
}

.teacher-class-table .lesson-action-menu {
    top: auto;
    right: 0;
    bottom: calc(100% + 8px);
    left: auto;
}

.teacher-class-table th:nth-child(11),
.teacher-class-table td:nth-child(11),
.teacher-class-table th:nth-child(12),
.teacher-class-table td:nth-child(12),
.teacher-class-table th:nth-child(13),
.teacher-class-table td:nth-child(13) {
    width: 84px;
    text-align: center;
}

.teacher-class-table td:last-child {
    text-align: center;
}

.teacher-lesson-enter-button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #b91c1c;
    border-radius: 8px;
    padding: 0 13px;
    color: #ffffff;
    background: #dc2626;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.teacher-lesson-enter-button:hover {
    border-color: #991b1b;
    background: #b91c1c;
}

.teacher-lesson-enter-button:active {
    transform: translateY(1px);
}

.student-lessons-pagination {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 10px 18px 18px;
}

.student-lessons-pagination button {
    min-width: 30px;
    height: 30px;
    border-radius: 7px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1;
}

.student-lessons-pagination button[aria-label] {
    min-width: 32px;
}

.student-lessons-pagination svg {
    width: 15px;
    height: 15px;
}

.student-schedule-wrap {
    margin-top: 0;
}

.student-schedule-periods {
    display: grid;
    gap: 18px;
}

.student-schedule-period {
    overflow: hidden;
    border: 1px solid #c2ddff;
    border-radius: 8px;
    background: #ffffff;
}

.student-schedule-period > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #d8e7f8;
    padding: 14px 18px;
    background: #eef7ff;
}

.student-schedule-period > header h4 {
    margin: 0;
    color: #102048;
    font-size: 16px;
    font-weight: 900;
}

.student-schedule-period > header p {
    margin: 3px 0 0;
    color: #657590;
    font-size: 12px;
    font-weight: 900;
}

.student-schedule-period.is-morning {
    border-color: #bfe7f1;
}

.student-schedule-period.is-morning > header {
    border-color: #c9edf4;
    background: #effdff;
}

.student-schedule-period.is-morning .time-slot-label {
    color: #0d6b78;
    background: #e9fbff;
}

.student-weekly-calendar {
    min-width: 1260px;
}

.student-admin-slot {
    cursor: pointer;
}

.student-admin-slot:hover {
    outline: 2px solid rgba(34, 88, 223, 0.22);
    outline-offset: -2px;
}

.student-admin-slot.is-closed {
    border-color: var(--schedule-closed-border);
    color: var(--schedule-closed-text);
    background: var(--schedule-closed-bg);
}

.student-admin-slot.is-prime-time {
    border-color: var(--schedule-prime-border);
    color: var(--schedule-prime-text);
    background: var(--schedule-prime-bg);
}

.student-admin-slot.is-prime-time.is-open.empty {
    border-color: var(--schedule-prime-border);
    color: var(--schedule-prime-text);
    background: var(--schedule-prime-bg);
}

.student-weekly-calendar .schedule-slot.is-prime-time.is-assigned {
    border-color: var(--schedule-prime-booked-border);
    color: var(--schedule-prime-text);
    background: var(--schedule-prime-booked-bg);
    box-shadow: inset 0 0 0 1px rgba(111, 37, 37, 0.13);
}

.time-slot-label.is-prime-time {
    border-color: var(--schedule-prime-border);
    color: var(--schedule-prime-text);
    background: var(--schedule-prime-bg);
}

.student-admin-slot.is-closed strong,
.student-admin-slot.is-closed span {
    color: var(--schedule-closed-text);
}

.student-admin-slot.is-closed small {
    color: var(--schedule-closed-text);
}

.student-admin-slot.is-open.empty {
    border-color: var(--schedule-open-border);
    color: var(--schedule-open-text);
    background: var(--schedule-open-bg);
}

.student-weekly-calendar .schedule-slot.is-assigned {
    border-color: var(--schedule-booked-border);
    color: var(--schedule-booked-text);
    background: var(--schedule-booked-bg);
    box-shadow: inset 0 0 0 1px rgba(97, 75, 0, 0.12);
}

.student-weekly-calendar .schedule-slot.is-assigned strong,
.student-weekly-calendar .schedule-slot.is-assigned span {
    color: var(--schedule-booked-text);
}

.student-weekly-calendar .schedule-slot.is-assigned small {
    color: var(--schedule-booked-muted);
}

.student-weekly-calendar .schedule-slot.is-prime-time.is-assigned strong,
.student-weekly-calendar .schedule-slot.is-prime-time.is-assigned span {
    color: var(--schedule-prime-text);
}

.student-weekly-calendar .schedule-slot.is-prime-time.is-assigned small {
    color: var(--schedule-prime-muted);
}

.student-admin-slot.is-prime-time.is-open.empty {
    border-color: var(--schedule-prime-border);
    color: var(--schedule-prime-text);
    background: var(--schedule-prime-bg);
}

.student-admin-slot.is-prime-time.is-closed {
    border-color: var(--schedule-closed-border);
    color: var(--schedule-closed-text);
    background: var(--schedule-closed-bg);
}

.student-admin-slot.is-selected {
    outline: 3px solid rgba(34, 88, 223, 0.48);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 2px #ffffff;
}

.student-admin-slot.is-cancelled {
    color: #9f1239;
    border-color: #fecdd3;
    background: #fff1f2;
}

.slot-admin-trigger {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    color: var(--dashboard-primary);
    background: rgba(255, 255, 255, 0.9);
}

.slot-admin-trigger svg {
    width: 14px;
    height: 14px;
}

.student-admin-slot.is-closed .slot-admin-trigger {
    border-color: #f0c6c6;
    color: #b91c1c;
}

.empty-slot-label {
    color: #9aabc6;
    font-size: 11px;
    font-weight: 800;
}

.student-class-table th {
    background: #c9ddff;
    text-transform: uppercase;
}

.student-detail-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
    background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
}

.student-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.student-section-title h3 {
    margin: 0;
    color: #102048;
    font-size: 19px;
    font-weight: 900;
}

.student-section-title p {
    margin: 4px 0 0;
    color: #657590;
    font-size: 13px;
    font-weight: 800;
}

.student-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.student-info-card {
    display: grid;
    gap: 8px;
    border: 1px solid #d8e7f8;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(23, 67, 124, 0.06);
}

.student-info-card span,
.student-info-card small,
.student-notes time,
.student-timeline time {
    color: #687997;
    font-size: 12px;
    font-weight: 900;
}

.student-info-card span {
    text-transform: uppercase;
}

.student-info-card strong {
    color: #102048;
    font-size: 18px;
    font-weight: 900;
}

.student-info-card p {
    margin: 0;
    color: #334463;
    font-weight: 800;
}

.student-info-card em {
    justify-self: start;
    border-radius: 999px;
    padding: 5px 12px;
    color: #0751b8;
    background: #dbeafe;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.student-info-card em.is-open {
    color: #61708c;
    background: #edf3fa;
}

.student-compact-table {
    min-width: 820px;
}

.student-compact-table th {
    background: #c9ddff;
    text-transform: uppercase;
}

.payment-history-shell {
    overflow: hidden;
    border: 1px solid #c2ddff;
    border-radius: 8px;
    background: #ffffff;
}

.payment-record-button {
    min-height: 38px;
    padding: 0 16px;
    font-size: 12px;
    text-transform: uppercase;
}

.student-header-action {
    flex: 0 0 auto;
}

.payment-history-table-wrap {
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.payment-history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.payment-col-package {
    width: 20%;
}

.payment-col-date {
    width: 10%;
}

.payment-col-money {
    width: 9%;
}

.payment-col-discount-rate {
    width: 7%;
}

.payment-col-discount-amount {
    width: 10%;
}

.payment-col-channel {
    width: 11%;
}

.payment-col-source {
    width: 10%;
}

.payment-col-reference {
    width: 10%;
}

.payment-col-action {
    width: 5%;
}

.payment-history-table th {
    height: 46px;
    padding: 11px 10px;
    color: #52627c;
    background: #c9ddff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    overflow-wrap: normal;
    white-space: normal;
    text-transform: uppercase;
    vertical-align: middle;
    word-break: normal;
}

.payment-history-table td {
    height: 62px;
    border-bottom: 1px solid #e4edf8;
    padding: 12px 10px;
    color: #102048;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: normal;
    white-space: nowrap;
}

.payment-history-table tbody tr:last-child td {
    border-bottom: 0;
}

.payment-history-table th:first-child,
.payment-history-table td:first-child {
    white-space: normal;
}

.payment-history-table th:last-child,
.payment-history-table td:last-child {
    text-align: center;
}

.payment-history-table td strong {
    font-weight: 900;
}

.payment-history-table td small {
    margin-top: 5px;
    color: #52688e;
    font-size: 12px;
    font-weight: 800;
}

.payment-negative {
    color: #d31745;
    white-space: nowrap;
}

.payment-net {
    color: #0b2d72;
    font-size: 15px;
    white-space: nowrap;
}

.payment-history-table .code-text,
.payment-history-table td:nth-child(3) strong,
.payment-history-table td:nth-child(7) strong {
    white-space: nowrap;
}

.payment-row-action {
    width: 34px;
    height: 34px;
    border: 1px solid #c8dcf4;
    color: var(--dashboard-primary);
    background: #ffffff;
}

.payment-actions-menu {
    position: relative;
    display: inline-flex;
    justify-content: center;
}

.payment-action-menu {
    position: absolute;
    right: 0;
    top: auto;
    bottom: calc(100% + 6px);
    z-index: 40;
    display: grid;
    min-width: 132px;
    overflow: hidden;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(23, 67, 124, 0.16);
}

.payment-action-menu[hidden] {
    display: none;
}

.payment-action-menu button {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0 12px;
    color: #1d2f56;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
}

.payment-action-menu button:hover {
    background: #f8fafc;
}

.payment-action-menu button.is-danger {
    color: #d31745;
}

.payment-action-menu svg {
    width: 15px;
    height: 15px;
}

.payment-history-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 58px;
    border-top: 1px solid #cfe0f8;
    padding: 10px 14px;
    background: #dbeafe;
}

.payment-history-pagination button {
    display: grid;
    min-width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    color: #1d2f56;
    background: #ffffff;
    font-weight: 900;
}

.payment-history-pagination button:disabled {
    color: #a9b7cc;
    background: transparent;
}

.payment-history-pagination .is-current {
    color: #ffffff;
    border-color: transparent;
    background: var(--dashboard-primary);
}

.referral-add-button {
    min-height: 38px;
    padding: 0 18px;
    font-size: 12px;
    text-transform: uppercase;
}

.referral-alert {
    border: 1px solid #8de8bd;
    border-radius: 8px;
    padding: 14px 18px;
    color: #06623c;
    background: #eafff3;
    font-size: 14px;
    font-weight: 900;
}

.restricted-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.referral-program-card {
    border-color: #c8ddf5;
    background: #ffffff;
}

.referral-program-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #d8e7f8;
    padding: 16px 18px;
    background: #f4f9ff;
}

.referral-program-card .referral-program-header h3 {
    border: 0;
    padding: 0;
    background: transparent;
}

.referral-program-header p {
    margin: 4px 0 0;
    color: #64758f;
    font-size: 12px;
    font-weight: 800;
}

.referral-program-header > span {
    border: 1px solid #b9efd2;
    border-radius: 999px;
    padding: 7px 11px;
    color: #047747;
    background: #effdf5;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.referral-program-body {
    gap: 16px;
}

.referral-code-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
    border: 1px solid #d9e8f8;
    border-radius: 8px;
    padding: 14px;
    background: #fbfdff;
}

.referral-code-details {
    display: grid;
    gap: 8px;
}

.referral-code-details > span {
    color: #687997;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.referral-code-details input {
    min-height: 44px;
    border-color: #c9ddf2;
    background: #eef6ff;
    font-size: 16px;
    letter-spacing: 0;
}

.referral-code-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.referral-program-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.referral-program-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

.referral-program-card .secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    white-space: nowrap;
}

.referral-program-card .is-danger {
    border-color: #f5d0d0;
    color: #b42318;
    background: #fffafa;
}

.referral-program-card .is-copy {
    border-color: #bcd8ff;
    color: #2259d7;
    background: #eef6ff;
}

.percent-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    background: #ffffff;
}

.percent-input input {
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.percent-input input:focus {
    outline: 2px solid rgba(34, 89, 215, 0.18);
    outline-offset: -2px;
}

.percent-input span {
    display: grid;
    min-height: 44px;
    place-items: center;
    border-left: 1px solid #d7e7f8;
    color: #52627c;
    background: #f4f9ff;
    font-size: 14px;
    font-weight: 900;
}

.referral-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.referral-summary span {
    display: grid;
    gap: 3px;
    border: 1px solid #d8e7f8;
    border-radius: 8px;
    padding: 10px 12px;
    background: #f7fbff;
}

.referral-summary strong {
    color: #102048;
    font-size: 18px;
    font-weight: 900;
}

.referral-summary small {
    color: #687997;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.referral-table-shell {
    overflow: visible;
    border: 1px solid #c2ddff;
    border-radius: 8px;
    background: #ffffff;
}

.referral-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.referral-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.referral-table th:nth-child(1),
.referral-table td:nth-child(1) {
    width: 16%;
}

.referral-table th:nth-child(2),
.referral-table td:nth-child(2),
.referral-table th:nth-child(3),
.referral-table td:nth-child(3) {
    width: 13%;
}

.referral-table th:nth-child(4),
.referral-table td:nth-child(4) {
    width: 12%;
}

.referral-table th:nth-child(5),
.referral-table td:nth-child(5) {
    width: 12%;
}

.referral-table th:nth-child(6),
.referral-table td:nth-child(6) {
    width: 13%;
}

.referral-table th:nth-child(7),
.referral-table td:nth-child(7) {
    width: 13%;
}

.referral-table th:nth-child(8),
.referral-table td:nth-child(8) {
    width: 16%;
}


.referral-table th {
    height: 46px;
    padding: 11px 12px;
    color: #52627c;
    background: #c9ddff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.referral-table td {
    height: 62px;
    border-bottom: 1px solid #e4edf8;
    padding: 12px;
    color: #102048;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.referral-table tbody tr:last-child td {
    border-bottom: 0;
}

.referral-table td:first-child,
.referral-table th:first-child {
    white-space: normal;
}

.referral-status {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 900;
}

.referral-status.is-completed,
.referral-status.is-paid,
.referral-status.is-qualified,
.referral-status.is-rewarded {
    color: #047747;
    border-color: #8de8bd;
    background: #dbeafe;
}

.referral-status.is-pending {
    color: #876a00;
    border-color: #ffe08a;
    background: #fff5c2;
}

.referral-status.is-cancelled,
.referral-actions button.is-danger {
    color: #d31745;
}

.referral-status.is-cancelled {
    border-color: #fecaca;
    background: #fff1f1;
}

[data-empty-referrals] td {
    color: #52627c;
    text-align: center;
    white-space: normal;
}

.referral-receipt-button,
.referral-view-receipt-button,
.referral-actions button {
    min-height: 34px;
    border: 1px solid #c8dcf4;
    border-radius: 8px;
    padding: 0 14px;
    color: var(--dashboard-primary);
    background: #ffffff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.referral-receipt-button {
    background: #f8fafc;
}

.referral-view-receipt-button {
    color: #047747;
    border-color: #a7efc8;
    background: #f0fff6;
}

.referral-view-receipt-button:disabled {
    cursor: not-allowed;
    color: #94a3b8;
    border-color: #d9e3f2;
    background: #f4f7fb;
}

.referral-receipt-button.is-uploaded {
    display: inline-grid;
    min-width: 150px;
    gap: 2px;
    padding: 6px 14px;
    color: #047747;
    border-color: #8de8bd;
    background: #dbeafe;
    line-height: 1.1;
    text-transform: none;
}

.referral-receipt-button.is-uploaded span {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.referral-receipt-button.is-uploaded small {
    max-width: 150px;
    overflow: hidden;
    color: #12633f;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.referral-actions button.is-danger {
    border-color: #ffd2d2;
    background: #fff7f7;
}

.activity-log-shell {
    overflow: hidden;
    border: 1px solid #c2ddff;
    border-radius: 8px;
    background: #ffffff;
}

.activity-log-table-wrap {
    min-height: 410px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.activity-log-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.activity-log-table th:nth-child(1),
.activity-log-table td:nth-child(1) {
    width: 16%;
}

.activity-log-table th:nth-child(2),
.activity-log-table td:nth-child(2) {
    width: 14%;
}

.activity-log-table th:nth-child(3),
.activity-log-table td:nth-child(3) {
    width: 14%;
}

.activity-log-table th:nth-child(4),
.activity-log-table td:nth-child(4) {
    width: 18%;
}

.activity-log-table th:nth-child(5),
.activity-log-table td:nth-child(5) {
    width: 38%;
}

.activity-log-table th {
    height: 46px;
    padding: 11px 14px;
    color: #52627c;
    background: #c9ddff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.activity-log-table td {
    height: 42px;
    border-bottom: 1px solid #e4edf8;
    padding: 9px 14px;
    color: #102048;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
}

.activity-log-table td:last-child {
    color: #63738f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
}

.activity-action {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d6e5f8;
    border-radius: 8px;
    padding: 0 11px;
    color: #4b5f7f;
    background: #eef6ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.activity-action.is-changed,
.activity-action.is-rescheduled {
    color: var(--dashboard-primary);
    border-color: #c7dbff;
    background: #dbeafe;
}

.activity-log-pagination {
    justify-content: space-between;
}

.activity-log-pagination > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-reset-button {
    display: inline-flex !important;
    width: auto;
    min-width: 86px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #b91c1c !important;
    border-color: #fecaca !important;
    border-radius: 8px;
    background: #fff7f7 !important;
    font-size: 13px;
    text-transform: uppercase;
}

.teacher-activity-panel {
    border-top: 1px solid #dbe6f5;
    padding: 14px;
    background: #dcecff;
}

.teacher-activity-heading {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #cfe0f8;
    padding: 16px 18px;
    background: #dbeafe;
}

.teacher-activity-heading h3 {
    margin: 0;
    color: #102048;
    font-size: 20px;
    font-weight: 900;
}

.teacher-activity-heading p {
    margin: 4px 0 0;
    color: #42536e;
    font-size: 13px;
    font-weight: 800;
}

.teacher-clear-activity-button {
    gap: 8px;
    min-width: 164px;
    height: 38px;
    padding: 0 16px;
    text-transform: none;
}

.teacher-clear-activity-button svg {
    width: 16px;
    height: 16px;
}

.teacher-activity-log-table td:nth-child(1) strong {
    white-space: normal;
}

.activity-action.is-override {
    color: #b45309;
    border-color: #fde68a;
    background: #fff7d6;
}

.activity-action.is-viewed {
    color: var(--dashboard-primary);
    border-color: #dbeafe;
    background: #eef6ff;
}

.activity-action.is-created,
.activity-action.is-uploaded,
.activity-action.is-approved,
.activity-action.is-acknowledged,
.activity-action.is-paid {
    color: #14532d;
    border-color: #a7f3d0;
    background: #dcfce7;
}

.activity-action.is-updated,
.activity-action.is-changed {
    color: #1e3a8a;
    border-color: #bfdbfe;
    background: #dbeafe;
}

.activity-action.is-deleted,
.activity-action.is-cancelled {
    color: #7f1d1d;
    border-color: #fecaca;
    background: #fee2e2;
}

.manager-activity-search {
    display: flex;
    min-width: min(320px, 100%);
    min-height: 38px;
    align-items: center;
    gap: 8px;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    padding: 0 10px;
    background: #ffffff;
}

.manager-activity-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #101e4b;
    background: transparent;
    font-size: 13px;
    font-weight: 800;
}

.manager-activity-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid #dbe6f5;
    background: #ffffff;
}

.manager-activity-filters select {
    min-height: 36px;
    border: 1px solid #cbdcf0;
    border-radius: 7px;
    padding: 0 10px;
    color: #101e4b;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.note-add-button {
    min-height: 38px;
    padding: 0 18px;
    font-size: 12px;
    text-transform: uppercase;
}

.internal-notes-shell {
    overflow: hidden;
    border: 1px solid #c2ddff;
    border-radius: 8px;
    background: #ffffff;
}

.internal-notes-heading {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #cfe0f8;
    padding: 16px 18px;
    background: #dbeafe;
}

.internal-notes-heading h3 {
    margin: 0;
    color: #102048;
    font-size: 19px;
    font-weight: 900;
}

.internal-notes-heading > span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 16px;
    color: var(--dashboard-primary);
    background: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.internal-notes-table-wrap {
    min-height: 430px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.internal-notes-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.internal-notes-table th:nth-child(1),
.internal-notes-table td:nth-child(1) {
    width: 19%;
}

.internal-notes-table th:nth-child(2),
.internal-notes-table td:nth-child(2) {
    width: 10%;
}

.internal-notes-table th:nth-child(3),
.internal-notes-table td:nth-child(3) {
    width: 10%;
}

.internal-notes-table th:nth-child(4),
.internal-notes-table td:nth-child(4) {
    width: 50%;
}

.internal-notes-table th:nth-child(5),
.internal-notes-table td:nth-child(5) {
    width: 11%;
}

.internal-notes-table th {
    height: 34px;
    padding: 9px 14px;
    color: #52627c;
    background: #c9ddff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
}

.internal-notes-table td {
    height: 42px;
    border-bottom: 1px solid #e4edf8;
    padding: 9px 14px;
    color: #102048;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    vertical-align: middle;
}

.internal-notes-table td:nth-child(4) p {
    margin: 0;
}

.note-role-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 12px;
    color: #40506d;
    background: #e7eef8;
    font-size: 12px;
    font-weight: 900;
}

.note-actions {
    align-items: flex-start;
}

.internal-notes-pagination {
    justify-content: space-between;
}

.internal-notes-pagination p {
    margin: 0;
    color: #102048;
    font-size: 15px;
    font-weight: 900;
}

.internal-notes-pagination > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-timeline,
.student-notes {
    display: grid;
    gap: 10px;
}

.student-timeline article,
.student-notes article {
    border: 1px solid #d8e7f8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(23, 67, 124, 0.05);
}

.student-timeline article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.student-timeline article > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: var(--dashboard-primary);
    background: #eef6ff;
}

.student-timeline svg {
    width: 20px;
    height: 20px;
}

.student-timeline strong,
.student-notes strong,
.restricted-grid strong {
    color: #102048;
    font-weight: 900;
}

.student-timeline p,
.student-notes p,
.restricted-grid p {
    margin: 4px 0 0;
    color: #52688e;
    font-weight: 800;
}

.student-notes article {
    padding: 16px;
}

.student-notes header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.restricted-warning {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #f3d58b;
    border-radius: 8px;
    padding: 16px 20px;
    background: #fffdf6;
}

.restricted-warning > span {
    display: grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 8px;
    color: #c25a0d;
    background: #fff1bd;
}

.restricted-warning p {
    margin: 0;
    color: #b84f0b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.restricted-warning h3 {
    margin: 3px 0 0;
    color: #102048;
    font-size: 19px;
    font-weight: 900;
}

.restricted-warning > strong {
    margin-left: auto;
    border-radius: 8px;
    padding: 10px 18px;
    color: #ffffff;
    background: #bd4b09;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.restricted-contact-panel,
.classroom-access-panel {
    overflow: hidden;
    border: 1px solid #f4dc9a;
    border-radius: 8px;
    background: #fffdf6;
}

.restricted-contact-panel h3,
.classroom-access-panel h3 {
    margin: 0;
    border-bottom: 1px solid #f2e4bd;
    padding: 18px 20px;
    color: #102048;
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
}

.restricted-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 20px;
}

.restricted-contact-grid article {
    display: grid;
    gap: 10px;
    min-height: 70px;
    border: 1px solid #f3dfaa;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fffefa;
}

.restricted-contact-grid span,
.classroom-access-body label span,
.invitation-preview span {
    color: #b84f0b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.restricted-contact-grid strong {
    color: #102048;
    font-size: 14px;
    font-weight: 900;
}

.restricted-contact-panel footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #f2e4bd;
    padding: 14px 20px;
    background: #fff9e8;
}

.restricted-contact-panel footer p {
    margin: 0;
    color: #b84f0b;
    font-size: 12px;
    font-weight: 900;
}

.classroom-access-panel {
    border-color: #c2ddff;
    background: #ffffff;
}

.classroom-access-panel h3 {
    border-color: #d8e7f8;
    background: #eef6ff;
}

.classroom-access-body {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.classroom-access-body label {
    display: grid;
    gap: 8px;
}

.classroom-access-body label span,
.invitation-preview span {
    color: #687997;
}

.classroom-access-body input {
    min-height: 46px;
    width: 100%;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    padding: 0 16px;
    color: #102048;
    background: #eef6ff;
    font-size: 15px;
    font-weight: 900;
}

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

.classroom-access-actions .secondary-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
}

.classroom-access-actions .is-invite {
    color: #047747;
    border-color: #b9efd2;
    background: #effdf5;
}

.classroom-access-actions .is-danger {
    color: #d31745;
    border-color: #ffd2d2;
    background: #fff7f7;
}

.invitation-preview {
    display: grid;
    gap: 14px;
    border: 1px solid #dce8f7;
    border-radius: 8px;
    padding: 14px 16px;
    background: #f7fef9;
}

.invitation-preview p {
    margin: 0;
    color: #334463;
    font-weight: 800;
}

.restricted-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.restricted-grid section {
    display: grid;
    gap: 10px;
    border: 1px solid #d8e7f8;
    border-radius: 8px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(23, 67, 124, 0.06);
}

.restricted-grid i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: #b66a00;
    background: #fff0b8;
}

.restricted-grid span {
    justify-self: start;
    border-radius: 999px;
    padding: 6px 12px;
    color: #4b5f7f;
    background: #edf3fa;
    font-size: 12px;
    font-weight: 900;
}

.legend-item.is-closed {
    color: #9f1d1d;
    background: #fff1f1;
}

.legend-item.is-selected {
    color: #174db6;
    background: #dbeafe;
}

.student-section-title .secondary-action:disabled {
    cursor: not-allowed;
    color: #8797b2;
    border-color: #d9e3f2;
    background: #f3f6fa;
}

body.has-open-modal {
    overflow: hidden;
}

.slot-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 24px;
}

.slot-modal[hidden] {
    display: none;
}

.slot-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 23, 47, 0.48);
    backdrop-filter: blur(4px);
}

.slot-modal-card {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    overflow: hidden;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(6, 23, 47, 0.22);
}

.assign-class-card {
    width: min(860px, 100%);
}

.referral-modal-card {
    width: min(760px, 100%);
}

.receipt-modal-card {
    width: min(620px, 100%);
}

.receipt-preview-card {
    width: min(880px, 100%);
}

.payment-modal-card {
    width: min(760px, 100%);
}

.teacher-document-upload-card {
    width: min(820px, calc(100vw - 48px));
}

.teacher-document-upload-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.teacher-document-upload-form input:not([type="file"]),
.teacher-document-upload-form select {
    min-height: 48px;
}

.teacher-document-upload-form textarea {
    min-height: 112px;
    resize: vertical;
}

.teacher-document-upload-zone {
    display: grid;
    min-height: 168px;
    place-items: center;
    gap: 10px;
    border: 2px dashed #b8cff1;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    background: #f8fbff;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.teacher-document-upload-zone.is-dragging {
    border-color: #2448dd;
    background: #eef6ff;
    box-shadow: inset 0 0 0 1px rgba(36, 72, 221, 0.12);
}

.teacher-document-upload-zone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.teacher-document-upload-copy {
    display: grid;
    gap: 4px;
}

.teacher-document-upload-copy strong {
    color: #102048;
    font-size: 15px;
    font-weight: 900;
}

.teacher-document-upload-copy span,
.teacher-document-upload-zone small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
}

.teacher-document-file-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid #bad0f4;
    border-radius: 8px;
    padding: 0 18px;
    color: #2448dd;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.teacher-document-file-button:hover {
    border-color: #2448dd;
    background: #eef6ff;
}

.teacher-document-file-button:active {
    background: #dbeafe;
}

.payment-modal-card > header {
    color: #ffffff;
    background: #1D3A8A;
}

.payment-modal-card > header h2,
.payment-modal-card > header span,
.payment-modal-card > header p,
.payment-modal-card > header .icon-button {
    color: #ffffff;
}

.payment-modal-card > .payment-form {
    background: #FEFA9F;
}

.payment-modal-card > .payment-form label {
    border: 1px solid #d8e7f8;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.payment-modal-card > footer {
    background: #1D3A8A;
}

.contact-details-card {
    width: min(720px, 100%);
}

.note-modal-card {
    width: min(620px, 100%);
}

.account-setup-modal-card {
    width: min(860px, 100%);
    max-height: min(860px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
}

.booking-action-card {
    width: min(860px, 100%);
}

.student-lesson-action-card {
    display: flex;
    width: min(820px, 100%);
    max-height: min(860px, calc(100vh - 48px));
    flex-direction: column;
}

.student-lesson-action-card > header {
    flex-shrink: 0;
}

.student-profile-edit-card {
    display: flex;
    width: min(900px, 100%);
    max-height: min(860px, calc(100vh - 48px));
    flex-direction: column;
    overflow: hidden;
}

.student-profile-edit-card > header {
    flex-shrink: 0;
    color: #ffffff;
    background: #1D3A8A;
}

.student-profile-edit-card > header h2,
.student-profile-edit-card > header span {
    color: #ffffff;
}

.student-profile-edit-card > header .icon-button {
    color: #ffffff;
}

.student-profile-modal-body {
    overflow-y: auto;
    padding: 18px;
    background: #FEFA9F;
}

.student-profile-modal-form-card {
    border: 1px solid #d8e7f8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(23, 67, 124, 0.06);
}

.student-profile-edit-card > footer {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 10px;
    border-top: 0;
    padding: 14px 18px;
    background: #1D3A8A;
}

.student-profile-modal-cancel,
.student-profile-modal-save {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 16px;
    font-weight: 900;
}

.student-profile-modal-cancel {
    border: 1px solid #d8e7f8;
    color: #102048;
    background: #ffffff;
}

.student-profile-modal-save {
    border: 1px solid #dc2626;
    color: #ffffff;
    background: #dc2626;
}

.student-profile-modal-save:hover {
    background: #b91c1c;
}

.student-profile-modal-message {
    grid-column: 1 / -1;
    margin: 0;
    border-radius: 8px;
    padding: 10px 12px;
    color: #7f1d1d;
    background: #fee2e2;
    font-weight: 900;
}

.student-lesson-pdf-card {
    display: flex;
    width: min(1120px, 100%);
    max-height: min(860px, calc(100vh - 48px));
    flex-direction: column;
}

.slot-mini-card {
    width: min(260px, 100%);
}

.slot-modal-card header,
.slot-modal-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.slot-modal-card header {
    border-bottom: 1px solid #d8e7f8;
    padding: 18px;
    background: #f7fbff;
}

.slot-modal-card header span {
    color: #245dd8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.slot-modal-card h2 {
    margin: 3px 0 0;
    color: #102048;
    font-size: 22px;
    font-weight: 900;
}

.slot-modal-card header p {
    margin: 6px 0 0;
    color: #52688e;
    font-size: 13px;
    font-weight: 900;
}

.slot-mini-card h2 {
    margin: 0;
    font-size: 18px;
}

.slot-mini-card footer {
    justify-content: stretch;
    padding-top: 12px;
}

.slot-mini-card .slot-status-action {
    justify-content: center;
    width: 100%;
}

.slot-modal-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0 18px;
}

.slot-modal-details div {
    min-height: 72px;
    border-bottom: 1px solid #edf3fb;
    padding: 14px 0;
}

.slot-modal-details div:nth-child(odd) {
    border-right: 1px solid #edf3fb;
    padding-right: 14px;
}

.slot-modal-details div:nth-child(even) {
    padding-left: 14px;
}

.slot-modal-details span {
    display: block;
    margin-bottom: 6px;
    color: #687997;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.slot-modal-details strong {
    display: block;
    color: #13244b;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
}

.student-lesson-detail-grid {
    max-height: min(620px, calc(100vh - 190px));
    overflow-y: auto;
}

.student-lesson-edit-form {
    display: grid;
    gap: 14px;
    overflow-y: auto;
    padding: 18px;
    background: #f8fbff;
}

.student-lesson-edit-section {
    border: 1px solid #d8e7f8;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.student-lesson-credit-override {
    display: grid;
    gap: 14px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px;
    background: #fff1f2;
}

.student-lesson-credit-override-heading {
    display: grid;
    gap: 5px;
}

.student-lesson-credit-override h3 {
    margin: 0;
    color: #991b1b;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.student-lesson-credit-override p {
    margin: 0;
    color: #7f1d1d;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.student-lesson-credit-current {
    display: grid;
    gap: 6px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.student-lesson-credit-current span {
    color: #7f1d1d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.student-lesson-credit-current strong {
    color: #102048;
    font-size: 16px;
    font-weight: 900;
}

.student-lesson-edit-section h3 {
    margin: 0 0 14px;
    color: #173d8f;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.student-lesson-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.student-lesson-edit-grid label {
    display: grid;
    gap: 7px;
}

.student-lesson-edit-grid label.is-wide {
    grid-column: 1 / -1;
}

.student-lesson-edit-grid label > span,
.student-lesson-edit-grid > label > span {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.student-lesson-edit-grid input,
.student-lesson-edit-grid select,
.student-lesson-edit-grid textarea {
    min-height: 44px;
    width: 100%;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    padding: 0 12px;
    color: #102048;
    background: #ffffff;
    font-weight: 800;
}

.student-lesson-edit-grid input:focus,
.student-lesson-edit-grid select:focus,
.student-lesson-edit-grid textarea:focus {
    border-color: #7aa7ff;
    box-shadow: 0 0 0 3px rgba(36, 72, 221, 0.12);
    outline: none;
}

.student-lesson-action-card > footer {
    flex-shrink: 0;
    border-top: 1px solid #d8e7f8;
    background: #f7fbff;
}

.student-lesson-delete-body {
    padding: 18px;
}

.student-lesson-delete-body > p {
    margin: 0 0 14px;
    color: #7f1d1d;
    font-weight: 900;
}

.student-lesson-modal-message {
    grid-column: 1 / -1;
    margin: 0;
    border-radius: 8px;
    padding: 10px 12px;
    color: #7f1d1d;
    background: #fee2e2;
    font-weight: 900;
}

.student-lesson-title-link {
    display: inline;
    border: 0;
    padding: 0;
    color: var(--dashboard-primary);
    background: transparent;
    font-weight: 900;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.student-lesson-title-link:hover {
    color: var(--dashboard-secondary);
}

.student-feedback-link,
.student-recording-link {
    border: 0;
    padding: 0;
    color: var(--dashboard-primary);
    background: transparent;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.student-feedback-link:hover,
.student-recording-link:hover {
    color: var(--dashboard-secondary);
}

.student-lesson-edit-grid textarea {
    width: 100%;
    min-height: 116px;
    padding: 12px;
    resize: vertical;
}

.student-lesson-publish-control {
    display: flex;
    min-height: 58px;
    grid-template-columns: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border: 1px solid #d8e7f8;
    border-radius: 8px;
    padding: 12px;
    color: #1f2d5a;
    background: #f8fbff;
    font-weight: 900;
}

.student-lesson-publish-control input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--dashboard-primary);
}

.student-lesson-publish-control span {
    display: grid;
    gap: 3px;
    text-transform: none;
}

.student-lesson-publish-control strong {
    color: #102048;
    font-size: 13px;
    font-weight: 900;
}

.student-lesson-publish-control small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.student-lesson-recording-body {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.student-lesson-recording-body p {
    margin: 0;
    color: #4f6285;
    font-weight: 800;
}

.student-lesson-feedback-body {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.student-lesson-feedback-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.student-lesson-feedback-details div {
    display: grid;
    gap: 4px;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    padding: 10px;
    background: #f7fbff;
}

.student-lesson-feedback-details span {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.student-lesson-feedback-details strong {
    color: #16224a;
    font-size: 13px;
}

.student-lesson-feedback-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.student-lesson-feedback-body p {
    margin: 0;
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    padding: 14px;
    color: #16224a;
    background: #f7fbff;
    font-weight: 800;
    line-height: 1.6;
}

.student-lesson-pdf-viewer {
    position: relative;
    display: grid;
    min-height: min(68vh, 680px);
    flex: 1;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    background: #f7fbff;
}

.student-lesson-pdf-viewer iframe {
    width: 100%;
    height: 100%;
    min-height: min(68vh, 680px);
    border: 0;
    background: #ffffff;
}

.student-lesson-pdf-state {
    display: grid;
    min-height: 280px;
    place-items: center;
    padding: 28px;
    color: #4b5f7f;
    font-weight: 900;
}

.student-lesson-pdf-state.is-error {
    color: #991b1b;
    background: #fff7f7;
}

.student-lesson-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 120;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px 14px;
    color: #14532d;
    background: #dcfce7;
    box-shadow: 0 18px 40px rgba(8, 24, 63, 0.16);
    font-weight: 900;
}

.account-setup-modal-body {
    display: grid;
    gap: 16px;
    overflow-y: auto;
    padding: 18px;
    background: #eef6ff;
}

.account-setup-section {
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.account-setup-section h3 {
    margin: 0 0 14px;
    color: #173d8f;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-setup-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.account-setup-form label {
    display: grid;
    gap: 7px;
}

.account-setup-form label.is-wide {
    grid-column: 1 / -1;
}

.account-setup-form span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-setup-form input,
.account-setup-form select,
.account-setup-form textarea {
    min-height: 46px;
    width: 100%;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    padding: 0 13px;
    color: #102048;
    background: #ffffff;
    font-weight: 800;
}

.account-setup-form textarea {
    min-height: 72px;
    padding: 12px 13px;
    resize: vertical;
}

.credentials-selected-user > div {
    display: grid;
    gap: 4px;
    border: 1px solid #d7e4f4;
    border-radius: 8px;
    padding: 12px 14px;
    background: #f8fbff;
}

.credentials-selected-user strong {
    color: #101e4b;
    font-size: 16px;
    font-weight: 900;
}

.credentials-selected-user span,
.credentials-selected-user small,
.credentials-help-text {
    margin: 0;
    color: #53657d;
    font-size: 12px;
    font-weight: 800;
}

.credentials-show-passwords {
    grid-column: 1 / -1;
    display: flex !important;
    min-height: 36px;
    align-items: center;
    gap: 9px;
}

.credentials-show-passwords input {
    width: 16px;
    height: 16px;
}

.credentials-error-list {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 12px;
    color: #991b1b;
    background: #fef2f2;
    font-size: 12px;
    font-weight: 900;
}

.credentials-error-list p {
    margin: 0;
}

.contact-details-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
}

.contact-details-form label {
    display: grid;
    gap: 7px;
}

.contact-details-form span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.contact-details-form input {
    min-height: 46px;
    width: 100%;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    padding: 0 13px;
    color: #102048;
    background: #ffffff;
    font-weight: 800;
}

.note-form {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.note-form label {
    display: grid;
    gap: 7px;
}

.note-form span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.note-form select,
.note-form textarea {
    width: 100%;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    color: #102048;
    background: #ffffff;
    font-weight: 800;
}

.note-form select {
    min-height: 46px;
    padding: 0 13px;
}

.note-form textarea {
    min-height: 130px;
    padding: 12px 13px;
    resize: vertical;
}

.receipt-form {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.receipt-form label {
    display: grid;
    gap: 7px;
}

.receipt-form span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.receipt-form input,
.receipt-form textarea {
    width: 100%;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    color: #102048;
    background: #ffffff;
    font-weight: 800;
}

.receipt-form input {
    min-height: 46px;
    padding: 10px 13px;
}

.receipt-form textarea {
    min-height: 96px;
    padding: 12px 13px;
    resize: vertical;
}

.receipt-preview-body {
    display: grid;
    min-height: 360px;
    max-height: min(620px, calc(100vh - 230px));
    place-items: center;
    overflow: auto;
    padding: 18px;
    background: #f8fafc;
}

.receipt-preview-body img,
.receipt-preview-body iframe {
    width: 100%;
    max-width: 780px;
    max-height: min(560px, calc(100vh - 280px));
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    background: #ffffff;
    object-fit: contain;
}

.receipt-preview-body iframe {
    height: min(560px, calc(100vh - 280px));
}

.payment-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
}

.payment-form label {
    display: grid;
    gap: 7px;
}

.payment-form label.is-wide {
    grid-column: 1 / -1;
}

.payment-form span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.payment-form input,
.payment-form select,
.payment-form textarea {
    min-height: 46px;
    width: 100%;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    padding: 0 13px;
    color: #102048;
    background: #ffffff;
    font-weight: 800;
}

.payment-form textarea {
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1.5;
}

.slot-modal-card footer {
    justify-content: flex-end;
    padding: 18px;
}

.slot-status-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    padding: 0 16px;
    color: #ffffff;
    font-weight: 900;
}

.slot-status-action svg {
    width: 17px;
    height: 17px;
}

.slot-status-action.is-open {
    background: var(--dashboard-primary);
}

.slot-status-action.is-closed {
    background: #b91c1c;
}

.slot-status-action.is-danger {
    background: #dc2626;
}

.slot-secondary-action {
    min-height: 42px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 0 16px;
    color: #334463;
    background: #ffffff;
    font-weight: 900;
}

.booking-action-body {
    display: grid;
    gap: 16px;
    max-height: min(68vh, 700px);
    overflow-y: auto;
    padding: 18px;
}

.booking-action-panel,
.booking-details-panel {
    display: grid;
    gap: 14px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 16px;
    background: #f7fbff;
}

.booking-action-panel h3,
.booking-details-panel h3 {
    margin: 0;
    color: #42526e;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.booking-action-grid button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    color: var(--dashboard-primary);
    background: #ffffff;
    font-weight: 900;
}

.booking-action-grid button:nth-child(3) {
    color: #7c3aed;
}

.booking-action-grid button:nth-child(4) {
    color: #0e7490;
}

.booking-action-grid button:nth-child(5) {
    color: #047857;
}

.booking-action-grid button:nth-child(6) {
    color: #c2410c;
}

.booking-action-grid button.is-active {
    color: #102048;
    border-color: var(--dashboard-primary);
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px var(--dashboard-primary);
}

.booking-action-grid button.is-danger {
    grid-column: 1 / -1;
    margin-top: 6px;
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff7f7;
}

.booking-action-form[hidden] {
    display: none;
}

.booking-delete-warning {
    display: grid;
    gap: 8px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px;
    color: #991b1b;
    background: #fff7f7;
    font-weight: 900;
}

.booking-delete-warning span {
    color: #7f1d1d;
    font-size: 13px;
}

.booking-action-grid svg {
    width: 17px;
    height: 17px;
}

.assign-class-form {
    display: grid;
    gap: 14px;
    max-height: min(68vh, 700px);
    overflow-y: auto;
    padding: 18px;
}

.assign-class-form section {
    display: grid;
    gap: 12px;
    border: 1px solid #d8e7f8;
    border-radius: 8px;
    padding: 14px;
    background: #f7fbff;
}

.assign-class-form h3 {
    margin: 0;
    color: #102048;
    font-size: 16px;
    font-weight: 900;
}

.assign-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.assign-form-grid label {
    display: grid;
    gap: 7px;
}

.assign-form-grid label.is-wide {
    grid-column: 1 / -1;
}

.assign-form-grid span {
    color: #687997;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.assign-form-grid input,
.assign-form-grid select,
.assign-form-grid textarea {
    min-height: 40px;
    width: 100%;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 0 12px;
    color: #1a2b50;
    background: #ffffff;
    font-weight: 800;
}

.assign-form-grid textarea {
    min-height: 78px;
    padding: 10px 12px;
    resize: vertical;
}

.assign-form-grid input[readonly] {
    color: #52688e;
    background: #edf3fa;
}

.referral-form {
    max-height: min(68vh, 640px);
    overflow-y: auto;
    padding: 18px;
}

.referral-form .assign-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.code-text {
    color: #1f49a8;
}

.student-class-status-badge,
.pending-badge,
.muted-badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
}

.student-class-status-badge {
    border: 1px solid #dbe7f5;
    color: #1f2d5a;
    background: #f7fbff;
    white-space: nowrap;
}

.student-class-status-badge.is-completed {
    border-color: #9de4b7;
    color: #166534;
    background: #dcfce7;
}

.student-class-status-badge.is-teacher-absent,
.student-class-status-badge.is-student-absent,
.student-class-status-badge.is-canceled-class {
    border-color: #fecaca;
    color: #991b1b;
    background: #fee2e2;
}

.student-class-status-badge.is-class-transferred,
.student-class-status-badge.is-rescheduled {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #dbeafe;
}

.pending-badge {
    border: 1px solid #f5cb52;
    color: #b35b00;
    background: #fff7dd;
}

.muted-badge {
    color: #64748b;
    background: #edf2f8;
}

.payment-status-badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 10px;
    color: #1f3159;
    background: #edf2f8;
    font-size: 12px;
    font-weight: 900;
}

.payment-status-badge.is-paid,
.payment-status-badge.is-recorded {
    color: #166534;
    background: #dcfce7;
}

.payment-status-badge.is-pending {
    color: #92400e;
    background: #fef3c7;
}

.payment-status-badge.is-failed,
.payment-status-badge.is-canceled {
    color: #991b1b;
    background: #fee2e2;
}

.payment-status-badge.is-refunded {
    color: #1d4ed8;
    background: #dbeafe;
}

.danger-action {
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    padding: 0 14px;
    color: #ffffff;
    background: #e8262f;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(232, 38, 47, 0.22);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
}

.settings-card {
    display: grid;
    gap: 18px;
    border: 1px solid rgba(217, 227, 242, 0.82);
    border-radius: 8px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(10, 34, 70, 0.06);
}

.settings-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.settings-card-heading > span {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-blue);
    background: rgba(59, 130, 246, 0.12);
}

.settings-card-heading svg {
    width: 24px;
    height: 24px;
}

.settings-card h2 {
    margin: 0;
    color: #0b1f52;
    font-size: 19px;
    font-weight: 900;
}

.settings-card p {
    margin: 5px 0 0;
    color: #52688e;
    font-size: 14px;
}

.settings-card ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #22365f;
    font-weight: 800;
}

.settings-card li svg {
    width: 16px;
    height: 16px;
    color: var(--brand-teal);
}

.settings-card button {
    justify-self: start;
    min-height: 38px;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    padding: 0 16px;
    color: var(--dashboard-primary);
    background: #ffffff;
    font-weight: 900;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
}

.settings-form-grid label {
    display: grid;
    gap: 8px;
}

.settings-form-grid span {
    color: #4a5d82;
    font-size: 13px;
    font-weight: 900;
}

.settings-form-grid select {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: #ffffff;
    font-weight: 800;
}

.settings-page .page-heading:not(.app-heading-bar) h1 {
    color: #64748b;
    font-size: 16px;
    font-weight: 500;
}

.settings-page .page-heading small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-weight: 800;
}

.settings-workspace {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 780px;
    overflow: hidden;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(10, 34, 70, 0.08);
}

.settings-side-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    border-right: 1px solid #cfe0f8;
    padding: 14px;
    background: #dbeafe;
}

.settings-search {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    padding: 0 10px;
    background: #ffffff;
}

.settings-search svg {
    width: 17px;
    height: 17px;
    color: var(--dashboard-primary);
}

.settings-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-weight: 800;
}

.settings-menu {
    display: grid;
    gap: 6px;
}

.settings-menu button {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 12px;
    color: #334463;
    background: rgba(255, 255, 255, 0.58);
    font-weight: 900;
    text-align: left;
}

.settings-menu button.is-active {
    color: #0d2a67;
    border-color: #8ab7ff;
    background: #dcecff;
}

.settings-menu svg {
    width: 18px;
    height: 18px;
    color: var(--dashboard-primary);
}

.settings-main-panel {
    padding: 20px;
    background: #f6fbff;
}

.settings-panel[hidden] {
    display: none;
}

.payment-gateway-settings-card {
    overflow: hidden;
    border: 1px solid #d7e4f5;
    border-radius: 8px;
    background: #ffffff;
}

.payment-gateway-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.payment-gateway-heading .primary-action {
    display: inline-flex;
    min-height: 40px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}

.payment-gateway-heading .primary-action svg {
    width: 17px;
    height: 17px;
}

.payment-gateway-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.payment-gateway-settings-table {
    width: 100%;
    min-width: 740px;
    border-collapse: collapse;
}

.payment-gateway-settings-table th,
.payment-gateway-settings-table td {
    border-bottom: 1px solid #e2ecf8;
    padding: 16px;
    color: #172b55;
    text-align: left;
    vertical-align: middle;
}

.payment-gateway-settings-table th {
    background: #dbeafe;
    color: #53627a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.payment-gateway-settings-table tbody tr:last-child td {
    border-bottom: 0;
}

.payment-gateway-settings-table td > strong,
.payment-gateway-settings-table td > small {
    display: block;
}

.payment-gateway-settings-table td > strong {
    font-size: 14px;
    font-weight: 900;
}

.payment-gateway-settings-table td > small {
    margin-top: 3px;
    color: #64748f;
    font-size: 12px;
    font-weight: 800;
}

.gateway-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}

.gateway-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.gateway-toggle span {
    position: relative;
    width: 42px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.18s ease;
}

.gateway-toggle span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
    content: "";
    transition: transform 0.18s ease;
}

.gateway-toggle input:checked + span {
    background: #16a34a;
}

.gateway-toggle input:checked + span::after {
    transform: translateX(20px);
}

.gateway-toggle input:disabled + span {
    opacity: 0.6;
}

.gateway-toggle strong {
    min-width: 28px;
    color: #172b55;
    font-size: 12px;
    font-weight: 900;
}

.gateway-config-status {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 900;
}

.gateway-config-status.is-configured {
    color: #15803d;
}

.gateway-config-status.is-missing {
    color: #b45309;
}

.payment-gateway-empty {
    padding: 28px 16px !important;
    color: #64748f !important;
    text-align: center !important;
    font-weight: 900;
}

.add-website-modal-card {
    width: min(760px, calc(100vw - 32px));
}

.add-website-modal-body {
    display: grid;
    gap: 18px;
    padding: 20px;
    background: #fffcc2;
}

.add-website-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    border: 1px solid #d7e4f5;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.add-website-form-grid label {
    display: grid;
    gap: 7px;
}

.add-website-form-grid span,
.add-website-gateways > strong {
    color: #53627a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.add-website-form-grid input,
.add-website-form-grid select {
    min-height: 42px;
    border: 1px solid #c8ddf7;
    border-radius: 7px;
    padding: 0 12px;
    color: #172b55;
    background: #ffffff;
    font-weight: 900;
}

.add-website-gateways {
    display: grid;
    gap: 12px;
    border: 1px solid #d7e4f5;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.add-website-gateways > div {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
}

.add-website-gateway-toggle strong {
    min-width: auto;
    font-size: 13px;
}

.settings-section-heading p,
.settings-block-title p {
    margin: 0 0 4px;
    color: #245dd8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.settings-section-heading h2 {
    margin: 0;
    color: #0b1f52;
    font-size: 28px;
    font-weight: 900;
}

.settings-section-heading span,
.settings-block-title span {
    color: #516584;
    font-weight: 800;
}

.settings-block-title {
    margin-top: 18px;
}

.dashboard-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.dashboard-setting-card {
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.dashboard-setting-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: #0b1f52;
    font-size: 18px;
    font-weight: 900;
}

.dashboard-setting-card h3 i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: var(--dashboard-primary);
    background: #eef6ff;
}

.settings-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-input-grid label,
.global-preferences-card label {
    display: grid;
    gap: 7px;
}

.settings-input-grid span,
.global-preferences-card span {
    color: #687997;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.settings-input-grid input,
.global-preferences-card select {
    min-height: 40px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 0 12px;
    color: #1a2b50;
    background: #ffffff;
    font-weight: 800;
}

.global-preferences-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 12px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.company-profile-card {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 14px;
    margin-top: 18px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.company-assets {
    display: grid;
    gap: 14px;
}

.asset-box {
    display: grid;
    gap: 12px;
    border: 1px solid #d8e6f6;
    border-radius: 8px;
    padding: 14px;
    background: #f5fbff;
}

.asset-box > span,
.asset-title-row span,
.company-profile-form span {
    color: #687997;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.asset-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.asset-title-row strong {
    border-radius: 999px;
    padding: 4px 10px;
    color: #047857;
    background: #dffbeb;
    font-size: 10px;
    text-transform: uppercase;
}

.logo-preview,
.favicon-preview {
    display: grid;
    place-items: center;
    border: 1px solid #d8e6f6;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-mint));
    font-weight: 900;
}

.logo-preview {
    width: 82px;
    height: 82px;
    font-size: 48px;
}

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

.favicon-preview {
    width: 40px;
    height: 40px;
    font-size: 22px;
}

.favicon-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dashboard-branding-name-field {
    display: grid;
    gap: 7px;
    width: 100%;
}

.dashboard-branding-name-field span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.dashboard-branding-name-field input {
    width: 100%;
    min-height: 38px;
    border: 1px solid #d6e4f5;
    border-radius: 8px;
    padding: 0 12px;
    color: #0f172a;
    background: #ffffff;
    font-weight: 800;
}

.dashboard-branding-card > small,
.dashboard-logo-help,
.dashboard-logo-status {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

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

.dashboard-logo-actions button {
    padding: 0 12px;
}

.dashboard-logo-actions .primary-action {
    color: #ffffff;
    background: var(--dashboard-primary);
}

.dashboard-logo-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.dashboard-logo-status[data-status="success"] {
    color: #047857;
}

.dashboard-logo-status[data-status="error"] {
    color: #b91c1c;
}

.asset-box button {
    min-height: 36px;
    border: 1px solid #bfd7f5;
    border-radius: 8px;
    color: var(--dashboard-primary);
    background: #ffffff;
    font-weight: 900;
}

.asset-box button svg {
    display: inline;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
}

.remove-asset {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #c82812;
    font-size: 12px;
    font-weight: 900;
}

.asset-box small {
    color: #657795;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}

.company-profile-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 18px 14px;
}

.company-profile-form label {
    display: grid;
    gap: 8px;
}

.company-profile-form label:first-child,
.company-profile-form .is-wide {
    grid-column: 1 / -1;
}

.company-profile-form input,
.company-profile-form textarea {
    width: 100%;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 0 12px;
    color: #1a2b50;
    background: #ffffff;
    font-weight: 800;
}

.company-profile-form input {
    min-height: 42px;
}

.company-profile-form textarea {
    min-height: 86px;
    padding-top: 12px;
    resize: vertical;
}

.my-profile-card {
    display: grid;
    gap: 16px;
    margin-top: 18px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.profile-photo-section {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid #d8e6f6;
    border-radius: 8px;
    padding: 14px;
    background: #f5fbff;
}

.profile-photo-preview {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    background: #ffffff;
}

.profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-copy {
    min-width: 0;
}

.profile-photo-copy span,
.my-profile-form-grid span {
    color: #687997;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.profile-photo-copy strong {
    display: block;
    margin-top: 3px;
    color: #0b1f52;
    font-size: 18px;
    font-weight: 900;
}

.profile-photo-copy p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.profile-photo-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.secondary-action.is-danger-text {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff5f5;
}

.my-profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.my-profile-form-grid.is-compact {
    grid-template-columns: repeat(2, minmax(180px, 320px));
}

.my-profile-form-grid label {
    display: grid;
    gap: 7px;
}

.my-profile-form-grid input,
.my-profile-form-grid select {
    min-height: 40px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 0 12px;
    color: #1a2b50;
    background: #ffffff;
    font-weight: 800;
}

.security-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 16px;
    align-items: stretch;
    margin-top: 18px;
}

.security-card {
    display: grid;
    gap: 14px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
}

.security-card h3,
.security-card h4 {
    margin: 0;
    color: #0b1f52;
    font-weight: 900;
}

.security-card h3 {
    font-size: 18px;
}

.security-card h4 {
    font-size: 16px;
}

.security-combined-card {
    gap: 18px;
    padding: 18px;
    align-self: stretch;
}

.security-card-heading {
    display: grid;
    gap: 5px;
}

.security-card-heading p {
    margin: 0;
    color: #687997;
    font-size: 13px;
    font-weight: 800;
}

.security-card-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.security-card-section {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    border: 1px solid #d8e6f6;
    border-radius: 8px;
    padding: 14px;
    background: #f7fbff;
}

.security-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.security-card-title label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--dashboard-primary);
    font-size: 12px;
    font-weight: 900;
}

.security-form {
    display: grid;
    gap: 12px;
}

.security-form label {
    display: grid;
    gap: 7px;
}

.security-form span,
.current-email-box span {
    color: #687997;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.security-form input,
.security-form select {
    min-height: 40px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 0 12px;
    color: #1a2b50;
    background: #ffffff;
    font-weight: 800;
}

.password-rules {
    display: grid;
    gap: 5px;
    margin: 0;
    border-radius: 8px;
    padding: 12px 14px;
    color: #4b5f7f;
    background: #eef6ff;
    font-size: 12px;
    font-weight: 800;
}

.security-primary-action {
    min-height: 42px;
    align-self: end;
    margin-top: auto;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: var(--dashboard-primary);
    box-shadow: 0 12px 24px rgba(34, 88, 223, 0.2);
    font-weight: 900;
}

.security-primary-action svg,
.security-button-row svg {
    display: inline;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    vertical-align: -3px;
}

.security-primary-action.is-compact {
    justify-self: start;
    padding: 0 18px;
}

.security-primary-action.is-danger {
    background: #dc2626;
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.2);
}

.security-feedback {
    margin: 0;
    border-radius: 8px;
    padding: 10px 12px;
    color: #14532d;
    background: #dcfce7;
    font-size: 13px;
    font-weight: 800;
}

.security-feedback[data-type="error"] {
    color: #991b1b;
    background: #fee2e2;
}

.security-status {
    border-radius: 999px;
    padding: 5px 12px;
    color: #4b5f7f;
    background: #edf3fa;
    font-size: 12px;
    font-weight: 900;
}

.security-status.is-warning {
    color: #b66a00;
    background: #fff0b8;
}

.current-email-box,
.two-factor-note,
.security-check-row {
    border: 1px solid #d8e6f6;
    border-radius: 8px;
    padding: 14px;
    background: #f5fbff;
}

.current-email-box strong {
    display: block;
    margin-top: 8px;
    color: #0b1f52;
    font-size: 17px;
}

.security-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.security-button-row button {
    min-height: 38px;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 0 14px;
    color: var(--dashboard-primary);
    background: #ffffff;
    font-weight: 900;
}

.security-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0b1f52;
    font-weight: 900;
}

.security-check-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--dashboard-primary);
}

.two-factor-note {
    color: #4b5f7f;
    font-weight: 800;
}

.two-factor-modal-card {
    max-width: 560px;
}

.two-factor-modal-body {
    display: grid;
    gap: 14px;
}

.two-factor-qr {
    display: grid;
    min-height: 196px;
    place-items: center;
    border: 1px solid #d8e6f6;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.two-factor-secret-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.two-factor-secret-row .slot-status-action {
    min-height: 38px;
    white-space: nowrap;
}

.two-factor-recovery-codes {
    display: grid;
    gap: 6px;
    border: 1px solid #d8e6f6;
    border-radius: 8px;
    padding: 12px;
    background: #f7fbff;
}

.two-factor-recovery-codes p {
    margin: 0;
    color: #4b5f7f;
    font-weight: 800;
}

.two-factor-recovery-codes pre {
    margin: 0;
    white-space: pre-wrap;
    color: #0b1f52;
    font: 800 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lesson-builder {
    --lesson-theme-primary: #8b5cf6;
    --lesson-theme-text: #ffffff;
    --lesson-theme-soft: rgba(139, 92, 246, 0.12);
    --lesson-theme-shadow: rgba(139, 92, 246, 0.18);
    display: grid;
    gap: 18px;
}

.lesson-step {
    position: relative;
    display: grid;
    grid-template-columns: 48px 170px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 14px;
    overflow: visible;
    border: 1px solid #d9e3f2;
    border-radius: 8px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 34px rgba(8, 24, 63, 0.08);
}

.step-number {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: var(--lesson-theme-primary);
    box-shadow: 0 8px 18px var(--lesson-theme-shadow);
    font-size: 20px;
    font-weight: 900;
}

.lesson-step h2 {
    margin: 0;
    color: #071844;
    font-size: 21px;
    font-weight: 900;
}

.lesson-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lesson-pill-row.modules {
    gap: 10px;
}

.lesson-pill-row--programs-compact {
    flex-wrap: nowrap;
    gap: 8px;
}

.lesson-pill-row--programs-compact .lesson-pill {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
}

.lesson-pill-row--programs-tight {
    gap: 6px;
}

.lesson-pill-row--programs-tight .lesson-pill {
    padding-right: 8px;
    padding-left: 8px;
}

.lesson-pill-row--levels-compact,
.lesson-pill-row--modules-compact {
    flex-wrap: nowrap;
}

.lesson-pill-row--levels-compact .lesson-pill {
    flex: 1 1 0;
    min-width: 0;
}

.lesson-pill {
    min-width: 162px;
    min-height: 46px;
    border: 2px solid #dbe3ee;
    border-radius: 8px;
    padding: 0 20px;
    color: #12224b;
    background: rgba(255, 255, 255, 0.84);
    font-size: 14px;
    font-weight: 800;
}

.lesson-pill--category {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.15;
}

.lesson-pill--category small {
    color: #5b6a87;
    font-size: 12px;
    font-weight: 700;
}

.lesson-pill--category.is-selected small {
    color: var(--lesson-theme-text);
}

.lesson-pill--program {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.15;
}

.lesson-pill--program small {
    color: #5b6a87;
    font-size: 12px;
    font-weight: 700;
}

.lesson-pill--program.is-selected small {
    color: var(--lesson-theme-text);
}

.lesson-pill-row.modules .lesson-pill {
    min-width: 120px;
    min-height: 42px;
    padding: 0 16px;
}

.lesson-pill-row--modules-compact {
    gap: 5px;
}

.lesson-pill-row--modules-compact .lesson-pill {
    flex: 1 1 0;
    min-height: 48px;
    min-width: 0;
    padding-right: 4px;
    padding-left: 4px;
    font-size: 13px;
}

.lesson-pill-row--modules-compact .lesson-pill small {
    font-size: 11px;
}

.lesson-pill.is-selected {
    color: var(--lesson-theme-text);
    border-color: var(--lesson-theme-primary);
    background: var(--lesson-theme-primary);
    box-shadow: 0 0 0 3px var(--lesson-theme-soft) inset;
}

.lesson-pill--program.is-selected {
    outline: 3px solid var(--lesson-theme-soft);
    outline-offset: 3px;
}

.step-menu,
.lesson-row-action {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #d9e3f2;
    border-radius: 8px;
    color: var(--lesson-theme-primary);
    background: var(--lesson-theme-soft);
}

.step-menu svg,
.lesson-row-action svg {
    width: 21px;
    height: 21px;
}

.lesson-step:has(.hierarchy-action-menu) {
    z-index: 140;
}

.step-menu {
    position: relative;
}

.step-menu.is-open {
    border-color: var(--lesson-theme-primary);
    background: #ffffff;
}

.hierarchy-action-menu {
    position: absolute;
    top: calc(100% - 8px);
    right: 18px;
    z-index: 220;
    display: grid;
    min-width: 138px;
    gap: 4px;
    border: 1px solid #d9e3f2;
    border-radius: 8px;
    padding: 6px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(8, 24, 63, 0.14);
}

.hierarchy-action-menu button {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    padding: 0 10px;
    color: #10204d;
    background: transparent;
    font-weight: 800;
    text-align: left;
}

.hierarchy-action-menu button:hover {
    background: var(--lesson-theme-soft);
}

.hierarchy-action-menu button.is-danger {
    color: #c82812;
}

.hierarchy-action-menu svg {
    width: 16px;
    height: 16px;
}

.lessons-table-step {
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    padding: 10px 24px;
    scroll-margin-top: 18px;
}

.lessons-table-step .lesson-table-heading {
    grid-column: 2 / -1;
    margin: 0;
}

.lesson-panels-step {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 24px;
}

.lesson-panels-step .lesson-table-wrap {
    grid-column: 1;
}

.lesson-current-location {
    grid-column: 1;
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    border-left: 5px solid var(--lesson-theme-primary);
    border-radius: 8px;
    padding: 0 13px;
    color: #40516f;
    background: var(--lesson-theme-soft);
    font-size: 13px;
    font-weight: 900;
}

.lesson-current-location[hidden] {
    display: none;
}

.lesson-current-location svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #8aa0bd;
}

.lesson-current-location strong {
    min-width: 0;
    color: #101e49;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.lesson-current-location span {
    line-height: 1;
    white-space: nowrap;
}

.lesson-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 2px 0 18px;
}

.lesson-add-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    padding: 0 26px;
    color: #ffffff;
    background: var(--lesson-theme-primary);
    box-shadow: 0 10px 24px var(--lesson-theme-shadow);
    font-size: 17px;
    font-weight: 900;
}

.lesson-add-button svg {
    width: 23px;
    height: 23px;
}

.lesson-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--lesson-theme-primary);
    border-radius: 8px;
}

.lesson-panel-grid {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.lesson-panel-grid[hidden] {
    display: none;
}

.lesson-range-panel {
    border: 1px solid var(--lesson-theme-primary);
    border-radius: 8px;
    overflow: visible;
    background: #ffffff;
}

.lesson-range-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    background: var(--lesson-theme-soft);
}

.lesson-range-panel h3 {
    margin: 0;
    color: #101e49;
    font-size: 15px;
    font-weight: 900;
}

.lesson-export-button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lesson-theme-primary);
    border-radius: 8px;
    padding: 0 11px;
    color: var(--lesson-theme-primary);
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.lesson-export-button:hover {
    color: var(--lesson-theme-text);
    background: var(--lesson-theme-primary);
    box-shadow: 0 8px 18px var(--lesson-theme-shadow);
}

.lesson-export-button:active {
    transform: translateY(1px);
}

.lesson-export-button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.lesson-range-list {
    display: grid;
    gap: 6px;
    padding: 10px;
}

.lesson-range-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    min-height: 38px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    color: #12224b;
    background: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    font-weight: 800;
}

.lesson-range-item:has(.lesson-range-actions.is-open) {
    z-index: 80;
}

.lesson-range-item.is-selected {
    border-color: var(--lesson-theme-primary);
    background: var(--lesson-theme-soft);
}

.lesson-range-select {
    display: grid;
    grid-template-columns: 34px 74px 68px minmax(0, 1fr) 106px auto;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 5px 6px 5px 8px;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
}

.lesson-range-thumb {
    display: grid;
    width: 30px;
    height: 36px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dbe3ee;
    border-radius: 4px;
    color: #5b6a87;
    background: #f7fbff;
    font-size: 9px;
    font-weight: 900;
}

.lesson-range-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lesson-range-title,
.lesson-range-number,
.lesson-range-module,
.lesson-range-id {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-range-number {
    min-width: 74px;
}

.lesson-range-title {
    color: #101e49;
}

.lesson-range-module {
    border-radius: 999px;
    padding: 3px 7px;
    color: var(--lesson-theme-primary);
    background: var(--lesson-theme-soft);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.lesson-range-id {
    color: #5b6a87;
    font-size: 11px;
    font-weight: 900;
}

.lesson-range-pdf {
    border-radius: 999px;
    padding: 3px 6px;
    color: var(--lesson-theme-text);
    background: var(--lesson-theme-primary);
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.lesson-range-pdf[hidden] {
    display: none;
}

.lesson-range-actions {
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: center;
}

.lesson-range-actions .lesson-row-action {
    width: 30px;
    height: 30px;
    border-color: transparent;
    background: transparent;
}

.lesson-range-actions .lesson-action-menu {
    z-index: 120;
}

.lesson-range-item:hover .lesson-row-action,
.lesson-range-actions.is-open .lesson-row-action {
    border-color: #d9e3f2;
    background: var(--lesson-theme-soft);
}

.lesson-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    background: #ffffff;
}

.lesson-table th,
.lesson-table td {
    border-bottom: 1px solid #dbe3ee;
    padding: 12px 22px;
    color: #101e49;
    font-size: 16px;
    text-align: left;
}

.lesson-table th {
    background: var(--lesson-theme-soft);
    font-weight: 900;
}

.lesson-table tr:last-child td {
    border-bottom: 0;
}

.lesson-table td:last-child,
.lesson-table th:last-child {
    width: 84px;
    text-align: center;
}

.lesson-thumb {
    display: inline-flex;
    width: 96px;
    height: 54px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
    border: 2px solid var(--lesson-theme-soft);
    border-radius: 8px;
    color: #10204d;
    font-weight: 900;
}

.lesson-thumb strong {
    color: #ffad0a;
    font-size: 30px;
}

.lesson-thumb span {
    font-size: 0;
}

.lesson-thumb span::before {
    display: block;
    font-size: 31px;
    line-height: 1;
}

.lesson-thumb.alphabet {
    background: linear-gradient(135deg, #fff5a6, #b9eeff);
}

.lesson-thumb.alphabet span::before {
    content: "A";
    color: transparent;
    text-shadow: 0 0 0 #e71919;
}

.lesson-thumb.dog {
    background: linear-gradient(135deg, #e9f6a8, #b3e478);
}

.lesson-thumb.dog span::before {
    content: "D";
    color: #a96b25;
}

.lesson-thumb.cat {
    background: linear-gradient(135deg, #ffd8a8, #f5b37d);
}

.lesson-thumb.cat span::before {
    content: "C";
    color: #cb6d1a;
}

.lesson-thumb.ball {
    background: linear-gradient(135deg, #fff4b7, #a8e3ff);
}

.lesson-thumb.ball span::before {
    content: "B";
    color: #1f8bd8;
}

.lesson-thumb.book {
    background: linear-gradient(135deg, #9ce7ff, #ffd15b);
}

.lesson-thumb.book span::before {
    content: "R";
    color: #0b65ad;
}

.lesson-actions {
    position: relative;
    display: inline-flex;
    justify-content: center;
}

.lesson-action-menu,
.lesson-actions-menu {
    position: absolute;
    top: auto;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 40;
    display: none;
    min-width: 142px;
    border: 1px solid #d9e3f2;
    border-radius: 8px;
    padding: 6px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(8, 24, 63, 0.14);
}

.lesson-actions:hover .lesson-action-menu,
.lesson-actions:focus-within .lesson-action-menu,
.lesson-actions.is-open .lesson-action-menu,
.lesson-actions:hover .lesson-actions-menu,
.lesson-actions:focus-within .lesson-actions-menu,
.lesson-actions.is-open .lesson-actions-menu {
    display: grid;
    gap: 4px;
}

.lesson-action-menu button,
.lesson-action-menu a,
.lesson-actions-menu button,
.lesson-actions-menu a {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    padding: 0 10px;
    color: #10204d;
    background: transparent;
    font-weight: 800;
    text-align: left;
    text-decoration: none;
}

.lesson-action-menu button:hover,
.lesson-action-menu a:hover,
.lesson-actions-menu button:hover,
.lesson-actions-menu a:hover {
    background: var(--lesson-theme-soft);
}

.lesson-actions-menu .is-danger {
    color: #dc2626;
}

.lesson-action-menu button:disabled {
    cursor: not-allowed;
    color: #94a3b8;
    background: transparent;
}

.lesson-action-menu button.is-danger,
.lesson-action-menu a.is-danger {
    color: #c82812;
}

.lesson-action-menu svg {
    width: 16px;
    height: 16px;
}

.lesson-action-modal {
    z-index: 1000;
}

.lesson-action-modal-card {
    width: min(560px, calc(100vw - 32px));
}

.hierarchy-action-modal {
    z-index: 1000;
}

.hierarchy-action-modal-card {
    width: min(560px, calc(100vw - 32px));
}

.lesson-action-modal-card footer,
.hierarchy-action-modal-card footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 18px 18px;
}

.modal-close-button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    color: #13244b;
    background: #ffffff;
}

.modal-close-button svg {
    width: 18px;
    height: 18px;
}

.lesson-action-modal-body {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #ffffff;
}

.hierarchy-action-modal-body {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #ffffff;
}

.hierarchy-parent-context {
    border-left: 4px solid var(--lesson-theme-primary);
    border-radius: 8px;
    padding: 10px 12px;
    color: #40516f;
    background: var(--lesson-theme-soft);
    font-size: 13px;
    font-weight: 900;
}

.hierarchy-parent-context[hidden] {
    display: none;
}

.lesson-modal-panel {
    display: grid;
    gap: 14px;
}

.lesson-modal-panel[hidden] {
    display: none;
}

.lesson-modal-panel[data-lesson-modal-panel="view"] {
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
}

.lesson-modal-preview {
    display: grid;
    width: 72px;
    height: 92px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    color: #52688e;
    background: #f7fbff;
    font-size: 11px;
    font-weight: 900;
}

.lesson-modal-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lesson-modal-panel h3 {
    margin: 0 0 6px;
    color: #102048;
    font-size: 18px;
    font-weight: 900;
}

.lesson-modal-panel p {
    margin: 0;
    color: #52688e;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.lesson-modal-field {
    display: grid;
    gap: 8px;
}

.lesson-modal-field span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.lesson-modal-field input,
.lesson-modal-field select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    padding: 0 13px;
    color: #102048;
    background: #ffffff;
    font-weight: 800;
}

.lesson-delete-warning,
.hierarchy-delete-warning {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    padding: 14px;
    background: #f7fbff;
}

.lesson-delete-warning svg,
.hierarchy-delete-warning svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--lesson-theme-primary);
}

.lesson-delete-warning strong,
.hierarchy-delete-warning strong {
    display: block;
    margin-bottom: 5px;
    color: #102048;
    font-size: 15px;
    font-weight: 900;
}

.lesson-upload-dropzone {
    display: grid;
    min-height: 210px;
    place-items: center;
    border: 2px dashed #bad0f4;
    border-radius: 8px;
    padding: 18px;
    color: #40516f;
    background: #f7fbff;
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.lesson-upload-dropzone:hover {
    border-color: var(--lesson-theme-primary);
    background: #eef6ff;
}

.lesson-upload-dropzone:active {
    box-shadow: inset 0 0 0 2px rgba(36, 93, 216, 0.16);
}

.lesson-upload-dropzone.is-dragging {
    border-color: var(--lesson-theme-primary);
    background: var(--lesson-theme-soft);
}

.lesson-upload-dropzone svg {
    width: 34px;
    height: 34px;
    margin: 0 auto 10px;
    color: var(--lesson-theme-primary);
}

.lesson-upload-dropzone strong {
    display: block;
    margin-bottom: 6px;
    color: #102048;
    font-size: 17px;
    font-weight: 900;
}

.lesson-upload-dropzone p,
.lesson-upload-dropzone small,
.lesson-upload-dropzone em {
    display: block;
    margin: 6px 0 0;
    color: #52688e;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
}

.lesson-upload-choose {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    border: 1px solid #b91c1c;
    border-radius: 8px;
    padding: 0 18px;
    color: #ffffff;
    background: #dc2626;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.lesson-upload-dropzone:hover .lesson-upload-choose {
    border-color: #991b1b;
    background: #b91c1c;
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.28);
}

.lesson-upload-dropzone:active .lesson-upload-choose {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.22);
}

.lesson-selected-pdf {
    display: grid;
    gap: 3px;
    border: 1px solid #d7e7f8;
    border-radius: 8px;
    padding: 12px 14px;
    background: #ffffff;
}

.lesson-selected-pdf[hidden] {
    display: none;
}

.lesson-selected-pdf span {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.lesson-selected-pdf strong {
    color: #102048;
    font-size: 15px;
    font-weight: 900;
}

.lesson-selected-pdf small {
    color: #52688e;
    font-size: 12px;
    font-weight: 800;
}

.lesson-selected-pdf button {
    width: max-content;
    margin-top: 8px;
    border: 1px solid #bad0f4;
    border-radius: 8px;
    padding: 7px 11px;
    color: #2448dd;
    background: #f7fbff;
    font-size: 12px;
    font-weight: 900;
}

.lesson-upload-error,
.lesson-upload-success {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 900;
}

.lesson-upload-error {
    color: #991b1b;
    background: #fee2e2;
}

.lesson-upload-success {
    color: #14532d;
    background: #dcfce7;
}

@media (max-width: 520px) {
    .lesson-action-modal-card footer,
    .hierarchy-action-modal-card footer {
        align-items: center;
        flex-direction: column;
    }
}

.lesson-delete-warning,
.hierarchy-delete-warning {
    border-color: #fecaca;
    background: #fff7f7;
}

.lesson-delete-warning svg,
.hierarchy-delete-warning svg {
    color: #dc2626;
}

.slot-status-action.is-muted {
    border: 1px solid #d7e7f8;
    color: #102048;
    background: #ffffff;
}

.slot-status-action.is-danger {
    background: #dc2626;
}

@media (min-width: 761px) {
    .table-wrap,
    .system-users-table-wrap,
    .payment-history-table-wrap,
    .referral-table-wrap,
    .activity-log-table-wrap,
    .internal-notes-table-wrap,
    .lesson-table-wrap,
    .lessons-table-step .lesson-table-wrap {
        overflow: visible;
    }

    .payment-history-shell,
    .referral-table-shell,
    .activity-log-shell,
    .internal-notes-shell,
    .lesson-stage-card,
    .settings-main-panel {
        overflow: visible;
    }
}

@media (max-width: 1180px) {
    .app-shell {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .brand-title-panel,
    .nav-link span,
    .nav-group p,
    .admin-card span {
        display: none;
    }

    .brand {
        grid-template-columns: 64px;
        justify-content: center;
    }

    .brand-logo-panel {
        width: 64px;
        height: 64px;
        padding: 7px;
    }

    .brand-logo {
        width: 100%;
    }

    .nav-link {
        justify-content: center;
        padding: 0;
    }

    .logout-link {
        justify-content: center;
        padding: 0;
    }

    .logout-link span {
        gap: 0;
        font-size: 0;
    }

    .admin-card {
        justify-content: center;
    }

    .admin-card button {
        display: none;
    }

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

    .pricing-toolbar,
    .pricing-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .package-card-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }

    .settings-grid,
    .settings-form-grid,
    .settings-workspace,
    .company-profile-card,
    .company-profile-form,
    .security-card-columns,
    .security-settings-grid,
    .dashboard-settings-grid,
    .settings-input-grid,
    .my-profile-form-grid,
    .my-profile-form-grid.is-compact,
    .global-preferences-card,
    .student-info-grid,
    .restricted-admin-grid {
        grid-template-columns: 1fr;
    }

    .profile-photo-section {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .profile-photo-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .lesson-step {
        grid-template-columns: 54px minmax(120px, 160px) minmax(0, 1fr);
    }

    .lesson-step .step-menu {
        grid-column: 3;
        justify-self: end;
    }

    .lessons-table-step {
        grid-template-columns: 54px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .payment-history-table {
        width: 1280px;
    }

    .referral-table {
        width: 1100px;
    }

    .activity-log-table {
        width: 1180px;
    }

    .internal-notes-table {
        width: 980px;
    }

    .app-shell {
        display: block;
    }

    .sidebar {
        position: static;
        height: auto;
        padding: 16px;
    }

    .nav-stack {
        display: flex;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .nav-group {
        display: contents;
    }

    .nav-link span {
        display: inline;
    }

    .brand {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .brand-logo-panel {
        width: 82px;
        height: 68px;
        padding: 8px;
    }

    .brand-title-panel {
        display: flex;
    }

    .brand-logo {
        width: 100%;
    }

    .nav-link {
        flex: 0 0 auto;
        padding: 0 14px;
    }

    .logout-link {
        justify-content: flex-start;
        padding: 0 14px;
    }

    .logout-link span {
        gap: 12px;
        font-size: 14px;
    }

    .admin-card {
        display: none;
    }

    .topbar,
    .page-heading,
    .panel-title,
    .table-toolbar,
    .student-section-title {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar {
        padding: 14px 18px;
    }

    .topbar-actions {
        justify-content: space-between;
    }

    .content {
        margin: 16px;
        padding: 0;
        height: calc(100dvh - 32px);
        min-height: calc(100vh - 32px);
    }

    .content > .page-heading.app-heading-bar {
        padding: 0 16px;
    }

    .dashboard-workspace {
        gap: 18px;
        padding: 16px;
    }

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

    .student-search,
    .table-toolbar select,
    .primary-action,
    .ai-form button,
    .student-section-title .secondary-action {
        width: 100%;
    }

    .profile-grid,
    .student-profile-kv,
    .restricted-grid,
    .restricted-contact-grid,
    .restricted-admin-grid,
    .referral-code-panel,
    .referral-program-form,
    .referral-summary,
    .slot-modal-details,
    .assign-form-grid,
    .account-setup-form,
    .contact-details-form,
    .payment-form {
        grid-template-columns: 1fr;
    }

    .referral-program-header,
    .referral-code-actions,
    .referral-program-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .referral-program-card .secondary-action {
        width: 100%;
    }

    .system-users-header {
        align-items: stretch;
        flex-direction: column;
    }

    .restricted-warning,
    .restricted-contact-panel footer {
        align-items: stretch;
        flex-direction: column;
    }

    .restricted-warning > strong {
        margin-left: 0;
        text-align: center;
    }

    .student-profile-kv div,
    .student-profile-kv div:nth-child(2n) {
        border-right: 0;
    }

    .slot-modal-details div:nth-child(odd),
    .slot-modal-details div:nth-child(even) {
        border-right: 0;
        padding-right: 0;
        padding-left: 0;
    }

    .slot-modal-card footer {
        align-items: stretch;
        flex-direction: column;
    }

    .slot-status-action {
        justify-content: center;
        width: 100%;
    }

    .booking-action-grid {
        grid-template-columns: 1fr;
    }

    .student-timeline article {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .student-timeline time {
        grid-column: 2;
    }

    .pricing-controls select,
    .pricing-toggle,
    .pricing-toggle button {
        width: 100%;
    }

    .package-card-grid,
    .price-fields {
        grid-template-columns: 1fr;
    }

    .lesson-step,
    .lessons-table-step {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .lessons-table-step .lesson-table-heading,
    .lesson-panels-step .lesson-table-wrap {
        grid-column: 1;
    }

    .lesson-panel-grid {
        grid-column: 1;
        grid-template-columns: 1fr;
    }

    .step-number {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

    .lesson-step h2 {
        font-size: 21px;
    }

    .lesson-pill,
    .lesson-pill-row.modules .lesson-pill {
        width: 100%;
    }

    .lesson-table-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .lesson-add-button,
    .step-menu {
        width: 100%;
        justify-content: center;
    }
}

.teachers-directory-page {
    align-content: start;
    gap: 24px;
    grid-auto-rows: max-content;
}

.teachers-directory-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.teachers-directory-top .breadcrumb {
    gap: 6px;
    color: #1e293b;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.teachers-directory-top .breadcrumb a,
.teachers-directory-top .breadcrumb strong {
    color: #1e293b;
}

.teachers-directory-top h1 {
    margin: 8px 0 0;
    color: #1e293b;
    font-size: 24px;
    font-weight: 900;
}

.time-widgets {
    display: flex;
    gap: 10px;
}

.time-widgets article {
    display: grid;
    min-width: 280px;
    min-height: 56px;
    align-content: center;
    border: 1px solid #dbe7f7;
    border-radius: 8px;
    padding: 8px 14px;
    background: #f7fef9;
}

.time-widgets span,
.teachers-directory-panel .panel-title > div > span {
    color: #3860e4;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.time-widgets strong {
    color: #101e4b;
    font-size: 18px;
    line-height: 1.1;
}

.time-widgets em {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #101e4b;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.time-widgets em svg {
    width: 14px;
    height: 14px;
    color: #3860e4;
}

.teachers-directory-metrics {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.teachers-directory-metrics .metric-card {
    box-shadow: 0 18px 40px rgba(10, 34, 70, 0.06);
}

.accent-red > span {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.12);
}

.teachers-directory-panel {
    display: grid;
    gap: 14px;
    grid-template-rows: auto auto auto;
    overflow: hidden;
    border: 1px solid #d9e3f2;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(10, 34, 70, 0.06);
}

.teachers-directory-panel .panel-title {
    align-items: center;
    margin: 0;
    border-bottom: 0;
    padding: 0;
    background: #ffffff;
}

.teachers-directory-panel .panel-title h2 {
    color: #152856;
    font-size: 20px;
}

.teachers-directory-panel .table-toolbar {
    margin: 0;
}

.teachers-directory-panel .table-toolbar select,
.teachers-directory-panel .student-search {
    background: #ffffff;
}

.teachers-directory-table {
    border: 1px solid #edf2f8;
    border-radius: 8px;
    background: #ffffff;
}

.teachers-directory-table table {
    min-width: 1120px;
}

.teachers-directory-table th {
    background: #f2f8ff;
    color: #4b5b78;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.teachers-directory-table td {
    height: 58px;
    color: #15233f;
    font-size: 13px;
    font-weight: 800;
}

.teachers-directory-table .is-empty-row td {
    height: 52px;
}

.teachers-directory-table .student-cell img {
    width: 38px;
    height: 38px;
}

.teachers-directory-table .student-cell strong,
.teachers-directory-table td > strong {
    color: #113f9d;
}

.country-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 8px;
    color: #3860e4;
    background: #dfeaff;
    font-size: 12px;
    font-weight: 900;
}

.flag-code {
    display: inline-grid;
    min-width: 20px;
    height: 14px;
    place-items: center;
    border-radius: 2px;
    color: #ffffff;
    background: #dc2626;
    font-size: 8px;
    font-weight: 900;
}

.teachers-directory-pagination {
    min-height: 58px;
    margin: 0;
    border-top: 1px solid #dbe6f5;
    padding: 0 18px;
    background: #dcecff;
}

.teachers-directory-pagination > span {
    margin-left: auto;
    border-radius: 7px;
    padding: 9px 13px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.teachers-directory-pagination button {
    min-width: 32px;
    height: 32px;
    border: 0;
    color: #9fb1d0;
    background: transparent;
}

.teachers-directory-pagination button.is-current {
    color: #ffffff;
    background: var(--dashboard-primary);
}

.teachers-directory-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 1180px) {
    .teachers-directory-metrics {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .teachers-directory-top,
    .teachers-directory-panel .panel-title {
        align-items: stretch;
        flex-direction: column;
    }

    .time-widgets,
    .teachers-directory-panel .table-toolbar {
        flex-wrap: wrap;
    }
}

.teacher-profile-page {
    align-content: start;
    gap: 14px;
    grid-auto-rows: max-content;
    overflow-x: hidden;
}

.teacher-profile-top {
    align-items: center;
    background: var(--dashboard-primary);
}

.teacher-profile-top .breadcrumb,
.teacher-profile-top .breadcrumb a,
.teacher-profile-top .breadcrumb strong {
    color: #f8fafc;
}

.teacher-profile-top .breadcrumb svg {
    color: rgba(248, 250, 252, 0.72);
}

.teacher-profile-top h1 {
    color: #ffffff;
}

.teacher-profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.teacher-back-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 7px;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.teacher-back-button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.teacher-back-button svg {
    width: 16px;
    height: 16px;
}

.teacher-profile-metrics {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
}

.teacher-profile-metrics .metric-card {
    min-height: 70px;
    padding: 14px 22px;
    box-shadow: none;
}

.teacher-profile-metrics .metric-card > span {
    width: 46px;
    height: 46px;
}

.teacher-profile-metrics .metric-card strong {
    font-size: 24px;
}

.teacher-profile-card {
    overflow: hidden;
    border: 1px solid #b9d8fb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(10, 34, 70, 0.06);
}

.teacher-profile-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    color: #ffffff;
    background: #00509D;
}

.teacher-profile-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.teacher-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.teacher-avatar-wrap img {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 0;
    object-fit: cover;
    background: #eef6ff;
    box-shadow: none;
}

.teacher-avatar-wrap i {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #94a3b8;
}

.teacher-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.teacher-title-row h2 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

.teacher-title-row span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 6px;
    padding: 3px 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 12px;
    font-weight: 900;
}

.teacher-title-row span.is-active {
    border-color: #b7efd1;
    color: #047747;
    background: #daf8e8;
}

.teacher-title-row .rate-pill {
    border-color: #fed7aa;
    color: #ea580c;
    background: #fff7ed;
}

.teacher-profile-identity p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 5px 0 0;
    color: #ffffff;
    font-size: 12px;
}

.teacher-profile-identity p strong,
.teacher-profile-identity p > span:not(.flag-code) {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 6px;
    padding: 3px 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 900;
}

.teacher-profile-identity p > span:not(.flag-code):has(+ .flag-code),
.teacher-profile-identity p > span:not(.flag-code):has(+ strong) {
    border: 0;
    padding: 0;
    background: transparent;
}

.teacher-profile-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    border-top: 1px solid #d8e7f8;
    border-bottom: 1px solid #d8e7f8;
    padding: 10px 18px;
    background: #d9eafa;
    scrollbar-width: thin;
}

.teacher-profile-tabs button {
    flex: 0 0 auto;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    padding: 0 14px;
    color: #26344f;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.teacher-profile-tabs button.is-active {
    color: #ffffff;
    background: var(--dashboard-primary);
}

.teacher-record-section {
    border-top: 1px solid #dbe6f5;
    background: #ffffff;
}

.teacher-record-section > header {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 14px;
    background: #dbeafe;
}

.teacher-record-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #101e4b;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.teacher-record-section header p {
    margin: 4px 0 0;
    color: #3856ee;
    font-size: 12px;
    font-weight: 800;
}

.teacher-record-section header button {
    border: 0;
    color: #2448dd;
    background: transparent;
    font-size: 12px;
    font-weight: 900;
}

.teacher-dashboard-workspace {
    gap: 16px;
}

.teacher-self-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    padding: 18px;
    background: #dbeafe;
}

.teacher-self-header span {
    color: #2448dd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.teacher-self-header h1 {
    margin: 3px 0 0;
    color: #101e4b;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0;
}

.teacher-self-header p {
    margin: 4px 0 0;
    color: #4c5f7c;
    font-size: 13px;
    font-weight: 800;
}

.teacher-self-meta {
    display: grid;
    justify-items: end;
    gap: 4px;
    color: #1d3374;
    font-size: 13px;
    font-weight: 800;
}

.teacher-self-meta strong {
    border-radius: 999px;
    padding: 5px 10px;
    color: #047857;
    background: #d1fae5;
    font-size: 12px;
}

.teacher-self-alert {
    margin: 0;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 10px 12px;
    color: #14532d;
    background: #dcfce7;
    font-size: 13px;
    font-weight: 900;
}

.teacher-self-form {
    display: grid;
    gap: 14px;
}

.teacher-self-edit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.teacher-self-edit-grid label,
.teacher-self-edit-grid > div {
    display: grid;
    align-content: start;
    gap: 6px;
    color: #53657d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.teacher-self-edit-grid label.is-wide {
    grid-column: span 2;
}

.teacher-self-edit-grid input,
.teacher-self-edit-grid textarea {
    width: 100%;
    border: 1px solid #d3e0f2;
    border-radius: 7px;
    padding: 9px 10px;
    color: #101e4b;
    background: #f8fbff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.teacher-self-edit-grid input[readonly],
.teacher-self-edit-grid textarea[readonly] {
    border-color: #dbe6f3;
    color: #475569;
    background: #eef4fb;
    cursor: default;
}

.teacher-self-edit-grid strong {
    color: #101e4b;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.teacher-record-body {
    display: grid;
    gap: 10px;
    padding: 10px 14px;
}

.teacher-profile-confirm-card {
    width: min(540px, 100%);
}

.teacher-profile-confirm-body {
    padding: 18px;
    background: #fff7ed;
}

.teacher-profile-confirm-body p {
    margin: 0;
    color: #7c2d12;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.teacher-record-group {
    display: grid;
    gap: 6px;
}

.teacher-record-group h4 {
    margin: 0;
    color: #2448dd;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.teacher-record-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    background: #ffffff;
}

.teacher-record-grid > div {
    display: grid;
    min-height: 46px;
    align-content: center;
    gap: 4px;
    border-right: 1px solid #e5edf7;
    padding: 8px 12px;
}

.teacher-record-grid > div:nth-child(4n),
.teacher-record-grid > div:last-child {
    border-right: 0;
}

.teacher-record-grid .is-wide {
    grid-column: span 4;
}

.teacher-record-grid .is-double {
    grid-column: span 2;
}

.teacher-record-grid.is-single {
    grid-template-columns: 1fr;
}

.teacher-record-grid span {
    color: #65748f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.teacher-record-grid strong {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #07142e;
    font-size: 14px;
    font-weight: 900;
}

.teacher-record-grid strong button {
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #c9d8ff;
    border-radius: 4px;
    color: #3860e4;
    background: #f6f9ff;
}

.teacher-record-grid strong button svg {
    width: 12px;
    height: 12px;
}

.restricted-pill {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    padding: 0 10px;
    color: #c2410c;
    background: #fff7ed;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
}

.is-compact-section .teacher-record-body {
    padding-top: 10px;
}

.teacher-edit-modal[hidden] {
    display: none;
}

.teacher-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
}

.teacher-edit-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(8, 20, 45, 0.48);
}

.teacher-edit-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid #bad5f9;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(8, 20, 45, 0.24);
}

.teacher-edit-dialog > header,
.teacher-edit-dialog > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #dbeafe;
}

.teacher-edit-dialog > header span {
    color: #2448dd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.teacher-edit-dialog h2,
.teacher-edit-dialog h3 {
    margin: 0;
    color: #101e4b;
    font-weight: 900;
}

.teacher-edit-dialog h2 {
    font-size: 20px;
}

.teacher-edit-dialog h3 {
    font-size: 14px;
}

.teacher-edit-dialog > header button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #c4d8f6;
    border-radius: 7px;
    color: #2448dd;
    background: #ffffff;
}

.teacher-edit-body {
    display: grid;
    gap: 16px;
    overflow: auto;
    padding: 16px 18px;
}

.teacher-edit-body section {
    display: grid;
    gap: 10px;
}

.teacher-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.teacher-edit-grid label,
.teacher-edit-country-row label {
    display: grid;
    gap: 5px;
    color: #52637f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.teacher-edit-grid input,
.teacher-edit-grid select,
.teacher-edit-grid textarea,
.teacher-edit-country-row select {
    width: 100%;
    border: 1px solid #cbd9ed;
    border-radius: 7px;
    padding: 10px 11px;
    color: #07142e;
    background: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.teacher-edit-grid .is-wide {
    grid-column: 1 / -1;
}

.teacher-edit-photo-actions,
.teacher-edit-country-row,
.teacher-edit-country-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.teacher-edit-photo-actions button,
.teacher-edit-country-row button,
.teacher-edit-dialog > footer button {
    min-height: 36px;
    border: 1px solid #bad0f4;
    border-radius: 7px;
    padding: 0 13px;
    color: #2448dd;
    background: #f7fbff;
    font-size: 12px;
    font-weight: 900;
}

.teacher-edit-photo-actions button.is-active,
.teacher-edit-dialog > footer button[type="submit"] {
    color: #ffffff;
    background: var(--dashboard-primary);
}

.teacher-edit-country-row label {
    min-width: 240px;
}

.teacher-edit-country-list span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 8px;
    border: 1px solid #bcd3ff;
    border-radius: 999px;
    padding: 0 8px 0 12px;
    color: #2448dd;
    background: #eef4ff;
    font-size: 12px;
    font-weight: 900;
}

.teacher-edit-country-list button {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: #2448dd;
    line-height: 1;
}

.teacher-edit-modal.is-restricted .teacher-edit-dialog {
    border-color: #f4c581;
}

.teacher-edit-modal.is-restricted .teacher-edit-dialog > header,
.teacher-edit-modal.is-restricted .teacher-edit-dialog > footer {
    background: #fff7ed;
}

.teacher-edit-modal.is-restricted .teacher-edit-dialog > header span {
    color: #c2410c;
}

.teacher-lessons-panel {
    display: grid;
    gap: 0;
    border: 1px solid #cfe0f8;
    border-radius: 8px;
    padding: 0;
    color: var(--dashboard-primary);
    background: rgba(255, 255, 255, 0.9);
}

.teacher-lesson-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
}

.teacher-lesson-metrics article,
.teacher-pay-summary article {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    border: 1px solid #d7e4f4;
    border-radius: 8px;
    padding: 14px 18px;
    background: #ffffff;
}

.teacher-lesson-metrics span,
.teacher-pay-summary > article > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    color: #3860e4;
    background: #eef4ff;
}

.teacher-lesson-metrics article:nth-child(2) span,
.teacher-pay-summary article:first-child > span {
    color: #059669;
    background: #e7f9f1;
}

.teacher-lesson-metrics article:nth-child(4) span {
    color: #ea580c;
    background: #fff7ed;
}

.teacher-lesson-metrics svg,
.teacher-pay-summary svg {
    width: 18px;
    height: 18px;
}

.teacher-lesson-metrics p,
.teacher-pay-summary p {
    margin: 0;
    color: #475672;
    font-size: 13px;
    font-weight: 900;
}

.teacher-lesson-metrics strong,
.teacher-pay-summary strong {
    display: block;
    color: #101e4b;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
}

.teacher-pay-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.teacher-pay-summary article {
    justify-content: space-between;
    min-height: 88px;
}

.teacher-pay-summary small {
    display: block;
    margin-top: 8px;
    color: #5d6e8f;
    font-size: 12px;
    font-weight: 900;
}

.teacher-lessons-section {
    overflow: hidden;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    background: #ffffff;
}

.teacher-lessons-section > header {
    padding: 14px 18px;
    background: #dbeafe;
}

.teacher-lessons-section > header span {
    color: #2448dd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.teacher-lessons-section h3 {
    margin: 4px 0 0;
    color: #101e4b;
    font-size: 20px;
    font-weight: 900;
}

.teacher-lessons-section p {
    margin: 4px 0 0;
    color: #3860e4;
    font-size: 12px;
    font-weight: 800;
}

.teacher-lessons-table {
    overflow-x: auto;
}

.teacher-lessons-table table {
    min-width: 1560px;
}

.teacher-lessons-table th {
    color: #56657e;
    background: #dbeafe;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.teacher-lessons-table th,
.teacher-lessons-table td {
    padding: 12px 14px;
}

.teacher-lessons-table td {
    color: #10203f;
    font-size: 13px;
    font-weight: 800;
}

.teacher-lessons-table td strong {
    color: #113f9d;
}

.lesson-title-link {
    color: #113f9d;
    font-weight: 900;
    text-decoration: none;
}

.lesson-title-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.has-teacher-lesson-watermark .dashboard-workspace {
    position: relative;
}

.teacher-lesson-watermark {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 15;
    opacity: 0.16;
    background-image: repeating-linear-gradient(
        -32deg,
        transparent 0 72px,
        rgba(15, 23, 42, 0.01) 72px 112px
    );
    color: #0f172a;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 2px;
    overflow: hidden;
}

.teacher-lesson-watermark::before {
    content: "vlace.com  vlace.com  vlace.com  vlace.com  vlace.com  vlace.com";
    position: absolute;
    inset: -20% -10%;
    display: grid;
    align-content: space-around;
    transform: rotate(-28deg);
    white-space: pre-wrap;
    line-height: 4;
    word-spacing: 64px;
}

.teacher-lesson-actions {
    position: relative;
    display: inline-flex;
}

.teacher-lesson-action-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 128px;
    border: 1px solid #c8d8ef;
    border-radius: 8px;
    padding: 6px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(10, 34, 70, 0.16);
}

.teacher-lesson-action-menu[hidden] {
    display: none;
}

.teacher-lesson-action-menu a,
.teacher-lesson-action-menu button {
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 6px;
    padding: 0 10px;
    color: #14376f;
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    text-align: left;
    text-decoration: none;
}

.teacher-lesson-action-menu a:hover,
.teacher-lesson-action-menu button:hover {
    background: #eef5ff;
}

.teacher-lesson-action-menu .is-danger {
    color: #dc2626;
}

.teacher-lesson-action-menu svg {
    width: 14px;
    height: 14px;
}

.lesson-status-pill,
.recording-pill {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    padding: 0 12px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
}

.lesson-status-pill {
    color: #c2410c;
    background: #fff7d6;
}

.recording-pill {
    color: #66748d;
    background: #eef3fa;
}

.classroom-button {
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    padding: 0 14px;
    color: #ffffff;
    background: #dc2626;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.18);
}

.classroom-button.is-muted {
    color: #748199;
    background: #e5edf7;
    box-shadow: none;
}

.lesson-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #ffffff;
}

.lesson-history-toolbar label {
    display: flex;
    width: min(100%, 250px);
    min-height: 42px;
    align-items: center;
    gap: 10px;
    border: 1px solid #bfd5f1;
    border-radius: 7px;
    padding: 0 12px;
    background: #f7fef9;
}

.lesson-history-toolbar label svg {
    width: 16px;
    height: 16px;
    color: #7d8da8;
}

.lesson-history-toolbar input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #10203f;
    background: transparent;
    font-size: 13px;
    font-weight: 800;
}

.lesson-history-toolbar > div,
.lesson-history-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lesson-history-nav span {
    margin-right: 8px;
    color: #244173;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.lesson-history-toolbar button {
    min-height: 34px;
    border: 1px solid #b9d4ff;
    border-radius: 7px;
    padding: 0 12px;
    color: #2448dd;
    background: #f7fef9;
    font-size: 12px;
    font-weight: 900;
}

.lesson-history-toolbar button.is-active {
    color: #ffffff;
    border-color: #2448dd;
    background: var(--dashboard-primary);
}

.teacher-lessons-table tr.is-highlighted {
    background: #fff4f4;
    box-shadow: inset 4px 0 0 #ff9f9f;
}

.teacher-weekly-panel {
    display: grid;
    gap: 14px;
    border-top: 1px solid #dbe6f5;
    padding: 14px;
    background: #dcecff;
}

.teacher-weekly-panel .student-section-title,
.teacher-weekly-panel .schedule-calendar-toolbar {
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    padding: 14px 16px;
    background: #ffffff;
}

.teacher-weekly-panel .schedule-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.teacher-weekly-panel .schedule-calendar-toolbar > strong {
    margin-right: auto;
}

.schedule-status-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
}

.schedule-status-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.schedule-legend-marker {
    width: 12px;
    height: 12px;
    border: 1px solid currentColor;
    border-radius: 4px;
}

.schedule-legend-marker.is-booked {
    border-color: var(--schedule-booked-border);
    background: var(--schedule-booked-bg);
}

.schedule-legend-marker.is-open {
    border-color: var(--schedule-open-border);
    background: var(--schedule-open-bg);
}

.schedule-legend-marker.is-closed {
    border-color: var(--schedule-closed-border);
    background: var(--schedule-closed-bg);
}

.schedule-legend-marker.is-prime-time {
    border-color: var(--schedule-prime-border);
    background: var(--schedule-prime-bg);
}

.teacher-weekly-panel .student-schedule-period {
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    background: #ffffff;
}

.teacher-weekly-calendar .schedule-slot.is-assigned {
    border-color: var(--schedule-booked-border);
    color: var(--schedule-booked-text);
    background: var(--schedule-booked-bg);
    box-shadow: inset 0 0 0 1px rgba(122, 75, 0, 0.12);
}

.teacher-weekly-calendar .schedule-slot.is-assigned strong {
    color: var(--schedule-booked-text);
    font-size: 13px;
    line-height: 1.2;
}

.teacher-weekly-calendar .schedule-slot.is-assigned span {
    color: #26344f;
    font-size: 11px;
    line-height: 1.25;
}

.teacher-weekly-calendar .schedule-slot.is-assigned small {
    color: var(--schedule-booked-muted);
    font-size: 11px;
    line-height: 1.25;
}

.teacher-weekly-calendar .schedule-slot[data-teacher-schedule-slot="availability"] {
    cursor: pointer;
}

.teacher-weekly-calendar .schedule-slot.is-locked {
    cursor: default;
}

.teacher-weekly-calendar .schedule-slot.is-closed {
    border-color: var(--schedule-closed-border);
    color: var(--schedule-closed-text);
    background: var(--schedule-closed-bg);
}

.teacher-weekly-calendar .schedule-slot.is-closed span,
.teacher-weekly-calendar .schedule-slot.is-closed small {
    color: var(--schedule-closed-text);
}

.teacher-weekly-calendar .schedule-slot.is-prime-time.is-assigned {
    border-color: var(--schedule-prime-booked-border);
    color: var(--schedule-prime-text);
    background: var(--schedule-prime-booked-bg);
    box-shadow: inset 0 0 0 1px rgba(111, 37, 37, 0.13);
}

.teacher-weekly-calendar .schedule-slot.is-prime-time.is-assigned strong,
.teacher-weekly-calendar .schedule-slot.is-prime-time.is-assigned span {
    color: var(--schedule-prime-text);
}

.teacher-weekly-calendar .schedule-slot.is-prime-time.is-assigned small {
    color: var(--schedule-prime-muted);
}

.teacher-weekly-calendar .schedule-slot.is-prime-time.is-open.empty {
    border-color: var(--schedule-prime-border);
    color: var(--schedule-prime-text);
    background: var(--schedule-prime-bg);
}

.teacher-weekly-calendar .schedule-slot.is-prime-time.is-closed {
    border-color: var(--schedule-closed-border);
    color: var(--schedule-closed-text);
    background: var(--schedule-closed-bg);
}

.manager-profile-page,
.manager-schedule-status-modal {
    --manager-full-day-bg: #dcfce7;
    --manager-full-day-border: #a7f3d0;
    --manager-full-day-text: #14532d;
    --manager-rest-day-bg: #ffe4e6;
    --manager-rest-day-border: #fecdd3;
    --manager-rest-day-text: #7f1d1d;
    --manager-on-leave-bg: #f1f5f9;
    --manager-on-leave-border: #cbd5e1;
    --manager-on-leave-text: #334155;
    --manager-absent-bg: #fee2e2;
    --manager-absent-border: #fca5a5;
    --manager-absent-text: #7f1d1d;
}

.manager-month-panel {
    display: grid;
    gap: 14px;
    border-top: 1px solid #dbe6f5;
    padding: 14px;
    background: #ffffff;
}

.manager-schedule-strip,
.manager-month-card {
    overflow: hidden;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    background: #ffffff;
}

.manager-schedule-strip {
    padding: 14px;
}

.manager-month-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #dbeafe;
}

.manager-month-card > header span {
    color: #2448dd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.manager-month-card h3 {
    margin: 3px 0 0;
    color: #101e4b;
    font-size: 18px;
    font-weight: 900;
}

.manager-month-controls {
    justify-content: flex-end;
}

.manager-month-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 10px;
    align-items: stretch;
    padding: 12px 14px 14px;
}

.manager-month-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.manager-month-legend {
    display: grid;
    align-content: center;
    gap: 8px;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
}

.manager-month-legend span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 8px;
    border: 1px solid #d9e3f2;
    border-radius: 8px;
    padding: 0 10px;
    color: #334155;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 900;
}

.manager-status-dot {
    width: 12px;
    height: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
}

.manager-status-dot.is-full-day,
.manager-month-day.is-full-day {
    border-color: var(--manager-full-day-border);
    color: var(--manager-full-day-text);
    background: var(--manager-full-day-bg);
}

.manager-status-dot.is-rest-day,
.manager-month-day.is-rest-day {
    border-color: var(--manager-rest-day-border);
    color: var(--manager-rest-day-text);
    background: var(--manager-rest-day-bg);
}

.manager-status-dot.is-on-leave,
.manager-month-day.is-on-leave {
    border-color: var(--manager-on-leave-border);
    color: var(--manager-on-leave-text);
    background: var(--manager-on-leave-bg);
}

.manager-status-dot.is-absent,
.manager-month-day.is-absent {
    border-color: var(--manager-absent-border);
    color: var(--manager-absent-text);
    background: var(--manager-absent-bg);
}

.manager-month-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    margin: 12px 14px 0;
    overflow: hidden;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    background: #dce6f3;
}

.manager-month-day-heading {
    min-height: 38px;
    display: grid;
    place-items: center;
    color: #244173;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 900;
}

.manager-month-day {
    display: grid;
    min-height: 96px;
    align-content: start;
    gap: 6px;
    border: 0;
    padding: 10px;
    text-align: left;
}

.manager-month-day strong {
    color: inherit;
    font-size: 15px;
    font-weight: 900;
}

.manager-month-day span,
.manager-month-day small {
    display: block;
    color: inherit;
    font-size: 11px;
    font-weight: 900;
}

.manager-month-day small {
    opacity: 0.78;
}

.manager-month-day.is-unscheduled {
    color: #64748b;
    background: #ffffff;
}

.manager-month-day.is-outside-month {
    opacity: 0.46;
}

.manager-month-summary article {
    border: 1px solid #dce6f3;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.manager-month-summary article.is-full-day {
    border-color: var(--manager-full-day-border);
    color: var(--manager-full-day-text);
    background: var(--manager-full-day-bg);
}

.manager-month-summary article.is-rest-day {
    border-color: var(--manager-rest-day-border);
    color: var(--manager-rest-day-text);
    background: var(--manager-rest-day-bg);
}

.manager-month-summary article.is-on-leave {
    border-color: var(--manager-on-leave-border);
    color: var(--manager-on-leave-text);
    background: var(--manager-on-leave-bg);
}

.manager-month-summary article.is-absent {
    border-color: var(--manager-absent-border);
    color: var(--manager-absent-text);
    background: var(--manager-absent-bg);
}

.manager-month-summary span {
    display: block;
    color: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    opacity: 0.84;
}

.manager-month-summary strong {
    display: block;
    margin-top: 6px;
    color: inherit;
    font-size: 24px;
    font-weight: 900;
}

.manager-schedule-status-modal .teacher-edit-dialog {
    width: min(560px, calc(100vw - 32px));
}

.manager-schedule-status-modal .teacher-edit-dialog > header p {
    margin: 4px 0 0;
    color: #3856ee;
    font-size: 13px;
    font-weight: 900;
}

.manager-status-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.manager-status-choice-grid.is-attendance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.manager-status-choice-grid label {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d9e3f2;
    border-radius: 8px;
    padding: 0 12px;
    color: #334155;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.manager-status-choice-grid input {
    width: 15px;
    height: 15px;
    accent-color: var(--dashboard-primary);
}

.manager-status-choice-grid label:has(input:checked) {
    border-color: var(--dashboard-primary);
    box-shadow: inset 0 0 0 2px rgba(30, 58, 138, 0.18);
}

.manager-status-choice-grid label:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.manager-status-choice-grid .is-full-day:has(input:checked),
.manager-status-choice-grid .is-present:has(input:checked) {
    color: var(--manager-full-day-text);
    background: var(--manager-full-day-bg);
}

.manager-status-choice-grid .is-rest-day:has(input:checked),
.manager-status-choice-grid .is-absent:has(input:checked) {
    color: var(--manager-rest-day-text);
    background: var(--manager-rest-day-bg);
}

.manager-status-choice-grid .is-on-leave:has(input:checked) {
    color: var(--manager-on-leave-text);
    background: var(--manager-on-leave-bg);
}

.teacher-payroll-panel {
    display: grid;
    gap: 14px;
    border-top: 1px solid #dbe6f5;
    padding: 14px;
    background: #dcecff;
}

.teacher-documents-panel,
.teacher-feedback-panel {
    border-top: 1px solid #dbe6f5;
    padding: 14px;
    background: #dcecff;
}

.teacher-documents-table,
.teacher-feedback-table {
    overflow: hidden;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    background: #ffffff;
}

.teacher-feedback-table {
    overflow: visible;
}

.teacher-documents-table > header,
.teacher-feedback-table > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px 14px;
    background: #dbeafe;
}

.teacher-documents-table h3,
.teacher-feedback-table h3 {
    margin: 0;
    color: #101e4b;
    font-size: 20px;
    font-weight: 900;
}

.teacher-documents-table p,
.teacher-feedback-table p {
    margin: 4px 0 0;
    color: #4c5f7c;
    font-size: 13px;
    font-weight: 800;
}

.teacher-documents-table > header button,
.teacher-feedback-table > header button {
    min-height: 43px;
    border: 0;
    border-radius: 7px;
    padding: 0 18px;
    color: #ffffff;
    background: #3855df;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(56, 85, 223, 0.2);
}

.teacher-documents-wrap,
.teacher-feedback-wrap {
    overflow-x: auto;
}

.teacher-documents-wrap table,
.teacher-feedback-wrap table {
    min-width: 900px;
}

.teacher-documents-wrap th,
.teacher-feedback-wrap th {
    color: #52617a;
    background: #dbeafe;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.teacher-documents-wrap th,
.teacher-documents-wrap td,
.teacher-feedback-wrap th,
.teacher-feedback-wrap td {
    padding: 13px 14px;
}

.teacher-documents-wrap td,
.teacher-feedback-wrap td {
    height: 48px;
    color: #101e4b;
    font-size: 13px;
    font-weight: 800;
}

.teacher-documents-wrap td strong,
.teacher-feedback-wrap td strong {
    font-weight: 900;
}

.document-requirement,
.document-file-type,
.document-view-button {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    padding: 0 12px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
}

.document-requirement.is-required {
    color: #c05a00;
    background: #fff4d9;
}

.document-requirement.is-not-required {
    color: #08794e;
    background: #dff8e9;
}

.document-file-type {
    color: #2358e8;
    background: #edf4ff;
}

.document-view-button {
    border: 1px solid #bfdbfe;
    color: #2448dd;
    background: #f8fafc;
}

.teacher-documents-wrap tr.documents-empty-row td,
.teacher-feedback-wrap tr.feedback-empty-row td {
    height: 52px;
}

.teacher-documents-table > footer,
.teacher-feedback-table > footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-height: 58px;
    border-top: 1px solid #cbdcf0;
    padding: 0 28px;
    background: #dbeafe;
}

.teacher-documents-table > footer button,
.teacher-feedback-table > footer button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #93a5c0;
    background: transparent;
    font-weight: 900;
}

.teacher-documents-table > footer button.is-current,
.teacher-feedback-table > footer button.is-current {
    color: #ffffff;
    background: var(--dashboard-primary);
}

.teacher-documents-table > footer svg,
.teacher-feedback-table > footer svg {
    width: 16px;
    height: 16px;
}

.feedback-visibility,
.feedback-acknowledgment {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 12px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
}

.feedback-visibility.is-published {
    color: #08794e;
    background: #dff8e9;
}

.feedback-visibility.is-private {
    color: #475569;
    background: #e9eff7;
}

.feedback-acknowledgment {
    color: #c05a00;
    background: #fff4d9;
}

.feedback-acknowledgment.is-acknowledged {
    color: #14532d;
    background: #dcfce7;
}

.feedback-acknowledgment.is-not-required {
    color: #475569;
    background: #f1f5f9;
}

.manager-feedback-modal .teacher-edit-dialog,
.manager-feedback-view-modal .teacher-edit-dialog {
    width: min(820px, calc(100vw - 32px));
}

.manager-feedback-panel .teacher-feedback-wrap {
    overflow: visible;
}

.manager-feedback-panel .lesson-action-menu {
    top: auto;
    bottom: calc(100% + 8px);
    z-index: 300;
}

.teacher-feedback-panel .teacher-feedback-wrap {
    overflow: visible;
}

.teacher-feedback-panel .lesson-action-menu {
    top: auto;
    bottom: calc(100% + 8px);
    z-index: 300;
}

.teacher-feedback-panel .row-action {
    border: 1px solid #d9e4f2;
    color: #10204d;
    background: #ffffff;
    cursor: pointer;
}

.teacher-feedback-panel .row-action:hover,
.teacher-feedback-panel .lesson-actions.is-open .row-action {
    color: #2448dd;
    background: #eef6ff;
}

.manager-feedback-action-trigger {
    width: 34px;
    height: 34px;
    border: 1px solid #d9e4f2;
    border-radius: 8px;
    color: #10204d;
    background: #ffffff;
    cursor: pointer;
}

.manager-feedback-action-trigger:hover,
.manager-feedback-panel .lesson-actions.is-open .manager-feedback-action-trigger {
    color: #2448dd;
    background: #eef6ff;
}

.manager-feedback-action-trigger span {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-1px);
}

.manager-feedback-ack-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    width: min(100%, 520px);
}

.feedback-ack-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #d9e3f2;
    border-radius: 8px;
    padding: 12px;
    background: #f8fbff;
}

.feedback-ack-toggle input {
    width: 18px;
    height: 18px;
    accent-color: #2448dd;
}

.feedback-ack-toggle span {
    display: grid;
    gap: 2px;
}

.feedback-ack-toggle small {
    color: #617094;
    font-size: 12px;
    font-weight: 700;
}

.feedback-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.feedback-detail-grid div,
.feedback-detail-copy {
    display: grid;
    gap: 6px;
    border: 1px solid #d9e3f2;
    border-radius: 8px;
    padding: 12px;
    background: #f8fbff;
}

.feedback-detail-grid span,
.feedback-detail-copy span {
    color: #617094;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.feedback-detail-copy {
    margin-top: 12px;
}

.feedback-detail-copy p,
.feedback-delete-warning {
    margin: 0;
    color: #172554;
    font-weight: 800;
    white-space: pre-wrap;
}

.feedback-modal-message {
    margin: 12px 0 0;
    border-radius: 8px;
    padding: 10px 12px;
    color: #7f1d1d;
    background: #fee2e2;
    font-weight: 800;
}

.feedback-modal-message[data-type="success"] {
    color: #14532d;
    background: #dcfce7;
}

.teacher-clear-activity-modal .teacher-edit-dialog {
    width: min(520px, calc(100vw - 32px));
}

.activity-empty-state {
    height: 96px;
    text-align: center;
    color: #66769a;
    font-weight: 800;
}

.manager-note-modal .teacher-edit-dialog {
    width: min(700px, calc(100vw - 32px));
}

.policy-ack-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 900;
}

.policy-ack-status.is-acknowledged,
.policy-ack-status.is-not-required {
    color: #14532d;
    background: #dcfce7;
}

.policy-ack-status.is-pending {
    color: #9a3412;
    background: #ffedd5;
}

.policy-ack-status.is-requires-review {
    color: #7f1d1d;
    background: #fee2e2;
}

.manager-policy-view-modal .teacher-edit-dialog {
    width: min(820px, calc(100vw - 32px));
}

.manager-policy-content {
    min-height: 140px;
    white-space: pre-wrap;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    padding: 14px;
    color: #102048;
    background: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.teacher-notes-panel {
    border-top: 1px solid #dbe6f5;
    padding: 14px;
    background: #dcecff;
}

.teacher-notes-card {
    overflow: hidden;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    background: #ffffff;
}

.teacher-notes-card > header {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: #dbeafe;
}

.teacher-notes-card h3 {
    margin: 0;
    color: #101e4b;
    font-size: 20px;
    font-weight: 900;
}

.teacher-notes-card p {
    margin: 4px 0 0;
    color: #31405d;
    font-size: 13px;
    font-weight: 800;
}

.teacher-notes-card > header button {
    min-height: 38px;
    border: 1px solid #c7d9f3;
    border-radius: 7px;
    padding: 0 16px;
    color: #2448dd;
    background: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.teacher-notes-table {
    overflow-x: auto;
}

.teacher-notes-table table {
    min-width: 1100px;
}

.teacher-notes-table th {
    color: #52617a;
    background: #dbeafe;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.teacher-notes-table th,
.teacher-notes-table td {
    padding: 13px 16px;
}

.teacher-notes-table td {
    height: 46px;
    color: #101e4b;
    border-bottom: 1px solid #e5edf7;
    font-size: 13px;
    font-weight: 800;
}

.teacher-notes-table th:nth-child(1) {
    width: 18%;
}

.teacher-notes-table th:nth-child(2) {
    width: 18%;
}

.teacher-notes-table th:nth-child(3) {
    width: 20%;
}

.teacher-notes-table th:nth-child(4) {
    width: 30%;
}

.teacher-notes-table th:nth-child(5) {
    width: 14%;
    text-align: right;
}

.teacher-notes-card > footer {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    border-top: 1px solid #cbdcf0;
    padding: 0 28px;
    background: #dbeafe;
}

.teacher-notes-card > footer button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #93a5c0;
    background: transparent;
    font-weight: 900;
}

.teacher-notes-card > footer button.is-current {
    color: #ffffff;
    background: var(--dashboard-primary);
}

.teacher-notes-card > footer svg {
    width: 16px;
    height: 16px;
}

.teacher-policy-panel {
    border-top: 1px solid #dbe6f5;
    padding: 14px;
    background: #dcecff;
}

.teacher-policy-card {
    overflow: hidden;
    min-height: 340px;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    background: #dbeafe;
}

.teacher-policy-card > header {
    display: flex;
    min-height: 90px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: #dbeafe;
}

.teacher-policy-card h3 {
    margin: 0;
    color: #101e4b;
    font-size: 20px;
    font-weight: 900;
}

.teacher-policy-card p {
    margin: 4px 0 0;
    color: #31405d;
    font-size: 13px;
    font-weight: 800;
}

.policy-summary-cards {
    display: flex;
    align-items: center;
    gap: 10px;
}

.policy-summary-cards article {
    display: grid;
    min-width: 145px;
    min-height: 58px;
    align-content: center;
    border: 1px solid #d7e4f4;
    border-radius: 7px;
    padding: 10px 14px;
    background: #ffffff;
}

.policy-summary-cards article.is-review {
    min-width: 230px;
    border-color: #a7f3d0;
    background: #eef6ff;
}

.policy-summary-cards span {
    color: #2448dd;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.policy-summary-cards .is-review span {
    color: #08794e;
}

.policy-summary-cards strong {
    margin-top: 3px;
    color: #101e4b;
    font-size: 17px;
    font-weight: 900;
}

.policy-summary-cards .is-review strong {
    color: #166044;
}

.teacher-policy-table {
    overflow-x: auto;
    background: #ffffff;
}

.teacher-policy-table table {
    min-width: 1100px;
}

.teacher-policy-table th {
    color: #52617a;
    background: #dbeafe;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.teacher-policy-table th,
.teacher-policy-table td {
    padding: 13px 16px;
}

.teacher-policy-table td {
    height: 48px;
    color: #52617a;
    border-bottom: 1px solid #e5edf7;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
}

.payroll-history-card,
.payroll-processing-card,
.payroll-detail-card,
.payroll-deductions-card {
    overflow: hidden;
    border: 1px solid #cbdcf0;
    border-radius: 8px;
    background: #ffffff;
}

.payroll-history-card > header,
.payroll-detail-card > header,
.payroll-processing-card,
.payroll-deductions-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: #dbeafe;
}

.payroll-history-card header > div > span,
.payroll-processing-card span,
.payroll-detail-card header span,
.payroll-deductions-card span {
    color: #2448dd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.payroll-history-card h3,
.payroll-processing-card h3,
.payroll-detail-card h3,
.payroll-deductions-card h3 {
    margin: 4px 0 0;
    color: #101e4b;
    font-size: 20px;
    font-weight: 900;
}

.payroll-history-card label {
    display: grid;
    gap: 6px;
}

.payroll-history-card label span {
    color: #65748f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.payroll-history-card select {
    min-width: 250px;
    min-height: 42px;
    border: 1px solid #cbdcf0;
    border-radius: 7px;
    padding: 0 12px;
    color: #101e4b;
    background: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

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

.payroll-table-wrap table {
    min-width: 1420px;
}

.payroll-table-wrap th {
    color: #52617a;
    background: #dbeafe;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.payroll-table-wrap th,
.payroll-table-wrap td {
    padding: 12px 16px;
}

.payroll-table-wrap td {
    color: #101e4b;
    background: #fffde9;
    font-size: 13px;
    font-weight: 900;
}

.payroll-table-wrap td.payroll-number-cell {
    text-align: right;
    white-space: nowrap;
}

.payroll-table-wrap td.payroll-number-cell.is-net {
    color: #0f2563;
    font-weight: 1000;
}

.payroll-deduction-link {
    border: 0;
    padding: 0;
    color: #dc2626;
    background: transparent;
    font: inherit;
    font-weight: 1000;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.payroll-deduction-link:hover,
.payroll-deduction-link:focus-visible {
    color: #991b1b;
}

.payroll-table-wrap td small {
    margin-top: 3px;
    color: #52617a;
    font-size: 11px;
    font-weight: 900;
}

.payroll-status,
.payroll-soft-button {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    padding: 0 12px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
}

.payroll-status {
    color: #334155;
    background: #f8fafc;
}

.payroll-soft-button {
    border: 1px solid #1d3a8a;
    color: #ffffff;
    background: #1d3a8a;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(29, 58, 138, 0.18);
}

.payroll-soft-button:hover {
    border-color: #142b70;
    color: #ffffff;
    background: #142b70;
}

.payroll-soft-button:disabled,
.payroll-soft-button.is-pending {
    cursor: default;
    color: #7b8799;
    border-color: #d4dfec;
    background: #f6f8fb;
    box-shadow: none;
}

.payroll-action-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.payroll-period-link {
    color: #1d3a8a;
    text-decoration: none;
}

.payroll-period-link:hover {
    text-decoration: underline;
}

.payroll-processing-card {
    background: #ffffff;
}

.payroll-processing-card p,
.payroll-detail-card p,
.payroll-deductions-card p {
    margin: 4px 0 0;
    color: #5d6e8f;
    font-size: 13px;
    font-weight: 800;
}

.payroll-processing-card > button,
.payroll-deductions-card > button {
    min-height: 40px;
    border: 0;
    border-radius: 7px;
    padding: 0 18px;
    color: #ffffff;
    background: var(--dashboard-primary);
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(64, 87, 232, 0.22);
}

.teacher-payroll-adjustment-card > header,
.teacher-payroll-adjustment-card > footer {
    background: #1d3a8a;
}

.teacher-payroll-adjustment-card {
    width: min(900px, calc(100vw - 32px));
    max-height: min(88vh, 860px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.teacher-payroll-adjustment-card > header :where(span, h2, p),
.teacher-payroll-adjustment-card > header button,
.teacher-payroll-adjustment-card > footer button {
    color: #ffffff;
}

.teacher-payroll-adjustment-card > footer .slot-secondary-action {
    color: #1d3a8a;
    background: #ffffff;
}

.teacher-payroll-adjustment-card > footer .slot-status-action.is-danger {
    color: #ffffff;
    background: #dc2626;
}

.teacher-payroll-adjustment-body {
    display: grid;
    gap: 14px;
    padding: 16px;
    min-height: 0;
    overflow: auto;
    background: #fefa9f;
}

.teacher-payroll-adjustment-lines {
    display: grid;
    max-height: min(52vh, 520px);
    gap: 8px;
    overflow: auto;
}

.teacher-payroll-adjustment-line {
    display: grid;
    grid-template-columns: auto minmax(360px, 1fr) minmax(300px, auto);
    gap: 16px;
    align-items: center;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    padding: 12px 14px;
    color: #101e4b;
    background: #ffffff;
}

.teacher-payroll-adjustment-line span {
    display: grid;
    gap: 3px;
}

.teacher-payroll-adjustment-line small,
.teacher-payroll-adjustment-line em {
    color: #52617a;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.teacher-payroll-adjustment-line em {
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .teacher-payroll-adjustment-card {
        width: min(100%, calc(100vw - 20px));
        max-height: 92vh;
    }

    .teacher-payroll-adjustment-line {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .teacher-payroll-adjustment-line em {
        grid-column: 2;
        text-align: left;
        white-space: normal;
    }
}

.payroll-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 10px;
}

.payroll-summary-grid article {
    display: grid;
    align-content: center;
    min-height: 90px;
    border: 1px solid #d7e4f4;
    border-radius: 8px;
    padding: 14px 16px;
    background: #ffffff;
}

.payroll-summary-grid article > span {
    color: #52617a;
    font-size: 11px;
    font-weight: 900;
}

.payroll-summary-grid strong {
    margin-top: 4px;
    color: #101e4b;
    font-size: 26px;
    line-height: 1;
}

.payroll-summary-grid small {
    margin-top: 9px;
    color: #5d6e8f;
    font-size: 12px;
    font-weight: 900;
}

.payroll-summary-grid .is-deduction {
    border-color: #fecaca;
    background: #fff1f2;
}

.payroll-summary-grid .is-deduction strong {
    color: #dc2626;
}

.payroll-summary-grid .is-net {
    border-color: #c9ddff;
    background: #eef6ff;
}

.payroll-summary-grid .is-net strong {
    color: #168052;
}

.payroll-detail-card > header {
    background: #ffffff;
}

.payroll-detail-card header button {
    min-height: 38px;
    border: 1px solid #d4dfec;
    border-radius: 7px;
    padding: 0 16px;
    color: #91a0b6;
    background: #eef3fa;
    font-size: 13px;
    font-weight: 900;
}

.payroll-detail-card .payroll-table-wrap td {
    background: #ffffff;
}

.payroll-detail-card .payroll-date-group-row td {
    color: #101e4b;
    background: #eef3fa;
}

.payroll-date-group-row strong {
    margin-right: 10px;
}

.payroll-date-group-row span {
    color: #52617a;
    font-size: 12px;
    font-weight: 900;
}

.payroll-detail-card .payroll-daily-total-row td {
    color: #1f2a44;
    background: #f8fafc;
    font-weight: 1000;
}

.payroll-empty-row td {
    height: 48px;
    color: #52617a;
    text-align: center;
}

.payroll-total-row td {
    color: #101e4b;
    background: #e5e7eb !important;
}

.payroll-total-row td:last-child {
    background: #ffd500 !important;
}

.manager-payslip-card > header {
    align-items: flex-start;
    background: #ffffff;
}

.manager-payslip-card > header .payroll-action-stack {
    align-items: flex-end;
    justify-content: flex-end;
}

.manager-payslip-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid #d8e7f8;
    border-bottom: 1px solid #d8e7f8;
    background: #d8e7f8;
}

.manager-payslip-summary div {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    background: #f8fbff;
}

.manager-payslip-summary span {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.manager-payslip-summary strong {
    color: #102048;
    font-size: 15px;
    font-weight: 1000;
}

.manager-payslip-summary .is-net {
    background: #fff7d1;
}

.manager-payslip-summary .is-net strong {
    color: #0f2563;
}

.manager-payslip-table-wrap table.manager-payslip-table {
    min-width: 1180px;
    table-layout: fixed;
}

.manager-payslip-table col.is-date {
    width: 14%;
}

.manager-payslip-table col.is-day {
    width: 10%;
}

.manager-payslip-table col.is-status {
    width: 12%;
}

.manager-payslip-table col.is-attendance {
    width: 10%;
}

.manager-payslip-table col.is-money {
    width: 9%;
}

.manager-payslip-table col.is-remarks {
    width: 16%;
}

.manager-payslip-table th,
.manager-payslip-table td {
    vertical-align: middle;
}

.manager-payslip-table td {
    background: #ffffff;
}

.manager-payslip-table td:first-child strong {
    display: block;
    line-height: 1.25;
}

.manager-payslip-table tfoot td {
    border-top: 2px solid #b8cff1;
}

.manager-payslip-table .payroll-total-row td {
    background: #eef6ff !important;
}

.manager-payslip-table .payroll-total-row td.is-net,
.manager-payslip-table .payroll-total-row td:last-child {
    background: #fff7d1 !important;
}

.manager-payroll-panel {
    display: grid;
    gap: 14px;
    border-top: 1px solid #dbe6f5;
    padding: 14px;
    background: #ffffff;
}

.manager-payroll-period-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.manager-payroll-period-actions a,
.manager-payroll-period-actions button,
.manager-payroll-period-actions select {
    min-height: 38px;
    border-radius: 7px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.manager-payroll-period-actions button {
    border: 0;
    color: #ffffff;
    background: var(--dashboard-primary);
}

.manager-payroll-period-actions select {
    border: 1px solid #cbdcf0;
    color: #101e4b;
    background: #ffffff;
}

.manager-payroll-top-summary {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.manager-payroll-metrics {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.manager-payroll-status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    border: 1px solid #d9e3f2;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 900;
}

.manager-payroll-status.is-full-day {
    border-color: var(--manager-full-day-border);
    color: var(--manager-full-day-text);
    background: var(--manager-full-day-bg);
}

.manager-payroll-status.is-rest-day {
    border-color: var(--manager-rest-day-border);
    color: var(--manager-rest-day-text);
    background: var(--manager-rest-day-bg);
}

.manager-payroll-status.is-on-leave {
    border-color: var(--manager-on-leave-border);
    color: var(--manager-on-leave-text);
    background: var(--manager-on-leave-bg);
}

.manager-payroll-status.is-not-scheduled {
    color: #64748b;
    background: #f8fafc;
}

.manager-payroll-adjustment-modal .teacher-edit-dialog {
    width: min(640px, calc(100vw - 32px));
}

.manager-documents-panel .teacher-documents-wrap td small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.manager-document-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 900;
}

.manager-document-status.is-approved,
.manager-document-status.is-verified {
    color: #14532d;
    background: #dcfce7;
}

.manager-document-status.is-pending {
    color: #614b00;
    background: #fff1b8;
}

.manager-document-status.is-expiring-soon {
    color: #9a3412;
    background: #ffedd5;
}

.manager-document-status.is-expired,
.manager-document-status.is-rejected {
    color: #7f1d1d;
    background: #fee2e2;
}

.manager-document-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.manager-document-actions a,
.manager-document-actions button {
    min-height: 30px;
    border: 1px solid #bad0f4;
    border-radius: 7px;
    padding: 0 10px;
    color: #2448dd;
    background: #f7fbff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.manager-document-actions button {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff1f2;
}

.manager-document-modal .teacher-edit-dialog {
    width: min(720px, calc(100vw - 32px));
}

.payroll-deductions-card {
    background: #dbeafe;
}

.teachers-directory-table tbody tr:not(.is-empty-row) {
    cursor: pointer;
}

.teachers-directory-table tbody tr:not(.is-empty-row):hover {
    background: #f7fef9;
}

.teachers-directory-table .lesson-actions {
    cursor: default;
}

.teacher-profile-card [data-teacher-panel] > .teacher-record-section:first-child > header,
.teacher-profile-card .teacher-lessons-section > header,
.teacher-profile-card .teacher-weekly-panel .student-section-title,
.teacher-profile-card .payroll-history-card > header,
.teacher-profile-card .payroll-processing-card,
.teacher-profile-card .payroll-detail-card > header,
.teacher-profile-card .payroll-deductions-card,
.teacher-profile-card .teacher-documents-table > header,
.teacher-profile-card .teacher-feedback-table > header,
.teacher-profile-card .teacher-activity-heading,
.teacher-profile-card .teacher-notes-card > header,
.teacher-profile-card .teacher-policy-card > header {
    min-height: 74px;
    border-bottom: 1px solid #c8def7;
    padding: 16px 18px;
    background: #dbeafe;
}

.teacher-profile-card [data-teacher-panel] > .teacher-record-section:first-child > header h3,
.teacher-profile-card .teacher-lessons-section > header h3,
.teacher-profile-card .teacher-weekly-panel .student-section-title h3,
.teacher-profile-card .payroll-history-card > header h3,
.teacher-profile-card .payroll-processing-card h3,
.teacher-profile-card .payroll-detail-card > header h3,
.teacher-profile-card .payroll-deductions-card h3,
.teacher-profile-card .teacher-documents-table > header h3,
.teacher-profile-card .teacher-feedback-table > header h3,
.teacher-profile-card .teacher-activity-heading h3,
.teacher-profile-card .teacher-notes-card > header h3,
.teacher-profile-card .teacher-policy-card > header h3 {
    margin: 0;
    color: #101e4b;
    font-size: 20px;
    font-weight: 900;
}

.teacher-profile-card [data-teacher-panel] > .teacher-record-section:first-child > header p,
.teacher-profile-card .teacher-lessons-section > header p,
.teacher-profile-card .teacher-weekly-panel .student-section-title p,
.teacher-profile-card .payroll-processing-card p,
.teacher-profile-card .payroll-detail-card > header p,
.teacher-profile-card .payroll-deductions-card p,
.teacher-profile-card .teacher-documents-table > header p,
.teacher-profile-card .teacher-feedback-table > header p,
.teacher-profile-card .teacher-activity-heading p,
.teacher-profile-card .teacher-notes-card > header p,
.teacher-profile-card .teacher-policy-card > header p {
    margin: 4px 0 0;
    color: #4c5f7c;
    font-size: 13px;
    font-weight: 800;
}

.teacher-profile-card .payroll-deductions-card {
    border-color: #fecaca;
    background: #fee2e2;
}

.teacher-profile-card .payroll-deductions-card span {
    color: #b91c1c;
}

.teacher-profile-card .payroll-deductions-card p {
    color: #6b3740;
}

.teacher-profile-card .payroll-detail-card .payroll-deductions-inline {
    margin: 0;
    border-width: 1px 0 0;
    border-color: #fecaca;
    border-radius: 0;
    background: #fee2e2;
}

.payroll-deductions-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.payroll-deductions-actions > strong {
    color: #b91c1c;
    font-size: 18px;
    font-weight: 1000;
}

.payroll-deductions-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #b91c1c;
    border-radius: 8px;
    padding: 0 16px;
    color: #ffffff;
    background: #dc2626;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(185, 28, 28, 0.16);
}

.payroll-deductions-button:hover {
    border-color: #991b1b;
    background: #b91c1c;
}

.payroll-deductions-button:disabled {
    cursor: not-allowed;
    opacity: 0.64;
    box-shadow: none;
}

.teacher-note-create-card {
    width: min(740px, calc(100vw - 32px));
}

.teacher-note-create-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
}

.teacher-note-create-form label {
    grid-column: 1 / -1;
}

.teacher-note-create-form input,
.teacher-note-create-form textarea {
    width: 100%;
}

.teacher-note-create-form textarea {
    min-height: 180px;
    resize: vertical;
}

.teacher-note-create-card > footer {
    justify-content: flex-end;
}

.teacher-note-create-card > footer .slot-secondary-action {
    color: #102048;
    background: #ffffff;
}

.teacher-note-create-card > footer .slot-status-action.is-danger {
    border-color: #dc2626;
    color: #ffffff;
    background: #dc2626;
}

.teacher-note-create-card > footer .slot-status-action.is-danger:hover {
    border-color: #b91c1c;
    background: #b91c1c;
}

@media (max-width: 1180px) {
    .teacher-profile-metrics {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .teacher-profile-card > header {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-record-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-record-grid > div:nth-child(2n) {
        border-right: 0;
    }

    .teacher-record-grid .is-wide,
    .teacher-record-grid .is-double {
        grid-column: span 2;
    }

    .teacher-lesson-metrics,
    .teacher-pay-summary,
    .payroll-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payroll-history-card > header,
    .payroll-detail-card > header,
    .payroll-processing-card,
    .payroll-deductions-card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .teacher-record-grid {
        grid-template-columns: 1fr;
    }

    .teacher-record-grid > div {
        border-right: 0;
    }

    .teacher-record-grid .is-wide,
    .teacher-record-grid .is-double {
        grid-column: span 1;
    }

    .teacher-lesson-metrics,
    .teacher-pay-summary,
    .payroll-summary-grid {
        grid-template-columns: 1fr;
    }

    .lesson-history-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .lesson-history-nav {
        flex-wrap: wrap;
    }

    .lesson-history-nav span {
        width: 100%;
    }
}

/* Shared dashboard modal theme */
:root {
    --vlace-modal-chrome: #1D3A8A;
    --vlace-modal-body: #FEFA9F;
    --vlace-modal-primary: #dc2626;
    --vlace-modal-primary-hover: #b91c1c;
    --vlace-modal-primary-disabled: #fca5a5;
}

:where(.slot-modal-card, .teacher-edit-dialog) {
    border-color: rgba(29, 58, 138, 0.24);
    background: var(--vlace-modal-body);
}

:where(.slot-modal-card, .teacher-edit-dialog) > header,
:where(.slot-modal-card, .teacher-edit-dialog) > footer,
.teacher-edit-modal.is-restricted .teacher-edit-dialog > header,
.teacher-edit-modal.is-restricted .teacher-edit-dialog > footer {
    border-color: rgba(255, 255, 255, 0.16);
    background: var(--vlace-modal-chrome);
    color: #ffffff;
}

:where(.slot-modal-card, .teacher-edit-dialog) > header :where(span, h2, h3, p, strong),
:where(.slot-modal-card, .teacher-edit-dialog) > header button,
:where(.slot-modal-card, .teacher-edit-dialog) > header svg,
.teacher-edit-modal.is-restricted .teacher-edit-dialog > header span {
    color: #ffffff;
}

:where(.slot-modal-card, .teacher-edit-dialog) > header button,
.modal-close-button {
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

:where(.slot-modal-card, .teacher-edit-dialog) > header button:hover,
.modal-close-button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.teacher-edit-body,
.lesson-action-modal-body,
.hierarchy-action-modal-body,
.account-setup-modal-body,
.student-lesson-edit-form,
.student-lesson-delete-body,
.booking-action-body,
.two-factor-modal-body,
.student-lesson-recording-body,
.student-lesson-feedback-body,
.slot-modal-card > .payment-form,
.slot-modal-card > .contact-details-form,
.slot-modal-card > .referral-program-form,
.slot-modal-card > .receipt-form,
.slot-modal-card > .note-form {
    background: var(--vlace-modal-body);
}

.slot-modal-details,
.teacher-edit-body > section,
.student-lesson-edit-section,
.account-setup-section,
.feedback-detail-grid div,
.feedback-detail-copy,
.package-delete-summary,
.lesson-action-modal-body > :where(form, section, article, div:not(.lesson-upload-error):not(.lesson-upload-success)),
.hierarchy-action-modal-body > :where(form, section, article, div:not(.lesson-upload-error):not(.lesson-upload-success)),
.two-factor-modal-body > :where(section, div, form),
.student-lesson-recording-body,
.student-lesson-feedback-details,
.student-lesson-feedback-body > p {
    background: #ffffff;
}

:where(.slot-modal-card, .teacher-edit-dialog) > footer button,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-secondary-action,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-status-action.is-muted {
    border: 1px solid #d7e7f8;
    color: #102048;
    background: #ffffff;
}

:where(.slot-modal-card, .teacher-edit-dialog) > footer button:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-secondary-action:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-status-action.is-muted:hover {
    background: #f7fbff;
}

:where(.slot-modal-card, .teacher-edit-dialog) > footer button[type="submit"],
:where(.slot-modal-card, .teacher-edit-dialog) > footer button.is-danger,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-status-action.is-open,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-status-action.is-danger,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-payment],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-referral],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-receipt],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-contact-details],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-note],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-student-lesson],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-lesson-modal-primary],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-hierarchy-modal-primary],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-package-submit],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-package-country-submit],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-two-factor-confirm],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-package-delete],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-feedback-delete],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-manager-feedback-delete],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-clear-activity],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-student-lesson-delete],
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-delete-action] {
    border-color: var(--vlace-modal-primary);
    color: #ffffff;
    background: var(--vlace-modal-primary);
}

:where(.slot-modal-card, .teacher-edit-dialog) > footer button[type="submit"]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer button.is-danger:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-status-action.is-open:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-status-action.is-danger:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-payment]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-referral]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-receipt]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-contact-details]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-note]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-save-student-lesson]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-lesson-modal-primary]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-hierarchy-modal-primary]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-package-submit]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-package-country-submit]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-two-factor-confirm]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-package-delete]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-feedback-delete]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-manager-feedback-delete]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-clear-activity]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-student-lesson-delete]:hover,
:where(.slot-modal-card, .teacher-edit-dialog) > footer [data-confirm-delete-action]:hover {
    border-color: var(--vlace-modal-primary-hover);
    background: var(--vlace-modal-primary-hover);
}

:where(.slot-modal-card, .teacher-edit-dialog) > footer button:disabled,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-status-action:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

:where(.slot-modal-card, .teacher-edit-dialog) > footer button[type="submit"]:disabled,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-status-action.is-open:disabled,
:where(.slot-modal-card, .teacher-edit-dialog) > footer .slot-status-action.is-danger:disabled {
    border-color: var(--vlace-modal-primary-disabled);
    background: var(--vlace-modal-primary-disabled);
}

.slot-modal-card,
.teacher-edit-dialog {
    border-color: rgba(29, 58, 138, 0.24);
    background: var(--vlace-modal-body);
}

.slot-modal-card > header,
.slot-modal-card > footer,
.teacher-edit-dialog > header,
.teacher-edit-dialog > footer,
.teacher-edit-modal.is-restricted .teacher-edit-dialog > header,
.teacher-edit-modal.is-restricted .teacher-edit-dialog > footer {
    border-color: rgba(255, 255, 255, 0.16);
    background: var(--vlace-modal-chrome);
    color: #ffffff;
}

.slot-modal-card > header span,
.slot-modal-card > header h2,
.slot-modal-card > header h3,
.slot-modal-card > header p,
.slot-modal-card > header strong,
.teacher-edit-dialog > header span,
.teacher-edit-dialog > header h2,
.teacher-edit-dialog > header h3,
.teacher-edit-dialog > header p,
.teacher-edit-dialog > header strong,
.teacher-edit-modal.is-restricted .teacher-edit-dialog > header span {
    color: #ffffff;
}

.slot-modal-card > header button,
.teacher-edit-dialog > header button,
.slot-modal-card > header .modal-close-button,
.teacher-edit-dialog > header .modal-close-button {
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.slot-modal-card > header button:hover,
.teacher-edit-dialog > header button:hover,
.slot-modal-card > header .modal-close-button:hover,
.teacher-edit-dialog > header .modal-close-button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.student-lesson-pdf-viewer,
.student-lesson-edit-form,
.student-lesson-delete-body,
.student-lesson-recording-body,
.student-lesson-feedback-body,
.teacher-edit-body,
.lesson-action-modal-body,
.hierarchy-action-modal-body,
.account-setup-modal-body,
.booking-action-body,
.two-factor-modal-body {
    background: var(--vlace-modal-body);
}

.slot-modal-card > footer button,
.slot-modal-card > footer .slot-secondary-action,
.slot-modal-card > footer .slot-status-action.is-muted,
.teacher-edit-dialog > footer button,
.teacher-edit-dialog > footer .slot-secondary-action,
.teacher-edit-dialog > footer .slot-status-action.is-muted {
    border: 1px solid #d7e7f8;
    color: #102048;
    background: #ffffff;
}

.slot-modal-card > footer button[type="submit"],
.slot-modal-card > footer button.is-danger,
.slot-modal-card > footer .slot-status-action.is-open,
.slot-modal-card > footer .slot-status-action.is-danger,
.slot-modal-card > footer [data-save-payment],
.slot-modal-card > footer [data-save-referral],
.slot-modal-card > footer [data-save-receipt],
.slot-modal-card > footer [data-save-contact-details],
.slot-modal-card > footer [data-save-note],
.slot-modal-card > footer [data-save-student-lesson],
.slot-modal-card > footer [data-lesson-modal-primary],
.slot-modal-card > footer [data-hierarchy-modal-primary],
.slot-modal-card > footer [data-package-submit],
.slot-modal-card > footer [data-package-country-submit],
.slot-modal-card > footer [data-two-factor-confirm],
.slot-modal-card > footer [data-confirm-package-delete],
.slot-modal-card > footer [data-confirm-feedback-delete],
.slot-modal-card > footer [data-confirm-manager-feedback-delete],
.slot-modal-card > footer [data-confirm-clear-activity],
.slot-modal-card > footer [data-confirm-student-lesson-delete],
.slot-modal-card > footer [data-confirm-delete-action],
.teacher-edit-dialog > footer button[type="submit"],
.teacher-edit-dialog > footer button.is-danger,
.teacher-edit-dialog > footer .slot-status-action.is-open,
.teacher-edit-dialog > footer .slot-status-action.is-danger,
.teacher-edit-dialog > footer [data-save-payment],
.teacher-edit-dialog > footer [data-save-referral],
.teacher-edit-dialog > footer [data-save-receipt],
.teacher-edit-dialog > footer [data-save-contact-details],
.teacher-edit-dialog > footer [data-save-note],
.teacher-edit-dialog > footer [data-save-student-lesson],
.teacher-edit-dialog > footer [data-lesson-modal-primary],
.teacher-edit-dialog > footer [data-hierarchy-modal-primary],
.teacher-edit-dialog > footer [data-package-submit],
.teacher-edit-dialog > footer [data-package-country-submit],
.teacher-edit-dialog > footer [data-two-factor-confirm],
.teacher-edit-dialog > footer [data-confirm-package-delete],
.teacher-edit-dialog > footer [data-confirm-feedback-delete],
.teacher-edit-dialog > footer [data-confirm-manager-feedback-delete],
.teacher-edit-dialog > footer [data-confirm-clear-activity],
.teacher-edit-dialog > footer [data-confirm-student-lesson-delete],
.teacher-edit-dialog > footer [data-confirm-delete-action] {
    border-color: var(--vlace-modal-primary);
    color: #ffffff;
    background: var(--vlace-modal-primary);
}