:root {
    --bg: #f2ebde;
    --surface: #ffffff;
    --surface-subtle: #e4eef1;
    --line: #d7cdbc;
    --text: #2a4640;
    --muted: #4b4f50;
    --accent: #ab3645;
    --accent-strong: #8f1e53;
    --accent-soft: #f4eee3;
    --teal: #007482;
    --teal-dark: #2a4640;
    --warning: #8f1e53;
    --success: #007482;
    --danger: #c10252;
    --section-shadow: 0 10px 22px rgba(42, 70, 64, 0.12);
    --section-shadow-soft: 0 6px 14px rgba(42, 70, 64, 0.08);
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

body {
    font-size: 15px;
    line-height: 1.45;
}

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

/* Blazor Server can briefly show a reconnect modal when the public SignalR
   connection blips. The default modal dims the whole page, which feels like
   a distracting flash. Keep quick reconnects invisible and show only a small
   status pill if the issue persists. */
#components-reconnect-modal {
    display: none !important;
    position: fixed !important;
    inset: auto 18px 18px auto !important;
    z-index: 2147483647 !important;
    width: auto !important;
    height: auto !important;
    max-width: min(360px, calc(100vw - 36px)) !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 116, 130, .22) !important;
    border-radius: 999px !important;
    background: rgba(255, 253, 247, .96) !important;
    box-shadow: 0 10px 24px rgba(42, 70, 64, .16) !important;
    color: var(--text) !important;
    font: 700 13px/1.2 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    text-align: left !important;
    pointer-events: none !important;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
}

#components-reconnect-modal.components-reconnect-show {
    opacity: 0;
    animation: reconnect-pill-reveal 1.8s ease forwards;
}

#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    border-color: rgba(171, 54, 69, .35) !important;
    color: var(--accent-strong) !important;
    opacity: 1;
    animation: none;
}

#components-reconnect-modal.components-reconnect-show::before {
    content: "Reconnecting…";
}

#components-reconnect-modal.components-reconnect-failed::before {
    content: "Connection lost. Refresh if needed.";
}

#components-reconnect-modal.components-reconnect-rejected::before {
    content: "Connection expired. Refresh the page.";
}

#components-reconnect-modal::after {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--teal);
    box-shadow: 0 0 0 4px rgba(0, 116, 130, .1);
}

#components-reconnect-modal.components-reconnect-failed::after,
#components-reconnect-modal.components-reconnect-rejected::after {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(171, 54, 69, .12);
}

#components-reconnect-modal > * {
    display: none !important;
}

@keyframes reconnect-pill-reveal {
    0%,
    72% {
        opacity: 0;
        transform: translateY(4px);
    }

    100% {
        opacity: .95;
        transform: translateY(0);
    }
}

button,
a {
    font: inherit;
}

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

h1,
h2,
h3,
.brand strong,
.metric-card strong,
.module-title h3 {
    font-family: RobotoSlab, Georgia, serif;
}

h1:focus {
    outline: none;
}

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

.sidebar-toggle-input,
.compact-toggle-input {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sidebar-toggle-input:checked + .app-shell,
html.sidebar-collapsed .app-shell {
    grid-template-columns: 82px minmax(0, 1fr);
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-color: rgba(228, 238, 241, 0.58) rgba(255, 255, 255, 0.04);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    padding: 22px 18px;
    background: var(--teal-dark);
    color: #ffffff;
    transition:
        padding .35s ease,
        width .35s ease;
}

.sidebar::-webkit-scrollbar {
    width: 11px;
}

.sidebar::-webkit-scrollbar-track {
    margin-block: 10px;
    border-left: 1px solid rgba(228, 238, 241, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.sidebar::-webkit-scrollbar-thumb {
    min-height: 64px;
    border: 3px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            rgba(228, 238, 241, 0.82),
            rgba(120, 171, 169, 0.72)
        )
        padding-box;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            rgba(171, 205, 203, 0.96)
        )
        padding-box;
}

.sidebar::-webkit-scrollbar-thumb:active {
    background: var(--accent) padding-box;
}

.sidebar::-webkit-scrollbar-corner {
    background: transparent;
}

.sidebar-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    min-width: 0;
}

.brand-mark {
    display: inline-block;
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
    flex: 0 0 auto;
    overflow: hidden;
}

.logo-square {
    display: block;
    position: absolute;
    opacity: .95;
}

.square-one {
    width: 9px;
    height: 9px;
    left: 4px;
    top: 11px;
    background: #e9505d;
}

.square-two {
    width: 15px;
    height: 15px;
    left: 17px;
    top: 5px;
    background: #efb4c0;
}

.square-three {
    width: 13px;
    height: 13px;
    left: 25px;
    top: 13px;
    background: #e9505d;
}

.square-four {
    width: 8px;
    height: 8px;
    right: 5px;
    top: 6px;
    background: #538778;
}

.square-five {
    width: 17px;
    height: 17px;
    left: 9px;
    top: 23px;
    background: #8eb9bd;
}

.square-six {
    width: 13px;
    height: 13px;
    right: 8px;
    top: 24px;
    background: #7ba79f;
}

.square-seven {
    width: 11px;
    height: 11px;
    left: 20px;
    bottom: 5px;
    background: #d19672;
}

.square-eight {
    width: 10px;
    height: 10px;
    right: 0;
    bottom: 3px;
    background: #c38968;
}

.brand strong,
.brand small {
    display: block;
}

.brand-text,
.nav-label,
.sidebar-footer {
    transition:
        opacity .25s ease,
        transform .35s ease,
        max-width .35s ease;
}

.brand small {
    margin-top: 2px;
    color: #dce6e5;
}

.sidebar-toggle {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    font-weight: 800;
    line-height: 1;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
}

.expand-symbol {
    display: none;
}

.sidebar-toggle-input:checked + .app-shell .collapse-symbol,
html.sidebar-collapsed .collapse-symbol {
    display: none;
}

.sidebar-toggle-input:checked + .app-shell .expand-symbol,
html.sidebar-collapsed .expand-symbol {
    display: inline;
}

.nav-list {
    display: grid;
    gap: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 4px;
    color: #dce6e5;
    overflow: hidden;
}

.nav-item:hover,
.nav-item.active {
    background: var(--accent);
    color: #ffffff;
}

.nav-icon {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--icon-color, #dce6e5);
    flex: 0 0 auto;
}

.nav-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.nav-icon-dashboard {
    --icon-color: #e4eef1;
}

.nav-icon-modules {
    --icon-color: #efb4c0;
}

.nav-icon-fields {
    --icon-color: #d19672;
}

.nav-icon-hr {
    --icon-color: #8eb9bd;
}

.nav-icon-people {
    --icon-color: #e9505d;
}

.nav-icon-company {
    --icon-color: #7ba79f;
}

.nav-icon-course {
    --icon-color: #ece3ce;
}

.nav-icon-enrolment {
    --icon-color: #d19672;
}

.nav-icon-users {
    --icon-color: #efb4c0;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.sidebar-footer {
    display: grid;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #dce6e5;
    font-size: 13px;
}

.user-settings-panel {
    display: grid;
    gap: 12px;
    margin-top: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    padding: 12px;
}

.user-settings-panel + .sidebar-footer {
    margin-top: 0;
}

.user-settings-header,
.density-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.settings-avatar {
    display: inline-grid;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    max-width: 34px;
    max-height: 34px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    flex: 0 0 auto;
    overflow: hidden;
}

.settings-avatar svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.settings-avatar img {
    display: block;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    min-height: 34px;
    max-width: 34px;
    max-height: 34px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.settings-avatar > span {
    font-size: 11px;
    font-weight: 800;
}

.settings-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.settings-copy strong {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.15;
}

.settings-copy small {
    color: #dce6e5;
    font-size: 11px;
    line-height: 1.25;
}

.density-toggle {
    justify-content: space-between;
    cursor: pointer;
}

.sidebar-context-action {
    display: flex;
    width: 100%;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    padding: 8px;
    text-align: left;
}

.sidebar-context-action:hover {
    background: rgba(255, 255, 255, 0.14);
}

.toggle-switch {
    display: inline-flex;
    width: 36px;
    height: 20px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    padding: 2px;
    transition:
        background .2s ease,
        border-color .2s ease;
}

.toggle-switch::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #ffffff;
    transform: translateX(0);
    transition: transform .2s ease;
}

.compact-toggle-input:checked ~ .density-toggle .toggle-switch,
html.compact-mode .toggle-switch {
    border-color: rgba(255, 255, 255, 0.42);
    background: var(--accent);
}

.compact-toggle-input:checked ~ .density-toggle .toggle-switch::before,
html.compact-mode .toggle-switch::before {
    transform: translateX(16px);
}

.sidebar-toggle-input:checked + .app-shell .sidebar,
html.sidebar-collapsed .sidebar {
    gap: 18px;
    padding: 18px 12px;
}

.sidebar-toggle-input:checked + .app-shell .sidebar-top,
html.sidebar-collapsed .sidebar-top {
    grid-template-columns: 1fr;
    justify-items: center;
}

.sidebar-toggle-input:checked + .app-shell .brand,
html.sidebar-collapsed .brand {
    justify-content: center;
}

.sidebar-toggle-input:checked + .app-shell .brand-text,
.sidebar-toggle-input:checked + .app-shell .nav-label,
.sidebar-toggle-input:checked + .app-shell .sidebar-footer,
html.sidebar-collapsed .brand-text,
html.sidebar-collapsed .nav-label,
html.sidebar-collapsed .sidebar-footer {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-8px);
    white-space: nowrap;
}

.sidebar-toggle-input:checked + .app-shell .nav-list,
html.sidebar-collapsed .nav-list {
    justify-items: center;
}

.sidebar-toggle-input:checked + .app-shell .nav-item,
html.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 8px;
    width: 42px;
}

.sidebar-toggle-input:checked + .app-shell .sidebar-footer,
html.sidebar-collapsed .sidebar-footer {
    display: none;
}

.sidebar-toggle-input:checked + .app-shell .user-settings-panel,
html.sidebar-collapsed .user-settings-panel {
    justify-items: center;
    gap: 10px;
    padding: 10px 8px;
}

.sidebar-toggle-input:checked + .app-shell .user-settings-header,
.sidebar-toggle-input:checked + .app-shell .density-toggle,
html.sidebar-collapsed .user-settings-header,
html.sidebar-collapsed .density-toggle {
    justify-content: center;
}

.sidebar-toggle-input:checked + .app-shell .settings-copy,
html.sidebar-collapsed .settings-copy {
    display: none;
}

.sidebar-toggle-input:checked + .app-shell .sidebar-context-action,
html.sidebar-collapsed .sidebar-context-action {
    min-height: 34px;
    justify-content: center;
}

.sidebar-toggle-input:checked + .app-shell .sidebar-context-action::before,
html.sidebar-collapsed .sidebar-context-action::before {
    content: "!";
    font-weight: 800;
}

.content {
    display: grid;
    align-content: start;
    gap: 22px;
    padding: 30px;
    background:
        linear-gradient(180deg, rgba(228, 238, 241, 0.5), rgba(242, 235, 222, 0) 260px),
        var(--bg);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    position: relative;
}

.page-header > * {
    position: relative;
    z-index: 1;
}

.page-header::after {
    display: none;
}

.page-header h1 {
    margin-top: 4px;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--teal-dark);
}

.eyebrow {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.breadcrumb-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.breadcrumb-path > * {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-path > * + *::before {
    content: "/";
    margin: 0 6px;
    color: var(--muted);
    font-weight: 700;
}

.breadcrumb-path a {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumb-path a:hover,
.breadcrumb-path a:focus-visible {
    color: var(--accent-strong);
}

.breadcrumb-path span {
    color: var(--muted);
    text-decoration: none;
}

.primary-action,
.secondary-action {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .2px;
}

.primary-action {
    background: var(--accent);
    color: #ffffff;
}

.primary-action:hover {
    background: var(--accent-strong);
}

.secondary-action {
    border-color: #bddbd8;
    background: #edf7f6;
    color: var(--teal-dark);
}

.secondary-action:hover {
    border-color: #8fbfba;
    background: #dff0ee;
}

.list-toggle-action {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
}

.list-toggle-action span {
    transform: translateY(-1px);
}

.danger-action {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8bec8;
    border-radius: 4px;
    background: #fff7f9;
    color: var(--danger);
    cursor: pointer;
    padding: 8px 14px;
}

.danger-action:hover {
    background: #f6e3e3;
}

.icon-action {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 30px;
}

.icon-action:hover {
    background: var(--accent-soft);
}

.icon-action.danger {
    border-color: #e8bec8;
    color: var(--danger);
}

.icon-action.danger:hover {
    background: #fff1f1;
}

.icon-action.education-edit-action {
    background: #eaf5ee;
    border-color: #8cb79c;
    color: #286444;
}

.icon-action.education-edit-action:hover {
    background: #d5eadc;
    border-color: #286444;
}

.icon-action.education-delete-action {
    background: #fff0f0;
    border-color: #db9999;
    color: #af2929;
}

.icon-action.education-delete-action:hover {
    background: #fbdada;
    border-color: #af2929;
}

.icon-action:is(.education-edit-action, .education-delete-action):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.action-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.action-toolbar-left,
.page-action-navigation {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.action-toolbar-main {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
}

.action-toolbar-right,
.page-action-primary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.action-group {
    align-items: center;
    background: rgba(250, 252, 250, 0.58);
    border: 1px solid rgba(0, 116, 130, 0.11);
    border-radius: 9px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    position: relative;
}

.action-group-label {
    display: none;
}

.app-action {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 750;
    gap: 7px;
    justify-content: center;
    line-height: 1.15;
    min-height: 34px;
    padding: 7px 11px;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, transform 0.16s ease;
    white-space: nowrap;
}

.app-action:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.app-action:focus-visible {
    outline: 3px solid rgba(180, 46, 71, 0.35);
    outline-offset: 2px;
}

.app-action:disabled,
.app-action[aria-disabled="true"] {
    cursor: default;
    opacity: 0.6;
    transform: none;
}

.app-action-primary {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(180, 46, 71, 0.18);
    color: #ffffff !important;
}

.app-action-primary:hover {
    background: var(--accent-strong);
    color: #ffffff !important;
}

.app-action-secondary {
    background: #edf7f6;
    border-color: #bddbd8;
    color: var(--teal-dark);
}

.app-action-secondary:hover {
    background: #dff0ee;
    border-color: #8fbfba;
}

.app-action-nav {
    background: #f4efe5;
    border-color: #d8c8b2;
    color: var(--teal-dark);
}

.app-action-nav:hover {
    background: #ede2d0;
    border-color: #c8ad8b;
}

.app-action-workflow {
    background: #e4f3f5;
    border-color: #b9dfe3;
    color: #174d50;
}

.app-action-workflow:hover {
    background: #d2ecef;
    border-color: #7fc1c9;
}

.app-action-manage {
    background: #fff3dd;
    border-color: #e6c994;
    color: #5c4217;
}

.app-action-manage:hover {
    background: #f7e5bd;
}

.app-action-documents {
    background: #e7eef7;
    border-color: #c4d3e6;
    color: #263e5a;
}

.app-action-documents:hover {
    background: #d8e5f3;
    border-color: #9bb6d6;
}

.app-action-danger {
    background: #fff4f6;
    border-color: #e8bec8;
    color: var(--danger);
}

.app-action-danger:hover {
    background: #f6e3e3;
}

.app-action-icon {
    align-items: center;
    color: inherit;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
}

.panel-header .app-action span,
.panel-header .app-action-icon {
    color: inherit;
    font-size: inherit;
}

.course-card-workspace {
    align-content: start;
    display: grid;
    gap: 10px;
    min-width: 0;
}

.record-action-toolbar {
    align-items: flex-end;
    background: rgba(226, 240, 241, 0.82);
    border: 1px solid rgba(0, 116, 130, 0.16);
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 9px 12px;
    pointer-events: none;
    position: relative;
    box-shadow: 0 8px 22px rgba(24, 52, 46, 0.06);
    z-index: 30;
}

.record-action-slot {
    align-items: flex-end;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
    pointer-events: auto;
}

.record-action-status {
    align-items: center;
    display: inline-flex;
    min-height: 32px;
    pointer-events: auto;
}

.record-action-slot:empty {
    display: none;
}

.record-action-secondary {
    margin-left: clamp(8px, 2vw, 34px);
}

.record-action-work {
    margin-left: clamp(14px, 5vw, 76px);
}

.record-action-create {
    margin-left: auto;
}

.record-action-toolbar .app-action {
    min-height: 32px;
    padding: 6px 11px;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.course-action-toolbar-top {
    align-items: flex-end;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: -54px 0 6px calc(40% + 9px);
    min-height: 44px;
    overflow: visible;
    padding: 0 0 2px;
    width: calc(60% - 9px);
}

.course-action-toolbar-top .record-action-slot {
    flex-wrap: wrap;
    min-height: 32px;
    min-width: 0;
}

.course-action-toolbar-top .record-action-secondary {
    margin-left: clamp(6px, 1.2vw, 16px);
}

.course-action-toolbar-top .record-action-related {
    margin-left: clamp(6px, 1.2vw, 16px);
}

.course-action-toolbar-top .record-action-work {
    margin-left: clamp(8px, 1.8vw, 24px);
}

.course-action-toolbar-top .record-action-create {
    margin-left: auto;
}

@media (max-width: 1280px) {
    .course-action-toolbar-top {
        gap: 6px;
    }

    .course-action-toolbar-top .record-action-secondary,
    .course-action-toolbar-top .record-action-related,
    .course-action-toolbar-top .record-action-work {
        margin-left: 4px;
    }
}

@media (max-width: 980px) {
    .course-action-toolbar-top {
        margin: 0 0 8px 0;
        width: 100%;
    }

    .course-action-toolbar-top .record-action-create {
        margin-left: 0;
    }
}

.page-title-action-toolbar {
    align-items: flex-end;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    min-height: 44px;
    padding: 0 0 2px;
}

.record-detail-page-header {
    align-items: end;
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
    column-gap: 18px;
}

.record-detail-page-header > div:first-child {
    min-width: 0;
}

.record-detail-page-header .page-title-action-toolbar {
    grid-column: 2;
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
}

.record-detail-page-header .page-title-action-toolbar .record-action-create {
    margin-left: auto;
}

.record-detail-page-header.worker-list-collapsed {
    grid-template-columns: 112px minmax(0, 1fr);
}

.page-title-action-toolbar .record-action-secondary {
    margin-left: clamp(10px, 3vw, 52px);
}

.page-title-action-toolbar .record-action-related {
    margin-left: clamp(10px, 3vw, 52px);
}

.page-title-action-toolbar .record-action-work {
    margin-left: clamp(16px, 5vw, 86px);
}

.page-title-action-toolbar .record-action-create {
    margin-left: auto;
}

@media (max-width: 900px) {
    .record-detail-page-header,
    .record-detail-page-header.worker-list-collapsed {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: none;
    }

    .record-detail-page-header .page-title-action-toolbar {
        grid-column: auto;
    }

    .page-title-action-toolbar {
        justify-content: flex-start;
        margin-left: 0;
        width: 100%;
    }

    .page-title-action-toolbar .record-action-secondary,
    .page-title-action-toolbar .record-action-related,
    .page-title-action-toolbar .record-action-work,
    .page-title-action-toolbar .record-action-create {
        margin-left: 0;
    }
}

.page-action-header {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.page-action-header-top {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.card-action-header {
    align-items: start;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 10px 14px;
    grid-template-columns: minmax(220px, 1fr) auto;
    padding: 12px 14px;
}

.card-action-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.card-action-title h1,
.card-action-title h2,
.card-action-title h3,
.card-action-title p {
    margin: 0;
}

.card-action-context {
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 900px) {
    .page-action-header-top,
    .card-action-header {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .action-toolbar-right,
    .page-action-primary {
        justify-content: flex-start;
    }
}

.secondary-action:disabled {
    color: var(--muted);
    cursor: default;
}

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

.metric-card,
.panel {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    box-shadow: var(--section-shadow);
}

.metric-card {
    display: grid;
    gap: 8px;
    min-height: 112px;
    padding: 18px;
}

.metric-card span {
    color: var(--muted);
    font-weight: 700;
}

.metric-card strong {
    font-size: 30px;
    line-height: 1;
    color: var(--accent);
}

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

.workspace-header p:last-child {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.workspace-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px;
}

.workspace-hero h2 {
    margin: 0 0 6px;
    color: var(--teal-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
}

.workspace-hero p:not(.eyebrow) {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.workspace-widget-grid {
    --workspace-grid-row-height: 72px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: var(--workspace-grid-row-height);
    align-items: start;
    gap: 14px;
}

.workspace-widget {
    --workspace-card-bg: #ffffff;
    --workspace-card-accent: var(--teal);
    display: grid;
    position: relative;
    align-content: start;
    gap: 10px;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--workspace-card-accent) 28%, var(--line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--workspace-card-bg) 86%, var(--surface)) 0%,
            var(--surface) 76%);
    padding-bottom: 14px;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}

.workspace-widget::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--workspace-card-accent);
    opacity: .72;
}

.workspace-widget > * {
    position: relative;
}

.workspace-widget .panel-header {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--workspace-card-accent) 14%, var(--surface-subtle)) 0%,
            color-mix(in srgb, var(--workspace-card-bg) 42%, var(--surface-subtle)) 100%);
}

.workspace-widget-grid.is-editing .workspace-widget .panel-header {
    cursor: grab;
    user-select: none;
}

.workspace-widget.is-dragging,
.workspace-widget.is-resizing {
    z-index: 20;
    border-color: color-mix(in srgb, var(--workspace-card-accent) 58%, var(--line));
    box-shadow: 0 18px 34px rgba(33, 43, 39, .18);
    transform: scale(1.01);
}

.workspace-widget.is-dragging .panel-header {
    cursor: grabbing;
}

.workspace-resize-handle {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 5;
    width: 18px;
    height: 18px;
    border-right: 3px solid color-mix(in srgb, var(--workspace-card-accent) 72%, var(--line));
    border-bottom: 3px solid color-mix(in srgb, var(--workspace-card-accent) 72%, var(--line));
    border-radius: 2px;
    cursor: nwse-resize;
    opacity: .86;
}

.workspace-resize-handle::before {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 7px;
    height: 7px;
    border-right: 2px solid color-mix(in srgb, var(--workspace-card-accent) 50%, var(--line));
    border-bottom: 2px solid color-mix(in srgb, var(--workspace-card-accent) 50%, var(--line));
}

.workspace-widget-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.workspace-widget-heading > div {
    min-width: 0;
}

.workspace-widget-heading h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-widget .panel-header .workspace-widget-icon {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--workspace-card-accent) 24%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--workspace-card-accent) 12%, var(--surface));
    color: var(--workspace-card-accent);
}

.workspace-widget .panel-header .workspace-widget-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.workspace-widget-tiny {
    grid-column: span 2;
    min-height: 0;
}

.workspace-widget-stack {
    display: grid;
    grid-column: span 2;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.workspace-widget-stack > .workspace-widget {
    grid-column: auto;
    width: 100%;
}

.workspace-widget-small {
    grid-column: span 3;
    min-height: 138px;
}

.workspace-widget-medium {
    grid-column: span 4;
}

.workspace-widget-wide {
    grid-column: span 6;
    min-height: 180px;
}

.workspace-widget-tasks {
    --workspace-card-bg: #eef7f5;
    --workspace-card-accent: #007482;
}

.workspace-widget-planning {
    --workspace-card-bg: #fff5e8;
    --workspace-card-accent: #d47d2a;
}

.workspace-widget-reports {
    --workspace-card-bg: #f4eff9;
    --workspace-card-accent: #7c4b9d;
}

.workspace-widget-study {
    --workspace-card-bg: #edf4fb;
    --workspace-card-accent: #3e79a8;
}

.workspace-widget-links {
    --workspace-card-bg: #f8f3e5;
    --workspace-card-accent: #b79532;
}

.workspace-widget-shortcut {
    --workspace-card-bg: #f7edf1;
    --workspace-card-accent: #ab3645;
}

.workspace-widget-tiny .panel-header {
    min-height: 42px;
    gap: 8px;
    padding: 8px 12px 8px 16px;
}

.workspace-widget-tiny .workspace-widget-heading {
    gap: 8px;
}

.workspace-widget-tiny .panel-header .workspace-widget-icon {
    display: inline-flex;
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
}

.workspace-widget-tiny .panel-header .workspace-widget-icon svg {
    width: 14px;
    height: 14px;
}

.workspace-widget-tiny .panel-header h2 {
    font-size: 15px;
    line-height: 1.15;
}

.workspace-widget-tiny .workspace-widget-heading > div > span {
    display: none;
}

.workspace-widget-tiny .panel-header a {
    font-size: 12px;
}

.workspace-widget-tiny .workspace-widget-body {
    gap: 6px;
    padding: 8px 12px 10px 16px;
}

.workspace-widget-tiny.workspace-widget-shortcut {
    gap: 0;
    padding-bottom: 0;
}

.workspace-widget-tiny.workspace-widget-shortcut .workspace-widget-body > p {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-widget-tiny.workspace-widget-shortcut .workspace-action-row {
    display: none;
}

.workspace-widget-recent {
    --workspace-card-bg: #eef1f3;
    --workspace-card-accent: #60727a;
}

.workspace-widget-note {
    --workspace-card-bg: #fff8d8;
    --workspace-card-accent: #d6a72d;
}

.workspace-widget-note.workspace-note-mint {
    --workspace-card-bg: #edf8ee;
    --workspace-card-accent: #55976c;
}

.workspace-widget-note.workspace-note-rose {
    --workspace-card-bg: #fff0f3;
    --workspace-card-accent: #c95a73;
}

.workspace-widget-note.workspace-note-sky {
    --workspace-card-bg: #eef6ff;
    --workspace-card-accent: #4f88bd;
}

.workspace-widget-small .workspace-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1180px) {
    .workspace-widget-stack,
    .workspace-widget-tiny {
        grid-column: span 3;
    }

    .workspace-widget-small {
        grid-column: span 4;
    }

    .workspace-widget-medium {
        grid-column: span 6;
    }

    .workspace-widget-wide {
        grid-column: span 12;
    }
}

@media (max-width: 760px) {
    .workspace-widget-grid {
        grid-template-columns: 1fr;
    }

    .workspace-widget-stack,
    .workspace-widget-tiny,
    .workspace-widget-small,
    .workspace-widget-medium,
    .workspace-widget-wide {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: 160px;
    }

    .workspace-widget-grid.is-editing .workspace-widget .panel-header,
    .workspace-resize-handle {
        cursor: default;
    }
}

.workspace-widget.collapsed {
    min-height: 0;
    padding-bottom: 0;
}

.workspace-widget-body {
    display: grid;
    gap: 10px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 14px 2px;
    scrollbar-color:
        color-mix(in srgb, var(--workspace-card-accent) 42%, rgba(42, 70, 64, .24))
        transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.workspace-widget-body::-webkit-scrollbar {
    width: 9px;
    height: 0;
}

.workspace-widget-body::-webkit-scrollbar-track {
    margin-block: 8px;
    background: transparent;
}

.workspace-widget-body::-webkit-scrollbar-thumb {
    min-height: 34px;
    border: 3px solid transparent;
    border-radius: 999px;
    background:
        color-mix(in srgb, var(--workspace-card-accent) 34%, rgba(42, 70, 64, .26))
        padding-box;
}

.workspace-widget-body:hover::-webkit-scrollbar-thumb,
.workspace-widget-body:focus-within::-webkit-scrollbar-thumb {
    background:
        color-mix(in srgb, var(--workspace-card-accent) 58%, rgba(42, 70, 64, .28))
        padding-box;
}

.workspace-widget-body::-webkit-scrollbar-corner {
    background: transparent;
}

.workspace-widget-body > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.4;
}

.workspace-widget-body > .field-badge {
    justify-self: start;
}

.workspace-quick-note {
    display: grid;
    gap: 8px;
    padding: 2px 0 0;
}

.workspace-quick-note-text {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.workspace-quick-note-text a {
    color: color-mix(in srgb, var(--workspace-card-accent) 78%, var(--teal));
    font-weight: 700;
    text-decoration: none;
}

.workspace-quick-note-text a:hover {
    color: var(--teal);
}

.workspace-quick-note span {
    color: var(--muted);
    font-size: 12px;
}

.workspace-quick-note-editor {
    display: grid;
    gap: 10px;
}

.workspace-quick-note-editor label,
.workspace-note-controls label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.workspace-quick-note-editor label > span,
.workspace-note-controls label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.workspace-quick-note-editor textarea,
.workspace-note-controls select {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--workspace-card-accent) 24%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 92%, var(--workspace-card-bg));
    color: var(--text);
    font: inherit;
    padding: 8px 10px;
}

.workspace-quick-note-editor textarea {
    min-height: 104px;
    resize: vertical;
}

.workspace-note-controls {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
}

.workspace-note-controls label {
    flex: 1 1 150px;
}

.workspace-widget-primary {
    border-left: 3px solid var(--accent);
}

.workspace-widget-placeholder {
    background: color-mix(in srgb, var(--surface-subtle) 45%, var(--surface));
}

.workspace-customizer {
    margin-bottom: 14px;
    border-color: color-mix(in srgb, var(--teal) 18%, var(--line));
    background: var(--surface);
}

.workspace-add-form {
    display: grid;
    grid-template-columns: minmax(170px, 230px) minmax(220px, 310px) minmax(260px, 360px);
    align-items: end;
    gap: 12px;
    padding: 16px 18px 18px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--surface-subtle) 48%, var(--surface)) 0%,
            var(--surface) 76%);
}

.workspace-add-form label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.workspace-add-form label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.workspace-add-form .field-wide {
    grid-column: 1 / span 2;
}

.workspace-add-form input,
.workspace-add-form select,
.workspace-add-form textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 8px 10px;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.workspace-add-form textarea {
    min-height: 74px;
    resize: vertical;
}

.workspace-add-form input::placeholder,
.workspace-add-form textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.workspace-add-form input:focus,
.workspace-add-form select:focus,
.workspace-add-form textarea:focus {
    border-color: color-mix(in srgb, var(--teal) 58%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
    outline: 0;
}

.workspace-add-form .form-actions {
    display: flex;
    align-items: end;
    grid-column: auto;
    justify-content: flex-end;
    min-width: max-content;
}

.workspace-add-form .primary-action {
    min-height: 38px;
}

@media (max-width: 1080px) {
    .workspace-add-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .workspace-add-form .form-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.workspace-widget-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px;
}

.workspace-drag-hint {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin-right: auto;
}

.workspace-widget-toolbar .secondary-action,
.workspace-widget-toolbar .icon-action,
.workspace-size-picker .tab-button {
    min-height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.workspace-size-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}

.workspace-size-picker .tab-button {
    font-size: 12px;
}

.workspace-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.workspace-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.workspace-stat {
    display: grid;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-subtle);
    color: var(--teal-dark);
    padding: 9px 10px;
    text-decoration: none;
}

.workspace-stat:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.workspace-stat span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.workspace-stat strong {
    color: var(--teal-dark);
    font-size: 22px;
    line-height: 1;
}

.workspace-stat.attention {
    background: color-mix(in srgb, #fbe5eb 70%, var(--surface));
}

.workspace-stat.done {
    background: color-mix(in srgb, #e2f1ee 65%, var(--surface));
}

.workspace-preview-list {
    display: grid;
    gap: 6px;
}

.workspace-preview-list a {
    display: grid;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-subtle) 55%, var(--surface));
    color: var(--teal-dark);
    padding: 8px 10px;
    text-decoration: none;
}

.workspace-preview-list a:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.workspace-preview-list strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-preview-list span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.workspace-quick-links a {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--teal-dark);
    font-size: 13px;
    font-weight: 700;
    padding: 5px 9px;
    text-decoration: none;
}

.workspace-quick-links a:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.workspace-empty-state {
    grid-column: 1 / -1;
}

.customization-layout {
    display: grid;
    grid-template-columns: minmax(460px, 1.55fr) minmax(300px, 0.65fr);
    gap: 18px;
}

.customization-workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(340px, 0.72fr) minmax(620px, 1.45fr);
}

.customization-fields-panel,
.customization-entity-panel {
    min-width: 0;
}

.customization-fields-panel .field-order-list,
.customization-entity-panel .customization-entity-list {
    max-height: min(640px, calc(100vh - 255px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(42, 70, 64, 0.48) rgba(42, 70, 64, 0.06);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.worker-form.custom-field-editor-form {
    grid-template-columns: repeat(2, minmax(180px, 260px));
    justify-content: start;
    max-width: 570px;
}

.customization-entity-panel {
    min-height: 0;
}

.customization-entity-header-actions {
    gap: 8px;
}

.customization-entity-header-actions .secondary-action {
    min-height: 32px;
    padding: 6px 10px;
}

.customization-entity-filters {
    align-items: end;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
}

.customization-entity-filters label {
    display: grid;
    flex: 1 1 160px;
    gap: 4px;
    max-width: 200px;
    min-width: 0;
}

.customization-entity-filters label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.customization-entity-filters input,
.customization-entity-filters select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    min-height: 34px;
    padding: 6px 8px;
    width: 100%;
}

.customization-entity-filters .entity-search-filter {
    flex-basis: 320px;
    max-width: 420px;
}

.customization-workspace .customization-entity-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.customization-workspace .customization-entity-filters label,
.customization-workspace .customization-entity-filters .entity-search-filter {
    flex: none;
    max-width: none;
}

.customization-workspace .customization-entity-filters .entity-search-filter {
    grid-column: 1 / -1;
}

.customization-entity-list {
    max-height: min(520px, calc(100vh - 390px));
    min-height: 180px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(42, 70, 64, 0.48) rgba(42, 70, 64, 0.06);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.customization-entity-list .table-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    height: auto !important;
    max-height: none !important;
    min-height: 58px;
    overflow: visible;
    padding: 9px 12px;
    white-space: normal;
}

.customization-entity-list .table-row > span:first-child {
    display: grid;
    flex: 1 1 360px;
    gap: 3px;
    min-width: 0;
    overflow: visible;
}

.field-order-controls {
    align-items: center;
    display: inline-flex;
    gap: 3px;
    margin-right: 4px;
}

.field-order-action {
    background: #eef7f6;
    border-color: #b9d8d5;
    color: var(--teal-dark);
    font-size: 13px;
    height: 28px;
    width: 28px;
}

.field-order-action:disabled {
    background: #f4f0e8;
    border-color: #e0d6c6;
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.45;
}

.field-order-action:not(:disabled):hover {
    background: #dff0ef;
}

.customization-entity-list .table-row strong,
.customization-entity-list .table-row small {
    display: block;
    line-height: 1.35;
    max-height: none;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    word-break: normal;
}

.entity-row-meta {
    align-items: center;
    align-self: flex-start;
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    min-width: min(230px, 100%);
}

.customization-entity-list .entity-origin-badge.built-in-badge {
    background: #e4eef1;
    color: var(--teal-dark);
}

.customization-entity-list .entity-origin-badge.dynamic-badge {
    background: #ece3ce;
    color: var(--warning);
}

.customization-entity-list .entity-status-badge.active-badge {
    background: #e3f0eb;
    color: #256c59;
}

.customization-entity-list .inactive-row {
    opacity: 0.7;
}

.customization-entity-list .inactive-badge {
    background: #efefed;
    color: #6d716f;
}

html.compact-mode .customization-entity-list .table-row {
    height: auto !important;
    max-height: none !important;
    min-height: 46px;
    padding: 7px 10px;
}

html.compact-mode .customization-entity-list .table-row > span:first-child {
    gap: 4px;
}

html.compact-mode .customization-entity-list .table-row strong,
html.compact-mode .customization-entity-list .table-row small {
    line-height: 1.28;
}

.panel {
    display: grid;
    align-content: start;
    overflow: hidden;
}

.panel-header {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
}

.panel-header h2 {
    font-size: 18px;
    color: var(--teal-dark);
}

.panel-header a,
.panel-header span {
    color: var(--muted);
    font-size: 13px;
}

.table-list,
.module-list {
    display: grid;
}

.table-row,
.module-row {
    border-bottom: 1px solid var(--line);
}

.table-row:last-child,
.module-row:last-child {
    border-bottom: 0;
}

.table-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 12px 18px;
}

.table-button {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.table-button:hover {
    background: var(--accent-soft);
}

.selected-row {
    background: var(--accent-soft);
}

.table-row > span:first-child {
    display: grid;
    gap: 3px;
}

.table-row small {
    color: var(--muted);
}

.row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.field-order-list .field-order-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 64px minmax(230px, 1fr) minmax(610px, auto);
    min-height: 58px;
    padding: 9px 12px;
}

.field-order-row > .field-order-controls {
    align-items: center;
    display: inline-flex;
    gap: 5px;
    justify-content: flex-start;
    margin: 0;
}

.field-order-row > .field-order-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.field-order-row > .field-order-main strong,
.field-order-row > .field-order-main small {
    overflow-wrap: anywhere;
}

.field-order-meta {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 112px 94px minmax(120px, 150px) 98px 64px 78px;
    justify-content: end;
    min-width: 0;
}

.field-order-visible {
    margin: 0;
    white-space: nowrap;
}

.field-order-required {
    min-height: 24px;
}

.field-order-type {
    color: var(--text);
    min-width: 0;
}

.field-order-type small {
    display: block;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.field-order-edit,
.field-order-delete .danger-action {
    justify-self: start;
}

.field-order-delete {
    min-width: 72px;
}

.field-order-edit,
.field-order-delete .danger-action {
    min-height: 32px;
    padding: 6px 10px;
    width: auto;
}

.custom-field-dialog-overlay {
    align-items: start;
    background: rgba(33, 49, 45, 0.28);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    overflow: auto;
    padding: 7vh 18px 30px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1300;
}

.custom-field-dialog {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 22px 70px rgba(33, 49, 45, 0.26);
    max-width: 720px;
    overflow: visible;
    width: min(720px, 100%);
}

.custom-field-dialog-header {
    align-items: center;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}

.custom-field-dialog-header h2 {
    color: var(--teal-dark);
    font-size: 20px;
    margin: 0;
}

.custom-field-dialog-header small {
    color: var(--muted);
}

.custom-field-dialog .custom-field-editor-form {
    max-width: none;
    padding: 16px;
}

.custom-field-dialog .custom-field-editor-form .validation-summary,
.custom-field-dialog .custom-field-editor-form .full-span,
.custom-field-dialog .custom-field-editor-form .form-actions {
    grid-column: 1 / -1 !important;
}

.custom-field-dialog .custom-field-editor-form {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.field-behavior-settings {
    background: rgba(225, 239, 241, 0.58);
    border-color: rgba(0, 128, 138, 0.20);
    display: grid;
    gap: 10px 26px;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    overflow: visible;
    position: relative;
}

.field-behavior-settings legend,
.lookup-display-settings legend {
    color: var(--heading);
    font-size: 0.82rem;
    font-weight: 800;
}

.field-option-check {
    align-items: center;
    display: flex;
    gap: 6px;
    min-height: 24px;
    min-width: 0;
    position: relative;
}

.field-option-check > label {
    align-items: center;
    cursor: pointer;
    display: inline-flex !important;
    gap: 8px;
    grid-template-columns: none !important;
    margin: 0;
    min-width: 0;
}

.field-option-check input[type="checkbox"] {
    appearance: auto;
    flex: 0 0 auto;
    height: 16px !important;
    margin: 0;
    min-height: 16px !important;
    padding: 0;
    width: 16px !important;
}

.field-option-check span {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 700;
}

.field-option-info-mark {
    flex: 0 0 auto;
}

.field-option-info-mark.open {
    z-index: 5200;
}

.field-option-info-card {
    background: #fffaf2;
    border-color: #dcc8a0;
    left: calc(100% + 7px);
    min-width: 230px;
    top: -10px;
    z-index: 4600;
}

.profile-type-visibility-settings .field-settings-note {
    color: var(--muted);
    font-size: 0.78rem;
    grid-column: 1 / -1;
    margin: 0;
}

.profile-type-visibility-option {
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(0, 128, 138, 0.14);
    border-radius: 8px;
    padding: 6px 8px;
}

@media (max-width: 1050px) {
    .customization-workspace {
        grid-template-columns: 1fr;
    }

    .field-order-list .field-order-row {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .field-order-meta {
        grid-column: 2;
        grid-template-columns: repeat(3, minmax(0, max-content));
        justify-content: start;
    }
}

@media (max-width: 700px) {
    .customization-workspace .customization-entity-filters {
        grid-template-columns: 1fr;
    }

    .custom-field-dialog-overlay {
        padding: 10px;
    }

    .custom-field-dialog .custom-field-editor-form {
        grid-template-columns: 1fr;
    }

    .field-order-list .field-order-row {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .field-order-meta {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
}

.row-actions.participant-profile-header-actions {
    flex: 0 1 auto;
    align-items: center;
    gap: 8px;
}

.row-actions.participant-profile-header-actions .primary-action,
.row-actions.participant-profile-header-actions .secondary-action {
    flex: 0 0 auto;
    min-height: 34px;
    width: auto;
    padding: 7px 12px;
    line-height: 1.1;
    white-space: nowrap;
}

.panel-action-context {
    color: var(--muted);
    font-size: 13px;
}

.panel-action-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.instance-header-actions {
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-end;
    width: auto;
}

.instance-header-actions .panel-action-context,
.instance-header-actions .panel-action-strip {
    width: auto;
}

.instance-header-actions .panel-action-strip {
    justify-content: flex-start;
}

.visibility-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.visibility-toggle input {
    width: 16px;
    height: 16px;
}

.field-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border-radius: 999px;
    background: #ece3ce;
    color: var(--warning);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 4px 8px;
}

.field-required {
    display: inline-grid;
    width: 14px;
    height: 14px;
    place-items: center;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #ffffff;
    font-size: 0;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.field-required::before {
    content: "!";
    font-size: 10px;
    line-height: 1;
}

code {
    overflow-wrap: anywhere;
    border-radius: 4px;
    background: var(--surface-subtle);
    padding: 4px 6px;
    color: var(--teal-dark);
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
}

.status {
    display: inline-flex;
    min-width: 78px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
}

.status-enabled {
    background: #dce6e5;
    color: var(--success);
}

.status-disabled {
    background: #fff1f1;
    color: var(--danger);
}

.status-draft {
    background: #eef2f2;
    color: var(--muted);
}

.status-planned {
    background: #ece3ce;
    color: var(--warning);
}

.status-open {
    background: #dce6e5;
    color: var(--teal-dark);
}

.status-full {
    background: #fff1f1;
    color: var(--danger);
}

.module-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    gap: 22px;
    padding: 18px;
}

.module-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.module-title h3 {
    font-size: 18px;
}

.module-row p {
    color: var(--muted);
    line-height: 1.45;
}

.system-registry-header {
    align-items: end;
}

.system-registry-header p:last-child {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.system-registry-tabs {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--section-shadow-soft);
}

.system-registry-tab-content {
    display: grid;
    gap: 14px;
}

.system-registry-tab-content .system-registry-panel {
    width: 100%;
    max-width: min(1200px, 100%);
}

.system-registry-tab-content .system-registry-scroll {
    max-height: calc(100vh - 260px);
}

.system-registry {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}

.system-registry-panel {
    flex: 1 1 520px;
    min-width: min(100%, 420px);
    max-width: 680px;
    max-height: calc(100vh - 172px);
}

.system-registry-panel-modules {
    flex: 1.25 1 620px;
    max-width: 760px;
}

.system-registry-panel-simple {
    flex: 1 1 520px;
    max-width: 640px;
}

.system-registry-panel .panel-header {
    min-height: 46px;
    padding: 10px 14px;
}

.system-registry-panel .panel-header h2 {
    font-size: 17px;
}

.system-registry-scroll {
    max-height: calc(100vh - 228px);
    overflow: auto;
    scrollbar-gutter: stable;
}

.system-registry-list-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 30px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-subtle) 92%, white);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.system-registry-list-head > span:first-child {
    flex: 1 1 220px;
    min-width: 0;
}

.system-registry-list-head > span:last-child {
    flex: 0 0 140px;
}

.system-registry-module-head > span:first-child {
    flex-basis: 250px;
}

.system-registry-module-head > span:nth-child(2) {
    flex: 0 0 130px;
}

.system-registry-module-head > span:nth-child(3) {
    flex: 0 0 96px;
}

.system-registry-module-head > span:nth-child(4) {
    flex: 0 0 84px;
}

.system-registry-simple-head > span:first-child {
    flex: 1 1 290px;
}

.system-registry-simple-head > span:last-child {
    flex: 0 0 180px;
}

.system-registry-row,
.system-registry-module-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px 12px;
    min-height: 0;
    padding: 8px 12px;
}

.system-registry-name-cell {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 520px;
}

.system-registry-key-cell {
    flex: 0 0 180px;
    max-width: 180px;
    overflow-wrap: anywhere;
}

.system-registry-module-row .system-registry-name-cell {
    flex-basis: 250px;
}

.system-registry-module-row .system-registry-key-cell {
    flex-basis: 130px;
    max-width: 130px;
}

.system-registry-meta-cell {
    flex: 0 0 96px;
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 700;
}

.system-registry-status-cell {
    flex: 0 0 84px;
}

.system-registry-module-row .module-title {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}

.system-registry-module-row .module-title h3 {
    font-size: 15px;
}

.system-registry-module-row p {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

.system-registry-table-row {
    align-items: flex-start;
}

.system-registry-table-row .system-registry-name-cell {
    display: grid;
    flex-basis: 290px;
    gap: 2px;
}

.system-registry-table-row .system-registry-key-cell {
    margin-top: 2px;
}

.system-registry-table-row strong {
    font-size: 14px;
}

.system-registry-table-row small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
}

.system-registry-list {
    display: grid;
}

.system-registry-list-head,
.system-registry-list-item {
    display: grid;
    align-items: start;
    gap: 10px;
    border-bottom: 1px solid var(--line);
}

.system-registry-list-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 30px;
    padding: 7px 12px;
    background: color-mix(in srgb, var(--surface-subtle) 94%, white);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.system-registry-list-item {
    min-height: auto;
    padding: 9px 12px;
}

.system-registry-list-item:last-child {
    border-bottom: 0;
}

.system-registry-list-head-modules,
.system-registry-list-item-modules {
    grid-template-columns: minmax(0, 1fr) fit-content(150px) fit-content(120px) fit-content(92px);
}

.system-registry-list-head-simple,
.system-registry-list-item-simple {
    grid-template-columns: minmax(0, 1fr) fit-content(230px);
}

.system-registry-title-cell {
    display: block;
    min-width: 0;
}

.system-registry-title-cell h3,
.system-registry-title-cell strong {
    display: block;
    margin: 0;
    color: var(--teal-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.system-registry-title-cell p,
.system-registry-title-cell small {
    display: block;
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.system-registry-code-cell {
    display: inline-block;
    width: max-content;
    max-width: 230px;
    margin-top: 1px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.system-registry-list-item-modules .system-registry-code-cell {
    max-width: 150px;
}

.system-registry-meta-cell-new {
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.system-registry-status-cell-new {
    min-width: 0;
}

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

.definition-grid div {
    display: grid;
    gap: 2px;
}

.definition-grid dt {
    color: var(--muted);
    font-size: 12px;
}

.definition-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.hrm-layout {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
    gap: 18px;
    height: calc(100vh - 170px);
    min-height: 460px;
    transition: grid-template-columns 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hrm-layout.worker-list-collapsed {
    grid-template-columns: 112px minmax(0, 1fr);
}

.function-management-layout {
    grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.22fr);
}

.function-profile-panel > .user-function-permissions {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.function-management-layout .function-permission-grid {
    max-height: none;
    overflow: visible;
}

.worker-list-panel {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    transition:
        box-shadow 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.worker-detail-panel,
.hrm-layout > .panel:not(.worker-list-panel),
.course-card-workspace,
.course-card-workspace > .panel {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

.course-card-workspace {
    height: 100%;
}

.course-card-workspace > .panel {
    flex: 1 1 auto;
}

.worker-detail-panel > .panel-header,
.hrm-layout > .panel:not(.worker-list-panel) > .panel-header,
.course-card-workspace > .panel > .panel-header {
    flex: 0 0 auto;
}

.worker-detail-panel > :not(.panel-header),
.hrm-layout > .panel:not(.worker-list-panel) > :not(.panel-header),
.course-card-workspace > .panel > :not(.panel-header) {
    min-height: 0;
}

.worker-detail-panel > .worker-read-view,
.worker-detail-panel > .worker-form,
.worker-detail-panel > .study-program-type-editor,
.worker-detail-panel > .study-program-workspace,
.hrm-layout > .panel:not(.worker-list-panel) > .worker-read-view,
.hrm-layout > .panel:not(.worker-list-panel) > .worker-form,
.hrm-layout > .panel:not(.worker-list-panel) > .study-program-type-editor,
.hrm-layout > .panel:not(.worker-list-panel) > .study-program-workspace,
.hrm-layout > .panel:not(.worker-list-panel) > .document-form,
.hrm-layout > .panel:not(.worker-list-panel) > .document-read-view,
.hrm-layout > .panel:not(.worker-list-panel) > .document-section,
.course-card-workspace > .panel > .worker-read-view,
.course-card-workspace > .panel > .worker-form,
.course-card-workspace > .panel > .planning-view,
.course-card-workspace > .panel > .instances-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.hrm-layout > .panel:not(.worker-list-panel) > .card-tabs,
.hrm-layout > .panel:not(.worker-list-panel) > .study-program-tabs,
.hrm-layout > .panel:not(.worker-list-panel) > .validation-summary,
.hrm-layout > .panel:not(.worker-list-panel) > .document-feedback,
.hrm-layout > .panel:not(.worker-list-panel) > .document-delete-confirmation {
    flex: 0 0 auto;
}

.user-card-panel {
    position: relative;
    z-index: 20;
}

.user-card-panel:focus-within {
    z-index: 4100;
}

.worker-list-panel .filter-builder,
.worker-list-panel .worker-list {
    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.worker-list-panel > .panel-header,
.worker-list-panel > .filter-toolbar,
.worker-list-panel > .instance-context,
.worker-list-panel > .collapsed-list-summary {
    flex: 0 0 auto;
}

.worker-list-panel.collapsed .panel-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    min-height: auto;
    padding: 12px;
}

.worker-list-panel.collapsed .panel-header h2 {
    font-size: 14px;
    text-align: center;
}

.worker-list-panel.collapsed .row-actions {
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
}

.worker-list-panel.collapsed .secondary-action {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 13px;
}

.collapsed-list-summary {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px 8px;
    text-align: center;
    animation: fade-slide-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.collapsed-list-summary .profile-placeholder,
.collapsed-list-summary img {
    width: 52px;
    height: 52px;
    border-width: 1px;
    font-size: 15px;
}

.collapsed-list-summary img {
    border: 1px solid var(--line);
    border-radius: 999px;
    object-fit: cover;
}

.collapsed-list-summary span {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.collapsed-list-summary small {
    color: var(--muted);
    font-size: 12px;
}

@keyframes fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.worker-list {
    display: grid;
}

.worker-list-panel .worker-list {
    align-content: start;
    flex: 1 1 auto;
    gap: 4px;
    max-height: none;
    min-height: 0;
    overflow: auto;
    padding: 6px;
    background: var(--surface);
}

.function-profile-list {
    display: grid;
    align-content: start;
    padding: 8px;
    background: var(--surface);
    max-height: calc(100vh - 210px);
    overflow: auto;
}

.function-profile-list-head,
.function-profile-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 88px;
    gap: 10px;
    align-items: center;
}

.function-profile-list-head {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 7px 10px;
    text-transform: uppercase;
}

.function-profile-row {
    width: 100%;
    min-height: 54px;
    border: 1px solid transparent;
    border-bottom-color: var(--line);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 8px 10px;
    text-align: left;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.function-profile-row:hover {
    border-color: var(--line);
    background: var(--accent-soft);
}

.function-profile-row.selected,
.function-profile-row.selected:hover {
    border-color: rgba(0, 116, 130, .32);
    background: var(--surface-subtle);
    box-shadow: inset 3px 0 0 var(--teal);
}

.function-profile-row:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.function-profile-name,
.function-profile-stat {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.function-profile-name strong {
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.function-profile-name small,
.function-profile-stat small {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.function-profile-stat {
    justify-items: end;
}

.function-profile-stat strong {
    color: var(--accent-strong);
    font-size: 14px;
}

.function-profile-summary {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(110px, max-content));
    align-items: stretch;
    gap: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-subtle);
    padding: 10px 12px;
}

.function-profile-summary span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.function-profile-summary strong {
    color: var(--text);
}

.function-profile-summary small {
    color: var(--muted);
    font-size: 12px;
}

.function-assigned-workers,
.function-permissions-section {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    padding: 10px;
}

.function-subsection-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.function-subsection-heading h3 {
    margin: 0;
    color: var(--teal-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.2;
}

.function-subsection-heading span {
    color: var(--muted);
    font-size: 12px;
}

.function-worker-list {
    display: grid;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
    padding-right: 4px;
}

.function-worker-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-subtle);
    padding: 7px 8px;
}

.function-worker-avatar {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 999px;
    object-fit: cover;
}

.profile-placeholder.function-worker-avatar {
    display: inline-grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 800;
}

.function-worker-main {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.function-worker-main strong,
.function-worker-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.function-worker-main strong {
    color: var(--text);
    font-size: 13px;
}

.function-worker-main small {
    color: var(--muted);
    font-size: 11px;
}

.function-worker-row .status {
    min-width: auto;
    min-height: 24px;
    padding: 4px 8px;
    font-size: 11px;
}

.function-worker-link {
    white-space: nowrap;
}

.compact-empty-list {
    border: 1px dashed var(--line);
    border-radius: 4px;
    margin: 0;
    padding: 12px;
}

.smart-list-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    box-shadow: var(--section-shadow);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.worker-list-panel > .smart-list-panel {
    min-height: 0;
}

.worker-list-panel > .smart-list-preference-editor {
    flex: 0 1 auto;
    max-height: calc(100vh - 24px);
    overflow: auto;
}

.smart-list-header {
    align-items: center;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: space-between;
    min-height: 52px;
    padding: 10px 14px;
}

.smart-list-header h2,
.smart-list-header small {
    display: block;
    margin: 0;
}

.smart-list-header small,
.smart-list-header-actions > span {
    color: var(--muted);
}

.smart-list-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}

.smart-list-tool-button {
    align-items: center;
    background: #e4f1f2;
    border: 1px solid #aac9cc;
    border-radius: 6px;
    color: var(--teal-dark);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    gap: 5px;
    min-height: 30px;
    padding: 5px 9px;
}

.smart-list-tool-button:hover {
    background: #d4ebed;
    border-color: var(--teal);
}

.smart-list-tool-button .smart-list-filter-count {
    background: #244940;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    min-width: 20px;
    padding: 2px 6px;
    text-align: center;
}

.smart-list-quick-controls {
    align-items: end;
    background: linear-gradient(180deg, rgba(219, 235, 236, 0.66), rgba(247, 243, 235, 0.62));
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 9px;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 180px);
    padding: 10px 12px;
}

.smart-list-panel > .smart-list-header,
.smart-list-panel > .smart-list-quick-controls,
.smart-list-panel > .smart-list-filter-drawer,
.smart-list-panel > .list-pagination {
    flex: 0 0 auto;
}

.smart-list-quick-controls label,
.smart-list-filter-drawer label,
.smart-list-preference-grid label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.smart-list-quick-controls label > span,
.smart-list-filter-drawer label > span,
.smart-list-preference-grid label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.smart-list-quick-controls input,
.smart-list-quick-controls select,
.smart-list-filter-drawer input,
.smart-list-filter-drawer select,
.smart-list-preference-grid input:not([type="checkbox"]),
.smart-list-preference-grid select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    min-height: 34px;
    padding: 7px 9px;
    width: 100%;
}

.smart-list-quick-controls input:focus,
.smart-list-quick-controls select:focus,
.smart-list-filter-drawer input:focus,
.smart-list-filter-drawer select:focus,
.smart-list-preference-grid input:not([type="checkbox"]):focus,
.smart-list-preference-grid select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(0, 112, 121, 0.12);
    outline: 0;
}

.smart-list-filter-drawer {
    background: rgba(255, 255, 255, 0.64);
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding: 10px 12px;
}

.smart-list-items {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow: auto;
    scrollbar-color: rgba(0, 112, 121, .45) rgba(0, 0, 0, .04);
    scrollbar-width: thin;
}

.smart-list-items::-webkit-scrollbar {
    width: 9px;
}

.smart-list-items::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .04);
}

.smart-list-items::-webkit-scrollbar-thumb {
    background: rgba(0, 112, 121, .42);
    border-radius: 999px;
}

.smart-list-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    height: auto;
    min-height: 50px;
    overflow: hidden;
    padding: 7px 12px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
}

.smart-list-items.comfortable .smart-list-item {
    gap: 10px;
    min-height: 50px;
    padding: 7px 12px;
}

.smart-list-item:hover {
    background: rgba(219, 235, 236, 0.44);
}

.smart-list-item.selected {
    background: linear-gradient(90deg, rgba(190, 226, 230, 0.96) 0%, rgba(224, 241, 242, 0.96) 100%);
    border-left-color: var(--teal);
    box-shadow:
        inset 0 0 0 1px rgba(0, 112, 121, 0.34),
        0 2px 8px rgba(31, 49, 43, 0.08);
}

.smart-list-item:focus-visible {
    outline: 3px solid rgba(180, 46, 71, 0.35);
    outline-offset: -3px;
}

.smart-list-item.selected:focus-visible {
    outline-color: #b42e47;
}

.smart-list-item-image,
.smart-list-item-initials {
    border-radius: 999px;
    height: 34px;
    width: 34px;
}

.smart-list-items.comfortable .smart-list-item-image,
.smart-list-items.comfortable .smart-list-item-initials {
    height: 34px;
    width: 34px;
}

.smart-list-item-image {
    object-fit: cover;
}

.smart-list-item-initials {
    align-items: center;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    color: var(--teal-dark);
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
}

.smart-list-item-main,
.smart-list-item-main strong,
.smart-list-item-main small,
.smart-list-item-detail-line,
.smart-list-item-meta {
    min-width: 0;
}

.smart-list-item-main {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    overflow: hidden;
}

.smart-list-item-main strong {
    color: var(--teal-dark);
    display: block;
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-list-items.comfortable .smart-list-item-main strong {
    font-size: 14px;
    line-height: 1.2;
}

.smart-list-item-main small {
    color: var(--muted);
    display: block;
    font-size: 12px;
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-list-items.comfortable .smart-list-item-main small {
    font-size: 12px;
    line-height: 1.35;
}

.smart-list-item-detail-line {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow: hidden;
    white-space: nowrap;
}

.smart-list-items.comfortable .smart-list-item-detail-line {
    gap: 12px;
}

.smart-list-item-detail-line small {
    flex: 0 2 auto;
}

.smart-list-item-detail-line small:first-child {
    flex-shrink: 1;
}

.smart-list-item-meta {
    display: flex;
    gap: 10px;
    margin-top: 0;
}

.smart-list-item-side {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
    max-width: 38%;
}

.smart-list-items.compact .smart-list-item,
html.compact-mode .smart-list-item {
    gap: 6px;
    min-height: 34px;
    padding: 3px 8px;
}

.smart-list-items.compact .smart-list-item-image,
.smart-list-items.compact .smart-list-item-initials,
html.compact-mode .smart-list-item-image,
html.compact-mode .smart-list-item-initials {
    height: 22px;
    width: 22px;
}

.smart-list-items.compact .smart-list-item-main strong,
html.compact-mode .smart-list-item-main strong {
    font-size: 12px;
    line-height: 1.1;
}

.smart-list-items.compact .smart-list-item-main small,
html.compact-mode .smart-list-item-main small {
    font-size: 10px;
    line-height: 1.2;
}

.smart-list-items.compact .smart-list-item-detail-line,
html.compact-mode .smart-list-item-detail-line {
    gap: 8px;
}

html.compact-mode .smart-list-items.comfortable .smart-list-item {
    gap: 10px;
    min-height: 50px;
    padding: 7px 12px;
}

html.compact-mode .smart-list-items.comfortable .smart-list-item-image,
html.compact-mode .smart-list-items.comfortable .smart-list-item-initials {
    height: 34px;
    width: 34px;
}

html.compact-mode .smart-list-items.comfortable .smart-list-item-main strong {
    font-size: 14px;
    line-height: 1.2;
}

html.compact-mode .smart-list-items.comfortable .smart-list-item-main small {
    font-size: 12px;
    line-height: 1.35;
}

html.compact-mode .smart-list-items.comfortable .smart-list-item-detail-line {
    gap: 12px;
}

.smart-list-preference-editor {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--teal);
    border-radius: 6px;
    box-sizing: border-box;
    box-shadow: 0 22px 55px rgba(34, 55, 48, 0.28);
    display: grid;
    gap: 8px;
    left: 50%;
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 12px;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, calc(100vw - 44px));
    z-index: 90;
}

.smart-list-preference-header {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.smart-list-preference-header h3,
.smart-list-preference-header p {
    margin: 0;
}

.smart-list-preference-header p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}

.smart-list-preference-header h3 {
    font-size: 18px;
    line-height: 1.15;
}

.smart-list-preference-header .secondary-action,
.smart-list-preference-editor .primary-action,
.smart-list-preference-editor .secondary-action {
    min-height: 32px;
    padding: 6px 10px;
    white-space: nowrap;
}

.smart-list-preference-grid {
    display: grid;
    gap: 7px 9px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smart-list-preference-grid label {
    display: grid;
    gap: 3px;
}

.smart-list-preference-grid label > span,
.smart-list-field-choice-grid label,
.smart-list-preference-editor legend {
    font-size: 12px;
}

.smart-list-preference-grid .check-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-height: 30px;
}

.smart-list-preference-editor select,
.smart-list-preference-editor input[type="text"],
.smart-list-preference-editor input[type="number"] {
    min-height: 31px;
    padding: 4px 8px;
    width: 100%;
}

.smart-list-preference-editor fieldset {
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 5px;
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 8px 10px 10px;
}

.smart-list-preference-editor legend {
    color: var(--teal-dark);
    font-weight: 800;
    padding: 0 4px;
}

.smart-list-limit-note {
    color: var(--muted);
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
}

.smart-list-field-choice-grid {
    display: grid;
    gap: 5px 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.smart-list-field-choice-grid label {
    align-items: center;
    display: flex;
    gap: 5px;
    min-width: 0;
}

.smart-list-field-choice-grid label.disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.48;
}

.smart-list-field-choice-grid label.disabled input {
    cursor: not-allowed;
}

.smart-list-field-choice-grid span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-list-field-choice-grid input[type="checkbox"],
.smart-list-preference-grid input[type="checkbox"] {
    height: 15px;
    width: 15px;
}

.smart-list-preference-editor .form-actions {
    margin-top: 2px;
    padding-top: 0;
}

@media (max-width: 760px) {
    .smart-list-preference-editor {
        max-height: calc(100vh - 36px);
        width: calc(100vw - 24px);
    }

    .smart-list-preference-header {
        align-items: stretch;
        flex-direction: column;
    }

    .smart-list-preference-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .smart-list-field-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 761px) and (max-width: 1040px) {
    .smart-list-preference-editor {
        width: calc(100vw - 44px);
    }

    .smart-list-field-choice-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.filter-builder {
    display: grid;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 14px 18px;
}

.filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

.sort-control {
    display: grid;
    gap: 5px;
    min-width: 150px;
}

.sort-control span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.sort-control select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 8px 10px;
}

.filter-list {
    display: grid;
    gap: 10px;
}

.filter-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.9fr) minmax(120px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.filter-row label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.filter-row label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.filter-row input,
.filter-row select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 8px 10px;
}

.card-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
    padding: 10px 18px;
}

.tab-button {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
    padding: 7px 12px;
}

.tab-button.active,
.tab-button:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.empty-list {
    padding: 18px;
    color: var(--muted);
    line-height: 1.45;
}

.worker-card {
    display: flex;
    width: 100%;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--surface);
    padding: 14px 18px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.worker-card:last-child {
    border-bottom-color: transparent;
}

.worker-card:hover {
    border-color: var(--line);
    background: var(--accent-soft);
}

.worker-card.selected,
.worker-card.selected:hover {
    border-color: rgba(0, 116, 130, .35);
    background: var(--surface-subtle);
    box-shadow: inset 3px 0 0 var(--teal);
}

.worker-card:focus-visible,
.worker-list-item:focus-visible,
.document-list-row:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.document-card-panel .document-section {
    padding: 14px 16px 16px;
}

.document-card-panel .document-read-view {
    align-content: start;
    display: grid;
    grid-auto-rows: max-content;
}

.document-card-panel .document-read-view .read-definition-list {
    align-content: start;
    display: grid;
    grid-auto-rows: max-content;
}

.document-card-panel .document-read-view .read-definition-list > div {
    align-self: start;
}

.document-card-panel .document-form {
    display: grid;
    gap: 14px;
    padding: 14px 16px 16px;
}

.document-card-panel .document-form .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 360px));
    align-items: start;
    justify-content: start;
    gap: 12px;
    max-width: 760px;
}

.document-card-panel .document-form .nested-fieldset {
    max-width: 780px;
}

.document-card-panel .initial-document-upload {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(220px, 360px) minmax(220px, 360px);
    align-items: end;
    justify-content: start;
    gap: 12px;
    max-width: 1080px;
}

.document-card-panel .link-editor {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(260px, 420px) minmax(180px, 260px);
    align-items: end;
    justify-content: start;
    gap: 12px;
    max-width: 980px;
    margin-bottom: 12px;
}

.document-card-panel .link-editor label,
.document-card-panel .document-form label {
    display: grid;
    gap: 5px;
}

.document-card-panel .link-editor label > span,
.document-card-panel .document-form label > span {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.document-card-panel .link-editor input,
.document-card-panel .link-editor select,
.document-card-panel .document-form input,
.document-card-panel .document-form select,
.document-card-panel .document-form textarea {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    box-shadow: var(--section-shadow-soft);
    padding: 7px 9px;
}

.document-card-panel .link-editor select,
.document-card-panel .document-form select {
    padding-right: 28px;
}

.document-card-panel .link-editor input:focus,
.document-card-panel .link-editor select:focus,
.document-card-panel .document-form input:focus,
.document-card-panel .document-form select:focus,
.document-card-panel .document-form textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(36, 139, 128, 0.14);
    outline: none;
}

.document-card-panel .link-editor input::placeholder {
    color: var(--muted);
}

.document-card-panel .relation-picker {
    display: grid;
    gap: 6px;
    max-width: 980px;
}

.document-card-panel .relation-pick-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 9px 12px;
    text-align: left;
}

.document-card-panel .relation-pick-row:hover,
.document-card-panel .relation-pick-row:focus-visible {
    border-color: rgba(0, 116, 130, .35);
    background: var(--surface-subtle);
    outline: none;
}

.document-card-panel .relation-pick-row strong,
.document-card-panel .relation-pick-row small {
    display: block;
}

.document-card-panel .relation-pick-row small {
    color: var(--muted);
}

.worker-card > span:first-child {
    display: grid;
    gap: 4px;
}

.worker-card small {
    color: var(--muted);
}

.worker-card-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.worker-card-meta .status,
.worker-card-meta .field-badge {
    flex: 0 0 auto;
}

.course-instance-enrollment-row {
    display: grid;
    grid-template-columns: minmax(110px, max-content) minmax(0, 1fr) auto auto;
    min-height: 44px;
    align-items: center;
    gap: 10px;
}

.course-instance-enrollment-row > span:first-child {
    display: contents;
}

.course-instance-enrollment-row > span:first-child strong,
.course-instance-enrollment-row > span:first-child small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-instance-enrollment-row > .status,
.course-instance-enrollment-row > .field-badge {
    justify-self: end;
    width: max-content;
}

.worker-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
    gap: 14px;
    padding: 18px;
}

.worker-form > * {
    align-self: start;
}

.validation-summary {
    display: grid;
    gap: 6px;
    grid-column: 1 / -1;
    border: 1px solid #d6c198;
    border-radius: 4px;
    background: #f4eee3;
    color: var(--warning);
    padding: 12px;
}

.validation-summary span {
    color: var(--warning);
}

.option-editor {
    display: grid;
    grid-template-columns: minmax(180px, 0.5fr) minmax(220px, 1fr) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}

.option-editor label {
    display: grid;
    gap: 6px;
}

.option-editor label > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.option-editor input,
.option-editor select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 8px 10px;
}

.worker-form label,
.worker-form fieldset {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.worker-form label > span,
.worker-form legend {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.worker-form input,
.worker-form select,
.worker-form textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 8px 10px;
}

.worker-form textarea {
    resize: vertical;
}

.worker-read-view {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    gap: 20px;
    background: linear-gradient(135deg, rgba(238, 247, 248, 0.72), rgba(255, 252, 246, 0.82));
    border-left: 4px solid rgba(0, 116, 130, 0.35);
    padding: 18px;
}

.worker-read-view > * {
    align-self: start;
}

.worker-read-header {
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid rgba(0, 116, 130, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 10px 24px rgba(31, 49, 43, 0.05);
    padding: 14px 16px;
}

.worker-read-header img {
    width: 112px;
    height: 112px;
    border: 2px solid var(--line);
    border-radius: 999px;
    object-fit: cover;
}

.worker-read-header .user-read-avatar {
    width: 112px;
    height: 112px;
    border: 2px solid var(--line);
    font-size: 32px;
}

.worker-read-header h3 {
    margin-bottom: 4px;
    font-size: 24px;
    color: var(--teal-dark);
}

.worker-read-header p {
    margin-bottom: 10px;
    color: var(--muted);
}

.user-read-view .read-details-grid dd {
    display: grid;
    gap: 6px;
}

.read-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.read-details-grid div {
    display: grid;
    gap: 4px;
    min-width: 0;
    border: 1px solid rgba(205, 189, 165, 0.74);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 8px 18px rgba(31, 49, 43, 0.04);
    padding: 12px;
}

.read-details-grid dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.read-details-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
    color: var(--text);
}

.read-link-button {
    display: inline;
    border: 0;
    background: transparent;
    color: var(--teal);
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
    padding: 0;
    text-align: left;
    text-decoration: none;
}

.read-link-button:hover {
    color: var(--teal-dark);
}

.card-two-column-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    gap: 18px;
    align-items: start;
}

.card-column {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.card-column > .read-details-grid,
.card-column .read-section > .read-details-grid {
    grid-template-columns: 1fr;
}

.card-column .read-section {
    margin-top: 0;
}

.card-column:empty {
    display: none;
}

.login-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    background: #e9e3d8;
}

.login-shell::before {
    content: "";
    position: absolute;
    inset: -28px;
    z-index: -2;
    background:
        linear-gradient(135deg, rgba(246, 239, 226, 0.2), rgba(255, 255, 255, 0.28)),
        url("/images/login-background.jpg") center / cover no-repeat;
    filter: blur(8px) brightness(1.08) saturate(0.96);
    transform: scale(1.03);
}

.login-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.42), transparent 30%),
        linear-gradient(135deg, rgba(63, 57, 49, 0.22), rgba(255, 248, 235, 0.42));
    backdrop-filter: blur(1px);
}

.login-panel {
    position: relative;
    width: min(720px, 100%);
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow:
        0 24px 70px rgba(12, 33, 30, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px) saturate(1.04);
    padding: 28px;
    border-radius: 18px;
}

.login-brand {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.login-brand .brand-mark {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
}

.login-brand h1 {
    margin: 2px 0 8px;
}

.login-brand p:last-child {
    margin: 0;
    color: var(--muted);
}

.demo-user-list {
    display: grid;
    gap: 1px;
    margin-top: 18px;
    border: 1px solid var(--line);
    background: var(--line);
}

.demo-user-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 12px;
    background: #fff;
}

.demo-user-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-subtle);
    color: var(--teal-dark);
    font-weight: 800;
    object-fit: cover;
}

.worker-card .list-profile-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--surface-subtle);
    color: var(--teal-dark);
    font-size: 0.72rem;
    font-weight: 800;
    object-fit: cover;
}

.worker-card.user-list-card {
    justify-content: flex-start;
}

.worker-card.user-list-card > span:nth-child(2) {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.worker-card.user-list-card > .status {
    margin-left: auto;
}

.team-management-layout .panel:not(.worker-list-panel) {
    min-width: 0;
}

.team-management-layout .team-filter-form {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    background: var(--surface-subtle);
    padding: 12px;
}

.team-management-layout .team-filter-form label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.team-management-layout .team-filter-form label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.team-management-layout .team-filter-form input,
.team-management-layout .team-filter-form select,
.team-form input,
.team-form select,
.team-form textarea,
.team-member-editor input,
.team-member-editor select,
.team-member-editor textarea,
.team-transfer-form input,
.team-transfer-form select,
.team-transfer-form textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 8px 10px;
}

.team-management-layout .team-filter-form input:focus,
.team-management-layout .team-filter-form select:focus,
.team-form input:focus,
.team-form select:focus,
.team-form textarea:focus,
.team-member-editor input:focus,
.team-member-editor select:focus,
.team-member-editor textarea:focus,
.team-transfer-form input:focus,
.team-transfer-form select:focus,
.team-transfer-form textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(0, 112, 121, 0.12);
    outline: 0;
}

.team-form,
.team-member-editor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
    gap: 12px;
    padding: 14px;
}

.team-form {
    max-width: 760px;
}

.team-member-editor {
    max-width: 1040px;
}

.team-form label,
.team-member-editor label,
.team-transfer-form label {
    display: grid;
    gap: 6px;
    color: var(--text);
    font-weight: 700;
}

.team-form label > span,
.team-member-editor label > span,
.team-transfer-form label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.team-transfer-form .label-with-info {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.info-mark {
    align-items: center;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    cursor: help;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    height: 18px;
    justify-content: center;
    line-height: 1;
    position: relative;
    width: 18px;
}

.info-mark::after {
    background: var(--teal-dark);
    border-radius: 6px;
    bottom: calc(100% + 8px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    color: #fff;
    content: attr(aria-label);
    font-size: 12px;
    font-weight: 600;
    left: 50%;
    line-height: 1.35;
    max-width: 260px;
    min-width: 220px;
    opacity: 0;
    padding: 8px 10px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%) translateY(4px);
    transition: opacity .14s ease, transform .14s ease;
    visibility: hidden;
    z-index: 20;
}

.info-mark:hover::after,
.info-mark:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

.team-form .wide-field,
.team-member-editor .wide-field {
    grid-column: 1 / -1;
    max-width: 760px;
}

.team-form .profile-image-editor {
    grid-column: 1 / -1;
    max-width: 520px;
}

.team-form textarea,
.team-member-editor textarea {
    min-height: 86px;
    resize: vertical;
}

.team-members-section {
    background: linear-gradient(180deg, rgba(219, 235, 236, 0.78), rgba(247, 243, 235, 0.7));
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 6px;
    margin-top: 16px;
    padding: 16px;
}

.team-members-section .section-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.team-members-section h3,
.team-members-section p {
    margin: 0;
}

.team-members-section p {
    color: var(--muted);
}

.team-edit-tool-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.team-tool-action {
    background: #e4f1f2;
    border: 1px solid #aac9cc;
    border-radius: 6px;
    color: var(--teal-dark);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    min-height: 34px;
    padding: 7px 11px;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}

.team-tool-action:hover {
    background: #d4ebed;
    border-color: var(--teal);
    transform: translateY(-1px);
}

.team-tool-action.selected {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
    color: #fff;
}

.team-warning-dialog {
    background: var(--surface);
    border: 1px solid #dca6aa;
    border-left: 5px solid var(--red);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(20, 44, 39, 0.28);
    display: grid;
    gap: 14px;
    max-width: 560px;
    padding: 18px;
    width: min(560px, 100%);
}

.team-warning-dialog-header {
    align-items: center;
    display: flex;
    gap: 12px;
}

.team-warning-dialog-header h2,
.team-warning-dialog-header p,
.team-warning-dialog > p {
    margin: 0;
}

.team-warning-dialog-header h2 {
    color: var(--teal-dark);
    font-size: 21px;
    line-height: 1.1;
}

.team-warning-dialog-header p {
    color: var(--muted);
}

.team-warning-dialog > p {
    background: #fff8e6;
    border: 1px solid #ecd5a1;
    border-radius: 6px;
    color: var(--text);
    line-height: 1.45;
    padding: 12px;
}

.team-warning-icon {
    align-items: center;
    background: var(--red);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.team-warning-dialog-actions {
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

.team-member-editor {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-bottom: 14px;
    padding: 12px;
}

.team-edit-section-body {
    display: grid;
    gap: 10px;
}

.team-edit-section-body > .section-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 4px;
}

.team-edit-section-body > .section-heading h3,
.team-edit-section-body > .section-heading p {
    margin: 0;
}

.team-edit-section-body > .section-heading p,
.team-edit-section-body > .section-heading > span {
    color: var(--muted);
}

.team-member-editor .check-row,
.team-transfer-form .check-row {
    align-content: end;
    display: flex;
    min-height: max-content;
    padding-top: 20px;
}

.team-form .check-row {
    align-items: center;
    display: flex;
    min-height: 38px;
    padding-top: 18px;
}

.team-form .check-row input,
.team-member-editor .check-row input,
.team-transfer-form .check-row input {
    width: auto;
    min-height: auto;
    accent-color: var(--red);
}

.team-member-editor .inline-actions,
.team-transfer-form .inline-actions {
    align-items: end;
    display: flex;
    margin: 0;
    padding: 0;
}

.team-member-list {
    display: grid;
    gap: 8px;
}

.team-member-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1fr) auto;
    padding: 10px 12px;
}

.team-member-row:hover {
    border-color: rgba(0, 112, 121, 0.45);
    box-shadow: 0 0 0 2px rgba(0, 112, 121, 0.08);
}

.team-member-row.selected {
    background: rgba(219, 235, 236, 0.86);
    border-color: var(--teal);
}

.team-member-row strong,
.team-member-row small {
    display: block;
}

.team-member-row small {
    color: var(--muted);
}

.team-member-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.responsibility-transfer-card {
    background: linear-gradient(180deg, rgba(219, 235, 236, 0.84), rgba(247, 243, 235, 0.74));
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 6px;
    margin-top: 16px;
    padding: 14px;
}

.responsibility-transfer-card .section-heading {
    margin-bottom: 10px;
}

.team-transfer-form {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 4px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
    margin-bottom: 12px;
    padding: 12px;
}

.team-transfer-form .check-row {
    max-width: 320px;
}

.team-transfer-preview {
    display: grid;
    gap: 8px;
}

.team-transfer-preview-header {
    align-items: baseline;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.team-transfer-preview-header strong {
    color: var(--text);
}

.team-transfer-preview-row {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 9px 10px;
}

.team-transfer-preview-row strong,
.team-transfer-preview-row small {
    display: block;
}

.team-transfer-preview-row small {
    color: var(--muted);
}

.team-transfer-course {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    gap: 10px;
    padding: 10px;
}

.team-transfer-course-header,
.team-transfer-instance-header {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.team-transfer-course-header strong,
.team-transfer-course-header small,
.team-transfer-instance-header strong,
.team-transfer-instance-header small {
    display: block;
}

.team-transfer-course-header small,
.team-transfer-instance-header small {
    color: var(--muted);
}

.team-transfer-instance-list {
    display: grid;
    gap: 8px;
    padding-left: 10px;
}

.team-transfer-instance {
    background: var(--surface-subtle);
    border-left: 3px solid var(--line);
    border-radius: 4px;
    display: grid;
    gap: 8px;
    padding: 9px 10px;
}

.team-transfer-planning-list {
    display: grid;
    gap: 6px;
    padding-left: 10px;
}

.team-transfer-planning-row {
    align-items: baseline;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    padding: 7px 9px;
}

.team-transfer-planning-row span {
    font-weight: 700;
}

.team-transfer-planning-row small {
    color: var(--muted);
}

.team-usage-section {
    background: linear-gradient(180deg, rgba(219, 235, 236, 0.84), rgba(247, 243, 235, 0.74));
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 6px;
    margin-top: 16px;
    padding: 14px;
}

.team-usage-section .section-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.team-usage-section h3,
.team-usage-section p {
    margin: 0;
}

.team-usage-section p,
.team-usage-section .section-heading > span {
    color: var(--muted);
}

.team-usage-list {
    display: grid;
    gap: 8px;
}

.team-usage-summary-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.team-usage-summary-grid div {
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid var(--line);
    border-radius: 5px;
    display: grid;
    gap: 3px;
    padding: 9px 10px;
}

.team-usage-summary-grid span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.team-usage-summary-grid strong {
    color: var(--teal-dark);
    font-size: 18px;
    line-height: 1;
}

.team-usage-toolbar {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 360px) auto;
}

.team-usage-toolbar label {
    display: grid;
    gap: 5px;
    font-weight: 700;
}

.team-usage-toolbar label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.team-usage-toolbar input:not([type="checkbox"]) {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    min-height: 34px;
    padding: 7px 9px;
}

.team-usage-toolbar input:not([type="checkbox"]):focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(0, 112, 121, 0.12);
    outline: 0;
}

.team-usage-toolbar .check-row {
    align-items: center;
    display: flex;
    min-height: 34px;
}

.team-usage-toolbar .check-row input {
    accent-color: var(--red);
}

.team-usage-group-list {
    max-height: min(520px, 48vh);
    overflow: auto;
    padding-right: 4px;
    scrollbar-color: rgba(0, 112, 121, .45) rgba(0, 0, 0, .04);
    scrollbar-width: thin;
}

.team-usage-group-list::-webkit-scrollbar {
    width: 9px;
}

.team-usage-group-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .04);
    border-radius: 999px;
}

.team-usage-group-list::-webkit-scrollbar-thumb {
    background: rgba(0, 112, 121, .42);
    border-radius: 999px;
}

.team-usage-course-group {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    gap: 8px;
    padding: 10px;
}

.team-usage-course-header {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.team-usage-course-header strong,
.team-usage-course-header small {
    display: block;
}

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

.team-usage-link:hover {
    color: var(--red);
    text-decoration: none;
}

.team-usage-course-header small {
    color: var(--muted);
}

.team-usage-course-stats {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.team-usage-course-stats > span:not(.field-badge) {
    background: rgba(219, 235, 236, 0.72);
    border-radius: 999px;
    color: var(--teal-dark);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
}

.team-usage-instance-list {
    display: grid;
    gap: 6px;
}

.team-usage-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 4px;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 9px 10px;
}

.team-usage-row strong,
.team-usage-row small {
    display: block;
}

.team-usage-row small {
    color: var(--muted);
}

html.compact-mode .team-members-section,
html.compact-mode .team-usage-section,
html.compact-mode .responsibility-transfer-card {
    border-left-width: 3px;
    margin-top: 8px;
    padding: 9px 10px;
}

html.compact-mode .team-members-section .section-heading,
html.compact-mode .team-usage-section .section-heading,
html.compact-mode .responsibility-transfer-card .section-heading,
html.compact-mode .team-edit-section-body > .section-heading {
    gap: 8px;
    margin-bottom: 7px;
}

html.compact-mode .team-members-section h3,
html.compact-mode .team-usage-section h3,
html.compact-mode .responsibility-transfer-card h3,
html.compact-mode .team-edit-section-body > .section-heading h3 {
    font-size: 15px;
    line-height: 1.1;
}

html.compact-mode .team-members-section p,
html.compact-mode .team-usage-section p,
html.compact-mode .responsibility-transfer-card p,
html.compact-mode .team-edit-section-body > .section-heading p,
html.compact-mode .team-transfer-preview-header,
html.compact-mode .team-member-row small,
html.compact-mode .team-usage-row small,
html.compact-mode .team-transfer-course-header small,
html.compact-mode .team-transfer-instance-header small,
html.compact-mode .team-transfer-planning-row small {
    font-size: 11px;
    line-height: 1.25;
}

html.compact-mode .team-edit-tool-actions {
    gap: 5px;
}

html.compact-mode .team-edit-section-body {
    gap: 6px;
}

html.compact-mode .team-tool-action {
    border-radius: 5px;
    font-size: 12px;
    min-height: 28px;
    padding: 4px 8px;
}

html.compact-mode .team-warning-dialog {
    gap: 10px;
    max-width: 520px;
    padding: 14px;
}

html.compact-mode .team-warning-dialog-header {
    gap: 9px;
}

html.compact-mode .team-warning-dialog-header h2 {
    font-size: 18px;
}

html.compact-mode .team-warning-dialog-header p,
html.compact-mode .team-warning-dialog > p {
    font-size: 12px;
}

html.compact-mode .team-warning-dialog > p {
    padding: 9px;
}

html.compact-mode .team-warning-icon {
    font-size: 15px;
    height: 30px;
    width: 30px;
}

html.compact-mode .team-member-editor,
html.compact-mode .team-transfer-form {
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 260px));
    margin-bottom: 8px;
    padding: 8px;
}

html.compact-mode .team-management-layout .team-filter-form input,
html.compact-mode .team-management-layout .team-filter-form select,
html.compact-mode .team-form input,
html.compact-mode .team-form select,
html.compact-mode .team-form textarea,
html.compact-mode .team-member-editor input,
html.compact-mode .team-member-editor select,
html.compact-mode .team-member-editor textarea,
html.compact-mode .team-transfer-form input,
html.compact-mode .team-transfer-form select,
html.compact-mode .team-transfer-form textarea {
    min-height: 30px;
    padding: 5px 8px;
}

html.compact-mode .team-form label,
html.compact-mode .team-member-editor label,
html.compact-mode .team-transfer-form label {
    gap: 4px;
}

html.compact-mode .team-form label > span,
html.compact-mode .team-member-editor label > span,
html.compact-mode .team-transfer-form label > span {
    font-size: 11px;
}

html.compact-mode .team-member-editor .check-row,
html.compact-mode .team-transfer-form .check-row,
html.compact-mode .team-form .check-row {
    min-height: 30px;
    padding-top: 14px;
}

html.compact-mode .team-member-list,
html.compact-mode .team-usage-list,
html.compact-mode .team-transfer-preview,
html.compact-mode .team-transfer-instance-list,
html.compact-mode .team-usage-instance-list {
    gap: 5px;
}

html.compact-mode .team-member-row,
html.compact-mode .team-usage-row,
html.compact-mode .team-usage-course-group,
html.compact-mode .team-transfer-course,
html.compact-mode .team-transfer-instance,
html.compact-mode .team-transfer-planning-row {
    gap: 6px;
    padding: 6px 8px;
}

html.compact-mode .team-usage-summary-grid {
    gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

html.compact-mode .team-usage-summary-grid div {
    gap: 1px;
    padding: 6px 8px;
}

html.compact-mode .team-usage-summary-grid span,
html.compact-mode .team-usage-course-stats > span:not(.field-badge) {
    font-size: 10px;
}

html.compact-mode .team-usage-summary-grid strong {
    font-size: 15px;
}

html.compact-mode .team-usage-toolbar {
    gap: 6px;
    grid-template-columns: minmax(180px, 300px) auto;
}

html.compact-mode .team-usage-toolbar label {
    gap: 3px;
}

html.compact-mode .team-usage-toolbar label > span {
    font-size: 11px;
}

html.compact-mode .team-usage-toolbar input:not([type="checkbox"]) {
    min-height: 28px;
    padding: 4px 7px;
}

html.compact-mode .team-usage-toolbar .check-row {
    min-height: 28px;
}

html.compact-mode .team-usage-group-list {
    max-height: min(430px, 48vh);
}

html.compact-mode .team-usage-course-header {
    gap: 6px;
}

html.compact-mode .team-usage-course-stats {
    gap: 4px;
}

html.compact-mode .team-member-row,
html.compact-mode .team-usage-row {
    align-items: center;
}

html.compact-mode .team-member-meta {
    gap: 5px;
}

html.compact-mode .worker-card.user-list-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

html.compact-mode .worker-card.user-list-card > .list-profile-avatar {
    display: grid;
    width: 28px;
    height: 28px;
}

html.compact-mode .worker-card.user-list-card > span:nth-child(2) {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.user-profile-source {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--line);
}

.user-profile-source > span:last-child {
    display: grid;
    gap: 2px;
}

.user-profile-source small {
    color: var(--muted);
}

.user-worker-link {
    justify-self: start;
    margin-top: 3px;
}

.user-profile-image {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 50%;
    object-fit: cover;
}

.builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.96fr);
    align-items: start;
    gap: 14px;
}

.builder-type-list {
    min-width: 0;
}

.builder-type-filter {
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
    padding: 9px 10px;
}

.builder-type-filter label {
    display: grid;
    gap: 4px;
}

.builder-type-filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.builder-type-filter label > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.builder-type-filter input,
.builder-type-filter select {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 6px 8px;
}

.entity-usage-card {
    display: grid;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-subtle);
    padding: 8px 10px;
}

.entity-usage-card > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.entity-usage-card > div:first-child > span,
.entity-usage-card small {
    color: var(--muted);
    font-size: 12px;
}

.entity-usage-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.entity-usage-item {
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    padding: 3px 8px;
}

.entity-usage-item.blocking {
    background: var(--accent-soft);
    color: var(--danger);
}

.builder-entity-type-form {
    grid-template-columns: repeat(2, minmax(260px, 430px));
    max-width: 910px;
    padding: 14px;
}

.builder-entity-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 2px;
}

.builder-entity-footer .form-actions {
    margin-left: auto;
}

.builder-type-list > .worker-list {
    align-content: start;
    max-height: min(72vh, 760px);
    overflow-y: auto;
    padding: 6px;
}

.builder-type-list .worker-card {
    align-items: flex-start;
    min-width: 0;
}

.builder-type-list .worker-card > span:first-child {
    min-width: 0;
}

.builder-type-list .worker-card strong,
.builder-type-list .worker-card small,
html.compact-mode .builder-type-list .worker-card strong,
html.compact-mode .builder-type-list .worker-card small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

html.compact-mode .builder-type-list .worker-card > span:first-child {
    display: grid;
    align-items: start;
    gap: 2px;
}

html.compact-mode .builder-type-list .worker-card strong {
    min-width: 0;
}

.builder-workspace {
    display: grid;
    gap: 14px;
    min-width: 0;
    container-type: inline-size;
}

.builder-fields-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(340px, 1.2fr);
    gap: 14px;
    padding: 14px;
}

.builder-field-form {
    align-self: start;
    border-left: 1px solid var(--line);
    padding-left: 14px;
}

.relation-option-list,
.relation-link-list {
    display: grid;
    gap: 6px;
}

.relation-link-list {
    justify-items: start;
}

@media (max-width: 900px) {
    .builder-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .customization-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .builder-fields-grid {
        grid-template-columns: 1fr;
    }

    .builder-field-form {
        border-top: 1px solid var(--line);
        border-left: 0;
        padding-top: 14px;
        padding-left: 0;
    }

    .builder-entity-type-form {
        max-width: 100%;
    }
}

@media (max-width: 680px) {
    .builder-entity-type-form {
        grid-template-columns: 1fr;
    }

    .builder-entity-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .builder-entity-footer .form-actions {
        margin-left: 0;
    }
}

@container (max-width: 620px) {
    .builder-entity-type-form,
    .builder-fields-grid {
        grid-template-columns: 1fr;
    }

    .builder-field-form {
        border-top: 1px solid var(--line);
        border-left: 0;
        padding-top: 14px;
        padding-left: 0;
    }

    .entity-usage-card > div:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

.demo-user-copy {
    display: grid;
    min-width: 0;
}

.demo-user-copy small {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-login-note {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    text-align: center;
}

.application-header {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
    min-height: 58px;
    margin: -4px 0 8px;
    padding: 8px 10px 8px 14px;
    border-left: 4px solid var(--accent);
    border-radius: 4px;
    background: var(--teal-dark);
    color: #ffffff;
    box-shadow: var(--section-shadow-soft);
    position: sticky;
    top: 0;
    z-index: 50;
}

.application-header.delegating {
    border-left-color: #efb4c0;
}

.application-header .demo-session-strip {
    color: #dce6e5;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.top-user-settings {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
}

.top-user-profile,
.top-density-toggle {
    align-items: center;
    display: flex;
    gap: 9px;
    min-width: 0;
}

.top-user-profile {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    padding-right: 12px;
}

.top-user-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.top-user-copy strong {
    color: #ffffff;
    font-size: 12px;
    line-height: 1.15;
}

.top-user-copy small {
    color: #dce6e5;
    font-size: 10px;
    line-height: 1.2;
}

.top-density-toggle {
    cursor: pointer;
    padding: 4px 6px;
}

.compact-toggle-input:checked ~ .top-density-toggle .toggle-switch {
    border-color: rgba(255, 255, 255, 0.42);
    background: var(--accent);
}

.compact-toggle-input:checked ~ .top-density-toggle .toggle-switch::before {
    transform: translateX(16px);
}

.top-header-action {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    min-height: 34px;
    padding: 7px 10px;
    white-space: nowrap;
}

.top-header-action:hover {
    background: rgba(255, 255, 255, 0.16);
}

.access-denied-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    max-width: 760px;
    margin: 64px auto;
    padding: 24px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--section-shadow);
}

.access-denied-symbol {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
}

.access-denied-panel h1,
.access-denied-panel p {
    margin: 0 0 4px;
}

.access-denied-panel small {
    color: var(--muted);
}

.permission-read-only form.worker-form,
.permission-read-only form.planning-form,
.permission-read-only form.planning-note-form,
.permission-read-only .planning-editor,
.permission-read-only .instance-planning-toolbar,
.permission-read-only .planning-toolbar {
    display: none;
}

.permission-read-only .planning-day-header .row-actions,
.permission-read-only .planning-note .icon-action,
.permission-read-only .planning-item-actions,
.permission-read-only .icon-action {
    display: none;
}

.worker-form.permission-read-only input,
.worker-form.permission-read-only select,
.worker-form.permission-read-only textarea,
.worker-form.permission-read-only .permission-transfer-item,
.worker-form.permission-read-only .permission-transfer-actions button {
    pointer-events: none;
    opacity: 0.72;
}

@media (max-width: 680px) {
    .worker-form.custom-field-editor-form {
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
    }

    .login-panel {
        padding: 18px;
    }

    .login-brand {
        gap: 12px;
    }

    .demo-user-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .demo-user-row .primary-action {
        grid-column: 1 / -1;
        width: 100%;
    }

    .access-denied-panel {
        grid-template-columns: auto 1fr;
        margin: 24px auto;
    }

    .access-denied-panel .secondary-action {
        grid-column: 1 / -1;
    }
}

.read-section {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(0, 116, 130, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.42);
    padding: 12px;
}

.read-section h4 {
    margin: 0;
    color: var(--accent);
    font-size: 15px;
}

.read-section p,
.empty-text {
    color: var(--muted);
    line-height: 1.45;
}

.teaching-schedule-card {
    border: 1px solid rgba(0, 128, 139, 0.22);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(229, 244, 245, 0.82), rgba(255, 255, 255, 0.86));
    padding: 12px 14px;
    transition:
        padding 360ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 360ms ease,
        box-shadow 360ms ease;
}

.teaching-schedule-card.collapsed {
    padding-block: 10px;
}

.teaching-schedule-heading {
    margin: 0;
}

.teaching-schedule-toggle {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 800;
    gap: 8px;
    min-height: 0;
    padding: 0;
    text-align: left;
}

.teaching-schedule-toggle:hover,
.teaching-schedule-toggle:focus-visible {
    color: var(--accent);
    outline: none;
}

.teaching-schedule-toggle-icon {
    align-items: center;
    background: rgba(228, 238, 241, 0.9);
    border: 1px solid rgba(0, 132, 142, 0.28);
    border-radius: 999px;
    display: inline-flex;
    font-size: 16px;
    height: 22px;
    justify-content: center;
    line-height: 1;
    transition:
        background 280ms ease,
        border-color 280ms ease,
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    width: 22px;
}

.teaching-schedule-toggle[aria-expanded="true"] .teaching-schedule-toggle-icon {
    background: rgba(223, 243, 245, 0.96);
    border-color: rgba(0, 132, 142, 0.46);
    transform: rotate(90deg);
}

.teaching-schedule-body {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    overflow: hidden;
    transition:
        grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 300ms ease,
        margin-top 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.teaching-schedule-body.collapsed {
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
}

.teaching-schedule-body-inner {
    min-height: 0;
    overflow: hidden;
    padding-top: 8px;
    transition: padding-top 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.teaching-schedule-body.collapsed .teaching-schedule-body-inner {
    padding-top: 0;
}

.teaching-schedule-list {
    display: grid;
    gap: 4px;
}

.planning-info-card-stack {
    display: grid;
    gap: 8px;
}

.teaching-schedule-row {
    display: grid;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(197, 177, 145, 0.7);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.75);
    padding: 8px 10px;
    line-height: 1.25;
}

.teaching-schedule-head {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding-block: 0;
    text-transform: uppercase;
}

@media (max-width: 820px) {
    .teaching-schedule-row {
        grid-template-columns: 1fr 1fr;
    }
}

.worker-read-view .field-required {
    display: none;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-list span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
}

.read-custom-image {
    width: 84px;
    height: 84px;
    border: 1px solid var(--line);
    border-radius: 4px;
    object-fit: cover;
}

.worker-form fieldset,
.profile-image-editor,
.full-span,
.form-actions {
    grid-column: 1 / -1;
}

.worker-form fieldset {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px;
}

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

.permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    max-height: 360px;
    overflow: auto;
}

.user-function-permissions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
    margin-top: 0;
    padding: 12px 14px 14px;
}

.user-function-permissions > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.user-function-permissions > label {
    display: grid;
    max-width: 420px;
    gap: 6px;
}

.function-permission-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px 10px;
    max-height: 360px;
    padding-right: 4px;
}

.function-permission-row {
    min-height: 42px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    padding: 6px 8px;
}

.function-permission-row:hover {
    background: var(--surface-subtle);
}

.function-permission-row input {
    width: 16px;
    min-height: 16px;
}

.function-permission-row strong {
    font-size: 13px;
    line-height: 1.2;
}

.function-permission-row small {
    font-size: 11px;
    line-height: 1.2;
}

.list-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 12px;
}

.permission-row {
    align-items: flex-start;
    position: relative;
}

.permission-row span {
    display: grid;
    gap: 2px;
}

.permission-row small {
    color: var(--muted);
    font-size: 11px;
}

.permission-row em {
    margin-left: auto;
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 5px 7px;
    text-transform: uppercase;
}

.permission-row.permission-inherited em,
.permission-row.permission-system em {
    background: rgba(34, 107, 122, 0.14);
    color: var(--teal-dark);
}

.permission-row.permission-manual em {
    background: rgba(210, 91, 122, 0.14);
    color: var(--magenta);
}

.permission-row.permission-denied em {
    background: rgba(117, 48, 78, 0.12);
    color: var(--berry);
}

.permission-transfer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.permission-search-field {
    display: grid;
    gap: 4px;
    max-width: 520px;
    margin: 8px 0 10px;
}

.permission-search-field > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.permission-search-field input {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 6px 8px;
}

.permission-transfer-column {
    display: grid;
    grid-template-rows: auto minmax(220px, min(46vh, 360px));
    gap: 8px;
    min-width: 0;
}

.permission-transfer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--teal-dark);
}

.permission-transfer-header span {
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
}

.permission-transfer-list {
    width: 100%;
    height: min(46vh, 360px);
    min-height: 220px;
    max-height: 360px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    overflow: auto;
}

.selected-permission-list {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 8px;
}

.permission-transfer-actions {
    display: grid;
    align-content: center;
    gap: 8px;
}

.permission-transfer-actions .secondary-action {
    min-width: 38px;
    padding-inline: 10px;
}

.permission-transfer-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--surface-subtle);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    padding: 8px 10px;
    text-align: left;
}

.permission-transfer-item:hover,
.permission-transfer-item.selected {
    border-color: var(--teal);
    background: #e4eef1;
}

.permission-transfer-item span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.permission-transfer-item small {
    color: var(--muted);
    font-size: 11px;
}

.permission-transfer-item em {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    padding: 5px 7px;
    text-transform: uppercase;
}

.permission-transfer-item.permission-inherited em,
.permission-transfer-item.permission-system em {
    background: rgba(34, 107, 122, 0.14);
    color: var(--teal-dark);
}

.permission-transfer-item.permission-manual em {
    background: rgba(210, 91, 122, 0.14);
    color: var(--magenta);
}

.permission-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.permission-chip-list span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 700;
    min-height: 24px;
    padding: 3px 8px;
}

.permission-plain-list {
    display: grid;
    gap: 3px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.permission-plain-list li {
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.user-function-permissions {
    margin-top: 0;
}

.user-function-permissions label {
    display: grid;
    gap: 6px;
    margin-bottom: 0;
}

.section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-title-row h4,
.section-title-row p {
    margin: 0;
}

.form-hint {
    grid-column: 1 / -1;
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
}

.access-level-label {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    position: relative;
    z-index: 35;
}

.access-level-label:hover,
.access-level-label:focus-within {
    z-index: 4000;
}

.access-level-info-mark {
    align-items: center;
    appearance: none;
    background: #f4efe5;
    border: 1px solid #d9c8aa;
    border-radius: 999px;
    color: #7b633d;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    height: 14px;
    justify-content: center;
    line-height: 1;
    min-height: 0;
    padding: 0;
    position: relative;
    width: 14px;
    z-index: 1;
}

.access-level-info-mark:hover,
.access-level-info-mark:focus-visible,
.access-level-info-mark.open {
    background: #eee5d2;
    border-color: #c3a873;
    outline: none;
}

.access-level-hover-card {
    background: #fffaf0;
    border: 1px solid #d9bd86;
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(62, 43, 12, 0.18);
    color: var(--ink);
    font-size: 11px;
    font-weight: 500;
    left: calc(100% + 8px);
    line-height: 1.35;
    max-width: 320px;
    min-width: 260px;
    opacity: 1;
    padding: 9px 10px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    top: -8px;
    transform: none;
    visibility: visible;
    white-space: normal;
    z-index: 4200;
}

.access-level-hover-card strong {
    color: #7a5221;
    font-size: 11px;
    font-weight: 800;
}

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

.check-row {
    display: flex !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px !important;
}

.check-row input {
    width: 18px;
    min-height: 18px;
}

.user-demo-sign-in-toggle {
    align-self: end;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: color-mix(in srgb, var(--panel) 68%, var(--surface));
    padding: 8px 10px;
}

.user-demo-sign-in-toggle input {
    flex: 0 0 auto;
}

.user-demo-sign-in-toggle span {
    color: var(--text) !important;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.nested-fieldset {
    grid-column: auto !important;
    padding: 10px !important;
}

.profile-image-editor {
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
}

.profile-image-editor img,
.profile-placeholder {
    width: 112px;
    height: 112px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.profile-image-editor img {
    border: 2px solid var(--line);
    object-fit: cover;
}

.profile-placeholder {
    display: grid;
    place-items: center;
    border: 2px dashed #b7b9b9;
    background: var(--surface-subtle);
    color: var(--muted);
    font-size: 28px;
    font-weight: 800;
}

.profile-image-actions {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.profile-image-actions > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.image-field {
    display: grid;
    gap: 8px;
}

.image-field > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.image-field img {
    width: 96px;
    height: 96px;
    border: 1px solid var(--line);
    border-radius: 4px;
    object-fit: cover;
}

.planning-view {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.instances-view {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.instance-workspace {
    display: grid;
    gap: 16px;
    align-items: start;
}

.instance-card-panel {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    box-shadow: var(--section-shadow-soft);
    overflow: hidden;
}

.instance-card-panel {
    display: grid;
    gap: 14px;
}

.instance-context {
    display: grid;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    padding: 12px 18px;
}

.instance-context small {
    color: var(--muted);
}

.instance-planning-board {
    padding: 0 18px 18px;
}

.planning-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.section-heading-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.section-heading-row h4 {
    margin: 0;
}

.profile-link-list {
    display: grid;
    gap: 8px;
}

.profile-course-instances-section {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.profile-course-instances-section .section-heading-row > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.profile-course-instance-list {
    display: grid;
    gap: 7px;
}

.profile-detail-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--surface-subtle) 78%, white);
}

.profile-detail-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    padding: 7px 11px;
}

.profile-detail-tabs button.active {
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(38, 63, 56, 0.13);
    color: var(--accent-strong);
}

.profile-detail-tabs .count-pill {
    min-width: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-strong) 10%, var(--surface-subtle));
    color: var(--accent-strong);
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    text-align: center;
}

.profile-course-instance-row {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 9px 10px;
    text-align: left;
}

.profile-course-instance-row:hover {
    background: var(--surface-subtle);
}

.profile-course-instance-row.timeline-current {
    border-left: 4px solid var(--accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 36%, white), var(--surface));
}

.profile-course-instance-row.timeline-future {
    border-left: 4px solid color-mix(in srgb, var(--accent-strong) 45%, #ffffff);
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface-subtle) 78%, white), var(--surface));
}

.profile-course-instance-row.timeline-past {
    border-left: 4px solid color-mix(in srgb, var(--muted) 42%, white);
    background: linear-gradient(135deg, color-mix(in srgb, var(--line) 36%, white), var(--surface));
}

.profile-enrollment-timeline-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 4px;
}

.profile-enrollment-time-badge {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 24px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 9px;
    white-space: nowrap;
}

.profile-enrollment-time-filter {
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.profile-enrollment-time-filter:hover,
.profile-enrollment-time-filter.is-active {
    border-color: color-mix(in srgb, var(--accent) 58%, white);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 15%, transparent);
    transform: translateY(-1px);
}

.profile-enrollment-time-filter.is-active {
    outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
    outline-offset: 1px;
}

.profile-enrollment-time-badge strong {
    font-size: 12px;
}

.profile-enrollment-time-badge.timeline-current {
    border-color: color-mix(in srgb, var(--accent) 38%, white);
    background: color-mix(in srgb, var(--accent-soft) 72%, white);
    color: var(--accent-strong);
}

.profile-enrollment-time-badge.timeline-future {
    border-color: color-mix(in srgb, var(--accent-strong) 22%, white);
    background: color-mix(in srgb, var(--surface-subtle) 82%, white);
    color: var(--accent-strong);
}

.profile-enrollment-time-badge.timeline-past {
    border-color: color-mix(in srgb, var(--muted) 24%, white);
    background: color-mix(in srgb, var(--line) 48%, white);
    color: var(--muted);
}

.profile-course-date,
.profile-course-main {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.profile-course-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.profile-course-line.secondary {
    color: var(--muted);
    font-size: 11px;
}

.profile-course-date strong,
.profile-course-main strong,
.profile-course-date small,
.profile-course-main small,
.profile-course-line > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-course-date strong,
.profile-course-main strong {
    color: var(--text);
    font-size: 13px;
}

.profile-course-date small,
.profile-course-main small {
    color: var(--muted);
    font-size: 11px;
}

.profile-course-line > span {
    color: var(--muted);
    font-size: 11px;
    text-align: right;
}

.profile-course-instance-row .status {
    min-width: auto;
    min-height: 24px;
    padding: 4px 8px;
    font-size: 11px;
}

.profile-planning-usage-group-list {
    display: grid;
    gap: 8px;
}

.profile-planning-usage-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface-subtle) 86%, white), var(--surface));
}

.profile-planning-usage-group-header {
    display: grid;
    width: 100%;
    grid-template-columns: 18px minmax(116px, 0.26fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    padding: 10px 12px;
    text-align: left;
}

.profile-planning-usage-group-header:hover,
.profile-planning-usage-group-header:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
}

.profile-planning-toggle-icon {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 70%, white);
    color: var(--accent-strong);
    font-weight: 800;
    line-height: 1;
    transition: transform 180ms ease, background-color 180ms ease;
}

.profile-planning-usage-group-header[aria-expanded="true"] .profile-planning-toggle-icon {
    transform: rotate(0deg);
}

.profile-planning-usage-items-shell {
    display: grid;
    grid-template-rows: 0fr;
    border-top: 0 solid transparent;
    opacity: 0;
    transition:
        grid-template-rows 220ms ease,
        opacity 180ms ease,
        border-top-color 180ms ease;
}

.profile-planning-usage-items-shell.is-expanded {
    grid-template-rows: 1fr;
    border-top: 1px solid var(--line);
    opacity: 1;
}

.profile-planning-usage-items {
    min-height: 0;
    overflow: hidden;
}

.profile-planning-usage-items-content {
    display: grid;
    gap: 6px;
    padding: 8px;
}

.profile-planning-usage-items-shell:not(.is-expanded) .profile-planning-usage-items-content {
    pointer-events: none;
    visibility: hidden;
}

.profile-planning-usage-items-shell.is-expanded .profile-planning-usage-items-content {
    visibility: visible;
}

.profile-planning-usage-items-content .profile-course-instance-row {
    grid-template-columns: minmax(108px, 0.24fr) minmax(0, 1fr) auto auto;
    background: color-mix(in srgb, var(--surface) 92%, white);
}

.profile-planning-usage-items-content .profile-course-instance-row .profile-course-line {
    display: contents;
}

.linked-picker-field {
    display: grid;
    gap: 8px;
}

.linked-picker-field > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.linked-picker-value {
    align-items: center;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 4px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 46px;
    padding: 10px 12px;
}

.linked-picker-value strong {
    overflow-wrap: anywhere;
}

.user-card-form .linked-picker-field {
    grid-column: 1 / -1;
}

.user-card-form fieldset {
    grid-column: 1 / -1;
}

.user-card-form fieldset {
    background: linear-gradient(135deg, rgba(238, 247, 248, 0.78), rgba(255, 252, 246, 0.9));
    border-color: rgba(0, 116, 130, 0.22);
    border-left: 4px solid rgba(0, 116, 130, 0.42);
    box-shadow: 0 10px 24px rgba(31, 49, 43, 0.04);
}

.user-card-form fieldset:nth-of-type(even) {
    background: linear-gradient(135deg, rgba(255, 247, 230, 0.72), rgba(239, 248, 249, 0.82));
    border-color: rgba(196, 138, 24, 0.24);
    border-left-color: rgba(196, 138, 24, 0.42);
}

.user-card-form fieldset legend {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid rgba(205, 189, 165, 0.7);
    border-radius: 999px;
    color: var(--teal-dark);
    padding: 3px 10px;
}

.user-card-form .permission-transfer-column {
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(205, 189, 165, 0.62);
    border-radius: 8px;
    padding: 10px;
}

.user-card-form .permission-transfer-list {
    background: rgba(255, 255, 255, 0.72);
}

.user-card-form .linked-picker-value {
    justify-content: flex-start;
}

.user-card-form .linked-picker-value strong {
    flex: 1 1 280px;
    min-width: 220px;
}

.user-card-form .linked-picker-value .row-actions {
    flex: 0 0 auto;
}

.user-card-form .linked-picker-value .secondary-action {
    white-space: nowrap;
}

.card-edit-form > .profile-image-editor,
.card-edit-form > fieldset {
    background: linear-gradient(135deg, rgba(238, 247, 248, 0.78), rgba(255, 252, 246, 0.9));
    border: 1px solid rgba(0, 116, 130, 0.22);
    border-left: 4px solid rgba(0, 116, 130, 0.42);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(31, 49, 43, 0.04);
}

.card-edit-form > .profile-image-editor {
    padding: 14px 16px;
}

.card-edit-form > fieldset {
    padding: 14px 16px 16px;
}

.card-edit-form > fieldset:nth-of-type(even) {
    background: linear-gradient(135deg, rgba(255, 247, 230, 0.72), rgba(239, 248, 249, 0.82));
    border-color: rgba(196, 138, 24, 0.24);
    border-left-color: rgba(196, 138, 24, 0.42);
}

.card-edit-form > fieldset legend {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid rgba(205, 189, 165, 0.7);
    border-radius: 999px;
    color: var(--teal-dark);
    padding: 3px 10px;
}

.company-picker-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--section-shadow-soft);
    display: grid;
    gap: 12px;
    padding: 12px;
}

.company-picker-list {
    border: 1px solid var(--line);
    border-radius: 4px;
    display: grid;
    max-height: 320px;
    overflow: auto;
}

.picker-overlay {
    align-items: center;
    background: rgb(20 44 39 / 38%);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 1200;
}

.person-picker-dialog {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--section-shadow);
    display: grid;
    gap: 12px;
    max-height: min(680px, calc(100vh - 48px));
    max-width: 720px;
    overflow: hidden;
    padding: 14px;
    width: min(720px, 100%);
}

.person-picker-list {
    border: 1px solid var(--line);
    max-height: 440px;
    overflow: auto;
}

.assigned-person-list {
    display: grid;
    gap: 4px;
}

.assigned-person {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.assigned-person-text {
    display: inline-grid;
    gap: 1px;
    line-height: 1.2;
    min-width: 0;
}

.assigned-person-text small {
    color: var(--muted);
    font-size: 11px;
    overflow-wrap: normal;
    white-space: nowrap;
}

.assigned-person-text .assignment-source {
    align-self: start;
    background: rgba(0, 116, 130, 0.09);
    border-radius: 999px;
    color: var(--accent-dark);
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    padding: 2px 7px;
    width: max-content;
}

.assigned-primary-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.assigned-person .icon-action {
    flex: 0 0 auto;
    min-height: 24px;
    min-width: 24px;
}

.planning-person-assignment {
    min-width: 220px;
}

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

.task-metric {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 4px;
    box-shadow: var(--section-shadow-soft);
    color: var(--text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    min-height: 58px;
    padding: 10px 12px;
    text-align: left;
}

.task-metric:hover {
    border-color: var(--accent);
}

.task-metric span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.task-metric strong {
    font-size: 22px;
}

.task-metric.overdue {
    border-left-color: #b42d48;
}

.task-metric.today {
    border-left-color: #b7791f;
}

.task-metric.soon {
    border-left-color: #287f8d;
}

.task-metric.open {
    border-left-color: #4f7a63;
}

.task-workspace {
    display: grid;
    gap: 12px;
}

.task-workspace > .task-filter-grid,
.task-workspace > .task-table,
.task-workspace > .task-pagination,
.task-workspace > .task-kanban-scroll,
.task-workspace > .task-kanban-limit {
    margin-inline: 12px;
}

.task-workspace > .task-table,
.task-workspace > .task-pagination,
.task-workspace > .task-kanban-scroll,
.task-workspace > .task-kanban-limit {
    margin-bottom: 12px;
}

.task-view-switch {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.task-view-switch button {
    min-height: 30px;
    border: 0;
    border-left: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
}

.task-view-switch button:first-child {
    border-left: 0;
}

.task-view-switch button:hover,
.task-view-switch button.selected {
    background: var(--teal-dark);
    color: white;
}

.task-pagination {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.task-pagination > label {
    display: grid;
    gap: 4px;
    margin-right: auto;
}

.task-pagination > label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.task-pagination select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    min-height: 34px;
    padding: 6px 28px 6px 8px;
}

.list-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    border-top: 1px solid var(--line);
    background: var(--surface-subtle);
    padding: 8px 10px;
    font-size: 12px;
}

.list-pagination > label,
.list-pagination > .row-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.list-pagination label > span,
.list-pagination-range {
    color: var(--muted);
    font-weight: 700;
}

.list-pagination select {
    min-height: 30px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 4px 26px 4px 7px;
}

.list-pagination .secondary-action {
    min-height: 30px;
    padding: 4px 8px;
}

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

    .list-pagination > .row-actions {
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.study-program-search {
    flex: 1 1 220px;
    max-width: 360px;
}

.worker-list-panel > .filter-toolbar {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.study-program-list {
    display: grid;
    align-content: start;
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
}

.worker-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.worker-list-item:hover {
    border-color: var(--line);
    background: var(--accent-soft);
}

.worker-list-item.selected {
    border-color: rgba(0, 116, 130, .35);
    background: var(--surface-subtle);
    box-shadow: inset 3px 0 0 var(--teal);
}

.worker-list-item-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.worker-list-item-main strong,
.worker-list-item-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.worker-list-item-main strong {
    font-size: 14px;
    line-height: 1.3;
}

.worker-list-item-main small {
    color: var(--muted);
    font-size: 12px;
}

.worker-list-item > .status {
    justify-self: end;
    white-space: nowrap;
}

.page-header .header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.study-program-type-panel {
    margin-bottom: 14px;
}

.study-program-type-grid {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr);
    gap: 14px;
    padding: 14px;
}

.study-program-type-list {
    max-height: 390px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.study-program-type-editor {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.worker-form.study-program-type-form.compact-editor-form {
    grid-template-columns: repeat(3, minmax(145px, 1fr));
    gap: 9px 12px;
    max-width: none;
    padding: 14px 16px;
}

.study-program-type-form .section-title-row {
    margin-bottom: 0;
}

.study-program-type-custom-fields {
    margin-top: 4px;
}

.study-program-type-custom-fields legend {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.study-program-type-custom-fields .custom-field-grid {
    gap: 10px 12px;
}

.compact-help-heading {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.compact-inline-help {
    display: block;
    max-width: 720px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

@media (max-width: 760px) {
    .worker-form.study-program-type-form.compact-editor-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

.study-program-type-rules {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    padding: 12px 14px 14px;
    background: linear-gradient(135deg, rgba(224, 240, 241, 0.86), rgba(255, 252, 246, 0.9));
    border: 1px solid rgba(0, 116, 130, 0.22);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(31, 49, 43, 0.06);
}

.study-program-type-rules-header h4 {
    color: var(--teal-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
}

.study-program-type-rule-form.worker-form.compact-editor-form {
    grid-template-columns: minmax(220px, .9fr) auto auto;
    gap: 10px 12px;
    padding: 0;
    max-width: none;
}

.study-program-type-rule-form .form-actions {
    align-self: end;
    grid-column: 1 / -1;
}

.study-program-type-rules .table-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.54);
}

@media (max-width: 760px) {
    .study-program-type-rule-form.worker-form.compact-editor-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

.type-rule-hint {
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 4px;
    color: var(--muted);
    background: var(--accent-soft);
}

.study-program-type-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-top: 1px solid var(--line);
}

.study-program-type-row:first-child {
    border-top: 0;
}

.study-program-type-row .worker-list-item {
    border: 0;
}

.type-create-program {
    white-space: nowrap;
}

.study-program-search input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 8px 10px;
}

.study-program-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 12px 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
}

.study-program-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
    padding: 7px 12px;
}

.study-program-tab-label {
    white-space: nowrap;
}

.study-program-tab-count {
    display: inline-flex;
    min-width: 21px;
    min-height: 19px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 116, 130, .11);
    color: var(--teal-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 3px 7px;
}

.study-program-tabs button.active .study-program-tab-count {
    background: rgba(176, 49, 68, .13);
    color: var(--accent);
}

.study-program-tabs button.active {
    border-bottom-color: var(--accent);
    color: var(--text);
}

.study-program-tabs button:hover,
.study-program-tabs button:focus-visible {
    background: var(--accent-soft);
    color: var(--text);
}

.study-program-workspace {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.program-structure-workspace,
.program-tab-workspace {
    align-content: start;
    grid-auto-rows: max-content;
}

.curriculum-detail-workspace {
    align-content: start;
    grid-auto-rows: max-content;
    overflow-y: auto;
}

.curriculum-template-sections {
    display: grid;
    gap: 14px;
}

.curriculum-template-section {
    border: 1px solid rgba(0, 116, 130, 0.16);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(238, 247, 248, 0.7), rgba(255, 252, 246, 0.78));
    box-shadow: 0 10px 24px rgba(31, 49, 43, 0.04);
}

.curriculum-outline-card {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.curriculum-outline-card .section-title-row {
    margin-bottom: 0;
}

.curriculum-outline-list {
    display: grid;
    gap: 6px;
}

.curriculum-outline-row {
    --outline-depth: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-left: calc(var(--outline-depth) * 22px);
    border: 1px solid rgba(0, 116, 130, 0.2);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.62);
    padding: 8px 10px;
}

.curriculum-outline-row.root {
    border-color: rgba(145, 126, 82, 0.28);
    background: linear-gradient(90deg, rgba(255, 248, 229, 0.84), rgba(255, 255, 255, 0.58));
}

.curriculum-outline-row.structure {
    border-color: rgba(0, 116, 130, 0.24);
    background: linear-gradient(90deg, rgba(224, 242, 244, 0.9), rgba(255, 255, 255, 0.62));
}

.curriculum-outline-row.course {
    border-color: rgba(193, 132, 37, 0.23);
    border-style: dashed;
    background: linear-gradient(90deg, rgba(255, 245, 222, 0.78), rgba(255, 255, 255, 0.55));
}

.curriculum-outline-marker {
    display: inline-grid;
    width: 12px;
    height: 12px;
    place-items: center;
    border-radius: 999px;
    background: var(--muted);
}

.curriculum-outline-row.root .curriculum-outline-marker {
    background: #b78a33;
}

.curriculum-outline-row.structure .curriculum-outline-marker {
    background: var(--teal);
    box-shadow: 0 0 0 4px rgba(0, 116, 130, 0.1);
}

.curriculum-outline-row.course .curriculum-outline-marker {
    background: #d29a3d;
    box-shadow: 0 0 0 4px rgba(210, 154, 61, 0.12);
}

.curriculum-outline-row strong,
.curriculum-outline-row small {
    display: block;
    min-width: 0;
}

.curriculum-outline-row small {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.curriculum-outline-course-line {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    min-width: 0;
}

.curriculum-outline-course-line strong,
.curriculum-outline-course-line small {
    display: inline;
    margin-top: 0;
}

.curriculum-outline-course-line small::before {
    color: rgba(30, 61, 54, 0.38);
    content: "·";
    font-weight: 800;
    margin-right: 10px;
}

.curriculum-outline-row .field-badge {
    justify-self: end;
    white-space: nowrap;
}

.study-program-workspace > .section-title-row {
    align-items: center;
    min-height: 58px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    box-shadow: var(--section-shadow-soft);
    margin-bottom: 0;
    padding: 12px 14px;
}

.study-program-workspace > .section-title-row h4,
.study-program-workspace > .section-title-row p {
    margin: 0;
}

.study-program-workspace > .section-title-row p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.study-program-workspace > .section-title-row .primary-action,
.study-program-workspace > .section-title-row .secondary-action {
    white-space: nowrap;
}

.study-program-workspace .empty-list {
    margin: 0;
    border: 1px dashed var(--line);
    border-radius: 4px;
    background: var(--surface-subtle);
    padding: 14px;
}

.program-overview-tree > .empty-list,
.program-overview-list > .empty-list,
.program-course-timeline > .empty-list,
.study-tree > .empty-list,
.student-roster-list > .empty-list {
    border: 0;
    border-radius: 0;
    background: var(--surface-subtle);
}

.study-program-workspace :is(.program-course-summary, .program-people-summary, .student-roster-summary, .evaluation-summary, .progress-kpi-grid) {
    align-items: stretch;
}

.study-program-workspace :is(.program-course-summary, .program-people-summary, .student-roster-summary, .evaluation-summary, .progress-kpi-grid) > div {
    min-height: 64px;
}

.program-command-dashboard {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 5px;
    background: var(--surface);
    box-shadow: var(--section-shadow-soft);
    padding: 14px;
}

.program-command-summary {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(360px, 1.35fr);
    gap: 14px;
    align-items: start;
}

.program-command-summary h3 {
    margin: 2px 0 4px;
    color: var(--text);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 22px;
    line-height: 1.2;
}

.program-command-summary p {
    margin: 0;
    color: var(--muted);
}

.program-command-summary dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(115px, 1fr));
    gap: 8px;
    margin: 0;
}

.program-command-summary dl div {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-subtle);
    padding: 8px 10px;
}

.program-command-summary dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.program-command-summary dd {
    margin: 3px 0 0;
    color: var(--text);
    font-weight: 700;
}

.program-readiness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 8px;
}

.program-readiness-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-subtle);
    padding: 9px 10px;
}

.program-readiness-item.ready {
    border-color: rgba(0, 116, 130, .24);
    background: #f1f7f5;
}

.program-readiness-item.attention {
    border-color: rgba(176, 122, 52, .36);
    background: #fff8e8;
}

.program-readiness-icon {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 999px;
    background: #dce6e5;
    color: var(--teal-dark);
    font-weight: 900;
    line-height: 1;
}

.program-readiness-item.attention .program-readiness-icon {
    background: #ece3ce;
    color: var(--warning);
}

.program-readiness-item strong,
.program-readiness-item small {
    display: block;
}

.program-readiness-item small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.program-attention-panel {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(176, 122, 52, .35);
    border-left: 3px solid var(--warning);
    border-radius: 5px;
    background: #fff8e8;
    padding: 12px 14px;
}

.program-attention-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.program-attention-list span {
    border-radius: 999px;
    background: #ece3ce;
    color: var(--warning);
    font-size: 12px;
    font-weight: 800;
    padding: 5px 9px;
}

.program-overview-dashboard {
    display: grid;
    gap: 12px;
}

.program-overview-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.program-overview-card {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
    min-height: 116px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    box-shadow: var(--section-shadow-soft);
    color: var(--text);
    cursor: pointer;
    padding: 15px 42px 15px 16px;
    text-align: left;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.program-overview-card:hover {
    border-color: rgba(0, 116, 130, .35);
    background: var(--accent-soft);
    transform: translateY(-1px);
}

.program-overview-card.expanded {
    border-color: rgba(0, 116, 130, .5);
    background: var(--surface-subtle);
    box-shadow: inset 3px 0 0 var(--teal), var(--section-shadow-soft);
}

.program-overview-card:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.program-overview-card > span:first-child {
    color: var(--muted);
    font-weight: 700;
}

.program-overview-card > strong {
    color: var(--accent);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 30px;
    line-height: 1;
}

.program-overview-card > small {
    color: var(--muted);
    font-size: 11px;
}

.program-overview-chevron {
    position: absolute;
    top: 50%;
    right: 17px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .16s ease;
}

.program-overview-card.expanded .program-overview-chevron {
    transform: translateY(-25%) rotate(225deg);
}

.program-overview-detail {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 4px;
    background: var(--surface);
    padding: 14px;
}

.program-overview-tree,
.program-overview-list,
.program-course-timeline {
    display: grid;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.program-overview-tree-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 48px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding-top: 7px;
    padding-right: 10px;
    padding-bottom: 7px;
}

.program-overview-tree-row:first-child,
.program-overview-list > article:first-child,
.program-course-timeline-row:first-child {
    border-top: 0;
}

.program-overview-tree-row strong,
.program-overview-tree-row small,
.program-overview-list strong,
.program-overview-list small,
.program-course-timeline-content strong,
.program-course-timeline-content small {
    display: block;
}

.program-overview-tree-row small,
.program-overview-list small,
.program-course-timeline-content small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.program-overview-tree-marker {
    width: 11px;
    height: 11px;
    border-bottom: 1px solid var(--teal);
    border-left: 1px solid var(--teal);
}

.program-overview-list > article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .75fr);
    align-items: center;
    gap: 14px;
    min-height: 54px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 8px 11px;
}

.program-overview-list > article > span:last-child {
    justify-self: end;
    text-align: right;
}

.program-course-timeline-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 9px 11px;
}

.program-course-timeline-marker {
    width: 12px;
    height: 12px;
    border: 2px solid var(--muted);
    border-radius: 50%;
    background: var(--surface);
}

.program-course-timeline-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.program-course-board {
    display: grid;
    gap: 12px;
}

.program-course-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 8px;
}

.program-course-summary > div {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-subtle);
    padding: 9px 11px;
}

.program-course-summary > div.ready {
    border-color: rgba(0, 116, 130, .24);
    background: #f1f7f5;
}

.program-course-summary > div.attention {
    border-color: rgba(176, 122, 52, .36);
    background: #fff8e8;
}

.program-course-summary span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.program-course-summary strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 20px;
    line-height: 1;
}

.program-course-tab-timeline {
    box-shadow: var(--section-shadow-soft);
}

.program-course-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.program-course-title-row strong {
    margin-right: 3px;
}

.program-course-timeline-row .status {
    min-width: 92px;
}

.program-course-timeline-row.timeline-completed {
    background: #f1f7f5;
}

.program-course-timeline-row.timeline-completed .program-course-timeline-marker {
    border-color: var(--success);
    background: var(--success);
}

.program-course-timeline-row.timeline-current {
    background: var(--surface-subtle);
    box-shadow: inset 3px 0 0 var(--teal);
}

.program-course-timeline-row.timeline-current .program-course-timeline-marker {
    border-color: var(--teal);
    background: var(--teal);
    box-shadow: 0 0 0 4px rgba(0, 116, 130, .15);
}

.program-course-timeline-row.timeline-upcoming .program-course-timeline-marker {
    border-color: #b07a34;
    background: #fff5df;
}

.program-course-timeline-row.timeline-cancelled {
    opacity: .7;
}

.program-course-timeline-row.timeline-cancelled .program-course-timeline-marker {
    border-color: var(--danger);
    background: #fff1f1;
}

.program-course-timeline-row.timeline-unscheduled .program-course-timeline-marker {
    border-style: dashed;
}

.instance-link-actions {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
}

.worker-form.study-program-form,
.worker-form.compact-editor-form {
    grid-template-columns: repeat(2, minmax(180px, 280px));
    justify-content: start;
    max-width: 760px;
}

.study-tree {
    display: grid;
    align-content: start;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.study-tree-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 7px 10px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.study-tree-row:first-child {
    border-top: 0;
}

.study-tree-row strong,
.study-tree-row small {
    display: block;
}

.study-tree-row small {
    margin-top: 3px;
    color: var(--muted);
}

.study-tree-row .scope-people {
    color: var(--teal);
    font-weight: 700;
}

.program-people-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.program-people-board {
    display: grid;
    gap: 8px;
}

.program-people-board {
    background: var(--surface);
}

.program-people-command-strip {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) max-content;
}

.program-people-command-actions {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

.program-people-command-actions .primary-action {
    min-height: 40px;
    white-space: nowrap;
}

.program-help-heading {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    margin: 0;
    position: relative;
}

.program-help-shell {
    align-items: center;
    display: inline-flex;
    position: relative;
}

.program-help-card {
    left: calc(100% + 8px);
    top: -8px;
    z-index: 4200;
}

.program-people-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    gap: 7px;
}

.program-people-summary > div {
    border: 1px solid rgba(207, 191, 166, 0.76);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    padding: 8px 10px;
}

.program-people-summary > div:nth-child(2n) {
    background: rgba(255, 250, 239, 0.76);
}

.program-people-summary > div:nth-child(3n) {
    background: rgba(248, 252, 249, 0.76);
}

.program-people-summary span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.program-people-summary strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 18px;
    line-height: 1;
}

.program-people-scope-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.program-people-scope-card {
    display: grid;
    gap: 6px;
    min-width: 0;
    border: 1px solid rgba(207, 191, 166, 0.78);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 250, 238, 0.92), rgba(241, 249, 247, 0.72));
    box-shadow: 0 10px 22px rgba(31, 49, 43, 0.04);
    padding: 9px 12px;
}

.program-people-scope-card:nth-child(2) {
    background: rgba(255, 250, 241, 0.74);
}

.program-people-scope-card:nth-child(3) {
    background: rgba(250, 252, 248, 0.74);
}

.program-people-scope-card .section-title-row {
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding-bottom: 0;
}

.program-people-scope-card .section-title-row h4,
.program-people-scope-card .section-title-row p {
    margin: 0;
}

.program-people-scope-card .section-title-row p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.program-people-count {
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 1px solid var(--line);
}

.program-people-list {
    display: grid;
    gap: 6px;
}

.program-people-group-title {
    margin-top: 5px;
    padding: 2px 0 0;
    color: var(--teal-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.program-people-link {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    transition: color .12s ease;
}

.program-people-link:hover,
.program-people-link:focus-visible {
    color: #0b6f8f;
    text-decoration: none;
}

.program-people-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.15fr) minmax(105px, .75fr) minmax(180px, 1.4fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    padding: 7px 9px;
}

.program-people-main {
    min-width: 0;
}

.program-people-main strong,
.program-people-main small,
.program-people-role strong,
.program-people-role small,
.program-people-details small {
    display: block;
}

.program-people-main strong,
.program-people-role strong,
.program-people-details small {
    overflow-wrap: anywhere;
}

.program-people-main small,
.program-people-role small,
.program-people-details small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.program-people-role {
    min-width: 0;
}

.program-people-role small {
    margin-top: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.program-people-role strong {
    font-size: 13px;
    font-weight: 700;
}

.program-people-details {
    min-width: 0;
}

@media (max-width: 1100px) {
    .program-people-command-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .program-people-command-actions {
        justify-content: flex-start;
    }

    .program-people-summary {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    }
}

.application-info-panel {
    max-width: none !important;
    max-height: none;
    min-height: calc(100vh - 9.5rem);
    overflow: visible;
}

.application-info-header {
    background: linear-gradient(105deg, rgba(228, 238, 241, 0.98), rgba(246, 241, 231, 0.9));
}

.application-info-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.application-info-heading-icon,
.application-info-icon {
    align-items: center;
    background: #f9fbfa;
    border: 1px solid rgba(0, 116, 130, 0.25);
    border-radius: 7px;
    color: var(--teal);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.55rem;
    justify-content: center;
    width: 2.55rem;
}

.application-info-heading-icon {
    background: var(--teal);
    color: #fff;
}

.application-info-heading-icon svg,
.application-info-icon svg,
.application-info-capability svg {
    fill: none;
    height: 1.25rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 1.25rem;
}

.application-info-content {
    display: grid;
    gap: 0;
}

.application-info-section {
    padding: 1.15rem 1.25rem 1.25rem;
}

.application-info-section + .application-info-section {
    border-top: 1px solid var(--line);
}

.application-info-section:nth-child(even) {
    background: linear-gradient(120deg, rgba(243, 248, 247, 0.86), rgba(255, 252, 246, 0.88));
}

.application-info-section-heading {
    margin-bottom: 0.85rem;
}

.application-info-section-heading .eyebrow {
    margin: 0 0 0.15rem;
}

.application-info-section-heading h3 {
    color: var(--teal-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    margin: 0;
}

.application-info-technology-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.application-info-topic {
    align-items: flex-start;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.45rem 1.1rem 0.45rem 0;
}

.application-info-topic + .application-info-topic {
    border-left: 1px solid var(--line);
    padding-left: 1.1rem;
}

.application-info-icon-modules {
    border-color: rgba(171, 54, 69, 0.24);
    color: var(--accent);
}

.application-info-icon-data {
    border-color: rgba(183, 121, 38, 0.3);
    color: #a5641e;
}

.application-info-topic h4,
.application-info-foundation h4 {
    color: var(--teal-dark);
    font-size: 1rem;
    margin: 0 0 0.28rem;
}

.application-info-topic p,
.application-info-foundation p {
    color: #3c4b4a;
    line-height: 1.55;
    margin: 0;
}

.application-info-topic p + p {
    margin-top: 0.55rem;
}

.application-info-foundations {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-info-foundation {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.72);
    border-left: 4px solid var(--teal);
    box-shadow: var(--section-shadow-soft);
    display: grid;
    gap: 0.85rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.85rem 1rem;
}

.application-info-foundation:nth-child(2) {
    border-left-color: var(--accent);
}

.application-info-capability-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--line);
}

.application-info-capability {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    display: grid;
    gap: 0.7rem;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    min-height: 3.6rem;
    padding: 0.65rem 0.8rem;
}

.application-info-capability > span {
    color: var(--teal);
    display: inline-flex;
}

.application-info-capability:nth-child(3n + 2) > span,
.application-info-capability:nth-child(3n + 2) {
    color: var(--accent);
}

.application-info-capability p {
    color: var(--teal-dark);
    line-height: 1.4;
    margin: 0;
}

.application-info-functions {
    background: linear-gradient(122deg, rgba(250, 247, 239, 0.96), rgba(239, 248, 247, 0.9));
}

.application-info-function-intro {
    align-items: end;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
}

.application-info-function-intro > p {
    color: #53615f;
    line-height: 1.45;
    margin: 0 0 0.1rem;
    max-width: 34rem;
}

.application-info-function-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-info-function-group {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(207, 191, 166, 0.78);
    border-left: 4px solid var(--teal);
    border-radius: 7px;
    box-shadow: 0 7px 18px rgba(31, 49, 43, 0.045);
    min-width: 0;
    padding: 0.8rem 0.9rem 0.85rem;
}

.application-info-function-group:nth-child(3n + 2) {
    border-left-color: #b77926;
}

.application-info-function-group:nth-child(3n) {
    border-left-color: var(--accent);
}

.application-info-function-group-wide {
    grid-column: 1 / -1;
}

.application-info-function-heading {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.application-info-function-heading .application-info-icon {
    height: 2rem;
    width: 2rem;
}

.application-info-function-heading .application-info-icon svg {
    height: 1.05rem;
    width: 1.05rem;
}

.application-info-function-heading h4 {
    color: var(--teal-dark);
    font-size: 0.98rem;
    margin: 0;
}

.application-info-function-group ul {
    display: grid;
    gap: 0.42rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.application-info-function-group-wide ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-info-function-group li {
    color: #3b4d4a;
    line-height: 1.38;
    padding-left: 1rem;
    position: relative;
}

.application-info-function-group li::before {
    background: var(--teal);
    border-radius: 50%;
    content: "";
    height: 0.36rem;
    left: 0.1rem;
    position: absolute;
    top: 0.48rem;
    width: 0.36rem;
}

.application-info-function-group:nth-child(3n + 2) li::before {
    background: #b77926;
}

.application-info-function-group:nth-child(3n) li::before {
    background: var(--accent);
}

@media (max-width: 1000px) {
    .application-info-technology-grid,
    .application-info-foundations,
    .application-info-function-grid {
        grid-template-columns: 1fr;
    }

    .application-info-function-group-wide {
        grid-column: auto;
    }

    .application-info-topic + .application-info-topic {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 0.9rem;
    }
}

@media (max-width: 700px) {
    .application-info-panel {
        min-height: auto;
    }

    .application-info-section {
        padding: 0.9rem;
    }

    .application-info-capability-grid {
        grid-template-columns: 1fr;
    }

    .application-info-function-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .application-info-function-group-wide ul {
        grid-template-columns: 1fr;
    }
}

.study-tree-branch {
    width: 12px;
    height: 12px;
    border-bottom: 1px solid var(--line-strong);
    border-left: 1px solid var(--line-strong);
}

.progress-workbench,
.progress-board {
    display: grid;
    gap: 12px;
}

.progress-workbench {
    border: 1px solid rgba(207, 191, 166, 0.76);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 250, 238, 0.92), rgba(241, 249, 247, 0.76));
    box-shadow: 0 10px 22px rgba(31, 49, 43, 0.04);
    padding: 12px;
}

.progress-student-panel {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
}

.progress-student-picker {
    display: grid;
    gap: 4px;
    width: min(360px, 100%);
    align-content: end;
}

.progress-student-picker > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.progress-student-summary-card {
    display: grid;
    gap: 3px;
    min-width: min(320px, 100%);
    border: 1px solid rgba(0, 116, 130, .18);
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(239, 249, 248, .9), rgba(255, 252, 246, .78));
    padding: 10px 12px;
}

.progress-student-summary-card strong,
.progress-student-summary-card small {
    display: block;
}

.progress-student-summary-card small {
    color: var(--muted);
    font-size: 12px;
}

.progress-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 8px;
}

.progress-kpi-grid > div {
    border: 1px solid rgba(207, 191, 166, 0.72);
    border-radius: 7px;
    background: rgba(255, 255, 255, .68);
    padding: 10px 11px;
}

.progress-kpi-grid span,
.progress-status-strip {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.progress-kpi-grid strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 20px;
    line-height: 1.1;
}

.progress-meter {
    overflow: hidden;
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(42, 72, 66, .12);
}

.progress-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--teal);
}

.progress-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.progress-status-strip span {
    border: 1px solid rgba(207, 191, 166, 0.72);
    border-radius: 999px;
    background: rgba(255, 255, 255, .62);
    padding: 5px 9px;
}

.progress-status-strip strong {
    color: var(--text);
}

.progress-empty-state {
    max-width: 620px;
    border: 1px dashed rgba(0, 116, 130, .22);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(239, 249, 248, .9), rgba(255, 252, 246, .74));
    padding: 18px;
}

.progress-empty-state h4,
.progress-empty-state p {
    margin: 0;
}

.progress-empty-state p {
    margin-top: 5px;
    color: var(--muted);
}

.progress-section-card {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(207, 191, 166, 0.78);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 250, 238, 0.9), rgba(246, 251, 249, 0.82));
    box-shadow: var(--section-shadow-soft);
    padding: 12px;
}

.progress-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.progress-section-header h4,
.progress-section-header p {
    margin: 0;
}

.progress-section-header p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.progress-course-list {
    display: grid;
    gap: 8px;
}

.program-progress-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(92px, .55fr)) minmax(150px, auto);
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(207, 191, 166, .74);
    border-left: 3px solid transparent;
    border-radius: 7px;
    background: rgba(255, 255, 255, .74);
}

.progress-course-card.done {
    border-left-color: var(--teal);
}

.progress-course-card.active {
    border-left-color: #d18b2f;
}

.progress-course-card.attention {
    border-left-color: var(--danger);
    background: #fff8f4;
}

.progress-course-card.planned {
    border-left-color: rgba(42, 72, 66, .18);
}

.progress-course-card.editing {
    align-items: end;
    border-left-color: var(--teal);
    background: var(--surface-subtle);
}

.program-progress-row > span strong,
.program-progress-row > span small {
    display: block;
}

.program-progress-row > span small {
    margin-top: 3px;
    color: var(--muted);
}

.program-progress-row label {
    display: grid;
    gap: 4px;
}

.program-progress-row label.full-span,
.program-progress-row .progress-note {
    grid-column: 1 / -1;
}

.program-progress-row label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.progress-course-main small {
    line-height: 1.35;
}

.progress-note {
    margin: 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    padding-top: 8px;
}

.program-timeline-overlay {
    position: fixed;
    inset: 0;
    z-index: 82;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    background: rgba(31, 49, 43, 0.36);
    padding: 5vh 18px 34px;
}

.program-timeline-dialog {
    display: grid;
    gap: 12px;
    width: min(96vw, 1540px);
    min-height: min(82vh, 880px);
    border: 1px solid rgba(207, 191, 166, 0.86);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 250, 238, 0.96), rgba(241, 249, 247, 0.9)),
        var(--surface);
    box-shadow: 0 24px 54px rgba(31, 49, 43, 0.24);
    padding: 0;
}

.program-timeline-dialog.fullscreen {
    width: calc(100vw - 24px);
    min-height: calc(100vh - 24px);
}

.program-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(207, 191, 166, 0.72);
    background: rgba(255, 255, 255, 0.54);
    padding: 14px 16px;
}

.program-timeline-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.program-timeline-zoom {
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(207, 191, 166, 0.78);
    border-radius: 999px;
    display: inline-flex;
    gap: 6px;
    padding: 3px 6px;
}

.program-timeline-zoom span {
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 800;
    min-width: 42px;
    text-align: center;
}

.program-timeline-header h3,
.program-timeline-header p {
    margin: 0;
}

.program-timeline-header h3 {
    color: var(--teal-dark);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 21px;
}

.program-timeline-header p {
    margin-top: 3px;
    color: var(--muted);
}

.program-timeline-legend {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
}

.timeline-legend-item {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(207, 191, 166, 0.74);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    padding: 5px 9px;
    white-space: nowrap;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.timeline-legend-item:hover,
.timeline-legend-item:focus-visible {
    background: rgba(238, 247, 248, 0.9);
    border-color: rgba(0, 116, 130, 0.32);
    box-shadow: 0 5px 12px rgba(31, 49, 43, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.timeline-legend-item.is-active {
    background: rgba(228, 244, 245, 0.96);
    border-color: rgba(0, 116, 130, 0.46);
    box-shadow: inset 0 0 0 1px rgba(0, 116, 130, 0.12), 0 6px 14px rgba(31, 49, 43, 0.1);
    color: var(--teal-dark);
}

.timeline-legend-item::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(42, 72, 66, 0.24);
}

.timeline-legend-item.done::before { background: var(--teal); }
.timeline-legend-item.active::before { background: #b8792f; }
.timeline-legend-item.attention::before { background: var(--danger); }
.timeline-legend-item.estimated::before { background: transparent; border: 1px dashed rgba(42, 72, 66, .4); }

.program-timeline-scroll {
    overflow: auto;
    margin: 0 16px 16px;
    border: 1px solid rgba(207, 191, 166, 0.76);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
}

.program-timeline-gantt {
    display: grid;
    grid-template-columns: 300px minmax(var(--timeline-chart-width, 980px), 1fr);
    min-width: calc(300px + var(--timeline-chart-width, 980px));
}

.program-timeline-left {
    position: sticky;
    left: 0;
    z-index: 5;
    border-right: 2px solid rgba(0, 116, 130, 0.34);
    background: rgba(247, 250, 248, 0.94);
}

.program-timeline-left-head,
.program-timeline-chart-head {
    box-sizing: border-box;
    height: 52px;
    border-bottom: 1px solid rgba(207, 191, 166, 0.78);
}

.program-timeline-left-head {
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 8px 14px;
    background: var(--surface-subtle);
}

.program-timeline-left-head small,
.program-timeline-left-row small {
    color: var(--muted);
    font-size: 11px;
}

.program-timeline-left-row {
    box-sizing: border-box;
    display: grid;
    align-content: center;
    gap: 2px;
    width: 100%;
    height: 56px;
    border: 0;
    border-bottom: 0;
    color: var(--text);
    font: inherit;
    padding: 6px 10px;
    text-align: left;
}

.program-timeline-left-row strong,
.program-timeline-left-row small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.22;
}

.program-timeline-left-row.section-row {
    height: 48px;
    border-top: 0;
    border-bottom: 0;
    color: var(--teal-dark);
    font-weight: 800;
    padding: 6px 14px;
}

.program-timeline-left-row.section-row strong {
    font-size: 13.5px;
    text-decoration: none;
}

.program-timeline-left-row.course-row {
    cursor: pointer;
    margin: 0;
    padding: 6px 12px 6px 18px;
}

.program-timeline-left-row.course-row:hover,
.program-timeline-left-row.course-row:focus-visible,
.program-timeline-left-row.course-row.is-hovered {
    color: #006f88;
    outline: none;
}

.program-timeline-course-card {
    display: grid;
    align-content: center;
    gap: 1px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--timeline-accent, var(--teal)) 28%, var(--line));
    border-left: 3px solid var(--timeline-accent, var(--teal));
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--timeline-bg, var(--surface-subtle)) 76%, white));
    box-shadow: 0 3px 8px rgba(31, 49, 43, 0.06);
    padding: 3px 9px;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.program-timeline-left-row.course-row:hover .program-timeline-course-card,
.program-timeline-left-row.course-row:focus-visible .program-timeline-course-card,
.program-timeline-left-row.course-row.is-hovered .program-timeline-course-card {
    border-color: color-mix(in srgb, var(--timeline-accent, var(--teal)) 46%, var(--line));
    box-shadow: 0 14px 28px rgba(31, 49, 43, 0.18), 0 3px 8px rgba(0, 116, 130, 0.1);
    transform: translateY(-2px) scale(1.015);
}

.program-timeline-course-card strong {
    font-size: 12px;
    line-height: 1.2;
}

.program-timeline-course-card small {
    font-size: 10.5px;
    line-height: 1.2;
}

.program-timeline-chart {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.72);
}

.program-timeline-chart-head {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgba(252, 249, 240, 0.96);
}

.program-timeline-year-band-row {
    position: absolute;
    inset: 0 0 auto;
    height: 25px;
    border-bottom: 1px solid rgba(207, 191, 166, 0.72);
}

.program-timeline-year-band {
    position: absolute;
    top: 0;
    height: 25px;
    display: grid;
    place-items: center;
    border-left: 1px solid rgba(42, 72, 66, 0.22);
    border-right: 1px solid rgba(42, 72, 66, 0.12);
    color: var(--heading);
    font-weight: 700;
    font-size: 13px;
}

.program-timeline-month-grid {
    position: absolute;
    inset: 52px 0 0;
    z-index: 0;
    pointer-events: none;
}

.program-timeline-month-grid span {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(0, 116, 130, 0.055);
}

.program-timeline-month-grid span.half-year {
    border-left-style: dashed;
    border-left-color: rgba(184, 132, 75, 0.18);
}

.program-timeline-month-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(42, 72, 66, 0.22);
    color: var(--muted);
    font-size: 12px;
}

.program-timeline-chart-head.month-scale .program-timeline-month-tick {
    top: 25px;
    border-left-color: rgba(42, 72, 66, 0.16);
    font-size: 11px;
}

.program-timeline-month-tick.half-year {
    border-left-style: dashed;
    border-left-color: rgba(184, 132, 75, 0.34);
    color: #8a5b28;
    font-size: 10px;
}

.program-timeline-month-tick span {
    position: absolute;
    left: 6px;
    top: 17px;
    width: max-content;
}

.program-timeline-chart-head.month-scale .program-timeline-month-tick span {
    top: 8px;
    left: 4px;
}

.program-timeline-month-tick.half-year span {
    top: 20px;
}

.program-timeline-chart-row {
    box-sizing: border-box;
    position: relative;
    height: 56px;
    border-bottom: 0;
}

.program-timeline-chart-row.section-only {
    height: 48px;
    border-top: 0;
    border-bottom: 0;
}

.program-timeline-today {
    position: absolute;
    top: 52px;
    bottom: 0;
    z-index: 3;
    width: 0;
    border-left: 3px solid #c8aa16;
    pointer-events: none;
}

.program-timeline-today span {
    position: sticky;
    top: 8px;
    display: inline-block;
    margin-left: 7px;
    width: max-content;
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 800;
}

.program-timeline-bar {
    position: absolute;
    top: 12px;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 54px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--timeline-accent, var(--teal)) 32%, var(--line));
    border-left: 4px solid var(--timeline-accent, var(--teal));
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    overflow: hidden;
    padding: 0;
    text-align: left;
    background: linear-gradient(135deg, color-mix(in srgb, var(--timeline-bg, var(--surface-subtle)) 78%, white), rgba(255, 255, 255, 0.82));
    box-shadow: 0 5px 12px rgba(31, 49, 43, 0.08);
    transform-origin: center;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.program-timeline-bar:hover,
.program-timeline-bar:focus-visible {
    border-color: color-mix(in srgb, var(--timeline-accent, var(--teal)) 52%, var(--line));
    box-shadow: 0 14px 28px rgba(31, 49, 43, 0.2), 0 4px 10px rgba(0, 116, 130, 0.12);
    transform: translateY(-4px) scale(1.08);
    outline: none;
}

.program-timeline-bar.done {
    box-shadow: inset 0 0 0 999px rgba(0, 116, 130, 0.04), 0 5px 12px rgba(31, 49, 43, 0.08);
}

.program-timeline-bar.active {
    box-shadow: inset 0 0 0 999px rgba(184, 121, 47, 0.05), 0 5px 12px rgba(31, 49, 43, 0.08);
}

.program-timeline-bar.planned {
    opacity: .92;
}

.program-timeline-bar.attention {
    box-shadow: inset 0 0 0 999px rgba(193, 2, 82, 0.07), 0 5px 12px rgba(31, 49, 43, 0.08);
}

.program-timeline-bar.estimated {
    border-style: dashed;
}

.program-timeline-connector {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
    border-top: 1px solid rgba(0, 116, 130, 0.2);
    pointer-events: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.program-timeline-chart-row.is-hovered .program-timeline-connector {
    border-top-color: color-mix(in srgb, var(--timeline-accent, var(--teal)) 68%, transparent);
    border-top-width: 2px;
    box-shadow: 0 1px 5px color-mix(in srgb, var(--timeline-accent, var(--teal)) 28%, transparent);
}

.program-timeline-chart-row.is-hovered .program-timeline-bar {
    border-color: color-mix(in srgb, var(--timeline-accent, var(--teal)) 56%, var(--line));
    box-shadow: 0 20px 34px rgba(31, 49, 43, 0.24), 0 6px 14px rgba(0, 116, 130, 0.14);
    transform: translateY(-5px) scale(1.12);
    z-index: 6;
}

.program-timeline-left-row.tone-0,
.program-timeline-chart-row.tone-0 {
    --timeline-accent: var(--teal);
    --timeline-bg: #e4eef1;
}

.program-timeline-left-row.tone-1,
.program-timeline-chart-row.tone-1 {
    --timeline-accent: #b8792f;
    --timeline-bg: #fff4da;
}

.program-timeline-left-row.tone-2,
.program-timeline-chart-row.tone-2 {
    --timeline-accent: var(--danger);
    --timeline-bg: #fbe5eb;
}

.program-timeline-left-row.tone-3,
.program-timeline-chart-row.tone-3 {
    --timeline-accent: #2a4640;
    --timeline-bg: #f1f9f7;
}

.program-timeline-chart-row.tone-0,
.program-timeline-chart-row.tone-1,
.program-timeline-chart-row.tone-2,
.program-timeline-chart-row.tone-3,
.program-timeline-chart-row.section-only.tone-0,
.program-timeline-chart-row.section-only.tone-1,
.program-timeline-chart-row.section-only.tone-2,
.program-timeline-chart-row.section-only.tone-3 {
    background: transparent;
}

.program-timeline-left-row.tone-0 {
    background: linear-gradient(90deg, color-mix(in srgb, #e4eef1 74%, white), rgba(255, 255, 255, 0.74));
}

.program-timeline-left-row.tone-1 {
    background: linear-gradient(90deg, color-mix(in srgb, #fff4da 78%, white), rgba(255, 255, 255, 0.74));
}

.program-timeline-left-row.tone-2 {
    background: linear-gradient(90deg, color-mix(in srgb, #fbe5eb 78%, white), rgba(255, 255, 255, 0.74));
}

.program-timeline-left-row.tone-3 {
    background: linear-gradient(90deg, color-mix(in srgb, #f1f9f7 80%, white), rgba(255, 255, 255, 0.74));
}

.program-timeline-left-row.section-row {
    box-shadow: inset 0 1px 0 rgba(207, 191, 166, 0.42);
}

.student-profile-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding: 10px 12px;
    border-left: 3px solid var(--teal);
    background: var(--surface-subtle);
}

.student-profile-heading h4,
.student-profile-heading p {
    margin: 0;
}

.student-profile-heading p {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.student-roster-board {
    display: grid;
    gap: 12px;
}

.student-roster-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 8px;
}

.student-roster-summary > div {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-subtle);
    padding: 9px 11px;
}

.student-roster-summary > div.ready {
    border-color: rgba(0, 116, 130, .24);
    background: #f1f7f5;
}

.student-roster-summary > div.attention {
    border-color: rgba(176, 122, 52, .36);
    background: #fff8e8;
}

.student-roster-summary span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.student-roster-summary strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 20px;
    line-height: 1;
}

.student-roster-list {
    display: grid;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    box-shadow: var(--section-shadow-soft);
    overflow: hidden;
}

.student-roster-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(190px, .65fr) minmax(110px, .35fr) auto;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 10px 12px;
}

.student-roster-row:first-child {
    border-top: 0;
}

.student-roster-row:hover {
    background: var(--accent-soft);
}

.student-roster-row.selected {
    background: var(--surface-subtle);
    box-shadow: inset 3px 0 0 var(--teal);
}

.student-roster-main,
.student-roster-progress,
.student-roster-support {
    min-width: 0;
}

.student-roster-main small,
.student-roster-support small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.student-roster-progress {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.student-roster-support {
    text-align: right;
}

.student-roster-support strong {
    display: block;
    color: var(--text);
    font-family: RobotoSlab, Georgia, serif;
    line-height: 1;
}

.individual-student-toolbar {
    display: flex;
    justify-content: flex-end;
}

.student-profile-card {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: none;
    border: 1px solid rgba(207, 191, 166, 0.78);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 252, 246, 0.9), rgba(246, 251, 249, 0.72)),
        rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 22px rgba(31, 49, 43, 0.04);
    padding: 14px;
}

.student-profile-card .section-title-row {
    align-items: center;
    border-bottom: 1px solid rgba(207, 191, 166, 0.68);
    padding-bottom: 12px;
}

.student-profile-card .section-title-row h4,
.student-profile-card .section-title-row p {
    margin: 0;
}

.student-profile-card .section-title-row p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.student-profile-card > .read-details-grid {
    border: 1px solid rgba(0, 116, 130, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(246, 251, 249, 0.82), rgba(255, 255, 255, 0.68)),
        rgba(255, 255, 255, 0.58);
    padding: 12px;
}

.student-profile-card .read-section {
    border-color: rgba(207, 191, 166, 0.74);
    background:
        linear-gradient(135deg, rgba(255, 250, 238, 0.88), rgba(241, 249, 247, 0.74)),
        rgba(255, 255, 255, 0.64);
    box-shadow: 0 8px 18px rgba(31, 49, 43, 0.035);
}

.student-profile-card .read-section:nth-of-type(even) {
    background:
        linear-gradient(135deg, rgba(242, 249, 247, 0.86), rgba(255, 252, 246, 0.76)),
        rgba(255, 255, 255, 0.64);
}

.student-profile-card .student-evaluations {
    background:
        linear-gradient(135deg, rgba(255, 248, 229, 0.84), rgba(246, 251, 249, 0.72)),
        rgba(255, 255, 255, 0.64);
}

.student-empty-value {
    margin: 0;
    color: var(--muted);
}

.student-course-enrolments {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: none;
    border: 1px solid rgba(207, 191, 166, 0.78);
    border-left: 4px solid rgba(0, 116, 130, .72);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(246, 251, 249, 0.88), rgba(255, 250, 238, 0.78)),
        rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 22px rgba(31, 49, 43, 0.04);
    padding: 12px;
}

.student-course-enrolments .section-title-row {
    align-items: center;
    margin-bottom: 0;
}

.student-course-enrolments .section-title-row h4,
.student-course-enrolments .section-title-row p {
    margin: 0;
}

.student-course-enrolments .section-title-row p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.student-course-enrolment-list {
    display: grid;
    border: 1px solid rgba(207, 191, 166, 0.72);
    border-radius: 7px;
    overflow: hidden;
}

.student-course-enrolment-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(110px, auto);
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(207, 191, 166, 0.66);
    background: rgba(255, 255, 255, .7);
    padding: 10px 12px;
}

.student-course-enrolment-row:first-child {
    border-top: 0;
}

.student-course-enrolment-row:hover {
    background: var(--accent-soft);
}

.student-course-enrolment-main strong,
.student-course-enrolment-main small {
    display: block;
}

.student-course-enrolment-main small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.student-course-enrolment-meta {
    display: flex;
    justify-content: flex-end;
}

.inline-record-link {
    color: var(--teal);
    font-weight: 700;
    text-decoration: none;
}

.inline-record-link:hover,
.inline-record-link:focus-visible {
    color: var(--teal-dark);
    text-decoration: underline;
}

.student-evaluations {
    display: grid;
    gap: 10px;
}

.evaluation-form-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    border: 1px solid rgba(207, 191, 166, 0.72);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text);
    cursor: pointer;
    padding: 10px 12px;
    text-align: left;
}

.evaluation-form-link:hover {
    border-color: rgba(0, 116, 130, .4);
    background: rgba(239, 249, 248, 0.92);
}

.evaluation-form-link strong,
.evaluation-form-link small {
    display: block;
}

.evaluation-form-link small {
    margin-top: 2px;
    color: var(--muted);
}

.evaluation-attach-row {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
}

.evaluation-attach-row label {
    display: grid;
    gap: 4px;
    min-width: min(360px, 100%);
}

.evaluation-attach-row label span {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.evaluation-attach-row select {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--input-border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 7px 34px 7px 10px;
    box-shadow: var(--section-shadow-soft);
}

.evaluation-attach-row select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(0, 116, 130, .12);
    outline: none;
}

.evaluation-workbench {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(207, 191, 166, 0.76);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 250, 238, 0.9), rgba(241, 249, 247, 0.76));
    box-shadow: 0 10px 22px rgba(31, 49, 43, 0.04);
    padding: 12px;
}

.evaluation-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 8px;
}

.evaluation-summary > div {
    border: 1px solid rgba(207, 191, 166, 0.72);
    border-radius: 7px;
    background: rgba(255, 255, 255, .68);
    padding: 9px 11px;
}

.evaluation-summary span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.evaluation-summary strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 20px;
    line-height: 1;
}

.evaluation-panel {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(207, 191, 166, 0.78);
    border-left: 4px solid rgba(0, 116, 130, .68);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 250, 238, 0.88), rgba(246, 251, 249, 0.82));
    box-shadow: 0 10px 22px rgba(31, 49, 43, 0.04);
    padding: 12px;
}

.evaluation-panel .section-title-row {
    align-items: center;
}

.evaluation-panel .section-title-row h4,
.evaluation-panel .section-title-row p {
    margin: 0;
}

.evaluation-panel .section-title-row p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.evaluation-form-list {
    display: grid;
    gap: 8px;
}

.evaluation-form-list-item {
    display: grid;
    min-width: 0;
    border: 1px solid rgba(207, 191, 166, 0.72);
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(247, 252, 250, .72));
    box-shadow: var(--section-shadow-soft);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.evaluation-form-list-item.selected,
.evaluation-form-list-item.expanded {
    border-color: rgba(0, 116, 130, .45);
    box-shadow: 0 0 0 2px rgba(0, 116, 130, .08);
}

.evaluation-form-list-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(31, 49, 43, 0.08);
}

.evaluation-form-list-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1fr) auto minmax(92px, auto) auto;
    padding: 10px 12px;
}

.evaluation-form-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.evaluation-form-main strong {
    color: var(--teal-dark);
}

.evaluation-form-main small,
.evaluation-form-list-details > small {
    color: var(--muted);
    font-size: 12px;
}

.evaluation-form-metric {
    display: grid;
    gap: 1px;
    min-width: 82px;
}

.evaluation-form-metric small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.evaluation-form-metric strong {
    color: var(--text);
}

.evaluation-expand-action {
    min-width: 34px;
}

.evaluation-form-list-details {
    display: grid;
    gap: 9px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 12px;
    transition: max-height .24s ease, opacity .18s ease, padding .18s ease;
}

.evaluation-form-list-item.expanded .evaluation-form-list-details {
    max-height: 240px;
    opacity: 1;
    padding: 0 12px 12px;
}

.evaluation-card-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.evaluation-card-stats span {
    border: 1px solid rgba(207, 191, 166, 0.66);
    border-radius: 7px;
    background: rgba(255, 252, 246, .72);
    padding: 7px 8px;
}

.evaluation-card-stats small,
.evaluation-card-stats strong {
    display: block;
}

.evaluation-card-stats small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.evaluation-card-stats strong {
    margin-top: 2px;
}

.evaluation-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.evaluation-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 320px));
    gap: 10px;
    justify-content: start;
}

.evaluation-picker-grid label {
    display: grid;
    gap: 4px;
}

.evaluation-entry-panel {
    gap: 12px;
    border-left: 4px solid var(--teal);
    background:
        linear-gradient(135deg, rgba(255, 250, 238, 0.92), rgba(241, 249, 247, 0.78)),
        var(--surface);
}

.evaluation-entry-panel .section-title-row {
    border-bottom: 1px solid rgba(0, 116, 130, .14);
    padding-bottom: 9px;
}

.evaluation-entry-panel .evaluation-picker-grid {
    width: min(100%, 680px);
    border: 1px solid rgba(0, 116, 130, .18);
    border-radius: 7px;
    background: rgba(255, 255, 255, .72);
    padding: 12px;
}

.evaluation-picker-grid label span {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.evaluation-picker-grid select {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 7px 9px;
}

.evaluation-picker-grid select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(0, 116, 130, .12);
    outline: none;
}

.evaluation-launch-card {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(207, 191, 166, 0.72);
    border-radius: 7px;
    background: rgba(255, 255, 255, .72);
    padding: 11px 12px;
}

.evaluation-launch-card .section-title-row {
    align-items: center;
}

.evaluation-launch-card strong,
.evaluation-launch-card small {
    display: block;
}

.evaluation-launch-card small {
    margin-top: 2px;
    color: var(--muted);
}

.evaluation-launch-card p {
    margin: 0;
}

.evaluation-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    background: rgba(31, 49, 43, 0.34);
    padding: 7vh 18px 32px;
}

.evaluation-modal-dialog {
    display: grid;
    gap: 14px;
    width: min(880px, 100%);
    border: 1px solid rgba(207, 191, 166, 0.86);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 250, 238, 0.96), rgba(241, 249, 247, 0.9)),
        var(--surface);
    box-shadow: 0 22px 48px rgba(31, 49, 43, 0.22);
    padding: 0;
}

.evaluation-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(207, 191, 166, 0.72);
    background: rgba(255, 255, 255, 0.52);
    padding: 14px 16px;
}

.evaluation-modal-header h3,
.evaluation-modal-header p {
    margin: 0;
}

.evaluation-modal-header h3 {
    color: var(--teal-dark);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 20px;
}

.evaluation-modal-header p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.evaluation-modal-read,
.evaluation-modal-form {
    margin: 0 16px 16px;
}

.evaluation-modal-read {
    display: grid;
    gap: 12px;
}

.evaluation-modal-read > .read-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.evaluation-modal-read .read-details-grid .full-span {
    grid-column: 1 / -1;
}

.evaluation-form {
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 4px;
    background: var(--surface);
    padding: 12px;
}

@media (max-width: 680px) {
    .evaluation-picker-grid,
    .evaluation-card-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .evaluation-form-list-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .evaluation-form-list-row .status,
    .evaluation-form-metric {
        grid-column: 1;
    }

    .evaluation-expand-action {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}

.student-private-team {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
}

.student-private-team .section-title-row {
    align-items: center;
}

.progress-custom-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 8px;
    grid-column: 1 / -2;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-subtle);
}

.progress-custom-fields .full-span,
.progress-custom-fields fieldset {
    grid-column: 1 / -1;
}

.program-progress-read-row {
    align-items: center;
}

.program-progress-read-row > span > small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.progress-custom-read {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.program-progress-row input,
.program-progress-row select,
.program-progress-row textarea,
.progress-student-picker select {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 6px 8px;
}

.program-progress-row textarea {
    min-height: 58px;
    resize: vertical;
}

@media (max-width: 1100px) {
    .study-program-type-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .program-command-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .program-command-summary dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .program-overview-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .program-people-scope-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .program-progress-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-roster-row {
        grid-template-columns: minmax(220px, 1fr) minmax(190px, auto) auto;
    }

    .student-roster-row .row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .program-progress-row > span {
        grid-column: 1 / -1;
    }

    .program-progress-row .row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .progress-custom-fields {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .worker-form.study-program-form,
    .worker-form.compact-editor-form,
    .program-progress-row {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .progress-section-header,
    .progress-student-panel {
        display: grid;
    }

    .study-program-workspace > .section-title-row {
        display: grid;
        align-items: start;
    }

    .study-program-workspace > .section-title-row .primary-action,
    .study-program-workspace > .section-title-row .secondary-action {
        justify-self: start;
    }

    .study-program-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .program-command-summary dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .program-overview-card-grid,
    .program-overview-list > article,
    .program-course-timeline-row,
    .program-people-row,
    .student-course-enrolment-row,
    .student-roster-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .program-overview-list > article > span:last-child,
    .student-course-enrolment-meta {
        justify-self: start;
        text-align: left;
    }

    .student-roster-support {
        text-align: left;
    }

    .program-course-timeline-marker {
        display: none;
    }

    .program-course-timeline-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .program-people-meta {
        justify-content: flex-start;
    }

    .study-tree-row {
        grid-template-columns: 14px minmax(0, 1fr);
    }

    .study-tree-row > .row-actions {
        grid-column: 2;
    }

    .progress-custom-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.task-filter-grid {
    display: grid;
    gap: 8px;
    width: min(100%, 1320px);
    justify-self: start;
}

.task-filter-primary {
    display: grid;
    grid-template-columns: minmax(280px, 440px) repeat(4, minmax(145px, 180px));
    align-items: end;
    gap: 8px;
}

.task-filter-grid label:not(.check-row) {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.task-filter-grid label:not(.check-row) > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.task-filter-grid input:not([type="checkbox"]),
.task-filter-grid select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    min-height: 38px;
    padding: 8px 10px;
    width: 100%;
}

.task-search-filter {
    min-width: 0;
}

.worker-task-filter-builder {
    gap: 8px;
    padding: 10px 14px;
}

.worker-task-search-builder {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.worker-task-search-builder .task-search-filter {
    display: grid;
    flex: 1 1 280px;
    gap: 4px;
    max-width: 520px;
    min-width: min(100%, 240px);
}

.worker-task-search-builder .task-search-filter > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.worker-task-search-builder input:not([type="checkbox"]) {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    min-height: 34px;
    padding: 7px 10px;
    width: 100%;
}

.worker-task-filter-grid {
    max-width: 100%;
    width: 100%;
}

.worker-task-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
    max-width: 100%;
}

.worker-task-filter-row label:not(.check-row) {
    flex: 0 1 145px;
    gap: 4px;
}

.worker-task-filter-row .task-search-filter {
    flex: 1 1 240px;
    max-width: 360px;
}

.worker-task-filter-row input:not([type="checkbox"]),
.worker-task-filter-row select {
    min-height: 32px;
    padding: 6px 9px;
}

.worker-task-filter-row .task-clear-filter-action {
    align-self: end;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 12px;
    white-space: nowrap;
}

.task-advanced-filters {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-subtle);
}

.task-advanced-filters > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    color: var(--teal-dark);
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 800;
}

.task-advanced-filters > summary small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.task-filter-advanced {
    display: grid;
    grid-template-columns: minmax(170px, 220px) repeat(2, minmax(140px, 170px)) minmax(150px, 190px) minmax(130px, 160px) auto auto;
    align-items: end;
    justify-content: start;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding: 8px;
}

.task-completed-toggle {
    align-self: end;
    min-height: 40px;
}

.task-clear-filters {
    align-self: end;
    justify-self: start;
    min-height: 38px;
}

.task-table {
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.task-table-header,
.task-table-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 1.8fr) 110px minmax(130px, 1fr) 90px 110px 140px;
}

.task-table-header {
    background: var(--surface-subtle);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    padding: 8px 10px;
}

.task-table-row {
    background: var(--surface);
    border: 0;
    border-top: 1px solid var(--line);
    color: var(--text);
    cursor: pointer;
    min-height: 48px;
    padding: 7px 10px;
    text-align: left;
    width: 100%;
}

.task-table-row:hover {
    background: var(--surface-subtle);
}

.task-kanban-scroll {
    overflow-x: auto;
    padding-bottom: 3px;
}

.task-kanban-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    align-items: start;
    gap: 10px;
    min-width: 1040px;
}

.task-kanban-column {
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 3px solid var(--teal);
    border-radius: 5px;
    background: var(--surface-subtle);
}

.task-kanban-column.progress {
    border-top-color: #287f8d;
}

.task-kanban-column.attention {
    border-top-color: #b42d48;
}

.task-kanban-column.done {
    border-top-color: #4f7a63;
}

.task-kanban-column > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    padding: 8px 9px;
}

.task-kanban-column > header h3,
.task-kanban-column > header small {
    display: block;
    margin: 0;
}

.task-kanban-column > header h3 {
    color: var(--teal-dark);
    font-size: 13px;
}

.task-kanban-column > header small {
    margin-top: 1px;
    color: var(--muted);
    font-size: 9.5px;
}

.task-kanban-column > header > span {
    min-width: 24px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--teal-dark);
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.task-kanban-cards {
    display: grid;
    align-content: start;
    gap: 7px;
    max-height: 68vh;
    overflow-y: auto;
    padding: 7px;
}

.task-kanban-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    box-shadow: var(--section-shadow-soft);
}

.task-kanban-card-main {
    display: grid;
    gap: 5px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 8px;
    text-align: left;
}

.task-kanban-card-main:hover {
    background: var(--accent-soft);
}

.task-kanban-card-main > strong {
    line-height: 1.25;
}

.task-kanban-card-main > small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.task-kanban-card-topline,
.task-kanban-meta,
.task-kanban-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.task-kanban-meta {
    color: var(--muted);
    font-size: 10px;
}

.task-kanban-card > footer {
    border-top: 1px solid var(--line);
    padding: 5px 7px;
}

.task-kanban-card > footer .icon-action {
    min-width: 26px;
    min-height: 25px;
}

.task-kanban-empty,
.task-kanban-limit {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

.task-kanban-empty {
    padding: 16px 8px;
}

.task-kanban-limit {
    border: 1px dashed var(--line);
    background: var(--surface-subtle);
    padding: 7px 10px;
}

.task-main-cell {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.task-main-cell strong,
.task-main-cell small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-main-cell small {
    color: var(--muted);
    font-size: 11px;
}

.task-urgency {
    border-radius: 999px;
    box-sizing: border-box;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    justify-content: center;
    line-height: 1.15;
    max-width: 100%;
    padding: 3px 7px;
    text-align: center;
    white-space: nowrap;
}

.task-priority {
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    justify-content: center;
    padding: 3px 7px;
    white-space: nowrap;
}

.priority-urgent {
    background: #f6dce3;
    color: #8f1e39;
}

.priority-high {
    background: #f7e7c8;
    color: #7b4d0d;
}

.priority-normal {
    background: #dcecef;
    color: #1f6672;
}

.priority-low {
    background: #e8eceb;
    color: #4a5f5a;
}

.personal-task-dialog {
    max-width: 760px;
}

.urgency-pastdue {
    background: #f6dce3;
    color: #8f1e39;
}

.urgency-today {
    background: #f7e7c8;
    color: #7b4d0d;
}

.urgency-soon,
.urgency-upcoming {
    background: #dcecef;
    color: #1f6672;
}

.urgency-later,
.urgency-noduedate {
    background: #e8eceb;
    color: #4a5f5a;
}

.urgency-completed {
    background: #dfece4;
    color: #356046;
}

html.compact-mode .task-table-row {
    min-height: 38px;
    padding-block: 4px;
}

html.compact-mode .task-workspace > .task-filter-grid,
html.compact-mode .task-workspace > .task-table,
html.compact-mode .task-workspace > .task-pagination,
html.compact-mode .task-workspace > .task-kanban-scroll,
html.compact-mode .task-workspace > .task-kanban-limit {
    margin-inline: 8px;
}

html.compact-mode .task-workspace > .task-table,
html.compact-mode .task-workspace > .task-pagination,
html.compact-mode .task-workspace > .task-kanban-scroll,
html.compact-mode .task-workspace > .task-kanban-limit {
    margin-bottom: 8px;
}

html.compact-mode .task-kanban-card-main {
    gap: 3px;
    padding: 6px;
}

html.compact-mode .task-kanban-cards {
    gap: 5px;
    padding: 5px;
}

html.compact-mode .task-filter-grid input:not([type="checkbox"]),
html.compact-mode .task-filter-grid select {
    font-size: 13px;
    min-height: 32px;
    padding: 6px 8px;
}

html.compact-mode .task-completed-toggle,
html.compact-mode .task-clear-filters {
    min-height: 32px;
}

@media (max-width: 1000px) {
    .task-metric-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .task-filter-primary,
    .task-filter-advanced {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .task-search-filter {
        grid-column: 1 / -1;
    }

    .task-table-header {
        display: none;
    }

    .task-table-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .task-table-row > .task-urgency {
        white-space: normal;
    }

    .task-table-row > :nth-child(n+2):not(:last-child) {
        display: none;
    }
}

.planning-total {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(228, 238, 241, 0.96), rgba(244, 238, 227, 0.78)),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--section-shadow-soft);
    display: grid;
    gap: 12px;
    padding: 12px 14px;
}

.planning-overview-strip {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.planning-metric-strip {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    margin-bottom: 12px;
}

.planning-metric-card {
    align-items: center;
    border: 1px solid rgba(215, 205, 188, 0.84);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 238, 227, 0.66)),
        var(--surface);
    box-shadow: var(--section-shadow-soft);
    color: var(--text);
    display: flex;
    gap: 10px;
    min-height: 58px;
    min-width: 0;
    padding: 10px 12px;
    text-align: left;
}

button.planning-metric-card {
    cursor: pointer;
    font: inherit;
}

button.planning-metric-card:hover {
    border-color: rgba(0, 116, 130, 0.42);
    box-shadow: 0 10px 24px rgba(42, 70, 64, 0.13);
    transform: translateY(-1px);
}

.planning-metric-icon {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
    font-weight: 900;
}

.planning-metric-card small {
    color: var(--muted);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.2;
    text-transform: uppercase;
}

.planning-metric-card strong {
    color: var(--teal-dark);
    display: block;
    font-family: RobotoSlab, Georgia, serif;
    font-size: 20px;
    line-height: 1.1;
    margin-top: 3px;
}

.planning-metric-cost {
    border-left: 4px solid var(--accent);
}

.planning-metric-cost .planning-metric-icon {
    background: rgba(171, 54, 69, 0.12);
    color: var(--accent);
}

.planning-metric-cost strong {
    color: var(--accent);
}

.planning-metric-items .planning-metric-icon {
    background: rgba(0, 116, 130, 0.12);
    color: var(--teal);
}

.planning-metric-days .planning-metric-icon {
    background: rgba(184, 132, 75, 0.15);
    color: #8a5b28;
}

.planning-metric-attention .planning-metric-icon {
    background: rgba(193, 2, 82, 0.12);
    color: #a80047;
}

.planning-total span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.planning-total strong {
    color: var(--accent);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 18px;
    line-height: 1.1;
}

.resource-planning-panel {
    overflow: hidden;
}

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

.resource-saved-views-panel {
    display: grid;
    gap: 0;
    margin-bottom: 18px;
    overflow: hidden;
}

.resource-saved-views-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(42, 70, 64, .28);
}

.resource-saved-views-dialog-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
    padding: 14px 16px;
}

.resource-saved-views-dialog-header h2,
.resource-saved-views-dialog-header small,
.resource-saved-views-dialog-header span {
    display: block;
}

.resource-saved-views-dialog-header h2 {
    margin: 2px 0;
}

.resource-saved-views-dialog-header small,
.resource-saved-views-dialog-header span {
    color: var(--muted);
}

.resource-saved-view-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 8px 12px;
}

.resource-saved-views-dialog .resource-saved-view-list {
    display: grid;
    max-height: 310px;
    overflow-y: auto;
}

.resource-saved-views-dialog .resource-saved-view-button {
    width: 100%;
    min-width: 0;
}

.resource-saved-views-dialog-actions {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 10px 12px;
}

.resource-new-calendar-dialog {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 5px;
    box-shadow: 0 24px 70px rgba(42, 70, 64, .28);
    overflow: hidden;
    width: min(520px, calc(100vw - 32px));
}

.resource-new-calendar-dialog-body {
    background: linear-gradient(120deg, rgba(241, 249, 247, .92), rgba(255, 250, 239, .9));
    display: grid;
    gap: 6px;
    padding: 18px;
}

.resource-new-calendar-dialog-body strong {
    color: var(--teal-dark);
    font-size: 15px;
}

.resource-new-calendar-dialog-body p {
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.resource-new-calendar-dialog-actions {
    border-top: 1px solid var(--line);
    padding: 10px 12px;
}

.resource-saved-view-editor {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
    padding: 10px 12px;
}

.resource-saved-view-editor > label {
    display: grid;
    flex: 1 1 280px;
    max-width: 520px;
    gap: 5px;
}

.resource-saved-view-editor > label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.resource-saved-view-editor input,
.resource-saved-view-editor select {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 7px 9px;
}

.resource-saved-view-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 9px 12px;
}

.resource-saved-view-button {
    display: grid;
    flex: 0 0 min(260px, 72vw);
    gap: 2px;
    min-height: 52px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    padding: 8px 10px;
    text-align: left;
}

.resource-saved-view-button:hover {
    background: var(--accent-soft);
}

.resource-saved-view-button.selected {
    border-color: rgba(0, 116, 130, .4);
    background: var(--surface-subtle);
    box-shadow: inset 3px 0 0 var(--teal);
}

.resource-saved-view-button small {
    color: var(--muted);
}

.resource-view-feedback {
    border-bottom: 1px solid var(--line);
    background: #edf5f3;
    color: var(--teal-dark);
    padding: 8px 12px;
}

.report-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.report-designer-panel,
.report-results-panel {
    min-width: 0;
    overflow: hidden;
}

.report-designer-panel {
    display: grid;
    align-content: start;
    width: 100%;
}

.report-definition-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
    justify-content: start;
    gap: 10px;
    width: 100%;
    padding: 12px;
}

.report-definition-fields label,
.report-sort-rule label {
    display: grid;
    gap: 5px;
}

.report-definition-fields label > span,
.report-sort-rule label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.report-definition-fields input,
.report-definition-fields select,
.report-definition-fields textarea,
.report-sort-rule select,
.report-filter-row input,
.report-filter-row select,
.report-column-row input {
    width: 100%;
    min-width: 0;
    min-height: 35px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 6px 8px;
}

.report-definition-fields .full-span {
    grid-column: 1 / -1;
}

.report-designer-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
    padding: 7px 10px;
}

.report-designer-tab {
    display: grid;
    flex: 0 0 auto;
    min-width: 118px;
    gap: 1px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    padding: 6px 9px;
    text-align: left;
}

.report-designer-tab strong {
    color: var(--teal-dark);
    font-size: 12px;
}

.report-designer-tab span {
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.report-designer-tab:hover {
    border-color: var(--line);
    background: var(--surface);
}

.report-designer-tab.active {
    border-color: rgba(0, 116, 130, .4);
    background: var(--surface);
    box-shadow: inset 0 -3px 0 var(--teal);
}

.report-designer-section-content {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.report-designer-section {
    border-top: 1px solid var(--line);
}

.report-designer-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    background: var(--surface-subtle);
    font-weight: 800;
    padding: 10px 12px;
}

.report-designer-section > summary span,
.report-designer-section-header span {
    color: var(--muted);
    font-size: 12px;
}

.report-designer-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 0;
    background: var(--surface-subtle);
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
    padding: 10px 12px;
    text-align: left;
}

.report-designer-section-header > strong {
    color: var(--teal-dark);
    font-size: inherit;
}

.report-designer-section-header:hover {
    background: var(--accent-soft);
}

.report-field-tools {
    display: grid;
    grid-template-columns: minmax(260px, 520px) minmax(220px, 320px);
    justify-content: start;
    gap: 8px;
    width: 100%;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
}

.report-field-tools label {
    display: grid;
    gap: 4px;
}

.report-field-tools label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.report-field-tools input,
.report-field-tools select {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 6px 8px;
}

.report-field-browser {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    align-items: stretch;
    gap: 10px;
    width: 100%;
    overflow: visible;
    padding: 12px;
}

.report-field-browser fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
    justify-content: start;
    align-content: start;
    column-gap: 14px;
    min-width: 0;
    min-height: 132px;
    margin: 0;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 4px;
    background: #f5faf9;
    padding: 9px 10px 10px;
}

.report-field-browser fieldset[data-field-group="Natural person"] {
    border-left-color: #b98a3c;
    background: #fbf8f1;
}

.report-field-browser fieldset[data-field-group="Company"] {
    border-left-color: #6e8296;
    background: #f4f7fa;
}

.report-field-browser legend {
    color: var(--teal-dark);
    font-weight: 800;
    padding: 0 4px;
}

.report-field-browser .check-row {
    align-items: start;
    min-width: 0;
    margin-top: 4px;
}

.report-field-browser small {
    display: block;
    color: var(--muted);
    font-size: 10px;
}

.report-field-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    padding: 8px;
}

.report-filter-list {
    display: grid;
    gap: 5px;
    border-top: 1px solid var(--line);
    padding: 9px 12px;
}

.report-column-order {
    border-top: 1px solid var(--line);
    background: #f7faf9;
}

.report-column-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 7px;
}

.report-column-order-header > div {
    display: grid;
    gap: 1px;
}

.report-column-order-header strong {
    color: var(--teal-dark);
    font-size: 13px;
}

.report-column-order-header span:not(.status) {
    color: var(--muted);
    font-size: 10.5px;
}

.report-column-table-scroll {
    width: 100%;
    padding: 0 12px 11px;
    overflow-x: auto;
}

.report-column-order-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 4px;
    background: var(--surface);
    overflow: hidden;
}

.report-column-order-table th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-align: left;
}

.report-column-order-table td {
    height: 43px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.report-column-order-table tbody tr:last-child td {
    border-bottom: 0;
}

.report-column-order-table tbody tr:hover {
    background: #f4faf9;
}

.report-column-number-cell {
    width: 52px;
    text-align: center !important;
}

.report-column-source-cell {
    width: 25%;
}

.report-column-entity-cell {
    width: 18%;
}

.report-column-actions-cell {
    width: 86px;
}

.report-column-remove-cell {
    width: 42px;
    text-align: center;
}

.report-column-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 116, 130, .25);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--teal-dark);
    font-size: 11px;
    font-weight: 800;
}

.report-column-source {
    min-width: 0;
}

.report-column-source strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.report-column-entity span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 11px;
}

.report-column-label input {
    width: min(100%, 420px);
    min-height: 31px;
}

.report-column-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
}

.report-column-actions .icon-action {
    width: 27px;
    height: 27px;
    min-height: 27px;
    padding: 0;
}

/* Compact two-pane field transfer used by the report column designer. */
.report-column-picker {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) 42px minmax(520px, 1.55fr);
    align-items: stretch;
    gap: 9px;
    width: 100%;
    padding: 11px 12px 12px;
    background: #f7faf9;
}

.report-field-source,
.report-column-picker .report-column-order {
    min-width: 0;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 4px;
    background: var(--surface);
    overflow: hidden;
}

.report-column-pane-header,
.report-column-picker .report-column-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 49px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
}

.report-column-pane-header > div {
    display: grid;
    gap: 1px;
}

.report-column-pane-header strong {
    color: var(--teal-dark);
    font-size: 13px;
}

.report-column-pane-header span:not(.status) {
    color: var(--muted);
    font-size: 10.5px;
}

.report-column-picker .report-field-tools {
    grid-template-columns: minmax(0, 1fr) minmax(116px, .52fr);
    justify-content: stretch;
    gap: 6px;
    padding: 7px 8px;
}

.report-column-picker .report-field-tools input,
.report-column-picker .report-field-tools select {
    min-height: 31px;
}

.report-column-picker .report-field-browser {
    display: block;
    width: 100%;
    max-height: 346px;
    overflow-y: auto;
    padding: 5px 7px 7px;
}

.report-field-group {
    padding: 0 0 5px;
}

.report-field-group + .report-field-group {
    border-top: 1px solid var(--line);
    padding-top: 5px;
}

.report-field-group h4 {
    margin: 0 0 3px;
    border-left: 3px solid var(--teal);
    background: #edf7f6;
    color: var(--teal-dark);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 6px;
}

.report-field-group[data-field-group="Natural person"] h4 {
    border-left-color: #b98a3c;
    background: #fbf7ee;
}

.report-field-group[data-field-group="Company"] h4 {
    border-left-color: #6e8296;
    background: #f1f5f8;
}

.report-field-option-list {
    display: grid;
    gap: 1px;
}

.report-field-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    width: 100%;
    min-height: 27px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-weight: 500;
    padding: 4px 7px;
    text-align: left;
}

.report-field-option:hover,
.report-field-option.active {
    border-color: rgba(0, 116, 130, .3);
    background: var(--accent-soft);
    color: var(--teal-dark);
}

.report-field-option.included {
    color: var(--muted);
    background: #f5f7f6;
}

.report-field-option:disabled {
    cursor: default;
    opacity: .68;
}

.report-field-option small {
    color: var(--teal);
    font-size: 11px;
    font-weight: 800;
}

.report-column-transfer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.report-column-transfer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    border: 1px solid rgba(0, 116, 130, .3);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--teal-dark);
    font-size: 18px;
    font-weight: 800;
    padding: 0;
}

.report-column-transfer button:hover:not(:disabled) {
    border-color: var(--teal);
    background: #d9efed;
    transform: translateY(-1px);
}

.report-column-transfer button:disabled {
    cursor: default;
    opacity: .35;
}

.report-column-picker .report-column-table-scroll {
    max-height: 408px;
    padding: 0;
    overflow: auto;
}

.report-column-picker .report-column-order-table {
    border: 0;
    border-radius: 0;
}

.report-column-picker .report-column-order-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.report-column-picker .report-column-order-table td {
    height: 39px;
    padding: 4px 8px;
}

.report-column-picker .report-column-order-table tbody tr {
    cursor: pointer;
}

.report-column-picker .report-column-order-table tbody tr.active {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--teal);
}

.report-column-picker .report-column-actions-cell {
    width: 78px;
}

.report-column-picker .report-column-label input {
    width: min(100%, 360px);
    min-height: 29px;
}

.report-column-picker .report-column-actions .icon-action {
    width: 25px;
    height: 25px;
    min-height: 25px;
}

.report-column-empty {
    color: var(--muted);
    cursor: default !important;
    font-size: 11px;
    text-align: center;
    padding: 18px !important;
}

.report-filter-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 12px;
}

.report-filter-reset-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #f4f9f8;
    padding: 7px 10px;
}

.report-filter-reset-row > span {
    color: var(--muted);
    font-size: 10px;
}

.report-filter-reset-row button {
    flex: none;
    min-height: 27px;
    padding: 3px 7px;
    font-size: 10px;
}

.report-filter-row {
    display: grid;
    grid-template-columns: minmax(250px, 480px) minmax(140px, 220px) minmax(170px, 280px) 30px;
    grid-template-areas: "field operator value remove";
    align-items: end;
    justify-content: start;
    gap: 7px;
    min-width: 0;
    border: 1px solid rgba(0, 116, 130, .18);
    border-left: 3px solid #6aaeb4;
    border-radius: 4px;
    background: linear-gradient(105deg, #f2f9f8 0%, #fffdf8 100%);
    padding: 7px 8px;
}

.report-filter-row label {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.report-filter-row label > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}

.report-filter-row input,
.report-filter-row select {
    min-height: 30px;
    padding: 4px 6px;
    font-size: 11.5px;
}

.report-filter-field {
    grid-area: field;
}

.report-filter-operator {
    grid-area: operator;
}

.report-filter-value {
    grid-area: value;
}

.report-filter-remove {
    grid-area: remove;
    align-self: end;
    margin-bottom: 1px;
}

.report-filter-no-value {
    grid-area: value;
    align-self: center;
    color: var(--muted);
    font-size: 11px;
    padding: 8px 4px;
}

.report-filter-group {
    display: grid;
    gap: 7px;
    margin: 8px 10px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 4px;
    background: linear-gradient(115deg, #f7fbfa 0%, #fffaf2 100%);
    padding: 8px;
}

.report-designer-section-content > .report-filter-group {
    width: calc(100% - 20px);
}

.report-filter-group .report-filter-group {
    margin: 3px 0 0 9px;
    border-left-color: #b98a3c;
    background: linear-gradient(115deg, #fbf8f0 0%, #f4f9f8 100%);
}

.report-filter-group-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.report-filter-group-header label {
    display: grid;
    gap: 4px;
    width: min(100%, 190px);
}

.report-filter-group-header label > span {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 700;
}

.report-filter-group-header select {
    width: 100%;
    min-height: 29px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 4px 6px;
    font-size: 11.5px;
}

.report-filter-group-actions {
    gap: 5px;
}

.report-filter-group-actions button {
    min-height: 27px;
    padding: 3px 6px;
    font-size: 10px;
}

.report-filter-group-empty {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    padding: 4px;
}

@media (max-width: 980px) {
    .report-filter-row {
        grid-template-columns: minmax(210px, 1fr) minmax(130px, 180px) minmax(150px, 1fr) 30px;
    }
}

@media (max-width: 680px) {
    .report-filter-row {
        grid-template-columns: minmax(0, 1fr) minmax(120px, .7fr) 30px;
        grid-template-areas:
            "field field remove"
            "operator value remove";
    }
}

.report-summary-editor {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
}

.report-summary-toggle {
    align-items: start;
}

.report-summary-toggle small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 400;
}

.report-summary-group-field {
    display: grid;
    gap: 3px;
}

.report-summary-group-field > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}

.report-summary-group-field select,
.report-aggregate-row select,
.report-aggregate-row input {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 4px 6px;
    font-size: 11.5px;
}

.report-summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 7px;
}

.report-summary-heading strong {
    font-size: 11px;
}

.report-summary-heading button {
    min-height: 27px;
    padding: 3px 6px;
    font-size: 10px;
}

.report-aggregate-row {
    display: grid;
    grid-template-columns: minmax(105px, .7fr) minmax(125px, 1fr) minmax(110px, .8fr) auto;
    align-items: center;
    gap: 5px;
}

.report-aggregate-all-records {
    color: var(--muted);
    font-size: 10.5px;
    padding: 0 5px;
}

.report-row-mode {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
}

.report-row-mode > label {
    display: grid;
    gap: 3px;
}

.report-row-mode label > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}

.report-row-mode select {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 4px 6px;
    font-size: 11.5px;
}

.report-cardinality-notice {
    display: grid;
    gap: 2px;
    border-left: 3px solid var(--teal);
    border-radius: 3px;
    background: var(--accent-soft);
    padding: 7px 9px;
}

.report-cardinality-notice strong {
    color: var(--teal-dark);
    font-size: 11px;
}

.report-cardinality-notice span,
.report-cardinality-notice small {
    color: var(--muted);
    font-size: 10px;
}

.report-sort-editor {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 10px 12px 12px;
    background: linear-gradient(115deg, #f5faf9 0%, #fffaf3 100%);
}

.report-sort-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 980px;
}

.report-sort-header > div {
    display: grid;
    gap: 2px;
}

.report-sort-header strong {
    color: var(--teal-dark);
    font-size: 13px;
}

.report-sort-header span {
    color: var(--muted);
    font-size: 10.5px;
}

.report-sort-list {
    display: grid;
    gap: 6px;
    width: min(100%, 980px);
}

.report-sort-rule {
    display: grid;
    grid-template-columns: 28px minmax(260px, 520px) minmax(140px, 190px) auto;
    align-items: end;
    justify-content: start;
    gap: 7px;
    border: 1px solid rgba(0, 116, 130, .2);
    border-left: 3px solid var(--teal);
    border-radius: 4px;
    background: rgba(255, 255, 255, .78);
    padding: 7px 8px;
}

.report-sort-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 116, 130, .25);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--teal-dark);
    font-size: 11px;
    font-weight: 800;
}

.report-sort-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 4px;
}

.report-sort-actions .icon-action {
    width: 27px;
    height: 27px;
    min-height: 27px;
    padding: 0;
}

.report-designer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    border-top: 1px solid var(--line);
    padding: 11px 12px;
}

.report-table-scroll {
    max-width: 100%;
    overflow: auto;
}

.report-result-table {
    width: 100%;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
}

.report-result-table th,
.report-result-table td {
    max-width: 360px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    white-space: pre-line;
}

.report-result-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-subtle);
    color: var(--teal-dark);
    font-size: 12px;
}

.report-result-table tbody tr:nth-child(even) td {
    background: var(--accent-soft);
}

.report-cell-link {
    color: var(--teal-dark);
    font-weight: 400;
    text-decoration: none;
}

.report-cell-link:hover {
    color: var(--danger);
    text-decoration: none;
}

.report-library-dialog {
    width: min(640px, calc(100vw - 32px));
    max-height: min(82vh, 720px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(42, 70, 64, .28);
}

.report-library-list {
    display: grid;
    gap: 6px;
    max-height: 470px;
    overflow-y: auto;
    padding: 10px 12px;
}

.report-library-list .resource-saved-view-button {
    width: 100%;
    min-width: 0;
}

.report-library-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
    color: var(--teal-dark);
    padding: 7px 12px;
    font-size: 12px;
}

.report-library-section-title span {
    color: var(--muted);
    font-size: 10px;
}

.report-library-list .resource-saved-view-button strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.report-library-list .status {
    flex: none;
    font-size: 9px;
}

.report-share-dialog {
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(42, 70, 64, .28);
}

.report-share-body {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.report-share-body label {
    display: grid;
    gap: 5px;
}

.report-share-body label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.report-share-body input:not([type="checkbox"]),
.report-share-body select {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    padding: 7px 9px;
}

.report-share-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 5px;
    background: linear-gradient(110deg, rgba(226, 242, 244, .86), rgba(255, 250, 241, .72));
    padding: 9px 11px;
}

.report-share-summary span,
.report-share-target-section header > span {
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent-strong);
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 800;
}

.report-share-target-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
}

.report-share-target-section {
    display: grid;
    min-width: 0;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(238, 247, 247, .86), rgba(255, 251, 244, .8));
    padding: 9px;
}

.report-share-target-section:nth-child(2) {
    background: linear-gradient(145deg, rgba(255, 248, 235, .92), rgba(247, 250, 247, .82));
}

.report-share-target-section:nth-child(3) {
    background: linear-gradient(145deg, rgba(242, 247, 252, .9), rgba(255, 250, 242, .8));
}

.report-share-target-section > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
}

.report-share-target-section > header > div {
    display: grid;
    gap: 2px;
}

.report-share-target-section > header small {
    color: var(--muted);
    line-height: 1.3;
}

.report-share-option-list {
    display: grid;
    gap: 6px;
    max-height: min(36vh, 330px);
    overflow-y: auto;
    padding-right: 2px;
}

.report-share-option-list .check-row {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(215, 205, 188, .8);
    border-radius: 5px;
    background: var(--surface);
    padding: 7px 8px;
}

.report-share-option-list input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    accent-color: var(--accent);
}

.report-share-option-list .check-row > span {
    display: grid;
    gap: 1px;
}

.report-share-option-list small {
    color: var(--muted);
}

@media (max-width: 900px) {
    .report-share-target-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-column-picker {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-column-transfer {
        flex-direction: row;
        min-height: 38px;
    }

    .report-column-picker .report-field-browser {
        max-height: 240px;
    }
}

@media (max-width: 680px) {
    .report-definition-fields,
    .report-field-tools,
    .report-field-browser {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-sort-rule {
        grid-template-columns: 28px minmax(0, 1fr) minmax(125px, .6fr);
    }

    .report-sort-actions {
        grid-column: 2 / -1;
        padding-bottom: 0;
    }

    .report-field-browser fieldset {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-column-order-table {
        min-width: 700px;
    }

    .report-filter-group .report-filter-group {
        margin-left: 3px;
    }

    .report-aggregate-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .report-aggregate-row > :not(button) {
        grid-column: 1;
    }

    .report-aggregate-row > button {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}

@media (max-width: 430px) {
    .report-filter-row {
        grid-template-columns: minmax(95px, .8fr) minmax(0, 1.2fr) 30px;
    }

    .report-filter-group-header {
        align-items: stretch;
    }

    .report-filter-group-header > label {
        width: 100%;
    }

    .report-filter-group-actions {
        width: 100%;
    }
}

.resource-calendar-panel-header {
    align-items: center;
}

.resource-calendar-label-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--muted);
    display: block;
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    margin-top: 2px;
    max-width: min(440px, 70vw);
    min-height: 24px;
    padding: 2px 4px;
    width: 100%;
}

.resource-calendar-label-input:hover,
.resource-calendar-label-input:focus {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
    outline: none;
}

.resource-calendar-label-input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.resource-calendar-notice {
    margin: 0 14px 12px;
    border: 1px dashed var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--muted);
    padding: 10px 12px;
}

.resource-calendar-toolbar {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-content: flex-start;
    padding: 9px 10px;
}

.resource-calendar-toolbar label {
    flex: 0 1 190px;
    display: grid;
    gap: 4px;
    max-width: 230px;
    min-width: 150px;
}

.resource-calendar-toolbar label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.resource-calendar-toolbar input,
.resource-calendar-toolbar select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    min-height: 34px;
    padding: 6px 8px;
}

.resource-calendar-filter-bar {
    align-items: end;
    background: linear-gradient(110deg, rgba(232, 244, 244, 0.92), rgba(255, 250, 240, 0.82));
    border-top: 1px solid rgba(0, 116, 130, 0.16);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 9px 10px;
}

.resource-calendar-filter-heading {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 190px;
    gap: 7px;
    min-width: 170px;
}

.resource-calendar-filter-heading > span:not(.resource-calendar-filter-icon) {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.resource-calendar-filter-heading strong {
    color: var(--teal-dark);
    font-size: 12px;
}

.resource-calendar-filter-heading small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.2;
}

.resource-calendar-filter-heading > b {
    align-items: center;
    background: var(--accent);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 10px;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding: 0 6px;
}

.resource-calendar-filter-icon {
    align-items: center;
    background: var(--teal);
    border-radius: 5px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 17px;
    height: 30px;
    justify-content: center;
    transform: rotate(90deg);
    width: 30px;
}

.resource-calendar-filter-bar label {
    display: grid;
    flex: 0 1 190px;
    gap: 4px;
    max-width: 250px;
    min-width: 155px;
}

.resource-calendar-filter-bar .resource-calendar-search-filter {
    flex-basis: 255px;
    max-width: 330px;
}

.resource-calendar-filter-bar label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.resource-calendar-filter-bar input,
.resource-calendar-filter-bar select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    min-height: 34px;
    padding: 6px 8px;
    width: 100%;
}

.resource-calendar-clear-filters {
    align-self: end;
    min-height: 34px;
}

.resource-calendar-collapsed-controls {
    align-items: center;
    background: color-mix(in srgb, var(--surface-subtle) 78%, white);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: space-between;
    padding: 7px 12px;
}

.resource-calendar-collapsed-controls > span {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.resource-calendar-collapsed-controls .resource-month-navigation {
    margin-left: auto;
}

.resource-month-navigation {
    align-items: end;
    display: flex;
    gap: 7px;
    margin-left: auto;
}

.resource-month-navigation label {
    flex-basis: 150px;
    min-width: 140px;
}

.resource-calendar-summary {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 9px 12px;
}

.resource-calendar-summary span {
    color: var(--muted);
    font-size: 13px;
}

.resource-calendar-summary strong {
    color: var(--teal-dark);
    margin-right: 3px;
}

.resource-calendar-summary .has-conflicts,
.resource-calendar-summary .has-conflicts strong {
    color: var(--accent-strong);
}

.resource-calendar-summary .has-warnings,
.resource-calendar-summary .has-warnings strong {
    color: var(--warning);
}

.resource-calendar-scroll {
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 330px);
    min-height: 280px;
    overflow: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-color: rgba(42, 70, 64, 0.38) rgba(42, 70, 64, 0.05);
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
}

.resource-calendar-scroll::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

.resource-calendar-scroll::-webkit-scrollbar-track {
    border: 1px solid rgba(42, 70, 64, 0.08);
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2)),
        rgba(42, 70, 64, 0.045);
}

.resource-calendar-scroll::-webkit-scrollbar-thumb {
    min-height: 42px;
    min-width: 42px;
    border: 2px solid rgba(246, 241, 231, 0.9);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(36, 139, 128, 0.62), rgba(42, 70, 64, 0.58));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

.resource-calendar-scroll:hover::-webkit-scrollbar-thumb,
.resource-calendar-scroll:focus-within::-webkit-scrollbar-thumb {
    background:
        linear-gradient(135deg, rgba(36, 139, 128, 0.86), rgba(42, 70, 64, 0.78));
}

.resource-calendar-scroll::-webkit-scrollbar-thumb:active {
    background:
        linear-gradient(135deg, var(--accent), var(--teal-dark));
}

.resource-calendar-scroll::-webkit-scrollbar-corner {
    background: rgba(42, 70, 64, 0.04);
}

.resource-calendar-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: max-content;
    table-layout: fixed;
    width: max-content;
}

.resource-calendar-table th,
.resource-calendar-table td {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.resource-calendar-table thead th {
    background: #e9f0e3;
    color: var(--teal-dark);
    height: 42px;
    min-width: 118px;
    padding: 5px 6px;
    position: sticky;
    text-align: left;
    top: 0;
    vertical-align: bottom;
    width: 118px;
    z-index: 3;
}

.resource-calendar-table thead th span,
.resource-calendar-table thead th strong {
    display: block;
}

.resource-calendar-table thead th span {
    font-size: 10px;
    text-transform: uppercase;
}

.resource-calendar-table thead th strong {
    font-size: 14px;
}

.resource-calendar-table td {
    background: var(--surface);
    height: 74px;
    min-width: 118px;
    padding: 3px;
    vertical-align: top;
    width: 118px;
}

.resource-calendar-table .resource-name-column {
    background: #e4eef1;
    left: 0;
    min-width: 158px;
    padding: 6px 8px;
    position: sticky;
    text-align: left;
    width: 158px;
    z-index: 2;
}

.resource-calendar-table thead .resource-name-column {
    background: #d6e6e9;
    z-index: 4;
}

.resource-calendar-table tbody .resource-name-column strong,
.resource-calendar-table tbody .resource-name-column small {
    display: block;
}

.resource-calendar-table tbody .resource-name-column strong {
    color: var(--teal-dark);
}

.resource-calendar-table tbody .resource-name-column small {
    color: var(--muted);
    font-weight: 400;
    margin-top: 2px;
}

.resource-calendar-table .is-weekend {
    background: #ebe9e5;
}

.resource-calendar-table .is-today {
    background: linear-gradient(180deg, rgba(245, 200, 88, 0.26), rgba(245, 200, 88, 0.14));
    box-shadow: inset 2px 0 var(--accent), inset -2px 0 var(--accent);
}

.resource-calendar-table thead .is-today {
    background: linear-gradient(180deg, rgba(245, 200, 88, 0.38), rgba(245, 200, 88, 0.2));
    color: var(--accent);
}

.resource-booking {
    background: var(--accent-soft);
    border: 1px solid #a9c9cb;
    border-left: 4px solid var(--success);
    border-radius: 3px;
    color: var(--text);
    cursor: pointer;
    display: grid;
    gap: 1px;
    margin-bottom: 3px;
    min-height: 38px;
    padding: 4px 18px 4px 5px;
    position: relative;
    text-align: left;
    width: 100%;
}

.resource-booking:hover {
    border-color: var(--teal-dark);
    box-shadow: 0 2px 7px rgba(42, 70, 64, 0.16);
}

.resource-booking strong,
.resource-booking small,
.resource-booking span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-booking strong {
    color: var(--teal-dark);
    font-size: 11px;
}

.resource-booking span,
.resource-booking small {
    font-size: 10px;
}

.resource-booking small {
    color: var(--muted);
}

.resource-booking b {
    align-items: center;
    background: var(--accent);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    height: 15px;
    justify-content: center;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 15px;
}

.resource-booking.is-warning {
    background: #f4eee3;
    border-color: #d6c198;
    border-left-color: var(--warning);
}

.resource-booking.is-conflict {
    background: #f7e7e9;
    border-color: #d898a0;
    border-left-color: var(--accent);
}

.resource-booking.is-inactive {
    background: #efefed;
    border-color: #c9c9c4;
    border-left-color: #8d918e;
    opacity: 0.72;
    text-decoration: line-through;
}

.compact-calendar-view .resource-calendar-toolbar {
    gap: 6px 8px;
    padding: 6px 8px;
}

.compact-calendar-view .resource-calendar-toolbar label {
    flex-basis: 160px;
    gap: 2px;
    max-width: 190px;
    min-width: 120px;
}

.compact-calendar-view .resource-calendar-toolbar label > span {
    font-size: 10px;
}

.compact-calendar-view .resource-calendar-toolbar input,
.compact-calendar-view .resource-calendar-toolbar select {
    font-size: 11px;
    min-height: 28px;
    padding: 4px 6px;
}

.compact-calendar-view .resource-calendar-filter-bar {
    gap: 6px 8px;
    padding: 6px 8px;
}

.compact-calendar-view .resource-calendar-filter-heading {
    flex-basis: 165px;
    min-width: 150px;
}

.compact-calendar-view .resource-calendar-filter-bar label {
    flex-basis: 160px;
    gap: 2px;
    max-width: 210px;
    min-width: 125px;
}

.compact-calendar-view .resource-calendar-filter-bar input,
.compact-calendar-view .resource-calendar-filter-bar select {
    font-size: 11px;
    min-height: 28px;
    padding: 4px 6px;
}

.compact-calendar-view .resource-calendar-clear-filters {
    min-height: 28px;
    padding: 4px 7px;
}

.compact-calendar-view .resource-calendar-collapsed-controls {
    gap: 5px 8px;
    padding: 4px 7px;
}

.compact-calendar-view .resource-calendar-collapsed-controls > span {
    font-size: 10px;
}

.compact-calendar-view .resource-month-navigation {
    gap: 4px;
}

.compact-calendar-view .resource-month-navigation label {
    flex-basis: 125px;
    min-width: 120px;
}

.compact-calendar-view .resource-month-navigation .secondary-action {
    min-height: 28px;
    padding: 4px 7px;
}

.compact-calendar-view .resource-calendar-summary {
    gap: 4px 10px;
    padding: 5px 8px;
}

.compact-calendar-view .resource-calendar-summary span {
    font-size: 11px;
}

.compact-calendar-view .resource-calendar-scroll {
    max-height: calc(100vh - 235px);
    min-height: 180px;
}

.compact-calendar-view .resource-calendar-table thead th {
    height: 28px;
    min-width: 46px;
    padding: 2px 3px;
    width: auto;
}

.compact-calendar-view .resource-calendar-table thead th span {
    font-size: 8px;
    letter-spacing: -0.02em;
}

.compact-calendar-view .resource-calendar-table thead th strong {
    font-size: 11px;
}

.compact-calendar-view .resource-calendar-table td {
    height: 34px;
    min-width: 46px;
    padding: 1px;
    width: auto;
}

.compact-calendar-view .resource-calendar-table .resource-name-column {
    min-width: 112px;
    padding: 3px 5px;
    width: 112px;
}

.compact-calendar-view .resource-calendar-table tbody .resource-name-column strong {
    font-size: 11px;
    line-height: 1.15;
}

.compact-calendar-view .resource-calendar-table tbody .resource-name-column small {
    font-size: 9px;
    line-height: 1.1;
    margin-top: 1px;
}

.compact-calendar-view .resource-booking {
    border-left-width: 2px;
    gap: 0;
    margin-bottom: 1px;
    min-height: 17px;
    min-width: max-content;
    padding: 1px 10px 1px 3px;
    width: max-content;
}

.compact-calendar-view .resource-booking strong {
    font-size: 9px;
    letter-spacing: -0.03em;
    line-height: 1.15;
    overflow: visible;
    text-overflow: clip;
}

.compact-calendar-view .resource-booking b {
    font-size: 8px;
    height: 10px;
    right: 1px;
    top: 1px;
    width: 10px;
}

.compact-calendar-view .resource-calendar-legend {
    gap: 6px;
    padding: 5px 8px;
}

.compact-calendar-view .resource-calendar-legend span {
    font-size: 10px;
}

.resource-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 10px 12px;
}

.resource-calendar-legend span {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    gap: 6px;
}

.resource-calendar-legend i {
    background: var(--accent-soft);
    border: 1px solid #a9c9cb;
    border-left: 4px solid var(--success);
    border-radius: 2px;
    height: 16px;
    width: 22px;
}

.resource-calendar-legend .legend-warning {
    background: #f4eee3;
    border-color: #d6c198;
    border-left-color: var(--warning);
}

.resource-calendar-legend .legend-conflict {
    background: #f7e7e9;
    border-color: #d898a0;
    border-left-color: var(--accent);
}

.resource-calendar-legend .legend-inactive {
    background: #efefed;
    border-color: #c9c9c4;
    border-left-color: #8d918e;
}

.resource-booking-dialog {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    box-shadow: var(--section-shadow);
    display: grid;
    gap: 14px;
    max-height: min(650px, calc(100vh - 48px));
    overflow: auto;
    padding: 16px;
    width: min(560px, 100%);
}

.resource-booking-dialog-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 12px;
}

.resource-booking-dialog-header div {
    display: grid;
    gap: 2px;
}

.resource-booking-dialog-header small,
.resource-booking-dialog-header span,
.resource-booking-description > small {
    color: var(--muted);
    font-size: 12px;
}

.resource-booking-dialog-header h3 {
    color: var(--teal-dark);
    margin: 0;
}

.resource-booking-dialog-header span {
    font-weight: 700;
}

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

.resource-booking-highlight > span {
    background: var(--accent-soft);
    border-left: 4px solid var(--success);
    border-radius: 3px;
    display: grid;
    gap: 2px;
    padding: 10px 12px;
}

.resource-booking-highlight small {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}

.resource-booking-highlight strong {
    color: var(--teal-dark);
    font-size: 17px;
}

.resource-booking-details {
    display: grid;
    gap: 10px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.resource-booking-details div {
    display: grid;
    gap: 2px;
}

.resource-booking-details dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.resource-booking-details dd {
    color: var(--text);
    font-size: 13px;
    margin: 0;
}

.resource-booking-description {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 3px;
    display: grid;
    gap: 4px;
    padding: 10px 12px;
}

.resource-booking-description p {
    margin: 0;
    white-space: pre-line;
}

.resource-booking-dialog-actions {
    border-top: 1px solid var(--line);
    grid-column: auto;
    padding-top: 12px;
}

.resource-booking-dialog-actions a {
    align-items: center;
    display: inline-flex;
    text-decoration: none;
}

.planning-copy-panel {
    align-items: end;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 4px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 420px) auto;
    margin: 0 auto;
    max-width: 1002px;
    padding: 12px;
}

.planning-copy-intro,
.planning-copy-panel label {
    display: grid;
    gap: 4px;
}

.planning-copy-intro strong {
    color: var(--teal-dark);
}

.planning-copy-intro small,
.planning-copy-panel label > span {
    color: var(--muted);
    font-size: 12px;
}

.planning-copy-panel label > span {
    font-weight: 700;
}

.planning-copy-panel input,
.planning-copy-panel select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    min-height: 38px;
    padding: 8px 10px;
    width: 100%;
}

.planning-copy-day-panel {
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 360px) minmax(150px, 180px) auto;
    margin: 0;
    max-width: none;
}

.planning-copy-panel .form-actions {
    grid-column: auto;
}

.planning-copy-panel .validation-summary {
    grid-column: 1 / -1;
}

.planning-copy-notice {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--teal-dark);
    font-weight: 700;
    margin: 0 auto;
    max-width: 1002px;
    padding: 9px 12px;
}

.planning-sync-error {
    margin: 0 auto;
    max-width: 1002px;
}

.planning-editor {
    background:
        linear-gradient(135deg, rgba(228, 238, 241, 0.84), rgba(255, 255, 255, 0.94)),
        var(--surface);
    border: 1px solid #c6d9db;
    border-left: 4px solid var(--teal);
    border-radius: 6px;
    box-shadow: var(--section-shadow-soft);
    display: grid;
    gap: 12px;
    padding: 12px;
}

.planning-editor.collapsed {
    padding: 10px 12px;
}

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

.planning-editor-header div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.planning-editor-header strong {
    color: var(--teal-dark);
    font-size: 15px;
}

.planning-editor-header small {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.planning-form.planning-form-compact {
    grid-template-columns: repeat(4, minmax(180px, 240px));
    justify-content: center;
    margin: 0 auto;
    max-width: 1002px;
    width: 100%;
}

.planning-form-compact .field-wide {
    grid-column: span 2;
}

.planning-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.planning-form label > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.planning-form .field-help {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.planning-form input:not([type="checkbox"]),
.planning-form select,
.planning-form textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 8px 10px;
}

.planning-form .check-row {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    min-height: 38px;
}

.planning-form .check-row input[type="checkbox"] {
    accent-color: var(--accent);
    flex: 0 0 auto;
    height: 16px;
    margin: 0;
    width: 16px;
}

.planning-form .check-row span {
    color: var(--text);
    font-size: 14px;
}

.planning-notes {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(228, 238, 241, 0.52), rgba(255, 255, 255, 0.96)),
        var(--surface);
    box-shadow: var(--section-shadow-soft);
    margin-top: 14px;
}

.planning-notes > :not(.panel-header) {
    margin-left: 14px;
    margin-right: 14px;
}

.planning-notes > :last-child {
    margin-bottom: 14px;
}

.panel-header.compact {
    min-height: 48px;
    padding: 10px 14px;
}

.planning-notes .panel-header.compact {
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
}

.planning-notes .panel-header.compact h3 {
    color: var(--teal-dark);
    font-family: RobotoSlab, Georgia, serif;
    font-size: 17px;
    margin: 0;
}

.planning-note-form {
    align-items: end;
    border: 1px solid rgba(215, 205, 188, 0.76);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.72);
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(280px, 520px);
    gap: 12px;
    margin-top: 14px;
    padding: 12px;
}

.planning-note-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.planning-note-form .full-span {
    grid-column: 1 / -1;
}

.planning-note-form label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.planning-note-form select,
.planning-note-form textarea {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 7px 9px;
}

.planning-note-form textarea {
    min-height: 76px;
    resize: vertical;
}

.planning-note-form select:focus,
.planning-note-form textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(0, 116, 130, 0.14);
    outline: none;
}

.planning-note-form .form-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.planning-note-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.planning-note {
    display: grid;
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(215, 205, 188, 0.86);
    border-left: 4px solid var(--teal);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--section-shadow-soft);
    padding: 10px;
}

.planning-note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
}

.planning-note p {
    margin: 0;
    line-height: 1.4;
}

.planning-board {
    display: grid;
    gap: 18px;
    background:
        radial-gradient(circle at top left, rgba(0, 116, 130, 0.06), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 238, 227, 0.38));
    padding: 14px;
}

.planning-section {
    display: grid;
    gap: 10px;
}

.planning-section-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-bottom: 2px solid rgba(0, 116, 130, 0.24);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 6px 2px 8px;
}

.planning-section-heading > div {
    display: grid;
    gap: 2px;
}

.planning-section h4,
.planning-section-heading h4 {
    margin: 0;
    color: var(--teal-dark);
    font-size: 16px;
}

.planning-section-heading span {
    color: var(--muted);
    font-size: 11px;
}

.planning-section-count {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--surface-subtle);
    border: 1px solid rgba(0, 116, 130, 0.16);
    color: var(--teal-dark) !important;
    font-size: 11px !important;
    font-weight: 800;
    padding: 4px 8px;
    white-space: nowrap;
}

.planning-section-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.planning-day,
.planning-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--section-shadow-soft);
}

.planning-day {
    display: grid;
    gap: 10px;
    border-color: #bdced0;
    background:
        linear-gradient(180deg, rgba(228, 238, 241, 0.74), rgba(255, 255, 255, 0.98)),
        var(--surface);
    padding: 10px;
}

.planning-day-header,
.planning-item {
    display: grid;
    gap: 10px;
    align-items: start;
    position: relative;
}

.planning-day-header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 42px;
}

.planning-day-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

.planning-day-date {
    border: 1px solid rgba(184, 132, 75, 0.32);
    border-radius: 999px;
    background: rgba(244, 238, 227, 0.9);
    color: #8a5b28 !important;
    display: inline-flex;
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 3px 9px;
}

.planning-item {
    grid-template-columns: minmax(240px, 1fr) max-content auto;
    overflow: hidden;
}

.planning-day-header .row-actions,
.planning-item .row-actions {
    align-items: center;
    gap: 6px;
}

.planning-order-badge {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(42, 70, 64, 0.15);
    border-radius: 999px;
    color: var(--teal-dark);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-width: 22px;
    padding: 3px 5px;
    position: absolute;
    left: 8px;
    top: 8px;
    white-space: nowrap;
}

.planning-day-header small,
.planning-item small,
.planning-item p {
    color: var(--muted);
    line-height: 1.35;
    margin: 0;
}

.planning-item {
    padding: 10px 12px 10px 18px;
}

.planning-item:has(.planning-order-badge) {
    padding-left: 48px;
}

.planning-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--planning-accent, var(--teal));
}

.planning-item-task {
    --planning-accent: #6f95a1;
    background: linear-gradient(90deg, rgba(111, 149, 161, 0.10), rgba(255, 255, 255, 0.98));
}

.planning-item-communication {
    --planning-accent: #007482;
    background: linear-gradient(90deg, rgba(0, 116, 130, 0.12), rgba(255, 255, 255, 0.98));
}

.planning-item-location,
.planning-item-lookup {
    --planning-accent: #b8844b;
    background: linear-gradient(90deg, rgba(184, 132, 75, 0.13), rgba(255, 255, 255, 0.98));
}

.planning-item-equipment,
.planning-item-material {
    --planning-accent: #708b69;
    background: linear-gradient(90deg, rgba(112, 139, 105, 0.14), rgba(255, 255, 255, 0.98));
}

.planning-item-person {
    --planning-accent: #8f1e53;
    background: linear-gradient(90deg, rgba(143, 30, 83, 0.10), rgba(255, 255, 255, 0.98));
}

.planning-item-catering {
    --planning-accent: #c47d58;
    background: linear-gradient(90deg, rgba(196, 125, 88, 0.13), rgba(255, 255, 255, 0.98));
}

.planning-item-finance {
    --planning-accent: #ab3645;
    background: linear-gradient(90deg, rgba(171, 54, 69, 0.10), rgba(255, 255, 255, 0.98));
}

.planning-item-homework,
.planning-item-other {
    --planning-accent: #7b7898;
    background: linear-gradient(90deg, rgba(123, 120, 152, 0.12), rgba(255, 255, 255, 0.98));
}

.planning-item.status-full {
    border-color: rgba(193, 2, 82, 0.36);
}

.planning-item.status-enabled {
    opacity: .86;
}

.planning-item.is-required .planning-order-badge {
    border-color: rgba(171, 54, 69, 0.36);
}

.planning-status {
    min-width: 0;
    min-height: 20px;
    margin-top: 5px;
    padding: 2px 8px;
    font-size: 11px;
}

.planning-day-header {
    padding-left: 14px;
}

.planning-day-header:has(.planning-order-badge) {
    padding-left: 46px;
}

.planning-item dl,
.planning-item-details {
    align-content: start;
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    margin: 0;
    max-width: min(720px, 52vw);
    min-width: 0;
    width: max-content;
}

.planning-item dl > div,
.planning-item-details > div {
    display: inline-grid;
    gap: 2px;
    border: 1px solid rgba(215, 205, 188, 0.72);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.66);
    max-width: 260px;
    min-width: max-content;
    padding: 5px 7px;
    width: max-content;
}

.planning-item dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.planning-item dd {
    font-size: 13px;
    margin: 0;
    overflow-wrap: anywhere;
}

.planning-day-items {
    display: grid;
    gap: 8px;
    border-left: 2px dashed rgba(0, 116, 130, 0.22);
    margin-left: 18px;
    padding-left: 14px;
}

.planning-item .field-badge,
.planning-day-header .field-badge {
    margin-top: 4px;
    margin-right: 4px;
}

.planning-meaning-badge {
    background: linear-gradient(135deg, rgba(0, 116, 130, 0.13), rgba(244, 184, 64, 0.18));
    border: 1px solid rgba(0, 116, 130, 0.22);
    color: var(--teal-dark);
}

.planning-item-main > strong,
.planning-item > div:first-of-type > strong,
.planning-day-header strong {
    color: var(--teal-dark);
    font-size: 15px;
}

.planning-item-main > small,
.planning-item > div:first-of-type > small {
    display: block;
    margin-top: 2px;
}

.planning-item .row-actions,
.planning-item-actions {
    align-self: center;
    justify-content: flex-end;
}

.planning-item-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 160px;
}

.planning-status-select {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    min-height: 30px;
    min-width: 126px;
    padding: 5px 28px 5px 10px;
}

.planning-editor-assignment-panel {
    display: grid;
    gap: 8px;
}

.planning-editor-assignment-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.planning-editor-assignment-header h4 {
    margin: 0;
}

.planning-editor-assignment-group {
    display: grid;
    gap: 6px;
}

.planning-editor-assignment-group > strong {
    color: var(--text);
    font-size: 13px;
}

.planning-editor-overlay {
    align-items: center;
    background: rgba(20, 44, 39, 0.38);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 1200;
}

.planning-editor-dialog,
.planning-info-settings-dialog {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(42, 70, 64, 0.26);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: min(860px, calc(100vh - 42px));
    overflow: hidden;
    width: min(980px, calc(100vw - 40px));
}

.planning-info-settings-dialog {
    width: min(860px, calc(100vw - 40px));
}

.planning-editor-dialog .planning-editor-header,
.planning-info-settings-dialog .planning-editor-header {
    background:
        linear-gradient(180deg, rgba(228, 238, 241, 0.95), rgba(228, 238, 241, 0.74)),
        var(--surface-subtle);
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
}

.planning-editor-dialog .planning-editor-header strong,
.planning-info-settings-dialog .planning-editor-header strong {
    font-size: 17px;
}

.planning-editor-dialog .planning-editor-header small,
.planning-info-settings-dialog .planning-editor-header small {
    color: var(--muted);
    display: block;
    margin-top: 2px;
}

.planning-info-settings-form {
    background:
        linear-gradient(135deg, rgba(228, 238, 241, 0.36), rgba(255, 255, 255, 0.96)),
        var(--surface);
    display: grid;
    gap: 12px;
    overflow: auto;
    padding: 14px;
}

.planning-info-settings-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 12px;
}

.planning-info-display-card-editor {
    background:
        linear-gradient(135deg, rgba(229, 244, 245, 0.58), rgba(255, 255, 255, 0.88)),
        var(--surface);
    border-left: 3px solid var(--accent);
}

.planning-info-display-card-editor.collapsed {
    gap: 0;
    padding-block: 10px;
}

.planning-info-display-card-header {
    margin: 0;
}

.planning-info-display-toggle {
    max-width: min(560px, 100%);
}

.planning-info-display-card-header .row-actions {
    align-items: center;
}

.planning-info-fields-heading {
    border-top: 1px solid rgba(197, 177, 145, 0.55);
    padding-top: 10px;
}

.planning-info-settings-card h4 {
    font-size: 15px;
    margin: 0;
}

.planning-info-settings-card small {
    color: var(--muted);
    display: block;
    margin-top: 2px;
}

.planning-info-basics-grid {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 0.75fr) minmax(260px, 1fr);
}

.planning-info-basics-grid label,
.planning-info-column-row label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.planning-info-basics-grid input,
.planning-info-basics-grid select,
.planning-info-column-row input,
.planning-info-column-row select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink);
    font: inherit;
    min-height: 34px;
    padding: 6px 8px;
}

.planning-info-destinations {
    align-self: end;
    background: rgba(228, 238, 241, 0.6);
    border: 1px solid rgba(197, 177, 145, 0.72);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 0;
    padding: 10px 12px 12px;
}

.planning-info-destinations legend {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    padding: 0 4px;
}

.planning-info-destinations .check-row {
    align-items: center;
    display: inline-flex;
    gap: 7px;
    margin: 0;
    white-space: nowrap;
}

.planning-info-label-with-info {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    position: relative;
    width: max-content;
    z-index: 40;
}

.planning-info-label-with-info:focus-within {
    z-index: 4300;
}

.planning-info-help-mark {
    flex: 0 0 auto;
}

.planning-info-help-card {
    left: calc(100% + 8px);
    min-width: 240px;
    top: -8px;
    z-index: 4500;
}

.planning-info-column-list {
    display: grid;
    gap: 6px;
}

.planning-info-column-head {
    color: var(--muted);
    display: grid;
    font-size: 12px;
    font-weight: 700;
    gap: 12px;
    grid-template-columns: 86px minmax(180px, 0.8fr) minmax(260px, 1fr) 42px;
    letter-spacing: 0.02em;
    padding: 0 10px;
    text-transform: uppercase;
}

.planning-info-column-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(197, 177, 145, 0.6);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: 86px minmax(180px, 0.8fr) minmax(260px, 1fr) 42px;
    padding: 9px 10px;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.planning-info-column-row:hover {
    background: rgba(245, 251, 251, 0.94);
    border-color: rgba(0, 132, 142, 0.38);
    box-shadow: 0 6px 18px rgba(42, 70, 64, 0.08);
}

.planning-info-column-row .check-row,
.planning-info-settings-card .toggle-line {
    align-items: center;
    display: inline-flex;
    gap: 7px;
    margin: 0;
    white-space: nowrap;
}

.planning-info-visible-check {
    color: var(--muted);
    font-size: 13px;
}

.planning-info-label-field,
.planning-info-source-field {
    min-width: 0;
}

.planning-info-remove {
    justify-self: end;
    min-height: 30px;
    width: 30px;
    white-space: nowrap;
}

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

.planning-info-source-grid > div {
    background: rgba(255, 255, 255, 0.54);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 10px;
}

.planning-info-source-list {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.planning-info-source-list .check-row {
    align-items: center;
    font-size: 13px;
}

.planning-info-settings-dialog .form-actions {
    background: rgba(255, 255, 255, 0.76);
    border-top: 1px solid var(--line);
    padding: 12px 14px;
}

@media (max-width: 760px) {
    .planning-info-basics-grid,
    .planning-info-column-row {
        grid-template-columns: 1fr;
    }

    .planning-info-column-head {
        display: none;
    }

    .planning-info-remove {
        justify-self: start;
    }
}

.planning-editor-dialog .planning-form {
    align-content: start;
    background:
        linear-gradient(135deg, rgba(228, 238, 241, 0.44), rgba(255, 255, 255, 0.96)),
        var(--surface);
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    max-height: 100%;
    overflow: auto;
    padding: 14px;
}

.planning-editor-dialog .planning-form label {
    gap: 3px;
}

.planning-editor-dialog .planning-form input,
.planning-editor-dialog .planning-form select {
    min-height: 34px;
}

.planning-editor-dialog .planning-form textarea {
    min-height: 76px;
}

.planning-editor-dialog .custom-field-editor-panel {
    padding: 10px;
}

.planning-editor-dialog .custom-field-editor-panel h4 {
    font-size: 15px;
    margin: 0 0 8px;
}

.planning-editor-dialog .custom-field-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.planning-editor-dialog .form-actions {
    background: rgba(255, 255, 255, 0.72);
    border-top: 1px solid rgba(215, 205, 188, 0.72);
    bottom: -14px;
    margin: 0 -14px -14px;
    padding: 10px 14px;
    position: sticky;
}

.planning-cost-overlay {
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.planning-cost-dialog {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(42, 70, 64, 0.26);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: min(720px, calc(100vh - 42px));
    overflow: hidden;
    width: min(820px, calc(100vw - 40px));
}

.planning-cost-content {
    overflow: auto;
    padding: 14px;
}

.planning-cost-table {
    border-collapse: collapse;
    font-size: 13px;
    width: 100%;
}

.planning-cost-table th {
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .04em;
    padding: 8px 10px;
    text-align: left;
    text-transform: uppercase;
}

.planning-cost-table td {
    border-bottom: 1px solid rgba(215, 205, 188, 0.82);
    padding: 9px 10px;
    vertical-align: top;
}

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

.planning-cost-table td small {
    color: var(--muted);
    display: block;
    margin-top: 2px;
}

.planning-cost-table tfoot td {
    background: rgba(244, 238, 227, 0.64);
    font-weight: 900;
}

.planning-cost-table .number-column {
    text-align: right;
    white-space: nowrap;
}

.planning-cost-amount {
    color: var(--accent);
    font-weight: 900;
}

@media (max-width: 920px) {
    .planning-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .planning-editor-dialog .planning-form,
    .planning-editor-dialog .custom-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .planning-metric-strip {
        grid-template-columns: 1fr;
    }

    .planning-editor-overlay {
        padding: 10px;
    }

    .planning-editor-dialog {
        max-height: calc(100vh - 20px);
        width: calc(100vw - 20px);
    }

    .planning-editor-dialog .planning-form,
    .planning-editor-dialog .custom-field-grid {
        grid-template-columns: 1fr;
    }
}

.planning-item .secondary-action {
    min-height: 30px;
    padding: 5px 9px;
    white-space: nowrap;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

.blazor-error-boundary {
    background: var(--danger);
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

html.compact-mode body {
    font-size: 14px;
    line-height: 1.35;
}

html.compact-mode .content {
    gap: 14px;
    padding: 20px;
}

html.compact-mode .page-header {
    gap: 12px;
    min-height: 52px;
}

html.compact-mode .page-header h1 {
    font-size: 26px;
}

html.compact-mode .eyebrow {
    font-size: 12px;
}

html.compact-mode .primary-action,
html.compact-mode .secondary-action,
html.compact-mode .danger-action {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 13px;
}

html.compact-mode .app-action {
    font-size: 12px;
    min-height: 30px;
    padding: 5px 9px;
}

html.compact-mode .action-group {
    gap: 4px;
    padding: 4px;
}

html.compact-mode .list-toggle-action {
    width: 30px;
    min-width: 30px;
    min-height: 30px;
}

html.compact-mode .icon-action {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

html.compact-mode .metric-grid,
html.compact-mode .workspace-grid,
html.compact-mode .customization-layout,
html.compact-mode .hrm-layout,
html.compact-mode .instance-workspace,
html.compact-mode .planning-view,
html.compact-mode .instances-view,
html.compact-mode .planning-board {
    gap: 12px;
}

html.compact-mode .metric-card {
    min-height: 86px;
    padding: 12px;
}

html.compact-mode .metric-card strong {
    font-size: 24px;
}

html.compact-mode .panel-header {
    min-height: 44px;
    gap: 10px;
    padding: 10px 12px;
}

html.compact-mode .panel-header h2 {
    font-size: 16px;
}

html.compact-mode .worker-list-panel > .filter-toolbar {
    padding: 8px 10px;
}

html.compact-mode .study-program-list {
    padding: 5px;
}

html.compact-mode .worker-list-item {
    min-height: 50px;
    padding: 7px 8px;
}

html.compact-mode .table-row,
html.compact-mode .module-row,
html.compact-mode .worker-card {
    min-height: 34px;
    gap: 8px;
    padding: 4px 8px;
}

html.compact-mode .worker-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

html.compact-mode .course-instance-enrollment-row {
    grid-template-columns: minmax(100px, max-content) minmax(0, 1fr) auto auto;
}

html.compact-mode .course-instance-enrollment-row > span:first-child {
    display: contents;
}

html.compact-mode .course-instance-enrollment-row > .status,
html.compact-mode .course-instance-enrollment-row > .field-badge {
    justify-self: end;
    width: max-content;
}

html.compact-mode .worker-card-meta {
    flex-wrap: nowrap;
    gap: 6px;
}

html.compact-mode .worker-card > span:first-child {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

html.compact-mode .worker-card strong,
html.compact-mode .worker-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.compact-mode .worker-card strong {
    min-width: 104px;
}

html.compact-mode .worker-card small {
    min-width: 0;
    font-size: 12px;
}

html.compact-mode .module-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.75fr);
}

html.compact-mode .filter-builder,
html.compact-mode .option-editor,
html.compact-mode .worker-form,
html.compact-mode .worker-read-view,
html.compact-mode .planning-view,
html.compact-mode .instances-view {
    gap: 10px;
    padding: 12px;
}

html.compact-mode .filter-toolbar,
html.compact-mode .filter-list,
html.compact-mode .filter-row,
html.compact-mode .custom-field-grid,
html.compact-mode .definition-grid,
html.compact-mode .worker-form,
html.compact-mode .planning-form,
html.compact-mode .planning-note-form {
    gap: 10px;
}

html.compact-mode .sort-control select,
html.compact-mode .filter-row input,
html.compact-mode .filter-row select,
html.compact-mode .option-editor input,
html.compact-mode .option-editor select,
html.compact-mode .worker-form input,
html.compact-mode .worker-form select,
html.compact-mode .worker-form textarea,
html.compact-mode .planning-form input:not([type="checkbox"]),
html.compact-mode .planning-form select,
html.compact-mode .planning-form textarea {
    min-height: 32px;
    padding: 6px 8px;
    font-size: 13px;
}

html.compact-mode .worker-form label,
html.compact-mode .worker-form fieldset,
html.compact-mode .planning-form label {
    gap: 4px;
}

html.compact-mode .worker-form label > span,
html.compact-mode .worker-form legend,
html.compact-mode .planning-form label > span,
html.compact-mode .option-editor label > span,
html.compact-mode .linked-picker-field > span {
    font-size: 12px;
}

html.compact-mode .validation-summary,
html.compact-mode .worker-form fieldset,
html.compact-mode .read-details-grid div,
html.compact-mode .linked-picker-value,
html.compact-mode .company-picker-panel,
html.compact-mode .planning-total,
html.compact-mode .planning-editor,
html.compact-mode .planning-day,
html.compact-mode .planning-note {
    padding: 9px 10px;
}

html.compact-mode .card-tabs {
    gap: 6px;
    padding: 7px 12px;
}

html.compact-mode .tab-button {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 13px;
}

html.compact-mode .status {
    min-width: 62px;
    min-height: 20px;
    padding: 2px 7px;
    font-size: 11px;
}

html.compact-mode .field-badge,
html.compact-mode .tag-list span {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 11px;
}

html.compact-mode .worker-read-view {
    gap: 10px;
}

html.compact-mode .worker-read-header {
    gap: 12px;
    padding-bottom: 10px;
}

html.compact-mode .worker-read-header img,
html.compact-mode .profile-image-editor img,
html.compact-mode .profile-placeholder {
    width: 68px;
    height: 68px;
}

html.compact-mode .worker-read-header h3 {
    font-size: 18px;
}

html.compact-mode .worker-read-header p {
    margin-bottom: 6px;
}

html.compact-mode .read-details-grid {
    grid-template-columns: 1fr;
    gap: 2px;
}

html.compact-mode .read-details-grid div {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 1px 0;
}

html.compact-mode .read-details-grid dt {
    color: var(--teal-dark);
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

html.compact-mode .read-details-grid dt::after {
    content: ":";
}

html.compact-mode .read-details-grid dd {
    min-width: 0;
    white-space: pre-line;
}

html.compact-mode .read-section {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    border-color: rgba(0, 116, 130, 0.1);
    background: rgba(255, 255, 255, 0.32);
    padding: 8px 10px;
}

html.compact-mode .read-section h4 {
    color: var(--teal-dark);
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

html.compact-mode .read-section h4::after {
    content: ":";
}

html.compact-mode .read-section > p,
html.compact-mode .read-section > .empty-text,
html.compact-mode .read-section > .tag-list,
html.compact-mode .read-section > .permission-chip-list,
html.compact-mode .read-section > .read-details-grid {
    min-width: 0;
}

html.compact-mode .read-section > p {
    color: var(--text);
    margin: 0;
    white-space: pre-line;
}

html.compact-mode .read-section > .permission-chip-list {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    margin-top: 2px;
}

html.compact-mode .permission-chip-list span {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    white-space: nowrap;
}

html.compact-mode .read-section:has(> .read-details-grid) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-top: 4px;
}

html.compact-mode .read-section:has(> .read-details-grid) > h4 {
    color: var(--accent);
    font-size: 13px;
    margin-top: 2px;
}

html.compact-mode .read-section:has(> .read-details-grid) > h4::after {
    content: "";
}

html.compact-mode .read-section:has(> .read-details-grid) > .read-details-grid {
    grid-column: 1 / -1;
}

html.compact-mode .read-section:has(> .profile-link-list),
html.compact-mode .read-section:has(> .section-heading-row) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 4px;
}

html.compact-mode .read-section:has(> .profile-link-list) > .section-heading-row,
html.compact-mode .read-section:has(> .section-heading-row) > .section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

html.compact-mode .read-section:has(> .profile-link-list) h4,
html.compact-mode .read-section:has(> .section-heading-row) h4 {
    color: var(--accent);
    font-size: 13px;
}

html.compact-mode .read-section:has(> .profile-link-list) h4::after,
html.compact-mode .read-section:has(> .section-heading-row) h4::after {
    content: "";
}

html.compact-mode .profile-link-list {
    gap: 0;
    border-top: 1px solid var(--line);
}

html.compact-mode .profile-link-list .worker-card {
    border-bottom: 1px solid var(--line);
}

html.compact-mode .tag-list {
    display: grid;
    gap: 2px;
}

html.compact-mode .tag-list span {
    display: block;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    padding: 0;
    font-size: 14px;
    font-weight: 500;
}

html.compact-mode .profile-image-editor {
    gap: 12px;
    padding-bottom: 12px;
}

html.compact-mode .planning-editor {
    gap: 10px;
}

html.compact-mode .planning-total strong {
    font-size: 16px;
}

html.compact-mode .planning-board {
    padding: 10px;
}

html.compact-mode .planning-section {
    gap: 8px;
}

html.compact-mode .planning-section-heading {
    padding: 7px 9px;
}

html.compact-mode .planning-day {
    gap: 6px;
}

html.compact-mode .planning-day-header,
html.compact-mode .planning-item {
    gap: 8px;
}

html.compact-mode .planning-item {
    padding: 7px 8px 7px 40px;
}

html.compact-mode .planning-day-header {
    padding-left: 40px;
}

html.compact-mode .planning-order-badge {
    left: 7px;
    top: 7px;
    min-width: 20px;
    padding: 3px 4px;
    font-size: 10px;
}

html.compact-mode .planning-item dl,
html.compact-mode .planning-item-details {
    gap: 4px;
}

html.compact-mode .planning-item dl > div,
html.compact-mode .planning-item-details > div {
    min-width: 78px;
    padding: 4px 6px;
}

html.compact-mode .planning-item dd {
    font-size: 12px;
}

html.compact-mode .planning-notes {
    gap: 10px;
    margin-top: 10px;
}

html.compact-mode .planning-notes > :not(.panel-header) {
    margin-left: 8px;
    margin-right: 8px;
}

html.compact-mode .planning-notes > :last-child {
    margin-bottom: 8px;
}

html.compact-mode .planning-note {
    gap: 8px;
}

html.compact-mode .empty-list {
    padding: 12px;
}

html.compact-mode .system-registry-list-head {
    display: grid;
    gap: 10px;
    min-height: 30px;
    padding: 7px 12px;
}

html.compact-mode .system-registry-module-head {
    grid-template-columns: minmax(220px, 1fr) minmax(96px, max-content) minmax(76px, max-content) minmax(66px, max-content);
}

html.compact-mode .system-registry-simple-head {
    grid-template-columns: minmax(220px, 1fr) minmax(92px, max-content);
}

html.compact-mode .system-registry-list-head > span,
html.compact-mode .system-registry-list-head > span:first-child,
html.compact-mode .system-registry-list-head > span:last-child,
html.compact-mode .system-registry-module-head > span:first-child,
html.compact-mode .system-registry-module-head > span:nth-child(2),
html.compact-mode .system-registry-module-head > span:nth-child(3),
html.compact-mode .system-registry-module-head > span:nth-child(4) {
    min-width: 0;
    max-width: none;
}

html.compact-mode .system-registry-row,
html.compact-mode .system-registry-module-row,
html.compact-mode .system-registry-table-row {
    display: grid;
    align-items: start;
    gap: 5px 10px;
    min-height: max-content;
    height: auto;
    padding: 8px 12px;
}

html.compact-mode .system-registry-module-row {
    grid-template-columns: minmax(220px, 1fr) minmax(96px, max-content) minmax(76px, max-content) minmax(66px, max-content);
}

html.compact-mode .system-registry-table-row {
    grid-template-columns: minmax(220px, 1fr) minmax(92px, max-content);
}

html.compact-mode .system-registry-name-cell,
html.compact-mode .system-registry-table-row .system-registry-name-cell,
html.compact-mode .system-registry-module-row .system-registry-name-cell {
    display: block;
    min-width: 0;
    max-width: none;
}

html.compact-mode .system-registry-key-cell,
html.compact-mode .system-registry-table-row .system-registry-key-cell,
html.compact-mode .system-registry-module-row .system-registry-key-cell {
    min-width: 0;
    max-width: min(220px, 34vw);
    margin-top: 1px;
    overflow-wrap: anywhere;
    white-space: normal;
}

html.compact-mode .system-registry-meta-cell,
html.compact-mode .system-registry-status-cell {
    min-width: 0;
}

html.compact-mode .system-registry-table-row strong,
html.compact-mode .system-registry-table-row small {
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

html.compact-mode .system-registry-table-row strong {
    line-height: 1.18;
}

html.compact-mode .system-registry-table-row small {
    margin-top: 2px;
    line-height: 1.28;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        height: auto;
        max-height: 100vh;
        z-index: 5;
        gap: 14px;
        padding: 14px;
    }

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

    .nav-item {
        justify-content: center;
    }

    .nav-item span:last-child,
    .sidebar-footer {
        display: none;
    }

    .content {
        padding: 20px;
    }

    .function-profile-summary {
        grid-template-columns: 1fr;
    }

    .function-worker-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
    }

    .function-worker-link {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .profile-course-instance-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .profile-course-date,
    .profile-course-main {
        grid-column: 1 / -1;
    }

    .application-header,
    .top-user-settings {
        flex-wrap: wrap;
    }

    .metric-grid,
    .workspace-grid,
    .customization-layout,
    .instance-workspace,
    .hrm-layout,
    .hrm-layout.worker-list-collapsed,
    .module-row {
        grid-template-columns: 1fr;
    }

    .worker-list-panel.collapsed .panel-header {
        align-items: center;
        flex-direction: row;
    }

    .worker-list-panel.collapsed .row-actions {
        flex-direction: row;
    }

    .collapsed-list-summary {
        align-items: center;
        grid-template-columns: auto minmax(0, 1fr) auto;
        justify-items: start;
        text-align: left;
    }

    .hrm-layout {
        height: auto;
        min-height: 0;
    }

    .worker-list-panel,
    .worker-detail-panel,
    .hrm-layout > .panel:not(.worker-list-panel),
    .course-card-workspace,
    .course-card-workspace > .panel {
        max-height: none;
        overflow: visible;
    }

    .worker-detail-panel > :not(.panel-header),
    .hrm-layout > .panel:not(.worker-list-panel) > :not(.panel-header),
    .course-card-workspace > .panel > :not(.panel-header) {
        overflow: visible;
    }

    .smart-list-items,
    .worker-list-panel .worker-list,
    .study-program-list {
        max-height: min(560px, calc(100vh - 220px));
    }
}

.enrollment-days-section {
    display: grid;
    gap: 10px;
}

.enrollment-day-list,
.attendance-day-list {
    display: grid;
    gap: 10px;
}

.enrollment-day-row {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    box-shadow: var(--section-shadow-soft);
    padding: 8px 10px;
}

.enrollment-day-row strong,
.enrollment-day-row small {
    display: block;
}

.day-move-panel {
    display: grid;
    gap: 8px;
    border-left: 3px solid var(--teal);
    background: var(--surface-soft);
    padding: 10px;
}

.enrollment-parts-section,
.enrollment-part-list {
    display: grid;
    gap: 10px;
}

.enrollment-part-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    box-shadow: var(--section-shadow-soft);
    padding: 9px 10px;
}

.enrollment-part-row small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}

.split-enrollment-dialog {
    width: min(900px, calc(100vw - 32px));
    max-height: 86vh;
    overflow: auto;
}

.split-enrollment-controls {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(120px, 180px) auto;
    align-items: end;
    gap: 10px;
    padding: 12px;
}

.split-enrollment-controls label {
    display: grid;
    gap: 4px;
}

.split-day-selection {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
}

.split-day-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    padding: 8px;
}

.split-day-option.disabled {
    opacity: 0.5;
}

.split-day-option strong,
.split-day-option small {
    display: block;
}

.split-day-option small {
    color: var(--muted);
}

.enrolment-profile-picker-dialog {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: min(760px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    width: min(940px, calc(100vw - 32px));
}

.enrolment-profile-picker-filters {
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 4px;
    display: grid;
    gap: 10px 12px;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    padding: 12px 14px;
}

.enrolment-profile-picker-filters label {
    display: grid;
    gap: 4px;
}

.enrolment-profile-picker-filters label span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.enrolment-profile-picker-filters input,
.enrolment-profile-picker-filters select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    min-height: 34px;
    padding: 7px 9px;
    width: 100%;
}

.enrolment-profile-picker-filters input:focus,
.enrolment-profile-picker-filters select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(0, 129, 138, 0.14);
    outline: 0;
}

.enrolment-profile-picker-list {
    border: 1px solid var(--line);
    border-radius: 4px;
    display: grid;
    align-content: start;
    min-height: 0;
    overflow: auto;
}

.enrolment-profile-picker-row {
    align-items: center;
    background: var(--surface);
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 9px 12px;
    text-align: left;
}

.enrolment-profile-picker-row:hover,
.enrolment-profile-picker-row.selected-row {
    background: var(--accent-soft);
}

.enrolment-profile-picker-row:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.enrolment-profile-picker-row strong,
.enrolment-profile-picker-row small {
    display: block;
}

.enrolment-profile-picker-row small {
    color: var(--muted);
    margin-top: 2px;
}

.enrolment-profile-picker-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.enrolment-profile-picker-meta small {
    flex-basis: 100%;
    text-align: right;
}

.bulk-picker-dialog {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    height: min(760px, calc(100vh - 48px));
    width: min(980px, calc(100vw - 32px));
}

.bulk-picker-filters {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.bulk-picker-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.bulk-required-filter {
    background: linear-gradient(135deg, rgba(255, 247, 226, 0.88), rgba(236, 248, 249, 0.78));
    border: 1px solid rgba(192, 133, 22, 0.28);
    border-radius: 6px;
    padding: 6px;
}

.bulk-source-required {
    align-self: start;
    background: linear-gradient(135deg, rgba(255, 247, 226, 0.94), rgba(236, 248, 249, 0.78));
    border: 1px solid rgba(192, 133, 22, 0.28);
    border-left: 4px solid var(--danger);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    margin: 12px;
    padding: 12px 14px;
}

.bulk-source-required strong {
    color: var(--heading);
}

.bulk-source-required span {
    color: var(--muted);
}

.bulk-picker-note {
    color: var(--muted);
    font-size: 0.86rem;
}

.bulk-picker-row {
    grid-template-columns: auto minmax(260px, 1fr) minmax(220px, max-content);
}

.bulk-picker-row input[type="checkbox"],
.bulk-select-all input[type="checkbox"] {
    height: 16px;
    min-height: 16px;
    width: 16px;
}

.bulk-picker-row.disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.relation-lookup-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.relation-lookup-label {
    color: var(--heading);
    font-weight: 700;
}

.relation-lookup-control {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.relation-lookup-button {
    flex: 1 1 auto;
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.relation-selected-item {
    align-items: center;
    background: rgba(225, 239, 241, 0.82);
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: 8px;
    display: inline-flex;
    gap: 8px;
    max-width: min(100%, 360px);
    min-height: 34px;
    min-width: 0;
    padding: 5px 6px 5px 9px;
}

.relation-selected-text {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.relation-selected-text strong,
.relation-selected-text small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-selected-text small {
    color: var(--muted);
    font-size: 0.76rem;
}

.relation-selected-remove {
    flex: 0 0 auto;
}

.relation-picked-badge {
    background: rgba(0, 128, 138, 0.12);
    color: var(--teal-dark);
}

.relation-read-link {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
}

.relation-read-link > span,
.relation-read-link > small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-read-link > small {
    color: var(--muted);
    font-size: 0.76rem;
}

.lookup-display-settings {
    background: rgba(225, 239, 241, 0.58);
    border-color: rgba(0, 128, 138, 0.22);
    display: grid;
    gap: 8px 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lookup-display-settings label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.lookup-display-settings select {
    min-width: 0;
    width: 100%;
}

@media (max-width: 760px) {
    .field-behavior-settings,
    .lookup-display-settings {
        grid-template-columns: 1fr;
    }
}

.relation-lookup-dialog {
    height: min(720px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    width: min(920px, calc(100vw - 32px));
}

.relation-lookup-filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.relation-more-filters-button {
    align-self: end;
    min-height: 34px;
}

.relation-advanced-filter-group {
    background: rgba(225, 239, 241, 0.72);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: 8px 12px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    padding: 10px;
}

.relation-advanced-filter-group > strong {
    color: var(--heading);
    font-size: 0.82rem;
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .enrolment-profile-picker-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .relation-advanced-filter-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .enrolment-profile-picker-filters,
    .enrolment-profile-picker-row,
    .relation-advanced-filter-group {
        grid-template-columns: 1fr;
    }

    .enrolment-profile-picker-meta {
        justify-content: flex-start;
    }

    .enrolment-profile-picker-meta small {
        text-align: left;
    }
}

.bulk-enrolments-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: calc(100vh - 170px);
    margin-bottom: 12px;
    min-height: 520px;
    overflow: hidden;
}

.bulk-enrolments-controls {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px;
    min-height: 0;
    padding: 8px 14px 10px;
}

.bulk-workflow-column {
    display: grid;
    gap: 8px;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.bulk-enrolments-controls label,
.bulk-select-all {
    display: grid;
    gap: 4px;
}

.bulk-enrolments-mode {
    padding: 8px 14px 4px;
}

.bulk-enrolments-mode label {
    display: grid;
    gap: 4px;
}

.bulk-mode-choice {
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 247, 226, 0.86), rgba(229, 245, 247, 0.74));
    border: 1px solid rgba(192, 133, 22, 0.24);
    border-left: 4px solid var(--danger);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(31, 49, 43, 0.05);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 12px;
}

.bulk-mode-choice > span {
    color: var(--heading);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bulk-mode-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bulk-mode-option {
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    display: flex !important;
    gap: 7px !important;
    min-width: 0;
    padding: 6px 11px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.bulk-mode-option:hover {
    background: rgba(235, 247, 248, 0.88);
    border-color: rgba(0, 116, 130, 0.28);
}

.bulk-mode-option.selected {
    background: linear-gradient(135deg, rgba(225, 245, 247, 0.92), rgba(255, 250, 239, 0.86));
    border-color: rgba(0, 116, 130, 0.46);
    box-shadow: inset 0 0 0 1px rgba(0, 116, 130, 0.18);
}

.bulk-mode-option input {
    flex: 0 0 auto;
    margin: 0;
}

.bulk-mode-option strong {
    color: var(--heading);
    line-height: 1.2;
}

.bulk-enrolments-mode small {
    color: var(--muted);
    line-height: 1.35;
    padding-bottom: 8px;
}

.bulk-workflow-card > span {
    color: var(--heading);
    font-family: var(--font-heading);
    font-size: 1.03rem;
    font-weight: 700;
    line-height: 1.25;
    min-height: 20px;
}

.bulk-workflow-card {
    display: grid;
    gap: 8px;
    grid-template-rows: 22px 56px;
}

.bulk-workflow-card .linked-picker-value {
    align-self: stretch;
    display: grid;
    grid-template-columns: max-content max-content;
    height: 56px;
    justify-content: space-between;
    min-height: 56px;
}

.bulk-workflow-card .linked-picker-value .row-actions {
    justify-content: flex-end;
}

.bulk-enrolments-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px 0;
}

.bulk-enrolments-summary span {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 700;
    padding: 4px 10px;
}

.bulk-enrolments-panel > .form-actions {
    border-top: 1px solid var(--line);
    margin-top: 8px;
    padding: 14px;
}

.bulk-enrolments-selection {
    display: grid;
    gap: 8px;
    padding: 0 14px 12px;
}

.bulk-select-all {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    width: fit-content;
}

.bulk-enrolments-list {
    align-content: start;
    display: grid;
    max-height: none;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
}

.bulk-selected-list {
    max-height: none;
}

.bulk-enrolment-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) max-content max-content max-content;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
}

.bulk-target-row {
    grid-template-columns: minmax(220px, 1fr) max-content max-content max-content;
}

.bulk-enrolment-row:last-child {
    border-bottom: 0;
}

.bulk-enrolment-row:hover {
    background: var(--surface-soft);
}

.bulk-enrolment-row strong,
.bulk-enrolment-row small {
    display: block;
}

.bulk-enrolment-row small {
    color: var(--muted);
}

.bulk-enrolments-note {
    border-top: 1px solid var(--line);
    color: var(--muted);
    padding: 10px 14px 0;
}

.attendance-workspace {
    display: grid;
    gap: 12px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(228, 242, 243, 0.64), rgba(255, 251, 243, 0.82) 58%, rgba(255, 255, 255, 0.94));
    border-left: 4px solid var(--teal);
    box-shadow: var(--section-shadow-soft);
}

.attendance-workspace-header {
    background: linear-gradient(105deg, rgba(211, 235, 238, 0.96), rgba(248, 244, 235, 0.9));
}

.attendance-summary-chip {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border: 1px solid rgba(0, 116, 130, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    white-space: nowrap;
}

.attendance-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 340px) minmax(220px, 340px) minmax(170px, 240px) auto;
    align-items: end;
    justify-content: start;
    gap: 10px;
    margin: 2px 14px 0;
    border: 1px solid rgba(0, 116, 130, 0.18);
    border-left: 3px solid rgba(0, 116, 130, 0.7);
    border-radius: 6px;
    background: linear-gradient(120deg, rgba(241, 249, 247, 0.94), rgba(255, 250, 239, 0.9));
    box-shadow: 0 4px 12px rgba(42, 70, 64, 0.06);
    padding: 12px 14px;
}

.attendance-filter-bar label {
    display: grid;
    gap: 4px;
}

.attendance-filter-bar input,
.attendance-filter-bar select {
    width: 100%;
    min-height: 34px;
}

.attendance-filter-bar .secondary-action {
    min-height: 34px;
    white-space: nowrap;
}

.attendance-matrix-scroll {
    max-width: 100%;
    overflow-x: auto;
    margin: 0 14px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--section-shadow-soft);
}

.attendance-matrix {
    display: grid;
    min-width: max-content;
    width: max-content;
}

.attendance-matrix-corner,
.attendance-matrix-day,
.attendance-matrix-participant,
.attendance-matrix-cell {
    min-height: 54px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 10px;
}

.attendance-matrix-corner,
.attendance-matrix-day {
    background: linear-gradient(180deg, rgba(220, 237, 239, 0.96), rgba(241, 247, 246, 0.96));
    color: var(--text);
    font-weight: 700;
}

.attendance-matrix-corner,
.attendance-matrix-participant {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 4px 0 8px rgba(42, 70, 64, 0.06);
}

.attendance-matrix-participant {
    background: linear-gradient(105deg, rgba(242, 249, 248, 0.98), rgba(255, 252, 246, 0.96));
}

.attendance-matrix-corner {
    z-index: 3;
}

.attendance-matrix-day {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 6px;
}

.attendance-matrix-day small,
.attendance-matrix-day span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.attendance-matrix-day span {
    grid-column: 1 / -1;
}

.attendance-matrix-day .icon-action {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.attendance-matrix-participant {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.attendance-matrix-participant .subtle {
    color: var(--muted);
    font-size: 11px;
}

.attendance-matrix-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 249, 0.88));
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.attendance-matrix-cell:hover {
    background: rgba(229, 244, 245, 0.72);
    box-shadow: inset 0 0 0 1px rgba(0, 116, 130, 0.1);
}

.attendance-matrix-cell select {
    width: min(100%, 150px);
    min-width: 128px;
    min-height: 32px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    box-shadow: var(--section-shadow-soft);
    padding: 4px 28px 4px 8px;
}

.attendance-matrix-cell select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(36, 139, 128, 0.15);
    outline: none;
}

.attendance-matrix-cell .empty-value,
.attendance-matrix-cell .status {
    margin-inline: auto;
}

.attendance-day {
    border-top: 1px solid var(--line);
}

.attendance-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--surface-soft);
    padding: 9px 12px;
}

.attendance-day-header > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.attendance-table-head,
.attendance-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) minmax(140px, 0.5fr);
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
}

.attendance-table-head {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.attendance-row {
    border-top: 1px solid var(--line);
}

.attendance-row > span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

html.compact-mode .enrollment-day-row,
html.compact-mode .enrollment-part-row,
html.compact-mode .attendance-table-head,
html.compact-mode .attendance-row {
    padding-top: 4px;
    padding-bottom: 4px;
}

html.compact-mode .attendance-filter-bar input,
html.compact-mode .attendance-filter-bar select,
html.compact-mode .attendance-filter-bar .secondary-action {
    min-height: 30px;
}

@media (max-width: 900px) {
    .card-two-column-layout {
        grid-template-columns: 1fr;
    }

    .attendance-filter-bar {
        grid-template-columns: repeat(2, minmax(220px, 340px));
    }

    .planning-copy-panel {
        align-items: stretch;
        grid-template-columns: 1fr;
        max-width: 680px;
    }

    .planning-copy-panel .form-actions {
        justify-content: flex-start;
    }

    .planning-form.planning-form-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 680px;
    }

    .planning-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .planning-item .row-actions {
        justify-content: flex-start;
    }

    .planning-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.attendance-matrix-cell select.status-enabled {
    border-color: rgba(0, 116, 130, 0.28);
    background: #e5f2f1;
    color: #006b72;
}

.attendance-matrix-cell select.status-full,
.attendance-matrix-cell select.status-disabled {
    border-color: rgba(193, 2, 82, 0.2);
    background: #fff1f4;
    color: var(--danger);
}

.attendance-matrix-cell select.status-planned {
    border-color: rgba(171, 54, 69, 0.18);
    background: #f6eedc;
    color: var(--warning);
}

.attendance-matrix-cell select.status-open {
    border-color: rgba(75, 79, 80, 0.16);
    background: #eef3f2;
    color: var(--teal-dark);
}

@media (max-width: 620px) {
    .customization-entity-filters {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .customization-entity-filters label,
    .customization-entity-filters .entity-search-filter {
        max-width: none;
    }

    .customization-entity-list {
        max-height: 420px;
    }

    .customization-entity-list .table-row {
        gap: 8px;
    }

    .entity-row-meta {
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    .application-header {
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-hero {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .workspace-add-form .field-wide,
    .workspace-widget-wide {
        grid-column: auto;
    }

    .workspace-size-picker {
        width: 100%;
        margin-left: 0;
    }

    .top-user-settings {
        margin-left: 0;
    }

    .top-user-profile {
        flex: 1 1 190px;
    }

    .resource-booking-highlight,
    .resource-booking-details {
        grid-template-columns: 1fr;
    }

    .resource-calendar-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .resource-month-navigation {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .resource-month-navigation label {
        flex: 1 1 170px;
    }

    .planning-form.planning-form-compact {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .planning-form-compact .field-wide {
        grid-column: auto;
    }

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

    .page-header::after {
        display: none;
    }

    .page-header h1 {
        font-size: 26px;
    }

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

    .table-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .row-actions {
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

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

    .profile-image-editor {
        align-items: flex-start;
        flex-direction: column;
    }

    .worker-read-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .planning-editor-header {
        align-items: stretch;
        flex-direction: column;
    }

    .permission-transfer {
        grid-template-columns: 1fr;
    }

    .permission-transfer-actions {
        grid-template-columns: repeat(2, auto);
        justify-content: center;
    }

    .worker-form,
    .option-editor,
    .planning-form,
    .planning-day-header,
    .planning-item,
    .custom-field-grid,
    .read-details-grid,
    .rights-grid,
    .filter-row,
    .document-card-panel .link-editor,
    .document-card-panel .document-form .form-grid,
    .document-card-panel .initial-document-upload {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .enrollment-day-row,
    .enrollment-part-row,
    .attendance-table-head,
    .attendance-row,
    .attendance-filter-bar {
        grid-template-columns: 1fr;
    }

    .split-enrollment-controls,
    .split-day-selection,
    .bulk-enrolments-controls,
    .bulk-enrolment-row {
        grid-template-columns: 1fr;
    }

    .attendance-day-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 1180px) {
    .panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .panel-header .row-actions {
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .panel-header .primary-action,
    .panel-header .secondary-action,
    .panel-header .icon-action,
    .panel-header .tab-button {
        white-space: nowrap;
    }

    .instance-header-actions .panel-action-context {
        margin-bottom: 2px;
    }
}

@media (max-width: 760px) {
    .instance-header-actions .panel-action-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    }

    .instance-header-actions .panel-action-strip > button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 760px) {
    .bulk-enrolments-panel {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .bulk-enrolments-mode,
    .bulk-enrolments-controls {
        grid-template-columns: 1fr;
    }

    .bulk-enrolments-controls {
        flex: 0 0 auto;
    }

    .bulk-workflow-card .linked-picker-value {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .bulk-workflow-card .linked-picker-value .row-actions {
        justify-content: flex-start;
    }
}

/* Fields module entity list: allow long entity descriptions to wrap and grow rows. */
.customization-entity-list {
    align-items: start;
    display: flex;
    flex-direction: column;
    grid-auto-rows: auto;
}

.customization-entity-row,
html.compact-mode .customization-entity-row {
    align-items: start;
    background: var(--surface);
    border: 0;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
    color: var(--text);
    cursor: pointer;
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    font: inherit;
    height: auto;
    min-height: max-content;
    overflow: visible;
    padding: 8px 10px;
    text-align: left;
    white-space: normal;
    width: 100%;
}

.customization-entity-row:hover:not(.selected-row) {
    background: rgba(228, 238, 239, 0.72);
}

.customization-entity-row.selected-row {
    background: linear-gradient(90deg, #b7dfe4 0%, #d9eff1 70%, #edf7f8 100%);
    border-left: 8px solid #007c89;
    box-shadow:
        inset 0 0 0 2px rgba(0, 124, 137, 0.48),
        0 6px 16px rgba(31, 49, 43, 0.16);
    padding-left: 4px;
    position: relative;
    z-index: 1;
}

.customization-entity-row.selected-row::before {
    align-items: center;
    background: #00606c;
    border-radius: 999px;
    color: white;
    content: "✓";
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 900;
    height: 18px;
    justify-content: center;
    margin-top: 2px;
    width: 18px;
}

.customization-entity-row:focus-visible {
    outline: 3px solid rgba(180, 46, 71, 0.42);
    outline-offset: -3px;
}

.customization-entity-row.selected-row:focus-visible {
    background: linear-gradient(90deg, #a6d4db 0%, #d0eaed 70%, #e9f5f6 100%);
    outline: 4px solid #b42e47;
}

.customization-entity-row.selected-row strong {
    color: #123f3b;
    font-weight: 900;
}

.customization-entity-row.selected-row small {
    color: var(--ink);
}

.customization-entity-row.selected-row .field-badge {
    box-shadow: 0 0 0 1px rgba(0, 128, 138, 0.12);
}

.customization-entity-row:last-child {
    border-bottom: 0;
}

.customization-entity-row-text,
html.compact-mode .customization-entity-row-text {
    display: block;
    flex: 1 1 auto;
    margin-right: 0;
    min-width: 0;
    overflow: visible;
}

.customization-entity-row-text strong,
.customization-entity-row-text small,
html.compact-mode .customization-entity-row-text strong,
html.compact-mode .customization-entity-row-text small {
    display: block;
    height: auto;
    line-height: 1.32;
    max-height: none;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.customization-entity-row-text small {
    color: var(--muted);
    margin-top: 2px;
}

.customization-entity-row > .entity-row-meta,
html.compact-mode .customization-entity-row > .entity-row-meta {
    flex: 0 0 auto;
    float: none;
    margin-left: 12px;
    margin-top: 0;
}

.customization-entity-list .table-row,
html.compact-mode .customization-entity-list .table-row {
    align-items: start !important;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 12px;
    row-gap: 4px;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 10px !important;
    white-space: normal !important;
}

.customization-entity-list .table-row > span:first-child,
html.compact-mode .customization-entity-list .table-row > span:first-child {
    display: block !important;
    min-width: 0;
    overflow: visible;
}

.customization-entity-list .table-row strong,
.customization-entity-list .table-row small,
html.compact-mode .customization-entity-list .table-row strong,
html.compact-mode .customization-entity-list .table-row small {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

.customization-entity-list .entity-row-meta,
html.compact-mode .customization-entity-list .entity-row-meta {
    align-self: start;
    max-width: 210px;
    min-width: 0;
}

@media (max-width: 900px) {
    .customization-entity-list .table-row,
    html.compact-mode .customization-entity-list .table-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .customization-entity-row-text,
    html.compact-mode .customization-entity-row-text {
        margin-right: 0;
    }

    .customization-entity-row > .entity-row-meta,
    html.compact-mode .customization-entity-row > .entity-row-meta {
        float: none;
        margin-left: 0;
        margin-top: 6px;
    }

    .customization-entity-list .entity-row-meta,
    html.compact-mode .customization-entity-list .entity-row-meta {
        justify-content: flex-start;
        max-width: none;
        width: 100%;
    }
}

/* Fields module final layout pass: stable two-column workspace and no row overflow. */
.customization-workspace {
    grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.55fr);
}

.customization-fields-panel {
    overflow: visible;
}

.customization-fields-panel .field-order-list {
    max-height: none;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
}

.customization-fields-panel .field-order-row {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    column-gap: 12px;
    row-gap: 6px;
    grid-template-columns: 40px minmax(150px, 1fr) minmax(0, 560px);
    min-width: 0;
    overflow: hidden;
}

.customization-fields-panel .field-order-controls {
    align-items: center;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr;
    justify-items: center;
    margin: 0;
    width: 32px;
}

.customization-fields-panel .field-order-action {
    height: 26px;
    padding: 0;
    width: 26px;
}

.customization-fields-panel .field-order-main {
    min-width: 0;
}

.customization-fields-panel .field-order-meta {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(76px, max-content) minmax(74px, max-content) minmax(90px, 1fr) minmax(0, 92px) minmax(154px, max-content);
    justify-content: end;
    justify-self: stretch;
    min-width: 0;
}

.customization-fields-panel .field-order-visible {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.customization-fields-panel .field-order-required,
.customization-fields-panel .field-order-filter {
    min-width: 0;
}

.customization-fields-panel .field-order-type {
    min-width: 0;
    overflow-wrap: anywhere;
}

.customization-fields-panel .field-order-actions {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: flex-end;
    justify-self: end;
    min-width: 154px;
}

.customization-fields-panel .field-order-edit,
.customization-fields-panel .field-order-actions .danger-action {
    min-height: 32px;
    padding: 6px 10px;
    width: auto;
}

.customization-fields-panel .field-order-actions:empty {
    display: none;
}

@media (max-width: 1180px) {
    .customization-workspace {
        grid-template-columns: 1fr;
    }

    .customization-fields-panel .field-order-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .customization-fields-panel .field-order-meta {
        grid-column: 2;
        grid-template-columns: repeat(3, minmax(0, max-content));
        justify-content: start;
    }

    .customization-fields-panel .field-order-actions {
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .customization-fields-panel .field-order-row {
        grid-template-columns: 1fr;
    }

    .customization-fields-panel .field-order-controls {
        display: inline-flex;
        width: auto;
    }

    .customization-fields-panel .field-order-meta {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .customization-fields-panel .field-order-edit,
    .customization-fields-panel .field-order-actions .danger-action {
        justify-self: start;
    }
}

/* Fields module viewport fit: use the available screen height before scrolling lists. */
.customization-workspace {
    align-items: stretch;
    height: calc(100vh - 170px);
    min-height: 460px;
}

.customization-entity-panel,
.customization-fields-panel {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

.customization-entity-panel > .panel-header,
.customization-fields-panel > .panel-header,
.customization-entity-filters,
.customization-fields-panel > .validation-summary {
    flex: 0 0 auto;
}

.customization-entity-panel .customization-entity-list,
.customization-fields-panel .field-order-list {
    flex: 1 1 auto;
    max-height: none !important;
    min-height: 0;
    overflow-y: auto;
}

.customization-entity-panel .customization-entity-list {
    overflow-x: hidden;
}

.customization-fields-panel .field-order-list {
    overflow-x: auto;
}

.customization-fields-panel .field-order-list {
    align-content: start;
    display: grid;
    grid-auto-rows: max-content;
}

@media (max-width: 1180px) {
    .customization-workspace {
        height: auto;
        min-height: 0;
    }

    .customization-entity-panel,
    .customization-fields-panel {
        max-height: calc(100vh - 145px);
    }
}

/* Entity Builder uses the Fields page shell, but its field rows do not have
   manual ordering controls. Keep the same visual language while giving the
   field label, type, and actions their own stable columns. */
.entity-builder-workspace {
    grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.55fr);
}

.entity-builder-workspace .customization-entity-panel .smart-list-panel {
    border: 0;
    box-shadow: none;
    min-height: 0;
}

.entity-builder-workspace .customization-entity-panel .smart-list-items {
    flex: 1 1 auto;
    min-height: 0;
}

.entity-builder-workspace .smart-list-item {
    border-left: 3px solid transparent;
}

.entity-builder-workspace .smart-list-item.selected {
    background: linear-gradient(90deg, rgba(211, 235, 238, 0.96), rgba(246, 251, 250, 0.98));
    border-color: #008c95;
    box-shadow: inset 0 0 0 1px rgba(0, 140, 149, 0.24);
}

.entity-builder-workspace .builder-fields-panel {
    min-width: 0;
}

.entity-builder-workspace .builder-selected-entity-summary {
    background: linear-gradient(135deg, rgba(224, 241, 244, 0.86), rgba(255, 252, 245, 0.92));
    border-bottom: 1px solid #d8cab5;
    display: grid;
    gap: 4px;
    padding: 8px 12px;
}

.entity-builder-workspace .builder-selected-entity-summary > div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.entity-builder-workspace .builder-selected-entity-summary p {
    color: #33423f;
    margin: 0;
}

.entity-builder-workspace .builder-fields-panel .field-order-list {
    display: block;
    overflow-x: hidden;
}

.entity-builder-workspace .builder-fields-panel .field-order-row {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(250px, max-content);
    min-height: 52px;
    padding: 10px 12px;
}

.entity-builder-workspace .builder-fields-panel .field-order-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.entity-builder-workspace .builder-fields-panel .field-order-main strong,
.entity-builder-workspace .builder-fields-panel .field-order-main small {
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
}

.entity-builder-workspace .builder-fields-panel .field-order-meta {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(84px, max-content) minmax(112px, max-content) minmax(118px, max-content);
    justify-content: end;
    justify-self: end;
    min-width: 0;
}

.entity-builder-workspace .builder-fields-panel .field-order-required {
    min-width: 84px;
}

.entity-builder-workspace .builder-fields-panel .field-order-type {
    min-width: 112px;
}

.entity-builder-workspace .builder-fields-panel .field-order-actions {
    min-width: 118px;
}

@media (max-width: 1180px) {
    .entity-builder-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .entity-builder-workspace .builder-fields-panel .field-order-row {
        grid-template-columns: 1fr;
    }

    .entity-builder-workspace .builder-fields-panel .field-order-meta {
        grid-template-columns: repeat(3, minmax(0, max-content));
        justify-content: start;
        justify-self: start;
    }
}

.task-takeover-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: min(820px, calc(100vh - 40px));
    max-height: calc(100vh - 40px);
    width: min(900px, calc(100vw - 40px));
}

.task-takeover-overlay {
    align-items: center;
    overflow: hidden;
    padding: 20px;
}

.task-takeover-content {
    align-content: start;
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow: auto;
    padding: 14px 14px 26px;
    scrollbar-gutter: stable;
}

.task-takeover-toolbar {
    align-items: end;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 420px) auto;
    justify-content: space-between;
    padding: 12px;
}

.task-takeover-toolbar label {
    display: grid;
    gap: 4px;
}

.task-takeover-toolbar label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.task-takeover-toolbar select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    min-height: 34px;
    padding: 6px 8px;
}

.task-takeover-summary {
    align-items: center;
    background: rgba(0, 116, 130, 0.10);
    border: 1px solid rgba(0, 116, 130, 0.20);
    border-radius: 999px;
    color: var(--teal-dark);
    display: inline-flex;
    gap: 6px;
    justify-self: end;
    padding: 7px 11px;
}

.task-takeover-summary strong {
    font-family: RobotoSlab, Georgia, serif;
    font-size: 18px;
}

.task-takeover-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    overflow: visible;
}

.task-takeover-group-header {
    align-items: center;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
}

.task-takeover-group-header strong {
    color: var(--teal-dark);
    font-size: 16px;
}

.task-takeover-group-header span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.task-takeover-course,
.task-takeover-instance,
.task-takeover-items {
    display: grid;
}

.task-takeover-node {
    align-items: flex-start;
    display: grid;
    gap: 8px;
    grid-template-columns: 28px minmax(0, 1fr);
}

.task-takeover-course-row {
    align-items: flex-start;
}

.task-takeover-expand {
    align-items: center;
    background: rgba(0, 116, 130, 0.08);
    border: 1px solid rgba(0, 116, 130, 0.18);
    border-radius: 999px;
    color: var(--teal-dark);
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    font-weight: 800;
    height: 24px;
    justify-content: center;
    line-height: 1;
    margin-top: 0;
    padding: 0;
    width: 24px;
}

.task-takeover-expand:hover {
    background: rgba(0, 116, 130, 0.15);
    border-color: rgba(0, 116, 130, 0.35);
}

.task-takeover-course {
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
}

.task-takeover-course:last-child {
    border-bottom: 0;
    padding-bottom: 18px;
}

.task-takeover-instance {
    border-left: 2px solid rgba(0, 116, 130, 0.18);
    margin-left: 18px;
    margin-top: 8px;
    padding-left: 10px;
}

.task-takeover-items {
    gap: 4px;
    margin: 6px 0 8px 24px;
}

.task-takeover-check,
.task-takeover-item {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    line-height: 1.25;
    margin: 0;
    padding: 4px 0;
}

.task-takeover-check input,
.task-takeover-item input {
    margin-top: 2px;
}

.task-takeover-check span,
.task-takeover-item span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.task-takeover-check strong,
.task-takeover-item strong {
    color: var(--teal-dark);
}

.task-takeover-check small,
.task-takeover-item small {
    color: var(--muted);
}

.task-takeover-actions {
    border-top: 1px solid var(--line);
    padding: 12px 14px;
}

@media (max-width: 700px) {
    .task-takeover-toolbar {
        grid-template-columns: 1fr;
    }

    .task-takeover-summary {
        justify-self: start;
    }
}

.responsibility-team-card {
    background: linear-gradient(135deg, rgba(224, 240, 241, 0.86), rgba(255, 252, 246, 0.9));
    border: 1px solid rgba(0, 116, 130, 0.22);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(31, 49, 43, 0.06);
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
}

.responsibility-team-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.responsibility-team-header h4 {
    color: var(--teal-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    margin: 0;
}

.responsibility-team-header p {
    color: var(--muted);
    font-size: 13px;
    margin: 2px 0 0;
}

.responsibility-missing {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.responsibility-missing > span,
.inline-chip-action {
    background: rgba(255, 246, 222, 0.95);
    border: 1px solid rgba(192, 133, 22, 0.28);
    border-radius: 999px;
    color: #8f5b05;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 9px;
}

.inline-chip-action {
    cursor: pointer;
}

.inline-chip-action:hover {
    background: rgba(255, 238, 194, 1);
}

.responsibility-roster {
    display: grid;
    gap: 10px;
}

.responsibility-role-group,
.responsibility-inherited-preview {
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(205, 189, 165, 0.72);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    padding: 8px;
}

.responsibility-inherited-preview {
    background: rgba(235, 245, 246, 0.72);
}

.responsibility-group-title {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.responsibility-group-title span {
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.responsibility-group-title small {
    color: var(--muted);
    font-size: 12px;
}

.responsibility-member {
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 7px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 10px;
}

.responsibility-member.missing-role {
    background: rgba(255, 246, 222, 0.62);
    border-color: rgba(192, 133, 22, 0.24);
}

.responsibility-member.missing-role strong,
.responsibility-member.missing-role span {
    color: #8f5b05;
}

.responsibility-member > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.responsibility-member strong {
    color: var(--teal-dark);
}

.responsibility-member span {
    color: var(--text);
}

.responsibility-member-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    text-align: right;
}

.responsibility-member-meta > span:not(.field-badge) {
    color: var(--muted);
    font-size: 12px;
}

.responsibility-source {
    background: rgba(0, 116, 130, 0.09);
    border-radius: 999px;
    color: var(--teal-dark) !important;
    font-weight: 800;
    padding: 3px 8px;
}

.responsibility-team-card-compact {
    gap: 6px;
    margin-top: 12px;
    padding: 8px 10px;
}

.responsibility-team-card-compact .responsibility-team-header {
    align-items: center;
}

.responsibility-team-card-compact .responsibility-team-header h4 {
    font-size: 16px;
}

.responsibility-team-card-compact .responsibility-roster {
    gap: 6px;
}

.responsibility-team-card-compact .responsibility-role-group {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 4px;
    padding: 0;
}

.responsibility-team-card-compact .responsibility-group-title {
    justify-content: flex-end;
    margin-top: -2px;
}

.responsibility-team-card-compact .responsibility-member {
    background: rgba(255, 255, 255, 0.46);
    border-radius: 5px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) max-content;
    padding: 5px 8px;
}

.responsibility-team-card-compact .responsibility-member > div:first-child {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(120px, max-content) minmax(160px, 1fr);
}

.responsibility-team-card-compact .responsibility-member strong,
.responsibility-team-card-compact .responsibility-member span {
    line-height: 1.2;
}

.responsibility-team-card-compact .responsibility-member-meta {
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: flex-end;
}

.responsibility-team-card-compact .field-badge,
.responsibility-team-card-compact .responsibility-source {
    font-size: 11px;
    padding: 2px 7px;
}

.responsibility-team-card-compact .responsibility-missing {
    gap: 4px;
}

.responsibility-team-card-compact .responsibility-missing > span {
    font-size: 11px;
    padding: 2px 7px;
}

.responsibility-form {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    padding: 12px;
}

.responsibility-form .form-actions,
.responsibility-form .check-row {
    grid-column: 1 / -1;
}

.secondary-action.colored {
    background: rgba(0, 116, 130, 0.1);
    border-color: rgba(0, 116, 130, 0.22);
    color: var(--teal-dark);
}

.secondary-action.colored:hover {
    background: rgba(0, 116, 130, 0.16);
}

.validation-inline {
    color: var(--danger);
    font-size: 13px;
    font-weight: 800;
    margin: 0;
}

html.compact-mode .responsibility-team-card {
    gap: 7px;
    margin-top: 8px;
    padding: 9px 10px;
}

html.compact-mode .responsibility-member {
    padding: 6px 8px;
}

html.compact-mode .responsibility-role-group,
html.compact-mode .responsibility-inherited-preview {
    gap: 5px;
    padding: 6px;
}

html.compact-mode .responsibility-form {
    gap: 7px;
    padding: 9px;
}

@media (max-width: 800px) {
    .responsibility-team-header,
    .responsibility-member {
        align-items: stretch;
        flex-direction: column;
    }

    .responsibility-member-meta {
        justify-content: flex-start;
        text-align: left;
    }

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

    .responsibility-team-card-compact .responsibility-member,
    .responsibility-team-card-compact .responsibility-member > div:first-child {
        grid-template-columns: 1fr;
    }

    .responsibility-team-card-compact .responsibility-member-meta {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.inactive-entity-management {
    display: grid;
    gap: 14px;
    padding: 12px;
}

.inactive-entity-summary {
    background: linear-gradient(135deg, rgba(238, 246, 247, 0.92), rgba(255, 251, 241, 0.78));
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 12px 14px;
}

.inactive-entity-summary h3,
.inactive-entity-usage h3,
.inactive-entity-danger h3 {
    margin: 0;
}

.inactive-entity-summary p,
.inactive-entity-usage p,
.inactive-entity-danger p {
    margin: 0;
}

.inactive-entity-message {
    background: rgba(255, 249, 219, 0.9);
    border: 1px solid rgba(185, 137, 38, 0.35);
    border-radius: 8px;
    color: var(--ink);
    padding: 10px 12px;
}

.inactive-entity-usage,
.inactive-entity-danger {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 12px 14px;
}

.inactive-entity-danger {
    border-color: rgba(185, 46, 71, 0.28);
}

.inactive-entity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.usage-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.usage-chip {
    background: rgba(222, 235, 236, 0.9);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 4px;
    padding: 4px 9px;
}

.usage-chip.warning {
    background: rgba(250, 232, 191, 0.95);
    color: var(--danger);
}

.inactive-records-banner {
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 249, 229, 0.94), rgba(238, 247, 248, 0.88));
    border: 1px solid rgba(185, 137, 38, 0.28);
    border-left: 4px solid #c48a18;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(31, 49, 43, 0.06);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin: 0 0 12px;
    padding: 12px 14px;
}

.inactive-records-banner > div:first-child {
    display: grid;
    gap: 5px;
}

.inactive-records-banner strong {
    color: var(--teal-dark);
}

.inactive-records-banner p {
    color: var(--muted);
    margin: 0;
}

@media (max-width: 700px) {
    .inactive-records-banner {
        align-items: stretch;
        flex-direction: column;
    }
}

.language-settings-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: calc(100vh - 9.5rem);
}

.language-settings-panel > .panel-header p,
.language-settings-card-header p {
    margin: 0.15rem 0 0;
    color: #3c4b4a;
    font-size: 0.9rem;
}

.language-settings-status {
    margin: 0.85rem 1rem 0;
}

.language-settings-grid {
    align-items: start;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(235px, 340px) minmax(520px, 1fr);
    min-height: 0;
    padding: 0.85rem 1rem 1rem;
}

.language-settings-card {
    background: linear-gradient(135deg, rgba(226, 242, 242, 0.9), rgba(255, 252, 245, 0.92));
    border: 1px solid #d8c8ad;
    border-radius: 9px;
    box-shadow: 0 10px 24px rgba(48, 39, 26, 0.08);
    padding: 0.85rem;
}

.translation-editor-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 15rem);
    min-height: 0;
}

.language-settings-card-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.language-settings-card h3 {
    color: #25433c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    margin: 0;
}

.language-choice-group {
    display: grid;
    gap: 0.55rem;
}

.language-choice {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #d8c8ad;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: auto 1fr;
    padding: 0.7rem 0.75rem;
}

.language-choice.selected {
    background: #e4f4f5;
    border-color: #008996;
    box-shadow: inset 4px 0 0 #008996;
}

.language-choice input {
    height: 1rem;
    margin-top: 0.2rem;
    width: 1rem;
}

.language-choice strong,
.translation-term-source strong {
    color: #23423b;
    display: block;
}

.language-choice small,
.translation-term-source small {
    color: #405352;
    display: block;
    font-size: 0.82rem;
    line-height: 1.3;
    margin-top: 0.15rem;
}

.language-settings-filters {
    align-items: end;
    background: #e4f0f1;
    border: 1px solid #c5d7d7;
    border-radius: 8px;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(220px, 1.4fr) minmax(145px, 0.75fr) auto;
    margin-bottom: 0.6rem;
    padding: 0.65rem;
}

.language-settings-filters label {
    display: grid;
    gap: 0.25rem;
}

.language-settings-filters label > span,
.translation-term-row label > span {
    color: #304947;
    font-size: 0.82rem;
    font-weight: 700;
}

.language-settings-filters input,
.language-settings-filters select,
.translation-term-row textarea {
    background: #fffefb;
    border: 1px solid #d0bea2;
    border-radius: 5px;
    color: #193c36;
    font: inherit;
    min-height: 2rem;
    padding: 0.34rem 0.5rem;
}

.language-settings-toggle {
    align-items: center;
    align-self: center;
    display: inline-grid !important;
    gap: 0.45rem !important;
    grid-template-columns: auto 1fr;
    margin-bottom: 0.15rem;
    white-space: nowrap;
}

.language-settings-toggle input {
    min-height: auto;
}

.translation-term-list {
    display: grid;
    flex: 1 1 auto;
    gap: 0.42rem;
    max-height: none;
    min-height: 0;
    overflow: auto;
    padding-right: 0.25rem;
}

.translation-term-row {
    align-items: stretch;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #d8c8ad;
    border-radius: 7px;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(240px, 0.85fr) minmax(320px, 1.45fr);
    padding: 0.55rem 0.65rem;
}

.translation-term-row.missing-dutch {
    border-color: #e2b46d;
    box-shadow: inset 4px 0 0 #e2b46d;
}

.translation-term-source .field-badge {
    margin-top: 0.3rem;
}

.translation-term-row label {
    display: grid;
    gap: 0.2rem;
}

.translation-term-row textarea {
    min-height: 3.05rem;
    resize: vertical;
}

.translation-term-edit {
    min-width: 0;
}

.language-settings-sr-only {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

.language-settings-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 0.65rem;
}

@media (max-width: 1100px) {
    .language-settings-panel {
        min-height: auto;
    }

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

    .translation-editor-card {
        max-height: none;
    }

    .language-settings-filters,
    .translation-term-row {
        grid-template-columns: 1fr;
    }
}
.course-inheritable-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.course-inheritable-field > label,
.course-inheritable-field > div { min-width: 0; }
.course-inheritance-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.course-inheritance-heading > .check-row { margin: 0; }
.course-inheritance-heading input.course-inheritance-checkbox {
    width: 13px;
    height: 13px;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--teal-dark);
    cursor: pointer;
}
.course-inheritance-input > label > span:first-child,
.course-inheritance-input > .image-field > span:first-child,
.course-inheritance-input > .relation-lookup-field > .relation-lookup-label,
.course-inheritance-input > fieldset > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}