/* Global application styles (moved from templates/base.html). Company colours are injected inline in base.html. */
        :root {
            --brand-blue-soft: #e7f3fb;
            --brand-blue-border: #b8d9ee;
            --pikett-grid-border: #94a3b8;
            --app-text-primary: #172033;
            --app-text-secondary: #475569;
            --app-text-muted: #64748b;
            --app-page-background: #f5f5f5;
            --app-surface: #ffffff;
            --app-surface-subtle: #f8fafc;
            --app-border: #dbe4ef;
            --app-border-strong: #cbd5e1;
            --app-success: #176338;
            --app-success-surface: #eef9f2;
            --app-warning: #854d0e;
            --app-warning-surface: #fff8e8;
            --app-error: #9f2d2d;
            --app-error-surface: #fff4f4;
            --app-info: #175a8f;
            --app-info-surface: #eef7ff;
            --app-focus-ring: var(--brand-blue-border);
            --app-space-1: 4px;
            --app-space-2: 8px;
            --app-space-3: 12px;
            --app-space-4: 16px;
            --app-space-5: 24px;
            --app-space-6: 32px;
            --app-control-height: 42px;
            --app-control-height-touch: 46px;
            --app-radius-small: 6px;
            --app-radius-medium: 8px;
            --app-radius-large: 10px;
            --app-shadow-surface: 0 1px 3px rgba(15, 23, 42, 0.07);
            --app-shadow-overlay: 0 12px 28px rgba(15, 23, 42, 0.18);
            /* Small, shared layer system for central Options surfaces. */
            --app-layer-options-rail: 40;
            --app-layer-options-flyout: 90;
            --app-layer-modal-backdrop: 1300;
            --app-layer-modal-panel: 1400;
        }

        html {
            scrollbar-gutter: stable;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background: var(--app-page-background);
            color: var(--app-text-primary);
        }

        .topbar {
            background: var(--navigation-color);
            color: white;
            padding: 7px 22px;
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            position: relative;
            z-index: 1000;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: bold;
            margin-right: 6px;
        }

        .brand-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
            width: 120px;
            padding: 3px 7px;
            box-sizing: border-box;
            background: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.16);
        }

        .brand-logo img {
            display: block;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
        }

        .topbar a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            opacity: 0.75;
        }

        .topbar a:hover {
            opacity: 1;
        }

        .topbar a.active {
            opacity: 1;
            border-bottom: 2px solid white;
            padding-bottom: 3px;
        }

        .topbar-nav {
            display: flex;
            align-items: stretch;
            gap: 4px;
        }

        .mobile-topbar-nav {
            display: none;
        }

        .topbar-menu {
            position: relative;
            display: flex;
            align-items: stretch;
        }

        .topbar-menu-trigger,
        .topbar-direct-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 32px;
            padding: 5px 9px;
            border: 0;
            border-radius: 5px;
            background: transparent;
            color: white;
            cursor: pointer;
            font: inherit;
            font-size: 13px;
            font-weight: bold;
            line-height: 1.2;
            opacity: 0.78;
            box-sizing: border-box;
        }

        .topbar a.topbar-direct-link {
            opacity: 0.78;
        }

        .topbar-menu-trigger::after {
            content: "";
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid currentColor;
            opacity: 0.8;
        }

        .topbar-menu:hover .topbar-menu-trigger,
        .topbar-menu:focus-within .topbar-menu-trigger,
        .topbar-menu.open .topbar-menu-trigger,
        .topbar-menu.active .topbar-menu-trigger,
        .topbar a.topbar-direct-link:hover,
        .topbar a.topbar-direct-link:focus,
        .topbar a.topbar-direct-link.active {
            background: rgba(255,255,255,0.14);
            opacity: 1;
            outline: none;
        }

        .topbar a.topbar-direct-link.active {
            border-bottom: 0;
            padding-bottom: 5px;
        }

        .topbar-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1100;
            display: none;
            min-width: 190px;
            padding: 5px;
            border: 1px solid #dbe4ef;
            border-radius: 0 0 7px 7px;
            background: #fff;
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
            overflow: visible;
        }

        .topbar-menu:hover .topbar-dropdown,
        .topbar-menu:focus-within .topbar-dropdown,
        .topbar-menu.open .topbar-dropdown {
            display: grid;
        }

        .topbar .topbar-dropdown a {
            display: block;
            padding: 7px 9px;
            border: 0;
            border-radius: 5px;
            color: #1f2937;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.25;
            opacity: 1;
            white-space: nowrap;
        }

        .topbar-submenu {
            position: relative;
        }

        .topbar-submenu-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            width: 100%;
            min-height: 31px;
            padding: 7px 9px;
            border: 0;
            border-radius: 5px;
            background: transparent;
            color: #1f2937;
            cursor: pointer;
            font: inherit;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.25;
            text-align: left;
            white-space: nowrap;
        }

        .topbar-submenu-trigger::after {
            content: "\203A";
            color: #64748b;
            font-size: 16px;
            line-height: 1;
        }

        .topbar-submenu-menu {
            position: absolute;
            top: -5px;
            left: calc(100% - 2px);
            z-index: 1110;
            display: none;
            min-width: 190px;
            padding: 5px;
            border: 1px solid #dbe4ef;
            border-radius: 7px;
            background: #fff;
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
        }

        .topbar-submenu-menu::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: -14px;
            width: 16px;
            background: transparent;
        }

        .topbar-submenu:hover > .topbar-submenu-menu,
        .topbar-submenu:focus-within > .topbar-submenu-menu,
        .topbar-submenu.open > .topbar-submenu-menu {
            display: grid;
        }

        .topbar-submenu:hover > .topbar-submenu-trigger,
        .topbar-submenu:focus-within > .topbar-submenu-trigger,
        .topbar-submenu.open > .topbar-submenu-trigger,
        .topbar-submenu-trigger.active {
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            outline: none;
        }

        .topbar .topbar-dropdown a:hover,
        .topbar .topbar-dropdown a:focus,
        .topbar .topbar-dropdown a.active {
            padding-bottom: 7px;
            border-bottom: 0;
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            outline: none;
        }

        .topbar-spacer {
            flex: 1;
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
        }

        .version-badge {
            white-space: nowrap;
            color: white;
            border: 1px solid rgba(255,255,255,0.4);
            border-radius: 999px;
            padding: 5px 8px;
            font-size: 11px;
            font-weight: bold;
            line-height: 1;
            background: rgba(255,255,255,0.12);
        }

        .topbar-user-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            max-width: 150px;
            height: 30px;
            box-sizing: border-box;
            padding: 0 9px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.4);
            border-radius: 5px;
            background: rgba(255,255,255,0.1);
            color: white;
            font-size: 11.5px;
            font-weight: 700;
            line-height: 1;
        }

        .topbar-user-badge svg {
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.9;
        }

        .topbar-user-badge span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .logout-form {
            margin: 0;
        }

        .topbar-icon-button,
        .topbar-icon-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            background: transparent;
            color: white;
            border: 1px solid rgba(255,255,255,0.45);
            border-radius: 5px;
            cursor: pointer;
            opacity: 0.8;
            box-sizing: border-box;
        }

        .topbar-icon-button svg,
        .topbar-icon-link svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .topbar-icon-button:hover,
        .topbar-icon-link:hover,
        .topbar-icon-link.active {
            opacity: 1;
            border-color: white;
        }

        .topbar a.topbar-icon-link.active {
            border-bottom: 1px solid white;
            padding-bottom: 0;
        }

        .page {
            min-height: calc(100vh - 52px);
            box-sizing: border-box;
            padding: 24px 28px;
            display: flex;
            flex-direction: column;
        }

        h1 {
            margin-top: 0;
            margin-bottom: 4px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 20px;
        }

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

        .actions {
            margin-bottom: 18px;
        }

        .table-scroll {
            max-width: 100%;
            overflow-x: auto;
        }

        .row-actions {
            white-space: nowrap;
        }

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

        .drag-handle {
            color: #666;
            cursor: grab;
            font-weight: bold;
            letter-spacing: 1px;
            user-select: none;
        }

        .drag-handle:active {
            cursor: grabbing;
        }

        .worker-row.dragging {
            opacity: 0.45;
        }

        .button {
            display: inline-block;
            background: var(--brand-blue);
            color: white;
            padding: 10px 14px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: bold;
            border: none;
            cursor: pointer;
        }

        .button:hover {
            background: var(--brand-blue-dark);
        }

        button:not(:disabled),
        summary {
            cursor: pointer;
        }

        .button-secondary {
            display: inline-block;
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            padding: 10px 14px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: bold;
            margin-left: 8px;
            border: 1px solid var(--brand-blue-border);
            cursor: pointer;
        }

        .button-danger {
            display: inline-block;
            background: #fee2e2;
            color: #991b1b;
            padding: 10px 14px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: bold;
            border: none;
            cursor: pointer;
        }

        .button-danger:hover {
            background: #fecaca;
        }

        .options-tabs {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .options-tabs .button-secondary {
            margin-left: 0;
        }

        .options-tabs .active-tab {
            background: var(--brand-blue);
            color: white;
            border-color: var(--brand-blue);
        }

        .options-nav {
            display: flex;
            align-items: stretch;
            gap: 2px;
            margin: 0 0 16px;
            padding: 4px;
            overflow: visible;
            border: 1px solid #dbe4ef;
            border-radius: 7px;
            background: #fff;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        }

        .options-nav-link,
        .options-nav-trigger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            box-sizing: border-box;
            padding: 0 11px;
            border: 0;
            border-radius: 5px;
            background: transparent;
            color: #475569;
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            font-family: inherit;
        }

        .options-nav-link:hover,
        .options-nav-link:focus,
        .options-nav-trigger:hover,
        .options-nav-trigger:focus {
            background: #f1f5f9;
            color: var(--brand-blue-dark);
            outline: none;
        }

        .options-nav-link.active,
        .options-nav-dropdown.active > .options-nav-trigger,
        .options-nav-dropdown.open > .options-nav-trigger {
            background: var(--brand-blue-soft);
            color: var(--brand-blue);
        }

        .options-nav-dropdown {
            position: relative;
        }

        .options-nav-trigger::after {
            content: "";
            width: 6px;
            height: 6px;
            margin-left: 7px;
            border-right: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: translateY(-2px) rotate(45deg);
        }

        .options-nav-menu {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1200;
            display: none;
            min-width: 190px;
            overflow: hidden;
            padding: 4px;
            border: 1px solid #dbe4ef;
            border-radius: 7px;
            background: #fff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
        }

        .options-nav-dropdown.open .options-nav-menu {
            display: grid;
        }

        @media (hover: hover) and (pointer: fine) {
            .options-nav-dropdown:hover .options-nav-menu {
                display: grid;
            }
        }

        .options-nav-menu a {
            padding: 8px 10px;
            border-radius: 4px;
            color: #334155;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
        }

        .options-nav-menu a:hover,
        .options-nav-menu a:focus,
        .options-nav-menu a.active {
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            outline: none;
        }

        .options-page-header {
            margin-bottom: 10px;
        }

        .options-page-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
            flex-wrap: wrap;
        }

        .options-page-actions .button,
        .options-page-actions .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: 34px;
            min-height: 34px;
            margin: 0;
            padding: 0 10px;
            border-radius: 5px;
            font-size: 13px;
            line-height: 1;
        }

        .page-tabs {
            display: flex;
            align-items: stretch;
            gap: 0;
            margin: 0 0 18px;
            padding: 0 8px;
            overflow-x: auto;
            border: 1px solid #dbe4ef;
            border-radius: 7px;
            background: #fff;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
            scrollbar-width: thin;
        }

        .page-tabs a,
        .page-tabs .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            min-height: 46px;
            margin: 0;
            padding: 10px 13px;
            border: 0;
            border-bottom: 3px solid transparent;
            border-radius: 0;
            background: transparent;
            color: #475569;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            box-sizing: border-box;
        }

        .page-tabs a:hover,
        .page-tabs a:focus,
        .page-tabs .button-secondary:hover,
        .page-tabs .button-secondary:focus {
            background: #f8fafc;
            color: var(--brand-blue-dark);
            outline: none;
        }

        .page-tabs a.active,
        .page-tabs a.active-tab,
        .page-tabs .button-secondary.active-tab {
            border-bottom-color: var(--brand-blue);
            background: transparent;
            color: var(--brand-blue);
        }

        .page-tabs-secondary {
            margin-bottom: 14px;
            background: #f8fafc;
            box-shadow: none;
        }

        .page-tabs-secondary a,
        .page-tabs-secondary .button-secondary {
            min-height: 40px;
            padding: 8px 11px;
            font-size: 13px;
        }

        .holiday-year-filter,
        .holiday-card {
            display: flex;
            gap: 12px;
            align-items: flex-end;
            flex-wrap: wrap;
        }

        .holiday-year-filter .form-row,
        .holiday-card .form-row {
            margin-bottom: 0;
        }

        .holiday-year-filter select {
            width: auto;
            min-width: 92px;
            height: 34px;
            min-height: 34px;
            padding: 0 30px 0 9px;
            border-radius: 5px;
            font-size: 13px;
            line-height: 1;
        }

        .holiday-table input,
        .holiday-table select {
            min-width: 110px;
        }

        .holiday-table input[type="checkbox"] {
            min-width: 0;
        }

        .holiday-active-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 0;
            font-weight: normal;
        }

        .sub-tabs {
            margin-bottom: 0;
        }

        .rapport-tabs {
            margin-bottom: 18px;
        }

        .page-action-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }

        .page-action-row.right-only {
            justify-content: flex-end;
        }

        .page-action-row .subtitle {
            margin-bottom: 0;
        }

        .app-page-title-row,
        .rapport-list-page-heading {
            margin-bottom: 12px;
        }

        .app-page-title-row h1,
        .rapport-list-page-heading h1 {
            margin: 0;
            font-size: 22px;
            line-height: 1.2;
        }

        .app-page-title-row .button,
        .app-page-title-row .button-secondary,
        .rapport-list-page-heading .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: 40px;
            min-height: 40px;
            padding: 0 16px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 750;
            line-height: 1;
        }

        .rapport-list-page-heading .button {
            box-shadow: 0 4px 10px rgba(0, 89, 153, 0.16);
        }

        .app-page-header-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
            margin-left: auto;
        }

        .app-page-header-actions .button-secondary {
            margin-left: 0;
        }

        .app-section-action-row {
            align-items: center;
            margin-bottom: 10px;
        }

        .app-section-action-row h2 {
            margin: 0;
            font-size: 18px;
        }

        .app-section-action-row .button,
        .app-section-action-row .button-secondary {
            min-height: 34px;
            height: 34px;
            margin: 0;
            padding: 0 10px;
            font-size: 13px;
        }

        .app-table-card,
        .rapport-list-card {
            overflow: hidden;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        }

        .app-table-card.filter-panel-open,
        .rapport-list-card.filter-panel-open,
        .project-list-card.filter-panel-open {
            overflow: visible;
        }

        .app-table-card-standalone {
            margin-bottom: 18px;
        }

        .app-table-shell,
        .rapport-list-shell {
            display: block;
            margin: 0;
        }

        .app-table-toolbar,
        .rapport-list-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            min-height: 48px;
            padding: 0 12px;
            border-bottom: 1px solid #dbe4ef;
            background: #fff;
        }

        .app-table-toolbar-left,
        .rapport-list-toolbar-left {
            display: flex;
            align-items: center;
            min-width: 0;
            gap: 10px;
        }

        .app-table-tabs,
        .rapport-status-tabs {
            display: flex;
            align-items: stretch;
            align-self: stretch;
            min-width: 0;
            gap: 2px;
        }

        .app-table-tab,
        .rapport-status-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            min-height: 48px;
            padding: 0 10px;
            border-bottom: 2px solid transparent;
            color: #64748b;
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
        }

        .app-table-tab:hover,
        .app-table-tab:focus,
        .rapport-status-tab:hover,
        .rapport-status-tab:focus {
            background: #f8fafc;
            color: var(--brand-blue-dark);
            outline: none;
        }

        .app-table-tab.active,
        .app-table-tab.active-tab,
        .rapport-status-tab.active {
            border-bottom-color: var(--brand-blue);
            color: var(--brand-blue);
        }

        .app-table-counts,
        .rapport-list-counts {
            color: #64748b;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }

        .app-table-summary {
            color: #64748b;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;
        }

        .app-table-toolbar-title {
            color: #334155;
            font-size: 13px;
            font-weight: 700;
        }

        .app-table-toolbar-summary,
        .project-list-toolbar-summary {
            display: grid;
            gap: 2px;
            min-width: 0;
            color: #334155;
            line-height: 1.25;
        }

        .app-table-toolbar-summary strong,
        .project-list-toolbar-summary strong {
            overflow: hidden;
            font-size: 14px;
            font-weight: 800;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .app-table-toolbar-summary span,
        .project-list-toolbar-summary span {
            overflow: hidden;
            color: #64748b;
            font-size: 12px;
            font-weight: 650;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .project-edit-page,
        .project-edit-layout {
            width: min(1440px, 100%);
            margin-right: auto;
            margin-left: auto;
        }

        .project-edit-heading {
            margin-bottom: 20px;
        }

        .project-edit-heading h1 {
            margin: 0 0 4px;
        }

        .project-edit-heading .subtitle {
            margin-bottom: 0;
        }

        .project-edit-layout {
            display: grid;
            grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
            align-items: start;
            gap: 20px;
        }

        .project-edit-form-card {
            box-sizing: border-box;
            width: 100%;
            max-width: none;
            min-width: 0;
            margin: 0;
            padding: 28px 28px 0;
            border: 1px solid #dbe4ef;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
        }

        .project-edit-form-card .form-row {
            margin-bottom: 24px;
        }

        .project-edit-form-card .two-columns {
            gap: 24px 30px;
        }

        .project-form-action-bar {
            position: static;
            z-index: auto;
            justify-content: flex-start;
            min-height: 74px;
            margin: 4px 0 0;
            padding: 14px 0;
            border-radius: 0 0 8px 8px;
            box-shadow: none;
            backdrop-filter: none;
        }

        .project-form-action-group {
            justify-content: flex-start;
            margin-left: 0;
        }

        .project-section-card {
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            margin: 0;
            padding: 26px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
        }

        .project-section-header,
        .project-section-row,
        .project-section-main,
        .project-section-meta,
        .project-section-title {
            display: flex;
            align-items: center;
        }

        .project-section-header {
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 18px;
        }

        .project-section-title,
        .project-section-main {
            min-width: 0;
            gap: 9px;
        }

        .project-section-title h2 {
            margin: 0;
            color: #172033;
            font-size: 22px;
            line-height: 1.2;
        }

        .project-section-create-button,
        .project-action-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-width: 0;
        }

        .project-section-folder-icon {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
            color: #0878bd;
        }

        .project-section-tabs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin: 0 0 18px;
            padding: 0;
            border: 1px solid #e4eaf2;
            border-radius: 8px 8px 0 0;
        }

        .project-section-tabs .rapport-crud-tab {
            min-height: 50px;
        }

        .project-section-panel[hidden] {
            display: none;
        }

        .project-section-list {
            display: grid;
            gap: 0;
            overflow: visible;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
        }

        .project-section-row {
            min-height: 58px;
            justify-content: space-between;
            gap: 12px;
            padding: 11px 14px;
            border: 0;
            border-bottom: 1px solid #dbe4ef;
            border-radius: 0;
            background: #fff;
            transition: background 140ms ease;
        }

        .project-section-row:last-child {
            border-bottom: 0;
        }

        .project-section-row:hover {
            background: #f8fafc;
        }

        .project-section-row.is-system {
            background: #fbfdff;
        }

        .project-section-row.is-archived {
            background: #f8fafc;
            color: #64748b;
        }

        .project-section-main strong {
            overflow: hidden;
            color: #172033;
            font-size: 15px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .project-section-meta {
            flex: 0 0 auto;
            justify-content: flex-end;
            gap: 8px;
        }

        .project-section-status {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 2px 7px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }

        .project-section-status.system {
            background: #e7f3fb;
            color: #065f97;
        }

        .project-section-status.active {
            background: #e8f7ee;
            color: #166534;
        }

        .project-section-status.archived {
            background: #e5e7eb;
            color: #475569;
        }

        .project-section-action-menu {
            position: relative;
        }

        .project-section-action-menu summary,
        .project-list-action-menu summary {
            width: 34px;
            height: 34px;
            border-radius: 7px;
        }

        .project-section-empty {
            margin: 2px 0;
            padding: 14px 10px;
        }

        .project-section-delete-text,
        .project-section-delete-note {
            margin: 0;
            color: #334155;
            font-size: 14px;
            line-height: 1.45;
        }

        .project-section-delete-note {
            color: #64748b;
        }

        .project-section-modal-panel.project-section-delete-modal-panel {
            width: min(480px, calc(100vw - 40px));
        }

        .project-section-delete-body {
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr);
            align-items: start;
            gap: 12px;
        }

        .project-section-delete-text {
            color: #243247;
            font-size: 15px;
            font-weight: 650;
        }

        .project-section-delete-copy {
            display: grid;
            gap: 5px;
            min-width: 0;
            padding-top: 1px;
        }

        .project-section-delete-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            flex: 0 0 auto;
            border-radius: 50%;
            background: #f8eeee;
            color: #b45353;
        }

        .project-section-delete-icon svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .project-section-delete-blocked-reason {
            display: block;
            max-width: 240px;
            padding: 7px 10px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.35;
        }

        .project-section-modal-panel {
            width: min(520px, calc(100vw - 40px));
            overflow: hidden;
        }

        .project-section-modal-panel .app-modal-form {
            gap: 0;
            padding: 0;
        }

        .project-section-modal-panel .app-modal-header {
            margin: 0;
            padding: 17px 22px;
        }

        .project-section-modal-body {
            padding: 20px 22px 22px;
            background: #fff;
        }

        .project-section-modal-body .form-row {
            margin: 0;
            padding: 0;
        }

        .project-section-modal-title {
            display: flex;
            align-items: center;
            min-width: 0;
            gap: 10px;
        }

        .project-section-modal-title h2 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .project-section-modal-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            flex: 0 0 auto;
            border-radius: 8px;
            background: #e7f3fb;
            color: #0878bd;
        }

        .project-section-modal-title-icon svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .project-section-modal-helper {
            margin: 7px 0 0;
            color: #64748b;
            font-size: 13px;
            line-height: 1.35;
        }

        .project-section-modal-panel .project-section-modal-footer {
            margin-top: 0;
            padding: 14px 22px 16px;
            border-top: 1px solid #dbe4ef;
            background: #f8fafc;
            gap: 9px;
        }

        .app-modal-icon-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: #64748b;
            cursor: pointer;
        }

        .app-modal-icon-close:hover,
        .app-modal-icon-close:focus-visible {
            background: #f1f5f9;
            color: #172033;
            outline: none;
        }

        .app-modal-actions .button-danger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 34px;
            min-height: 34px;
            margin: 0;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 750;
        }

        .project-section-modal-panel .app-modal-actions .button,
        .project-section-modal-panel .app-modal-actions .button-secondary,
        .project-section-modal-panel .app-modal-actions .button-danger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-sizing: border-box;
            height: 38px;
            min-height: 38px;
            margin: 0;
            padding: 0 14px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 750;
            line-height: 1;
            white-space: nowrap;
        }

        .project-section-modal-panel .app-modal-actions .button-danger {
            border: 1px solid #fecaca;
            background: #fee2e2;
            color: #991b1b;
        }

        .project-section-modal-panel .app-modal-actions .button-secondary,
        .rapport-summary-source-modal-actions .button-secondary {
            border: 1px solid #a9c4dd;
            background: #fff;
            color: #175a8f;
            box-shadow: 0 1px 2px rgba(30, 47, 70, 0.04);
        }

        .project-section-modal-panel .app-modal-actions .button-secondary:hover,
        .project-section-modal-panel .app-modal-actions .button-secondary:focus-visible,
        .rapport-summary-source-modal-actions .button-secondary:hover,
        .rapport-summary-source-modal-actions .button-secondary:focus-visible {
            border-color: var(--brand-blue);
            background: #f8fbfe;
            color: var(--brand-blue-dark);
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 89, 153, 0.1);
        }

        .project-section-modal-panel .app-modal-actions .rapport-button-icon {
            display: block;
            width: 17px;
            height: 17px;
            flex: 0 0 17px;
        }

        @media (max-width: 560px) {
            .project-section-modal-panel,
            .project-section-modal-panel.project-section-delete-modal-panel {
                width: calc(100vw - 16px);
            }

            .project-section-modal-panel .app-modal-header,
            .project-section-modal-body {
                padding-right: 16px;
                padding-left: 16px;
            }

            .project-section-modal-panel .project-section-modal-footer {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                padding: 12px 16px 14px;
            }

            .project-section-modal-panel .app-modal-actions .button,
            .project-section-modal-panel .app-modal-actions .button-secondary,
            .project-section-modal-panel .app-modal-actions .button-danger {
                width: 100%;
                min-width: 0;
                padding-right: 10px;
                padding-left: 10px;
            }
        }

        @media (max-width: 440px) {
            .project-section-modal-panel .project-section-modal-footer {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        .project-clickable-row {
            cursor: pointer;
        }

        .project-clickable-row [data-project-row-action] {
            cursor: default;
        }

        .project-clickable-row .project-list-action-menu summary {
            cursor: pointer;
        }

        .project-clickable-row:hover td {
            background: #f8fbfe;
        }

        .project-clickable-row:focus-visible {
            outline: 2px solid #0878bd;
            outline-offset: -2px;
        }

        .project-clickable-row:focus-visible td {
            background: #f0f9ff;
        }

        @media (max-width: 980px) {
            .project-edit-page,
            .project-edit-layout {
                width: 100%;
            }

            .project-edit-layout {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 720px) {
            .project-edit-form-card,
            .project-section-card {
                padding-right: 16px;
                padding-left: 16px;
            }

            .project-form-action-bar {
                padding-right: 16px;
                padding-left: 16px;
            }

            .project-section-header,
            .project-section-meta {
                align-items: stretch;
            }

            .project-section-header {
                flex-direction: column;
            }

            .project-section-meta {
                justify-content: space-between;
            }

            .project-section-create-button,
            .project-form-action-bar .button,
            .project-form-action-bar .button-secondary {
                width: 100%;
            }
        }

        .app-filter-panel-static {
            border-bottom: 1px solid #dbe4ef;
        }

        .app-table-actions,
        .rapport-list-toolbar-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
            margin-left: auto;
            flex-wrap: wrap;
        }

        .app-table-search-wrap,
        .rapport-list-search-wrap {
            position: relative;
            flex: 0 1 190px;
            width: min(190px, 28vw);
        }

        .app-table-search,
        .rapport-list-search {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            min-width: 0;
            height: 38px;
            margin: 0;
            padding: 6px 10px 6px 32px;
            border: 1px solid #cbd6e2;
            border-radius: 8px;
            background: #fff;
            color: #1f2937;
            font-size: 13px;
            transition: border-color 140ms ease, box-shadow 140ms ease;
        }

        .app-table-search:focus,
        .rapport-list-search:focus {
            border-color: var(--brand-blue);
            box-shadow: 0 0 0 3px rgba(0, 89, 153, 0.12);
            outline: none;
        }

        .app-table-search::-webkit-search-decoration,
        .app-table-search::-webkit-search-results-decoration,
        .app-table-search::-webkit-search-results-button,
        .rapport-list-search::-webkit-search-decoration,
        .rapport-list-search::-webkit-search-results-decoration,
        .rapport-list-search::-webkit-search-results-button {
            display: none;
        }

        .app-table-search-icon,
        .rapport-list-search-icon {
            position: absolute;
            top: 50%;
            left: 11px;
            z-index: 1;
            width: 11px;
            height: 11px;
            box-sizing: border-box;
            border: 1.5px solid #64748b;
            border-radius: 50%;
            pointer-events: none;
            transform: translateY(-58%);
        }

        .app-table-search-icon::after,
        .rapport-list-search-icon::after {
            content: "";
            position: absolute;
            right: -4px;
            bottom: -3px;
            width: 5px;
            height: 1.5px;
            border-radius: 999px;
            background: #64748b;
            transform: rotate(45deg);
            transform-origin: left center;
        }

        .app-filter-toggle,
        .rapport-filter-toggle {
            margin-left: 0;
        }

        .rapport-mine-toggle.active {
            border-color: var(--brand-blue);
            background: var(--brand-blue);
            color: #fff;
        }

        .rapport-mine-toggle.active::before {
            content: "✓";
            margin-right: 5px;
            font-weight: 800;
        }

        .app-table-toolbar .button,
        .app-table-toolbar .button-secondary,
        .rapport-list-toolbar .button,
        .rapport-list-toolbar .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: 38px;
            min-height: 38px;
            margin: 0;
            padding: 0 14px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 750;
            line-height: 1;
        }

        .app-table-toolbar .button-secondary,
        .rapport-list-toolbar .button-secondary,
        .app-filter-actions .button-secondary,
        .rapport-filter-actions .button-secondary {
            background: #fff;
            color: var(--brand-blue-dark);
            border: 1px solid #c7d8e8;
        }

        .app-table-toolbar .button-secondary:hover,
        .app-table-toolbar .button-secondary:focus-visible,
        .rapport-list-toolbar .button-secondary:hover,
        .rapport-list-toolbar .button-secondary:focus-visible,
        .app-filter-actions .button-secondary:hover,
        .app-filter-actions .button-secondary:focus-visible,
        .rapport-filter-actions .button-secondary:hover,
        .rapport-filter-actions .button-secondary:focus-visible {
            border-color: #9fc2df;
            background: #f8fbfe;
            box-shadow: 0 0 0 3px rgba(0, 89, 153, 0.08);
            outline: none;
        }

        .rapport-list-toolbar .rapport-mine-toggle.active {
            border-color: var(--brand-blue);
            background: var(--brand-blue);
            color: #fff;
        }

        .app-filter-panel,
        .rapport-filter-panel {
            position: relative;
            padding: 12px;
            border-bottom: 1px solid #dbe4ef;
            background: #f8fafc;
        }

        .app-filter-panel[hidden],
        .rapport-filter-panel[hidden] {
            display: none;
        }

        .app-filter-panel-header,
        .rapport-filter-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }

        .app-filter-panel-header h2,
        .rapport-filter-panel-header h2 {
            margin: 0;
            font-size: 15px;
        }

        .app-filter-close,
        .rapport-filter-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: 28px;
            min-width: 28px;
            height: 28px;
            padding: 0;
            border: 0;
            border-radius: 4px;
            background: transparent;
            color: #64748b;
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
        }

        .app-filter-close:hover,
        .app-filter-close:focus,
        .rapport-filter-close:hover,
        .rapport-filter-close:focus {
            background: #e2e8f0;
            color: #1f2937;
            outline: none;
        }

        .app-filter-grid,
        .rapport-filter-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(150px, 1fr));
            gap: 10px;
        }

        .rapport-filter-grid {
            grid-template-columns:
                minmax(125px, 0.8fr)
                minmax(125px, 0.8fr)
                minmax(120px, 0.7fr)
                minmax(150px, 1fr)
                minmax(190px, 1.35fr);
        }

        .rapport-filter-grid-my {
            grid-template-columns:
                minmax(125px, 0.8fr)
                minmax(125px, 0.8fr)
                minmax(120px, 0.7fr)
                minmax(210px, 1.4fr);
        }

        .app-filter-grid .form-row,
        .rapport-filter-grid .form-row {
            margin-bottom: 0;
        }

        .app-filter-grid label,
        .rapport-filter-grid label {
            margin-bottom: 4px;
            color: #475569;
            font-size: 12px;
        }

        .app-filter-grid input,
        .app-filter-grid select,
        .rapport-filter-grid input,
        .rapport-filter-grid select {
            height: 36px;
            min-height: 36px;
            padding: 6px 8px;
            font-size: 13px;
        }

        .filter-clearable-field,
        .app-table-search-wrap,
        .rapport-filter-project-picker {
            position: relative;
        }

        .rapport-filter-project-picker input,
        .app-table-search-wrap input {
            padding-right: 34px;
        }

        .filter-clearable-field {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 24px;
            align-items: center;
            gap: 6px;
        }

        .filter-clearable-field input,
        .filter-clearable-field select {
            width: 100%;
            min-width: 0;
        }

        .filter-field-clear {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            min-width: 20px;
            height: 20px;
            min-height: 20px;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: #e2e8f0;
            color: #475569;
            cursor: pointer;
            font-size: 15px;
            line-height: 1;
        }

        .app-table-search-wrap .filter-field-clear,
        .rapport-filter-project-picker .filter-field-clear {
            position: absolute;
            top: 50%;
            right: 7px;
            transform: translateY(-50%);
        }

        .filter-field-clear:hover,
        .filter-field-clear:focus-visible {
            background: #cbd5e1;
            color: #0f172a;
            outline: none;
        }

        .filter-field-clear[hidden] {
            display: none;
        }

        .app-filter-actions,
        .rapport-filter-actions {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            margin-top: 10px;
        }

        .app-filter-actions .button,
        .app-filter-actions .button-secondary,
        .rapport-filter-actions .button,
        .rapport-filter-actions .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: 38px;
            min-height: 38px;
            margin: 0;
            padding: 0 14px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 750;
            line-height: 1;
        }

        .app-filter-actions .button-secondary,
        .rapport-filter-actions .button-secondary {
            margin-left: 0;
        }

        .modern-crud-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            box-sizing: border-box;
            min-height: 34px;
            height: 34px;
            margin: 0;
            padding: 0 12px;
            border-radius: 8px;
            font-size: 12.5px;
            font-weight: 750;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
        }

        .modern-crud-action-primary {
            border-color: var(--brand-blue);
            background: var(--brand-blue);
            color: #fff;
            box-shadow: 0 4px 10px rgba(0, 89, 153, 0.14);
        }

        .modern-crud-action-secondary {
            border: 1px solid #cbd5e1;
            background: #fff;
            color: #1f2937;
        }

        .modern-crud-action-primary:hover,
        .modern-crud-action-primary:focus-visible {
            background: #004f88;
            color: #fff;
        }

        .modern-crud-action-secondary:hover,
        .modern-crud-action-secondary:focus-visible {
            border-color: #94a3b8;
            background: #f8fafc;
            color: #0f172a;
        }

        .modern-crud-action-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            font-size: 14px;
            font-weight: 800;
            line-height: 1;
        }

        .app-table-scroll,
        .rapport-list-table-wrap {
            border: 0;
            border-radius: 0;
            background: #fff;
            box-shadow: none;
        }

        .app-table-empty,
        .rapport-list-empty {
            border-radius: 0;
            border: 0;
            color: #64748b;
        }

        .app-data-table,
        .rapport-list-table {
            box-shadow: none;
            border-radius: 0;
            font-size: 13px;
        }

        .app-data-table th,
        .rapport-list-table th {
            padding: 7px 9px;
            background: #f8fafc;
            color: #334155;
            border-bottom: 1px solid #dbe4ef;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .app-data-table td,
        .rapport-list-table td {
            padding: 7px 9px;
            border-bottom: 1px solid #edf2f7;
            vertical-align: middle;
        }

        .app-data-table tbody tr:nth-child(even),
        .rapport-list-table tbody tr:nth-child(even) {
            background: #fbfdff;
        }

        .app-data-table tbody tr:hover,
        .rapport-list-table tbody tr:hover {
            background: #eef6ff;
        }

        .rapport-list-table tbody tr[data-rapport-open-url] {
            cursor: pointer;
        }

        .rapport-list-table tbody tr[data-rapport-open-url] .app-row-actions,
        .rapport-list-table tbody tr[data-rapport-open-url] a,
        .rapport-list-table tbody tr[data-rapport-open-url] button,
        .rapport-list-table tbody tr[data-rapport-open-url] summary {
            cursor: auto;
        }

        .app-table-card > .app-table-scroll,
        .app-table-card > .app-data-table,
        .app-table-scroll > .app-data-table {
            margin: 0;
        }

        .app-table-card > .app-table-scroll {
            overflow-x: auto;
        }

        .app-table-card > .pagination {
            margin: 0;
            padding: 12px;
            border-top: 1px solid #edf2f7;
        }

        .equipment-page {
            width: min(1440px, 100%);
            margin-right: auto;
            margin-left: auto;
        }

        .equipment-list-card,
        .equipment-detail-card {
            overflow: visible;
        }

        .equipment-list-toolbar {
            align-items: stretch;
        }

        .equipment-list-tabs {
            overflow-x: auto;
            scrollbar-width: thin;
        }

        .equipment-toolbar-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 0;
        }

        .equipment-search input {
            box-sizing: border-box;
            width: min(330px, 28vw);
            min-height: 34px;
            height: 34px;
            margin: 0;
            padding: 6px 10px;
            border-radius: 8px;
            font-size: 13px;
        }

        .equipment-table {
            min-width: 850px;
            table-layout: fixed;
        }

        .equipment-table th:nth-child(1) { width: 27%; }
        .equipment-table th:nth-child(2) { width: 13%; }
        .equipment-table th:nth-child(3) { width: 20%; }
        .equipment-table th:nth-child(4) { width: 24%; }
        .equipment-table th:nth-child(5) { width: 11%; }
        .equipment-table th:nth-child(6) { width: 48px; }

        .equipment-clickable-row {
            cursor: pointer;
        }

        .equipment-clickable-row:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: -2px;
        }

        .equipment-identity,
        .equipment-tag-compact {
            display: grid;
            min-width: 0;
            gap: 2px;
        }

        .equipment-identity strong,
        .equipment-tag-compact strong {
            overflow: hidden;
            color: #172033;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .equipment-identity span,
        .equipment-tag-compact span,
        .equipment-muted {
            overflow: hidden;
            color: #64748b;
            font-size: 11.5px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .equipment-status,
        .equipment-system-label,
        .equipment-primary-label {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            min-height: 23px;
            padding: 2px 8px;
            border-radius: 999px;
            background: #e8f6ee;
            color: #18723b;
            font-size: 11px;
            font-weight: 750;
            line-height: 1.2;
            white-space: nowrap;
        }

        .equipment-status.is-archived {
            background: #eef1f4;
            color: #64748b;
        }

        .equipment-system-label,
        .equipment-primary-label {
            background: #e8f3fb;
            color: #175a8f;
        }

        .equipment-pagination {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: #64748b;
            font-size: 12px;
            font-weight: 650;
        }

        .equipment-pagination .pagination-actions {
            display: flex;
            gap: 7px;
        }

        .equipment-asset-modal-panel {
            width: min(760px, 100%);
        }

        .equipment-tag-modal-panel,
        .equipment-archive-modal-panel {
            width: min(480px, 100%);
        }

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

        .equipment-form-span-2 {
            grid-column: 1 / -1;
        }

        .equipment-asset-form textarea {
            box-sizing: border-box;
            width: 100%;
            resize: vertical;
        }

        .equipment-initial-tag-fields {
            display: grid;
            gap: 10px;
            margin: 2px 0 0;
            padding: 12px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
        }

        .equipment-initial-tag-fields legend {
            padding: 0 5px;
            color: #334155;
            font-size: 12px;
            font-weight: 750;
        }

        .equipment-check {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            width: fit-content;
            margin: 0;
            color: #334155;
            font-size: 13px;
            font-weight: 650;
        }

        .equipment-check input {
            width: auto;
            margin: 0;
        }

        .equipment-back-link {
            display: inline-flex;
            margin: 0 0 10px;
            color: var(--brand-blue-dark);
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
        }

        .equipment-detail-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 18px;
        }

        .equipment-detail-title h1 {
            margin: 2px 0 7px;
        }

        .equipment-detail-kicker {
            color: #64748b;
            font-size: 12px;
            font-weight: 750;
            letter-spacing: 0.025em;
            text-transform: uppercase;
        }

        .equipment-detail-meta,
        .equipment-detail-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .equipment-detail-actions form {
            margin: 0;
        }

        .equipment-primary-tag {
            color: #475569;
            font-size: 12px;
        }

        .equipment-archive-action {
            color: #8a2f2f;
        }

        .equipment-archive-notice {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            padding: 10px 12px;
            border: 1px solid #d7dde5;
            border-radius: 8px;
            background: #f5f7f9;
            color: #475569;
            font-size: 13px;
        }

        .equipment-detail-layout {
            display: grid;
            grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
            align-items: start;
            gap: 16px;
        }

        .equipment-card-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 48px;
            padding: 0 14px;
            border-bottom: 1px solid #dbe4ef;
        }

        .equipment-card-heading > div {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        .equipment-card-heading h2 {
            margin: 0;
            color: #1f2937;
            font-size: 15px;
        }

        .equipment-card-heading span {
            color: #64748b;
            font-size: 11.5px;
        }

        .equipment-facts {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0;
            margin: 0;
            padding: 4px 14px 12px;
        }

        .equipment-facts > div {
            min-width: 0;
            padding: 11px 8px;
            border-bottom: 1px solid #edf2f7;
        }

        .equipment-facts dt {
            margin-bottom: 3px;
            color: #64748b;
            font-size: 11px;
            font-weight: 750;
            text-transform: uppercase;
        }

        .equipment-facts dd {
            margin: 0;
            color: #1f2937;
            font-size: 13px;
            overflow-wrap: anywhere;
        }

        .equipment-fact-wide {
            grid-column: 1 / -1;
        }

        .equipment-notes {
            white-space: pre-wrap;
        }

        .equipment-retired-tag {
            color: #7b8796;
        }

        .equipment-retired-tag strong {
            text-decoration: line-through;
            text-decoration-thickness: 1px;
        }

        .equipment-primary-label {
            min-height: 19px;
            margin-left: 7px;
            padding: 1px 6px;
            vertical-align: middle;
        }

        .equipment-modal-copy {
            margin: 0;
            color: #475569;
            font-size: 13px;
            line-height: 1.45;
        }

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

            .equipment-toolbar-meta {
                width: 100%;
            }

            .equipment-search {
                flex: 1 1 auto;
            }

            .equipment-search input {
                width: 100%;
            }

            .equipment-detail-layout {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (max-width: 620px) {
            .equipment-form-grid,
            .equipment-facts {
                grid-template-columns: minmax(0, 1fr);
            }

            .equipment-form-span-2,
            .equipment-fact-wide {
                grid-column: auto;
            }

            .equipment-toolbar-meta {
                align-items: stretch;
                flex-wrap: wrap;
            }

            .equipment-toolbar-meta .app-table-counts {
                flex-basis: 100%;
            }

            .equipment-detail-actions > *,
            .equipment-detail-actions form,
            .equipment-detail-actions button {
                width: 100%;
            }

            .equipment-archive-notice {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        .app-settings-card {
            padding: 16px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        }

        .app-settings-form {
            margin: 0;
        }

        .app-settings-group + .app-settings-group {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #edf2f7;
        }

        .app-settings-group h2 {
            margin: 0 0 10px;
            font-size: 16px;
        }

        .app-settings-group .form-row {
            margin-bottom: 0;
        }

        .app-settings-actions {
            justify-content: flex-end;
            margin-top: 16px;
        }

        .app-settings-actions .button {
            min-height: 36px;
            height: 36px;
        }

        .project-import-summary {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }

        .project-import-summary span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-height: 28px;
            padding: 3px 8px;
            border: 1px solid #dbe4ef;
            border-radius: 999px;
            background: #fff;
            color: #475569;
            font-size: 12px;
        }

        .project-import-summary span.warning {
            border-color: #f3c77b;
            background: #fff8e8;
            color: #854d0e;
        }

        .project-import-encoding-warning ul {
            margin: 7px 0 0;
            padding-left: 20px;
            font-weight: 500;
        }

        .project-import-encoding-warning .help {
            margin-top: 6px;
            color: inherit;
        }

        .project-import-preview-table {
            min-width: 1120px;
        }

        .project-import-status {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 1px 7px;
            border-radius: 999px;
            background: #eef2f7;
            color: #334155;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }

        .project-import-status.status-new,
        .project-import-status.status-update,
        .project-import-status.status-renumber,
        .project-import-status.status-manual {
            background: #e8f4ff;
            color: #175b91;
        }

        .project-import-status.status-unchanged {
            background: #f1f5f9;
            color: #64748b;
        }

        .project-import-status.status-ambiguous,
        .project-import-status.status-conflict,
        .project-import-status.status-invalid {
            background: #fff1f2;
            color: #9f1239;
        }

        .project-import-warning {
            color: #9f1239;
            font-weight: 700;
        }

        .project-import-confirm-actions {
            justify-content: flex-end;
            margin-top: 12px;
        }

        .project-import-decision-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        .project-import-decision-toolbar .help {
            margin: 0;
        }

        .project-import-decision-toolbar .button-secondary {
            flex: 0 0 auto;
            min-height: 34px;
            height: 34px;
            margin: 0;
        }

        .project-import-actions {
            min-width: 190px;
        }

        .project-import-actions .button-secondary,
        .project-import-actions .button-link {
            display: block;
            width: 100%;
            min-height: 32px;
            height: auto;
            margin: 0;
            text-align: center;
        }

        .project-import-actions .button-link {
            margin-top: 5px;
        }

        .project-import-actions .button-secondary + .button-secondary {
            margin-top: 5px;
        }

        .project-import-remove-assignment[hidden] {
            display: none;
        }

        .project-import-actions .button-secondary[hidden] {
            display: none;
        }

        .project-import-safe-suggestion {
            color: #166534;
            font-weight: 700;
        }

        .project-import-match-modal-panel {
            width: min(720px, 100%);
        }

        .project-import-match-results {
            display: grid;
            gap: 7px;
            max-height: min(480px, 55vh);
            overflow-y: auto;
            padding-right: 2px;
        }

        .project-import-match-option {
            display: grid;
            gap: 3px;
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #dbe4ef;
            border-radius: 7px;
            background: #fff;
            color: #334155;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .project-import-match-option:hover,
        .project-import-match-option:focus {
            border-color: #8ab7dc;
            background: #f5faff;
            outline: none;
        }

        .project-import-match-option strong {
            color: #1f2937;
        }

        .project-import-match-option span {
            color: #64748b;
            font-size: 12px;
        }

        .project-import-no-matches {
            padding: 14px 4px;
        }

        .rapport-status-pill {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 1px 7px;
            border-radius: 999px;
            background: #eef2f7;
            color: #334155;
            font-size: 12px;
            font-weight: 700;
        }

        .rapport-status-draft,
        .rapport-status-rejected {
            background: #e5e7eb;
            color: #374151;
        }

        .rapport-status-submitted {
            background: #fef3c7;
            color: #92400e;
        }

        .rapport-status-accepted {
            background: #dcfce7;
            color: #166534;
        }

        .rapport-status-invoiced {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .rapport-pikett-badge {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 1px 7px;
            border-radius: 999px;
            background: #fee2e2;
            color: #991b1b;
            font-size: 12px;
            font-weight: 750;
        }

        .rapport-list-table .rapport-pikett-badge {
            margin-left: 6px;
        }

        .rapport-list-workers {
            color: #334155;
        }

        .rapport-list-updated {
            min-width: 130px;
            white-space: nowrap;
        }

        .rapport-list-updated strong,
        .rapport-list-updated span {
            display: block;
        }

        .rapport-list-updated strong {
            color: #334155;
            font-size: 12.5px;
        }

        .rapport-list-updated span {
            margin-top: 2px;
            color: #64748b;
            font-size: 11px;
        }

        .rapport-template-editor-card {
            width: 100%;
            max-width: none;
        }

        .rapport-template-list-card {
            overflow: visible;
        }

        .rapport-template-table td,
        .rapport-template-table th {
            vertical-align: middle;
        }

        .rapport-template-empty {
            min-height: 0;
            justify-items: start;
            padding: 18px 20px;
            border-top: 1px solid var(--app-border);
            text-align: left;
        }

        .rapport-template-form-layout {
            width: 100%;
            margin: 0;
        }

        .rapport-template-table {
            width: 100%;
            min-width: 680px;
        }

        .rapport-template-table th:first-child {
            width: 48%;
        }

        .rapport-template-table th:nth-child(2) {
            width: 34%;
        }

        .rapport-template-table th:nth-child(3) {
            width: 120px;
        }

        .rapport-template-table .app-row-actions-heading,
        .rapport-template-table .app-row-actions {
            width: 58px;
            min-width: 58px;
            text-align: center;
        }

        .rapport-template-content-cell strong {
            display: block;
            color: var(--app-text-secondary);
            font-size: 12.5px;
            font-weight: 700;
        }

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

        .rapport-template-overview-primary {
            grid-template-columns: minmax(220px, 1fr) minmax(150px, 180px);
        }

        .rapport-template-reference-grid {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: minmax(150px, 180px) minmax(220px, 1fr);
            gap: 16px 18px;
            min-width: 0;
        }

        .rapport-template-overview-title {
            grid-column: 1 / -1;
            margin: 0;
            color: #1f2937;
            font-size: 16px;
            line-height: 1.25;
        }

        .rapport-template-overview-primary input:not([type="checkbox"]),
        .rapport-template-overview-primary textarea {
            width: 100%;
            min-height: 42px;
            box-sizing: border-box;
            padding: 10px 12px;
            border: 1px solid #cbd6e2;
            border-radius: 9px;
            background: #fff;
            color: #1f2937;
            font: inherit;
            font-size: 14px;
            line-height: 1.45;
            transition: border-color 140ms ease, box-shadow 140ms ease;
        }

        .rapport-template-overview-primary textarea {
            resize: vertical;
        }

        .rapport-template-reference-picker > input {
            padding-right: 38px;
        }

        .rapport-template-reference-picker .project-result-main,
        .rapport-template-reference-picker .project-result-details {
            display: block;
        }

        .rapport-template-overview-primary input:not([type="checkbox"]):focus,
        .rapport-template-overview-primary textarea:focus {
            border-color: var(--brand-blue);
            box-shadow: 0 0 0 3px rgba(0, 89, 153, 0.12);
            outline: none;
        }

        .rapport-template-textarea {
            min-height: 86px;
        }

        .rapport-template-active {
            align-self: end;
            min-height: 40px;
        }

        .rapport-template-active-row {
            align-self: end;
            padding-bottom: 10px;
        }

        .rapport-template-line-section {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid #e2e8f0;
        }

        .rapport-template-line-add {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(110px, 140px) minmax(180px, 260px) auto;
            gap: 10px;
            align-items: end;
        }

        .rapport-template-line-list {
            display: grid;
            gap: 8px;
            margin-top: 10px;
        }

        .rapport-template-line-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(90px, 120px) minmax(160px, 240px) auto;
            gap: 8px;
            align-items: center;
            padding: 8px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
        }

        .rapport-template-line-row strong {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-template-apply-card {
            width: min(720px, calc(100vw - 32px));
        }

        .rapport-template-apply-list {
            display: grid;
            gap: 8px;
            padding: 16px;
        }

        .rapport-template-apply-option {
            display: grid;
            gap: 4px;
            width: 100%;
            padding: 12px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            color: #172033;
            text-align: left;
            cursor: pointer;
        }

        .rapport-template-apply-option:hover,
        .rapport-template-apply-option:focus {
            border-color: #0070c0;
            box-shadow: 0 0 0 3px rgba(0, 112, 192, 0.12);
            outline: none;
        }

        .rapport-template-apply-option span,
        .rapport-template-apply-option small {
            color: #64748b;
        }

        .rapport-template-existing-choice {
            margin: 0 16px 16px;
            padding: 12px;
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            background: #eff6ff;
        }

        .rapport-template-existing-choice p {
            margin: 4px 0 10px;
            color: #475569;
        }

        .rapport-template-choice-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .app-row-actions-heading,
        .rapport-list-actions-heading {
            width: 34px;
        }

        .app-row-actions,
        .rapport-list-actions {
            width: 34px;
            text-align: center;
            white-space: nowrap;
        }

        .app-row-action-menu summary,
        .rapport-list-action-menu summary {
            width: 24px;
            height: 24px;
            margin: 0 auto;
        }

        .app-row-action-menu summary:hover,
        .app-row-action-menu summary:focus,
        .rapport-list-action-menu summary:hover,
        .rapport-list-action-menu summary:focus {
            background: #eef2f7;
        }

        .app-row-action-menu .appointment-action-menu-items {
            width: max-content;
            min-width: 220px;
            max-width: min(86vw, 340px);
        }

        .rapport-list-action-menu .appointment-action-menu-items,
        .project-list-action-menu .appointment-action-menu-items {
            min-width: 230px;
            max-width: min(86vw, 320px);
        }

        .project-list-action-menu .appointment-action-menu-items {
            min-width: 250px;
        }

        .small-button {
            display: inline-block;
            background: var(--brand-blue);
            color: white;
            padding: 6px 9px;
            border-radius: 5px;
            text-decoration: none;
            font-size: 13px;
            border: none;
            cursor: pointer;
        }

        .small-button:hover {
            background: var(--brand-blue-dark);
        }

        .button-small {
            padding: 6px 9px;
            font-size: 13px;
        }

        .daily-edit-button,
        .appointment-edit-button {
            background: #facc15;
            color: #422006;
        }

        .daily-edit-button:hover,
        .appointment-edit-button:hover {
            background: #eab308;
            color: #422006;
        }

        .delete-button {
            background: #b00020;
            margin-left: 4px;
        }

        .delete-button:hover {
            background: #d00028;
        }

        .inline-form {
            display: inline;
        }

        .day-section {
            margin-bottom: 34px;
        }

        .day-heading {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 10px;
            padding-bottom: 6px;
            border-bottom: 2px solid #ddd;
        }

        .appointment-count {
            color: #666;
            font-size: 14px;
            font-weight: normal;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        th {
            background: var(--brand-blue);
            color: white;
            text-align: left;
            padding: 10px;
        }

        td {
            padding: 10px;
            border-bottom: 1px solid #eee;
            vertical-align: top;
        }

        tr:last-child td {
            border-bottom: none;
        }

        .time {
            white-space: nowrap;
            font-weight: bold;
            width: 135px;
        }

        .description {
            font-weight: bold;
            width: 190px;
        }

        .project {
            width: 300px;
        }

        .project-main {
            font-weight: bold;
        }

        .project-details {
            color: #555;
            font-size: 14px;
            margin-top: 3px;
        }

        .workers {
            color: #333;
            width: 220px;
        }

        .type {
            width: 150px;
        }

        .missing-project {
            color: #a15c00;
        }

        .empty {
            background: white;
            padding: 16px;
            border-radius: 8px;
        }

        .status-active {
            color: green;
            font-weight: bold;
        }

        .status-inactive {
            color: #999;
            font-weight: bold;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: bold;
            white-space: nowrap;
        }

        .system-group-badge {
            background: #e8f1f8;
            color: var(--brand-blue-dark);
            border: 1px solid var(--brand-blue-border);
        }

        .form-card {
            background: white;
            max-width: 850px;
            padding: 22px;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        .worker-groups-card,
        .pikett-doerfer-card {
            margin-bottom: 16px;
        }

        .appointment-form-layout {
            display: grid;
            grid-template-columns: minmax(0, 850px) minmax(300px, 420px);
            gap: 22px;
            align-items: start;
        }

        .appointment-card,
        .project-create-panel {
            max-width: none;
        }

        .project-create-panel[hidden] {
            display: none;
        }

        .field-with-button {
            display: flex;
            align-items: stretch;
            gap: 8px;
        }

        .field-with-button select,
        .field-with-button input,
        .field-with-button .project-picker {
            flex: 1;
            min-width: 0;
        }

        .project-picker {
            position: relative;
        }

        .project-picker-selected {
            margin-top: 6px;
            padding: 8px 10px;
            border: 1px solid var(--brand-blue-border);
            border-radius: 6px;
            background: var(--brand-blue-soft);
            color: #1f2937;
            font-size: 14px;
        }

        .project-search-results {
            position: absolute;
            z-index: 20;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            max-height: 260px;
            overflow-y: auto;
            border: 1px solid #cfd7e3;
            border-radius: 6px;
            background: white;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
        }

        .project-result-button {
            display: block;
            width: 100%;
            border: 0;
            border-bottom: 1px solid #eef2f7;
            border-radius: 0;
            background: white;
            color: #1f2937;
            padding: 9px 10px;
            text-align: left;
            cursor: pointer;
            font: inherit;
        }

        .project-result-button:hover,
        .project-result-button:focus {
            background: #eef6fc;
            outline: none;
        }

        .project-result-main {
            font-weight: bold;
        }

        .project-result-details {
            margin-top: 2px;
            color: #555;
            font-size: 13px;
        }

        .appointment-crud-page {
            width: min(100%, 1320px);
            margin: 0 auto;
        }

        .appointment-crud-page .appointment-form-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 14px;
            width: 100%;
        }

        .appointment-crud-card {
            width: 100%;
            max-width: none;
            padding: 0;
            overflow: hidden;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
        }

        .appointment-crud-header {
            display: flex;
            align-items: center;
            gap: 18px;
            min-height: 92px;
            padding: 18px 30px 16px;
            border-bottom: 1px solid #dbe4ef;
            box-sizing: border-box;
        }

        .appointment-crud-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            min-width: 52px;
            height: 52px;
            border-radius: 7px;
            background: #e7f3fb;
            color: var(--brand-blue);
        }

        .appointment-crud-icon svg,
        .appointment-button-icon,
        .appointment-search-icon svg {
            width: 24px;
            height: 24px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .appointment-crud-heading h1 {
            margin: 0;
            color: #0f172a;
            font-size: 27px;
            line-height: 1.1;
            font-weight: 800;
        }

        .appointment-crud-subtitle {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin: 8px 0 0;
            color: #64748b;
            font-size: 16px;
            line-height: 1.25;
        }

        .appointment-subtitle-separator {
            color: #94a3b8;
        }

        .appointment-crud-message {
            margin: 12px 30px 0;
        }

        .appointment-crud-form {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(360px, 0.96fr);
            column-gap: 32px;
            row-gap: 0;
            padding: 24px 30px 0;
            box-sizing: border-box;
        }

        .appointment-crud-form > input[type="hidden"] {
            display: none;
        }

        .appointment-crud-form .form-row {
            margin-bottom: 13px;
        }

        .appointment-crud-form label {
            margin-bottom: 7px;
            color: #111827;
            font-size: 14px;
            font-weight: 750;
            line-height: 1.25;
        }

        .appointment-crud-form input:not([type="checkbox"]):not([type="hidden"]),
        .appointment-crud-form select,
        .appointment-crud-form textarea {
            min-height: 43px;
            padding: 8px 12px;
            border: 1px solid #cfd7e3;
            border-radius: 6px;
            background: #fff;
            color: #0f172a;
            font-size: 15px;
            line-height: 1.25;
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
        }

        .appointment-crud-form input:focus,
        .appointment-crud-form select:focus,
        .appointment-crud-form textarea:focus {
            border-color: #9bc9ee;
            box-shadow: 0 0 0 3px rgba(8, 120, 189, 0.11);
            outline: none;
        }

        .appointment-date-row,
        .appointment-time-row,
        .appointment-type-row,
        .appointment-all-day-row,
        .appointment-description-row,
        .appointment-note-row {
            grid-column: 1;
        }

        .appointment-date-row {
            grid-row: 1;
        }

        .appointment-all-day-row {
            grid-row: 2;
        }

        .appointment-time-row {
            grid-row: 3;
        }

        .appointment-type-row {
            grid-row: 4;
        }

        .appointment-description-row {
            grid-row: 5;
        }

        .appointment-note-row {
            grid-row: 6;
        }

        .appointment-project-row,
        .appointment-project-rule-note,
        .appointment-workers-section {
            grid-column: 2;
            border-left: 1px solid #dbe4ef;
            padding-left: 32px;
        }

        .appointment-project-row {
            grid-row: 1 / span 3;
            margin-bottom: 22px;
        }

        .appointment-project-rule-note {
            grid-row: 4;
            margin-top: -8px;
            margin-bottom: 12px;
        }

        .appointment-workers-section {
            grid-row: 5 / span 2;
            margin-bottom: 16px;
        }

        .appointment-date-grid,
        .appointment-time-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 26px;
        }

        .appointment-type-row {
            grid-template-columns: minmax(0, 1fr);
        }

        .appointment-all-day-row {
            min-height: 28px;
            margin-top: -2px;
            margin-bottom: 13px;
        }

        .appointment-all-day-row input {
            width: 22px;
            height: 22px;
            margin: 0 7px 0 0;
            accent-color: var(--brand-blue);
        }

        .appointment-all-day-row label {
            margin: 0;
            font-weight: 700;
        }

        .appointment-note-textarea {
            min-height: 78px;
            resize: vertical;
        }

        .appointment-description-picker {
            position: relative;
        }

        .appointment-crud-form .appointment-description-picker input {
            width: 100%;
            box-sizing: border-box;
        }

        .description-search-results {
            position: absolute;
            z-index: 20;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            max-height: 230px;
            overflow-y: auto;
            border: 1px solid #cfd7e3;
            border-radius: 6px;
            background: white;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
        }

        .description-result-button {
            display: block;
            width: 100%;
            border: 0;
            border-bottom: 1px solid #eef2f7;
            border-radius: 0;
            background: white;
            color: #1f2937;
            padding: 9px 10px;
            text-align: left;
            cursor: pointer;
            font: inherit;
        }

        .description-result-button:hover,
        .description-result-button:focus {
            background: #eef6fc;
            outline: none;
        }

        .appointment-project-search-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 42px;
            gap: 8px;
        }

        .appointment-project-picker {
            position: relative;
            min-width: 0;
        }

        .appointment-search-icon {
            position: absolute;
            top: 50%;
            left: 12px;
            z-index: 1;
            display: inline-flex;
            color: #64748b;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .appointment-crud-form .appointment-project-picker input#project_search {
            width: 100%;
            box-sizing: border-box;
            padding-left: 46px;
            padding-right: 12px;
        }

        .appointment-project-add {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 43px;
            min-height: 43px;
            margin: 0;
            padding: 0;
            border: 1px solid #cfd7e3;
            border-radius: 6px;
            background: #fff;
            color: var(--brand-blue);
            font-size: 22px;
            font-weight: 750;
            line-height: 1;
        }

        .appointment-selected-project-row {
            position: relative;
            margin-top: 12px;
        }

        .appointment-selected-project {
            display: flex;
            align-items: center;
            gap: 14px;
            min-height: 74px;
            margin: 0;
            padding: 12px 46px 12px 12px;
            border-color: #9bc9ee;
            background: #f2f8fe;
            box-sizing: border-box;
        }

        .appointment-selected-project[hidden] {
            display: none;
        }

        .appointment-selected-project-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            min-width: 42px;
            height: 42px;
            border-radius: 999px;
            background: #dbeeff;
            color: var(--brand-blue);
            font-size: 13px;
            font-weight: 800;
        }

        .appointment-selected-project-copy {
            display: grid;
            gap: 3px;
            min-width: 0;
            color: #0f172a;
        }

        .appointment-selected-project-copy strong,
        .appointment-selected-project-copy span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .appointment-selected-project-copy span {
            color: #64748b;
            font-size: 13px;
        }

        .appointment-project-clear {
            position: absolute;
            top: 50%;
            right: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: #0b73d9;
            cursor: pointer;
            font-size: 25px;
            line-height: 1;
            transform: translateY(-50%);
        }

        .appointment-project-clear:hover,
        .appointment-project-clear:focus-visible {
            background: #e7f3fb;
            outline: none;
        }

        .appointment-project-clear[hidden] {
            display: none;
        }

        .appointment-worker-grid {
            grid-template-columns: repeat(2, minmax(180px, 1fr));
            gap: 11px 14px;
            max-height: clamp(180px, calc(100vh - 365px), 365px);
            min-height: 0;
            overflow-y: auto;
            padding-right: 2px;
        }

        .appointment-worker-option {
            min-height: 68px;
            padding: 10px 12px;
            border-color: #dbe4ef;
            background: #fff;
            box-sizing: border-box;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        }

        .appointment-worker-option input {
            width: 18px;
            height: 18px;
            margin: 0;
            accent-color: var(--brand-blue);
        }

        .appointment-worker-option label {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            width: 100%;
            margin: 0;
            font-weight: 700;
            line-height: 1.2;
        }

        .appointment-worker-option label::first-letter {
            color: inherit;
        }

        .appointment-worker-option .availability-label {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            margin-top: 5px;
            padding: 2px 7px;
            border: 1px solid #a7d9b4;
            border-radius: 4px;
            background: #ddf7e4;
            color: #176b31;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.15;
        }

        .appointment-worker-option.unavailable .availability-label {
            border-color: #fecaca;
            background: #fee2e2;
            color: #b91c1c;
        }

        .appointment-crud-actions {
            grid-column: 1 / -1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 14px;
            min-height: 78px;
            margin: 10px -30px 0;
            padding: 16px 30px;
            border-top: 1px solid #dbe4ef;
            background: #fff;
            box-sizing: border-box;
        }

        .appointment-crud-actions .button,
        .appointment-crud-actions .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 128px;
            height: 42px;
            margin: 0;
            padding: 0 18px;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 14px;
            line-height: 1;
        }

        .appointment-crud-actions .button-secondary {
            order: 1;
            background: #fff;
            color: var(--brand-blue-dark);
            border: 1px solid #9fc2df;
        }

        .appointment-crud-actions .button {
            order: 2;
            background: var(--brand-blue);
            color: #fff;
            box-shadow: 0 6px 14px rgba(8, 120, 189, 0.20);
        }

        .appointment-button-icon {
            width: 17px;
            height: 17px;
        }

        .appointment-delete-form {
            margin: 0;
            padding: 0 30px 18px;
            border-top: 0;
        }

        .appointment-delete-form .button {
            min-height: 36px;
            padding: 0 12px;
            font-size: 13px;
        }

        .appointment-series-banner,
        .appointment-series-conflicts {
            display: grid;
            gap: 4px;
            margin: 0 30px 12px;
            padding: 10px 12px;
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            background: #eff6ff;
            color: #1e3a5f;
            font-size: 13px;
        }

        .appointment-series-banner {
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
        }

        .appointment-series-conflicts {
            border-color: #fecaca;
            background: #fff7f7;
            color: #991b1b;
        }

        .appointment-series-section {
            grid-column: 1 / -1;
            padding: 12px;
            border: 1px solid #dbe4ef;
            border-radius: 9px;
            background: #f8fafc;
        }

        .appointment-series-toggle-row {
            margin: 0;
        }

        .appointment-series-controls {
            display: grid;
            gap: 10px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #dbe4ef;
        }

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

        .appointment-series-interval {
            display: grid;
            grid-template-columns: auto 72px minmax(0, 1fr);
            align-items: center;
            gap: 7px;
            min-height: 40px;
        }

        .appointment-series-interval input {
            min-width: 0;
        }

        .appointment-series-anchor {
            color: #334155;
            font-size: 13px;
            font-weight: 700;
        }

        .appointment-series-preview {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px 10px;
            padding: 9px 10px;
            border-radius: 7px;
            background: #eaf3fb;
            color: #334155;
            font-size: 12px;
        }

        .appointment-series-scope-page {
            display: grid;
            place-items: start center;
            width: 100%;
            padding-top: 5vh;
        }

        .appointment-series-scope-card {
            width: min(680px, 100%);
            max-width: 680px;
            box-sizing: border-box;
        }

        .appointment-series-kicker {
            color: var(--brand-blue-dark);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .appointment-series-scope-card h1 {
            margin: 5px 0 7px;
        }

        .appointment-series-summary {
            margin: 0 0 16px;
            color: #64748b;
        }

        .appointment-series-scope-actions {
            display: grid;
            gap: 9px;
            margin-bottom: 16px;
        }

        .appointment-series-scope-actions form {
            margin: 0;
        }

        .appointment-series-scope-option {
            display: grid;
            width: 100%;
            box-sizing: border-box;
            gap: 4px;
            padding: 14px;
            border: 1px solid #cbd5e1;
            border-radius: 9px;
            background: #fff;
            color: #1e293b;
            font: inherit;
            text-align: left;
            text-decoration: none;
        }

        .appointment-series-scope-option:hover,
        .appointment-series-scope-option:focus {
            border-color: var(--brand-blue);
            background: #eff7fd;
            outline: none;
        }

        .appointment-series-scope-option span {
            color: #64748b;
            font-size: 13px;
        }

        .appointment-series-scope-option.is-danger {
            border-color: #fecaca;
            background: #fff7f7;
            color: #991b1b;
        }

        .appointment-series-scope-option.is-danger span {
            color: #9f1239;
        }

        .appointment-series-scope-option.is-danger:hover,
        .appointment-series-scope-option.is-danger:focus {
            border-color: #dc2626;
            background: #fff1f2;
        }

        @media (max-width: 980px) {
            .appointment-crud-page {
                width: 100%;
            }

            .appointment-series-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .appointment-crud-header {
                padding: 16px;
            }

            .appointment-crud-form {
                grid-template-columns: minmax(0, 1fr);
                padding: 18px 16px 0;
            }

            .appointment-date-row,
            .appointment-time-row,
            .appointment-type-row,
            .appointment-all-day-row,
            .appointment-description-row,
            .appointment-note-row,
            .appointment-project-row,
            .appointment-project-rule-note,
            .appointment-workers-section {
                grid-column: 1;
                grid-row: auto;
                border-left: 0;
                padding-left: 0;
            }

            .appointment-worker-grid {
                max-height: none;
                overflow: visible;
            }

            .appointment-crud-actions {
                margin-right: -16px;
                margin-left: -16px;
                padding-right: 16px;
                padding-left: 16px;
            }
        }

        .rapport-filter-project-picker {
            width: 100%;
        }

        .rapport-filter-project-results {
            max-height: 224px;
        }

        .rapport-filter-project-results .project-result-button {
            min-height: 52px;
            padding: 7px 9px;
            font-size: 12px;
        }

        .rapport-filter-project-results .project-result-details {
            font-size: 11px;
        }

        .rapport-project-picker-row {
            align-items: flex-start;
        }

        .rapport-project-single-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
        }

        .rapport-project-picker-row .project-picker {
            flex: 1 1 auto;
            min-width: 0;
        }

        .rapport-project-picker-row .project-picker > input {
            padding-right: 38px;
        }

        .rapport-project-picker-row .project-picker > input[readonly] {
            background: #f8fafc;
            color: #475569;
            cursor: default;
        }

        .rapport-project-clear {
            position: absolute;
            top: 4px;
            right: 4px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            min-width: 32px;
            height: 32px;
            min-height: 32px;
            padding: 0;
            border: 0;
            border-radius: 5px;
            background: transparent;
            color: #64748b;
            cursor: pointer;
            font-size: 19px;
            line-height: 1;
        }

        .rapport-project-clear:hover,
        .rapport-project-clear:focus {
            background: #eef2f7;
            color: #1f2937;
            outline: none;
        }

        .rapport-project-clear[hidden] {
            display: none;
        }

        .rapport-project-create-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            min-height: 40px;
            margin-left: 0;
            padding: 9px 11px;
            font-size: 13px;
            white-space: nowrap;
        }

        .rapport-project-warning {
            margin-top: 5px;
            padding: 7px 9px;
            border: 1px solid #f59e0b;
            border-radius: 6px;
            background: #fffbeb;
            color: #92400e;
            font-size: 12px;
            line-height: 1.35;
        }

        .rapport-project-warning[hidden] {
            display: none;
        }

        .smart-autocomplete-results {
            position: absolute;
            z-index: 1000;
            top: calc(100% + 4px);
            left: 0;
            width: 100%;
            max-height: 260px;
            overflow-y: auto;
            overflow-x: hidden;
            border: 1px solid #cfd7e3;
            border-radius: 6px;
            background: #fff;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
            box-sizing: border-box;
        }

        .custom-dropdown-anchor {
            position: relative;
        }

        .custom-dropdown-anchor.dropdown-open {
            z-index: 1001;
        }

        .smart-autocomplete-results[hidden] {
            display: none;
        }

        .smart-autocomplete-option {
            display: block;
            width: 100%;
            border: 0;
            border-bottom: 1px solid #eef2f7;
            border-radius: 0;
            background: #fff;
            color: #1f2937;
            padding: 9px 10px;
            text-align: left;
            cursor: pointer;
            font: inherit;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .smart-autocomplete-option:last-child {
            border-bottom: 0;
        }

        .smart-autocomplete-option:hover,
        .smart-autocomplete-option:focus,
        .smart-autocomplete-option.is-active {
            background: #eef6fc;
            outline: none;
        }

        .icon-button {
            width: 42px;
            padding: 0;
            flex: 0 0 42px;
            font-size: 20px;
            line-height: 1;
        }

        .settings-section {
            margin-top: 28px;
        }

        .import-result-section {
            max-width: 520px;
        }

        .import-result-table {
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        .import-result-table th {
            width: 70%;
            background: #f8fafc;
            color: #374151;
            font-weight: bold;
            border-bottom: 1px solid #eee;
        }

        .import-result-table td {
            text-align: right;
            font-weight: bold;
            color: #111827;
        }

        .import-result-actions {
            margin-top: 16px;
        }

        .import-result-actions .button-secondary {
            margin-left: 0;
        }

        .service-import-result-table th {
            width: 45%;
        }

        .service-import-result-table td {
            text-align: left;
        }

        .import-result-warning {
            margin-top: 14px;
        }

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

        .section-heading-row h2 {
            margin-top: 0;
            margin-bottom: 4px;
        }

        .section-heading-row h3 {
            margin-top: 0;
            margin-bottom: 4px;
        }

        .section-heading-row .subtitle {
            margin-bottom: 0;
        }

        .color-swatch {
            display: inline-block;
            width: 28px;
            height: 18px;
            border: 1px solid #bbb;
            border-radius: 4px;
            margin-right: 8px;
            vertical-align: middle;
        }

        .filter-card {
            background: white;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 18px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        .project-filter-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(130px, 1fr));
            gap: 12px;
        }

        .appointment-filter-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(130px, 1fr));
            gap: 12px;
        }

        .filter-card .form-row {
            margin-bottom: 0;
        }

        .filter-actions {
            margin-top: 14px;
        }

        .postal-match-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: -4px;
            margin-bottom: 16px;
        }

        .postal-match-button {
            background: #eef2f7;
            border: 1px solid #cfd7e3;
            color: #1f2937;
            border-radius: 6px;
            padding: 7px 10px;
            cursor: pointer;
            font-size: 14px;
        }

        .postal-match-button:hover {
            background: #dde5ef;
        }

        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-top: 14px;
            color: #555;
            flex-wrap: wrap;
        }

        .pagination-actions {
            display: flex;
            gap: 8px;
        }

        .project-pagination {
            min-height: 52px;
            box-sizing: border-box;
            margin-top: 0;
            padding: 10px 12px;
        }

        .project-pagination-status {
            color: #475569;
            font-size: 13px;
            font-weight: 600;
        }

        .project-pagination-actions {
            align-items: center;
        }

        .project-pagination-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: 32px;
            min-height: 32px;
            min-width: 82px;
            margin: 0;
            padding: 0 10px;
            border-radius: 5px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }

        .project-pagination-button.disabled {
            border-color: #e2e8f0;
            background: #f8fafc;
            color: #94a3b8;
            cursor: default;
            pointer-events: none;
        }

        .form-error {
            background: #fff3cd;
            border: 1px solid #f0c36d;
            color: #6f4600;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 16px;
            font-weight: bold;
        }

        .form-success {
            background: #eef9f2;
            border: 1px solid #b9dfc7;
            color: #176338;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 16px;
            font-weight: bold;
        }

        .form-warning {
            background: #f3f4f6;
            border: 1px solid #cfd6df;
            color: #374151;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 16px;
            font-weight: bold;
        }

        .auth-card {
            background: white;
            max-width: 380px;
            width: 100%;
            margin: 72px auto 0;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        .auth-card h1 {
            margin-bottom: 6px;
        }

        .auth-card .button {
            width: 100%;
        }

        .edit-delete-form {
            margin-top: 18px;
            padding-top: 18px;
            border-top: 1px solid #eee;
        }

        .form-row {
            margin-bottom: 16px;
        }

        label {
            display: block;
            font-weight: bold;
            margin-bottom: 6px;
        }

        input,
        select {
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            font-family: inherit;
            font-size: 15px;
            border: 1px solid #ccc;
            border-radius: 6px;
        }

        input[type="date"],
        input[type="time"] {
            color: inherit;
            line-height: 1.2;
        }

        .checkbox-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .checkbox-row input {
            width: auto;
        }

        .checkbox-row label {
            margin-bottom: 0;
        }

        .checkbox-row.disabled-setting {
            color: #9ca3af;
        }

        .checkbox-row.disabled-setting label {
            color: #9ca3af;
            cursor: not-allowed;
        }

        .checkbox-row.disabled-setting input {
            cursor: not-allowed;
            opacity: 0.55;
        }

        .help {
            color: #666;
            font-size: 13px;
            margin-top: 4px;
        }

        .two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

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

        .one-column {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 16px;
        }

        .rapport-form-card {
            max-width: 980px;
        }

        .rapport-form-layout {
            grid-template-columns: minmax(0, 980px);
        }

        .rapport-form-layout.project-panel-open {
            grid-template-columns: minmax(0, 850px) minmax(300px, 420px);
        }

        .rapport-form-layout .rapport-form-card,
        .rapport-form-layout .project-create-panel {
            max-width: none;
        }

        .rapport-material-section h2 {
            margin-top: 8px;
            margin-bottom: 12px;
        }

        .rapport-section-heading-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        .rapport-section-heading-row h2 {
            margin: 0;
        }

        .rapport-form-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .rapport-form-status-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }

        .rapport-read-only-note {
            color: #64748b;
            font-size: 13px;
            font-weight: 600;
        }

        .rapport-editable-fields {
            min-width: 0;
            margin: 0;
            padding: 0;
            border: 0;
        }

        .rapport-editable-fields:disabled {
            opacity: 1;
        }

        .rapport-form-actions .button,
        .rapport-form-actions .button-secondary,
        .rapport-form-actions .button-danger,
        .rapport-modal-actions .button,
        .rapport-modal-actions .button-secondary,
        .rapport-section-add-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            min-height: 42px;
            margin-left: 0;
            padding: 10px 14px;
            border-radius: 7px;
            font: inherit;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
            text-align: center;
        }

        .rapport-section-add-button {
            min-height: 38px;
            padding: 8px 12px;
            background: #fff;
        }

        .rapport-worker-picker-modal {
            z-index: 1320;
        }

        .rapport-worker-picker-card {
            width: min(480px, 100%);
        }

        .rapport-worker-picker-list {
            display: grid;
            gap: 8px;
            max-height: min(52dvh, 460px);
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 2px;
        }

        .rapport-worker-picker-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 48px;
            padding: 10px 12px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            color: #111827;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .rapport-worker-picker-option:hover,
        .rapport-worker-picker-option:focus-visible {
            border-color: #0f6fb8;
            box-shadow: 0 0 0 2px rgba(15, 111, 184, 0.14);
            outline: none;
        }

        .rapport-worker-picker-option strong {
            color: #64748b;
            font-size: 12px;
        }

        .rapport-worker-picker-option.is-selected,
        .rapport-worker-picker-option:disabled {
            border-color: #b8d8ef;
            background: #edf6fc;
            color: #436071;
            cursor: default;
            opacity: 1;
        }

        .rapport-worker-manual-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
            margin-top: 12px;
        }

        .rapport-inline-icon-button {
            width: 42px;
            min-width: 42px;
            min-height: 42px;
            margin: 0;
            padding: 0;
            font-size: 22px;
            line-height: 1;
        }

        .rapport-worker-list {
            display: grid;
            gap: 8px;
            margin-bottom: 16px;
        }

        .rapport-worker-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 34px;
            grid-template-areas:
                "identity remove"
                "editor editor";
            gap: 8px 10px;
            align-items: start;
            padding: 10px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
        }

        .rapport-worker-identity {
            grid-area: identity;
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: space-between;
            gap: 4px 16px;
            min-width: 0;
        }

        .rapport-worker-identity strong {
            display: block;
            overflow-wrap: anywhere;
            font-size: 14px;
        }

        .rapport-worker-total-label {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 3px 8px;
            border: 1px solid #bfdbfe;
            border-radius: 999px;
            background: #eff6ff;
            color: #1e3a5f;
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
        }

        .rapport-worker-time-editor {
            grid-area: editor;
            width: min(100%, 460px);
        }

        .rapport-worker-time-editor,
        .rapport-worker-interval-list {
            display: grid;
            gap: 6px;
        }

        .rapport-worker-interval-row {
            display: grid;
            grid-template-columns: auto auto 30px;
            gap: 6px;
            align-items: end;
            justify-content: start;
        }

        .rapport-worker-interval-row label {
            display: inline-grid;
            grid-template-columns: auto 84px;
            align-items: center;
            gap: 4px;
            min-width: 0;
            margin: 0;
            color: #64748b;
            font-size: 12px;
            font-weight: 600;
        }

        .rapport-worker-interval-row label span {
            display: inline;
            margin: 0;
        }

        .rapport-worker-interval-row input {
            width: 84px;
            min-width: 0;
            height: 34px;
            min-height: 34px;
            box-sizing: border-box;
            padding: 5px 7px;
            font-size: 13px;
        }

        .rapport-worker-add-time {
            justify-self: start;
            padding: 2px 0;
            border: 0;
            background: transparent;
            color: #2563eb;
            font: inherit;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .rapport-worker-legacy-total {
            color: #64748b;
            font-size: 12px;
        }

        .rapport-worker-interval-remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            min-width: 30px;
            height: 34px;
            min-height: 34px;
            padding: 0;
            border: 0;
            border-radius: 5px;
            background: transparent;
            color: #64748b;
            font-size: 19px;
            cursor: pointer;
        }

        .rapport-worker-interval-remove:hover,
        .rapport-worker-interval-remove:focus,
        .rapport-worker-interval-remove:active {
            background: #eef2f7;
            color: #334155;
            outline: none;
        }

        .rapport-worker-remove {
            grid-area: remove;
            justify-self: end;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            min-width: 30px;
            height: 30px;
            min-height: 30px;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 5px;
            background: transparent;
            color: #64748b;
            font-size: 21px;
            font-weight: 500;
            line-height: 1;
            cursor: pointer;
        }

        .rapport-worker-remove:hover,
        .rapport-worker-remove:focus {
            background: #eef2f7;
            color: #334155;
            outline: none;
        }

        .rapport-worker-remove:active {
            background: #e2e8f0;
            color: #334155;
        }

        .rapport-worker-empty {
            margin-bottom: 16px;
        }

        .rapport-sketch-section {
            display: grid;
            gap: 10px;
            padding: 12px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .rapport-sketch-preview {
            width: min(100%, 640px);
            max-height: 320px;
            overflow: hidden;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #fff;
        }

        .rapport-sketch-preview[hidden] {
            display: none;
        }

        .rapport-sketch-preview img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 320px;
            object-fit: contain;
        }

        .rapport-sketch-section-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
        }

        .rapport-sketch-section-action {
            min-width: 92px;
        }

        .rapport-sketch-empty-state {
            margin: 0;
        }

        body.rapport-sketch-modal-open {
            position: fixed;
            right: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            overscroll-behavior: none;
        }

        .rapport-modal.rapport-sketch-modal,
        .rapport-modal.rapport-sketch-preview-modal {
            padding: calc(var(--rapport-topbar-height, 52px) + 8px + env(safe-area-inset-top, 0px)) 2.5vw calc(10px + env(safe-area-inset-bottom, 0px));
            overscroll-behavior: contain;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

        .rapport-modal.rapport-sketch-modal *,
        .rapport-modal.rapport-sketch-discard-confirm * {
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

        .rapport-modal-card.rapport-sketch-modal-card {
            display: flex;
            flex-direction: column;
            width: 95vw;
            height: calc(100dvh - var(--rapport-topbar-height, 52px) - 18px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
            max-height: calc(100dvh - var(--rapport-topbar-height, 52px) - 18px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
            padding: 10px;
            overflow: hidden;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

        .rapport-sketch-modal-card .rapport-sketch-modal-header {
            display: none;
        }

        .rapport-sketch-toolbar {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            min-width: 0;
            margin-bottom: 8px;
            padding: 6px 8px;
            overflow: visible;
            border: 1px solid #d7dee8;
            border-radius: 7px;
            background: #f4f6f9;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .rapport-sketch-tool-group {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 5px;
        }

        .rapport-sketch-tool-group + .rapport-sketch-tool-group {
            padding-left: 7px;
            border-left: 1px solid #d7dee8;
        }

        .rapport-sketch-semicircle-control {
            position: relative;
            display: inline-flex;
        }

        .rapport-sketch-semicircle-popover {
            position: absolute;
            top: calc(100% + 7px);
            left: 50%;
            z-index: 4;
            display: grid;
            grid-template-columns: repeat(2, minmax(112px, 1fr));
            gap: 5px;
            width: max-content;
            padding: 7px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
            transform: translateX(-50%);
        }

        .rapport-sketch-semicircle-popover[hidden] {
            display: none;
        }

        .rapport-sketch-semicircle-popover button {
            display: flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
            min-height: 42px;
            padding: 7px 9px;
            border: 1px solid transparent;
            border-radius: 6px;
            background: #f8fafc;
            color: #334155;
            font: inherit;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .rapport-sketch-semicircle-popover button:hover,
        .rapport-sketch-semicircle-popover button:focus-visible,
        .rapport-sketch-semicircle-popover button.active {
            border-color: #93bfe8;
            background: #e8f2fc;
            color: var(--brand-blue-dark);
            outline: none;
        }

        .rapport-sketch-semicircle-popover svg {
            width: 22px;
            height: 22px;
            flex: 0 0 auto;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
        }

        .rapport-sketch-discard-confirm {
            z-index: 1360;
        }

        .rapport-sketch-discard-card {
            width: min(440px, 100%);
        }

        .rapport-sketch-discard-card p {
            margin: 0;
            color: #334155;
        }

        .rapport-sketch-color-group {
            padding: 3px 6px;
            border-radius: 999px;
            background: #fff;
            box-shadow: inset 0 0 0 1px #d7dee8;
        }

        .rapport-sketch-tool-button,
        .rapport-sketch-clear-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: 34px;
            min-width: 34px;
            height: 34px;
            min-height: 34px;
            margin: 0;
            padding: 0;
            border: 1px solid transparent;
            border-radius: 5px;
            background: transparent;
            color: #475569;
            cursor: pointer;
        }

        .rapport-sketch-tool-button:hover,
        .rapport-sketch-tool-button:focus,
        .rapport-sketch-clear-button:hover,
        .rapport-sketch-clear-button:focus {
            border-color: #cbd5e1;
            background: #fff;
            color: #1f2937;
            outline: none;
        }

        .rapport-sketch-tool-button.active {
            border-color: #93bfe8;
            background: #e8f2fc;
            color: var(--brand-blue-dark);
        }

        .rapport-sketch-tool-button:disabled {
            opacity: 0.38;
            cursor: default;
        }

        .rapport-sketch-tool-button svg,
        .rapport-sketch-clear-button svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .rapport-sketch-color {
            width: 26px;
            min-width: 26px;
            height: 26px;
            padding: 0;
            border: 2px solid #f4f6f9;
            border-radius: 50%;
            background: var(--sketch-color);
            box-shadow: 0 0 0 1px #aeb9c7;
            cursor: pointer;
        }

        .rapport-sketch-color[data-sketch-color="#111827"] {
            --sketch-color: #111827;
        }

        .rapport-sketch-color[data-sketch-color="#dc2626"] {
            --sketch-color: #dc2626;
        }

        .rapport-sketch-color[data-sketch-color="#2563eb"] {
            --sketch-color: #2563eb;
        }

        .rapport-sketch-color.active {
            border-color: #fff;
            box-shadow:
                0 0 0 1px #fff,
                0 0 0 3px var(--brand-blue);
        }

        .rapport-sketch-custom-color {
            display: block;
            width: 28px;
            min-width: 28px;
            height: 28px;
            margin: 0;
        }

        .rapport-sketch-modal-card .rapport-sketch-custom-color input[type="color"] {
            width: 28px;
            min-width: 28px;
            height: 28px;
            min-height: 28px;
            padding: 1px;
            border: 1px solid #aeb9c7;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
        }

        .rapport-sketch-stepper {
            gap: 2px;
        }

        .rapport-sketch-number-field {
            display: inline-flex;
            align-items: center;
            width: 54px;
            height: 32px;
            margin: 0;
            overflow: hidden;
            border: 1px solid #cbd5e1;
            border-radius: 5px;
            background: #fff;
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
        }

        .rapport-sketch-number-field input {
            width: 34px;
            min-width: 0;
            height: 30px;
            min-height: 30px;
            padding: 0 2px 0 6px;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #1f2937;
            font: inherit;
            font-size: 12px;
            text-align: center;
            appearance: textfield;
            -moz-appearance: textfield;
        }

        .rapport-sketch-number-field input::-webkit-inner-spin-button,
        .rapport-sketch-number-field input::-webkit-outer-spin-button {
            margin: 0;
            appearance: none;
            -webkit-appearance: none;
        }

        .rapport-sketch-number-field input:focus {
            outline: none;
        }

        .rapport-sketch-zoom-value {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 32px;
            color: #334155;
            font-size: 12px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .rapport-sketch-page-actions {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 6px;
            margin: -4px 0 8px;
            padding: 7px 8px;
            border: 1px solid #d7dee8;
            border-radius: 7px;
            background: #f8fafc;
            color: #475569;
            font-size: 12px;
            font-weight: 700;
        }

        .rapport-sketch-page-actions[hidden] {
            display: none;
        }

        .rapport-sketch-page-actions .button-secondary {
            min-height: 30px;
            padding: 4px 9px;
            font-size: 12px;
        }

        .rapport-sketch-clear-button {
            width: auto;
            min-width: 34px;
            gap: 6px;
            margin-left: auto;
            padding: 0 8px;
            color: #b91c1c;
            font-size: 12px;
            font-weight: 700;
        }

        .rapport-sketch-workspace {
            position: relative;
            flex: 1 1 auto;
            width: 100%;
            min-width: 0;
            min-height: 160px;
            overflow: hidden;
            border: 1px solid #aeb9c7;
            border-radius: 8px;
            background: #dfe5ec;
            box-shadow: inset 0 1px 4px rgba(15, 23, 42, 0.08);
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

        .rapport-sketch-canvas-stage {
            position: absolute;
            top: 0;
            left: 0;
            width: 1800px;
            height: 1200px;
            overflow: hidden;
            border: 1px solid #b8c3d0;
            background:
                repeating-linear-gradient(
                    90deg,
                    transparent 0,
                    transparent 1798px,
                    rgba(100, 116, 139, 0.55) 1798px,
                    rgba(100, 116, 139, 0.55) 1800px
                ),
                repeating-linear-gradient(
                    0deg,
                    transparent 0,
                    transparent 1198px,
                    rgba(100, 116, 139, 0.55) 1198px,
                    rgba(100, 116, 139, 0.55) 1200px
                ),
                linear-gradient(#e6eaf0 1px, transparent 1px),
                linear-gradient(90deg, #e6eaf0 1px, transparent 1px),
                #fff;
            background-size:
                auto,
                auto,
                24px 24px,
                24px 24px,
                auto;
            box-shadow: 0 5px 18px rgba(15, 23, 42, 0.18);
            transform-origin: 0 0;
            will-change: transform;
        }

        .rapport-sketch-canvas-stage canvas {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            cursor: crosshair;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }

        .rapport-sketch-canvas-stage #rapport-sketch-canvas {
            pointer-events: none;
        }

        .rapport-sketch-canvas-stage #rapport-sketch-overlay {
            z-index: 2;
        }

        .rapport-sketch-workspace.select-active,
        .rapport-sketch-workspace.select-active canvas {
            cursor: default;
        }

        .rapport-sketch-workspace.delete-active,
        .rapport-sketch-workspace.delete-active canvas {
            cursor: crosshair;
        }

        .rapport-sketch-canvas-stage canvas.loading {
            pointer-events: none;
            opacity: 0.55;
        }

        .rapport-sketch-canvas-stage canvas.eraser-active {
            cursor: cell;
        }

        .rapport-sketch-workspace.pan-active,
        .rapport-sketch-workspace.pan-active canvas {
            cursor: grab;
        }

        .rapport-sketch-workspace.pan-active:active,
        .rapport-sketch-workspace.pan-active canvas:active {
            cursor: grabbing;
        }

        .rapport-sketch-canvas-empty {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            color: #94a3b8;
            font-weight: 700;
            pointer-events: none;
        }

        .rapport-sketch-canvas-empty[hidden] {
            display: none;
        }

        .rapport-modal-actions.rapport-sketch-modal-actions {
            position: relative;
            bottom: auto;
            flex: 0 0 auto;
            margin: 10px 0 0;
            padding: 0;
            border-top: 0;
            background: transparent;
        }

        .rapport-sketch-viewer {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #f8fafc;
            cursor: default;
            touch-action: none;
            user-select: none;
        }

        .rapport-sketch-viewer.is-zoomed {
            cursor: grab;
        }

        .rapport-sketch-viewer.is-dragging {
            cursor: grabbing;
        }

        .rapport-sketch-preview-stage {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 0;
            height: 0;
            will-change: transform;
        }

        .rapport-sketch-preview-stage img {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            max-width: none;
            max-height: none;
            transform-origin: center;
            will-change: transform;
            pointer-events: none;
        }

        .rapport-sketch-preview-controls {
            display: inline-flex;
            flex: 0 0 auto;
            align-self: center;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin-bottom: 10px;
            padding: 3px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .rapport-sketch-preview-controls .small-button {
            flex: 0 0 auto;
            min-width: 38px;
            min-height: 38px;
            border-color: transparent;
            border-radius: 5px;
            background: transparent;
        }

        .rapport-sketch-preview-controls .small-button:hover,
        .rapport-sketch-preview-controls .small-button:focus-visible {
            background: #fff;
        }

        .rapport-sketch-preview-zoom-value {
            flex: 0 0 auto;
            min-width: 54px;
            padding: 0 8px;
            color: #475569;
            font-size: 0.88rem;
            font-variant-numeric: tabular-nums;
            text-align: center;
        }

        .rapport-modal-card.rapport-sketch-preview-modal-card {
            display: flex;
            flex-direction: column;
            width: min(1100px, 94vw);
            height: min(820px, 92dvh);
            overflow: hidden;
        }

        @media (min-width: 768px) and (max-width: 1180px) and (any-pointer: coarse) {
            .rapport-modal.rapport-sketch-modal {
                padding: calc(var(--rapport-topbar-height, 52px) + 6px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px));
            }

            .rapport-modal-card.rapport-sketch-modal-card {
                width: calc(100vw - 16px);
                height: calc(100dvh - var(--rapport-topbar-height, 52px) - 14px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
                max-height: calc(100dvh - var(--rapport-topbar-height, 52px) - 14px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
            }

            .rapport-sketch-tool-button,
            .rapport-sketch-clear-button {
                width: 40px;
                min-width: 40px;
                height: 40px;
                min-height: 40px;
            }

            .rapport-sketch-clear-button {
                width: auto;
            }

            .rapport-sketch-number-field,
            .rapport-sketch-zoom-value {
                height: 38px;
            }

            .rapport-sketch-number-field input {
                height: 36px;
                min-height: 36px;
            }

            .rapport-sketch-color {
                width: 30px;
                min-width: 30px;
                height: 30px;
            }
        }

        @media (max-width: 767px) {
            .rapport-modal.rapport-sketch-modal,
            .rapport-modal.rapport-sketch-preview-modal {
                padding: calc(var(--rapport-topbar-height, 52px) + env(safe-area-inset-top, 0px)) 0 env(safe-area-inset-bottom, 0px);
            }

            .rapport-modal-card.rapport-sketch-modal-card,
            .rapport-modal-card.rapport-sketch-preview-modal-card {
                width: 100vw;
                height: calc(100dvh - var(--rapport-topbar-height, 52px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
                max-height: calc(100dvh - var(--rapport-topbar-height, 52px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
                padding: 8px;
                border-radius: 0;
            }

            .rapport-sketch-preview-controls {
                justify-content: flex-start;
                gap: 6px;
                overflow-x: auto;
                scrollbar-width: thin;
            }

            .rapport-sketch-toolbar {
                gap: 5px;
                margin-bottom: 6px;
                padding: 5px 6px;
            }

            .rapport-sketch-tool-button,
            .rapport-sketch-clear-button {
                width: 38px;
                min-width: 38px;
                height: 38px;
                min-height: 38px;
            }

            .rapport-sketch-clear-button {
                width: auto;
            }

            .rapport-sketch-color {
                width: 28px;
                min-width: 28px;
                height: 28px;
            }

            .rapport-sketch-modal-card .rapport-sketch-custom-color input[type="color"] {
                width: 30px;
                min-width: 30px;
                height: 30px;
                min-height: 30px;
            }

            .rapport-sketch-number-field,
            .rapport-sketch-zoom-value {
                height: 36px;
            }

            .rapport-sketch-number-field input {
                height: 34px;
                min-height: 34px;
            }

            .rapport-sketch-page-actions {
                flex-wrap: wrap;
            }

            .rapport-modal-actions.rapport-sketch-modal-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px;
                margin-top: 6px;
            }

            .rapport-modal-actions.rapport-sketch-modal-actions .button,
            .rapport-modal-actions.rapport-sketch-modal-actions .button-secondary {
                width: 100%;
                min-height: 44px;
            }
        }

        .rapport-summary-project-card {
            margin-bottom: 12px;
        }

        .rapport-summary-project-info {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin: 0;
        }

        .rapport-summary-project-info div {
            min-width: 0;
        }

        .rapport-summary-project-info dt {
            margin-bottom: 3px;
            color: #64748b;
            font-size: 12px;
            font-weight: 700;
        }

        .rapport-summary-project-info dd {
            margin: 0;
            overflow-wrap: anywhere;
            font-weight: 700;
        }

        .rapport-summary-tabs {
            margin-bottom: 12px;
        }

        .rapport-summary-view-tabs {
            display: inline-flex;
            gap: 3px;
            margin-bottom: 12px;
            padding: 3px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f7f9fc;
        }

        .rapport-summary-view-tabs button {
            min-height: 40px;
            padding: 7px 14px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: #526174;
            font-size: 13px;
            font-weight: 750;
        }

        .rapport-summary-view-tabs button.active {
            background: #fff;
            color: var(--brand-blue-dark);
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
        }

        .rapport-summary-view-tabs button:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: 2px;
        }

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

        .rapport-summary-section-worker-note {
            margin: 0 0 10px;
            padding: 8px 10px;
            border-radius: 7px;
            background: #f8fafc;
            color: #64748b;
            font-size: 12px;
            line-height: 1.4;
        }

        .rapport-summary-section-list {
            display: grid;
            gap: 12px;
        }

        .rapport-summary-area-card {
            overflow: hidden;
            border: 1px solid #dbe4ef;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 1px 2px rgba(30, 47, 70, 0.04);
        }

        .rapport-summary-area-card.is-archived {
            background: #fbfcfd;
        }

        .rapport-summary-area-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 44px;
            padding: 9px 12px;
            border-bottom: 1px solid #e1e7ef;
            background: #f8fafc;
        }

        .rapport-summary-area-title {
            display: flex;
            align-items: center;
            min-width: 0;
            gap: 8px;
        }

        .rapport-summary-area-title > svg {
            width: 19px;
            height: 19px;
            flex: 0 0 auto;
            fill: none;
            stroke: var(--brand-blue);
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .rapport-summary-area-title h2 {
            min-width: 0;
            margin: 0;
            overflow: hidden;
            color: #243247;
            font-size: 15px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-summary-area-count {
            flex: 0 0 auto;
            color: #64748b;
            font-size: 12px;
            font-weight: 700;
        }

        .rapport-summary-area-card > .rapport-summary-section {
            margin: 8px;
            border-radius: 8px;
            box-shadow: none;
        }

        .rapport-summary-area-card > .rapport-summary-section + .rapport-summary-section {
            margin-top: 0;
        }

        .rapport-summary-area-card .rapport-summary-section-heading {
            min-height: 36px;
            padding: 7px 10px;
        }

        .rapport-summary-area-card .rapport-summary-section-heading h2 {
            font-size: 14px;
        }

        .rapport-summary-area-empty {
            margin: 0;
            padding: 12px;
        }

        .rapport-summary-area-rapports {
            margin: 8px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
        }

        .rapport-summary-area-rapports > summary {
            padding: 8px 10px;
            color: var(--brand-blue-dark);
            font-size: 12px;
            font-weight: 750;
            list-style-position: inside;
        }

        .rapport-summary-area-rapports > summary:hover,
        .rapport-summary-area-rapports > summary:focus-visible {
            background: #f3f8fc;
            outline: none;
        }

        .rapport-summary-area-rapports > .table-scroll {
            border-top: 1px solid #e1e7ef;
        }

        .rapport-summary-row-actions {
            width: 44px;
            min-width: 44px;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
        }

        .rapport-summary-row-action-menu summary {
            width: 36px;
            height: 36px;
            border-radius: 7px;
        }

        .rapport-summary-row-action-menu summary:hover,
        .rapport-summary-row-action-menu summary:focus {
            background: #eef4f9;
        }

        .rapport-summary-row-action-menu .appointment-action-menu-items {
            min-width: 154px;
        }

        .app-modal-panel.rapport-summary-source-modal-panel {
            width: min(1000px, 94vw);
            max-width: 100%;
            max-height: min(760px, calc(100vh - 40px));
            overflow: hidden;
        }

        .rapport-summary-source-modal-shell {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
            max-height: min(760px, calc(100vh - 40px));
        }

        .rapport-summary-source-modal-header {
            margin: 0;
            padding: 18px 22px 15px;
        }

        .rapport-summary-source-modal-content {
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior: contain;
            padding: 18px 22px;
        }

        .rapport-summary-source-position {
            margin-bottom: 14px;
            padding: 12px 14px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .rapport-summary-source-position-name {
            margin-bottom: 9px;
            color: #243247;
            font-size: 15px;
            font-weight: 750;
            overflow-wrap: anywhere;
        }

        .rapport-summary-source-position-meta {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px 14px;
            margin: 0;
        }

        .rapport-summary-source-position-meta div {
            min-width: 0;
        }

        .rapport-summary-source-position-meta dt {
            margin: 0 0 2px;
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
        }

        .rapport-summary-source-position-meta dd {
            margin: 0;
            color: #243247;
            font-size: 13px;
            font-weight: 700;
            overflow-wrap: anywhere;
        }

        .rapport-summary-source-list {
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            overflow-x: visible;
        }

        .rapport-summary-source-table {
            width: 100%;
            table-layout: fixed;
        }

        .rapport-summary-source-date-column {
            width: 220px;
        }

        .rapport-summary-source-status-column {
            width: 122px;
        }

        .rapport-summary-source-quantity-column {
            width: 105px;
        }

        .rapport-summary-source-action-column {
            width: 154px;
        }

        .rapport-summary-source-date,
        .rapport-summary-source-status,
        .rapport-summary-source-quantity,
        .rapport-summary-source-action,
        .rapport-summary-source-action-heading {
            white-space: nowrap;
        }

        .rapport-summary-source-area {
            overflow-wrap: anywhere;
        }

        .rapport-summary-source-quantity {
            text-align: right;
        }

        .rapport-summary-source-action,
        .rapport-summary-source-action-heading {
            text-align: right;
        }

        .rapport-summary-source-open {
            white-space: nowrap;
        }

        .rapport-summary-source-cards {
            display: none;
        }

        .rapport-summary-source-modal-actions {
            margin: 0;
            padding: 14px 22px 16px;
            border-top: 1px solid #dbe4ef;
            background: #f8fafc;
        }

        .rapport-summary-source-modal-actions .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-sizing: border-box;
            height: 38px;
            min-height: 38px;
            margin: 0;
            padding: 0 14px;
            line-height: 1;
        }

        .rapport-summary-position-table {
            min-width: 820px;
        }

        @media (max-width: 640px) {
            .rapport-summary-view-tabs {
                width: 100%;
                box-sizing: border-box;
            }

            .rapport-summary-view-tabs button {
                flex: 1 1 0;
                min-height: 44px;
            }

            .rapport-summary-area-heading {
                align-items: flex-start;
                flex-direction: column;
                gap: 6px;
            }

            .rapport-summary-area-title {
                flex-wrap: wrap;
            }
        }

        @media (max-width: 800px) {
            #rapport-summary-source-modal {
                padding: 8px;
            }

            .app-modal-panel.rapport-summary-source-modal-panel {
                width: calc(100vw - 16px);
                max-height: calc(100vh - 16px);
            }

            .rapport-summary-source-modal-shell {
                max-height: calc(100vh - 16px);
            }

            .rapport-summary-source-modal-header,
            .rapport-summary-source-modal-content {
                padding-right: 16px;
                padding-left: 16px;
            }

            .rapport-summary-source-modal-actions {
                padding: 12px 16px 14px;
            }

            .rapport-summary-source-position-meta {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .rapport-summary-source-list {
                border: 0;
            }

            .rapport-summary-source-table {
                display: none;
            }

            .rapport-summary-source-cards {
                display: grid;
                gap: 10px;
            }

            .rapport-summary-source-card {
                display: grid;
                gap: 9px;
                padding: 13px;
                border: 1px solid #dbe4ef;
                border-radius: 8px;
                background: #fff;
            }

            .rapport-summary-source-card-date {
                color: #243247;
                font-weight: 750;
            }

            .rapport-summary-source-card-context {
                display: flex;
                align-items: center;
                gap: 8px;
                min-width: 0;
                color: #64748b;
                font-size: 13px;
            }

            .rapport-summary-source-card-area {
                min-width: 0;
                overflow-wrap: anywhere;
            }

            .rapport-summary-source-card-area::before {
                content: "\00b7";
                margin-right: 8px;
            }

            .rapport-summary-source-card-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
            }

            .rapport-summary-source-card-footer strong {
                color: var(--brand-blue-dark);
                white-space: nowrap;
            }

            .rapport-summary-hours-heading-meta {
                flex-direction: column;
                align-items: flex-end;
                gap: 3px;
            }

            .rapport-summary-hours-total {
                padding-left: 0;
                border-left: 0;
            }
        }

        .rapport-summary-section {
            margin-bottom: 14px;
        }

        .rapport-summary-section-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border-bottom: 1px solid #dbe4ef;
        }

        .rapport-summary-section-heading h2 {
            margin: 0;
            font-size: 17px;
        }

        .rapport-summary-section-heading span {
            color: #64748b;
            font-size: 13px;
            font-weight: 700;
        }

        .rapport-summary-section-heading .button-small {
            margin: 0;
            white-space: nowrap;
        }

        .rapport-summary-hours-heading-meta,
        .rapport-summary-hours-total {
            display: flex;
            align-items: center;
        }

        .rapport-summary-hours-heading-meta {
            gap: 12px;
        }

        .rapport-summary-hours-total {
            gap: 6px;
            padding-left: 12px;
            border-left: 1px solid #dbe4ef;
        }

        .rapport-summary-section-heading .rapport-summary-hours-total strong {
            color: var(--brand-blue-dark);
            font-size: 14px;
            white-space: nowrap;
        }

        .rapport-summary-confirm-modal[hidden] {
            display: none !important;
        }

        .rapport-summary-confirm-modal {
            position: fixed;
            inset: 0;
            z-index: 80;
            display: grid;
            place-items: center;
            padding: 18px;
        }

        .rapport-summary-confirm-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.42);
        }

        .rapport-summary-confirm-card {
            position: relative;
            z-index: 1;
            width: min(100%, 460px);
            padding: 20px;
            border: 1px solid #dbe4ef;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
        }

        .rapport-summary-confirm-card h2 {
            margin: 0 0 8px;
            font-size: 18px;
            line-height: 1.3;
        }

        .rapport-summary-confirm-card p {
            margin: 0 0 18px;
            color: #64748b;
            font-size: 14px;
            line-height: 1.45;
        }

        .rapport-summary-confirm-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .rapport-summary-confirm-actions form {
            margin: 0;
        }

        .rapport-summary-hours-list {
            display: grid;
            gap: 10px;
            padding: 12px;
        }

        .rapport-summary-worker-hours {
            overflow: hidden;
            border: 1px solid #d7dee8;
            border-radius: 8px;
            background: #fff;
        }

        .rapport-summary-worker-hours summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            min-height: 44px;
            padding: 10px 14px;
            cursor: pointer;
            font-weight: 700;
        }

        .rapport-summary-worker-hours summary:hover,
        .rapport-summary-worker-hours summary:focus {
            background: #f8fafc;
            outline: none;
        }

        .rapport-summary-worker-hours summary strong {
            color: var(--brand-blue-dark);
            white-space: nowrap;
        }

        .rapport-summary-worker-hours .table-scroll {
            border-top: 1px solid #e5e7eb;
        }

        .rapport-summary-hours-table td:last-child,
        .rapport-summary-hours-table th:last-child {
            text-align: right;
            white-space: nowrap;
        }

        .rapport-line-summary-list {
            display: grid;
            gap: 8px;
            margin-bottom: 16px;
        }

        .rapport-line-summary-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            padding: 10px;
            border: 1px solid #dbe4ef;
            border-radius: 6px;
            background: #fff;
        }

        .rapport-line-summary-card[tabindex] {
            cursor: pointer;
            transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
        }

        .rapport-line-summary-card[tabindex]:hover {
            border-color: #bdd8ea;
            background: #f8fbfe;
        }

        .rapport-line-summary-card[tabindex]:focus-visible {
            outline: none;
            border-color: var(--brand-blue);
            box-shadow: 0 0 0 3px rgba(8, 120, 189, 0.14);
        }

        @media (any-pointer: coarse) {
            .rapport-line-summary-card[tabindex] .rapport-line-summary-body {
                -webkit-user-select: none;
                user-select: none;
            }
        }

        .rapport-linked-suggestions {
            display: grid;
            gap: 6px;
            margin-top: -2px;
            margin-bottom: 4px;
        }

        .rapport-linked-suggestion {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            padding: 8px 10px;
            border: 1px solid #cfe3f5;
            border-radius: 6px;
            background: #f3f8fc;
            color: #334155;
        }

        .rapport-linked-suggestion-media {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border: 1px solid #dbe4ef;
            border-radius: 7px;
            background: #fff;
            color: #64748b;
            font-size: 14px;
            font-weight: 800;
            overflow: hidden;
        }

        .rapport-linked-suggestion-media img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .rapport-linked-suggestion-main {
            display: grid;
            gap: 2px;
            min-width: 0;
            font-size: 13px;
            line-height: 1.35;
        }

        .rapport-linked-suggestion-main strong {
            color: #1f2937;
            font-weight: 750;
        }

        .rapport-linked-suggestion-main span {
            overflow: hidden;
            color: #64748b;
            font-size: 12px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-linked-suggestion-actions {
            display: inline-flex;
            gap: 6px;
            flex: 0 0 auto;
            align-items: center;
        }

        .rapport-linked-suggestion-actions .small-button {
            min-height: 30px;
            padding: 5px 9px;
        }

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

        .rapport-section-group + .rapport-section-group {
            margin-top: 8px;
        }

        .rapport-section-group-heading {
            display: flex;
            align-items: center;
            gap: 7px;
            min-height: 30px;
            padding: 0 2px;
            color: #334155;
            font-size: 13px;
            font-weight: 800;
        }

        .rapport-section-group-heading svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
            color: #0878bd;
        }

        .rapport-line-section-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            max-width: 100%;
            color: #0f6fb8;
            font-weight: 750;
        }

        .rapport-section-selector-card {
            width: min(540px, 100%);
        }

        .rapport-section-selector-subtitle,
        .rapport-section-selector-note {
            margin: 4px 0 0;
            color: #64748b;
            font-size: 13px;
            line-height: 1.35;
        }

        .rapport-section-selector-list {
            display: grid;
            gap: 8px;
            margin: 12px 0;
            min-height: 54px;
        }

        .rapport-section-selector-option {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            width: 100%;
            min-height: 52px;
            padding: 10px 12px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            color: #172033;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .rapport-section-selector-option:hover,
        .rapport-section-selector-option:focus-visible,
        .rapport-section-selector-option.active {
            border-color: #0f6fb8;
            background: #eef7ff;
            outline: none;
        }

        .rapport-section-selector-option svg,
        .rapport-line-section-icon svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .rapport-section-selector-option strong,
        .rapport-section-selector-option span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-section-selector-badge {
            padding: 2px 7px;
            border-radius: 999px;
            background: #e7f3fb;
            color: #065f97;
            font-size: 11px;
            font-weight: 800;
        }

        .rapport-section-selector-create {
            display: grid;
            gap: 8px;
            margin-top: 10px;
        }

        .rapport-section-selector-create[hidden],
        #rapport-section-selector-create-toggle[hidden],
        .rapport-section-selector-create-row[hidden] {
            display: none;
        }

        .rapport-section-selector-create-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 8px;
            align-items: center;
        }

        .rapport-section-selector-create-row .rapport-inline-icon-button {
            width: 42px;
            min-width: 42px;
        }

        .rapport-line-section-summary {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            margin-bottom: 12px;
            padding: 9px 10px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .rapport-line-section-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: #e7f3fb;
            color: #0878bd;
        }

        .rapport-picker-section-context {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            max-width: 100%;
            margin-top: 8px;
            padding: 7px 9px;
            border: 1px solid #cfe5f8;
            border-radius: 8px;
            background: #eef7ff;
            color: #334155;
            font-size: 13px;
            font-weight: 650;
        }

        .rapport-picker-section-context[hidden] {
            display: none;
        }

        .rapport-picker-section-context strong {
            color: #0f6fb8;
        }

        .rapport-picker-section-context-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #0878bd;
        }

        .rapport-picker-section-context-icon svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .rapport-picker-section-context .small-button,
        .rapport-line-section-summary .small-button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 30px;
        }

        .rapport-line-section-text {
            display: grid;
            gap: 2px;
            min-width: 0;
        }

        .rapport-line-section-text span {
            color: #64748b;
            font-size: 12px;
            font-weight: 750;
        }

        .rapport-line-section-text strong {
            overflow: hidden;
            color: #172033;
            font-size: 14px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-quantity-control {
            display: grid;
            grid-template-columns: 38px minmax(72px, 1fr) 38px;
            gap: 6px;
            align-items: center;
            touch-action: manipulation;
        }

        .rapport-quantity-control input[type="number"] {
            width: 100%;
            min-width: 0;
            text-align: center;
            box-sizing: border-box;
        }

        .rapport-quantity-step {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            min-width: 38px;
            height: 38px;
            padding: 0;
            border: 1px solid #a9c4dd;
            border-radius: 8px;
            background: #fff;
            color: #175a8f;
            font: inherit;
            font-size: 20px;
            font-weight: 850;
            line-height: 1;
            cursor: pointer;
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .rapport-quantity-step:hover,
        .rapport-quantity-step:focus-visible {
            border-color: #0f6fb8;
            background: #edf5ff;
            outline: none;
        }

        @media (max-width: 620px) {
            .rapport-linked-suggestion {
                grid-template-columns: 38px minmax(0, 1fr);
            }

            .rapport-linked-suggestion-actions {
                grid-column: 2;
                flex-wrap: wrap;
            }
        }

        .rapport-line-summary-main {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .rapport-line-summary-body {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .rapport-line-summary-image,
        .article-thumb {
            display: block;
            width: 44px;
            height: 44px;
            object-fit: contain;
            object-position: center;
            border-radius: 6px;
            border: 1px solid #dbe4ef;
            background: #fff;
            flex: 0 0 auto;
        }

        .rapport-line-summary-title {
            font-weight: 700;
            color: #1f2937;
            overflow-wrap: anywhere;
        }

        .rapport-line-summary-meta,
        .rapport-line-summary-note {
            color: #475569;
            font-size: 13px;
            overflow-wrap: anywhere;
        }

        .rapport-line-summary-note {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .rapport-line-summary-shop,
        .rapport-line-summary-shop:visited {
            color: #0f766e;
            font-weight: 600;
            text-decoration: none;
        }

        .rapport-line-summary-actions {
            position: relative;
            display: flex;
            justify-content: flex-end;
        }

        .rapport-line-summary-actions.has-menu > .small-button:not(.rapport-line-action-button) {
            display: none;
        }

        .rapport-line-action-button {
            width: 34px;
            min-width: 34px;
            height: 34px;
            padding: 0;
            border-radius: 999px;
            font-size: 20px;
            line-height: 1;
        }

        .rapport-line-action-menu {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            z-index: 20;
            min-width: 150px;
            padding: 5px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
        }

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

        .rapport-line-action-menu button,
        .rapport-line-action-menu a {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 8px 10px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: #1f2937;
            font: inherit;
            text-align: left;
            text-decoration: none;
            cursor: pointer;
            box-sizing: border-box;
        }

        .rapport-line-action-menu svg {
            width: 16px;
            height: 16px;
            flex: 0 0 auto;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .rapport-line-action-menu button:hover,
        .rapport-line-action-menu a:hover {
            background: #f1f5f9;
        }

        .rapport-line-action-menu .danger-menu-item {
            color: #b91c1c;
        }

        .rapport-line-empty {
            margin-bottom: 16px;
        }

        .rapport-modal[hidden],
        .rapport-modal-fields[hidden],
        .rapport-line-empty[hidden] {
            display: none;
        }

        .rapport-modal {
            position: fixed;
            inset: 0;
            z-index: var(--app-layer-modal-backdrop);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
        }

        .rapport-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.54);
        }

        .rapport-modal-card {
            position: relative;
            z-index: 1;
            width: min(900px, 100%);
            max-height: min(780px, calc(100vh - 36px));
            overflow-y: auto;
            padding: 18px;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28);
            box-sizing: border-box;
        }

        body.rapport-material-picker-open {
            position: fixed;
            left: 0;
            right: 0;
            width: 100%;
            overflow: hidden;
        }

        .rapport-material-picker-modal {
            z-index: 1310;
            align-items: flex-start;
            padding: calc(var(--rapport-topbar-height, 52px) + 14px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px));
            overflow: hidden;
            overscroll-behavior: contain;
            box-sizing: border-box;
        }

        .rapport-material-picker-modal .rapport-modal-backdrop,
        .rapport-line-modal-over-picker .rapport-modal-backdrop {
            touch-action: none;
        }

        .rapport-material-picker-card {
            width: min(1360px, 100%);
            height: min(860px, calc(100dvh - var(--rapport-topbar-height, 52px) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
            max-height: calc(100dvh - var(--rapport-topbar-height, 52px) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
            overflow: hidden;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            padding: 16px;
            overscroll-behavior: contain;
        }

        .rapport-material-picker-header {
            align-items: center;
            margin-bottom: 8px;
        }

        .rapport-material-picker-crumbs {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            min-width: 0;
            color: #64748b;
            font-size: 13px;
        }

        .rapport-material-picker-crumbs button {
            padding: 0;
            border: 0;
            background: transparent;
            color: #0f6fb8;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
        }

        .rapport-material-picker-shell {
            display: grid;
            grid-template-columns: clamp(240px, 22vw, 280px) minmax(0, 1fr) clamp(230px, 22vw, 290px);
            gap: 12px;
            min-height: 0;
        }

        .rapport-material-picker-sidebar,
        .rapport-material-picker-main,
        .rapport-material-picker-selection {
            min-height: 0;
            overflow: hidden;
        }

        .rapport-material-picker-sidebar,
        .rapport-material-picker-selection {
            display: grid;
            align-content: start;
            gap: 10px;
            padding: 10px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .rapport-material-picker-sidebar-heading {
            color: #334155;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .rapport-material-picker-group-list,
        .rapport-material-picker-category-list,
        .rapport-material-picker-results,
        .rapport-material-picker-selection-list {
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
        }

        .rapport-material-picker-group-list {
            display: grid;
            align-content: start;
            grid-auto-rows: max-content;
            gap: 8px;
            max-height: min(560px, calc(100dvh - var(--rapport-topbar-height, 52px) - 210px));
        }

        .rapport-material-picker-group-button,
        .rapport-material-picker-category-button {
            display: grid;
            gap: 4px;
            width: 100%;
            min-height: 52px;
            padding: 11px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            color: #1f2937;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .rapport-material-picker-group-button.active,
        .rapport-material-picker-category-button.active,
        .rapport-material-picker-group-button:hover,
        .rapport-material-picker-category-button:hover,
        .rapport-material-picker-group-button:focus-visible,
        .rapport-material-picker-category-button:focus-visible {
            border-color: #0f6fb8;
            box-shadow: 0 0 0 2px rgba(15, 111, 184, 0.12);
            outline: none;
        }

        .rapport-material-picker-group-button strong,
        .rapport-material-picker-category-button strong {
            font-size: 14px;
            line-height: 1.2;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .rapport-material-picker-group-button span,
        .rapport-material-picker-category-button span {
            color: #64748b;
            font-size: 12px;
        }

        .rapport-material-picker-full-button {
            width: 100%;
        }

        .rapport-material-picker-main {
            display: grid;
            grid-template-rows: auto auto minmax(0, 1fr);
            gap: 8px;
        }

        .rapport-material-picker-nav-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
            min-height: 34px;
        }

        .rapport-material-picker-search-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
        }

        .rapport-material-picker-search-row input {
            width: 100%;
            min-height: 44px;
            box-sizing: border-box;
        }

        .rapport-material-picker-section {
            min-height: 0;
        }

        .rapport-material-picker-section-heading,
        .rapport-material-picker-result-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 5px;
            color: #475569;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .rapport-material-picker-browser {
            display: grid;
            grid-template-rows: auto auto minmax(0, 1fr) auto;
            align-content: start;
        }

        .rapport-material-picker-category-panel {
            display: grid;
            gap: 8px;
            margin-bottom: 10px;
            padding: 9px;
            border: 1px solid #dbeafe;
            border-radius: 8px;
            background: #eff6ff;
            max-height: 150px;
            overflow: hidden;
        }

        .rapport-material-picker-category-panel[hidden] {
            display: none;
        }

        .rapport-material-picker-category-heading {
            color: #1e3a8a;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .rapport-material-picker-category-list {
            display: grid;
            align-content: start;
            grid-auto-rows: max-content;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            max-height: 104px;
        }

        .rapport-material-picker-results {
            display: grid;
            align-content: start;
            grid-auto-rows: max-content;
            gap: 8px;
            padding-right: 2px;
        }

        .rapport-material-picker-article {
            display: grid;
            grid-template-columns: 70px minmax(0, 1fr) 44px;
            gap: 12px;
            align-items: center;
            width: 100%;
            height: 90px;
            min-height: 90px;
            padding: 11px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            color: #1f2937;
            font: inherit;
            text-align: left;
            cursor: pointer;
            box-sizing: border-box;
        }

        .rapport-material-picker-article:hover,
        .rapport-material-picker-article:focus-visible {
            border-color: #0f6fb8;
            box-shadow: 0 0 0 2px rgba(15, 111, 184, 0.12);
            outline: none;
        }

        .rapport-material-picker-thumb,
        .rapport-material-picker-thumb-placeholder {
            width: 62px;
            height: 62px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .rapport-material-picker-thumb {
            object-fit: contain;
        }

        .rapport-material-picker-thumb-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-size: 20px;
            font-weight: 800;
        }

        .rapport-material-picker-article-main {
            display: grid;
            gap: 4px;
            min-width: 0;
            overflow: hidden;
        }

        .rapport-material-picker-article-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-weight: 800;
            font-size: clamp(15px, 1.25vw, 17px);
            line-height: 1.22;
            overflow-wrap: normal;
        }

        .rapport-material-picker-article-meta,
        .rapport-material-picker-article-tags {
            color: #64748b;
            font-size: clamp(12px, 0.95vw, 13px);
            line-height: 1.3;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-material-picker-add-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 999px;
            background: #0f6fb8;
            color: #fff;
            font-size: 24px;
            line-height: 1;
            flex-shrink: 0;
        }

        .rapport-material-picker-selection {
            grid-template-rows: auto minmax(0, 1fr) auto;
        }

        .rapport-material-picker-selection-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }

        .rapport-material-picker-selection-heading div {
            display: grid;
            gap: 2px;
        }

        .rapport-material-picker-selection-heading span {
            color: #64748b;
            font-size: 12px;
        }

        .rapport-material-picker-selection-list {
            display: grid;
            align-content: start;
            gap: 6px;
            max-height: none;
        }

        .rapport-material-picker-selection-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 6px;
            align-items: center;
            padding: 7px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
        }

        .rapport-material-picker-selection-item .rapport-material-picker-thumb,
        .rapport-material-picker-selection-item .rapport-material-picker-thumb-placeholder {
            display: none;
        }

        .rapport-material-picker-selection-main {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .rapport-material-picker-selection-main strong {
            font-size: 12px;
            overflow-wrap: anywhere;
        }

        .rapport-material-picker-selection-main span {
            color: #64748b;
            font-size: 12px;
            overflow-wrap: anywhere;
        }

        .rapport-material-picker-selection-remove {
            width: 32px;
            min-width: 32px;
            height: 32px;
            padding: 0;
        }

        .rapport-material-picker-selection-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            align-self: end;
        }

        .rapport-service-picker-modal .rapport-material-picker-browser {
            grid-template-rows: auto minmax(0, 1fr) auto;
        }

        .rapport-service-picker-position {
            grid-template-columns: 48px minmax(0, 1fr) 44px;
        }

        .rapport-service-picker-position .rapport-material-picker-thumb-placeholder {
            width: 44px;
            height: 44px;
            font-size: 15px;
        }

        @media (max-width: 1100px) {
            .rapport-material-picker-shell {
                grid-template-columns: clamp(220px, 24vw, 250px) minmax(0, 1fr) clamp(220px, 23vw, 250px);
            }

            .rapport-material-picker-article {
                grid-template-columns: 62px minmax(0, 1fr) 40px;
                height: 82px;
                min-height: 82px;
                gap: 10px;
            }

            .rapport-material-picker-thumb,
            .rapport-material-picker-thumb-placeholder {
                width: 56px;
                height: 56px;
            }
        }

        @media (max-width: 820px) {
            .rapport-material-picker-card {
                height: calc(100dvh - var(--rapport-topbar-height, 52px) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
                overflow: hidden;
            }

            .rapport-material-picker-shell {
                grid-template-columns: minmax(210px, 34vw) minmax(0, 1fr);
            }

            .rapport-material-picker-selection {
                grid-column: 1 / -1;
                grid-template-rows: auto minmax(0, 120px) auto;
            }

            .rapport-material-picker-selection-list {
                max-height: 120px;
            }

            .rapport-material-picker-article {
                grid-template-columns: 58px minmax(0, 1fr) 38px;
                height: 78px;
                min-height: 78px;
            }

            .rapport-material-picker-thumb,
            .rapport-material-picker-thumb-placeholder {
                width: 52px;
                height: 52px;
            }
        }

        @media (min-width: 621px) and (max-width: 820px) {
            .rapport-material-picker-modal .rapport-material-picker-shell {
                grid-template-columns: clamp(168px, 24vw, 200px) minmax(230px, 1fr) clamp(168px, 23vw, 190px);
                gap: 8px;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection {
                grid-column: auto;
                grid-template-rows: auto minmax(0, 1fr) auto;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-list {
                max-height: none;
            }

            .rapport-material-picker-modal .rapport-material-picker-article {
                grid-template-columns: 46px minmax(0, 1fr) 34px;
                height: 72px;
                min-height: 72px;
                gap: 7px;
                padding: 8px;
            }

            .rapport-material-picker-modal .rapport-material-picker-thumb,
            .rapport-material-picker-modal .rapport-material-picker-thumb-placeholder {
                width: 44px;
                height: 44px;
            }

            .rapport-material-picker-modal .rapport-material-picker-article-title {
                font-size: 14px;
            }

            .rapport-material-picker-modal .rapport-material-picker-sidebar,
            .rapport-material-picker-modal .rapport-material-picker-selection {
                gap: 8px;
                padding: 8px;
            }
        }

        @media (max-width: 620px) {
            .rapport-material-picker-shell,
            .rapport-material-picker-search-row,
            .rapport-material-picker-selection-actions {
                grid-template-columns: 1fr;
            }

            .rapport-material-picker-sidebar {
                max-height: 170px;
            }

            .rapport-material-picker-selection {
                grid-column: auto;
            }
        }

        /* --- Material picker r41: full height, sidebar accordion, tablet layouts --- */
        .rapport-material-picker-card {
            width: min(1480px, 100%);
            height: calc(100dvh - var(--rapport-topbar-height, 52px) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        }

        .rapport-material-picker-sidebar {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        .rapport-material-picker-sidebar > * {
            flex: 0 0 auto;
        }

        .rapport-material-picker-sidebar > .rapport-material-picker-group-list {
            flex: 1 1 auto;
            max-height: none;
        }

        .rapport-material-picker-sidebar .rapport-picker-section-context {
            flex-wrap: wrap;
            row-gap: 6px;
        }

        .rapport-material-picker-group {
            display: grid;
            border-radius: 8px;
        }

        .rapport-material-picker-group.is-open {
            border: 1px solid #0f6fb8;
            background: #fff;
            box-shadow: 0 0 0 2px rgba(15, 111, 184, 0.1);
        }

        .rapport-material-picker-group .rapport-material-picker-group-button {
            position: relative;
            padding-right: 34px;
        }

        .rapport-material-picker-group.is-open .rapport-material-picker-group-button {
            border-color: transparent;
            box-shadow: none;
            background: #eff6ff;
        }

        .rapport-material-picker-group.is-open .rapport-material-picker-group-button:not(.active) {
            background: #fff;
        }

        .rapport-material-picker-group-caret {
            position: absolute;
            top: 50%;
            right: 13px;
            width: 8px;
            height: 8px;
            margin-top: -6px;
            border-right: 2px solid #64748b;
            border-bottom: 2px solid #64748b;
            transform: rotate(-45deg);
            transition: transform 0.15s ease;
        }

        .rapport-material-picker-group-button.is-open .rapport-material-picker-group-caret {
            margin-top: -7px;
            transform: rotate(45deg);
            border-color: #0f6fb8;
        }

        .rapport-material-picker-subcategories {
            display: grid;
            gap: 2px;
            padding: 2px 6px 8px 10px;
        }

        .rapport-material-picker-subcategory-button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
            min-height: 40px;
            padding: 8px 10px;
            border: 0;
            border-left: 3px solid #dbe4ef;
            border-radius: 0 6px 6px 0;
            background: transparent;
            color: #1f2937;
            font: inherit;
            font-size: 13px;
            font-weight: 650;
            text-align: left;
            cursor: pointer;
        }

        .rapport-material-picker-subcategory-button span {
            min-width: 0;
            overflow-wrap: anywhere;
            hyphens: auto;
        }

        .rapport-material-picker-group,
        .rapport-material-picker-group-button,
        .rapport-material-picker-subcategory-button {
            min-width: 0;
        }

        .rapport-material-picker-subcategory-button small {
            flex: 0 0 auto;
            min-width: 24px;
            padding: 1px 7px;
            border-radius: 999px;
            background: #eef2f7;
            color: #64748b;
            font-size: 11px;
            text-align: center;
        }

        .rapport-material-picker-subcategory-button:hover,
        .rapport-material-picker-subcategory-button:focus-visible {
            background: #f1f5f9;
            outline: none;
        }

        .rapport-material-picker-subcategory-button.active {
            border-left-color: #0f6fb8;
            background: #eff6ff;
            color: #0b5d9c;
        }

        .rapport-material-picker-subcategory-button.active small {
            background: #0f6fb8;
            color: #fff;
        }

        #rapport-material-picker-category-panel {
            display: none;
        }

        .rapport-material-picker-article-price {
            color: #047857;
            font-weight: 800;
        }

        .rapport-material-picker-results {
            padding-bottom: 6px;
        }

        /* Tablet portrait (iPad mini/Air/Pro 11 hochkant): list + sidebar, selection as bottom bar. */
        @media (min-width: 621px) and (max-width: 960px) {
            .rapport-material-picker-modal .rapport-material-picker-shell {
                grid-template-columns: clamp(200px, 30vw, 250px) minmax(0, 1fr);
                grid-template-rows: minmax(0, 1fr) auto;
                gap: 10px;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection {
                grid-column: 1 / -1;
                display: grid;
                grid-template-columns: auto minmax(0, 1fr) auto;
                grid-template-rows: auto;
                align-items: center;
                gap: 10px;
                padding: 8px 10px;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection > .form-error {
                grid-column: 1 / -1;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-heading {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-list {
                grid-auto-flow: column;
                grid-auto-columns: minmax(150px, 210px);
                align-content: center;
                max-height: 64px;
                overflow-x: auto;
                overflow-y: hidden;
                touch-action: pan-x;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-list:empty {
                display: none;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-main strong,
            .rapport-material-picker-modal .rapport-material-picker-selection-main span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-empty {
                padding: 8px 4px;
                color: #64748b;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-actions {
                grid-template-columns: auto auto;
            }

            .rapport-material-picker-modal .rapport-material-picker-article {
                grid-template-columns: 54px minmax(0, 1fr) 38px;
                height: 78px;
                min-height: 78px;
                gap: 10px;
                padding: 9px;
            }

            .rapport-material-picker-modal .rapport-material-picker-thumb,
            .rapport-material-picker-modal .rapport-material-picker-thumb-placeholder {
                width: 50px;
                height: 50px;
            }

            .rapport-material-picker-modal .rapport-material-picker-sidebar {
                padding: 8px;
                gap: 8px;
            }

            .rapport-material-picker-modal .rapport-material-picker-group-button {
                min-height: 46px;
                padding: 9px 30px 9px 10px;
            }
        }

        /* Phones: sidebar on top (scrolls), list in the middle, selection as a compact bar. */
        @media (max-width: 620px) {
            .rapport-material-picker-modal .rapport-material-picker-card {
                padding: 12px;
            }

            .rapport-material-picker-modal .rapport-material-picker-shell {
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: auto minmax(0, 1fr) auto;
                gap: 8px;
            }

            .rapport-material-picker-modal .rapport-material-picker-sidebar {
                max-height: min(230px, 28dvh);
                padding: 8px;
                gap: 6px;
            }

            .rapport-material-picker-modal .rapport-material-picker-sidebar .rapport-material-picker-full-button {
                display: none;
            }

            .rapport-material-picker-modal .rapport-material-picker-group-button {
                min-height: 42px;
                padding: 8px 30px 8px 10px;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection {
                grid-column: auto;
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                grid-template-rows: auto;
                align-items: center;
                gap: 8px;
                padding: 8px;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-heading {
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-list {
                grid-column: 1 / -1;
                grid-row: 2;
                grid-auto-flow: column;
                grid-auto-columns: minmax(140px, 180px);
                max-height: 60px;
                overflow-x: auto;
                overflow-y: hidden;
                touch-action: pan-x;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-list:empty,
            .rapport-material-picker-modal .rapport-material-picker-selection-empty {
                display: none;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-heading strong {
                white-space: nowrap;
            }

            .rapport-material-picker-modal .rapport-material-picker-selection-actions {
                grid-template-columns: auto auto;
            }

            .rapport-material-picker-modal .rapport-material-picker-nav-row {
                min-height: 0;
            }

            .rapport-material-picker-modal .rapport-material-picker-search-row {
                grid-template-columns: minmax(0, 1fr) auto;
            }

            .rapport-material-picker-modal .rapport-material-picker-search-row .button-secondary {
                padding-inline: 10px;
            }
        }

        .rapport-line-modal-over-picker {
            z-index: 1320;
            align-items: flex-start;
            padding: calc(var(--rapport-topbar-height, 52px) + 14px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
            overflow: hidden;
            overscroll-behavior: contain;
            box-sizing: border-box;
        }

        .rapport-line-modal-over-picker .rapport-modal-card {
            display: grid;
            grid-template-rows: auto auto minmax(0, 1fr) auto;
            width: min(760px, 100%);
            max-height: calc(100dvh - var(--rapport-topbar-height, 52px) - 26px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
            overflow: hidden;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .rapport-line-modal-over-picker .rapport-material-modal-layout,
        .rapport-line-modal-over-picker .rapport-material-modal-layout.has-material-image-preview {
            grid-template-columns: minmax(0, 1fr);
        }

        .rapport-line-modal-over-picker .rapport-material-image-card {
            display: none;
        }

        .rapport-line-modal-over-picker .rapport-material-detail-catalogue-fields,
        .rapport-line-modal-over-picker .rapport-service-detail-category-row,
        .rapport-line-modal-over-picker:not(.rapport-line-modal-manual-detail) .rapport-material-detail-article-row,
        .rapport-line-modal-over-picker:not(.rapport-line-modal-manual-detail) .rapport-service-detail-position-row {
            display: none;
        }

        .rapport-line-modal-catalogue-material-detail .rapport-material-detail-catalogue-fields,
        .rapport-line-modal-catalogue-material-detail .rapport-material-detail-article-row {
            display: none;
        }

        .rapport-line-modal-over-picker:not(.rapport-line-modal-manual-detail) .rapport-material-second-dimension-row[data-compact-hidden="1"] {
            display: none;
        }

        .rapport-line-modal-over-picker .rapport-modal-fields {
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            gap: 10px;
            padding-right: 2px;
        }

        .rapport-line-modal-over-picker .rapport-material-modal-main {
            gap: 10px;
        }

        .rapport-line-modal-over-picker .rapport-modal-note {
            min-height: 72px;
            max-height: 110px;
        }

        .rapport-line-modal-over-picker .rapport-modal-actions {
            position: sticky;
            bottom: 0;
            z-index: 2;
            margin-top: 10px;
            padding-top: 10px;
            background: #fff;
        }

        .rapport-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        .rapport-modal-header h2 {
            margin: 0;
        }

        .rapport-modal-close {
            flex: 0 0 auto;
            width: 36px;
            min-width: 36px;
            height: 36px;
            padding: 0;
            font-size: 18px;
        }

        .rapport-modal-fields {
            display: grid;
            gap: 12px;
        }

        .rapport-line-detail-summary {
            display: grid;
            grid-template-columns: 56px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            padding: 8px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .rapport-line-detail-summary[hidden] {
            display: none;
        }

        .rapport-line-detail-summary-image,
        .rapport-line-detail-summary-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            color: #64748b;
            font-size: 18px;
            font-weight: 800;
            overflow: hidden;
        }

        .rapport-line-detail-summary-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .rapport-line-detail-summary-image img[hidden],
        .rapport-line-detail-summary-image span[hidden] {
            display: none;
        }

        .rapport-line-detail-summary-text {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .rapport-line-detail-summary-text strong {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: #111827;
            font-size: 16px;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }

        .rapport-line-detail-summary-text span {
            overflow: hidden;
            color: #64748b;
            font-size: 13px;
            line-height: 1.3;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-modal-card input[data-dimension-selector] {
            cursor: pointer;
            background: #fff;
            caret-color: transparent;
        }

        .rapport-modal-card input[data-dimension-selector]:focus {
            border-color: #0f6fb8;
            box-shadow: 0 0 0 2px rgba(15, 111, 184, 0.14);
            outline: none;
        }

        .rapport-dimension-chooser-modal {
            z-index: 1330;
            align-items: flex-start;
            padding: calc(var(--rapport-topbar-height, 52px) + 22px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
            overflow: hidden;
        }

        .rapport-dimension-chooser-card {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
            width: min(540px, 100%);
            max-height: calc(100dvh - var(--rapport-topbar-height, 52px) - 44px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
            overflow: hidden;
        }

        .rapport-dimension-chooser-subtitle {
            margin: 4px 0 0;
            color: #64748b;
            font-size: 13px;
        }

        .rapport-dimension-chooser-options {
            display: grid;
            align-content: start;
            grid-auto-rows: max-content;
            gap: 8px;
            min-height: 0;
            max-height: calc(100dvh - var(--rapport-topbar-height, 52px) - 220px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            padding-right: 2px;
        }

        .rapport-dimension-choice-button {
            min-height: 48px;
            padding: 11px 12px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            color: #111827;
            font: inherit;
            font-weight: 700;
            text-align: left;
            cursor: pointer;
        }

        .rapport-dimension-choice-button.active,
        .rapport-dimension-choice-button:hover,
        .rapport-dimension-choice-button:focus-visible {
            border-color: #0f6fb8;
            box-shadow: 0 0 0 2px rgba(15, 111, 184, 0.14);
            outline: none;
        }

        .rapport-dimension-chooser-custom-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
            margin-top: 10px;
        }

        .rapport-dimension-chooser-custom-row[hidden] {
            display: none;
        }

        .rapport-dimension-chooser-custom-row .rapport-inline-icon-button {
            width: 42px;
            min-width: 42px;
        }

        .rapport-picker-clear-confirm-modal {
            z-index: 1340;
        }

        .rapport-picker-clear-confirm-card {
            width: min(440px, 100%);
        }

        .rapport-picker-clear-confirm-card p {
            margin: 0;
            color: #334155;
            line-height: 1.45;
        }

        .rapport-picker-clear-confirm-card .form-error {
            margin: 12px 0 0;
        }

        .rapport-picker-clear-confirm-actions {
            justify-content: flex-end;
        }

        .rapport-material-modal-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 14px;
            align-items: start;
        }

        .rapport-material-modal-layout.has-material-image-preview {
            grid-template-columns: minmax(0, 1fr) 220px;
        }

        .rapport-material-modal-main {
            display: grid;
            gap: 12px;
            min-width: 0;
        }

        .rapport-material-npk-status {
            min-height: 26px;
            padding: 7px 10px;
            border: 1px solid #dbeafe;
            border-radius: 8px;
            background: #eff6ff;
            color: #1e3a8a;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.35;
        }

        .rapport-material-npk-status[data-status="article"],
        .rapport-material-npk-status[data-status="category"],
        .rapport-material-npk-status[data-status="missing"] {
            border-color: #fed7aa;
            background: #fff7ed;
            color: #9a3412;
        }

        .rapport-material-image-card {
            display: grid;
            gap: 8px;
            min-height: 180px;
            padding: 10px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
            box-sizing: border-box;
        }

        .rapport-material-image-card[hidden],
        .rapport-material-image-card img[hidden],
        .rapport-material-image-placeholder[hidden] {
            display: none;
        }

        .rapport-material-image-label {
            color: #475569;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .rapport-material-image-card img {
            width: 100%;
            max-height: 170px;
            object-fit: contain;
            border-radius: 6px;
            background: #fff;
        }

        .rapport-material-image-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 140px;
            border: 1px dashed #cbd5e1;
            border-radius: 6px;
            color: #64748b;
            font-size: 13px;
            text-align: center;
        }

        .rapport-clearable-input {
            position: relative;
        }

        .rapport-clearable-input input {
            padding-right: 42px;
        }

        .rapport-input-clear {
            position: absolute;
            top: 50%;
            right: 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 0;
            transform: translateY(-50%);
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: #64748b;
            cursor: pointer;
            font: inherit;
            font-size: 20px;
            line-height: 1;
        }

        .rapport-input-clear[hidden] {
            display: none;
        }

        .rapport-input-clear:hover,
        .rapport-input-clear:focus {
            background: #e2e8f0;
            color: #1f2937;
            outline: none;
        }

        .rapport-modal-note-row {
            grid-column: 1 / -1;
            width: 100%;
        }

        .rapport-modal-note {
            min-height: 130px;
            width: 100%;
            box-sizing: border-box;
            resize: vertical;
        }

        .rapport-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 16px;
        }

        .rapport-form-section {
            margin-bottom: 18px;
        }

        .rapport-form-section h2 {
            margin-top: 8px;
            margin-bottom: 12px;
        }

        .linked-appointment-box {
            display: block;
            height: 42px;
            margin-bottom: 12px;
            padding: 5px 8px 5px 10px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
            color: #334155;
            box-sizing: border-box;
        }

        .linked-appointment-box.muted {
            color: #64748b;
        }

        .linked-appointment-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            height: 100%;
            min-width: 0;
        }

        .linked-appointment-text {
            min-width: 0;
            color: #334155;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.25;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .linked-appointment-box.muted .linked-appointment-text {
            color: #64748b;
            font-weight: 600;
        }

        .linked-appointment-actions {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 6px;
        }

        .linked-appointment-actions .small-button {
            margin-left: 0;
        }

        .linked-appointment-menu-wrap {
            position: relative;
            display: flex;
        }

        .linked-appointment-menu-wrap[hidden] {
            display: none;
        }

        .linked-appointment-menu-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            min-width: 28px;
            height: 28px;
            padding: 0;
            border: 1px solid #cbd5e1;
            border-radius: 999px;
            background: #fff;
            color: #334155;
            font-size: 18px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
        }

        .linked-appointment-menu-toggle:hover,
        .linked-appointment-menu-toggle:focus {
            background: #e2e8f0;
            color: #0f172a;
            outline: none;
        }

        .linked-appointment-menu {
            top: calc(100% + 6px);
            right: 0;
            min-width: 190px;
        }

        .rapport-appointment-modal-card {
            width: min(1180px, 100%);
        }

        .rapport-appointment-picker-nav {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            margin-bottom: 12px;
            text-align: center;
        }

        .rapport-appointment-picker-days {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 8px;
        }

        .rapport-appointment-picker-day {
            min-width: 0;
            padding: 8px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .rapport-appointment-picker-day h3 {
            margin: 0 0 8px;
            color: #334155;
            font-size: 14px;
        }

        .rapport-appointment-picker-list {
            display: grid;
            gap: 7px;
        }

        .rapport-appointment-picker-empty {
            color: #64748b;
            font-size: 12px;
        }

        .rapport-appointment-picker-card {
            display: grid;
            gap: 3px;
            width: 100%;
            padding: 8px;
            border: 1px solid #cbd5e1;
            border-radius: 7px;
            background: #fff;
            color: #1f2937;
            font: inherit;
            text-align: left;
            box-sizing: border-box;
        }

        .rapport-appointment-picker-card:not(:disabled):hover,
        .rapport-appointment-picker-card:not(:disabled):focus {
            border-color: var(--brand-blue-border);
            background: var(--brand-blue-soft);
            outline: none;
        }

        .rapport-appointment-picker-card:disabled {
            cursor: default;
            opacity: 0.72;
        }

        .rapport-appointment-picker-card strong,
        .rapport-appointment-picker-card span {
            overflow-wrap: anywhere;
        }

        .rapport-appointment-picker-card strong {
            color: #1f2937;
            font-size: 13px;
            line-height: 1.25;
        }

        .rapport-appointment-picker-card span {
            color: #475569;
            font-size: 12px;
        }

        .rapport-appointment-picker-existing {
            display: grid;
            gap: 4px;
            margin-top: 4px;
            color: #92400e;
            font-size: 12px;
        }

        .rapport-appointment-picker-existing a {
            color: var(--brand-blue-dark);
            font-weight: 700;
        }

        .rapport-material-lines {
            display: grid;
            gap: 10px;
            margin-bottom: 16px;
        }

        .rapport-line-card {
            display: grid;
            align-items: center;
            gap: 8px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .rapport-material-line {
            display: grid;
            grid-template-columns: minmax(220px, 2fr) minmax(100px, 0.7fr) minmax(160px, 1fr);
            gap: 8px;
        }

        .rapport-material-entry-line {
            grid-template-columns:
                minmax(110px, 1.4fr)
                minmax(110px, 1.4fr)
                minmax(180px, 2fr)
                minmax(78px, 0.9fr)
                minmax(68px, 0.7fr)
                minmax(130px, 1.3fr)
                max-content;
        }

        .rapport-service-entry-line {
            grid-template-columns:
                minmax(120px, 1.4fr)
                minmax(190px, 2fr)
                minmax(78px, 0.9fr)
                minmax(68px, 0.7fr)
                minmax(130px, 1.3fr)
                max-content;
        }

        .rapport-line-card .catalogue-fields {
            display: contents;
        }

        .rapport-line-card .manual-fields {
            display: none;
        }

        .rapport-line-card.manual-entry-active .catalogue-fields {
            display: none;
        }

        .rapport-line-card.manual-entry-active .manual-fields {
            display: contents;
        }

        .rapport-line-card select,
        .rapport-line-card input {
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
        }

        .rapport-row-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            min-width: max-content;
        }

        .row-remove-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            min-width: 36px;
            height: 36px;
            padding: 0;
            border: 1px solid #d1d5db;
            background: #f8fafc;
            color: #334155;
            font-size: 18px;
            line-height: 1;
        }

        .row-remove-button:hover {
            background: #fee2e2;
            border-color: #fecaca;
            color: #991b1b;
        }

        .manual-toggle-button {
            height: 36px;
            padding: 0 9px;
            border: 1px solid #cbd5e1;
            background: #f8fafc;
            color: #1e293b;
            white-space: nowrap;
            font-weight: 600;
        }

        .manual-toggle-button:hover {
            background: #e2e8f0;
            color: #0f172a;
        }

        .rapport-note-textarea {
            min-height: 120px;
            width: 100%;
            box-sizing: border-box;
            resize: vertical;
        }

        .rapport-inline-form {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            flex-wrap: wrap;
        }

        .roadmap-card {
            display: grid;
            gap: 12px;
        }

        .roadmap-order {
            margin-top: 0;
        }

        .roadmap-card details {
            border-top: 1px solid #e5e7eb;
            padding-top: 10px;
        }

        .roadmap-card summary {
            cursor: pointer;
            font-weight: 700;
        }

        .roadmap-principle {
            margin-bottom: 0;
        }

        .rapport-checkbox-row {
            min-width: 220px;
        }

        .inline-checkbox-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .checkbox-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 0;
            font-weight: normal;
            white-space: nowrap;
        }

        .checkbox-pill input {
            width: auto;
        }

        .rapport-options-section {
            margin-top: 0;
        }

        .app-settings-lists .table-scroll,
        .app-table-card-standalone {
            overflow-x: auto;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        }

        .app-settings-lists .table-scroll {
            margin-bottom: 18px;
        }

        .app-settings-lists .table-scroll table,
        .app-table-card-standalone table {
            margin: 0;
            border-radius: 0;
            box-shadow: none;
            font-size: 13px;
        }

        .app-settings-lists .table-scroll th,
        .app-table-card-standalone th {
            padding: 7px 9px;
            border-bottom: 1px solid #dbe4ef;
            background: #f8fafc;
            color: #334155;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .app-settings-lists .table-scroll td,
        .app-table-card-standalone td {
            padding: 7px 9px;
            border-bottom: 1px solid #edf2f7;
            vertical-align: middle;
        }

        .app-settings-lists .table-scroll tbody tr:nth-child(even),
        .app-table-card-standalone tbody tr:nth-child(even) {
            background: #fbfdff;
        }

        .app-settings-lists .table-scroll tbody tr:hover,
        .app-table-card-standalone tbody tr:hover {
            background: #eef6ff;
        }

        .catalogue-edit-table tr[data-article-open-url] {
            cursor: pointer;
        }

        .catalogue-edit-table tr[data-article-open-url] a,
        .catalogue-edit-table tr[data-article-open-url] button,
        .catalogue-edit-table tr[data-article-open-url] summary,
        .catalogue-edit-table tr[data-article-open-url] input,
        .catalogue-edit-table tr[data-article-open-url] select {
            cursor: auto;
        }

        .material-catalogue-tabs,
        .rapport-catalogue-form {
            margin-bottom: 18px;
        }

        .rapport-catalogue-form {
            display: grid;
            gap: 12px;
            padding: 16px;
        }

        .article-crud-shell {
            display: grid;
            gap: 12px;
            width: min(1120px, 100%);
            margin: 0 auto 18px;
        }

        .article-crud-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .article-crud-breadcrumb {
            display: flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
            color: #64748b;
            font-size: 12.5px;
            font-weight: 650;
        }

        .article-crud-breadcrumb a {
            color: var(--brand-blue);
            text-decoration: none;
        }

        .article-crud-breadcrumb strong {
            color: #0f172a;
        }

        .article-crud-form {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #dbe4ef;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
        }

        .article-crud-form .catalogue-form-header {
            margin: -2px -2px 0;
            padding: 4px 2px 12px;
        }

        .article-crud-header-meta {
            margin: 5px 0 0;
            color: #64748b;
            font-size: 12.5px;
            font-weight: 650;
        }

        .article-crud-tabs {
            display: flex;
            gap: 6px;
            padding: 4px;
            border: 1px solid #dbe4ef;
            border-radius: 12px;
            background: #f8fafc;
            overflow-x: auto;
        }

        .article-crud-tabs button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 0 13px;
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: #475569;
            font-size: 13px;
            font-weight: 750;
            white-space: nowrap;
            cursor: pointer;
        }

        .article-crud-tabs button:hover,
        .article-crud-tabs button:focus {
            background: #edf5ff;
            color: var(--brand-blue);
            outline: none;
        }

        .article-crud-tabs button.active-tab {
            background: #fff;
            color: var(--brand-blue);
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
        }

        .article-crud-panel[hidden] {
            display: none;
        }

        .article-crud-panel {
            width: 100%;
            box-sizing: border-box;
        }

        .article-crud-form .catalogue-form-section {
            border-radius: 14px;
            background: #fbfdff;
        }

        .article-crud-submit-form {
            display: contents;
        }

        .article-suggestion-panel {
            display: grid;
            gap: 14px;
            padding: 16px;
            border: 1px solid #dbe4ef;
            border-radius: 14px;
            background: #fbfdff;
        }

        .article-suggestion-toolbar {
            display: flex;
            justify-content: flex-end;
        }

        .article-suggestion-form {
            display: grid;
            gap: 12px;
        }

        .article-suggestion-list {
            display: grid;
            gap: 8px;
        }

        .article-suggestion-row {
            display: grid;
            grid-template-columns: 58px minmax(0, 1fr) auto auto;
            gap: 10px;
            align-items: center;
            min-height: 76px;
            padding: 10px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
        }

        .article-suggestion-target-media,
        .article-suggestion-selected-media {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
            color: #64748b;
            font-weight: 800;
            overflow: hidden;
        }

        .article-suggestion-target-media img,
        .article-suggestion-selected-media img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .article-suggestion-row.inactive {
            background: #f8fafc;
        }

        .article-suggestion-row.unavailable {
            border-color: #f5c2c7;
        }

        .article-suggestion-row-main {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .article-suggestion-row-main span,
        .article-suggestion-row-main small {
            color: #64748b;
            font-size: 12.5px;
        }

        .article-suggestion-actions {
            display: inline-flex;
            gap: 6px;
            align-items: center;
            justify-content: flex-end;
        }

        .article-suggestion-actions form {
            margin: 0;
        }

        .article-suggestion-menu {
            justify-self: end;
        }

        .article-suggestion-rule-modal {
            z-index: 1310;
            align-items: flex-start;
            padding: calc(var(--rapport-topbar-height, 52px) + 14px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px));
            overflow: hidden;
            box-sizing: border-box;
        }

        body.article-suggestion-rule-open {
            position: fixed;
            left: 0;
            right: 0;
            width: 100%;
            overflow: hidden;
        }

        .article-suggestion-rule-card {
            width: min(1360px, 100%);
            height: min(860px, calc(100dvh - var(--rapport-topbar-height, 52px) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
            max-height: calc(100dvh - var(--rapport-topbar-height, 52px) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
            overflow: hidden;
            display: grid;
            grid-template-rows: auto auto minmax(0, 1fr) auto;
            gap: 12px;
            padding: 16px;
        }

        .article-suggestion-rule-header p {
            margin: 4px 0 0;
            color: #64748b;
            font-size: 13px;
        }

        .article-suggestion-type-tabs {
            display: inline-grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4px;
            width: min(420px, 100%);
            padding: 4px;
            border: 1px solid #dbe4ef;
            border-radius: 12px;
            background: #f8fafc;
        }

        .article-suggestion-type-tab input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .article-suggestion-type-tab span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            padding: 0 12px;
            border-radius: 9px;
            color: #475569;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
        }

        .article-suggestion-type-tab input:checked + span {
            background: #fff;
            color: var(--brand-blue);
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
        }

        .article-suggestion-rule-body {
            display: grid;
            grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 340px);
            gap: 12px;
            min-height: 0;
            overflow: hidden;
        }

        .article-suggestion-picker-panel,
        .article-suggestion-config-panel {
            min-height: 0;
            overflow: hidden;
        }

        .article-suggestion-picker-shell {
            grid-template-columns: clamp(220px, 24vw, 270px) minmax(0, 1fr);
            height: 100%;
        }

        .article-suggestion-picker-shell .rapport-material-picker-search-row {
            grid-template-columns: 1fr;
        }

        .article-suggestion-picker-row.selected {
            border-color: #0f6fb8;
            background: #eef6ff;
            box-shadow: 0 0 0 2px rgba(15, 111, 184, 0.14);
        }

        .article-suggestion-config-panel {
            display: grid;
            align-content: start;
            gap: 12px;
            padding: 12px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .article-suggestion-selected-card {
            display: grid;
            grid-template-columns: 56px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            padding: 10px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
        }

        .article-suggestion-selected-card strong,
        .article-suggestion-selected-card span {
            display: block;
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .article-suggestion-selected-card span {
            margin-top: 3px;
            color: #64748b;
            font-size: 12.5px;
        }

        .article-suggestion-radio-stack {
            display: grid;
            gap: 7px;
        }

        .article-suggestion-radio-stack label,
        .article-suggestion-active-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 34px;
            font-weight: 650;
        }

        .article-suggestion-radio-stack input,
        .article-suggestion-active-toggle input {
            width: auto;
        }

        .article-suggestion-modal-actions {
            position: sticky;
            bottom: 0;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding-top: 10px;
            border-top: 1px solid #e2e8f0;
            background: #fff;
        }

        @media (max-width: 1000px) {
            .article-suggestion-rule-body {
                grid-template-columns: 1fr;
                overflow-y: auto;
            }

            .article-suggestion-picker-panel {
                min-height: 480px;
            }

            .article-suggestion-config-panel {
                overflow: visible;
            }
        }

        @media (max-width: 720px) {
            .article-suggestion-row {
                grid-template-columns: 46px minmax(0, 1fr) auto;
            }

            .article-suggestion-row .status-pill {
                grid-column: 2;
                justify-self: start;
            }

            .article-suggestion-menu {
                grid-column: 3;
                grid-row: 1 / span 2;
            }

            .article-suggestion-target-media {
                width: 44px;
                height: 44px;
            }

            .article-suggestion-picker-shell {
                grid-template-columns: 1fr;
            }

            .article-suggestion-picker-shell .rapport-material-picker-sidebar {
                max-height: 170px;
            }
        }

        .article-overview-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
            gap: 18px;
            align-items: start;
        }

        .article-overview-fields {
            display: grid;
            gap: 12px;
            min-width: 0;
        }

        .article-image-card {
            display: grid;
            gap: 9px;
            align-content: start;
            padding: 12px;
            border: 1px solid #dbe4ef;
            border-radius: 14px;
            background: #fff;
        }

        .article-image-picker {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 4 / 3;
            min-height: 170px;
            overflow: hidden;
            padding: 0;
            border: 1px dashed #b8c7d9;
            border-radius: 12px;
            background: #f8fafc;
            color: #64748b;
            cursor: pointer;
        }

        .article-image-picker img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #fff;
        }

        .article-image-picker-overlay {
            position: absolute;
            inset: auto 10px 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            padding: 0 10px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.78);
            color: #fff;
            font-size: 12px;
            font-weight: 750;
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 0.15s ease, transform 0.15s ease;
        }

        .article-image-picker:hover .article-image-picker-overlay,
        .article-image-picker:focus-visible .article-image-picker-overlay {
            opacity: 1;
            transform: translateY(0);
        }

        .article-image-placeholder {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 12px;
            color: #64748b;
            font-size: 13px;
            font-weight: 750;
        }

        .article-image-file-input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        .article-image-remove {
            margin-top: 2px;
        }

        .catalogue-form-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 4px;
            border-bottom: 1px solid #e2e8f0;
        }

        .catalogue-form-header h3 {
            margin: 0;
            font-size: 18px;
        }

        .catalogue-form-section {
            display: grid;
            gap: 12px;
            padding: 14px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #f8fafc;
        }

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

        .catalogue-form-section-heading h4 {
            margin: 0;
            color: #0f172a;
            font-size: 15px;
        }

        .catalogue-form-section-heading p {
            max-width: 680px;
            margin: 0;
            color: #64748b;
            font-size: 12px;
            line-height: 1.4;
            text-align: right;
        }

        .catalogue-icon-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            min-width: 34px;
            height: 34px;
            padding: 0;
            border: 1px solid var(--brand-blue);
            border-radius: 9px;
            background: var(--brand-blue);
            color: #fff;
            font-size: 20px;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
        }

        .catalogue-icon-button:hover,
        .catalogue-icon-button:focus {
            background: #0f5cb8;
            outline: none;
        }

        .article-dimension-add-actions {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex: 0 0 auto;
        }

        .article-dimension-add-menu {
            position: relative;
        }

        .article-dimension-add-menu[hidden] {
            display: none;
        }

        .article-dimension-add-menu-toggle {
            width: 30px;
            min-width: 30px;
            font-size: 15px;
            list-style: none;
        }

        .article-dimension-add-menu-toggle::-webkit-details-marker {
            display: none;
        }

        .article-dimension-add-menu-items {
            position: absolute;
            z-index: 30;
            top: calc(100% + 5px);
            right: 0;
            min-width: 245px;
            padding: 5px;
            border: 1px solid #cfd7e3;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
        }

        .article-dimension-add-menu-items button {
            width: 100%;
            min-height: 40px;
            padding: 8px 10px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: #1f2937;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .article-dimension-add-menu-items button:hover,
        .article-dimension-add-menu-items button:focus {
            background: #eef6fc;
            outline: none;
        }

        .article-dimension-add-menu-items button:disabled {
            color: #94a3b8;
            cursor: default;
        }

        .flexible-dimension-table {
            min-width: 680px;
            border: 1px solid #dbe4ef;
            border-radius: 12px;
            overflow: hidden;
        }

        .flexible-dimension-table th {
            white-space: nowrap;
        }

        .flexible-dimension-table td {
            vertical-align: top;
            background: #fff;
        }

        .flexible-dimension-cell {
            min-width: 220px;
        }

        .article-dimension-type-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            width: 100%;
        }

        .dimension-combo-input {
            width: 100%;
            box-sizing: border-box;
        }

        .article-dimension-autocomplete-results {
            z-index: 3500;
        }

        .dimension-row-remove-cell {
            width: 44px;
            text-align: center;
        }

        .article-crud-actions .button::before,
        .article-crud-actions .button-secondary::before {
            content: none !important;
        }

        .rapport-catalogue-form > .catalogue-form-actions.rapport-action-bar.article-crud-actions .button,
        .rapport-catalogue-form > .catalogue-form-actions.rapport-action-bar.article-crud-actions .button-secondary,
        .rapport-catalogue-form .article-crud-submit-form > .catalogue-form-actions.rapport-action-bar.article-crud-actions .button,
        .rapport-catalogue-form .article-crud-submit-form > .catalogue-form-actions.rapport-action-bar.article-crud-actions .button-secondary {
            min-height: 42px;
            padding: 9px 16px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 750;
        }

        .rapport-catalogue-form > .catalogue-form-actions.rapport-action-bar.article-crud-actions .button-secondary,
        .rapport-catalogue-form .article-crud-submit-form > .catalogue-form-actions.rapport-action-bar.article-crud-actions .button-secondary {
            border: 1px solid #a9c4dd;
            background: #fff;
            color: #175a8f;
        }

        @media (max-width: 720px) {
            .article-overview-layout {
                grid-template-columns: 1fr;
            }

            .article-dimension-type-grid {
                grid-template-columns: 1fr;
            }

            .article-crud-topbar {
                align-items: stretch;
            }

            .article-crud-topbar .modern-crud-action {
                width: 100%;
            }

            .article-crud-breadcrumb {
                width: 100%;
                overflow-x: auto;
                padding-bottom: 2px;
                white-space: nowrap;
            }

            .article-crud-tabs {
                margin-inline: -2px;
            }

            .catalogue-form-section-heading {
                display: grid;
            }

            .catalogue-form-section-heading p {
                text-align: left;
            }

            .article-dimension-add-actions .catalogue-icon-button {
                width: 42px;
                min-width: 42px;
                height: 42px;
            }

            .article-dimension-add-menu-items {
                min-width: min(270px, calc(100vw - 32px));
            }
        }

        .rapport-catalogue-form .form-row {
            margin-bottom: 0;
        }

        .rapport-catalogue-form label {
            margin-bottom: 4px;
            color: #475569;
            font-size: 12px;
        }

        .rapport-catalogue-form input,
        .rapport-catalogue-form select {
            min-height: 36px;
            padding: 6px 8px;
            font-size: 13px;
        }

        .rapport-catalogue-form input[type="checkbox"] {
            min-height: 0;
        }

        .rapport-catalogue-form > .actions,
        .rapport-catalogue-form .article-crud-submit-form > .actions {
            position: sticky;
            bottom: 0;
            z-index: 5;
            justify-content: flex-end;
            margin: 2px -14px -14px;
            padding: 10px 14px;
            border-top: 1px solid #dbe4ef;
            background: rgba(255, 255, 255, 0.96);
        }

        .rapport-catalogue-form > .catalogue-form-actions.rapport-action-bar,
        .rapport-catalogue-form .article-crud-submit-form > .catalogue-form-actions.rapport-action-bar {
            min-height: 64px;
            margin: 2px -16px -16px;
            border-radius: 0 0 12px 12px;
        }

        .rapport-catalogue-form > .catalogue-form-actions.rapport-action-bar .button,
        .rapport-catalogue-form > .catalogue-form-actions.rapport-action-bar .button-secondary,
        .rapport-catalogue-form .article-crud-submit-form > .catalogue-form-actions.rapport-action-bar .button,
        .rapport-catalogue-form .article-crud-submit-form > .catalogue-form-actions.rapport-action-bar .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 40px;
            min-width: 116px;
        }

        .rapport-catalogue-form > .catalogue-form-actions .button::before,
        .rapport-catalogue-form .article-crud-submit-form > .catalogue-form-actions .button::before,
        .catalogue-inline-edit-actions .button::before {
            content: "";
            width: 15px;
            height: 15px;
            background: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h10.6c.4 0 .8.2 1.1.4l2.4 2.4c.3.3.4.7.4 1.1V18a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 3.5 18V6A1.5 1.5 0 0 1 5 4.5Z'/%3E%3Cpath d='M7.5 19.5v-5c0-.6.4-1 1-1h7c.6 0 1 .4 1 1v5M8 4.5v3.2c0 .4.3.8.8.8h5.4c.4 0 .8-.3.8-.8V4.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h10.6c.4 0 .8.2 1.1.4l2.4 2.4c.3.3.4.7.4 1.1V18a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 3.5 18V6A1.5 1.5 0 0 1 5 4.5Z'/%3E%3Cpath d='M7.5 19.5v-5c0-.6.4-1 1-1h7c.6 0 1 .4 1 1v5M8 4.5v3.2c0 .4.3.8.8.8h5.4c.4 0 .8-.3.8-.8V4.5'/%3E%3C/svg%3E") center / contain no-repeat;
            flex: 0 0 auto;
        }

        .rapport-catalogue-form > .catalogue-form-actions .button-secondary::before,
        .rapport-catalogue-form .article-crud-submit-form > .catalogue-form-actions .button-secondary::before,
        .catalogue-inline-edit-actions .button-secondary::before {
            content: none;
        }

        .catalogue-inline-edit-actions .button,
        .catalogue-inline-edit-actions .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            box-sizing: border-box;
            min-height: 34px;
            height: 34px;
            margin: 0;
            padding: 0 12px;
            border-radius: 8px;
            font-size: 12.5px;
            font-weight: 750;
            line-height: 1;
        }

        .catalogue-inline-edit-actions .button {
            border-color: var(--brand-blue);
            background: var(--brand-blue);
            color: #fff;
        }

        .catalogue-inline-edit-actions .button-secondary {
            border: 1px solid #cbd5e1;
            background: #fff;
            color: #1f2937;
        }

        .option-page-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
            margin: 0;
            flex-wrap: wrap;
        }

        .option-page-actions .button,
        .option-page-actions .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            min-height: 34px;
            height: 34px;
            margin: 0;
            padding: 0 10px;
            border-radius: 5px;
            font-size: 13px;
            line-height: 1;
        }

        .rapport-options-section > .section-heading-row {
            align-items: center;
            margin-bottom: 8px;
        }

        .rapport-options-section > .section-heading-row h2,
        .rapport-options-section > .section-heading-row h3 {
            margin-bottom: 0;
        }

        .catalogue-read-row td {
            vertical-align: middle;
        }

        .catalogue-edit-row[hidden] {
            display: none;
        }

        .catalogue-edit-row:not([hidden]) {
            display: table-row;
        }

        .catalogue-edit-row:not([hidden]) > td {
            height: 0;
            padding: 0;
            border: 0;
        }

        .catalogue-inline-edit-panel {
            display: grid;
            grid-template-columns: repeat(2, minmax(180px, 1fr));
            align-items: end;
            gap: 10px;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: var(--app-layer-modal-panel);
            box-sizing: border-box;
            width: min(680px, calc(100vw - 40px));
            max-height: calc(100vh - 40px);
            max-height: calc(100dvh - 40px);
            overflow-y: auto;
            transform: translate(-50%, -50%);
            padding: 16px;
            border: 0;
            border-radius: 9px;
            background: #fff;
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.24);
        }

        .catalogue-inline-edit-panel-wide {
            grid-template-columns: repeat(3, minmax(140px, 1fr));
            width: min(760px, calc(100vw - 40px));
        }

        .catalogue-category-group-panel {
            grid-template-columns: repeat(2, minmax(180px, 1fr));
        }

        .catalogue-inline-edit-panel .catalogue-inline-edit-actions {
            grid-column: 1 / -1;
        }

        .catalogue-modal-header {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: -16px -16px 4px;
            padding: 13px 16px;
            border-bottom: 1px solid #dbe4ef;
        }

        .catalogue-modal-header h3 {
            margin: 0;
            color: #1f2937;
            font-size: 17px;
        }

        .catalogue-modal-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            min-width: 32px;
            height: 32px;
            padding: 0;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: #64748b;
            font-size: 20px;
            line-height: 1;
        }

        .catalogue-modal-close:hover,
        .catalogue-modal-close:focus-visible {
            background: #eef2f7;
            color: #1f2937;
            outline: none;
        }

        body.catalogue-modal-open,
        body.app-modal-open {
            overflow: hidden;
        }

        body.catalogue-modal-open::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: var(--app-layer-modal-backdrop);
            background: rgba(15, 23, 42, 0.46);
            backdrop-filter: blur(2px);
            pointer-events: auto;
        }

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

        .app-modal {
            position: fixed;
            inset: 0;
            z-index: var(--app-layer-modal-backdrop);
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 20px;
            background: rgba(15, 23, 42, 0.46);
            backdrop-filter: blur(2px);
            isolation: isolate;
        }

        .app-modal-panel {
            position: relative;
            z-index: var(--app-layer-modal-panel);
            box-sizing: border-box;
            width: min(620px, 100%);
            max-height: calc(100vh - 40px);
            overflow-y: auto;
            border-radius: 9px;
            background: #fff;
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.24);
        }

        .app-modal-form {
            display: grid;
            gap: 12px;
            margin: 0;
            padding: 16px;
        }

        .app-modal-form .form-row {
            margin: 0;
        }

        .app-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: -16px -16px 2px;
            padding: 13px 16px;
            border-bottom: 1px solid #dbe4ef;
        }

        .app-modal-header h2,
        .app-modal-header h3 {
            margin: 0;
            color: #1f2937;
            font-size: 17px;
        }

        .app-modal-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
            margin-top: 2px;
        }

        .app-modal-actions .button,
        .app-modal-actions .button-secondary {
            min-height: 34px;
            height: 34px;
            margin: 0;
        }

        .appointment-note-modal-panel {
            width: min(520px, 100%);
        }

        .appointment-details-modal-panel {
            width: min(620px, 100%);
        }

        .appointment-delete-modal-panel {
            width: min(460px, 100%);
            border-radius: 16px;
            box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.08);
            animation: appointment-delete-modal-in 160ms ease-out;
        }

        @keyframes appointment-delete-modal-in {
            from { opacity: 0; transform: translateY(8px) scale(0.98); }
            to { opacity: 1; transform: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            .appointment-delete-modal-panel { animation: none; }
        }

        .appointment-delete-modal {
            position: relative;
            display: grid;
            gap: 16px;
            padding: 22px 22px 18px;
        }

        .appointment-delete-modal-close {
            position: absolute;
            top: 12px;
            right: 12px;
            display: inline-grid;
            place-items: center;
            width: 32px;
            height: 32px;
            padding: 0;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: #64748b;
        }

        .appointment-delete-modal-close:hover,
        .appointment-delete-modal-close:focus-visible {
            background: #f1f5f9;
            color: #0f172a;
        }

        .appointment-delete-modal-close svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
        }

        .appointment-delete-modal-head {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
            gap: 14px;
            align-items: start;
            padding-right: 28px;
        }

        .appointment-delete-modal-icon {
            display: inline-grid;
            place-items: center;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: #fef2f2;
            color: #dc2626;
            box-shadow: inset 0 0 0 1px #fee2e2;
        }

        .appointment-delete-modal-icon svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .appointment-delete-modal-heading h2 {
            margin: 2px 0 4px;
            color: #0f172a;
            font-size: 18px;
            line-height: 1.3;
            letter-spacing: -0.01em;
        }

        .appointment-delete-modal-copy {
            margin: 0;
            color: #64748b;
            font-size: 14px;
            line-height: 1.5;
        }

        .appointment-delete-modal-summary {
            --appointment-delete-accent: var(--brand-blue);
            position: relative;
            display: grid;
            gap: 2px;
            padding: 10px 12px 10px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #f8fafc;
            overflow: hidden;
        }

        .appointment-delete-modal-summary[hidden] {
            display: none;
        }

        .appointment-delete-modal-summary::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 4px;
            background: var(--appointment-delete-accent);
        }

        .appointment-delete-summary-meta {
            color: #64748b;
            font-size: 12px;
            font-variant-numeric: tabular-nums;
        }

        .appointment-delete-summary-title {
            overflow: hidden;
            color: #0f172a;
            font-size: 14px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .appointment-delete-summary-badge {
            position: absolute;
            top: 9px;
            right: 10px;
            padding: 2px 8px;
            border-radius: 999px;
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            font-size: 11px;
            font-weight: 700;
        }

        .appointment-delete-modal-error {
            margin: 0;
            padding: 10px 12px;
            border: 1px solid #fecaca;
            border-radius: 10px;
            background: #fef2f2;
            color: #991b1b;
            font-size: 13px;
            line-height: 1.45;
        }

        .appointment-delete-modal-error[hidden],
        .appointment-delete-modal-actions[hidden] {
            display: none;
        }

        .appointment-delete-modal-actions {
            display: grid;
            gap: 8px;
        }

        .appointment-delete-option {
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr) 18px;
            gap: 12px;
            align-items: center;
            width: 100%;
            margin: 0;
            padding: 12px 14px 12px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #fff;
            color: #0f172a;
            font: inherit;
            text-align: left;
            transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease, transform 120ms ease;
        }

        .appointment-delete-option-icon {
            display: inline-grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #f1f5f9;
            color: #475569;
            transition: inherit;
        }

        .appointment-delete-option svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .appointment-delete-option-text {
            display: grid;
            gap: 2px;
            min-width: 0;
        }

        .appointment-delete-option-text strong {
            font-size: 14px;
            line-height: 1.3;
        }

        .appointment-delete-option-text span {
            color: #64748b;
            font-size: 12.5px;
            line-height: 1.4;
        }

        .appointment-delete-option-chevron {
            color: #cbd5e1;
            transition: inherit;
        }

        .appointment-delete-option:hover:not(:disabled),
        .appointment-delete-option:focus-visible {
            border-color: var(--brand-blue-border);
            background: #f8fbff;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
            outline: none;
        }

        .appointment-delete-option:hover:not(:disabled) .appointment-delete-option-icon,
        .appointment-delete-option:focus-visible .appointment-delete-option-icon {
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
        }

        .appointment-delete-option:hover:not(:disabled) .appointment-delete-option-chevron,
        .appointment-delete-option:focus-visible .appointment-delete-option-chevron {
            color: var(--brand-blue-dark);
            transform: translateX(2px);
        }

        .appointment-delete-option.is-danger:hover:not(:disabled),
        .appointment-delete-option.is-danger:focus-visible {
            border-color: #fca5a5;
            background: #fffafa;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
        }

        .appointment-delete-option.is-danger:hover:not(:disabled) .appointment-delete-option-icon,
        .appointment-delete-option.is-danger:focus-visible .appointment-delete-option-icon {
            background: #fee2e2;
            color: #dc2626;
        }

        .appointment-delete-option.is-danger:hover:not(:disabled) .appointment-delete-option-chevron,
        .appointment-delete-option.is-danger:focus-visible .appointment-delete-option-chevron,
        .appointment-delete-option.is-danger:hover:not(:disabled) strong {
            color: #b91c1c;
        }

        .appointment-delete-option:active:not(:disabled) {
            transform: scale(0.995);
        }

        .appointment-delete-option:disabled {
            cursor: default;
            opacity: 0.55;
        }

        .appointment-delete-option.is-busy {
            opacity: 1;
        }

        .appointment-delete-modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 2px;
        }

        .appointment-delete-modal-footer:empty {
            display: none;
        }

        .appointment-delete-footer-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 112px;
            height: 40px;
            margin: 0;
            padding: 0 16px;
            border: 1px solid transparent;
            border-radius: 10px;
            font: inherit;
            font-size: 14px;
            font-weight: 700;
            line-height: 1;
            transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
        }

        .appointment-delete-footer-button.is-start {
            margin-right: auto;
        }

        .appointment-delete-footer-button.is-secondary {
            border-color: #e2e8f0;
            background: #fff;
            color: #334155;
        }

        .appointment-delete-footer-button.is-secondary:hover:not(:disabled) {
            border-color: #cbd5e1;
            background: #f8fafc;
        }

        .appointment-delete-footer-button.is-ghost {
            min-width: 0;
            padding: 0 10px;
            background: transparent;
            color: #475569;
        }

        .appointment-delete-footer-button.is-ghost::before {
            content: "\2190";
        }

        .appointment-delete-footer-button.is-ghost:hover:not(:disabled) {
            background: #f1f5f9;
            color: #0f172a;
        }

        .appointment-delete-footer-button.is-danger {
            background: #dc2626;
            color: #fff;
            box-shadow: 0 1px 2px rgba(127, 29, 29, 0.25);
        }

        .appointment-delete-footer-button.is-danger:hover:not(:disabled) {
            background: #b91c1c;
        }

        .appointment-delete-footer-button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
        }

        .appointment-delete-footer-button.is-danger:focus-visible {
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
        }

        .appointment-delete-footer-button:disabled {
            cursor: default;
            opacity: 0.6;
        }

        .appointment-delete-footer-button.is-busy,
        .appointment-delete-option.is-busy .appointment-delete-option-chevron {
            position: relative;
        }

        .appointment-delete-footer-button.is-busy::after,
        .appointment-delete-option.is-busy .appointment-delete-option-chevron::after {
            content: "";
            width: 14px;
            height: 14px;
            border: 2px solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            animation: appointment-delete-spin 700ms linear infinite;
        }

        .appointment-delete-option.is-busy .appointment-delete-option-chevron svg {
            display: none;
        }

        .appointment-delete-option.is-busy .appointment-delete-option-chevron::after {
            display: block;
        }

        @keyframes appointment-delete-spin {
            to { transform: rotate(360deg); }
        }

        @media (max-width: 520px) {
            .appointment-delete-modal {
                padding: 20px 16px 16px;
            }

            .appointment-delete-modal-footer {
                flex-direction: column-reverse;
                align-items: stretch;
            }

            .appointment-delete-footer-button,
            .appointment-delete-footer-button.is-start {
                width: 100%;
                margin-right: 0;
            }
        }

        .rapport-delete-modal-panel {
            width: min(460px, 100%);
            border-color: #d7e0ea;
            border-radius: 12px;
            box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
        }

        .rapport-delete-modal-form {
            gap: 16px;
        }

        .rapport-delete-modal-copy {
            margin: 0;
            color: #475569;
            font-size: 14px;
            line-height: 1.55;
        }

        .rapport-delete-modal-detail {
            display: grid;
            gap: 3px;
            margin: 0;
            padding: 12px 14px;
            border: 1px solid #e1e7ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .rapport-delete-modal-detail strong {
            color: #1f2937;
            font-size: 14px;
            line-height: 1.35;
        }

        .rapport-delete-modal-detail time {
            color: #64748b;
            font-size: 13px;
            line-height: 1.35;
        }

        .rapport-delete-modal-actions {
            margin-top: 2px;
            padding-top: 2px;
        }

        .rapport-delete-modal-actions .button-secondary,
        .rapport-delete-modal-actions .button-danger {
            width: auto;
            min-width: 112px;
            min-height: 36px;
            height: 36px;
            margin: 0;
            justify-content: center;
        }

        @media (max-width: 520px) {
            .rapport-delete-modal-actions {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            .rapport-delete-modal-actions .button-secondary,
            .rapport-delete-modal-actions .button-danger {
                width: 100%;
                min-width: 0;
                height: auto;
                min-height: 42px;
            }
        }

        .appointment-details-grid {
            display: grid;
            grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
            gap: 0;
            margin: 0;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            overflow: hidden;
        }

        .appointment-details-row {
            display: contents;
        }

        .appointment-details-row[hidden] {
            display: none;
        }

        .appointment-details-row dt,
        .appointment-details-row dd {
            margin: 0;
            padding: 10px 12px;
            border-bottom: 1px solid #e5eaf0;
            font-size: 14px;
            line-height: 1.45;
        }

        .appointment-details-row:last-child dt,
        .appointment-details-row:last-child dd {
            border-bottom: 0;
        }

        .appointment-details-row dt {
            background: #f7f9fc;
            color: #475569;
            font-weight: 700;
        }

        .appointment-details-row dd {
            min-width: 0;
            color: #1f2937;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
        }

        .appointment-note-textarea {
            width: 100%;
            min-height: 140px;
            box-sizing: border-box;
            padding: 9px 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: #fff;
            color: inherit;
            font: inherit;
            line-height: 1.4;
            resize: vertical;
        }

        .appointment-note-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 32px;
            width: 32px;
            min-width: 32px;
            height: 32px;
            min-height: 32px;
            margin: 0;
            padding: 0;
            border: 1px solid #d6dde6;
            border-radius: 7px;
            background: #fff;
            color: #475569;
            cursor: pointer;
        }

        .appointment-note-close:hover,
        .appointment-note-close:focus {
            border-color: #94a3b8;
            background: #f1f5f9;
            color: #0f172a;
            outline: none;
        }

        .appointment-note-close:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: 2px;
        }

        .appointment-note-close svg {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-width: 2;
        }

        .appointment-note-content {
            min-height: 72px;
            color: #1f2937;
            font-size: 14px;
            line-height: 1.55;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
        }

        .appointment-note-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            min-width: 20px;
            height: 20px;
            min-height: 20px;
            padding: 0;
            border: 0;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.72);
            color: #475569;
            cursor: pointer;
        }

        .appointment-note-indicator:hover,
        .appointment-note-indicator:focus {
            background: #fff;
            color: var(--brand-blue-dark);
            outline: none;
        }

        .appointment-note-indicator:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: 1px;
        }

        .appointment-note-indicator svg {
            width: 13px;
            height: 13px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        .daily-appointment > .appointment-note-indicator,
        .weekly-appointment-block > .appointment-note-indicator {
            position: absolute;
            top: 2px;
            right: 24px;
            z-index: 7;
        }

        .weekly-appointment-block > .appointment-note-indicator {
            top: 1px;
            right: 22px;
            width: 18px;
            min-width: 18px;
            height: 18px;
            min-height: 18px;
        }

        .appointment-list-note {
            margin-left: 5px;
            vertical-align: middle;
        }

        .rapport-appointment-picker-card-wrap {
            position: relative;
        }

        .rapport-appointment-picker-card-wrap.has-appointment-note .rapport-appointment-picker-card {
            padding-right: 38px;
        }

        .rapport-appointment-note-indicator {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 2;
        }

        .catalogue-inline-edit-panel .form-row {
            margin: 0;
        }

        .catalogue-inline-edit-panel label {
            margin-bottom: 4px;
            color: #475569;
            font-size: 12px;
        }

        .catalogue-inline-edit-panel input,
        .catalogue-inline-edit-panel select {
            min-height: 38px;
            padding: 6px 8px;
            font-size: 13px;
        }

        .catalogue-inline-edit-panel input[type="checkbox"] {
            min-height: 0;
        }

        .catalogue-inline-checkbox {
            align-self: end;
        }

        .catalogue-inline-checkbox .checkbox-row {
            min-height: 38px;
            align-items: center;
            margin: 0;
        }

        .catalogue-inline-material-types {
            grid-column: 1 / -1;
        }

        .catalogue-inline-edit-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
            margin: 4px -16px -16px;
            padding: 12px 16px;
            border-top: 1px solid var(--app-border);
            background: var(--app-surface-subtle);
        }

        .catalogue-inline-edit-actions .button,
        .catalogue-inline-edit-actions .button-secondary {
            min-height: 34px;
            height: 34px;
            margin: 0;
        }

        .material-catalogue-header-control {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 220px;
            margin-top: 0;
        }

        .material-catalogue-heading-actions {
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }

        .material-catalogue-compact-heading {
            align-items: center;
            margin-bottom: 8px;
        }

        .material-catalogue-header-control label {
            margin-bottom: 0;
            white-space: nowrap;
            line-height: 1;
        }

        .material-catalogue-header-control select {
            width: auto;
            min-width: 150px;
            padding: 6px 8px;
            font-size: 14px;
        }

        .form-row-checkbox-aligned {
            align-self: end;
        }

        .form-field-checkbox {
            min-height: 34px;
            padding: 4px 0;
            border: 0;
            border-radius: 0;
            box-sizing: border-box;
        }

        .article-image-admin-control {
            display: grid;
            grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.2fr);
            gap: 8px 12px;
            align-items: center;
            padding: 9px 10px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .article-image-admin-control > label,
        .article-image-admin-control > input[type="hidden"] {
            grid-column: 1 / -1;
        }

        .article-image-admin-control > input[type="file"] {
            grid-column: 2;
        }

        .article-image-admin-control > .help:last-child {
            grid-column: 2;
            margin-top: -5px;
            font-size: 11px;
        }

        .article-image-current {
            display: flex;
            align-items: center;
            gap: 9px;
            margin: 0;
        }

        .article-image-current img {
            width: 82px;
            height: 82px;
            object-fit: contain;
            object-position: center;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: white;
        }

        .article-image-card.article-image-admin-control {
            display: grid;
            grid-template-columns: 1fr;
            align-items: stretch;
            gap: 9px;
            padding: 12px;
            border-radius: 14px;
            background: #fff;
        }

        .article-image-card.article-image-admin-control > label,
        .article-image-card.article-image-admin-control > .help,
        .article-image-card.article-image-admin-control > .article-image-remove {
            grid-column: 1;
        }

        .npk-prefix-hint {
            display: inline-block;
            margin-left: 8px;
            color: #374151;
            font-weight: bold;
        }

        .rapport-item-dimensions {
            margin-top: 2px;
            margin-bottom: 8px;
        }

        .rapport-item-dimensions-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 6px;
        }

        .rapport-item-dimensions-heading h3 {
            margin: 0;
        }

        .compact-edit-table th,
        .compact-edit-table td {
            padding: 6px 8px;
            vertical-align: middle;
        }

        .compact-edit-table input,
        .compact-edit-table select {
            padding: 6px 8px;
            font-size: 14px;
        }

        .flexible-dimension-table {
            min-width: 670px;
        }

        .dimension-choice-field {
            display: grid;
            grid-template-columns: minmax(120px, 0.9fr) minmax(120px, 1.1fr);
            gap: 5px;
        }

        .dimension-choice-field input,
        .dimension-choice-field select {
            min-width: 0;
        }

        .dimension-row-remove-cell {
            width: 42px;
            padding-left: 4px !important;
            padding-right: 4px !important;
            text-align: right;
        }

        .dimension-row-remove {
            width: 30px;
            min-width: 30px;
            height: 30px;
        }

        .compact-edit-table input[type="checkbox"] {
            width: auto;
        }

        .dimension-new-row td,
        .catalogue-new-row td {
            background: #f8fafc;
            border-bottom: 2px solid #dbe4ef;
        }

        .dimension-active-checkbox,
        .catalogue-active-checkbox {
            margin-bottom: 0;
            white-space: nowrap;
        }

        .item-group-table .item-category-row td {
            background: #f8fafc;
            border-top: 1px solid #dbe4ef;
            border-bottom: 1px solid #dbe4ef;
            padding: 8px;
        }

        .item-category-toggle,
        .item-group-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            border: 0;
            background: transparent;
            padding: 2px 0;
            font: inherit;
            color: inherit;
            cursor: pointer;
            text-align: left;
        }

        .item-category-toggle:hover,
        .item-category-toggle:focus,
        .item-group-toggle:hover,
        .item-group-toggle:focus {
            background: transparent;
            color: var(--brand-blue-dark);
            outline: none;
        }

        .item-category-caret {
            display: inline-block;
            width: 8px;
            height: 8px;
            margin: 0 4px 0 2px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            color: #475569;
            font-size: 0;
            transform: rotate(-45deg);
            transition: transform 140ms ease;
            flex: 0 0 auto;
        }

        .item-category-row[aria-expanded="true"] .item-category-caret {
            transform: rotate(45deg);
        }

        .item-category-row[aria-expanded="true"] td,
        .item-group-row[aria-expanded="true"] td {
            border-left: 3px solid var(--brand-blue);
            background: #eef6ff;
        }

        .item-group-table .expanded-content-row td {
            background: #f4f8fd;
        }

        .item-group-table .expanded-content-row td:first-child {
            border-left: 3px solid #93c5fd;
        }

        .item-group-table .expanded-content-last td {
            border-bottom: 2px solid #93c5fd;
        }

        .item-group-table .item-category-row td {
            border-top-width: 4px;
            border-top-color: #fff;
        }

        .item-group-table .item-category-row.group-content-row td {
            border-left: 3px solid #bfdbfe;
            background: #f8fbff;
        }

        .item-category-row:hover td,
        .item-group-row:hover td {
            background: #eef6ff;
        }

        .item-combination-table {
            margin-top: 0;
        }

        .sketch-placeholder {
            border: 1px dashed #cbd5e1;
            border-radius: 6px;
            background: #f8fafc;
            color: #64748b;
            padding: 12px;
        }

        @media (max-width: 1050px) {
            .appointment-form-layout {
                grid-template-columns: minmax(0, 850px);
            }

            .rapport-form-layout,
            .rapport-form-layout.project-panel-open {
                grid-template-columns: minmax(0, 1fr);
            }

            .appointment-filter-grid,
            .project-filter-grid,
            .rapport-filter-grid {
                grid-template-columns: repeat(2, minmax(160px, 1fr));
            }
        }

        @media (max-width: 620px) {
            .two-columns,
            .three-columns,
            .appointment-filter-grid,
            .project-filter-grid,
            .rapport-filter-grid {
                grid-template-columns: 1fr;
            }

            .catalogue-form-section-heading {
                display: block;
            }

            .catalogue-form-section-heading p {
                margin-top: 4px;
                text-align: left;
            }

            .article-image-admin-control {
                grid-template-columns: minmax(0, 1fr);
            }

            .article-image-admin-control > input[type="file"],
            .article-image-admin-control > .help:last-child {
                grid-column: 1;
            }

            .dimension-choice-field {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-material-line {
                grid-template-columns: 1fr;
            }

        }

        .worker-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(220px, 1fr));
            gap: 8px;
            margin-top: 6px;
        }

        .worker-option {
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .worker-option.unavailable {
            background: #eeeeee;
            border-color: #c9c9c9;
            color: #777;
        }

        .worker-option.unavailable input:not(:checked) + label {
            cursor: not-allowed;
        }

        .worker-option input {
            width: auto;
        }

        .worker-option label {
            margin-bottom: 0;
            font-weight: normal;
            cursor: pointer;
        }

        .appointment-card .appointment-worker-grid {
            grid-template-columns: repeat(2, minmax(180px, 1fr));
            gap: 11px 14px;
            max-height: clamp(180px, calc(100vh - 365px), 365px);
            min-height: 0;
            overflow-y: auto;
            padding-right: 2px;
        }

        .appointment-card .appointment-worker-option {
            min-height: 68px;
            padding: 10px 12px;
            border-color: #dbe4ef;
            background: #fff;
            box-sizing: border-box;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        }

        .appointment-card .appointment-worker-option input {
            width: 18px;
            height: 18px;
            margin: 0;
            accent-color: var(--brand-blue);
        }

        .appointment-card .appointment-worker-option label {
            display: block;
            min-width: 0;
            width: 100%;
            margin: 0;
            color: #0f172a;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .appointment-card .appointment-worker-option .availability-label {
            display: flex;
            width: fit-content;
            max-width: 100%;
            margin-top: 5px;
            padding: 2px 7px;
            border: 1px solid #a7d9b4;
            border-radius: 4px;
            background: #ddf7e4;
            color: #176b31;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.15;
        }

        .appointment-card .appointment-worker-option.unavailable .availability-label {
            border-color: #fecaca;
            background: #fee2e2;
            color: #b91c1c;
        }

        .rapport-worker-hours {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .rapport-worker-hours label {
            margin: 0;
            font-size: 12px;
            color: #475569;
            white-space: nowrap;
        }

        .rapport-worker-hours input {
            width: 78px;
            min-width: 78px;
            height: 32px;
            min-height: 32px;
            box-sizing: border-box;
            padding: 6px 8px;
            font-size: 13px;
        }

        @media (max-width: 620px) {
            .rapport-worker-add-controls {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-worker-row {
                grid-template-columns: minmax(90px, 1fr) 40px;
                gap: 7px;
                padding: 7px 8px;
            }

            .rapport-worker-time-editor {
                grid-column: 1 / -1;
            }

            .rapport-worker-remove {
                width: 40px;
                min-width: 40px;
                height: 40px;
                min-height: 40px;
            }
        }

        .availability-label {
            display: block;
            margin-top: 3px;
            font-size: 12px;
            color: #666;
        }

        .worker-option.unavailable .availability-label {
            color: #a15c00;
            font-weight: bold;
        }

        .daily-wrapper {
            --daily-time-column-width: 80px;
            --daily-worker-column-width: 150px;
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            background: #f8fafc;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        .daily-grid {
            display: flex;
            flex-direction: column;
            flex: 1 0 auto;
            width: 100%;
            min-width: var(--daily-grid-min-width);
            min-height: 520px;
            box-sizing: border-box;
            background: #f8fafc;
        }

        .daily-grid-header-row,
        .daily-grid-body {
            display: grid;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            grid-template-columns: var(--daily-grid-columns);
        }

        .daily-grid-header-row {
            flex: 0 0 auto;
            background: #d3eaf8;
        }

        .daily-grid-header {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #d3eaf8;
            color: var(--brand-blue-dark);
            text-align: center;
            padding: 10px;
            font-weight: bold;
            border-bottom: 1px solid var(--brand-blue-border);
            border-right: 1px solid var(--brand-blue-border);
        }

        .daily-time-header {
            min-width: 0;
        }

        .daily-grid-body {
            flex: 1 1 auto;
            min-height: 0;
            align-items: stretch;
            background: #f8fafc;
        }

        .daily-time-column {
            display: grid;
            font-weight: bold;
            text-align: center;
        }

        .daily-time-slot {
            box-sizing: border-box;
            min-height: 0;
            padding-top: 8px;
            border-bottom: 1px solid #e1e5ea;
            border-right: 1px solid #e1e5ea;
            background: #f0f0f0;
            font-size: 17px;
            line-height: 1.15;
        }

        .daily-time-slot.non-working {
            background: #d8dde4;
        }

        .daily-worker-header {
            min-width: 0;
        }

        .daily-worker-name {
            font-weight: bold;
        }

        .daily-worker-function {
            font-size: 12px;
            opacity: 0.8;
        }

        .daily-pikett-badge {
            display: inline-block;
            margin-top: 5px;
            padding: 3px 7px;
            border-radius: 999px;
            background: #15803d;
            color: white;
            font-size: 11px;
            line-height: 1;
        }

        .daily-worker-column {
            display: grid;
            position: relative;
            background: #f8fafc;
            border-right: 1px solid #e1e5ea;
        }

        .daily-grid-header-row > .daily-grid-header:last-child,
        .daily-grid-body > .daily-worker-column:last-child {
            border-right: 0;
        }

        .daily-grid-header-row > .daily-grid-header:last-child {
            box-shadow: inset -1px 0 var(--brand-blue-border);
        }

        .daily-grid-body > .daily-worker-column:last-child {
            box-shadow: inset -1px 0 #e1e5ea;
        }

        .daily-worker-column.drag-over {
            outline: 3px solid #0080ff;
            outline-offset: -3px;
            background: #eef7ff;
        }

        .daily-worker-column.paste-ready {
            cursor: copy;
        }

        .daily-worker-column.paste-ready:hover {
            outline: 3px solid #0080ff;
            outline-offset: -3px;
            background: #eef7ff;
        }

        .daily-hour-background {
            box-sizing: border-box;
            min-height: 0;
            background: #f8fafc;
            border-bottom: 1px solid #e1e5ea;
        }

        .daily-hour-background.non-working {
            background: #d8dde4;
        }

        .weekend-day-view .daily-time-slot,
        .weekend-day-view .daily-hour-background,
        .weekend-day-view .daily-worker-column,
        .holiday-day-view .daily-time-slot,
        .holiday-day-view .daily-hour-background,
        .holiday-day-view .daily-worker-column {
            background: #d8dde4;
        }

        .holiday-indicator {
            align-self: center;
            color: #475569;
            font-weight: bold;
        }

        .daily-appointment {
            position: absolute;
            left: 5px;
            right: 5px;
            z-index: 2;
            box-sizing: border-box;
            border: 1px solid #d7dde5;
            border-top: 6px solid var(--brand-blue);
            background: #fff;
            padding: 7px 32px 6px 6px;
            border-radius: 6px;
            font-size: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12);
            overflow: visible;
            cursor: grab;
        }

        .daily-appointment-content {
            --daily-appointment-line-height: 14px;
            box-sizing: border-box;
            max-height: 100%;
            overflow: hidden;
            line-height: var(--daily-appointment-line-height);
        }

        @supports (max-height: round(down, 100%, 1px)) {
            .daily-appointment-content {
                max-height: round(down, 100%, var(--daily-appointment-line-height));
            }
        }

        .daily-appointment.viewer-appointment {
            cursor: default;
            touch-action: pan-x pan-y;
        }

        .daily-appointment.dragging {
            opacity: 0.45;
            cursor: grabbing;
        }

        .daily-appointment.resizing {
            cursor: ns-resize;
            user-select: none;
        }

        .daily-appointment.moving-time {
            cursor: ns-resize;
            user-select: none;
            opacity: 0.78;
        }

        .daily-appointment.moving-worker {
            cursor: grabbing;
            user-select: none;
            opacity: 0.55;
        }

        .daily-appointment.appointment-menu-open,
        .weekly-appointment-block.appointment-menu-open {
            z-index: 1000;
        }

        .daily-worker-column.appointment-menu-open,
        .weekly-cell.appointment-menu-open {
            z-index: 900;
        }

        body.daily-interaction-active,
        body.daily-interaction-active .daily-appointment {
            user-select: none;
        }

        .daily-resize-handle {
            position: absolute;
            left: 0;
            right: 0;
            height: 8px;
            z-index: 3;
            cursor: ns-resize;
        }

        .daily-resize-handle-top {
            top: -4px;
        }

        .daily-resize-handle-bottom {
            bottom: -4px;
        }

        .daily-appointment-time {
            font-weight: bold;
        }

        .daily-appointment-title {
            font-weight: bold;
        }

        .daily-appointment-project {
            color: #000;
            font-weight: bold;
        }

        .daily-appointment-type {
            font-weight: bold;
        }

        .daily-appointment-time,
        .daily-appointment-title,
        .daily-appointment-project,
        .daily-appointment-type {
            line-height: var(--daily-appointment-line-height, 14px);
        }

        .daily-appointment-time,
        .daily-appointment-project,
        .daily-appointment-type {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .daily-appointment-title {
            overflow: hidden;
        }

        .daily-appointment-actions {
            position: absolute;
            top: 2px;
            right: 2px;
            z-index: 8;
        }

        .appointment-action-menu {
            position: relative;
            display: inline-block;
            line-height: 1;
        }

        .appointment-action-menu summary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            padding: 0;
            border: 0;
            border-radius: 4px;
            background: transparent;
            color: #334155;
            cursor: pointer;
            font-size: 0;
            font-weight: bold;
            line-height: 1;
            list-style: none;
            user-select: none;
        }

        .appointment-action-menu summary:hover,
        .appointment-action-menu summary:focus {
            background: rgba(255, 255, 255, 0.72);
            box-shadow: none;
            outline: none;
        }

        .appointment-action-menu summary:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: 1px;
        }

        .appointment-action-menu summary::before {
            content: "\2026";
            display: block;
            font-size: 16px;
            letter-spacing: 0;
            line-height: 1;
            transform: translateY(-1px);
        }

        .appointment-action-menu summary::-webkit-details-marker {
            display: none;
        }

        .appointment-action-menu-items {
            position: absolute;
            right: 0;
            top: calc(100% + 4px);
            z-index: 80;
            min-width: 118px;
            overflow: hidden;
            border: 1px solid #d6dde6;
            border-radius: 6px;
            background: white;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
        }

        .appointment-action-menu[open] .appointment-action-menu-items {
            position: fixed;
            top: var(--appointment-menu-top, auto);
            right: auto;
            left: var(--appointment-menu-left, auto);
            z-index: 10000;
        }

        .appointment-action-menu-items.appointment-menu-portal {
            position: fixed;
            top: var(--appointment-menu-top, auto);
            right: auto;
            left: var(--appointment-menu-left, auto);
            z-index: 20000;
        }

        .appointment-action-menu-items.mobile-agenda-menu-portal .appointment-action-menu-item {
            min-height: 38px;
            padding: 9px 12px;
            font-size: 14px;
        }

        .appointment-action-menu-items form {
            margin: 0;
            padding: 0;
        }

        .appointment-action-menu-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            min-height: 32px;
            box-sizing: border-box;
            border: 0;
            border-radius: 0;
            background: white;
            color: #1f2937;
            cursor: pointer;
            font: inherit;
            font-size: 12px;
            appearance: none;
            line-height: 1.2;
            padding: 8px 10px;
            margin: 0;
            text-align: left;
            text-decoration: none;
            white-space: nowrap;
        }

        .appointment-action-menu-item:hover,
        .appointment-action-menu-item:focus {
            background: var(--brand-blue-soft);
        }

        .appointment-action-menu .delete-button {
            color: #b00020;
        }

        .weekly-wrapper {
            --weekly-date-column-width: 80px;
            --weekly-header-min-height: 38px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        .weekly-grid {
            display: flex;
            flex-direction: column;
            height: clamp(480px, calc(100vh - 178px), 760px);
        }

        .weekly-grid-header-row,
        .weekly-day-row {
            display: grid;
            min-height: 0;
        }

        .weekly-grid-header-row {
            position: sticky;
            top: 0;
            flex: 0 0 auto;
            min-height: var(--weekly-header-min-height);
            z-index: 30;
        }

        .weekly-grid-header {
            position: relative;
            z-index: 30;
            min-height: var(--weekly-header-min-height);
            box-sizing: border-box;
            background: #d3eaf8;
            color: var(--brand-blue-dark);
            text-align: center;
            padding: 6px 8px;
            font-size: 13px;
            line-height: 1.2;
            font-weight: bold;
            border-bottom: 1px solid var(--brand-blue-border);
            border-right: 1px solid var(--brand-blue-border);
        }

        .weekly-worker-header .daily-worker-name {
            font-size: 16px;
            line-height: 1.15;
        }

        .weekly-day-row.weekday {
            flex: 1 1 0;
            overflow: hidden;
        }

        .weekly-day-row.weekend {
            flex: 0 0 42px;
            overflow: hidden;
        }

        .weekly-day-label,
        .weekly-cell {
            min-height: 0;
            box-sizing: border-box;
            border-right: 1px solid #e1e5ea;
            border-bottom: 1px solid #e1e5ea;
            background: #f8fafc;
            overflow: hidden;
        }

        .weekly-day-label {
            padding: 7px 9px;
            background: #f0f0f0;
            line-height: 1.2;
        }

        .weekly-day-link {
            color: var(--brand-blue-dark);
            font-weight: bold;
            text-decoration: none;
        }

        .weekly-day-link:hover {
            color: var(--brand-blue);
            text-decoration: underline;
        }

        .weekly-day-row.weekend .weekly-day-label,
        .weekly-day-row.weekend .weekly-cell,
        .weekly-day-row.holiday .weekly-day-label,
        .weekly-day-row.holiday .weekly-cell {
            background: #d8dde4;
        }

        .weekly-day-row.today .weekly-day-label,
        .weekly-day-row.today .weekly-cell {
            background: #fff7d6;
            box-shadow: inset 3px 0 0 #f2b705;
        }

        .weekly-today-label {
            display: inline-block;
            margin-top: 3px;
            padding: 1px 6px;
            border-radius: 999px;
            background: #f2b705;
            color: #1f2937;
            font-size: 10px;
            font-weight: bold;
        }

        .weekly-holiday-label {
            margin-top: 3px;
            color: #475569;
            font-size: 11px;
            font-weight: bold;
            overflow-wrap: anywhere;
        }

        .weekly-cell {
            --weekly-card-inset-top: 7px;
            --weekly-card-inset-right: 9px;
            --weekly-card-inset-bottom: 4px;
            --weekly-card-inset-left: 5px;
            --weekly-appointment-gap: 3px;
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 7px 9px 4px 5px;
            overflow: hidden;
        }

        .weekly-cell.has-pikett::after {
            content: "";
            position: absolute;
            top: 5px;
            right: 3px;
            bottom: 5px;
            width: 5px;
            border-radius: 999px;
            background: #15803d;
            z-index: 4;
        }

        .weekly-cell.drag-over {
            outline: 3px solid var(--brand-blue);
            outline-offset: -3px;
            background: #eef7ff !important;
        }

        .weekly-empty-cell-link {
            position: absolute;
            inset: 0;
            z-index: 1;
            border: 2px solid transparent;
            border-radius: 4px;
        }

        .weekly-empty-cell-link:hover {
            border-color: var(--brand-blue-border);
            background: rgba(231,243,251,0.55);
        }

        .weekly-partial-cell .weekly-empty-cell-link:hover {
            border-style: dashed;
            border-color: var(--brand-blue);
        }

        .weekly-cell.paste-ready {
            cursor: copy;
        }

        .weekly-cell.paste-ready:hover {
            outline: 2px solid var(--brand-blue-border);
            outline-offset: -2px;
        }

        .weekly-appointment-block {
            position: relative;
            z-index: 2;
            display: block;
            box-sizing: border-box;
            max-width: 100%;
            margin-bottom: var(--weekly-appointment-gap);
            padding: 4px 30px 4px 5px;
            border-radius: 5px;
            font-size: 11px;
            line-height: 1.15;
            text-decoration: none;
            box-shadow: 0 1px 2px rgba(0,0,0,0.08);
            cursor: pointer;
            overflow: hidden;
        }

        .weekly-appointment-block.appointment-menu-open {
            overflow: visible;
        }

        .weekly-appointment-block {
            border: 1px solid #d7dde5;
            border-left: 5px solid var(--brand-blue);
            background: white;
            color: #1f2937;
        }

        .weekly-appointment-block {
            transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
        }

        .weekly-appointment-block:hover {
            border-color: var(--brand-blue);
            box-shadow: 0 0 0 1px var(--brand-blue), 0 6px 16px rgba(15, 23, 42, 0.22);
        }

        .weekly-appointment-block:hover:not(.appointment-menu-open):not(.dragging) {
            transform: translateY(-1px);
            z-index: 3;
        }

        @media (prefers-reduced-motion: reduce) {
            .weekly-appointment-block,
            .weekly-appointment-block:hover {
                transition: none;
                transform: none;
            }
        }

        .weekly-appointment-block.dragging {
            opacity: 0.45;
        }

        .weekly-appointment-block.compact {
            padding: 1px 21px 1px 4px;
            font-size: 10.5px;
            line-height: 1;
        }

        .weekly-appointment-block.summary {
            flex: 1 1 0;
            min-height: 0;
            max-height: calc((100% - var(--weekly-appointment-gap)) / 2);
            margin-bottom: var(--weekly-appointment-gap);
            padding: 2px 21px 2px 4px;
            font-size: 11px;
            line-height: 1.1;
            overflow: hidden;
        }

        .weekly-appointment-block.summary:last-child {
            margin-bottom: 0;
        }

        .weekly-appointment-block.summary .weekly-appointment-time,
        .weekly-appointment-block.summary .weekly-appointment-project,
        .weekly-appointment-block.summary .weekly-appointment-title,
        .weekly-appointment-block.compact .weekly-appointment-time,
        .weekly-appointment-block.compact .weekly-appointment-project {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .weekly-appointment-block.full-day {
            flex: 1 1 auto;
            min-height: 0;
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
        }

        .weekly-appointment-day-area {
            position: absolute;
            z-index: 2;
            top: var(--weekly-card-inset-top);
            right: var(--weekly-card-inset-right);
            bottom: var(--weekly-card-inset-bottom);
            left: var(--weekly-card-inset-left);
            overflow: visible;
            pointer-events: none;
        }

        .weekly-appointment-block.proportional {
            --weekly-positioned-min-height: calc(3.45em + 13px);
            position: absolute;
            top: min(
                var(--weekly-visual-start),
                calc(100% - var(--weekly-positioned-min-height))
            );
            right: 0;
            left: 0;
            width: auto;
            height: max(
                var(--weekly-positioned-min-height),
                var(--weekly-visual-height)
            );
            max-height: 100%;
            margin-bottom: 0;
            pointer-events: auto;
        }

        .weekly-appointment-block [data-weekly-optional-line][hidden] {
            display: none;
        }

        .weekly-appointment-time,
        .weekly-appointment-project,
        .weekly-appointment-title,
        .weekly-appointment-meta {
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
        }

        .weekly-appointment-time,
        .weekly-appointment-project {
            font-weight: bold;
            margin-bottom: 1px;
        }

        .weekly-appointment-title {
            font-weight: bold;
        }

        .weekly-appointment-meta {
            color: #475569;
        }

        .weekly-appointment-location {
            color: #64748b;
        }

        .weekly-appointment-actions {
            position: absolute;
            top: 1px;
            right: 2px;
            z-index: 12;
        }

        .weekly-appointment-block.full-day .weekly-appointment-actions {
            margin-top: 0;
        }

        .weekly-appointment-actions .appointment-action-menu summary {
            width: 18px;
            height: 18px;
        }

        .weekly-appointment-actions .appointment-action-menu summary::before {
            font-size: 14px;
        }

        .weekly-more {
            position: relative;
            z-index: 2;
            color: #475569;
            font-size: 11px;
            font-weight: bold;
        }

        .monthly-view {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .monthly-nav {
            position: sticky;
            top: 0;
            z-index: 80;
            align-items: center;
            margin: -4px -4px 6px;
            padding: 6px 4px;
            border-bottom: 1px solid #dbe4ef;
            background: rgba(245, 245, 245, 0.96);
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
            backdrop-filter: blur(4px);
        }

        .monthly-top-button {
            width: 34px;
            flex-basis: 34px;
            padding: 0;
        }

        .monthly-top-button svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .monthly-year-form {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .monthly-year-form label {
            margin-bottom: 0;
            color: #475569;
            font-size: 13px;
            font-weight: 700;
        }

        .calendar-period-controls .monthly-year-form .calendar-period-label {
            width: 88px;
            padding: 0 9px;
            border-color: #cbd5e1;
            background: #fff;
            font-weight: 700;
            line-height: 1;
        }

        .monthly-year-calendar {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .monthly-month {
            scroll-margin-top: 82px;
        }

        .monthly-month-title {
            margin: 0;
            padding: 10px 12px 8px;
            border: 1px solid #cbd5e1;
            border-bottom: 0;
            border-radius: 8px 8px 0 0;
            background: #eef7ff;
            color: var(--brand-blue-dark);
        }

        .monthly-calendar {
            overflow: hidden;
            border: 1px solid #cbd5e1;
            border-radius: 0 0 8px 8px;
            background: white;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        }

        .monthly-weekdays,
        .monthly-week {
            display: grid;
            grid-template-columns: 44px repeat(7, minmax(0, 1fr));
        }

        .monthly-weekdays {
            background: var(--brand-blue);
            color: white;
            font-weight: bold;
        }

        .monthly-weekday {
            padding: 8px 10px;
            border-right: 1px solid rgba(255, 255, 255, 0.25);
        }

        .monthly-week-number-header,
        .monthly-week-number {
            text-align: center;
        }

        .monthly-weekday:last-child {
            border-right: 0;
        }

        .monthly-week {
            min-height: 126px;
            scroll-margin-top: 82px;
        }

        .monthly-week.current-week .monthly-day,
        .monthly-week.current-week .monthly-week-number {
            box-shadow: inset 0 3px 0 #f2b705;
            background-image: linear-gradient(rgba(242, 183, 5, 0.14), rgba(242, 183, 5, 0.14));
        }

        .monthly-week-number {
            box-sizing: border-box;
            padding: 9px 4px;
            border-top: 1px solid #dbe4ef;
            border-right: 1px solid #cbd5e1;
            background: #eef2f7;
            color: #475569;
            font-size: 12px;
            font-weight: bold;
        }

        .monthly-day {
            min-height: 126px;
            box-sizing: border-box;
            padding: 7px;
            border-right: 1px solid #dbe4ef;
            border-top: 1px solid #dbe4ef;
            background: #f8fafc;
            overflow: hidden;
            cursor: pointer;
        }

        .monthly-week .monthly-day:last-child {
            border-right: 0;
        }

        .monthly-day.other-month {
            background: #f1f5f9;
            color: #94a3b8;
        }

        .monthly-day.weekend,
        .monthly-day.holiday {
            background: #d8dde4;
        }

        .monthly-day.today {
            outline: 2px solid #f2b705;
            outline-offset: -2px;
            background: #fff7d6;
        }

        .monthly-day.drag-over {
            outline: 3px solid var(--brand-blue);
            outline-offset: -3px;
            background: #eef7ff !important;
        }

        .monthly-day:hover {
            box-shadow: inset 0 0 0 2px rgba(0, 86, 179, 0.24);
        }

        .monthly-day-number {
            display: flex;
            justify-content: space-between;
            gap: 6px;
            margin-bottom: 5px;
            font-weight: bold;
            line-height: 1.1;
        }

        .monthly-holiday-label {
            margin-bottom: 5px;
            color: #475569;
            font-size: 11px;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .monthly-entry {
            position: relative;
            display: block;
            min-width: 0;
            margin-bottom: 3px;
            padding: 3px 24px 3px 5px;
            border: 1px solid #d7dde5;
            border-left: 4px solid var(--brand-blue);
            border-radius: 5px;
            background: white;
            color: #1f2937;
            font-size: 11px;
            font-weight: bold;
            line-height: 1.15;
            overflow: hidden;
            text-decoration: none;
            white-space: nowrap;
        }

        .monthly-entry.rough {
            cursor: grab;
        }

        .monthly-entry.rough.dragging {
            opacity: 0.45;
            cursor: grabbing;
        }

        .monthly-entry-title {
            display: block;
            min-width: 0;
            overflow: hidden;
            color: inherit;
            text-decoration: none;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .monthly-entry-actions {
            position: absolute;
            top: 50%;
            right: 3px;
            z-index: 20;
            margin-top: -12px;
            pointer-events: auto;
        }

        .rough-plan-action-menu {
            position: relative;
            display: inline-block;
        }

        .rough-plan-action-menu-items {
            display: none;
            min-width: 118px;
            overflow: hidden;
            border: 1px solid #d6dde6;
            border-radius: 6px;
            background: white;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
        }

        .rough-plan-action-menu-items form {
            margin: 0;
            padding: 0;
        }

        .rough-plan-action-menu .delete-button {
            color: #b00020;
        }

        .rough-plan-action-menu.is-open .rough-plan-action-menu-items {
            display: block;
            position: fixed;
            top: var(--appointment-menu-top, auto);
            right: auto;
            left: var(--appointment-menu-left, auto);
            z-index: 10000;
        }

        .rough-plan-action-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #475569;
            cursor: pointer;
            font-size: 0;
            font-weight: bold;
            line-height: 1;
            padding: 0;
            pointer-events: auto;
        }

        .rough-plan-action-toggle:hover,
        .rough-plan-action-toggle:focus {
            background: transparent;
            color: var(--brand-blue-dark);
            outline: none;
        }

        .rough-plan-action-toggle::before {
            content: "...";
            display: block;
            font-size: 12px;
            letter-spacing: 0;
            line-height: 1;
            transform: translateY(-1px);
        }

        .monthly-entry.absence {
            padding-right: 5px;
            background: #f8fafc;
            cursor: default;
            text-overflow: ellipsis;
        }

        .monthly-entry:hover {
            border-color: var(--brand-blue-border);
        }

        .monthly-more {
            color: #475569;
            font-size: 11px;
            font-weight: bold;
        }

        .rough-planning-form-actions {
            align-items: center;
        }

        .rough-planning-form-actions .button,
        .rough-planning-form-actions .button-secondary,
        .rough-planning-delete-form .button-danger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: 40px;
            margin-left: 0;
            font-family: inherit;
            font-size: 14px;
            line-height: 1;
            padding: 0 14px;
        }

        .weekly-day-row.weekend .weekly-day-label,
        .weekly-day-row.weekend .weekly-cell {
            min-height: 42px;
        }

        .weekly-day-row.weekend .weekly-day-label {
            padding-top: 6px;
            white-space: nowrap;
        }

        .weekly-day-row.weekend .weekly-holiday-label {
            margin-top: 1px;
            font-size: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .weekly-day-row.weekend .weekly-cell {
            padding-top: 3px;
            padding-bottom: 3px;
        }

        .weekly-day-row.weekend .weekly-appointment-block {
            margin-bottom: 2px;
        }

        body.weekly-interaction-active,
        body.weekly-interaction-active .weekly-appointment-block {
            user-select: none;
        }

        .date-nav,
        .calendar-period-controls {
            --calendar-period-control-height: 34px;
            --calendar-period-control-padding-x: 10px;
            --calendar-period-control-border-width: 1px;
            --calendar-period-control-radius: 5px;
            --calendar-period-control-font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
        }

        .date-nav-main,
        .date-nav-side,
        .calendar-period-controls-main,
        .calendar-period-controls-side {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .date-nav-main,
        .calendar-period-controls-main {
            flex: 1 1 auto;
            min-width: 0;
            flex-wrap: nowrap;
        }

        .date-nav-side,
        .calendar-period-controls-side {
            flex: 0 0 auto;
            margin-left: auto;
        }

        .calendar-period-controls .calendar-period-button,
        .calendar-period-controls .calendar-period-label {
            appearance: none;
            -webkit-appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: var(--calendar-period-control-height);
            min-height: var(--calendar-period-control-height);
            margin: 0;
            margin-left: 0;
            border-width: var(--calendar-period-control-border-width);
            border-style: solid;
            border-radius: var(--calendar-period-control-radius);
            font-size: var(--calendar-period-control-font-size);
            font-weight: 700;
            line-height: 1;
            vertical-align: top;
            text-decoration: none;
        }

        .calendar-period-controls .calendar-period-button {
            flex: 0 0 auto;
            padding: 0 var(--calendar-period-control-padding-x);
            gap: 7px;
            white-space: nowrap;
        }

        .calendar-period-controls .calendar-period-button.button {
            border-color: transparent;
        }

        .calendar-period-controls .calendar-period-button.button-secondary {
            border-color: var(--brand-blue-border);
        }

        .calendar-nav-chevron {
            width: 7px;
            height: 7px;
            flex: 0 0 7px;
            border-top: 1.5px solid currentColor;
            border-right: 1.5px solid currentColor;
        }

        .calendar-nav-chevron.previous {
            transform: rotate(-135deg);
        }

        .calendar-nav-chevron.next {
            transform: rotate(45deg);
        }

        .date-nav form,
        .calendar-period-controls form {
            display: flex;
            align-items: center;
            gap: 8px;
            height: var(--calendar-period-control-height);
            flex: 0 0 auto;
            margin: 0;
        }

        .date-nav input,
        .calendar-period-controls input {
            width: auto;
        }

        .calendar-period-controls .calendar-period-label {
            position: relative;
            border: 1px solid #cbd5e1;
            background: #fff;
            color: #111827;
            cursor: pointer;
            padding: 0 12px;
            white-space: nowrap;
            flex: 0 0 auto;
        }

        .calendar-period-controls .daily-date-control {
            width: 238px;
        }

        .calendar-period-controls .weekly-date-control {
            width: 286px;
            flex-basis: 286px;
        }

        .calendar-period-controls .calendar-period-label:focus,
        .calendar-period-controls .calendar-period-label:focus-within {
            outline: 2px solid var(--brand-blue-border);
            outline-offset: 2px;
        }

        .calendar-period-controls .calendar-period-native-input {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            min-height: 0;
            opacity: 0;
            cursor: pointer;
            pointer-events: none;
        }

        .calendar-period-controls .calendar-period-label-text {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
        }

        .holiday-indicator {
            min-width: 0;
            max-width: min(34vw, 420px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mobile-daily-agenda {
            display: none;
        }

        .mobile-appointment-button-label {
            display: none;
        }

        .mobile-agenda-card {
            position: relative;
            box-sizing: border-box;
            background: #fff;
            border: 1px solid #d7dde5;
            border-left: 6px solid var(--appointment-color, var(--brand-blue));
            border-radius: 8px;
            padding: 12px 13px 12px 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .mobile-agenda-actions {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 8;
        }

        .mobile-agenda-card > .appointment-note-indicator {
            position: absolute;
            top: 14px;
            right: 47px;
            z-index: 7;
        }

        .mobile-agenda-actions .appointment-action-menu summary {
            width: 32px;
            height: 32px;
        }

        .mobile-agenda-actions .appointment-action-menu-item {
            min-height: 38px;
            font-size: 14px;
            padding: 9px 12px;
        }

        .mobile-agenda-actions + .mobile-agenda-time,
        .mobile-agenda-actions ~ .mobile-agenda-title,
        .mobile-agenda-actions ~ .mobile-agenda-project,
        .mobile-agenda-actions ~ .mobile-agenda-meta,
        .mobile-agenda-actions ~ .mobile-agenda-workers {
            padding-right: 28px;
        }

        .mobile-agenda-card > .appointment-note-indicator ~ .mobile-agenda-time,
        .mobile-agenda-card > .appointment-note-indicator ~ .mobile-agenda-title,
        .mobile-agenda-card > .appointment-note-indicator ~ .mobile-agenda-project,
        .mobile-agenda-card > .appointment-note-indicator ~ .mobile-agenda-meta,
        .mobile-agenda-card > .appointment-note-indicator ~ .mobile-agenda-workers {
            padding-right: 58px;
        }

        .mobile-agenda-time {
            color: var(--brand-blue-dark);
            font-weight: bold;
            font-size: 15px;
            margin-bottom: 5px;
        }

        .mobile-agenda-title {
            color: #111827;
            font-weight: bold;
            font-size: 16px;
            line-height: 1.25;
            margin-bottom: 7px;
            overflow-wrap: anywhere;
        }

        .mobile-agenda-project {
            color: #111827;
            font-weight: bold;
            font-size: 14px;
            line-height: 1.3;
            margin-top: 6px;
            overflow-wrap: anywhere;
        }

        .mobile-agenda-meta,
        .mobile-agenda-workers {
            color: #4b5563;
            font-size: 14px;
            line-height: 1.35;
            margin-top: 5px;
            overflow-wrap: anywhere;
        }

        .mobile-agenda-workers {
            color: #1f2937;
            font-weight: 600;
        }

        .mobile-agenda-empty {
            background: #fff;
            border: 1px solid #d7dde5;
            border-radius: 8px;
            padding: 18px 14px;
            color: #4b5563;
            font-size: 15px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .mobile-holiday-card {
            background: #f8fafc;
            border: 1px solid #cbd5e1;
            border-left: 6px solid #64748b;
            border-radius: 8px;
            padding: 11px 13px;
            color: #334155;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .mobile-holiday-title {
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 3px;
        }

        .mobile-holiday-name {
            font-size: 15px;
            font-weight: bold;
            line-height: 1.3;
            overflow-wrap: anywhere;
        }

        .mobile-pikett-today {
            background: #ecfdf3;
            border: 1px solid #a7f3d0;
            border-left: 6px solid #15803d;
            border-radius: 8px;
            padding: 11px 13px;
            color: #064e3b;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .mobile-pikett-title {
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 3px;
        }

        .mobile-pikett-worker {
            font-size: 15px;
            font-weight: bold;
        }

        .mobile-workers-without-appointments {
            --appointment-color: #64748b;
        }

        .mobile-worker-chip-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .mobile-worker-chip {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            min-height: 28px;
            box-sizing: border-box;
            padding: 5px 8px;
            border-radius: 999px;
            background: #f1f5f9;
            color: #334155;
            font-size: 13px;
            font-weight: 600;
            overflow-wrap: anywhere;
        }

        .mobile-workers-without-appointments .mobile-agenda-title {
            margin-bottom: 10px;
        }

        .pikett-top-controls {
            position: relative;
            z-index: 30;
            display: flex;
            gap: 12px;
            align-items: flex-end;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }

        .pikett-planning-controls {
            display: flex;
            gap: 12px;
            align-items: flex-end;
            flex-wrap: wrap;
        }

        .pikett-period-navigation {
            display: grid;
            grid-template-columns: 42px minmax(190px, auto) auto 42px;
            gap: 7px;
            align-items: center;
        }

        .pikett-period-navigation .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            box-sizing: border-box;
            margin: 0;
            padding: 0 12px;
            border-radius: 7px;
            font-size: 13px;
        }

        .pikett-period-step {
            width: 42px;
            padding: 0 !important;
            font-size: 18px !important;
        }

        .pikett-period-current {
            display: grid;
            gap: 2px;
            min-height: 42px;
            align-content: center;
            padding: 0 4px;
        }

        .pikett-period-current span {
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .04em;
            line-height: 1.1;
            text-transform: uppercase;
        }

        .pikett-period-current strong {
            color: #1f2937;
            font-size: 14px;
            line-height: 1.2;
            white-space: nowrap;
        }

        .pikett-period-today.is-current {
            border-color: #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
        }

        .pikett-planning-print {
            margin-left: auto;
        }

        .pikett-planning-print .button-secondary {
            margin-left: 0;
        }

        .pikett-controls {
            display: flex;
            gap: 12px;
            align-items: end;
            flex-wrap: wrap;
            margin-bottom: 0;
        }

        .pikett-controls .form-row {
            margin-bottom: 0;
            min-width: 130px;
        }

        .pikett-worker-panel {
            position: relative;
        }

        .pikett-print-panel {
            position: relative;
        }

        .pikett-worker-panel summary {
            display: inline-block;
            background: white;
            border: 1px solid var(--brand-blue-border);
            border-radius: 6px;
            color: var(--brand-blue-dark);
            cursor: pointer;
            font-weight: bold;
            padding: 10px 12px;
            user-select: none;
        }

        .pikett-print-panel summary {
            display: inline-block;
            background: white;
            border: 1px solid var(--brand-blue-border);
            border-radius: 6px;
            color: var(--brand-blue-dark);
            cursor: pointer;
            font-weight: bold;
            padding: 10px 12px;
            user-select: none;
        }

        .pikett-worker-panel[open] summary {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .pikett-print-panel[open] summary {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .pikett-worker-panel form {
            position: fixed;
            top: 150px;
            right: 24px;
            z-index: 120;
            width: min(520px, calc(100vw - 56px));
            max-height: calc(100vh - 190px);
            overflow: auto;
            background: white;
            border: 1px solid var(--brand-blue-border);
            border-radius: 8px;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
            padding: 12px;
        }

        .pikett-doerfer-management {
            width: 100%;
        }

        .pikett-doerfer-management table {
            width: 100%;
        }

        .pikett-doerfer-management .app-table-card {
            margin-bottom: 0;
        }

        .pikett-print-panel form {
            position: absolute;
            right: 0;
            z-index: 40;
            width: min(420px, calc(100vw - 56px));
            background: white;
            border: 1px solid var(--brand-blue-border);
            border-radius: 6px 0 6px 6px;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
            padding: 12px;
        }

        .pikett-print-controls {
            display: grid;
            gap: 10px;
            margin-bottom: 0;
        }

        .pikett-print-controls .form-row {
            margin-bottom: 0;
        }

        .pikett-worker-panel-head {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr);
            gap: 8px;
            color: #4b5563;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 7px;
        }

        .pikett-worker-list {
            display: grid;
            gap: 6px;
            margin-bottom: 12px;
        }

        .pikett-worker-control-row {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid #eef2f7;
        }

        .pikett-worker-control-row.dragging {
            opacity: 0.45;
        }

        .pikett-drag-handle {
            justify-self: center;
        }

        .pikett-worker-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .pikett-worker-toggle input {
            width: auto;
        }

        .pikett-worker-toggle span {
            overflow-wrap: anywhere;
        }

        .pikett-worker-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            margin-bottom: 8px;
        }

        .pikett-worker-actions .button-secondary {
            margin-left: 0;
        }

        .pikett-worker-settings {
            display: grid;
            gap: 16px;
            margin-top: 18px;
        }

        .pikett-worker-settings-copy h2,
        .pikett-worker-settings-copy p {
            margin: 0;
        }

        .pikett-worker-settings-copy {
            display: grid;
            gap: 5px;
        }

        .pikett-worker-settings-table select {
            min-width: 150px;
        }

        .pikett-worker-settings-toggle {
            margin: 0;
            white-space: nowrap;
        }

        .pikett-worker-settings-order {
            width: 88px;
            min-width: 72px;
        }

        .pikett-worker-settings-actions {
            justify-content: flex-end;
            margin-top: 14px;
        }

        .pikett-ferien-create-form {
            display: grid;
            gap: 12px;
            margin: 0;
        }

        .pikett-ferien-date-grid {
            gap: 12px;
        }

        .pikett-ferien-existing {
            display: grid;
            gap: 8px;
            padding-top: 2px;
            border-top: 1px solid #e5eaf1;
        }

        .pikett-ferien-existing h3 {
            margin: 0;
            color: #1f2937;
            font-size: 14px;
        }

        .pikett-ferien-list {
            display: grid;
            gap: 7px;
        }

        .pikett-ferien-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 9px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            background: #f8fafc;
        }

        .pikett-ferien-row[hidden] {
            display: none;
        }

        .pikett-ferien-row strong,
        .pikett-ferien-row span {
            display: block;
        }

        .pikett-ferien-row span {
            color: #64748b;
            font-size: 13px;
        }

        .pikett-ferien-delete {
            min-height: 30px;
            height: 30px;
            padding: 0 9px;
            font-size: 12px;
            margin-left: 0;
            white-space: nowrap;
        }

        .pikett-worker-toggle {
            margin-bottom: 0;
            font-weight: normal;
        }

        .pikett-scroll {
            position: relative;
            z-index: 1;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        .pikett-table {
            width: max-content;
            min-width: 100%;
            box-shadow: none;
            border-radius: 0;
            border-collapse: separate;
            border-spacing: 0;
            overflow: visible;
            table-layout: auto;
        }

        .pikett-table th,
        .pikett-table td {
            min-width: 40px;
            padding: 4px;
            text-align: center;
            vertical-align: middle;
            border-right: 1px solid var(--pikett-grid-border);
            border-bottom: 1px solid var(--pikett-grid-border);
        }

        .pikett-day-header,
        .pikett-cell {
            box-sizing: border-box;
            width: 50px;
            min-width: 50px;
            max-width: 50px;
        }

        .pikett-table th.pikett-worker-column,
        .pikett-table td.pikett-worker-column {
            position: sticky;
            left: 0;
            width: 170px;
            min-width: 170px;
            max-width: 170px;
            text-align: left;
            background: white;
            background-clip: border-box;
            border-right: 1px solid #cbd5e1;
            box-shadow: 4px 0 8px rgba(15, 23, 42, 0.16);
        }

        .pikett-table th.pikett-worker-column {
            background: var(--brand-blue);
            color: white;
            border-right-color: var(--brand-blue-dark);
            z-index: 4;
        }

        .pikett-table td.pikett-worker-column {
            background: white;
            z-index: 3;
        }

        .pikett-table tbody tr:last-child td {
            border-bottom: 2px solid #cbd5e1;
        }

        .pikett-month-header {
            background: #bfdbfe;
            color: #17456f;
            font-size: 13px;
            text-align: left;
            border-left: 3px solid #64748b;
            white-space: nowrap;
            z-index: 2;
        }

        .pikett-month-corner {
            background: var(--brand-blue);
            border-right-color: var(--brand-blue);
            z-index: 13;
        }

        .pikett-day-header {
            background: white;
            color: #111827;
            font-size: 12px;
            line-height: 1.15;
            z-index: 1;
        }

        .pikett-day-header.weekend,
        .pikett-cell.weekend,
        .pikett-day-header.holiday,
        .pikett-cell.holiday {
            background: #cbd5e1;
            color: #111827;
        }

        .pikett-day-header.month-start,
        .pikett-cell.month-start {
            border-left: 3px solid #64748b;
        }

        .pikett-cell-button {
            display: block;
            position: relative;
            width: 100%;
            box-sizing: border-box;
            height: 30px;
            min-height: 30px;
            max-height: 30px;
            border: 1px solid var(--pikett-grid-border);
            border-radius: 4px;
            background: #f8fafc;
            cursor: pointer;
            font: inherit;
            font-size: 12px;
            color: #1f2937;
            padding: 2px;
            line-height: 1.15;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pikett-cell-button:hover {
            border-color: var(--brand-blue);
        }

        .pikett-cell.weekend .pikett-cell-button:not(.assigned):not(.absence),
        .pikett-cell.holiday .pikett-cell-button:not(.assigned):not(.absence) {
            background: transparent;
        }

        .pikett-cell-button.assigned {
            background: #15803d;
            color: white;
            font-weight: bold;
        }

        .pikett-cell-button.absence {
            color: #111827;
            font-size: 11px;
        }

        .pikett-cell-button.allowed-absence {
            color: #111827;
            font-size: 11px;
        }

        .pikett-cell-button.assigned.allowed-absence {
            color: white;
            font-size: 12px;
        }

        .pikett-cell-button.ferien {
            border-color: #d6a445;
            background: #fff7ed;
            color: #7c2d12;
            font-weight: bold;
        }

        .pikett-cell.weekend .pikett-cell-button.ferien,
        .pikett-cell.holiday .pikett-cell-button.ferien {
            background: #fff7ed;
        }

        .pikett-cell-button.ferien:not(.assigned) {
            cursor: not-allowed;
        }

        .pikett-cell-button.ferien-conflict {
            border-color: #b45309;
            background: #f97316;
            color: #fff;
            font-size: 11px;
            font-weight: 800;
        }

        .pikett-cell.weekend .pikett-cell-button.ferien-conflict,
        .pikett-cell.holiday .pikett-cell-button.ferien-conflict {
            background: #f97316;
        }

        .pikett-absence-dot {
            position: absolute;
            top: 3px;
            right: 3px;
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: var(--pikett-absence-color, #dbeafe);
            border: 1px solid rgba(255,255,255,0.85);
        }

        .pikett-cell-button[disabled] {
            cursor: not-allowed;
            border-color: transparent;
        }

        .pikett-status {
            margin-top: 10px;
            min-height: 20px;
            color: #6f4600;
            font-weight: bold;
        }

        .pikett-legend {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 10px;
            color: #475569;
            font-size: 13px;
        }

        .pikett-legend strong {
            color: #334155;
            margin-right: 2px;
        }

        .pikett-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }

        .pikett-legend-swatch {
            display: inline-block;
            width: 18px;
            height: 12px;
            border: 1px solid var(--pikett-grid-border);
            border-radius: 2px;
            flex: 0 0 auto;
        }

        .pikett-legend-swatch-ferien {
            border-color: #d6a445;
            background: #fff7ed;
        }

        .pikett-legend-swatch-ferien-conflict {
            border-color: #b45309;
            background: #f97316;
        }

        .pikett-top-controls {
            align-items: center;
            padding: 12px;
            border: 1px solid #dbe3ec;
            border-radius: 10px;
            background: #f8fafc;
        }

        .pikett-planning-controls {
            align-items: center;
            gap: 10px;
        }

        .pikett-controls .form-row {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .pikett-controls .form-row label {
            margin: 0;
            color: #475569;
            font-size: 13px;
            font-weight: 700;
        }

        .pikett-controls select {
            min-width: 96px;
            height: 42px;
            padding: 0 34px 0 11px;
            border-color: #cbd5e1;
            border-radius: 7px;
            background-color: #fff;
            font-size: 14px;
            font-weight: 650;
        }

        .pikett-worker-panel summary,
        .pikett-planning-print .button-secondary,
        .pikett-edit-start {
            display: inline-flex;
            min-height: 42px;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            gap: 7px;
            margin: 0;
            padding: 0 13px;
            border-radius: 7px;
            font-size: 14px;
            font-weight: 700;
            line-height: 1;
        }

        .pikett-worker-panel summary svg,
        .pikett-planning-print svg,
        .pikett-edit-start svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .pikett-edit-toolbar {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-height: 42px;
        }

        .pikett-edit-toolbar[hidden] {
            display: none;
        }

        .pikett-edit-mode {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #166534;
            font-size: 14px;
            font-weight: 800;
        }

        .pikett-edit-mode > span {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: #22c55e;
            box-shadow: 0 0 0 3px #dcfce7;
        }

        .pikett-edit-lock-text {
            color: #64748b;
            font-size: 13px;
        }

        .pikett-table thead tr:first-child th {
            position: sticky;
            top: 0;
        }

        .pikett-table thead tr:nth-child(2) th {
            position: sticky;
            top: 29px;
        }

        .pikett-table thead .pikett-worker-column {
            z-index: 14;
        }

        .pikett-day-header.week-start,
        .pikett-cell.week-start {
            border-left: 2px solid #94a3b8;
        }

        .pikett-day-header.week-end,
        .pikett-cell.week-end {
            border-right: 2px solid #94a3b8;
        }

        .pikett-day-header.today,
        .pikett-cell.today {
            box-shadow: inset 2px 0 #2563eb, inset -2px 0 #2563eb;
        }

        .pikett-week-number {
            min-height: 11px;
            margin-bottom: 2px;
            color: #64748b;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .01em;
            white-space: nowrap;
        }

        .pikett-week-header-action {
            display: flex;
            width: 100%;
            min-width: 42px;
            min-height: 26px;
            align-items: center;
            justify-content: center;
            margin: -2px 0 1px;
            padding: 2px;
            border: 1px solid transparent;
            border-radius: 5px;
            background: transparent;
            color: #64748b;
            cursor: default;
            font: inherit;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .01em;
            line-height: 1;
            pointer-events: none;
            white-space: nowrap;
        }

        .pikett-is-editing .pikett-week-header-action,
        .pikett-projektleiter-is-editing .pikett-week-header-action {
            min-height: 32px;
            border-color: #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
            cursor: pointer;
            pointer-events: auto;
            touch-action: manipulation;
        }

        .pikett-is-editing .pikett-week-header-action:hover,
        .pikett-is-editing .pikett-week-header-action:focus-visible,
        .pikett-projektleiter-is-editing .pikett-week-header-action:hover,
        .pikett-projektleiter-is-editing .pikett-week-header-action:focus-visible {
            border-color: #60a5fa;
            background: #dbeafe;
            outline: 2px solid rgba(37, 99, 235, .2);
            outline-offset: 1px;
        }

        .pikett-cell {
            position: relative;
        }

        .pikett-cell-button:not(.projektleiter-pikett-cell-button):not(.dorf-pikett-cell-button) {
            cursor: default;
            user-select: none;
            touch-action: manipulation;
        }

        .projektleiter-pikett-cell-button {
            cursor: default;
            user-select: none;
            touch-action: manipulation;
        }

        .pikett-is-editing .pikett-cell-button:not([disabled]),
        .pikett-projektleiter-is-editing .projektleiter-pikett-cell-button:not([disabled]) {
            cursor: pointer;
        }

        .pikett-cell.pikett-unsaved::after {
            content: "";
            position: absolute;
            right: 3px;
            bottom: 3px;
            z-index: 3;
            width: 7px;
            height: 7px;
            border: 2px solid #fff;
            border-radius: 999px;
            background: #f59e0b;
            box-shadow: 0 0 0 1px #b45309;
        }


        .pikett-week-modal-panel {
            width: min(580px, calc(100vw - 32px));
        }

        .pikett-week-modal-subtitle {
            margin: 4px 0 0;
            color: #64748b;
            font-size: 14px;
        }

        .pikett-week-boundary-help {
            margin: 0;
            padding: 8px 10px;
            border-radius: 6px;
            background: #f1f5f9;
        }

        .pikett-week-state-warning {
            padding: 9px 10px;
            border: 1px solid #fde68a;
            border-radius: 7px;
            background: #fffbeb;
            color: #92400e;
            font-size: 13px;
            font-weight: 650;
        }

        .pikett-week-choice-list {
            display: grid;
            gap: 8px;
            max-height: min(52vh, 480px);
            overflow-y: auto;
            padding: 2px;
        }

        .pikett-week-choice {
            position: relative;
            display: grid;
            grid-template-columns: 20px minmax(0, 1fr);
            align-items: center;
            gap: 11px;
            min-height: 56px;
            padding: 9px 11px;
            border: 1px solid #dbe3ec;
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            user-select: none;
        }

        .pikett-week-choice:hover {
            border-color: #93c5fd;
            background: #f8fbff;
        }

        .pikett-week-choice:has(input:focus-visible) {
            outline: 2px solid rgba(37, 99, 235, .25);
            outline-offset: 2px;
        }

        .pikett-week-choice:has(input:checked) {
            border-color: #2563eb;
            background: #eff6ff;
            box-shadow: 0 0 0 1px #2563eb;
        }

        .pikett-week-choice.is-disabled {
            background: #f8fafc;
            color: #94a3b8;
            cursor: not-allowed;
            opacity: .78;
        }

        .pikett-week-choice input {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            opacity: 0;
        }

        .pikett-week-choice-indicator {
            width: 18px;
            height: 18px;
            box-sizing: border-box;
            border: 2px solid #94a3b8;
            border-radius: 999px;
            background: #fff;
        }

        .pikett-week-choice:has(input:checked) .pikett-week-choice-indicator {
            border: 5px solid #2563eb;
        }

        .pikett-week-choice input:checked + .pikett-week-choice-indicator {
            border: 5px solid #2563eb;
        }

        .pikett-week-choice-copy {
            display: grid;
            min-width: 0;
            gap: 2px;
        }

        .pikett-week-choice-copy strong {
            color: #1e293b;
            font-size: 14px;
            line-height: 1.2;
        }

        .pikett-week-choice-copy > span,
        .pikett-week-choice-copy small {
            color: #64748b;
            font-size: 12px;
            line-height: 1.25;
        }

        .pikett-week-choice-copy small:empty {
            display: none;
        }

        .pikett-week-choice-unassigned {
            border-style: dashed;
        }

        @media (max-width: 900px) {
            .pikett-top-controls,
            .pikett-planning-controls {
                align-items: stretch;
            }

            .pikett-planning-controls {
                flex: 1 1 100%;
            }

            .pikett-period-navigation {
                flex: 1 1 100%;
                grid-template-columns: 42px minmax(0, 1fr) auto 42px;
            }

            .pikett-planning-print {
                margin-left: 0;
            }
        }

        @media (max-width: 620px) {
            .pikett-period-navigation {
                grid-template-columns: 44px minmax(0, 1fr) 44px;
            }

            .pikett-period-navigation .button-secondary {
                min-height: 44px;
            }

            .pikett-period-current {
                min-width: 0;
            }

            .pikett-period-current strong {
                white-space: normal;
            }

            .pikett-period-today {
                grid-column: 1 / -1;
                grid-row: 2;
            }

            .pikett-period-step:last-child {
                grid-column: 3;
                grid-row: 1;
            }

            .pikett-edit-start,
            .pikett-edit-toolbar,
            .pikett-planning-controls > [data-app-modal-target="projektleiter-ferien-modal"],
            .pikett-planning-print,
            .pikett-planning-print .button-secondary {
                width: 100%;
            }

            .pikett-edit-toolbar {
                align-items: stretch;
                flex-direction: column;
            }
        }

        .pikett-area-tabs,
        .pikett-dienst-tabs {
            margin-bottom: 16px;
        }

        .pikett-dienst-month-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 18px;
            padding: 12px 14px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        }

        .pikett-dienst-month-form,
        .pikett-dienst-month-form .form-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 0;
        }

        .pikett-dienst-month-form label {
            margin: 0;
            color: #334155;
            font-size: 13px;
            font-weight: 700;
        }

        .pikett-dienst-month-form input[type="month"] {
            width: 190px;
            min-height: 40px;
            box-sizing: border-box;
        }

        .pikett-dienst-section {
            margin-bottom: 24px;
        }

        .pikett-dienst-section h2 {
            margin: 0 0 8px;
        }

        .pikett-dienst-group + .pikett-dienst-group {
            margin-top: 18px;
        }

        .pikett-dienst-group-title,
        .pikett-dienst-print-group-title {
            margin: 0 0 8px;
            font-size: 1rem;
            color: #334155;
        }

        .pikett-dienst-group table,
        .pikett-dienst-print-group .pikett-dienst-print-table {
            table-layout: fixed;
        }

        .pikett-dienst-group th:first-child,
        .pikett-dienst-print-group .pikett-dienst-print-table th:first-child {
            width: 40%;
        }

        .pikett-dienst-print-group {
            break-inside: avoid;
            page-break-inside: avoid;
        }

        .pikett-dienst-section > .app-table-card {
            margin-bottom: 0;
        }

        .pikett-dienst-result-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 10px;
        }

        .pikett-dienst-result-header .subtitle {
            margin-bottom: 0;
        }

        .pikett-dienst-lock-status {
            display: inline-block;
            margin-top: 2px;
            color: #166534;
            font-weight: bold;
            font-size: 13px;
        }

        .pikett-dienst-print-save-form {
            flex: 0 0 auto;
        }

        .pikett-dienst-month-toolbar > .button,
        .pikett-dienst-print-save-form .button {
            min-height: 40px;
            margin: 0;
        }

        .pikett-dienst-print-save-form .button:disabled {
            border: 1px solid #bbf7d0;
            background: #f0fdf4;
            color: #166534;
            cursor: not-allowed;
            opacity: 1;
        }

        @media (max-width: 640px) {
            .pikett-dienst-month-toolbar {
                align-items: stretch;
                flex-direction: column;
            }

            .pikett-dienst-month-form,
            .pikett-dienst-month-form .form-row {
                width: 100%;
            }

            .pikett-dienst-month-form .form-row {
                align-items: stretch;
                flex-direction: column;
                gap: 6px;
            }

            .pikett-dienst-month-form input[type="month"],
            .pikett-dienst-month-toolbar > .button,
            .pikett-dienst-print-save-form,
            .pikett-dienst-print-save-form .button {
                width: 100%;
            }
        }

        .pikett-dienst-coverage-status {
            margin-top: 12px;
            padding: 10px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: bold;
            line-height: 1.3;
        }

        .pikett-dienst-coverage-status.incomplete {
            border: 1px solid #fca5a5;
            background: #fef2f2;
            color: #991b1b;
        }

        .pikett-dienst-coverage-status.complete {
            border: 1px solid #86efac;
            background: #f0fdf4;
            color: #166534;
        }

        .pikett-dienst-coverage-status details {
            margin-top: 6px;
        }

        .pikett-dienst-coverage-status summary {
            cursor: pointer;
        }

        .pikett-dienst-missing-dates {
            margin-top: 4px;
            font-weight: normal;
        }

        .pikett-dienst-actions {
            margin-top: 12px;
        }

        .pikett-dienst-control-table {
            border: 1px solid #cbd5e1;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        }

        .pikett-dienst-control-table th {
            background: var(--brand-blue);
            color: white;
            border-bottom: 1px solid var(--brand-blue-dark);
        }

        .pikett-dienst-control-table td {
            border-bottom: 1px solid #dbe4ef;
        }

        .pikett-dienst-control-table tbody tr:last-child td {
            border-bottom: 1px solid #cbd5e1;
        }

        .app-table-card-standalone .pikett-dienst-control-table {
            border: 0;
            box-shadow: none;
        }

        .app-table-card-standalone .pikett-dienst-control-table th {
            border-bottom-color: #dbe4ef;
            background: #f8fafc;
            color: #334155;
        }

        .pikett-current-rate td {
            background: #eff6ff;
        }

        .pikett-dienst-card {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            flex-wrap: wrap;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            margin-bottom: 10px;
        }

        .pikett-options-card {
            display: grid;
            grid-template-columns: repeat(4, minmax(130px, 1fr));
            align-items: end;
            border-color: #dbe4ef;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        }

        .pikett-options-card .pikett-dienst-total {
            grid-column: span 2;
        }

        .pikett-options-card > .button {
            justify-self: end;
            min-height: 36px;
            height: 36px;
        }

        .pikett-dienst-card .form-row {
            margin-bottom: 0;
            min-width: 150px;
        }

        .pikett-dienst-note {
            flex: 1 1 260px;
        }

        .pikett-dienst-card-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        .pikett-dienst-card-actions .button-secondary,
        .pikett-dienst-card-actions .button-danger {
            margin-left: 0;
        }

        .pikett-dienst-total {
            align-self: center;
            min-width: 190px;
            color: #334155;
            line-height: 1.25;
        }

        .pikett-dienst-total span {
            display: block;
            margin-top: 3px;
        }

        .pikett-dienst-snapshot {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 10px;
        }

        .pikett-dienst-snapshot summary {
            cursor: pointer;
            font-weight: bold;
        }

        .pikett-dienst-print-toolbar {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .pikett-dienst-print-report {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 18px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }

        .pikett-dienst-print-header {
            display: grid;
            grid-template-columns: 150px minmax(0, 1fr) 150px;
            gap: 16px;
            align-items: center;
            margin-bottom: 18px;
        }

        .pikett-dienst-print-header img {
            max-width: 140px;
            max-height: 42px;
        }

        .pikett-dienst-print-header h1 {
            margin: 0;
            text-align: center;
        }

        .pikett-dienst-print-header p {
            margin: 5px 0 0;
            text-align: center;
            color: #475569;
            font-weight: bold;
        }

        .pikett-dienst-print-table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid var(--pikett-grid-border);
            box-shadow: none;
            border-radius: 0;
            margin-bottom: 18px;
        }

        .pikett-dienst-print-table th,
        .pikett-dienst-print-table td {
            border: 1px solid var(--pikett-grid-border);
            padding: 8px;
        }

        .pikett-dienst-print-table th {
            background: var(--brand-blue);
            color: white;
        }

        .pikett-dienst-print-table tbody tr:last-child td {
            border-bottom: 1px solid var(--pikett-grid-border);
        }

        .pikett-dienst-print-rates {
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            padding: 10px 12px;
            margin-top: 14px;
            max-width: 760px;
        }

        .pikett-dienst-print-rates h2 {
            margin: 0 0 8px;
            font-size: 14px;
            color: #1e3a8a;
        }

        .pikett-dienst-print-rate-grid {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
        }

        .pikett-dienst-print-rate-row {
            display: grid;
            gap: 8px 12px;
        }

        .pikett-dienst-print-rate-row-money {
            grid-template-columns: repeat(2, minmax(130px, 1fr));
            max-width: 360px;
        }

        .pikett-dienst-print-rate-row-contributions {
            grid-template-columns: repeat(5, minmax(90px, 1fr));
        }

        .pikett-dienst-print-rate-label {
            display: block;
            font-weight: bold;
            color: #475569;
            font-size: 12px;
        }

        .pikett-dienst-print-rate-value {
            display: block;
            margin-top: 2px;
            font-weight: bold;
        }

        .pikett-dienst-print-footer {
            margin-top: 24px;
            text-align: right;
            color: #475569;
        }

        .pikett-print-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            flex-wrap: wrap;
            margin-bottom: 18px;
            padding: 14px;
            border: 1px solid #dbe3ec;
            border-radius: 10px;
            background: #f8fafc;
        }

        .pikett-print-heading-group {
            display: flex;
            align-items: center;
            gap: 13px;
            min-width: 280px;
        }

        .pikett-print-heading-copy h1 {
            margin: 0;
            font-size: clamp(22px, 2.2vw, 30px);
            line-height: 1.15;
        }

        .pikett-print-heading-copy .subtitle {
            margin: 3px 0 0;
        }

        .pikett-print-back-link,
        .pikett-print-actions .button,
        .pikett-print-actions .button-secondary {
            display: inline-flex;
            min-height: 42px;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            gap: 7px;
            margin-left: 0;
            padding: 0 13px;
            border-radius: 7px;
            font-size: 14px;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }

        .pikett-print-toolbar svg {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .pikett-print-filter {
            display: flex;
            flex: 1 1 620px;
            justify-content: flex-end;
            gap: 10px;
            align-items: end;
            flex-wrap: wrap;
            margin-bottom: 0;
        }

        .pikett-print-filter .form-row {
            margin-bottom: 0;
            min-width: 124px;
        }

        .pikett-print-filter label {
            margin-bottom: 5px;
            color: #475569;
            font-size: 12px;
            font-weight: 750;
        }

        .pikett-print-filter select {
            height: 42px;
            min-height: 42px;
            padding: 0 34px 0 10px;
            border-color: #cbd5e1;
            border-radius: 7px;
            background-color: #fff;
            font-size: 14px;
            font-weight: 650;
        }

        .pikett-print-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        .pikett-print-actions .button-secondary {
            margin-left: 0;
        }

        @media (max-width: 1050px) {
            .pikett-print-toolbar,
            .pikett-print-filter {
                align-items: stretch;
            }

            .pikett-print-filter {
                flex-basis: 100%;
                justify-content: flex-start;
            }
        }

        @media (max-width: 620px) {
            .pikett-print-heading-group {
                align-items: flex-start;
                flex-direction: column;
                min-width: 0;
            }

            .pikett-print-filter .form-row,
            .pikett-print-actions {
                flex: 1 1 100%;
            }

            .pikett-print-actions .button,
            .pikett-print-actions .button-secondary {
                flex: 1 1 190px;
            }
        }

        .pikett-print-plan {
            display: grid;
            gap: 14px;
        }

        .print-only {
            display: none;
        }

        .pikett-print-page {
            display: contents;
        }

        .pikett-print-page-months {
            display: grid;
            gap: 14px;
        }

        .pikett-print-month {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
            padding: 10px;
            overflow-x: auto;
        }

        .pikett-print-month h2 {
            margin: 0 0 8px;
            font-size: 18px;
        }

        .pikett-print-table {
            table-layout: fixed;
            width: 100%;
            min-width: 900px;
            border-collapse: collapse;
            box-shadow: none;
            border-radius: 0;
        }

        .pikett-print-table th,
        .pikett-print-table td {
            border: 1px solid var(--pikett-grid-border);
            padding: 2px;
            text-align: center;
            vertical-align: middle;
        }

        .pikett-print-table th {
            background: #e2e8f0;
            color: #111827;
        }

        .pikett-print-worker-column {
            width: 155px;
            text-align: left !important;
            font-weight: bold;
            font-size: 12px;
            line-height: 1.15;
        }

        .pikett-print-worker-code {
            display: none;
            color: #4b5563;
            font-size: 11px;
            font-weight: normal;
            margin-top: 2px;
        }

        .pikett-print-day-header {
            width: 24px;
            font-size: 11px;
            line-height: 1.1;
        }

        .pikett-print-cell {
            height: 20px;
            font-size: 10px;
            line-height: 1.1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pikett-print-weekend,
        .pikett-print-holiday {
            background: #cbd5e1;
        }

        .pikett-print-week-start {
            border-left-width: 2px !important;
            border-left-color: #94a3b8 !important;
        }

        .pikett-print-week-end {
            border-right-width: 2px !important;
            border-right-color: #94a3b8 !important;
        }

        .pikett-print-cell.pikett-print-assigned {
            position: relative;
            background: #15803d;
            color: white;
            font-weight: bold;
        }

        .pikett-print-cell.pikett-print-absence {
            background: #dbe4ef;
            color: #111827;
            font-size: 9px;
        }

        .pikett-print-cell.pikett-print-allowed-absence {
            position: relative;
            background: #dbe4ef;
            color: #111827;
            font-size: 9px;
        }

        .pikett-print-cell.pikett-print-assigned.pikett-print-allowed-absence {
            background: #15803d;
            color: white;
            font-size: 10px;
        }

        .pikett-print-absence-dot {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 5px;
            height: 5px;
            border-radius: 999px;
            background: #dbe4ef;
            border: 1px solid rgba(255,255,255,0.85);
        }

        .pikett-print-table tbody tr:last-child td {
            border-bottom: 2px solid #94a3b8;
        }

        @media print {
            @page {
                size: A4 landscape;
                margin: 6mm;
            }

            body {
                background: white;
                color: #111;
                font-size: 8px;
            }

            .topbar,
            .no-print,
            .pikett-print-toolbar,
            .pikett-dienst-print-toolbar {
                display: none !important;
            }

            .pikett-dienst-print-report {
                border: none;
                border-radius: 0;
                box-shadow: none;
                padding: 0;
                font-size: 10px;
            }

            .pikett-dienst-print-header {
                grid-template-columns: 38mm minmax(0, 1fr) 38mm;
                margin-bottom: 8mm;
            }

            .pikett-dienst-print-header img {
                max-width: 34mm;
                max-height: 12mm;
            }

            .pikett-dienst-print-header h1 {
                font-size: 18px;
            }

            .pikett-dienst-print-table th,
            .pikett-dienst-print-table td {
                border-color: #4b5563;
                padding: 3px 5px;
            }

            .pikett-dienst-print-table {
                border-color: #4b5563;
            }

            .pikett-dienst-print-table th {
                background: #1e3a8a !important;
                color: white !important;
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }

            .pikett-dienst-print-table tbody tr:last-child td {
                border-bottom: 1px solid #4b5563;
            }

            .pikett-dienst-print-rates {
                break-inside: avoid;
                page-break-inside: avoid;
                border-color: #4b5563;
                border-radius: 0;
                padding: 6px 8px;
                margin-top: 8mm;
                max-width: 170mm;
            }

            .pikett-dienst-print-rates h2 {
                font-size: 12px;
                margin-bottom: 4px;
            }

            .pikett-dienst-print-rate-grid {
                gap: 4px;
            }

            .pikett-dienst-print-rate-row {
                gap: 4px 7px;
            }

            .pikett-dienst-print-rate-row-money {
                grid-template-columns: repeat(2, 32mm);
                max-width: none;
            }

            .pikett-dienst-print-rate-row-contributions {
                grid-template-columns: repeat(5, 1fr);
            }

            .pikett-dienst-print-footer {
                position: fixed;
                right: 0;
                bottom: 0;
                font-size: 9px;
            }

            .page {
                display: block;
                min-height: auto;
                padding: 0;
            }

            .pikett-print-plan {
                display: block;
            }

            .print-only {
                display: flex !important;
            }

            .pikett-print-page {
                display: flex;
                flex-direction: column;
                height: 186mm;
                break-after: page;
                page-break-after: always;
            }

            .pikett-print-page:last-child {
                break-after: auto;
                page-break-after: auto;
            }

            .pikett-print-page-header {
                align-items: center;
                justify-content: space-between;
                flex: 0 0 13mm;
                margin-bottom: 2mm;
            }

            .pikett-print-page-header img {
                display: block;
                max-width: 34mm;
                max-height: 9mm;
            }

            .pikett-print-page-header div {
                flex: 1;
                text-align: center;
                font-size: 15px;
                font-weight: bold;
                color: #111827;
            }

            .pikett-print-page-header span {
                width: 34mm;
            }

            .pikett-print-page-months {
                display: grid;
                grid-template-rows: repeat(2, minmax(0, 1fr));
                gap: 2mm;
                flex: 1 1 auto;
                min-height: 0;
            }

            .pikett-print-month {
                box-shadow: none;
                border-radius: 0;
                padding: 0;
                height: auto;
                max-height: none;
                margin: 0;
                overflow: hidden;
                break-inside: avoid;
                page-break-inside: avoid;
            }

            .pikett-print-month h2 {
                font-size: 11px;
                line-height: 1.1;
                margin: 0 0 1mm;
            }

            .pikett-print-table {
                width: 100%;
                min-width: 0;
                font-size: 7px;
            }

            .pikett-print-table th,
            .pikett-print-table td {
                border-color: #4b5563;
                padding: 0.5px;
            }

            .pikett-print-worker-column {
                width: 30mm;
                font-size: 8px;
                line-height: 1.1;
            }

            .pikett-print-worker-code {
                font-size: 7px;
            }

            .pikett-print-day-header {
                width: auto;
                font-size: 6.5px;
            }

            .pikett-print-cell {
                height: 3.8mm;
                font-size: 5.5px;
            }

            .pikett-print-page-footer {
                align-items: center;
                flex: 0 0 9mm;
                margin-top: 2mm;
                border-top: 1px solid #cbd5e1;
            }

            .pikett-print-legend {
                margin-top: 1mm;
                gap: 6px;
                font-size: 7px;
                color: #111827;
            }

            .pikett-print-legend .pikett-legend-swatch {
                width: 9mm;
                height: 3mm;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .pikett-print-weekend,
            .pikett-print-holiday {
                background: #cbd5e1 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .pikett-print-cell.pikett-print-assigned {
                background: #15803d !important;
                color: white !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .pikett-print-cell.pikett-print-absence {
                background: #dbe4ef !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .pikett-print-cell.pikett-print-allowed-absence {
                background: #dbe4ef !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .pikett-print-cell.pikett-print-assigned.pikett-print-allowed-absence {
                background: #15803d !important;
                color: white !important;
            }
        }

        .clipboard-status {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #eef7ff;
            border: 1px solid #b9dcff;
            border-radius: 6px;
            padding: 7px 9px;
            font-size: 13px;
            color: #17456f;
        }

        .clipboard-status[hidden] {
            display: none;
        }

        .unassigned-box {
            background: white;
            padding: 14px;
            border-radius: 8px;
            margin-top: 20px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        @media (min-width: 768px) and (max-width: 1180px) and (any-pointer: coarse) {
            .topbar {
                padding: 8px 14px;
                gap: 10px;
            }

            .topbar-actions {
                gap: 8px;
            }

            .topbar-icon-button,
            .topbar-icon-link {
                width: 40px;
                height: 40px;
                flex: 0 0 40px;
                border-radius: 7px;
            }

            .topbar-icon-button svg,
            .topbar-icon-link svg {
                width: 20px;
                height: 20px;
            }

            .page {
                padding: 18px;
            }

            .rapport-list-toolbar {
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
                gap: 8px;
                min-height: 50px;
                padding: 0 10px;
            }

            .rapport-list-toolbar-left {
                flex: 1 1 auto;
                width: auto;
                min-width: 0;
                padding: 0;
                overflow: hidden;
                box-sizing: border-box;
            }

            .rapport-status-tabs {
                width: 100%;
                overflow-x: auto;
                scrollbar-width: none;
            }

            .rapport-status-tabs::-webkit-scrollbar {
                display: none;
            }

            .rapport-status-tab {
                flex: 0 0 auto;
                min-height: 50px;
                padding-inline: 7px;
                font-size: 12px;
            }

            .rapport-list-toolbar-actions {
                display: flex;
                flex: 0 0 auto;
                width: auto;
                flex-wrap: nowrap;
                justify-content: flex-end;
                gap: 6px;
                margin: 0 0 0 auto;
                padding: 0;
                border-top: 0;
                box-sizing: border-box;
            }

            .rapport-list-toolbar-actions .button,
            .rapport-list-toolbar-actions .button-secondary {
                flex: 0 0 auto;
                width: auto;
                min-width: 62px;
                height: 34px;
                min-height: 34px;
                padding-inline: 8px;
                font-size: 12px;
            }

            .rapport-list-search-wrap {
                flex: 0 0 clamp(130px, 19vw, 180px);
                width: clamp(130px, 19vw, 180px);
                min-width: 130px;
                max-width: 180px;
            }

            .rapport-filter-grid,
            .rapport-filter-grid-my {
                grid-template-columns: repeat(8, minmax(0, 1fr));
                gap: 10px;
            }

            .rapport-filter-grid > .form-row:nth-child(1),
            .rapport-filter-grid > .form-row:nth-child(2),
            .rapport-filter-grid > .form-row:nth-child(3),
            .rapport-filter-grid > .form-row:nth-child(4),
            .rapport-filter-grid-my > .form-row:nth-child(1),
            .rapport-filter-grid-my > .form-row:nth-child(2),
            .rapport-filter-grid-my > .form-row:nth-child(3),
            .rapport-filter-grid-my > .form-row:nth-child(4) {
                grid-column: span 2;
            }

            .rapport-filter-grid > .form-row:nth-child(5) {
                grid-column: span 3;
            }

            .rapport-filter-grid input,
            .rapport-filter-grid select {
                width: 100%;
                height: 40px;
                min-height: 40px;
                box-sizing: border-box;
                padding: 7px 9px;
                font-size: 14px;
                line-height: 1.2;
            }

            .rapport-filter-grid input[type="date"] {
                min-width: 0;
                padding-inline: 8px;
            }

            .rapport-summary-project-info {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .rapport-filter-actions,
            .app-filter-actions {
                justify-content: flex-end;
                margin-top: 12px;
            }

            .rapport-filter-actions .button,
            .rapport-filter-actions .button-secondary,
            .app-filter-actions .button,
            .app-filter-actions .button-secondary {
                height: 38px;
                min-height: 38px;
            }

            .weekly-nav {
                margin-bottom: 12px;
            }

            .weekly-wrapper {
                --weekly-date-column-width: 84px;
                --weekly-header-min-height: 42px;
                overflow-x: auto;
                overflow-y: visible;
                scroll-padding-top: 0;
            }

            .weekly-grid {
                height: clamp(520px, calc(100dvh - 190px), 760px);
            }

            .weekly-grid-header-row {
                position: relative;
                top: auto;
                z-index: 30;
                overflow: visible;
            }

            .weekly-grid-header {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .weekly-day-label {
                padding: 6px;
                font-size: 12px;
            }

            .weekly-day-link {
                white-space: nowrap;
            }

            .weekly-today-label {
                display: block;
                width: fit-content;
                margin-top: 4px;
            }

            .rapport-form-layout,
            .rapport-form-layout.project-panel-open {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-form-card {
                width: 100%;
                max-width: none;
                box-sizing: border-box;
                padding: 18px;
            }

            .rapport-form-card input#date {
                width: 240px;
                max-width: 100%;
                height: 40px;
                min-height: 40px;
                box-sizing: border-box;
                padding: 7px 9px;
            }

            .rapport-form-card .rapport-project-picker-row {
                align-items: stretch;
            }

            .rapport-form-card .rapport-project-create-button {
                min-height: 40px;
            }

            .rapport-form-card .rapport-worker-row {
                grid-template-columns: minmax(0, 1fr) 34px;
                gap: 6px 10px;
                padding: 10px;
            }

            .rapport-form-card .rapport-worker-interval-row {
                grid-template-columns: auto auto 34px;
                gap: 6px;
                justify-content: start;
            }

            .rapport-form-card .rapport-worker-interval-row label {
                grid-template-columns: auto 84px;
            }

            .rapport-form-card .rapport-worker-interval-row input {
                width: 84px;
                height: 38px;
                min-height: 38px;
                font-size: 14px;
            }

            .rapport-form-card .rapport-worker-interval-remove {
                width: 34px;
                min-width: 34px;
                height: 38px;
                min-height: 38px;
                border: 1px solid #dbe4ef;
            }

            .rapport-form-card .rapport-worker-remove {
                width: 34px;
                min-width: 34px;
                height: 34px;
                min-height: 34px;
                border: 1px solid #dbe4ef;
            }

            .rapport-form-card .rapport-section-add-button,
            .rapport-form-card .rapport-form-actions .button,
            .rapport-form-card .rapport-form-actions .button-secondary,
            .rapport-form-card .rapport-form-actions .button-danger {
                min-height: 40px;
                padding: 8px 12px;
                font-size: 14px;
            }
        }

        @media (min-width: 768px) and (max-width: 1366px) and (any-pointer: coarse) {
            .weekly-wrapper {
                --weekly-date-column-width: 76px;
                --weekly-header-min-height: 42px;
                max-width: 100%;
                box-sizing: border-box;
                overflow-x: auto;
                overflow-y: visible;
                background: #f8fafc;
            }

            .weekly-grid {
                height: auto;
                min-height: 0;
                background: #f8fafc;
            }

            .weekly-grid-header-row {
                position: static;
                top: auto;
                z-index: 30;
                flex: 0 0 auto;
                overflow: visible;
            }

            .weekly-grid-header {
                position: static;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .weekly-day-row.weekday {
                flex: 0 0 112px;
                min-height: 112px;
            }

            .weekly-day-row.weekend {
                flex: 0 0 52px;
                min-height: 52px;
            }

            .weekly-grid-header-row + .weekly-day-row {
                position: relative;
                z-index: 1;
                margin-top: 0;
                border-top: 0;
            }

            .weekly-day-label {
                padding: 6px;
                font-size: 12px;
            }

            .weekly-day-link {
                white-space: nowrap;
            }

            .weekly-today-label {
                display: block;
                width: fit-content;
                margin-top: 4px;
            }

            .daily-appointment {
                padding-right: 42px;
            }

            .weekly-appointment-block,
            .weekly-appointment-block.summary,
            .weekly-appointment-block.compact {
                padding-right: 40px;
            }

            .weekly-appointment-block.proportional {
                --weekly-positioned-min-height: calc(3.45em + 14px);
            }

            .daily-appointment-actions .appointment-action-menu summary,
            .weekly-appointment-actions .appointment-action-menu summary {
                width: 32px;
                height: 32px;
            }

            .appointment-action-menu-item {
                min-height: 38px;
                padding: 9px 12px;
                font-size: 13px;
            }

            .daily-wrapper {
                flex: 0 0 auto;
                width: 100%;
                max-width: 100%;
                height: clamp(480px, calc(100dvh - 170px), 760px);
                min-height: 0;
                box-sizing: border-box;
                overflow: auto;
                overscroll-behavior: contain;
                background: #f8fafc;
            }

            .daily-grid {
                width: 100%;
                min-width: var(--daily-grid-min-width);
                min-height: calc(42px + (var(--daily-hour-row-count) * 44px));
                box-sizing: border-box;
                background: #f8fafc;
            }

            .daily-grid-header-row,
            .daily-grid-body {
                width: 100%;
                min-width: 0;
                box-sizing: border-box;
            }

            .daily-grid-body {
                flex: 0 0 calc(var(--daily-hour-row-count) * 44px);
                min-height: calc(var(--daily-hour-row-count) * 44px);
            }

            .rapport-form-card input#date {
                display: block;
                appearance: none;
                -webkit-appearance: none;
                width: 100%;
                inline-size: 100%;
                max-width: 100%;
                min-width: 0;
                height: 46px;
                min-height: 46px;
                max-height: 46px;
                box-sizing: border-box;
                padding: 8px 10px;
                border: 1px solid #ccc;
                border-radius: 6px;
                background: #fff;
                color: inherit;
                font-size: 16px;
                line-height: 28px;
                text-align: left;
            }

            .rapport-form-card input#date::-webkit-date-and-time-value {
                min-height: 28px;
                margin: 0;
                padding: 0;
                line-height: 28px;
                text-align: left;
            }

            .rapport-form-card input#date::-webkit-calendar-picker-indicator {
                margin: 0;
                opacity: 1;
            }
        }

        @media (max-width: 767px), (min-width: 768px) and (max-width: 1000px) and (max-height: 600px) and (hover: none) and (pointer: coarse) {
            .options-nav {
                display: none;
            }

            html,
            body {
                max-width: 100%;
                overflow-x: hidden;
            }

            .appointment-details-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .appointment-details-row {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
            }

            .appointment-details-row dt {
                padding-bottom: 4px;
                border-bottom: 0;
            }

            .appointment-details-row dd {
                padding-top: 4px;
            }

            .topbar {
                padding: 7px 10px;
                gap: 8px;
                box-sizing: border-box;
                max-width: 100%;
            }

            .brand {
                flex: 1 1 auto;
                min-width: 0;
                gap: 7px;
                margin-right: 0;
                font-size: 14px;
            }

            .brand-logo {
                width: 92px;
                height: 30px;
                padding: 3px 6px;
                flex: 0 0 92px;
            }

            .brand > span:last-child {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .desktop-topbar-nav {
                display: none;
            }

            .mobile-topbar-nav {
                display: flex;
                order: 3;
                flex: 1 1 100%;
                width: 100%;
                gap: 3px;
                overflow: visible;
            }

            .mobile-topbar-nav .mobile-rapport-nav,
            .rapport-tabs {
                display: none;
            }

            .mobile-topbar-nav .topbar-direct-link,
            .mobile-topbar-nav .topbar-menu {
                flex: 1 1 0;
                min-width: 0;
                white-space: nowrap;
            }

            .mobile-topbar-nav .topbar-direct-link,
            .mobile-topbar-nav .topbar-menu-trigger {
                width: 100%;
                min-height: 38px;
                padding: 6px 7px;
                font-size: 12.5px;
            }

            .mobile-topbar-nav .topbar-menu {
                position: relative;
            }

            .topbar-dropdown {
                min-width: max(180px, 100%);
                border-radius: 7px;
            }

            .mobile-topbar-nav .topbar-dropdown {
                left: 0;
                right: auto;
                min-width: min(240px, calc(100vw - 20px));
            }

            .mobile-topbar-nav .topbar-submenu-menu {
                position: static;
                min-width: 0;
                margin: 4px 0 2px 8px;
                border-radius: 7px;
                box-shadow: none;
            }

            .topbar .topbar-dropdown a {
                font-size: 12.5px;
            }

            .topbar-menu:last-child .topbar-dropdown {
                right: 0;
                left: auto;
            }

            .topbar-spacer,
            .version-badge {
                display: none;
            }

            .topbar-actions {
                margin-left: auto;
                gap: 6px;
            }

            .topbar-icon-button,
            .topbar-icon-link {
                width: 36px;
                height: 36px;
                flex: 0 0 36px;
            }

            .page {
                min-height: calc(100vh - 94px);
                padding: 14px 10px;
                box-sizing: border-box;
                max-width: 100%;
                overflow-x: hidden;
            }

            .role-guest .page {
                justify-content: center;
                min-height: calc(100vh - 52px);
                padding: 16px 10px;
            }

            .auth-card {
                box-sizing: border-box;
                width: min(94vw, 430px);
                max-width: none;
                margin: 0 auto;
                padding: 28px 20px;
            }

            .auth-card input,
            .auth-card .button {
                min-height: 46px;
                font-size: 16px;
            }

            .appointment-form-layout {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 14px;
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }

            .appointment-card,
            .project-create-panel,
            .form-card {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }

            .appointment-card,
            .project-create-panel {
                padding: 14px 12px;
            }

            .appointment-form,
            .appointment-form .form-row,
            .rapport-form,
            .rapport-form .form-row {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                box-sizing: border-box;
            }

            .appointment-card .two-columns,
            .project-create-panel .two-columns,
            .appointment-card .worker-grid,
            .rapport-form-card .two-columns,
            .rapport-form-card .three-columns,
            .rapport-form-card .worker-grid {
                grid-template-columns: minmax(0, 1fr);
                min-width: 0;
            }

            .appointment-card label,
            .project-create-panel label,
            .rapport-form-card label {
                margin-bottom: 5px;
                font-size: 14px;
                line-height: 1.25;
                white-space: normal;
                overflow-wrap: anywhere;
            }

            .appointment-card input:not([type="checkbox"]):not([type="hidden"]),
            .appointment-card select,
            .appointment-card textarea,
            .project-create-panel input:not([type="checkbox"]):not([type="hidden"]),
            .project-create-panel select,
            .project-create-panel textarea,
            .rapport-form-card input:not([type="checkbox"]):not([type="hidden"]),
            .rapport-form-card select,
            .rapport-form-card textarea {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                min-height: 46px;
                height: 46px;
                box-sizing: border-box;
                padding: 8px 10px;
                font-size: 16px;
                line-height: 1.2;
            }

            .appointment-card textarea,
            .project-create-panel textarea,
            .rapport-form-card textarea {
                height: auto;
                min-height: 88px;
            }

            .appointment-card .appointment-note-textarea {
                min-height: 112px;
            }

            .rapport-form-card .rapport-worker-hours label {
                margin: 0;
                font-size: 12px;
                white-space: nowrap;
            }

            .rapport-form-card .rapport-worker-hours input {
                width: 72px;
                min-width: 72px;
                height: 36px;
                min-height: 36px;
                padding: 6px 7px;
                font-size: 13px;
            }

            .appointment-form input[type="date"],
            .appointment-form input[type="time"] {
                display: block;
                appearance: none;
                -webkit-appearance: none;
                width: 100%;
                inline-size: 100%;
                max-width: 100%;
                min-width: 0;
                height: 46px;
                min-height: 46px;
                max-height: 46px;
                box-sizing: border-box;
                padding: 8px 10px;
                border: 1px solid #ccc;
                border-radius: 6px;
                background-color: #fff;
                color: inherit;
                font-size: 16px;
                line-height: 1.2;
                text-align: left;
            }

            .appointment-form input[type="date"]::-webkit-date-and-time-value,
            .appointment-form input[type="time"]::-webkit-date-and-time-value {
                margin: 0;
                padding: 0;
                text-align: left;
            }

            .appointment-form input[type="date"]::-webkit-calendar-picker-indicator,
            .appointment-form input[type="time"]::-webkit-calendar-picker-indicator {
                opacity: 1;
            }

            .appointment-card .form-row,
            .project-create-panel .form-row,
            .rapport-form-card .form-row {
                margin-bottom: 12px;
            }

            .appointment-card .help,
            .project-create-panel .help,
            .rapport-form-card .help {
                font-size: 12px;
                line-height: 1.35;
            }

            .rapport-form-card,
            .rapport-form-card .rapport-material-line,
            .rapport-form-card .rapport-line-card {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }

            .rapport-material-line,
            .rapport-line-card {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-section-heading-row,
            .rapport-line-summary-card,
            .rapport-line-summary-actions,
            .rapport-modal-actions {
                align-items: stretch;
            }

            .rapport-section-heading-row,
            .rapport-line-summary-card {
                grid-template-columns: minmax(0, 1fr);
                display: grid;
            }

            .rapport-form-actions {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 8px;
            }

            .rapport-form-actions .button,
            .rapport-form-actions .button-secondary,
            .rapport-form-actions .button-danger,
            .rapport-section-add-button {
                width: 100%;
                min-height: 44px;
                margin-left: 0;
            }

            .rapport-modal-actions {
                justify-content: stretch;
            }

            .rapport-modal-actions .button,
            .rapport-modal-actions .button-secondary {
                width: 100%;
            }

            .rapport-line-summary-actions {
                justify-content: flex-end;
            }

            .rapport-line-summary-body,
            .article-image-current {
                align-items: flex-start;
            }

            .article-image-current {
                display: grid;
                grid-template-columns: 96px minmax(0, 1fr);
            }

            .article-image-current img {
                width: 96px;
                height: 96px;
            }

            .rapport-modal {
                padding: 8px;
                align-items: stretch;
            }

            .rapport-modal-card {
                width: 100%;
                max-height: calc(100vh - 16px);
                padding: 14px 12px;
            }

            .rapport-material-modal-layout {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-material-modal-layout.has-material-image-preview {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-material-modal-main {
                display: contents;
            }

            .rapport-material-modal-main > .two-columns {
                order: 1;
            }

            .rapport-material-modal-main > .form-row {
                order: 2;
            }

            .rapport-material-image-card {
                order: 3;
                justify-self: center;
                width: min(100%, 230px);
                min-height: 0;
            }

            .rapport-material-modal-main > .three-columns {
                order: 4;
            }

            .rapport-material-image-card {
                padding: 8px;
            }

            .rapport-material-image-card img {
                width: 100%;
                max-height: 140px;
                object-fit: contain;
            }

            .rapport-input-clear {
                right: 2px;
                width: 42px;
                height: 42px;
            }

            .rapport-clearable-input input {
                padding-right: 48px;
            }

            .app-page-title-row,
            .rapport-list-page-heading {
                align-items: center;
                margin-bottom: 10px;
            }

            .app-page-title-row h1,
            .rapport-list-page-heading h1 {
                font-size: 20px;
            }

            .app-page-title-row .button,
            .app-page-title-row .button-secondary,
            .rapport-list-page-heading .button {
                height: 40px;
                min-height: 40px;
            }

            .app-settings-card {
                padding: 12px;
            }

            .pikett-options-card {
                grid-template-columns: minmax(0, 1fr);
            }

            .pikett-options-card .pikett-dienst-total {
                grid-column: auto;
            }

            .pikett-options-card > .button {
                width: 100%;
                justify-self: stretch;
            }

            .app-table-toolbar,
            .rapport-list-toolbar {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 0;
                padding: 0;
            }

            .app-table-toolbar-left,
            .rapport-list-toolbar-left {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                gap: 8px;
                padding: 0 10px;
                overflow: hidden;
            }

            .app-table-toolbar-summary {
                grid-template-columns: minmax(0, 1fr);
                padding-top: 9px;
                padding-bottom: 9px;
            }

            .app-table-tabs,
            .rapport-status-tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
            }

            .app-table-tab,
            .rapport-status-tab {
                min-height: 44px;
                padding: 0 9px;
                font-size: 12.5px;
            }

            .app-table-actions,
            .rapport-list-toolbar-actions {
                width: 100%;
                display: grid;
                grid-template-columns: auto minmax(0, 1fr);
                align-items: center;
                gap: 8px;
                margin: 0;
                padding: 8px 10px;
                border-top: 1px solid #edf2f7;
                box-sizing: border-box;
            }

            .rapport-list-toolbar-actions {
                grid-template-columns: repeat(2, minmax(0, auto));
                justify-content: stretch;
            }

            .rapport-list-toolbar-actions .rapport-list-search-wrap {
                grid-column: 1 / -1;
                width: 100%;
                max-width: none;
            }

            .app-table-search-wrap,
            .app-table-search,
            .app-table-actions .button,
            .app-table-actions .button-secondary,
            .app-filter-actions .button,
            .app-filter-actions .button-secondary,
            .rapport-list-search-wrap,
            .rapport-list-search,
            .rapport-list-toolbar-actions .button,
            .rapport-list-toolbar-actions .button-secondary,
            .rapport-filter-actions .button,
            .rapport-filter-actions .button-secondary {
                width: 100%;
                min-width: 0;
                margin-left: 0;
                box-sizing: border-box;
                text-align: center;
            }

            .app-table-search,
            .rapport-list-search {
                height: 40px;
                min-height: 40px;
                padding-left: 34px;
                text-align: left;
            }

            .app-table-toolbar .button,
            .app-table-toolbar .button-secondary,
            .rapport-list-toolbar .button,
            .rapport-list-toolbar .button-secondary {
                height: 40px;
                min-height: 40px;
            }

            .app-filter-actions,
            .rapport-filter-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                align-items: stretch;
            }

            .app-row-action-menu summary,
            .rapport-list-action-menu summary {
                width: 36px;
                height: 36px;
            }

            .app-row-action-menu .appointment-action-menu-item,
            .rapport-list-action-menu .appointment-action-menu-item {
                min-height: 40px;
                padding: 10px 12px;
                font-size: 14px;
            }

            .app-filter-grid,
            .rapport-filter-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-filter-grid > .form-row,
            .rapport-filter-grid-my > .form-row {
                grid-column: 1 / -1;
            }

            .rapport-summary-project-info {
                grid-template-columns: minmax(0, 1fr);
            }

            .option-page-actions {
                width: 100%;
                justify-content: stretch;
            }

            .option-page-actions .button,
            .option-page-actions .button-secondary {
                flex: 1 1 auto;
                min-height: 40px;
                height: 40px;
            }

            .catalogue-inline-edit-panel,
            .catalogue-inline-edit-panel-wide {
                grid-template-columns: minmax(0, 1fr);
            }

            .catalogue-inline-edit-panel {
                top: 8px;
                width: calc(100vw - 16px);
                max-height: calc(100vh - 16px);
                transform: translateX(-50%);
            }

            .app-modal {
                align-items: flex-start;
                padding: 8px;
                overflow-y: auto;
            }

            .app-modal-panel {
                max-height: calc(100vh - 16px);
            }

            .catalogue-inline-material-types {
                grid-column: auto;
            }

            .catalogue-inline-edit-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .material-catalogue-heading-actions {
                width: 100%;
                justify-content: stretch;
            }

            .material-catalogue-heading-actions .material-catalogue-header-control {
                flex: 1 1 100%;
            }

            .rapport-line-card {
                padding: 10px;
                border: 1px solid #e1e5ea;
                border-radius: 8px;
                background: #fff;
                align-items: stretch;
            }

            .rapport-line-card .catalogue-fields,
            .rapport-line-card .manual-fields,
            .rapport-line-card.manual-entry-active .manual-fields {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 8px;
            }

            .rapport-line-card.manual-entry-active .catalogue-fields,
            .rapport-line-card .manual-fields {
                display: none;
            }

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

            .manual-toggle-button {
                min-height: 44px;
            }

            .row-remove-button {
                width: 44px;
                min-width: 44px;
                height: 44px;
            }

            .rapport-note-textarea {
                min-height: 132px;
            }

            .rapport-inline-form {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                align-items: stretch;
            }

            .appointment-card .field-with-button {
                align-items: stretch;
                flex-wrap: wrap;
                gap: 6px;
            }

            .rapport-form-card .field-with-button {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 8px;
            }

            .rapport-form-card .rapport-project-picker-row {
                display: flex;
                align-items: flex-start;
            }

            .rapport-form-card .rapport-project-picker-row .project-picker,
            .rapport-project-create-button {
                flex: 1 1 100%;
                width: 100%;
            }

            .rapport-form-card input#date {
                display: block;
                appearance: none;
                -webkit-appearance: none;
                width: 100%;
                inline-size: 100%;
                max-width: 100%;
                min-width: 0;
                height: 46px;
                min-height: 46px;
                max-height: 46px;
                box-sizing: border-box;
                padding: 8px 10px;
                border: 1px solid #ccc;
                border-radius: 6px;
                background: #fff;
                color: inherit;
                font-size: 16px;
                line-height: 28px;
                text-align: left;
            }

            .rapport-form-card input#date::-webkit-date-and-time-value {
                margin: 0;
                padding: 0;
                min-height: 28px;
                line-height: 28px;
                text-align: left;
            }

            .rapport-form-card input#date::-webkit-calendar-picker-indicator {
                opacity: 1;
            }

            .rapport-form-card .rapport-project-picker-row .project-picker > input {
                padding-right: 44px;
            }

            .rapport-form-card .rapport-project-clear {
                top: 3px;
                right: 3px;
                width: 38px;
                min-width: 38px;
                height: 38px;
                min-height: 38px;
            }

            .rapport-project-create-button {
                min-height: 46px;
                box-sizing: border-box;
                text-align: center;
            }

            .rapport-appointment-picker-nav {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            }

            .rapport-appointment-picker-nav strong {
                grid-column: 1 / -1;
                grid-row: 1;
            }

            .rapport-appointment-picker-days {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-appointment-picker-day {
                padding: 10px;
            }

            .rapport-appointment-picker-card {
                min-height: 48px;
                padding: 10px;
            }

            .appointment-card .field-with-button .project-picker {
                flex: 1 1 100%;
                width: 100%;
            }

            .appointment-card .field-with-button .small-button {
                min-height: 44px;
                font-size: 14px;
            }

            .appointment-card .field-with-button #clear-project-selection {
                flex: 1 1 auto;
                margin-left: 0;
            }

            .appointment-card .field-with-button .icon-button {
                flex: 0 0 46px;
                width: 46px;
            }

            .appointment-card .worker-option {
                align-items: flex-start;
                gap: 8px;
                min-width: 0;
                padding: 8px 9px;
            }

            .appointment-card .worker-option label {
                min-width: 0;
                font-size: 14px;
                overflow-wrap: anywhere;
            }

            .appointment-card .checkbox-row {
                align-items: center;
                gap: 9px;
                min-height: 36px;
            }

            .appointment-card .checkbox-row input {
                flex: 0 0 auto;
            }

            .appointment-card .actions,
            .project-create-panel .actions,
            .edit-delete-form {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
            }

            .appointment-card .actions .button,
            .appointment-card .actions .button-secondary,
            .project-create-panel .actions .button,
            .project-create-panel .actions .button-secondary,
            .edit-delete-form .button {
                flex: 1 1 calc(50% - 8px);
                min-height: 44px;
                box-sizing: border-box;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                text-align: center;
                margin-left: 0;
            }

            .edit-delete-form .button {
                flex-basis: 100%;
            }

            .project-search-results {
                max-width: 100%;
            }

            .options-tabs:not(.page-tabs),
            .mobile-options-extra {
                display: none;
            }

            .page-tabs {
                margin-left: -10px;
                margin-right: -10px;
                padding: 0 6px;
                border-right: 0;
                border-left: 0;
                border-radius: 0;
            }

            .date-nav,
            .calendar-period-controls {
                --calendar-period-control-height: 40px;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }

            .date-nav-main,
            .date-nav-side,
            .calendar-period-controls-main,
            .calendar-period-controls-side {
                width: min(100%, 430px);
                justify-content: center;
                margin-left: 0;
                flex-wrap: wrap;
            }

            .date-nav form,
            .calendar-period-controls form {
                flex: 1 1 100%;
                order: -1;
                justify-content: center;
                height: var(--calendar-period-control-height);
            }

            .date-nav input,
            .calendar-period-controls input {
                width: 100%;
                min-height: var(--calendar-period-control-height);
            }

            .calendar-period-controls .daily-date-control,
            .calendar-period-controls .weekly-date-control {
                width: 100%;
                flex: 1 1 100%;
                height: var(--calendar-period-control-height);
                min-height: var(--calendar-period-control-height);
                padding: 0 12px;
                border-radius: 6px;
            }

            .calendar-period-controls .calendar-period-label-text {
                min-height: 0;
                font-size: 14px;
                font-weight: 700;
                line-height: 1;
                text-align: center;
                white-space: nowrap;
            }

            .calendar-period-controls .calendar-period-button {
                flex: 1 1 calc(50% - 8px);
                box-sizing: border-box;
                height: var(--calendar-period-control-height);
                min-height: var(--calendar-period-control-height);
                padding: 0 8px;
                font-size: 12.5px;
                text-align: center;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .calendar-period-controls .monthly-year-form .calendar-period-label {
                flex: 1 1 auto;
                width: auto;
                min-width: 0;
                height: var(--calendar-period-control-height);
                min-height: var(--calendar-period-control-height);
                font-size: 12.5px;
            }

            .monthly-top-button {
                flex: 0 0 40px;
                width: 40px;
            }

            .calendar-period-controls .calendar-period-native-input {
                min-height: 0;
            }

            .date-nav .holiday-indicator {
                display: none;
            }

            .desktop-appointment-button-label {
                display: none;
            }

            .mobile-appointment-button-label {
                display: inline;
            }

            .daily-nav .date-nav-side > .button {
                flex: 1 1 100%;
            }

            .weekly-nav {
                margin-bottom: 10px;
            }

            .weekly-wrapper {
                --weekly-date-column-width: 92px;
                --weekly-header-min-height: 52px;
                width: calc(100% + 20px);
                margin-right: -10px;
                margin-left: -10px;
                overflow-x: auto;
                overflow-y: hidden;
                border-radius: 0;
                box-shadow: none;
                overscroll-behavior-x: contain;
                touch-action: pan-x pan-y;
            }

            .weekly-grid {
                height: auto;
                min-height: 0;
            }

            .weekly-grid-header-row {
                position: relative;
                top: auto;
                z-index: 5;
                flex: 0 0 auto;
                overflow: visible;
            }

            .weekly-day-row.weekday {
                flex: 0 0 128px;
            }

            .weekly-day-row.weekend {
                flex: 0 0 72px;
            }

            .weekly-day-header,
            .weekly-day-label {
                position: relative;
                left: auto;
                z-index: 6;
                box-shadow: none;
            }

            .weekly-day-header {
                z-index: 8;
                background: #d3eaf8;
            }

            .weekly-worker-header,
            .weekly-cell {
                min-width: 160px;
            }

            .weekly-worker-header {
                z-index: 7;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: visible;
                background: #d3eaf8;
            }

            .weekly-worker-header .daily-worker-name {
                width: 100%;
                overflow: visible;
                color: var(--brand-blue-dark);
                font-size: 14px;
                line-height: 1.15;
                text-align: center;
                white-space: normal;
                overflow-wrap: anywhere;
            }

            .weekly-day-label {
                min-width: 92px;
                padding: 6px 7px;
            }

            .weekly-cell {
                --weekly-card-inset-top: 5px;
                --weekly-card-inset-right: 7px;
                --weekly-card-inset-bottom: 4px;
                --weekly-card-inset-left: 4px;
                padding: 5px 7px 4px 4px;
            }

            .weekly-appointment-block,
            .weekly-appointment-block.summary,
            .weekly-appointment-block.compact {
                min-height: 30px;
                padding-right: 34px;
                font-size: 11px;
                line-height: 1.15;
            }

            .weekly-appointment-actions {
                top: 1px;
                right: 2px;
            }

            .weekly-appointment-actions .appointment-action-menu summary {
                width: 28px;
                height: 28px;
            }

            .rapport-form-tabs {
                display: none;
            }

            .rapport-form-page-title {
                margin: 0 0 10px;
                font-size: 20px;
                line-height: 1.2;
            }

            .rapport-form-layout {
                gap: 0;
            }

            .rapport-form-card {
                padding: 12px;
            }

            .rapport-form-card .rapport-form-section,
            .rapport-form-card .rapport-material-section {
                margin: 0;
                padding: 0 0 12px;
                border-bottom: 1px solid #e5e7eb;
            }

            .rapport-form-card .rapport-form-section + .rapport-form-section,
            .rapport-form-card .rapport-form-section + .rapport-material-section,
            .rapport-form-card .rapport-material-section + .rapport-material-section,
            .rapport-form-card .rapport-material-section + .rapport-form-section {
                padding-top: 12px;
            }

            .rapport-form-card .form-row {
                margin-bottom: 0;
            }

            .rapport-form-card .rapport-section-heading-row {
                display: flex;
                grid-template-columns: none;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                margin-bottom: 8px;
            }

            .rapport-form-card .rapport-section-heading-row h2 {
                min-width: 0;
                font-size: 16px;
                line-height: 1.2;
            }

            .rapport-form-card .rapport-section-add-button {
                flex: 0 0 auto;
                width: auto;
                min-height: 38px;
                padding: 7px 10px;
                font-size: 13px;
            }

            .rapport-form-card .linked-appointment-box {
                height: auto;
                min-height: 42px;
                margin-bottom: 10px;
            }

            .rapport-form-card .linked-appointment-text {
                display: -webkit-box;
                overflow: hidden;
                white-space: normal;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .rapport-form-card .rapport-worker-add-panel {
                margin-bottom: 8px;
                padding: 10px;
            }

            .rapport-form-card .rapport-worker-add-controls {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 7px;
            }

            .rapport-form-card #rapport-worker-select,
            .rapport-form-card #rapport-worker-manual-name {
                grid-column: 1 / -1;
            }

            .rapport-form-card .rapport-worker-add-controls .button,
            .rapport-form-card .rapport-worker-add-controls .button-secondary {
                min-height: 40px;
                padding: 8px;
            }

            .rapport-form-card .rapport-worker-list,
            .rapport-form-card .rapport-line-summary-list {
                gap: 6px;
                margin-bottom: 8px;
            }

            .rapport-form-card .rapport-worker-row {
                grid-template-columns: minmax(110px, 1fr) 30px;
                grid-template-areas:
                    "identity remove"
                    "editor editor";
                gap: 5px;
                padding: 6px 7px;
                border-radius: 6px;
            }

            .rapport-form-card .rapport-worker-identity {
                display: grid;
                justify-content: stretch;
                gap: 2px;
            }

            .rapport-form-card .rapport-worker-total-label {
                justify-self: start;
                margin-top: 2px;
                white-space: normal;
            }

            .rapport-form-card .rapport-worker-identity strong {
                font-size: 13px;
                line-height: 1.2;
            }

            .rapport-form-card .rapport-worker-time-editor {
                grid-column: 1 / -1;
                width: 100%;
            }

            .rapport-form-card .rapport-worker-interval-row {
                grid-template-columns: auto auto 30px;
                gap: 5px;
                justify-content: start;
            }

            .rapport-form-card .rapport-worker-interval-row label {
                grid-template-columns: auto minmax(0, 76px);
            }

            .rapport-form-card .rapport-worker-interval-row input {
                width: 76px;
                height: 38px;
                min-height: 38px;
                padding: 5px 6px;
                font-size: 14px;
            }

            .rapport-form-card .rapport-worker-interval-remove {
                width: 30px;
                min-width: 30px;
                height: 38px;
                min-height: 38px;
                border: 0;
            }

            .rapport-form-card .rapport-worker-remove {
                width: 30px;
                min-width: 30px;
                height: 30px;
                min-height: 30px;
                border: 0;
            }

            .appointment-note-close {
                flex-basis: 40px;
                width: 40px;
                min-width: 40px;
                height: 40px;
                min-height: 40px;
            }

            .rapport-form-card .rapport-worker-empty,
            .rapport-form-card .rapport-line-empty {
                margin-bottom: 0;
                padding: 9px 10px;
                font-size: 13px;
            }

            .rapport-form-card .rapport-line-summary-card {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 34px;
                gap: 6px;
                align-items: center;
                padding: 8px;
            }

            .rapport-form-card .rapport-line-summary-body {
                align-items: center;
                gap: 8px;
            }

            .rapport-form-card .rapport-line-summary-image {
                width: 40px;
                height: 40px;
            }

            .rapport-form-card .rapport-line-summary-title {
                font-size: 13px;
                line-height: 1.2;
            }

            .rapport-form-card .rapport-line-summary-meta,
            .rapport-form-card .rapport-line-summary-note {
                font-size: 12px;
            }

            .rapport-form-card .rapport-line-summary-actions {
                align-items: center;
                justify-content: center;
            }

            .rapport-form-card .rapport-note-textarea {
                min-height: 96px;
            }

            .rapport-form-card .rapport-form-actions {
                margin-top: 12px;
                padding-top: 12px;
                border-top: 1px solid #dbe4ef;
            }

            .rapport-form-card .rapport-form-actions .button {
                min-height: 48px;
                font-size: 15px;
            }

            .rapport-form-card .rapport-form-actions .button-danger {
                border: 1px solid #fecaca;
                background: #fff;
                color: #b91c1c;
            }

            .rapport-modal-card {
                max-height: calc(100dvh - 16px);
                overscroll-behavior: contain;
            }

            .rapport-modal-header {
                position: sticky;
                top: -14px;
                z-index: 4;
                margin: -14px -12px 10px;
                padding: 12px;
                border-bottom: 1px solid #e5e7eb;
                background: #fff;
            }

            .rapport-modal-header h2 {
                font-size: 18px;
                line-height: 1.2;
            }

            .rapport-modal-fields,
            .rapport-material-modal-main {
                gap: 8px;
            }

            .rapport-modal-card .two-columns,
            .rapport-modal-card .three-columns {
                grid-template-columns: minmax(0, 1fr);
                gap: 8px;
            }

            .rapport-modal-card .form-row {
                margin-bottom: 8px;
            }

            .rapport-modal-card input:not([type="checkbox"]):not([type="hidden"]),
            .rapport-modal-card select,
            .rapport-modal-card textarea {
                width: 100%;
                min-width: 0;
                min-height: 44px;
                box-sizing: border-box;
                font-size: 16px;
            }

            .rapport-modal-note {
                min-height: 92px;
            }

            .rapport-material-image-card {
                min-height: 110px;
                padding: 8px;
            }

            .rapport-material-image-card img {
                max-height: 130px;
            }

            .rapport-material-image-placeholder {
                min-height: 90px;
            }

            .rapport-modal-actions {
                position: sticky;
                bottom: -14px;
                z-index: 4;
                margin: 10px -12px -14px;
                padding: 10px 12px 12px;
                border-top: 1px solid #e5e7eb;
                background: #fff;
            }

            .smart-autocomplete-results {
                z-index: 1100;
                max-height: min(240px, 40vh);
            }

            .mobile-daily-agenda {
                display: grid;
                gap: 10px;
                width: min(100%, 430px);
                margin: 0 auto;
            }

            .daily-desktop-view,
            .unassigned-box {
                display: none;
            }

            .monthly-view {
                display: none;
            }

            .daily-wrapper {
                border-radius: 6px;
                min-height: calc(100vh - 190px);
                margin-left: -10px;
                margin-right: -10px;
                width: calc(100% + 20px);
                border-radius: 0;
                box-shadow: none;
                background: #f8fafc;
            }

            .daily-grid {
                min-height: 640px;
                width: 100%;
                min-width: var(--daily-grid-min-width);
                background: #f8fafc;
            }

            .daily-grid-header-row,
            .daily-grid-body {
                width: 100%;
                min-width: 0;
            }

            .daily-grid-header {
                padding: 8px 6px;
                font-size: 13px;
            }

            .daily-time-header {
                position: static;
                z-index: 2;
            }

            .daily-time-column {
                position: static;
                z-index: auto;
                background: #f0f0f0;
                box-shadow: none;
            }

            .daily-time-slot {
                padding-top: 7px;
                font-size: 14px;
            }

            .daily-worker-header {
                min-width: 0;
            }

            .daily-appointment.viewer-appointment {
                padding: 8px 6px 7px;
                font-size: 12.5px;
                line-height: 1.25;
                cursor: default;
            }

            .daily-appointment-time,
            .daily-appointment-title,
            .daily-appointment-project,
            .daily-appointment-type {
                overflow-wrap: anywhere;
            }

            .pikett-worker-panel form {
                left: 16px;
                right: 16px;
                top: 96px;
                width: auto;
                max-height: calc(100vh - 128px);
            }

            .unassigned-box {
                padding: 10px;
            }
        }

        /* Professional tabbed Rapport CRUD */
        .rapport-crud-header,
        .rapport-form-layout {
            width: min(100%, 1320px);
            margin-right: auto;
            margin-left: auto;
        }

        .rapport-crud-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 14px;
        }

        .rapport-crud-eyebrow {
            margin-bottom: 3px;
            color: #64748b;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.11em;
            text-transform: uppercase;
        }

        .rapport-crud-header .rapport-form-page-title {
            margin: 0;
            color: #172033;
            font-size: clamp(24px, 2.2vw, 32px);
            line-height: 1.15;
            letter-spacing: -0.025em;
        }

        .rapport-crud-header-status {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            min-height: 34px;
        }

        .rapport-form-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 16px;
        }

        .rapport-form-layout.project-panel-open {
            grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
        }

        .rapport-form-layout .rapport-form-card {
            width: 100%;
            max-width: none;
            min-width: 0;
            padding: 0;
            overflow: visible;
            border: 1px solid #d8e0ea;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 8px 24px rgba(30, 47, 70, 0.08);
        }

        .rapport-form-card > .form-error {
            margin: 16px 20px 0;
        }

        .rapport-form {
            min-width: 0;
        }

        .rapport-crud-tabs {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            min-width: 0;
            padding: 0 18px;
            overflow-x: auto;
            border-bottom: 1px solid #dfe6ef;
            background: #f8fafc;
            border-radius: 10px 10px 0 0;
            scrollbar-width: none;
        }

        .rapport-crud-tabs::-webkit-scrollbar {
            display: none;
        }

        .rapport-crud-tab {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 0;
            min-height: 58px;
            margin: 0;
            padding: 10px 12px;
            border: 0;
            background: transparent;
            color: #65738a;
            font: inherit;
            font-size: 13px;
            font-weight: 750;
            line-height: 1.2;
            text-align: center;
            cursor: pointer;
            transition: color 140ms ease, background 140ms ease;
        }

        .rapport-crud-tab::after {
            content: "";
            position: absolute;
            right: 12px;
            bottom: -1px;
            left: 12px;
            height: 3px;
            border-radius: 3px 3px 0 0;
            background: transparent;
        }

        .rapport-crud-tab:hover,
        .rapport-crud-tab:focus-visible {
            background: #f1f5f9;
            color: #243650;
            outline: none;
        }

        .rapport-crud-tab.active {
            color: var(--brand-blue-dark);
        }

        .rapport-crud-tab.active::after {
            background: var(--brand-blue);
        }

        .rapport-crud-tab svg,
        .rapport-summary-icon svg,
        .rapport-field-label-icon svg,
        .rapport-button-icon {
            width: 19px;
            height: 19px;
            flex: 0 0 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .rapport-crud-panel {
            min-height: 420px;
            margin: 0;
            padding: 24px 26px 28px;
            border: 0;
            background: #fff;
        }

        .rapport-crud-panel[hidden] {
            display: none !important;
        }

        .rapport-panel-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 20px;
            padding-bottom: 14px;
            border-bottom: 1px solid #e6ebf2;
        }

        .rapport-panel-heading h2 {
            margin: 0;
            color: #1e293b;
            font-size: 18px;
            line-height: 1.25;
        }

        .rapport-form-card .button-secondary,
        .rapport-form-layout .project-create-panel .button-secondary,
        .rapport-modal .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-left: 0;
            border: 1px solid #a9c4dd;
            background: #fff;
            color: #175a8f;
            box-shadow: 0 1px 2px rgba(30, 47, 70, 0.04);
            transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
        }

        .rapport-form-card .button-secondary:hover,
        .rapport-form-card .button-secondary:focus-visible,
        .rapport-form-layout .project-create-panel .button-secondary:hover,
        .rapport-form-layout .project-create-panel .button-secondary:focus-visible,
        .rapport-modal .button-secondary:hover,
        .rapport-modal .button-secondary:focus-visible {
            border-color: var(--brand-blue);
            background: #f8fbfe;
            color: var(--brand-blue-dark);
            box-shadow: 0 0 0 3px rgba(0, 89, 153, 0.1);
            outline: none;
        }

        .rapport-form-card .button-secondary:active,
        .rapport-form-layout .project-create-panel .button-secondary:active,
        .rapport-modal .button-secondary:active {
            background: #edf5fc;
            box-shadow: none;
        }

        .rapport-button-icon {
            width: 17px;
            height: 17px;
            flex-basis: 17px;
        }

        .rapport-field-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .rapport-field-label-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border: 1px solid #d5e4f1;
            border-radius: 7px;
            background: #f4f8fc;
            color: #246a9f;
        }

        .rapport-field-label-icon svg {
            width: 16px;
            height: 16px;
            flex-basis: 16px;
        }

        .rapport-overview-primary {
            display: grid;
            grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
            gap: 16px 18px;
            padding: 18px;
            border: 1px solid #e1e7ef;
            border-radius: 8px;
            background: #fbfcfe;
        }

        .rapport-overview-primary .form-row,
        .rapport-overview-field {
            min-width: 0;
            margin: 0;
        }

        .rapport-overview-field > label {
            display: block;
            margin-bottom: 6px;
        }

        .rapport-overview-project,
        .rapport-overview-note {
            grid-column: 1 / -1;
        }

        .rapport-overview-pikett {
            align-self: center;
        }

        .rapport-overview-template {
            align-self: end;
        }

        .rapport-overview-primary .linked-appointment-box {
            min-height: 42px;
            margin: 0;
            background: #fff;
        }

        .rapport-overview-primary .rapport-note-textarea {
            min-height: 86px;
            padding: 11px 12px;
            border: 1px solid #cbd6e2;
            border-radius: 9px;
            background: #fff;
            color: #1f2937;
            font: inherit;
            font-size: 14px;
            line-height: 1.5;
            resize: vertical;
            transition: border-color 140ms ease, box-shadow 140ms ease;
        }

        .rapport-overview-primary .rapport-note-textarea::placeholder {
            color: #8a97a8;
        }

        .rapport-overview-primary .rapport-note-textarea:focus {
            border-color: var(--brand-blue);
            box-shadow: 0 0 0 3px rgba(0, 89, 153, 0.12);
            outline: none;
        }

        .rapport-overview-summary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin-top: 18px;
        }

        .rapport-summary-card {
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            min-width: 0;
            min-height: 82px;
            margin: 0;
            padding: 14px;
            border: 1px solid #dde5ef;
            border-radius: 8px;
            background: #fff;
            color: #334155;
            font: inherit;
            text-align: left;
            cursor: pointer;
            transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
        }

        .rapport-summary-card:hover,
        .rapport-summary-card:focus-visible {
            border-color: #9bc3e8;
            box-shadow: 0 5px 14px rgba(36, 85, 128, 0.1);
            outline: none;
            transform: translateY(-1px);
        }

        .rapport-summary-card.active {
            border-color: #74addd;
            background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
            box-shadow: 0 7px 18px rgba(36, 85, 128, 0.12);
        }

        .rapport-summary-card.active .rapport-summary-icon {
            background: var(--brand-blue);
            color: #fff;
        }

        .rapport-summary-card.active .rapport-summary-arrow {
            color: var(--brand-blue);
            transform: rotate(90deg);
        }

        .rapport-summary-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 7px;
            background: #edf5fc;
            color: var(--brand-blue-dark);
        }

        .rapport-summary-content {
            display: grid;
            gap: 4px;
            min-width: 0;
        }

        .rapport-summary-content strong {
            overflow: hidden;
            color: #243247;
            font-size: 13px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-summary-content > span {
            overflow: hidden;
            color: #748197;
            font-size: 12px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-summary-arrow {
            color: #94a3b8;
            font-size: 21px;
            line-height: 1;
            transition: color 140ms ease, transform 140ms ease;
        }

        .rapport-overview-detail {
            margin-top: 14px;
        }

        .rapport-overview-detail[hidden],
        .rapport-overview-detail-panel[hidden] {
            display: none !important;
        }

        .rapport-overview-detail-panel {
            padding: 16px;
            border: 1px solid #dde5ef;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 1px 2px rgba(30, 47, 70, 0.03);
        }

        .rapport-overview-detail-panel .rapport-summary-section-heading {
            margin-bottom: 12px;
        }

        .rapport-overview-detail-table {
            min-width: 680px;
        }

        .rapport-overview-detail-table th,
        .rapport-overview-detail-table td {
            padding-top: 9px;
            padding-bottom: 9px;
            vertical-align: top;
        }

        .rapport-overview-detail-table tfoot th {
            border-top: 1px solid #e1e7ef;
            background: #f8fafc;
            color: #243247;
        }

        .rapport-material-overview-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 8px;
        }

        .rapport-material-overview-heading {
            justify-content: flex-start;
            gap: 8px;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }

        .rapport-material-overview-helper,
        .rapport-material-overview-info {
            margin: 4px 0 0;
            color: #64748b;
            font-size: 12px;
            line-height: 1.4;
        }

        .rapport-material-overview-info {
            margin: 0 0 10px;
            padding: 7px 9px;
            border-radius: 7px;
            background: #f6f9fc;
        }

        .rapport-overview-selection-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin: 0 0 10px;
            padding: 8px 10px;
            border: 1px solid #bfd7eb;
            border-radius: 8px;
            background: #eef7ff;
            color: #173b57;
        }

        .rapport-overview-selection-bar[hidden] {
            display: none !important;
        }

        .rapport-overview-selection-bar > div {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        .rapport-overview-selection-bar .button-secondary,
        .rapport-overview-selection-bar .button-danger {
            min-height: 34px;
            padding: 6px 10px;
        }

        .rapport-material-overview-info[hidden],
        #rapport-material-overview-total[hidden],
        #rapport-material-overview-sections[hidden],
        #rapport-service-overview-total[hidden],
        #rapport-service-overview-sections[hidden] {
            display: none !important;
        }

        .rapport-material-overview-name {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
        }

        .rapport-material-overview-shop {
            font-size: 12px;
            white-space: nowrap;
        }

        .rapport-material-unit-prices {
            flex: 1 0 100%;
            color: #64748b;
            font-size: 11px;
            line-height: 1.35;
        }

        .supplier-column-mapping-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 12px;
            margin: 14px 0;
        }

        .supplier-column-picker {
            position: relative;
        }

        .supplier-column-picker .supplier-column-trigger {
            width: 100%;
            justify-content: flex-start;
            overflow: hidden;
        }

        .supplier-column-picker .smart-autocomplete-results {
            top: calc(100% + 4px);
            left: 0;
            right: 0;
        }

        .rapport-material-overview-tabs {
            display: inline-flex;
            flex: 0 0 auto;
            gap: 3px;
            padding: 3px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #f7f9fc;
        }

        .rapport-material-overview-tabs button,
        .rapport-material-overview-tabs [role="tab"] {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
            min-height: 38px;
            padding: 7px 12px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: #526174;
            font-size: 13px;
            font-weight: 750;
            white-space: nowrap;
        }

        .rapport-material-overview-tabs button.active,
        .rapport-material-overview-tabs [role="tab"].active {
            background: #fff;
            color: var(--brand-blue-dark);
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
        }

        .rapport-material-overview-tabs button:focus-visible,
        .rapport-material-overview-tabs [role="tab"]:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: 2px;
        }

        .rapport-material-overview-table-scroll {
            overflow: auto;
            border: 1px solid #e1e7ef;
            border-radius: 8px;
        }

        .rapport-material-overview-table {
            min-width: 780px;
        }

        .rapport-material-overview-table.has-supplier-price {
            min-width: 900px;
        }

        .rapport-material-overview-table th,
        .rapport-material-overview-table td {
            padding: 8px 9px;
        }

        .rapport-material-overview-table .rapport-overview-selection-cell {
            width: 42px;
            min-width: 42px;
            padding-inline: 8px;
            text-align: center;
            vertical-align: middle;
        }

        .rapport-overview-selection-cell input {
            width: 18px;
            height: 18px;
            margin: 0;
            accent-color: var(--brand-blue);
            cursor: pointer;
        }

        .rapport-material-overview-price {
            color: #0f5f43;
            font-weight: 750;
            white-space: nowrap;
        }

        .rapport-material-overview-table th:last-child,
        .rapport-material-overview-table td:last-child {
            width: 42px;
            padding-right: 6px;
            padding-left: 4px;
        }

        .rapport-material-overview-table .rapport-material-overview-action-cell {
            width: 42px;
            padding-right: 6px;
            padding-left: 4px;
        }

        .rapport-material-overview-table .rapport-line-invoiced-heading,
        .rapport-material-overview-table .rapport-line-invoiced-cell {
            width: 96px;
            min-width: 96px;
            padding-inline: 8px;
            text-align: center;
        }

        .rapport-line-invoiced-heading {
            text-transform: uppercase;
        }

        .rapport-line-invoiced-heading > span {
            display: block;
            margin-bottom: 5px;
        }

        .rapport-line-invoiced-checkbox {
            width: 18px;
            height: 18px;
            min-width: 18px;
            margin: 0;
            accent-color: var(--brand-blue);
            cursor: pointer;
            vertical-align: middle;
        }

        .rapport-line-invoiced-checkbox:disabled {
            cursor: wait;
        }

        #rapport-line-invoicing-error {
            margin: 0 0 12px;
        }

        .rapport-material-overview-row {
            transition: background 120ms ease, box-shadow 120ms ease;
        }

        .rapport-material-overview-row[tabindex] {
            cursor: pointer;
        }

        .rapport-material-overview-row:hover {
            background: #f7fbff;
        }

        .rapport-material-overview-row:focus-visible {
            outline: none;
            box-shadow: inset 0 0 0 2px rgba(8, 120, 189, 0.55);
        }

        .rapport-material-overview-warning {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-left: 5px;
            border-radius: 50%;
            color: #b45309;
            vertical-align: middle;
        }

        button.rapport-material-overview-warning {
            padding: 0;
            border: 0;
            background: transparent;
            font: inherit;
        }

        .rapport-material-overview-warning.is-actionable {
            cursor: pointer;
        }

        .rapport-material-overview-warning:hover,
        .rapport-material-overview-warning:focus-visible {
            background: #fff7ed;
            outline: 2px solid rgba(180, 83, 9, 0.22);
            outline-offset: 1px;
        }

        .rapport-material-overview-warning svg {
            width: 15px;
            height: 15px;
            fill: #fef3c7;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .rapport-service-duplicate-card {
            width: min(760px, calc(100vw - 28px));
            max-height: min(760px, calc(100vh - 28px));
        }

        .rapport-service-duplicate-card .rapport-modal-header p {
            margin: 4px 0 0;
            color: #64748b;
            font-size: 0.9rem;
        }

        .rapport-service-duplicate-list {
            display: grid;
            gap: 14px;
            overflow-y: auto;
            padding: 2px 1px;
        }

        .rapport-service-duplicate-group {
            display: grid;
            gap: 7px;
        }

        .rapport-service-duplicate-group h3 {
            margin: 0;
            color: #334155;
            font-size: 0.82rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .rapport-service-duplicate-row {
            display: grid;
            grid-template-columns: 24px minmax(0, 1fr);
            align-items: center;
            gap: 10px;
            min-height: 54px;
            padding: 9px 11px;
            border: 1px solid #dbe5ef;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
        }

        .rapport-service-duplicate-row:has(input:checked) {
            border-color: #60a5fa;
            background: #eff6ff;
            box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
        }

        .rapport-service-duplicate-row input {
            width: 20px;
            height: 20px;
            margin: 0;
        }

        .rapport-service-duplicate-row > span {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .rapport-service-duplicate-row strong,
        .rapport-service-duplicate-row small {
            overflow-wrap: anywhere;
        }

        .rapport-service-duplicate-row small {
            color: #64748b;
        }

        .rapport-service-duplicate-actions {
            align-items: center;
            flex-wrap: wrap;
        }

        .rapport-service-duplicate-selection {
            margin-right: auto;
        }

        .rapport-history-card {
            margin: 18px 0 0;
            padding: 14px 16px;
            border: 1px solid #dce6ef;
            border-radius: 12px;
            background: #f8fafc;
        }

        .rapport-history-card h2 {
            margin: 0 0 10px;
            font-size: 0.95rem;
        }

        .rapport-history-events {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 22px;
        }

        .rapport-history-event {
            display: grid;
            gap: 2px;
        }

        .rapport-history-event strong {
            color: #475569;
            font-size: 0.75rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .rapport-history-event > span {
            display: flex;
            gap: 5px;
            color: #0f172a;
            font-size: 0.88rem;
        }

        .rapport-material-overview-billing-suggestion {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-left: 5px;
            padding: 0;
            border: 1px solid #c4b5fd;
            border-radius: 50%;
            background: #f5f3ff;
            color: #6d28d9;
            vertical-align: middle;
            cursor: pointer;
        }

        .rapport-material-overview-billing-suggestion:hover,
        .rapport-material-overview-billing-suggestion:focus-visible {
            background: #ede9fe;
            outline: 2px solid rgba(109, 40, 217, 0.2);
            outline-offset: 1px;
        }

        .rapport-material-overview-billing-suggestion svg {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .rapport-material-overview-billing-suggestion > span {
            position: absolute;
            top: -6px;
            right: -7px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border: 2px solid #fff;
            border-radius: 999px;
            background: #6d28d9;
            color: #fff;
            font-size: 9px;
            font-weight: 800;
            line-height: 12px;
        }

        .rapport-material-overview-tooltip {
            position: fixed;
            z-index: 2200;
            max-width: min(310px, calc(100vw - 16px));
            padding: 7px 9px;
            border-radius: 6px;
            background: #172033;
            color: #fff;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
            font-size: 12px;
            line-height: 1.35;
            pointer-events: none;
        }

        .rapport-billing-suggestion-card {
            display: grid;
            gap: 12px;
            width: min(580px, calc(100vw - 24px));
            max-height: min(680px, calc(100vh - 32px));
            overflow: hidden;
        }

        .rapport-billing-suggestion-list {
            display: grid;
            gap: 9px;
            overflow-y: auto;
        }

        .rapport-billing-suggestion-item {
            display: grid;
            gap: 5px;
            padding: 11px;
            border: 1px solid #ddd6fe;
            border-radius: 9px;
            background: #faf9ff;
        }

        .rapport-billing-suggestion-item > strong {
            color: #312e81;
            font-size: 14px;
        }

        .rapport-billing-suggestion-item > span,
        .rapport-billing-suggestion-item > small {
            color: #5b6473;
            font-size: 12px;
        }

        .rapport-material-overview-action-cell {
            text-align: center;
            vertical-align: middle;
            line-height: 0;
        }

        .rapport-material-overview-action {
            width: 32px;
            min-width: 32px;
            height: 32px;
            min-height: 32px;
            padding: 0;
            border-radius: 6px;
            border-color: #cbd5e1;
            background: #f8fafc;
            color: #475569;
            box-shadow: none;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.04em;
            line-height: 1;
            margin: 0;
            vertical-align: middle;
        }

        .rapport-material-overview-action:hover,
        .rapport-material-overview-action:focus-visible {
            border-color: #94a3b8;
            background: #eef2f7;
            color: #1f2937;
        }

        .rapport-material-overview-action-menu {
            position: fixed;
            top: auto;
            right: auto;
            z-index: 850;
            min-width: 150px;
        }

        .rapport-material-overview-section {
            overflow: hidden;
            margin-top: 9px;
            border: 1px solid #dfe7f0;
            border-radius: 9px;
            background: #fff;
        }

        .rapport-material-overview-section:first-child {
            margin-top: 0;
        }

        .rapport-material-overview-section-heading {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 38px;
            padding: 7px 10px;
            border-bottom: 1px solid #e4eaf1;
            background: #f8fafc;
        }

        .rapport-material-overview-section-heading svg,
        .rapport-material-overview-suggestion-section svg,
        .rapport-material-source-choice > svg {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .rapport-material-overview-section-heading svg {
            color: var(--brand-blue);
        }

        .rapport-material-overview-section-heading strong {
            min-width: 0;
            overflow: hidden;
            color: #243247;
            font-size: 13px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-material-overview-section-heading span,
        .rapport-material-overview-section-heading em {
            flex: 0 0 auto;
            color: #64748b;
            font-size: 11px;
            font-style: normal;
            font-weight: 700;
        }

        .rapport-material-overview-section-heading em {
            margin-left: auto;
            padding: 2px 6px;
            border-radius: 999px;
            background: #e5e7eb;
        }

        .rapport-material-overview-section .rapport-material-overview-table-scroll {
            border: 0;
            border-radius: 0;
        }

        .rapport-material-overview-suggestions {
            display: grid;
            gap: 6px;
            margin-top: 12px;
            padding: 10px;
            border: 1px dashed #cbd8e6;
            border-radius: 8px;
            background: #f9fbfd;
        }

        .rapport-material-overview-section .rapport-material-overview-suggestions {
            margin: 0;
            border-width: 1px 0 0;
            border-radius: 0;
        }

        .rapport-material-overview-suggestions h3 {
            margin: 0 0 2px;
            color: #526174;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.02em;
        }

        .rapport-material-overview-suggestion {
            display: grid;
            gap: 4px;
        }

        .rapport-material-overview-suggestion-section {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: #526174;
            font-size: 11px;
            font-weight: 750;
        }

        .rapport-material-overview-suggestion .rapport-linked-suggestion {
            margin: 0;
            border-style: dashed;
            background: rgba(255, 255, 255, 0.82);
        }

        .rapport-material-overview-suggestion-dimension {
            color: #64748b;
            font-size: 12px;
        }

        .rapport-material-source-chooser-card {
            display: grid;
            gap: 12px;
            width: min(520px, 100%);
        }

        .rapport-material-source-chooser-intro {
            margin: 0;
            color: #526174;
            font-size: 13px;
            line-height: 1.45;
        }

        .rapport-material-source-chooser-list {
            display: grid;
            gap: 6px;
            max-height: min(420px, 55vh);
            overflow-y: auto;
        }

        .rapport-material-source-choice {
            display: grid;
            grid-template-columns: 20px minmax(0, 1fr);
            align-items: center;
            gap: 9px;
            width: 100%;
            padding: 9px 10px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            color: #243247;
            text-align: left;
        }

        .rapport-material-source-choice:hover,
        .rapport-material-source-choice:focus-visible {
            border-color: #8fc0e2;
            background: #f2f8fd;
            outline: none;
            box-shadow: 0 0 0 2px rgba(8, 120, 189, 0.14);
        }

        .rapport-material-source-choice > svg {
            color: var(--brand-blue);
        }

        .rapport-material-source-choice > span {
            display: grid;
            min-width: 0;
            gap: 2px;
        }

        .rapport-material-source-choice strong,
        .rapport-material-source-choice small {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rapport-material-source-choice small {
            color: #64748b;
            font-size: 12px;
        }

        .rapport-overview-sketch-preview {
            display: flex;
            justify-content: center;
            overflow: hidden;
            max-height: 260px;
            border: 1px solid #e1e7ef;
            border-radius: 10px;
            background: #f8fafc;
        }

        .rapport-overview-sketch-preview[hidden] {
            display: none !important;
        }

        .rapport-overview-sketch-preview img {
            display: block;
            max-width: 100%;
            max-height: 260px;
            object-fit: contain;
        }

        .rapport-crud-panel .rapport-worker-list,
        .rapport-crud-panel .rapport-line-summary-list {
            margin-bottom: 0;
        }

        .rapport-crud-panel .rapport-worker-row,
        .rapport-crud-panel .rapport-line-summary-card {
            border-color: #dfe6ef;
            box-shadow: 0 1px 2px rgba(30, 47, 70, 0.03);
        }

        .rapport-crud-panel.rapport-sketch-section {
            display: block;
            gap: 0;
            border-radius: 0;
            background: #fff;
        }

        .rapport-crud-panel.rapport-sketch-section[hidden] {
            display: none !important;
        }

        .rapport-crud-panel .rapport-sketch-preview {
            width: min(100%, 820px);
            margin: 0 auto;
        }

        .rapport-action-bar {
            position: sticky;
            bottom: 0;
            z-index: 12;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            min-height: 70px;
            padding: 12px 20px;
            border-top: 1px solid #dce4ee;
            border-radius: 0 0 10px 10px;
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 -7px 18px rgba(30, 47, 70, 0.07);
            backdrop-filter: blur(8px);
        }

        .rapport-action-group {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 9px;
            margin-left: auto;
        }

        .rapport-action-bar .button,
        .rapport-action-bar .button-secondary,
        .rapport-action-bar .button-danger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-sizing: border-box;
            min-width: 112px;
            min-height: 42px;
            margin: 0;
            padding: 9px 16px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 750;
        }

        .rapport-action-bar .rapport-submit-action {
            min-width: 158px;
            box-shadow: 0 4px 10px rgba(0, 89, 153, 0.18);
        }

        .rapport-action-bar .rapport-delete-action {
            min-width: 90px;
            border-color: #fecaca;
            background: #fff;
            color: #b91c1c;
        }

        @media (min-width: 768px) and (max-width: 1180px) {
            .rapport-crud-header,
            .rapport-form-layout {
                width: 100%;
            }

            .rapport-crud-header {
                margin-bottom: 12px;
            }

            .rapport-crud-tabs {
                padding-inline: 8px;
            }

            .rapport-crud-tab {
                gap: 6px;
                min-height: 54px;
                padding: 8px 6px;
                font-size: 11.5px;
            }

            .rapport-crud-tab svg {
                width: 17px;
                height: 17px;
                flex-basis: 17px;
            }

            .rapport-crud-panel {
                min-height: 390px;
                padding: 20px;
            }

            .rapport-overview-primary {
                grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
                padding: 15px;
            }

            .rapport-overview-summary-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }

            .rapport-summary-card {
                min-height: 70px;
                padding: 11px 12px;
            }

            .rapport-action-bar {
                min-height: 64px;
                padding: 10px 14px;
            }

            .rapport-action-bar .button,
            .rapport-action-bar .button-secondary,
            .rapport-action-bar .button-danger {
                min-width: 100px;
                min-height: 40px;
                padding-inline: 12px;
            }
        }

        @media (max-width: 767px) {
            .rapport-crud-header {
                align-items: flex-start;
                margin-bottom: 10px;
            }

            .rapport-crud-header .rapport-form-page-title {
                font-size: 21px;
            }

            .rapport-crud-header-status {
                align-items: flex-end;
                flex-direction: column;
                gap: 4px;
            }

            .rapport-form-layout .rapport-form-card {
                padding: 0;
                border-radius: 8px;
            }

            .rapport-crud-tabs {
                display: flex;
                padding: 0 4px;
                border-radius: 8px 8px 0 0;
                -webkit-overflow-scrolling: touch;
            }

            .rapport-crud-tab {
                flex: 0 0 auto;
                min-width: 106px;
                min-height: 52px;
                padding: 8px 9px;
                font-size: 11.5px;
            }

            .rapport-crud-tab span {
                white-space: nowrap;
            }

            .rapport-crud-panel,
            .rapport-crud-panel.rapport-sketch-section {
                min-height: 360px;
                padding: 16px 12px 20px;
                border: 0;
            }

            .rapport-panel-heading {
                align-items: flex-start;
                margin-bottom: 14px;
                padding-bottom: 11px;
            }

            .rapport-panel-heading h2 {
                font-size: 16px;
            }

            .rapport-overview-primary {
                grid-template-columns: minmax(0, 1fr);
                gap: 13px;
                padding: 12px;
            }

            .rapport-overview-project,
            .rapport-overview-note {
                grid-column: auto;
            }

            .rapport-template-line-add,
            .rapport-template-line-row,
            .rapport-template-overview-primary {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-template-reference-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-overview-summary-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 8px;
                margin-top: 12px;
            }

            .rapport-summary-card {
                min-height: 64px;
                padding: 10px 11px;
            }

            .rapport-overview-detail-panel {
                padding: 12px;
            }

            .rapport-overview-detail-table {
                min-width: 640px;
            }

            .rapport-material-overview-header {
                align-items: stretch;
                flex-direction: column;
            }

            .rapport-material-overview-tabs {
                align-self: flex-start;
            }

            .rapport-material-overview-tabs button,
            .rapport-material-overview-tabs [role="tab"] {
                min-height: 42px;
            }

            .rapport-overview-sketch-preview,
            .rapport-overview-sketch-preview img {
                max-height: 200px;
            }

            .rapport-summary-icon {
                width: 34px;
                height: 34px;
            }

            .rapport-crud-panel .rapport-section-add-button {
                width: auto;
                min-height: 38px;
            }

            .rapport-action-bar {
                position: sticky;
                flex-direction: column;
                min-height: 0;
                padding: 10px;
                border-radius: 0 0 8px 8px;
            }

            .rapport-action-group {
                display: grid;
                flex: 1 1 auto;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 7px;
                width: 100%;
            }

            .rapport-action-bar .button,
            .rapport-action-bar .button-secondary,
            .rapport-action-bar .button-danger {
                width: 100%;
                min-width: 0;
                min-height: 42px;
                padding: 8px;
            }

            .rapport-action-bar .rapport-submit-action {
                grid-column: 1 / -1;
                min-width: 0;
            }

            .rapport-action-bar .rapport-delete-action {
                order: 2;
                width: 100%;
                min-height: 38px;
                border-color: transparent;
                background: transparent;
            }
        }
        /* Multi-week planner: scoped overrides keep existing daily/monthly layouts intact. */
        .weekly-page-toolbar {
            --weekly-toolbar-control-height: 40px;
            --weekly-toolbar-control-font-size: 13px;
            display: grid;
            grid-template-columns: 156px auto minmax(0, 1fr) auto;
            grid-template-rows: auto var(--weekly-toolbar-control-height);
            column-gap: 8px;
            row-gap: 3px;
            width: 100%;
            box-sizing: border-box;
            align-items: end;
            margin-bottom: 10px;
        }

        .weekly-go-to-date-label {
            grid-column: 1;
            grid-row: 1;
            align-self: end;
            margin: 0;
            color: #475569;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
        }

        .weekly-page-toolbar .weekly-toolbar-control {
            height: var(--weekly-toolbar-control-height);
            min-height: var(--weekly-toolbar-control-height);
            box-sizing: border-box;
            border-radius: 8px;
            font-family: inherit;
            font-size: var(--weekly-toolbar-control-font-size);
            line-height: 1.2;
        }

        .weekly-go-to-date-input {
            grid-column: 1;
            grid-row: 2;
            display: block;
            width: 100%;
            margin: 0;
            padding-block: 0;
            padding-inline: 10px 7px;
            appearance: auto;
            -webkit-appearance: auto;
            font-weight: 600;
        }

        .weekly-go-to-date-input::-webkit-date-and-time-value {
            margin: 0;
            padding: 0;
        }

        .weekly-go-to-date-input::-webkit-calendar-picker-indicator {
            margin: 0;
            padding: 2px;
        }

        .weekly-today-button {
            grid-column: 2;
            grid-row: 2;
            display: inline-flex;
            align-items: center;
            align-self: stretch;
            justify-content: center;
            gap: 7px;
            margin: 0;
            padding: 0 10px;
            cursor: pointer;
            font-weight: 700;
        }

        .weekly-today-button svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .weekly-page-toolbar #weekly-new-appointment {
            grid-column: 4;
            grid-row: 2;
            display: inline-flex;
            width: auto;
            align-items: center;
            align-self: stretch;
            justify-content: center;
            gap: 6px;
            margin: 0;
            padding: 0 14px;
            white-space: nowrap;
        }

        .weekly-go-to-date-input:focus-visible,
        .weekly-today-button:focus-visible,
        .weekly-page-toolbar #weekly-new-appointment:focus-visible {
            outline: 2px solid #60a5fa;
            outline-offset: 2px;
        }

        .weekly-page-toolbar .clipboard-status {
            grid-column: 3;
            grid-row: 2;
            align-self: center;
            justify-self: end;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            margin: 0;
        }

        .weekly-page-toolbar #weekly-copy-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .weekly-wrapper.weekly-planner-viewport {
            --weekly-worker-header-height: var(--weekly-header-min-height);
            --weekly-sticky-stack-height: var(--weekly-worker-header-height);
            position: relative;
            isolation: isolate;
            width: 100%;
            height: clamp(500px, calc(100dvh - 176px), 820px);
            max-width: 100%;
            margin: 0;
            box-sizing: border-box;
            overflow: auto;
            overflow-anchor: none;
            scroll-behavior: auto;
            overscroll-behavior-x: contain;
            overscroll-behavior-y: auto;
            scroll-padding-top: var(--weekly-sticky-stack-height);
            touch-action: pan-x pan-y;
            -webkit-overflow-scrolling: touch;
        }

        .weekly-planner-viewport .weekly-grid.weekly-multi-grid {
            display: flex;
            height: auto;
            min-height: 100%;
            flex-direction: column;
            background: #fff;
        }

        .weekly-planner-viewport .weekly-grid-header-row {
            position: sticky;
            top: 0;
            z-index: 30;
            flex: 0 0 auto;
            overflow: visible;
            background: #d3eaf8;
            box-shadow: 0 2px 5px rgba(15, 23, 42, .08);
        }

        .weekly-planner-viewport .weekly-day-header,
        .weekly-planner-viewport .weekly-day-label {
            position: sticky;
            left: 0;
        }

        .weekly-planner-viewport .weekly-day-header {
            z-index: 33;
        }

        .weekly-planner-viewport .weekly-day-label {
            z-index: 5;
            box-shadow: 3px 0 7px rgba(15, 23, 42, .08);
        }

        .weekly-weeks {
            display: flex;
            width: 100%;
            flex-direction: column;
        }

        .weekly-week-block {
            position: relative;
            z-index: 1;
            display: flex;
            isolation: isolate;
            contain: layout style;
            width: 100%;
            min-width: 100%;
            flex: 0 0 auto;
            flex-direction: column;
            border-bottom: 2px solid #94a3b8;
        }

        .weekly-week-block-heading {
            position: relative;
            min-height: 32px;
            box-sizing: border-box;
            padding: 7px 10px;
            border-top: 1px solid #94a3b8;
            border-bottom: 1px solid #cbd5e1;
            background: #eef4f8;
            color: #334155;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .01em;
        }

        .weekly-planner-viewport .weekly-day-row.weekday,
        .weekly-planner-viewport .weekly-day-row.weekend {
            position: relative;
            isolation: isolate;
            width: 100%;
            flex: 0 0 auto;
            height: auto;
            overflow: visible;
        }

        .weekly-planner-viewport .weekly-day-row.weekday {
            min-height: 112px;
        }

        .weekly-planner-viewport .weekly-day-row.weekend {
            min-height: 52px;
        }

        .weekly-planner-viewport .weekly-day-label,
        .weekly-planner-viewport .weekly-cell {
            min-height: inherit;
        }

        .weekly-planner-viewport .weekly-day-row.planner-selected-date::after {
            content: "";
            position: absolute;
            inset: 2px;
            z-index: 8;
            border: 2px solid rgba(37, 99, 235, .72);
            border-radius: 5px;
            pointer-events: none;
            animation: weekly-selected-date-highlight 2.2s ease-out forwards;
        }

        @keyframes weekly-selected-date-highlight {
            0%, 55% { opacity: 1; }
            100% { opacity: 0; }
        }

        .weekly-load-edge {
            position: relative;
            display: flex;
            min-height: 24px;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            color: #64748b;
            font-size: 12px;
        }

        .weekly-load-sentinel {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .weekly-load-indicator::before {
            content: "";
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-right: 6px;
            border: 2px solid #cbd5e1;
            border-top-color: #2563eb;
            border-radius: 999px;
            vertical-align: -2px;
            animation: weekly-loading-spin .8s linear infinite;
        }

        .weekly-load-retry {
            min-height: 28px;
            padding: 3px 9px;
            border: 1px solid #cbd5e1;
            border-radius: 5px;
            background: #fff;
            color: #334155;
            cursor: pointer;
            font: inherit;
            font-weight: 700;
        }

        .weekly-load-edge.has-error {
            background: #fff7ed;
            color: #9a3412;
        }

        @keyframes weekly-loading-spin {
            to { transform: rotate(360deg); }
        }

        @media (min-width: 768px) and (max-width: 1180px) and (any-pointer: coarse) {
            .weekly-page-toolbar {
                grid-template-columns: 156px max-content minmax(0, 1fr) auto;
            }

            .weekly-page-toolbar .weekly-go-to-date-input {
                position: relative;
                width: 156px;
                min-width: 156px;
                max-width: 156px;
                flex: 0 0 156px;
                padding-inline: 28px;
                text-align: center;
            }

            .weekly-page-toolbar .weekly-go-to-date-input::-webkit-date-and-time-value {
                display: flex;
                width: 100%;
                min-height: 100%;
                align-items: center;
                justify-content: center;
                margin: 0;
                padding: 0;
                text-align: center;
            }

            .weekly-page-toolbar .weekly-go-to-date-input::-webkit-datetime-edit {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
            }

            .weekly-page-toolbar .weekly-go-to-date-input::-webkit-calendar-picker-indicator {
                position: absolute;
                right: 7px;
                margin: 0;
            }

            .weekly-page-toolbar .weekly-today-button {
                width: auto;
                min-width: 104px;
                flex: 0 0 auto;
                white-space: nowrap;
            }
        }

        @media (max-width: 767px) {
            .weekly-page-toolbar {
                grid-template-columns: minmax(0, 1fr) auto;
                grid-template-rows: auto var(--weekly-toolbar-control-height);
                grid-auto-rows: var(--weekly-toolbar-control-height);
                align-items: end;
            }

            .weekly-go-to-date-input {
                width: min(156px, 100%);
            }

            .weekly-page-toolbar .clipboard-status {
                grid-column: 1;
                grid-row: 3;
                justify-self: start;
            }

            .weekly-page-toolbar #weekly-new-appointment {
                grid-column: 2;
                grid-row: 3;
                justify-self: end;
            }

            .weekly-wrapper.weekly-planner-viewport {
                width: calc(100% + 20px);
                height: clamp(450px, calc(100dvh - 166px), 700px);
                margin-right: -10px;
                margin-left: -10px;
                overflow: auto;
                border-radius: 0;
            }
        }

        /* Debrunner catalogue and mapping surfaces */
        .supplier-page-actions .button,
        .supplier-page-actions .button-secondary {
            white-space: nowrap;
        }

        .supplier-import-page {
            width: 100%;
            min-width: 0;
        }

        .supplier-import-message {
            margin-bottom: 14px;
        }

        .supplier-import-card {
            display: grid;
            gap: 16px;
            width: 100%;
            max-width: none;
            min-width: 0;
            margin-bottom: 18px;
            padding: 18px;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            box-sizing: border-box;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        }

        .supplier-import-upload-card {
            width: min(720px, 100%);
        }

        .supplier-import-report-card {
            width: min(960px, 100%);
        }

        .supplier-import-review-card {
            width: min(1040px, 100%);
        }

        .supplier-import-mapping-card {
            min-width: 0;
            max-width: 100%;
        }

        .supplier-import-section-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 14px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e7edf4;
        }

        .supplier-import-section-heading > div:first-child {
            display: grid;
            gap: 2px;
            min-width: 0;
        }

        .supplier-import-section-heading .supplier-section-kicker {
            margin: 0;
        }

        .supplier-import-section-heading h2 {
            margin: 0;
            color: #172033;
            font-size: 17px;
            line-height: 1.3;
        }

        .supplier-import-section-heading p,
        .supplier-import-file-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            margin: 0;
            color: #64748b;
            font-size: 12.5px;
            text-align: right;
        }

        .supplier-import-file-meta strong {
            max-width: 320px;
            overflow: hidden;
            color: #334155;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .supplier-import-file-field {
            width: 100%;
            max-width: 620px;
            margin: 0;
        }

        .supplier-import-file-field input[type="file"] {
            width: 100%;
            min-height: 42px;
            box-sizing: border-box;
        }

        .supplier-import-controls,
        .supplier-import-preview-section {
            display: grid;
            gap: 14px;
            min-width: 0;
        }

        .supplier-import-page .supplier-column-mapping-grid {
            grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
            gap: 10px;
            margin: 0;
        }

        .supplier-import-page .supplier-column-picker {
            min-width: 0;
            margin: 0;
            padding: 10px;
            border: 1px solid #e1e8f0;
            border-radius: 9px;
            background: #fbfdff;
        }

        .supplier-import-page .supplier-column-picker:focus-within {
            z-index: 10;
            border-color: #b7d2e5;
            background: #fff;
        }

        .supplier-import-page .supplier-column-picker > label {
            margin-bottom: 6px;
            color: #475569;
            font-size: 12px;
            font-weight: 750;
        }

        .supplier-column-label-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-width: 0;
            margin-bottom: 6px;
        }

        .supplier-column-label-row > label {
            min-width: 0;
            margin: 0;
            color: #475569;
            font-size: 12px;
            font-weight: 750;
        }

        .supplier-column-source-badge {
            flex: 0 0 auto;
            padding: 2px 6px;
            border-radius: 999px;
            background: #e9f3fb;
            color: #0f5c91;
            font-size: 9.5px;
            font-weight: 800;
            letter-spacing: 0.025em;
            text-transform: uppercase;
        }

        .supplier-import-page .supplier-column-trigger {
            min-height: 38px;
            margin: 0;
            padding: 8px 10px;
            border-color: #c8d5e1;
            border-radius: 7px;
            background: #fff;
            color: #25364a;
            font-size: 13px;
        }

        .supplier-import-page .supplier-column-trigger span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .supplier-import-page .supplier-column-picker .smart-autocomplete-results {
            max-height: 260px;
            overflow-y: auto;
            border-radius: 8px;
        }

        .supplier-import-save-profile {
            min-height: 38px;
            margin: 0;
            padding: 10px 12px;
            border: 1px solid #dbe4ef;
            border-radius: 9px;
            background: #f8fbfe;
            color: #334155;
            font-size: 13px;
        }

        .supplier-import-save-profile input {
            flex: 0 0 auto;
            margin: 0;
        }

        .supplier-import-profile-match,
        .supplier-import-review-note {
            padding: 9px 11px;
            border: 1px solid #cfe1ef;
            border-radius: 8px;
            background: #f2f8fc;
            color: #31546f;
            font-size: 12.5px;
            line-height: 1.4;
        }

        .supplier-import-preview-section {
            padding-top: 2px;
        }

        .supplier-import-preview-heading {
            padding-bottom: 10px;
        }

        .supplier-import-preview-wrap {
            display: block;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow-x: auto;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            box-sizing: border-box;
            overscroll-behavior-inline: contain;
            scrollbar-gutter: stable;
            -webkit-overflow-scrolling: touch;
        }

        .supplier-import-preview-wrap:focus-visible {
            border-color: var(--brand-blue);
            box-shadow: 0 0 0 3px rgba(0, 89, 153, 0.12);
            outline: none;
        }

        .supplier-import-preview-table {
            width: 100%;
            max-width: none;
            min-width: max(100%, var(--supplier-preview-min-width));
            margin: 0;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 0;
            box-shadow: none;
            overflow: visible;
            table-layout: fixed;
        }

        .supplier-import-preview-table th,
        .supplier-import-preview-table td {
            min-width: 0;
            padding: 9px 10px;
            border-right: 1px solid #e7edf4;
            border-bottom: 1px solid #edf2f7;
            line-height: 1.35;
            overflow-wrap: anywhere;
            white-space: normal;
        }

        .supplier-import-preview-table th {
            background: #f5f8fb;
            color: #475569;
            font-size: 11.5px;
            font-weight: 800;
            letter-spacing: 0.025em;
            text-align: left;
            text-transform: uppercase;
            vertical-align: bottom;
        }

        .supplier-import-preview-table td {
            background: #fff;
            color: #334155;
            font-size: 12.5px;
            vertical-align: top;
        }

        .supplier-import-preview-table tbody tr:nth-child(even) td {
            background: #fbfdff;
        }

        .supplier-import-preview-table th:last-child,
        .supplier-import-preview-table td:last-child {
            border-right: 0;
        }

        .supplier-import-preview-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .supplier-import-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            margin: 0;
            padding-top: 2px;
            flex-wrap: wrap;
        }

        .supplier-import-actions .button,
        .supplier-import-actions .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            margin: 0;
            padding: 8px 15px;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 13.5px;
            font-weight: 750;
        }

        .supplier-import-mapping-actions {
            padding-top: 14px;
            border-top: 1px solid #e7edf4;
        }

        .supplier-import-mapping-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
            gap: 8px;
            margin: 0;
        }

        .supplier-import-mapping-summary > div {
            display: grid;
            gap: 3px;
            min-width: 0;
            padding: 10px 11px;
            border: 1px solid #e1e8f0;
            border-radius: 8px;
            background: #fbfdff;
        }

        .supplier-import-mapping-summary dt {
            color: #64748b;
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.035em;
            text-transform: uppercase;
        }

        .supplier-import-mapping-summary dd {
            min-width: 0;
            margin: 0;
            color: #172033;
            font-size: 13px;
            font-weight: 700;
            overflow-wrap: anywhere;
        }

        .supplier-import-stats {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            overflow: hidden;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
        }

        .supplier-import-stats > div {
            display: grid;
            gap: 3px;
            padding: 12px;
            border-right: 1px solid #e7edf4;
        }

        .supplier-import-stats > div:last-child {
            border-right: 0;
        }

        .supplier-import-stats strong {
            color: #172033;
            font-size: 20px;
            line-height: 1.1;
        }

        .supplier-import-stats span {
            color: #64748b;
            font-size: 11px;
            line-height: 1.3;
        }

        .supplier-import-error-details,
        .supplier-import-result-details {
            border: 1px solid #eadcae;
            border-radius: 8px;
            background: #fffdf5;
            color: #6f5712;
            font-size: 12.5px;
        }

        .supplier-import-error-details > summary,
        .supplier-import-result-details > summary {
            padding: 9px 11px;
            cursor: pointer;
            font-weight: 750;
        }

        .supplier-import-error-list {
            display: grid;
            border-top: 1px solid #eadcae;
        }

        .supplier-import-error-list > div {
            display: grid;
            grid-template-columns: minmax(80px, auto) minmax(100px, auto) minmax(0, 1fr);
            gap: 8px;
            padding: 7px 11px;
            border-bottom: 1px solid #f0e7c8;
        }

        .supplier-import-error-list > div:last-child {
            border-bottom: 0;
        }

        .supplier-article-crud-shell {
            width: min(1040px, 100%);
        }

        .supplier-article-form {
            gap: 14px;
            padding: 18px;
        }

        .supplier-form-header {
            align-items: center;
            padding: 2px 2px 15px !important;
        }

        .supplier-section-kicker {
            display: block;
            margin-bottom: 4px;
            color: var(--brand-blue);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }

        .supplier-form-section {
            gap: 14px;
            padding: 16px;
            border-color: #dbe4ef;
            background: #fbfdff !important;
        }

        .supplier-form-section-heading {
            align-items: center;
            padding-bottom: 11px;
            border-bottom: 1px solid #e7edf4;
        }

        .supplier-form-section-heading > div:first-child,
        .supplier-mapping-heading > div:first-child {
            display: flex;
            align-items: center;
            gap: 9px;
            min-width: 0;
        }

        .supplier-form-section-heading > div:first-child .supplier-section-kicker,
        .supplier-mapping-heading > div:first-child .supplier-section-kicker {
            flex-basis: 100%;
        }

        .supplier-section-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 25px;
            min-width: 25px;
            height: 25px;
            border-radius: 999px;
            background: #e8f3fb;
            color: var(--brand-blue-dark);
            font-size: 12px;
            font-weight: 800;
        }

        .supplier-form-section-heading p {
            max-width: 420px;
        }

        .supplier-form-field-compact {
            width: min(50%, 420px);
        }

        .supplier-price-section {
            background: #f8fbfe !important;
        }

        .supplier-price-basis-fields {
            width: min(100%, 560px);
        }

        .supplier-price-panels {
            display: grid;
            grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
            gap: 12px;
        }

        .supplier-price-panel {
            display: grid;
            align-content: start;
            gap: 13px;
            padding: 14px;
            border: 1px solid #dbe4ef;
            border-radius: 12px;
            background: #fff;
        }

        .supplier-price-panel-synced {
            border-color: #cfe2f1;
            background: #f8fcff;
        }

        .supplier-price-panel-manual {
            border-color: #e2d7b7;
            background: #fffdf7;
        }

        .supplier-price-panel-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        .supplier-price-panel h5,
        .supplier-linked-list h5 {
            margin: 0;
            color: #0f172a;
            font-size: 14px;
        }

        .supplier-price-panel-heading p {
            margin: 3px 0 0;
            color: #64748b;
            font-size: 12px;
            line-height: 1.35;
        }

        .supplier-price-date {
            flex: 0 0 auto;
            padding: 4px 7px;
            border-radius: 999px;
            background: #e8f3fb;
            color: #175a8f;
            font-size: 11px;
            font-weight: 750;
        }

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

        .supplier-price-values > div {
            display: grid;
            gap: 4px;
            padding: 11px;
            border: 1px solid #dce9f3;
            border-radius: 9px;
            background: #fff;
        }

        .supplier-price-values span {
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
        }

        .supplier-price-values strong {
            color: #0f172a;
            font-size: 14px;
            overflow-wrap: anywhere;
        }

        .supplier-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 30px;
            margin: 0 !important;
            padding: 4px 9px;
            border: 1px solid #d9c99d;
            border-radius: 999px;
            background: #fff;
            color: #70520b !important;
            font-size: 12px !important;
            font-weight: 750;
            white-space: nowrap;
            box-sizing: border-box;
        }

        .supplier-toggle input {
            width: auto;
            margin: 0;
        }

        .supplier-reference-price {
            padding-top: 2px;
        }

        .supplier-active-control {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 0 !important;
            padding: 12px;
            border: 1px solid #dbe4ef;
            border-radius: 10px;
            background: #fff;
        }

        .supplier-active-control input {
            width: auto;
            margin: 3px 0 0;
        }

        .supplier-active-control > span {
            display: grid;
            gap: 2px;
        }

        .supplier-active-control strong {
            color: #1e293b;
            font-size: 13px;
        }

        .supplier-active-control small {
            color: #64748b;
            font-size: 12px;
            font-weight: 500;
        }

        .supplier-linked-list {
            display: grid;
            gap: 7px;
        }

        .supplier-linked-list h5 {
            margin-top: 3px;
        }

        .supplier-linked-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 9px 11px;
            border: 1px solid #e2e8f0;
            border-radius: 9px;
            background: #fff;
        }

        .supplier-linked-row > span:first-child {
            display: grid;
            gap: 2px;
        }

        .supplier-linked-row small {
            color: #64748b;
        }

        .supplier-status-pill {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            min-height: 23px;
            padding: 2px 8px;
            border-radius: 999px;
            background: #eef2f6;
            color: #526174;
            font-size: 11px;
            font-weight: 750;
            line-height: 1.2;
            white-space: nowrap;
        }

        .supplier-status-pill.is-active {
            background: #e8f6ee;
            color: #18723b;
        }

        .supplier-status-pill.is-inactive {
            background: #f1f3f5;
            color: #6b7280;
        }

        .supplier-status-pill.is-manual {
            background: #fff3d6;
            color: #7a5600;
        }

        .supplier-article-list-card {
            margin-bottom: 18px;
        }

        .supplier-page-message {
            margin-bottom: 12px;
            padding: 10px 12px;
            border: 1px solid #b9dfc7;
            border-radius: 8px;
            background: #eef9f2;
            color: #176338;
            font-size: 13px;
            font-weight: 650;
        }

        .supplier-page-message .supplier-import-result-details {
            margin-top: 8px;
            background: rgba(255, 255, 255, 0.72);
            color: #4f5f52;
            font-weight: 400;
        }

        .supplier-article-toolbar {
            min-height: 56px;
        }

        .supplier-article-toolbar > .supplier-page-actions {
            flex-wrap: wrap;
        }

        .supplier-article-filter-actions {
            flex-wrap: nowrap;
        }

        .supplier-toolbar-filter {
            width: 180px;
            min-height: 38px;
            height: 38px;
            margin: 0;
            padding: 6px 30px 6px 9px;
            border-color: #cbd6e2;
            border-radius: 8px;
            font-size: 13px;
        }

        .supplier-table-search-wrap {
            flex-basis: 285px;
            width: min(285px, 34vw);
        }

        .supplier-article-table {
            min-width: 900px;
            table-layout: fixed;
        }

        .supplier-article-table th:nth-child(1) { width: 125px; }
        .supplier-article-table th:nth-child(2) { width: 330px; }
        .supplier-article-table th:nth-child(3) { width: 190px; }
        .supplier-article-table th:nth-child(4) { width: 150px; }
        .supplier-article-table th:nth-child(5) { width: 80px; }
        .supplier-article-table th:nth-child(6) { width: 54px; }

        .supplier-article-table td {
            height: 50px;
        }

        .supplier-primary-cell,
        .supplier-source-cell,
        .supplier-description-cell,
        .supplier-mapping-article {
            display: grid;
            align-content: center;
            gap: 3px;
            min-width: 0;
        }

        .supplier-primary-cell strong,
        .supplier-description-cell strong,
        .supplier-mapping-article strong {
            color: #172033;
            font-size: 13px;
        }

        .supplier-description-cell strong {
            display: -webkit-box;
            max-width: 310px;
            overflow: hidden;
            line-height: 1.3;
            overflow-wrap: anywhere;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .supplier-price-cell {
            white-space: nowrap;
        }

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

        .supplier-price-stack > span {
            display: grid;
            gap: 2px;
            min-width: 0;
        }

        .supplier-price-stack > span {
            white-space: normal;
        }

        .supplier-price-stack small,
        .supplier-article-meta {
            color: #64748b;
            font-size: 11px;
            font-weight: 650;
        }

        .supplier-description-cell small,
        .supplier-source-cell small,
        .supplier-mapping-article small {
            display: block;
            max-width: 300px;
            color: #64748b;
            font-size: 11.5px;
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .supplier-secondary-value {
            color: #64748b;
            font-size: 12px;
        }

        .supplier-list-price {
            color: #0f5f43;
            font-size: 13px;
        }

        .supplier-link-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 27px;
            height: 27px;
            padding: 0 7px;
            border-radius: 999px;
            background: #edf5fb;
            color: #175a8f;
            font-size: 12px;
            font-weight: 800;
            box-sizing: border-box;
        }

        .supplier-table-action-cell {
            width: 1%;
            white-space: nowrap;
            text-align: right;
        }

        .supplier-row-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            margin: 0;
            padding: 0 9px;
            border: 1px solid #c9d6e2;
            border-radius: 7px;
            background: #fff;
            color: #24567d;
            font: inherit;
            font-size: 12px;
            font-weight: 750;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            box-sizing: border-box;
        }

        .supplier-row-action:hover,
        .supplier-row-action:focus-visible {
            border-color: #8eb8d8;
            background: #f3f8fc;
            color: #0f5c91;
            outline: none;
        }

        .supplier-row-action-primary {
            border-color: var(--brand-blue);
            background: var(--brand-blue);
            color: #fff;
        }

        .supplier-row-action-primary:hover,
        .supplier-row-action-primary:focus-visible {
            background: var(--brand-blue-dark);
            color: #fff;
        }

        .supplier-row-action-shop {
            color: #0f766e;
        }

        .supplier-row-action-danger {
            border-color: #e3c3c3;
            color: #a33b3b;
        }

        .supplier-row-action-danger:hover,
        .supplier-row-action-danger:focus-visible {
            border-color: #d6a3a3;
            background: #fff7f7;
            color: #8f2929;
        }

        .supplier-empty-state {
            display: grid;
            justify-items: center;
            gap: 5px;
            padding: 34px 18px;
            color: #64748b;
            text-align: center;
        }

        .supplier-empty-state > span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 999px;
            background: #eef5fa;
            color: #3f6f93;
            font-size: 20px;
        }

        .supplier-empty-state strong {
            color: #334155;
            font-size: 14px;
        }

        .supplier-empty-state p {
            margin: 0;
            font-size: 12px;
        }

        .supplier-empty-state-compact {
            justify-items: start;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            padding: 10px;
            border: 1px dashed #dbe4ef;
            border-radius: 9px;
            background: #fff;
            text-align: left;
        }

        .supplier-empty-state-compact > span {
            width: 30px;
            height: 30px;
            font-size: 15px;
        }

        .supplier-mapping-heading {
            align-items: flex-end;
            margin-bottom: 2px;
        }

        .supplier-mapping-heading > div:first-child {
            display: grid;
            gap: 2px;
        }

        .supplier-mapping-table-wrap {
            overflow: visible;
            border: 1px solid #dbe4ef;
            border-radius: 10px;
            background: #fff;
        }

        .supplier-mapping-table {
            width: 100%;
            min-width: 0;
            margin: 0;
            box-shadow: none;
            table-layout: fixed;
        }

        .supplier-mapping-table th:nth-child(1) { width: 18%; }
        .supplier-mapping-table th:nth-child(2) { width: 11%; }
        .supplier-mapping-table th:nth-child(3) { width: 29%; }
        .supplier-mapping-table th:nth-child(4) { width: 15%; }
        .supplier-mapping-table th:nth-child(5) { width: 21%; }
        .supplier-mapping-table th:nth-child(6) { width: 42px; }

        .supplier-mapping-table th {
            padding: 8px 9px;
            background: #f5f8fb;
            color: #475569;
            font-size: 11.5px;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .supplier-mapping-table td {
            height: 48px;
            padding: 8px 9px;
            border-bottom-color: #edf2f7;
            background: #fff;
            vertical-align: middle;
            overflow-wrap: anywhere;
        }

        .supplier-mapping-table tbody tr:hover td {
            background: #f8fbfe;
        }

        .supplier-unlinked-label {
            color: #7b8797;
            font-size: 12px;
            font-style: italic;
        }

        .supplier-mapping-actions {
            justify-content: flex-end;
            width: 34px;
            margin-left: auto;
        }

        .supplier-mapping-action-cell {
            padding-right: 7px !important;
            text-align: right;
            overflow-wrap: normal !important;
        }

        .supplier-mapping-menu .appointment-action-menu-items {
            min-width: 190px;
        }

        .supplier-mapping-prices {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .supplier-mapping-prices span {
            color: #475569;
            font-size: 11.5px;
            line-height: 1.25;
            white-space: nowrap;
        }

        .supplier-mapping-prices strong {
            color: #172033;
            font-weight: 750;
        }

        .supplier-mapping-table .supplier-mapping-article small {
            max-width: 100%;
        }

        .supplier-assistant-page {
            width: 100%;
            min-width: 0;
        }

        .supplier-assistant-heading,
        .supplier-family-review-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .supplier-assistant-heading {
            margin: 12px 0 10px;
        }

        .supplier-assistant-heading h2 {
            margin: 1px 0 0;
            color: #172033;
            font-size: 18px;
        }

        .supplier-family-review-heading h2 {
            margin: 2px 0 3px;
            color: #172033;
            font-size: 20px;
        }

        .supplier-family-review-heading p,
        .supplier-assistant-empty p {
            margin: 0;
            color: #64748b;
            font-size: 13px;
        }

        .supplier-assistant-layout {
            display: grid;
            grid-template-columns: clamp(280px, 20vw, 320px) minmax(0, 1fr);
            align-items: stretch;
            gap: 12px;
            width: 100%;
            min-width: 0;
        }

        .supplier-family-browser,
        .supplier-family-review {
            box-sizing: border-box;
            width: 100%;
            max-width: none;
            min-width: 0;
            margin: 0;
            padding: 12px;
        }

        .supplier-family-browser {
            display: flex;
            flex-direction: column;
            max-height: calc(100dvh - 190px);
            min-height: 560px;
            overflow: hidden;
        }

        .supplier-family-filter {
            display: grid;
            flex: 0 0 auto;
            gap: 8px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e4eaf1;
        }

        .supplier-family-filter .form-row {
            margin: 0;
        }

        .supplier-family-filter .button-secondary {
            justify-self: start;
            min-height: 32px;
            padding: 6px 10px;
        }

        .supplier-family-list-heading {
            display: flex;
            justify-content: space-between;
            flex: 0 0 auto;
            padding: 10px 3px 7px;
            color: #475569;
            font-size: 12px;
        }

        .supplier-family-list {
            display: grid;
            align-content: start;
            flex: 1 1 auto;
            min-height: 0;
            gap: 3px;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
        }

        .supplier-family-link {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            padding: 7px 8px;
            border: 1px solid transparent;
            border-radius: 9px;
            color: #253047;
            text-decoration: none;
        }

        .supplier-family-link:hover,
        .supplier-family-link.is-active {
            border-color: #cfdced;
            background: #f3f7fc;
        }

        .supplier-family-link.is-active {
            box-shadow: inset 3px 0 0 var(--brand-blue);
        }

        .supplier-family-link span {
            display: grid;
            min-width: 0;
            gap: 2px;
        }

        .supplier-family-link strong,
        .supplier-family-link small {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .supplier-family-link small {
            color: #718096;
            font-size: 11px;
        }

        .supplier-family-link em,
        .supplier-family-progress {
            padding: 3px 7px;
            border-radius: 999px;
            background: #e9f0f8;
            color: #49617d;
            font-size: 11px;
            font-style: normal;
            font-weight: 750;
            white-space: nowrap;
        }

        .supplier-family-list-empty,
        .supplier-assistant-empty {
            padding: 22px;
            color: #64748b;
            text-align: center;
        }

        .supplier-assistant-empty strong {
            display: block;
            margin-bottom: 5px;
            color: #263449;
        }

        .supplier-assistant-empty .button {
            margin-top: 14px;
        }

        .supplier-family-review-heading {
            align-items: flex-start;
            margin-bottom: 10px;
            padding: 2px 2px 10px;
            border-bottom: 1px solid #e4eaf1;
        }

        .supplier-family-review-title {
            min-width: 0;
        }

        .supplier-family-workspace-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
        }

        .supplier-family-stepper {
            display: flex;
            gap: 5px;
        }

        .supplier-family-stepper .button-secondary,
        .supplier-safe-form button {
            min-height: 34px;
            padding: 7px 10px;
            font-size: 12px;
        }

        .supplier-family-stepper .disabled {
            opacity: 0.42;
            cursor: default;
            pointer-events: none;
        }

        .supplier-safe-form {
            margin: 0;
        }

        .supplier-safe-form button:disabled {
            opacity: 0.5;
            cursor: default;
        }

        .supplier-assistant-table-wrap {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
        }

        .supplier-assistant-table {
            width: 100%;
            min-width: 650px;
            table-layout: fixed;
        }

        .supplier-assistant-table th:nth-child(1) { width: 15%; }
        .supplier-assistant-table th:nth-child(2) { width: auto; }
        .supplier-assistant-table th:nth-child(3) { width: 120px; }
        .supplier-assistant-table th:nth-child(4) { width: 120px; }
        .supplier-assistant-table th:nth-child(5) { width: 48px; }

        .supplier-assistant-table td {
            height: 54px;
            padding: 8px 10px;
            vertical-align: middle;
        }

        .supplier-assistant-table td > small {
            display: block;
            margin-top: 3px;
            color: #718096;
        }

        .supplier-assistant-candidate {
            display: grid;
            min-width: 0;
            gap: 2px;
        }

        .supplier-assistant-candidate p {
            display: -webkit-box;
            overflow: hidden;
            margin: 0;
            color: #3d4a5f;
            font-size: 12px;
            line-height: 1.35;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .supplier-assistant-reason {
            color: #35624a;
            font-size: 11px;
        }

        .supplier-confidence {
            display: inline-flex;
            padding: 4px 8px;
            border-radius: 999px;
            background: #edf1f5;
            color: #5f6d7c;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }

        .supplier-confidence.is-safe,
        .supplier-confidence.is-confirmed { background: #e4f4e9; color: #2f6b45; }
        .supplier-confidence.is-review { background: #fff3d6; color: #815d0a; }

        .supplier-assistant-price {
            color: #334155;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }

        .supplier-assistant-action-cell {
            overflow: visible;
            text-align: right;
        }

        .supplier-assistant-menu .appointment-action-menu-items {
            min-width: 190px;
        }

        .supplier-assistant-picker-card {
            width: min(920px, calc(100vw - 36px));
        }

        .supplier-assistant-search-result {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
        }

        .supplier-assistant-search-result .supplier-picker-result-heading span {
            display: -webkit-box;
            overflow: hidden;
            white-space: normal;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .supplier-assistant-search-result .supplier-picker-result-details a {
            color: var(--brand-blue-dark);
        }

        @media (max-width: 1180px) {
            .supplier-assistant-layout { grid-template-columns: 270px minmax(0, 1fr); }
            .supplier-family-review-heading { display: grid; }
            .supplier-family-workspace-actions { justify-content: flex-start; }
        }

        @media (max-width: 760px) {
            .supplier-assistant-layout { grid-template-columns: minmax(0, 1fr); }
            .supplier-family-browser { min-height: 0; max-height: 390px; }
            .supplier-family-list { min-height: 180px; }
            .supplier-assistant-heading,
            .supplier-family-review-heading { align-items: stretch; flex-direction: column; }
            .supplier-family-workspace-actions { align-items: stretch; display: grid; }
            .supplier-family-stepper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .supplier-family-stepper .button-secondary { text-align: center; }
        }

        .supplier-picker-modal {
            align-items: center;
        }

        .supplier-picker-card {
            display: grid;
            grid-template-rows: auto auto auto minmax(100px, 1fr) auto;
            width: min(780px, 100%);
            max-height: min(720px, calc(100dvh - 36px));
            overflow: hidden;
            padding: 0;
            border-radius: 14px;
        }

        .supplier-picker-header {
            align-items: flex-start;
            margin: 0;
            padding: 18px 20px 15px;
            border-bottom: 1px solid #e4eaf1;
        }

        .supplier-picker-header h2 {
            margin: 0;
            color: #0f172a;
            font-size: 20px;
        }

        .supplier-picker-header p {
            margin: 4px 0 0;
            color: #64748b;
            font-size: 12.5px;
        }

        .supplier-picker-search {
            display: grid;
            gap: 6px;
            padding: 14px 20px 10px;
        }

        .supplier-picker-search > label {
            margin: 0;
            color: #334155;
            font-size: 12px;
            font-weight: 750;
        }

        .supplier-picker-search-input {
            position: relative;
        }

        .supplier-picker-search-input .app-table-search-icon {
            left: 14px;
        }

        .supplier-picker-search-input input {
            width: 100%;
            min-height: 44px;
            margin: 0;
            padding: 8px 12px 8px 38px;
            border: 1px solid #bccbd9;
            border-radius: 9px;
            font-size: 14px;
            box-sizing: border-box;
        }

        .supplier-picker-search-input input:focus {
            border-color: var(--brand-blue);
            box-shadow: 0 0 0 3px rgba(0, 89, 153, 0.12);
            outline: none;
        }

        .supplier-picker-results-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 2px 20px 8px;
            color: #64748b;
            font-size: 11.5px;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        .supplier-picker-results {
            display: grid;
            align-content: start;
            gap: 7px;
            min-height: 100px;
            padding: 0 20px 14px;
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        .supplier-picker-result {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
            min-height: 68px;
            padding: 10px 11px 10px 13px;
            border: 1px solid #dbe4ef;
            border-radius: 10px;
            background: #fff;
            box-sizing: border-box;
            transition: border-color 120ms ease, background 120ms ease;
        }

        .supplier-picker-result:hover {
            border-color: #a9c8df;
            background: #fafdff;
        }

        .supplier-picker-result-content,
        .supplier-picker-result-heading {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .supplier-picker-result-heading {
            grid-template-columns: auto minmax(0, 1fr);
            align-items: baseline;
            gap: 9px;
        }

        .supplier-picker-result-heading strong {
            color: #0f5c91;
            font-size: 13px;
            white-space: nowrap;
        }

        .supplier-picker-result-heading span {
            color: #172033;
            font-size: 13px;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .supplier-picker-result-details {
            display: flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            flex-wrap: wrap;
        }

        .supplier-picker-result-details span {
            padding: 2px 6px;
            border-radius: 5px;
            background: #edf3f8;
            color: #526174;
            font-size: 11px;
            font-weight: 650;
        }

        .supplier-picker-result-details small {
            color: #8491a2;
            font-size: 10.5px;
        }

        .supplier-picker-assign {
            min-width: 94px;
            min-height: 34px;
            margin: 0;
            border-radius: 8px;
            font-size: 12.5px;
        }

        .supplier-picker-empty {
            display: grid;
            justify-items: center;
            gap: 5px;
            padding: 34px 18px;
            border: 1px dashed #cbd8e4;
            border-radius: 10px;
            background: #f8fafc;
            color: #64748b;
            text-align: center;
        }

        .supplier-picker-empty strong {
            color: #334155;
            font-size: 14px;
        }

        .supplier-picker-empty span {
            font-size: 12px;
        }

        .supplier-picker-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 9px;
            padding: 12px 20px;
            border-top: 1px solid #e4eaf1;
            background: #f8fafc;
        }

        .supplier-picker-footer .button-secondary {
            min-height: 36px;
            margin: 0;
            border-radius: 8px;
        }

        .supplier-picker-manual-action {
            color: #24567d;
        }

        .supplier-picker-manual-form {
            display: grid;
            gap: 12px;
            padding: 14px;
            border: 1px solid #dbe4ef;
            border-radius: 10px;
            background: #f8fafc;
        }

        .supplier-picker-manual-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e2e8f0;
        }

        .supplier-picker-manual-heading > div {
            display: grid;
            gap: 3px;
        }

        .supplier-picker-manual-heading strong {
            color: #172033;
            font-size: 14px;
        }

        .supplier-picker-manual-heading span {
            color: #64748b;
            font-size: 12px;
        }

        .supplier-picker-manual-heading .button-secondary,
        .supplier-picker-manual-actions .button {
            min-height: 34px;
            margin: 0;
            border-radius: 8px;
            font-size: 12px;
        }

        .supplier-picker-manual-actions {
            display: flex;
            justify-content: flex-end;
        }

        @media (max-width: 840px) {
            .supplier-import-stats {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .supplier-import-stats > div:nth-child(3) {
                border-right: 0;
            }

            .supplier-import-stats > div:nth-child(-n+3) {
                border-bottom: 1px solid #e7edf4;
            }

            .supplier-price-panels {
                grid-template-columns: minmax(0, 1fr);
            }

            .supplier-article-filter-actions {
                width: 100%;
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
            }

            .supplier-toolbar-filter,
            .supplier-table-search-wrap {
                width: 100%;
            }

            .supplier-table-search-wrap {
                grid-column: 1 / -1;
                grid-row: 1;
            }

            .supplier-picker-card {
                max-height: calc(100dvh - 24px);
            }

            .supplier-mapping-heading {
                align-items: stretch;
                display: grid;
                gap: 7px;
            }

            .supplier-mapping-heading p {
                margin: 0;
                text-align: left;
            }

            .supplier-mapping-table-wrap {
                border: 0;
                background: transparent;
            }

            .supplier-mapping-table,
            .supplier-mapping-table tbody {
                display: block;
                width: 100%;
            }

            .supplier-mapping-table thead {
                display: none;
            }

            .supplier-mapping-table tbody {
                display: grid;
                gap: 10px;
            }

            .supplier-mapping-table tbody tr {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(125px, 0.55fr) 34px;
                gap: 10px 14px;
                padding: 12px;
                border: 1px solid #dbe4ef;
                border-radius: 10px;
                background: #fff;
            }

            .supplier-mapping-table td {
                display: grid;
                align-content: start;
                gap: 4px;
                width: auto;
                height: auto;
                min-width: 0;
                padding: 0;
                border: 0;
                background: transparent;
            }

            .supplier-mapping-table td::before {
                content: attr(data-label);
                color: #64748b;
                font-size: 10.5px;
                font-weight: 800;
                letter-spacing: 0.035em;
                line-height: 1.2;
                text-transform: uppercase;
            }

            .supplier-mapping-table tbody tr:hover td {
                background: transparent;
            }

            .supplier-mapping-variant-cell { grid-column: 1; grid-row: 1; }
            .supplier-mapping-npk-cell { grid-column: 2; grid-row: 1; }
            .supplier-mapping-article-cell { grid-column: 1 / 3; grid-row: 2; }
            .supplier-mapping-status-cell { grid-column: 1; grid-row: 3; }
            .supplier-mapping-price-cell { grid-column: 2; grid-row: 3; }
            .supplier-mapping-action-cell {
                grid-column: 3;
                grid-row: 1 / 4;
                justify-self: end;
                padding: 0 !important;
            }

            .supplier-mapping-action-cell::before {
                content: none !important;
            }
        }

        @media (max-width: 620px) {
            .supplier-import-card {
                gap: 13px;
                padding: 13px;
            }

            .supplier-import-section-heading {
                align-items: stretch;
                display: grid;
                gap: 5px;
            }

            .supplier-import-section-heading p,
            .supplier-import-file-meta {
                justify-content: flex-start;
                text-align: left;
            }

            .supplier-import-file-meta strong {
                max-width: min(70vw, 300px);
            }

            .supplier-import-actions .button,
            .supplier-import-actions .button-secondary {
                flex: 1 1 100%;
            }

            .supplier-import-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .supplier-import-stats > div,
            .supplier-import-stats > div:nth-child(3) {
                border-right: 1px solid #e7edf4;
                border-bottom: 1px solid #e7edf4;
            }

            .supplier-import-stats > div:nth-child(even) {
                border-right: 0;
            }

            .supplier-import-stats > div:nth-last-child(-n+2) {
                border-bottom: 0;
            }

            .supplier-import-error-list > div {
                grid-template-columns: minmax(0, 1fr);
                gap: 2px;
            }

            .supplier-article-form {
                padding: 13px;
            }

            .supplier-form-header,
            .supplier-form-section-heading,
            .supplier-price-panel-heading,
            .supplier-picker-manual-heading {
                align-items: stretch;
                display: grid;
            }

            .supplier-form-section-heading p {
                text-align: left;
            }

            .supplier-form-field-compact,
            .supplier-price-basis-fields {
                width: 100%;
            }

            .supplier-price-values {
                grid-template-columns: minmax(0, 1fr);
            }

            .supplier-picker-modal {
                padding: 8px;
            }

            .supplier-picker-card {
                max-height: calc(100dvh - 16px);
                border-radius: 11px;
            }

            .supplier-picker-header,
            .supplier-picker-search,
            .supplier-picker-footer {
                padding-right: 13px;
                padding-left: 13px;
            }

            .supplier-picker-results-header,
            .supplier-picker-results {
                padding-right: 13px;
                padding-left: 13px;
            }

            .supplier-picker-result {
                grid-template-columns: minmax(0, 1fr);
                gap: 9px;
            }

            .supplier-picker-result-heading {
                grid-template-columns: minmax(0, 1fr);
            }

            .supplier-picker-result-heading span {
                white-space: normal;
            }

            .supplier-picker-assign {
                width: 100%;
            }

            .supplier-picker-footer {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
            }

            .supplier-picker-footer .button-secondary {
                width: 100%;
            }

            .supplier-mapping-table tbody tr {
                grid-template-columns: minmax(0, 1fr) 34px;
            }

            .supplier-mapping-variant-cell,
            .supplier-mapping-npk-cell,
            .supplier-mapping-article-cell,
            .supplier-mapping-status-cell,
            .supplier-mapping-price-cell {
                grid-column: 1;
                grid-row: auto;
            }

            .supplier-mapping-action-cell {
                grid-column: 2;
                grid-row: 1 / 6;
            }
        }

        /* Final appointment form layout: independent compact column stacks. */
        .appointment-crud-page {
            width: min(100%, 1460px);
            max-width: 1460px;
            min-width: 0;
            margin-right: auto;
            margin-left: auto;
            box-sizing: border-box;
        }

        .appointment-crud-page .appointment-form-layout,
        .appointment-crud-card {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }

        .appointment-crud-form {
            display: block;
            padding: 0;
        }

        .appointment-workspace {
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);
            align-items: start;
            width: 100%;
            min-width: 0;
        }

        .appointment-main-column,
        .appointment-side-column {
            display: flex;
            flex-direction: column;
            min-width: 0;
            gap: 0;
            padding: 26px 30px 22px;
            box-sizing: border-box;
        }

        .appointment-side-column {
            gap: 18px;
            border-left: 1px solid #dbe4ef;
        }

        .appointment-crud-form .appointment-main-column > .form-row,
        .appointment-crud-form .appointment-main-column > .two-columns,
        .appointment-crud-form .appointment-main-column > .appointment-project-rule-note,
        .appointment-crud-form .appointment-side-column > .form-row,
        .appointment-crud-form .appointment-side-column > .appointment-series-section {
            grid-column: auto;
            grid-row: auto;
            width: auto;
            margin: 0 0 16px;
            padding: 0;
            border-left: 0;
            box-sizing: border-box;
        }

        .appointment-crud-form .appointment-main-column > :last-child,
        .appointment-crud-form .appointment-side-column > :last-child {
            margin-bottom: 0;
        }

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

        .appointment-all-day-row {
            min-height: 26px;
            margin-top: -4px !important;
        }

        .appointment-project-search-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: stretch;
            gap: 9px;
            width: 100%;
            min-width: 0;
        }

        .appointment-project-picker,
        .appointment-worker-search {
            position: relative;
            min-width: 0;
        }

        .appointment-project-picker > .appointment-project-search-icon,
        .appointment-worker-search > .appointment-worker-search-icon {
            position: absolute;
            top: 50%;
            left: 13px;
            z-index: 2;
            display: inline-flex;
            width: 19px;
            height: 19px;
            color: #64748b;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .appointment-project-picker > .appointment-project-search-icon svg,
        .appointment-worker-search > .appointment-worker-search-icon svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .appointment-crud-form .appointment-project-picker input#project_search,
        .appointment-crud-form .appointment-worker-search input#worker_search {
            width: 100%;
            min-width: 0;
            padding-left: 42px;
            box-sizing: border-box;
        }

        .appointment-project-add {
            flex: 0 0 auto;
            width: auto;
            min-width: 148px;
            max-width: 180px;
            height: 43px;
            margin: 0;
            padding: 0 13px;
            gap: 6px;
            overflow: visible;
            white-space: nowrap;
            font-size: 13px;
            line-height: 1;
        }

        .appointment-workers-section {
            min-height: 0;
            margin: 0 !important;
            padding: 0 !important;
            border: 0;
        }

        .appointment-section-heading {
            min-height: 40px;
        }

        .appointment-worker-search {
            margin: 8px 0 12px;
        }

        .appointment-worker-grid {
            grid-template-columns: repeat(2, minmax(165px, 1fr));
            max-height: min(380px, calc(100vh - 370px));
            overflow-y: auto;
            overflow-x: hidden;
        }

        .appointment-series-section {
            width: 100%;
            margin: 0 !important;
            padding: 0 !important;
            border: 1px solid #dbe4ef !important;
            border-radius: 8px;
            background: #fff;
            overflow: hidden;
        }

        .appointment-series-section.is-active {
            border-color: #b8d9ee !important;
        }

        .appointment-series-heading {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-rows: auto auto;
            align-items: center;
            min-height: 54px;
            padding: 10px 15px 6px;
            box-sizing: border-box;
        }

        .appointment-series-heading > span:first-child {
            grid-column: 1;
            grid-row: 1;
            color: #0f2748;
            font-weight: 800;
        }

        .appointment-series-heading > .appointment-section-summary {
            grid-column: 1;
            grid-row: 2;
            margin-top: 2px;
            color: #64748b;
            font-size: 12px;
            font-weight: 600;
        }

        .appointment-series-heading::after {
            content: none;
        }

        .appointment-series-body {
            padding: 4px 15px 12px;
        }

        .appointment-series-toggle-row {
            min-height: 28px;
            margin: 0 !important;
        }

        .appointment-series-toggle-row input {
            flex: 0 0 auto;
        }

        .appointment-series-toggle-row label {
            margin: 0;
        }

        .appointment-series-controls[hidden],
        .appointment-workers-body[hidden] {
            display: none !important;
        }

        .appointment-series-controls {
            gap: 12px;
            margin-top: 10px;
            padding-top: 12px;
        }

        .appointment-series-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: end;
            gap: 10px 14px;
        }

        .appointment-crud-form .appointment-series-controls .form-row {
            margin-bottom: 0;
        }

        .appointment-crud-form #series_monthly_day {
            width: 110px;
            max-width: 100%;
        }

        .appointment-crud-form .appointment-weekday-chips {
            display: grid;
            grid-template-columns: repeat(7, minmax(38px, 1fr));
            gap: 6px;
            width: 100%;
        }

        .appointment-crud-form .appointment-weekday-chips label {
            display: block;
            min-width: 0;
            margin: 0;
            cursor: pointer;
        }

        .appointment-crud-form .appointment-weekday-chips input[type="checkbox"] {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
            opacity: 0;
        }

        .appointment-crud-form .appointment-weekday-chips span {
            display: grid;
            place-items: center;
            min-height: 36px;
            padding: 0 4px;
            border: 1px solid #cfd7e3;
            border-radius: 6px;
            background: #fff;
            color: #334155;
            box-sizing: border-box;
            font-size: 13px;
            font-weight: 750;
        }

        .appointment-crud-form .appointment-weekday-chips input:checked + span {
            border-color: var(--brand-blue);
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
        }

        .appointment-crud-form .appointment-weekday-chips label:hover span {
            border-color: #8fbfe0;
            background: #f3f8fc;
        }

        .appointment-crud-form .appointment-weekday-chips input:focus-visible + span {
            box-shadow: 0 0 0 3px rgba(8, 120, 189, .16);
        }

        .appointment-series-anchor {
            display: none;
        }

        .appointment-series-summary-line {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 4px 7px;
            padding: 2px 0 0;
            border: 0;
            background: transparent;
            color: #334155;
        }

        .appointment-series-summary-line strong {
            color: #0f2748;
            font-size: 13px;
        }

        .appointment-series-summary-line span {
            color: #64748b;
            font-size: 12px;
        }

        .appointment-crud-actions {
            display: flex;
            min-height: 78px;
            margin: 0;
            padding: 16px 30px;
            box-sizing: border-box;
        }

        .appointment-project-modal-panel {
            width: min(620px, calc(100vw - 32px));
            max-height: calc(100vh - 40px);
            overflow: auto;
        }

        .appointment-project-modal .app-modal-body {
            display: grid;
            gap: 12px;
        }

        .appointment-project-modal .form-row {
            margin: 0;
        }

        .appointment-project-modal .app-modal-footer {
            justify-content: flex-end;
        }

        @media (max-width: 1080px) {
            .appointment-workspace {
                grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
            }

            .appointment-main-column,
            .appointment-side-column {
                padding-right: 20px;
                padding-left: 20px;
            }

            .appointment-project-add {
                min-width: 136px;
                padding-right: 10px;
                padding-left: 10px;
                font-size: 12px;
            }
        }

        @media (min-width: 821px) and (max-width: 940px) {
            .appointment-workspace {
                grid-template-columns: minmax(0, 1fr) minmax(340px, .92fr);
            }

            .appointment-project-search-row {
                grid-template-columns: minmax(0, 1fr);
            }

            .appointment-project-add {
                width: 100%;
                max-width: none;
            }

            .appointment-worker-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (max-width: 820px) {
            .appointment-workspace {
                grid-template-columns: minmax(0, 1fr);
            }

            .appointment-main-column,
            .appointment-side-column {
                padding: 20px 16px;
            }

            .appointment-side-column {
                padding-top: 4px;
                border-left: 0;
            }

            .appointment-worker-grid {
                grid-template-columns: repeat(2, minmax(150px, 1fr));
                max-height: 360px;
            }
        }

        @media (max-width: 560px) {
            .appointment-date-grid,
            .appointment-time-grid,
            .appointment-series-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 0;
            }

            .appointment-project-search-row {
                grid-template-columns: minmax(0, 1fr);
            }

            .appointment-project-add {
                width: 100%;
                max-width: none;
            }

            .appointment-worker-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .appointment-crud-form .appointment-weekday-chips {
                grid-template-columns: repeat(4, minmax(44px, 1fr));
            }

            .appointment-crud-actions {
                flex-wrap: wrap;
                padding-right: 16px;
                padding-left: 16px;
            }

            .appointment-crud-actions .button,
            .appointment-crud-actions .button-secondary {
                flex: 1 1 160px;
            }
        }

        /* Shared Options/Core visual foundation. Scoped so planning and Rapport
           surfaces keep their established density and cascade. */
        .app-settings-shell {
            display: grid;
            align-items: start;
        }

        .app-settings-rail {
            border: 1px solid var(--app-border);
            border-radius: var(--app-radius-large);
            background: var(--app-surface);
            box-shadow: var(--app-shadow-surface);
        }

        .app-settings-rail-title {
            margin: 2px var(--app-space-2) var(--app-space-3);
            color: var(--app-text-primary);
            font-size: 16px;
            font-weight: 800;
            line-height: 1.3;
        }

        .app-settings-nav-list {
            display: grid;
            gap: 3px;
        }

        .app-settings-nav-group {
            display: grid;
            gap: 2px;
            margin-top: var(--app-space-2);
            padding-top: var(--app-space-2);
            border-top: 1px solid var(--app-border);
        }

        .app-settings-nav-group-first {
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }

        .app-settings-nav-category {
            padding: 7px var(--app-space-2) 4px;
            color: var(--app-text-muted);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.06em;
            line-height: 1.3;
            text-transform: uppercase;
        }

        .app-settings-nav-children {
            display: grid;
            gap: 2px;
        }

        .app-settings-nav-subcategory {
            padding: 6px 14px 3px;
            color: var(--app-text-muted);
            font-size: 12px;
            font-weight: 750;
        }

        .app-settings-nav-grandchildren {
            display: grid;
            gap: 2px;
            margin-left: 10px;
            padding-left: 6px;
            border-left: 1px solid var(--app-border);
        }

        .app-settings-nav-link {
            position: relative;
            display: flex;
            align-items: center;
            min-height: 38px;
            padding: 8px 10px 8px 14px;
            border-radius: var(--app-radius-small);
            color: var(--app-text-secondary);
            font-size: 13px;
            font-weight: 650;
            line-height: 1.35;
            text-decoration: none;
            transition: background-color 120ms ease, color 120ms ease;
        }

        .app-settings-nav-category-link {
            font-weight: 750;
        }

        .app-settings-nav-link:hover {
            background: var(--app-surface-subtle);
            color: var(--brand-blue-dark);
        }

        .app-settings-nav-link:focus-visible,
        .app-settings-mobile-nav summary:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: 2px;
        }

        .app-settings-nav-link.is-active,
        .app-settings-nav-link[aria-current="page"] {
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            font-weight: 800;
        }

        .app-settings-nav-link.is-active::before,
        .app-settings-nav-link[aria-current="page"]::before {
            content: "";
            position: absolute;
            top: 8px;
            bottom: 8px;
            left: 4px;
            width: 3px;
            border-radius: 999px;
            background: var(--brand-blue);
        }

        .app-settings-mobile-nav {
            display: none;
        }

        /* Global Options workspace geometry. Keep these three dimensions as the
           single source of truth for every central Options destination. */
        .app-settings-page {
            --app-settings-workspace-max: 1680px;
            --app-settings-rail-width: 210px;
            --app-settings-column-gap: 30px;
            width: 100%;
            max-width: var(--app-settings-workspace-max);
            min-width: 0;
            margin-inline: auto;
            box-sizing: border-box;
            overflow-x: clip;
            color: var(--app-text-primary);
        }

        .app-settings-shell {
            grid-template-columns: var(--app-settings-rail-width) minmax(0, 1fr);
            grid-template-areas: "rail content";
            gap: var(--app-settings-column-gap);
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
            isolation: isolate;
        }

        .app-settings-rail {
            grid-area: rail;
            position: sticky;
            top: 18px;
            z-index: 40;
            z-index: var(--app-layer-options-rail);
            width: var(--app-settings-rail-width);
            min-width: 0;
            box-sizing: border-box;
            padding: 14px 12px;
            overflow: visible;
            isolation: isolate;
            background: var(--app-surface);
        }

        .app-settings-content,
        .settings-list-layout,
        .settings-list-card {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .app-settings-content,
        .settings-table-scroll {
            min-width: 0;
            max-width: 100%;
        }

        .app-settings-content {
            grid-area: content;
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
            overflow-x: clip;
        }

        .app-settings-content > * {
            max-width: 100%;
            box-sizing: border-box;
        }

        .app-settings-mobile-nav {
            grid-area: mobile;
        }

        .app-settings-rail-title {
            margin: 3px 10px 13px;
            font-size: 15px;
        }

        .app-settings-category-list {
            display: grid;
            gap: 4px;
        }

        .app-settings-category {
            position: relative;
        }

        .app-settings-category-link {
            position: relative;
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            min-height: 48px;
            padding: 8px 12px;
            border: 1px solid transparent;
            border-radius: var(--app-radius-medium);
            color: var(--app-text-secondary);
            font-size: 13.5px;
            font-weight: 720;
            line-height: 1.3;
            text-decoration: none;
            transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
        }

        .app-settings-category-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            color: currentColor;
        }

        .app-settings-category-icon svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.7;
        }

        .app-settings-category-label {
            min-width: 0;
        }

        .app-settings-category-chevron {
            width: 7px;
            height: 7px;
            margin-right: 3px;
            border-top: 1.5px solid currentColor;
            border-right: 1.5px solid currentColor;
            opacity: 0.6;
            transform: rotate(45deg);
        }

        .app-settings-category-link:hover,
        .app-settings-category:focus-within > .app-settings-category-link {
            border-color: var(--app-border);
            background: var(--app-surface-subtle);
            color: var(--brand-blue-dark);
        }

        .app-settings-category.is-active > .app-settings-category-link,
        .app-settings-category-link.is-active,
        .app-settings-category-link[aria-current="page"] {
            border-color: var(--brand-blue-border);
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            font-weight: 800;
        }

        .app-settings-category-link:focus-visible,
        .app-settings-flyout-link:focus-visible,
        .app-settings-mobile-group summary:focus-visible,
        .app-settings-mobile-link:focus-visible,
        .app-settings-mobile-direct:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: 2px;
        }

        .app-settings-flyout {
            position: absolute;
            top: -7px;
            left: calc(100% + 8px);
            z-index: var(--app-layer-options-flyout);
            display: grid;
            min-width: 218px;
            padding: 7px;
            border: 1px solid var(--app-border);
            border-radius: var(--app-radius-medium);
            background: var(--app-surface);
            box-shadow: var(--app-shadow-overlay);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateX(-4px);
            transition: opacity 110ms ease, transform 110ms ease, visibility 110ms ease;
        }

        .app-settings-flyout::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: -10px;
            width: 12px;
            background: transparent;
        }

        .app-settings-category:hover > .app-settings-flyout,
        .app-settings-category:focus-within > .app-settings-flyout,
        .app-settings-category.is-open > .app-settings-flyout {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(0);
        }

        .app-settings-category.is-escape-closed > .app-settings-flyout {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Fixed Options modals must escape the shell's normal rail/content
           stacking context and cover every application surface uniformly. */
        body.catalogue-modal-open .app-settings-shell,
        body.app-modal-open .app-settings-shell {
            isolation: auto;
        }

        body.catalogue-modal-open .app-settings-content,
        body.app-modal-open .app-settings-content {
            z-index: auto;
            overflow: visible;
        }

        body.catalogue-modal-open .app-settings-page,
        body.app-modal-open .app-settings-page,
        body.catalogue-modal-open .rapport-options-section,
        body.app-modal-open .rapport-options-section {
            overflow: visible;
        }

        body.catalogue-modal-open .app-settings-flyout,
        body.app-modal-open .app-settings-flyout,
        body.global-modal-open .app-settings-flyout {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateX(-4px);
        }

        body.global-modal-open .topbar-dropdown,
        body.global-modal-open .topbar-submenu-menu,
        body.global-modal-open .options-nav-menu {
            display: none !important;
            pointer-events: none;
        }

        /* Release any page-local ancestor stacking context while a central
           Options modal is open. The rail keeps its opaque layer for normal
           table containment, but the viewport backdrop and panel can then
           occupy the shared global modal layers above it. */
        body.catalogue-modal-open .app-settings-page *:has(.catalogue-edit-row:not([hidden])),
        body.app-modal-open .app-settings-page *:has(.app-modal:not([hidden])) {
            z-index: auto;
            isolation: auto;
        }

        body.catalogue-modal-open .app-settings-rail,
        body.app-modal-open .app-settings-rail {
            pointer-events: none;
        }

        .app-settings-flyout-link {
            position: relative;
            display: flex;
            align-items: center;
            min-height: 38px;
            padding: 8px 10px;
            border-radius: var(--app-radius-small);
            color: var(--app-text-secondary);
            font-size: 13px;
            font-weight: 650;
            text-decoration: none;
        }

        .app-settings-flyout-link:hover {
            background: var(--app-surface-subtle);
            color: var(--brand-blue-dark);
        }

        .app-settings-flyout-link.is-active,
        .app-settings-flyout-link[aria-current="page"] {
            padding-left: 15px;
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            font-weight: 800;
        }

        .app-settings-flyout-link.is-active::before,
        .app-settings-flyout-link[aria-current="page"]::before {
            content: "";
            position: absolute;
            top: 10px;
            bottom: 10px;
            left: 6px;
            width: 3px;
            border-radius: 999px;
            background: var(--brand-blue);
        }

        .app-settings-page .options-page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            min-height: 0;
            margin: 0 0 20px;
        }

        .company-settings-page .options-page-header {
            display: block;
        }

        .app-settings-page .options-page-header h1 {
            margin: 0;
            font-size: 24px;
            line-height: 1.2;
            letter-spacing: -0.015em;
        }

        .app-settings-page .options-page-header > p {
            max-width: 72ch;
            margin: 6px 0 0;
            color: var(--app-text-muted);
            font-size: 13.5px;
            line-height: 1.5;
        }

        .app-settings-page .app-table-card,
        .app-settings-page .app-table-card-standalone {
            border-color: var(--app-border);
            box-shadow: var(--app-shadow-surface);
        }

        .app-settings-page .app-data-table th,
        .app-settings-page .app-table-card table th {
            color: var(--app-text-muted);
            font-size: 11.5px;
            letter-spacing: 0.025em;
            text-transform: uppercase;
        }

        .app-settings-page .page-tabs-secondary {
            gap: 4px;
            padding: 4px;
            border: 1px solid var(--app-border);
            border-radius: var(--app-radius-medium);
            background: var(--app-surface-subtle);
        }

        .app-settings-page .page-tabs-secondary a {
            min-height: 38px;
            border-radius: var(--app-radius-small);
        }

        .app-settings-feedback:empty {
            display: none;
        }

        .app-settings-feedback .form-error,
        .app-settings-feedback .form-success,
        .app-settings-feedback .form-warning {
            margin: 0 0 14px;
        }

        .company-settings-workspace {
            display: grid;
            gap: 18px;
        }

        .company-settings-section {
            display: block;
            min-width: 0;
            padding: 22px 24px 20px;
            border: 1px solid var(--app-border);
            border-radius: 11px;
            background: var(--app-surface);
            box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
        }

        .company-settings-section-heading {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .company-settings-section-heading h2 {
            margin: 0;
            font-size: 18px;
            line-height: 1.25;
        }

        .company-settings-section-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            border-radius: 50%;
            background: var(--brand-blue);
            color: white;
            box-shadow: 0 3px 8px color-mix(in srgb, var(--brand-blue) 24%, transparent);
        }

        .company-settings-section-icon svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.7;
        }

        .company-settings-section-heading p {
            margin: 3px 0 0;
            color: var(--app-text-muted);
            font-size: 12.5px;
            line-height: 1.4;
        }

        .company-settings-section-form {
            min-width: 0;
            margin-top: 18px;
        }

        .company-settings-medium-field {
            max-width: none;
            margin-top: 14px;
        }

        .company-settings-short-field {
            max-width: none;
        }

        .company-branding-section {
            display: block;
        }

        .company-branding-section > .company-settings-section-heading {
            display: flex;
            margin-bottom: 20px;
        }

        .company-branding-editor {
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.85fr);
            gap: 30px;
            align-items: start;
        }

        .company-branding-controls {
            display: grid;
            gap: 22px;
            min-width: 0;
        }

        .branding-media-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.3fr) minmax(190px, 0.9fr);
            gap: 18px;
            align-items: start;
        }

        .branding-asset-field,
        .branding-colour-fieldset {
            min-width: 0;
            margin: 0;
            padding: 0;
            border: 0;
        }

        .branding-asset-field > legend,
        .branding-colour-fieldset > legend {
            margin-bottom: 12px;
            color: var(--app-text-primary);
            font-size: 14px;
            font-weight: 800;
        }

        .branding-current-preview {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 88px;
            padding: 10px 48px 10px 14px;
            border: 1px solid var(--app-border);
            border-radius: var(--app-radius-medium);
            background: #f8fafc;
        }

        .branding-current-preview img {
            width: 148px;
            height: 58px;
            object-fit: contain;
        }

        .branding-current-preview.is-favicon img {
            width: 42px;
            height: 42px;
        }

        .branding-upload-control {
            position: absolute;
            top: 8px;
            right: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            margin: 0;
            padding: 0;
            border: 1px solid var(--app-border);
            border-radius: 50%;
            background: var(--app-surface);
            color: var(--app-text-primary);
            cursor: pointer;
            box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12);
            transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
        }

        .branding-upload-control svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.9;
        }

        .branding-upload-control:hover {
            border-color: var(--brand-blue-border);
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            transform: translateY(-1px);
        }

        .branding-upload-control:focus-within {
            outline: 2px solid var(--brand-blue);
            outline-offset: 2px;
        }

        .branding-upload-control.is-disabled {
            color: var(--app-text-muted);
            cursor: not-allowed;
            opacity: 0.7;
        }

        .branding-pending-file {
            display: block;
            overflow: hidden;
            margin-top: 7px;
            color: var(--app-text-muted);
            font-size: 11.5px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .branding-asset-field > .help {
            margin-top: 9px;
            font-size: 11.5px;
        }

        .branding-history {
            margin-top: 10px;
        }

        .branding-history > summary {
            width: fit-content;
            color: var(--brand-blue-dark);
            cursor: pointer;
            font-size: 12.5px;
            font-weight: 750;
        }

        .branding-history > summary:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: 2px;
        }

        .branding-history[open] > summary {
            margin-bottom: 8px;
        }

        .branding-asset-library {
            display: grid;
            gap: 6px;
        }

        .branding-library-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
        }

        .branding-library-option {
            display: grid;
            grid-template-columns: auto 42px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
            min-width: 0;
            min-height: 50px;
            padding: 6px 8px;
            border: 1px solid var(--app-border);
            border-radius: var(--app-radius-medium);
            cursor: pointer;
        }

        .branding-library-option:hover,
        .branding-library-option.is-selected {
            border-color: var(--brand-blue-border);
            background: var(--brand-blue-soft);
        }

        .branding-library-option img {
            width: 40px;
            height: 34px;
            object-fit: contain;
            border-radius: 4px;
            background: white;
        }

        .branding-library-option span,
        .branding-library-option strong,
        .branding-library-option small {
            display: block;
            min-width: 0;
        }

        .branding-library-option strong {
            overflow: hidden;
            font-size: 12.5px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .branding-library-option small {
            margin-top: 2px;
            color: var(--app-text-muted);
            font-size: 11.5px;
        }

        .branding-active-label {
            color: var(--app-success);
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
        }

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

        .app-color-field-editable {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
            gap: 7px;
        }

        .app-settings-page .app-color-picker {
            width: 44px !important;
            min-width: 44px !important;
            padding: 3px !important;
            cursor: pointer;
        }

        .branding-live-preview {
            position: sticky;
            top: 18px;
            min-width: 0;
            padding-left: 30px;
            border-left: 1px solid var(--app-border);
        }

        .branding-live-preview-heading {
            margin-bottom: 10px;
        }

        .branding-live-preview-heading span,
        .branding-live-preview-heading strong {
            display: block;
        }

        .branding-live-preview-heading span {
            color: var(--app-text-muted);
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .branding-live-preview-heading strong {
            margin-top: 3px;
            font-size: 13px;
        }

        .branding-preview-surface {
            overflow: hidden;
            border: 1px solid var(--app-border-strong);
            border-radius: var(--app-radius-large);
            background: #f5f7fa;
            box-shadow: var(--app-shadow-surface);
        }

        .branding-preview-navigation {
            display: flex;
            gap: 10px;
            align-items: center;
            min-height: 48px;
            padding: 8px 11px;
            background: var(--preview-navigation);
            color: white;
            font-size: 12px;
            font-weight: 800;
        }

        .branding-preview-logo-frame {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 74px;
            height: 29px;
            padding: 3px 5px;
            border-radius: 4px;
            background: white;
        }

        .branding-preview-logo-frame img {
            max-width: 100%;
            max-height: 100%;
        }

        .branding-preview-body {
            padding: 24px 20px 26px;
        }

        .branding-preview-eyebrow {
            color: var(--preview-accent);
            font-size: 10px;
            font-weight: 850;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .branding-preview-body > strong {
            display: block;
            margin-top: 5px;
            font-size: 18px;
        }

        .branding-preview-body p {
            margin: 7px 0 17px;
            color: var(--app-text-muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .branding-preview-actions {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .branding-preview-primary {
            padding: 8px 10px;
            border-radius: 5px;
            background: var(--preview-primary);
            color: white;
            font-size: 11px;
            font-weight: 800;
        }

        .branding-preview-link {
            color: var(--preview-accent);
            font-size: 11px;
            font-weight: 800;
        }

        .branding-preview-selection {
            display: block;
            margin-top: 18px;
            padding: 8px 10px;
            border-left: 3px solid var(--preview-primary);
            background: color-mix(in srgb, var(--preview-primary) 9%, white);
            color: var(--app-text-secondary);
            font-size: 11px;
            font-weight: 700;
        }

        .company-data-section {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 24px;
            align-items: center;
        }

        .company-data-actions {
            align-self: center;
        }

        .app-settings-page.company-settings-page .app-settings-actions.app-settings-section-actions {
            margin-top: 16px;
            padding-top: 0;
            border-top: 0;
        }

        .company-settings-page .app-settings-actions .button,
        .company-settings-page .app-settings-actions .button-secondary {
            min-height: 40px;
        }

        .company-settings-page .app-settings-save-button {
            background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-dark));
            box-shadow: 0 4px 10px color-mix(in srgb, var(--brand-blue) 20%, transparent);
        }

        .settings-list-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(270px, 310px);
            gap: 18px;
            align-items: start;
        }

        .settings-list-card,
        .settings-detail-panel {
            min-width: 0;
            overflow: hidden;
            border: 1px solid var(--app-border);
            border-radius: 11px;
            background: var(--app-surface);
            box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
        }

        .settings-list-card-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 20px 22px 16px;
        }

        .settings-list-card-heading h2 {
            margin: 0;
            color: var(--app-text-primary);
            font-size: 18px;
            line-height: 1.25;
        }

        .settings-list-card-heading p {
            margin: 3px 0 0;
            color: var(--app-text-muted);
            font-size: 12.5px;
            line-height: 1.4;
        }

        .settings-section-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            border-radius: 50%;
            background: var(--brand-blue);
            color: white;
            box-shadow: 0 3px 8px color-mix(in srgb, var(--brand-blue) 24%, transparent);
        }

        .settings-section-icon svg,
        .settings-empty-state-icon svg,
        .holiday-detail-date-icon svg,
        .settings-table-actions svg,
        .holiday-date-cell svg {
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.7;
        }

        .settings-section-icon svg {
            width: 19px;
            height: 19px;
        }

        .settings-table-toolbar {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            min-height: 64px;
            padding: 12px 18px;
            border-top: 1px solid var(--app-border);
            border-bottom: 1px solid var(--app-border);
            background: var(--app-surface-subtle);
        }

        .settings-table-toolbar .holiday-year-filter {
            display: flex;
            align-items: flex-end;
            flex-wrap: nowrap;
            gap: 8px;
            margin: 0;
        }

        .settings-table-toolbar .form-row {
            min-width: 112px;
            margin: 0;
        }

        .settings-table-toolbar label {
            margin-bottom: 4px;
            color: var(--app-text-secondary);
            font-size: 11.5px;
            font-weight: 750;
        }

        .settings-table-toolbar select {
            min-width: 112px;
            height: 38px;
            min-height: 38px;
            border-color: var(--app-border-strong);
            background-color: white;
        }

        .settings-table-toolbar .button,
        .settings-table-toolbar .button-secondary,
        .settings-detail-actions .button,
        .settings-detail-actions .button-secondary,
        .settings-import-actions .button,
        .settings-import-actions .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 38px;
            box-sizing: border-box;
            margin: 0;
            padding: 8px 13px;
            border-radius: var(--app-radius-small);
            font-size: 12.5px;
            font-weight: 750;
            line-height: 1.2;
        }

        .settings-table-actions {
            display: flex;
            margin-left: auto;
        }

        .settings-table-actions svg {
            width: 16px;
            height: 16px;
        }

        .settings-create-action {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center;
            gap: 7px !important;
            min-height: 38px;
            height: 38px;
            box-sizing: border-box;
            margin: 0;
            padding: 0 13px;
            font-size: 12.5px;
            font-weight: 750;
            line-height: 1 !important;
            white-space: nowrap;
        }

        .settings-create-action::before {
            content: "";
            display: block;
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            background: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
        }

        .settings-create-action > svg,
        .settings-create-action > .modern-crud-action-icon {
            display: none;
        }

        .settings-toolbar-context {
            display: grid;
            gap: 3px;
            min-width: 0;
            padding: 0 4px 3px;
            color: var(--app-text-muted);
            font-size: 11px;
            line-height: 1.2;
        }

        .settings-toolbar-context strong {
            overflow: hidden;
            color: var(--app-text-secondary);
            font-size: 12.5px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .settings-table-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .settings-data-table {
            width: 100%;
            margin: 0;
            border-collapse: collapse;
            background: white;
            color: var(--app-text-secondary);
            font-size: 12.5px;
        }

        .settings-data-table th {
            padding: 9px 10px;
            border-bottom: 1px solid var(--app-border);
            background: #f8fafc;
            color: var(--app-text-secondary);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.025em;
            text-align: left;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .settings-data-table td {
            padding: 9px 10px;
            border-bottom: 1px solid #edf2f7;
            vertical-align: middle;
        }

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

        /* Global Options geometry lock and compact Rapport settings surfaces. */
        .rapport-options-section,
        .rapport-settings-card,
        .rapport-table-scroll,
        .material-catalogue-tabs,
        .supplier-article-list-card,
        .rapport-template-list-card {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

        .rapport-options-section {
            overflow: clip;
        }

        .material-catalogue-card {
            margin-bottom: 18px;
            overflow: hidden;
            border-radius: 11px;
        }

        .rapport-options-section > .material-catalogue-card > .material-catalogue-toolbar {
            align-items: center;
            min-height: 52px;
            margin: 0;
            padding: 7px 12px;
            border: 0;
            border-bottom: 1px solid var(--app-border);
            border-radius: 0;
            background: var(--app-surface-subtle);
        }

        .rapport-options-section > .material-catalogue-card > .rapport-table-scroll {
            margin: 0;
            border: 0;
            border-radius: 0;
            box-shadow: none;
        }

        .material-catalogue-toolbar .material-catalogue-heading-actions {
            width: 100%;
            align-items: center;
            justify-content: space-between;
        }

        .material-catalogue-toolbar .material-catalogue-secondary-actions {
            display: flex;
            align-items: center;
            gap: 7px;
            flex-wrap: wrap;
        }

        .material-catalogue-table .app-row-actions-heading,
        .material-catalogue-table .app-row-actions,
        .supplier-article-table .app-row-actions-heading,
        .supplier-article-table .app-row-actions {
            width: 58px;
            min-width: 58px;
            text-align: center;
        }

        .material-catalogue-table .catalogue-read-row {
            height: 44px;
        }

        .material-catalogue-table .settings-status {
            justify-content: flex-start;
        }

        .material-catalogue-card > .settings-empty-state {
            justify-items: start;
            padding: 18px 20px;
            border-top: 1px solid var(--app-border);
            text-align: left;
        }

        .material-catalogue-card > .settings-empty-state strong {
            font-size: 13px;
        }

        .material-catalogue-tabs {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
            -webkit-overflow-scrolling: touch;
        }

        .material-catalogue-tabs > a {
            flex: 0 0 auto;
            margin: 0;
            white-space: nowrap;
        }

        .rapport-options-section > .section-heading-row {
            min-height: 52px;
            margin: 0;
            padding: 7px 12px;
            border: 1px solid var(--app-border);
            border-bottom: 0;
            border-radius: 11px 11px 0 0;
            background: var(--app-surface-subtle);
        }

        .rapport-options-section > .section-heading-row + .table-scroll,
        .rapport-options-section > .section-heading-row ~ .table-scroll.rapport-table-scroll {
            margin-top: 0;
            border-radius: 0 0 11px 11px;
        }

        .rapport-table-scroll,
        .supplier-article-list-card > .app-table-shell > .app-table-scroll,
        .rapport-template-list-card > .app-table-scroll {
            overflow-x: auto;
            overflow-y: visible;
            overscroll-behavior-inline: contain;
            -webkit-overflow-scrolling: touch;
        }

        .rapport-settings-table,
        .supplier-article-table {
            width: max(100%, 760px);
        }

        .rapport-article-table {
            width: max(100%, 1080px);
        }

        .supplier-article-table {
            min-width: 900px;
            table-layout: fixed;
        }

        .rapport-options-section .option-page-actions,
        .rapport-settings-toolbar,
        .supplier-article-toolbar,
        .rapport-template-toolbar {
            min-width: 0;
        }

        .rapport-options-section .option-page-actions {
            margin-left: auto;
        }

        .rapport-options-section .compact-edit-table,
        .rapport-options-section .settings-data-table {
            margin: 0;
            border-radius: 0;
            box-shadow: none;
        }

        .rapport-options-section .compact-edit-table th,
        .rapport-options-section .compact-edit-table td {
            padding: 9px 10px;
        }

        .rapport-service-table .app-row-actions-heading,
        .rapport-service-table .app-row-actions,
        .rapport-service-category-table .app-row-actions-heading,
        .rapport-service-category-table .app-row-actions {
            width: 58px;
            min-width: 58px;
            text-align: center;
        }

        .rapport-service-category-table {
            width: 100%;
            min-width: 0;
        }

        .supplier-article-toolbar {
            align-items: center;
            padding-block: 8px;
        }

        .supplier-article-toolbar > .supplier-page-actions {
            justify-content: flex-start;
            margin-left: 0;
        }

        .supplier-article-filter-actions {
            min-width: 0;
            margin-left: auto;
        }

        .supplier-toolbar-filter {
            flex: 0 0 170px;
            width: 170px;
            min-width: 0;
        }

        .supplier-table-search-wrap {
            flex: 1 1 240px;
            width: clamp(190px, 24vw, 330px);
            min-width: 170px;
            max-width: 330px;
        }

        .rapport-template-toolbar {
            justify-content: flex-end;
            min-height: 52px;
            padding: 7px 12px;
        }

        .rapport-options-section .item-category-toggle,
        .rapport-options-section .item-group-toggle {
            min-width: 0;
        }

        .rapport-options-section .item-category-caret {
            position: relative;
            z-index: 0;
        }

        .material-catalogue-card .item-category-toggle,
        .material-catalogue-card .item-group-toggle {
            min-height: 30px;
            gap: 9px;
        }

        .material-catalogue-card .item-category-toggle .muted,
        .material-catalogue-card .item-group-toggle .muted {
            color: var(--app-text-muted);
            font-size: 11.5px;
            font-weight: 700;
        }

        .material-catalogue-card .item-category-caret {
            margin-left: 3px;
        }

        @media (max-width: 1100px) {
            .material-catalogue-toolbar .material-catalogue-heading-actions {
                align-items: stretch;
            }

            .supplier-article-toolbar {
                align-items: stretch;
            }

            .supplier-article-toolbar > .supplier-page-actions,
            .supplier-article-filter-actions {
                width: 100%;
            }

            .supplier-article-filter-actions {
                justify-content: flex-start;
                margin-left: 0;
            }
        }

        @media (max-width: 840px) {
            .material-catalogue-toolbar .material-catalogue-heading-actions,
            .material-catalogue-toolbar .material-catalogue-secondary-actions,
            .material-catalogue-toolbar .option-page-actions {
                width: 100%;
            }

            .material-catalogue-toolbar .option-page-actions {
                justify-content: flex-end;
            }

            .supplier-article-filter-actions {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto auto;
            }

            .supplier-table-search-wrap {
                grid-column: 1 / -1;
                grid-row: 1;
                width: 100%;
                max-width: none;
            }

            .supplier-toolbar-filter {
                grid-column: 1;
                width: 100%;
            }
        }

        .settings-data-row {
            cursor: pointer;
            transition: background-color 120ms ease, box-shadow 120ms ease;
        }

        .settings-data-row:hover {
            background: #f5faff;
        }

        .settings-data-row.is-selected {
            background: var(--brand-blue-soft);
            box-shadow: inset 3px 0 0 var(--brand-blue);
        }

        .settings-data-row:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: -2px;
        }

        .holiday-date-cell {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .holiday-date-cell svg {
            width: 17px;
            height: 17px;
            flex: 0 0 17px;
            color: var(--app-text-muted);
        }

        .holiday-date-cell > span {
            display: grid;
            gap: 2px;
        }

        .holiday-date-cell strong,
        .settings-row-name strong {
            color: var(--app-text-primary);
            font-weight: 800;
        }

        .holiday-date-cell small,
        .settings-table-secondary {
            display: block;
            color: var(--app-text-muted);
            font-size: 11px;
            line-height: 1.3;
        }

        .settings-table-pill {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 3px 8px;
            border-radius: 999px;
            background: #f1f5f9;
            color: var(--app-text-secondary);
            font-size: 11.5px;
            font-weight: 700;
            white-space: nowrap;
        }

        .settings-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--app-text-secondary);
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }

        .settings-status > span {
            width: 7px;
            height: 7px;
            flex: 0 0 7px;
            border-radius: 50%;
            background: #22a860;
        }

        .settings-status.is-inactive > span {
            background: #94a3b8;
        }

        .settings-detail-panel {
            position: sticky;
            top: 18px;
        }

        .holiday-detail-content {
            padding: 0 20px 20px;
        }

        .holiday-detail-identity {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border: 1px solid #dceaf5;
            border-radius: var(--app-radius-medium);
            background: var(--brand-blue-soft);
        }

        .holiday-detail-date-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            border-radius: 9px;
            background: white;
            color: var(--brand-blue-dark);
        }

        .holiday-detail-date-icon svg {
            width: 19px;
            height: 19px;
        }

        .holiday-detail-identity h3 {
            margin: 0;
            color: var(--app-text-primary);
            font-size: 15px;
            line-height: 1.3;
        }

        .holiday-detail-identity p {
            margin: 3px 0 0;
            color: var(--app-text-muted);
            font-size: 12px;
        }

        .settings-detail-list {
            display: grid;
            margin: 16px 0 0;
        }

        .settings-detail-list > div {
            display: grid;
            grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1fr);
            gap: 12px;
            padding: 9px 0;
            border-bottom: 1px solid #edf2f7;
        }

        .settings-detail-list dt,
        .settings-detail-list dd {
            margin: 0;
            font-size: 12px;
            line-height: 1.4;
        }

        .settings-detail-list dt {
            color: var(--app-text-muted);
        }

        .settings-detail-list dd {
            overflow-wrap: anywhere;
            color: var(--app-text-secondary);
            font-weight: 700;
            text-align: right;
        }

        .settings-detail-actions {
            display: grid;
            gap: 8px;
            margin-top: 18px;
        }

        .settings-detail-actions .button-secondary {
            white-space: normal;
            text-align: center;
        }

        .settings-detail-empty,
        .settings-empty-state {
            display: grid;
            justify-items: center;
            gap: 6px;
            padding: 34px 22px;
            color: var(--app-text-muted);
            font-size: 12.5px;
            line-height: 1.45;
            text-align: center;
        }

        .settings-detail-empty[hidden] {
            display: none;
        }

        .settings-empty-state-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin-bottom: 4px;
            border-radius: 50%;
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
        }

        .settings-empty-state-icon svg {
            width: 20px;
            height: 20px;
        }

        .settings-empty-state strong {
            color: var(--app-text-secondary);
            font-size: 14px;
        }

        .settings-import-modal-panel {
            width: min(1120px, calc(100vw - 40px));
            max-height: calc(100vh - 40px);
            overflow: hidden;
        }

        .settings-import-form {
            grid-template-rows: auto minmax(0, 1fr) auto;
            gap: 0;
            max-height: calc(100vh - 40px);
            padding: 0;
        }

        .settings-import-modal-header {
            margin: 0;
            padding: 0 16px 0 0;
        }

        .settings-import-modal-header .settings-list-card-heading {
            min-width: 0;
        }

        .settings-import-table-wrap {
            min-height: 0;
            overflow: auto;
            padding: 0 18px;
        }

        .settings-import-table-wrap .app-table-card {
            margin: 0;
            box-shadow: none;
        }

        .settings-import-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 14px 18px;
            border-top: 1px solid var(--app-border);
            background: var(--app-surface-subtle);
        }

        .appointment-types-list-card {
            width: 100%;
        }

        .appointment-types-toolbar {
            align-items: center;
            justify-content: flex-end;
            min-height: 52px;
            padding: 7px 12px;
            border-top: 0;
        }

        .appointment-types-table .app-row-actions-heading,
        .appointment-types-table .app-row-actions {
            width: 58px;
            text-align: center;
        }

        .appointment-type-identity {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .appointment-type-identity > span:last-child {
            display: grid;
            gap: 2px;
            min-width: 0;
        }

        .appointment-type-identity strong,
        .settings-table-primary {
            display: block;
            color: var(--app-text-primary);
            font-weight: 800;
        }

        .appointment-type-identity small {
            color: var(--app-text-muted);
            font-size: 11px;
        }

        .appointment-type-swatch {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            border: 1px solid rgba(15, 23, 42, 0.12);
            border-radius: 8px;
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.36);
        }

        .settings-table-pill.is-accent {
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
        }

        .settings-row-menu summary {
            width: 32px;
            height: 32px;
            border: 1px solid transparent;
            border-radius: 8px;
        }

        .settings-row-menu summary:hover,
        .settings-row-menu summary:focus {
            border-color: var(--app-border);
            background: var(--app-surface-subtle);
        }

        .settings-row-menu .appointment-action-menu-items {
            min-width: 138px;
            padding: 4px;
            border-radius: 8px;
        }

        .settings-row-menu-items,
        .settings-row-menu-items.appointment-menu-portal {
            min-width: 138px;
            padding: 4px;
            border-radius: 8px;
        }

        .settings-row-menu .appointment-action-menu-item {
            display: block;
            min-height: 34px;
            border-radius: 5px;
        }

        .settings-row-menu .delete-button:hover,
        .settings-row-menu .delete-button:focus {
            background: #fff1f2;
        }

        .settings-crud-modal-panel {
            width: min(680px, 100%);
        }

        .settings-crud-modal-panel-compact {
            width: min(520px, 100%);
        }

        .settings-delete-modal-panel {
            width: min(460px, 100%);
        }

        .settings-crud-form {
            gap: 14px;
        }

        .settings-crud-form .app-modal-actions .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
        }

        .settings-crud-form .app-modal-header p {
            margin: 3px 0 0;
            color: var(--app-text-muted);
            font-size: 12px;
        }

        .settings-crud-primary-fields {
            align-items: end;
        }

        .appointment-type-color-field {
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr);
            align-items: center;
            gap: 9px;
            min-height: 42px;
            padding: 4px 10px 4px 5px;
            box-sizing: border-box;
            border: 1px solid var(--app-border-strong);
            border-radius: 6px;
            background: white;
        }

        .appointment-type-color-field .app-color-picker {
            width: 40px;
            min-width: 40px;
            height: 32px;
            min-height: 32px;
            padding: 2px;
            border: 0;
        }

        .appointment-type-color-field span {
            color: var(--app-text-secondary);
            font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
            font-size: 12.5px;
        }

        .settings-crud-toggle-list {
            display: grid;
            gap: 0;
            overflow: hidden;
            border: 1px solid var(--app-border);
            border-radius: var(--app-radius-medium);
        }

        .settings-crud-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            min-height: 54px;
            padding: 10px 13px;
            border-bottom: 1px solid var(--app-border);
            background: white;
            cursor: pointer;
        }

        .settings-crud-toggle:last-child {
            border-bottom: 0;
        }

        .settings-crud-toggle > span {
            display: grid;
            gap: 2px;
        }

        .settings-crud-toggle strong {
            color: var(--app-text-primary);
            font-size: 12.5px;
        }

        .settings-crud-toggle small {
            color: var(--app-text-muted);
            font-size: 11.5px;
            line-height: 1.35;
        }

        .settings-crud-toggle input[type="checkbox"] {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            margin: 0;
        }

        .settings-crud-toggle.disabled-setting {
            background: var(--app-surface-subtle);
            cursor: default;
            opacity: 0.6;
        }

        .settings-delete-copy {
            margin: 4px 0;
            color: var(--app-text-secondary);
            line-height: 1.55;
        }

        .appointment-type-fallback-card {
            max-width: 680px;
        }

        .holiday-form-error {
            margin: 0 0 18px !important;
        }

        .appointment-descriptions-list-card {
            width: 100%;
        }

        .settings-compact-toolbar {
            align-items: center;
            justify-content: flex-end;
            min-height: 52px;
            padding: 7px 12px;
            border-top: 0;
        }

        .appointment-descriptions-toolbar {
            align-items: center;
            justify-content: flex-end;
            min-height: 52px;
            padding: 7px 12px;
            border-top: 0;
        }

        .appointment-descriptions-table .app-row-actions-heading,
        .appointment-descriptions-table .app-row-actions {
            width: 58px;
            text-align: center;
        }

        .worktime-settings-workspace {
            display: grid;
            gap: 18px;
        }

        .worktime-settings-card .company-settings-section-form {
            max-width: 720px;
        }

        .worktime-settings-actions {
            margin-top: 18px !important;
            padding-top: 0 !important;
            border-top: 0 !important;
        }

        .worktime-form-error {
            margin: 0 0 18px !important;
        }

        .worker-order-card .settings-list-card-heading {
            border-bottom: 1px solid var(--app-border);
        }

        .worker-order-form {
            margin: 0;
        }

        .worker-order-column-heading {
            padding: 11px 22px 7px 72px;
            color: var(--app-text-muted);
            font-size: 11px;
            font-weight: 750;
            letter-spacing: 0.03em;
            text-align: right;
            text-transform: uppercase;
        }

        .worker-order-list {
            gap: 0;
            margin: 0;
            border-top: 1px solid var(--app-border);
        }

        .worker-order-row {
            grid-template-columns: 48px minmax(0, 1fr);
            gap: 0;
            min-height: 46px;
            padding: 0 22px 0 12px;
            border-bottom: 1px solid var(--app-border);
            background: white;
        }

        .worker-order-row:last-child {
            border-bottom: 0;
        }

        .worker-order-row:hover {
            background: var(--app-surface-subtle);
        }

        .worker-order-drag-handle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 8px;
            color: var(--app-text-muted);
            cursor: grab;
        }

        .worker-order-drag-handle:active {
            cursor: grabbing;
        }

        .worker-order-drag-handle svg {
            width: 22px;
            height: 22px;
            fill: currentColor;
        }

        .worker-order-toggle {
            justify-content: space-between;
            gap: 18px;
            min-width: 0;
            min-height: 46px;
            cursor: pointer;
        }

        .worker-order-toggle input {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            margin: 0;
        }

        .worker-order-identity {
            display: block;
            min-width: 0;
        }

        .worker-order-identity strong {
            color: var(--app-text-primary);
            font-size: 13.5px;
        }

        .worker-order-hidden-note {
            margin: 12px 22px 0 !important;
        }

        .worker-order-actions {
            margin: 0 !important;
            padding: 16px 22px 18px !important;
            border-top: 1px solid var(--app-border) !important;
        }

        .workers-list-card,
        .worker-functions-list-card,
        .worktime-settings-workspace {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

        .workers-settings-table .app-row-actions-heading,
        .workers-settings-table .app-row-actions,
        .worker-functions-settings-table .app-row-actions-heading,
        .worker-functions-settings-table .app-row-actions {
            width: 58px;
            text-align: center;
        }

        .worker-abbreviation-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            min-height: 26px;
            box-sizing: border-box;
            padding: 3px 8px;
            border-radius: 7px;
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            font-size: 11.5px;
            font-weight: 800;
            letter-spacing: 0.025em;
        }

        .worker-functions-form-error {
            margin: 0 0 18px !important;
        }

        .app-success-toast {
            position: fixed;
            top: 66px;
            right: 22px;
            z-index: 20020;
            grid-template-columns: 22px minmax(0, 1fr) 26px !important;
            width: min(390px, calc(100vw - 24px));
            box-sizing: border-box;
            margin: 0 !important;
            border: 1px solid #a9d7ba;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.17);
            animation: app-toast-enter 180ms ease-out both;
        }

        .app-success-toast > span {
            grid-column: 2;
            align-self: center;
        }

        .app-success-toast-dismiss {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            margin: -3px -3px -3px 0;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: currentColor;
            cursor: pointer;
            font-size: 20px;
            line-height: 1;
            opacity: 0.72;
        }

        .app-success-toast-dismiss:hover,
        .app-success-toast-dismiss:focus-visible {
            background: rgba(23, 99, 56, 0.1);
            opacity: 1;
        }

        .app-success-toast.is-leaving {
            pointer-events: none;
            animation: app-toast-leave 180ms ease-in both;
        }

        @keyframes app-toast-enter {
            from { opacity: 0; transform: translate3d(0, -8px, 0); }
            to { opacity: 1; transform: translate3d(0, 0, 0); }
        }

        @keyframes app-toast-leave {
            from { opacity: 1; transform: translate3d(0, 0, 0); }
            to { opacity: 0; transform: translate3d(8px, 0, 0); }
        }

        .app-settings-page .options-page-header {
            margin-bottom: var(--app-space-3);
        }

        .options-nav {
            gap: var(--app-space-1);
            margin-bottom: var(--app-space-4);
            padding: var(--app-space-1);
            border-color: var(--app-border);
            border-radius: var(--app-radius-medium);
            background: var(--app-surface);
            box-shadow: var(--app-shadow-surface);
        }

        .options-nav-link,
        .options-nav-trigger {
            min-height: 38px;
            padding-inline: var(--app-space-3);
            border-radius: var(--app-radius-small);
            color: var(--app-text-secondary);
            transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
        }

        .options-nav-link:hover,
        .options-nav-trigger:hover {
            background: var(--app-surface-subtle);
            color: var(--brand-blue-dark);
        }

        .options-nav-link:focus-visible,
        .options-nav-trigger:focus-visible,
        .options-nav-menu a:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: 2px;
        }

        .options-nav-link.active,
        .options-nav-link[aria-current="page"],
        .options-nav-dropdown.active > .options-nav-trigger,
        .options-nav-dropdown.open > .options-nav-trigger {
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            box-shadow: inset 0 0 0 1px var(--brand-blue-border);
        }

        .options-nav-menu {
            border-color: var(--app-border);
            border-radius: var(--app-radius-medium);
            background: var(--app-surface);
            box-shadow: var(--app-shadow-overlay);
        }

        .options-nav-menu a {
            border-radius: var(--app-radius-small);
            color: var(--app-text-secondary);
        }

        .app-settings-page .settings-section {
            margin-top: 0;
        }

        .app-settings-page .app-settings-card {
            min-width: 0;
            padding: 0;
            overflow: clip;
            border-color: var(--app-border);
            border-radius: var(--app-radius-large);
            background: var(--app-surface);
            box-shadow: var(--app-shadow-surface);
        }

        .app-settings-page .app-settings-card + .app-settings-card {
            margin-top: var(--app-space-4);
        }

        .app-settings-page .app-settings-group {
            min-width: 0;
            padding: 20px 22px;
        }

        .app-settings-page .app-settings-group + .app-settings-group {
            margin-top: 0;
            padding-top: 20px;
            border-top: 1px solid var(--app-border);
        }

        .app-settings-page .app-settings-group h2 {
            margin: 0 0 var(--app-space-3);
            color: var(--app-text-primary);
            font-size: 16px;
            line-height: 1.3;
        }

        .app-settings-page .app-settings-description {
            max-width: 68ch;
            margin: calc(-1 * var(--app-space-2)) 0 var(--app-space-4);
            color: var(--app-text-muted);
            font-size: 13px;
            line-height: 1.5;
        }

        .app-settings-page .two-columns,
        .app-settings-page .three-columns {
            gap: var(--app-space-4) 20px;
        }

        .app-settings-page .two-columns + .form-row,
        .app-settings-page .three-columns + .form-row,
        .app-settings-page .form-row + .two-columns,
        .app-settings-page .form-row + .three-columns,
        .app-settings-page .two-columns + .three-columns {
            margin-top: var(--app-space-4);
        }

        .app-settings-page .app-settings-group .form-row {
            min-width: 0;
            margin-bottom: 0;
        }

        .app-settings-page .form-row > label {
            margin-bottom: 6px;
            color: var(--app-text-secondary);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
        }

        .app-settings-page .app-settings-form input:not([type="checkbox"]):not([type="hidden"]),
        .app-settings-page .app-settings-form select {
            width: 100%;
            min-width: 0;
            min-height: var(--app-control-height);
            padding: 9px 11px;
            border: 1px solid var(--app-border-strong);
            border-radius: var(--app-radius-small);
            background: var(--app-surface);
            color: var(--app-text-primary);
            font-size: 14px;
            line-height: 1.3;
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
            transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
        }

        .app-settings-page .app-settings-form input:not([type="checkbox"]):not([type="hidden"]):focus,
        .app-settings-page .app-settings-form select:focus {
            border-color: var(--brand-blue);
            outline: none;
            box-shadow: 0 0 0 3px var(--app-focus-ring);
        }

        .app-settings-page .app-settings-form input[readonly],
        .app-settings-page .app-settings-form input:disabled,
        .app-settings-page .app-settings-form select:disabled {
            border-color: var(--app-border);
            background: var(--app-surface-subtle);
            color: var(--app-text-muted);
            box-shadow: none;
            cursor: not-allowed;
        }

        .app-settings-page .help {
            margin-top: 5px;
            color: var(--app-text-muted);
            font-size: 12.5px;
            line-height: 1.45;
        }

        .app-settings-page .form-error,
        .app-settings-page .form-success,
        .app-settings-page .form-warning {
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr);
            gap: var(--app-space-2);
            align-items: start;
            margin: 18px 22px 0;
            padding: 11px 12px;
            border-radius: var(--app-radius-medium);
            font-size: 13px;
            font-weight: 650;
            line-height: 1.45;
        }

        .app-settings-page .form-success {
            border-color: #b9dfc7;
            background: var(--app-success-surface);
            color: var(--app-success);
        }

        .app-settings-page .form-warning {
            border-color: #f0cf8b;
            background: var(--app-warning-surface);
            color: var(--app-warning);
        }

        .app-settings-page .form-error {
            border-color: #e7b6b6;
            background: var(--app-error-surface);
            color: var(--app-error);
        }

        .app-settings-page .form-success::before,
        .app-settings-page .form-warning::before,
        .app-settings-page .form-error::before {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border: 1px solid currentColor;
            border-radius: 50%;
            font-size: 12px;
            font-weight: 800;
            line-height: 1;
        }

        .app-settings-page .form-success::before { content: "\2713"; }
        .app-settings-page .form-warning::before { content: "i"; }
        .app-settings-page .form-error::before { content: "!"; }

        .app-settings-page .form-error > div,
        .app-settings-page .form-warning > div,
        .app-settings-page .form-success > div,
        .app-settings-page .form-error > ul {
            grid-column: 2;
        }

        .app-settings-page .form-error ul {
            margin: var(--app-space-1) 0 0;
            padding-left: 18px;
            font-weight: 500;
        }

        .app-settings-page .app-settings-actions {
            display: flex;
            justify-content: flex-end;
            gap: var(--app-space-2);
            min-height: 42px;
            margin: 0 22px;
            padding: var(--app-space-3) 0 var(--app-space-4);
            border-top: 0;
            background: transparent;
        }

        .app-settings-page .app-settings-actions .button,
        .app-settings-page .app-settings-actions .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: var(--app-control-height);
            height: auto;
            margin: 0;
            padding: 9px 16px;
            border-radius: var(--app-radius-small);
            font-size: 13px;
            line-height: 1.2;
        }

        .app-settings-page .app-settings-actions.app-settings-section-actions {
            justify-content: flex-end;
            margin: 20px 0 0;
            padding: 14px 0 0;
            border-top: 1px solid var(--app-border);
        }

        .app-settings-action-icon {
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        .app-settings-save-button::before {
            content: none !important;
        }

        .pikett-options-card > .app-settings-section-actions {
            grid-column: 1 / -1;
        }

        .app-settings-page .app-settings-actions .button:focus-visible,
        .app-settings-page .app-settings-actions .button-secondary:focus-visible {
            outline: 2px solid var(--brand-blue);
            outline-offset: 2px;
        }

        .app-settings-page .app-settings-actions .button:disabled {
            background: var(--app-border-strong);
            color: var(--app-text-muted);
            cursor: not-allowed;
            opacity: 1;
        }

        .app-settings-page .app-settings-secondary-card .app-settings-group {
            padding-block: var(--app-space-4);
        }

        .app-settings-page .app-settings-secondary-card .section-heading-row,
        .app-settings-page .app-settings-secondary-card h2 {
            margin: 0;
        }

        .app-asset-preview {
            display: flex;
            align-items: center;
            gap: var(--app-space-3);
            min-height: 52px;
            margin-top: var(--app-space-2);
            padding: var(--app-space-2) var(--app-space-3);
            border: 1px solid var(--app-border);
            border-radius: var(--app-radius-medium);
            background: var(--app-surface-subtle);
        }

        .app-asset-preview-label {
            flex: 0 0 auto;
            color: var(--app-text-muted);
            font-size: 12px;
            font-weight: 700;
        }

        .app-asset-preview-image {
            display: block;
            width: auto;
            max-width: 150px;
            height: auto;
            max-height: 42px;
            object-fit: contain;
        }

        .app-asset-preview-image-favicon {
            width: 32px;
            height: 32px;
        }

        .app-color-field {
            position: relative;
        }

        .app-color-field input {
            padding-left: 42px !important;
            font-family: Consolas, "Courier New", monospace;
            letter-spacing: 0.02em;
        }

        .app-color-swatch {
            position: absolute;
            top: 50%;
            left: 9px;
            z-index: 1;
            width: 22px;
            height: 22px;
            border: 1px solid rgba(15, 23, 42, 0.22);
            border-radius: 5px;
            background: var(--app-swatch-color, transparent);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
            transform: translateY(-50%);
            pointer-events: none;
        }

        .app-module-list {
            display: grid;
            overflow: hidden;
            border: 1px solid var(--app-border);
            border-radius: var(--app-radius-medium);
            background: var(--app-surface);
        }

        .app-module-row {
            min-width: 0;
            background: var(--app-surface);
            transition: background-color 120ms ease;
        }

        .app-module-row + .app-module-row {
            border-top: 1px solid var(--app-border);
        }

        .app-module-row.is-enabled {
            background: var(--app-surface);
        }

        .app-module-row.is-readonly {
            background: var(--app-surface-subtle);
        }

        .app-module-control {
            position: relative;
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) auto;
            gap: var(--app-space-3);
            align-items: center;
            min-height: 58px;
            margin: 0;
            padding: 12px 14px;
            cursor: pointer;
            box-sizing: border-box;
        }

        .app-module-checkbox {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            opacity: 0;
        }

        .app-module-switch {
            position: relative;
            display: block;
            width: 40px;
            height: 22px;
            border: 1px solid var(--app-border-strong);
            border-radius: 999px;
            background: #e2e8f0;
            box-sizing: border-box;
            transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
        }

        .app-module-switch::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--app-surface);
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
            transition: transform 120ms ease;
        }

        .app-module-checkbox:checked + .app-module-switch {
            border-color: var(--brand-blue);
            background: var(--brand-blue);
        }

        .app-module-checkbox:checked + .app-module-switch::after {
            transform: translateX(18px);
        }

        .app-module-checkbox:focus-visible + .app-module-switch {
            outline: 2px solid var(--brand-blue);
            outline-offset: 3px;
        }

        .app-module-checkbox:disabled + .app-module-switch {
            cursor: not-allowed;
            opacity: 0.58;
        }

        .app-module-copy {
            min-width: 0;
        }

        .app-module-name {
            display: block;
            color: var(--app-text-primary);
            font-size: 14px;
            font-weight: 750;
            line-height: 1.35;
        }

        .app-module-dependency {
            display: block;
            margin-top: 3px;
            color: var(--app-text-muted);
            font-size: 12.5px;
            font-weight: 500;
            line-height: 1.4;
        }

        .app-module-state {
            justify-self: end;
            color: var(--app-text-muted);
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }

        .app-module-row.is-enabled .app-module-state {
            color: var(--app-info);
        }

        .app-module-row.is-readonly .app-module-control {
            cursor: not-allowed;
        }

        .pikett-worker-settings-card > form,
        .user-fallback-card > form,
        .settings-import-card > form {
            margin: 0;
        }

        .pikett-worker-settings-heading,
        .pikett-worker-settings-row {
            display: grid;
            grid-template-columns: 42px minmax(220px, 1fr) minmax(150px, 190px) minmax(160px, 210px);
            gap: 12px;
            align-items: center;
        }

        .pikett-worker-settings-heading {
            padding: 8px 18px;
            border-bottom: 1px solid var(--app-border);
            color: var(--app-text-muted);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .pikett-worker-settings-row {
            min-height: 46px;
            padding: 0 18px;
            border-bottom: 1px solid var(--app-border);
            background: var(--app-surface);
            line-height: 1.25;
        }

        .pikett-worker-settings-row:last-child {
            border-bottom: 0;
        }

        .pikett-worker-settings-row.dragging {
            opacity: 0.48;
        }

        .pikett-worker-settings-row:not(.is-active) .pikett-worker-settings-name {
            color: var(--app-text-muted);
        }

        .pikett-worker-settings-row:not(.is-active) {
            background: var(--app-surface-subtle);
        }

        .pikett-worker-settings-name {
            min-width: 0;
            overflow: hidden;
            line-height: 1.25;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .app-settings-page .pikett-worker-settings-row select {
            min-width: 0;
            width: 100%;
            min-height: 36px;
            height: 36px;
            padding-block: 5px;
            font-size: 13px;
        }

        .pikett-worker-settings-toggle {
            min-height: 36px;
            line-height: 1.2;
        }

        .pikett-worker-settings-toggle input {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            margin: 0;
        }

        .pikett-worker-settings-drag-handle {
            width: 36px;
            height: 36px;
            cursor: grab;
            touch-action: none;
        }

        .pikett-worker-settings-actions {
            margin: 0 !important;
            padding: 14px 18px !important;
        }

        .pikett-doerfer-card,
        .users-settings-card,
        .pikett-rate-history-card,
        .settings-import-preview-card {
            margin: 0;
        }

        .pikett-doerfer-toolbar,
        .users-settings-toolbar {
            justify-content: flex-end;
        }

        .pikett-options-settings-form {
            display: grid;
            gap: 16px;
            margin: 0;
        }

        .pikett-rate-fields,
        .pikett-contribution-fields {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            padding: 0 22px 22px;
        }

        .pikett-contribution-fields {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .pikett-rate-fields .form-row,
        .pikett-contribution-fields .form-row {
            min-width: 0;
            margin: 0;
        }

        .pikett-contribution-fields .pikett-dienst-total {
            grid-column: 1 / -1;
            display: flex;
            align-items: baseline;
            gap: 10px;
            padding: 11px 13px;
            border-radius: var(--app-radius-small);
            background: var(--app-surface-subtle);
        }

        .pikett-contribution-fields .pikett-dienst-total .help {
            margin-left: auto;
        }

        .pikett-rate-save-actions {
            justify-content: flex-end;
        }

        .module-settings-card .app-settings-group {
            padding: 20px 22px 0;
        }

        .app-settings-page .app-settings-actions.app-settings-card-footer {
            margin: 0 !important;
            padding: 16px 22px 20px !important;
            border-top: 0;
        }

        .module-settings-description {
            margin: 0 0 14px;
        }

        .settings-import-card-heading,
        .settings-import-preview-heading {
            border-bottom: 1px solid var(--app-border);
        }

        .settings-import-form-card {
            padding: 20px 22px;
        }

        .settings-file-field input[type="file"] {
            padding: 8px;
            border: 1px dashed var(--app-border-strong);
            border-radius: var(--app-radius-medium);
            background: var(--app-surface-subtle);
        }

        .settings-file-field input[type="file"]::file-selector-button {
            margin-right: 12px;
            padding: 8px 12px;
            border: 1px solid var(--app-border-strong);
            border-radius: var(--app-radius-small);
            background: var(--app-surface);
            color: var(--app-text-primary);
            font: inherit;
            font-weight: 700;
            cursor: pointer;
        }

        .settings-import-result-card .table-scroll {
            border-block: 1px solid var(--app-border);
        }

        .settings-import-result-card .form-warning,
        .settings-import-result-card .app-settings-actions,
        .settings-import-preview-actions {
            margin-inline: 22px;
        }

        .user-crud-modal-panel {
            width: min(560px, calc(100vw - 32px));
        }

        .user-settings-form .form-row {
            margin-bottom: 13px;
        }

        .user-active-field > .checkbox-row {
            min-height: 38px;
            margin: 0;
        }

        .user-fallback-card {
            max-width: 720px;
        }

        .user-fallback-card .user-settings-form {
            padding: 22px;
        }

        @media (max-width: 820px) {
            .pikett-worker-settings-heading {
                display: none;
            }

            .pikett-worker-settings-row {
                grid-template-columns: 42px minmax(0, 1fr) minmax(150px, 190px);
            }

            .pikett-worker-settings-toggle {
                grid-column: 2;
            }

            .pikett-worker-settings-row select {
                grid-column: 3;
                grid-row: 1 / span 2;
            }

            .pikett-rate-fields,
            .pikett-contribution-fields {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 560px) {
            .pikett-worker-settings-row {
                grid-template-columns: 36px minmax(0, 1fr);
                padding-inline: 12px;
            }

            .pikett-worker-settings-row select {
                grid-column: 2;
                grid-row: auto;
            }

            .pikett-rate-fields,
            .pikett-contribution-fields {
                grid-template-columns: 1fr;
                padding-inline: 16px;
            }

            .pikett-contribution-fields .pikett-dienst-total {
                align-items: flex-start;
                flex-direction: column;
            }

            .pikett-contribution-fields .pikett-dienst-total .help {
                margin-left: 0;
            }
        }

        @media (max-width: 900px) {
            .app-settings-page .three-columns {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .app-settings-page .three-columns > .form-row:last-child:nth-child(odd) {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 960px) {
            .app-settings-shell {
                grid-template-columns: minmax(0, 1fr);
                grid-template-areas:
                    "mobile"
                    "content";
                gap: var(--app-space-4);
            }

            .app-settings-rail {
                display: none;
            }

            .app-settings-mobile-nav {
                display: block;
                min-width: 0;
                border: 1px solid var(--app-border);
                border-radius: var(--app-radius-medium);
                background: var(--app-surface);
                box-shadow: var(--app-shadow-surface);
            }

            .app-settings-mobile-nav summary {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                gap: 2px var(--app-space-3);
                align-items: center;
                min-height: 52px;
                padding: 8px 14px;
                border-radius: inherit;
                cursor: pointer;
                list-style: none;
            }

            .app-settings-mobile-nav summary::-webkit-details-marker {
                display: none;
            }

            .app-settings-mobile-nav-label {
                color: var(--app-text-muted);
                font-size: 11px;
                font-weight: 750;
                letter-spacing: 0.04em;
                line-height: 1.2;
                text-transform: uppercase;
            }

            .app-settings-mobile-nav summary strong {
                grid-column: 1;
                color: var(--app-text-primary);
                font-size: 14px;
                line-height: 1.3;
            }

            .app-settings-mobile-nav-icon {
                grid-column: 2;
                grid-row: 1 / span 2;
                width: 9px;
                height: 9px;
                border-right: 2px solid var(--app-text-secondary);
                border-bottom: 2px solid var(--app-text-secondary);
                transform: rotate(45deg) translate(-2px, 2px);
                transition: transform 120ms ease;
            }

            .app-settings-mobile-nav[open] .app-settings-mobile-nav-icon {
                transform: rotate(225deg) translate(-1px, -1px);
            }

            .app-settings-mobile-nav-panel {
                padding: 0 var(--app-space-2) var(--app-space-2);
                border-top: 1px solid var(--app-border);
            }

            .app-settings-mobile-nav .app-settings-nav-list {
                padding-top: var(--app-space-2);
            }

            .app-settings-mobile-nav .app-settings-nav-link {
                min-height: 44px;
            }
        }

        @media (max-width: 620px) {
            .app-settings-page .two-columns,
            .app-settings-page .three-columns {
                grid-template-columns: minmax(0, 1fr);
            }

            .app-settings-page .three-columns > .form-row:last-child:nth-child(odd) {
                grid-column: auto;
            }
        }

        @media (max-width: 767px), (min-width: 768px) and (max-width: 1000px) and (max-height: 600px) and (hover: none) and (pointer: coarse) {
            .app-settings-page .options-page-header {
                margin-bottom: var(--app-space-2);
            }

            .options-nav {
                display: flex;
                align-items: flex-start;
                max-width: 100%;
                margin-bottom: var(--app-space-3);
                overflow-x: auto;
                overflow-y: hidden;
                overscroll-behavior-inline: contain;
                scrollbar-width: thin;
                scroll-snap-type: x proximity;
                -webkit-overflow-scrolling: touch;
            }

            .options-nav-link,
            .options-nav-dropdown {
                flex: 0 0 auto;
                scroll-snap-align: start;
            }

            .options-nav-link,
            .options-nav-trigger {
                min-height: 44px;
                padding-inline: 13px;
            }

            .options-nav-dropdown.open {
                display: grid;
                gap: var(--app-space-1);
            }

            .options-nav-dropdown.open .options-nav-menu {
                position: static;
                display: grid;
                min-width: 180px;
                box-shadow: none;
            }

            .app-settings-page .mobile-options-extra {
                display: block;
            }

            .app-settings-page .app-settings-group {
                padding: var(--app-space-4);
            }

            .app-settings-page .app-settings-group + .app-settings-group {
                padding-top: var(--app-space-4);
            }

            .app-settings-page .app-settings-form input:not([type="checkbox"]):not([type="hidden"]),
            .app-settings-page .app-settings-form select {
                min-height: var(--app-control-height-touch);
                font-size: 16px;
            }

            .app-settings-page .app-settings-actions {
                margin: 0 var(--app-space-4);
                padding: var(--app-space-3) 0 var(--app-space-4);
            }

            .app-settings-page .app-settings-actions.app-settings-section-actions {
                align-items: stretch;
                flex-direction: column;
                margin: 18px 0 0;
                padding: 12px 0 0;
            }

            .app-settings-page .app-settings-actions .button,
            .app-settings-page .app-settings-actions .button-secondary {
                width: 100%;
                min-height: var(--app-control-height-touch);
            }

            .app-settings-page .form-error,
            .app-settings-page .form-success,
            .app-settings-page .form-warning {
                margin: var(--app-space-4) var(--app-space-4) 0;
            }

            .app-asset-preview {
                align-items: flex-start;
                flex-direction: column;
            }

            .app-module-control {
                grid-template-columns: 42px minmax(0, 1fr);
                min-height: 72px;
                padding: 13px 12px;
            }

            .app-module-state {
                grid-column: 2;
                justify-self: start;
                margin-top: -6px;
            }
        }

        @media (max-width: 1180px) {
            .company-branding-editor {
                grid-template-columns: minmax(0, 1fr);
            }

            .branding-live-preview {
                position: static;
                max-width: 560px;
                padding: 20px 0 0;
                border-top: 1px solid var(--app-border);
                border-left: 0;
            }

            .settings-list-layout {
                grid-template-columns: minmax(0, 1fr);
            }

            .settings-detail-panel {
                position: static;
            }
        }

        @media (max-width: 960px), (hover: none) and (pointer: coarse) {
            .app-settings-shell {
                grid-template-columns: minmax(0, 1fr);
                gap: 16px;
            }

            .app-settings-rail {
                display: none;
            }

            .app-settings-mobile-nav {
                display: block;
            }

            .app-settings-mobile-groups {
                display: grid;
                gap: 5px;
                padding-top: 8px;
            }

            .app-settings-mobile-group {
                overflow: hidden;
                border: 1px solid var(--app-border);
                border-radius: var(--app-radius-medium);
                background: var(--app-surface);
            }

            .app-settings-mobile-group > summary,
            .app-settings-mobile-direct {
                display: flex;
                align-items: center;
                min-height: 44px;
                padding: 8px 11px;
                color: var(--app-text-secondary);
                font-size: 13px;
                font-weight: 780;
                line-height: 1.3;
                text-decoration: none;
                cursor: pointer;
            }

            .app-settings-mobile-group > summary {
                justify-content: space-between;
                list-style: none;
            }

            .app-settings-mobile-group > summary::-webkit-details-marker {
                display: none;
            }

            .app-settings-mobile-group > summary::after {
                content: "+";
                color: var(--app-text-muted);
                font-size: 16px;
                font-weight: 500;
            }

            .app-settings-mobile-group[open] > summary::after {
                content: "−";
            }

            .app-settings-mobile-group[open] > summary,
            .app-settings-mobile-direct.is-active {
                background: var(--brand-blue-soft);
                color: var(--brand-blue-dark);
            }

            .app-settings-mobile-link {
                position: relative;
                display: flex;
                align-items: center;
                min-height: 44px;
                padding: 8px 12px 8px 20px;
                border-top: 1px solid var(--app-border);
                color: var(--app-text-secondary);
                font-size: 13px;
                font-weight: 650;
                text-decoration: none;
            }

            .app-settings-mobile-link.is-active,
            .app-settings-mobile-link[aria-current="page"] {
                color: var(--brand-blue-dark);
                font-weight: 800;
            }

            .app-settings-mobile-link.is-active::before,
            .app-settings-mobile-link[aria-current="page"]::before {
                content: "";
                position: absolute;
                top: 12px;
                bottom: 12px;
                left: 9px;
                width: 3px;
                border-radius: 999px;
                background: var(--brand-blue);
            }

            .app-settings-mobile-direct {
                border: 1px solid var(--app-border);
                border-radius: var(--app-radius-medium);
            }

            .company-settings-section,
            .company-branding-section > .company-settings-section-heading {
                grid-template-columns: minmax(0, 1fr);
                gap: 18px;
            }

            .company-settings-section-heading p {
                margin-left: 0;
            }

            .company-branding-section > .company-settings-section-heading p {
                margin-left: 0;
            }

            .company-data-actions {
                margin-top: 0 !important;
            }
        }

        @media (max-width: 620px) {
            .equipment-permissions-table {
                min-width: 0;
            }

            .equipment-permissions-table .equipment-permissions-secondary-column {
                display: none;
            }

            .equipment-permissions-table .settings-action-column {
                width: 52px;
            }

            .worktime-settings-card .two-columns,
            .holiday-crud-primary-fields,
            .holiday-crud-time-fields {
                grid-template-columns: minmax(0, 1fr);
            }

            .worker-order-column-heading {
                padding-right: 16px;
                padding-left: 64px;
            }

            .worker-order-row {
                padding-right: 16px;
                padding-left: 8px;
            }

            .worker-order-actions {
                padding-right: 16px !important;
                padding-left: 16px !important;
            }

            .company-settings-workspace {
                border-right: 0;
                border-left: 0;
                border-radius: 0;
                box-shadow: none;
            }

            .company-settings-section {
                padding: 22px 16px;
            }

            .branding-colour-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .branding-media-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .branding-library-row {
                grid-template-columns: minmax(0, 1fr);
            }

            .branding-delete-button,
            .branding-active-label {
                justify-self: start;
                margin-left: 30px;
            }

            .branding-upload-control {
                width: 36px;
            }

            .branding-preview-actions {
                align-items: flex-start;
                flex-direction: column;
            }

            .settings-list-card-heading {
                padding: 18px 16px 14px;
            }

            .settings-table-toolbar {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                align-items: stretch;
                padding: 12px 14px;
            }

            .settings-table-toolbar .holiday-year-filter {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
            }

            .settings-table-toolbar .form-row,
            .settings-table-toolbar select {
                width: 100%;
                min-width: 0;
            }

            .settings-toolbar-context {
                padding: 2px 0;
            }

            .settings-table-actions,
            .settings-table-actions .button {
                width: 100%;
            }

            .settings-table-scroll {
                overflow: visible;
            }

            .settings-data-table,
            .settings-data-table tbody {
                display: block;
                width: 100%;
            }

            .settings-data-table thead {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                clip-path: inset(50%);
                white-space: nowrap;
            }

            .settings-data-table tr {
                position: relative;
                display: block;
                padding: 10px 48px 10px 12px;
                border-bottom: 1px solid var(--app-border);
            }

            .settings-data-table tr:last-child {
                border-bottom: 0;
            }

            .settings-data-table td {
                display: grid;
                grid-template-columns: 86px minmax(0, 1fr);
                gap: 10px;
                width: auto;
                padding: 5px 0;
                border: 0;
                text-align: left;
            }

            .settings-data-table td::before {
                content: attr(data-label);
                color: var(--app-text-muted);
                font-size: 11px;
                font-weight: 700;
            }

            .settings-data-table .appointment-type-identity {
                grid-template-columns: 86px 28px minmax(0, 1fr);
                align-items: center;
            }

            .settings-data-table .app-row-actions {
                position: absolute;
                top: 10px;
                right: 8px;
                display: block;
                width: 38px;
                padding: 0;
            }

            .settings-data-table .app-row-actions::before {
                content: none;
            }

            .settings-import-modal-panel {
                width: calc(100vw - 16px);
                max-height: calc(100vh - 16px);
            }

            .settings-import-form {
                max-height: calc(100vh - 16px);
            }

            .settings-import-table-wrap {
                padding: 0 12px;
            }

            .settings-import-actions {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                padding: 12px;
            }

            .settings-crud-primary-fields {
                grid-template-columns: minmax(0, 1fr);
            }

            .holiday-detail-content {
                padding: 0 16px 16px;
            }

            .app-success-toast {
                top: 62px;
                right: 10px;
                width: calc(100vw - 20px);
            }
        }

        @media (min-width: 768px) and (max-width: 1180px) and (any-pointer: coarse) {
            .topbar-user-badge {
                height: 40px;
                max-width: 150px;
                padding: 0 10px;
                border-radius: 7px;
            }
        }

        @media (max-width: 767px) {
            .topbar-user-badge {
                height: 36px;
                max-width: 96px;
                padding: 0 8px;
            }
        }

        @media (max-width: 390px) {
            .topbar-user-badge {
                width: 36px;
                padding: 0;
                justify-content: center;
            }

            .topbar-user-badge span {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                clip-path: inset(50%);
                white-space: nowrap;
            }
        }

        .rapport-formular-table {
            width: max(100%, 820px);
        }

        .rapport-formular-table th:first-child,
        .rapport-formular-table td:first-child {
            width: 104px;
        }

        .rapport-formular-order {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--app-text-muted);
            font-variant-numeric: tabular-nums;
        }

        .rapport-formular-drag-handle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            min-width: 30px;
            height: 30px;
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
            cursor: grab;
            font: inherit;
            touch-action: manipulation;
        }

        .rapport-formular-drag-handle:active {
            cursor: grabbing;
        }

        .rapport-formular-table tr.is-dragging {
            opacity: 0.45;
        }

        .rapport-formular-edit-form {
            width: min(720px, 100%);
        }

        .rapport-formular-position-field {
            position: relative;
        }

        .rapport-submission-formular-card {
            display: flex;
            flex-direction: column;
            width: min(620px, calc(100vw - 24px));
            min-width: 0;
            max-width: calc(100vw - 24px);
            max-height: min(760px, calc(100vh - 28px));
            overflow: hidden;
        }

        .rapport-submission-formular-card .rapport-modal-header > div {
            min-width: 0;
        }

        .rapport-submission-formular-intro {
            margin: 0;
            color: var(--app-text-muted);
        }

        .rapport-submission-formular-list {
            display: grid;
            gap: 9px;
            min-height: 0;
            overflow-y: auto;
            padding: 2px 2px 4px;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .rapport-submission-question {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr);
            gap: 10px;
            padding: 12px;
            border: 1px solid var(--app-border);
            border-radius: 9px;
            background: var(--app-surface);
            cursor: pointer;
        }

        .rapport-submission-question:focus-within,
        .rapport-submission-question.is-selected {
            border-color: color-mix(in srgb, var(--app-primary) 55%, var(--app-border));
            background: color-mix(in srgb, var(--app-primary) 7%, white);
        }

        .rapport-submission-question > input[type="checkbox"] {
            width: 24px;
            height: 24px;
            margin: 1px 0 0;
        }

        .rapport-submission-question-copy {
            display: grid;
            gap: 4px;
            min-width: 0;
        }

        .rapport-submission-question-copy > label {
            cursor: pointer;
            overflow-wrap: anywhere;
        }

        .rapport-submission-question-copy small {
            color: var(--app-text-muted);
            overflow-wrap: anywhere;
        }

        .rapport-submission-quantity {
            display: grid;
            grid-template-columns: auto minmax(100px, 150px);
            align-items: center;
            gap: 10px;
            margin-top: 7px;
        }

        .rapport-submission-quantity input {
            min-height: 42px;
            font-size: 16px;
        }

        .rapport-submission-formular-actions {
            flex: 0 0 auto;
            margin-top: 2px;
        }

        @media (max-width: 600px) {
            .rapport-submission-quantity {
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-submission-formular-card {
                width: calc(100vw - 16px);
                max-width: calc(100vw - 16px);
                max-height: calc(100vh - 16px);
            }

            .rapport-submission-formular-actions {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
            }

            .rapport-submission-formular-actions .button,
            .rapport-submission-formular-actions .button-secondary {
                width: 100%;
                min-height: 46px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .app-success-toast,
            .app-success-toast.is-leaving {
                animation: none;
            }
        }
        .topbar .topbar-equipment-link { max-width: 155px; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; text-align: center; }

/* Live search results (static/js/app.js appInitLiveSearch) */
.live-search-results {
    transition: opacity 120ms ease;
}

.live-search-results.is-loading {
    opacity: 0.55;
}

.appointment-list-limit-note {
    margin: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--app-border, #e2e8f0);
}

        /* Shared list pagination (standard for new lists; first used by Rapportliste) */
        .app-pagination {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 10px 16px;
            padding: 10px 14px;
            border-top: 1px solid #e2e8f0;
        }

        .app-pagination-summary {
            color: #64748b;
            font-size: 13px;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        .app-pagination-links {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
        }

        .app-pagination-link {
            display: inline-grid;
            place-items: center;
            min-width: 34px;
            height: 34px;
            box-sizing: border-box;
            padding: 0 8px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            color: #334155;
            font-size: 13px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            text-decoration: none;
            transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
        }

        a.app-pagination-link:hover,
        a.app-pagination-link:focus-visible {
            border-color: var(--brand-blue-border);
            background: var(--brand-blue-soft);
            color: var(--brand-blue-dark);
            outline: none;
        }

        .app-pagination-link.is-current {
            border-color: var(--brand-blue);
            background: var(--brand-blue);
            color: #fff;
        }

        .app-pagination-link.is-disabled {
            color: #cbd5e1;
            background: #f8fafc;
        }

        .app-pagination-step {
            font-size: 18px;
            line-height: 1;
        }

        .app-pagination-gap {
            padding: 0 2px;
            color: #94a3b8;
        }

        @media (max-width: 640px) {
            .app-pagination {
                justify-content: center;
            }

            .app-pagination-link {
                min-width: 40px;
                height: 40px;
            }
        }

        /* Rapportliste: fixed column widths so tab switches do not shift columns. */
        .rapport-list-table {
            width: 100%;
            min-width: 960px;
            table-layout: fixed;
        }

        .rapport-list-table td {
            overflow-wrap: anywhere;
        }

        .rapport-list-col-date { width: 9%; }
        .rapport-list-col-status { width: 14%; }
        .rapport-list-col-workers { width: 22%; }
        .rapport-list-col-project { width: 28%; }
        .rapport-list-col-appointment { width: 10%; }
        .rapport-list-col-updated { width: 13%; }
        .rapport-list-col-actions { width: 4%; }

        .supplier-assistant-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }

        /* Neuer Katalog – Vorschau */
        .catalog-preview-page { width: 100%; min-width: 0; }
        .catalog-preview-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 12px 0; }
        .catalog-preview-intro h2 { margin: 1px 0 4px; font-size: 18px; color: #172033; }
        .catalog-preview-intro p { margin: 0; max-width: 760px; color: #5b6475; font-size: 13px; line-height: 1.5; }
        .catalog-preview-report { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 10px 14px; margin-bottom: 12px; border: 1px solid #cfe5d4; border-radius: 10px; background: #f1faf3; font-size: 13px; }
        .catalog-preview-anomalies { flex-basis: 100%; }
        .catalog-preview-anomalies ul { margin: 6px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; }
        .catalog-preview-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 0 0 12px; }
        .catalog-preview-stats div { padding: 10px 12px; border: 1px solid #e3e7ee; border-radius: 10px; background: #fff; }
        .catalog-preview-stats dt { color: #5b6475; font-size: 12px; }
        .catalog-preview-stats dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: #172033; }
        .catalog-preview-search input { width: 100%; max-width: 420px; margin-bottom: 12px; }
        .catalog-preview-section { margin-bottom: 10px; border: 1px solid #e3e7ee; border-radius: 10px; background: #fff; }
        .catalog-preview-section > summary { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; cursor: pointer; }
        .catalog-preview-category { padding: 4px 14px 10px; border-top: 1px solid #eef1f5; }
        .catalog-preview-category h3 { margin: 8px 0 6px; font-size: 14px; color: #172033; }
        .catalog-preview-products { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
        .catalog-preview-product-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 13px; }
        .catalog-preview-variants { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
        .catalog-preview-variant { padding: 1px 7px; border: 1px solid #dfe4ec; border-radius: 999px; font-size: 12px; color: #334; background: #f7f8fb; }
        .catalog-preview-variant.is-reduktion { border-color: #c9d8f2; background: #eef4ff; }
        .catalog-preview-variant.is-uebergang { border-color: #f0d9b5; background: #fff6e8; }
        .catalog-preview-variant.is-linked { box-shadow: inset 3px 0 0 #2e9b57; }
        .catalog-preview-tag { padding: 0 6px; border-radius: 6px; background: #eef1f5; color: #4a5263; font-size: 11px; font-weight: 600; }
        .catalog-preview-tag.is-billing { background: #fde9e4; color: #8a3b26; }
        .catalog-preview-code { font-size: 12px; color: #0878bd; font-weight: 700; }
        .catalog-preview-muted { color: #7a8394; font-size: 12px; }
        @media (max-width: 720px) {
            .catalog-preview-intro { flex-direction: column; }
        }
        .catalog-preview-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }

        /* Neuer Katalog – Editor */
        .catalog-editor-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
        .catalog-editor-nav a { padding: 6px 12px; border: 1px solid #dfe4ec; border-radius: 999px; color: #334; text-decoration: none; font-size: 13px; font-weight: 600; background: #fff; }
        .catalog-editor-nav a.is-active { border-color: #0878bd; color: #0878bd; background: #eef6fc; }
        .catalog-switch-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid #f0d9b5; border-radius: 10px; background: #fff9ef; font-size: 13px; }
        .catalog-switch-card p { margin: 4px 0 6px; color: #5b6475; max-width: 760px; line-height: 1.5; }
        .catalog-switch-card.is-active { border-color: #cfe5d4; background: #f1faf3; }
        .catalog-product-link { color: inherit; text-decoration: none; border-bottom: 1px dashed #9fb4c8; }
        .catalog-product-link:hover { color: #0878bd; }
        .catalog-add-link { margin-left: 6px; font-size: 12px; font-weight: 600; color: #0878bd; text-decoration: none; }
        .catalog-editor-form { margin-top: 4px; }
        .catalog-editor-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
        .catalog-editor-heading h2 { margin: 2px 0 0; font-size: 18px; }
        .catalog-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
        .catalog-editor-grid .form-row { margin: 0; }
        .catalog-editor-wide { grid-column: span 2; }
        .catalog-editor-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; white-space: nowrap; }
        .catalog-editor-variants { margin-top: 18px; }
        .catalog-editor-variants-head h3 { margin: 0; font-size: 15px; }
        .catalog-editor-variants-head p { margin: 2px 0 8px; }
        .catalog-editor-bulk { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
        .catalog-editor-bulk input { flex: 1 1 220px; }
        .catalog-editor-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .catalog-editor-table th { text-align: left; font-size: 12px; color: #5b6475; padding: 4px 6px; border-bottom: 1px solid #e3e7ee; }
        .catalog-editor-table td { padding: 4px 6px; border-bottom: 1px solid #f0f2f6; }
        .catalog-editor-table input[type="text"], .catalog-editor-table select { width: 100%; min-width: 70px; }
        .catalog-editor-actions { margin-top: 14px; }
        .catalog-editor-danger { margin-top: 10px; }
        .catalog-structure-section { padding: 8px 12px; }
        .catalog-structure-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; }
        .catalog-structure-row input[type="text"] { flex: 1 1 180px; }
        .catalog-structure-row.is-new { opacity: 0.9; }
        .catalog-structure-categories { padding-left: 18px; border-left: 2px solid #eef1f5; margin: 4px 0 4px 6px; }
        .catalog-input-short { flex: 0 0 90px !important; width: 90px; }
        .catalog-size-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
        .catalog-size-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border: 1px solid #dfe4ec; border-radius: 8px; background: #f7f8fb; }
        .catalog-size-chip input { width: 76px; border: 0; background: transparent; font-size: 12px; padding: 2px 4px; }
        .catalog-size-chip.is-inactive { opacity: 0.5; }
        .catalog-size-chip.is-new { border-style: dashed; }
        @media (max-width: 860px) {
            .catalog-editor-grid { grid-template-columns: minmax(0, 1fr); }
            .catalog-editor-wide { grid-column: auto; }
            .catalog-switch-card { flex-direction: column; align-items: stretch; }
        }
        .catalog-editor-page .catalog-editor-table thead th { background: transparent; color: #5b6475; font-weight: 600; }
        .catalog-editor-page .catalog-editor-check { justify-content: flex-start; }
        .catalog-editor-page .catalog-editor-check input { width: auto; margin: 0; }
        .catalog-editor-page .catalog-structure-row input,
        .catalog-editor-page .catalog-structure-row select { width: auto; min-width: 0; }
        .catalog-editor-page .catalog-structure-row input[type="text"] { flex: 1 1 200px; }
        .catalog-editor-page .catalog-structure-row select { flex: 0 1 auto; max-width: 220px; }
        .catalog-editor-page .catalog-size-chip .small-button { background: transparent; color: #4a5263; border: 0; padding: 0 5px; min-width: 0; min-height: 0; height: auto; box-shadow: none; }
        .catalog-editor-page .catalog-size-chip .small-button:hover { color: #0878bd; }
        .catalog-editor-page .catalog-editor-table .small-button { min-width: 28px; }
        .catalog-editor-page tr[hidden] { display: none; }
        .catalog-import-card { border-color: #dfe4ec; background: #fff; }

/* Rapport prices (Abrechnung | Aktuell), admin/planner */
.rapport-price-mode-tabs {
    margin-left: auto;
}

.rapport-price-mode-tabs [data-price-mode] {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 6px;
    color: #526174;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.rapport-price-mode-tabs [data-price-mode].active {
    background: #fff;
    color: var(--brand-blue-dark);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.rapport-price-mode-tabs [data-price-mode]:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

.rapport-price-mode-tabs [data-price-mode][aria-disabled="true"] {
    color: #a3adbb;
    cursor: not-allowed;
}

.rapport-material-overview-price.is-pending {
    color: #b45309;
    font-weight: 700;
}

.rapport-material-overview-price.is-empty {
    color: #94a3b8;
    font-weight: 600;
}

.rapport-material-overview-table.has-supplier-price {
    min-width: 1120px;
}

.rapport-material-overview-table tfoot td.rapport-price-total {
    width: auto;
    padding: 10px 12px;
    border-top: 1px solid #e1e7ef;
    background: #f7f9fc;
    color: #0f5f43;
    font-weight: 750;
    text-align: right;
}

@media (max-width: 760px) {
    .rapport-price-mode-tabs {
        margin-left: 0;
    }
}

/* Catalogue editor: supplier + prices per variant */
.catalog-price-source {
    display: grid;
    grid-template-columns: minmax(240px, 420px) minmax(200px, 300px);
    gap: 4px 16px;
    align-items: end;
    margin: 4px 0 12px;
}

.catalog-price-source .catalog-price-hint {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
}

.catalog-editor-table input.catalog-price-input {
    min-width: 76px;
    max-width: 110px;
}

.catalog-editor-table input.catalog-article-input {
    min-width: 104px;
    max-width: 140px;
}

.catalog-default-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed #d6dde8;
    border-radius: 8px;
    font-size: 13px;
}

.catalog-default-price label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.catalog-default-price input {
    width: 110px;
}

@media (max-width: 760px) {
    .catalog-price-source {
        grid-template-columns: 1fr;
    }
}

.catalog-price-source[hidden],
.catalog-default-price[hidden] {
    display: none;
}

.catalog-art-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 8px;
}

.catalog-art-filter a {
    padding: 6px 12px;
    border: 1px solid #dbe4ef;
    border-radius: 999px;
    background: #fff;
    color: #526174;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.catalog-art-filter a.is-active {
    border-color: var(--brand-blue);
    background: var(--brand-blue);
    color: #fff;
}

.catalog-art-filter .catalog-art-filter-extra {
    margin-left: auto;
    border-style: dashed;
}

.catalog-image-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin: 14px 0 6px;
    padding: 12px;
    border: 1px solid #e3e7ee;
    border-radius: 8px;
}

.catalog-image-editor[hidden] {
    display: none;
}

.catalog-image-preview {
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    background: #f7f9fc;
    overflow: hidden;
}

.catalog-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.catalog-image-fields {
    display: grid;
    gap: 6px;
    min-width: 220px;
    flex: 1 1 240px;
    font-size: 13px;
}

.catalog-image-fields p {
    margin: 0;
}

/* Catalogue editor: Vorschläge */
.catalog-suggestions {
    margin-top: 16px;
}

.catalog-suggestions-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.catalog-suggestions-head h3 {
    margin: 2px 0 4px;
}

.catalog-suggestion-list {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.catalog-suggestion-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #e3e7ee;
    border-radius: 8px;
}

.catalog-suggestion-row.is-inactive {
    opacity: 0.6;
}

.catalog-suggestion-row.is-unavailable {
    border-color: #f2c9a6;
}

.catalog-suggestion-main {
    display: grid;
    gap: 2px;
    font-size: 13px;
}

.catalog-suggestion-main span,
.catalog-suggestion-main small {
    color: #64748b;
}

.catalog-suggestion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.catalog-suggestion-actions form {
    margin: 0;
}

.catalog-suggestion-form {
    margin-top: 14px;
    padding: 12px;
    border: 1px dashed #d6dde8;
    border-radius: 8px;
}

.catalog-suggestion-form h4 {
    margin: 0 0 10px;
}

.catalog-suggestion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
    align-items: end;
}

.catalog-suggestion-grid .catalog-suggestion-wide {
    grid-column: 1 / -1;
}

.catalog-suggestion-grid [hidden] {
    display: none;
}

@media (max-width: 760px) {
    .catalog-suggestion-row {
        grid-template-columns: 1fr;
    }
}

.catalog-picker {
    display: grid;
    gap: 8px;
}

.catalog-picker-selected {
    padding: 8px 10px;
    border-radius: 8px;
    background: #eef6fd;
    color: var(--brand-blue-dark);
    font-weight: 700;
    font-size: 13px;
}

.catalog-picker-selected.is-empty {
    background: #f7f9fc;
    color: #94a3b8;
    font-weight: 600;
}

.catalog-picker-results {
    max-height: 320px;
    overflow: auto;
}

.catalog-picker-results .catalog-picker-option {
    grid-template-columns: 52px minmax(0, 1fr);
    height: auto;
    min-height: 64px;
}

.catalog-picker-results .catalog-picker-option .rapport-material-picker-thumb,
.catalog-picker-results .catalog-picker-option .rapport-material-picker-thumb-placeholder {
    width: 46px;
    height: 46px;
}

.catalog-picker-results .catalog-picker-option[aria-pressed="true"] {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px rgba(15, 111, 184, 0.18);
    background: #f2f8fe;
}

/* Sets */
.catalog-set-link {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-blue);
    white-space: nowrap;
}

button.catalog-set-button {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.catalog-set-link.is-set {
    margin-left: 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef6fd;
    text-decoration: none;
}

.catalog-set-total {
    margin: 4px 0 10px;
    color: #0f5f43;
}

.catalog-set-table input.catalog-quantity-input {
    max-width: 72px;
    min-width: 60px;
}

.catalog-set-description {
    display: block;
    max-width: 220px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-set-table tr[hidden] {
    display: none;
}

.catalog-set-new-supplier {
    display: block;
    margin-top: 4px;
    min-width: 140px;
}

.catalog-set-new-supplier[hidden] {
    display: none;
}

/* Debrunner-Varianten */
.catalog-dv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 16px;
    margin: 6px 0 10px;
}

.catalog-dv-toolbar .form-row {
    min-width: 200px;
}

.catalog-dv-image {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.catalog-dv-image img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border: 1px solid #e3e7ee;
    border-radius: 6px;
    background: #fff;
}

.catalog-dv-table td {
    vertical-align: top;
}

.catalog-dv-table tr.is-linked {
    background: #f4fbf7;
}

.catalog-dv-table tr[hidden] {
    display: none;
}

.catalog-dv-attributes {
    display: block;
    max-width: 420px;
    color: #64748b;
    font-size: 12px;
}

.catalog-dv-price {
    white-space: nowrap;
    color: #0f5f43;
    font-weight: 700;
}

/* ===== Catalogue (new) – product list ===== */
.catalog-page .catalog-list-card {
    margin-top: 4px;
}

.catalog-list-toolbar {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.catalog-list-filters,
.catalog-list-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.catalog-list-actions {
    margin-left: auto;
}

.catalog-list-search {
    width: min(380px, 100%);
}

.catalog-list-summary {
    color: #64748b;
    font-size: 12.5px;
    font-weight: 650;
}

.catalog-segmented {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
}

.catalog-segmented a {
    padding: 7px 12px;
    border-radius: 6px;
    color: #526174;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.catalog-segmented a.is-active {
    background: #eef6ff;
    color: var(--brand-blue-dark);
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.catalog-list-card [data-catalog-list-empty][hidden] {
    display: none;
}

.catalog-thumb-empty svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.catalog-number-cell {
    color: #334155;
    font-size: 12.5px;
    white-space: nowrap;
}

.catalog-list-table .catalog-list-thumb-col {
    width: 56px;
}

.catalog-list-table .article-thumb,
.catalog-thumb-empty {
    width: 40px;
    height: 40px;
    border-radius: 6px;
}

.catalog-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe4ef;
    background: #f8fafc;
    color: #94a3b8;
    font-weight: 800;
}

.catalog-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.catalog-category-head .item-category-toggle {
    width: auto;
    flex: 1 1 auto;
    padding-left: 18px;
}

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

.catalog-product-row td:first-child {
    padding-left: 26px;
}

.catalog-product-row:hover td {
    background: #f4f8fd;
}

.catalog-product-row.is-inactive td {
    opacity: 0.62;
}

.catalog-list-table .catalog-row-go {
    width: 32px;
    text-align: center;
    color: #94a3b8;
    font-size: 1.15rem;
}

.catalog-product-row:hover .catalog-row-go {
    color: #0b6fb8;
}

.catalog-product-row.is-just-saved td {
    background: #e8f6ee;
    transition: background 0.6s ease;
}

.catalog-product-row.is-search-hit td {
    background: #fffdf3;
}

.catalog-product-cell {
    display: grid;
    gap: 3px;
}

.catalog-product-cell a {
    color: #0f172a;
    text-decoration: none;
}

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

.catalog-product-cell small {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.catalog-variant-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 360px;
    overflow: hidden;
    color: #334155;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef2f7;
    color: #334155;
    font-size: 11.5px;
    font-weight: 800;
}

.catalog-link-state {
    font-size: 12.5px;
    font-weight: 750;
    white-space: nowrap;
}

.catalog-link-state.is-complete { color: #15803d; }
.catalog-link-state.is-partial { color: #b45309; }
.catalog-link-state.is-none { color: #94a3b8; font-weight: 650; }

@media (max-width: 760px) {
    .catalog-list-actions {
        margin-left: 0;
    }

    .catalog-list-search {
        width: 100%;
    }
}

/* ===== Catalogue (new) – product editor ===== */
.catalog-product-shell {
    padding: 16px;
}

.catalog-product-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.catalog-product-header h3 {
    margin: 4px 0 0;
    font-size: 20px;
}

.catalog-product-header .article-crud-breadcrumb span {
    color: #64748b;
}

.catalog-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
}

.article-crud-tabs button.active-tab .catalog-tab-count {
    background: #dbeafe;
    color: var(--brand-blue-dark);
}

.catalog-section-heading-actions {
    align-items: center;
}

.catalog-section-heading-actions > div {
    display: grid;
    gap: 3px;
}

.catalog-section-heading-actions p {
    text-align: left;
}

.catalog-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: start;
}

.catalog-overview-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: start;
}

.catalog-overview-fields .form-row {
    margin: 0;
}

.catalog-overview-fields .form-row[hidden] {
    display: none;
}

.catalog-overview-fields .catalog-field-wide {
    grid-column: 1 / -1;
}

.catalog-field-hint {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
}

.catalog-active-toggle {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
}

.catalog-image-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    background: #fff;
}

.catalog-image-card[hidden] {
    display: none;
}

.catalog-image-card-title {
    color: #334155;
    font-size: 12.5px;
    font-weight: 800;
}

.catalog-image-drop {
    display: grid;
    place-items: center;
    height: 190px;
    border: 1.5px dashed #b8c7da;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    overflow: hidden;
}

.catalog-image-drop:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.catalog-image-drop img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.catalog-image-drop img[hidden],
.catalog-image-drop span[hidden] {
    display: none;
}

.catalog-image-url {
    display: grid;
    gap: 4px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.catalog-product-shell .catalog-price-source {
    padding: 12px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
}

.catalog-product-shell .catalog-price-hint {
    color: #64748b;
}

.catalog-product-shell .catalog-editor-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.catalog-product-shell .catalog-editor-bulk select {
    width: auto;
    min-width: 130px;
}

.catalog-product-shell .catalog-editor-bulk input {
    flex: 1 1 260px;
}

.catalog-variant-scroll {
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
}

.catalog-variant-table {
    width: 100%;
    margin: 0;
}

.catalog-variant-table th {
    padding: 9px 8px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.catalog-variant-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

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

.catalog-variant-table select {
    min-width: 92px;
}

.catalog-variant-table input[type="text"] {
    min-width: 64px;
}

.catalog-variant-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-blue);
}

.catalog-variant-table .small-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #dbe4ef;
    background: #fff;
    color: #64748b;
}

.catalog-variant-table .small-button:hover {
    border-color: #fca5a5;
    color: #b91c1c;
}

.catalog-variant-empty {
    margin: 0;
    padding: 14px 12px;
    color: #64748b;
    font-size: 13px;
}

.catalog-variant-empty[hidden] {
    display: none;
}

.catalog-product-shell .catalog-suggestions {
    display: grid;
    gap: 12px;
}

.catalog-product-actions[hidden] {
    display: none;
}

@media (max-width: 900px) {
    .catalog-overview-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .catalog-overview-fields {
        grid-template-columns: 1fr;
    }
}

.article-crud-shell.catalog-product-shell {
    width: 100%;
    max-width: 1180px;
}

.catalog-variant-table td,
.catalog-variant-table th {
    padding-left: 5px;
    padding-right: 5px;
}

.catalog-variant-table select {
    width: 104px;
    min-width: 0;
}

.catalog-variant-table input[data-catalog-value] {
    width: 78px;
    min-width: 0;
}

.catalog-variant-table input[name$="-npk_number"] {
    width: 100px;
    min-width: 0;
}

.catalog-editor-table.catalog-variant-table input.catalog-article-input {
    width: 112px;
    min-width: 0;
    max-width: none;
}

.catalog-editor-table.catalog-variant-table input.catalog-price-input:not(.catalog-article-input) {
    width: 78px;
    min-width: 0;
}

.catalog-variant-table td:has(.catalog-article-input) {
    white-space: nowrap;
}

.catalog-variant-table .catalog-set-link {
    margin-left: 4px;
    vertical-align: middle;
}

/* ===== Catalogue (new) – structure / systems ===== */
.catalog-structure-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.catalog-structure-indent {
    display: inline-block;
    padding-left: 22px;
    font-weight: 650;
}

.catalog-structure-table tr.is-inactive td {
    opacity: 0.6;
}

.catalog-structure-table .item-group-row td {
    font-size: 14px;
}

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

.app-modal-form [data-catalog-new-only][hidden] {
    display: none;
}

.catalog-systems-table td {
    vertical-align: top;
}

.catalog-systems-table tr.is-inactive td {
    opacity: 0.6;
}

.catalog-system-name {
    display: grid;
    gap: 2px;
    min-width: 120px;
}

.catalog-size-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 760px;
}

.catalog-size-chip {
    display: inline-flex;
    align-items: center;
    margin: 0;
    border: 1px solid #dbe4ef;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

.catalog-size-chip input[type="text"] {
    width: auto;
    min-width: 0;
    height: 28px;
    min-height: 28px;
    padding: 0 4px 0 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #1f2937;
    font-size: 12.5px;
    font-weight: 700;
}

.catalog-size-chip input[type="text"]:focus {
    outline: none;
    background: #eef6ff;
}

.catalog-size-chip:focus-within {
    border-color: var(--brand-blue);
}

.catalog-size-chip-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.catalog-size-chip-action:hover {
    color: #b91c1c;
}

.catalog-size-chip.is-inactive {
    border-style: dashed;
    background: #f8fafc;
}

.catalog-size-chip.is-inactive input[type="text"] {
    color: #94a3b8;
    text-decoration: line-through;
}

.catalog-size-chip.is-inactive .catalog-size-chip-action:hover,
.catalog-size-chip.is-new .catalog-size-chip-action:hover {
    color: var(--brand-blue);
}

.catalog-size-chip.is-new {
    border-style: dashed;
    border-color: #b8c7da;
}

.catalog-size-chip.is-new input[type="text"] {
    font-weight: 600;
}

.catalog-structure-table .item-group-row td + td {
    border-left: 0;
}

.catalog-structure-table a {
    color: var(--brand-blue);
    font-weight: 700;
    text-decoration: none;
}

.catalog-list-toolbar .catalog-list-summary {
    max-width: 820px;
    font-weight: 500;
    line-height: 1.4;
}

.catalog-size-chip input[type="text"] {
    field-sizing: content;
    min-width: 2ch;
    max-width: 14ch;
}

/* ===== Catalogue (new) – prices ===== */
.catalog-page .catalog-list-card + .catalog-list-card {
    margin-top: 14px;
}

.catalog-prices-intro {
    display: grid;
    gap: 4px;
}

.catalog-prices-intro h2,
.catalog-card-title {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
}

.catalog-card-title small {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
}

.catalog-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 14px 18px 18px;
}

.catalog-kpi {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
}

.catalog-kpi span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.catalog-kpi strong {
    color: #0f172a;
    font-size: 22px;
    line-height: 1.2;
}

.catalog-kpi small {
    color: #64748b;
    font-size: 11.5px;
}

.catalog-kpi.is-warning { border-left-color: #f59e0b; }
.catalog-kpi.is-pending { border-left-color: var(--brand-blue); }
.catalog-kpi.is-error { border-left-color: #dc2626; }

.catalog-status-error > span {
    background: #dc2626 !important;
}

.catalog-prices-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.catalog-prices-lists .catalog-list-card + .catalog-list-card {
    margin-top: 0;
}

.catalog-dv-hint {
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
}

.catalog-product-actions [data-dv-count] {
    font-size: 12.5px;
    font-weight: 700;
}

.catalog-set-table td {
    white-space: nowrap;
}

.catalog-set-table input[name$="-note"] {
    width: 200px;
}

/* r42: hidden status boxes must stay hidden (the Formular reorder status showed an empty red box). */
.form-error[hidden],
.form-warning[hidden] {
    display: none !important;
}

.catalog-formular-head {
    display: grid;
    gap: 4px;
    margin: 4px 0 14px;
}

.catalog-formular-head h2 {
    margin: 0;
    font-size: 1.25rem;
}

.catalog-formular-head p {
    margin: 0;
    font-size: 13px;
}

.catalog-back-link {
    justify-self: start;
    color: #0f6fb8;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.catalog-back-link:hover {
    text-decoration: underline;
}

/* r43: Projektkosten (Rapport-Zusammenfassung › Kosten) */
.project-costs {
    display: grid;
    gap: 16px;
    margin-top: 12px;
}

.project-costs-toolbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.project-costs-intro {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 320px;
}

.project-costs-intro h2 {
    margin: 0;
    font-size: 1.05rem;
}

.project-costs-intro .muted,
.project-costs-note {
    font-size: 13px;
}

.project-costs-note {
    margin: 8px 14px 12px;
}

.project-costs-empty {
    margin: 14px;
}

.project-costs-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.project-costs-total strong {
    color: #0b5d9c;
}

.project-costs-link {
    padding: 0;
    border: 0;
    background: none;
    color: #0f6fb8;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.project-costs-table .is-number {
    text-align: right;
    white-space: nowrap;
}

.project-costs-table tfoot td {
    border-top: 2px solid #dbe4ef;
    background: #f8fafc;
}

.project-costs-flag {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff7ed;
    color: #b45309;
    font-size: 11px;
    font-weight: 800;
}

.project-costs-missing {
    border-color: #fed7aa;
}

.project-costs-scope a {
    text-decoration: none;
}

@media (max-width: 1100px) {
    .project-costs-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .project-costs-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* r44: Ganztägig – Zeitfelder grau/blockiert */
.appointment-time-row.is-all-day input[type="time"] {
    background: #eef2f6;
    border-color: #dbe3ec;
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
}

.appointment-time-row.is-all-day label {
    color: #94a3b8;
}

/* r44: Topbar rechts – einheitliche Höhe/Abstände, Abmelden abgesetzt */
.topbar-actions {
    --topbar-control-height: 32px;
    gap: 8px;
}

.topbar-actions .version-badge,
.topbar-actions .topbar-user-badge,
.topbar-actions .topbar-icon-button,
.topbar-actions .topbar-icon-link {
    height: var(--topbar-control-height);
    box-sizing: border-box;
}

.topbar-actions .topbar-icon-button,
.topbar-actions .topbar-icon-link {
    width: var(--topbar-control-height);
    flex: 0 0 var(--topbar-control-height);
}

.topbar-actions .version-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    text-decoration: none;
}

a.version-badge:hover,
a.version-badge:focus-visible {
    border-color: white;
    background: rgba(255, 255, 255, 0.22);
}

.topbar-actions .logout-form {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

@media (any-pointer: coarse) and (min-width: 768px) {
    .topbar-actions {
        --topbar-control-height: 40px;
        gap: 10px;
    }

    .topbar-actions .logout-form {
        margin-left: 8px;
        padding-left: 16px;
    }
}

@media (max-width: 767px) {
    .topbar-actions {
        --topbar-control-height: 36px;
        gap: 6px;
    }

    .topbar-actions .logout-form {
        margin-left: 4px;
        padding-left: 10px;
    }
}

.app-version-card {
    padding: 6px 0;
}

.app-version-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-version-entry {
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.app-version-entry:last-child {
    border-bottom: 0;
}

.app-version-entry.is-current {
    background: #f4f9fe;
}

.app-version-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.app-version-head span {
    color: #64748b;
    font-size: 13px;
}

.app-version-entry ul {
    margin: 6px 0 0;
    padding-left: 20px;
    color: #334155;
    font-size: 14px;
}

.app-version-empty {
    margin: 14px 18px;
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1000px) and (max-height: 600px) and (hover: none) and (pointer: coarse) {
    .topbar-actions .version-badge {
        display: none;
    }
}

/* r45: Bereich-Auswahl – Kopf und Fusszeile fix, nur die Liste scrollt */
.rapport-modal-card.rapport-section-selector-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: min(780px, calc(100dvh - 36px));
}

.rapport-section-selector-card > * {
    flex: 0 0 auto;
}

.rapport-section-selector-card > .rapport-section-selector-list {
    flex: 1 1 auto;
    min-height: 54px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
}

.rapport-section-selector-card > .rapport-modal-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.rapport-section-selector-option {
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
}

.rapport-section-selector-check:empty {
    display: none;
}

.rapport-section-selector-check {
    padding: 2px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 800;
}

.rapport-section-selector-option.has-lines svg {
    color: #15803d;
}

input.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

/* r45: Rapport-Zusammenfassung – Bereiche zugeklappt, Klick öffnet */
.rapport-summary-area-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.rapport-summary-area-toolbar .rapport-summary-section-worker-note {
    flex: 1 1 auto;
    margin: 0;
}

.rapport-summary-area-toolbar .button-small {
    flex: 0 0 auto;
    white-space: nowrap;
}

summary.rapport-summary-area-heading {
    cursor: pointer;
    list-style: none;
    border-bottom: 0;
}

summary.rapport-summary-area-heading::-webkit-details-marker {
    display: none;
}

summary.rapport-summary-area-heading:hover {
    background: #eef6fd;
}

summary.rapport-summary-area-heading:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: -2px;
}

.rapport-summary-area-card[open] > summary.rapport-summary-area-heading {
    border-bottom: 1px solid #e1e7ef;
}

.rapport-summary-area-count {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.rapport-summary-area-count > span + span::before {
    content: "·";
    margin-right: 6px;
    color: #94a3b8;
}

.rapport-summary-area-chevron {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #64748b;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}

.rapport-summary-area-card[open] .rapport-summary-area-chevron {
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .rapport-summary-area-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* r45: "Was ist neu" – aktuelle Version offen, ältere zugeklappt */
.app-version-entry {
    padding: 0;
}

summary.app-version-head {
    align-items: center;
    padding: 12px 18px;
    cursor: pointer;
    list-style: none;
}

summary.app-version-head::-webkit-details-marker {
    display: none;
}

summary.app-version-head:hover {
    background: #f8fafc;
}

.app-version-entry ul {
    margin: 0;
    padding: 0 18px 14px 38px;
}

.app-version-current-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.app-version-chevron {
    width: 18px;
    height: 18px;
    margin-left: auto;
    fill: none;
    stroke: #64748b;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}

.app-version-entry[open] .app-version-chevron {
    transform: rotate(180deg);
}

.app-version-footnote {
    margin: 10px 18px 6px;
    font-size: 12px;
}

#rapport-section-selector-continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 480px) {
    .rapport-section-selector-option.has-lines .rapport-section-selector-badge {
        display: none;
    }
}

/* r45: Doppelte Positionen – Löschen-Knopf neben der Position statt abgeschnitten darunter */
.rapport-service-duplicate-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
}

.rapport-service-duplicate-row > .delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    justify-self: end;
    cursor: pointer;
}

.rapport-service-duplicate-row > .delete-button:hover,
.rapport-service-duplicate-row > .delete-button:focus-visible {
    border-color: #dc2626;
    background: #fef2f2;
}

.rapport-service-duplicate-row > .delete-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rapport-service-duplicate-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .rapport-service-duplicate-row > .delete-button span {
        display: none;
    }
}

.rapport-summary-area-card.is-empty > summary.rapport-summary-area-heading {
    background: #fff;
}

.rapport-summary-area-card.is-empty .rapport-summary-area-title h2 {
    color: #64748b;
    font-weight: 600;
}

/* r46: Abrechnungsvorschläge – Auswahl und "Alle hinzufügen" */
.rapport-billing-suggestion-card {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.rapport-billing-suggestion-item.has-select {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.rapport-billing-suggestion-select {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
}

.rapport-billing-suggestion-body {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.rapport-billing-suggestion-body > strong {
    color: #312e81;
    font-size: 14px;
}

.rapport-billing-suggestion-body > span,
.rapport-billing-suggestion-body > small {
    color: #5b6473;
    font-size: 12px;
}

.rapport-billing-suggestion-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.rapport-billing-suggestion-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.rapport-billing-suggestion-select-all input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.rapport-billing-suggestion-bulk-note {
    flex: 1 0 100%;
    color: #92400e;
    font-size: 12px;
}

.rapport-billing-suggestion-bulk > button,
.rapport-service-duplicate-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}

/* r46: Doppelte Positionen – alle Knöpfe gleich gross */
.rapport-service-duplicate-actions {
    display: flex;
    gap: 8px;
}

.rapport-service-duplicate-actions > .button-danger {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.rapport-service-duplicate-actions > .button-danger:not(:disabled):hover {
    border-color: #dc2626;
    background: #fee2e2;
}

@media (max-width: 640px) {
    .rapport-billing-suggestion-bulk > button,
    .rapport-service-duplicate-actions > button {
        flex: 1 1 100%;
        min-width: 0;
    }

    .rapport-service-duplicate-selection {
        flex: 1 1 100%;
    }
}

/* r46: Zeiten koppeln */
.rapport-worker-couple {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 10px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.rapport-worker-couple[hidden] {
    display: none;
}

.rapport-worker-couple input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rapport-worker-couple-switch {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.15s ease;
}

.rapport-worker-couple-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
    transition: transform 0.15s ease;
}

.rapport-worker-couple input:checked + .rapport-worker-couple-switch {
    background: var(--brand-blue, #0f6fb8);
}

.rapport-worker-couple input:checked + .rapport-worker-couple-switch::after {
    transform: translateX(16px);
}

.rapport-worker-couple input:focus-visible + .rapport-worker-couple-switch {
    outline: 2px solid var(--brand-blue, #0f6fb8);
    outline-offset: 2px;
}

.rapport-worker-couple input:disabled + .rapport-worker-couple-switch {
    opacity: 0.5;
}

/* r46: Zeitauswahl in 15-Minuten-Schritten */
input[type="time"]:not([data-time-free]) {
    cursor: pointer;
}

input[type="time"]:not([data-time-free])::-webkit-calendar-picker-indicator {
    display: none;
}

.app-time-picker {
    position: fixed;
    z-index: 5000;
    width: 300px;
    padding: 12px;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
    box-sizing: border-box;
}

.app-time-picker.is-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
}

.app-time-picker-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.app-time-picker-head strong {
    color: #172033;
    font-size: 15px;
}

.app-time-picker-head span {
    color: #64748b;
    font-size: 12px;
}

.app-time-picker-close {
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.app-time-picker-hours {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
}

.app-time-picker-minutes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

.app-time-picker-hours button,
.app-time-picker-minutes button {
    height: 36px;
    min-width: 0;
    padding: 0;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.app-time-picker-minutes button {
    height: 42px;
    font-weight: 700;
}

.app-time-picker.is-sheet .app-time-picker-hours button {
    height: 42px;
}

.app-time-picker-hours button:hover,
.app-time-picker-minutes button:not(:disabled):hover {
    border-color: var(--brand-blue, #0f6fb8);
    background: #eef7ff;
}

.app-time-picker-hours button.is-active,
.app-time-picker-minutes button.is-active {
    border-color: var(--brand-blue, #0f6fb8);
    background: var(--brand-blue, #0f6fb8);
    color: #fff;
}

.app-time-picker-minutes button:disabled {
    color: #94a3b8;
    background: #f8fafc;
    cursor: default;
}

.app-time-picker-clear {
    width: 100%;
    height: 36px;
    margin-top: 10px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.rapport-billing-suggestion-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #ddd6fe;
    border-radius: 9px;
    background: #faf9ff;
    color: #312e81;
    font-size: 13px;
    font-weight: 600;
}

.rapport-billing-suggestion-banner > span:nth-child(2) {
    flex: 1 1 auto;
}

.rapport-billing-suggestion-banner-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rapport-worker-couple {
    white-space: nowrap;
}

.rapport-worker-couple-switch {
    flex: 0 0 38px;
}

@media (max-width: 640px) {
    #rapport-panel-workers .rapport-panel-heading {
        flex-wrap: wrap;
    }

    #rapport-panel-workers .rapport-worker-couple {
        order: 3;
        flex: 1 1 100%;
        margin: 4px 0 0;
    }
}

/* r47: Skizze – schnelles Tippen auf +/− (Strichbreite) zoomt die Seite nicht mehr (iPad Doppeltipp-Zoom) */
.rapport-sketch-modal,
.rapport-sketch-modal button,
.rapport-sketch-modal input,
.rapport-sketch-stepper {
    touch-action: manipulation;
}

.rapport-sketch-modal button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.rapport-sketch-stepper input[type="number"] {
    font-size: 16px;
}

/* r48: Vorschläge mit mehreren Varianten (eine davon wählen) */
.rapport-linked-suggestion:has(.rapport-linked-suggestion-actions.has-options) {
    grid-template-columns: 42px minmax(0, 1fr);
}

.rapport-linked-suggestion-actions.has-options {
    grid-column: 2;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.catalog-duplicate-warning {
    margin-bottom: 12px;
}

/* r48: Bereich im Rapport umbenennen */
.rapport-section-selector-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: stretch;
}

.rapport-section-selector-row > .rapport-section-selector-option {
    grid-column: 1;
}

.rapport-section-selector-row:not(:has(.rapport-section-selector-rename)) > .rapport-section-selector-option {
    grid-column: 1 / -1;
}

.rapport-section-selector-rename {
    width: 44px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    cursor: pointer;
}

.rapport-section-selector-rename:hover,
.rapport-section-selector-rename:focus-visible {
    border-color: #0f6fb8;
    color: #0f6fb8;
    outline: none;
}

.rapport-section-selector-rename svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rapport-section-selector-row.is-renaming {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    min-height: 52px;
}

.rapport-section-selector-row.is-renaming input {
    min-height: 44px;
    font-size: 16px;
}

.rapport-section-selector-row.is-renaming .rapport-inline-icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
}

/* r48: Dimension-Vorschlag (ein Tipp) */
.rapport-dimension-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    min-height: 34px;
    margin-top: 6px;
    padding: 4px 12px;
    border: 1px dashed #0f6fb8;
    border-radius: 999px;
    background: #eef7ff;
    color: #0f4c81;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    touch-action: manipulation;
}

.rapport-dimension-hint:hover,
.rapport-dimension-hint:focus-visible {
    background: #dbeefe;
    outline: none;
}

.rapport-dimension-hint span {
    color: #475569;
    font-size: 12px;
}

/* r50: Papierkorb */
.trash-detail {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.trash-kind {
    white-space: nowrap;
}

.trash-table td {
    vertical-align: top;
}

.trash-intro {
    margin: -6px 0 14px;
    font-size: 14px;
}

@media (max-width: 640px) {
    .trash-table thead {
        display: none;
    }

    .trash-table,
    .trash-table tbody,
    .trash-table tr,
    .trash-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .trash-table tr {
        padding: 10px 12px;
        border-bottom: 1px solid #e2e8f0;
    }

    .trash-table td {
        padding: 3px 0;
        border: 0;
    }

    .trash-table td[data-label="Gelöscht"],
    .trash-table td[data-label="Endgültig weg"] {
        color: #475569;
        font-size: 13px;
    }

    .trash-table td[data-label="Endgültig weg"]::before {
        content: "Endgültig weg: ";
    }

    .trash-table td.row-actions {
        padding-top: 8px;
        text-align: left;
    }

    .trash-table td.row-actions .button-small {
        width: 100%;
        min-height: 40px;
    }
}

/* r53: Rapport date fixed by the linked Termin */
#date.is-termin-locked {
    background: #f1f4f8;
    color: #4b5563;
    cursor: not-allowed;
}

.rapport-date-lock-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.rapport-linked-suggestion-why {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #8a5a00;
}

/* r53: Inhalt (unit conversion) next to the article number */
.catalog-variant-table .catalog-content-input {
    width: 58px;
    margin-left: 4px;
}

.catalog-default-price .catalog-content-input {
    width: 64px;
}

/* r53: Standort in the Termin form */
.appointment-site-input {
    display: flex;
    gap: 8px;
    align-items: center;
}

.appointment-site-input input {
    flex: 1 1 auto;
    min-width: 0;
}

.appointment-site-map {
    flex: 0 0 auto;
    white-space: nowrap;
}

.appointment-site-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 6px;
    font-size: 13px;
}

.appointment-site-scope label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-weight: 500;
}

.appointment-site-hint {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
}

.appointment-details-site-map {
    margin-left: 8px;
    font-weight: 700;
}

.appointment-site-row .appointment-site-scope input[type="radio"] {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 16px !important;
    box-shadow: none;
}

.appointment-site-scope label {
    white-space: normal;
}

.rapport-linked-suggestion-source {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #374151;
    font-weight: 600;
}

/* r54: Set price - hover / tap shows the parts */
.rapport-set-price {
    position: relative;
    display: inline-block;
}

.rapport-set-price-trigger {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

.rapport-set-price-popover {
    position: fixed;
    z-index: 1200;
    top: 0;
    left: 0;
    display: none;
    width: max-content;
    max-width: 420px;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid #d6e2ee;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 35, 60, 0.18);
    color: #1f2937;
    font-weight: 400;
    text-align: left;
    white-space: normal;
}

/* a small bridge so the pointer can move from the price into the popover */
.rapport-set-price-popover::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.rapport-set-price:hover .rapport-set-price-popover,
.rapport-set-price:focus-within .rapport-set-price-popover,
.rapport-set-price.is-open .rapport-set-price-popover {
    display: block;
}

.rapport-set-price-popover strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

.rapport-set-price-part {
    display: block;
    padding: 4px 0;
    border-top: 1px solid #eef2f6;
    font-size: 12px;
}

.rapport-set-price-part-name {
    display: block;
    font-weight: 600;
}

a.rapport-set-price-part-name {
    color: var(--brand-blue);
}

.rapport-set-price-part-math {
    display: block;
    color: #4b5563;
}

.rapport-set-price-sum {
    display: block;
    padding-top: 6px;
    border-top: 1px solid #d6e2ee;
    font-size: 12px;
    font-weight: 700;
}

.appointment-site-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.appointment-site-actions [hidden] {
    display: none !important;
}

/* r55: Standort pin next to the note button on Termin cards */
.appointment-site-indicator {
    text-decoration: none;
}

.daily-appointment > .appointment-site-indicator,
.weekly-appointment-block > .appointment-site-indicator {
    position: absolute;
    top: 2px;
    right: 24px;
    z-index: 7;
}

.weekly-appointment-block > .appointment-site-indicator {
    top: 1px;
    right: 22px;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
}

.daily-appointment > .appointment-note-indicator ~ .appointment-site-indicator {
    right: 46px;
}

.weekly-appointment-block > .appointment-note-indicator ~ .appointment-site-indicator {
    right: 42px;
}

.mobile-agenda-card > .appointment-site-indicator {
    position: absolute;
    top: 14px;
    right: 47px;
    z-index: 7;
}

.mobile-agenda-card > .appointment-note-indicator ~ .appointment-site-indicator {
    right: 71px;
}

.appointment-list-site {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 8;
}

.appointment-list-note ~ .appointment-list-site {
    right: 32px;
}

/* ===== r55/r56: Projekt-Übersicht / Projektmappe ===== */
/* r56: built from the shared components (page-tabs, company-settings-section cards,
   form-row, button / button-secondary, project-picker). No intro texts under titles. */
.project-hub-page {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 4px 0 32px;
}

/* Same field look as the Options pages (.app-settings-page .app-settings-form),
   plus textareas, which had no shared style. */
.project-hub-page .form-row > label,
.address-book-toolbar .form-row > label {
    margin-bottom: 6px;
    color: var(--app-text-secondary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.project-hub-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.address-book-toolbar :where(input, select),
.app-settings-page .app-settings-form textarea {
    width: 100%;
    min-width: 0;
    min-height: var(--app-control-height);
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-small);
    background: var(--app-surface);
    color: var(--app-text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.project-hub-page :where(textarea),
.app-settings-page .app-settings-form textarea {
    line-height: 1.5;
    resize: vertical;
}

.project-hub-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus,
.app-settings-page .app-settings-form textarea:focus {
    border-color: var(--brand-blue);
    outline: none;
    box-shadow: 0 0 0 3px var(--app-focus-ring);
}

.project-hub-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
}

.project-hub-title {
    min-width: 0;
}

.project-hub-title h1 {
    margin: 4px 0 8px;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--app-text-primary);
}

.project-hub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.project-hub-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.project-hub-chip.is-strong {
    border-color: var(--brand-blue-border);
    background: var(--brand-blue-soft);
    color: var(--brand-blue-dark, var(--brand-blue));
}

.project-hub-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.project-hub-site {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.project-hub-site svg,
.project-hub-doc svg,
.project-hub-set-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.project-hub-tabs {
    margin-bottom: 16px;
}

.project-hub-tabs .button-secondary {
    cursor: pointer;
    box-shadow: none;
}

.project-hub-panel {
    display: grid;
    gap: 16px;
}

.project-hub-panel[hidden] {
    display: none !important;
}

.project-hub-card {
    box-shadow: var(--app-shadow-surface);
}

.project-hub-kpis {
    margin: 0;
}

.project-hub-kpis .catalog-kpi {
    text-decoration: none;
    color: inherit;
}

.project-hub-kpis small {
    display: block;
    color: var(--app-text-muted);
    font-size: 12px;
}

.project-hub-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 16px 0 0;
}

.project-hub-facts div {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--app-border);
}

.project-hub-facts dt {
    color: var(--app-text-muted);
    font-size: 13px;
}

.project-hub-facts dd {
    margin: 0;
    color: var(--app-text-primary);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Projektmappe */
.project-hub-set-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.project-hub-set {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--brand-blue-border);
    border-radius: var(--app-radius-large);
    background: var(--brand-blue-soft);
    color: var(--app-text-primary);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.project-hub-set:hover,
.project-hub-set:focus-visible {
    border-color: var(--brand-blue);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    outline: none;
}

.project-hub-set-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
}

.project-hub-set-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.project-hub-set-text strong {
    font-size: 16px;
}

.project-hub-set-files {
    color: var(--app-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.project-hub-size {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background: #e2e8f0;
    color: var(--app-text-secondary);
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
}

.project-hub-size.is-a3 {
    background: #fde7d3;
    color: #974706;
}

.project-hub-set-files .project-hub-size.is-a3 {
    margin-left: 6px;
}

.project-hub-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.project-hub-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-medium);
    background: var(--app-surface);
    color: var(--app-text-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.project-hub-doc svg {
    color: var(--brand-blue);
    flex: 0 0 auto;
}

.project-hub-doc span:not(.project-hub-size) {
    flex: 1;
    min-width: 0;
}

.project-hub-doc:hover,
.project-hub-doc:focus-visible {
    border-color: var(--brand-blue-border);
    background: var(--app-surface-subtle);
    outline: none;
}

/* Forms */
.project-hub-form {
    display: grid;
    gap: 16px;
}

.project-hub-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.project-hub-card .company-settings-section-form > .form-row:last-child {
    margin-bottom: 0;
}

.project-hub-submit {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.project-hub-panel > .form-warning {
    margin: 0;
}

.project-hub-panel > .form-warning a {
    color: var(--brand-blue);
}

.project-hub-status {
    margin-right: auto;
    color: var(--app-text-muted);
    font-size: 13px;
}

.project-hub-checklist {
    margin: 0 0 16px;
}

.project-hub-checklist-title {
    margin: 0 0 6px;
    color: var(--app-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.project-hub-checklist-rows {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-medium);
    overflow: hidden;
}

.project-hub-check-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    align-items: center;
    min-height: 38px;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
}

.project-hub-check-row:last-child {
    border-bottom: 0;
}

.project-hub-check-row input[type="checkbox"] {
    justify-self: center;
    width: 17px !important;
    height: 17px !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    accent-color: var(--brand-blue);
}

.project-hub-page .project-hub-check-row input[type="text"] {
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 6px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
}

.project-hub-page .project-hub-check-row input[type="text"]:focus {
    box-shadow: none;
    background: var(--app-surface-subtle);
    outline: none;
}

.project-hub-check-row:has(input[type="checkbox"]:not(:checked)) input[type="text"] {
    color: var(--app-text-muted);
}

.project-hub-row-remove {
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}

.project-hub-check-row:hover .project-hub-row-remove,
.project-hub-row-remove:focus {
    opacity: 1;
}

.project-hub-add {
    margin-top: 8px;
}

.project-hub-segmented {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-medium);
    background: var(--app-surface-subtle);
}

.project-hub-segmented label {
    margin: 0;
    cursor: pointer;
}

.project-hub-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.project-hub-segmented span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: var(--app-radius-small);
    color: var(--app-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.project-hub-segmented input:checked + span {
    background: var(--app-surface);
    color: var(--brand-blue);
    box-shadow: var(--app-shadow-surface);
}

.project-hub-segmented input:focus-visible + span {
    outline: 2px solid var(--app-focus-ring);
}

.project-hub-time-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

/* Debrunner mail */
.project-hub-mail {
    margin-top: 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-medium);
    overflow: hidden;
    background: var(--app-surface);
}

.project-hub-mail-line {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border-bottom: 1px solid var(--app-border);
    font-size: 14px;
}

.project-hub-mail-line > span {
    color: var(--app-text-muted);
    font-weight: 400;
}

.project-hub-page .project-hub-mail-line input {
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
}

.project-hub-page .project-hub-mail-line input:focus,
.project-hub-page .project-hub-mail-body:focus {
    outline: none;
    box-shadow: none;
}

.project-hub-page .project-hub-mail-body {
    display: block;
    width: 100%;
    min-height: 180px;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.project-hub-mail-table-hint {
    padding: 8px 12px;
    border-top: 1px dashed var(--app-border);
    color: var(--app-text-muted);
    font-size: 12px;
}

.debrunner-table {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    font-size: 13px;
}

.debrunner-table th,
.debrunner-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--app-border);
    text-align: left;
    vertical-align: middle;
}

.project-hub-page .debrunner-table th {
    background: transparent;
    width: 46%;
    color: var(--app-text-secondary);
    font-weight: 600;
}

.debrunner-table td {
    color: var(--app-text-primary);
}

.project-hub-page .debrunner-table input {
    width: 100%;
    min-height: 32px;
    margin: 0;
    padding: 4px 8px;
    font-size: 13px;
}

.project-hub-page .debrunner-fill-row th,
.project-hub-page .debrunner-fill-row td {
    color: var(--app-text-muted);
    font-weight: 400;
}

/* Address picker (project-picker / project-search-results) */
.address-picker .project-search-results {
    max-height: 320px;
}

.address-picker .project-result-button.is-active {
    background: #eef6fc;
}

.address-picker-empty {
    padding: 10px;
}

.project-hub-address-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* Options › Adressbuch */
.address-book-toolbar {
    align-items: flex-end;
}

.address-book-toolbar .form-row {
    margin: 0;
}

.address-book-search {
    flex: 1 1 260px;
    max-width: 360px;
}

.address-book-kind-filter {
    flex: 0 0 200px;
}

.address-book-toolbar .settings-table-actions {
    margin-left: auto;
}

.address-book-table tr.is-inactive td {
    opacity: 0.55;
}

.address-book-table .settings-table-primary,
.address-book-table .settings-table-secondary {
    display: block;
}

.address-book-table form {
    margin: 0;
}

.address-book-table form .appointment-action-menu-item {
    width: 100%;
}

.project-settings-wide {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .project-hub-header {
        flex-direction: column;
    }

    .project-hub-columns,
    .project-hub-set-grid,
    .project-hub-facts,
    .project-hub-address-slots {
        grid-template-columns: 1fr;
    }

    .project-hub-facts div {
        grid-template-columns: 130px minmax(0, 1fr);
    }

    .project-hub-time-row {
        grid-template-columns: 1fr 1fr;
    }

    .project-hub-time-row .form-row:first-child {
        grid-column: 1 / -1;
    }

    .address-book-search,
    .address-book-kind-filter {
        max-width: none;
        flex: 1 1 auto;
    }
}

/* ===== r59: Material bestellen (Vorschau) ===== */
.orders-columns {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.orders-search {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.orders-search input {
    flex: 1;
}

.orders-scan-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.orders-scan-button svg,
.orders-results .orders-add svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.orders-results,
.orders-cart,
.orders-list {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.orders-result,
.orders-cart-row,
.orders-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-medium);
    background: var(--app-surface);
}

.orders-result img,
.orders-result-placeholder {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    background: var(--app-surface-subtle);
    object-fit: contain;
}

.orders-row-main {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.orders-row-main strong {
    overflow: hidden;
    color: var(--app-text-primary);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orders-row-main span {
    color: var(--app-text-muted);
    font-size: 12.5px;
}

.orders-last {
    color: var(--app-text-secondary) !important;
}

.orders-duplicate {
    justify-self: start;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--app-warning-surface);
    color: var(--app-warning) !important;
    font-weight: 600;
}

.orders-row-note {
    font-style: italic;
}

.orders-add {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
}

.orders-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.orders-qty button {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-small);
    background: var(--app-surface);
    color: var(--app-text-primary);
    cursor: pointer;
    font-size: 16px;
}

.project-hub-page .orders-qty input {
    width: 58px;
    min-height: 32px;
    padding: 4px 6px;
    text-align: center;
}

.orders-qty span {
    min-width: 28px;
    color: var(--app-text-muted);
    font-size: 12.5px;
}

.orders-remove {
    opacity: 1;
}

.orders-status {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--app-surface-subtle);
    color: var(--app-text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.orders-row.status-freigegeben .orders-status {
    background: var(--app-info-surface);
    color: var(--app-info);
}

.orders-row.status-bestellt .orders-status {
    background: var(--brand-blue-soft);
    color: var(--brand-blue);
}

.orders-row.status-geliefert .orders-status {
    background: var(--app-success-surface);
    color: var(--app-success);
}

.orders-row.status-abgelehnt .orders-status {
    background: var(--app-error-surface);
    color: var(--app-error);
}

.orders-row-actions {
    display: flex;
    gap: 6px;
}

.orders-select {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 0;
}

.orders-free {
    margin-top: 14px;
    color: var(--app-text-secondary);
    font-size: 13px;
}

.orders-free summary {
    cursor: pointer;
    font-weight: 600;
}

.orders-free-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px auto;
    gap: 8px;
    margin-top: 10px;
}

.orders-scanner {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.78);
}

.orders-scanner[hidden] {
    display: none;
}

.orders-scanner-panel {
    position: relative;
    width: min(520px, 100%);
    overflow: hidden;
    border-radius: 16px;
    background: #000;
}

.orders-scanner-panel video {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: cover;
}

.orders-scanner-frame {
    position: absolute;
    top: 30%;
    right: 12%;
    left: 12%;
    height: 26%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25);
}

.orders-scanner-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    background: #fff;
    color: var(--app-text-secondary);
    font-size: 13px;
}

@media (max-width: 900px) {
    .orders-columns {
        grid-template-columns: 1fr;
    }

    .orders-scan-button span {
        display: none;
    }

    .orders-row {
        flex-wrap: wrap;
    }

    .orders-free-form {
        grid-template-columns: 1fr 80px;
    }

    .orders-free-form button {
        grid-column: 1 / -1;
    }
}

/* r67: Material bestellen without the r58 file styles */
.material-orders-page .project-files-status {
    padding: 12px 0;
    color: var(--app-text-muted);
    font-size: 13px;
}

.material-orders-page .project-files-status[hidden] {
    display: none;
}
/* ===== r58: Projektdateien (SharePoint) - only visible when switched on ===== */
.project-files-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.project-files-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-files-folder-menu {
    position: relative;
}

.project-files-folder-menu > summary {
    list-style: none;
    cursor: pointer;
}

.project-files-folder-menu > summary::-webkit-details-marker {
    display: none;
}

.project-files-folder-form {
    position: absolute;
    right: 0;
    z-index: 40;
    width: min(420px, 86vw);
    margin-top: 6px;
    padding: 14px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-large);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-overlay);
}

.project-files-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 14px 0 8px;
}

.project-files-crumbs button {
    margin: 0;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--app-radius-small);
    background: transparent;
    color: var(--brand-blue);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.project-files-crumbs button + button::before {
    content: "›";
    margin-right: 8px;
    color: var(--app-text-muted);
}

.project-files-crumbs button:disabled {
    color: var(--app-text-primary);
    cursor: default;
}

.project-files-status {
    padding: 12px 0;
    color: var(--app-text-muted);
    font-size: 13px;
}

.project-files-status[hidden] {
    display: none;
}

.project-files-list {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.project-files-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 4px 4px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-medium);
    background: var(--app-surface);
}

.project-files-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--app-text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

.project-files-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-files-main svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: var(--brand-blue);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.project-files-item.is-folder .project-files-main svg {
    fill: color-mix(in srgb, var(--brand-blue) 14%, #fff);
}

.project-files-main img {
    width: 48px;
    height: 36px;
    flex: 0 0 48px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--app-surface-subtle);
}

.project-files-item:hover {
    border-color: var(--brand-blue-border);
}

.project-files-attach {
    width: auto;
    max-width: 260px;
    min-height: 34px;
    padding: 4px 8px;
    font-size: 13px;
}

.project-files-actions label.button {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.project-files-actions label[hidden],
.project-files-camera[hidden] {
    display: none !important;
}

.project-files-create {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 6px 0 10px;
    padding: 10px 12px;
    border: 1px dashed var(--brand-blue-border);
    border-radius: var(--app-radius-medium);
    background: var(--brand-blue-soft);
}

.project-files-create[hidden] {
    display: none;
}

.project-files-create-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    flex: 1;
}

.project-files-create-list label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.project-files-create-list input {
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    margin: 0;
}

.project-files-camera {
    display: inline-flex;
    margin: 4px 0 8px;
    cursor: pointer;
}

.project-files [data-project-files-create-project][hidden] {
    display: none;
}

.project-files-actions > .button,
.project-files-actions > .button-secondary,
.project-files-actions > details > summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    box-sizing: border-box;
}