*,
::after,
::before {
    box-sizing: border-box;
}

:root {
    --dark-color: #333;
    --background-color: #f5f5f9;
    --white-color: #fffdfd;
    --primary-color: #6706ce;
    --on-primary-color: #fffdfd;
    --border-color: rgba(161, 172, 184, 0.28);
    --muted-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --success-subtle-bg: rgba(25, 135, 84, 0.1);
    --danger-subtle-bg: rgba(220, 53, 69, 0.12);
    --shadow-color: rgba(161, 172, 184, 0.15);
    --shadow-color-soft: rgba(161, 172, 184, 0.1);
    --row-striped-color: rgba(161, 172, 184, 0.09);
    --row-hover-color: rgba(103, 6, 206, 0.04);
    --subtle-primary-bg: rgba(103, 6, 206, 0.08);
    --skeleton-base: rgba(161, 172, 184, 0.18);
    --skeleton-highlight: rgba(255, 253, 253, 0.8);
    color-scheme: light;
}

[data-bs-theme="dark"] {
    --dark-color: #f1f3f5;
    --background-color: #111217;
    --white-color: #1b1d24;
    --primary-color: #a970ff;
    --on-primary-color: #fffdfd;
    --border-color: rgba(222, 226, 230, 0.18);
    --muted-color: #adb5bd;
    --success-color: #75b798;
    --danger-color: #ea868f;
    --success-subtle-bg: rgba(25, 135, 84, 0.18);
    --danger-subtle-bg: rgba(220, 53, 69, 0.18);
    --shadow-color: rgba(0, 0, 0, 0.32);
    --shadow-color-soft: rgba(0, 0, 0, 0.22);
    --row-striped-color: rgba(255, 255, 255, 0.035);
    --row-hover-color: rgba(169, 112, 255, 0.11);
    --subtle-primary-bg: rgba(169, 112, 255, 0.16);
    --skeleton-base: rgba(222, 226, 230, 0.14);
    --skeleton-highlight: rgba(255, 255, 255, 0.08);
    --bs-body-bg: var(--background-color);
    --bs-body-color: var(--dark-color);
    --bs-border-color: var(--border-color);
    --bs-secondary-color: var(--muted-color);
    color-scheme: dark;
}

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 0.875rem;
    opacity: 1;
    overflow-y: scroll;
    margin: 0;
    color: var(--dark-color);
    background: var(--background-color);
}

a {
    cursor: pointer;
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease-in-out;
}

li {
    list-style: none;
}

h4 {
    font-size: 1.275rem;
}

/* Utils */
[x-cloak] {
    display: none !important;
}

.htmx-action-spinner {
    display: none;
}

.is-htmx-loading .htmx-action-spinner {
    display: inline-block;
}

.is-htmx-loading {
    opacity: 0.72;
    pointer-events: none;
}

.page-progress {
    block-size: 3px;
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition:
        opacity 0.14s ease,
        visibility 0.14s ease;
    visibility: hidden;
    z-index: 2000;
}

.page-progress.is-visible {
    opacity: 1;
    visibility: visible;
}

.page-progress-bar {
    background: linear-gradient(
        90deg,
        var(--primary-color),
        color-mix(in srgb, var(--primary-color) 70%, var(--white-color))
    );
    block-size: 100%;
    box-shadow: 0 0 0.75rem
        color-mix(in srgb, var(--primary-color) 45%, transparent);
    inline-size: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.24s ease;
}

.connection-alert {
    align-items: center;
    box-shadow: 0 0.75rem 2rem var(--shadow-color);
    display: flex;
    gap: 0.6rem;
    inline-size: min(calc(100% - 2rem), 46rem);
    inset-block-start: 0.75rem;
    inset-inline-start: 50%;
    justify-content: center;
    margin: 0;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    z-index: 2100;
}

[data-bs-theme="dark"] .connection-alert {
    background-color: color-mix(in srgb, #ffc107 18%, var(--white-color));
    border-color: color-mix(in srgb, #ffc107 52%, var(--border-color));
    color: var(--dark-color);
}

.asteriskField {
    color: var(--bs-danger, #dc3545);
    font-weight: 600;
}

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

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

.btn-primary:focus,
.btn-primary:active {
    color: var(--on-primary-color);
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(103, 6, 206, 0.5);
}

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

.btn-outline-primary:hover {
    color: var(--on-primary-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: var(--on-primary-color);
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(103, 6, 206, 0.5);
}

.btn-check:checked + .btn-outline-primary {
    color: var(--on-primary-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-control,
.form-select {
    color: var(--dark-color);
    background-color: var(--bs-body-bg, var(--white-color));
    border-color: var(--border-color);
}

.form-control::placeholder {
    color: var(--muted-color);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    color: var(--dark-color);
    background-color: var(--bs-body-bg, var(--white-color));
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem var(--subtle-primary-bg);
}

.form-check-input {
    background-color: var(--bs-body-bg, var(--white-color));
    border-color: var(--border-color);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.block-content {
    background-color: var(--white-color);
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 0 0 0.375rem 0.25rem var(--shadow-color);
    border-radius: 0.5rem;
}

.detail-tab-card {
    overflow: hidden;
    padding: 0;
}

.detail-tabs {
    align-items: flex-end;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 0.25rem;
    overflow-x: visible;
    padding: 1rem 1rem 0;
}

.detail-tabs .nav-link {
    background-color: var(--bs-tertiary-bg, var(--background-color));
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    color: var(--muted-color);
    margin-bottom: -1px;
    min-height: 2.5rem;
    padding: 0.65rem 0.95rem;
}

.detail-tabs .nav-link:hover,
.detail-tabs .nav-link:focus-visible {
    border-color: var(--border-color);
    color: var(--primary-color);
}

.detail-tabs .nav-link.active {
    background-color: var(--white-color);
    border-color: var(--border-color);
    border-bottom-color: var(--white-color);
    color: var(--primary-color);
    font-weight: 700;
}

.detail-tab-card > .htmx-indicator,
.detail-tab-card > .alert {
    margin: 1rem 1.5rem 0;
}

.detail-tab-panel {
    padding: 1.5rem;
}

.card,
.modal-content,
.dropdown-menu {
    color: var(--dark-color);
    background-color: var(--white-color);
    border-color: var(--border-color);
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

.modal-form-status {
    color: var(--muted-color);
    font-size: 0.875rem;
    margin: 0 auto 0 0;
}

#navbarMenu .container-fluid {
    flex-wrap: wrap;
    position: relative;
}

.navbar-global-search {
    inline-size: min(28rem, 32vw);
    inset-inline-start: 50%;
    position: absolute;
    transform: translateX(-50%);
    transition:
        inline-size 0.18s ease;
    z-index: 1040;
}

.navbar-global-search.is-open,
.navbar-global-search:focus-within {
    inline-size: min(34rem, 38vw);
}

.navbar-global-search .global-search-field {
    width: 100%;
}

.navbar-global-search .input-group {
    min-width: 0;
    overflow: hidden;
    border-radius: 999px;
}

.navbar-global-search .input-group-text,
.navbar-global-search .form-control,
.navbar-global-search-clear {
    background-color: var(--bs-body-bg, var(--white-color));
    border-color: var(--border-color);
    color: var(--dark-color);
}

.navbar-global-search .form-control::placeholder {
    color: var(--muted-color);
    opacity: 1;
}

.navbar-global-search .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--primary-color) 26%, transparent);
}

.navbar-global-search .form-control {
    border-bottom-left-radius: 999px;
    border-top-left-radius: 999px;
}

.navbar-global-search-icon {
    border-bottom-right-radius: 999px;
    border-top-right-radius: 999px;
}

.navbar-global-search-input::-webkit-search-cancel-button,
.navbar-global-search-input::-webkit-search-decoration {
    appearance: none;
    -webkit-appearance: none;
    display: none;
}

.navbar-global-search-input::-ms-clear,
.navbar-global-search-input::-ms-reveal {
    display: none;
    height: 0;
    width: 0;
}

.navbar-global-search-clear[hidden] {
    display: none !important;
}

.navbar-global-search-clear {
    color: var(--muted-color);
}

.navbar-global-search-clear:hover,
.navbar-global-search-clear:focus {
    background-color: var(--bs-tertiary-bg, var(--background-color));
    border-color: var(--primary-color);
    color: var(--dark-color);
}

.global-search-panel {
    background-color: var(--bs-body-bg, var(--white-color));
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline: 0;
    max-height: min(72vh, 34rem);
    overflow-y: auto;
    padding: 0.75rem;
    position: absolute;
    z-index: 1060;
}

.global-search-panel[hidden] {
    display: none !important;
}

.global-search-field .input-group-text {
    background-color: var(--bs-body-bg, var(--white-color));
    border-color: var(--border-color);
    color: var(--muted-color);
}

.global-search-indicator {
    display: none;
}

.global-search-indicator.htmx-request {
    display: block;
}

.global-search-results-shell {
    min-height: 4.75rem;
}

.global-search-results .list-group {
    overflow: hidden;
}

.global-search-result-link {
    color: var(--dark-color);
}

.global-search-result-link:hover,
.global-search-result-link:focus,
.global-search-result-link.active {
    color: var(--dark-color);
    background-color: var(--subtle-primary-bg);
}

.global-search-result-link.active {
    border-color: color-mix(in srgb, var(--primary-color) 48%, var(--border-color));
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.global-search-help {
    border-top: 1px solid var(--border-color);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.min-w-0 {
    min-width: 0;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--dark-color);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--row-striped-color);
    --bs-table-striped-color: var(--dark-color);
    --bs-table-hover-bg: var(--row-hover-color);
    --bs-table-hover-color: var(--dark-color);
}

.table > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--bs-table-striped-bg);
    --bs-table-color-type: var(--bs-table-striped-color);
}

.table thead th {
    color: var(--muted-color);
    border-bottom-color: var(--border-color);
}

.table tbody td,
.table tbody th {
    border-color: var(--border-color);
}

.table-responsive {
    scrollbar-color: var(--border-color) transparent;
}

.attendance-matrix-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.attendance-matrix-table {
    min-width: 48rem;
}

.attendance-matrix-student-col {
    background-color: var(--white-color);
    left: 0;
    min-width: 12rem;
    position: sticky;
    z-index: 1;
}

.attendance-matrix-table thead .attendance-matrix-student-col {
    z-index: 2;
}

.attendance-matrix-badge {
    min-width: 4.75rem;
}

.text-bg-light,
.bg-light {
    color: var(--dark-color) !important;
    background-color: var(--background-color) !important;
}

.staff-toolbar-main,
.student-toolbar-main,
.module-toolbar-main,
.room-toolbar-main,
.enrollment-toolbar-main,
.group-toolbar-main,
.schedule-toolbar-main,
.invitation-toolbar-main,
.dashboard-toolbar-main,
.attendance-toolbar-main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.staff-toolbar,
.student-toolbar,
.module-toolbar,
.room-toolbar,
.enrollment-toolbar,
.group-toolbar,
.schedule-toolbar,
.invitation-toolbar,
.dashboard-toolbar,
.attendance-toolbar {
    padding: 1rem;
}

.staff-search-field,
.student-search-field,
.module-search-field,
.room-search-field,
.enrollment-search-field,
.group-search-field,
.schedule-search-field,
.invitation-search-field,
.dashboard-primary-filter-field {
    flex: 0 1 50%;
    max-width: 50%;
    min-width: 18rem;
}

.attendance-toolbar-main {
    align-items: flex-end;
    flex-wrap: nowrap;
}

.attendance-group-field {
    flex: 0 1 24rem;
    max-width: 24rem;
    min-width: 14rem;
}

.attendance-status-field {
    flex: 0 0 12rem;
}

.attendance-toolbar-main .btn {
    flex: 0 0 auto;
    min-height: calc(1.5em + 0.75rem + 2px);
}

.staff-filter-toggle,
.student-filter-toggle,
.module-filter-toggle,
.room-filter-toggle,
.enrollment-filter-toggle,
.group-filter-toggle,
.schedule-filter-toggle,
.invitation-filter-toggle,
.dashboard-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.staff-reset-link,
.student-reset-link,
.module-reset-link,
.room-reset-link,
.enrollment-reset-link,
.group-reset-link,
.schedule-reset-link,
.invitation-reset-link,
.dashboard-reset-link,
.attendance-reset-link {
    white-space: nowrap;
}

.staff-reset-link.btn-danger,
.student-reset-link.btn-danger,
.module-reset-link.btn-danger,
.room-reset-link.btn-danger,
.enrollment-reset-link.btn-danger,
.group-reset-link.btn-danger,
.schedule-reset-link.btn-danger,
.invitation-reset-link.btn-danger,
.dashboard-reset-link.btn-danger,
.attendance-reset-link.btn-danger {
    color: var(--on-primary-color);
}

.staff-reset-link.btn-danger:hover,
.student-reset-link.btn-danger:hover,
.module-reset-link.btn-danger:hover,
.room-reset-link.btn-danger:hover,
.enrollment-reset-link.btn-danger:hover,
.group-reset-link.btn-danger:hover,
.schedule-reset-link.btn-danger:hover,
.invitation-reset-link.btn-danger:hover,
.dashboard-reset-link.btn-danger:hover,
.attendance-reset-link.btn-danger:hover {
    color: var(--on-primary-color);
}

.staff-reset-link:hover,
.student-reset-link:hover,
.module-reset-link:hover,
.room-reset-link:hover,
.enrollment-reset-link:hover,
.group-reset-link:hover,
.schedule-reset-link:hover,
.invitation-reset-link:hover,
.dashboard-reset-link:hover,
.attendance-reset-link:hover,
.list-clear-all:hover {
    color: var(--primary-color);
}

.list-toolbar-main--integrated,
.group-toolbar-main--integrated {
    align-items: flex-start;
}

.list-search-field--integrated,
.group-search-field--integrated {
    flex: 0 1 38rem;
    max-width: min(100%, 38rem);
    min-width: 18rem;
}

.list-search-input-group > .form-control,
.group-search-input-group > .form-control {
    min-width: 0;
}

.list-filter-icon-button,
.group-filter-icon-button {
    flex: 0 0 auto;
    min-width: 2.75rem;
    position: relative;
}

.list-filter-active-dot,
.group-filter-active-dot {
    background-color: var(--bs-danger, #dc3545);
    border: 2px solid currentColor;
    border-radius: 999px;
    height: 0.7rem;
    inset-block-start: 0.2rem;
    inset-inline-end: 0.2rem;
    position: absolute;
    width: 0.7rem;
}

.dashboard-attention-card {
    align-items: flex-start;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    display: flex;
    gap: 0.85rem;
    height: 100%;
    padding: 0.9rem;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.dashboard-attention-card:hover,
.dashboard-attention-card:focus-visible {
    border-color: var(--primary-color);
    box-shadow: 0 0.35rem 1rem var(--shadow-color-soft);
    transform: translateY(-1px);
}

.dashboard-attention-icon {
    align-items: center;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--primary-color);
    display: inline-flex;
    flex: 0 0 2.25rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.dashboard-attention-body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.dashboard-attention-count {
    color: var(--dark-color);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.dashboard-attention-label {
    font-weight: 600;
    line-height: 1.25;
}

.dashboard-attention-description {
    color: var(--muted-color);
    font-size: 0.85rem;
    line-height: 1.3;
}

.attendance-row-actions {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.attendance-primary-action {
    min-width: 4.5rem;
}

.attendance-session-card {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.25rem 0.15rem var(--shadow-color-soft);
    margin-bottom: 1rem;
    padding: 1rem;
}

.attendance-card-details {
    display: grid;
    gap: 0.4rem 1rem;
    grid-template-columns: minmax(6rem, 0.5fr) 1fr;
    margin: 1rem 0;
}

.attendance-card-details dt {
    color: var(--muted-color);
    font-weight: 600;
}

.attendance-card-details dd {
    margin-bottom: 0;
}

.attendance-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.attendance-card-actions .attendance-row-actions {
    justify-content: flex-start;
}

.attendance-mark-toolbar,
.attendance-mark-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
}

.attendance-mark-toolbar {
    margin-bottom: 1rem;
}

.attendance-bulk-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.attendance-mark-actions {
    margin-top: 1rem;
}

.attendance-mark-feedback {
    min-height: 1.25rem;
}

.attendance-mark-progress {
    color: var(--dark-color);
}

.attendance-status-control {
    flex-wrap: wrap;
}

.attendance-status-control .btn {
    min-width: 5.25rem;
}

.attendance-student-row:focus-visible {
    outline: 0.2rem solid rgba(var(--bs-primary-rgb), 0.35);
    outline-offset: -0.2rem;
}

.attendance-student-row[data-row-marked="true"] [data-attendance-unmarked-label] {
    display: none;
}

.schedule-create-summary {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--dark-color);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
}

.attendance-note {
    min-width: 12rem;
    resize: vertical;
}

.attendance-note-toggle {
    min-width: 5.25rem;
}

.staff-advanced-filters,
.student-advanced-filters,
.module-advanced-filters,
.room-advanced-filters,
.enrollment-advanced-filters,
.group-advanced-filters,
.schedule-advanced-filters,
.invitation-advanced-filters,
.dashboard-advanced-filters {
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.list-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.list-active-filters-label {
    color: var(--muted-color);
    font-size: 0.8125rem;
}

.list-filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.list-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.35rem 0.625rem;
    color: var(--dark-color);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.8125rem;
}

.list-filter-chip:hover {
    color: var(--primary-color);
    background-color: var(--subtle-primary-bg);
    border-color: var(--primary-color);
}

.list-clear-all {
    font-size: 0.8125rem;
    color: var(--muted-color);
}

.list-pagination {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.list-page-size-select {
    width: auto;
    min-width: 4.5rem;
}

.list-pagination .page-link {
    color: var(--primary-color);
    background-color: var(--white-color);
    border-color: var(--border-color);
}

.list-pagination .page-item.active .page-link {
    color: var(--on-primary-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.list-pagination .page-item.disabled .page-link {
    color: var(--muted-color);
    background-color: var(--background-color);
    border-color: var(--border-color);
}

.list-updating-indicator {
    min-height: 1.25rem;
}

.list-results-shell {
    position: relative;
}

.list-bulk-form {
    margin-bottom: 0.75rem;
}

.list-bulk-actions {
    align-items: center;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

.list-bulk-count {
    align-items: baseline;
    color: var(--dark-color);
    display: inline-flex;
    gap: 0.35rem;
}

.list-bulk-action-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.list-selection-cell {
    width: 2.75rem;
}

.list-skeleton-overlay {
    background-color: var(--white-color);
    border-radius: 0.5rem;
    inset: 0;
    min-height: 14rem;
    opacity: 0;
    padding: 1rem;
    pointer-events: none;
    position: absolute;
    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;
    visibility: hidden;
    z-index: 5;
}

.list-skeleton-overlay.htmx-request {
    opacity: 1;
    visibility: visible;
}

.list-skeleton-table {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem var(--shadow-color-soft);
    overflow: hidden;
}

.list-skeleton-row {
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    display: grid;
    gap: 1rem;
    grid-template-columns:
        minmax(11rem, 2fr)
        repeat(3, minmax(5rem, 1fr))
        minmax(4.5rem, 0.7fr)
        minmax(4rem, 0.5fr);
    padding: 0.875rem 1rem;
}

.list-skeleton-row:last-child {
    border-bottom: 0;
}

.list-skeleton-cell {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.list-skeleton-actions {
    align-items: flex-end;
    flex-direction: row;
    justify-content: flex-end;
}

.list-skeleton-line,
.list-skeleton-dot {
    animation: list-skeleton-pulse 1.2s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-highlight) 45%,
        var(--skeleton-base) 65%
    );
    background-size: 240% 100%;
    display: block;
}

.list-skeleton-line {
    border-radius: 999px;
    height: 0.75rem;
    max-width: 100%;
}

.list-skeleton-line-lg {
    width: 74%;
}

.list-skeleton-line-md {
    width: 58%;
}

.list-skeleton-line-sm {
    width: 38%;
}

.list-skeleton-pill {
    height: 1.35rem;
    width: 4.5rem;
}

.list-skeleton-dot {
    border-radius: 999px;
    height: 1.8rem;
    width: 1.8rem;
}

@keyframes list-skeleton-pulse {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-progress,
    .page-progress-bar,
    .connection-alert {
        transition: none;
    }

    .list-skeleton-line,
    .list-skeleton-dot {
        animation: none;
    }
}

.list-empty-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 1rem;
    text-align: center;
}

.list-empty-icon {
    align-items: center;
    background-color: var(--subtle-primary-bg);
    border-radius: 999px;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 1.5rem;
    height: 3.5rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 3.5rem;
}

.group-page-header h1 {
    color: var(--dark-color);
}

.list-page-header h1 {
    color: var(--dark-color);
}

.group-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.list-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.group-name-link {
    color: var(--dark-color);
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
}

.group-name-link:hover {
    color: var(--primary-color);
}

.resource-name-link {
    color: var(--dark-color);
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
}

.resource-name-link:hover {
    color: var(--primary-color);
}

.group-count-value {
    color: var(--dark-color);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.resource-count-value {
    color: var(--dark-color);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.group-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.resource-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.schedule-view-switcher,
.schedule-scope-switcher {
    flex-wrap: wrap;
}

.schedule-mobile-agenda {
    display: grid;
    gap: 1rem;
}

.schedule-mobile-day {
    display: grid;
    gap: 0.5rem;
}

.schedule-mobile-day-heading {
    color: var(--muted-color);
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
}

.schedule-mobile-day-list {
    display: grid;
    gap: 0.625rem;
}

.schedule-drag-feedback {
    margin-bottom: 0.75rem;
}

.schedule-pattern-option {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.schedule-pattern-option > div {
    margin: 0;
}

.schedule-pattern-option label {
    align-items: center;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
}

.schedule-pattern-option label:has(input:checked) {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--primary-color), transparent 85%);
}

.schedule-grid-scroll {
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 0.25rem;
    width: 100%;
}

.schedule-timetable-grid,
.schedule-room-grid {
    --schedule-grid-gap: 0.35rem;
    --schedule-header-row-height: 2.75rem;
    --schedule-hour-row-height: 4.5rem;
    --schedule-time-column: 3.75rem;
    background: transparent;
    display: grid;
    grid-auto-rows: var(--schedule-hour-row-height);
    gap: var(--schedule-grid-gap);
    grid-template-rows: var(--schedule-header-row-height);
    max-width: 100%;
    min-width: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.schedule-timetable-grid {
    grid-template-columns: var(--schedule-time-column) repeat(7, minmax(0, 1fr));
}

.schedule-room-grid {
    min-width: 0;
    width: 100%;
}

.schedule-timetable-grid::before,
.schedule-room-grid::before {
    background:
        linear-gradient(var(--border-color) 1px, transparent 1px),
        color-mix(in srgb, var(--border-color) 36%, transparent);
    background-size:
        100% var(--schedule-hour-row-height),
        100% 100%;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    content: "";
    inset:
        calc(var(--schedule-header-row-height) + var(--schedule-grid-gap))
        0
        0
        calc(var(--schedule-time-column) + var(--schedule-grid-gap));
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.schedule-timetable-grid::before {
    background:
        linear-gradient(var(--border-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-color) 1px, transparent 1px),
        color-mix(in srgb, var(--border-color) 36%, transparent);
    background-size:
        100% var(--schedule-hour-row-height),
        calc(100% / 7) 100%,
        100% 100%;
}

.schedule-grid-corner,
.schedule-grid-heading,
.schedule-grid-time {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--muted-color);
    display: flex;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.25rem 0.5rem;
}

.schedule-grid-corner,
.schedule-grid-heading {
    position: sticky;
    top: 0;
    z-index: 3;
}

.schedule-grid-corner,
.schedule-grid-time {
    grid-column: 1;
    left: 0;
    position: sticky;
    z-index: 4;
}

.schedule-grid-heading {
    justify-content: center;
    text-align: center;
}

.schedule-grid-time {
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 0.55rem;
}

.schedule-drop-zone {
    border-radius: 0.35rem;
    min-width: 0;
    outline: 1px dashed transparent;
    position: relative;
    z-index: 1;
}

.schedule-timetable-grid.is-dragging .schedule-drop-zone {
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    outline-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.schedule-timetable-grid.is-schedule-moving {
    opacity: 0.72;
    pointer-events: none;
}

.schedule-drop-zone.is-drag-over {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    outline-color: var(--primary-color);
}

.schedule-drop-zone.is-drop-rejected {
    background: color-mix(in srgb, var(--bs-danger) 18%, transparent);
    outline-color: var(--bs-danger);
}

.schedule-drop-zone.is-drag-over::after,
.schedule-drop-zone.is-drop-rejected::after {
    border-radius: 0.35rem;
    color: #fff;
    content: attr(data-preview-label);
    font-size: 0.72rem;
    font-weight: 700;
    inset: 0.35rem;
    line-height: 1.2;
    overflow: hidden;
    padding: 0.35rem;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 4;
}

.schedule-drop-zone.is-drag-over::after {
    background: color-mix(in srgb, var(--primary-color) 88%, #000);
}

.schedule-drop-zone.is-drop-rejected::after {
    background: color-mix(in srgb, var(--bs-danger) 88%, #000);
}

.schedule-card {
    align-self: start;
    background: color-mix(in srgb, var(--schedule-card-color, #1a73e8) 14%, var(--white-color));
    border: 1px solid color-mix(in srgb, var(--schedule-card-color, #1a73e8) 32%, var(--border-color));
    border-left: 4px solid var(--schedule-card-color, #1a73e8);
    border-radius: 0.4rem;
    box-shadow: 0 1px 2px var(--shadow-color-soft);
    display: flex;
    flex-direction: column;
    height: max(2rem, calc(var(--schedule-duration-height, 100%) - 0.25rem));
    justify-content: center;
    margin-left: var(--lane-offset);
    margin-top: var(--schedule-start-offset, 0);
    min-height: 2rem;
    min-width: 0;
    overflow: visible;
    padding: 0.25rem 0.45rem;
    position: relative;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
    width: calc(var(--lane-width) - 0.25rem);
    z-index: 2;
}

.schedule-card-color-0 {
    --schedule-card-color: #1a73e8;
}

.schedule-card-color-1 {
    --schedule-card-color: #188038;
}

.schedule-card-color-2 {
    --schedule-card-color: #c5221f;
}

.schedule-card-color-3 {
    --schedule-card-color: #9334e6;
}

.schedule-card-color-4 {
    --schedule-card-color: #f9ab00;
}

.schedule-card-color-5 {
    --schedule-card-color: #0097a7;
}

.schedule-card-color-6 {
    --schedule-card-color: #d93025;
}

.schedule-card-color-7 {
    --schedule-card-color: #5f6368;
}

.schedule-card[data-schedule-draggable] {
    cursor: grab;
}

.schedule-card[data-schedule-draggable]:active {
    cursor: grabbing;
}

.schedule-card.is-dragging {
    opacity: 0.55;
}

.schedule-card:hover,
.schedule-card:focus-within,
.schedule-card:focus,
.schedule-card.is-open {
    background: color-mix(in srgb, var(--schedule-card-color, #1a73e8) 22%, var(--white-color));
    border-color: color-mix(in srgb, var(--schedule-card-color, #1a73e8) 48%, var(--border-color));
    box-shadow: 0 0.5rem 1rem var(--shadow-color);
    transform: translateY(-1px);
    z-index: 30;
}

.schedule-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.schedule-card-conflict {
    background: color-mix(in srgb, #ffc107 18%, var(--white-color));
    border-color: color-mix(in srgb, #ffc107 58%, var(--border-color));
    border-left-color: #ffc107;
}

.schedule-card-main {
    background: transparent;
    border: 0;
    color: var(--dark-color);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    padding: 0;
    text-align: start;
    text-decoration: none;
    width: 100%;
}

.schedule-card-main:hover,
.schedule-card-main:focus {
    color: var(--primary-color);
}

.schedule-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-card-mobile-meta {
    display: none;
}

.schedule-card-mobile-label {
    color: var(--muted-color);
    font-weight: 600;
}

.schedule-card-popover {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
    box-shadow: 0 1rem 2rem var(--shadow-color);
    color: var(--dark-color);
    display: none;
    inline-size: min(18rem, 82vw);
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-start: 0;
    opacity: 0;
    padding: 0.75rem;
    pointer-events: none;
    position: absolute;
    transform: translateY(-0.25rem);
    transition:
        opacity 0.14s ease,
        transform 0.14s ease,
        visibility 0.14s ease;
    visibility: hidden;
    z-index: 50;
}

.schedule-card-popover-up {
    inset-block-end: calc(100% + 0.4rem);
    inset-block-start: auto;
    transform: translateY(0.25rem);
}

.schedule-card-popover-end {
    inset-inline-end: 0;
    inset-inline-start: auto;
}

.schedule-card:hover .schedule-card-popover,
.schedule-card:focus-within .schedule-card-popover,
.schedule-card:focus .schedule-card-popover,
.schedule-card.is-open .schedule-card-popover {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

.schedule-popover-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
}

.schedule-popover-details {
    display: grid;
    gap: 0.25rem 0.75rem;
    grid-template-columns: max-content minmax(0, 1fr);
    margin-bottom: 0;
}

.schedule-popover-details dt {
    color: var(--muted-color);
    font-size: 0.75rem;
    font-weight: 600;
}

.schedule-popover-details dd {
    font-size: 0.78rem;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.schedule-popover-conflict {
    margin-top: 0.5rem;
}

.schedule-card-actions {
    display: flex;
    gap: 0.25rem;
}

.schedule-card-actions .btn {
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-padding-y: 0.2rem;
    line-height: 1;
}

.schedule-card-drag-image {
    box-sizing: border-box;
    inline-size: 14rem;
    opacity: 0.92;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

.schedule-empty-state {
    border: 1px dashed var(--border-color);
    border-radius: 0.5rem;
}

.dashboard-metric-link {
    display: block;
    height: 100%;
}

.dashboard-metric-link .block-content {
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.dashboard-metric-link:hover .block-content,
.dashboard-metric-link:focus-visible .block-content {
    box-shadow: 0 0.5rem 1rem var(--shadow-color);
    transform: translateY(-1px);
}

@media (max-width: 1199.98px) {
    .navbar-global-search {
        flex: 1 1 auto;
        inline-size: min(22rem, 34vw);
        inset-inline-start: auto;
        max-inline-size: 22rem;
        min-inline-size: 12rem;
        position: relative;
        transform: none;
    }

    .navbar-global-search.is-open,
    .navbar-global-search:focus-within {
        inline-size: min(24rem, 38vw);
    }
}

@media (max-width: 991.98px) {
    .navbar-global-search {
        inline-size: 100%;
        inset-inline-start: auto;
        max-inline-size: 100%;
        min-inline-size: 0;
        order: 3;
        position: relative;
        transform: none;
        width: 100%;
    }

    .navbar-global-search.is-open,
    .navbar-global-search:focus-within {
        inline-size: 100%;
    }

    .global-search-panel {
        inset-inline: 0;
        max-height: min(70vh, 30rem);
    }

    .attendance-toolbar-main {
        align-items: stretch;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .attendance-toolbar-main .btn {
        width: 100%;
        justify-content: center;
    }

    .attendance-group-field,
    .attendance-status-field {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .schedule-mobile-agenda .schedule-card {
        height: auto;
        margin-left: 0;
        margin-top: 0;
        min-height: auto;
        padding: 0.75rem;
        width: 100%;
    }

    .schedule-mobile-agenda .schedule-card-title {
        font-size: 0.95rem;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .schedule-card-mobile-meta {
        color: var(--dark-color);
        display: grid;
        gap: 0.25rem;
        line-height: 1.35;
        margin-top: 0.45rem;
    }

    .schedule-card-mobile-meta > span {
        display: flex;
        gap: 0.35rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .schedule-card-popover {
        box-shadow: 0 0.375rem 1rem var(--shadow-color);
        inline-size: 100%;
        inset: auto;
        margin-top: 0.75rem;
        position: static;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .staff-toolbar-main,
    .student-toolbar-main,
    .module-toolbar-main,
    .room-toolbar-main,
    .enrollment-toolbar-main,
    .group-toolbar-main,
    .schedule-toolbar-main,
    .invitation-toolbar-main,
    .dashboard-toolbar-main,
    .attendance-toolbar-main {
        align-items: stretch;
        flex-direction: column;
    }

    .staff-filter-toggle,
    .student-filter-toggle,
    .module-filter-toggle,
    .room-filter-toggle,
    .enrollment-filter-toggle,
    .group-filter-toggle,
    .schedule-filter-toggle,
    .invitation-filter-toggle,
    .dashboard-filter-toggle,
    .staff-reset-link,
    .student-reset-link,
    .module-reset-link,
    .room-reset-link,
    .enrollment-reset-link,
    .group-reset-link,
    .schedule-reset-link,
    .invitation-reset-link,
    .dashboard-reset-link,
    .attendance-reset-link {
        width: 100%;
        justify-content: center;
    }

    .staff-search-field,
    .student-search-field,
    .module-search-field,
    .room-search-field,
    .enrollment-search-field,
    .group-search-field,
    .list-search-field--integrated,
    .group-search-field--integrated,
    .schedule-search-field,
    .invitation-search-field,
    .dashboard-primary-filter-field,
    .attendance-status-field {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .group-page-header .btn {
        width: 100%;
    }

    .list-page-header .btn {
        width: 100%;
    }

    .group-table {
        border-collapse: separate;
        border-spacing: 0 0.75rem;
    }

    .group-table thead {
        display: none;
    }

    .group-table,
    .group-table tbody,
    .group-table tr,
    .group-table td {
        display: block;
        width: 100%;
    }

    .group-table tr {
        background-color: var(--white-color);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.75rem var(--shadow-color-soft);
        padding: 0.75rem;
    }

    .group-table td {
        align-items: flex-start;
        border: 0;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 0.45rem 0;
        text-align: right !important;
    }

    .group-table td::before {
        color: var(--muted-color);
        content: attr(data-label);
        flex: 0 0 6rem;
        font-size: 0.8rem;
        font-weight: 700;
        text-align: left;
    }

    .group-table .group-primary-cell {
        display: block;
        text-align: left !important;
    }

    .group-table .group-primary-cell::before {
        content: "";
        display: none;
    }

    .group-row-actions {
        justify-content: flex-end;
    }

    .resource-table {
        border-collapse: separate;
        border-spacing: 0 0.75rem;
    }

    .resource-table thead {
        display: none;
    }

    .resource-table,
    .resource-table tbody,
    .resource-table tr,
    .resource-table td {
        display: block;
        width: 100%;
    }

    .resource-table tr {
        background-color: var(--white-color);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.75rem var(--shadow-color-soft);
        padding: 0.75rem;
    }

    .resource-table td {
        align-items: flex-start;
        border: 0;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 0.45rem 0;
        text-align: right !important;
    }

    .resource-table td::before {
        color: var(--muted-color);
        content: attr(data-label);
        flex: 0 0 6rem;
        font-size: 0.8rem;
        font-weight: 700;
        text-align: left;
    }

    .resource-table .resource-primary-cell {
        display: block;
        text-align: left !important;
    }

    .resource-table .resource-primary-cell::before {
        content: "";
        display: none;
    }

    .resource-row-actions {
        justify-content: flex-end;
    }

    .list-skeleton-overlay {
        padding: 0.75rem;
    }

    .list-skeleton-table {
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        display: grid;
        gap: 0.75rem;
        overflow: visible;
    }

    .list-skeleton-row {
        background-color: var(--white-color);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        box-shadow: 0 0.25rem 0.75rem var(--shadow-color-soft);
        display: block;
        padding: 0.875rem;
    }

    .list-skeleton-cell {
        margin-bottom: 0.7rem;
    }

    .list-skeleton-cell:last-child {
        margin-bottom: 0;
    }

    .list-skeleton-actions {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .attendance-mark-toolbar,
    .attendance-mark-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .attendance-bulk-actions {
        width: 100%;
    }

    .attendance-mark-toolbar .btn,
    .attendance-mark-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .attendance-bulk-actions .btn {
        flex: 1 1 0;
        width: auto;
    }

    .attendance-mark-table-wrap {
        overflow-x: visible;
    }

    .attendance-mark-table,
    .attendance-mark-table tbody,
    .attendance-mark-table tr,
    .attendance-mark-table td {
        display: block;
        width: 100%;
    }

    .attendance-mark-table thead {
        display: none;
    }

    .attendance-mark-table tr {
        background-color: var(--white-color);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        box-shadow: 0 0 0.25rem 0.15rem var(--shadow-color-soft);
        margin-bottom: 1rem;
        padding: 0.75rem;
    }

    .attendance-mark-table td {
        border-bottom: 0;
        padding: 0.45rem 0;
    }

    .attendance-mark-table td::before {
        color: var(--muted-color);
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .attendance-status-control {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .attendance-status-control .btn {
        min-width: 0;
        width: 100%;
    }

    .attendance-note {
        min-width: 0;
        width: 100%;
    }

    .attendance-note-toggle {
        width: 100%;
    }

    .attendance-mark-actions {
        background-color: var(--white-color);
        bottom: 0;
        margin: 1rem -1.5rem -1.5rem;
        padding: 0.75rem 1.5rem;
        position: sticky;
        z-index: 10;
    }

    .schedule-timetable-grid,
    .schedule-room-grid {
        grid-auto-rows: minmax(2.65rem, auto);
    }

    .schedule-timetable-grid {
        grid-template-columns: minmax(3.25rem, 0.5fr) repeat(7, minmax(0, 1fr));
    }

    .schedule-card {
        padding: 0.35rem;
    }

    .schedule-card-title {
        font-size: 0.74rem;
    }

    .schedule-grid-scroll {
        overflow-x: hidden;
    }

    .schedule-timetable-grid,
    .schedule-room-grid {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .schedule-timetable-grid::before,
    .schedule-room-grid::before {
        display: none;
    }

    .schedule-grid-corner,
    .schedule-grid-heading,
    .schedule-grid-time {
        display: none;
    }

    .schedule-card {
        height: auto;
        margin-left: 0;
        margin-top: 0;
        width: 100%;
    }

    .schedule-card-popover {
        inline-size: 100%;
    }
}

.img-thumbnail {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.375rem 0.25rem var(--shadow-color);
}

.workspace-logo {
    object-fit: contain;
    object-position: center;
}

.workspace-logo {
    width: 4rem;
    height: 4rem;
    padding: 0.375rem;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem var(--shadow-color-soft);
}

.portal-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.portal-hero,
.portal-empty-state,
.portal-workspace-card {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 0.375rem 1.25rem var(--shadow-color-soft);
}

.portal-hero {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.5rem;
}

.portal-title {
    color: var(--dark-color);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.6rem;
}

.portal-subtitle {
    color: var(--muted-color);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 44rem;
}

.portal-context-note {
    align-items: flex-start;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--muted-color);
    display: inline-flex;
    gap: 0.65rem;
    max-width: 42rem;
    padding: 0.75rem 0.9rem;
}

.portal-context-note i {
    color: var(--primary-color);
    margin-top: 0.15rem;
}

.portal-context-note div {
    display: grid;
    gap: 0.15rem;
}

.portal-context-note strong {
    color: var(--dark-color);
}

.portal-eyebrow {
    color: var(--primary-color);
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.portal-empty-state .btn,
.portal-workspace-actions .btn {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    justify-content: center;
}

.portal-section-header {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
}

.portal-workspace-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.portal-workspace-card {
    min-width: 0;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.portal-workspace-card:has(.portal-workspace-title-link:hover),
.portal-workspace-card:has(.portal-workspace-title-link:focus-visible),
.portal-workspace-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0.45rem 1.4rem var(--shadow-color-soft);
    transform: translateY(-1px);
}

.portal-workspace-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 1.25rem;
}

.portal-workspace-main {
    align-items: center;
    display: flex;
    gap: 1rem;
    min-width: 0;
}

.portal-workspace-placeholder {
    align-items: center;
    color: var(--primary-color);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.35rem;
    justify-content: center;
}

.portal-workspace-copy {
    min-width: 0;
}

.portal-workspace-copy h3 {
    color: var(--dark-color);
    overflow-wrap: anywhere;
}

.portal-workspace-title-link {
    color: var(--dark-color);
    text-decoration: none;
}

.portal-workspace-title-link:hover,
.portal-workspace-title-link:focus-visible {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.portal-workspace-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.portal-role-badge {
    border: 1px solid var(--border-color);
    color: var(--primary-color) !important;
}

.portal-owner-badge {
    background-color: var(--primary-color);
    color: var(--on-primary-color);
}

.portal-workspace-meta {
    border-top: 1px solid var(--border-color);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
    padding-top: 1rem;
}

.portal-workspace-meta dt {
    color: var(--muted-color);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.portal-workspace-meta dd {
    color: var(--dark-color);
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.portal-workspace-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

.portal-workspace-actions .btn-primary {
    flex: 1 1 11rem;
}

.portal-empty-state {
    align-items: center;
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
}

.portal-empty-icon {
    align-items: center;
    background-color: var(--subtle-primary-bg);
    border-radius: 0.75rem;
    color: var(--primary-color);
    display: inline-flex;
    flex: 0 0 3rem;
    font-size: 1.4rem;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.profile-card,
.profile-form-section {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.375rem 0.25rem var(--shadow-color-soft);
}

.choices {
    color: var(--dark-color);
    font-size: inherit;
    margin-bottom: 0;
    position: relative;
    width: 100%;
}

.choices__inner {
    align-items: center;
    display: flex;
    width: 100%;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    color: var(--dark-color);
    background-color: var(--bs-body-bg, var(--white-color));
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.5;
}

.choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 0.375rem;
}

.choices__list--single {
    align-items: center;
    display: flex;
    min-height: 1.5rem;
    padding: 0;
    width: 100%;
}

.choices__list--single .choices__item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choices__placeholder {
    color: var(--muted-color);
    opacity: 1;
}

.choices[data-type*="select-one"]::after {
    top: 50%;
    right: 0.75rem;
    margin-top: 0;
    border-color: var(--dark-color) transparent transparent;
    transform: translateY(-50%);
}

.choices[data-type*="select-one"].is-open::after {
    margin-top: 0;
    border-color: transparent transparent var(--dark-color);
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--subtle-primary-bg);
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    z-index: 1060;
    color: var(--dark-color);
    background-color: var(--white-color);
    border-color: var(--border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem var(--shadow-color-soft);
}

.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
    margin-bottom: 0;
    padding: 0.375rem 0.75rem;
    color: var(--dark-color);
    background-color: var(--bs-body-bg, var(--white-color));
    border-color: var(--border-color);
}

.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
    padding-right: 0.75rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    color: var(--dark-color);
    background-color: var(--row-hover-color);
}

.choices:has(select.is-invalid) .choices__inner {
    border-color: var(--danger-color);
}

.choices:has(select.is-invalid).is-focused .choices__inner {
    box-shadow: 0 0 0 0.25rem var(--danger-subtle-bg);
}

[data-bs-theme="dark"] .ts-control,
[data-bs-theme="dark"] .ts-dropdown,
[data-bs-theme="dark"] .ts-dropdown .active,
[data-bs-theme="dark"] .ts-dropdown .create {
    color: var(--bs-body-color);
    background-color: var(--white-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ts-dropdown .active {
    background-color: var(--row-hover-color);
}

[data-bs-theme="dark"] .ts-control input {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-control input::placeholder {
    color: var(--muted-color);
}

[data-bs-theme="dark"] .flatpickr-calendar,
[data-bs-theme="dark"] .flatpickr-time,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year,
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--dark-color);
    background: var(--white-color);
}

[data-bs-theme="dark"] .flatpickr-calendar {
    border: 1px solid var(--border-color);
    box-shadow: 0 1rem 2rem var(--shadow-color);
}

[data-bs-theme="dark"] .flatpickr-time,
[data-bs-theme="dark"] .flatpickr-time input,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--dark-color);
}

[data-bs-theme="dark"] .flatpickr-time input:hover,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover,
[data-bs-theme="dark"] .flatpickr-time input:focus {
    background: var(--background-color);
}

.profile-avatar {
    width: 9.5rem;
    height: 9.5rem;
    object-fit: cover;
    object-position: center;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    box-shadow: 0 0.375rem 1rem var(--shadow-color);
}

.profile-logo {
    width: 11.25rem;
    height: 11.25rem;
    object-fit: contain;
    object-position: center;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: 0 0.375rem 1rem var(--shadow-color);
}

.profile-details dt,
.profile-details dd {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    overflow-wrap: anywhere;
}

.profile-details dt:first-of-type,
.profile-details dd:first-of-type {
    padding-top: 0;
}

.profile-details dt:last-of-type,
.profile-details dd:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-details dt {
    color: var(--muted-color);
    font-weight: 500;
}

.profile-details dd {
    margin-bottom: 0;
}

.profile-long-value {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.preferences-form {
    align-items: start;
}

.preferences-field {
    display: flex;
    flex-direction: column;
}

.preferences-field .form-select {
    min-height: calc(1.5em + 0.75rem + 2px);
}

.preferences-field .form-text {
    min-height: 2.5rem;
}

.preferences-actions {
    padding-top: 2rem;
}

.preferences-actions .btn {
    min-height: calc(1.5em + 0.75rem + 2px);
}

.preferences-unsaved {
    align-items: center;
    color: var(--muted-color);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.preferences-unsaved span {
    align-items: center;
    display: inline-flex;
    gap: 0.375rem;
}

.preference-select {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        sans-serif;
}

.theme-preview {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 5%, var(--white-color));
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
}

.theme-preview.is-previewing {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
}

.theme-preview-icon {
    align-items: center;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--primary-color);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.theme-preview-copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.theme-preview-title {
    color: var(--dark-color);
    font-weight: 600;
}

.theme-preview-description {
    color: var(--muted-color);
    font-size: 0.875rem;
}

@media (max-width: 1199.98px) {
    .preferences-field .form-text {
        min-height: 0;
    }

    .preferences-actions {
        padding-top: 0;
    }
}

.public-language-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.auth-page {
    background: var(--background-color);
}

.auth-navbar {
    background-color: var(--white-color);
    border-bottom: 1px solid var(--border-color);
}

.auth-navbar-inner {
    min-height: 4rem;
    padding-inline: 1.5rem;
}

.auth-brand {
    color: var(--dark-color);
    font-weight: 600;
}

.auth-brand:hover,
.auth-brand:focus {
    color: var(--primary-color);
}

.auth-navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.auth-secondary-link {
    white-space: nowrap;
}

.auth-secondary-link.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.auth-secondary-link.btn-outline-primary:hover,
.auth-secondary-link.btn-outline-primary:focus {
    color: var(--on-primary-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 4rem);
    padding: 2rem 1.5rem;
}

.auth-container {
    width: 100%;
    max-width: 26.25rem;
    margin-inline: auto;
}

.auth-container--signup {
    max-width: 30rem;
}

.auth-card {
    width: 100%;
    padding: 1.5rem;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.375rem 0.25rem var(--shadow-color);
}

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

.auth-card .form-control,
.auth-card .form-select {
    color: var(--dark-color);
    background-color: var(--background-color);
    border-color: var(--border-color);
}

.auth-card .form-control::placeholder {
    color: var(--muted-color);
    opacity: 1;
}

.auth-card .form-control:focus,
.auth-card .form-select:focus {
    color: var(--dark-color);
    background-color: var(--background-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem var(--subtle-primary-bg);
}

.auth-card .form-check-input {
    background-color: var(--background-color);
    border-color: var(--border-color);
}

.auth-card .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.auth-card .form-text {
    color: var(--muted-color);
}

.auth-card .invalid-feedback,
.auth-card .errorlist {
    color: var(--danger-color);
}

.auth-card .alert-danger {
    color: var(--danger-color);
    background-color: var(--danger-subtle-bg);
    border-color: color-mix(in srgb, var(--danger-color) 40%, var(--border-color));
}

.auth-title {
    margin-bottom: 0.5rem;
    color: var(--dark-color);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
}

.auth-subtitle {
    margin-bottom: 0;
    color: var(--muted-color);
}

.auth-confirmation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    color: var(--success-color);
    background-color: var(--success-subtle-bg);
    border-radius: 50%;
    font-size: 0.875rem;
    vertical-align: middle;
}

.auth-confirmation-copy {
    margin-bottom: 1rem;
    color: var(--muted-color);
}

.auth-submit {
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.25rem;
}

.auth-card-footer {
    margin: 1rem 0 0;
    color: var(--muted-color);
    text-align: center;
}

.auth-secondary-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
}

.auth-card .asteriskField {
    display: none;
}

.auth-password-field {
    position: relative;
}

.auth-password-field .form-control {
    padding-right: 3rem;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--muted-color);
    border: 0;
    transform: translateY(-50%);
}

.auth-password-toggle:hover,
.auth-password-toggle:focus {
    color: var(--primary-color);
    background-color: var(--subtle-primary-bg);
}

.auth-password-checklist {
    display: none;
    margin: 0.5rem 0 0;
    padding: 0.625rem 0.75rem;
    color: var(--muted-color);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}

.auth-password-checklist.is-visible {
    display: block;
}

.auth-password-checklist-title {
    margin-bottom: 0.375rem;
    color: var(--dark-color);
    font-weight: 500;
}

.auth-password-checklist-list {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.auth-password-checklist-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.auth-password-checklist-item i {
    width: 0.875rem;
    color: var(--muted-color);
    font-size: 0.75rem;
}

.auth-password-checklist-item.is-met {
    color: var(--success-color);
}

.auth-password-checklist-item.is-met i {
    color: var(--success-color);
}

.auth-password-match {
    display: none;
    align-items: center;
    gap: 0.3rem;
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
}

.auth-password-match.is-visible {
    display: flex;
}

.auth-password-match.is-match {
    color: var(--success-color);
}

.auth-password-match.is-mismatch {
    color: var(--danger-color);
}

.auth-password-match i {
    width: 0.75rem;
    font-size: 0.6875rem;
}

.auth-page #djDebug,
.auth-page #djDebugToolbar {
    display: none !important;
}

@media (max-width: 575.98px) {
    .auth-navbar-inner {
        padding-inline: 1.5rem;
    }

    .auth-navbar-actions {
        gap: 0.5rem;
    }

    .auth-main {
        align-items: flex-start;
        padding: 1.5rem;
    }

    .auth-container {
        max-width: none;
    }
}

/* Layout for admin dashboard skeleton */
main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    width: 100%;
}

/* Sidebar Elements Style */
#sidebarMenu .navbar-nav {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    margin-left: 0;
}

.offcanvas-title {
    color: var(--dark-color);
}

#sidebarMenu a.nav-link {
    align-items: center;
    border-left: 3px solid transparent;
    display: flex;
    gap: 0.25rem;
    padding: 0.625rem 1.625rem;
    color: var(--dark-color);
    font-size: 0.875rem;
    transition:
        0.3s color ease-in-out,
        0.2s background-color ease-in-out,
        0.2s border-color ease-in-out;
}

#sidebarMenu .sidebar-section {
    margin-top: 0.75rem;
}

#sidebarMenu .sidebar-section-accordion {
    min-width: 0;
}

#sidebarMenu .sidebar-section-heading {
    margin: 0;
}

#sidebarMenu .sidebar-section-toggle {
    margin: 0 1.625rem 0.35rem;
    color: var(--muted-color);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#sidebarMenu .sidebar-section-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    min-height: 2rem;
    padding: 0.25rem 0;
    text-align: left;
    width: calc(100% - 3.25rem);
}

#sidebarMenu .sidebar-section-toggle:hover,
#sidebarMenu .sidebar-section-toggle:focus-visible {
    color: var(--primary-color);
}

#sidebarMenu .sidebar-section-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--subtle-primary-bg);
}

#sidebarMenu .sidebar-section > .collapsing {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 0;
    overflow: hidden;
    padding-left: 0;
    width: 100%;
}

#sidebarMenu .sidebar-section > .collapsing .nav-item,
#sidebarMenu .sidebar-section > .collapsing .nav-link {
    flex: 0 0 auto;
    width: 100%;
}

#sidebarMenu .sidebar-disabled-link {
    padding: 0.625rem 1.625rem;
    color: var(--muted-color);
    cursor: default;
    opacity: 0.65;
}

#sidebarMenu .sidebar-empty-state {
    color: var(--muted-color);
    margin: 1rem;
    padding: 1rem;
    text-align: left;
}

#sidebarMenu .sidebar-empty-icon {
    align-items: center;
    background-color: var(--subtle-primary-bg);
    border-radius: 0.6rem;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 1rem;
    height: 2.4rem;
    justify-content: center;
    margin-bottom: 0.75rem;
    width: 2.4rem;
}

#sidebarMenu .sidebar-empty-title {
    color: var(--dark-color);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

#sidebarMenu .sidebar-empty-text {
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 0.9rem;
}

#navbarMenu a.nav-link {
    color: var(--dark-color);
    transition: 0.3s color ease-in-out;
}

#sidebarMenu a.nav-link:hover,
#navbarMenu a.nav-link:hover {
    color: var(--primary-color);
}

#sidebarMenu a.nav-link.active {
    background-color: var(--subtle-primary-bg);
    border-left-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 700;
}

#sidebarMenu a.nav-link.active i {
    color: inherit;
}

.nav-link:not(.collapsed) .arrow-icon {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

#sidebarMenu .sidebar-section-toggle:not(.collapsed) .arrow-icon {
    transform: rotate(180deg);
}

.arrow-icon {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

/* Navbar */
.navbar-menu-button,
.navbar-avatar-toggle,
.navbar-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
}

.navbar-workspace-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    max-width: min(42vw, 18rem);
}

.navbar-workspace-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-context-menu {
    min-width: 17rem;
}

.avatar {
    height: 40px;
    width: 40px;
    object-fit: cover;
    object-position: center;
    background-color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 575.98px) {
    .portal-hero,
    .portal-empty-state {
        align-items: stretch;
        flex-direction: column;
    }

    .portal-empty-state .btn {
        width: 100%;
    }

    .portal-section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .portal-workspace-main {
        align-items: flex-start;
    }

    .portal-workspace-meta {
        grid-template-columns: 1fr;
    }

    .portal-workspace-actions .btn {
        width: 100%;
    }

    .navbar-workspace-toggle {
        max-width: 44vw;
        padding-inline: 0.65rem;
    }

    .navbar-context-menu {
        min-width: 15rem;
    }
}