:root {
    --color-forest: #254236;
    --color-forest-dark: #17291f;
    --color-sage: #7c927d;
    --color-sage-soft: #e8eee4;
    --color-off-white: #fffdf8;
    --color-warm-bg: #f4efe6;
    --color-beige: #e5d8c5;
    --color-beige-soft: #f1e8da;
    --color-pastel-orange: #e0a365;
    --color-clay: #a2542a;
    --color-clay-dark: #7c3f1f;
    --color-brown: #5a3d2a;
    --color-text: #1f2521;
    --color-text-muted: #5d625d;
    --color-border: #d8ccbe;
    --color-success: #386150;
    --color-warning: #9a681d;
    --color-error: #8b3d2f;
    --color-focus: #4f7d62;
    --bg: var(--color-warm-bg);
    --panel: var(--color-off-white);
    --ink: var(--color-text);
    --muted: var(--color-text-muted);
    --accent: var(--color-clay);
    --accent-dark: var(--color-clay-dark);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --error: var(--color-error);
    --line: var(--color-border);
    --sidebar-ink: #f3ede3;
    --font-family-base: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-meta: 0.82rem;
    --font-size-label: 0.9rem;
    --font-size-body: 1rem;
    --font-size-lead: 1.12rem;
    --font-size-section: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem);
    --font-size-title: clamp(2rem, 1.45rem + 1.8vw, 2.2rem);
    --font-weight-label: 650;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --radius-control: 14px;
    --radius-panel: 20px;
    --radius-card: var(--radius-panel);
    --shadow-panel: 0 24px 60px rgba(48, 37, 28, 0.08);
    --shadow-card-hover: 0 18px 42px rgba(48, 37, 28, 0.12);
    --shadow-control: 0 10px 24px rgba(48, 37, 28, 0.08);
    --shadow-control-hover: 0 14px 28px rgba(48, 37, 28, 0.12);
    --focus-ring: 0 0 0 4px rgba(79, 125, 98, 0.2);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    line-height: 1.55;
    background:
        radial-gradient(circle at top left, rgba(162, 84, 42, 0.12), transparent 25%),
        linear-gradient(180deg, #f7f1e8 0%, #efe7dc 100%);
    color: var(--ink);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

h1 {
    font-size: var(--font-size-title);
    line-height: 1.08;
}

h2 {
    font-size: var(--font-size-section);
    line-height: 1.18;
}

h3 {
    line-height: 1.24;
}

a {
    color: inherit;
    text-decoration: none;
}

.public-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 20;
    transform: translateY(-150%);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-control);
    background: var(--color-forest-dark);
    color: var(--color-off-white);
    font-weight: 700;
    box-shadow: var(--shadow-control-hover);
    transition: transform 0.16s ease;
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: none;
}

.public-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 253, 248, 0.88);
    backdrop-filter: blur(12px);
}

.public-header-inner {
    width: min(1180px, calc(100% - 2rem));
    min-height: 4.35rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand {
    margin-right: auto;
    font-weight: 700;
}

.public-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    border-radius: 50%;
    background: var(--color-forest);
    color: var(--color-off-white);
    font-size: 0.82rem;
    font-weight: 800;
}

.brand-text {
    display: grid;
    gap: 0.05rem;
}

.brand-text strong {
    font-size: 1rem;
    line-height: 1.1;
}

.brand-text span {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 600;
}

.public-nav {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.public-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.public-nav a,
.admin-header-actions > a,
.admin-header-actions > form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.05rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(162, 84, 42, 0.16);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 24px rgba(48, 37, 28, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

/* Shared compact entity tags use the configured color and JS-selected contrast. */
.entity-color-tag {
    max-width: 100%;
    margin-left: 0;
    overflow: hidden;
    border: 1px solid rgba(23, 32, 25, 0.16);
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Neutral bordered actions share one quiet hover treatment. */
:is(.button-secondary, .button-small, .form-actions a, .table-actions a, .section-head > a, .auth-card > a):not(.button-danger, .button-success, .button-action-create, .button-action-edit, .button-action-delete, .button-action-detail, .danger-link) {
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

:is(.button-secondary, .button-small, .form-actions a, .table-actions a, .section-head > a, .auth-card > a):not(.button-danger, .button-success, .button-action-create, .button-action-edit, .button-action-delete, .button-action-detail, .danger-link):is(:hover, :focus-visible) {
    border-color: rgba(56, 97, 80, 0.38);
    background: var(--color-sage-soft);
    color: var(--color-forest-dark);
    box-shadow: var(--shadow-control);
    transform: none;
}

/* URL-backed tabs are visually connected to their panel instead of looking like buttons. */
.user-profile-tabs {
    gap: 0;
}

.user-profile-tab-list {
    gap: var(--space-3);
    padding: 0;
    border-bottom: 1px solid var(--line);
}

.user-profile-tab {
    margin-bottom: -1px;
    padding: 0.55rem 0.25rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
}

.user-profile-tab:hover,
.user-profile-tab:focus-visible,
.user-profile-tab[aria-current="page"],
.user-profile-tab[aria-selected="true"] {
    border-color: var(--color-forest);
    background: transparent;
    color: var(--color-forest);
}

.user-profile-tab-panel {
    padding-top: var(--space-2);
}

.user-detail-panel > h2,
.user-detail-panel .section-head h2 {
    letter-spacing: normal;
    text-transform: none;
}

.report-page,
.report-tables {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}
.report-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
    gap: var(--space-2);
    align-items: start;
    margin-bottom: var(--space-3);
}
.report-summary-row > *,
.report-period {
    min-width: 0;
}
.report-period {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}
.report-period .course-display-switch {
    justify-content: flex-end;
}
.report-period .table-filter-dropdown,
.report-period .searchable-combobox {
    width: 100%;
}
.report-period [hidden] {
    display: none !important;
}
.report-period [data-report-feedback] {
    margin: 0;
    font-size: var(--font-size-meta);
}
.report-period .is-error {
    color: var(--error);
}
@media (max-width: 1100px) {
    .report-summary-row .summary-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .report-summary-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .report-period {
        grid-row: 1;
        width: min(100%, 20rem);
        justify-self: end;
    }
}
@media (max-width: 450px) {
    .report-summary-row .summary-metrics-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.earnings-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem);
    gap: var(--space-2);
    align-items: stretch;
    margin-bottom: var(--space-3);
}

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

.earnings-page-toolbar {
    margin: 0;
}

.earnings-page-toolbar form,
.earnings-month-field {
    width: 100%;
    height: 100%;
}

.earnings-month-field {
    align-content: center;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.72);
}

.admin-course-detail-main {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
}

.admin-course-detail-primary,
.admin-course-detail-secondary {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.admin-course-overview,
.admin-course-cover-card,
.admin-course-description-card,
.admin-course-hero-payment {
    margin: 0;
}

.admin-course-overview .section-head,
.admin-course-cover-card .section-head,
.admin-course-description-card .section-head {
    align-items: center;
}

.admin-course-summary {
    margin: 0;
    color: var(--muted);
}

.admin-course-actions,
.admin-course-cover-actions,
.course-file-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}

.admin-course-actions form,
.admin-course-cover-actions form,
.course-file-actions form,
.admin-course-documents-section .section-head form {
    margin: 0;
}

.admin-course-detail-cover {
    display: block;
    min-height: 0;
    aspect-ratio: 16 / 9;
}

.admin-course-detail-cover img {
    height: 100%;
    min-height: 0;
}

.course-file-picker {
    position: relative;
    cursor: pointer;
}

.visually-hidden-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.course-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-2);
}

.course-file-grid--single {
    grid-template-columns: minmax(min(100%, 13rem), 20rem);
}

.course-file-card {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.76);
}

.course-file-preview {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--color-beige-soft);
}

.course-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-file-placeholder {
    color: var(--muted);
    font-size: 3.5rem;
}

.course-file-meta {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: var(--space-2);
}

.course-file-meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-file-meta span {
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.course-file-actions {
    padding: 0 var(--space-2) var(--space-2);
}

.course-detail-tabs {
    margin-bottom: var(--space-3);
}

@media (max-width: 900px) {
    .earnings-summary-row,
    .admin-course-detail-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .earnings-page-toolbar form {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .earnings-summary-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-course-overview .section-head,
    .admin-course-cover-card .section-head,
    .admin-course-documents-section > .section-head {
        align-items: flex-start;
    }
}

.public-nav a:hover,
.public-nav a:focus-visible,
.admin-header-actions > a:hover,
.admin-header-actions > form > button:hover {
    transform: translateY(-1px);
    border-color: rgba(162, 84, 42, 0.34);
    background: #fff;
    box-shadow: 0 14px 28px rgba(48, 37, 28, 0.12);
}

.public-nav a.is-active {
    border-color: rgba(37, 66, 54, 0.26);
    background: var(--color-sage-soft);
    color: var(--color-forest-dark);
}

.nav-icon-link {
    gap: 0.45rem;
}

[data-ui-icon]::before {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background: currentColor;
    content: "";
    mask: var(--ui-icon-url) center / contain no-repeat;
    -webkit-mask: var(--ui-icon-url) center / contain no-repeat;
}

.ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[data-ui-icon="house"] { --ui-icon-url: url("/lib/lucide/icons/house.svg"); }
[data-ui-icon="book"] { --ui-icon-url: url("/lib/lucide/icons/book.svg"); }
[data-ui-icon="user-key"] { --ui-icon-url: url("/lib/lucide/icons/user-key.svg"); }
[data-ui-icon="user"] { --ui-icon-url: url("/lib/lucide/icons/user.svg"); }
[data-ui-icon="calendar"] { --ui-icon-url: url("/lib/lucide/icons/calendar.svg"); }
[data-ui-icon="message-circle"] { --ui-icon-url: url("/lib/lucide/icons/message-circle.svg"); }
[data-ui-icon="files"] { --ui-icon-url: url("/lib/lucide/icons/files.svg"); }
[data-ui-icon="banknote-arrow-up"] { --ui-icon-url: url("/lib/lucide/icons/banknote-arrow-up.svg"); }
[data-ui-icon="hand-coins"] { --ui-icon-url: url("/lib/lucide/icons/hand-coins.svg"); }
[data-ui-icon="chart-column-increasing"] { --ui-icon-url: url("/lib/lucide/icons/chart-column-increasing.svg"); }
[data-ui-icon="list"] { --ui-icon-url: url("/lib/lucide/icons/list.svg"); }
[data-ui-icon="info"] { --ui-icon-url: url("/lib/lucide/icons/info.svg"); }
[data-ui-icon="users"] { --ui-icon-url: url("/lib/lucide/icons/users.svg"); }
[data-ui-icon="user-cog"] { --ui-icon-url: url("/lib/lucide/icons/user-cog.svg"); }
[data-ui-icon="send"] { --ui-icon-url: url("/lib/lucide/icons/send.svg"); }
[data-ui-icon="plus"] { --ui-icon-url: url("/lib/lucide/icons/plus.svg"); }
[data-ui-icon="pencil"] { --ui-icon-url: url("/lib/lucide/icons/pencil.svg"); }
[data-ui-icon="trash"] { --ui-icon-url: url("/lib/lucide/icons/trash.svg"); }
[data-ui-icon="check"] { --ui-icon-url: url("/lib/lucide/icons/check.svg"); }
[data-ui-icon="banknote"] { --ui-icon-url: url("/lib/lucide/icons/banknote.svg"); }
[data-ui-icon="eye"] { --ui-icon-url: url("/lib/lucide/icons/eye.svg"); }
[data-ui-icon="eye-off"] { --ui-icon-url: url("/lib/lucide/icons/eye-off.svg"); }
[data-ui-icon="x"] { --ui-icon-url: url("/lib/lucide/icons/x.svg"); }
[data-ui-icon="menu"] { --ui-icon-url: url("/lib/lucide/icons/menu.svg"); }
[data-ui-icon="log-out"] { --ui-icon-url: url("/lib/lucide/icons/log-out.svg"); }
[data-ui-icon="clock"] { --ui-icon-url: url("/lib/lucide/icons/clock.svg"); }
[data-ui-icon="funnel-plus"] { --ui-icon-url: url("/lib/lucide/icons/funnel-plus.svg"); }
[data-ui-icon="funnel-x"] { --ui-icon-url: url("/lib/lucide/icons/funnel-x.svg"); }
[data-ui-icon="refresh-cw"] { --ui-icon-url: url("/lib/lucide/icons/refresh-cw.svg"); }
[data-ui-icon="arrow-right"] { --ui-icon-url: url("/lib/lucide/icons/arrow-right.svg"); }
[data-ui-icon="arrow-left"] { --ui-icon-url: url("/lib/lucide/icons/arrow-left.svg"); }
[data-ui-icon="copy"] { --ui-icon-url: url("/lib/lucide/icons/copy.svg"); }
[data-ui-icon="upload"] { --ui-icon-url: url("/lib/lucide/icons/upload.svg"); }
[data-ui-icon="download"] { --ui-icon-url: url("/lib/lucide/icons/download.svg"); }

[data-ui-icon] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.ui-icon-only {
    gap: 0;
}

[data-filter-reset] {
    justify-self: start;
}

.nav-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: rgba(162, 84, 42, 0.12);
    color: inherit;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
}

.public-nav a[data-ui-icon]::before,
.public-footer-nav a[data-ui-icon]::before,
.admin-nav a[data-ui-icon]::before {
    width: 1.05rem;
    height: 1.05rem;
}

.public-menu-toggle {
    display: none;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.1rem;
    padding: 0.325rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    box-shadow: var(--shadow-control);
}

.menu-lines {
    display: grid;
    gap: 0.22rem;
}

.menu-lines span {
    width: 1.1rem;
    height: 2px;
    border-radius: 999px;
    background: var(--color-forest);
}

.public-header-cta {
    white-space: nowrap;
}

.public-content {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 3rem;
    flex: 1 0 auto;
}

.admin-content {
    padding: 1rem;
    min-width: 0;
    max-width: 100%;
}

.admin-content {
    display: grid;
    align-content: start;
    gap: var(--space-1);
}

.admin-content > .breadcrumbs {
    margin-bottom: 0.5rem;
}

.admin-content > * {
    min-width: 0;
    max-width: 100%;
}

.hero,
.card,
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    padding: 2rem;
    box-shadow: var(--shadow-panel);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.5rem;
}

.homepage-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: var(--space-4);
}

.homepage-hero-copy,
.homepage-hero-panel,
.homepage-course-card {
    border: 1px solid var(--line);
    background: rgba(255, 253, 248, 0.92);
    box-shadow: var(--shadow-panel);
}

.homepage-hero-copy {
    padding: clamp(1.2rem, 2.4vw, 2rem);
    border-radius: var(--radius-panel);
    display: grid;
    align-content: center;
    gap: var(--space-3);
}

.homepage-hero-copy h1 {
    max-width: 24ch;
    margin-bottom: 0;
}

.homepage-hero-copy .lead {
    max-width: 42rem;
    margin-bottom: 0;
}

.homepage-hero-panel {
    border-radius: var(--radius-panel);
    padding: var(--space-6);
    display: grid;
    align-content: end;
    gap: var(--space-3);
    background:
        linear-gradient(145deg, rgba(37, 66, 54, 0.94), rgba(90, 61, 42, 0.88)),
        var(--color-forest);
    color: var(--color-off-white);
}

.homepage-hero-panel span {
    color: var(--color-pastel-orange);
    font-size: var(--font-size-meta);
    font-weight: 800;
    text-transform: uppercase;
}

.homepage-hero-panel strong {
    font-size: clamp(2rem, 2vw, 3rem);
    line-height: 1;
}

.homepage-hero-panel p {
    margin-bottom: 0;
    color: rgba(255, 253, 248, 0.78);
}

.homepage-section {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.homepage-discovery-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: rgba(255, 253, 248, 0.92);
    box-shadow: var(--shadow-panel);
}

.homepage-discovery-copy h2,
.homepage-discovery-copy p {
    margin-bottom: 0;
}

.homepage-discovery-copy p {
    color: var(--muted);
}

.homepage-category-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: end;
}

.homepage-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.homepage-filter-actions button,
.homepage-filter-actions a {
    white-space: nowrap;
}

.rounded-select {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
}

.category-filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.category-filter-strip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(124, 146, 125, 0.3);
    border-radius: 999px;
    background: rgba(232, 238, 228, 0.7);
    color: var(--color-forest-dark);
    font-size: var(--font-size-meta);
    font-weight: 800;
}

.category-filter-strip a:hover,
.category-filter-strip a:focus-visible {
    background: var(--color-sage-soft);
    text-decoration: none;
}

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

.category-discovery-card {
    min-height: 8.5rem;
    padding: var(--space-5);
    border: 1px solid rgba(124, 146, 125, 0.28);
    border-radius: var(--radius-panel);
    background: rgba(232, 238, 228, 0.72);
    display: grid;
    align-content: space-between;
    gap: var(--space-4);
    box-shadow: var(--shadow-control);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.category-discovery-card:hover,
.category-discovery-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(37, 66, 54, 0.34);
    background: var(--color-sage-soft);
    box-shadow: var(--shadow-control-hover);
}

.category-discovery-card span {
    color: var(--color-forest-dark);
    font-size: 1.15rem;
    font-weight: 800;
}

.category-discovery-card strong {
    color: var(--accent-dark);
    font-size: var(--font-size-meta);
}

.course-list-hero,
.course-results-card,
.public-course-card,
.homepage-course-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: rgba(255, 253, 248, 0.92);
    box-shadow: var(--shadow-panel);
}

.course-list-hero {
    display: grid;
    gap: var(--space-3);
    padding: clamp(1.1rem, 2vw, 1.45rem);
    margin-bottom: var(--space-4);
}

.course-list-hero h1 {
    max-width: 15ch;
    margin: 0;
}

.course-list-hero .lead {
    max-width: 46rem;
}

.course-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: var(--space-4);
}

.course-list-hero .course-filter-panel-inline {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.course-category-filter {
    min-width: 0;
}

.course-category-filter summary > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-category-filter summary {
    min-width: 0;
}

.course-filter-grid.course-filter-row {
    grid-template-columns: minmax(11rem, 0.8fr) minmax(9.5rem, 0.65fr) minmax(9.5rem, 0.65fr) auto;
    gap: 0.8rem;
    align-items: end;
}

.course-category-filter {
    align-self: end;
}

.course-filter-row > label input:not(.searchable-combobox-input) {
    min-height: 2.35rem;
    padding: 0.42rem 0.55rem;
    line-height: 1.25;
}

.course-category-filter .table-filter-dropdown-panel {
    min-width: min(20rem, calc(100vw - 2rem));
}

.course-category-filter .table-checklist-filter {
    max-height: 16rem;
}

.course-category-filter .table-filter-dropdown-panel > input {
    min-height: 2.35rem;
    padding: 0.42rem 0.55rem;
}

.course-filter-row .course-filter-actions {
    display: flex;
    gap: 0.6rem;
    align-items: end;
}

.course-filter-row .course-filter-actions button,
.course-filter-row .course-filter-actions .button-secondary {
    width: auto;
    min-height: 1.93rem;
    padding: 0.21rem 0.65rem;
}

.course-display-switch {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.course-display-switch legend {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.course-display-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 1.55rem;
    padding: 0.1rem 0;
    border-radius: 6px;
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 750;
    cursor: pointer;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.course-display-option:hover,
.course-display-option:focus-visible,
.course-display-option.active {
    background: transparent;
    color: var(--color-forest);
    transform: none;
    box-shadow: none;
}

.course-display-option.active {
    font-weight: 850;
}

.course-display-option:focus-visible,
.course-display-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.course-display-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 2.75rem;
    min-height: 1.5rem;
    padding: 0.2rem;
    border: 1px solid rgba(37, 66, 54, 0.34);
    border-radius: 999px;
    background: var(--color-sage-soft);
    box-shadow: inset 0 1px 2px rgba(23, 41, 31, 0.12);
}

.course-display-toggle:hover {
    background: rgba(124, 146, 125, 0.34);
    transform: none;
    box-shadow: inset 0 1px 2px rgba(23, 41, 31, 0.14);
}

.course-display-toggle span {
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--color-forest);
    box-shadow: 0 2px 5px rgba(23, 41, 31, 0.24);
    transition: transform 0.18s ease;
}

.course-display-switch.is-calendar .course-display-toggle span {
    transform: translateX(1.15rem);
}

@media (max-width: 900px) {
    .course-list-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

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

    .course-category-filter .table-filter-dropdown-panel {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 0.5rem;
    }

    .course-filter-row .course-filter-actions,
    .course-filter-row .course-filter-actions button {
        width: 100%;
    }

    .course-filter-row .course-filter-actions {
        flex-direction: row;
    }

    .course-results-controls {
        justify-items: start;
    }

    .public-course-calendar-event,
    .public-course-calendar-meta {
        grid-template-columns: 1fr;
    }

    #public-fullcalendar .fc-header-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    #public-fullcalendar .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
}

.course-filter-grid {
    display: grid;
    gap: var(--space-3);
    align-items: end;
}

.course-filter-actions {
    display: flex;
    gap: var(--space-2);
}

.course-filter-actions button,
.course-filter-actions .button-secondary {
    width: 100%;
    min-height: 2.35rem;
    white-space: nowrap;
}

.results-count {
    align-self: center;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    background: var(--color-sage-soft);
    color: var(--color-forest-dark);
    font-size: var(--font-size-meta);
    font-weight: 800;
    white-space: nowrap;
}

.course-results-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
}

.course-results-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.course-results-titlebar h2 {
    margin-bottom: 0;
    font-size: 1rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.course-results-controls {
    display: grid;
    gap: 0.35rem;
    justify-items: end;
}

.course-display-form {
    margin: 0;
}

.public-course-calendar-list {
    display: grid;
    gap: var(--space-4);
}

.public-course-calendar-day {
    display: grid;
    gap: var(--space-3);
}

.public-course-calendar-day h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    text-transform: capitalize;
}

.public-course-calendar-events {
    display: grid;
    gap: 0.75rem;
}

.public-course-calendar-event {
    display: grid;
    grid-template-columns: minmax(4.5rem, 0.35fr) minmax(14rem, 1fr) minmax(12rem, 0.9fr);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 253, 248, 0.9);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-control);
}

.public-course-calendar-event:hover,
.public-course-calendar-event:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(37, 66, 54, 0.3);
    box-shadow: var(--shadow-control-hover);
    text-decoration: none;
}

.public-course-calendar-event time,
.public-course-calendar-main,
.public-course-calendar-meta {
    display: grid;
    gap: 0.2rem;
}

.public-course-calendar-event time strong,
.public-course-calendar-main strong {
    color: var(--ink);
}

.public-course-calendar-event time span,
.public-course-calendar-main span,
.public-course-calendar-meta span {
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.public-course-calendar-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homepage-course-grid,
.public-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.homepage-course-card,
.public-course-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
    border-radius: var(--radius-panel);
    background: rgba(255, 253, 248, 0.84);
    box-shadow: var(--shadow-control);
}

.course-card-link {
    color: inherit;
    text-decoration: none;
}

.course-card-link:hover,
.course-card-link:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(37, 66, 54, 0.28);
    box-shadow: var(--shadow-control-hover);
    text-decoration: none;
}

.course-card-link .button-secondary {
    pointer-events: none;
}

.course-card-image {
    width: 100%;
    aspect-ratio: 2.36 / 1;
    border-radius: calc(var(--radius-panel) - 6px);
    object-fit: cover;
    background:
        radial-gradient(circle at 28% 0%, rgba(255, 253, 248, 0.24), transparent 24%),
        linear-gradient(135deg, rgba(122, 146, 125, 0.82), rgba(224, 163, 101, 0.72)),
        var(--color-sage-soft);
    border: 1px solid rgba(122, 132, 80, 0.24);
}

.homepage-course-card.is-group,
.public-course-card.is-group {
    border-color: rgba(224, 163, 101, 0.48);
    background:
        linear-gradient(180deg, rgba(255, 247, 232, 0.78), rgba(255, 253, 248, 0.96)),
        var(--panel);
}

.course-card-body {
    display: grid;
    gap: var(--space-2);
}

.course-card-body p {
    display: -webkit-box;
    margin-bottom: 0;
    overflow: hidden;
    color: var(--muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.homepage-course-card .badge,
.public-course-card .badge {
    margin-left: 0;
}

.course-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-3);
}

.meta-value {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--line);
    font-size: var(--font-size-meta);
}

.meta-value span {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 650;
}

.meta-value strong {
    color: var(--ink);
    overflow-wrap: anywhere;
}

.availability {
    color: var(--success);
}

.homepage-course-card h3,
.public-course-card h3 {
    margin-bottom: 0;
}

.homepage-course-card > p,
.public-course-card > p {
    color: var(--muted);
}

.homepage-course-card .button-secondary,
.public-course-card .button-secondary {
    width: 100%;
    align-self: end;
    margin-top: auto;
}

.homepage-course-card-head,
.public-course-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.course-empty-state {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    background: rgba(255, 253, 248, 0.84);
    border-style: solid;
}

.empty-icon {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    color: var(--accent-dark);
    background: rgba(224, 163, 101, 0.2);
    font-size: 1.35rem;
    font-weight: 850;
}

.course-group-note {
    margin-bottom: 0;
    color: var(--accent-dark) !important;
    font-weight: 800;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: 1.5rem;
}

.button-primary,
.button-success,
.button-action-edit,
.button-action-delete,
.button-action-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.425rem 1.2rem;
    border-radius: var(--radius-control);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 14px 30px rgba(162, 84, 42, 0.22);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.button-primary:hover {
    background-color : #A1623F;
    transform: translateY(-1px);
}

.button-primary {
    background-color : #C79173;
}

.button-success {
    background-color: var(--color-forest);
}

.button-success:hover {
    background-color: var(--color-forest-dark);
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(56, 97, 80, 0.24);
}

.button-primary:focus-visible,
.button-success:focus-visible,
.button-secondary:focus-visible,
.button-danger:focus-visible,
.button-link:focus-visible,
.public-menu-toggle:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-control);
}

.public-footer {
    margin-top: auto;
    background: var(--color-forest-dark);
    color: var(--color-off-white);
}

.public-footer-inner {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) auto auto;
    gap: 2rem;
    align-items: start;
}

.public-footer p {
    margin-bottom: 0;
    color: rgba(255, 253, 248, 0.78);
}

.public-footer-brand {
    color: var(--color-off-white) !important;
    font-weight: 800;
}

.public-footer-nav,
.public-footer-contact {
    display: grid;
    gap: 0.45rem;
}

.public-footer-nav a,
.public-footer-contact a {
    color: rgba(255, 253, 248, 0.84);
}

.public-footer-nav a:hover,
.public-footer-nav a:focus-visible,
.public-footer-contact a:hover,
.public-footer-contact a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.public-footer-contact {
    font-style: normal;
}

.public-footer-contact span {
    color: var(--color-pastel-orange);
    font-weight: 700;
}

.button-secondary,
.button-danger,
.button-link,
.button-small,
.form-actions a,
.table-actions a,
.section-head > a,
.auth-card > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-control);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    box-shadow: var(--shadow-control);
    font-weight: 600;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.button-secondary:hover,
.button-danger:hover,
.button-link:hover,
.button-small:hover,
.form-actions a:hover,
.table-actions a:hover,
.section-head > a:hover,
.auth-card > a:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-control-hover);
}

.button-danger {
    border-color: var(--color-error);
    background: var(--color-error);
    color: #fff;
}

.button-link {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--accent-dark);
}

.button-small {
    min-height: 1.7rem;
    padding: 0.225rem 0.65rem;
    border-radius: 10px;
    font-size: 0.86rem;
}

.button-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 1.1rem;
    line-height: 1;
}

.user-delete-button {
    border-color: rgba(139, 61, 47, 0.45);
}

.user-delete-button:hover {
    background: #8b3d2f;
    border-color: #6b2c22;
    color: #fff;
}

.narrow-card {
    max-width: 640px;
}

.cards,
.detail-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.detail-grid {
    grid-template-columns: 1.35fr 1fr;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.section-head--compact,
.section-head--compact h2 {
    margin: 0;
}

.section-head--compact h1 {
    margin: 0;
}

.card:has(> .section-head--compact:first-child) {
    row-gap: 1rem;
    padding-top: 1rem;
}

.chip-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.chip-list a {
    display: inline-flex;
    padding: 0.325rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.7);
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-size: var(--font-size-meta);
    font-weight: 750;
}

.lead {
    font-size: var(--font-size-lead);
    color: var(--muted);
}

form {
    display: grid;
    gap: 0.75rem;
}

input,
select,
textarea,
button {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-control);
    border: 1px solid var(--line);
    font: inherit;
}

button {
    padding-block: 0.425rem;
}

label {
    display: grid;
    gap: var(--space-2);
    color: var(--ink);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
}

input,
select,
textarea {
    background: rgba(255, 255, 255, 0.86);
    color: var(--ink);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input::placeholder,
textarea::placeholder {
    color: rgba(93, 98, 93, 0.72);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

button {
    background: var(--accent);
    color: white;
    border: 0;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(162, 84, 42, 0.22);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

button:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(124, 63, 31, 0.24);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

button:disabled:hover,
.is-disabled:hover {
    transform: none;
    box-shadow: none;
}

.searchable-combobox {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
}

/* All choice controls share sizing; compact filter contexts override only tokens. */
.course-filter-row,
.table-filter-row,
.calendar-filter-grid {
    --choice-min-height: 2.35rem;
    --choice-padding-block: 0.45rem;
    --choice-padding-start: 0.65rem;
    --choice-font-size: 0.86rem;
    --choice-font-weight: 700;
    --choice-line-height: 1.25;
}

.shared-datetime-trigger,
.searchable-combobox-input,
select:not([multiple]):not(.searchable-select-native),
.table-filter-dropdown > summary {
    --choice-padding-end: 2rem;
    width: 100%;
    height: calc(1em * var(--choice-line-height, 1.55) + 2 * var(--choice-padding-block, 0.85rem) + 2px);
    min-height: var(--choice-min-height, 3.25rem);
    padding: var(--choice-padding-block, 0.85rem) 2rem var(--choice-padding-block, 0.85rem) var(--choice-padding-start, 1rem);
    font-family: var(--font-family-base);
    font-size: var(--choice-font-size, var(--font-size-label));
    font-weight: var(--choice-font-weight, var(--font-weight-label));
    line-height: var(--choice-line-height, 1.55);
    color: var(--choice-color, var(--ink));
    letter-spacing: normal;
    text-transform: none;
}

.searchable-combobox-input {
    text-overflow: ellipsis;
}

.searchable-combobox-input--select {
    padding-right: 2rem;
    cursor: pointer;
}

.searchable-combobox.is-compact-select::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    right: var(--choice-padding-start, 1rem);
    width: 0.48rem;
    height: 0.48rem;
    border-right: 2px solid var(--color-forest);
    border-bottom: 2px solid var(--color-forest);
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.16s ease;
}

.searchable-combobox.is-compact-select.is-open::after {
    transform: translateY(-35%) rotate(225deg);
}

.searchable-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.searchable-combobox-list {
    position: absolute;
    z-index: 90;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 0.2rem;
    max-height: 15rem;
    overflow: auto;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--panel);
    box-shadow: var(--shadow-card-hover);
}

.searchable-combobox-list[hidden] {
    display: none;
}

.searchable-combobox-option {
    justify-content: flex-start;
    width: 100%;
    min-height: 1.75rem;
    padding: 0.225rem 0.65rem;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ink);
    text-align: left;
    box-shadow: none;
}

.searchable-combobox-option:hover,
.searchable-combobox-option:focus-visible,
.searchable-combobox-option.is-active {
    background: rgba(232, 238, 228, 0.78);
    color: var(--color-forest);
    transform: none;
    box-shadow: none;
}

.searchable-combobox-option[aria-selected="true"] {
    background: rgba(56, 97, 80, 0.12);
    color: var(--color-forest);
    font-weight: 800;
}

.action-dropdown {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.action-dropdown > summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.8rem;
    cursor: pointer;
    list-style: none;
}

.action-dropdown > summary::-webkit-details-marker {
    display: none;
}

.action-dropdown > summary > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.action-dropdown > summary::after {
    content: "";
    flex: 0 0 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    margin-left: 0.35rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
}

.action-dropdown[open] > summary::after {
    transform: translateY(25%) rotate(225deg);
}

.action-dropdown > .searchable-combobox-list {
    left: auto;
    min-width: 12rem;
    max-width: calc(100vw - 2rem);
}

.action-dropdown hr {
    width: 100%;
    margin: 0.2rem 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.action-dropdown form {
    margin: 0;
}

.action-dropdown .searchable-combobox-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.searchable-combobox-empty {
    padding: 0.55rem 0.65rem;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.shared-datetime-picker {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
}

.shared-datetime-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.shared-datetime-trigger {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(216, 204, 190, 0.98);
    border-radius: var(--radius-control);
    background: #fffdf8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    text-align: left;
}

.shared-datetime-trigger:hover,
.shared-datetime-trigger:focus-visible,
.shared-datetime-picker.is-open .shared-datetime-trigger {
    border-color: rgba(124, 146, 125, 0.88);
    background: #fffefb;
    color: var(--choice-color, var(--ink));
    box-shadow: 0 0 0 4px rgba(124, 146, 125, 0.18);
    transform: none;
}

.shared-datetime-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.shared-datetime-trigger-icon {
    border-radius: 0;
    background: transparent;
}

.shared-datetime-panel {
    position: absolute;
    z-index: 1500;
    top: calc(100% + 0.45rem);
    left: 0;
    display: grid;
    grid-template-columns: minmax(15rem, 1.15fr) minmax(7.5rem, 0.85fr);
    gap: var(--space-2);
    width: min(30rem, calc(100vw - 2rem));
    max-width: max-content;
    padding: var(--space-2);
    border: 1px solid rgba(216, 204, 190, 0.92);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 246, 239, 0.98)),
        var(--panel);
    box-shadow: 0 24px 58px rgba(70, 54, 34, 0.18);
}

/* Native top-layer panels stay inside their forms, outside table/modal clipping. */
.shared-overlay-open[popover] {
    position: fixed;
    inset: auto;
    margin: 0;
    overflow: auto;
}

[popover][hidden],
.shared-ui-tooltip[hidden] {
    display: none !important;
}

.shared-ui-tooltip {
    width: max-content;
    max-width: 16rem;
    padding: 0.35rem 0.55rem;
    border: 0;
    border-radius: 8px;
    background: rgba(31, 37, 33, 0.94);
    color: #fff;
    font-size: var(--font-size-meta);
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow-control);
    pointer-events: none;
}

[data-tooltip-ready]::after {
    content: none !important;
    display: none !important;
}

.shared-datetime-panel[hidden] {
    display: none !important;
}

.shared-datetime-panel.is-date-only {
    grid-template-columns: minmax(0, 1fr);
    width: min(22rem, calc(100vw - 2rem));
}

.shared-datetime-times[hidden] {
    display: none;
}

.shared-datetime-calendar,
.shared-datetime-times {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.shared-datetime-month {
    display: grid;
    grid-template-columns: 1.8rem 1.8rem minmax(0, 1fr) 1.8rem 1.8rem;
    align-items: center;
    gap: 0.35rem;
}

.shared-datetime-month strong {
    color: var(--ink);
    text-align: center;
    text-transform: capitalize;
}

.shared-datetime-month button,
.shared-datetime-day,
.shared-datetime-time,
.shared-datetime-footer button {
    min-height: 2.1rem;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ink);
    box-shadow: none;
}

.shared-datetime-time,
.shared-datetime-footer button {
    min-height: 1.75rem;
    padding-block: 0.175rem;
}

.shared-datetime-month button:hover,
.shared-datetime-day:hover,
.shared-datetime-day:focus-visible,
.shared-datetime-time:hover,
.shared-datetime-time:focus-visible,
.shared-datetime-footer button:hover,
.shared-datetime-footer button:focus-visible {
    background: rgba(232, 238, 228, 0.82);
    color: var(--color-forest);
    box-shadow: none;
    transform: none;
}

.shared-datetime-weekdays,
.shared-datetime-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(2rem, 1fr));
    gap: 0.15rem;
}

.shared-datetime-weekdays span {
    color: var(--muted);
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
}

.shared-datetime-day {
    justify-content: center;
    min-height: 2rem;
    height: 2rem;
    padding: 0;
}

.shared-datetime-day.is-outside {
    color: rgba(94, 74, 58, 0.45);
}

.shared-datetime-day.is-selected,
.shared-datetime-time.is-selected {
    background: linear-gradient(135deg, rgba(124, 146, 125, 0.98), rgba(56, 97, 80, 0.98));
    color: #fffdf8;
    font-weight: 850;
}

.shared-datetime-times > strong {
    color: var(--ink);
}

.shared-datetime-time-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    max-height: 15rem;
    overflow: auto;
    padding-right: 0.15rem;
}

.shared-datetime-footer {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.shared-datetime-value-field {
    display: grid;
    min-width: 0;
}

.shared-datetime-value-field input {
    width: 100%;
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(216, 204, 190, 0.98);
    border-radius: var(--radius-control);
    background: #fffdf8;
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 760;
}

.shared-datetime-value-field input:focus-visible {
    border-color: rgba(124, 146, 125, 0.88);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(124, 146, 125, 0.18);
}

.shared-datetime-value-field input[aria-invalid="true"] {
    border-color: rgba(177, 74, 61, 0.82);
    box-shadow: 0 0 0 4px rgba(177, 74, 61, 0.12);
}

.shared-datetime-footer button {
    color: var(--accent-dark);
    font-weight: 850;
}

.shared-datetime-actions {
    display: flex;
    gap: var(--space-2);
}

.shared-datetime-actions button {
    width: auto;
}

.shared-datetime-actions [data-datetime-confirm] {
    background: var(--color-forest);
    color: var(--panel);
}

.shared-datetime-actions [data-datetime-confirm]:hover {
    background: var(--color-forest-dark);
    color: var(--panel);
}

@media (max-width: 720px) {
    .shared-datetime-panel {
        position: fixed;
        inset: auto 0.75rem 0.75rem;
        grid-template-columns: minmax(0, 1fr);
        width: min(30rem, calc(100vw - 1.5rem));
        max-width: none;
        max-height: calc(100vh - 1.5rem);
        overflow: auto;
    }

    .shared-datetime-time-list {
        grid-template-columns: minmax(0, 1fr);
        max-height: 10rem;
    }

    .shared-datetime-panel.is-date-only {
        width: min(22rem, calc(100vw - 1.5rem));
    }

    .shared-datetime-footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .shared-datetime-actions {
        justify-content: flex-end;
    }
}

.admin-action-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-color: transparent;
    color: #fff;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.admin-action-button,
.admin-action-button > span {
    color: #fff;
}

.action-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    color: #fff !important;
    font-weight: 850;
    line-height: 1;
}

.admin-table .admin-action-button .action-button-icon,
.user-profile-card .admin-action-button .action-button-icon,
.rich-text-editor .admin-action-button .action-button-icon {
    color: currentColor;
}

/* Shared action colors only: keep each context's existing button dimensions.
   Icon selectors cover legacy action links without changing their typography.
   Explicit action classes take precedence over the legacy icon mapping. */
:where(a[data-ui-icon="plus"], button[data-ui-icon="plus"]),
.button-success,
.button-action-create {
    --action-button-bg: var(--color-forest);
    --action-button-hover: var(--color-forest-dark);
}

:where(a[data-ui-icon="pencil"], button[data-ui-icon="pencil"]),
.button-action-edit {
    --action-button-bg: var(--color-clay);
    --action-button-hover: var(--color-clay-dark);
}

:where(a[data-ui-icon="trash"], button[data-ui-icon="trash"], a.danger-link),
.button-action-delete,
.button-danger {
    --action-button-bg: var(--color-error);
    --action-button-hover: #6f3025;
}

/* Color ownership stays here, including table/link and modal overrides. */
:is(.button-success, .button-action-create, .button-action-edit, .button-action-delete, .button-danger,
    a.danger-link, a[data-ui-icon="plus"], button[data-ui-icon="plus"],
    a[data-ui-icon="pencil"], button[data-ui-icon="pencil"], a[data-ui-icon="trash"], button[data-ui-icon="trash"]) {
    background: var(--action-button-bg) !important;
    border-color: var(--action-button-bg) !important;
    color: #fff !important;
}

:is(.button-success, .button-action-create, .button-action-edit, .button-action-delete, .button-danger,
    a.danger-link, a[data-ui-icon="plus"], button[data-ui-icon="plus"],
    a[data-ui-icon="pencil"], button[data-ui-icon="pencil"], a[data-ui-icon="trash"], button[data-ui-icon="trash"]):not(:is(:disabled, .is-disabled, [aria-disabled="true"])):is(:hover, :focus-visible) {
    background: var(--action-button-hover) !important;
    border-color: var(--action-button-hover) !important;
}

:is(.button-success, .button-action-create, .button-action-edit, .button-action-delete, .button-danger,
    a.danger-link, a[data-ui-icon="plus"], button[data-ui-icon="plus"],
    a[data-ui-icon="pencil"], button[data-ui-icon="pencil"], a[data-ui-icon="trash"], button[data-ui-icon="trash"]):focus-visible {
    outline: 2px solid var(--color-forest);
    outline-offset: 3px;
}

:is(.button-success, .button-action-create, .button-action-edit, .button-action-delete, .button-danger,
    a.danger-link, a[data-ui-icon="plus"], button[data-ui-icon="plus"],
    a[data-ui-icon="pencil"], button[data-ui-icon="pencil"], a[data-ui-icon="trash"], button[data-ui-icon="trash"]):is(:disabled, .is-disabled, [aria-disabled="true"]) {
    background: var(--color-border) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
    opacity: 1;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

:is(.button-success, .button-action-create, .button-action-edit, .button-action-delete, .button-danger,
    a.danger-link, a[data-ui-icon="plus"], button[data-ui-icon="plus"],
    a[data-ui-icon="pencil"], button[data-ui-icon="pencil"], a[data-ui-icon="trash"], button[data-ui-icon="trash"]) > span,
:is(.button-success, .button-action-create, .button-action-edit, .button-action-delete, .button-danger,
    a.danger-link, a[data-ui-icon="plus"], button[data-ui-icon="plus"],
    a[data-ui-icon="pencil"], button[data-ui-icon="pencil"], a[data-ui-icon="trash"], button[data-ui-icon="trash"]) .action-button-icon {
    color: inherit !important;
}

.button-action-detail,
.admin-action-button.button-action-detail {
    background: #2f4b68 !important;
    border-color: #2f4b68 !important;
    color: #fff !important;
}

.button-action-detail:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):hover,
.button-action-detail:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):focus-visible,
.admin-action-button.button-action-detail:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):hover,
.admin-action-button.button-action-detail:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):focus-visible {
    background: #203a54 !important;
    border-color: #203a54 !important;
    color: #fff !important;
}

.button-action-detail:disabled,
.button-action-detail.is-disabled,
.button-action-detail[aria-disabled="true"],
.admin-action-button.button-action-detail:disabled,
.admin-action-button.button-action-detail.is-disabled,
.admin-action-button.button-action-detail[aria-disabled="true"] {
    background: var(--color-border) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
    opacity: 1;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.rich-text-editor .ql-toolbar button.admin-action-button,
.course-bulk-email-dialog .ql-toolbar button.admin-action-button {
    width: auto;
    min-width: 2.15rem;
    height: 2.15rem;
    padding: 0.35rem 0.48rem;
    border-width: 1px;
    border-style: solid;
    color: #fff;
}


.is-loading,
[aria-busy="true"] {
    cursor: progress;
    opacity: 0.72;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.checkbox input {
    width: auto;
}

.course-card {
    display: grid;
    gap: 1rem;
}

.course-card-link {
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.course-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(162, 84, 42, 0);
    transition: box-shadow 0.18s ease;
}

.course-card-link:hover {
    transform: translateY(-4px);
    border-color: rgba(162, 84, 42, 0.34);
    box-shadow: 0 28px 60px rgba(48, 37, 28, 0.14);
}

.course-card-link:hover::after {
    box-shadow: inset 0 0 0 1px rgba(162, 84, 42, 0.2);
}

.course-date {
    color: var(--accent);
    font-weight: 600;
}

.compact {
    grid-template-columns: max-content 1fr;
}

.course-detail-grid {
    align-items: start;
}

.course-detail-shell {
    display: grid;
    gap: var(--space-4);
}

.course-detail-card {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr);
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: rgba(255, 253, 248, 0.92);
    box-shadow: var(--shadow-panel);
}

.course-detail-content {
    display: grid;
    gap: var(--space-4);
}

.course-detail-hero,
.course-detail-section,
.course-registration-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: rgba(255, 255, 255, 0.58);
}

.course-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.7fr);
    gap: 1.25rem;
    padding: var(--space-4);
    align-items: stretch;
}

.course-detail-hero-copy {
    display: grid;
    align-content: start;
    gap: var(--space-3);
}

.course-detail-hero-copy h1 {
    max-width: none;
    width: 100%;
}

.course-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.course-detail-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.course-detail-image {
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--color-sage-soft);
}

.course-detail-meta {
    margin: 0;
}

.course-detail-section {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.course-detail-section h2,
.course-detail-section h3,
.course-detail-section p {
    margin-bottom: 0;
}

.course-registration-panel {
    position: sticky;
    top: 5.25rem;
    scroll-margin-top: 5.5rem;
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
}

.course-detail-top {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.85fr);
}

.course-detail-main {
    display: grid;
    gap: 1.5rem;
}

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

.course-meta-item {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(216, 204, 190, 0.9);
}

.course-meta-item span,
.registration-summary span {
    color: var(--muted);
    font-size: 0.9rem;
}

.course-meta-item strong,
.registration-summary strong {
    font-size: 1rem;
}

.course-meta-item-wide {
    grid-column: 1 / -1;
}

.course-body {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.course-body-copy {
    display: grid;
    gap: 1rem;
}

.course-image {
    width: 100%;
    border-radius: 18px;
    border: 1px solid var(--line);
    margin: 0;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
    gap: 1rem;
}

.compact-list-head {
    align-items: end;
    margin-bottom: var(--space-3);
}

.compact-list-head h1,
.compact-list-head h2 {
    margin-bottom: 0;
}

.table-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 0.45fr) auto auto;
    gap: var(--space-3);
    align-items: end;
    margin-bottom: var(--space-4);
}

.table-filter-toolbar button,
.table-filter-toolbar .button-secondary,
.table-filter-toolbar .button-primary {
    min-height: 2.2rem;
}

.registration-form {
    gap: 1rem;
}

.registration-course-summary,
.registration-form-section {
    display: grid;
    gap: var(--space-3);
}

.registration-course-summary {
    padding: 1rem;
    border: 1px solid rgba(216, 204, 190, 0.9);
    border-radius: 18px;
    background: rgba(232, 238, 228, 0.34);
}

.registration-course-summary > span {
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.registration-form-section {
    padding-top: 0.25rem;
}

.registration-form-section h3 {
    margin-bottom: 0;
    font-size: 1rem;
}

.registration-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.registration-section-head .registration-email-prefill {
    flex: 0 0 auto;
}

.registration-field-grid {
    display: grid;
    gap: 0.85rem;
}

.registration-email-prefill {
    justify-self: start;
    width: auto;
}

.course-registration-card {
    display: grid;
    gap: 1.25rem;
}

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

.registration-summary > div {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(216, 204, 190, 0.9);
}

.course-lessons-card {
    margin-top: 1.5rem;
}

.lesson-list,
.addon-overview,
.lesson-choice-list {
    display: grid;
    gap: 0.75rem;
}

.lesson-card,
.addon-overview article {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid rgba(216, 204, 190, 0.88);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.lesson-card {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.55fr);
    align-items: start;
}

.lesson-card h3,
.lesson-card p,
.addon-overview p {
    margin-bottom: 0;
}

.addon-overview article span {
    color: var(--accent-dark);
    font-weight: 800;
}

.addon-list {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1rem;
}

.addon-list legend {
    padding: 0 var(--space-2);
    color: var(--color-forest);
    font-weight: 800;
}

.reservation-scope {
    background: rgba(232, 238, 228, 0.34);
}

.addon-choice {
    align-items: flex-start;
    padding: 0.85rem;
    border: 1px solid rgba(216, 204, 190, 0.82);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.6);
}

.addon-choice > span {
    display: grid;
    gap: 0.25rem;
    font-weight: 600;
}

.addon-choice small,
.addon-choice em,
.addon-state {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-style: normal;
    font-weight: 600;
}

.addon-choice.is-required {
    border-color: rgba(56, 97, 80, 0.32);
    background: rgba(232, 238, 228, 0.46);
}

.registration-feedback,
.validation-summary {
    display: grid;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(139, 61, 47, 0.22);
    border-radius: var(--radius-control);
    background: rgba(139, 61, 47, 0.08);
}

.validation-summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

.validation-summary-valid {
    display: none !important;
}

.registration-feedback.success {
    border: 1px solid rgba(56, 97, 80, 0.24);
    background: rgba(56, 97, 80, 0.1);
    color: var(--success);
}

.field-validation,
.field-validation-error,
.validation-summary-errors {
    color: var(--error);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.registration-disabled {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid rgba(139, 61, 47, 0.28);
    border-radius: 18px;
    background: rgba(139, 61, 47, 0.1);
    color: var(--error);
}

.registration-disabled p {
    margin-bottom: 0;
}

.addon-note {
    margin: -0.25rem 0 0.75rem 2.25rem;
    color: var(--muted);
}

.price-box {
    border: 1px dashed var(--line);
    border-radius: 18px;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.55);
}

.price-total {
    font-size: 1.35rem;
    font-weight: 700;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-actions button {
    width: auto;
}

.form-actions form {
    display: inline-flex;
}

.course-server-status-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.course-server-status-filter .is-active {
    border-color: rgba(172, 91, 42, 0.35);
    background: rgba(172, 91, 42, 0.16);
    color: var(--accent-dark);
}

.full-width {
    grid-column: 1 / -1;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

td.table-actions,
:is(.table, .admin-table) tbody td.table-actions {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}

.table-actions form {
    display: inline-flex;
    margin: 0;
}

td.table-actions > button,
td.table-actions > form {
    margin-right: 0.5rem;
    vertical-align: middle;
}

td.table-actions > :last-child {
    margin-right: 0;
}

.table-actions [data-ui-icon] {
    position: relative;
}

.compact-icon-action,
td.table-actions a[data-ui-icon],
td.table-actions button[data-ui-icon],
.admin-table-reset[data-ui-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    max-height: 2.25rem;
    flex: 0 0 2.25rem;
    box-sizing: border-box;
    padding: 0;
    border-radius: 10px;
    gap: 0;
    font-size: 0;
    line-height: 1;
}

.compact-icon-action[data-ui-icon]::before,
td.table-actions a[data-ui-icon]::before,
td.table-actions button[data-ui-icon]::before,
.admin-table-reset[data-ui-icon]::before {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}

.admin-course-action-button {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    gap: 0.45rem;
    white-space: nowrap;
}

.section-head > .admin-course-action-button {
    margin-left: auto;
}

.section-head > .admin-course-action-button.button-success {
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 30px rgba(56, 97, 80, 0.2);
}

.section-head > .admin-course-action-button.button-success:hover {
    box-shadow: 0 18px 36px rgba(56, 97, 80, 0.24);
}

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

.table-wrap {
    max-width: 100%;
    min-width: 0;
    border: 1px solid rgba(216, 204, 190, 0.82);
    border-radius: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(255, 255, 255, 0.56);
}

.table thead,
.admin-table thead {
    background: rgba(232, 238, 228, 0.9);
}

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

.table th,
.admin-table th {
    color: var(--color-forest);
    font-size: var(--font-size-meta);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table tbody td:not(.table-actions) a,
.admin-table tbody td:not(.table-actions) a {
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

td.table-actions > a {
    margin-right: 0;
    vertical-align: middle;
}

.table tbody td:not(.table-actions) a:hover,
.table tbody td:not(.table-actions) a:focus-visible,
.admin-table tbody td:not(.table-actions) a:hover,
.admin-table tbody td:not(.table-actions) a:focus-visible {
    color: var(--color-forest);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: rgba(124, 146, 125, 0.17);
    color: var(--color-forest);
    font-size: var(--font-size-meta);
    font-weight: 700;
    line-height: 1.2;
}

.badge-success {
    background: rgba(56, 97, 80, 0.14);
    color: var(--success);
}

.badge-warning {
    background: rgba(224, 163, 101, 0.2);
    color: var(--warning);
}

.badge-danger {
    background: rgba(139, 61, 47, 0.12);
    color: var(--error);
}

.danger-link {
    color: var(--error);
}

.reservation-state {
    margin-left: 0;
}

.reservation-new_pending {
    background: rgba(215, 152, 55, 0.15);
    color: #8d5d00;
}

.reservation-paid {
    background: rgba(45, 128, 87, 0.15);
    color: #196441;
}

.reservation-overdue {
    background: rgba(160, 74, 31, 0.15);
    color: #8a3c12;
}

.reservation-cancelled {
    background: rgba(122, 126, 133, 0.16);
    color: #53565c;
}

.reservation-refund_required {
    background: rgba(153, 44, 82, 0.14);
    color: #84234a;
}

.qr-card {
    display: grid;
    gap: 1rem;
}

.completion-shell {
    display: grid;
    gap: var(--space-6);
}

.completion-hero,
.payment-panel,
.completion-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: rgba(255, 253, 248, 0.92);
    box-shadow: var(--shadow-panel);
}

.completion-hero {
    display: grid;
    gap: var(--space-4);
    padding: clamp(2rem, 4vw, 4rem);
    background:
        linear-gradient(145deg, rgba(232, 238, 228, 0.88), rgba(255, 253, 248, 0.94)),
        var(--panel);
}

.completion-hero h1 {
    max-width: 14ch;
}

.completion-hero .lead {
    max-width: 46rem;
}

.completion-hero-actions,
.payment-panel-head,
.completion-bottom-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.payment-panel {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
}

.payment-panel-head {
    justify-content: space-between;
    align-items: start;
}

.payment-panel-head h2 {
    margin-bottom: 0;
    font-size: clamp(2rem, 4vw, 4rem);
    color: var(--color-forest-dark);
}

.payment-symbol {
    display: grid;
    gap: 0.35rem;
    min-width: min(100%, 15rem);
    padding: 1rem;
    border: 1px solid rgba(56, 97, 80, 0.24);
    border-radius: 18px;
    background: rgba(232, 238, 228, 0.5);
}

.payment-symbol span,
.qr-fallback span {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 800;
    text-transform: uppercase;
}

.payment-symbol strong {
    font-size: 1.35rem;
    color: var(--accent-dark);
}

.payment-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.payment-qr-card,
.payment-details-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid rgba(216, 204, 190, 0.88);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
}

.payment-qr-card h3,
.payment-details-card h3 {
    margin-bottom: 0;
}

.payment-qr-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.qr-unavailable {
    display: grid;
    min-height: 15rem;
    place-items: center;
    border-radius: 18px;
    background: rgba(31, 37, 33, 0.05);
    color: var(--muted);
    font-size: 2rem;
    font-weight: 900;
}

.payment-detail-list {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: 0.75rem 1rem;
    margin: 0;
}

.payment-detail-list dt {
    color: var(--muted);
    font-weight: 700;
}

.payment-detail-list dd {
    margin: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.qr-fallback {
    display: grid;
    gap: var(--space-2);
    padding: 1rem;
    border-radius: 18px;
    background: rgba(31, 37, 33, 0.04);
}

.completion-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.7fr);
}

.completion-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.completion-card h2,
.completion-card h3 {
    margin-bottom: 0;
}

.completion-lesson-list,
.next-steps-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.completion-lesson-list {
    list-style: none;
    padding: 0;
}

.completion-lesson-list li {
    display: grid;
    gap: 0.25rem;
    padding: 0.9rem;
    border: 1px solid rgba(216, 204, 190, 0.82);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.62);
}

.completion-lesson-list span {
    color: var(--muted);
}

.public-error-shell {
    min-height: min(64vh, 42rem);
    display: grid;
    place-items: center;
    padding: var(--space-7) 0;
}

.public-error-card {
    width: min(100%, 44rem);
    display: grid;
    gap: var(--space-4);
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background:
        linear-gradient(145deg, rgba(232, 238, 228, 0.82), rgba(255, 253, 248, 0.96)),
        var(--panel);
    box-shadow: var(--shadow-panel);
    text-align: center;
}

.public-error-card h1,
.public-error-card p {
    margin-bottom: 0;
}

.public-error-card .eyebrow {
    justify-self: center;
}

.public-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.error-reference {
    justify-self: center;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    background: rgba(31, 37, 33, 0.05);
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.error-reference span {
    color: var(--ink);
    font-weight: 800;
}

.email-state {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: 18px;
}

.email-state.success {
    border: 1px solid rgba(56, 97, 80, 0.24);
    background: rgba(56, 97, 80, 0.1);
    color: var(--success);
}

.email-state.info {
    border: 1px solid rgba(124, 146, 125, 0.28);
    background: rgba(232, 238, 228, 0.42);
}

.email-state.warning {
    border: 1px solid rgba(224, 163, 101, 0.34);
    background: rgba(224, 163, 101, 0.14);
    color: var(--warning);
}

.communications-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
    margin-bottom: var(--space-3);
}

.communications-hero h1,
.communications-hero p,
.communication-compose-card h2,
.communication-compose-card p,
.communication-history-card h2,
.communication-history-card p {
    margin: 0;
}

.communication-stat {
    display: grid;
    justify-items: end;
    gap: 0.2rem;
    min-width: 9rem;
}

.communication-stat strong {
    color: var(--ink);
    font-size: 2rem;
}

.communication-stat span {
    color: var(--muted);
}

.communications-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-3);
    align-items: start;
}

.communications-layout-history-first {
    grid-template-columns: minmax(0, 1fr);
}

.communication-compose-card {
    position: relative;
    justify-self: end;
}

.communication-compose-card > summary {
    list-style: none;
    cursor: pointer;
}

.communication-compose-card > summary::-webkit-details-marker {
    display: none;
}

.communication-compose-panel {
    position: absolute;
    z-index: 20;
    right: 0;
    top: calc(100% + 0.75rem);
    display: grid;
    gap: var(--space-3);
    width: min(42rem, calc(100vw - 3rem));
    max-height: min(72vh, 48rem);
    overflow: auto;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 253, 248, 0.98);
    box-shadow: var(--shadow-card-hover);
}

.communication-compose-card,
.communication-history-card,
.communication-compose-form {
    display: grid;
    gap: var(--space-3);
}

.table-filter-row input:not(.searchable-combobox-input):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100%;
    min-width: 7rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius-control);
    font-size: 0.86rem;
}

.required-marker,
.company-info-required-marker {
    margin-left: 0.2rem;
    color: var(--error);
    font-weight: 800;
}

.field-validation-valid {
    display: none !important;
}

label > .field-validation-error,
label > .field-validation {
    display: block;
    margin-top: 0.3rem;
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error,
.searchable-combobox.has-validation-error .searchable-combobox-input,
.shared-datetime-picker.has-validation-error .shared-datetime-trigger {
    border-color: rgba(177, 74, 61, 0.9) !important;
    box-shadow: 0 0 0 3px rgba(177, 74, 61, 0.12) !important;
}

[data-validation-required-group].has-validation-error {
    border-color: rgba(177, 74, 61, 0.65);
}

.table-filter-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(7rem, 1fr));
    gap: 0.35rem;
}

.table-filter-row .table-filter-range {
    min-width: 12rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.table-filter-dropdown {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.table-filter-dropdown summary {
    position: relative;
    contain: inline-size;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    list-style: none;
}

.table-filter-dropdown summary::-webkit-details-marker {
    display: none;
}

.table-filter-dropdown summary::marker {
    content: "";
}

.table-filter-dropdown summary::after,
.shared-datetime-trigger-icon {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--choice-padding-start, 1rem);
    width: 0.48rem;
    height: 0.48rem;
    border-right: 2px solid var(--color-forest);
    border-bottom: 2px solid var(--color-forest);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.16s ease;
    pointer-events: none;
}

.table-filter-dropdown[open] > summary::after,
.shared-datetime-picker.is-open .shared-datetime-trigger-icon {
    transform: translateY(-35%) rotate(225deg);
}

.table-filter-dropdown summary:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.table-filter-dropdown-panel {
    position: absolute;
    z-index: 20;
    display: grid;
    gap: 0.4rem;
    min-width: 13rem;
    margin-top: 0.35rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--panel);
    box-shadow: var(--shadow);
    letter-spacing: 0;
    text-transform: none;
}

.table-checklist-filter {
    display: grid;
    gap: 0.35rem;
    min-width: 9rem;
    max-height: 8.5rem;
    overflow: auto;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.62);
    letter-spacing: 0;
    text-transform: none;
}

.table-checklist-filter label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.65rem;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.table-filter-option-value {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.table-checklist-filter input {
    width: auto;
    min-width: 0;
}

.card[data-row-href] {
    cursor: pointer;
}

.card[data-row-href]:hover {
    transform: translateY(-2px);
}

.card[data-row-href]:focus-visible {
    outline: 3px solid rgba(79, 125, 98, 0.35);
    outline-offset: 3px;
}

.communication-recipient-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-2);
    max-height: 16rem;
    overflow: auto;
    padding: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.62);
}

.communication-recipient-checklist label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.55rem;
    row-gap: 0.1rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(56, 97, 80, 0.12);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.68);
}

.communication-recipient-checklist input {
    grid-row: span 2;
}

.communication-recipient-checklist span,
.communication-recipient-checklist small {
    overflow-wrap: anywhere;
}

.communication-recipient-checklist small {
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.communication-validation {
    margin: 0;
}

.communication-history-table td strong,
.communication-history-table td span {
    display: block;
}

.communication-history-table td > span:not(.badge):not(.email-state) {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.communication-status-queued,
.communication-status-pending {
    color: var(--warning);
    background: rgba(154, 104, 29, 0.12);
}

.communication-status-sent,
.communication-status-delivered {
    color: var(--success);
    background: rgba(56, 97, 80, 0.1);
}

.communication-status-failed {
    color: var(--error);
    background: rgba(139, 61, 47, 0.1);
}

.communication-row-failed {
    background: rgba(224, 163, 101, 0.08);
}

.communication-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
    margin-bottom: var(--space-3);
}

.communication-detail-hero h1,
.communication-detail-hero p,
.communication-detail-card h2 {
    margin: 0;
}

.communication-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
    gap: var(--space-3);
    align-items: start;
    margin-bottom: var(--space-3);
}

.communication-detail-card {
    display: grid;
    gap: var(--space-3);
}

.communication-message-body {
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.68);
}

.qr-visual {
    display: block;
    width: 100%;
    max-width: 18rem;
    height: auto;
    aspect-ratio: 1;
    justify-self: center;
    min-height: 0;
    object-fit: contain;
    padding: 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #fff;
}

.qr-payload {
    display: block;
    overflow-wrap: anywhere;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(216, 204, 190, 0.9);
    background: rgba(31, 37, 33, 0.04);
    font-size: 0.92rem;
    line-height: 1.5;
}

.admin-shell {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(232, 238, 228, 0.52), rgba(249, 245, 238, 0.78)),
        var(--color-warm);
}

.admin-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #22322b 0%, #17231e 100%);
    color: var(--sidebar-ink);
    padding: 0.75rem;
}

.admin-sidebar-heading {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.admin-sidebar-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sidebar-ink);
    box-shadow: none;
}

.admin-sidebar-collapse::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.admin-sidebar-brand {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.06);
    color: var(--sidebar-ink);
}

.admin-sidebar-brand .brand-mark {
    background: var(--color-clay);
}

.admin-sidebar-brand .brand-text span {
    color: rgba(243, 237, 227, 0.68);
}

.admin-nav {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2rem;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-control);
    color: rgba(243, 237, 227, 0.9);
    font-weight: 700;
}

.admin-nav a:hover,
.admin-nav a:focus-visible,
.admin-nav a.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: #fffaf0;
}

.admin-nav .nav-item-icon {
    background: rgba(255, 255, 255, 0.14);
    color: #fffaf0;
}

.admin-nav a.is-active {
    box-shadow: inset 4px 0 0 var(--color-clay);
}

.admin-nav-section {
    margin: 0.8rem 0 0.2rem;
    color: rgba(243, 237, 227, 0.5);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

@media (min-width: 901px) {
    .admin-shell.admin-nav-collapsed {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }

    .admin-nav-collapsed .admin-sidebar {
        padding: 0.75rem 0.5rem;
    }

    .admin-nav-collapsed .admin-sidebar-brand {
        flex: 0 0 auto;
        padding: 0.5rem 0;
        background: transparent;
    }

    .admin-nav-collapsed .admin-sidebar-heading {
        justify-content: center;
    }

    .admin-nav-collapsed .brand-text,
    .admin-nav-collapsed .admin-nav-label,
    .admin-nav-collapsed .admin-nav-section {
        display: none;
    }

    .admin-nav-collapsed .admin-nav a {
        justify-content: center;
        gap: 0;
    }

    .admin-nav-collapsed .admin-sidebar-collapse::before {
        transform: rotate(225deg);
    }
}

.admin-main {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    max-width: 100%;
}

.admin-header {
    position: sticky;
    top: 0;
    z-index: 700;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 4.75rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(216, 204, 190, 0.8);
    background: rgba(249, 245, 238, 0.92);
    backdrop-filter: blur(16px);
}

.admin-header strong {
    display: inline-flex;
    font-size: 1.25rem;
    line-height: 1.2;
}

.admin-menu-toggle + div {
    grid-column: 1;
    min-width: 0;
}

.admin-header-actions {
    grid-column: 2;
    min-width: 0;
    max-width: min(28rem, 45vw);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.admin-menu-toggle {
    display: none;
    align-items: center;
    gap: 0.65rem;
    min-height: 1.98rem;
    padding: 0.31rem 0.78rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-weight: 800;
    box-shadow: var(--shadow-control);
}

.admin-sidebar-backdrop {
    display: none;
}

.button-link {
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
}

.breadcrumbs {
    min-width: 0;
    margin-bottom: 0.5rem;
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.breadcrumbs-separator {
    flex: none;
    color: var(--muted);
}

.breadcrumbs [aria-current="page"] {
    color: var(--ink);
}

.breadcrumbs a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.breadcrumbs a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.flash {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
    min-width: min(420px, calc(100vw - 2rem));
    max-width: min(520px, calc(100vw - 2rem));
    padding: 1rem 1.25rem;
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    background: #fff6ef;
    box-shadow: 0 24px 60px rgba(31, 37, 33, 0.16);
    animation: flash-in 0.22s ease;
}

.flash:focus {
    outline: none;
}

.flash span {
    line-height: 1.45;
    font-weight: 700;
}

.flash-success {
    border-color: rgba(56, 97, 80, 0.25);
    background: #eef6f1;
    color: var(--success);
}

.flash-error {
    border-color: rgba(139, 61, 47, 0.25);
    background: #f9eeeb;
    color: var(--error);
}

.flash-info {
    border-color: rgba(83, 103, 89, 0.25);
    background: #f4f0e7;
    color: var(--ink);
}

.flash-warning {
    border-color: rgba(195, 123, 66, 0.28);
    background: #fff3df;
    color: #8a4b16;
}

.flash.is-hiding {
    animation: flash-out 0.25s ease forwards;
}

.flash-close {
    width: auto;
    min-width: 2.25rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    box-shadow: none;
    background: rgba(31, 37, 33, 0.08);
    color: inherit;
}

.flash-close:hover,
.flash-close:focus-visible {
    background: rgba(31, 37, 33, 0.14);
    box-shadow: none;
    transform: none;
}

.has-confirmation-dialog {
    overflow: hidden;
}

.confirmation-dialog[hidden] {
    display: none;
}

.confirmation-dialog {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.confirmation-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 37, 33, 0.48);
}

.confirmation-dialog__panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-3);
    width: min(34rem, 100%);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(139, 61, 47, 0.24);
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: 0 32px 80px rgba(31, 37, 33, 0.24);
}

.confirmation-dialog__panel:focus {
    outline: 3px solid rgba(139, 61, 47, 0.24);
    outline-offset: 4px;
}

.confirmation-dialog__panel h2,
.confirmation-dialog__panel p {
    margin: 0;
}

.confirmation-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.has-admin-action-modal {
    overflow: hidden;
}

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

.admin-action-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 2vw, 1.5rem);
}

.admin-action-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 37, 33, 0.52);
    backdrop-filter: blur(4px);
}

.admin-action-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(58rem, 100%);
    max-height: min(92vh, 56rem);
    overflow: auto;
    padding: clamp(1rem, 2.2vw, 1.75rem);
    border: 1px solid rgba(139, 61, 47, 0.24);
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: 0 32px 80px rgba(31, 37, 33, 0.28);
}

.admin-action-modal__dialog:focus {
    outline: 3px solid rgba(139, 61, 47, 0.24);
    outline-offset: 4px;
}

.admin-action-modal__close {
    position: sticky;
    top: 0;
    left: 100%;
    z-index: 2;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 999px;
    background: var(--panel-muted);
    color: var(--ink);
    box-shadow: none;
}

.admin-action-modal__close:hover,
.admin-action-modal__close:focus-visible {
    background: rgba(139, 61, 47, 0.14);
    box-shadow: none;
    transform: none;
}

.admin-action-modal__body {
    display: grid;
    gap: var(--space-4);
}

.admin-action-modal__body > .card {
    margin: 0;
    box-shadow: none;
}

.admin-action-modal__body .user-edit-hero,
.admin-action-modal__body .user-skills-hero {
    padding-right: 3rem;
}

.admin-action-modal__loading {
    padding: var(--space-6);
    text-align: center;
    color: var(--muted);
}

.auth-shell {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0;
    background: transparent;
}

.public-content:has(> .admin-auth-shell) {
    display: grid;
    align-items: center;
    padding: var(--space-3) 0;
}

.auth-card {
    width: min(100%, 520px);
    display: grid;
    gap: var(--space-3);
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

.auth-card h1,
.auth-card p {
    margin: 0;
}

.auth-card--notice {
    text-align: left;
}

.auth-eyebrow {
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-copy {
    color: var(--muted);
    line-height: 1.65;
}

.auth-form {
    display: grid;
    gap: var(--space-3);
}

.auth-form label {
    margin: 0;
}

.auth-form .button-primary,
.auth-secondary-actions .button-primary,
.auth-secondary-actions .button-secondary,
.auth-secondary-actions .button-link {
    width: 100%;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    font-weight: 600;
}

.auth-checkbox input {
    width: 1.1rem;
    min-height: 1.1rem;
}

.auth-secondary-actions {
    display: grid;
    gap: 0.75rem;
}

.auth-dev-link {
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid rgba(109, 124, 111, 0.22);
    border-radius: var(--radius-card);
    background: rgba(232, 238, 228, 0.45);
    overflow-wrap: anywhere;
}

.auth-dev-link span {
    color: var(--accent-dark);
    font-weight: 800;
}

.auth-dev-link a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

.stat-card strong {
    display: block;
    font-size: 2rem;
    margin: 0.35rem 0 0.5rem;
}

.summary-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}
.statistics-summary-metrics {
    margin-bottom: var(--space-3);
}
.summary-metric-compact {
    display: grid;
    align-content: center;
    gap: .35rem;
    min-width: 0;
    min-height: 0;
    padding: .9rem;
}
.summary-metric-compact .eyebrow,
.summary-metric-compact strong {
    margin: 0;
}
.summary-metric-compact strong {
    font-size: 1.45rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
@media (max-width: 1000px) {
    .summary-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
    .summary-metrics-grid { grid-template-columns: minmax(0, 1fr); }
}

.stat-card-link {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stat-card-link:hover {
    transform: translateY(-3px);
    border-color: rgba(162, 84, 42, 0.35);
    box-shadow: 0 28px 60px rgba(48, 37, 28, 0.14);
}

.dashboard-hero {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: end;
    margin-bottom: var(--space-4);
}

.dashboard-hero h1,
.dashboard-hero p {
    margin: 0;
}

.dashboard-hero h1 {
    margin-top: 0.25rem;
}

.dashboard-hero-actions,
.dashboard-actions {
    display: grid;
    gap: 0.75rem;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.dashboard-metric {
    min-height: 7.5rem;
    padding: 0.9rem;
}

.dashboard-metric .eyebrow {
    margin-bottom: 0.2rem;
}

.dashboard-metric strong {
    font-size: 1.45rem;
    margin: 0.15rem 0 0.2rem;
}

.dashboard-metric p:last-child {
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.35;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.8fr);
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-4);
}

.dashboard-panel {
    display: grid;
    gap: var(--space-3);
}

.dashboard-panel--wide {
    min-width: 0;
}

.dashboard-stack {
    display: grid;
    gap: var(--space-4);
}

.dashboard-table td strong,
.dashboard-table td span {
    display: block;
}

.dashboard-table td span:not(.badge) {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.dashboard-table .badge {
    margin-left: 0;
}

.dashboard-attention-list {
    display: grid;
    gap: 0.75rem;
}

.dashboard-attention {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.75rem;
    padding: 0.95rem;
    border-radius: var(--radius-card);
    border: 1px solid rgba(109, 124, 111, 0.2);
    background: rgba(232, 238, 228, 0.5);
    color: var(--ink);
}

.dashboard-attention:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-control-hover);
}

.dashboard-attention span {
    font-weight: 800;
}

.dashboard-attention strong {
    font-size: 1.45rem;
    line-height: 1;
}

.dashboard-attention small {
    grid-column: 1 / -1;
    color: var(--muted);
    line-height: 1.45;
}

.dashboard-attention-warning {
    border-color: rgba(195, 123, 66, 0.32);
    background: #fff3df;
}

.dashboard-attention-danger {
    border-color: rgba(139, 61, 47, 0.25);
    background: rgba(139, 61, 47, 0.08);
}

.dashboard-actions a {
    display: grid;
    gap: 0.25rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.7);
    color: var(--ink);
}

.dashboard-actions a:hover {
    border-color: rgba(162, 84, 42, 0.28);
    transform: translateY(-1px);
    box-shadow: var(--shadow-control-hover);
}

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

.category-hero,
.category-filter-card,
.category-panel,
.category-edit-card,
.category-delete-card {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.category-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.category-hero h1,
.category-hero p,
.category-edit-card h1,
.category-edit-card p,
.delete-confirmation-head h1,
.delete-confirmation-head p {
    margin: 0;
}

.category-filter-grid {
    align-items: end;
}

.category-filter-grid label {
    margin: 0;
}

.category-filter-actions button {
    width: 100%;
}

.category-table td strong {
    display: block;
}

.category-table-toolbar {
    grid-template-columns: minmax(14rem, 1fr) auto;
    margin-bottom: var(--space-3);
}

.category-color-swatch {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.55rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    vertical-align: middle;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.62);
}

.category-form {
    display: grid;
    gap: var(--space-3);
    max-width: 42rem;
}

.category-delete-card {
    max-width: 48rem;
}

.category-delete-summary {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.62);
}

.delete-warning {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid rgba(139, 61, 47, 0.25);
    border-radius: var(--radius-card);
    background: rgba(139, 61, 47, 0.08);
    color: var(--ink);
}

.delete-warning-ready {
    border-color: rgba(56, 97, 80, 0.2);
    background: rgba(56, 97, 80, 0.08);
}

.delete-warning p {
    margin: 0;
    color: var(--muted);
}

.course-groups-hero,
.course-groups-panel {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.course-groups-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.course-groups-hero h1,
.course-groups-hero p,
.course-groups-panel h2,
.course-groups-panel p {
    margin: 0;
}

.course-groups-table td strong {
    display: block;
    margin-bottom: 0.2rem;
}

.course-groups-table .course-group-row {
    background: linear-gradient(90deg, rgba(232, 238, 228, 0.5), rgba(255, 255, 255, 0));
}

.course-groups-table .table-actions {
    min-width: 8.5rem;
}

.course-cancel-card {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.course-cancel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
}

.course-cancel-head h1,
.course-cancel-head p,
.course-cancel-card h2,
.course-cancel-card p {
    margin: 0;
}

.course-cancel-summary,
.course-cancel-impact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.course-cancel-impact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-cancel-summary > div,
.course-cancel-impact > div {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.62);
}

.course-cancel-summary span,
.course-cancel-impact span {
    color: var(--muted);
    font-size: 0.9rem;
}

.course-cancel-impact strong {
    font-size: 1.9rem;
    color: var(--error);
}

.course-cancel-form {
    display: grid;
    gap: var(--space-3);
}

.company-info-page,
.company-info-template-form {
    min-width: 0;
}

.company-info-template-form {
    gap: 0;
}

.company-info-workspace-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 0;
    align-items: stretch;
    overflow: visible;
}

.company-info-main {
    display: grid;
    gap: 0;
    min-width: 0;
    padding: clamp(1.25rem, 2vw, 1.65rem);
}

.company-info-form-title {
    margin: 0 0 var(--space-3);
    color: var(--ink);
    font-size: 1.25rem;
}

.company-info-main > .validation-summary-errors {
    margin-bottom: var(--space-3);
}

.company-info-template-section {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: calc(var(--space-4) * 2) 0 0;
    border: 0;
}

.company-info-template-section:first-of-type {
    padding-top: 0;
}

.company-info-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.65rem;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
}

.company-info-section-heading h2,
.company-info-aside h2 {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.company-info-section-heading small {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 500;
}

.company-info-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    min-width: 0;
}

.company-info-field-grid > label {
    gap: var(--space-1);
    min-width: 0;
}

.company-info-field-grid > label.full-width {
    grid-column: 1 / -1;
}

.company-info-field-grid--address,
.company-info-field-grid--bank {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.company-info-field-grid--address > .company-info-field-half,
.company-info-field-grid--bank > .company-info-field-half {
    grid-column: span 2;
}

.company-info-field-grid--address > .company-info-field-quarter,
.company-info-field-grid--bank > .company-info-field-quarter {
    grid-column: span 1;
}

.company-info-label-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
}

.company-info-required-marker {
    color: var(--error);
    font-weight: 900;
}

.company-info-aside {
    min-width: 0;
    padding: clamp(1.25rem, 2vw, 1.65rem);
    border-left: 1px solid var(--line);
    background: transparent;
}

.company-info-aside-content {
    position: sticky;
    top: calc(4.75rem + var(--space-3));
    display: grid;
    gap: var(--space-3);
}

.company-info-preview-box {
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: transparent;
}

.company-info-preview-box .meta-list {
    grid-template-columns: minmax(5.5rem, 0.62fr) minmax(0, 1fr);
}

.company-info-preview-box .meta-list dd {
    overflow-wrap: anywhere;
    font-weight: 750;
}

.company-info-rule-card {
    padding: var(--space-3);
    border: 1px solid rgba(122, 132, 80, 0.24);
    border-radius: var(--radius-control);
    background: rgba(232, 238, 228, 0.42);
}

.company-info-rule-card p {
    margin: var(--space-1) 0 0;
    color: var(--muted);
}

.company-info-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--space-4);
}

.company-info-form-actions .button-success {
    width: auto;
}

.admin-course-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.admin-course-detail-topbar strong,
.admin-course-detail-topbar .eyebrow {
    margin: 0;
}


.admin-course-mark {
    display: inline-grid;
    place-items: center;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 999px;
    background: #eceee3;
    color: #41511e;
    font-size: 1.45rem;
    font-weight: 800;
}

.admin-course-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.admin-course-actions-bar p {
    margin: 0;
}

.admin-course-detail-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(310px, 360px);
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-3);
    padding: var(--space-4);
}

.admin-course-detail-hero h1,
.admin-course-detail-hero p {
    margin: 0;
}

.admin-course-detail-hero h1 {
    font-size: clamp(1.45rem, 1.1rem + 1vw, 2.1rem);
}

.admin-course-detail-hero > div:nth-child(2) {
    display: grid;
    gap: var(--space-2);
}

.admin-course-detail-cover {
    overflow: hidden;
    min-height: 12rem;
    border-radius: var(--radius-control);
    background: var(--color-beige-soft);
    box-shadow: inset 0 0 0 1px rgba(90, 61, 42, 0.12);
}

.admin-course-detail-cover img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 9rem;
    object-fit: cover;
}

.admin-course-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.admin-course-actions form {
    margin: 0;
}

.admin-course-hero-payment {
    display: grid;
    gap: var(--space-2);
    align-self: stretch;
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid rgba(124, 146, 125, 0.24);
    border-radius: var(--radius-control);
    background: rgba(247, 242, 234, 0.72);
}

.admin-course-hero-payment h2 {
    margin: 0;
}

.admin-course-payment-lines {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    color: var(--ink);
}

.admin-course-payment-lines div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}

.admin-course-payment-lines div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.admin-course-payment-lines dt {
    color: var(--muted);
}

.admin-course-payment-lines dd {
    margin: 0;
    font-weight: 800;
}

.admin-course-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: var(--space-3);
}

.admin-course-section-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.275rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.admin-course-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.admin-course-summary-grid .card {
    display: grid;
    gap: 0.35rem;
}

.admin-course-summary-grid span {
    color: var(--muted);
    font-size: 0.9rem;
}

.admin-course-summary-grid strong {
    color: var(--ink);
    font-size: 1.15rem;
}

.admin-course-overview,
.admin-course-section {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.admin-course-detail-main {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: var(--space-3);
    align-items: start;
    margin-bottom: var(--space-3);
}

.admin-course-detail-side {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    margin-bottom: var(--space-3);
}

.admin-course-description-card {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.admin-course-description-card .eyebrow {
    margin-bottom: 0;
}

.admin-course-description-text {
    padding: var(--space-4);
    border: 1px solid rgba(124, 146, 125, 0.24);
    border-radius: var(--radius-card);
    background: rgba(232, 238, 228, 0.38);
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.68;
    white-space: pre-line;
}

.admin-course-nearby-section {
    margin-bottom: 0;
}

.admin-course-compact-table {
    font-size: 0.92rem;
}

.admin-course-overview h2,
.admin-course-section h2 {
    margin: 0;
}

.admin-course-overview p,
.admin-course-section p {
    margin: 0;
}

.admin-course-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: var(--space-3);
    align-items: start;
    margin-bottom: var(--space-3);
}

.admin-course-two-column .admin-course-section {
    margin-bottom: 0;
}

.admin-course-overview-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
}

.admin-course-documents-section {
    width: 100%;
}

.admin-course-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
    gap: var(--space-3);
    align-items: start;
    margin-bottom: var(--space-3);
}

.admin-course-bottom-stack {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.admin-course-bottom-grid > *,
.admin-course-bottom-stack > *,
.admin-course-detail-side > *,
.admin-course-detail-main > * {
    min-width: 0;
}

.admin-course-bottom-grid .table-wrap > .admin-table {
    min-width: 100%;
}

.admin-course-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.admin-course-payment-grid > div {
    display: grid;
    gap: 0.35rem;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(247, 242, 234, 0.62);
}

.admin-course-payment-grid span {
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.admin-course-payment-grid strong {
    color: var(--ink);
    font-size: 1.2rem;
}

.document-hover-preview {
    position: fixed;
    z-index: 80;
    display: grid;
    gap: 0.5rem;
    width: min(22rem, calc(100vw - 2rem));
    min-height: 8rem;
    padding: 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: var(--shadow-panel);
    pointer-events: none;
}

.document-hover-preview[hidden] {
    display: none;
}

.document-hover-preview iframe {
    width: 100%;
    height: 15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
}

.table-filter-row th {
    padding-top: 0.5rem;
}

.table-filter-inline {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.table-filter-inline input,
.table-filter-inline select {
    width: min(100%, 24rem);
}

.admin-course-section td.table-actions > form {
    display: inline-flex;
    gap: 0;
    margin: 0 0.5rem 0 0;
}

.admin-course-section td.table-actions > form:last-child {
    margin-right: 0;
}

.admin-course-table-filter {
    max-width: 24rem;
}

.admin-course-table-filter label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.admin-course-addon-editor {
    align-content: start;
}

.admin-course-addon-editor summary {
    width: max-content;
    cursor: pointer;
    list-style: none;
}

.admin-course-addon-editor summary::-webkit-details-marker {
    display: none;
}

.admin-course-addon-editor form {
    margin-top: var(--space-3);
}

.admin-course-section .admin-table td strong,
.admin-course-section .admin-table td span {
    display: block;
}

.admin-course-edit-shell {
    display: grid;
    gap: var(--space-5);
    width: min(920px, 100%);
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.admin-course-edit-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: start;
}

.admin-course-edit-head h1,
.admin-course-edit-head h2,
.admin-course-edit-head p {
    margin: 0;
}

.admin-course-edit-head > div:first-child {
    display: grid;
    gap: var(--space-2);
}

.admin-course-edit-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    font-size: 2.35rem;
    font-weight: 350;
    line-height: 1;
    text-decoration: none;
}

.admin-course-edit-close:hover,
.admin-course-edit-close:focus-visible {
    background: rgba(162, 84, 42, 0.08);
    box-shadow: var(--focus-ring);
}

.admin-course-edit-form {
    display: grid;
    gap: var(--space-4);
}

.has-course-edit-modal {
    overflow: hidden;
}

.admin-course-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vh, 1.75rem) clamp(0.75rem, 2vw, 1.5rem);
    overflow: hidden;
}

.admin-course-edit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 31, 24, 0.42);
    backdrop-filter: blur(4px);
}

.admin-course-edit-modal-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(920px, 100%);
    max-width: calc(100vw - clamp(1.5rem, 4vw, 3rem));
    max-height: calc(100vh - clamp(2rem, 6vh, 3.5rem));
    overflow: hidden;
    outline: none;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.admin-course-edit-modal-dialog .admin-course-edit-head {
    margin-bottom: var(--space-4);
}

.admin-course-edit-form-modal {
    min-height: 0;
    overflow: hidden;
}

.admin-course-edit-form-modal .admin-course-edit-grid {
    box-sizing: border-box;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0;
}

.admin-course-edit-form-modal .admin-course-edit-submit {
    position: sticky;
    bottom: 0;
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    background: var(--panel);
}

.admin-course-edit-validation {
    margin: 0;
}

.admin-course-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.admin-course-edit-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
    min-width: 0;
    padding: 0 0 var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--line);
}

.admin-course-edit-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.admin-course-edit-section legend {
    grid-column: 1 / -1;
    padding: 0 0 0.15rem;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 800;
}

.admin-course-cover-field {
    display: grid;
    gap: 0.55rem;
}

.admin-course-cover-field img {
    width: min(100%, 22rem);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(232, 238, 228, 0.55);
}

.admin-course-cover-field span {
    color: var(--muted);
    font-size: 0.9rem;
}

.admin-course-edit-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 3.25rem;
    padding: 0.75rem 0;
}

.admin-course-address-suggestions {
    display: grid;
    gap: 0.65rem;
}

.admin-course-address-suggestions > span {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.admin-course-address-suggestions > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-course-address-suggestions button {
    width: auto;
    min-height: 1.8rem;
    padding: 0.225rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font-weight: 700;
}

.admin-course-schedule-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface, #fff);
}

.admin-course-schedule-preview span {
    display: inline-flex;
    gap: 0.5rem;
    align-items: baseline;
}

.pac-container {
    z-index: 10000 !important;
}

.admin-course-edit-submit {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

.admin-course-edit-submit > div:first-child {
    display: grid;
    gap: 0.25rem;
}

.admin-course-edit-submit span {
    color: var(--muted);
}

.admin-course-edit-submit .form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}

.admin-course-edit-submit .button-primary {
    width: 100%;
    min-height: 2.65rem;
}

.admin-list-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-3);
    padding: clamp(1.1rem, 2vw, 1.45rem);
}

.admin-list-hero-main {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    min-width: 0;
}

.admin-list-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    border: 1px solid rgba(124, 146, 125, 0.28);
    border-radius: 16px;
    background: rgba(255, 253, 248, 0.72);
    color: var(--success);
    font-size: 1.35rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.admin-list-icon[data-ui-icon] {
    gap: 0;
    font-size: 1.75rem;
}

.admin-list-icon[data-ui-icon]::before {
    width: 1.75rem;
    height: 1.75rem;
}

.admin-header-title,
.section-head h1[data-ui-icon],
.section-head h2[data-ui-icon],
.invoice-hero-copy h1[data-ui-icon],
.course-detail-hero h1[data-ui-icon],
.course-detail-hero-copy h1[data-ui-icon],
.completion-hero h1[data-ui-icon],
.course-list-hero h1[data-ui-icon] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.course-detail-hero-copy h1[data-ui-icon] {
    display: flex;
    align-items: flex-start;
}

.admin-header-title::before,
.section-head h1[data-ui-icon]::before,
.section-head h2[data-ui-icon]::before,
.invoice-hero-copy h1[data-ui-icon]::before,
.course-detail-hero h1[data-ui-icon]::before,
.course-detail-hero-copy h1[data-ui-icon]::before,
.completion-hero h1[data-ui-icon]::before,
.course-list-hero h1[data-ui-icon]::before {
    width: 1.05em;
    height: 1.05em;
}

.course-detail-hero-copy h1[data-ui-icon]::before {
    flex: 0 0 auto;
    margin-top: 0.12em;
}

.admin-list-hero h1,
.admin-list-hero h2,
.admin-list-hero p,
.admin-list-hero .eyebrow {
    margin: 0;
}

.admin-list-filter-card {
    margin-bottom: var(--space-3);
}

.admin-list-filter-toolbar {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    align-items: end;
}

.admin-list-filter-toolbar .form-actions {
    align-items: end;
    flex-wrap: wrap;
}

/* Shared server-side list: one card, stable filters, sortable columns and paging. */
table.mobile-table .mobile-table-label,
table.mobile-table .mobile-table-title-content,
table.mobile-table .mobile-table-title-extra,
.mobile-table-filter-label,
button.mobile-table-filters-toggle[data-ui-icon],
.mobile-static-pagination,
.mobile-table-more { display: none; }

@media (min-width: 721px) {
    table.mobile-table .table-actions-column {
        position: sticky;
        right: 0;
        z-index: 2;
        background: var(--panel);
        box-shadow: -1px 0 0 var(--line), -6px 0 10px rgba(31, 37, 33, .06);
    }
    table.mobile-table > thead .table-actions-column {
        z-index: 3;
        background: var(--color-sage-soft);
    }
}

@media (max-width: 720px) {
    .mobile-table-wrap { overflow: visible; min-width: 0; }
    table.mobile-table { display: block; width: 100%; min-width: 0 !important; }
    table.mobile-table > tbody,
    table.mobile-table > tfoot { display: grid; gap: .75rem; }
    table.mobile-table > thead { display: none; }
    table.mobile-table.mobile-table-filters-open > thead { display: block; margin: .75rem 0; }
    table.mobile-table > thead > tr:first-child { display: flex; gap: .5rem; flex-wrap: wrap; }
    table.mobile-table > thead > tr:first-child > th { display: block; border: 0; padding: .25rem; }
    table.mobile-table > thead > .table-filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    table.mobile-table > thead > .table-filter-row > th { display: block; min-width: 0; padding: .25rem; border: 0; }
    table.mobile-table > thead .mobile-table-filter-wide { grid-column: 1 / -1; }
    table.mobile-table > thead input:not([type='checkbox']):not([type='radio']),
    table.mobile-table > thead select,
    table.mobile-table > thead summary { min-width: 0; max-width: 100%; }
    .mobile-table-filter-label { display: block; margin-bottom: .25rem; color: var(--muted); font-size: .8rem; }
    table.mobile-table > tbody > .mobile-table-row,
    table.mobile-table > tfoot > .mobile-table-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: .4rem .5rem;
        min-width: 0;
        padding: .75rem;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
    }
    table.mobile-table .mobile-table-row > td,
    table.mobile-table .mobile-table-row > th {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(5rem, 38%) minmax(0, 1fr);
        align-items: baseline;
        gap: .5rem;
        min-width: 0;
        width: auto;
        padding: 0;
        border: 0;
        white-space: normal !important;
        text-align: left;
    }
    table.mobile-table .mobile-table-label { display: block; font-weight: 600; color: var(--muted); font-size: .82rem; }
    table.mobile-table .mobile-table-value { min-width: 0; overflow-wrap: anywhere; color: inherit; font-size: inherit; margin: 0; }
    table.mobile-table .mobile-table-value .badge { display: inline-flex; width: fit-content; max-width: 100%; }
    table.mobile-table .mobile-table-row > .mobile-table-title { display: block; grid-column: 1; grid-row: 1; padding-bottom: .35rem; }
    table.mobile-table .mobile-table-row.mobile-table-no-actions > .mobile-table-title { grid-column: 1 / -1; }
    .mobile-table-title > .mobile-table-value { display: none; }
    table.mobile-table .mobile-table-title-content { display: block; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
    table.mobile-table .mobile-table-title-extra { display: block; font-size: .82rem; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
    table.mobile-table .mobile-table-row > .mobile-table-actions { display: flex; grid-column: 2; grid-row: 1; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: 7rem; gap: .3rem; }
    table.mobile-table .mobile-table-row.mobile-table-no-actions > .mobile-table-actions { display: none; }
    table.mobile-table .mobile-table-wide > td { display: block; }
    table.mobile-table .mobile-table-row[data-mobile-hidden] { display: none; }
    button.mobile-table-filters-toggle[data-ui-icon] { display: inline-flex; width: auto; margin-bottom: .5rem; }
    .mobile-table-more:not([hidden]) { display: inline-flex; grid-column: 1 / -1; justify-self: center; width: auto; }
    .mobile-static-pagination { display: grid; gap: .5rem; justify-items: center; margin-top: .75rem; }
    .mobile-static-pagination > nav { display: flex; gap: .25rem; }
    .mobile-static-pagination > button { width: auto; }
}

[data-ui-icon="search"] { --ui-icon-url: url("/lib/lucide/icons/search.svg"); }
[data-ui-icon="arrow-up"] { --ui-icon-url: url("/lib/lucide/icons/arrow-up.svg"); }
[data-ui-icon="arrow-down"] { --ui-icon-url: url("/lib/lucide/icons/arrow-down.svg"); }
[data-ui-icon="arrow-up-down"] { --ui-icon-url: url("/lib/lucide/icons/arrow-up-down.svg"); }
[data-ui-icon="chevron-left"] { --ui-icon-url: url("/lib/lucide/icons/chevron-left.svg"); }
[data-ui-icon="chevron-right"] { --ui-icon-url: url("/lib/lucide/icons/chevron-right.svg"); }
[data-ui-icon="chevrons-left"] { --ui-icon-url: url("/lib/lucide/icons/chevrons-left.svg"); }
[data-ui-icon="chevrons-right"] { --ui-icon-url: url("/lib/lucide/icons/chevrons-right.svg"); }

.admin-server-table {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
}
.admin-table-toolbar,
.admin-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.admin-table-pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    container: table-pagination / inline-size;
}
.admin-table-pagination > nav {
    grid-column: 2;
    justify-content: center;
}
.admin-table-pagination > .admin-table-page-size {
    grid-column: 3;
    justify-self: end;
    justify-content: flex-end;
}
@container table-pagination (max-width: 48rem) {
    .admin-table-pagination > nav {
        grid-column: 1 / -1;
    }
    .admin-table-pagination > .admin-table-page-size {
        grid-column: 1 / -1;
    }
}
.admin-table-toolbar > form {
    width: min(100%, 24rem);
    margin: 0;
}
.admin-table-search {
    position: relative;
}
.admin-table-search > .ui-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.admin-table-search > input {
    width: 100%;
    min-height: 2.35rem;
    padding: .45rem .65rem .45rem 2.25rem;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
}
.admin-table-toolbar > .button-success {
    margin-left: auto;
}
.admin-table-toolbar > button,
.admin-table-toolbar-actions > button {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
}
.registrations-table tbody td:not([colspan]),
.students-table tbody td:not([colspan]) {
    white-space: nowrap;
}
.admin-table-toolbar-actions,
.admin-table-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
    min-width: 0;
}
.admin-table-preset-filter {
    display: inline-flex;
    gap: 0;
    cursor: pointer;
}
.admin-table-preset-filter-button {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    background: var(--color-sage-soft);
    border-color: rgba(56, 97, 80, 0.38);
    color: var(--color-forest-dark);
    box-shadow: 0 8px 18px rgba(56, 97, 80, 0.1);
}
.admin-table-preset-filter:hover .admin-table-preset-filter-button {
    background: #dce7d8;
    border-color: var(--color-sage);
}
.admin-table-preset-filter > input:checked + .admin-table-preset-filter-button {
    background: #d3e1ce;
    border-color: var(--color-forest);
    box-shadow: inset 0 0 0 1px var(--color-forest), 0 8px 18px rgba(56, 97, 80, 0.14);
}
.admin-table-preset-filter > input:focus-visible + .admin-table-preset-filter-button {
    outline: 2px solid var(--color-forest);
    outline-offset: 3px;
}
.admin-table-summary {
    color: var(--muted);
    font-size: .9rem;
}
.admin-table-months {
    max-width: 100%;
}
.admin-table-months > .table-filter-dropdown {
    width: min(100%, 20rem);
    min-width: min(100%, 14rem);
}
.admin-table-months > .table-filter-dropdown > summary {
    max-width: 100%;
}
.table-filter-dropdown > summary[aria-disabled="true"] {
    color: var(--muted);
    cursor: default;
}
.admin-server-table .table-wrap { min-width: 0; }
.admin-server-table[aria-busy="true"] [data-grid-rows] { opacity: .6; }
.admin-server-table .admin-table { width: 100%; }
.admin-server-table .admin-courses-table { min-width: 65rem; }
.admin-table-sort {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: inherit;
    font: inherit;
    text-decoration: none;
}
.admin-table-sort > .ui-icon {
    font-size: .95rem;
    opacity: .6;
}
th[aria-sort]:not([aria-sort="none"]) .admin-table-sort > .ui-icon {
    color: var(--color-forest);
    opacity: 1;
}
.admin-table-sort:hover {
    color: var(--color-forest);
}
.admin-table-sort:focus-visible,
.admin-table-reset:focus-visible,
.admin-table-page:focus-visible {
    outline: 2px solid var(--color-forest);
    outline-offset: 3px;
    border-radius: var(--radius-control);
}
.admin-table-reset {
    border-radius: var(--radius-control);
}
.admin-server-table .table-filter-row th { min-width: 6.5rem; }
.admin-server-table .table-filter-row th:last-child { min-width: 0; }
.admin-server-table .table-filter-row .table-filter-range { min-width: 13rem; }
.admin-server-table .table-filter-dropdown > summary { max-width: 15rem; }
.table-filter-dropdown > summary > span {
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.admin-table-pagination nav,
.admin-table-page-size {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
}
.admin-table-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: .25rem .45rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}
.admin-table-page:hover:not([aria-disabled]),
.admin-table-page[aria-current="page"] {
    background: var(--color-sage-soft);
    border-color: var(--color-sage);
    color: var(--color-forest);
}
.admin-table-page[aria-disabled="true"] {
    opacity: .35;
    cursor: default;
}
.admin-table-page-size { gap: var(--space-2); }
.admin-table-page-size > [data-grid-count] { font-size: .86rem; color: var(--muted); }
.admin-table-page-size > .searchable-combobox,
.admin-table-page-size > select { width: 4.75rem; }
.admin-table-page-size {
    --choice-min-height: 2.35rem;
    --choice-padding-block: .45rem;
    --choice-padding-start: .65rem;
    --choice-font-size: .86rem;
    --choice-font-weight: 700;
    --choice-line-height: 1.25;
}
.admin-table-feedback { color: var(--muted); font-size: .86rem; }
.admin-table-feedback.is-error { color: var(--danger); }
@media (max-width: 600px) {
    .admin-table-toolbar > form { flex: 1 1 100%; }
    .admin-table-pagination nav { gap: .15rem; }
}

.admin-courses-filter-card,
.admin-courses-list-card {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.admin-courses-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    margin-bottom: var(--space-3);
}

.admin-courses-hero h1,
.admin-courses-hero p,
.admin-courses-list-card h2,
.admin-courses-list-card p {
    margin: 0;
}

.admin-courses-filter {
grid-template-columns: minmax(13rem, 1.3fr) minmax(16rem, 1.4fr) auto auto;
    align-items: end;
}

.admin-courses-filter .form-actions {
    align-items: end;
    flex-wrap: wrap;
}

.admin-courses-filter .button-success {
    min-height: 2.15rem;
}

.admin-courses-table td strong,
.admin-courses-table td span {
    display: block;
}

.admin-courses-table td > span:not(.badge):not(.admin-entity-cell),
.admin-courses-table .admin-entity-cell > span {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.admin-courses-table tbody td:not(.table-actions) a.course-table-link {
    color: var(--color-forest);
    font: inherit;
    font-weight: 800;
}

.admin-courses-table tbody td:not(.table-actions) a.course-table-link:hover,
.admin-courses-table tbody td:not(.table-actions) a.course-table-link:focus-visible {
    color: var(--color-forest-dark);
}

.admin-courses-table .course-table-lecturer {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-courses-table .course-table-lecturer .user-color {
    flex: 0 0 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0;
}

.course-status-active {
    color: var(--success);
    background: rgba(56, 97, 80, 0.1);
}

.course-status-ended {
    color: var(--ink-muted);
    background: rgba(62, 92, 118, 0.12);
}

.course-status-cancelled {
    color: var(--error);
    background: rgba(139, 61, 47, 0.1);
}

.registrations-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.registrations-hero h1,
.registrations-hero p {
    margin: 0;
}

.registrations-list-card {
    display: grid;
    gap: var(--space-3);
}

.registrations-table td strong,
.registrations-table td span {
    display: block;
}

.registrations-table td > span:not(.badge) {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.reservation-payment-paid {
    color: var(--success);
    background: rgba(56, 97, 80, 0.1);
}

.reservation-payment-open,
.reservation-new {
    color: var(--warning);
    background: rgba(154, 104, 29, 0.12);
}

.reservation-summary h2,
.reservation-summary p,
.reservation-detail-panel h2,
.reservation-detail-panel p,
.reservation-invoice-card h2 {
    margin: 0;
}

.reservation-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(18rem, auto);
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-3);
    padding: clamp(1.25rem, 2.4vw, 2rem);
}

.reservation-student-mark {
    display: inline-grid;
    place-items: center;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 999px;
    background: #eceee3;
    color: #41511e;
    font-size: 1.5rem;
    font-weight: 850;
}

.reservation-summary-main {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.reservation-summary-main h2 {
    color: var(--ink);
    font-size: clamp(1.55rem, 1.1rem + 1vw, 2.05rem);
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: currentColor;
}

.reservation-summary-side {
    display: grid;
    justify-items: end;
    gap: var(--space-3);
    min-width: 0;
}

.hero-money {
    display: grid;
    gap: 0.2rem;
    text-align: right;
}

.hero-money strong {
    color: var(--ink);
    font-size: 1.65rem;
}

.hero-money span {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.reservation-hero-actions {
    justify-content: flex-end;
}

.reservation-hero-actions form {
    display: inline-flex;
}

.reservation-row {
    display: grid;
    gap: var(--space-3);
    align-items: start;
    margin-bottom: var(--space-3);
}

.reservation-row.three {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.9fr) minmax(20rem, 0.9fr);
}

.reservation-row.two {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
}

.reservation-detail-panel,
.reservation-invoice-card {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.reservation-metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(247, 242, 234, 0.62);
}

.reservation-metric {
    display: grid;
    gap: 0.25rem;
    padding: var(--space-3);
    border-right: 1px solid var(--line);
}

.reservation-metric:last-child {
    border-right: 0;
}

.reservation-metric span {
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.reservation-metric strong {
    color: var(--ink);
    font-size: 1.12rem;
}

.reservation-timeline {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.reservation-timeline li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
}

.timeline-icon {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgba(232, 238, 228, 0.9);
    color: var(--color-forest);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1;
}

.reservation-timeline li > div > strong,
.reservation-timeline li > div > span,
.file-row strong,
.file-row span,
.addon-row strong,
.addon-row span {
    display: block;
}

.reservation-timeline li > div > span,
.file-row span,
.addon-row span {
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.file-row,
.addon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line);
}

.file-row:first-child,
.addon-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.file-row:last-child,
.addon-row:last-child {
    padding-bottom: 0;
}

.reservation-payment-card {
    display: grid;
    gap: var(--space-3);
    align-items: start;
}

.reservation-qr-panel {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    justify-self: start;
    width: min(100%, 16rem);
    min-width: 7rem;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 253, 249, 0.72);
    color: var(--muted);
    text-align: center;
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.reservation-qr-panel img,
.reservation-qr-unavailable {
    width: 5.8rem;
    height: 5.8rem;
}

.reservation-qr-panel img {
    display: block;
    border: 1px solid rgba(56, 97, 80, 0.16);
    border-radius: 0.5rem;
    background: #fff;
}

.reservation-qr-unavailable {
    display: grid;
    place-items: center;
    border: 1px dashed rgba(56, 97, 80, 0.26);
    border-radius: 0.5rem;
    background: rgba(232, 238, 228, 0.38);
    color: var(--color-forest);
    font-weight: 900;
}

.reservation-lessons-mobile-filters {
    display: none;
}

.reservation-side-stack,
.reservation-addon-list,
.reservation-communication-list {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.registration-detail-template {
    display: grid;
    gap: 1rem;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.registration-detail-template > * {
    max-width: 100%;
    min-width: 0;
}

.registration-detail-template .table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.registration-detail-template .reservation-summary {
    grid-template-columns: auto minmax(0, 1fr) minmax(18rem, auto);
    gap: 1.15rem;
    margin-bottom: 0;
    padding: 1.35rem;
    border-radius: 14px;
    background: rgba(255, 253, 248, 0.96);
    box-shadow: 0 18px 46px rgba(70, 54, 34, 0.13);
}

.registration-detail-template .reservation-student-mark {
    width: 4.6rem;
    height: 4.6rem;
    background: #edf0e5;
    color: #40551f;
}

.registration-detail-template .reservation-summary-main {
    gap: 0.5rem;
}

.registration-detail-template .reservation-summary-main h2 {
    font-size: 1.55rem;
    line-height: 1.12;
}

.registration-detail-template .badge-row {
    gap: 0.45rem;
}

.registration-detail-template .reservation-summary-side {
    gap: 0.85rem;
}

.registration-detail-template .hero-money strong {
    color: var(--color-forest);
    font-size: 1.55rem;
}

.registration-detail-template .reservation-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    max-width: 35rem;
}

.registration-detail-template .reservation-hero-actions a,
.registration-detail-template .reservation-hero-actions button {
    min-height: 1.77rem;
    padding: 0.34rem 0.9rem;
    border-radius: 10px;
    font-size: 0.92rem;
}

.registration-detail-template .reservation-hero-actions form {
    margin: 0;
}

.registration-detail-template .button-success {
    color: #fff;
    box-shadow: 0 12px 26px rgba(56, 97, 80, 0.2);
}

.registration-detail-template .button-danger {
    box-shadow: 0 12px 26px rgba(139, 61, 47, 0.18);
}

.registration-detail-template .button-secondary {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(70, 54, 34, 0.08);
}

.registration-detail-template .reservation-row {
    gap: 1rem;
    margin-bottom: 0;
}

.registration-detail-template .reservation-row.three {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr) minmax(19rem, 0.9fr);
}

.registration-detail-template .reservation-row.two {
    grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
}

.registration-detail-template .reservation-detail-panel {
    gap: 0.95rem;
    padding: 1.15rem;
    border-radius: 14px;
    background: rgba(255, 253, 248, 0.94);
    box-shadow: 0 14px 36px rgba(70, 54, 34, 0.09);
}

.registration-detail-template .reservation-detail-panel h2 {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.2;
}

.registration-detail-template .reservation-detail-panel > p,
.registration-detail-template .section-head p {
    color: var(--muted);
    font-size: 0.9rem;
}

.registration-detail-template .section-head {
    gap: 0.85rem;
    align-items: start;
}

.registration-detail-template .reservation-metric-row {
    border-radius: 12px;
}

.registration-detail-template .reservation-metric {
    padding: 0.8rem;
}

.registration-detail-template .file-row,
.registration-detail-template .addon-row {
    padding: 0.8rem 0;
}

.registration-detail-template .reservation-payment-card {
    grid-template-columns: minmax(0, 1fr) 7.25rem;
    gap: 1rem;
}

.registration-detail-template .reservation-qr-panel {
    width: 7.25rem;
    min-width: 0;
    padding: 0.7rem;
    border-radius: 12px;
}

.registration-detail-template .reservation-qr-panel img,
.registration-detail-template .reservation-qr-unavailable {
    width: 5.5rem;
    height: 5.5rem;
}

.registration-detail-template .reservation-lessons-card .table-wrap {
    overflow-x: auto;
}

.registration-detail-template .reservation-lessons-table {
    min-width: 0;
}

.registration-detail-template .reservation-lessons-table th,
.registration-detail-template .reservation-lessons-table td {
    vertical-align: top;
}

.invoices-hero,
.invoice-detail-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
}

.invoices-hero h1,
.invoices-hero p,
.invoice-detail-hero h1,
.invoice-detail-hero p,
.invoice-actions-card h2,
.invoice-actions-card p {
    margin: 0;
}

.invoice-summary,
.invoice-total-panel {
    display: grid;
    gap: 0.2rem;
    min-width: 13rem;
    padding: 1rem;
    border: 1px solid rgba(56, 97, 80, 0.18);
    border-radius: var(--radius-card);
    background: rgba(232, 238, 228, 0.48);
    text-align: right;
}

.invoice-summary span,
.invoice-total-panel span,
.invoice-summary small,
.invoice-total-panel small {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.invoice-summary strong,
.invoice-total-panel strong {
    color: var(--color-forest);
    font-size: 1.55rem;
}

.invoice-list-card,
.invoice-payment-card,
.invoice-meta-card,
.invoice-context-card,
.invoice-file-card,
.invoice-items-card,
.invoice-qr-card,
.invoice-summary-card,
.invoice-state-card {
    display: grid;
    gap: var(--space-3);
}

.invoice-table-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}

.invoice-table-filters label {
    min-width: min(100%, 13rem);
}

.invoice-payment-card {
    margin-bottom: var(--space-3);
}

.invoice-payment-card,
.invoice-meta-card,
.invoice-context-card,
.invoice-file-card,
.invoice-items-card,
.invoice-summary-card {
    padding: 1.2rem;
}

.invoice-mark {
    display: inline-grid;
    width: 4.75rem;
    height: 4.75rem;
    place-items: center;
    border-radius: 999px;
    background: rgba(232, 238, 228, 0.78);
    color: var(--color-forest);
    font-size: 1.5rem;
    font-weight: 800;
}

.invoice-hero-copy {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.invoice-hero-money {
    display: grid;
    gap: 0.3rem;
    justify-items: end;
    min-width: 13rem;
}

.invoice-hero-money span {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.invoice-hero-money strong {
    color: var(--color-forest);
    font-size: 1.55rem;
}

.invoice-payment-action {
    display: flex;
    justify-content: flex-start;
}

.invoice-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.invoice-detail-top-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.95fr) minmax(18rem, 0.95fr) minmax(16rem, 0.72fr);
    gap: var(--space-4);
    align-items: start;
    min-width: 0;
}

.invoice-detail-bottom-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
    gap: var(--space-4);
    align-items: start;
    min-width: 0;
}

.invoice-detail-top-grid > .card,
.invoice-detail-bottom-grid > .card {
    width: 100%;
    min-width: 0;
}

.invoice-detail-layout .meta-list {
    grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1fr);
}

.invoice-detail-layout .meta-list dt {
    color: var(--ink);
    font-weight: 800;
}

.invoice-detail-layout .meta-list dd {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--muted);
    font-weight: 400;
}

.invoice-detail-card-head {
    align-items: center;
}

.invoice-detail-card-head .invoice-icon-actions {
    flex-wrap: wrap;
}

.invoice-key-facts {
    display: grid;
    gap: var(--space-1);
    margin: 0;
}

.invoice-key-facts > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.72fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    padding: 0.65rem 0.75rem;
    border-left: 3px solid rgba(56, 97, 80, 0.42);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    background: rgba(232, 238, 228, 0.42);
}

.invoice-key-facts dt {
    color: var(--ink);
    font-weight: 800;
}

.invoice-key-facts dd {
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.invoice-secondary-facts {
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
}

.invoice-context-open {
    white-space: nowrap;
}

.invoice-file-head {
    align-items: center;
}

.invoice-icon-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
}

.invoice-icon-actions form {
    margin: 0;
}

.invoice-icon-button {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid rgba(162, 99, 53, 0.72);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--accent-dark);
    text-decoration: none;
}

.invoice-icon-button:hover,
.invoice-icon-button:focus-visible {
    border-color: var(--accent-dark);
    background: rgba(255, 248, 236, 0.9);
    color: var(--accent-dark);
}

.invoice-icon-button svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.invoice-icon-button[data-ui-icon] {
    gap: 0;
}

.invoice-icon-button[data-ui-icon]::before {
    width: 1.1rem;
    height: 1.1rem;
}

.button-primary[data-ui-icon],
.button-success[data-ui-icon],
.button-secondary[data-ui-icon],
.button-danger[data-ui-icon],
.button-small[data-ui-icon],
.button-link[data-ui-icon],
.admin-modal-submit[data-ui-icon],
.admin-action-button[data-ui-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.button-primary[data-ui-icon]::before,
.button-success[data-ui-icon]::before,
.button-secondary[data-ui-icon]::before,
.button-danger[data-ui-icon]::before,
.button-small[data-ui-icon]::before,
.button-link[data-ui-icon]::before,
.admin-modal-submit[data-ui-icon]::before,
.admin-action-button[data-ui-icon]::before {
    width: 1rem;
    height: 1rem;
}

.invoice-qr-copy {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.invoice-qr-copy span,
.invoice-qr-copy code {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.invoice-metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(56, 97, 80, 0.18);
    border-radius: var(--radius-card);
}

.invoice-metric {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.9rem;
    background: rgba(232, 238, 228, 0.42);
    border-right: 1px solid rgba(56, 97, 80, 0.18);
}

.invoice-metric:last-child {
    border-right: 0;
}

.invoice-metric span {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.invoice-metric strong {
    color: var(--color-forest);
    overflow-wrap: anywhere;
}

.invoice-summary-body {
    display: grid;
    grid-template-columns: minmax(10rem, 0.9fr) minmax(10rem, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.invoice-summary-body .meta-list {
    grid-template-columns: minmax(5.5rem, 0.75fr) minmax(4rem, 1fr);
    column-gap: 0.5rem;
}

.invoice-qr-url {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(122, 132, 80, 0.2);
    border-radius: var(--radius-card);
    background: rgba(232, 238, 228, 0.38);
    color: var(--muted);
    font-size: var(--font-size-meta);
    overflow-wrap: anywhere;
}

.invoice-qr-url strong {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--ink);
}

.invoice-qr-code {
    display: grid;
    justify-items: start;
    gap: 0.55rem;
    min-width: 0;
}

.invoice-qr-image {
    width: 8.5rem;
    height: 8.5rem;
    max-width: 100%;
    border: 1px solid rgba(122, 132, 80, 0.24);
    border-radius: var(--radius-control);
    background: #fff;
    object-fit: contain;
}

.invoice-qr-code-text {
    max-width: 100%;
    color: var(--color-forest);
    font-weight: 700;
    overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
    .invoice-detail-top-grid,
    .invoice-detail-bottom-grid {
        grid-template-columns: 1fr;
    }

    .invoice-detail-layout .meta-list {
        grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1fr);
    }

    .invoice-summary-body {
        grid-template-columns: minmax(10rem, 0.9fr) minmax(10rem, 1fr);
    }
}

@media (max-width: 1080px) and (min-width: 901px) {
    .invoice-detail-layout .meta-list,
    .invoice-summary-body {
        grid-template-columns: 1fr;
    }
}

.invoice-table td,
.invoice-items-table td {
    vertical-align: top;
}

.numeric {
    text-align: right;
    white-space: nowrap;
}

.invoice-status {
    border-color: rgba(83, 103, 89, 0.16);
    background: rgba(232, 238, 228, 0.46);
    color: var(--color-forest);
}

.invoice-status-overdue,
.invoice-status-cancelled,
.invoice-status-refundrequired,
.invoice-status-refundedcancelled {
    border-color: rgba(139, 61, 47, 0.22);
    background: rgba(139, 61, 47, 0.1);
    color: var(--error);
}

.invoice-status-paid {
    border-color: rgba(56, 97, 80, 0.24);
    background: rgba(56, 97, 80, 0.12);
    color: var(--success);
}

.invoice-detail-badges,
.invoice-file-state {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.invoice-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.invoice-file-state {
    flex-direction: column;
    padding: 1rem;
    border: 1px solid rgba(56, 97, 80, 0.2);
    border-radius: var(--radius-card);
    background: rgba(232, 238, 228, 0.42);
}

.invoice-file-state span {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.invoice-actions-card .button-secondary {
    width: fit-content;
}

.students-hero,
.student-detail-hero,
.student-edit-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: var(--space-4);
}

.students-hero h1,
.students-hero p,
.student-detail-hero h1,
.student-detail-hero p,
.student-edit-hero h1,
.student-edit-hero p,
.student-list-card h2,
.student-list-card p,
.student-email-card h2,
.student-email-card p,
.student-contact-card h2,
.student-contact-card p,
.student-history-filter-card h2,
.student-history-card h2,
.student-history-card p,
.student-email-history-card h2,
.student-email-history-card p,
.student-email-compose-card h2,
.student-email-compose-card p {
    margin: 0;
}

.student-summary {
    display: grid;
    gap: 0.2rem;
    min-width: 10rem;
    padding: 1rem;
    border: 1px solid rgba(56, 97, 80, 0.18);
    border-radius: var(--radius-card);
    background: rgba(232, 238, 228, 0.48);
    text-align: right;
}

.student-summary span,
.student-summary small {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.student-summary strong {
    color: var(--color-forest);
    font-size: 1.55rem;
}

.students-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.student-hero-actions,
.student-detail-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.student-filter-card,
.student-list-card,
.student-email-card,
.student-contact-card,
.student-history-filter-card,
.student-history-card,
.student-email-history-card,
.student-email-compose-card,
.student-edit-card {
    display: grid;
    gap: var(--space-3);
}

.student-filter {
    grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 16rem) auto;
    align-items: end;
}

.student-list-toolbar {
    align-items: end;
    gap: var(--space-3);
}

.student-status-filter {
    display: flex;
    align-items: end;
    gap: var(--space-2);
}

.student-status-filter label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.student-bulk-compose-card {
    margin-left: auto;
}

.student-bulk-compose-panel {
    width: min(46rem, calc(100vw - 3rem));
}

.student-recipient-checklist {
    max-height: 18rem;
}

.student-bulk-email-form .student-attachment-field,
.student-bulk-email-form .student-rich-text-field {
    display: grid;
    gap: 0.45rem;
}

.student-attachment-input {
    min-height: 3.4rem;
    padding: 0.85rem;
    border: 1px dashed rgba(56, 97, 80, 0.38);
    background: rgba(255, 255, 255, 0.72);
}

.rich-text-editor {
    min-width: 0;
}

.rich-text-editor .ql-toolbar,
.rich-text-editor .ql-container {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.82);
    font-family: inherit;
}

.rich-text-editor .ql-toolbar {
    border-radius: var(--radius-control) var(--radius-control) 0 0;
}

.rich-text-editor .ql-container {
    min-height: 11rem;
    border-radius: 0 0 var(--radius-control) var(--radius-control);
    font-size: 1rem;
}

.rich-text-editor .ql-editor {
    min-height: 11rem;
    max-height: 18rem;
    overflow-y: auto;
    line-height: 1.55;
}

.rich-text-source {
    min-height: 11rem;
}

.rich-text-source-bound {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.user-course-presets {
    justify-content: flex-end;
}

.user-course-presets button {
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 0.225rem 0.8rem;
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-forest);
    font-weight: 800;
    cursor: pointer;
}

.user-course-presets button.active,
.user-course-presets button:hover,
.user-course-presets button:focus-visible {
    border-color: rgba(56, 97, 80, 0.42);
    background: rgba(232, 238, 228, 0.78);
}

.user-course-presets span {
    margin-left: 0.25rem;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.user-courses-table td {
    vertical-align: top;
}

.user-courses-table td strong,
.user-courses-table td span:not(.badge) {
    display: block;
}

.user-courses-table td span:not(.badge) {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.user-course-status-upcoming {
    border-color: rgba(56, 97, 80, 0.24);
    background: rgba(232, 238, 228, 0.74);
    color: var(--color-forest);
}

.user-course-status-closed {
    border-color: rgba(83, 103, 89, 0.18);
    background: rgba(245, 240, 229, 0.8);
    color: var(--muted);
}

.user-course-status-cancelled {
    border-color: rgba(195, 123, 66, 0.28);
    background: rgba(246, 226, 204, 0.72);
    color: var(--danger);
}

.user-profile-calendar-card {
    margin-top: var(--space-3);
}

.students-table td,
.student-reservations-table td {
    vertical-align: top;
}

.students-table td strong,
.students-table td span:not(.badge),
.student-reservations-table td strong,
.student-reservations-table td span:not(.badge) {
    display: block;
}

.students-table td span:not(.badge),
.student-reservations-table td span:not(.badge),
.student-email-history span {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.student-status,
.student-payment {
    border-color: rgba(83, 103, 89, 0.16);
    background: rgba(232, 238, 228, 0.46);
    color: var(--color-forest);
}

.student-status-inactive,
.student-payment-unpaid {
    border-color: rgba(195, 123, 66, 0.26);
    background: rgba(195, 123, 66, 0.12);
    color: #8a4d22;
}

.student-status-active,
.student-payment-paid {
    border-color: rgba(56, 97, 80, 0.24);
    background: rgba(56, 97, 80, 0.12);
    color: var(--success);
}

.student-detail-grid,
.student-communication-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.student-detail-grid-contact-only {
    grid-template-columns: minmax(0, 1fr);
}

.student-communication-chat-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
}

.student-chat-card {
    align-content: start;
}

.student-chat-thread {
    display: grid;
    gap: var(--space-3);
}

.student-chat-message {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.7);
}

.student-chat-message-incoming {
    border-color: rgba(195, 123, 66, 0.28);
    background: rgba(246, 226, 204, 0.34);
}

.student-chat-message-outgoing {
    border-color: rgba(56, 97, 80, 0.2);
    background: rgba(232, 238, 228, 0.38);
}

.student-chat-message header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
}

.student-chat-message header > div,
.student-chat-meta,
.student-chat-body,
.student-chat-attachments {
    min-width: 0;
}

.student-chat-message header strong {
    display: block;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

.student-chat-message time,
.student-chat-meta {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.student-chat-meta {
    display: grid;
    grid-template-columns: repeat(3, auto minmax(0, 1fr));
    gap: 0.25rem 0.65rem;
}

.student-chat-meta dt {
    color: var(--ink);
}

.student-chat-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.student-chat-body {
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.student-chat-body p {
    margin: 0 0 0.55rem;
}

.student-chat-body p:last-child {
    margin-bottom: 0;
}

.student-chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.student-chat-attachments a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(56, 97, 80, 0.2);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-forest);
    font-weight: 800;
    text-decoration: none;
}

.student-chat-attachments span {
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.student-history-card {
    margin-bottom: var(--space-3);
}

.student-edit-form {
    display: grid;
    gap: var(--space-3);
    max-width: 58rem;
}

.student-form-section {
    display: grid;
    gap: var(--space-3);
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.62);
}

.student-form-section legend {
    padding: 0 0.35rem;
    color: var(--ink);
    font-weight: 800;
}

.student-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.student-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3rem;
    margin-top: 1.5rem;
    font-weight: 800;
}

.student-check input {
    width: auto;
}

.users-hero,
.user-profile-hero,
.user-edit-hero,
.user-skills-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: var(--space-4);
}

.users-hero h1,
.users-hero p,
.user-profile-hero h1,
.user-profile-hero p,
.user-edit-hero h1,
.user-edit-hero p,
.user-skills-hero h1,
.user-skills-hero p,
.user-list-card h2,
.user-list-card p,
.user-profile-card h2,
.user-profile-card p,
.user-actions-card h2,
.user-skills-card h2,
.user-skills-card p,
.user-finance-card h2,
.user-courses-card h2,
.user-courses-card p,
.user-lessons-card h2,
.user-lessons-card p,
.user-skill-assign-card h2,
.user-skill-assign-card p,
.user-skills-table-card h2,
.user-skills-table-card p {
    margin: 0;
}

.user-summary {
    display: grid;
    gap: 0.2rem;
    min-width: 11rem;
    padding: 1rem;
    border: 1px solid rgba(56, 97, 80, 0.18);
    border-radius: var(--radius-card);
    background: rgba(232, 238, 228, 0.48);
    text-align: right;
}

.user-summary span,
.user-summary small {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.user-summary strong {
    color: var(--color-forest);
    font-size: 1.55rem;
}

.user-hero-actions,
.user-profile-badges,
.user-profile-actions,
.user-action-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.user-list-card,
.user-profile-card,
.user-skills-card,
.user-courses-card,
.user-lessons-card,
.user-edit-card,
.user-skill-assign-card,
.user-skills-table-card {
    display: grid;
    gap: var(--space-3);
}

.user-table-toolbar {
    grid-template-columns: minmax(14rem, 1fr) auto;
    margin-bottom: var(--space-3);
}

.user-profile-actions form {
    display: inline-flex;
}

.user-profile-actions button,
.user-profile-actions a {
    min-height: 1.95rem;
}

.student-detail-overview-grid {
    grid-template-columns: minmax(18rem, 0.8fr) minmax(24rem, 1.2fr);
    align-items: start;
}

.student-detail-card-head,
.student-detail-actions {
    align-items: center;
}

.student-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
}

.student-detail-actions form {
    display: flex;
    margin: 0;
}

.student-detail-meta {
    grid-template-columns: minmax(6.5rem, 0.62fr) minmax(0, 1fr);
}

.student-detail-meta dt {
    color: var(--ink);
    font-weight: 800;
}

.student-detail-meta dd {
    min-width: 0;
    color: var(--muted);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.user-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(216, 204, 190, 0.78);
}

.user-detail-topbar h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem);
}

.user-detail-hero {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: var(--space-4);
    padding: clamp(1.25rem, 3vw, 2rem);
}

.user-detail-avatar {
    display: inline-grid;
    place-items: center;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 999px;
    background: rgba(232, 238, 228, 0.88);
    color: var(--color-forest);
    font-size: 1.45rem;
    font-weight: 900;
}

.user-detail-identity {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.user-detail-identity h2 {
    margin: 0;
    color: #130b08;
    font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.35rem);
    line-height: 1.08;
}

.user-detail-identity p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: currentColor;
}

.user-provision {
    border-color: rgba(185, 101, 53, 0.18);
    background: rgba(185, 101, 53, 0.11);
    color: var(--accent-dark);
}

.user-detail-profile-row {
    display: grid;
    grid-template-columns: minmax(18rem, 0.85fr) minmax(24rem, 1.15fr);
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-4);
}

.user-profile-tabs {
    display: grid;
    gap: 0;
    min-width: 0;
    max-width: 100%;
}

.user-profile-tab-list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-3);
    min-width: 0;
    max-width: 100%;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--line);
}

.user-profile-tab {
    flex: 0 0 auto;
    margin-bottom: -1px;
    padding: 0.55rem 0.25rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: var(--font-size-label);
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}

.user-profile-tab:hover,
.user-profile-tab:focus-visible,
.user-profile-tab[aria-current="page"],
.user-profile-tab[aria-selected="true"] {
    border-color: var(--color-forest);
    background: transparent;
    color: var(--color-forest);
}

.user-profile-tab-panel {
    min-width: 0;
    padding-top: var(--space-2);
    scroll-margin-top: 1rem;
}

@media (max-width: 720px) {
    .user-detail-profile-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-detail-profile-row > * {
        min-width: 0;
    }
}

.user-detail-panel {
    padding: clamp(1.1rem, 2.4vw, 1.55rem);
}

.user-detail-panel > h2,
.user-detail-panel .section-head h2 {
    color: var(--ink);
    letter-spacing: normal;
    text-transform: none;
}

.user-detail-skill-list {
    display: grid;
}

.user-detail-skill-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--space-3);
    align-items: center;
    padding: 0.95rem 0;
    border-top: 1px solid var(--line);
}

.user-detail-skill-row form {
    margin: 0;
}

.user-detail-skill-row:first-child {
    border-top: 0;
}

.user-detail-skill-row strong,
.user-detail-skill-row span:not(.badge):not(.user-color) {
    display: block;
}

.user-detail-skill-row span:not(.badge):not(.user-color) {
    color: var(--muted);
    font-size: 0.9rem;
}

.user-detail-calendar {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fffdf8;
}

.user-detail-calendar-head,
.user-detail-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.user-detail-calendar-head span {
    padding: 0.8rem 0.5rem;
    border-right: 1px solid var(--line);
    background: #fffaf4;
    color: var(--ink);
    text-align: center;
    font-size: 0.82rem;
    font-weight: 850;
}

.user-detail-calendar-head span:last-child,
.user-detail-calendar-day:nth-child(7n) {
    border-right: 0;
}

.user-detail-calendar-day {
    min-height: 6.4rem;
    padding: 0.55rem;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: rgba(255, 253, 249, 0.72);
}

.user-detail-calendar-day.is-outside {
    background: rgba(250, 246, 239, 0.42);
}

.user-detail-calendar-day > span {
    display: block;
    color: var(--muted);
    text-align: right;
    font-size: 0.78rem;
}

.user-detail-calendar-event {
    display: block;
    margin-top: 0.45rem;
    padding: 0.38rem 0.45rem;
    border-radius: 0.45rem;
    background: rgba(232, 238, 228, 0.88);
    color: var(--color-forest);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.25;
    text-decoration: none;
}

.user-detail-calendar-event:hover,
.user-detail-calendar-event:focus-visible {
    background: rgba(124, 146, 125, 0.2);
    color: var(--color-forest);
}

.user-detail-calendar-day small {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    font-weight: 750;
}

.user-calendar-view-tabs {
    min-width: min(20rem, 100%);
}

.user-calendar-view-tabs button {
    min-height: 1.825rem;
}

.user-earnings-card {
    display: grid;
    gap: var(--space-3);
}

.user-earnings-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.user-earnings-summary > div {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(124, 146, 125, 0.2);
    border-radius: var(--radius-control);
    background: rgba(255, 253, 249, 0.8);
}

.user-earnings-summary span {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 750;
}

.user-earnings-summary strong {
    color: var(--ink);
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

.user-earnings-aggregate-table .user-earnings-category-row td {
    background: rgba(247, 242, 234, 0.55);
    font-weight: 850;
}

.user-earnings-aggregate-table .user-earnings-course-row td:first-child {
    color: var(--muted);
}

.user-skill-add-button {
    min-width: max-content;
}

.user-skill-submit {
    min-width: 0;
    overflow-wrap: anywhere;
}

.user-earnings-pivot-toolbar {
    display: grid;
    grid-template-columns: minmax(18rem, auto) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: end;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 253, 248, 0.82);
}

.user-earnings-date-range,
.user-earnings-time-filter,
.user-earnings-time-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: end;
}

.user-earnings-time-filter {
    justify-content: flex-end;
}

.user-earnings-date-range label {
    display: grid;
    gap: 0.25rem;
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 800;
}

.user-earnings-date-range input {
    min-height: 2.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
}

.user-earnings-time-switch {
    flex-wrap: nowrap;
    padding: 0.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.72);
}

.user-earnings-time-switch label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.45rem 0.8rem;
    border: 0;
    border-radius: calc(var(--radius-control) - 0.2rem);
    background: transparent;
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
}

.user-earnings-time-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.user-earnings-time-switch label.active,
.user-earnings-time-switch label:has(input:checked) {
    background: var(--success);
    color: #fff;
}

.user-earnings-pivot-table {
    min-width: 56rem;
}

.user-earnings-pivot-table th,
.user-earnings-pivot-table td {
    white-space: nowrap;
}

.user-earnings-pivot-table tfoot th {
    border-top: 2px solid rgba(83, 103, 89, 0.2);
    background: rgba(232, 238, 228, 0.64);
    font-weight: 900;
}

.user-skill-modal-card {
    max-width: 34rem;
}

.users-table td,
.user-skills-table td {
    vertical-align: top;
}

.users-table td strong,
.users-table td span:not(.badge),
.user-course-list span {
    display: block;
}

.users-table td span:not(.badge),
.user-course-list span {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.user-role,
.user-status {
    border-color: rgba(83, 103, 89, 0.16);
    background: rgba(232, 238, 228, 0.46);
    color: var(--color-forest);
}

.user-status-active {
    border-color: rgba(56, 97, 80, 0.24);
    background: rgba(56, 97, 80, 0.12);
    color: var(--success);
}

.user-status-inactive {
    border-color: rgba(139, 61, 47, 0.22);
    background: rgba(139, 61, 47, 0.1);
    color: var(--error);
}

.user-profile-grid,
.user-activity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.user-courses-card,
.user-lessons-card-full {
    margin-bottom: var(--space-3);
}

.user-calendar-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-2);
}

.user-action-list {
    justify-content: stretch;
    flex-direction: column;
}

.user-action-list a,
.user-action-list form,
.user-action-list button {
    width: 100%;
}

.user-skill-chips {
    margin: 0;
}

.user-edit-form {
    display: grid;
    gap: var(--space-3);
    max-width: 58rem;
}

.user-form-section {
    display: grid;
    gap: var(--space-3);
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.62);
}

.user-form-section legend {
    padding: 0 0.35rem;
    color: var(--ink);
    font-weight: 800;
}

.user-form-grid,
.user-skill-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

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

.user-skill-fields {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 18rem);
    gap: var(--space-3);
    align-items: end;
}

.user-skill-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.reservation-action-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.reservation-action-groups > div {
    display: grid;
    gap: var(--space-2);
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.62);
}

.reservation-action-groups form {
    margin: 0;
}

.registrations-hero {
    margin-bottom: var(--space-3);
}

.registrations-filter-card {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.registrations-filter {
grid-template-columns: minmax(14rem, 1.4fr) minmax(16rem, 1.4fr) minmax(10rem, 0.8fr) auto auto;
    align-items: end;
}

.registrations-filter .form-actions {
    align-items: end;
    flex-wrap: wrap;
}

.quick-filter-row {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.quick-filter-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.7rem;
    padding: 0.225rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 700;
}

.has-manual-reservation-modal,
.has-registration-edit-modal,
.has-student-edit-modal,
.has-student-email-modal,
.has-payment-create-modal,
.has-payment-attach-modal,
.has-course-addon-modal,
.has-shared-bulk-email-modal,
.has-course-bulk-email-modal {
    overflow: hidden;
}

.payment-create-modal[hidden],
.manual-reservation-modal[hidden],
.registration-edit-modal[hidden],
.student-edit-modal[hidden],
.student-email-modal[hidden],
.course-addon-modal[hidden],
.shared-bulk-email-modal[hidden],
.course-bulk-email-modal[hidden] {
    display: none !important;
}

.payment-create-modal,
.manual-reservation-modal,
.registration-edit-modal,
.student-edit-modal,
.student-email-modal,
.course-addon-modal,
.shared-bulk-email-modal,
.course-bulk-email-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.payment-create-modal-backdrop,
.manual-reservation-backdrop,
.registration-edit-modal-backdrop,
.student-edit-modal-backdrop,
.student-email-modal-backdrop,
.course-addon-backdrop,
.shared-bulk-email-backdrop,
.course-bulk-email-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(36, 45, 36, 0.42);
    backdrop-filter: blur(4px);
}

.payment-create-dialog,
.manual-reservation-dialog,
.registration-edit-modal-dialog,
.student-edit-modal-dialog,
.student-email-modal-dialog,
.course-addon-dialog,
.shared-bulk-email-dialog,
.course-bulk-email-dialog {
    position: relative;
    z-index: 1;
    width: min(64rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

.registration-edit-modal-dialog {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--space-3);
}

.student-edit-modal-dialog,
.student-email-modal-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-3);
}

.student-email-modal-dialog {
    width: min(42rem, calc(100vw - 2rem));
}

.course-addon-dialog {
    width: min(42rem, calc(100vw - 2rem));
}

.payment-create-dialog .section-head,
.registration-edit-modal-dialog .section-head,
.student-edit-modal-dialog .section-head,
.student-email-modal-dialog .section-head {
    align-items: start;
}

.student-edit-form-modal,
.student-email-modal-dialog form {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.15rem;
}

.registration-edit-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.registration-edit-summary div {
    min-width: 0;
}

.registration-edit-summary dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.registration-edit-summary dd {
    margin: 0.2rem 0 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.registration-edit-form {
    display: grid;
    gap: var(--space-3);
    max-height: calc(100vh - 17rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.registration-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-3);
}

.registration-edit-options {
    display: grid;
    gap: var(--space-2);
}

.registration-edit-options h3 {
    margin: 0;
    font-size: 1rem;
}

.registration-edit-lock {
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(144, 91, 40, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(255, 244, 224, 0.82);
}

.registration-edit-submit {
    position: sticky;
    bottom: 0;
    margin-top: var(--space-1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), var(--surface) 34%);
    border-top: 1px solid var(--line);
    padding-top: var(--space-2);
}

.shared-bulk-email-dialog,
.course-bulk-email-dialog {
    display: grid;
    gap: var(--space-3);
    grid-template-rows: auto minmax(0, 1fr);
}

.shared-bulk-email-dialog .section-head,
.course-bulk-email-dialog .section-head {
    align-items: start;
}

.shared-bulk-email-dialog .shared-bulk-email-composer-embedded,
.course-bulk-email-dialog .shared-bulk-email-composer-embedded {
    border: 0;
    min-width: 0;
    width: 100%;
    padding: 0;
    box-shadow: none;
    background: transparent;
    justify-self: stretch;
}

.shared-bulk-email-dialog .communication-compose-panel,
.course-bulk-email-dialog .communication-compose-panel {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.shared-bulk-email-dialog .shared-bulk-email-form,
.course-bulk-email-dialog .shared-bulk-email-form {
    min-width: 0;
    max-height: calc(100vh - 13rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.shared-bulk-email-dialog .communication-recipient-checklist,
.course-bulk-email-dialog .communication-recipient-checklist {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    max-height: 12rem;
}

.shared-bulk-email-dialog label,
.shared-bulk-email-dialog input,
.shared-bulk-email-dialog textarea,
.shared-bulk-email-dialog .rich-text-editor,
.shared-bulk-email-dialog .ql-toolbar,
.shared-bulk-email-dialog .ql-container,
.course-bulk-email-dialog label,
.course-bulk-email-dialog input,
.course-bulk-email-dialog textarea,
.course-bulk-email-dialog .rich-text-editor,
.course-bulk-email-dialog .ql-toolbar,
.course-bulk-email-dialog .ql-container {
    max-width: 100%;
    min-width: 0;
}

.shared-bulk-email-dialog .form-actions,
.course-bulk-email-dialog .form-actions {
    position: sticky;
    bottom: 0;
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    background: linear-gradient(180deg, rgba(255, 253, 248, 0), var(--panel) 42%);
}

@media (max-width: 720px) {
    .shared-bulk-email-modal,
    .course-bulk-email-modal {
        padding: var(--space-2);
    }

    .shared-bulk-email-dialog,
    .course-bulk-email-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
    }

    .shared-bulk-email-dialog .section-head,
    .course-bulk-email-dialog .section-head {
        gap: var(--space-2);
    }

    .shared-bulk-email-dialog .shared-bulk-email-form,
    .course-bulk-email-dialog .shared-bulk-email-form {
        max-height: calc(100vh - 12rem);
    }
}

.manual-reservation-card {
    display: grid;
    gap: var(--space-3);
}

.manual-reservation-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: start;
}

.manual-reservation-validation {
    grid-column: 1 / -1;
    margin: 0;
}

.manual-reservation-group {
    display: grid;
    gap: var(--space-2);
    align-items: start;
    min-width: 0;
}

.manual-reservation-group-wide {
    grid-column: 1 / -1;
}

.manual-reservation-group > span:first-child {
    display: none;
}

.manual-reservation-group > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
    min-width: 0;
}

.manual-reservation-group p {
    grid-column: 1 / -1;
    margin: 0;
}

.manual-option-list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.manual-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.7);
}

.manual-check[hidden] {
    display: none !important;
}

.manual-check span,
.manual-check small {
    display: block;
}

.manual-check small {
    color: var(--muted);
}

.manual-price-summary {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid rgba(124, 146, 125, 0.38);
    border-radius: var(--radius-control);
    background: rgba(232, 238, 228, 0.55);
}

.manual-price-summary span {
    color: var(--muted);
    font-size: 0.9rem;
}

.manual-price-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: end;
}

.manual-reservation-finish .form-actions {
    align-items: center;
    gap: 0.65rem;
}

.manual-reservation-finish .button-success,
.manual-reservation-finish .button-secondary {
    min-height: 1.8rem;
    min-width: 10.5rem;
    padding: 0.275rem 0.8rem;
    box-shadow: var(--shadow-control);
    font-size: 0.9rem;
}

.admin-action-modal,
.admin-course-edit-modal,
.payment-create-modal,
.manual-reservation-modal,
.registration-edit-modal,
.student-edit-modal,
.student-email-modal,
.course-addon-modal,
.shared-bulk-email-modal,
.course-bulk-email-modal,
.confirmation-dialog {
    z-index: 1400;
    padding: clamp(1rem, 3vw, 2rem);
}

.admin-action-modal__backdrop,
.admin-course-edit-modal-backdrop,
.payment-create-modal-backdrop,
.manual-reservation-backdrop,
.registration-edit-modal-backdrop,
.student-edit-modal-backdrop,
.student-email-modal-backdrop,
.course-addon-backdrop,
.shared-bulk-email-backdrop,
.course-bulk-email-backdrop,
.confirmation-dialog__backdrop {
    background: rgba(38, 30, 23, 0.42);
    backdrop-filter: blur(8px);
}

.admin-action-modal__dialog,
.admin-course-edit-modal-dialog,
.payment-create-dialog,
.manual-reservation-dialog,
.registration-edit-modal-dialog,
.student-edit-modal-dialog,
.student-email-modal-dialog,
.course-addon-dialog,
.shared-bulk-email-dialog,
.course-bulk-email-dialog,
.confirmation-dialog__panel {
    position: relative;
    width: min(52rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: clamp(1.5rem, 4vw, 2.4rem);
    border: 1px solid rgba(216, 204, 190, 0.92);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 246, 239, 0.98)),
        var(--panel);
    box-shadow: 0 26px 72px rgba(70, 54, 34, 0.18);
}

.admin-action-modal__dialog,
.payment-create-dialog,
.manual-reservation-dialog,
.student-email-modal-dialog,
.course-addon-dialog,
.shared-bulk-email-dialog,
.course-bulk-email-dialog,
.confirmation-dialog__panel {
    overflow-y: auto;
    overflow-x: hidden;
}

.admin-course-edit-modal-dialog,
.registration-edit-modal-dialog,
.student-edit-modal-dialog {
    overflow: hidden;
}

.student-email-modal-dialog {
    width: min(42rem, calc(100vw - 2rem));
}

.admin-action-modal__body > .card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.admin-action-modal__body > .card + .card {
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.admin-action-modal__body .user-edit-hero,
.admin-action-modal__body .student-edit-hero,
.admin-action-modal__body .category-hero {
    padding-right: 3.25rem;
}

.admin-course-edit-head,
.payment-create-dialog .section-head,
.manual-reservation-dialog .section-head,
.registration-edit-modal-dialog .section-head,
.student-edit-modal-dialog .section-head,
.student-email-modal-dialog .section-head,
.course-addon-dialog .section-head,
.shared-bulk-email-dialog .section-head,
.course-bulk-email-dialog .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-5);
}

.admin-course-edit-head > div:first-child,
.payment-create-dialog .section-head > div:first-child,
.manual-reservation-dialog .section-head > div:first-child,
.registration-edit-modal-dialog .section-head > div:first-child,
.student-edit-modal-dialog .section-head > div:first-child,
.student-email-modal-dialog .section-head > div:first-child,
.course-addon-dialog .section-head > div:first-child,
.shared-bulk-email-dialog .section-head > div:first-child,
.course-bulk-email-dialog .section-head > div:first-child {
    padding-right: 3.25rem;
}

.admin-course-edit-head h2,
.payment-create-dialog .section-head h2,
.manual-reservation-dialog .section-head h2,
.registration-edit-modal-dialog .section-head h2,
.student-edit-modal-dialog .section-head h2,
.student-email-modal-dialog .section-head h2,
.course-addon-dialog .section-head h2,
.shared-bulk-email-dialog .section-head h2,
.course-bulk-email-dialog .section-head h2 {
    margin: 0;
    color: #261711;
    font-size: clamp(1.75rem, 1.45rem + 1vw, 2.35rem);
    line-height: 1.08;
}

.admin-course-edit-head p:last-child,
.payment-create-dialog .section-head p,
.manual-reservation-dialog .section-head p,
.registration-edit-modal-dialog .section-head p,
.student-edit-modal-dialog .section-head p,
.student-email-modal-dialog .section-head p,
.course-addon-dialog .section-head p,
.shared-bulk-email-dialog .section-head p,
.course-bulk-email-dialog .section-head p {
    margin: var(--space-2) 0 0;
    color: var(--muted);
}

.student-email-modal-dialog .section-head h2,
.shared-bulk-email-dialog .section-head h2,
.course-bulk-email-dialog .section-head h2 {
    font-size: clamp(1rem, .725rem + .5vw, 1.175rem);
    line-height: 1.3;
}
.student-email-modal-dialog .section-head,
.shared-bulk-email-dialog .section-head,
.course-bulk-email-dialog .section-head {
    margin-bottom: var(--space-2);
}
.student-email-modal-dialog .section-head p,
.shared-bulk-email-dialog .section-head p,
.course-bulk-email-dialog .section-head p {
    font-size: var(--font-size-label);
    overflow-wrap: anywhere;
}
.email-compose-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}
.email-attachments {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}
.email-attachments > button {
    width: auto;
    max-width: 100%;
    justify-self: start;
}
.email-attachment-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.email-attachment-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}
.email-attachment-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-attachment-list small {
    color: var(--muted);
    white-space: nowrap;
}
.email-attachment-list button {
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
}

.admin-modal-close,
.admin-action-modal__close,
.admin-course-edit-close {
    position: absolute;
    top: clamp(1rem, 2vw, 1.55rem);
    right: clamp(1rem, 2vw, 1.55rem);
    left: auto;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    min-width: 2.65rem;
    height: 2.65rem;
    min-height: 2.65rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #2b1a13;
    box-shadow: none;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
}

.admin-modal-close:hover,
.admin-modal-close:focus-visible,
.admin-action-modal__close:hover,
.admin-action-modal__close:focus-visible,
.admin-course-edit-close:hover,
.admin-course-edit-close:focus-visible {
    background: rgba(122, 63, 31, 0.08);
    color: var(--accent-dark);
    box-shadow: var(--focus-ring);
    transform: none;
}

.admin-course-edit-form-modal,
.payment-create-dialog form,
.registration-edit-form,
.student-edit-form-modal,
.student-email-modal-dialog form,
.course-addon-form,
.shared-bulk-email-dialog .shared-bulk-email-form,
.course-bulk-email-dialog .shared-bulk-email-form {
    gap: var(--space-4);
}

.admin-course-edit-form-modal .admin-course-edit-grid,
.payment-create-dialog form,
.registration-edit-form,
.student-edit-form-modal,
.student-email-modal-dialog form,
.course-addon-form,
.shared-bulk-email-dialog .shared-bulk-email-form,
.course-bulk-email-dialog .shared-bulk-email-form {
    scrollbar-color: rgba(124, 146, 125, 0.7) rgba(216, 204, 190, 0.35);
}

.admin-action-modal__dialog [data-admin-action-modal-cancel] {
    display: none !important;
}

.admin-action-modal__dialog label,
.admin-course-edit-modal label,
.payment-create-modal label,
.manual-reservation-modal label,
.registration-edit-modal label,
.student-edit-modal label,
.student-email-modal label,
.course-addon-modal label,
.shared-bulk-email-modal label,
.course-bulk-email-modal label,
.confirmation-dialog label {
    gap: 0.45rem;
    color: #33231b;
    font-size: 0.95rem;
    font-weight: 760;
}

.admin-action-modal__dialog input,
.admin-action-modal__dialog select,
.admin-action-modal__dialog .shared-datetime-trigger,
.admin-action-modal__dialog .table-filter-dropdown > summary,
.admin-action-modal__dialog textarea,
.admin-action-modal__dialog .searchable-combobox-input,
.admin-course-edit-modal input,
.admin-course-edit-modal select,
.admin-course-edit-modal .shared-datetime-trigger,
.admin-course-edit-modal .table-filter-dropdown > summary,
.admin-course-edit-modal textarea,
.admin-course-edit-modal .searchable-combobox-input,
.manual-reservation-modal input,
.manual-reservation-modal select,
.manual-reservation-modal .shared-datetime-trigger,
.manual-reservation-modal .table-filter-dropdown > summary,
.manual-reservation-modal textarea,
.manual-reservation-modal .searchable-combobox-input,
.registration-edit-modal input,
.registration-edit-modal select,
.registration-edit-modal .shared-datetime-trigger,
.registration-edit-modal .table-filter-dropdown > summary,
.registration-edit-modal textarea,
.registration-edit-modal .searchable-combobox-input,
.student-edit-modal input,
.student-edit-modal select,
.student-edit-modal .shared-datetime-trigger,
.student-edit-modal .table-filter-dropdown > summary,
.student-edit-modal textarea,
.student-edit-modal .searchable-combobox-input,
.student-email-modal input,
.student-email-modal select,
.student-email-modal .shared-datetime-trigger,
.student-email-modal .table-filter-dropdown > summary,
.student-email-modal textarea,
.student-email-modal .searchable-combobox-input,
.course-addon-modal input,
.course-addon-modal select,
.course-addon-modal .shared-datetime-trigger,
.course-addon-modal .table-filter-dropdown > summary,
.course-addon-modal textarea,
.course-addon-modal .searchable-combobox-input,
.shared-bulk-email-modal input,
.shared-bulk-email-modal select,
.shared-bulk-email-modal .shared-datetime-trigger,
.shared-bulk-email-modal .table-filter-dropdown > summary,
.shared-bulk-email-modal textarea,
.shared-bulk-email-modal .searchable-combobox-input,
.course-bulk-email-modal input,
.course-bulk-email-modal select,
.course-bulk-email-modal .shared-datetime-trigger,
.course-bulk-email-modal .table-filter-dropdown > summary,
.course-bulk-email-modal textarea,
.course-bulk-email-modal .searchable-combobox-input,
.confirmation-dialog input,
.confirmation-dialog select,
.confirmation-dialog .shared-datetime-trigger,
.confirmation-dialog .table-filter-dropdown > summary,
.confirmation-dialog textarea {
    --choice-padding-block: 0.92rem;
    --choice-color: #2d1c15;
    min-height: 3.25rem;
    padding: 0.92rem var(--choice-padding-end, 1rem) 0.92rem 1rem;
    border: 1px solid rgba(216, 204, 190, 0.98);
    border-radius: 11px;
    background: #fffdf8;
    color: #2d1c15;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.admin-action-modal__dialog input[type="checkbox"],
.admin-action-modal__dialog input[type="radio"],
.admin-course-edit-modal input[type="checkbox"],
.admin-course-edit-modal input[type="radio"],
.manual-reservation-modal input[type="checkbox"],
.manual-reservation-modal input[type="radio"],
.registration-edit-modal input[type="checkbox"],
.registration-edit-modal input[type="radio"],
.student-edit-modal input[type="checkbox"],
.student-edit-modal input[type="radio"],
.student-email-modal input[type="checkbox"],
.student-email-modal input[type="radio"],
.course-addon-modal input[type="checkbox"],
.course-addon-modal input[type="radio"],
.shared-bulk-email-modal input[type="checkbox"],
.shared-bulk-email-modal input[type="radio"],
.course-bulk-email-modal input[type="checkbox"],
.course-bulk-email-modal input[type="radio"],
.confirmation-dialog input[type="checkbox"],
.confirmation-dialog input[type="radio"] {
    width: auto;
    min-width: 1.1rem;
    min-height: 1.1rem;
    padding: 0;
    border-radius: 0.25rem;
    background: #fffdf8;
    box-shadow: none;
}

.admin-action-modal__dialog textarea,
.admin-course-edit-modal textarea,
.manual-reservation-modal textarea,
.registration-edit-modal textarea,
.student-edit-modal textarea,
.student-email-modal textarea,
.course-addon-modal textarea,
.shared-bulk-email-modal textarea,
.course-bulk-email-modal textarea,
.confirmation-dialog textarea {
    min-height: 7rem;
}

.admin-action-modal__dialog input:focus-visible,
.admin-action-modal__dialog select:focus-visible,
.admin-action-modal__dialog .shared-datetime-trigger:focus-visible,
.admin-action-modal__dialog .table-filter-dropdown > summary:focus-visible,
.admin-action-modal__dialog textarea:focus-visible,
.admin-action-modal__dialog .searchable-combobox-input:focus-visible,
.admin-course-edit-modal input:focus-visible,
.admin-course-edit-modal select:focus-visible,
.admin-course-edit-modal .shared-datetime-trigger:focus-visible,
.admin-course-edit-modal .table-filter-dropdown > summary:focus-visible,
.admin-course-edit-modal textarea:focus-visible,
.admin-course-edit-modal .searchable-combobox-input:focus-visible,
.manual-reservation-modal input:focus-visible,
.manual-reservation-modal select:focus-visible,
.manual-reservation-modal .shared-datetime-trigger:focus-visible,
.manual-reservation-modal .table-filter-dropdown > summary:focus-visible,
.manual-reservation-modal textarea:focus-visible,
.manual-reservation-modal .searchable-combobox-input:focus-visible,
.registration-edit-modal input:focus-visible,
.registration-edit-modal select:focus-visible,
.registration-edit-modal .shared-datetime-trigger:focus-visible,
.registration-edit-modal .table-filter-dropdown > summary:focus-visible,
.registration-edit-modal textarea:focus-visible,
.registration-edit-modal .searchable-combobox-input:focus-visible,
.student-edit-modal input:focus-visible,
.student-edit-modal select:focus-visible,
.student-edit-modal .shared-datetime-trigger:focus-visible,
.student-edit-modal .table-filter-dropdown > summary:focus-visible,
.student-edit-modal textarea:focus-visible,
.student-edit-modal .searchable-combobox-input:focus-visible,
.student-email-modal input:focus-visible,
.student-email-modal select:focus-visible,
.student-email-modal .shared-datetime-trigger:focus-visible,
.student-email-modal .table-filter-dropdown > summary:focus-visible,
.student-email-modal textarea:focus-visible,
.student-email-modal .searchable-combobox-input:focus-visible,
.course-addon-modal input:focus-visible,
.course-addon-modal select:focus-visible,
.course-addon-modal .shared-datetime-trigger:focus-visible,
.course-addon-modal .table-filter-dropdown > summary:focus-visible,
.course-addon-modal textarea:focus-visible,
.course-addon-modal .searchable-combobox-input:focus-visible,
.shared-bulk-email-modal input:focus-visible,
.shared-bulk-email-modal select:focus-visible,
.shared-bulk-email-modal .shared-datetime-trigger:focus-visible,
.shared-bulk-email-modal .table-filter-dropdown > summary:focus-visible,
.shared-bulk-email-modal textarea:focus-visible,
.shared-bulk-email-modal .searchable-combobox-input:focus-visible,
.course-bulk-email-modal input:focus-visible,
.course-bulk-email-modal select:focus-visible,
.course-bulk-email-modal .shared-datetime-trigger:focus-visible,
.course-bulk-email-modal .table-filter-dropdown > summary:focus-visible,
.course-bulk-email-modal textarea:focus-visible,
.course-bulk-email-modal .searchable-combobox-input:focus-visible,
.confirmation-dialog input:focus-visible,
.confirmation-dialog select:focus-visible,
.confirmation-dialog .shared-datetime-trigger:focus-visible,
.confirmation-dialog .table-filter-dropdown > summary:focus-visible,
.confirmation-dialog textarea:focus-visible {
    border-color: rgba(124, 146, 125, 0.88);
    background: #fffefb;
    box-shadow: 0 0 0 4px rgba(124, 146, 125, 0.18);
}

.admin-course-edit-form-modal .admin-course-edit-submit,
.registration-edit-submit {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 253, 249, 0), rgba(255, 253, 249, 0.98) 28%);
}

.admin-action-modal__dialog form .form-actions,
.admin-course-edit-modal .admin-modal-actions,
.manual-reservation-modal .admin-modal-actions,
.registration-edit-modal .admin-modal-actions,
.student-edit-modal .admin-modal-actions,
.student-email-modal .admin-modal-actions,
.course-addon-modal .admin-modal-actions,
.shared-bulk-email-modal .admin-modal-actions,
.course-bulk-email-modal .admin-modal-actions,
.confirmation-dialog .admin-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
}

.admin-course-edit-modal .admin-modal-actions .admin-modal-submit,
.manual-reservation-modal .admin-modal-actions .admin-modal-submit,
.registration-edit-modal .admin-modal-actions .admin-modal-submit,
.student-edit-modal .admin-modal-actions .admin-modal-submit,
.student-email-modal .admin-modal-actions .admin-modal-submit,
.course-addon-modal .admin-modal-actions .admin-modal-submit,
.shared-bulk-email-modal .admin-modal-actions .admin-modal-submit,
.course-bulk-email-modal .admin-modal-actions .admin-modal-submit,
.confirmation-dialog .admin-modal-actions .admin-modal-submit,
.admin-action-modal__dialog form .form-actions button[type="submit"],
.admin-action-modal__dialog form .form-actions .button-primary,
.admin-action-modal__dialog form .form-actions .button-success {
    width: auto;
    min-height: 2.15rem;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-control);
    color: #fffdf8;
    font-size: 1.02rem;
    font-weight: 850;
    box-shadow: 0 14px 28px rgba(56, 97, 80, 0.22);
}

.admin-course-edit-modal .admin-modal-actions .admin-modal-submit:hover,
.admin-course-edit-modal .admin-modal-actions .admin-modal-submit:focus-visible,
.manual-reservation-modal .admin-modal-actions .admin-modal-submit:hover,
.manual-reservation-modal .admin-modal-actions .admin-modal-submit:focus-visible,
.registration-edit-modal .admin-modal-actions .admin-modal-submit:hover,
.registration-edit-modal .admin-modal-actions .admin-modal-submit:focus-visible,
.student-edit-modal .admin-modal-actions .admin-modal-submit:hover,
.student-edit-modal .admin-modal-actions .admin-modal-submit:focus-visible,
.student-email-modal .admin-modal-actions .admin-modal-submit:hover,
.student-email-modal .admin-modal-actions .admin-modal-submit:focus-visible,
.course-addon-modal .admin-modal-actions .admin-modal-submit:hover,
.course-addon-modal .admin-modal-actions .admin-modal-submit:focus-visible,
.shared-bulk-email-modal .admin-modal-actions .admin-modal-submit:hover,
.shared-bulk-email-modal .admin-modal-actions .admin-modal-submit:focus-visible,
.course-bulk-email-modal .admin-modal-actions .admin-modal-submit:hover,
.course-bulk-email-modal .admin-modal-actions .admin-modal-submit:focus-visible,
.confirmation-dialog .admin-modal-actions .admin-modal-submit:hover,
.confirmation-dialog .admin-modal-actions .admin-modal-submit:focus-visible,
.admin-action-modal__dialog form .form-actions button[type="submit"]:hover,
.admin-action-modal__dialog form .form-actions button[type="submit"]:focus-visible {
    background:
        linear-gradient(135deg, rgba(111, 132, 80, 1), rgba(37, 66, 54, 1)),
        var(--color-forest);
    color: #fffdf8;
}


.manual-reservation-finish .button-success,
.manual-reservation-finish .button-secondary {
    min-width: 0;
    min-height: 2.45rem;
    padding: 0.375rem 1rem;
    font-size: 1rem;
}

@media (max-width: 720px) {
    .admin-list-hero,
    .registrations-hero,
    .admin-courses-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-list-hero-main {
        align-items: flex-start;
    }

    .admin-list-hero .button-primary,
    .admin-list-hero .button-success,
    .admin-list-hero .button-secondary,
    .registrations-hero .button-success,
    .admin-courses-hero .button-success {
        width: 100%;
        justify-content: center;
    }

    .admin-list-filter-toolbar,
    .admin-courses-filter,
    .registrations-filter {
        grid-template-columns: 1fr;
    }

    .admin-list-filter-toolbar > *,
    .admin-courses-filter > *,
    .registrations-filter > * {
        min-width: 0;
    }

    .admin-action-modal,
    .admin-course-edit-modal,
    .manual-reservation-modal,
    .registration-edit-modal,
    .student-edit-modal,
    .student-email-modal,
    .course-addon-modal,
    .shared-bulk-email-modal,
    .course-bulk-email-modal,
    .confirmation-dialog {
        padding: var(--space-2);
    }

    .admin-action-modal__dialog,
    .admin-course-edit-modal-dialog,
    .manual-reservation-dialog,
    .registration-edit-modal-dialog,
    .student-edit-modal-dialog,
    .student-email-modal-dialog,
    .course-addon-dialog,
    .shared-bulk-email-dialog,
    .course-bulk-email-dialog,
    .confirmation-dialog__panel {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        padding: 1.15rem;
        border-radius: 16px;
    }
}

.skills-table-card {
    margin-top: 1.5rem;
}

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

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

.empty-state,
.calendar-empty {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px dashed rgba(124, 146, 125, 0.42);
    border-radius: 18px;
    background: rgba(232, 238, 228, 0.48);
    color: var(--muted);
}

.skill-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.skill-inline-form input[type="text"] {
    width: auto;
    min-width: 10rem;
}

.skill-inline-form button {
    width: auto;
    white-space: nowrap;
}

.simple-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.simple-list li {
    display: grid;
    gap: 0.25rem;
}

.meta-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.6rem 1rem;
    margin: 0;
}

.meta-list dt {
    color: var(--muted);
}

.meta-list dd {
    margin: 0;
}

.user-color {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-right: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.color-input-shell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.color-input-shell input[type="color"] {
    width: 4.25rem;
    min-height: 3rem;
    padding: 0.3rem;
}

.color-preview-badge {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.color-code {
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

.password-field {
    position: relative;
}

.password-field input {
    min-width: 0;
    padding-right: 3.5rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    color: var(--ink);
    border: none;
    border-radius: 999px;
    transform: translateY(-50%);
    box-shadow: none;
}

.password-toggle:hover {
    background: rgba(109, 124, 111, 0.12);
    transform: translateY(-50%);
    box-shadow: none;
}

.password-toggle:focus-visible {
    outline: 2px solid rgba(109, 124, 111, 0.45);
    outline-offset: 2px;
}

.password-toggle:active {
    transform: translateY(-50%);
    box-shadow: none;
}

.password-toggle__icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.16s ease;
}

.password-toggle__icon[data-ui-icon]::before {
    width: 1.25rem;
    height: 1.25rem;
}

.password-toggle__icon--hide {
    opacity: 0;
}

.password-toggle.is-visible .password-toggle__icon--show {
    opacity: 0;
}

.password-toggle.is-visible .password-toggle__icon--hide {
    opacity: 1;
}

label span.field-validation-error,
div.validation-summary-errors {
    color: var(--error);
}

.calendar-toolbar,
.calendar-toolbar-actions,
.calendar-top-controls,
.calendar-legend,
.calendar-event-actions {
    display: flex;
    gap: 1rem;
}

.calendar-toolbar,
.calendar-toolbar-actions,
.calendar-top-controls {
    justify-content: space-between;
    align-items: center;
}

.calendar-toolbar-redesign {
    align-items: end;
    margin-bottom: var(--space-3);
}

.calendar-title-block h1,
.calendar-title-block p {
    margin: 0;
}

.calendar-filter-card {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.calendar-page {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
}

.calendar-page > .admin-table-toolbar {
    margin-bottom: 0;
}

.calendar-shell {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.72);
}

.calendar-top-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-2);
    padding: 0.65rem;
    border-bottom: 1px solid var(--line);
    background: rgba(250, 248, 242, 0.82);
}

.calendar-navigation-actions {
    display: inline-flex;
    justify-self: start;
    flex-wrap: nowrap;
    gap: 0;
}

.calendar-navigation-actions > .button-secondary {
    min-height: 2.25rem;
    margin: 0;
    padding-inline: 0.75rem;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.calendar-navigation-actions > .button-secondary + .button-secondary,
.calendar-view-switch > * + * {
    margin-left: -1px;
}

.calendar-navigation-actions > .button-secondary:first-child,
.calendar-view-switch > *:first-child {
    border-radius: var(--radius-control) 0 0 var(--radius-control);
}

.calendar-navigation-actions > .button-secondary:last-child,
.calendar-view-switch > *:last-child {
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
}

.calendar-navigation-actions > .button-secondary:hover,
.calendar-navigation-actions > .button-secondary:focus-visible,
.calendar-view-switch > *:hover,
.calendar-view-switch > *:focus-visible {
    z-index: 1;
    transform: none;
}

.calendar-range-label {
    align-self: center;
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
    text-align: center;
}

.calendar-range-label span {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
    text-transform: uppercase;
}

.calendar-range-label strong {
    color: var(--ink);
    font-size: 1.05rem;
}

.calendar-filter-grid {
    align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.calendar-filter-grid label {
    margin: 0;
}

.calendar-filter-actions {
    justify-content: end;
    align-self: end;
}

.calendar-filter-actions button,
.calendar-filter-actions a {
    min-width: 8rem;
}

.calendar-scope-switch {
    margin-top: 1.5rem;
}

.calendar-view-switch {
    display: inline-flex;
    justify-self: end;
    margin-top: 0;
    min-width: 0;
}

.calendar-view-switch > * {
    min-height: 2.25rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.calendar-filter-dropdown {
    align-self: end;
}

.calendar-category-filter-option .badge,
.calendar-filter-option-value {
    background: color-mix(in srgb, var(--category-color, var(--accent)) 28%, #fff);
    color: var(--ink);
    border-color: color-mix(in srgb, var(--category-color, var(--accent)) 54%, var(--line));
}

.calendar-view-switch > *.active,
.calendar-scope-switch a.active {
    background: var(--accent);
    color: #fff;
}

.calendar-legend {
    flex-wrap: wrap;
    margin-top: 1rem;
}

.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.calendar-fullcalendar-card {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0.65rem;
    overflow: hidden;
}

.calendar-filter-card.is-loading .calendar-fullcalendar-card::after,
.calendar-page.is-loading .calendar-fullcalendar-card::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: rgba(250, 248, 242, 0.72);
    color: var(--ink);
    font-weight: 800;
    content: "Načítám kalendář";
}

[data-admin-fullcalendar] {
    min-height: 32rem;
}

[data-admin-fullcalendar] .fc {
    color: var(--ink);
}

[data-admin-fullcalendar] .fc-theme-standard td,
[data-admin-fullcalendar] .fc-theme-standard th,
[data-admin-fullcalendar] .fc-scrollgrid {
    border-color: var(--line);
}

[data-admin-fullcalendar] .fc-col-header-cell,
[data-admin-fullcalendar] .fc-daygrid-day {
    background: rgba(255, 255, 255, 0.64);
}

[data-admin-fullcalendar] .fc-day-today {
    background: rgba(232, 238, 228, 0.68);
}

[data-admin-fullcalendar] .fc-event {
    border-width: 0 0 0 4px;
    border-radius: 6px;
    box-shadow: none;
}

[data-admin-fullcalendar] .calendar-event-cancelled {
    opacity: 0.72;
    filter: grayscale(0.35);
}

[data-admin-fullcalendar] .calendar-event-ended {
    opacity: 0.82;
}

.fc-event-krajina {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    padding: 0.18rem 0.25rem;
    line-height: 1.2;
}

.fc-event-krajina strong,
.fc-event-krajina span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-event-krajina strong {
    font-size: 0.82rem;
}

.fc-event-krajina span {
    font-size: 0.72rem;
    opacity: 0.86;
}

.calendar-column {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: 1rem;
    min-height: 15rem;
    border-radius: var(--radius-card);
    border: 1px solid rgba(216, 204, 190, 0.85);
    background: rgba(255, 255, 255, 0.45);
}

.calendar-column header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(216, 204, 190, 0.65);
}

.calendar-column header span {
    color: var(--muted);
    font-size: 0.85rem;
}

.calendar-column-today {
    background: rgba(162, 84, 42, 0.08);
    border-color: rgba(162, 84, 42, 0.25);
}

.calendar-empty {
    color: var(--muted);
    font-size: 0.95rem;
}

.calendar-event {
    position: relative;
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem;
    border-radius: var(--radius-card);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.86));
    border: 1px solid rgba(216, 204, 190, 0.85);
    border-left: 6px solid var(--event-category);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--event-lecturer) 18%, transparent);
}

.calendar-event-cancelled {
    opacity: 0.72;
}

.calendar-event-ended {
    background: linear-gradient(180deg, rgba(245, 242, 237, 0.95), rgba(241, 236, 230, 0.88));
}

.calendar-event-main {
    display: grid;
    gap: 0.25rem;
}

.calendar-event-main a {
    font-weight: 700;
}

.calendar-event-time {
    color: var(--accent);
    font-weight: 600;
}

.calendar-event-meta {
    color: var(--muted);
    font-size: 0.92rem;
}

.calendar-event-preview {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: calc(100% + 0.35rem);
    display: none;
    z-index: 10;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: #1f2521;
    color: #fff;
    box-shadow: 0 18px 36px rgba(31, 37, 33, 0.18);
}

.calendar-event-preview span {
    color: rgba(255, 255, 255, 0.82);
}

.calendar-event:hover .calendar-event-preview {
    display: grid;
    gap: 0.35rem;
}

.calendar-event-actions {
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.92rem;
    gap: 0.45rem;
}

.calendar-event-actions form {
    display: inline;
}

.calendar-event-actions a,
.calendar-event-actions .button-link {
    min-height: 1.68rem;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    background: rgba(232, 238, 228, 0.65);
    color: var(--accent-dark);
    font-weight: 700;
}

.calendar-agenda {
    display: none;
    gap: var(--space-3);
}

.calendar-agenda-list,
.calendar-agenda-day {
    display: grid;
    gap: var(--space-3);
}

.calendar-agenda-day h3 {
    margin: 0;
    color: var(--color-forest);
}

.calendar-agenda-event {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-card);
    border: 1px solid rgba(216, 204, 190, 0.85);
    border-left: 6px solid var(--event-category);
    background: rgba(255, 255, 255, 0.78);
}

.calendar-agenda-event a {
    font-weight: 800;
}

.calendar-agenda-event span {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
}

.earnings-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: end;
}

.earnings-hero h1,
.earnings-hero p,
.earnings-filter-card h2,
.earnings-filter-card p,
.earnings-table-card h2,
.earnings-table-card h3,
.earnings-table-card p {
    margin: 0;
}

.earnings-summary {
    display: grid;
    gap: 0.2rem;
    min-width: 13rem;
    padding: 1rem;
    border: 1px solid rgba(56, 97, 80, 0.18);
    border-radius: var(--radius-card);
    background: rgba(232, 238, 228, 0.48);
    text-align: right;
}

.earnings-summary span,
.earnings-summary small {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.earnings-summary strong {
    color: var(--color-forest);
    font-size: 1.55rem;
}

.earnings-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.earnings-metric {
    min-height: 9rem;
}

.earnings-metric strong {
    display: block;
    margin: 0.25rem 0 0.35rem;
    color: var(--color-forest);
    font-size: 1.65rem;
}

.earnings-table-card {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.earnings-lecturer-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.earnings-lecturer-filter a {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.275rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font-weight: 700;
}

.earnings-page-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-1);
}

.earnings-page-toolbar form {
    width: min(100%, 16rem);
    margin: 0;
}

.earnings-month-field {
    display: grid;
    gap: 0.25rem;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.earnings-lecturer-filter a.active {
    border-color: rgba(56, 97, 80, 0.32);
    background: rgba(232, 238, 228, 0.82);
}

.category-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.45rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(34, 45, 37, 0.14);
}

.statistics-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: end;
}

.statistics-hero h1,
.statistics-hero p,
.statistics-filter-card h2,
.statistics-filter-card p,
.statistics-panel h2,
.statistics-panel p,
.statistics-months-card h2,
.statistics-months-card h3,
.statistics-months-card h4,
.statistics-months-card p {
    margin: 0;
}

.statistics-summary {
    display: grid;
    gap: 0.2rem;
    min-width: 13rem;
    padding: 1rem;
    border: 1px solid rgba(56, 97, 80, 0.18);
    border-radius: var(--radius-card);
    background: rgba(232, 238, 228, 0.48);
    text-align: right;
}

.statistics-summary span,
.statistics-summary small {
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.statistics-summary strong {
    color: var(--color-forest);
    font-size: 1.55rem;
}

.statistics-filter-card,
.statistics-panel,
.statistics-months-card {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.statistics-filter {
    grid-template-columns: minmax(12rem, 16rem) minmax(12rem, 16rem) auto;
    align-items: end;
}

.statistics-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.statistics-metric {
    min-height: 9rem;
}

.statistics-metric strong {
    display: block;
    margin: 0.25rem 0 0.35rem;
    color: var(--color-forest);
    font-size: 1.55rem;
}

.statistics-grid,
.statistics-month-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.statistics-month-card {
    display: grid;
    gap: var(--space-3);
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.62);
}

.statistics-table td {
    vertical-align: top;
}

.chart-bar {
    width: 100%;
    height: 0.65rem;
    margin-bottom: 0.35rem;
    border-radius: 999px;
    background: rgba(216, 204, 190, 0.7);
    overflow: hidden;
}

.chart-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #d19152);
}

@keyframes flash-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flash-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media (max-width: 900px) {
    .detail-grid,
    .admin-shell,
    .hero-grid,
    .homepage-hero,
    .homepage-discovery-panel,
    .homepage-category-form,
    .category-discovery,
    .homepage-course-grid,
    .course-filter-grid,
    .course-list-toolbar,
    .course-results-titlebar,
    .course-empty-state,
    .public-course-grid,
    .course-detail-shell,
    .course-detail-card,
    .course-detail-hero,
    .lesson-card,
    .payment-grid,
    .completion-bottom-grid,
    .dashboard-grid,
    .category-hero,
    .course-groups-hero,
    .course-cancel-head,
    .course-cancel-summary,
    .course-cancel-impact,
    .company-info-workspace-card,
    .admin-courses-hero,
    .admin-course-detail-hero,
    .admin-course-detail-main,
    .admin-course-bottom-grid,
    .admin-course-summary-grid,
    .admin-course-two-column,
    .admin-course-edit-shell,
    .admin-course-edit-head,
    .admin-course-edit-grid,
    .admin-course-edit-section,
    .reservation-summary,
    .reservation-row.three,
    .reservation-row.two,
    .reservation-payment-card,
    .reservation-action-groups,
    .invoices-hero,
    .invoice-detail-hero,
    .invoice-detail-layout,
    .invoice-detail-top-grid,
    .invoice-detail-bottom-grid,
    .invoice-filter,
    .invoice-detail-grid,
    .students-hero,
    .student-detail-hero,
    .student-edit-hero,
    .student-filter,
    .student-detail-grid,
    .student-communication-grid,
    .student-form-grid,
    .users-hero,
    .user-profile-hero,
    .user-detail-profile-row,
    .user-edit-hero,
    .user-skills-hero,
    .user-filter,
    .user-profile-grid,
    .user-activity-grid,
    .user-form-grid,
    .user-skill-form,
    .earnings-hero,
    .statistics-hero,
    .statistics-filter,
    .statistics-grid,
    .statistics-month-grid,
    .communications-hero,
    .communications-layout {
        grid-template-columns: 1fr;
    }

    .course-results-titlebar {
        display: grid;
        align-items: start;
    }

    .course-results-titlebar .results-count {
        justify-self: start;
        white-space: normal;
    }

    .course-results-titlebar .course-results-controls {
        justify-items: start;
    }

    .company-info-field-grid,
    .company-info-field-grid--address,
    .company-info-field-grid--bank {
        grid-template-columns: minmax(0, 1fr);
    }

    .company-info-field-grid--address > .company-info-field-half,
    .company-info-field-grid--address > .company-info-field-quarter,
    .company-info-field-grid--bank > .company-info-field-half,
    .company-info-field-grid--bank > .company-info-field-quarter {
        grid-column: 1 / -1;
    }

    .company-info-aside {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .company-info-aside-content {
        position: static;
    }

    .invoice-detail-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .invoice-hero-money {
        grid-column: 1 / -1;
        justify-items: start;
        min-width: 0;
    }

    .invoice-summary-body {
        grid-template-columns: 1fr;
    }

    .admin-course-actions,
    .admin-course-edit-submit,
    .reservation-summary-side,
    .student-hero-actions,
    .student-detail-badges,
    .user-hero-actions,
    .user-profile-badges,
    .user-profile-actions,
    .communication-stat {
        justify-content: stretch;
        justify-items: stretch;
    }

    .user-detail-topbar,
    .admin-course-actions-bar,
    .user-profile-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .reservation-hero-actions,
    .reservation-hero-actions a,
    .reservation-hero-actions form,
    .reservation-hero-actions button,
    .user-detail-topbar a,
    .admin-course-actions-bar a,
    .admin-course-actions-bar form,
    .admin-course-actions-bar button,
    .user-profile-actions a,
    .user-profile-actions form,
    .user-profile-actions button {
        width: 100%;
    }

    .reservation-summary-side,
    .hero-money {
        justify-items: stretch;
        text-align: left;
    }

    .registration-detail-template .reservation-summary {
        grid-template-columns: 1fr;
        align-items: start;
        padding: 1rem;
    }

    .registration-detail-template .reservation-row.three,
    .registration-detail-template .reservation-row.two {
        grid-template-columns: minmax(0, 1fr);
    }

    .registration-detail-template .reservation-summary,
    .registration-detail-template .reservation-row,
    .registration-detail-template .reservation-detail-panel {
        max-width: 100%;
        min-width: 0;
    }

    .registration-detail-template .reservation-hero-actions {
        max-width: none;
    }

    .registration-detail-template .section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .registration-detail-template .reservation-payment-card {
        grid-template-columns: 1fr;
    }

    .registration-detail-template .reservation-qr-panel {
        justify-self: stretch;
        width: 100%;
    }

    .registration-detail-template .reservation-lessons-card {
        overflow: hidden;
    }

    .registration-detail-template .reservation-lessons-card .table-wrap {
        max-width: 100%;
        overflow-x: auto;
    }

    .registration-detail-template .reservation-lessons-table {
        min-width: 36rem;
    }

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

    .reservation-metric {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .reservation-metric:last-child {
        border-bottom: 0;
    }

    .reservation-lessons-card .table-wrap {
        overflow-x: hidden;
    }

    .reservation-lessons-card .admin-table {
        min-width: 100%;
        table-layout: auto;
    }

    .reservation-lessons-mobile-filters {
        display: grid;
        gap: var(--space-2);
        padding: var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: rgba(232, 238, 228, 0.48);
    }

    .reservation-lessons-mobile-filters .table-filter-range {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .reservation-lessons-mobile-filters input {
        width: 100%;
    }

    .reservation-lessons-card .admin-table,
    .reservation-lessons-card .admin-table thead,
    .reservation-lessons-card .admin-table tbody,
    .reservation-lessons-card .admin-table tr,
    .reservation-lessons-card .admin-table th,
    .reservation-lessons-card .admin-table td {
        display: block;
        width: 100%;
    }

    .reservation-lessons-card .admin-table thead {
        display: none;
    }

    .reservation-lessons-card .admin-table tbody {
        display: grid;
        gap: var(--space-2);
    }

    .reservation-lessons-card .admin-table tr {
        padding: var(--space-3);
        border-bottom: 1px solid var(--line);
    }

    .reservation-lessons-card .admin-table tr:last-child {
        border-bottom: 0;
    }

    .reservation-lessons-card .admin-table th,
    .reservation-lessons-card .admin-table td {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .user-detail-skill-row,
    .user-earnings-pivot-toolbar,
    .user-skill-fields,
    .user-earnings-summary {
        grid-template-columns: 1fr;
    }

    .user-earnings-time-filter {
        justify-content: flex-start;
    }

    .user-earnings-time-switch {
        max-width: 100%;
        overflow-x: auto;
    }

    .user-detail-panel .meta-list {
        grid-template-columns: 1fr;
    }

    .user-detail-panel .meta-list dd {
        overflow-wrap: anywhere;
    }

    .user-detail-calendar {
        overflow-x: auto;
    }

    .user-detail-calendar-head,
    .user-detail-calendar-grid {
        min-width: 42rem;
    }

    .admin-course-actions a,
    .admin-course-actions form,
    .admin-course-actions button,
    .admin-course-detail-topbar a,
    .admin-course-edit-submit,
    .admin-course-edit-submit .form-actions,
    .admin-course-edit-submit button,
    .admin-course-edit-submit a {
        width: 100%;
    }

    .admin-course-detail-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-course-edit-submit {
        align-items: stretch;
        flex-direction: column;
    }

    .manual-reservation-form,
    .manual-reservation-group > div,
    .manual-price-controls,
    .manual-option-list {
        grid-template-columns: 1fr;
    }

    .dashboard-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-shell {
        display: block;
    }

    .admin-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 900;
        width: min(20rem, calc(100vw - 3rem));
        min-height: 100vh;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        box-shadow: 24px 0 60px rgba(31, 37, 33, 0.24);
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
    }

    .admin-sidebar-collapse {
        display: none;
    }

    .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 850;
        display: none;
        border: 0;
        background: rgba(31, 37, 33, 0.42);
    }

    .admin-nav-open .admin-sidebar-backdrop {
        display: block;
    }

    .admin-main {
        min-height: 100vh;
    }

    .admin-header {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 0.75rem 1rem;
    }

    .admin-menu-toggle {
        display: inline-flex;
    }

    .admin-menu-toggle + div {
        grid-column: 2;
    }

    .admin-header-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        max-width: 100%;
    }

.admin-header-actions > a,
    .admin-header-actions > form,
    .admin-header-actions > form > button {
        width: 100%;
    }

    .admin-content {
        padding: 1rem;
    }

    .table-wrap {
        scrollbar-width: thin;
    }

    .table-wrap > .admin-table,
    .table-wrap > .table {
        min-width: 42rem;
    }

    .admin-course-section .table-wrap > .admin-table {
        min-width: 100%;
    }

    .admin-content > *,
    .statistics-grid > *,
    .statistics-month-grid > *,
    .earnings-month-grid > *,
    .earnings-grid > * {
        min-width: 0;
    }

    .public-header-inner {
        min-height: 4.25rem;
        flex-wrap: wrap;
        padding: 0.75rem 0;
    }

    .public-menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .public-menu {
        display: none;
        width: 100%;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(216, 204, 190, 0.72);
    }

    .public-menu.is-open {
        display: grid;
        gap: 0.75rem;
    }

    .public-nav {
        display: grid;
        gap: 0.5rem;
    }

    .public-nav a,
    .public-header-cta {
        width: 100%;
    }

    .public-footer-inner {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .course-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .course-filter-actions button,
    .course-filter-actions .button-secondary,
    .course-detail-hero-actions a,
    .dashboard-hero-actions a,
    .category-hero a,
    .course-groups-hero a,
    .form-actions button,
    .completion-hero-actions a,
    .public-error-actions a {
        width: 100%;
    }

    .course-registration-panel {
        position: static;
        scroll-margin-top: 1rem;
    }

    .section-head {
        align-items: start;
    }

    .calendar-toolbar,
    .calendar-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-grid {
        display: none;
    }

    .calendar-agenda {
        display: grid;
    }

    .flash {
        left: 1rem;
        right: 1rem;
        min-width: auto;
        max-width: none;
    }

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

    .course-meta-grid,
    .registration-summary,
    .course-body,
    .payment-detail-list {
        grid-template-columns: 1fr;
    }

    .payment-panel-head,
    .completion-hero-actions,
    .public-error-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-symbol,
    .qr-fallback,
    .price-box,
    .completion-card,
    .payment-details-card,
    .payment-qr-card {
        min-width: 0;
    }

    .qr-fallback code {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 720px) {
    .calendar-top-controls {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "range range"
            "navigation views";
    }

    .calendar-range-label {
        grid-area: range;
    }

    .calendar-navigation-actions {
        grid-area: navigation;
        max-width: 100%;
        overflow-x: auto;
    }

    .calendar-view-switch {
        grid-area: views;
        max-width: 100%;
        overflow-x: auto;
    }

    .calendar-navigation-actions > *,
    .calendar-view-switch > * {
        flex: 0 0 auto;
    }
}

@media (max-width: 560px) {
    .invoice-qr-panel {
        grid-template-columns: 1fr;
    }

    .invoice-qr-image {
        width: 7.5rem;
        height: 7.5rem;
    }

    .brand-text span {
        display: none;
    }

    .public-content {
        width: min(100% - 1rem, 1180px);
        padding-top: 1rem;
    }

    .admin-header {
        gap: 0.5rem;
        padding: 0.65rem 1rem;
    }

    .admin-header strong {
        font-size: 1.05rem;
        overflow-wrap: anywhere;
    }

    .admin-header-actions {
        gap: 0.5rem;
    }

.admin-header-actions > a,
    .admin-header-actions > form,
    .admin-header-actions > form > button {
        min-height: 2.05rem;
    }

    .admin-content {
        gap: var(--space-1);
        padding: 1rem;
    }

    .hero,
    .card,
    .panel {
        border-radius: 18px;
        padding: 1rem;
    }

    .table-actions:not(td) {
        align-items: stretch;
    }

    .table-actions:not(td) > a,
    .table-actions:not(td) > button,
    .table-actions:not(td) > form,
    .table-actions:not(td) > form > button {
        min-width: min(100%, 9rem);
    }

    td.table-actions > a,
    td.table-actions > button,
    td.table-actions > form,
    td.table-actions > form > button {
        width: auto;
        min-width: 2.25rem;
    }

    td.table-actions > a[data-ui-icon],
    td.table-actions > button[data-ui-icon],
    td.table-actions > form > button[data-ui-icon] {
        width: 2.25rem;
    }

    .course-list-hero,
    .course-filter-panel,
    .public-course-card,
    .course-detail-hero,
    .course-detail-section,
    .course-registration-panel,
    .payment-panel,
    .completion-card,
    .public-error-card {
        border-radius: 18px;
        padding: 1rem;
    }

    .course-detail-image {
        min-height: 12rem;
        max-height: 16rem;
    }

    .qr-visual {
        max-width: min(100%, 15rem);
        min-height: 0;
    }
}


.form-actions-compact-end {
    justify-content: flex-end;
}

.user-profile-card-head,
.user-skills-card > .section-head {
    align-items: center;
    margin: 0;
}

.user-profile-card .meta-list dt {
    color: var(--ink);
    font-weight: 800;
}

.user-profile-card .meta-list dd {
    color: var(--muted);
}

.user-profile-card-head .user-profile-actions {
    align-items: center;
}

.user-profile-card-head .user-profile-actions form,
.user-skills-table .table-actions form {
    margin: 0;
}

.user-skills-table th,
.user-skills-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.skill-level-badge {
    border-color: color-mix(in srgb, var(--category-color, var(--accent)) 54%, var(--line));
    background: color-mix(in srgb, var(--category-color, var(--accent)) 24%, #fff);
    color: var(--ink);
}

.user-skills-editor {
    display: grid;
    gap: var(--space-3);
    width: min(50rem, 100%);
}

.user-skills-editor-head {
    padding-right: 2.75rem;
}

.user-skills-editor-head h1 {
    margin: 0;
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
    line-height: 1.25;
}

.user-skills-editor-form,
.user-skill-rows {
    display: grid;
    gap: var(--space-2);
}

.user-skill-grid {
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.62);
}

.user-skill-rows {
    gap: 0;
}

.user-skill-columns,
.user-skill-editor-row {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(11rem, 0.72fr) auto;
    gap: var(--space-2);
}

.user-skill-columns {
    padding: 0.5rem;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 800;
}

.user-skill-editor-row {
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.user-skill-editor-row > select,
.user-skill-editor-row > .searchable-combobox {
    min-width: 0;
}

.user-skill-editor-row .searchable-combobox-input {
    min-height: 2.15rem;
    padding-block: 0.35rem;
}

.user-skill-editor-row > .user-skill-remove {
    align-self: center;
}

.user-skill-add {
    justify-self: start;
    margin: 0.45rem 0.5rem;
}

.table-action-disabled {
    display: inline-flex;
}

.user-skill-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

@media (max-width: 720px) {
    .user-profile-card-head,
    .user-skills-card > .section-head,
    .user-skill-editor-actions {
        align-items: flex-start;
    }

    .user-profile-card-head {
        flex-direction: column;
    }

    .user-profile-card-head .user-profile-actions {
        justify-content: flex-start;
    }

    .user-profile-card-head .user-profile-actions a,
    .user-profile-card-head .user-profile-actions form,
    .user-profile-card-head .user-profile-actions button {
        width: auto;
    }

    .user-skill-columns,
    .user-skill-editor-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-skill-columns {
        gap: 0.2rem;
        padding-block: 0.4rem;
    }

    .user-skill-editor-row > .user-skill-remove {
        justify-self: end;
        margin-bottom: 0;
    }
}

/* Final cascade for the compact earnings and course-detail compositions. */
.earnings-summary-row .earnings-page-toolbar {
    margin: 0;
}

.earnings-summary-row .earnings-page-toolbar form {
    width: 100%;
    height: 100%;
}

.admin-course-detail-main .admin-course-overview,
.admin-course-detail-main .admin-course-cover-card,
.admin-course-detail-main .admin-course-description-card,
.admin-course-detail-main .admin-course-hero-payment {
    margin: 0;
}

.admin-course-detail-main .admin-course-detail-cover {
    min-height: 0;
}

.admin-course-detail-main .admin-course-detail-cover img {
    min-height: 0;
}

.admin-course-overview .admin-course-actions {
    gap: var(--space-1);
}

/* Shared detail controls and cards. */
.user-profile-tab {
    padding: 0.55rem 0.5rem;
    border-bottom-width: 3px;
    font-weight: 500;
}

.user-profile-tab:hover,
.user-profile-tab:focus-visible {
    border-color: transparent;
    background: var(--color-sage-soft);
    color: var(--color-forest-dark);
}

.user-profile-tab[aria-current="page"],
.user-profile-tab[aria-selected="true"] {
    border-color: var(--color-forest);
    background: transparent;
    color: var(--color-forest);
}

.admin-course-cover-card {
    display: grid;
    gap: var(--space-3);
}

.admin-course-cover-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
}

.admin-course-cover-preview {
    display: block;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--color-beige-soft);
}

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

.admin-course-cover-content .admin-course-cover-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
}

.admin-course-cover-content .admin-course-cover-actions form {
    justify-items: end;
    width: 100%;
}

.admin-course-cover-content .course-cover-action {
    justify-content: flex-start;
    width: 100%;
    min-width: 11.5rem;
    min-height: 2.75rem;
    padding: 0.55rem 1rem;
}

.admin-course-cover-empty {
    margin: 0;
}

.admin-course-hero-payment {
    background: var(--panel);
}

.admin-course-overview .meta-list dt {
    color: var(--ink);
    font-weight: 800;
}

.admin-course-overview .meta-list dd {
    color: var(--muted);
}

.admin-course-description-dialog,
.admin-course-description-shell {
    width: min(46rem, 100%);
}

.admin-course-description-form {
    display: grid;
    gap: var(--space-3);
}

.admin-course-description-form textarea {
    min-height: 15rem;
    resize: vertical;
}

.payment-history-card { grid-column: 1 / -1; }
.payment-history-card > details { margin-top: 1rem; }
.payment-history-card summary { cursor: pointer; padding: .5rem 0; }
.payment-history-current { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: 1rem; }
.payment-history-notice { padding: .5rem 0; border-top: 1px solid var(--color-border); }
.payment-history-refund .form-actions { justify-content: flex-end; }
.payment-history-card .form-actions > button { width: auto; flex: 0 0 auto; }

.form-label-text {
    display: inline-flex;
    align-items: baseline;
    justify-self: start;
}

@media (max-width: 640px) {
    .admin-course-cover-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-course-cover-content .admin-course-cover-actions,
    .admin-course-cover-content .admin-course-cover-actions form {
        align-items: flex-start;
        justify-items: start;
    }

    .admin-course-cover-content .admin-course-cover-actions {
        width: 100%;
    }
}