.calendar-completed-hover-hint {
    position: absolute;
    left: 50%;
    top: 120%;
    transform: translateX(-50%);
    background: #232a3a;
    color: #e8f1ff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #3a4660;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    white-space: nowrap;
    z-index: 60;
    pointer-events: none;
    text-align: center;
    opacity: 0.97;
    transition: opacity 0.15s;
}
.calendar-completed-hover-hint::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    width: 8px;
    height: 8px;
    background: #232a3a;
    border-left: 1px solid #3a4660;
    border-top: 1px solid #3a4660;
    transform: translateX(-50%) rotate(45deg);
    z-index: 59;
    pointer-events: none;
}

:root[data-theme="light"] .calendar-completed-hover-hint {
    background: #f7f9fd;
    color: #203048;
    border: 1px solid #d7e1ef;
    box-shadow: 0 4px 16px rgba(74,121,211,0.10);
}
:root[data-theme="light"] .calendar-completed-hover-hint::before {
    background: #f7f9fd;
    border-left: 1px solid #d7e1ef;
    border-top: 1px solid #d7e1ef;
}
:root {
    --app-dialog-panel-width: 980px;
    --monday-bg: #111111;
    --monday-panel: #1e1e1e;
    --monday-border: #2c2c2c; /* Subtilere Linien */
    --monday-blue: #0073ea;
    --monday-text: #ffffff;
    --input-bg: #2a2b2e;
    --input-text: #ffffff;
    --card-bg: #1e1e1e;
    --overlay-panel: rgba(20, 22, 27, 0.92);
    --status-idle: #797e93;
    --status-prod: #fdab3d;
    --apple-red: #ff3b30;
    --calendar-bg: #121212;
    --due-color-overdue: #1c0e28;
    --due-color-today: #00120b;
    --due-color-tomorrow: #142933;
    --due-color-week: #001721;
    --due-color-next-week: #102129;
    --due-color-later: #000000;
    --ui-surface-overlay: var(--ui-surface-overlay-dark, rgba(0, 0, 0, 0.25));
    --ui-surface-soft-02: var(--ui-surface-overlay);
    --ui-surface-soft-03: var(--ui-surface-overlay);
    --ui-surface-shade-25: var(--ui-surface-overlay);

    /* Structured theme tokens: board/admin/worktime */
    --theme-admin-card-bg: var(--ui-surface-soft-02);
    --theme-admin-card-border: rgba(255, 255, 255, 0.08);
    --theme-board-kpi-bg: var(--ui-surface-soft-03);
    --theme-board-kpi-border: rgba(255, 255, 255, 0.08);
    --theme-board-kpi-label: #9aa3af;
    --theme-board-kpi-value: #ffffff;
    --theme-worktime-toolbar-bg: rgba(18, 24, 41, 0.52);
    --theme-worktime-toolbar-border: rgba(148, 166, 205, 0.14);
    --theme-worktime-range-toolbar-bg: rgba(14, 19, 34, 0.45);
    --theme-worktime-range-toolbar-border: rgba(148, 166, 205, 0.12);
    --theme-worktime-confirm-card-bg: linear-gradient(180deg, rgba(20, 26, 42, 0.98), rgba(16, 21, 34, 0.98));
    --theme-worktime-confirm-card-border: rgba(148, 166, 205, 0.18);
    --theme-worktime-confirm-card-shadow: 0 18px 40px rgba(8, 12, 20, 0.28);
    --theme-worktime-kpi-bg: var(--ui-surface-soft-03);
    --theme-worktime-kpi-border: var(--ui-surface-soft-02);
    --feature-shell-bg: linear-gradient(180deg, rgba(17, 23, 35, 0.94), rgba(20, 27, 41, 0.94));
    --feature-shell-border: rgba(255, 255, 255, 0.08);
    --feature-shell-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
    --feature-shell-section-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    --feature-shell-card-bg: rgba(255, 255, 255, 0.03);
    --feature-shell-toolbar-bg: rgba(255, 255, 255, 0.028);
    --feature-shell-input-bg: rgba(255, 255, 255, 0.045);
    --feature-shell-input-border: rgba(255, 255, 255, 0.12);
    --feature-shell-muted: #a4b2c8;

    --theme-user-control-bg: rgba(14, 18, 28, 0.86);
    --theme-user-control-border: rgba(255, 255, 255, 0.12);
    --theme-user-control-color: #d6deec;
    --theme-user-control-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    --theme-user-control-hover-color: #ffffff;
    --theme-user-control-hover-border: rgba(255, 255, 255, 0.2);
    --theme-user-avatar-bg: #1f273a;
    --theme-user-avatar-border: rgba(255, 255, 255, 0.18);

    --theme-user-dropdown-bg: rgba(16, 20, 31, 0.95);
    --theme-user-dropdown-border: rgba(255, 255, 255, 0.12);
    --theme-user-dropdown-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
    --theme-user-dropdown-btn-color: #ffffff;
    --theme-user-dropdown-btn-hover-bg: rgba(0, 115, 234, 0.2);
    --theme-user-dropdown-logout-color: #ffb3b3;
    --theme-user-dropdown-logout-hover-bg: rgba(255, 59, 48, 0.18);

    --theme-notifications-panel-bg: rgba(16, 20, 31, 0.96);
    --theme-notifications-panel-border: rgba(255, 255, 255, 0.12);
    --theme-notifications-panel-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
    --theme-notifications-header-border: rgba(255, 255, 255, 0.08);
    --theme-notifications-header-color: #eef3ff;
    --theme-notifications-empty-color: #97a6bd;
    --theme-notifications-tab-bg: var(--ui-surface-soft-03);
    --theme-notifications-tab-border: rgba(255,255,255,0.09);
    --theme-notifications-tab-color: #bfd0eb;
    --theme-notifications-tab-hover-bg: rgba(255,255,255,0.06);
    --theme-notifications-tab-active-bg: rgba(66,118,213,0.16);
    --theme-notifications-tab-active-border: rgba(66,118,213,0.26);
    --theme-notifications-tab-active-color: #e5efff;
    --theme-notifications-item-hover-bg: rgba(0, 115, 234, 0.15);
    --theme-notifications-item-unread-bg: rgba(77, 132, 233, 0.08);

    --calendar-theme-sidebar-start-dark: #1a1a2e;
    --calendar-theme-sidebar-end-dark: #16213e;
    --calendar-theme-bg-dark: #1a1a1a;
    --calendar-theme-colheader-bg-dark: #1a1a1a;
    --calendar-theme-colheader-text-dark: #999999;
    --calendar-theme-border-dark: #2a2a2a;
    --calendar-theme-sidebar-start-light: #eef4fd;
    --calendar-theme-sidebar-end-light: #e7f0fc;
    --calendar-theme-bg-light: #f7f9fd;
    --calendar-theme-colheader-bg-light: #f3f7fd;
    --calendar-theme-colheader-text-light: #677a95;
    --calendar-theme-border-light: #dbe5f2;

    --theme-calendar-sidebar-bg: linear-gradient(135deg, var(--calendar-theme-sidebar-start-dark) 0%, var(--calendar-theme-sidebar-end-dark) 100%);
    --theme-calendar-sidebar-border: rgba(0, 115, 234, 0.2);
    --theme-calendar-view-bg: transparent;
    --theme-calendar-stage-bg: transparent;
    --theme-calendar-bg: var(--calendar-theme-bg-dark);

    --theme-calendar-hover-bg: rgba(20, 20, 20, 0.92);
    --theme-calendar-hover-border: rgba(255, 255, 255, 0.08);
    --theme-calendar-hover-text: #ddd;
    --theme-calendar-hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --theme-calendar-hover-title: #fff;

    --theme-calendar-filter-menu-bg: #1d2233;
    --theme-calendar-filter-menu-border: rgba(255, 255, 255, 0.14);
    --theme-calendar-filter-menu-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);

    --theme-calendar-fc-title: #fff;
    --theme-calendar-fc-button-color: #aaa;
    --theme-calendar-fc-button-bg: transparent;
    --theme-calendar-fc-button-border: #3a3a3a;
    --theme-calendar-fc-button-hover-bg: #2a2a2a;
    --theme-calendar-fc-button-hover-color: #fff;
    --theme-calendar-fc-custom-week-color: #9aa3b5;
    --theme-calendar-fc-userfilter-bg: rgba(0, 0, 0, 0.35);
    --theme-calendar-fc-userfilter-border: rgba(255, 255, 255, 0.12);
    --theme-calendar-fc-userfilter-color: #eee;
    --theme-calendar-fc-showcompleted-color: #eee;

    --theme-calendar-team-avatar-border: #4371cc;
    --theme-calendar-team-avatar-bg: #1b243f;
    --theme-calendar-team-overflow-color: #d7e2f8;
    --theme-calendar-team-add-color: #dbe8ff;
    --theme-calendar-team-add-bg: rgba(67, 113, 204, 0.25);
    --theme-calendar-team-add-border: rgba(125, 177, 255, 0.4);
    --theme-calendar-team-count-color: #b7c7e7;

    --theme-calendar-time-label-color: #666;
    --theme-calendar-time-slot-border: rgba(255, 255, 255, 0.035);
    --theme-calendar-time-slot-minor-border: rgba(255, 255, 255, 0.035);
    --theme-calendar-time-slot-major-top: rgba(255, 255, 255, 0.10);

    --theme-calendar-colheader-bg: var(--calendar-theme-colheader-bg-dark);
    --theme-calendar-colheader-border: var(--calendar-theme-border-dark);
    --theme-calendar-colheader-color: var(--calendar-theme-colheader-text-dark);
    --theme-calendar-day-total-color: #7b7b7b;
    --theme-calendar-day-total-sub-color: #666;
}

:root[data-theme="light"] {
    --monday-bg: #f4f6fb;
    --monday-panel: #ffffff;
    --monday-border: #dbe2ef;
    --monday-blue: #0b67d0;
    --monday-text: #141a24;
    --input-bg: #ffffff;
    --input-text: #141a24;
    --card-bg: #ffffff;
    --overlay-panel: rgba(255, 255, 255, 0.96);
    --calendar-bg: #f7f9fd;
    --due-color-overdue: #eddef9;
    --due-color-today: #dcede6;
    --due-color-tomorrow: #e0f5ff;
    --due-color-week: #d1e8f2;
    --due-color-next-week: #e7f7ff;
    --due-color-later: #ffffff;
    --ui-surface-overlay: var(--ui-surface-overlay-light, rgba(0, 0, 0, 0.25));
    --ui-surface-soft-02: var(--ui-surface-overlay);
    --ui-surface-soft-03: var(--ui-surface-overlay);
    --ui-surface-shade-25: var(--ui-surface-overlay);

    --theme-admin-card-bg: var(--ui-surface-soft-03);
    --theme-admin-card-border: rgba(20, 30, 45, 0.08);
    --theme-board-kpi-bg: var(--ui-surface-soft-03);
    --theme-board-kpi-border: #e0e8f3;
    --theme-board-kpi-label: #7487a0;
    --theme-board-kpi-value: #162133;
    --theme-worktime-toolbar-bg: var(--ui-surface-soft-03);
    --theme-worktime-toolbar-border: rgba(108, 127, 160, 0.22);
    --theme-worktime-range-toolbar-bg: var(--ui-surface-soft-03);
    --theme-worktime-range-toolbar-border: rgba(108, 127, 160, 0.20);
    --theme-worktime-confirm-card-bg: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(246,249,254,0.98));
    --theme-worktime-confirm-card-border: rgba(121, 141, 176, 0.18);
    --theme-worktime-confirm-card-shadow: 0 14px 30px rgba(30, 47, 78, 0.14);
    --theme-worktime-kpi-bg: var(--ui-surface-soft-03);
    --theme-worktime-kpi-border: var(--ui-surface-soft-02);
    --feature-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 254, 0.94));
    --feature-shell-border: rgba(131, 149, 181, 0.18);
    --feature-shell-shadow: 0 18px 40px rgba(23, 37, 63, 0.08);
    --feature-shell-section-bg: linear-gradient(180deg, rgba(247, 250, 255, 0.95), rgba(241, 246, 253, 0.9));
    --feature-shell-card-bg: rgba(255, 255, 255, 0.8);
    --feature-shell-toolbar-bg: rgba(255, 255, 255, 0.76);
    --feature-shell-input-bg: #ffffff;
    --feature-shell-input-border: rgba(128, 148, 178, 0.2);
    --feature-shell-muted: #6a7c98;

    --theme-user-control-bg: rgba(255, 255, 255, 0.96);
    --theme-user-control-border: rgba(25, 42, 70, 0.14);
    --theme-user-control-color: #425b83;
    --theme-user-control-shadow: 0 8px 18px rgba(17, 31, 56, 0.10);
    --theme-user-control-hover-color: #223a62;
    --theme-user-control-hover-border: rgba(25, 42, 70, 0.22);
    --theme-user-avatar-bg: #e9eef7;
    --theme-user-avatar-border: rgba(41, 63, 97, 0.16);

    --theme-user-dropdown-bg: rgba(255, 255, 255, 0.98);
    --theme-user-dropdown-border: rgba(22, 37, 60, 0.14);
    --theme-user-dropdown-shadow: 0 16px 30px rgba(17, 31, 56, 0.16);
    --theme-user-dropdown-btn-color: #22324a;
    --theme-user-dropdown-btn-hover-bg: #edf3fd;
    --theme-user-dropdown-logout-color: #b43744;
    --theme-user-dropdown-logout-hover-bg: #fff0f2;

    --theme-notifications-panel-bg: rgba(255, 255, 255, 0.98);
    --theme-notifications-panel-border: rgba(22, 37, 60, 0.14);
    --theme-notifications-panel-shadow: 0 16px 30px rgba(17, 31, 56, 0.16);
    --theme-notifications-header-border: rgba(24, 42, 70, 0.08);
    --theme-notifications-header-color: #22324a;
    --theme-notifications-empty-color: #6a7c98;
    --theme-notifications-tab-bg: rgba(22, 37, 60, 0.03);
    --theme-notifications-tab-border: rgba(22, 37, 60, 0.10);
    --theme-notifications-tab-color: #5c7393;
    --theme-notifications-tab-hover-bg: rgba(22, 37, 60, 0.06);
    --theme-notifications-tab-active-bg: rgba(66,118,213,0.10);
    --theme-notifications-tab-active-border: rgba(66,118,213,0.18);
    --theme-notifications-tab-active-color: #315486;
    --theme-notifications-item-hover-bg: #edf3fd;
    --theme-notifications-item-unread-bg: #f3f7ff;

    --theme-calendar-sidebar-bg: linear-gradient(180deg, var(--calendar-theme-sidebar-start-light) 0%, var(--calendar-theme-sidebar-end-light) 100%);
    --theme-calendar-sidebar-border: rgba(11, 103, 208, 0.12);
    --theme-calendar-view-bg: #f4f7fc;
    --theme-calendar-stage-bg: linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
    --theme-calendar-bg: var(--calendar-theme-bg-light);

    --theme-calendar-hover-bg: rgba(255, 255, 255, 0.97);
    --theme-calendar-hover-border: rgba(18, 30, 48, 0.12);
    --theme-calendar-hover-text: #33445d;
    --theme-calendar-hover-shadow: 0 12px 28px rgba(20, 36, 62, 0.14);
    --theme-calendar-hover-title: #182338;

    --theme-calendar-filter-menu-bg: #ffffff;
    --theme-calendar-filter-menu-border: #d7e1ef;
    --theme-calendar-filter-menu-shadow: 0 18px 30px rgba(20, 36, 62, 0.12);

    --theme-calendar-fc-title: #1a2436;
    --theme-calendar-fc-button-color: #46556f;
    --theme-calendar-fc-button-bg: rgba(255,255,255,0.88);
    --theme-calendar-fc-button-border: #d7e1ef;
    --theme-calendar-fc-button-hover-bg: #edf3fb;
    --theme-calendar-fc-button-hover-color: #162134;
    --theme-calendar-fc-custom-week-color: #61728c;
    --theme-calendar-fc-userfilter-bg: rgba(255,255,255,0.92);
    --theme-calendar-fc-userfilter-border: #d7e1ef;
    --theme-calendar-fc-userfilter-color: #203048;
    --theme-calendar-fc-showcompleted-color: #203048;

    --theme-calendar-team-avatar-border: #d7e1ef;
    --theme-calendar-team-avatar-bg: #eef3fb;
    --theme-calendar-team-overflow-color: #647995;
    --theme-calendar-team-add-color: #2f61a8;
    --theme-calendar-team-add-bg: rgba(47, 97, 168, 0.1);
    --theme-calendar-team-add-border: rgba(47, 97, 168, 0.2);
    --theme-calendar-team-count-color: #60758f;

    --theme-calendar-time-label-color: #5f7087;
    --theme-calendar-time-slot-border: rgba(131, 149, 181, 0.08);
    --theme-calendar-time-slot-minor-border: rgba(131, 149, 181, 0.05);
    --theme-calendar-time-slot-major-top: rgba(131, 149, 181, 0.11);

    --theme-calendar-colheader-bg: var(--calendar-theme-colheader-bg-light);
    --theme-calendar-colheader-border: var(--calendar-theme-border-light);
    --theme-calendar-colheader-color: var(--calendar-theme-colheader-text-light);
    --theme-calendar-day-total-color: #546881;
    --theme-calendar-day-total-sub-color: #7689a1;
}

:root[data-theme="dark"] {
    --theme-admin-card-bg: var(--ui-surface-soft-02);
    --theme-admin-card-border: rgba(255, 255, 255, 0.08);
    --theme-board-kpi-bg: var(--ui-surface-soft-03);
    --theme-board-kpi-border: rgba(255, 255, 255, 0.08);
    --theme-board-kpi-label: #9aa3af;
    --theme-board-kpi-value: #ffffff;
    --theme-worktime-toolbar-bg: rgba(18, 24, 41, 0.52);
    --theme-worktime-toolbar-border: rgba(148, 166, 205, 0.14);
    --theme-worktime-range-toolbar-bg: rgba(14, 19, 34, 0.45);
    --theme-worktime-range-toolbar-border: rgba(148, 166, 205, 0.12);
    --theme-worktime-confirm-card-bg: linear-gradient(180deg, rgba(20, 26, 42, 0.98), rgba(16, 21, 34, 0.98));
    --theme-worktime-confirm-card-border: rgba(148, 166, 205, 0.18);
    --theme-worktime-confirm-card-shadow: 0 18px 40px rgba(8, 12, 20, 0.28);
    --theme-worktime-kpi-bg: var(--ui-surface-soft-03);
    --theme-worktime-kpi-border: var(--ui-surface-soft-02);

    --theme-user-control-bg: rgba(14, 18, 28, 0.86);
    --theme-user-control-border: rgba(255, 255, 255, 0.12);
    --theme-user-control-color: #d6deec;
    --theme-user-control-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    --theme-user-control-hover-color: #ffffff;
    --theme-user-control-hover-border: rgba(255, 255, 255, 0.2);
    --theme-user-avatar-bg: #1f273a;
    --theme-user-avatar-border: rgba(255, 255, 255, 0.18);

    --theme-user-dropdown-bg: rgba(16, 20, 31, 0.95);
    --theme-user-dropdown-border: rgba(255, 255, 255, 0.12);
    --theme-user-dropdown-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
    --theme-user-dropdown-btn-color: #ffffff;
    --theme-user-dropdown-btn-hover-bg: rgba(0, 115, 234, 0.2);
    --theme-user-dropdown-logout-color: #ffb3b3;
    --theme-user-dropdown-logout-hover-bg: rgba(255, 59, 48, 0.18);

    --theme-notifications-panel-bg: rgba(16, 20, 31, 0.96);
    --theme-notifications-panel-border: rgba(255, 255, 255, 0.12);
    --theme-notifications-panel-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
    --theme-notifications-header-border: rgba(255, 255, 255, 0.08);
    --theme-notifications-header-color: #eef3ff;
    --theme-notifications-empty-color: #97a6bd;
    --theme-notifications-tab-bg: var(--ui-surface-soft-03);
    --theme-notifications-tab-border: rgba(255,255,255,0.09);
    --theme-notifications-tab-color: #bfd0eb;
    --theme-notifications-tab-hover-bg: rgba(255,255,255,0.06);
    --theme-notifications-tab-active-bg: rgba(66,118,213,0.16);
    --theme-notifications-tab-active-border: rgba(66,118,213,0.26);
    --theme-notifications-tab-active-color: #e5efff;
    --theme-notifications-item-hover-bg: rgba(0, 115, 234, 0.15);
    --theme-notifications-item-unread-bg: rgba(77, 132, 233, 0.08);

    --theme-calendar-sidebar-bg: linear-gradient(135deg, var(--calendar-theme-sidebar-start-dark) 0%, var(--calendar-theme-sidebar-end-dark) 100%);
    --theme-calendar-sidebar-border: rgba(0, 115, 234, 0.2);
    --theme-calendar-view-bg: transparent;
    --theme-calendar-stage-bg: transparent;
    --theme-calendar-bg: var(--calendar-theme-bg-dark);

    --theme-calendar-hover-bg: rgba(20, 20, 20, 0.92);
    --theme-calendar-hover-border: rgba(255, 255, 255, 0.08);
    --theme-calendar-hover-text: #ddd;
    --theme-calendar-hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --theme-calendar-hover-title: #fff;

    --theme-calendar-filter-menu-bg: #1d2233;
    --theme-calendar-filter-menu-border: rgba(255, 255, 255, 0.14);
    --theme-calendar-filter-menu-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);

    --theme-calendar-fc-title: #fff;
    --theme-calendar-fc-button-color: #aaa;
    --theme-calendar-fc-button-bg: transparent;
    --theme-calendar-fc-button-border: #3a3a3a;
    --theme-calendar-fc-button-hover-bg: #2a2a2a;
    --theme-calendar-fc-button-hover-color: #fff;
    --theme-calendar-fc-custom-week-color: #9aa3b5;
    --theme-calendar-fc-userfilter-bg: rgba(0, 0, 0, 0.35);
    --theme-calendar-fc-userfilter-border: rgba(255, 255, 255, 0.12);
    --theme-calendar-fc-userfilter-color: #eee;
    --theme-calendar-fc-showcompleted-color: #eee;

    --theme-calendar-team-avatar-border: #4371cc;
    --theme-calendar-team-avatar-bg: #1b243f;
    --theme-calendar-team-overflow-color: #d7e2f8;
    --theme-calendar-team-add-color: #dbe8ff;
    --theme-calendar-team-add-bg: rgba(67, 113, 204, 0.25);
    --theme-calendar-team-add-border: rgba(125, 177, 255, 0.4);
    --theme-calendar-team-count-color: #b7c7e7;

    --theme-calendar-time-label-color: #666;
    --theme-calendar-time-slot-border: rgba(255, 255, 255, 0.035);
    --theme-calendar-time-slot-minor-border: rgba(255, 255, 255, 0.035);
    --theme-calendar-time-slot-major-top: rgba(255, 255, 255, 0.10);

    --theme-calendar-colheader-bg: var(--calendar-theme-colheader-bg-dark);
    --theme-calendar-colheader-border: var(--calendar-theme-border-dark);
    --theme-calendar-colheader-color: var(--calendar-theme-colheader-text-dark);
    --theme-calendar-day-total-color: #7b7b7b;
    --theme-calendar-day-total-sub-color: #666;
}

body, html {
    margin: 0; padding: 0; height: 100%;
    font-family: 'Figtree', sans-serif;
    background-color: var(--monday-bg);
    color: var(--monday-text);
    overflow: hidden;
}

body.no-scroll {
    overflow: hidden;
}

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

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
    position: static;
    width: auto;
    height: auto;
    margin: 10px;
    clip: auto;
    white-space: normal;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    background: #0b67d0;
    color: #ffffff;
    z-index: 100000;
}

:where(button, [href], input, select, textarea, summary, [role="tab"]):focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* APP LAYOUT */
.app-container { display: flex; height: 100vh; width: 100vw; }

.nav-tabs {
    position: relative;
    width: 90px; 
    min-width: 90px;
    flex: 0 0 90px;
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.7) 0%, rgba(40, 40, 60, 0.6) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column; 
    align-items: center;
    padding-top: clamp(10px, 2vh, 25px);
    padding-bottom: clamp(10px, 2vh, 25px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 200;
    gap: clamp(8px, 1.4vh, 20px);
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] .nav-tabs {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(239, 244, 252, 0.92) 100%);
    border-right: 1px solid rgba(15, 24, 38, 0.08);
    box-shadow: inset -1px 0 0 rgba(15, 24, 38, 0.04);
}

.nav-tab-with-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 62px;
    overflow: visible;
}

.tab-icon {
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s cubic-bezier(0.23, 1, 0.320, 1), transform 0.3s cubic-bezier(0.23, 1, 0.320, 1), color 0.3s cubic-bezier(0.23, 1, 0.320, 1), background-color 0.3s cubic-bezier(0.23, 1, 0.320, 1), border-color 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    padding: 8px 6px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tab-icon-svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tab-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
}

.tab-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 115, 234, 0.2) 0%, rgba(0, 115, 234, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 16px;
    z-index: -1;
}

.tab-icon:hover {
    opacity: 0.7;
    transform: translateY(-3px);
}

.tab-icon:focus-visible,
.logout-btn:focus-visible,
.user-notifications-trigger:focus-visible,
.user-quick-trigger:focus-visible,
.mobile-more-sheet button:focus-visible,
.user-quick-dropdown button:focus-visible {
    box-shadow: 0 0 0 3px rgba(66, 145, 255, 0.35);
}

.tab-icon:hover::before {
    opacity: 1;
}

.tab-icon.mobile-notifications-tab,
.mobile-more-user-quick-trigger {
    display: none;
}

.tab-icon.active {
    opacity: 1;
    background: linear-gradient(135deg, rgba(0, 115, 234, 0.3) 0%, rgba(0, 115, 234, 0.1) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 115, 234, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 115, 234, 0.2), inset 0 0 1px rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    color: #0073ea;
}

.tab-icon-more,
.mobile-more-sheet {
    display: none;
}

.crm-tab-submenu {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 132px;
    padding: 7px;
    border-radius: 12px;
    border: 1px solid rgba(151, 173, 211, 0.16);
    background: rgba(19, 25, 39, 0.94);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px) scale(0.98);
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 1000500;
}

.crm-nav-tab-wrap {
    z-index: 210;
}

.crm-nav-tab-wrap::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    width: 14px;
    height: 100%;
}

.crm-tab-submenu-static {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 132px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(151, 173, 211, 0.2);
    background: rgba(19, 25, 39, 0.97);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-4px) scale(0.985);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    z-index: 1000500;
}

.crm-nav-tab-wrap:hover .crm-tab-submenu-static,
.crm-nav-tab-wrap:focus-within .crm-tab-submenu-static,
.crm-tab-submenu-static:hover,
.crm-tab-submenu-static:focus-within {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.crm-tab-submenu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.crm-tab-submenu-floating {
    position: fixed;
    z-index: 4000002;
}

.crm-tab-submenu-btn {
    appearance: none;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #dce6f7;
    padding: 7px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    text-align: left;
    cursor: pointer;
}

.crm-tab-submenu-btn:hover,
.crm-tab-submenu-btn:focus-visible {
    background: rgba(88, 145, 255, 0.18);
    border-color: rgba(126, 170, 244, 0.24);
    color: #f4f8ff;
    outline: none;
}

.crm-tab-submenu-btn.is-active {
    background: rgba(88, 145, 255, 0.22);
    border-color: rgba(126, 170, 244, 0.3);
    color: #f6f9ff;
}

:root[data-theme="light"] .crm-tab-submenu {
    border-color: rgba(28, 45, 75, 0.14);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 30px rgba(17, 31, 56, 0.14);
}

:root[data-theme="light"] .crm-tab-submenu-static {
    border-color: rgba(28, 45, 75, 0.14);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 30px rgba(17, 31, 56, 0.14);
}

:root[data-theme="light"] .crm-tab-submenu-btn {
    background: rgba(244, 247, 252, 0.94);
    color: #28415f;
}

:root[data-theme="light"] .crm-tab-submenu-btn:hover,
:root[data-theme="light"] .crm-tab-submenu-btn:focus-visible {
    background: rgba(74, 121, 211, 0.12);
    border-color: rgba(74, 121, 211, 0.18);
    color: #1d3555;
}

:root[data-theme="light"] .crm-tab-submenu-btn.is-active {
    background: rgba(74, 121, 211, 0.14);
    border-color: rgba(74, 121, 211, 0.2);
    color: #18304f;
}

.logout-btn {
    margin-top: auto;
    margin-bottom: 8px;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    padding: 8px 6px;
    border-radius: 16px;
    border: 1px solid rgba(255, 94, 94, 0.35);
    background: linear-gradient(135deg, rgba(255, 86, 86, 0.24) 0%, rgba(255, 86, 86, 0.08) 100%);
    color: #ffb8b8;
    cursor: pointer;
    transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.logout-btn:hover {
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.36) 0%, rgba(255, 59, 48, 0.16) 100%);
    border-color: rgba(255, 120, 120, 0.6);
    color: #ff3b30;
    transform: translateY(-2px) scale(1.02);
}

.logout-icon-svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* SECTION HEADERS - EINHEITLICHES DESIGN */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 16px;
    padding-right: calc(58px + var(--user-quick-safe-space));
    border-bottom: 1px solid rgba(0, 115, 234, 0.2);
}

.section-header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.subsection-header {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

.sidebar-title {
    margin: 0 0 15px 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Archived Items Styling */
.archived-item {
    opacity: 0.6 !important;
    background-color: rgba(100, 100, 100, 0.1) !important;
}

.archived-item:hover {
    opacity: 0.8 !important;
    background-color: rgba(100, 100, 100, 0.15) !important;
}

:root {
    --user-quick-safe-right: 104px;
    --user-quick-safe-gap: 14px;
    --user-quick-safe-space: calc(var(--user-quick-safe-right) + var(--user-quick-safe-gap));
}

.content-area { flex-grow: 1; position: relative; overflow: hidden; }

.user-quick-menu-wrap {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 100130;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.user-notifications-trigger {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--theme-user-control-border);
    background: var(--theme-user-control-bg);
    color: var(--theme-user-control-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--theme-user-control-shadow);
    position: relative;
}

.user-notifications-trigger:hover {
    color: var(--theme-user-control-hover-color);
    border-color: var(--theme-user-control-hover-border);
}

.user-notifications-trigger::after {
    content: "";
    position: absolute;
    left: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    opacity: 0;
    transition: opacity .16s ease, background-color .16s ease, border-color .16s ease;
    pointer-events: none;
}

.my-work-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: auto;
    scrollbar-gutter: stable;
    padding-right: 8px;
}

.my-work-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding-bottom: 24px;
}

.me-checklist-widget {
    max-width: 980px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(62, 133, 248, 0.16) 0%, transparent 46%),
        var(--ui-surface-soft-03);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.me-checklist-widget > header h3 {
    margin: 0;
    font-size: 15px;
}

.me-checklist-widget > header p {
    margin: 4px 0 0;
    font-size: 12px;
    opacity: 0.78;
}

.me-checklist-composer {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) 150px auto auto;
    gap: 8px;
    align-items: center;
}

.me-checklist-composer textarea {
    grid-column: 1 / -1;
}

.me-checklist-composer input[type="text"],
.me-checklist-composer input[type="date"],
.me-checklist-composer select,
.me-checklist-composer textarea,
.me-checklist-item-main input,
.me-checklist-item-main textarea,
.me-checklist-item-controls select,
.me-checklist-item-controls input[type="date"] {
    width: 100%;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 20, 33, 0.68);
    color: var(--monday-text);
    padding: 7px 9px;
    font: inherit;
    font-size: 12px;
}

.me-checklist-composer textarea,
.me-checklist-item-main textarea {
    min-height: 58px;
    resize: vertical;
}

.me-checklist-dropzone {
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.04);
    padding: 10px;
    text-align: center;
    font-size: 12px;
    opacity: 0.82;
    transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}

.me-checklist-dropzone.is-over {
    border-color: rgba(69, 212, 131, 0.9);
    background: rgba(69, 212, 131, 0.16);
    opacity: 1;
}

.me-checklist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.me-checklist-item {
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    background: rgba(7, 10, 18, 0.5);
    padding: 8px;
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto;
    gap: 8px;
}

.me-checklist-item-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.me-checklist-item-controls {
    min-width: 290px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.me-checklist-convert {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.me-checklist-team-picker {
    position: relative;
}

.me-checklist-team-picker > summary {
    list-style: none;
    cursor: pointer;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--ui-surface-soft-02);
    min-height: 32px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.me-checklist-team-picker > summary::-webkit-details-marker {
    display: none;
}

.me-checklist-team-options {
    margin-top: 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--ui-surface-soft-03);
    padding: 8px;
    max-height: 180px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.me-checklist-team-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.me-checklist-widget-clean {
    background: var(--ui-surface-soft-02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px;
    gap: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.me-checklist-list-clean {
    border-top: 1px solid rgba(171, 182, 204, 0.35);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;
    padding-right: 12px;
    padding-bottom: 24px;
    scrollbar-gutter: stable;
}

.me-checklist-list-archived {
    flex: 0 0 auto;
    max-height: 140px;
    margin-top: 6px;
}

.me-checklist-archive-toggle-wrap {
    padding-top: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.me-checklist-archive-toggle {
    border: 0;
    background: transparent;
    color: #6f86ac;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 0;
}

.me-checklist-archive-clear {
    border: 0;
    background: transparent;
    color: #d45b65;
    font-size: 12px;
    font-weight: 400;
    border-radius: 0;
    padding: 2px 0;
    cursor: pointer;
}

.me-checklist-archive-clear:hover {
    color: #e2757e;
    text-decoration: underline;
}

.me-checklist-row-card {
    border-bottom: 1px solid rgba(171, 182, 204, 0.35);
    position: relative;
    transition: background-color .12s ease, opacity .18s ease, transform .24s ease;
}

.me-checklist-row-card.has-open-date-menu {
    z-index: 500;
}

.me-checklist-row-card.has-open-priority-menu {
    z-index: 520;
}

.me-checklist-row-card.has-open-team-picker {
    z-index: 560;
}

.me-checklist-row-card:has(.me-checklist-team-cell:hover),
.me-checklist-row-card:has(.me-checklist-team-cell:focus-within) {
    z-index: 560;
}

.me-checklist-row-card.is-archived {
    opacity: 0.78;
}

.me-checklist-row-card.is-archived .me-checklist-row-title {
    text-decoration: line-through;
}

.me-checklist-row-card.is-dragging {
    opacity: 0.55;
    /* avoid intercepting pointer events while the row is being dragged */
    pointer-events: none;
}

.me-checklist-row-card.drop-before::before,
.me-checklist-row-card.drop-after::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 0;
    height: 2px;
    background: rgba(70, 139, 255, 0.95);
    border-radius: 999px;
    /* make the drop indicator a bit more obvious */
    z-index: 20;
    box-shadow: 0 0 0 3px rgba(70, 139, 255, 0.18);
}

.me-checklist-row-card.drop-before::before {
    top: -1px;
}

.me-checklist-row-card.drop-after::after {
    bottom: -1px;
}

.me-checklist-row-line {
    --me-checklist-actions-space: 292px;
    min-height: 40px;
    display: grid;
    grid-template-columns: 28px minmax(140px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 0 var(--me-checklist-actions-space) 0 4px;
    position: relative;
}

.me-checklist-row-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(210, 218, 236, 0.68);
    display: inline-block;
}

.me-checklist-row-circle-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    padding: 0;
    position: relative;
    cursor: pointer;
}

.me-checklist-row-circle-btn .me-checklist-row-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.me-checklist-row-check {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}

.me-checklist-row-title {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--monday-text);
    font-size: 13px;
    padding: 0;
    line-height: 1.2;
    min-width: 0;
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.me-checklist-row-title:focus {
    outline: none;
}

.me-checklist-edit-inline {
    display: none;
    align-items: center;
    justify-self: end;
    gap: 8px;
    grid-column: 3 / 5;
}

.me-checklist-edit-hint {
    white-space: nowrap;
}

.me-checklist-edit-cancel {
    justify-self: end;
}

.me-checklist-row-line.is-editing .me-checklist-row-title {
    height: 30px;
    border: 1px solid rgba(111, 150, 209, 0.55) !important;
    border-radius: 11px;
    background: rgba(15, 20, 38, 0.85) !important;
    color: var(--monday-text) !important;
    padding: 0 12px;
    box-shadow: none !important;
    text-overflow: clip;
    user-select: text;
}

.me-checklist-row-line.is-editing {
    padding-right: 4px;
    user-select: text;
}

.me-checklist-row-line.is-editing .me-checklist-row-title:focus {
    border-color: #6f96d1 !important;
    box-shadow: 0 0 0 3px rgba(111, 150, 209, 0.18) !important;
}

.me-checklist-row-line.is-editing .me-checklist-row-actions,
.me-checklist-row-line.is-editing .me-checklist-row-hover-convert {
    display: none;
}

.me-checklist-row-line.is-editing .me-checklist-edit-inline {
    display: inline-flex;
}

.me-checklist-row-details > summary {
    list-style: none;
    cursor: pointer;
    font-size: 11px;
    color: #89a1cd;
    padding: 0 0 8px 38px;
}

.me-checklist-row-details > summary::-webkit-details-marker {
    display: none;
}

.me-checklist-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    right: 8px;
    top: 6px;
    bottom: 6px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .14s ease;
    z-index: 20;
}

.me-checklist-quick-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.me-checklist-date-cell {
    --date-chip-width: 124px;
    width: var(--date-chip-width);
    min-width: var(--date-chip-width);
    max-width: var(--date-chip-width);
    position: relative;
    z-index: 1;
}

.me-checklist-date-trigger {
    width: var(--date-chip-width);
    min-width: var(--date-chip-width);
    max-width: var(--date-chip-width);
    height: 28px;
    border-radius: 6px;
    padding: 0 20px 0 8px;
    font-size: 10.5px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

.me-checklist-date-trigger.is-due-none,
.date-trigger.is-due-none {
    background: rgba(117, 117, 117, 0.24);
    border: 1px solid rgba(117, 117, 117, 0.62);
    color: #f1f1f1;
}

.me-checklist-date-trigger.is-due-today,
.date-trigger.is-due-today {
    background: var(--due-color-today);
    border: 2px dashed rgba(3, 127, 76, 0.78);
    color: #d8f5e7;
}

.me-checklist-date-trigger.is-due-tomorrow,
.date-trigger.is-due-tomorrow {
    background: var(--due-color-tomorrow);
    border: 1px solid rgba(102, 204, 255, 0.72);
    color: #eff9ff;
}

.me-checklist-date-trigger.is-due-week,
.date-trigger.is-due-week {
    background: var(--due-color-week);
    border: 1px solid rgba(0, 126, 181, 0.72);
    color: #d8f0ff;
}

.me-checklist-date-trigger.is-due-next-week,
.date-trigger.is-due-next-week {
    background: var(--due-color-next-week);
    border: 1px solid rgba(102, 204, 255, 0.78);
    color: #eff9ff;
}

.me-checklist-date-trigger.is-due-later,
.date-trigger.is-due-later {
    background: var(--due-color-later);
    border: 1px solid rgba(117, 117, 117, 0.5);
    color: #c6cedb;
}

.me-checklist-date-trigger.is-due-overdue,
.date-trigger.is-due-overdue {
    background: var(--due-color-overdue);
    border: 1px solid rgba(157, 80, 221, 0.78);
    color: #f2e5ff;
}

.me-checklist-date-trigger.is-due-overdue.is-due-same-day-timeoverdue,
.date-trigger.is-due-overdue.is-due-same-day-timeoverdue {
    border: 2px dashed rgba(3, 127, 76, 0.78);
}

.date-board-cell.is-due-overdue {
    background: var(--due-color-overdue);
}

.date-board-cell.is-due-today {
    background: var(--due-color-today);
}

.date-board-cell.is-due-tomorrow {
    background: var(--due-color-tomorrow);
}

.date-board-cell.is-due-week {
    background: var(--due-color-week);
}

.date-board-cell.is-due-next-week {
    background: var(--due-color-next-week);
}

.me-checklist-quick-date-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.me-checklist-priority-quick {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    /* make sure the control itself is above other row content */
    z-index: 110;
}

.me-checklist-priority-quick.active,
.me-checklist-priority-quick:hover,
.me-checklist-priority-quick:focus-within {
    z-index: 420;
}

.me-checklist-priority-quick {
    isolation: isolate;
}

.me-checklist-prio-current {
    --prio-color: #8ca0bf;
    --prio-bg: color-mix(in srgb, var(--prio-color) 14%, transparent);
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--prio-color) 44%, rgba(168, 182, 207, 0.42));
    background: var(--prio-bg);
    color: var(--prio-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: auto;
    transition: opacity .12s ease;
    cursor: pointer;
}

.me-checklist-prio-current.is-urgent { --prio-color: #c6462b; }
.me-checklist-prio-current.is-high { --prio-color: #d89440; }
.me-checklist-prio-current.is-normal { --prio-color: #8f98ab; }
.me-checklist-prio-current.is-low { --prio-color: #4f75c9; }

.me-checklist-prio-options {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: calc(100% + 1px);
    bottom: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(168, 182, 207, 0.34);
    background: rgba(23, 28, 41, 0.96);
    box-shadow: 0 8px 18px rgba(5, 9, 18, 0.36);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, visibility 0s linear .12s;
    /* make sure priority popup floats above the row when open */
    z-index: 400000;
}

.me-checklist-priority-quick.active .me-checklist-prio-options {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.me-checklist-prio-btn {
    --prio-color: #8ca0bf;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--prio-color) 44%, transparent);
    background: transparent;
    color: var(--prio-color);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease;
}

.me-checklist-prio-btn:hover {
    transform: translateY(-1px) scale(1.03);
    background: color-mix(in srgb, var(--prio-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--prio-color) 62%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--prio-color) 18%, transparent);
}

.me-checklist-prio-btn.active {
    background: color-mix(in srgb, var(--prio-color) 16%, transparent);
    border-color: color-mix(in srgb, var(--prio-color) 80%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prio-color) 56%, transparent);
}

.me-checklist-prio-btn.is-urgent {
    --prio-color: #c6462b;
}

.me-checklist-prio-btn.is-high {
    --prio-color: #d89440;
}

.me-checklist-prio-btn.is-normal {
    --prio-color: #8f98ab;
}

.me-checklist-prio-btn.is-low {
    --prio-color: #4f75c9;
}

/* simplify priority icons and use explicit characters - clearer semantics */
.me-checklist-prio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 1;
    /* allow color to be inherited from parent buttons */
    color: currentColor;
}

.me-checklist-prio-icon.icon-exclamation::before {
    content: "!";
    font-weight: 700;
}

.me-checklist-prio-icon.icon-up::before {
    content: "↑";
}

.me-checklist-prio-icon.icon-dot::before {
    content: "•";
}

.me-checklist-prio-icon.icon-down::before {
    content: "↓";
}

.me-checklist-priority-quick.active .me-checklist-prio-current,
.me-checklist-priority-quick:focus-within .me-checklist-prio-current {
    opacity: 1;
}

.me-checklist-row-card:hover .me-checklist-row-actions,
.me-checklist-row-card.is-convert-open .me-checklist-row-actions {
    opacity: 1;
    pointer-events: auto;
}

.me-checklist-row-hover-convert {
    border: 0;
    border-radius: 10px;
    background: #080a12;
    color: #fff;
    font-size: 12px;
    padding: 7px 12px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    position: absolute;
    right: 78px;
    top: -36px;
    z-index: 3;
}

.me-checklist-row-card.is-convert-open .me-checklist-row-hover-convert {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.me-checklist-row-card.is-completing {
    background: rgba(151, 167, 141, 0.18);
}

.me-checklist-row-card.is-completing .me-checklist-row-title {
    text-decoration: line-through;
    opacity: 0.78;
}

.me-checklist-row-card.is-completing .me-checklist-row-circle {
    background: #4ea94b;
    border-color: #4ea94b;
}

.me-checklist-row-card.is-completing .me-checklist-row-check {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.me-checklist-row-card.is-unassigning-self {
    background: rgba(151, 160, 176, 0.1);
    filter: grayscale(0.35);
    opacity: 1;
    transform: translateX(0);
    pointer-events: none;
    animation: me-checklist-unassign-fade 3s ease forwards;
}

.me-checklist-row-card.is-unassigning-self .me-checklist-row-line {
    opacity: 0.34;
}

.me-checklist-unassign-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #4d5f7d;
    background: rgba(245, 248, 255, 0.42);
    border-radius: 10px;
    padding: 0 20px;
    white-space: normal;
    z-index: 35;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    animation: me-checklist-unassign-hint-fade 3s ease forwards;
}

@keyframes me-checklist-unassign-fade {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    72% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(10px);
    }
}

@keyframes me-checklist-unassign-hint-fade {
    0% {
        opacity: 0;
        transform: translateY(2px);
    }
    12% {
        opacity: 1;
        transform: translateY(0);
    }
    68% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-2px);
    }
}

.me-checklist-icon-btn {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid rgba(184, 202, 232, 0.42);
    background: rgba(238, 244, 255, 0.11);
    color: #d7e4ff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.me-checklist-icon-btn:hover,
.me-checklist-icon-btn:focus-visible {
    border-color: rgba(121, 166, 255, 0.78);
    background: rgba(121, 166, 255, 0.18);
    color: #ffffff;
}

.me-checklist-drag-handle {
    cursor: grab;
    opacity: 0.88;
    background: rgba(238, 244, 255, 0.09);
    border-color: rgba(184, 202, 232, 0.34);
    color: #c8d8f4;
    width: 22px;
    height: 22px;
    font-size: 12px;
}

.me-checklist-drag-handle:hover,
.me-checklist-drag-handle:focus-visible {
    opacity: 1;
    background: rgba(121, 166, 255, 0.18);
    border-color: rgba(121, 166, 255, 0.78);
    color: #ffffff;
}

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

.me-checklist-drag-handle.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.me-checklist-widget-clean > header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding-right: 12px;
}

.me-checklist-header-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.me-checklist-autoentries-btn {
    min-height: 22px;
    padding: 0 8px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    margin: 0;
}

.me-checklist-widget-clean > header h3 {
    margin: 0;
    flex: 0 0 auto;
    order: 0;
}

.me-checklist-search {
    width: min(420px, 46%);
    margin-left: auto;
    border: 1px solid rgba(171, 182, 204, 0.36);
    background: rgba(19, 24, 39, 0.86);
    color: var(--monday-text);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    padding: 9px 12px;
    order: 1;
}

.me-checklist-inline-sort {
    min-height: 18px;
    margin: -4px 8px 4px 0;
    display: flex;
    justify-content: flex-end;
}

.me-checklist-scroll-sync {
    min-width: 0;
}

.me-checklist-inline-sort-controls {
    display: grid;
    grid-template-columns: 50px 124px 24px 58px;
    align-items: center;
    gap: 6px;
}

.me-checklist-inline-sort-team-label {
    font-size: 10px;
    line-height: 1;
    color: #9fb0cf;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

:root[data-theme="light"] .me-checklist-inline-sort-team-label {
    color: #6f81a3;
}

.me-checklist-inline-sort-btn {
    font-size: 10px;
    line-height: 1;
    color: #9fb0cf;
    min-height: 15px;
    justify-content: center;
    max-width: none;
    overflow: visible;
}

.me-checklist-inline-sort-btn-date {
    width: 124px;
}

.me-checklist-inline-sort-btn .board-sort-indicator {
    font-size: 9px;
    width: 8px;
    flex: 0 0 8px;
}

.me-checklist-inline-sort-btn.active {
    color: #dfe8ff;
}

.me-checklist-auto-rules-section {
    margin: 12px 0 8px;
    border: 1px solid rgba(171, 182, 204, 0.28);
    border-radius: 12px;
    background: rgba(19, 24, 39, 0.72);
    overflow: hidden;
}

.me-checklist-auto-rules-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
}

.me-checklist-auto-rules-toggle {
    border: 0;
    background: transparent;
    color: #dce7fb;
    font: 600 13px/1.2 'Figtree', sans-serif;
    cursor: pointer;
    padding: 0;
}

.me-checklist-auto-rules-body {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
}

.me-checklist-auto-rule-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(31, 39, 58, 0.72);
    border: 1px solid rgba(171, 182, 204, 0.18);
}

.me-checklist-auto-rule-card.is-inactive {
    opacity: 0.7;
}

.me-checklist-auto-rule-main {
    display: grid;
    gap: 4px;
}

.me-checklist-auto-rule-main strong {
    color: #f2f6ff;
    font-size: 13px;
}

.me-checklist-auto-rule-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: #9fb0cf;
    font-size: 11px;
}

.me-checklist-auto-rule-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.me-checklist-auto-rule-form {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(11, 16, 28, 0.5);
    border: 1px solid rgba(171, 182, 204, 0.18);
}

.me-checklist-auto-rule-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #cdd8ed;
    font-size: 11px;
    font-weight: 600;
}

.me-checklist-auto-rule-inline-hint {
    margin-left: 8px;
    color: #9fb0cf;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
}

.me-checklist-auto-rule-form .project-create-team-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.me-checklist-auto-rule-team-btn {
    appearance: none;
    width: auto;
    text-align: left;
}

.me-checklist-auto-rule-team-name {
    display: block;
}

.me-checklist-auto-rule-form input,
.me-checklist-auto-rule-form select,
.me-checklist-auto-rule-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(171, 182, 204, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--monday-text);
    padding: 8px 10px;
    font: inherit;
}

.me-checklist-auto-rule-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.me-checklist-auto-rule-title-field {
    grid-column: span 2;
}

.me-checklist-auto-rule-team-label {
    display: block;
    margin-bottom: 6px;
}

.me-checklist-auto-rule-team-list {
    display: flex;
    flex-wrap: nowrap;
}

.me-checklist-auto-rule-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.me-checklist-auto-rule-switch-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.me-checklist-auto-rule-active-toggle {
    height: 22px;
}

.me-checklist-auto-rule-apply-switch {
    min-width: 0;
}

.me-checklist-auto-rule-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.me-checklist-auto-rules-drawer {
    max-width: 760px;
}

.me-checklist-auto-rules-drawer-body {
    padding: 14px 18px 18px;
    overflow: auto;
}

.me-checklist-auto-rules-head-drawer {
    padding: 0;
}

.me-checklist-inline-sort-btn:first-child {
    width: 118px;
    justify-content: center;
}

.me-checklist-inline-sort-btn-date {
    width: 118px;
    justify-content: flex-start;
    padding-left: 27px;
}

.me-checklist-inline-sort-btn:last-child {
    width: 68px;
    justify-content: center;
}

:root[data-theme="light"] .me-checklist-inline-sort-btn {
    color: #6f81a3;
}

:root[data-theme="light"] .me-checklist-inline-sort-btn.active {
    color: #2b466d;
}

:root[data-theme="light"] .me-checklist-auto-rules-section {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(131, 149, 181, 0.22);
}

:root[data-theme="light"] .me-checklist-auto-rules-toggle {
    color: #2b466d;
}

:root[data-theme="light"] .me-checklist-auto-rule-card {
    background: rgba(244, 248, 254, 0.96);
    border-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .me-checklist-auto-rule-main strong {
    color: #203048;
}

:root[data-theme="light"] .me-checklist-auto-rule-meta {
    color: #6f81a3;
}

:root[data-theme="light"] .me-checklist-auto-rule-form {
    background: rgba(248, 251, 255, 0.96);
    border-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .me-checklist-auto-rule-form label {
    color: #526784;
}

:root[data-theme="light"] .me-checklist-auto-rule-form input,
:root[data-theme="light"] .me-checklist-auto-rule-form select,
:root[data-theme="light"] .me-checklist-auto-rule-form textarea {
    background: #ffffff;
    border-color: rgba(131, 149, 181, 0.24);
    color: #1f3048;
}

.me-checklist-search:focus {
    outline: none;
    border-color: rgba(120, 160, 220, 0.65);
    box-shadow: 0 0 0 2px rgba(120, 160, 220, 0.18);
}

@media (max-width: 720px) {
    .me-checklist-widget-clean > header {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .me-checklist-inline-sort {
        margin-right: 0;
        margin-top: 0;
        justify-content: flex-start;
        min-height: 20px;
    }
    .me-checklist-inline-sort-controls {
        width: 100%;
        padding-right: 0;
        justify-content: flex-start;
    }
    .me-checklist-inline-sort-btn:first-child,
    .me-checklist-inline-sort-btn:last-child {
        width: auto;
    }
    .me-checklist-search {
        width: 100%;
        margin-left: 0;
    }
    .me-checklist-auto-rule-form-grid {
        grid-template-columns: 1fr;
    }
    .me-checklist-auto-rule-card {
        grid-template-columns: 1fr;
    }
    .me-checklist-auto-rule-actions {
        justify-content: flex-start;
    }
}

.me-checklist-convert-panel {
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
    margin: 0 8px 12px 38px;
    padding-top: 10px;
    display: grid;
    grid-template-columns: 1fr 170px 1fr;
    gap: 8px;
}

.me-checklist-convert-panel .me-checklist-team-picker,
.me-checklist-convert-panel .me-checklist-convert-actions,
.me-checklist-convert-panel textarea {
    grid-column: 1 / -1;
}

.me-checklist-convert-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.me-checklist-addline {
    min-height: 40px;
    display: grid;
    grid-template-columns: 28px minmax(140px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
    border-top: 1px solid rgba(171, 182, 204, 0.35);
    background: rgba(19, 24, 39, 0.98);
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
    margin-right: 12px;
}

.me-checklist-addline .me-checklist-row-circle-btn {
    cursor: default;
}

.me-checklist-addline.is-top {
    border-top: 0;
    border-bottom: 2px solid rgba(171, 182, 204, 0.35);
    /* more breathing room above the first row */
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 0;
    margin-left: 0;
    border-radius: 8px;
    border: 2px solid rgba(171, 182, 204, 0.38);
    box-shadow: none;
}

.me-checklist-addline.is-over {
    background: rgba(61, 134, 255, 0.12);
    border-color: rgba(61, 134, 255, 0.4);
    box-shadow: inset 0 0 0 1px rgba(61, 134, 255, 0.4);
}

.me-checklist-addline:not(.is-composer) {
    cursor: pointer;
}

.me-checklist-addline:not(.is-composer)::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(210, 218, 236, 0.68);
    display: inline-block;
    justify-self: center;
    grid-column: 1;
}

.me-checklist-addline:not(.is-composer):hover {
    border-color: rgba(120, 160, 220, 0.55);
    box-shadow: inset 0 0 0 1px rgba(120, 160, 220, 0.35);
}

.me-checklist-addline input {
    border: 0;
    background: transparent;
    color: var(--monday-text);
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    padding: 0;
    border: 0 !important;
    box-shadow: none !important;
}

.me-checklist-addline.is-composer input {
    height: 30px;
    border: 1px solid rgba(111, 150, 209, 0.55) !important;
    border-radius: 11px;
    background: rgba(15, 20, 38, 0.85) !important;
    color: var(--monday-text) !important;
    padding: 0 12px;
    box-shadow: none !important;
}

.me-checklist-addline.is-composer input:focus {
    outline: none;
    border-color: #6f96d1 !important;
    box-shadow: 0 0 0 3px rgba(111, 150, 209, 0.18) !important;
}

.me-checklist-addline input::placeholder {
    color: #8fa2c4;
}

.me-checklist-addline input:focus {
    outline: none;
}

.me-checklist-addhint {
    font-size: 12px;
    color: #8fa2c4;
    white-space: nowrap;
}

.me-checklist-addlink {
    border: 0;
    background: transparent;
    color: #9aa0a6;
    font-size: 12px;
    padding: 8px 0;
    cursor: pointer; /* make it clear that text is clickable */
    justify-self: start;
    grid-column: 2 / -1;
    text-align: left;
    width: 100%;
    font-weight: 500;
    letter-spacing: 0.1px;
}

.me-checklist-addlink.me-checklist-addrow-label {
    display: flex;
    align-items: center;
    min-height: 40px;
    line-height: 1.2;
    border-radius: 7px;
    box-sizing: border-box;
}

.me-checklist-addline:not(.is-composer) .me-checklist-addlink:hover {
    color: #fff;
}

.me-checklist-addclear {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #c7d3eb;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.me-checklist-addclear:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #eef3ff;
}

.me-checklist-addsubmit {
    min-width: 40px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(82, 139, 242, 0.55);
    background: rgba(56, 112, 214, 0.2);
    color: #eef4ff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.me-checklist-addsubmit:hover {
    background: rgba(66, 118, 213, 0.32);
    border-color: rgba(104, 157, 255, 0.8);
    color: #ffffff;
}

.me-checklist-composer-advanced > summary {
    list-style: none;
    cursor: pointer;
    font-size: 11px;
    color: #8fa2c4;
    padding-left: 4px;
}

.me-checklist-composer-advanced > summary::-webkit-details-marker {
    display: none;
}

:root[data-theme="light"] .me-checklist-widget {
    border-color: rgba(24, 44, 77, 0.12);
    background: var(--ui-surface-soft-03);
}

:root[data-theme="light"] .me-checklist-widget > header p {
    color: #385070;
    opacity: 1;
}

:root[data-theme="light"] .me-checklist-composer input[type="text"],
:root[data-theme="light"] .me-checklist-composer input[type="date"],
:root[data-theme="light"] .me-checklist-composer select,
:root[data-theme="light"] .me-checklist-composer textarea,
:root[data-theme="light"] .me-checklist-row-title,
:root[data-theme="light"] .me-checklist-addline input,
:root[data-theme="light"] .me-checklist-item-main input,
:root[data-theme="light"] .me-checklist-item-main textarea,
:root[data-theme="light"] .me-checklist-item-controls select,
:root[data-theme="light"] .me-checklist-item-controls input[type="date"] {
    border-color: rgba(24, 44, 77, 0.18);
    background: #ffffff;
    color: #122033;
}

:root[data-theme="light"] .me-checklist-composer input::placeholder,
:root[data-theme="light"] .me-checklist-composer textarea::placeholder,
:root[data-theme="light"] .me-checklist-item-main input::placeholder,
:root[data-theme="light"] .me-checklist-item-main textarea::placeholder {
    color: #6b7e97;
}

:root[data-theme="light"] .me-checklist-dropzone {
    border-color: rgba(28, 69, 123, 0.34);
    background: rgba(255, 255, 255, 0.82);
    color: #2a4263;
    opacity: 1;
}

:root[data-theme="light"] .me-checklist-dropzone.is-over {
    border-color: rgba(34, 165, 93, 0.78);
    background: rgba(40, 184, 104, 0.14);
}

:root[data-theme="light"] .me-checklist-list-clean,
:root[data-theme="light"] .me-checklist-row-card,
:root[data-theme="light"] .me-checklist-addline {
    border-color: rgba(24, 44, 77, 0.14);
}

:root[data-theme="light"] .me-checklist-addline.is-top {
    border-bottom-color: rgba(169, 181, 202, 0.35);
}

:root[data-theme="light"] .me-checklist-addline {
    background: white;
}

:root[data-theme="light"] .me-checklist-date-trigger.is-due-none,
:root[data-theme="light"] .date-trigger.is-due-none {
    background: rgba(117, 117, 117, 0.12);
    border: 1px solid rgba(117, 117, 117, 0.55);
    color: #4f4f4f;
}

:root[data-theme="light"] .me-checklist-date-trigger.is-due-today,
:root[data-theme="light"] .date-trigger.is-due-today {
    background: var(--due-color-today);
    border: 2px dashed rgba(3, 127, 76, 0.62);
    color: #0b5f3f;
}

:root[data-theme="light"] .me-checklist-date-trigger.is-due-tomorrow,
:root[data-theme="light"] .date-trigger.is-due-tomorrow {
    background: var(--due-color-tomorrow);
    border: 1px solid rgba(102, 204, 255, 0.62);
    color: #246f8f;
}

:root[data-theme="light"] .me-checklist-date-trigger.is-due-week,
:root[data-theme="light"] .date-trigger.is-due-week {
    background: var(--due-color-week);
    border: 1px solid rgba(0, 126, 181, 0.58);
    color: #14597e;
}

:root[data-theme="light"] .me-checklist-date-trigger.is-due-next-week,
:root[data-theme="light"] .date-trigger.is-due-next-week {
    background: var(--due-color-next-week);
    border: 1px solid rgba(102, 204, 255, 0.62);
    color: #246f8f;
}

:root[data-theme="light"] .me-checklist-date-trigger.is-due-later,
:root[data-theme="light"] .date-trigger.is-due-later {
    background: var(--due-color-later);
    border: 1px solid rgba(117, 117, 117, 0.42);
    color: #6f7f96;
}

:root[data-theme="light"] .me-checklist-date-trigger.is-due-overdue,
:root[data-theme="light"] .date-trigger.is-due-overdue {
    background: var(--due-color-overdue);
    border: 1px solid rgba(157, 80, 221, 0.62);
    color: #5f2e8f;
}

:root[data-theme="light"] .me-checklist-date-trigger.is-due-overdue.is-due-same-day-timeoverdue,
:root[data-theme="light"] .date-trigger.is-due-overdue.is-due-same-day-timeoverdue {
    border: 2px dashed rgba(3, 127, 76, 0.62);
}

:root[data-theme="light"] .date-board-cell.is-due-overdue {
    background: var(--due-color-overdue);
}

:root[data-theme="light"] .date-board-cell.is-due-today {
    background: var(--due-color-today);
}

:root[data-theme="light"] .date-board-cell.is-due-tomorrow {
    background: var(--due-color-tomorrow);
}

:root[data-theme="light"] .date-board-cell.is-due-week {
    background: var(--due-color-week);
}

:root[data-theme="light"] .date-board-cell.is-due-next-week {
    background: var(--due-color-next-week);
}

:root[data-theme="light"] .me-checklist-addline:not(.is-composer) .me-checklist-addlink {
    color: #5f7594;
}

:root[data-theme="light"] .me-checklist-addline:not(.is-composer) .me-checklist-addlink:hover {
    color: #2e5fae;
}

:root[data-theme="light"] .me-checklist-addlink.me-checklist-addrow-label {
    background: transparent;
}

:root[data-theme="light"] .me-checklist-row-circle {
    border-color: rgba(37, 69, 112, 0.2);
}

:root[data-theme="light"] .me-checklist-row-chip,
:root[data-theme="light"] .me-checklist-row-details > summary,
:root[data-theme="light"] .me-checklist-composer-advanced > summary {
    color: #5e7595;
}

:root[data-theme="light"] .me-checklist-row-hover-convert {
    background: #0f1724;
    color: #fff;
}

:root[data-theme="light"] .me-checklist-row-card.is-completing {
    background: rgba(165, 182, 158, 0.28);
}

:root[data-theme="light"] .me-checklist-row-card.drop-before::before,
:root[data-theme="light"] .me-checklist-row-card.drop-after::after {
    background: rgba(51, 120, 238, 0.95);
    box-shadow: 0 0 0 3px rgba(51, 120, 238, 0.15);
}

:root[data-theme="light"] .me-checklist-icon-btn {
    border-color: rgba(24, 44, 77, 0.22);
    background: rgba(24, 44, 77, 0.04);
    color: #2b4160;
}

:root[data-theme="light"] .me-checklist-icon-btn:hover,
:root[data-theme="light"] .me-checklist-icon-btn:focus-visible,
:root[data-theme="light"] .me-checklist-drag-handle:hover,
:root[data-theme="light"] .me-checklist-drag-handle:focus-visible {
    border-color: rgba(45, 98, 184, 0.38);
    background: rgba(45, 98, 184, 0.10);
    color: #24446f;
}

:root[data-theme="light"] .me-checklist-drag-handle {
    border-color: rgba(24, 44, 77, 0.16);
    background: rgba(24, 44, 77, 0.03);
    color: #4b6384;
}

:root[data-theme="light"] .me-checklist-search {
    border-color: rgba(24, 44, 77, 0.2);
    background: rgba(255, 255, 255, 0.94);
    color: #274163;
}

:root[data-theme="light"] .me-checklist-prio-btn {
    background: color-mix(in srgb, var(--prio-color) 10%, #ffffff);
}

:root[data-theme="light"] .me-checklist-prio-current {
    border-color: rgba(70, 93, 132, 0.22);
    background: color-mix(in srgb, var(--prio-color) 12%, rgba(255, 255, 255, 0.94));
}

:root[data-theme="light"] .me-checklist-prio-options {
    border-color: rgba(74, 96, 136, 0.2);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 22px rgba(19, 34, 58, 0.16);
}

:root[data-theme="light"] .me-checklist-convert-panel {
    border-color: rgba(24, 44, 77, 0.16);
}

:root[data-theme="light"] .me-checklist-addhint {
    color: #6f80a1;
}

:root[data-theme="light"] .me-checklist-addclear {
    background: rgba(24, 44, 77, 0.08);
    color: #344d70;
}

:root[data-theme="light"] .me-checklist-addclear:hover {
    background: rgba(24, 44, 77, 0.14);
    color: #1f3553;
}

:root[data-theme="light"] .me-checklist-addsubmit {
    background: rgba(66, 118, 213, 0.12);
    border-color: rgba(66, 118, 213, 0.28);
    color: #2c4a76;
}

:root[data-theme="light"] .me-checklist-addsubmit:hover {
    background: rgba(66, 118, 213, 0.18);
    border-color: rgba(66, 118, 213, 0.4);
    color: #173357;
}

:root[data-theme="light"] .me-checklist-addline.is-over {
    background: rgba(36, 118, 255, 0.1);
}

:root[data-theme="light"] .me-checklist-addline.is-composer input {
    border-color: #8daadd !important;
    background: #f2f5fb !important;
    color: #122033 !important;
}

:root[data-theme="light"] .me-checklist-addline.is-composer input:focus {
    border-color: #6f95d3 !important;
    box-shadow: 0 0 0 3px rgba(79, 125, 204, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

:root[data-theme="light"] .me-checklist-row-line.is-editing .me-checklist-row-title {
    background: #f2f5fb !important;
    color: #122033 !important;
    border-color: #8daadd !important;
}

:root[data-theme="light"] .me-checklist-row-line.is-editing .me-checklist-row-title:focus {
    border-color: #6f95d3 !important;
    box-shadow: 0 0 0 3px rgba(79, 125, 204, 0.2) !important;
}

:root[data-theme="light"] .me-checklist-list-clean,
:root[data-theme="light"] .me-checklist-row-card,
:root[data-theme="light"] .me-checklist-addline {
    border-color: rgba(169, 181, 202, 0.35);
}

.me-checklist-list-clean::-webkit-scrollbar {
    width: 14px;
}

.me-checklist-list-clean::-webkit-scrollbar-track {
    background: rgba(88, 103, 132, 0.14);
    border-radius: 999px;
    margin: 4px 0;
}

.me-checklist-list-clean::-webkit-scrollbar-thumb {
    background: rgba(133, 149, 178, 0.52);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.me-checklist-list-clean::-webkit-scrollbar-thumb:hover {
    background: rgba(152, 170, 201, 0.62);
    background-clip: padding-box;
}

.me-checklist-convert-drawer {
    width: min(var(--app-dialog-panel-width), calc(100vw - 24px));
    max-width: min(var(--app-dialog-panel-width), calc(100vw - 24px));
}

.me-checklist-convert-body {
    padding: 14px 18px 18px;
    overflow: auto;
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
}

.me-checklist-convert-drawer-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.me-checklist-convert-top-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.me-checklist-convert-assignment-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.me-checklist-convert-top-field {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    align-content: start;
}

.me-checklist-convert-right-pane {
    align-content: start;
}

.me-checklist-convert-right-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 8px;
    padding: 9px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.me-checklist-convert-top-field > label,
.me-checklist-convert-top-field > .me-checklist-convert-field-label {
    font-size: 11px;
    opacity: 0.78;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.me-checklist-convert-drawer-form > label,
.me-checklist-convert-drawer-form > .me-checklist-convert-field-label {
    font-size: 11px;
    opacity: 0.78;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.me-checklist-convert-drawer-form input,
.me-checklist-convert-drawer-form select {
    min-height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: var(--monday-text);
    padding: 0 10px;
}

.me-checklist-convert-drawer-form .modal-search-select-input,
.me-checklist-convert-drawer-form .board-search-select-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 36px;
    border-radius: 9px;
}

.me-checklist-convert-date-cell {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.me-checklist-convert-date-input {
    width: 100%;
    border-radius: 0;
    border: 1px solid rgba(117, 117, 117, 0.62);
    background: rgba(117, 117, 117, 0.24);
    color: #f1f1f1;
    text-align: center;
    justify-content: center;
    cursor: pointer;
}

.me-checklist-convert-date-cell .date-trigger {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 34px;
}

.me-checklist-convert-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.85;
}

.me-checklist-convert-date-input::-webkit-datetime-edit {
    text-transform: none;
}

.me-checklist-convert-team-list {
    display: none;
}

.me-checklist-convert-team-cell {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0;
    border-radius: 0;
}

.me-checklist-convert-team-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.me-checklist-convert-date-menu {
    width: min(340px, calc(100vw - 16px));
}

.me-checklist-convert-team-cell .team-picker {
    min-width: 300px;
    max-height: min(420px, calc(100vh - 120px));
    background: var(--ui-surface-soft-03);
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.me-checklist-convert-team-cell .team-picker::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.me-checklist-convert-target-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.me-checklist-convert-target-row .modal-search-select-input,
.me-checklist-convert-target-row .board-search-select-input {
    flex: 1;
}

.me-checklist-convert-target-clear {
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

.me-checklist-convert-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.me-checklist-convert-type-row .modal-search-select-input,
.me-checklist-convert-type-row .board-search-select-input {
    flex: 1;
}

.me-checklist-convert-type-clear {
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

.me-checklist-convert-status-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.me-checklist-convert-status-cell {
    width: 100%;
}

.me-checklist-convert-status-cell .status-pill-trigger {
    min-width: 180px;
}

.me-checklist-convert-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 6px;
}

:root[data-theme="light"] .me-checklist-convert-drawer-form input,
:root[data-theme="light"] .me-checklist-convert-drawer-form select {
    border-color: rgba(24, 44, 77, 0.18);
    background: rgba(24, 44, 77, 0.04);
    color: #223753;
}

:root[data-theme="light"] .me-checklist-convert-date-input {
    border-color: rgba(92, 112, 145, 0.4);
    background: rgba(210, 220, 239, 0.55);
    color: #1f3553;
}

:root[data-theme="light"] .me-checklist-convert-body {
    background: var(--overlay-panel);
}

:root[data-theme="light"] .me-checklist-convert-right-stack {
    border-color: rgba(24, 44, 77, 0.16);
    background: rgba(24, 44, 77, 0.03);
}

:root[data-theme="light"] .me-checklist-convert-team-list {
    border-color: rgba(24, 44, 77, 0.16);
    background: rgba(24, 44, 77, 0.02);
}

:root[data-theme="light"] .me-checklist-convert-team-cell:hover {
    background: transparent;
}

:root[data-theme="light"] .me-checklist-item {
    border-color: rgba(24, 44, 77, 0.14);
    background: var(--ui-surface-soft-03);
}

:root[data-theme="light"] .me-checklist-team-picker > summary {
    border-color: rgba(24, 44, 77, 0.18);
    background: var(--ui-surface-soft-02);
    color: #1c2f46;
}

:root[data-theme="light"] .me-checklist-team-options {
    border-color: rgba(24, 44, 77, 0.18);
    background: var(--ui-surface-soft-02);
}

:root[data-theme="light"] .my-work-item {
    border-color: rgba(24, 44, 77, 0.12);
    border-left-color: var(--my-work-source-color, rgba(50, 75, 112, 0.32));
    background: rgba(255, 255, 255, 0.88);
}

:root[data-theme="light"] .my-work-source-badge {
    background: color-mix(in srgb, var(--my-work-source-color) 14%, #ffffff 86%);
    color: color-mix(in srgb, var(--my-work-source-color) 72%, #15253a 28%);
}

:root[data-theme="light"] .my-work-item.is-auto-hint {
    background: rgba(246, 249, 255, 0.96);
    border-color: rgba(86, 118, 170, 0.18);
}

:root[data-theme="light"] .my-work-panel-summary-pill.is-dimmed {
    opacity: 0.5;
}

:root[data-theme="light"] .my-work-panel-summary-reset {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(166, 185, 214, 0.72);
    color: #375277;
}

:root[data-theme="light"] .my-work-group {
    background: var(--ui-surface-shade-25);
}

:root[data-theme="light"] .my-work-item-main p {
    color: #3d5677;
    opacity: 1;
}

:root[data-theme="light"] .my-work-item-reminder-note.is-due-overdue {
    color: #9f55b5;
}

:root[data-theme="light"] .my-work-item-reminder-note.is-due-today {
    color: #4d8766;
}

:root[data-theme="light"] .my-work-item-reminder-note.is-due-tomorrow {
    color: #a98217;
}

:root[data-theme="light"] .my-work-item-reminder-note.is-due-week,
:root[data-theme="light"] .my-work-item-reminder-note.is-due-next-week,
:root[data-theme="light"] .my-work-item-reminder-note.is-due-later {
    color: #4d78a8;
}

:root[data-theme="light"] .my-work-empty {
    border-color: rgba(24, 44, 77, 0.2);
    background: rgba(255, 255, 255, 0.72);
    color: #223753;
    opacity: 1;
}

.my-work-layout {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
    gap: 12px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 100%;
}

.my-work-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.my-work-column {
    min-width: 0;
}

.my-work-column-main {
    display: flex;
    min-height: 0;
}

.my-work-column-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.my-work-panel {
    min-width: 0;
    box-sizing: border-box;
}

.my-work-panel,
.my-work-auto-group,
.my-work-panel-checklist {
    position: relative;
}

.my-work-panel-checklist {
    width: 100%;
    height: calc(100vh - 109px);
    height: calc(100dvh - 109px);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.my-work-panel-header {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.my-work-panel-body {
    min-width: 0;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.my-work-panel-body-checklist {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 0 32px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

.my-work-panel.is-collapsed .my-work-panel-body {
    display: none;
}

.my-work-panel-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.my-work-panel-summary-row {
    min-width: 0;
    grid-column: 1 / -1;
}

.my-work-panel-title-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.my-work-panel-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
}

.my-work-panel-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.my-work-panel-summary-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 22px;
    box-sizing: border-box;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    color: #f3f7ff;
    font-weight: 600;
}

button.my-work-panel-summary-pill {
    appearance: none;
    cursor: pointer;
}

.my-work-panel-summary-pill.is-active {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.my-work-panel-summary-pill.is-dimmed {
    opacity: 0.62;
    filter: grayscale(0.08);
}

.my-work-panel-summary-pill strong {
    font-size: 10px;
    color: inherit;
}

.my-work-panel-summary-pill.is-overdue {
    border-color: var(--due-color-overdue);
    background: var(--due-color-overdue);
    color: #f6f8ff;
}

.my-work-panel-summary-pill.is-today {
    border-color: var(--due-color-today);
    background: var(--due-color-today);
    color: #f6f8ff;
}

.my-work-panel-summary-pill.is-tomorrow {
    border-color: var(--due-color-tomorrow);
    background: var(--due-color-tomorrow);
    color: #f6f8ff;
}

.my-work-panel-summary-pill.is-week {
    border-color: var(--due-color-week);
    background: var(--due-color-week);
    color: #f6f8ff;
}

.my-work-panel-summary-pill.is-nextweek {
    border-color: var(--due-color-next-week);
    background: var(--due-color-next-week);
    color: #f6f8ff;
}

.my-work-panel-summary-pill.is-later {
    border-color: var(--due-color-later);
    background: var(--due-color-later);
    color: #f6f8ff;
}

.my-work-panel-summary-reset {
    display: none;
    align-items: center;
    justify-content: center;
    height: 22px;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #c7d4e8;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.my-work-panel-summary-reset.is-visible {
    display: inline-flex;
}

.my-work-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.my-work-panel-toggle {
    display: inline-flex;
    justify-self: end;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 26px;
    min-width: 54px;
    padding: 0 6px 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.my-work-panel-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 10px;
    font-weight: 700;
}

.my-work-panel-toggle-icon {
    width: 18px;
    text-align: center;
    font-size: 15px;
    line-height: 1;
}

.my-work-panel-header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.my-work-checklist-search-row {
    padding: 0 0 2px;
}

.my-work-checklist-search-row .me-checklist-search {
    width: 100%;
    margin-left: 0;
}

.my-work-checklist-header-search {
    width: 170px;
    max-width: min(32vw, 280px);
    margin-left: 0;
}

.my-work-layout-left,
.my-work-layout-right {
    min-width: 0;
}

.my-work-layout-left {
    display: flex;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

.my-work-layout-left.is-checklist-collapsed,
.my-work-column-main.is-checklist-collapsed {
    min-height: 0;
}

.my-work-layout-left .me-checklist-widget,
.my-work-layout-left .me-checklist-widget-clean {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.my-work-layout-left .me-checklist-list-clean {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;
    padding-right: 0;
    scrollbar-gutter: auto;
    -webkit-overflow-scrolling: touch;
}

.my-work-layout-left .me-checklist-scroll-sync {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.my-work-panel-checklist.is-collapsed {
    width: 100%;
    max-width: 100%;
    height: auto;
    align-self: flex-start;
    min-height: 0;
    flex: 0 0 auto;
}

@supports selector(:has(*)) {
    .my-work-layout-left:has(> .my-work-panel-checklist.is-collapsed),
    .my-work-column-main:has(> .my-work-panel-checklist.is-collapsed) {
        min-height: 0;
    }
}

.my-work-layout-left .me-checklist-widget-clean {
    background: transparent;
}

.my-work-panel-body-checklist .me-checklist-widget-clean > header h3 {
    display: none;
}

.my-work-layout-right {
    padding-right: 4px;
    max-height: calc(100vh - 109px);
    max-height: calc(100dvh - 109px);
    overflow-y: auto;
    min-height: 0;
}

.my-work-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-right: 0;
    min-width: 0;
    overflow-x: clip;
}

.my-work-overview-panel .my-work-grid {
    margin-top: 8px;
}

.my-work-overview-lead {
    margin: 0;
    margin-bottom: 8px;
    color: #8fa2c1;
    font-size: 11px;
}

.my-work-auto-group {
    background: var(--ui-surface-shade-25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
}

.my-work-auto-group > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.my-work-auto-group > header h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
}

.my-work-auto-group > header span {
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.my-work-auto-meta {
    color: #9fb0c9;
    font-size: 12px;
    margin-bottom: 8px;
}

.my-work-auto-filter-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.my-work-auto-filter-btn {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #c4d2e6;
}

.my-work-auto-filter-btn.active {
    border-color: rgba(121, 165, 236, 0.58);
    background: rgba(83, 134, 218, 0.22);
    color: #eff5ff;
}

.my-work-auto-stage-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 6px;
}

.my-work-auto-stage-summary-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #b9c8dc;
    padding: 0 7px;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    appearance: none;
    cursor: pointer;
}

.my-work-auto-stage-summary-pill.is-active {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.my-work-auto-stage-summary-pill.is-dimmed {
    opacity: 0.42;
    filter: grayscale(0.18);
}

.my-work-auto-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.my-work-auto-item {
    display: grid;
    grid-template-columns: minmax(170px, 0.85fr) minmax(440px, 1.15fr);
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
}

.my-work-auto-item.is-due-overdue { border-color: var(--due-color-overdue); }
.my-work-auto-item.is-due-today { border-color: var(--due-color-today); }
.my-work-auto-item.is-due-tomorrow { border-color: var(--due-color-tomorrow); }
.my-work-auto-item.is-due-week { border-color: var(--due-color-week); }
.my-work-auto-item.is-due-next-week { border-color: var(--due-color-next-week); }

.my-work-auto-main {
    min-width: 0;
}

.my-work-auto-main h4 {
    margin: 0;
    font-size: 13px;
}

.my-work-auto-main p {
    margin: 3px 0 0;
    font-size: 11px;
    opacity: 0.78;
}

.my-work-auto-main .my-work-auto-action {
    margin-top: 2px;
    opacity: 0.92;
    font-weight: 600;
}

.my-work-auto-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.my-work-auto-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.my-work-auto-snooze-btn {
    border-color: rgba(124, 171, 236, 0.34);
    background: rgba(74, 126, 216, 0.14);
    color: #dbe9ff;
}

.my-work-auto-snooze-btn:hover {
    border-color: rgba(136, 184, 246, 0.5);
    background: rgba(74, 126, 216, 0.22);
}

.my-work-auto-stage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 0;
    border-radius: 999px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--auto-stage-color, #6f819d) 70%, #ffffff 30%);
    background: color-mix(in srgb, var(--auto-stage-color, #6f819d) 16%, transparent);
    color: color-mix(in srgb, var(--auto-stage-color, #6f819d) 82%, #ffffff 18%);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-work-impulse-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.my-work-impulse-type {
    display: inline-flex;
    align-items: center;
    height: 22px;
    border-radius: 999px;
    padding: 0 8px;
    border: 1px solid rgba(160, 176, 204, 0.34);
    background: rgba(160, 176, 204, 0.1);
    color: #d6e0f2;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.my-work-impulse-type.is-crm {
    border-color: rgba(122, 179, 255, 0.36);
    background: rgba(98, 155, 231, 0.14);
    color: #d9ebff;
}

.my-work-impulse-type.is-project {
    border-color: rgba(145, 215, 185, 0.34);
    background: rgba(88, 178, 143, 0.12);
    color: #d9f3e6;
}

:root[data-theme="light"] .my-work-auto-group {
    border-color: rgba(24, 44, 77, 0.18);
    background: rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .my-work-overview-lead {
    color: #4f698b;
}

:root[data-theme="light"] .my-work-layout-left .me-checklist-widget,
:root[data-theme="light"] .my-work-layout-left .me-checklist-widget-clean {
    border-color: transparent;
    background: transparent;
}

:root[data-theme="light"] .my-work-panel-body {
    border-top-color: rgba(24, 44, 77, 0.12);
}

:root[data-theme="light"] .my-work-layout-left .me-checklist-widget-clean {
    background: transparent;
}

:root[data-theme="light"] .my-work-panel-toggle {
    border-color: rgba(40, 70, 112, 0.14);
    background: rgba(40, 70, 112, 0.06);
}

:root[data-theme="light"] .my-work-panel-toggle-count {
    background: rgba(40, 70, 112, 0.1);
}

:root[data-theme="light"] .my-work-panel-summary-pill {
    border-color: transparent;
    color: #2d4666;
}

:root[data-theme="light"] .my-work-auto-item {
    border-color: rgba(24, 44, 77, 0.14);
    background: rgba(255, 255, 255, 0.86);
}

:root[data-theme="light"] .my-work-auto-stage {
    border-color: color-mix(in srgb, var(--auto-stage-color, #6f819d) 52%, #d2dbee 48%);
    background: color-mix(in srgb, var(--auto-stage-color, #6f819d) 14%, #ffffff 86%);
    color: color-mix(in srgb, var(--auto-stage-color, #6f819d) 70%, #203552 30%);
}

:root[data-theme="light"] .my-work-impulse-type {
    border-color: rgba(40, 70, 112, 0.16);
    background: rgba(40, 70, 112, 0.06);
    color: #486487;
}

:root[data-theme="light"] .my-work-impulse-type.is-crm {
    border-color: rgba(76, 126, 209, 0.24);
    background: rgba(92, 146, 226, 0.1);
    color: #4d73a8;
}

:root[data-theme="light"] .my-work-impulse-type.is-project {
    border-color: rgba(69, 157, 118, 0.22);
    background: rgba(97, 182, 147, 0.1);
    color: #467c67;
}

:root[data-theme="light"] .my-work-auto-meta {
    color: #4f698b;
}

:root[data-theme="light"] .my-work-auto-stage-summary-pill {
    border-color: rgba(40, 70, 112, 0.18);
    background: rgba(40, 70, 112, 0.06);
    color: #2c486c;
}

:root[data-theme="light"] .my-work-auto-stage-summary-pill.is-dimmed {
    opacity: 0.5;
}

:root[data-theme="light"] .my-work-auto-filter-btn {
    border-color: rgba(40, 70, 112, 0.18);
    background: rgba(40, 70, 112, 0.06);
    color: #2c486c;
}

:root[data-theme="light"] .my-work-auto-filter-btn.active {
    border-color: rgba(64, 112, 198, 0.42);
    background: rgba(74, 126, 216, 0.16);
    color: #1e4f98;
}

:root[data-theme="light"] .my-work-auto-snooze-btn {
    border-color: rgba(74, 126, 216, 0.34);
    background: rgba(74, 126, 216, 0.1);
    color: #1e4f98;
}

.my-work-group {
    background: var(--ui-surface-shade-25);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 8px;
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: none;
}

.my-work-group-overdue {
    background: color-mix(in srgb, var(--due-color-overdue) 38%, transparent);
    border-color: color-mix(in srgb, var(--due-color-overdue) 85%, rgba(255,255,255,0.06));
    box-shadow: inset 3px 0 0 var(--due-color-overdue);
}

.my-work-group-today {
    background: color-mix(in srgb, var(--due-color-today) 34%, transparent);
    border-color: color-mix(in srgb, var(--due-color-today) 82%, rgba(255,255,255,0.06));
    box-shadow: inset 3px 0 0 var(--due-color-today);
}

.my-work-group-tomorrow {
    background: color-mix(in srgb, var(--due-color-tomorrow) 34%, transparent);
    border-color: color-mix(in srgb, var(--due-color-tomorrow) 82%, rgba(255,255,255,0.06));
    box-shadow: inset 3px 0 0 var(--due-color-tomorrow);
}

.my-work-group-week {
    background: color-mix(in srgb, var(--due-color-week) 34%, transparent);
    border-color: color-mix(in srgb, var(--due-color-week) 82%, rgba(255,255,255,0.06));
    box-shadow: inset 3px 0 0 var(--due-color-week);
}

.my-work-group-nextweek {
    background: color-mix(in srgb, var(--due-color-next-week) 34%, transparent);
    border-color: color-mix(in srgb, var(--due-color-next-week) 82%, rgba(255,255,255,0.06));
    box-shadow: inset 3px 0 0 var(--due-color-next-week);
}

:root[data-theme="light"] .my-work-group-overdue,
:root[data-theme="light"] .my-work-group-today,
:root[data-theme="light"] .my-work-group-tomorrow,
:root[data-theme="light"] .my-work-group-week,
:root[data-theme="light"] .my-work-group-nextweek {
    background: inherit;
}

:root[data-theme="light"] .my-work-group-overdue {
    background: color-mix(in srgb, var(--due-color-overdue) 48%, #ffffff 52%);
    border-color: color-mix(in srgb, var(--due-color-overdue) 82%, #d7e1f1 18%);
}

:root[data-theme="light"] .my-work-group-today {
    background: color-mix(in srgb, var(--due-color-today) 46%, #ffffff 54%);
    border-color: color-mix(in srgb, var(--due-color-today) 82%, #d7e1f1 18%);
}

:root[data-theme="light"] .my-work-group-tomorrow {
    background: color-mix(in srgb, var(--due-color-tomorrow) 46%, #ffffff 54%);
    border-color: color-mix(in srgb, var(--due-color-tomorrow) 82%, #d7e1f1 18%);
}

:root[data-theme="light"] .my-work-group-week {
    background: color-mix(in srgb, var(--due-color-week) 46%, #ffffff 54%);
    border-color: color-mix(in srgb, var(--due-color-week) 82%, #d7e1f1 18%);
}

:root[data-theme="light"] .my-work-group-nextweek {
    background: color-mix(in srgb, var(--due-color-next-week) 46%, #ffffff 54%);
    border-color: color-mix(in srgb, var(--due-color-next-week) 82%, #d7e1f1 18%);
}

.my-work-group-later {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

.my-work-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.my-work-list-head {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 52px 90px 150px 150px 86px 190px;
    align-items: center;
    gap: 10px;
    padding: 1px 8px 6px;
    margin-bottom: 0;
    color: #7f91af;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(171, 182, 204, 0.16);
}

.my-work-item {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 52px 90px 150px 150px 86px 190px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--my-work-source-color, rgba(255, 255, 255, 0.18));
    border-radius: 7px;
    padding: 4px 8px 4px 6px;
    --my-work-source-color: rgba(155, 172, 205, 0.75);
    --my-work-source-bg: rgba(155, 172, 205, 0.12);
    --my-work-source-text: #d5deed;
}

.my-work-item.is-auto-hint {
    border-style: solid;
    background: rgba(255, 255, 255, 0.028);
}

.my-work-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding-right: 6px;
}

.my-work-item-main h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
}

.my-work-source-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--my-work-source-color) 72%, transparent);
    background: var(--my-work-source-bg);
    color: var(--my-work-source-text);
    line-height: 1;
}

.my-work-source-badge svg {
    width: 12px;
    height: 12px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.my-work-source-project {
    --my-work-source-color: #6fa0ff;
    --my-work-source-bg: rgba(111, 160, 255, 0.14);
    --my-work-source-text: #d9e7ff;
}

.my-work-source-project-subtask {
    --my-work-source-color: #7ed6ab;
    --my-work-source-bg: rgba(126, 214, 171, 0.13);
    --my-work-source-text: #dcf7eb;
}

.my-work-source-internal {
    --my-work-source-color: #f0bf65;
    --my-work-source-bg: rgba(240, 191, 101, 0.13);
    --my-work-source-text: #ffe9bf;
}

.my-work-source-internal-subtask {
    --my-work-source-color: #d095f3;
    --my-work-source-bg: rgba(208, 149, 243, 0.13);
    --my-work-source-text: #f0dfff;
}

.my-work-source-youbox {
    --my-work-source-color: #72d3df;
    --my-work-source-bg: rgba(114, 211, 223, 0.13);
    --my-work-source-text: #d8f8fb;
}

.my-work-source-note {
    --my-work-source-color: #aab4c8;
    --my-work-source-bg: rgba(170, 180, 200, 0.12);
    --my-work-source-text: #edf2fb;
}

.my-work-source-auto {
    --my-work-source-color: #93cf8d;
    --my-work-source-bg: rgba(147, 207, 141, 0.13);
    --my-work-source-text: #e2f7df;
}

.my-work-item-title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-work-item-context {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #9da9c0;
    font-size: 10.5px;
    font-weight: 500;
}

.my-work-item-main p {
    margin: 0;
    font-size: 9px;
    line-height: 1.08;
    opacity: 0.72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-work-item-reminder-note {
    flex: 0 1 auto;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
}

.my-work-item-reminder-note.is-due-overdue {
    color: #d48be0;
}

.my-work-item-reminder-note.is-due-today {
    color: #7fa793;
}

.my-work-item-reminder-note.is-due-tomorrow {
    color: #c8ab46;
}

.my-work-item-reminder-note.is-due-week,
.my-work-item-reminder-note.is-due-next-week,
.my-work-item-reminder-note.is-due-later {
    color: #86aedb;
}

.my-work-team {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.my-work-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid var(--status-color, #6f819d);
    background: color-mix(in srgb, var(--status-color, #6f819d) 16%, transparent);
    color: var(--status-color, #6f819d);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.my-work-status-pill.is-muted {
    border-color: rgba(255, 255, 255, 0.2);
    color: #c8cfde;
    background: rgba(255, 255, 255, 0.08);
}

.my-work-reminder-done-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(126, 214, 171, 0.55);
    border-radius: 999px;
    background: color-mix(in srgb, rgba(126, 214, 171, 0.2) 70%, transparent);
    color: #7ed6ab;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.my-work-reminder-done-btn:hover {
    border-color: rgba(126, 214, 171, 0.78);
    background: color-mix(in srgb, rgba(126, 214, 171, 0.28) 78%, transparent);
}

.my-work-item-deadline {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-inline: 4px;
}

.my-work-item-meta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-inline: 4px;
}

.my-work-item-meta-placeholder {
    display: block;
    min-height: 1px;
}

.my-work-item-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-inline: 4px;
}

.my-work-item-stage-placeholder {
    display: block;
    min-height: 1px;
}

.my-work-item-team {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-inline: 4px;
}

.my-work-item-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    flex-wrap: nowrap;
    padding-inline: 2px;
}

.my-work-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid rgba(120, 145, 188, 0.28);
    background: rgba(69, 92, 132, 0.12);
    color: #d8e5fb;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.my-work-action-btn:hover {
    border-color: rgba(140, 167, 214, 0.42);
    background: rgba(69, 92, 132, 0.2);
}

.my-work-action-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #c7d8f4;
}

.my-work-item.is-auto-hint .my-work-action-btn-secondary {
    min-width: 0;
    padding-inline: 8px;
    font-size: 9.5px;
    white-space: nowrap;
}

.my-work-item-chat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 2px;
}

.my-work-item-deadline::before,
.my-work-item-meta::before,
.my-work-item-stage::before,
.my-work-item-team::before,
.my-work-item-actions::before,
.my-work-item-chat::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(171, 182, 204, 0.14);
    pointer-events: none;
}

.my-work-item-meta .my-work-team {
    margin-top: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
}

.my-work-item-stage .my-work-auto-stage {
    max-width: 100%;
}

.my-work-item-team .my-work-team {
    margin-top: 0;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

.my-work-item-team .my-work-team > * {
    flex-shrink: 0;
}

.my-work-deadline-filter-row {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.my-work-deadline-stage-summary {
    margin-top: 0;
}

.my-work-status-cell {
    width: auto;
    min-width: 108px;
}

.my-work-status-cell .status-pill {
    min-width: 108px;
    justify-content: center;
}

.my-work-status-menu {
    right: 0;
    left: auto;
}

.my-work-status-menu .status-grid {
    grid-template-columns: var(--status-chip-width);
}

.my-work-status-menu-note-reminder .status-grid {
    grid-template-columns: var(--status-chip-width);
}

.my-work-due {
    font-size: 12px;
    opacity: 0.85;
    white-space: nowrap;
}

.my-work-date-input {
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: var(--monday-text);
    padding: 0 8px;
}

.my-work-note-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 20px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 196, 102, 0.45);
    background: rgba(255, 196, 102, 0.14);
    color: #ffd88f;
    font-size: 11px;
    font-weight: 600;
}

.my-work-date-cell {
    --date-chip-width: 100%;
    width: 100%;
    min-width: 0;
}

.my-work-date-cell .date-clear-btn {
    right: 4px;
}

.my-work-date-trigger {
    min-width: 0;
    width: 100%;
    text-align: center;
    font-size: 9.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    line-height: 1;
}

.my-work-date-main {
    font-weight: inherit;
}

.my-work-date-time {
    font-size: inherit;
    font-weight: inherit;
    opacity: 1;
    letter-spacing: inherit;
}

.my-work-open-btn {
    height: 24px;
    width: 86px;
    min-width: 86px;
    border-radius: 7px;
    border: 1px solid rgba(0, 115, 234, 0.44);
    background: linear-gradient(135deg, rgba(0, 115, 234, 0.34) 0%, rgba(0, 115, 234, 0.12) 100%);
    color: #d9ebff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 0 7px;
    cursor: pointer;
}

.my-work-list-head > span:nth-child(n + 2) {
    padding-left: 8px;
}

.my-work-item-chat .row-thread-btn {
    width: 26px;
    min-width: 26px;
    height: 26px;
}

.my-work-open-btn:hover {
    color: #fff;
    border-color: rgba(0, 115, 234, 0.7);
}

:root[data-theme="light"] .my-work-open-btn {
    border-color: rgba(0, 93, 188, 0.42);
    background: linear-gradient(135deg, rgba(0, 115, 234, 0.22) 0%, rgba(0, 115, 234, 0.08) 100%);
    color: #0a3b73;
}

:root[data-theme="light"] .my-work-open-btn:hover {
    border-color: rgba(0, 93, 188, 0.62);
    background: linear-gradient(135deg, rgba(0, 115, 234, 0.3) 0%, rgba(0, 115, 234, 0.14) 100%);
    color: #052a54;
}

:root[data-theme="light"] .my-work-open-btn:focus-visible {
    outline: 2px solid rgba(0, 93, 188, 0.45);
    outline-offset: 1px;
}

.my-work-chat-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 8px;
    justify-self: center;
}

.my-work-team-inline {
    margin-top: 0;
    min-width: 56px;
    justify-content: flex-end;
}

.my-work-team-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    cursor: pointer;
    border-radius: 8px;
    padding: 2px 4px;
    transition: background 0.15s;
    justify-content: center;
    overflow: visible;
    flex-shrink: 0;
}

.team-cell.my-work-team-cell {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    min-height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.team-board-cell .team-cell.my-work-team-cell,
.team-cell.team-board-cell.my-work-team-cell,
.subtask-row .team-cell.my-work-team-cell,
.entity-doc-assignee-inline {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: nowrap;
    padding: 2px 4px;
    border-radius: 8px;
    margin-inline: auto;
}

.entity-doc-head-right .entity-doc-assignee-inline {
    margin-inline: 0;
}

.my-work-team-cell:hover {
    background: rgba(255, 255, 255, 0.07);
}

.my-work-team-cell.is-single {
    width: auto;
    min-width: 30px;
    max-width: none;
}

.team-board-cell .my-work-team-cell.is-single,
.subtask-row .team-cell.my-work-team-cell.is-single,
.entity-doc-assignee-inline.is-single {
    width: auto;
    min-width: 30px;
    max-width: none;
}

.board-table td.team-board-cell {
    position: relative;
    vertical-align: middle;
    text-align: center;
}

#youboxView .youbox-board-table td.team-board-cell {
    position: relative;
    vertical-align: middle;
    text-align: center;
}

#boardView .board-table td.team-board-cell:hover,
#boardView .board-table td.team-board-cell:focus-within,
#internalTasksView .board-table td.team-board-cell:hover,
#internalTasksView .board-table td.team-board-cell:focus-within,
#youboxView .youbox-board-table td.team-board-cell:hover,
#youboxView .youbox-board-table td.team-board-cell:focus-within {
    z-index: 4000000 !important;
}

#boardView .subtask-row .my-work-team-cell:hover,
#boardView .subtask-row .my-work-team-cell:focus-within,
#internalTasksView .subtask-row .my-work-team-cell:hover,
#internalTasksView .subtask-row .my-work-team-cell:focus-within {
    position: relative;
    z-index: 4000000 !important;
}

.me-checklist-team-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    cursor: pointer;
    border-radius: 8px;
    padding: 2px 4px;
    transition: background 0.15s;
    justify-content: center;
    overflow: visible;
    flex-shrink: 0;
}

.me-checklist-team-cell:hover {
    background: rgba(255, 255, 255, 0.07);
    z-index: 4000000;
}

.me-checklist-team-cell:focus-within,
.my-work-team-cell:hover,
.my-work-team-cell:focus-within {
    z-index: 4000000;
}

.me-checklist-team-cell.is-single {
    justify-content: center;
}

.team-pill.me-checklist-team-overflow {
    width: 20px;
    min-width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background: #1b243f;
    border: 1px solid #4371cc;
    color: #e9eefc;
}

.team-overflow-popover {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    display: none;
    min-width: 132px;
    padding: 8px;
    border-radius: 10px;
    background: #1b243f;
    border: 1px solid #4371cc;
    box-shadow: 0 12px 28px rgba(6, 12, 28, 0.34);
    z-index: 4000000;
    pointer-events: none;
}

.my-work-team-cell:hover .team-overflow-popover,
.my-work-team-cell:focus-within .team-overflow-popover,
.me-checklist-team-cell:hover .team-overflow-popover,
.me-checklist-team-cell:focus-within .team-overflow-popover,
.entity-doc-assignee-inline:hover .team-overflow-popover,
.entity-doc-assignee-inline:focus-within .team-overflow-popover,
.entity-doc-like-btn:hover .team-overflow-popover,
.entity-doc-like-btn:focus-within .team-overflow-popover {
    display: grid;
    gap: 6px;
}

.my-work-team-cell:has(.team-picker.active) .team-overflow-popover,
.me-checklist-team-cell:has(.team-picker.active) .team-overflow-popover,
.team-cell:has(.team-picker.active) .team-overflow-popover {
    display: none !important;
}

.team-overflow-popover-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e9eefc;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
}

.team-overflow-popover-user .team-avatar.small {
    flex: 0 0 auto;
}

.my-work-empty {
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    opacity: 0.86;
}

.my-work-empty h3 {
    margin: 0 0 8px;
}

.my-work-empty p {
    margin: 0;
}

@media (max-width: 960px) {
    .my-work-empty {
        text-align: left;
    }

    #internalTasksView button[onclick="UI.resetInternalTaskFilters()"] {
        display: none !important;
    }

    #teamNewsCategoryFilter,
    #teamNewsMemberFilter,
    #teamNewsSortBy,
    #teamNewsView button[onclick="UI.resetTeamNewsFilters()"] {
        display: none !important;
    }

    .me-checklist-composer {
        grid-template-columns: 1fr;
    }
    .me-checklist-row-line,
    .me-checklist-addline {
        grid-template-columns: 24px 1fr;
    }
    .me-checklist-row-line {
        align-items: start;
        row-gap: 6px;
        padding-right: 4px;
    }
    .me-checklist-addhint,
    .me-checklist-addclear {
        grid-column: 2;
        justify-self: start;
    }
    .me-checklist-row-actions {
        position: static;
        transform: none;
        grid-column: 2;
        width: 100%;
        margin-top: 2px;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
    }
    .me-checklist-quick-controls {
        flex-wrap: wrap;
        gap: 6px;
    }
    .me-checklist-date-cell,
    .me-checklist-date-trigger {
        --date-chip-width: 102px;
    }
    .me-checklist-row-hover-convert {
        right: 6px;
        top: -34px;
    }
    .me-checklist-convert-panel {
        grid-template-columns: 1fr;
        margin-left: 24px;
    }
    .me-checklist-addhint {
        display: none;
    }
    .me-checklist-row-details .me-checklist-item-controls {
        padding-left: 24px;
    }
    .my-work-layout {
        grid-template-columns: 1fr;
    }
    .my-work-panel-checklist {
        min-height: 0;
    }
    .my-work-column-main,
    .my-work-column-side {
        display: contents;
    }
    .my-work-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .my-work-list-head {
        display: none;
    }
    .my-work-item-meta {
        display: flex;
    }
    .my-work-item-deadline,
    .my-work-item-meta,
    .my-work-item-stage,
    .my-work-item-team,
    .my-work-item-chat {
        padding-left: 0;
        border-left: 0;
    }
    .my-work-list-head > span:nth-child(n + 2) {
        padding-left: 0;
    }
    .my-work-item-team {
        justify-content: flex-start;
    }
    .my-work-item-actions {
        justify-content: flex-start;
    }
    .my-work-auto-item {
        grid-template-columns: 1fr;
    }
    .my-work-auto-side {
        justify-content: flex-start;
    }
    .my-work-auto-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .my-work-overview-panel .my-work-panel-body {
        overflow: visible;
    }

    .my-work-overview-panel .my-work-overview-scroll {
        --my-work-mobile-sticky-width-full: 220px;
        --my-work-mobile-sticky-width-compact: 120px;
        --my-work-mobile-sticky-width-current: var(--my-work-mobile-sticky-width-full);
        --my-work-overview-row-base: #2f3450;
        --my-work-overview-columns: var(--my-work-mobile-sticky-width-current) 52px 90px 116px 150px 74px 160px;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        touch-action: auto;
    }

    .my-work-overview-panel .my-work-overview-scroll::-webkit-scrollbar {
        display: none;
    }

    .my-work-overview-panel .my-work-list-head,
    .my-work-overview-panel .my-work-grid,
    .my-work-overview-panel .my-work-group,
    .my-work-overview-panel .my-work-list,
    .my-work-overview-panel .my-work-item {
        width: max-content;
        min-width: 880px;
    }

    .my-work-overview-panel .my-work-list-head {
        display: grid;
        grid-template-columns: var(--my-work-overview-columns);
        justify-content: start;
        gap: 5px;
        padding: 3px 5px 3px 5px;
        box-sizing: border-box;
        align-items: center;
        --my-work-overview-head-tint: rgba(255, 255, 255, 0.02);
        background: linear-gradient(var(--my-work-overview-head-tint), var(--my-work-overview-head-tint)), var(--my-work-overview-row-base);
    }

    .my-work-overview-panel .my-work-list-head > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .my-work-overview-panel .my-work-list-head > span:nth-child(2),
    .my-work-overview-panel .my-work-list-head > span:nth-child(3),
    .my-work-overview-panel .my-work-list-head > span:nth-child(4),
    .my-work-overview-panel .my-work-list-head > span:nth-child(5),
    .my-work-overview-panel .my-work-list-head > span:nth-child(6),
    .my-work-overview-panel .my-work-list-head > span:nth-child(7) {
        justify-self: center;
        text-align: center;
    }

    .my-work-overview-panel .my-work-grid {
        overflow: visible;
        display: grid;
        grid-template-columns: 1fr;
    }

    .my-work-overview-panel .my-work-group {
        box-sizing: border-box;
        width: 100%;
    }

    .my-work-overview-panel .my-work-item,
    .my-work-overview-panel .my-work-item.is-auto-hint {
        grid-template-columns: var(--my-work-overview-columns);
        justify-content: start;
        align-items: center;
        gap: 5px;
        padding: 3px 5px 3px 5px;
        min-height: 30px;
        --my-work-overview-row-tint: rgba(255, 255, 255, 0.02);
        background: linear-gradient(var(--my-work-overview-row-tint), var(--my-work-overview-row-tint)), var(--my-work-overview-row-base);
    }

    .my-work-overview-panel .my-work-item-main,
    .my-work-overview-panel .my-work-item-deadline,
    .my-work-overview-panel .my-work-item-meta,
    .my-work-overview-panel .my-work-item-stage,
    .my-work-overview-panel .my-work-item-team,
    .my-work-overview-panel .my-work-item-chat,
    .my-work-overview-panel .my-work-item-actions {
        min-width: 0;
    }

    .my-work-overview-panel .my-work-item-main {
        gap: 0;
        padding-right: 4px;
        order: 1;
    }

    .my-work-overview-panel .my-work-item-chat {
        order: 2;
    }

    .my-work-overview-panel .my-work-item-actions {
        order: 3;
    }

    .my-work-overview-panel .my-work-item-deadline {
        order: 4;
    }

    .my-work-overview-panel .my-work-item-meta {
        order: 5;
    }

    .my-work-overview-panel .my-work-item-team {
        order: 6;
    }

    .my-work-overview-panel .my-work-item-stage {
        order: 7;
    }

    .my-work-overview-panel .my-work-list-head > span:first-child,
    .my-work-overview-panel .my-work-item-main {
        position: sticky;
        left: 0;
        z-index: 3;
        background: linear-gradient(var(--my-work-overview-row-tint, rgba(255, 255, 255, 0.02)), var(--my-work-overview-row-tint, rgba(255, 255, 255, 0.02))), var(--my-work-overview-row-base);
        box-shadow: 8px 0 18px rgba(5, 10, 20, 0.22);
    }

    .my-work-overview-panel .my-work-list-head > span:first-child {
        z-index: 4;
        background: linear-gradient(var(--my-work-overview-head-tint, rgba(255, 255, 255, 0.02)), var(--my-work-overview-head-tint, rgba(255, 255, 255, 0.02))), var(--my-work-overview-row-base);
        align-self: stretch;
        margin-block: -4px;
        padding-block: 4px;
    }

    .my-work-overview-panel .my-work-group-overdue .my-work-item {
        --my-work-overview-row-tint: color-mix(in srgb, var(--due-color-overdue) 38%, transparent);
    }

    .my-work-overview-panel .my-work-group-today .my-work-item {
        --my-work-overview-row-tint: color-mix(in srgb, var(--due-color-today) 34%, transparent);
    }

    .my-work-overview-panel .my-work-group-tomorrow .my-work-item {
        --my-work-overview-row-tint: color-mix(in srgb, var(--due-color-tomorrow) 34%, transparent);
    }

    .my-work-overview-panel .my-work-group-week .my-work-item {
        --my-work-overview-row-tint: color-mix(in srgb, var(--due-color-week) 34%, transparent);
    }

    .my-work-overview-panel .my-work-group-nextweek .my-work-item {
        --my-work-overview-row-tint: color-mix(in srgb, var(--due-color-next-week) 34%, transparent);
    }

    .my-work-overview-panel .my-work-group-later .my-work-item {
        --my-work-overview-row-tint: rgba(255, 255, 255, 0.02);
    }

    .my-work-overview-panel .my-work-item-main {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-block: -4px;
        padding-block: 4px;
    }

    .my-work-overview-panel .my-work-item-main h4 {
        font-size: 11.5px;
        line-height: 1.1;
    }

    .my-work-overview-panel .my-work-item-context {
        font-size: 9.5px;
    }

    .my-work-overview-panel .my-work-item-main p {
        font-size: 8px;
        line-height: 1.05;
    }

    .my-work-overview-panel .my-work-source-badge {
        width: 16px;
        min-width: 16px;
        height: 16px;
    }

    .my-work-overview-panel .my-work-source-badge svg {
        width: 11px;
        height: 11px;
    }

    .my-work-overview-panel .my-work-item-deadline,
    .my-work-overview-panel .my-work-item-meta,
    .my-work-overview-panel .my-work-item-stage,
    .my-work-overview-panel .my-work-item-team,
    .my-work-overview-panel .my-work-item-chat {
        padding-inline: 4px;
    }

    .my-work-overview-panel .my-work-item-meta,
    .my-work-overview-panel .my-work-item-chat {
        padding-inline: 2px;
    }

    .my-work-overview-panel .my-work-item-deadline {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .my-work-overview-panel .my-work-date-cell {
        --date-chip-width: 116px;
        width: 116px;
        min-width: 116px;
        max-width: 116px;
        overflow: hidden;
    }

    .my-work-overview-panel .my-work-item-meta,
    .my-work-overview-panel .my-work-item-stage,
    .my-work-overview-panel .my-work-item-team,
    .my-work-overview-panel .my-work-item-chat,
    .my-work-overview-panel .my-work-item-actions {
        min-height: 23px;
    }

    .my-work-overview-panel .my-work-item-meta,
    .my-work-overview-panel .my-work-item-stage {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .my-work-overview-panel .my-work-status-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .my-work-overview-panel .my-work-status-cell .status-pill {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 22px;
        height: 22px;
        padding: 0 7px;
        font-size: 10px;
        border-radius: 999px;
        box-sizing: border-box;
        margin-right: 0;
    }

    .my-work-overview-panel .my-work-status-menu {
        max-height: min(320px, calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .my-work-overview-panel .my-work-item-team {
        justify-content: center;
    }

    .my-work-overview-panel .team-cell.my-work-team-cell {
        min-height: 23px;
        height: 23px;
        padding-block: 0;
    }

    .my-work-overview-panel .my-work-item-chat {
        display: grid;
        place-items: center;
        text-align: center;
        padding-inline: 0;
    }

    .my-work-overview-panel .my-work-item-deadline::before,
    .my-work-overview-panel .my-work-item-meta::before,
    .my-work-overview-panel .my-work-item-stage::before,
    .my-work-overview-panel .my-work-item-team::before,
    .my-work-overview-panel .my-work-item-actions::before,
    .my-work-overview-panel .my-work-item-chat::before {
        left: -3px;
        top: 3px;
        bottom: 3px;
    }

    .my-work-overview-panel .my-work-item-actions {
        justify-content: center;
        overflow: hidden;
        width: 100%;
        min-width: 0;
    }

    .my-work-overview-panel .my-work-date-trigger {
        min-height: 20px;
        height: 20px;
        padding-inline: 7px 17px;
        font-size: 8.5px !important;
    }

    .my-work-overview-panel .my-work-date-cell .date-clear-btn {
        right: 3px;
        width: 13px;
        height: 13px;
        min-width: 13px;
        min-height: 13px;
        font-size: 9px;
    }

    .my-work-overview-panel .my-work-open-btn {
        width: 86px;
        min-width: 86px;
        max-width: 86px;
        height: 23px;
        min-height: 23px;
        padding: 0 8px;
        font-size: 8px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 6px;
        justify-content: center;
        display: inline-flex;
        align-items: center;
        background: rgba(41, 115, 225, 0.22);
        border-color: rgba(92, 151, 243, 0.58);
        color: #dcecff;
        opacity: 1;
        box-shadow: none;
    }

    .my-work-overview-panel .my-work-item-chat .row-thread-btn {
        margin-inline: auto;
        width: 24px;
        min-width: 24px;
        height: 23px;
        min-height: 23px;
        border-radius: 6px;
    }
}

@media (max-width: 480px) {
    .me-checklist-row-line,
    .me-checklist-addline {
        min-height: 46px;
    }
    .me-checklist-row-circle-btn {
        width: 28px;
        height: 28px;
    }
    .me-checklist-icon-btn,
    .me-checklist-drag-handle,
    .me-checklist-prio-current {
        width: 28px;
        height: 28px;
    }
    .me-checklist-prio-btn {
        width: 26px;
        height: 26px;
    }
    .me-checklist-row-actions {
        gap: 10px;
    }
    .me-checklist-quick-controls {
        gap: 8px;
    }
    .me-checklist-addline.is-top {
        margin-top: 20px;
    }
    .me-checklist-addlink {
        padding: 10px 12px;
        font-size: 13px;
    }
}

.user-notifications-trigger.is-live::after,
.user-notifications-trigger.is-fallback::after {
    opacity: 1;
}

.user-notifications-trigger.is-live::after {
    background: #45d483;
    border-color: rgba(69, 212, 131, 0.4);
    box-shadow: 0 0 0 2px rgba(69, 212, 131, 0.12);
}

.user-notifications-trigger.is-fallback::after {
    background: #e5b455;
    border-color: rgba(229, 180, 85, 0.35);
    box-shadow: 0 0 0 2px rgba(229, 180, 85, 0.10);
}

.user-notifications-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.user-notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #d6465b;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.14);
}

.tab-icon .user-notifications-badge {
    top: 4px;
    right: 4px;
}

.user-quick-trigger {
    border: 1px solid var(--theme-user-control-border);
    background: var(--theme-user-control-bg);
    color: var(--theme-user-control-hover-color);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.user-quick-menu-wrap:not(.active) .user-quick-trigger {
    border-radius: 12px;
}

.quick-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--theme-user-avatar-bg);
    border: 1px solid var(--theme-user-avatar-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background-size: cover;
    background-position: center;
}

.quick-user-avatar .quick-user-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.user-quick-dropdown {
    background: var(--theme-user-dropdown-bg);
    border: 1px solid var(--theme-user-dropdown-border);
    border-radius: 10px;
    min-width: 190px;
    padding: 6px;
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 3;
    box-shadow: var(--theme-user-dropdown-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.user-quick-menu-wrap.active .user-quick-dropdown {
    display: block;
}

.user-quick-dropdown button {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--theme-user-dropdown-btn-color);
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.user-quick-dropdown button:hover {
    background: var(--theme-user-dropdown-btn-hover-bg);
}

.user-quick-dropdown .quick-logout-btn {
    color: var(--theme-user-dropdown-logout-color);
}

.user-quick-dropdown .quick-logout-btn:hover {
    background: var(--theme-user-dropdown-logout-hover-bg);
}

.notifications-center-panel {
    background: var(--theme-notifications-panel-bg);
    border: 1px solid var(--theme-notifications-panel-border);
    border-radius: 12px;
    min-width: 320px;
    max-width: 380px;
    max-height: 56vh;
    overflow: hidden;
    position: absolute;
    right: 52px;
    top: 0;
    z-index: 7001000 !important;
    box-shadow: var(--theme-notifications-panel-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.notifications-center-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--theme-notifications-header-border);
    color: var(--theme-notifications-header-color);
    font-weight: 600;
    font-size: 13px;
}

.notifications-center-body {
    max-height: calc(56vh - 76px);
    overflow-y: auto;
    padding: 6px;
}

.notifications-center-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 8px 0;
}

.notifications-center-tab {
    border: 1px solid var(--theme-notifications-tab-border);
    background: var(--theme-notifications-tab-bg);
    color: var(--theme-notifications-tab-color);
    border-radius: 999px;
    padding: 5px 9px;
    font: 600 11px/1 'Figtree', sans-serif;
    cursor: pointer;
}

.notifications-center-tab:hover {
    background: var(--theme-notifications-tab-hover-bg);
}

.notifications-center-tab.is-active {
    background: var(--theme-notifications-tab-active-bg);
    border-color: var(--theme-notifications-tab-active-border);
    color: var(--theme-notifications-tab-active-color);
}

.notifications-center-markall-btn {
    margin-left: auto;
}

.notifications-center-markall-btn:disabled {
    opacity: .45;
    cursor: default;
}

.notifications-center-empty {
    padding: 12px;
    color: var(--theme-notifications-empty-color);
    font-size: 12px;
}

.notifications-center-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    border-radius: 10px;
    padding: 10px 10px;
    cursor: pointer;
    display: block;
}

.notifications-center-item:hover {
    background: var(--theme-notifications-item-hover-bg);
}

.notifications-center-item.is-unread {
    background: var(--theme-notifications-item-unread-bg);
}

.notifications-center-item-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: space-between;
}

.notifications-center-item-title {
    color: #f3f6fc;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
}

.notifications-center-item-time {
    color: #8ea0bb;
    font-size: 11px;
    white-space: nowrap;
}

.notifications-center-item-body {
    margin-top: 4px;
    color: #b9c5d8;
    font-size: 12px;
    line-height: 1.35;
}


.notifications-center-item-foot {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.notifications-center-item-status {
    color: rgba(185, 197, 216, 0.62);
    font-size: 11px;
    line-height: 1.2;
}

.notifications-center-item-status.is-unread {
    color: #e5efff;
    font-weight: 600;
}

.notifications-center-item-readbtn {
    color: #8fb4ff;
    font-size: 11px;
    line-height: 1.2;
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px solid rgba(143, 180, 255, 0.2);
    background: rgba(143, 180, 255, 0.06);
}

.notifications-center-item-readbtn:hover {
    background: rgba(143, 180, 255, 0.12);
    border-color: rgba(143, 180, 255, 0.34);
}

:root[data-theme="light"] .user-notifications-trigger:hover {
    color: var(--theme-user-control-hover-color);
    border-color: var(--theme-user-control-hover-border);
}

:root[data-theme="light"] .user-notifications-trigger.is-live::after {
    background: #26b76b;
    border-color: rgba(38, 183, 107, 0.28);
    box-shadow: 0 0 0 2px rgba(38, 183, 107, 0.08);
}

:root[data-theme="light"] .user-notifications-trigger.is-fallback::after {
    background: #d59b2d;
    border-color: rgba(213, 155, 45, 0.25);
    box-shadow: 0 0 0 2px rgba(213, 155, 45, 0.07);
}

:root[data-theme="light"] .notifications-center-markall-btn:disabled {
    opacity: .5;
}

:root[data-theme="light"] .notifications-center-item-title {
    color: #233653;
}

:root[data-theme="light"] .notifications-center-item-time {
    color: #6f83a3;
}

:root[data-theme="light"] .notifications-center-item-body {
    color: #516989;
}

:root[data-theme="light"] .notifications-center-item-status {
    color: #6d81a0;
}

:root[data-theme="light"] .notifications-center-item-status.is-unread {
    color: #27446d;
}

:root[data-theme="light"] .notifications-center-item-readbtn {
    color: #335ea8;
    border-color: rgba(51, 94, 168, 0.16);
    background: rgba(51, 94, 168, 0.06);
}

:root[data-theme="light"] .notifications-center-item-readbtn:hover {
    background: rgba(51, 94, 168, 0.10);
    border-color: rgba(51, 94, 168, 0.24);
}


.view-section { display: none; height: 100%; width: 100%; }
.view-section.active { display: block; }

body.no-rates #boardView .monday-table th:nth-child(7),
body.no-rates #boardView .monday-table td:nth-child(7) {
    display: none;
}

/* ADMIN */
.admin-container {
    padding: 20px;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

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

.admin-card {
    background: var(--theme-admin-card-bg);
    border: 1px solid var(--theme-admin-card-border);
    border-radius: 12px;
    padding: 16px;
}

:root[data-theme="light"] .admin-card {
    box-shadow: 0 10px 24px rgba(19, 37, 66, 0.06);
}

:root[data-theme="light"] .admin-card h3,
:root[data-theme="light"] .section-header h1,
:root[data-theme="light"] .section-header h2 {
    color: #172033;
}

.admin-card h3 {
    margin: 0 0 12px 0;
}

.admin-calendar-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #cfd9ee;
    line-height: 1.2;
}

:root[data-theme="light"] .admin-calendar-section-title {
    color: #172033;
}

.admin-hint {
    margin-top: 10px;
    color: #a7a7a7;
    font-size: 13px;
}

.admin-subsection-title {
    font-size: 12px;
    font-weight: 700;
    color: #cfd9ee;
    letter-spacing: 0.02em;
}

:root[data-theme="light"] .admin-subsection-title {
    color: #314861;
}

.admin-youbox-email-template-list {
    display: grid;
    gap: 16px;
}

.admin-youbox-email-template-section {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(13, 19, 33, 0.58);
}

.admin-youbox-email-template-fields {
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}

:root[data-theme="light"] .admin-youbox-email-template-section {
    border-color: #dfe5ef;
    background: #fbfcfe;
}

.admin-calendar-task-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto auto minmax(104px, 124px) minmax(130px, 170px) auto;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    position: relative;
}

.admin-calendar-task-row input,
.admin-calendar-task-row select {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
}

.admin-calendar-task-name-wrap {
    min-width: 0;
}

.admin-calendar-task-name-label {
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 7px;
    background: var(--ui-surface-soft-03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.admin-calendar-task-name-input {
    display: none;
}

.admin-calendar-task-edit-actions {
    display: inline-flex;
    gap: 4px;
}

.admin-calendar-task-edit-actions [data-edit-btn="save"],
.admin-calendar-task-edit-actions [data-edit-btn="cancel"] {
    display: none;
}

.admin-calendar-task-row.is-editing .admin-calendar-task-name-label {
    display: none;
}

.admin-calendar-task-row.is-editing .admin-calendar-task-name-input {
    display: block;
}

.admin-calendar-task-row.is-editing .admin-calendar-task-edit-actions [data-edit-btn="open"] {
    display: none;
}

.admin-calendar-task-row.is-editing .admin-calendar-task-edit-actions [data-edit-btn="save"],
.admin-calendar-task-row.is-editing .admin-calendar-task-edit-actions [data-edit-btn="cancel"] {
    display: inline-flex;
}

.admin-calendar-task-duration {
    min-width: 104px;
}

.admin-calendar-task-color {
    width: 38px !important;
    min-width: 38px;
    height: 30px;
    padding: 2px !important;
    border-radius: 6px;
    cursor: pointer;
}

.admin-calendar-task-extra-pair {
    display: grid;
    grid-template-columns: 38px minmax(104px, 124px);
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.admin-calendar-task-row .mini-btn {
    padding: 2px 6px;
    min-height: 28px;
    white-space: nowrap;
}

.admin-calendar-task-row.is-dragging {
    opacity: 0.55;
}

.admin-calendar-task-row.drag-over {
    background: rgba(70, 120, 220, 0.05);
    border-radius: 8px;
}

.admin-calendar-task-row.drag-over.drop-before::before,
.admin-calendar-task-row.drag-over.drop-after::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(92, 142, 240, 0.9);
    border-radius: 2px;
}

.admin-calendar-task-row.drag-over.drop-before::before {
    top: -2px;
}

.admin-calendar-task-row.drag-over.drop-after::after {
    bottom: -2px;
}

.admin-calendar-task-usage {
    font-size: 10px;
    color: #9fb0d3;
    white-space: nowrap;
}

:root[data-theme="light"] .admin-calendar-task-usage {
    color: #647a98;
}

:root[data-theme="light"] .admin-calendar-task-row.drag-over {
    background: rgba(63, 112, 204, 0.06);
}

:root[data-theme="light"] .admin-calendar-task-name-label {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(131, 149, 181, 0.18);
    color: #243851;
}

:root[data-theme="light"] .admin-calendar-task-row.drag-over.drop-before::before,
:root[data-theme="light"] .admin-calendar-task-row.drag-over.drop-after::after {
    background: rgba(63, 112, 204, 0.92);
}

#adminCalendarStandardTaetigkeitenList {
    max-height: 280px;
    overflow: auto;
    padding-right: 4px;
}

#adminCalendarInternalAdminList,
#adminCalendarInternalTechList {
    max-height: 280px;
    overflow: auto;
    padding-right: 4px;
}

.admin-calendar-settings-columns {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.admin-calendar-settings-column {
    flex: 1 1 0;
    min-width: 0;
}

.admin-calendar-settings-column > .admin-card {
    min-width: 0;
    margin-bottom: 12px;
}

.admin-calendar-settings-column > .admin-card:last-child {
    margin-bottom: 0;
}

.admin-calendar-task-tabs {
    display: flex;
    gap: 6px;
    margin: 4px 0 8px 0;
}

.admin-calendar-task-tabs .mini-btn {
    padding: 4px 8px;
}

.admin-calendar-task-tabs .mini-btn.is-active {
    border-color: rgba(123, 162, 255, 0.45);
    background: rgba(96, 143, 255, 0.16);
    color: #e8efff;
}

.admin-calendar-internal-panel {
    display: none;
}

.admin-calendar-internal-panel.is-active {
    display: block;
}

.admin-calendar-top-panel {
    display: none;
}

.admin-calendar-top-panel.is-active {
    display: block;
}

.admin-calendar-task-toolbar {
    margin-bottom: 8px;
}

.admin-calendar-task-toolbar .primary-btn {
    padding: 6px 10px;
    font-size: 12px;
}

.admin-calendar-task-actions {
    margin-top: 8px;
}

.admin-my-work-rules-intro {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
    margin-bottom: 10px;
}

.admin-my-work-rules-intro-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    font-size: 12px;
    font-weight: 700;
    color: #d6e1f5;
}

.admin-my-work-rules-intro-text {
    font-size: 11px;
    color: #8ea3c7;
}

.admin-my-work-rule-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    margin-bottom: 8px;
    background: var(--ui-surface-soft-03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.admin-my-work-rule-card.is-active {
    border-color: rgba(112, 201, 158, 0.28);
}

.admin-my-work-rule-card-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.admin-my-work-rule-identity {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
}

.admin-my-work-rule-meta-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.admin-my-work-rule-select,
.admin-my-work-rule-input,
.admin-my-work-rule-number {
    width: 100%;
    min-height: 30px;
    border-radius: 7px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(13, 21, 38, 0.14);
    color: inherit;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02);
}

.admin-my-work-rule-select,
.admin-my-work-rule-input::placeholder,
.admin-my-work-rule-number::placeholder {
    color: #8ea3c7;
}

.admin-my-work-rule-select,
.admin-my-work-rule-input:focus,
.admin-my-work-rule-number:focus {
    outline: none;
    border-color: rgba(114, 163, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(84, 138, 255, 0.14);
}

.admin-my-work-rule-stage {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.admin-my-work-rule-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-my-work-rule-field-stage {
    min-width: 0;
    flex: 1 1 200px;
    max-width: 220px;
}

.admin-my-work-rule-field-type {
    flex: 0 0 88px;
}

.admin-my-work-rule-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8ea3c7;
}

.admin-my-work-rule-label .admin-my-work-rule-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border-radius: 999px;
    border: 1px solid rgba(138, 160, 198, 0.24);
    background: rgba(255, 255, 255, 0.04);
    color: #a8bad8;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    cursor: help;
    vertical-align: middle;
}

.admin-my-work-rule-label .admin-my-work-rule-help:hover,
.admin-my-work-rule-label .admin-my-work-rule-help:focus-visible {
    border-color: rgba(123, 162, 255, 0.45);
    background: rgba(96, 143, 255, 0.16);
    color: #e8efff;
    outline: none;
}

.admin-my-work-rule-stage-select-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

.admin-my-work-rule-stage-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.admin-my-work-rule-select {
    appearance: none;
    cursor: pointer;
    color: inherit;
}

.admin-my-work-rule-top-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.admin-my-work-rule-copy-grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) minmax(240px, 1.1fr);
    gap: 6px;
}

.admin-my-work-rule-settings-grid {
    display: grid;
    grid-template-columns: minmax(150px, 0.95fr) 110px 110px;
    gap: 6px;
    align-items: end;
}

.admin-my-work-rule-field-number {
    max-width: 132px;
}

.admin-my-work-rule-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(13, 21, 38, 0.10);
    font-size: 10px;
    font-weight: 600;
    color: #c8d7ee;
    cursor: pointer;
}

.admin-my-work-rule-toggle.is-active {
    border-color: rgba(85, 173, 131, 0.38);
    background: rgba(63, 142, 95, 0.18);
    color: #dff6e8;
}

.admin-my-work-rule-toggle:not(.is-active) {
    border-color: rgba(152, 169, 198, 0.18);
    background: rgba(13, 21, 38, 0.06);
    color: #95a8c8;
}

.admin-my-work-rule-days-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.admin-my-work-rule-days-label {
    font-size: 9px;
    color: #8ea3c7;
}

.admin-my-work-rule-number {
    max-width: 58px;
    text-align: center;
    padding-inline: 8px;
    font-feature-settings: "tnum" 1;
}

.admin-my-work-rule-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 7px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(13, 21, 38, 0.08);
    font-size: 9px;
    color: #c8d7ee;
    white-space: nowrap;
}

.admin-my-work-rule-flag .admin-my-work-rule-help {
    flex: 0 0 auto;
    margin-left: 2px;
}

.admin-my-work-rule-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
}

.admin-my-work-rule-flag input {
    margin: 0;
}

.admin-my-work-rule-delete {
    min-height: 30px;
    border-radius: 7px;
    border: 1px solid rgba(255, 120, 120, 0.18);
    background: rgba(129, 33, 33, 0.14);
    color: #f3b3b3;
    cursor: pointer;
    font-size: 10px;
}

.admin-my-work-rule-field-stage .admin-my-work-rule-select,
.admin-my-work-rule-field-type .admin-my-work-rule-select {
    font-size: 12px;
}

.admin-my-work-rule-field-stage .admin-my-work-rule-select,
.admin-my-work-rule-field-type .admin-my-work-rule-select {
    min-height: 30px;
}

.admin-my-work-rule-input,
.admin-my-work-rule-select,
.admin-my-work-rule-number {
    font-size: 12px;
}

.admin-my-work-rule-field-type .admin-my-work-rule-select {
    padding-inline: 8px;
}

.admin-my-work-rule-delete:hover {
    border-color: rgba(255, 120, 120, 0.32);
    background: rgba(129, 33, 33, 0.2);
}

.admin-import-files {
    display: grid;
    gap: 6px;
}

.admin-import-file-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 8px;
    align-items: center;
}

.admin-import-file-row strong {
    font-size: 12px;
    color: #c8d7ee;
}

.admin-project-matching-overlay {
    position: fixed;
    inset: 0;
    z-index: 1003000;
    display: none;
    align-items: stretch;
    justify-content: stretch;
    padding: 18px;
    background: rgba(8, 12, 18, 0.72);
    backdrop-filter: blur(10px);
}

.admin-project-matching-dialog {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at top right, rgba(210, 148, 63, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(18, 24, 34, 0.98), rgba(10, 14, 22, 0.98));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.admin-project-matching-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.admin-project-matching-kicker {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.52);
    margin-bottom: 4px;
}

.admin-project-matching-head h3 {
    margin: 0 0 4px;
}

.admin-project-matching-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-project-matching-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 420px) auto auto 1fr;
    gap: 12px;
    align-items: center;
}

.admin-project-matching-toolbar input[type="text"] {
    min-width: 0;
}

.admin-project-matching-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.admin-project-matching-stage-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-project-matching-stage-chip {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.admin-project-matching-stage-chip.is-active {
    background: rgba(86, 132, 255, 0.18);
    border-color: rgba(86, 132, 255, 0.5);
}

.admin-project-matching-layout {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 14px;
}

.admin-project-matching-list,
.admin-project-matching-detail {
    min-height: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.admin-project-matching-list {
    overflow: auto;
    padding: 10px;
}

.admin-project-matching-detail {
    overflow: auto;
    padding: 16px;
}

.admin-project-matching-empty {
    padding: 18px;
    color: rgba(255, 255, 255, 0.72);
}

.admin-project-matching-row {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.admin-project-matching-row + .admin-project-matching-row {
    margin-top: 10px;
}

.admin-project-matching-row:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.18);
}

.admin-project-matching-row.is-active {
    border-color: rgba(236, 177, 92, 0.64);
    background: rgba(236, 177, 92, 0.12);
}

.admin-project-matching-row.is-resolved {
    opacity: 0.82;
}

.admin-project-matching-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

.admin-project-matching-row-title {
    font-weight: 700;
    flex: 1 1 auto;
    min-width: 0;
}

.admin-project-matching-row-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 8px;
    flex-wrap: wrap;
}

.admin-project-matching-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.admin-project-matching-bulkcheck {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-project-matching-bulkcheck input {
    margin: 0;
}

.admin-project-matching-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
}

.admin-project-matching-badge.is-match {
    background: rgba(88, 179, 119, 0.18);
    color: #b9f1cb;
}

.admin-project-matching-badge.is-no-match {
    background: rgba(202, 118, 118, 0.16);
    color: #ffd1d1;
}

.admin-project-matching-row-meta,
.admin-project-matching-detail-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
}

.admin-project-matching-detail-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.admin-project-matching-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    padding: 14px;
}

.admin-project-matching-card h4 {
    margin: 0 0 10px;
}

.admin-project-matching-card strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.admin-project-matching-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-project-matching-search {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-project-matching-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.admin-project-matching-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-project-matching-view-btn {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
}

.admin-project-matching-view-btn.is-active {
    border-color: rgba(236, 177, 92, 0.64);
    background: rgba(236, 177, 92, 0.14);
}

.admin-project-matching-candidates {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-project-matching-candidate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.admin-project-matching-candidate.is-selected {
    border-color: rgba(236, 177, 92, 0.64);
    background: rgba(236, 177, 92, 0.12);
}

.admin-project-matching-candidate-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.admin-project-matching-notes {
    min-height: 88px;
    resize: vertical;
}

:root[data-theme="light"] .admin-project-matching-overlay {
    background: rgba(244, 239, 232, 0.68);
}

:root[data-theme="light"] .admin-project-matching-dialog {
    border-color: rgba(26, 35, 45, 0.1);
    background:
        radial-gradient(circle at top right, rgba(214, 166, 96, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 243, 237, 0.98));
    box-shadow: 0 22px 70px rgba(37, 33, 28, 0.16);
}

:root[data-theme="light"] .admin-project-matching-list,
:root[data-theme="light"] .admin-project-matching-detail,
:root[data-theme="light"] .admin-project-matching-card,
:root[data-theme="light"] .admin-project-matching-row,
:root[data-theme="light"] .admin-project-matching-candidate {
    border-color: rgba(26, 35, 45, 0.08);
    background: rgba(255, 255, 255, 0.66);
}

:root[data-theme="light"] .admin-project-matching-kicker,
:root[data-theme="light"] .admin-project-matching-row-meta,
:root[data-theme="light"] .admin-project-matching-detail-meta,
:root[data-theme="light"] .admin-project-matching-empty {
    color: rgba(43, 50, 60, 0.72);
}

@media (max-width: 1100px) {
    .admin-project-matching-overlay {
        padding: 10px;
    }

    .admin-project-matching-toolbar,
    .admin-project-matching-layout,
    .admin-project-matching-card-grid,
    .admin-project-matching-search-row,
    .admin-project-matching-candidate {
        grid-template-columns: 1fr;
    }
}

.admin-calendar-area-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 0 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--ui-surface-soft-03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-calendar-area-color-row-sub {
    margin-top: 0;
}

.admin-calendar-area-color-row label {
    font-size: 11px;
    color: #b8c7e2;
}

.admin-calendar-area-color-row input[type="color"] {
    width: 38px;
    min-width: 38px;
    height: 28px;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
}

.admin-due-color-preview {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.14) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.14) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.14) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.14) 75%);
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
    background-color: transparent;
}

.admin-theme-preview-grid {
    display: grid;
    gap: 6px;
}

.admin-theme-preview-row {
    display: grid;
    grid-template-columns: 88px repeat(4, 1fr);
    gap: 6px;
    align-items: center;
}

.admin-theme-preview-label {
    font-size: 11px;
    color: #b8c7e2;
}

.admin-theme-preview-swatch {
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    background: transparent;
}

.admin-theme-tuning-col {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: var(--ui-surface-soft-03);
    padding: 8px;
}

@media (max-width: 820px) {
    .admin-theme-tuning-grid {
        grid-template-columns: 1fr !important;
    }
}

.admin-theme-tuning-row {
    display: grid;
    grid-template-columns: 86px 1fr 44px;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.admin-theme-tuning-row:last-child {
    margin-bottom: 0;
}

.admin-theme-tuning-row label {
    font-size: 11px;
    color: #b8c7e2;
}

.admin-theme-tuning-row span {
    font-size: 11px;
    color: #b8c7e2;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

input[type="range"][id^="adminDueAlpha"],
input[type="range"][id^="adminThemeTuning"] {
    appearance: none;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(90deg, rgba(95, 126, 178, 0.38), rgba(129, 177, 255, 0.48));
    outline: none;
}

input[type="range"][id^="adminDueAlpha"]::-webkit-slider-thumb,
input[type="range"][id^="adminThemeTuning"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: #dce9ff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
    cursor: pointer;
}

input[type="range"][id^="adminDueAlpha"]::-moz-range-track,
input[type="range"][id^="adminThemeTuning"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(90deg, rgba(95, 126, 178, 0.38), rgba(129, 177, 255, 0.48));
}

input[type="range"][id^="adminDueAlpha"]::-moz-range-thumb,
input[type="range"][id^="adminThemeTuning"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: #dce9ff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
    cursor: pointer;
}

input[type="range"][id^="adminDueAlpha"]:focus-visible,
input[type="range"][id^="adminThemeTuning"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(123, 162, 255, 0.18);
}

:root[data-theme="light"] .admin-calendar-task-tabs .mini-btn.is-active {
    border-color: rgba(74, 121, 211, 0.35);
    background: rgba(74, 121, 211, 0.10);
    color: #1f3654;
}

:root[data-theme="light"] .admin-calendar-area-color-row {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(131, 149, 181, 0.16);
}

:root[data-theme="light"] .admin-calendar-area-color-row label {
    color: #38506d;
}

:root[data-theme="light"] .admin-due-color-preview {
    border-color: rgba(57, 77, 108, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    background-image:
        linear-gradient(45deg, rgba(37, 55, 86, 0.08) 25%, transparent 25%, transparent 75%, rgba(37, 55, 86, 0.08) 75%),
        linear-gradient(45deg, rgba(37, 55, 86, 0.08) 25%, transparent 25%, transparent 75%, rgba(37, 55, 86, 0.08) 75%);
}

:root[data-theme="light"] .admin-my-work-rule-card {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(131, 149, 181, 0.16);
}

:root[data-theme="light"] .admin-my-work-rule-card.is-active {
    border-color: rgba(106, 177, 141, 0.34);
}

:root[data-theme="light"] .admin-my-work-rules-intro-pill {
    color: #27415f;
    background: rgba(79, 110, 164, 0.06);
    border-color: rgba(79, 110, 164, 0.16);
}

:root[data-theme="light"] .admin-my-work-rules-intro-text,
:root[data-theme="light"] .admin-my-work-rule-label {
    color: #5d7393;
}

:root[data-theme="light"] .admin-my-work-rule-select,
:root[data-theme="light"] .admin-my-work-rule-input,
:root[data-theme="light"] .admin-my-work-rule-number,
:root[data-theme="light"] .admin-my-work-rule-toggle,
:root[data-theme="light"] .admin-my-work-rule-flag {
    background: rgba(247, 250, 255, 0.92);
    border-color: rgba(131, 149, 181, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .admin-my-work-rule-toggle {
    color: #2f4563;
}

:root[data-theme="light"] .admin-my-work-rule-toggle.is-active {
    border-color: rgba(77, 158, 110, 0.34);
    background: rgba(95, 184, 127, 0.16);
    color: #24533b;
}

:root[data-theme="light"] .admin-my-work-rule-toggle:not(.is-active) {
    color: #5b708f;
}

:root[data-theme="light"] .admin-my-work-rule-flag {
    color: #38506d;
}

:root[data-theme="light"] .admin-my-work-rule-input::placeholder,
:root[data-theme="light"] .admin-my-work-rule-number::placeholder {
    color: #8fa1bc;
}

:root[data-theme="light"] .admin-my-work-rule-days-label {
    color: #6f84a3;
}

:root[data-theme="light"] .admin-my-work-rule-delete {
    border-color: rgba(215, 111, 111, 0.24);
    background: rgba(244, 226, 226, 0.92);
    color: #8d3c3c;
}

@media (max-width: 1100px) {
    .admin-calendar-settings-columns {
        flex-direction: column;
    }

    .admin-my-work-rule-copy-grid {
        grid-template-columns: 1fr;
    }

    .admin-my-work-rule-settings-grid {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

@media (max-width: 980px) {
    .admin-my-work-rule-card-top {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-my-work-rule-meta-row {
        width: 100%;
    }

    .admin-my-work-rule-top-actions {
        justify-content: space-between;
    }

    .admin-my-work-rule-settings-grid {
        grid-template-columns: 1fr;
    }

    .admin-my-work-rule-field-number {
        max-width: none;
    }
}

:root[data-theme="light"] .admin-theme-preview-label {
    color: #38506d;
}

:root[data-theme="light"] .admin-theme-preview-swatch {
    border-color: rgba(57, 77, 108, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

:root[data-theme="light"] .admin-theme-tuning-col {
    border-color: rgba(131, 149, 181, 0.16);
    background: rgba(255, 255, 255, 0.8);
}

:root[data-theme="light"] .admin-theme-tuning-row label,
:root[data-theme="light"] .admin-theme-tuning-row span {
    color: #38506d;
}

:root[data-theme="light"] input[type="range"][id^="adminDueAlpha"],
:root[data-theme="light"] input[type="range"][id^="adminThemeTuning"] {
    border-color: rgba(74, 98, 136, 0.26);
    background: linear-gradient(90deg, rgba(134, 162, 206, 0.55), rgba(95, 147, 232, 0.45));
}

:root[data-theme="light"] input[type="range"][id^="adminDueAlpha"]::-webkit-slider-thumb,
:root[data-theme="light"] input[type="range"][id^="adminThemeTuning"]::-webkit-slider-thumb {
    border-color: rgba(68, 98, 148, 0.32);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(36, 58, 92, 0.2);
}

:root[data-theme="light"] input[type="range"][id^="adminDueAlpha"]::-moz-range-thumb,
:root[data-theme="light"] input[type="range"][id^="adminThemeTuning"]::-moz-range-thumb {
    border-color: rgba(68, 98, 148, 0.32);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(36, 58, 92, 0.2);
}

:root[data-theme="light"] input[type="range"][id^="adminDueAlpha"]::-moz-range-track,
:root[data-theme="light"] input[type="range"][id^="adminThemeTuning"]::-moz-range-track {
    border-color: rgba(74, 98, 136, 0.26);
    background: linear-gradient(90deg, rgba(134, 162, 206, 0.55), rgba(95, 147, 232, 0.45));
}

:root[data-theme="light"] input[type="range"][id^="adminDueAlpha"]:focus-visible,
:root[data-theme="light"] input[type="range"][id^="adminThemeTuning"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(74, 121, 211, 0.16);
}

.role-info {
    margin: 0;
    padding-left: 18px;
    color: #bdbdbd;
    font-size: 13px;
}

.role-info li {
    margin-bottom: 6px;
}

.admin-users-table select {
    min-width: 140px;
}

.admin-users-table input[type="checkbox"] {
    transform: scale(1.2);
}

/* REPORTS */
.reports-page {
    padding: 20px;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

#worktimeView .reports-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#worktimeView .section-header,
#worktimeView .worktime-toolbar-row,
#worktimeView #worktimeKpis {
    flex: 0 0 auto;
}

#worktimeView .admin-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 130, 190, 0.25) transparent;
    padding: 0;
}

#worktimeView .admin-card::-webkit-scrollbar {
    width: 6px;
}

#worktimeView .admin-card::-webkit-scrollbar-track {
    background: transparent;
}

#worktimeView .admin-card::-webkit-scrollbar-thumb {
    background: rgba(100, 130, 190, 0.25);
    border-radius: 3px;
}

#worktimeView .admin-card::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 130, 190, 0.45);
}

.reports-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
    padding-right: var(--user-quick-safe-space);
    box-sizing: border-box;
}

.reports-filters input,
.reports-filters select {
    width: 100%;
    box-sizing: border-box;
}

.reports-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.reports-insights {
    display: block;
    margin-bottom: 16px;
}

.reports-insight-section {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
}

.reports-insight-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reports-insight-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #a8b1c4;
    text-transform: uppercase;
}

.reports-insight-section-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
}

.reports-insight-section-cards.is-hidden {
    display: none;
}

.reports-insight-toggle-btn {
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #dbe7ff;
    font-size: 12px;
    font-weight: 600;
    padding: 0 10px;
    cursor: pointer;
}

.reports-insight-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.reports-insight-card {
    position: relative;
    grid-column: span 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--ui-surface-soft-02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
}

.reports-insight-card:has(.reports-insight-chart) {
    grid-column: span 1;
}

@media (max-width: 1500px) {
    .reports-insight-section-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .reports-insight-section-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-insight-card {
        grid-column: span 1;
    }

    .reports-insight-card:has(.reports-insight-chart) {
        grid-column: span 1;
    }
}

@media (max-width: 800px) {
    .reports-insight-section-cards {
        grid-template-columns: 1fr;
    }

    .reports-insight-card {
        grid-column: span 1;
    }
}

.reports-insight-zoom-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #dbe7ff;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reports-insight-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.reports-insight-card-body {
    padding-right: 26px;
    min-width: 0;
}

.reports-insight-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 5001000;
    background: #0d1423;
    display: none;
    align-items: stretch;
    justify-content: stretch;
}

.reports-insight-zoom-overlay.active {
    display: flex;
}

.reports-insight-zoom-panel {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.reports-insight-zoom-close {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.reports-insight-zoom-nav-group {
    position: absolute;
    top: 40px;
    right: 76px;
    z-index: 2;
    display: inline-flex;
    gap: 6px;
}

.reports-insight-zoom-nav {
    position: static;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reports-insight-zoom-nav svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reports-insight-zoom-nav:disabled {
    opacity: 0.45;
    cursor: default;
}

.reports-insight-zoom-counter {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    font-size: 12px;
    color: #a9bdd8;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 4px 10px;
}

.reports-insight-zoom-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #141d2f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}

.reports-insight-zoom-content.reports-insight-detail-mode {
    padding: 24px;
}

.reports-insight-zoom-content.reports-insight-detail-mode .reports-insight-title {
    font-size: 14px;
    letter-spacing: 0.4px;
}

.reports-insight-zoom-explain {
    margin-top: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #9fb1ce;
    max-width: 980px;
}

.reports-insight-zoom-content.reports-insight-detail-mode .reports-insight-list {
    gap: 10px;
}

.reports-insight-zoom-content.reports-insight-detail-mode .reports-insight-row {
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.reports-insight-zoom-content.reports-insight-detail-mode .reports-insight-row:last-child {
    border-bottom: 0;
}

.reports-insight-zoom-enhanced {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.reports-insight-zoom-enhanced-generic {
    margin-top: 12px;
}

.reports-insight-zoom-bars {
    display: grid;
    gap: 9px;
}

.reports-insight-zoom-bar-row {
    display: grid;
    gap: 5px;
}

.reports-insight-zoom-bar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reports-insight-zoom-bar-label {
    color: #d5e3fb;
    font-size: 13px;
    font-weight: 700;
}

.reports-insight-zoom-bar-value {
    color: #c8d8ef;
    font-size: 12px;
    font-weight: 700;
}

.reports-insight-zoom-bar-sub {
    color: #9fb1ce;
    font-size: 12px;
}

.reports-insight-zoom-bar-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
}

.reports-insight-zoom-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6fa8ff 0%, #58d4a0 100%);
}

.reports-insight-zoom-bar-fill.is-positive {
    background: linear-gradient(90deg, #63d89b 0%, #4bbb84 100%);
}

.reports-insight-zoom-bar-fill.is-negative {
    background: linear-gradient(90deg, #ff9fa7 0%, #e77983 100%);
}

.reports-insight-zoom-donut-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.reports-insight-zoom-donut {
    --pct: 0;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: conic-gradient(#67b58d calc(var(--pct) * 1%), rgba(255, 255, 255, 0.12) 0);
    position: relative;
}

.reports-insight-zoom-donut::after {
    content: '';
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: #141d2f;
}

.reports-insight-zoom-donut-meta {
    display: grid;
    gap: 4px;
}

.reports-insight-zoom-donut-rate {
    font-size: 28px;
    font-weight: 800;
    color: #d7e7ff;
    line-height: 1;
}

.reports-insight-zoom-donut-text {
    font-size: 13px;
    color: #9fb1ce;
}

.reports-insight-zoom-stacked-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    background: rgba(255, 255, 255, 0.12);
}

.reports-insight-zoom-stacked-seg {
    display: block;
    height: 100%;
}

.reports-insight-zoom-stacked-seg.is-new {
    background: #5f8edb;
}

.reports-insight-zoom-stacked-seg.is-running {
    background: #e9b65c;
}

.reports-insight-zoom-stacked-seg.is-final {
    background: #5ab589;
}

.reports-insight-zoom-enhanced-revenue {
    margin-top: 14px;
    gap: 12px;
}

.reports-insight-revenue-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.reports-insight-revenue-kpi-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
    display: grid;
    gap: 5px;
}

.reports-insight-revenue-kpi-year {
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #a9bdd8;
}

.reports-insight-revenue-kpi-total {
    font-size: 19px;
    font-weight: 800;
    color: #d7e7ff;
}

.reports-insight-revenue-kpi-meta {
    font-size: 12px;
    color: #9fb1ce;
}

.reports-insight-revenue-kpi-delta {
    font-size: 12px;
    font-weight: 700;
}

.reports-insight-revenue-kpi-delta.is-positive {
    color: #84d6a1;
}

.reports-insight-revenue-kpi-delta.is-negative {
    color: #f59aa1;
}

.reports-insight-revenue-table-wrap {
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

.reports-insight-revenue-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 460px;
}

.reports-insight-revenue-table th,
.reports-insight-revenue-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}

.reports-insight-revenue-table th:first-child,
.reports-insight-revenue-table td:first-child {
    text-align: left;
}

.reports-insight-revenue-table th {
    color: #a9bdd8;
    font-weight: 700;
}

.reports-insight-revenue-table td {
    color: #d1def3;
}

.reports-insight-zoom-content.has-chart.reports-insight-zoom-revenue .reports-insight-chart {
    min-height: 520px;
}

.reports-insight-zoom-subtitle {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #9fb1ce;
}

.reports-insight-concentration-bar-row {
    display: grid;
    gap: 6px;
}

.reports-insight-concentration-bar-row.is-customer .reports-insight-concentration-fill {
    background: linear-gradient(90deg, #7ba5ff 0%, #5ebad8 100%);
}

.reports-insight-concentration-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.reports-insight-concentration-label {
    color: #d5e3fb;
    font-weight: 700;
}

.reports-insight-concentration-values {
    color: #9fb1ce;
    font-weight: 600;
}

.reports-insight-concentration-track {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.reports-insight-concentration-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6fa8ff 0%, #58d4a0 100%);
}

.reports-insight-zoom-content.has-chart {
    display: flex;
    flex-direction: column;
}

.reports-insight-zoom-content.has-chart .reports-insight-title {
    margin-bottom: 14px;
}

.reports-insight-zoom-content.has-chart .reports-insight-chart {
    flex: 1 1 auto;
    min-height: 420px;
    align-items: stretch;
}

.reports-insight-zoom-content.has-chart .reports-insight-month {
    height: 100%;
    align-content: end;
}

.reports-insight-zoom-content.has-chart .reports-insight-bars {
    height: 100%;
    min-height: 360px;
}

body.reports-insight-zoom-open {
    overflow: hidden;
}

.reports-insight-title {
    font-size: 12px;
    color: #a8b1c4;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-top: 6px;
    margin-bottom: 10px;
}

.reports-insight-headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.reports-insight-headline .reports-insight-title {
    margin-bottom: 0;
}

.reports-insight-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    max-width: 100%;
    justify-content: flex-start;
    min-width: 0;
}

.reports-insight-year-select,
.reports-insight-mode-btn {
    height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #dbe7ff;
    font-size: 12px;
    padding: 0 8px;
}

.reports-insight-year-select {
    width: 74px;
    min-width: 74px;
    padding-right: 6px;
}

.reports-insight-mode-btn {
    min-width: 30px;
    font-weight: 700;
    cursor: pointer;
}

.reports-insight-mode-btn-icon {
    width: 28px;
    min-width: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reports-insight-mode-icon {
    width: 15px;
    height: 15px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reports-insight-vs {
    color: #a8b1c4;
    font-size: 12px;
    font-weight: 700;
}

.reports-insight-empty {
    color: #9fa8b9;
    font-size: 13px;
}

.reports-insight-kpi-big {
    margin: 8px 0 6px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #b6c4da;
}

.reports-insight-kpi-big.is-positive {
    color: #8de0a8;
}

.reports-insight-kpi-big.is-negative {
    color: #ff9ea0;
}

.reports-insight-kpi-big.is-neutral {
    color: #b6c4da;
}

.reports-insight-list {
    display: grid;
    gap: 8px;
}

.reports-insight-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 120px;
    gap: 8px;
    align-items: center;
}

.reports-insight-row-mix {
    grid-template-columns: minmax(0, 1fr) 72px 72px 72px;
}

.reports-insight-row-forecast {
    grid-template-columns: minmax(0, 1fr) 100px 100px 100px;
}

.reports-insight-row-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 6px;
    margin-bottom: 2px;
}

.reports-insight-row-head .reports-insight-name,
.reports-insight-row-head .reports-insight-sub,
.reports-insight-row-head .reports-insight-value {
    font-size: 11px;
    letter-spacing: 0.02em;
    color: #8fa5c8;
    font-weight: 600;
}

.reports-insight-name-col {
    min-width: 0;
}

.reports-insight-name {
    color: #dbe7ff;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.reports-insight-sub {
    color: #9eb0d3;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.reports-insight-value {
    color: #eef4ff;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.reports-insight-value.is-negative {
    color: #ff9ea0;
}

.reports-insight-value.is-positive {
    color: #8de0a8;
}

.reports-insight-value.is-neutral {
    color: #b6c4da;
}

.reports-insight-sub.is-good {
    color: #9ed9b1;
}

.reports-insight-sub.is-bad {
    color: #e1b0b2;
}

.reports-insight-sub.is-neutral {
    color: #9eb0d3;
}

.reports-insight-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    min-height: 150px;
}

.reports-insight-month {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.reports-insight-bars {
    height: 110px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 3px;
}

.reports-insight-bar-col {
    width: 44%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.reports-insight-bar-value {
    margin-bottom: 4px;
    color: #b4c5e3;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
}

.reports-insight-bar {
    width: 100%;
    border-radius: 5px 5px 0 0;
    min-height: 2px;
}

.reports-insight-bar.current {
    background: linear-gradient(180deg, #4fc3ff 0%, #2d8bff 100%);
}

.reports-insight-bar.prev {
    background: linear-gradient(180deg, #75d4a3 0%, #3ba975 100%);
}

.reports-insight-bars.has-three .reports-insight-bar-col {
    width: 30%;
}

.reports-insight-bars.has-one .reports-insight-bar-col {
    width: 92%;
}

.reports-insight-bar.third {
    background: linear-gradient(180deg, #f6c77c 0%, #d68c2d 100%);
}

.reports-insight-month-label {
    color: #9faecc;
    font-size: 11px;
}

.reports-insight-legend {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    color: #a8b1c4;
    font-size: 12px;
}

.reports-insight-legend i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 5px;
    transform: translateY(1px);
}

.reports-insight-legend i.current {
    background: #2d8bff;
}

.reports-insight-legend i.prev {
    background: #3ba975;
}

.reports-insight-legend i.third {
    background: #d68c2d;
}

.report-kpi {
    background: var(--ui-surface-soft-03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
}

.report-kpi-label {
    font-size: 12px;
    color: #a8b1c4;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.report-kpi-value {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 700;
}

.report-kpi-inline-filter {
    margin-top: 8px;
    width: 100%;
    max-width: 180px;
    min-height: 26px;
    font-size: 12px;
    padding: 2px 6px;
}

.reports-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding-right: var(--user-quick-safe-space);
    box-sizing: border-box;
}

.reports-subtab {
    border: 1px solid rgba(0, 115, 234, 0.35);
    background: rgba(0, 115, 234, 0.12);
    color: #e8f1ff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.reports-subtab:hover {
    background: rgba(0, 115, 234, 0.22);
}

.reports-subtab.active {
    background: #0073ea;
    border-color: #0073ea;
    color: #fff;
}

.report-panel {
    display: none;
}

.report-panel.active {
    display: block;
}

.reports-empty {
    color: #9fa8b9;
    font-size: 13px;
    padding: 10px 0;
}

.reports-table-note {
    margin-top: 8px;
    color: #8f97a7;
    font-size: 12px;
}

:root[data-theme="light"] .report-kpi {
    background: #ffffff;
    border-color: #d5e1f2;
}

:root[data-theme="light"] .report-kpi-label {
    color: #536b8a;
}

:root[data-theme="light"] .report-kpi-value {
    color: #1f3048;
}

:root[data-theme="light"] .report-kpi-inline-filter {
    border-color: #b9c9df;
    background: #ffffff;
    color: #223753;
}

:root[data-theme="light"] .reports-subtab {
    border-color: #9bb8de;
    background: #eaf2ff;
    color: #274a74;
}

:root[data-theme="light"] .reports-subtab:hover {
    background: #dce9ff;
}

:root[data-theme="light"] .reports-insight-card {
    background: #ffffff;
    border-color: #d5e1f2;
}

:root[data-theme="light"] .reports-insight-section-title {
    color: #4f6480;
}

:root[data-theme="light"] .reports-insight-title {
    color: #4f6480;
}

:root[data-theme="light"] .reports-insight-year-select,
:root[data-theme="light"] .reports-insight-mode-btn {
    border-color: #b7cae7;
    background: #f1f6ff;
    color: #24406a;
}

:root[data-theme="light"] .reports-insight-vs,
:root[data-theme="light"] .reports-insight-bar-value {
    color: #5a7396;
}

:root[data-theme="light"] .reports-insight-name,
:root[data-theme="light"] .reports-insight-value {
    color: #1f3048;
}

:root[data-theme="light"] .reports-insight-sub {
    color: #516b8d;
}

:root[data-theme="light"] .reports-insight-sub.is-good {
    color: #1b7d4d;
}

:root[data-theme="light"] .reports-insight-sub.is-bad {
    color: #9a3a3f;
}

:root[data-theme="light"] .reports-insight-value.is-positive {
    color: #1b7d4d;
}

:root[data-theme="light"] .reports-insight-value.is-negative {
    color: #9a3a3f;
}

:root[data-theme="light"] .reports-insight-value.is-neutral {
    color: #526a8a;
}

:root[data-theme="light"] .reports-insight-kpi-big.is-positive {
    color: #1b7d4d;
}

:root[data-theme="light"] .reports-insight-kpi-big.is-negative {
    color: #9a3a3f;
}

:root[data-theme="light"] .reports-insight-kpi-big.is-neutral {
    color: #526a8a;
}

:root[data-theme="light"] .reports-insight-row-head {
    border-bottom-color: rgba(95, 123, 166, 0.24);
}

:root[data-theme="light"] .reports-insight-row-head .reports-insight-name,
:root[data-theme="light"] .reports-insight-row-head .reports-insight-sub,
:root[data-theme="light"] .reports-insight-row-head .reports-insight-value {
    color: #5a7396;
}

:root[data-theme="light"] .reports-insight-month-label,
:root[data-theme="light"] .reports-insight-legend,
:root[data-theme="light"] .reports-empty,
:root[data-theme="light"] .reports-table-note {
    color: #5f7594;
}

:root[data-theme="light"] .reports-insight-zoom-btn {
    border-color: #b7cae7;
    background: #f1f6ff;
    color: #24406a;
}

:root[data-theme="light"] .reports-insight-zoom-btn:hover {
    background: #e1ecff;
}

:root[data-theme="light"] .reports-insight-toggle-btn {
    border-color: #b7cae7;
    background: #f1f6ff;
    color: #24406a;
}

:root[data-theme="light"] .reports-insight-toggle-btn:hover {
    background: #e1ecff;
}

:root[data-theme="light"] .reports-insight-zoom-overlay {
    background: #dbe6f6;
}

:root[data-theme="light"] .reports-insight-zoom-content {
    background: #ffffff;
    border-color: #c9d9ef;
}

:root[data-theme="light"] .reports-insight-zoom-content.reports-insight-detail-mode .reports-insight-row {
    border-bottom-color: rgba(80, 109, 150, 0.15);
}

:root[data-theme="light"] .reports-insight-zoom-explain {
    color: #5f789b;
}

:root[data-theme="light"] .reports-insight-revenue-kpi-card {
    border-color: rgba(98, 127, 169, 0.24);
    background: #f4f8ff;
}

:root[data-theme="light"] .reports-insight-revenue-kpi-year,
:root[data-theme="light"] .reports-insight-revenue-table th {
    color: #5f789b;
}

:root[data-theme="light"] .reports-insight-revenue-kpi-total {
    color: #243a58;
}

:root[data-theme="light"] .reports-insight-revenue-kpi-meta,
:root[data-theme="light"] .reports-insight-revenue-table td {
    color: #607b9f;
}

:root[data-theme="light"] .reports-insight-revenue-kpi-delta.is-positive {
    color: #1b7d4d;
}

:root[data-theme="light"] .reports-insight-revenue-kpi-delta.is-negative {
    color: #9a3a3f;
}

:root[data-theme="light"] .reports-insight-revenue-table-wrap {
    border-color: rgba(98, 127, 169, 0.24);
}

:root[data-theme="light"] .reports-insight-revenue-table th,
:root[data-theme="light"] .reports-insight-revenue-table td {
    border-bottom-color: rgba(80, 109, 150, 0.15);
}

:root[data-theme="light"] .reports-insight-concentration-label {
    color: #243a58;
}

:root[data-theme="light"] .reports-insight-concentration-values {
    color: #607b9f;
}

:root[data-theme="light"] .reports-insight-zoom-subtitle {
    color: #5f789b;
}

:root[data-theme="light"] .reports-insight-concentration-track {
    background: #dbe8fb;
}

:root[data-theme="light"] .reports-insight-concentration-fill {
    background: linear-gradient(90deg, #5d87da 0%, #3faf77 100%);
}

:root[data-theme="light"] .reports-insight-zoom-bar-label {
    color: #243a58;
}

:root[data-theme="light"] .reports-insight-zoom-bar-value {
    color: #36557f;
}

:root[data-theme="light"] .reports-insight-zoom-bar-sub,
:root[data-theme="light"] .reports-insight-zoom-donut-text {
    color: #607b9f;
}

:root[data-theme="light"] .reports-insight-zoom-bar-track,
:root[data-theme="light"] .reports-insight-zoom-stacked-track {
    background: #dbe8fb;
}

:root[data-theme="light"] .reports-insight-zoom-donut {
    background: conic-gradient(#3faf77 calc(var(--pct) * 1%), #dbe8fb 0);
}

:root[data-theme="light"] .reports-insight-zoom-donut::after {
    background: #ffffff;
}

:root[data-theme="light"] .reports-insight-zoom-donut-rate {
    color: #243a58;
}

:root[data-theme="light"] .reports-insight-zoom-close {
    background: #ffffff;
    border-color: #b7cae7;
    color: #24406a;
}

:root[data-theme="light"] .reports-insight-zoom-nav {
    background: #ffffff;
    border-color: #b7cae7;
    color: #24406a;
}

:root[data-theme="light"] .reports-insight-zoom-counter {
    color: #5f789b;
    background: #ffffff;
    border-color: #b7cae7;
}

/* USER PROFILE */
.user-profile-page {
    padding: 20px;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

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

.user-profile-side-stack {
    display: grid;
    gap: 18px;
    align-content: start;
}

.user-avatar-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.user-avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: #1f273a;
    color: #d7e7ff;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.user-avatar-preview .user-avatar-preview-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.user-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-avatar-file-input {
    display: none;
}

.user-avatar-upload-btn {
    border: 1px solid rgba(122, 177, 255, 0.45);
    background: linear-gradient(135deg, rgba(35, 98, 191, 0.95), rgba(56, 136, 236, 0.9));
    color: #f4f8ff;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 8px 18px rgba(27, 89, 184, 0.35);
}

.user-avatar-upload-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.user-avatar-upload-btn:active {
    transform: translateY(0);
}

.profile-save-btn.is-saved,
.profile-crop-btn.is-saved {
    background: linear-gradient(135deg, #25a86a, #2fc27b);
}

.profile-save-btn:disabled,
.profile-crop-btn:disabled {
    opacity: 0.75;
    cursor: wait;
}

.user-avatar-editor {
    display: none;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    margin: 10px 0 14px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(122, 177, 255, 0.24);
    background: rgba(20, 28, 44, 0.65);
}

.user-avatar-editor.active {
    display: grid;
}

.user-avatar-editor-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-crop-frame {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #1a2235;
    border: 1px solid rgba(255, 255, 255, 0.25);
    position: relative;
}

.user-avatar-crop-frame img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    user-select: none;
    pointer-events: none;
}

.user-avatar-editor-controls {
    display: grid;
    gap: 8px;
}

.user-avatar-editor-controls label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: #b9c6dd;
}

.user-avatar-editor-controls input[type="range"] {
    width: 100%;
}

@media (max-width: 900px) {
    .user-profile-grid {
        grid-template-columns: 1fr;
    }

    .user-profile-side-stack {
        gap: 18px;
    }
}

@media (max-width: 900px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }

    :root {
        --user-quick-safe-right: 92px;
        --user-quick-safe-gap: 10px;
    }

    .section-header {
        padding-right: calc(52px + var(--user-quick-safe-space));
    }
}

/* KALENDER LAYOUT (DARK MODE - macOS Style) */
#calendarView.active { display: flex; }
.calendar-layout { display: flex; width: 100%; height: 100%; }

#external-events {
    width: 280px; min-width: 280px;
    background: var(--theme-calendar-sidebar-bg);
    border-right: 1px solid var(--theme-calendar-sidebar-border);
    padding: 20px; box-sizing: border-box; overflow: hidden;
    display: flex; flex-direction: column;
}

#external-events .section-header {
    margin: 0 0 15px 0; padding: 0; border: none;
}

#external-events .section-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

#external-events .section-header h3 {
    margin: 0; color: #fff; font-size: 14px; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    white-space: nowrap;
}

:root[data-theme="light"] #external-events .section-header h3 {
    color: #203048;
}

:root[data-theme="light"] .calendar-history-search-input {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(131, 149, 181, 0.22);
    color: #22364f;
}

:root[data-theme="light"] .calendar-history-search-input::placeholder {
    color: rgba(78, 99, 131, 0.7);
}

:root[data-theme="light"] .calendar-history-divider {
    color: rgba(66, 88, 121, 0.74);
}

:root[data-theme="light"] .calendar-history-divider::before,
:root[data-theme="light"] .calendar-history-divider::after {
    background: rgba(131, 149, 181, 0.22);
}

#external-events-list {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.calendar-history-divider {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 8px 0 6px;
    color: rgba(207, 219, 242, 0.7);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.calendar-history-divider::before,
.calendar-history-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: rgba(255, 255, 255, 0.12);
}

.calendar-history-divider span {
    white-space: nowrap;
}

.calendar-history-search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #dfe7f8;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 12px;
}

.calendar-history-search-input::placeholder {
    color: rgba(210, 221, 242, 0.65);
}

.calendar-history-search-input:focus {
    outline: none;
    border-color: rgba(122, 162, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(122, 162, 255, 0.12);
}

@keyframes calendar-entries-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.fc-event-external {
    background-color: transparent;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 115, 234, 0.3) !important;
    border-radius: 10px !important;
    padding: 6px 28px 6px 8px !important;
    cursor: grab !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    user-select: none !important;
    position: relative !important;
    overflow: hidden;
}

.fc-event-external:hover {
    background-color: transparent;
    border-color: rgba(0, 115, 234, 0.5) !important;
    box-shadow: 0 6px 20px rgba(0, 115, 234, 0.3) !important;
    transform: translateY(-2px) !important;
}

.fc-event-external:active {
    cursor: grabbing !important;
}

.fc-event-external strong {
    color: #000 !important;
    display: block !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
}

.fc-event-external small {
    color: #000 !important;
    display: block !important;
    font-size: 11px !important;
    opacity: 0.85 !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
}

.fc-event-external strong .calendar-history-inline-subtask {
    font-weight: 500;
    font-size: 0.92em;
    opacity: 0.7;
}

.calendar-history-pin {
    position: absolute !important;
    top: 4px !important;
    right: 6px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 0.55);
    color: rgba(0, 0, 0, 0.65);
    font-size: 11px;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    margin: 0 !important;
}

.calendar-history-pin.is-pinned {
    background: rgba(255, 245, 177, 0.92);
    color: #7c5b00;
    border-color: rgba(124, 91, 0, 1);
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

.fc-event-external.is-history-pinned {
    padding: 4px 46px 4px 8px !important;
    min-height: 28px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
}

.fc-event-external.is-history-pinned.drag-over {
    box-shadow: 0 0 0 2px rgba(76, 128, 230, 0.65), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    background-image: linear-gradient(180deg, rgba(115, 157, 240, 0.08), rgba(115, 157, 240, 0.04));
    overflow: hidden;
}

.fc-event-external.is-history-pinned.drag-over.drop-before::before,
.fc-event-external.is-history-pinned.drag-over.drop-after::after {
    content: none;
}

.calendar-history-drop-marker {
    height: 14px;
    margin: 2px 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.calendar-history-drop-marker::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(76, 128, 230, 0.95);
    box-shadow: 0 0 0 2px rgba(76, 128, 230, 0.12);
}

.calendar-history-drop-marker span {
    position: relative;
    z-index: 1;
    padding: 0 6px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(70, 111, 191, 0.95);
    background: rgba(239, 244, 252, 0.96);
    border-radius: 999px;
    border: 1px solid rgba(76, 128, 230, 0.22);
}

.calendar-history-reorder-handle {
    position: absolute !important;
    top: 0 !important;
    left: auto !important;
    right: 22px !important;
    bottom: 0 !important;
    width: 18px;
    height: 100%;
    border: 0;
    background: transparent;
    color: rgba(0, 0, 0, 0.58);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3 !important;
}

.calendar-history-reorder-handle:active {
    cursor: grabbing;
}

#profileTwoFactorStatus {
    font-weight: 600;
    color: #d38a8a;
}

#profileTwoFactorStatus.is-enabled {
    color: #79c08f;
}

.profile-2fa-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 8px 0 10px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-2fa-qr-code {
    min-width: 180px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8c7df;
    font-size: 12px;
    text-align: center;
}

.profile-2fa-qr-code canvas {
    display: block;
    width: 180px !important;
    height: 180px !important;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}

:root[data-theme="light"] .profile-2fa-qr-wrap {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .profile-2fa-qr-code {
    color: #566f90;
}

.twofactor-backup-dialog-codes {
    width: 100%;
    min-height: 112px;
    margin-top: 10px;
    margin-bottom: 10px;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #eef3fb;
    padding: 10px 12px;
    font: 500 12px/1.45 'Figtree', sans-serif;
    box-sizing: border-box;
}

:root[data-theme="light"] .twofactor-backup-dialog-codes {
    border-color: rgba(131, 149, 181, 0.2);
    background: #f7f9fd;
    color: #1b2d44;
}

.fc-event-external.is-history-pinned strong {
    font-size: 11px !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 2px;
}

.fc-event-external.is-history-pinned small {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9 !important;
}

.fc-event-external small.calendar-history-subtask {
    font-size: 10px !important;
    opacity: 0.68 !important;
}

.calendar-stage {
    position: relative;
    flex-grow: 1;
    height: 100%;
    background: var(--theme-calendar-stage-bg);
}

.calendar-entries-loading-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1300;
    background: rgba(17, 24, 38, 0.24);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    pointer-events: all;
}

.calendar-entries-loading-overlay.active {
    display: flex;
}

.calendar-entries-loading-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(144, 173, 226, 0.45);
    background: rgba(24, 36, 56, 0.92);
    color: #dbe7ff;
    font-size: 12px;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 30px rgba(7, 12, 20, 0.35);
}

.calendar-entries-loading-spinner {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(176, 198, 239, 0.35);
    border-top-color: rgba(176, 198, 239, 0.98);
    animation: calendar-entries-loading-spin 0.9s linear infinite;
    flex: 0 0 auto;
}

#calendar { 
    height: 100%;
    background: var(--theme-calendar-bg);
}

.event-hover-info {
    position: absolute;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 320px;
    max-width: calc(100% - 32px);
    background: var(--theme-calendar-hover-bg);
    border: 1px solid var(--theme-calendar-hover-border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--theme-calendar-hover-text);
    font-size: 12px;
    line-height: 1.4;
    box-shadow: var(--theme-calendar-hover-shadow);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.event-hover-info.active {
    opacity: 1;
    transform: translateY(0);
}

.event-hover-info .title {
    font-weight: 700;
    color: var(--theme-calendar-hover-title);
    margin-bottom: 6px;
}

.event-hover-owner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.event-hover-owner-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex: 0 0 22px;
}

:root[data-theme="light"] .event-hover-owner-avatar {
    background: rgba(24, 35, 56, 0.08);
    color: #23344f;
    border: 1px solid rgba(24, 35, 56, 0.12);
}

.event-hover-owner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-hover-owner-name {
    color: #f0f0f0;
    font-weight: 600;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root[data-theme="light"] .event-hover-owner-name {
    color: #21314a;
}

.event-hover-info .row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #bdbdbd;
}

:root[data-theme="light"] .event-hover-info .row {
    color: #4f627c;
}

.event-hover-info .row span:first-child {
    color: #888;
}

:root[data-theme="light"] .event-hover-info .row span:first-child {
    color: #7a8ea7;
}

.event-context-menu {
    position: absolute;
    z-index: 100160;
    min-width: 140px;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px;
    display: none;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

.event-context-menu.active {
    display: block;
}

.event-context-menu button {
    width: 100%;
    background: transparent;
    color: #e6e6e6;
    border: none;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.event-context-menu button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.event-context-menu .danger {
    color: #ff3b30;
}

.month-aggregate-menu {
    min-width: 220px;
    max-width: 300px;
    z-index: 100170;
}

.month-aggregate-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    font-size: 11px;
    color: #9eabc2;
    padding: 6px 34px 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
}

.month-aggregate-close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 22px !important;
    min-width: 22px;
    max-width: 22px;
    height: 22px;
    padding: 0 !important;
    text-align: center !important;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #e8efff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto !important;
}

.month-aggregate-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.month-aggregate-back {
    width: calc(100% - 8px);
    margin: 6px 4px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 9px !important;
}

.calendar-event-focus-pulse {
    box-shadow: 0 0 0 2px rgba(118, 197, 255, 0.95), 0 0 18px rgba(100, 182, 255, 0.45) !important;
    transform: scale(1.02);
    transition: box-shadow 160ms ease, transform 160ms ease;
}

:root[data-theme="light"] .event-context-menu {
    background: #f9fbff;
    border-color: rgba(120, 146, 184, 0.28);
    box-shadow: 0 12px 28px rgba(30, 52, 83, 0.2);
}

:root[data-theme="light"] .event-context-menu button {
    color: #1f3656;
}

:root[data-theme="light"] .event-context-menu button:hover {
    background: rgba(89, 126, 190, 0.14);
}

:root[data-theme="light"] .event-context-menu .danger {
    color: #c53939;
}

:root[data-theme="light"] .month-aggregate-title {
    color: #5f7596;
    border-bottom-color: rgba(120, 146, 184, 0.2);
}

:root[data-theme="light"] .month-aggregate-close {
    border-color: rgba(120, 146, 184, 0.32);
    background: #edf3fb;
    color: #25456f;
}

:root[data-theme="light"] .month-aggregate-close:hover {
    background: #e2ecf8;
}

:root[data-theme="light"] .month-aggregate-back {
    border-top-color: rgba(120, 146, 184, 0.2) !important;
}

.event-transfer-menu {
    min-width: 260px;
    max-width: 320px;
}

.event-transfer-title {
    font-size: 11px;
    color: #9eabc2;
    padding: 6px 8px 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
}

.event-transfer-list {
    max-height: 220px;
    overflow: auto;
    padding-right: 2px;
}

.event-transfer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #d8e1f4;
    padding: 5px 4px;
    border-radius: 7px;
}

.event-transfer-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.event-transfer-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.event-transfer-actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 6px;
}

.event-transfer-actions button {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #d7e2f8;
    border-radius: 6px;
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
}

/* FullCalendar macOS Style Overrides */
.fc {
    height: 100% !important;
    --fc-page-bg-color: #1a1a1a;
    --fc-neutral-bg-color: #1f1f1f;
    --fc-border-color: #2a2a2a;
    --fc-button-bg-color: #2a2a2a;
    --fc-button-border-color: #3a3a3a;
    --fc-button-hover-bg-color: #3a3a3a;
    --fc-button-active-bg-color: #0073ea;
    --fc-button-active-border-color: #0073ea;
    --fc-today-bg-color: rgba(0, 115, 234, 0.08);
}

/* Scrollbar Design */
html,
body,
.content-area,
.board-page,
.board-scrollbar-sticky,
.reports-page,
.admin-container,
.crm-panel,
.calendar-stage,
.fc .fc-scroller {
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 162, 228, 0.58) rgba(16, 22, 35, 0.45);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.content-area::-webkit-scrollbar,
.board-page::-webkit-scrollbar,
.board-scrollbar-sticky::-webkit-scrollbar,
.reports-page::-webkit-scrollbar,
.admin-container::-webkit-scrollbar,
.crm-panel::-webkit-scrollbar,
.calendar-stage::-webkit-scrollbar,
.fc .fc-scroller::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.content-area::-webkit-scrollbar-track,
.board-page::-webkit-scrollbar-track,
.board-scrollbar-sticky::-webkit-scrollbar-track,
.reports-page::-webkit-scrollbar-track,
.admin-container::-webkit-scrollbar-track,
.crm-panel::-webkit-scrollbar-track,
.calendar-stage::-webkit-scrollbar-track,
.fc .fc-scroller::-webkit-scrollbar-track {
    background: rgba(16, 22, 35, 0.45);
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.content-area::-webkit-scrollbar-thumb,
.board-page::-webkit-scrollbar-thumb,
.board-scrollbar-sticky::-webkit-scrollbar-thumb,
.reports-page::-webkit-scrollbar-thumb,
.admin-container::-webkit-scrollbar-thumb,
.crm-panel::-webkit-scrollbar-thumb,
.calendar-stage::-webkit-scrollbar-thumb,
.fc .fc-scroller::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(111, 156, 236, 0.92), rgba(70, 120, 215, 0.9));
    border: 2px solid rgba(16, 22, 35, 0.65);
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.content-area::-webkit-scrollbar-thumb:hover,
.board-page::-webkit-scrollbar-thumb:hover,
.board-scrollbar-sticky::-webkit-scrollbar-thumb:hover,
.reports-page::-webkit-scrollbar-thumb:hover,
.admin-container::-webkit-scrollbar-thumb:hover,
.crm-panel::-webkit-scrollbar-thumb:hover,
.calendar-stage::-webkit-scrollbar-thumb:hover,
.fc .fc-scroller::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(132, 176, 250, 0.95), rgba(82, 134, 228, 0.94));
}

/* Header-Scroller ohne eigenen rechten Slider */
.fc .fc-scrollgrid-section-header .fc-scroller,
.fc .fc-scrollgrid-section-footer .fc-scroller {
    overflow: hidden !important;
}

/* Header-Hints dürfen nach unten aus dem Header "raushängen", ohne Horizontal-Layout zu beeinflussen */
.fc .fc-scrollgrid-section-header .fc-scroller {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Toolbar Styling */
.fc .fc-toolbar {
    padding: 20px calc(86px + var(--user-quick-safe-space)) 0 20px !important;
    gap: 15px;
    position: relative;
}

.fc .fc-toolbar-chunk:nth-child(2) {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 52%;
    text-align: center;
    pointer-events: none;
}

@media (max-width: 1100px) {
    .fc .fc-toolbar {
        flex-wrap: wrap;
        row-gap: 10px;
        padding-right: calc(20px + var(--user-quick-safe-space)) !important;
    }

    .fc .fc-toolbar-chunk:nth-child(2) {
        position: static;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        order: 3;
        text-align: center;
        pointer-events: auto;
    }
}

.calendar-user-filter-slot {
    position: relative;
    display: inline-flex;
    margin-left: 8px;
    vertical-align: middle;
}

.calendar-user-filter-trigger {
    background: transparent;
    border: 1px solid #3a3a3a;
    color: #b7c1d6;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.calendar-user-filter-slot.active .calendar-user-filter-trigger,
.calendar-user-filter-trigger:hover {
    background: #2a2a2a;
    color: #fff;
}

.calendar-user-filter-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    max-height: 340px;
    overflow: auto;
    background: var(--theme-calendar-filter-menu-bg);
    border: 1px solid var(--theme-calendar-filter-menu-border);
    border-radius: 10px;
    box-shadow: var(--theme-calendar-filter-menu-shadow);
    padding: 8px;
    display: none;
    z-index: 1200;
}

.calendar-user-filter-slot.active .calendar-user-filter-menu {
    display: block;
}

.calendar-toolbar-user-filter-menu {
    min-width: 240px;
    max-width: 280px;
}

.calendar-toolbar-user-filter-menu .calendar-user-filter-menu-toolbar {
    background: #1d2233;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);
    padding: 8px;
}

:root[data-theme="light"] .calendar-toolbar-user-filter-menu .calendar-user-filter-menu-toolbar {
    background: #ffffff;
    border: 1px solid #d7e1ef;
    box-shadow: 0 14px 28px rgba(20, 36, 62, 0.12), 0 0 0 1px rgba(255,255,255,0.7) inset;
}

:root[data-theme="light"] .calendar-toolbar-user-filter-menu {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.calendar-user-filter-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.calendar-user-filter-actions button {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #d7e2f8;
    border-radius: 6px;
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
}

:root[data-theme="light"] .calendar-user-filter-actions button {
    border-color: #d7e1ef;
    background: #f4f7fc;
    color: #314560;
}

.calendar-user-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #cdd7ea;
    padding: 5px 4px;
}

:root[data-theme="light"] .calendar-user-filter-item {
    color: #31465f;
}

.calendar-user-filter-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.calendar-user-filter-item.selected {
    background: rgba(47, 128, 255, 0.28);
    border-color: rgba(125, 177, 255, 0.6);
    color: #ecf4ff;
    border-radius: 8px;
}

.fc .fc-toolbar-title { 
    color: var(--theme-calendar-fc-title) !important; font-weight: 600; font-size: 22px !important;
    margin: 0 !important;
}

.fc .fc-toolbar-title.calendar-toolbar-title-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.fc .fc-toolbar-title.calendar-toolbar-title-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
}

.fc .fc-toolbar-title.calendar-toolbar-title-button[aria-expanded="true"] {
    background: rgba(63, 127, 230, 0.16);
    border-color: rgba(114, 163, 255, 0.36);
}

.calendar-toolbar-title-label {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    line-height: 1.1;
    pointer-events: none;
}

.fc .fc-button {
    font-size: 13px !important; font-weight: 500 !important;
    color: var(--theme-calendar-fc-button-color) !important; padding: 6px 12px !important;
    border-radius: 6px !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.fc .fc-button:not(.fc-button-active) {
    background: var(--theme-calendar-fc-button-bg) !important; border: 1px solid var(--theme-calendar-fc-button-border) !important;
}

.fc .fc-button:not(.fc-button-active):hover {
    background: var(--theme-calendar-fc-button-hover-bg) !important; color: var(--theme-calendar-fc-button-hover-color) !important;
}

.fc .fc-button.fc-button-active {
    background: #0073ea !important; border-color: #0073ea !important; color: #fff !important;
}

.fc .fc-prev-button .fc-icon,
.fc .fc-next-button .fc-icon {
    display: inline-block;
    position: relative;
    width: 14px;
    height: 14px;
    font-size: 0 !important;
    line-height: 1 !important;
    vertical-align: -2px;
}

.fc .fc-prev-button .fc-icon::before,
.fc .fc-next-button .fc-icon::before {
    content: "" !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.fc .fc-prev-button .fc-icon::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.fc .fc-next-button .fc-icon::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

.fc .fc-customWeek-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--theme-calendar-fc-custom-week-color) !important;
}

.fc .fc-userFilter-button {
    background: var(--theme-calendar-fc-userfilter-bg) !important;
    border: 1px solid var(--theme-calendar-fc-userfilter-border) !important;
    color: var(--theme-calendar-fc-userfilter-color) !important;
    border-radius: 10px !important;
    padding: 3px 6px !important;
}

.fc .fc-showCompleted-button {
    background: transparent !important;
    border: none !important;
    color: var(--theme-calendar-fc-showcompleted-color) !important;
    border-radius: 10px !important;
    padding: 3px 6px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.fc .fc-showCompleted-button:hover {
    background: rgba(47, 128, 255, 0.08) !important;
    border: none !important;
}

.fc .fc-showCompleted-button.is-active {
    background: rgba(28, 144, 84, 0.10) !important;
    border: none !important;
}

.calendar-completed-toggle-inner {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 28px;
    min-width: 0;
    padding: 0 6px;
    border-radius: 10px;
    position: relative;
}

.calendar-toolbar-completed-switch {
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.calendar-toolbar-completed-switch .slider {
    width: 28px !important;
    height: 16px !important;
    min-width: 0 !important;
    padding: 0 !important;
}

.calendar-toolbar-completed-switch .slider::before {
    width: 12px !important;
    height: 12px !important;
    left: 2px !important;
    top: 2px !important;
}

.calendar-toolbar-completed-switch .slider.is-on {
    background-color: #00b36b !important;
}

.calendar-toolbar-completed-switch .slider.is-on::before {
    /* travel = slider(28) - knob(12) - left(2) - right-gap(2) = 12px */
    transform: translateX(12px) !important;
}

.calendar-completed-hover-hint {
    position: absolute;
    left: 50%;
    top: 120%;
    transform: translateX(-50%);
    background: rgba(30,40,60,0.98);
    color: #e8f1ff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.13);
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
    opacity: 0.97;
    transition: opacity 0.15s;
}

.fc .fc-userFilter-button:hover {
    background: rgba(47, 128, 255, 0.22) !important;
    border-color: rgba(125, 177, 255, 0.6) !important;
}

:root[data-theme="light"] .fc .fc-showCompleted-button.is-active {
    background: rgba(28, 144, 84, 0.10) !important;
    border: none !important;
    color: var(--theme-calendar-fc-showcompleted-color) !important;
}

.calendar-team-button-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.calendar-team-avatars {
    display: inline-flex;
    align-items: center;
}

.calendar-team-avatar {
    margin-right: -4px;
    border-color: var(--theme-calendar-team-avatar-border);
    background: var(--theme-calendar-team-avatar-bg);
}

.calendar-team-overflow {
    font-size: 10px;
    color: var(--theme-calendar-team-overflow-color);
    margin-left: 4px;
}

.calendar-team-add-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: var(--theme-calendar-team-add-color);
    background: var(--theme-calendar-team-add-bg);
    border: 1px solid var(--theme-calendar-team-add-border);
}

.calendar-team-label {
    font-size: 11px;
}

.calendar-team-count {
    font-size: 11px;
    color: var(--theme-calendar-team-count-color);
}

/* Zeit-Achse links */
.fc .fc-timegrid-slot-label { 
    vertical-align: top !important; border-bottom: none !important;
    font-size: 12px !important;
}

.fc .fc-timegrid-slot-label-cushion {
    color: var(--theme-calendar-time-label-color) !important; font-size: 12px !important; padding: 2px 12px 0 !important;
    font-variant-numeric: tabular-nums; font-weight: 400;
}

/* Slot-Höhe für Stundenintervall */
.fc .fc-timegrid-slot,
.fc .fc-timegrid-slot-lane { 
    height: 15px !important;
    border-bottom: 1px solid var(--theme-calendar-time-slot-border) !important;
}

.fc .fc-timegrid-slot-minor {
    border-top: none !important;
    border-bottom: 1px solid var(--theme-calendar-time-slot-minor-border) !important;
}

.fc .fc-timegrid-slot:not(.fc-timegrid-slot-minor),
.fc .fc-timegrid-slot-lane:not(.fc-timegrid-slot-minor) {
    border-top: 2px solid var(--theme-calendar-time-slot-major-top) !important;
}

/* Col Headers (Wochentage) */
.fc .fc-col-header-cell {
    padding: 12px 0 0 !important; background: var(--theme-calendar-colheader-bg) !important;
    border-bottom: 1px solid var(--theme-calendar-colheader-border) !important;
    font-size: 12px !important; color: var(--theme-calendar-colheader-color) !important;
    font-weight: 400 !important;
}

.fc .fc-col-header-cell .fc-col-header-cell-cushion {
    font-weight: 700 !important;
}

.fc .fc-col-header-cell .fc-scrollgrid-sync-inner {
    min-height: 44px;
    overflow: visible !important;
}

.day-total {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.05;
    color: var(--theme-calendar-day-total-color);
    font-weight: 500;
}

.day-total-sub {
    font-size: 10px;
    color: var(--theme-calendar-day-total-sub-color);
    margin-top: 0;
    line-height: 1.0;
    font-weight: 500;
}

.day-total.is-multi {
    margin-top: 0;
    display: block;
    width: 100%;
    transform: none;
    bottom: auto;
    z-index: 45;
}

.day-total-lanes {
    display: grid;
    gap: 0;
    align-items: stretch;
    width: 100%;
}

.fc .fc-col-header-cell .fc-scrollgrid-sync-inner {
    position: relative;
}

.fc .fc-col-header-cell {
    overflow: visible !important;
}

.day-total-lane {
    padding: 0 2px;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-right: 0;
    min-width: 0;
    text-align: center;
}

.day-total-row-head {
    display: flex;
    align-items: center;
    justify-content: center;
}

.day-total-value {
    display: block;
    font-weight: 500;
    color: inherit;
}

.day-total.is-multi .day-total-sub {
    margin-top: 2px;
    text-align: center;
}

.day-total-warn-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.day-total-warn-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #dce5fa;
    box-sizing: border-box;
}

.day-total-warn-chip.is-break {
    border-color: rgba(244, 192, 92, 0.35);
    background: rgba(244, 192, 92, 0.14);
    color: #ffe8bc;
}

.day-total-warn-chip.is-ot {
    border-color: rgba(110, 165, 255, 0.35);
    background: rgba(110, 165, 255, 0.14);
    color: #ddecff;
}

.day-total-warn-chip.is-ot-strong {
    border-color: rgba(255, 130, 130, 0.40);
    background: rgba(255, 110, 110, 0.14);
    color: #ffd8d8;
}

:root[data-theme="light"] .day-total-row {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(116, 138, 171, 0.12);
}

:root[data-theme="light"] .day-total-lane {
    background: transparent;
}

:root[data-theme="light"] .day-total-value {
    color: inherit;
}

:root[data-theme="light"] .day-total-warn-chip {
    border-color: rgba(131, 149, 181, 0.18);
    background: rgba(255, 255, 255, 0.86);
    color: #5f7390;
}

:root[data-theme="light"] .day-total-warn-chip.is-break {
    border-color: rgba(215, 164, 65, 0.26);
    background: rgba(255, 245, 223, 0.95);
    color: #8a641f;
}

:root[data-theme="light"] .day-total-warn-chip.is-ot {
    border-color: rgba(79, 137, 216, 0.24);
    background: rgba(241, 247, 255, 0.95);
    color: #446a99;
}

:root[data-theme="light"] .day-total-warn-chip.is-ot-strong {
    border-color: rgba(215, 100, 108, 0.24);
    background: rgba(255, 243, 244, 0.95);
    color: #a33c46;
}

/* Day Column Headers */
.fc .fc-daygrid-day-number {
    padding: 8px !important; color: #999 !important;
    font-size: 14px !important;
}

.fc .fc-daygrid-day {
    border: none !important;
}

.fc .fc-daygrid-day-frame {
    border: 1px solid #242424 !important;
}

.fc .fc-dayGridMonth-view .fc-scrollgrid,
.fc .fc-dayGridMonth-view .fc-scrollgrid table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.fc .fc-dayGridMonth-view .fc-daygrid-day {
    border: 1px solid #242424 !important;
}

.fc .fc-dayGridMonth-view .fc-daygrid-day-frame {
    border: none !important;
    height: 120px;
    min-height: 120px;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}

.fc .fc-dayGridMonth-view .fc-daygrid-day-top {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 5;
    padding: 0;
}

.fc .fc-dayGridMonth-view .fc-daygrid-day-events {
    margin: 0 !important;
    display: none !important;
}

.fc .fc-dayGridMonth-view .fc-daygrid-event-harness {
    display: none !important;
}

.fc-month-tiles-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

.fc-month-day-tile {
    width: 100%;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 2px 4px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px;
    line-height: 1.1;
    text-align: left;
    color: #edf2ff;
    cursor: pointer;
    overflow: hidden;
}

.fc-month-day-tile.tile-small { font-size: 9px; }
.fc-month-day-tile.tile-medium { font-size: 10px; }
.fc-month-day-tile.tile-large { font-size: 11px; }

.fc-month-event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 6px;
}

.fc-month-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-month-event-badge {
    font-size: 9px;
    font-weight: 700;
    color: #dce8ff;
    background: rgba(0, 115, 234, 0.45);
    border: 1px solid rgba(0, 115, 234, 0.6);
    border-radius: 999px;
    padding: 1px 4px;
}

.fc-month-day-tile.tile-medium .fc-month-event-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fc-month-day-tile.tile-large .fc-month-event-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Jetzt-Indikator */
.fc .fc-now-indicator-arrow { border-color: #ff3b30 !important; }
.fc .fc-now-indicator-line { border-color: #ff3b30 !important; border-width: 2px !important; }

/* Event Styling */
.fc-v-event { 
    background-color: transparent !important; border: none !important;
    box-shadow: none !important; margin: 0 !important;
}

.fc-event-main-frame { 
    padding: 6px 8px !important; border-radius: 6px !important;
    height: 100%; color: #000 !important; font-size: 11px !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    position: relative;
}

.fc-event-main-frame.is-short {
    padding: 3px 6px !important;
}

.fc-event-main-frame.is-tiny {
    padding: 2px 6px !important;
}

.fc .event-foreign .fc-event-main-frame {
    filter: saturate(0.85);
}

.fc-event-main-frame > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-event-line-compact {
    font-size: 10px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 18px;
}

.fc-event-line-compact.strong {
    font-weight: 700;
}

.fc-event-line-meta {
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    margin-bottom: 2px;
    font-size: 10px;
    padding-right: 18px;
}

.fc-event-line-meta-compact {
    line-height: 1.05;
    margin-bottom: 1px;
    padding-bottom: 1px;
}

.fc-event-line-detail {
    font-size: 11px;
    line-height: 1.2;
    padding-right: 18px;
}

.fc-event-line-detail.strong {
    font-weight: 700;
}

.fc-event-line-detail.muted {
    opacity: 0.78;
}

.fc-event-line-note {
    margin-top: 1px;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fc-event-inline-subtask {
    font-weight: 500;
    font-size: 0.9em;
    opacity: 0.72;
}

.fc-event-line-compact.subtask {
    opacity: 0.7;
    font-size: 9px;
}

.fc-event-main-frame.is-tiny .fc-event-line-compact {
    font-size: 10px;
    line-height: 1.05;
}

.fc-event-main-frame.is-tiny .fc-event-owner-badge {
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    font-size: 7px;
}

.fc-event-owner-badge {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(15, 20, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.fc-event-resize-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.45);
    letter-spacing: 1px;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.fc-event-resize-hint.top {
    top: 1px;
}

.fc-event-resize-hint.bottom {
    bottom: 1px;
}

.fc-event-main-frame.is-tiny .fc-event-resize-hint {
    font-size: 8px;
    letter-spacing: 0.5px;
}

.fc .fc-timegrid-event:hover .fc-event-resize-hint,
.fc .fc-timegrid-event:focus-within .fc-event-resize-hint {
    opacity: 1;
}

.fc-event-main-frame::before,
.fc-event-main-frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1;
}

.fc-event-main-frame::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.16), rgba(255,255,255,0));
}

.fc-event-main-frame::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.16), rgba(255,255,255,0));
}

.fc .fc-timegrid-event:hover .fc-event-main-frame::before,
.fc .fc-timegrid-event:hover .fc-event-main-frame::after,
.fc .fc-timegrid-event:focus-within .fc-event-main-frame::before,
.fc .fc-timegrid-event:focus-within .fc-event-main-frame::after {
    opacity: 1;
}

/* Resize only around the "=" hints, keep the rest of the event draggable */
.fc .fc-timegrid-event .fc-event-resizer {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 44px !important;
    height: 14px !important;
    border: none !important;
    background: transparent !important;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: ns-resize !important;
    z-index: 3;
}

.fc .fc-timegrid-event:hover .fc-event-resizer,
.fc .fc-timegrid-event:focus-within .fc-event-resizer {
    opacity: 1;
}

.fc .fc-timegrid-event .fc-event-resizer-start {
    top: -3px !important;
    bottom: auto !important;
}

.fc .fc-timegrid-event .fc-event-resizer-end {
    bottom: -3px !important;
    top: auto !important;
}

.fc.collision-scope-active .fc-timegrid-event.collision-scope-other,
.fc.collision-scope-active .fc-daygrid-event.collision-scope-other {
    opacity: 0.35;
    filter: saturate(0.6);
}

.fc.collision-scope-active .fc-timegrid-event.collision-scope-match,
.fc.collision-scope-active .fc-daygrid-event.collision-scope-match {
    opacity: 1;
}

.fc.owner-lanes-active .fc-timegrid-event-harness {
    transition: left 0.12s ease, right 0.12s ease;
}

.fc.collision-scope-active .fc-timegrid-event.collision-scope-match .fc-event-main-frame,
.fc.collision-scope-active .fc-daygrid-event.collision-scope-match .fc-event-main-frame {
    box-shadow: 0 0 0 2px rgba(0, 115, 234, 0.35), 0 8px 20px rgba(0, 115, 234, 0.12);
}

:root[data-theme="light"] .fc.collision-scope-active .fc-timegrid-event.collision-scope-match .fc-event-main-frame,
:root[data-theme="light"] .fc.collision-scope-active .fc-daygrid-event.collision-scope-match .fc-event-main-frame {
    box-shadow: 0 0 0 2px rgba(11, 103, 208, 0.28), 0 8px 18px rgba(20, 36, 62, 0.1);
}

.fc-event-owner-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.calendar-team-edit-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 4px 8px;
    margin: 2px 0 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #d8e1f4;
    font-size: 12px;
}

.calendar-switch {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 20px;
}

.calendar-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.calendar-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.calendar-switch-slider::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}

.calendar-switch input:checked + .calendar-switch-slider {
    background: rgba(47, 128, 255, 0.58);
    border-color: rgba(125, 177, 255, 0.85);
}

.calendar-switch input:checked + .calendar-switch-slider::before {
    transform: translateX(18px);
}

:root[data-theme="light"] .calendar-team-edit-switch {
    border-bottom: 1px solid #e1e8f3;
    color: #31465f;
}

:root[data-theme="light"] .calendar-switch-slider {
    background: #e4ebf5;
    border-color: #cfd9e7;
}

:root[data-theme="light"] .calendar-switch-slider::before {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(17, 31, 56, 0.18);
    border: 1px solid rgba(17, 31, 56, 0.08);
}

:root[data-theme="light"] .calendar-switch input:checked + .calendar-switch-slider {
    background: rgba(11, 103, 208, 0.34);
    border-color: rgba(11, 103, 208, 0.46);
}

.fc-event-title {
    font-weight: 500 !important;
}

/* Daygrid Events (für Tages-/Wochenansicht) */
.fc .fc-daygrid-event {
    margin: 2px 0 !important;
}

.fc .fc-daygrid-event-harness {
    padding: 1px 2px !important;
}

/* Calendar light-theme polish (week/day/month + sidebar) */
:root[data-theme="light"] .fc {
    --fc-page-bg-color: #f7f9fd;
    --fc-neutral-bg-color: #eef3fb;
    --fc-border-color: rgba(131, 149, 181, 0.20);
    --fc-button-bg-color: #ffffff;
    --fc-button-border-color: #d7e1ef;
    --fc-button-hover-bg-color: #edf3fb;
    --fc-button-active-bg-color: #3f7fe6;
    --fc-button-active-border-color: #3f7fe6;
    --fc-today-bg-color: rgba(63, 127, 230, 0.06);
}

:root[data-theme="light"] #calendarView,
:root[data-theme="light"] .calendar-layout {
    background: var(--theme-calendar-view-bg);
}

:root[data-theme="light"] #external-events {
    background: var(--theme-calendar-sidebar-bg);
    border-right-color: var(--theme-calendar-sidebar-border);
}

:root[data-theme="light"] #external-events-list {
    gap: 6px;
}

:root[data-theme="light"] .fc-event-external {
    border-color: rgba(131, 149, 181, 0.18) !important;
    box-shadow: 0 6px 16px rgba(28, 45, 74, 0.10) !important;
    filter: saturate(1.02) brightness(1.02);
    position: relative;
    overflow: hidden;
}

:root[data-theme="light"] .fc-event-external::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(20, 35, 56, 0.018);
    pointer-events: none;
}

:root[data-theme="light"] .fc-event-external > * {
    position: relative;
    z-index: 1;
}

:root[data-theme="light"] .fc-event-external:hover {
    border-color: rgba(79, 137, 216, 0.28) !important;
    box-shadow: 0 8px 18px rgba(28, 45, 74, 0.13) !important;
}

:root[data-theme="light"] .fc-event-external strong {
    color: #1b2d44 !important;
    font-weight: 700 !important;
}

:root[data-theme="light"] .fc-event-external strong .calendar-history-inline-subtask {
    opacity: 0.78;
}

:root[data-theme="light"] .fc-event-external small {
    color: #344f70 !important;
    opacity: 0.98 !important;
}

:root[data-theme="light"] .fc-event-external small.calendar-history-subtask {
    color: #5f7694 !important;
    opacity: 0.9 !important;
}

:root[data-theme="light"] .calendar-history-pin {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(79, 103, 138, 1);
    color: #506884;
}

:root[data-theme="light"] .calendar-history-pin.is-pinned {
    background: #fff3b8;
    border-color: rgba(173, 136, 34, 1);
    color: #7c5b00;
}

:root[data-theme="light"] .calendar-history-reorder-handle {
    color: rgba(40, 58, 90, 0.52);
}

:root[data-theme="light"] .fc-event-external.is-history-pinned.drag-over {
    background-image: linear-gradient(180deg, rgba(66, 118, 213, 0.07), rgba(66, 118, 213, 0.03));
}

:root[data-theme="light"] .calendar-history-drop-marker::before {
    background: rgba(66, 118, 213, 0.95);
    box-shadow: 0 0 0 2px rgba(66, 118, 213, 0.10);
}

:root[data-theme="light"] .calendar-history-drop-marker span {
    color: rgba(56, 96, 171, 0.95);
    background: rgba(247, 250, 255, 0.98);
    border-color: rgba(66, 118, 213, 0.20);
}

:root[data-theme="light"] .calendar-entries-loading-overlay {
    background: rgba(242, 247, 255, 0.48);
}

:root[data-theme="light"] .calendar-entries-loading-card {
    border-color: rgba(79, 137, 216, 0.34);
    background: rgba(255, 255, 255, 0.94);
    color: #2f4f7f;
    box-shadow: 0 12px 26px rgba(28, 45, 74, 0.16);
}

:root[data-theme="light"] .calendar-entries-loading-spinner {
    border-color: rgba(79, 137, 216, 0.30);
    border-top-color: rgba(56, 108, 184, 0.96);
}

:root[data-theme="light"] #calendar,
:root[data-theme="light"] .fc-theme-standard .fc-scrollgrid,
:root[data-theme="light"] .fc .fc-scrollgrid {
    background: var(--theme-calendar-bg);
    border-color: rgba(131, 149, 181, 0.18) !important;
}

:root[data-theme="light"] .fc .fc-timegrid-axis,
:root[data-theme="light"] .fc .fc-timegrid-axis-frame {
    background: #f3f7fd !important;
    border-right-color: rgba(131, 149, 181, 0.18) !important;
}

:root[data-theme="light"] .fc .fc-timegrid-slot-label {
    background: #f6f9fe !important;
}

:root[data-theme="light"] .fc .fc-timegrid-slot-label-cushion {
    color: var(--theme-calendar-time-label-color) !important;
}

:root[data-theme="light"] .fc .fc-timegrid-col,
:root[data-theme="light"] .fc .fc-timegrid-col-frame {
    background: #fbfcff;
}

:root[data-theme="light"] .fc .fc-timegrid-col.fc-day-today,
:root[data-theme="light"] .fc .fc-timegrid-col.fc-day-today .fc-timegrid-col-frame {
    background: #f7faff !important;
}

:root[data-theme="light"] .fc .fc-timegrid-divider {
    background: #edf2fa !important;
}

:root[data-theme="light"] .fc .fc-col-header-cell {
    background: var(--theme-calendar-colheader-bg) !important;
    border-bottom-color: rgba(131, 149, 181, 0.20) !important;
}

:root[data-theme="light"] .fc .fc-col-header-cell .fc-scrollgrid-sync-inner {
    box-shadow: inset -1px 0 0 rgba(131, 149, 181, 0.12);
}

:root[data-theme="light"] .fc .fc-col-header-cell:last-child .fc-scrollgrid-sync-inner {
    box-shadow: none;
}

:root[data-theme="light"] .fc .fc-col-header-cell-cushion {
    color: var(--theme-calendar-colheader-color) !important;
}

:root[data-theme="light"] .fc .fc-scrollgrid,
:root[data-theme="light"] .fc .fc-scrollgrid td,
:root[data-theme="light"] .fc .fc-scrollgrid th {
    border-color: rgba(131, 149, 181, 0.16) !important;
}

:root[data-theme="light"] .fc .fc-timegrid-now-indicator-line,
:root[data-theme="light"] .fc .fc-now-indicator-line {
    border-color: #e2574f !important;
}

:root[data-theme="light"] .fc .fc-now-indicator-arrow {
    border-color: #e2574f !important;
}

:root[data-theme="light"] .fc-event-main-frame {
    color: #142338 !important;
    border-radius: 8px !important;
    box-shadow: none;
}

:root[data-theme="light"] .fc .fc-timegrid-event:not(.calendar-worktime-marker-event) .fc-event-main-frame,
:root[data-theme="light"] .fc .fc-daygrid-event:not(.calendar-worktime-marker-event) .fc-event-main-frame {
    filter: saturate(1.03) brightness(1.03);
    background-image: linear-gradient(rgba(20, 35, 56, 0.015), rgba(20, 35, 56, 0.015)) !important;
    box-shadow:
        inset 0 0 0 999px rgba(20,35,56,0.006),
        0 1px 2px rgba(28, 45, 74, 0.05);
}

:root[data-theme="light"] .fc .fc-timegrid-event:hover .fc-event-main-frame,
:root[data-theme="light"] .fc .fc-daygrid-event:hover .fc-event-main-frame {
    filter: saturate(1.05) brightness(1.01);
    background-image: linear-gradient(rgba(20, 35, 56, 0.01), rgba(20, 35, 56, 0.01)) !important;
}

:root[data-theme="light"] .fc-v-event {
    border-radius: 8px !important;
    border-color: transparent !important;
    border: 0 !important;
}

:root[data-theme="light"] .fc .event-foreign .fc-event-main-frame {
    filter: saturate(1.0) brightness(1.01);
}

:root[data-theme="light"] .fc-event-line-compact {
    color: #1c2e45;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26);
}

:root[data-theme="light"] .fc-event-line-compact.strong {
    color: #12243a;
}

:root[data-theme="light"] .fc-event-inline-subtask {
    opacity: 0.78;
}

:root[data-theme="light"] .fc-event-owner-badge {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(87, 109, 143, 0.25);
    color: #314a6a;
    box-shadow: 0 2px 6px rgba(20, 36, 62, 0.10);
}

:root[data-theme="light"] .fc-month-day-tile {
    color: #1f334e;
}

:root[data-theme="light"] .fc-month-event-badge {
    color: #24508f;
    background: rgba(79, 137, 216, 0.14);
    border-color: rgba(79, 137, 216, 0.28);
}

:root[data-theme="light"] .calendar-inline-notice {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(131, 149, 181, 0.2);
    color: #24364f;
    box-shadow: 0 12px 28px rgba(28, 45, 74, 0.14);
}

/* CRM & TABLES */
.monday-table { width: 100%; border-collapse: collapse; }
.monday-table th { color: #888; font-weight: 400; font-size: 13px; text-align: left; padding: 10px; border-bottom: 1px solid var(--monday-border); }
.monday-table td { padding: 4px; border-bottom: 1px solid var(--monday-border); font-size: 14px; }

/* PROJECT BOARD */
.board-page {
    padding: 20px 20px 0 20px;
    overflow-y: auto;
    overflow-x: auto;
    box-sizing: border-box;
}

#boardView .board-page {
    height: 100%;
}

#internalTasksView .board-page {
    height: 100%;
}

#youboxView .board-page {
    height: 100%;
}

#crmView .board-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-right: 0;
}

#crmView .board-page.crm-contacts-mode {
    display: block;
    overflow-y: auto;
    overflow-x: auto;
}

#crmView .board-page.crm-contacts-mode .crm-container {
    flex: unset;
    min-height: unset;
}

#crmView .board-page.crm-contacts-mode .crm-detail-panel {
    overflow-y: visible;
}

.board-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(170px, 1fr)) auto auto auto;
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
    z-index: 15;
    padding-right: var(--user-quick-safe-space);
    box-sizing: border-box;
}

.board-toolbar.board-toolbar-rich {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    align-items: start;
    gap: 10px;
}

.board-toolbar-main {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.board-toolbar-controls {
    display: grid;
    grid-template-columns: minmax(200px, 1.6fr) minmax(144px, 164px) minmax(144px, 164px) minmax(222px, 252px) auto auto auto;
    gap: 8px;
    align-items: center;
    contain: layout;
    padding-top: 4px;
}

.board-toolbar-views {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.board-quick-views {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 38px;
}

.board-quick-view-chip-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(160, 178, 218, 0.18);
}

.board-quick-view-chip {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #eaf1ff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.board-quick-view-chip.active,
.board-quick-view-chip-wrap.active .board-quick-view-chip {
    background: rgba(79, 137, 216, 0.22);
    border-color: rgba(113, 165, 240, 0.5);
    color: #f7fbff;
}

.board-quick-view-manage {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #97a7c6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.board-quick-view-manage svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}

.board-toolbar input,
.board-toolbar select {
    background: #232428;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #eaeaea;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: none;
    transition: border-color 120ms ease, background-color 120ms ease;
}

#boardStageFilter,
#boardTeamFilter {
    min-width: 144px;
}

#boardSortBy {
    min-width: 222px;
}

.board-toolbar .secondary-btn,
.board-toolbar .column-menu-trigger {
    min-height: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.board-toolbar-controls > .secondary-btn,
.board-toolbar-controls > .column-menu-wrap {
    min-width: 132px;
}

.board-toolbar-controls > .secondary-btn {
    width: 100%;
}

.board-toolbar-controls > .column-menu-wrap > .column-menu-trigger {
    width: 100%;
}

.column-menu-trigger {
    appearance: none;
    -webkit-appearance: none;
    background: #232428;
    color: #eaeaea;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    gap: 8px;
    justify-content: space-between !important;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 12px;
    padding-right: 12px;
    box-shadow: none;
    transition: border-color 120ms ease, background-color 120ms ease;
    cursor: pointer;
    text-align: left;
}

.board-toolbar select:disabled,
.column-menu-trigger:disabled {
    opacity: 0.68;
    cursor: wait;
}

.column-menu-trigger-caret {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
    opacity: 0.72;
    transition: transform 120ms ease, opacity 120ms ease;
}

.column-menu-wrap.is-open .column-menu-trigger,
.column-menu-trigger[aria-expanded="true"] {
    border-color: rgba(122, 162, 255, 0.32);
}

.column-menu-wrap.is-open .column-menu-trigger-caret,
.column-menu-trigger[aria-expanded="true"] .column-menu-trigger-caret {
    transform: rotate(180deg);
    opacity: 1;
}

:root[data-theme="light"] .board-toolbar input,
:root[data-theme="light"] .board-toolbar select {
    background: #ffffff;
    border-color: #d7e1ef;
    color: #1d2a3d;
}

:root[data-theme="light"] .team-news-toolbar input,
:root[data-theme="light"] .team-news-toolbar select {
    background: #ffffff;
    border-color: #d7e1ef;
    color: #1d2a3d;
}

:root[data-theme="light"] .column-menu-trigger {
    background: #ffffff;
    border-color: #d7e1ef;
    color: #1d2a3d;
}

:root[data-theme="light"] .board-quick-view-chip-wrap {
    background: #f8fbff;
    border-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .board-quick-view-chip {
    background: #ffffff;
    border-color: rgba(131, 149, 181, 0.18);
    color: #2b405e;
}

:root[data-theme="light"] .column-menu-wrap.is-open .column-menu-trigger,
:root[data-theme="light"] .column-menu-trigger[aria-expanded="true"] {
    border-color: rgba(66, 118, 213, 0.24);
    background: #f5f8fd;
}

:root[data-theme="light"] .board-quick-view-chip.active,
:root[data-theme="light"] .board-quick-view-chip-wrap.active .board-quick-view-chip {
    background: #e9f1ff;
    border-color: rgba(79, 137, 216, 0.34);
    color: #20436c;
}

:root[data-theme="light"] .board-quick-view-manage {
    color: #7a8faa;
}

.board-view-manage-dialog {
    width: min(620px, calc(100vw - 32px));
}

.board-view-manage-dialog .app-confirm-message {
    margin-bottom: 0;
}

.board-view-manage-input {
    margin-top: 12px;
}

.board-view-manage-hint {
    margin-top: 10px;
    color: #9fb0d3;
    font-size: 12px;
    line-height: 1.4;
}

.board-view-manage-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
}

.board-view-manage-actions .secondary-btn,
.board-view-manage-actions .primary-btn {
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    white-space: nowrap;
}

.board-view-manage-actions .board-view-manage-delete {
    color: #f28b82;
    border-color: rgba(226, 93, 93, 0.32);
    background: rgba(226, 93, 93, 0.12);
}

.board-view-manage-actions .board-view-manage-delete:hover {
    color: #ffd8d4;
    border-color: rgba(226, 93, 93, 0.46);
    background: rgba(226, 93, 93, 0.2);
}

:root[data-theme="light"] .board-view-manage-actions .board-view-manage-delete {
    color: #b94747;
    border-color: rgba(216, 102, 102, 0.28);
    background: rgba(229, 91, 91, 0.1);
}

:root[data-theme="light"] .board-view-manage-actions .board-view-manage-delete:hover {
    color: #9e2f2f;
    border-color: rgba(216, 102, 102, 0.38);
    background: rgba(229, 91, 91, 0.16);
}

:root[data-theme="light"] .board-view-manage-actions .secondary-btn.board-view-manage-delete,
:root[data-theme="light"] .board-view-manage-actions .secondary-btn.board-view-manage-delete:hover {
    color: #b32233;
}

.board-toolbar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #232428;
    color: #eaeaea;
    font-size: 13px;
    white-space: nowrap;
}

.board-toolbar-toggle input {
    margin: 0;
    accent-color: #7aa2ff;
}

.board-toolbar-switch {
    cursor: pointer;
    user-select: none;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.board-toolbar-switch:hover {
    border-color: rgba(122, 162, 255, 0.35);
    background: #262a32;
}

.board-toolbar-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.board-toolbar-switch-track {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: background-color 140ms ease, border-color 140ms ease;
    flex: 0 0 auto;
}

.board-toolbar-switch-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #dfe7fb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    transition: transform 140ms ease, background-color 140ms ease;
}

.board-toolbar-switch-label {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.board-toolbar-switch input:checked + .board-toolbar-switch-track {
    background: rgba(122, 162, 255, 0.28);
    border-color: rgba(122, 162, 255, 0.45);
}

.board-toolbar-switch input:checked + .board-toolbar-switch-track .board-toolbar-switch-thumb {
    transform: translateX(14px);
    background: #bcd0ff;
}

.board-toolbar-switch input:focus-visible + .board-toolbar-switch-track {
    box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.2);
}

:root[data-theme="light"] .board-toolbar-toggle {
    background: #ffffff;
    border-color: #d7e1ef;
    color: #1d2a3d;
}

:root[data-theme="light"] .board-toolbar-switch:hover {
    border-color: rgba(98, 134, 203, 0.28);
    background: #f7faff;
}

:root[data-theme="light"] .board-toolbar-switch-track {
    background: #eef3fb;
    border-color: #d7e1ef;
}

:root[data-theme="light"] .board-toolbar-switch-thumb {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(24, 45, 78, 0.16);
}

:root[data-theme="light"] .board-toolbar-switch input:checked + .board-toolbar-switch-track {
    background: #dce8ff;
    border-color: #aac2f4;
}

:root[data-theme="light"] .board-toolbar-switch input:checked + .board-toolbar-switch-track .board-toolbar-switch-thumb {
    background: #5f88de;
}

.board-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.board-kpis.board-kpis-compact {
    align-self: start;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 0;
}

.column-menu-wrap {
    position: relative;
}

.board-column-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    max-height: 420px;
    overflow: auto;
    background: #2f3554;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    box-shadow: 0 18px 36px rgba(7, 10, 20, 0.6);
    padding: 10px;
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

:root[data-theme="light"] .board-column-menu {
    background: #ffffff;
    border-color: #d7e1ef;
    box-shadow: 0 18px 36px rgba(22, 40, 70, 0.12);
}

:root[data-theme="light"] .board-column-title { color: #203048; }
:root[data-theme="light"] .board-column-item { color: #4b5f79; }

:root[data-theme="light"] .board-column-menu::-webkit-scrollbar {
    width: 10px;
}

:root[data-theme="light"] .board-column-menu::-webkit-scrollbar-track {
    background: #eef3fb;
    border-radius: 999px;
}

:root[data-theme="light"] .board-column-menu::-webkit-scrollbar-thumb {
    background: #b7c6de;
    border-radius: 999px;
    border: 2px solid #eef3fb;
}

:root[data-theme="light"] .board-column-item {
    border-radius: 8px;
    padding: 6px 6px;
    border: 1px solid transparent;
}

:root[data-theme="light"] .board-column-item:hover {
    background: #f4f8ff;
    border-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .board-column-item input[type="checkbox"] {
    accent-color: #4f89d8;
}

:root[data-theme="light"] .board-column-item > span:last-child {
    gap: 6px !important;
}

:root[data-theme="light"] .board-column-item .mini-btn {
    min-width: 26px;
    padding: 2px 6px;
    background: #f3f7fd;
    border-color: rgba(131, 149, 181, 0.22);
    color: #6480a3;
}

:root[data-theme="light"] .board-column-item .mini-btn:hover:not(:disabled) {
    background: #e9f1fd;
    border-color: rgba(79, 137, 216, 0.28);
    color: #2f4d73;
}

:root[data-theme="light"] .board-column-item .mini-btn:disabled {
    background: #f7f9fd;
    color: #b4c0d2;
    border-color: rgba(131, 149, 181, 0.14);
    opacity: 1;
}

:root[data-theme="light"] .board-column-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(131, 149, 181, 0.16);
    flex-wrap: wrap;
}

:root[data-theme="light"] .board-column-actions .mini-btn {
    flex: 1 1 100%;
    text-align: center;
    justify-content: center;
    padding: 6px 8px;
}

.board-column-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.board-column-title {
    font-size: 12px;
    font-weight: 700;
    color: #dfe6ff;
    margin-bottom: 8px;
}

.board-column-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #d4d9e8;
    padding: 5px 2px;
}

.board-column-item.is-draggable {
    cursor: grab;
}

.board-column-item.is-dragging {
    opacity: 0.55;
}

.board-column-item.is-drop-before {
    box-shadow: inset 0 2px 0 rgba(122, 162, 255, 0.6);
}

.board-column-item.is-drop-after {
    box-shadow: inset 0 -2px 0 rgba(122, 162, 255, 0.6);
}

.board-column-item-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.board-column-item-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 4px;
}

.board-column-actions {
    margin-top: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.board-column-actions .mini-btn {
    flex: 1 1 100%;
    justify-content: center;
}

.board-kpi {
    background: var(--theme-board-kpi-bg);
    border: 1px solid var(--theme-board-kpi-border);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

#boardView .board-kpi {
    border-radius: 9px;
    padding: 5px 7px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Board + Internal Tasks light-theme table polish */
:root[data-theme="light"] .board-table th,
:root[data-theme="light"] .board-table td {
    border-bottom-color: rgba(131, 149, 181, 0.20);
    border-right-color: rgba(131, 149, 181, 0.16);
}

:root[data-theme="light"] .board-table td {
    background: #f9fbff;
    color: #25364f;
}

:root[data-theme="light"] .board-table th {
    background: #eef3fb;
    color: #647a98;
    border-top: 1px solid rgba(131, 149, 181, 0.16);
    padding-top: 4px;
    padding-bottom: 4px;
}

:root[data-theme="light"] .board-table th[data-col="video"] {
    background: #e8eef9;
    border-right-color: rgba(131, 149, 181, 0.20);
}

:root[data-theme="light"] .board-table td[data-col="video"] {
    background: #f3f7ff;
    border-right-color: rgba(131, 149, 181, 0.20);
}

:root[data-theme="light"] .board-table tr:hover td {
    background: #eef4ff;
}

:root[data-theme="light"] .board-table tr:hover td[data-col="video"] {
    background: #e7efff;
}

:root[data-theme="light"] .board-table tr.archived-project td {
    color: #7c8fa8;
}

:root[data-theme="light"] .board-table tr.archived-project:hover td {
    background: #edf3fd;
}

:root[data-theme="light"] .board-table tr.is-due-overdue td {
    background: linear-gradient(var(--due-color-overdue), var(--due-color-overdue)), #f9fbff;
}

:root[data-theme="light"] .board-table tr.is-due-today td {
    background: linear-gradient(var(--due-color-today), var(--due-color-today)), #f9fbff;
}

:root[data-theme="light"] .board-table tr.is-due-tomorrow td {
    background: linear-gradient(var(--due-color-tomorrow), var(--due-color-tomorrow)), #f9fbff;
}

:root[data-theme="light"] .board-table tr.is-due-week td {
    background: linear-gradient(var(--due-color-week), var(--due-color-week)), #f9fbff;
}

:root[data-theme="light"] .board-table tr.is-due-next-week td {
    background: linear-gradient(var(--due-color-next-week), var(--due-color-next-week)), #f9fbff;
}

:root[data-theme="light"] .board-table tr.is-due-overdue td[data-col="video"] {
    background: linear-gradient(var(--due-color-overdue), var(--due-color-overdue)), #f9fbff;
}

:root[data-theme="light"] .board-table tr.is-due-today td[data-col="video"] {
    background: linear-gradient(var(--due-color-today), var(--due-color-today)), #f9fbff;
}

:root[data-theme="light"] .board-table tr.is-due-tomorrow td[data-col="video"] {
    background: linear-gradient(var(--due-color-tomorrow), var(--due-color-tomorrow)), #f9fbff;
}

:root[data-theme="light"] .board-table tr.is-due-week td[data-col="video"] {
    background: linear-gradient(var(--due-color-week), var(--due-color-week)), #f9fbff;
}

:root[data-theme="light"] .board-table tr.is-due-next-week td[data-col="video"] {
    background: linear-gradient(var(--due-color-next-week), var(--due-color-next-week)), #f9fbff;
}


:root[data-theme="light"] .board-table tr.board-group-sum-row td {
    background: #eef3fb;
    border-top-color: rgba(131, 149, 181, 0.24);
    border-bottom-color: rgba(131, 149, 181, 0.24);
}

:root[data-theme="light"] .board-table tr.board-group-sum-row:hover td {
    background: #eef3fb !important;
}

:root[data-theme="light"] .board-table tr.board-group-sum-row td[data-col="kalenderkosten"] {
    background: #e8eef8;
}

:root[data-theme="light"] .board-group-sum-amount {
    color: #20324a;
}

:root[data-theme="light"] .board-group-sum-label {
    color: #6c809c;
}

:root[data-theme="light"] .board-table input,
:root[data-theme="light"] .board-table select,
:root[data-theme="light"] .subtask-row input[type="text"],
:root[data-theme="light"] .subtask-row input[type="date"],
:root[data-theme="light"] .subtask-row input.new-subtask-title-input,
:root[data-theme="light"] .board-table input.project-inline-input {
    background: #ffffff;
    border-color: rgba(126, 145, 179, 0.24);
    color: #21324c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

:root[data-theme="light"] .board-table textarea.project-inline-input.board-details-inline-input {
    background: #ffffff;
    border-color: rgba(126, 145, 179, 0.24);
    color: #21324c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

:root[data-theme="light"] .board-table input::placeholder,
:root[data-theme="light"] .subtask-row input[type="text"]::placeholder,
:root[data-theme="light"] .subtask-row input.new-subtask-title-input::placeholder,
:root[data-theme="light"] .board-table input.project-inline-input::placeholder {
    color: #889ab3;
}

:root[data-theme="light"] .board-table input:focus,
:root[data-theme="light"] .board-table select:focus,
:root[data-theme="light"] .subtask-row input[type="text"]:focus,
:root[data-theme="light"] .subtask-row input[type="date"]:focus,
:root[data-theme="light"] .subtask-row input.new-subtask-title-input:focus,
:root[data-theme="light"] .board-table input.project-inline-input:focus {
    outline: none;
    border-color: rgba(51, 108, 203, 0.45);
    box-shadow: 0 0 0 2px rgba(51, 108, 203, 0.10);
}

:root[data-theme="light"] .board-table textarea.project-inline-input.board-details-inline-input:focus {
    outline: none;
    border-color: rgba(51, 108, 203, 0.45);
    box-shadow: 0 0 0 2px rgba(51, 108, 203, 0.10);
}

:root[data-theme="light"] .board-table textarea.project-inline-input.youbox-notes-inline-input {
    background: #ffffff;
    border-color: rgba(126, 145, 179, 0.24);
    color: #21324c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

:root[data-theme="light"] .board-table textarea.project-inline-input.youbox-notes-inline-input:focus {
    outline: none;
    border-color: rgba(51, 108, 203, 0.45);
    box-shadow: 0 0 0 2px rgba(51, 108, 203, 0.10);
}

:root[data-theme="light"] .board-table input.project-inline-input.is-invalid {
    background: #fff5f6;
    border-color: rgba(215, 98, 109, 0.45);
}

:root[data-theme="light"] .project-inline-hint {
    color: #b54b55;
}

:root[data-theme="light"] .subtask-inline-hint {
    color: rgba(58, 77, 109, 0.78);
}

:root[data-theme="light"] .internal-task-date-input {
    background: #ffffff !important;
    border: 1px solid rgba(126, 145, 179, 0.24) !important;
    color: #233651 !important;
    color-scheme: light;
}

:root[data-theme="light"] .internal-task-date-input::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.7;
}

:root[data-theme="light"] .internal-task-date-input:focus {
    border-color: rgba(51, 108, 203, 0.45) !important;
    box-shadow: 0 0 0 2px rgba(51, 108, 203, 0.10);
}

:root[data-theme="light"] .board-project-budget-value,
:root[data-theme="light"] .board-project-cost-value {
    color: #25364f;
}

:root[data-theme="light"] .board-project-fixed-inline {
    color: #6f83a1;
}

:root[data-theme="light"] .board-project-budget-value.is-empty {
    color: #8598b4;
}

:root[data-theme="light"] .board-project-cost-edit-btn {
    border-color: rgba(126, 145, 179, 0.24);
    color: #617693;
    background: #ffffff;
}

:root[data-theme="light"] .board-project-cost-edit-btn:hover {
    color: #1d6b4a;
    border-color: rgba(91, 191, 142, 0.48);
    background: rgba(90, 190, 142, 0.08);
}

:root[data-theme="light"] .board-project-cost-hover {
    background: #ffffff;
    border-color: rgba(126, 145, 179, 0.22);
    box-shadow: 0 12px 24px rgba(35, 52, 85, 0.14);
}

:root[data-theme="light"] .board-project-cost-hover-title {
    color: #20334d;
}

:root[data-theme="light"] .board-project-cost-hover-item {
    color: #556a86;
}

:root[data-theme="light"] .board-project-cost-hover-item.total {
    color: #20334d;
}

:root[data-theme="light"] .board-project-cost-hover-sep {
    background: rgba(126, 145, 179, 0.16);
}

:root[data-theme="light"] .board-project-cost-hover-empty {
    color: #7e91ab;
}

:root[data-theme="light"] .board-project-calc-review {
    background: rgba(80, 115, 178, 0.05);
    border-color: rgba(126, 145, 179, 0.18);
}

:root[data-theme="light"] .board-project-calc-review-state {
    color: #324760;
}

:root[data-theme="light"] .board-project-calc-review-meta {
    color: #6f84a0;
}

:root[data-theme="light"] .board-table td[data-col="budgetstatus"] {
    background: #f7fbf9;
}

:root[data-theme="light"] .board-project-budget-usage {
    background: #f9fcfb;
    border-color: rgba(132, 154, 183, 0.20);
}

:root[data-theme="light"] .board-project-budget-usage-track {
    background: rgba(108, 127, 160, 0.12);
}

:root[data-theme="light"] .board-project-budget-usage-track-label {
    color: #24405b;
    text-shadow: none;
}

:root[data-theme="light"] .board-project-budget-usage-track-label .muted {
    color: #5f7794;
    opacity: 0.95;
}

:root[data-theme="light"] .board-project-budget-usage-foot {
    color: #607793;
}

:root[data-theme="light"] .board-project-budget-usage-foot .budget-base {
    color: #6f86a1;
    opacity: 1;
}

:root[data-theme="light"] .board-project-budget-usage-foot .is-over {
    color: #b6414d;
}

:root[data-theme="light"] .board-project-budget-usage-foot .is-free {
    color: #2f7c56;
}

:root[data-theme="light"] .board-project-budget-usage.is-ok {
    background: rgba(80, 187, 130, 0.08);
    border-color: rgba(80, 187, 130, 0.28);
}

:root[data-theme="light"] .board-project-budget-usage.is-warn {
    background: rgba(236, 178, 69, 0.10);
    border-color: rgba(226, 166, 54, 0.32);
}

:root[data-theme="light"] .board-project-budget-usage.is-over {
    background: rgba(235, 91, 103, 0.10);
    border-color: rgba(222, 78, 91, 0.32);
}

:root[data-theme="light"] .board-table td[data-col="kalkulation"] {
    background: #f8fbff;
}

:root[data-theme="light"] .board-project-calc-review {
    background: #f7faff;
    border-color: rgba(132, 154, 183, 0.20);
}

:root[data-theme="light"] .board-project-calc-review.is-good {
    background: rgba(76, 194, 132, 0.10);
    border-color: rgba(76, 194, 132, 0.28);
}

:root[data-theme="light"] .board-project-calc-review.is-good .board-project-calc-review-state {
    color: #1f7b4f;
}

:root[data-theme="light"] .board-project-calc-review.is-bad {
    background: rgba(230, 92, 106, 0.10);
    border-color: rgba(220, 79, 94, 0.28);
}

:root[data-theme="light"] .board-project-calc-review.is-bad .board-project-calc-review-state {
    color: #a33240;
}

:root[data-theme="light"] .board-project-calc-review.is-even {
    background: rgba(77, 126, 212, 0.08);
    border-color: rgba(77, 126, 212, 0.22);
}

:root[data-theme="light"] .board-project-calc-review-state {
    color: #2f4764;
}

:root[data-theme="light"] .board-project-calc-review-meta {
    color: #5f7692;
}

:root[data-theme="light"] .board-add-row {
    background: #f9fbff;
}

:root[data-theme="light"] .board-add-row-label {
    color: #5f7594;
    background: #f9fbff;
}

:root[data-theme="light"] .board-add-row-label:hover {
    color: #2e5fae;
    background: rgba(46, 95, 174, 0.06);
}

:root[data-theme="light"] .board-table tr.board-add-row-table-row td.board-add-row-table-cell {
    background: #f9fbff;
    border-bottom-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .board-table tr.board-add-row-table-row:hover td.board-add-row-table-cell {
    background: #eef4ff !important;
}

:root[data-theme="light"] .board-table tr.board-add-row-table-row .board-add-row-label {
    background: transparent;
}

:root[data-theme="light"] .board-table tr.board-add-row-table-row.end-drop-active td.board-add-row-table-cell {
    background: #f9fbff !important;
    border-bottom: 3px dashed #64b4ff !important;
}

:root[data-theme="light"] .board-group-sum-wrap {
    margin-top: 8px;
    width: 100%;
}

:root[data-theme="light"] .board-group-sum-table .board-group-sum-row td {
    background: #f5f8fd;
    border-top: 1px solid rgba(131, 149, 181, 0.20);
    border-bottom: 1px solid rgba(131, 149, 181, 0.20);
    border-right: 1px solid rgba(131, 149, 181, 0.16);
}

:root[data-theme="light"] .board-group-sum-table .board-group-sum-row td:last-child {
    border-right: 1px solid rgba(131, 149, 181, 0.20);
}

:root[data-theme="light"] .board-group-sum-wrap {
    justify-content: flex-end;
}

:root[data-theme="light"] .board-group-sum-wrap {
    justify-content: stretch;
}

:root[data-theme="light"] .board-group-sum-table {
    box-shadow: 0 1px 2px rgba(35, 52, 85, 0.05);
}

:root[data-theme="light"] .board-group-sum-table .board-group-sum-spacer {
    background: transparent !important;
    color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
}

:root[data-theme="light"] .board-group-sum-table tr.board-group-sum-row:hover td {
    background: #f5f8fd !important;
}

:root[data-theme="light"] .board-group-sum-table tr.board-group-sum-row:hover .board-group-sum-spacer {
    background: transparent !important;
}

:root[data-theme="light"] .board-table th[data-col="video"]::after,
:root[data-theme="light"] .board-table tr.draggable td[data-col="video"]::after {
    background: #e9eef7;
}

:root[data-theme="light"] .subtasks-host-row td {
    background: #eef3fb;
    border-right-color: rgba(131, 149, 181, 0.16);
}

:root[data-theme="light"] .board-table tr.subtasks-host-row:hover td {
    background: #eef3fb !important;
}

:root[data-theme="light"] .subtasks-host-row td::before {
    background: #e9eef7;
}

:root[data-theme="light"] .subtasks {
    background: #f4f7fd;
    border-color: rgba(131, 149, 181, 0.22);
}

:root[data-theme="light"] .subtask-header {
    background: #f8fbff;
    color: #667d9a;
}

:root[data-theme="light"] .subtask-row {
    border-top-color: rgba(131, 149, 181, 0.16);
}

:root[data-theme="light"] .subtask-row > * {
    background: #f8fbff;
    color: #25364f;
    border-right-color: rgba(131, 149, 181, 0.14);
}

:root[data-theme="light"] .subtask-row > :first-child {
    background: #f1f6ff;
}

:root[data-theme="light"] .subtask-row > :first-child::before {
    background: #e9eef7;
}

:root[data-theme="light"] .subtask-row > :nth-child(2) {
    background: #f6faff;
}

:root[data-theme="light"] .subtask-row.subtask-header > :first-child,
:root[data-theme="light"] .subtask-row.subtask-header > :nth-child(2) {
    background: #e9eef8;
}

:root[data-theme="light"] .subtask-row.subtask-complete > * {
    opacity: 1;
}

:root[data-theme="light"] .subtask-row.subtask-complete > :first-child,
:root[data-theme="light"] .subtask-row.subtask-complete > :nth-child(2) {
    background: #eef3fb;
}

:root[data-theme="light"] .subtask-row.subtask-complete > :first-child {
    opacity: 1;
}

:root[data-theme="light"] .subtask-row.is-due-overdue > * {
    background: linear-gradient(var(--due-color-overdue), var(--due-color-overdue)), #f8fbff;
}

:root[data-theme="light"] .subtask-row.is-due-today > * {
    background: linear-gradient(var(--due-color-today), var(--due-color-today)), #f8fbff;
}

:root[data-theme="light"] .subtask-row.is-due-tomorrow > * {
    background: linear-gradient(var(--due-color-tomorrow), var(--due-color-tomorrow)), #f8fbff;
}

:root[data-theme="light"] .subtask-row.is-due-week > * {
    background: linear-gradient(var(--due-color-week), var(--due-color-week)), #f8fbff;
}

:root[data-theme="light"] .subtask-row.is-due-next-week > * {
    background: linear-gradient(var(--due-color-next-week), var(--due-color-next-week)), #f8fbff;
}

:root[data-theme="light"] .subtask-row.is-due-overdue > :first-child,
:root[data-theme="light"] .subtask-row.is-due-overdue > :nth-child(2),
:root[data-theme="light"] .subtask-row.is-due-today > :first-child,
:root[data-theme="light"] .subtask-row.is-due-today > :nth-child(2),
:root[data-theme="light"] .subtask-row.is-due-tomorrow > :first-child,
:root[data-theme="light"] .subtask-row.is-due-tomorrow > :nth-child(2),
:root[data-theme="light"] .subtask-row.is-due-week > :first-child,
:root[data-theme="light"] .subtask-row.is-due-week > :nth-child(2),
:root[data-theme="light"] .subtask-row.is-due-next-week > :first-child,
:root[data-theme="light"] .subtask-row.is-due-next-week > :nth-child(2),
:root[data-theme="light"] .subtask-row.is-due-overdue .my-work-team-cell,
:root[data-theme="light"] .subtask-row.is-due-overdue .subtask-status-cell,
:root[data-theme="light"] .subtask-row.is-due-overdue .subtask-actions-cell,
:root[data-theme="light"] .subtask-row.is-due-overdue .board-attachment-cell,
:root[data-theme="light"] .subtask-row.is-due-today .my-work-team-cell,
:root[data-theme="light"] .subtask-row.is-due-today .subtask-status-cell,
:root[data-theme="light"] .subtask-row.is-due-today .subtask-actions-cell,
:root[data-theme="light"] .subtask-row.is-due-today .board-attachment-cell,
:root[data-theme="light"] .subtask-row.is-due-tomorrow .my-work-team-cell,
:root[data-theme="light"] .subtask-row.is-due-tomorrow .subtask-status-cell,
:root[data-theme="light"] .subtask-row.is-due-tomorrow .subtask-actions-cell,
:root[data-theme="light"] .subtask-row.is-due-tomorrow .board-attachment-cell,
:root[data-theme="light"] .subtask-row.is-due-week .my-work-team-cell,
:root[data-theme="light"] .subtask-row.is-due-week .subtask-status-cell,
:root[data-theme="light"] .subtask-row.is-due-week .subtask-actions-cell,
:root[data-theme="light"] .subtask-row.is-due-week .board-attachment-cell,
:root[data-theme="light"] .subtask-row.is-due-next-week .my-work-team-cell,
:root[data-theme="light"] .subtask-row.is-due-next-week .subtask-status-cell,
:root[data-theme="light"] .subtask-row.is-due-next-week .subtask-actions-cell,
:root[data-theme="light"] .subtask-row.is-due-next-week .board-attachment-cell {
    background: var(--subtask-due-fill) !important;
    opacity: 1 !important;
}

:root[data-theme="light"] .subtask-row.is-due-overdue > :first-child,
:root[data-theme="light"] .subtask-row.is-due-today > :first-child,
:root[data-theme="light"] .subtask-row.is-due-tomorrow > :first-child,
:root[data-theme="light"] .subtask-row.is-due-week > :first-child,
:root[data-theme="light"] .subtask-row.is-due-next-week > :first-child {
    background: linear-gradient(var(--subtask-due-bg), var(--subtask-due-bg)), #f9fbff !important;
}

:root[data-theme="light"] .subtask-row.is-due-overdue,
:root[data-theme="light"] .subtask-row.is-due-today,
:root[data-theme="light"] .subtask-row.is-due-tomorrow,
:root[data-theme="light"] .subtask-row.is-due-week,
:root[data-theme="light"] .subtask-row.is-due-next-week {
    --subtask-due-fill: linear-gradient(var(--subtask-due-bg), var(--subtask-due-bg)), #f9fbff;
    background: var(--subtask-due-fill);
    box-shadow: 2000px 0 0 0 var(--subtask-due-bg);
}

:root[data-theme="light"] .subtask-row.is-due-overdue > :first-child::before,
:root[data-theme="light"] .subtask-row.is-due-today > :first-child::before,
:root[data-theme="light"] .subtask-row.is-due-tomorrow > :first-child::before,
:root[data-theme="light"] .subtask-row.is-due-week > :first-child::before,
:root[data-theme="light"] .subtask-row.is-due-next-week > :first-child::before {
    background: linear-gradient(var(--subtask-due-bg), var(--subtask-due-bg)), #e9eef7 !important;
}

:root[data-theme="light"] .subtask-row.subtask-add-row > *,
:root[data-theme="light"] .subtask-row.subtask-empty-row > * {
    background: #f2f6fc;
}

:root[data-theme="light"] .subtask-row.subtask-empty-row,
:root[data-theme="light"] .subtask-row.subtask-empty-row:hover {
    background: #f2f6fc !important;
}

:root[data-theme="light"] .subtask-row.subtask-empty-row > :first-child,
:root[data-theme="light"] .subtask-row.subtask-empty-row > :nth-child(2),
:root[data-theme="light"] .subtask-row.subtask-empty-row:hover > :first-child,
:root[data-theme="light"] .subtask-row.subtask-empty-row:hover > :nth-child(2) {
    background: #eef3fb !important;
}

:root[data-theme="light"] .subtask-row.subtask-empty-row > :nth-child(2) {
    border-right: none;
}

:root[data-theme="light"] .subtask-row.subtask-empty-row > :first-child::before {
    background: #e9eef7 !important;
}

:root[data-theme="light"] .subtask-add-row-label,
:root[data-theme="light"] .subtask-empty-label {
    color: #647a98;
}

:root[data-theme="light"] .subtask-row.subtask-add-row:hover > * {
    background: #eaf1fc;
}

:root[data-theme="light"] .subtask-row.subtask-add-row,
:root[data-theme="light"] .subtask-row.subtask-add-row:hover,
:root[data-theme="light"] .subtask-row.subtask-add-row.end-drop-active {
    background: #f2f6fc !important;
    border-top-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .subtask-row.subtask-add-row > *,
:root[data-theme="light"] .subtask-row.subtask-add-row:hover > *,
:root[data-theme="light"] .subtask-row.subtask-add-row.end-drop-active > * {
    background: #f8fbff !important;
    border-right-color: rgba(131, 149, 181, 0.14);
}

:root[data-theme="light"] .subtask-row.subtask-add-row > :first-child,
:root[data-theme="light"] .subtask-row.subtask-add-row > :nth-child(2),
:root[data-theme="light"] .subtask-row.subtask-add-row:hover > :first-child,
:root[data-theme="light"] .subtask-row.subtask-add-row:hover > :nth-child(2),
:root[data-theme="light"] .subtask-row.subtask-add-row.end-drop-active > :first-child,
:root[data-theme="light"] .subtask-row.subtask-add-row.end-drop-active > :nth-child(2) {
    background: #f6faff !important;
}

:root[data-theme="light"] .subtask-row.subtask-add-row > :nth-child(2) {
    border-right: none;
}

:root[data-theme="light"] .subtask-row.subtask-add-row > :first-child::before {
    background: #e9eef7 !important;
}

:root[data-theme="light"] .subtask-row.subtask-add-row > :nth-child(2)::before {
    background: #e9eef7 !important;
}

:root[data-theme="light"] .subtask-row.subtask-add-row:hover > :first-child::before,
:root[data-theme="light"] .subtask-row.subtask-add-row:hover > :nth-child(2)::before,
:root[data-theme="light"] .subtask-row.subtask-add-row.end-drop-active > :first-child::before,
:root[data-theme="light"] .subtask-row.subtask-add-row.end-drop-active > :nth-child(2)::before {
    background: #e9eef7 !important;
}

:root[data-theme="light"] .subtask-row.subtask-add-row {
    border-left-color: rgba(131, 149, 181, 0.2) !important;
}

:root[data-theme="light"] .subtask-row.subtask-add-row > :first-child,
:root[data-theme="light"] .subtask-row.subtask-add-row:hover > :first-child,
:root[data-theme="light"] .subtask-row.subtask-add-row.end-drop-active > :first-child {
    box-shadow: none !important;
}

:root[data-theme="light"] #internalTaskBoard .internal-subtask-row .subtask-details-cell,
:root[data-theme="light"] #internalTaskBoard .board-table td[data-it-col="details"] {
    color: #4d607b;
}

:root[data-theme="light"] #internalTaskBoard .internal-subtask-row .subtask-details-cell.is-empty,
:root[data-theme="light"] #internalTaskBoard .board-table td[data-it-col="details"].is-empty {
    color: #8a9bb4;
}

:root[data-theme="light"] .subtask-row .subtask-details-cell {
    color: #4d607b;
}

:root[data-theme="light"] .subtask-row .subtask-details-cell.is-empty {
    color: #8a9bb4;
}

:root[data-theme="light"] .status-pill {
    border-color: rgba(126, 145, 179, 0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
    filter: saturate(0.86) brightness(1.04);
}

:root[data-theme="light"] .status-pill-trigger,
:root[data-theme="light"] .video-type-trigger,
:root[data-theme="light"] .subtask-status-trigger {
    border: 1px solid rgba(126, 145, 179, 0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
    filter: saturate(0.86) brightness(1.04);
}

:root[data-theme="light"] .status-menu {
    background: #ffffff;
    border-color: rgba(126, 145, 179, 0.24);
    box-shadow: 0 16px 30px rgba(35, 52, 85, 0.16);
}

:root[data-theme="light"] .status-menu-arrow {
    background: #ffffff;
    border-left-color: rgba(126, 145, 179, 0.24);
    border-top-color: rgba(126, 145, 179, 0.24);
}

:root[data-theme="light"] .status-option,
:root[data-theme="light"] .video-type-option {
    color: #20324a;
    border-color: rgba(255,255,255,0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
    filter: saturate(0.88) brightness(1.03);
}

:root[data-theme="light"] .status-option.active,
:root[data-theme="light"] .video-type-option.active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 1px rgba(126, 145, 179, 0.18);
}

:root[data-theme="light"] .status-option:hover,
:root[data-theme="light"] .video-type-option:hover {
    filter: brightness(1.02) saturate(1.02);
}

:root[data-theme="light"] .pill {
    color: #24405f;
    background: rgba(61, 121, 214, 0.10);
    border-color: rgba(61, 121, 214, 0.20);
}

:root[data-theme="light"] .pill-muted {
    background: rgba(116, 136, 170, 0.10);
    border-color: rgba(116, 136, 170, 0.18);
    color: #5f7390;
}

:root[data-theme="light"] .row-archive-btn {
    border-color: rgba(126, 145, 179, 0.24);
    color: #657b97;
    background: #fff;
}

:root[data-theme="light"] .row-archive-btn:hover {
    color: #1d6b4a;
    border-color: rgba(91, 191, 142, 0.48);
    background: rgba(90, 190, 142, 0.08);
}

:root[data-theme="light"] .row-unarchive-btn {
    color: #287a4a;
    border-color: rgba(65, 162, 106, 0.45);
    background: rgba(65, 162, 106, 0.08);
}

:root[data-theme="light"] .row-unarchive-btn:hover {
    color: #1f6a40;
    border-color: rgba(65, 162, 106, 0.60);
    background: rgba(65, 162, 106, 0.14);
}

.board-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    line-height: 1.1;
    color: var(--theme-board-kpi-label);
}

#boardView .board-kpi-label {
    font-size: 8px;
    letter-spacing: 0.06em;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-kpi-value {
    margin-top: 1px;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 700;
    color: var(--theme-board-kpi-value);
}

#boardView .board-kpi-value {
    margin-top: 0;
    font-size: 13px;
    line-height: 1.05;
    font-weight: 650;
    white-space: nowrap;
}

#projectBoard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: max-content;
    min-width: 100%;
}

.board-scroll-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}


.board-scroll-shell::-webkit-scrollbar {
    height: 0;
}

.board-scrollbar-sticky {
    display: none;
    position: sticky;
    bottom: 0;
    z-index: 30;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    height: 10px;
    background: transparent;
    border-top: 0;
}

.board-scrollbar-sticky.active {
    display: block;
}

#youboxScrollSticky,
#youboxScrollSticky.active {
    display: none !important;
}

.board-scrollbar-sticky-inner {
    height: 1px;
}

.board-group {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(3, 8, 18, 0.12);
    overflow: visible;
    width: max-content;
    min-width: 100%;
}

:root[data-theme="light"] .board-group {
    background: rgba(255,255,255,0.82);
    border-color: #e1e9f3;
}

:root[data-theme="light"] #boardView .board-kpi {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border-color: rgba(145, 164, 195, 0.18);
    box-shadow: 0 5px 12px rgba(22, 40, 70, 0.035);
}

:root[data-theme="light"] #boardView .board-kpi-label {
    font-size: 8px;
    letter-spacing: 0.06em;
    color: #8394ab;
}

:root[data-theme="light"] #boardView .board-kpi-value {
    font-size: 13px;
    color: #21324a;
}

:root[data-theme="light"] #boardView .video-main-cell {
    gap: 10px;
}

:root[data-theme="light"] #boardView .team-pill:not(.me-checklist-team-overflow) {
    background: #f3f6fb;
    border-color: rgba(145, 164, 195, 0.18);
    color: #647892;
    border-radius: 999px;
    padding: 4px 8px;
}

:root[data-theme="light"] #boardView .team-pill.me-checklist-team-overflow {
    width: 20px;
    min-width: 20px;
    height: 20px;
    background: #1b243f;
    border-color: #1b243f;
    color: #f3f7ff;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

:root[data-theme="light"] .team-overflow-popover {
    background: #ffffff;
    border-color: rgba(145, 164, 195, 0.28);
    box-shadow: 0 14px 28px rgba(33, 52, 84, 0.16);
}

:root[data-theme="light"] .team-overflow-popover-user {
    color: #3d5270;
}

:root[data-theme="light"] #boardView .row-thread-btn,
:root[data-theme="light"] #boardView .row-copy-btn {
    border-color: rgba(145, 164, 195, 0.18);
    color: #7890ad;
    background: #f8fbff;
}

:root[data-theme="light"] #boardView .row-thread-btn:hover,
:root[data-theme="light"] #boardView .row-copy-btn:hover {
    color: #2c4f77;
    border-color: rgba(79, 137, 216, 0.24);
    background: #eef5ff;
}

.board-group-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
    background: var(--ui-surface-shade-25);
    border-bottom: 1px solid rgba(163, 184, 221, 0.22);
}

:root[data-theme="light"] .board-group-header {
    background: rgba(242, 246, 252, 0.92);
    border-bottom: 1px solid rgba(145, 164, 195, 0.28);
}

:root[data-theme="light"] .board-group-title,
:root[data-theme="light"] .board-group-count {
    color: #1b2940;
}

:root[data-theme="light"] .board-group-title {
    background: transparent;
    padding-right: 0;
}

.board-group-title {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    left: 14px;
    z-index: 11;
    background: var(--ui-surface-shade-25);
    padding-right: 12px;
}

.board-group-toggle {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--ui-surface-soft-03);
    color: #d2d6dc;
    cursor: pointer;
}

.board-group-toggle:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.board-group-title .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.board-group-count {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}

.board-group-title .board-archive-toggle-btn {
    margin-left: 2px;
    white-space: nowrap;
}

.board-group-body {
    overflow: visible;
}

.board-loading-state {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 12px 14px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(156, 175, 209, 0.26);
    background: rgba(25, 33, 53, 0.72);
    color: #c6d4ef;
    font-size: 13px;
}

.board-loading-spinner,
.board-archive-btn-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(198, 212, 239, 0.28);
    border-top-color: rgba(198, 212, 239, 0.95);
    animation: boardSpin 0.8s linear infinite;
}

.board-archive-toggle-btn.is-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.95;
}

@keyframes boardSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.board-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

.board-table th,
.board-table td {
    border-bottom: 1px solid rgba(156, 175, 209, 0.18);
    border-right: 1px solid rgba(156, 175, 209, 0.12);
    padding: 2px 6px;
    font-size: 13px;
    vertical-align: middle;
    position: relative;
    overflow: visible;
    background: #2b3048;
}

#youboxView .youbox-board-table td[data-yb-col="notes"] {
    overflow: hidden;
    white-space: nowrap;
}

#youboxView .youbox-board-table td[data-yb-col="notes"].editable {
    line-height: 1.2;
}

#youboxView .youbox-board-table td[data-yb-col="notes"] .project-inline-input,
#youboxView .youbox-board-table td[data-yb-col="notes"] .youbox-notes-inline-input {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.board-table td[data-col="kalenderkosten"],
.board-table th[data-col="kalenderkosten"],
.board-table td[data-col="budget"],
.board-table th[data-col="budget"] {
    text-align: right;
}

.board-table td[data-col="abgerechnet"],
.board-table th[data-col="abgerechnet"] {
    text-align: right;
}

.board-table td[data-col="budgetstatus"] {
    padding: 0;
}

.board-project-budget-value {
    display: inline-block;
    min-width: 9.5ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    color: #dfe7fb;
}

.board-project-budget-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.board-money-whole,
.board-money-decimals,
.board-money-symbol {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

.board-money-whole {
    color: inherit;
}

.board-money-decimals {
    font-size: 0.84em;
    opacity: 0.92;
    letter-spacing: 0;
}

.board-money-decimals.is-zero {
    opacity: 0.55;
}

.board-money-symbol {
    margin-left: 1px;
    font-size: 0.9em;
    opacity: 0.9;
}

.board-project-budget-value.is-empty {
    min-width: 100%;
    color: #92a0c5;
    font-size: 11px;
    font-weight: 500;
    font-style: italic;
}

.board-project-budget-empty-btn {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: inherit;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.board-money-inline-input {
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.board-money-inline-input::placeholder {
    color: #8e9cc2;
    opacity: 1;
}

.board-project-cost-value {
    display: inline-block;
    min-width: 9.5ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    color: #e7eeff;
    letter-spacing: 0.1px;
}

.board-project-cost-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.board-project-cost-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.board-project-cost-edit-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #afb5c6;
    border-radius: 8px;
    padding: 0;
    min-width: 28px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
}

.board-project-cost-edit-btn:hover {
    color: #d8f7e7;
    border-color: rgba(121, 221, 170, 0.75);
    background: rgba(97, 197, 150, 0.18);
}

.board-project-fixed-inline {
    width: 100%;
    text-align: right;
    font-size: 11px;
    color: #aab6d8;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    line-height: 1.05;
}

.board-project-budget-usage {
    width: 100%;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    background: var(--ui-surface-soft-03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 100%;
    box-sizing: border-box;
}

.board-project-budget-usage.is-loading {
    height: 16px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: budget-usage-shimmer 1.4s infinite linear;
}

@keyframes budget-usage-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.board-project-budget-usage-foot {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    align-items: center;
    font-size: 9px;
    line-height: 1.15;
}

.board-project-budget-usage-track {
    height: 16px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
    position: relative;
    margin: 0;
}

.board-project-budget-usage-track.is-empty {
    opacity: 0.45;
}

.board-project-budget-usage-fill {
    height: 100%;
    border-radius: 0;
    background: linear-gradient(90deg, #69d4a6, #58c486);
}

.board-project-budget-usage-overfill {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.35) 0 4px,
            rgba(255, 255, 255, 0.05) 4px 8px
        ),
        linear-gradient(90deg, rgba(255, 85, 85, 0.2), rgba(255, 70, 70, 0.45));
    border-left: 1px solid rgba(255, 240, 240, 0.5);
    z-index: 1;
    pointer-events: none;
}

.board-project-budget-usage.is-over .board-project-budget-usage-track::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 245, 245, 0.8);
    box-shadow: 0 0 8px rgba(255, 110, 110, 0.55);
    z-index: 2;
    pointer-events: none;
}

.board-project-budget-usage-track-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 0 6px;
    font-size: 9px;
    line-height: 1;
    color: #e8efff;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    pointer-events: none;
    z-index: 3;
}

.board-project-budget-usage-track-label .muted {
    opacity: 0.75;
}

.board-project-budget-usage-foot {
    margin-top: 3px;
    color: #9fb0d8;
    padding: 0 4px 3px;
}

.board-project-budget-usage-foot .budget-base {
    opacity: 0.72;
}

.board-project-budget-usage-foot .is-over {
    color: #ff9da5;
}

.board-project-budget-usage-foot .is-free {
    color: #b8d9c6;
}

.board-project-budget-usage.is-ok .board-project-budget-usage-fill {
    background: linear-gradient(90deg, #4fd18f, #7ee3ba);
}

.board-project-budget-usage.is-ok {
    background: rgba(64, 186, 128, 0.09);
    border-color: rgba(76, 214, 150, 0.42);
}

.board-project-budget-usage.is-warn .board-project-budget-usage-fill {
    background: linear-gradient(90deg, #f0c24c, #f5a64b);
}

.board-project-budget-usage.is-warn {
    background: rgba(240, 185, 61, 0.10);
    border-color: rgba(245, 184, 69, 0.52);
}

.board-project-budget-usage.is-over {
    border-color: rgba(255, 92, 92, 0.62);
    background: rgba(255, 90, 90, 0.10);
}

.board-project-budget-usage.is-over .board-project-budget-usage-fill {
    background: linear-gradient(90deg, #ff7b7b, #ff5d6f);
}

.board-project-budget-usage.is-none {
    opacity: 0.95;
    border-color: rgba(255, 255, 255, 0.10);
}

.board-project-cost-hover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    max-width: 340px;
    background: #222842;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    padding: 10px;
    z-index: 30;
    text-align: left;
}

.board-project-cost-cell:hover .board-project-cost-hover,
.board-project-cost-cell:focus-within .board-project-cost-hover {
    display: block;
}

.board-project-cost-hover-title {
    font-size: 12px;
    font-weight: 700;
    color: #dfe6ff;
    margin-bottom: 6px;
}

.board-project-cost-hover-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    font-size: 12px;
    color: #c4cee8;
    margin: 2px 0;
    font-variant-numeric: tabular-nums;
}

.board-project-cost-hover-item.total {
    color: #eef3ff;
    font-weight: 700;
}

.board-project-cost-hover-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 7px 0;
}

.board-project-cost-hover-empty {
    font-size: 12px;
    color: #95a3c8;
}

.board-table td[data-col="kalkulation"] {
    padding: 0;
}

.board-project-calc-review {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--ui-surface-soft-03);
    min-height: 100%;
    justify-content: center;
    box-sizing: border-box;
}

.board-project-calc-review-state,
.board-project-calc-review-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    line-height: 1.05;
}

.board-project-calc-review-state {
    font-size: 10px;
    font-weight: 700;
    color: #e6edff;
}

.board-project-calc-review-meta {
    font-size: 9px;
    color: #adbbdf;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.board-project-calc-review.is-good {
    background: rgba(85, 211, 147, 0.10);
    border-color: rgba(85, 211, 147, 0.35);
}

.board-project-calc-review.is-good .board-project-calc-review-state {
    color: #c8f2dd;
}

.board-project-calc-review.is-bad {
    background: rgba(255, 102, 122, 0.10);
    border-color: rgba(255, 102, 122, 0.38);
}

.board-project-calc-review.is-bad .board-project-calc-review-state {
    color: #ffd1d7;
}

.board-project-calc-review.is-even {
    background: rgba(112, 145, 219, 0.08);
    border-color: rgba(112, 145, 219, 0.28);
}

.board-project-calc-review.is-pending {
    opacity: 0.95;
    border-style: dashed;
}

.board-table td:first-child,
.board-table th:first-child {
    width: 70px;
}

.board-table th[data-col="video"],
.board-table td[data-col="video"] {
    position: sticky;
    left: 0;
    z-index: 4;
}

.board-table th[data-col="video"] {
    left: 2px;
    z-index: 5;
    background: #2e3350;
    border-right: 1px solid rgba(156, 175, 209, 0.12);
}

.board-table td[data-col="video"] {
    background: #2b3048;
    border-right: 1px solid rgba(156, 175, 209, 0.12);
}

.board-table td[data-col="video"].board-row-drag-source {
    cursor: grab;
}

.board-table tr.dragging td[data-col="video"].board-row-drag-source {
    cursor: grabbing;
}

.board-table input,
.board-table select {
    background: #232428;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #eaeaea;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
}

.board-table .board-search-select-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-table td.board-details-cell {
    overflow: hidden;
    white-space: nowrap;
}

.board-details-display {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-details-display a {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:not([data-theme="light"]) .board-details-display-link a {
    color: #b9d2ff;
    text-decoration-color: rgba(185, 210, 255, 0.72);
}

html:not([data-theme="light"]) .board-details-display-link a:hover {
    color: #d7e6ff;
    text-decoration-color: currentColor;
}

.board-entity-picker {
    background:
        linear-gradient(180deg, rgba(37, 45, 67, 0.98) 0%, rgba(24, 30, 46, 0.98) 100%);
    border: 1px solid rgba(144, 167, 205, 0.26);
    border-radius: 12px;
    box-shadow:
        0 22px 44px rgba(0, 0, 0, 0.38),
        0 4px 14px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.board-entity-picker-list {
    max-height: 260px;
    overflow: auto;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(129, 156, 203, 0.42) transparent;
}

.board-entity-picker-list::-webkit-scrollbar {
    width: 10px;
}

.board-entity-picker-list::-webkit-scrollbar-track {
    background: transparent;
}

.board-entity-picker-list::-webkit-scrollbar-thumb {
    background: rgba(129, 156, 203, 0.34);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.board-entity-picker-divider {
    height: 1px;
    margin: 5px 6px;
    background: linear-gradient(90deg, rgba(151, 173, 211, 0), rgba(151, 173, 211, 0.18), rgba(151, 173, 211, 0));
}

.board-entity-picker-item {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: #dce3f5;
    text-align: left;
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.board-entity-picker-item:hover,
.board-entity-picker-item.active {
    background: rgba(88, 145, 255, 0.2);
    border-color: rgba(118, 166, 247, 0.24);
    color: #f7faff;
    transform: translateY(-1px);
}

.board-entity-picker-primary {
    display: block;
}

.board-entity-picker-secondary {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.78;
}

.modal-entity-picker {
    position: fixed;
    z-index: 10040;
}

.board-entity-picker-create {
    color: #8fc0ff;
    font-weight: 700;
    background: rgba(57, 93, 154, 0.14);
    border-color: rgba(105, 148, 225, 0.14);
}

.board-entity-picker-create:hover,
.board-entity-picker-create.active {
    background: rgba(54, 129, 255, 0.24);
    border-color: rgba(127, 171, 244, 0.28);
    color: #f5f9ff;
}

.board-entity-picker-create.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.board-entity-picker-empty {
    padding: 12px 10px;
    font-size: 12px;
    color: #9fb0cf;
    text-align: center;
}

:root[data-theme="light"] .board-entity-picker {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(243, 247, 253, 0.98) 100%);
    border-color: rgba(28, 45, 75, 0.12);
    box-shadow:
        0 20px 42px rgba(17, 31, 56, 0.14),
        0 4px 14px rgba(17, 31, 56, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

:root[data-theme="light"] .board-entity-picker-list {
    scrollbar-color: rgba(72, 109, 164, 0.28) transparent;
}

:root[data-theme="light"] .board-entity-picker-list::-webkit-scrollbar-thumb {
    background: rgba(72, 109, 164, 0.24);
    border: 2px solid transparent;
    background-clip: padding-box;
}

:root[data-theme="light"] .board-entity-picker-divider {
    background: linear-gradient(90deg, rgba(35, 58, 96, 0), rgba(35, 58, 96, 0.12), rgba(35, 58, 96, 0));
}

:root[data-theme="light"] .board-entity-picker-item {
    color: #29415f;
}

:root[data-theme="light"] .board-entity-picker-item:hover,
:root[data-theme="light"] .board-entity-picker-item.active {
    background: rgba(74, 121, 211, 0.12);
    border-color: rgba(74, 121, 211, 0.16);
    color: #173250;
}

:root[data-theme="light"] .board-entity-picker-create {
    color: #1f4f8f;
    background: rgba(74, 121, 211, 0.08);
    border-color: rgba(74, 121, 211, 0.12);
}

:root[data-theme="light"] .board-entity-picker-create:hover,
:root[data-theme="light"] .board-entity-picker-create.active {
    background: rgba(74, 121, 211, 0.14);
    border-color: rgba(74, 121, 211, 0.2);
    color: #163557;
}

:root[data-theme="light"] .board-entity-picker-create.is-disabled {
    opacity: 0.55;
}

:root[data-theme="light"] .board-entity-picker-empty {
    color: #6a7f9d;
}

.internal-task-date-input {
    width: 100%;
    min-width: 0;
    background: rgba(14, 44, 100, 0.4) !important;
    border: 1px solid rgba(75, 147, 255, 0.35) !important;
    color: #dce6ff !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    line-height: 1.2;
    color-scheme: dark;
}

.internal-task-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.78);
    cursor: pointer;
}

.internal-task-date-input:focus {
    outline: none;
    border-color: rgba(122, 168, 255, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(75, 147, 255, 0.16);
}

.board-table th {
    color: #b8c3dd;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.6px;
    line-height: 1.05;
    padding-top: 5px;
    padding-bottom: 5px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #2e3350;
}

.board-th-resizable {
    position: relative;
}

.board-table th.board-th-resizable:first-child {
    border-top-left-radius: 4px;
    z-index: 9;
}

.board-table th.board-th-resizable:first-child[data-col="video"] {
    z-index: 30;
}

.board-table th.board-th-resizable:first-child[data-col="video"][data-it-col="video"] {
    z-index: 31;
}

.board-th-label {
    display: inline-block;
    padding-right: 8px;
}

.board-th-sort-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    max-width: calc(100% - 8px);
}

.board-th-sort-btn .board-th-label {
    padding-right: 0;
}

.board-sort-indicator {
    font-size: 10px;
    line-height: 1;
    opacity: 0.5;
    width: 10px;
    text-align: center;
    flex: 0 0 10px;
}

.board-th-sort-btn.active .board-sort-indicator {
    opacity: 0.95;
    color: #dfe8ff;
}

:root[data-theme="light"] .board-sort-indicator {
    color: #7286a8;
    opacity: 0.72;
}

:root[data-theme="light"] .board-th-sort-btn.active .board-sort-indicator {
    color: #2b466d;
    opacity: 1;
}

.board-th-sort-btn:hover .board-th-label {
    color: #d7e3ff;
}

.me-checklist-inline-sort .board-th-sort-btn.me-checklist-inline-sort-btn {
    font-size: 10px;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    min-height: 15px;
}

.me-checklist-inline-sort .me-checklist-inline-sort-btn .board-sort-indicator {
    font-size: 9px;
    width: 8px;
    flex: 0 0 8px;
}

.board-col-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
}

.board-col-resizer:hover {
    background: rgba(100, 180, 255, 0.35);
}

.board-col-hidden {
    display: none !important;
}

.board-table tr.draggable {
    cursor: grab;
}

.board-table tr.dragging {
    cursor: grabbing !important;
    opacity: 1;
    background-color: rgba(100, 180, 255, 0.22) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-left: 6px solid #64b4ff !important;
    transform: translateX(4px);
    z-index: 20;
    position: relative;
}

.board-table tr.dragging td {
    background-color: rgba(100, 180, 255, 0.15) !important;
}

.board-table tr.drag-target {
    border-top: 3px dashed #64b4ff !important;
    background: linear-gradient(to bottom, rgba(100, 180, 255, 0.1), transparent) !important;
}

.board-table tr.drag-target td {
    background: rgba(100, 180, 255, 0.08) !important;
}

/* Drag performance mode: avoid costly paint/reflow while rows are moved */
body.board-dnd-active .board-table tr.dragging {
    box-shadow: none;
    transform: none;
}

body.board-dnd-active .board-table tr.drag-target {
    background: rgba(100, 180, 255, 0.08) !important;
}

body.board-dnd-active .board-table tr.drag-target td {
    background: rgba(100, 180, 255, 0.08) !important;
}

body.board-dnd-active .board-table tr:hover td {
    background: inherit;
}

body.board-dnd-active .board-attachment-hover {
    display: none;
}

body.file-dnd-active .board-attachment-hover {
    display: none;
}

body.board-dnd-active .board-attachment-cell,
body.board-dnd-active .board-attachment-row,
body.board-dnd-active .board-attachment-icon-wrap,
body.board-dnd-active .board-attachment-main {
    transition: none !important;
}

body.file-dnd-active .board-attachment-cell,
body.file-dnd-active .board-attachment-row,
body.file-dnd-active .board-attachment-icon-wrap,
body.file-dnd-active .board-attachment-main,
body.file-dnd-active .board-attachment-icon,
body.file-dnd-active .board-attachment-upload-btn {
    transition: none !important;
}

#adminUsersTableBody tr.admin-user-drag-target {
    border-top: 3px dashed #64b4ff !important;
    background: linear-gradient(to bottom, rgba(100, 180, 255, 0.1), transparent) !important;
}

#adminUsersTableBody tr.admin-user-drag-target-bottom {
    border-bottom: 3px dashed #64b4ff !important;
    background: linear-gradient(to top, rgba(100, 180, 255, 0.1), transparent) !important;
}

#adminUsersTableBody tr.admin-user-drag-target td,
#adminUsersTableBody tr.admin-user-drag-target-bottom td {
    background: rgba(100, 180, 255, 0.08) !important;
}

.board-table tr:hover td {
    background: #262c43;
}

.board-table tr.board-group-sum-row td {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #2f3450;
    border-top: 1px solid rgba(156, 175, 209, 0.22);
    border-bottom: 1px solid rgba(156, 175, 209, 0.22);
    padding-top: 6px;
    padding-bottom: 6px;
}

.board-table tr.board-group-sum-row:hover td {
    background: #2f3450 !important;
}

.board-table tr.board-group-sum-row td[data-col="kalenderkosten"] {
    background: #313654;
}

.board-group-sum-cost-cell {
    text-align: right;
}

.board-group-sum-wrap {
    display: flex;
    justify-content: stretch;
    margin-top: 6px;
    width: 100%;
}

.board-group-sum-table {
    width: max-content !important;
    min-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
}

.board-group-sum-table .board-group-sum-row td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.board-group-sum-table .board-group-sum-row td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.board-group-sum-table .board-group-sum-cost-cell {
    min-width: 0;
}

.board-group-sum-table .board-group-sum-spacer {
    background: transparent !important;
    color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
}

.board-group-sum-table tr.board-group-sum-row:hover td {
    background: #2f3450 !important;
}

.board-group-sum-table tr.board-group-sum-row:hover .board-group-sum-spacer {
    background: transparent !important;
}

.board-group-sum-table tr.board-group-sum-row td[data-col="video"] {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
}

.board-group-sum-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
}

.board-group-sum-amount {
    font-size: 14px;
    font-weight: 700;
    color: #d9e2ff;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

.board-group-sum-label {
    font-size: 11px;
    color: #aab6d8;
    letter-spacing: 0.2px;
}

.project-fixed-costs-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 10, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 16px;
}

.project-fixed-costs-dialog {
    width: min(1080px, 98vw);
    max-height: 85vh;
    overflow: auto;
    background: #20263d;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
    color: #e6ecff;
}

.project-fixed-costs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-fixed-costs-header h3 {
    margin: 0;
    font-size: 15px;
}

.project-fixed-costs-body {
    padding: 12px 14px;
}

.project-fixed-costs-section + .project-fixed-costs-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.project-fixed-costs-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #cfd9f5;
    margin-bottom: 8px;
}

.project-billed-entries-hint {
    margin: -2px 0 10px;
    font-size: 11px;
    color: #b8c6ea;
    padding: 8px 10px;
    border: 1px solid rgba(124, 164, 255, 0.22);
    background: rgba(98, 136, 226, 0.08);
    border-radius: 8px;
}

.project-billed-entries-footnote {
    margin-top: 8px;
    font-size: 11px;
    color: #9fb0d9;
}

.project-fixed-costs-calendar-wrap {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px;
    background: transparent;
}

.project-fixed-costs-calendar-panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: var(--ui-surface-soft-02);
    overflow: hidden;
}

.project-fixed-costs-empty-note {
    font-size: 12px;
    color: #9fb0d9;
    padding: 8px 10px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: var(--ui-surface-soft-02);
}

.project-fixed-costs-calendar-headrow,
.project-fixed-costs-calendar-table,
.project-fixed-costs-calendar-footrow {
    display: grid;
    grid-template-columns: minmax(200px, 1.8fr) minmax(84px, 0.72fr) 72px 84px 112px 88px;
    gap: 6px 10px;
    align-items: center;
    font-size: 12px;
}

.project-fixed-costs-calendar-headrow {
    padding: 8px 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.015);
}

.project-fixed-costs-calendar-table {
    padding: 8px 0;
    width: 100%;
}

.project-fixed-costs-calendar-table > div {
    min-width: 0;
}

.project-fixed-costs-calendar-activity.is-clickable {
    cursor: pointer;
    color: #dce8ff;
    text-decoration: underline;
    text-decoration-color: rgba(176, 203, 255, 0.65);
    text-underline-offset: 2px;
}

.project-fixed-costs-calendar-activity.is-clickable:hover {
    color: #ffffff;
    text-decoration-color: rgba(206, 224, 255, 0.9);
}

.project-fixed-costs-calendar-headrow > .head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: #9fb0d9;
    padding-bottom: 1px;
    min-width: 0;
}

.project-fixed-costs-calendar-headrow > .num,
.project-fixed-costs-calendar-table > .num,
.project-fixed-costs-calendar-footrow > .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

.project-fixed-costs-calendar-headrow > .action,
.project-fixed-costs-calendar-action-cell {
    text-align: right;
    min-width: 0;
}

.project-fixed-costs-calendar-cost-cell {
    white-space: nowrap;
    padding-right: 4px;
}

.project-fixed-costs-calendar-action-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.project-fixed-costs-calendar-action-cell .mini-btn {
    padding: 6px 8px;
    font-size: 11px;
    white-space: nowrap;
}

.project-fixed-costs-calendar-footrow {
    padding: 8px 10px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.015);
}

.project-fixed-costs-calendar-submenu {
    margin: 2px 10px 6px;
    padding: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.project-fixed-costs-calendar-subitem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    background: transparent;
}

.project-fixed-costs-calendar-subitem-main {
    min-width: 0;
    display: block;
}

.project-fixed-costs-calendar-subitem-title {
    font-size: 11px;
    font-weight: 600;
    color: #f3f7ff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 12px;
}

.project-fixed-costs-calendar-subitem-meta {
    display: none;
}

.project-fixed-costs-calendar-subitem-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4px 8px 4px 0;
}

.project-fixed-costs-calendar-subitem-actions .mini-btn {
    padding: 3px 8px;
    min-height: 0;
    font-size: 11px;
    line-height: 1.2;
}

.project-fixed-costs-calendar-footrow > .sum-label,
.project-fixed-costs-calendar-footrow > .sum-value {
    font-weight: 700;
    color: #dce5ff;
}

.project-fixed-costs-grid {
    display: grid;
    grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(0, 140px) minmax(0, 120px) 44px;
    gap: 8px;
    align-items: center;
}

.project-fixed-costs-grid-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #a9b7da;
}

.project-fixed-costs-grid-head.amount {
    text-align: right;
}

.project-fixed-costs-grid-head.action {
    text-align: center;
}

.project-fixed-costs-rows {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 2px 2px 0;
}

.project-fixed-cost-row {
    display: grid;
    grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(0, 140px) minmax(0, 120px) 44px;
    gap: 8px;
    align-items: center;
}

.project-fixed-cost-row.is-final-invoice {
    position: relative;
    padding-top: 18px;
    margin-top: 0;
}

.project-fixed-cost-row.is-final-invoice::before {
    content: "Schlussrechnung";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 9px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    color: #eef3ff;
    background: rgba(105, 137, 219, 0.34);
    border: 1px solid rgba(133, 167, 255, 0.42);
    pointer-events: none;
    z-index: 2;
}

.project-fixed-cost-row.is-final-invoice input,
.project-fixed-cost-row.is-final-invoice select {
    border-color: rgba(130, 166, 255, 0.32);
    background: linear-gradient(180deg, rgba(110, 140, 220, 0.10), rgba(23, 28, 47, 0.96));
}

.project-fixed-cost-row input,
.project-fixed-cost-row select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #171c2f;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #edf2ff;
    border-radius: 8px;
    padding: 7px 8px;
    font-size: 12px;
}

.project-fixed-cost-row input:focus,
.project-fixed-cost-row select:focus {
    outline: none;
    border-color: rgba(164, 202, 255, 0.85);
    box-shadow:
        0 0 0 1px rgba(164, 202, 255, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.project-fixed-cost-row input[data-field="amount"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
    -moz-appearance: textfield;
}

.project-fixed-cost-row input[data-field="date"] {
    color-scheme: dark;
    min-width: 0;
}

.project-fixed-cost-row input[data-field="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.75);
    cursor: pointer;
}

.project-fixed-cost-row .project-fixed-cost-date-cell {
    width: 100%;
    min-width: 0;
    max-width: none;
    --date-chip-width: 100%;
}

.project-fixed-cost-row .project-fixed-cost-date-trigger {
    width: 100%;
    min-width: 0;
    max-width: none;
    border-radius: 8px;
    text-align: left;
    padding-right: 30px;
}

.project-fixed-cost-row .project-fixed-cost-date-trigger.is-empty {
    color: #aab3cd;
    background: #171c2f;
    border-color: rgba(255, 255, 255, 0.12);
}

.project-fixed-cost-row .project-fixed-cost-date-cell .date-clear-btn {
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

.project-fixed-cost-row .project-fixed-cost-date-cell .date-clear-btn.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

.project-fixed-cost-row .project-fixed-cost-date-cell:hover .date-clear-btn {
    opacity: 1;
    pointer-events: auto;
}

.project-fixed-cost-row input[data-field="amount"]::-webkit-outer-spin-button,
.project-fixed-cost-row input[data-field="amount"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.project-fixed-cost-row .mini-btn {
    width: 44px;
    min-width: 44px;
    padding-left: 0;
    padding-right: 0;
}

.project-fixed-costs-toolbar {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.project-fixed-costs-total {
    font-size: 12px;
    color: #bfcae7;
}

.project-fixed-costs-subtotal {
    margin-top: 4px;
    font-size: 11px;
    color: #9fb0d9;
}

.project-fixed-costs-summary-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
}

.project-fixed-costs-summary-label {
    min-width: 0;
}

.project-fixed-costs-summary-value {
    text-align: right;
    justify-self: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.project-fixed-costs-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .project-fixed-costs-overlay {
    background: rgba(231, 237, 247, 0.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

:root[data-theme="light"] .project-fixed-costs-dialog {
    background: linear-gradient(180deg, #fcfeff, #f3f7fd);
    border-color: rgba(131, 149, 181, 0.24);
    box-shadow: 0 22px 52px rgba(36, 54, 84, 0.18);
    color: #1d2f46;
}

:root[data-theme="light"] .project-fixed-costs-header {
    border-bottom-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .project-fixed-costs-header h3,
:root[data-theme="light"] .project-fixed-costs-section-title {
    color: #263a55;
}

:root[data-theme="light"] .project-billed-entries-hint {
    color: #496380;
    border-color: rgba(86, 130, 210, 0.2);
    background: rgba(86, 130, 210, 0.08);
}

:root[data-theme="light"] .project-billed-entries-footnote,
:root[data-theme="light"] .project-fixed-costs-total,
:root[data-theme="light"] .project-fixed-costs-subtotal,
:root[data-theme="light"] .project-fixed-costs-empty-note,
:root[data-theme="light"] .project-fixed-costs-calendar-headrow > .head,
:root[data-theme="light"] .project-fixed-costs-grid-head {
    color: #6c829f;
}

:root[data-theme="light"] .project-fixed-costs-calendar-panel {
    border-color: rgba(131, 149, 181, 0.18);
    background: #f9fbff;
}

:root[data-theme="light"] .project-fixed-costs-empty-note {
    border-color: rgba(131, 149, 181, 0.22);
    background: #f5f8fd;
}

:root[data-theme="light"] .project-fixed-costs-calendar-headrow,
:root[data-theme="light"] .project-fixed-costs-calendar-footrow {
    border-color: rgba(131, 149, 181, 0.16);
    background: #f2f6fc;
}

:root[data-theme="light"] .project-fixed-costs-calendar-submenu {
    border-color: rgba(131, 149, 181, 0.16);
    background: transparent;
}

:root[data-theme="light"] .project-fixed-costs-calendar-subitem {
    border-color: rgba(131, 149, 181, 0.14);
    background: transparent;
}

:root[data-theme="light"] .project-fixed-costs-calendar-subitem-title {
    color: #26405f;
}

:root[data-theme="light"] .project-fixed-costs-calendar-subitem-meta {
    color: #6881a1;
}

:root[data-theme="light"] .project-fixed-costs-calendar-footrow > .sum-label,
:root[data-theme="light"] .project-fixed-costs-calendar-footrow > .sum-value {
    color: #22364f;
}

:root[data-theme="light"] .project-fixed-costs-calendar-activity.is-clickable {
    color: #234a7c;
    text-decoration-color: rgba(58, 99, 156, 0.45);
}

:root[data-theme="light"] .project-fixed-costs-calendar-activity.is-clickable:hover {
    color: #17365e;
    text-decoration-color: rgba(44, 84, 141, 0.72);
}

:root[data-theme="light"] .project-fixed-cost-row input,
:root[data-theme="light"] .project-fixed-cost-row select {
    background: #ffffff;
    border-color: rgba(131, 149, 181, 0.22);
    color: #1f3046;
}

:root[data-theme="light"] .project-fixed-cost-row input:focus,
:root[data-theme="light"] .project-fixed-cost-row select:focus {
    border-color: rgba(64, 122, 214, 0.55);
    box-shadow: 0 0 0 3px rgba(64, 122, 214, 0.12);
}

:root[data-theme="light"] .project-fixed-cost-row input[data-field="date"] {
    color-scheme: light;
}

:root[data-theme="light"] .project-fixed-cost-row input[data-field="date"]::-webkit-calendar-picker-indicator {
    filter: none;
}

:root[data-theme="light"] .project-fixed-cost-row .project-fixed-cost-date-trigger.is-empty {
    color: #7f92ad;
    background: #ffffff;
    border-color: rgba(131, 149, 181, 0.22);
}

:root[data-theme="light"] .project-fixed-cost-row.is-final-invoice::before {
    color: #24405f;
    background: rgba(93, 135, 214, 0.14);
    border-color: rgba(93, 135, 214, 0.28);
}

:root[data-theme="light"] .project-fixed-cost-row.is-final-invoice input,
:root[data-theme="light"] .project-fixed-cost-row.is-final-invoice select {
    border-color: rgba(93, 135, 214, 0.24);
    background: linear-gradient(180deg, rgba(93, 135, 214, 0.06), #ffffff);
}

:root[data-theme="light"] .project-fixed-costs-actions {
    border-top-color: rgba(131, 149, 181, 0.18);
}

.board-table tr.archived-project {
    opacity: 0.65;
}

.board-table tr.archived-project td {
    color: #888;
}

.board-table tr.archived-project:hover td {
    background: #2a2f45;
}

.board-table tr.waiting-project td,
.board-table tr.waiting-internal-task td {
    padding-top: 0;
    padding-bottom: 0;
}

.board-table tr.waiting-project td:not([data-col="video"]):not([data-col="status"]),
.board-table tr.waiting-internal-task td:not([data-col="video"]):not([data-col="status"]) {
    opacity: 0.16;
}

.board-table tr.waiting-project td[data-col="video"] .monday-check,
.board-table tr.waiting-project td[data-col="video"] .row-copy-btn,
.board-table tr.waiting-project td[data-col="video"] .subtask-count-badge,
.board-table tr.waiting-project td[data-col="video"] .row-unarchive-btn,
.board-table tr.waiting-internal-task td[data-col="video"] .monday-check,
.board-table tr.waiting-internal-task td[data-col="video"] .subtask-count-badge {
    display: none;
}

.board-table tr.waiting-project td[data-col="video"] .video-title,
.board-table tr.waiting-internal-task td[data-col="video"] .video-title {
    opacity: 0.92;
}

.board-table tr.waiting-project td[data-col="video"],
.board-table tr.waiting-internal-task td[data-col="video"] {
    background: rgba(0, 0, 0, 0.14);
}

.board-table tr.waiting-project td[data-col="status"],
.board-table tr.waiting-internal-task td[data-col="status"] {
    background: rgba(0, 0, 0, 0.14);
}

.board-table tr.waiting-project td[data-col="video"] .video-main-cell,
.board-table tr.waiting-internal-task td[data-col="video"] .video-main-cell {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 1px;
    min-height: 10px;
    padding-right: 22px;
    align-items: center;
}

.board-table tr.waiting-project td[data-col="video"] .video-title,
.board-table tr.waiting-internal-task td[data-col="video"] .video-title {
    grid-column: 2;
    justify-self: start;
    font-size: 10px;
    line-height: 1;
    max-width: 100%;
}

.board-table tr.waiting-project td[data-col="video"] .subtask-toggle,
.board-table tr.waiting-internal-task td[data-col="video"] .subtask-toggle {
    grid-column: 1;
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 4px;
}

.board-table tr.waiting-project td[data-col="video"] .subtask-toggle svg,
.board-table tr.waiting-internal-task td[data-col="video"] .subtask-toggle svg {
    width: 9px;
    height: 9px;
}

.board-table tr.waiting-project td[data-col="video"] .row-thread-btn,
.board-table tr.waiting-internal-task td[data-col="video"] .row-thread-btn {
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 5px;
    border-color: rgba(255, 255, 255, 0.14);
    background: var(--ui-surface-soft-03);
    color: rgba(205, 215, 233, 0.78);
    z-index: 3;
}

.board-table tr.waiting-project td[data-col="video"] .row-thread-btn:hover,
.board-table tr.waiting-internal-task td[data-col="video"] .row-thread-btn:hover {
    transform: translateY(-50%);
    color: #eef3ff;
    background: rgba(90, 122, 194, 0.14);
    border-color: rgba(135, 162, 226, 0.34);
}

.board-table tr.waiting-project td[data-col="video"] .row-thread-btn .row-thread-btn-icon,
.board-table tr.waiting-internal-task td[data-col="video"] .row-thread-btn .row-thread-btn-icon {
    width: 11px;
    height: 11px;
}

.board-table tr.waiting-project td[data-col="status"] .status-pill,
.board-table tr.waiting-internal-task td[data-col="status"] .status-pill {
    padding: 5px;
    font-size: 9px;
    min-height: 14px;
}

.board-table tr.waiting-project:hover td:not([data-col="video"]):not([data-col="status"]),
.board-table tr.waiting-internal-task:hover td:not([data-col="video"]):not([data-col="status"]) {
    opacity: 0.38;
}

.board-table tr.waiting-project:hover td[data-col="video"],
.board-table tr.waiting-internal-task:hover td[data-col="video"] {
    background: rgba(0, 0, 0, 0.2);
}

.board-table tr.waiting-project:hover td[data-col="status"],
.board-table tr.waiting-internal-task:hover td[data-col="status"] {
    background: rgba(0, 0, 0, 0.2);
}

.board-table tr.is-due-overdue td {
    background: linear-gradient(var(--due-color-overdue), var(--due-color-overdue)), #2F3450;
}

.board-table tr.is-due-today td {
    background: linear-gradient(var(--due-color-today), var(--due-color-today)), #2F3450;
}

.board-table tr.is-due-tomorrow td {
    background: linear-gradient(var(--due-color-tomorrow), var(--due-color-tomorrow)), #2F3450;
}

.board-table tr.is-due-week td {
    background: linear-gradient(var(--due-color-week), var(--due-color-week)), #2F3450;
}

.board-table tr.is-due-next-week td {
    background: linear-gradient(var(--due-color-next-week), var(--due-color-next-week)), #2F3450;
}


.board-table th[data-col="video"] {
    position: sticky;
    left: 2px;
}

.board-table tr.draggable td[data-col="video"] {
    position: sticky;
    left: 2px;
}

.board-table th[data-col="video"]::before,
.board-table tr.draggable td[data-col="video"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    bottom: -1px;
    width: 6px;
    background: var(--group-color, #7aa2ff);
    border-radius: 0;
    pointer-events: none;
    z-index: 3;
}

.board-table th[data-col="video"]::after,
.board-table tr.draggable td[data-col="video"]::after {
    content: "";
    position: absolute;
    right: 100%;
    top: -1px;
    bottom: -1px;
    width: 2000px;
    background: #151922;
    pointer-events: none;
    z-index: 1;
}

/* Extend the sticky first-column backdrop above the first visible header row. */
.board-table th[data-col="video"]::after {
    top: -2000px;
}

.board-table tr.draggable td[data-col="video"] {
    border-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    z-index: 4;
    background: #2b3048;
}

.board-table tr:hover td[data-col="video"] {
    background: #262c43;
}

.board-table tr.is-due-overdue td[data-col="video"] {
    background: linear-gradient(var(--due-color-overdue), var(--due-color-overdue)), #2F3450;
}

.board-table tr.is-due-today td[data-col="video"] {
    background: linear-gradient(var(--due-color-today), var(--due-color-today)), #2F3450;
}

.board-table tr.is-due-tomorrow td[data-col="video"] {
    background: linear-gradient(var(--due-color-tomorrow), var(--due-color-tomorrow)), #2F3450;
}

.board-table tr.is-due-week td[data-col="video"] {
    background: linear-gradient(var(--due-color-week), var(--due-color-week)), #2F3450;
}

.board-table tr.is-due-next-week td[data-col="video"] {
    background: linear-gradient(var(--due-color-next-week), var(--due-color-next-week)), #2F3450;
}

.board-table tr.waiting-project td[data-col="video"]::after,
.board-table tr.waiting-internal-task td[data-col="video"]::after {
    background: rgba(0, 0, 0, 0.14);
}

.board-table tr.waiting-project:hover td[data-col="video"]::after,
.board-table tr.waiting-internal-task:hover td[data-col="video"]::after {
    background: rgba(0, 0, 0, 0.2);
}

.board-table tr.drag-target td[data-col="video"] {
    background: rgba(100, 180, 255, 0.08) !important;
}

.board-table tr.dragging td[data-col="video"] {
    background-color: rgba(100, 180, 255, 0.15) !important;
}

.board-table tr.board-group-sum-row td[data-col="video"] {
    position: sticky;
    left: 2px;
    bottom: 0;
    z-index: 5;
}

.board-table tr.board-group-sum-row:hover td[data-col="video"] {
    background: #2f3450 !important;
}

.board-table th[data-col="video"],
.board-table td[data-col="video"] {
    box-shadow: inset -1px 0 0 rgba(156, 175, 209, 0.12);
}

.subtasks-host-row td {
    position: sticky;
    left: 2px;
    z-index: 3;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #181e34;
    border-right: 1px solid rgba(156, 175, 209, 0.12);
}

.board-table tr.subtasks-host-row:hover td {
    background: #181e34 !important;
}

.subtasks-host-row td::after {
    content: none;
}

.subtasks-host-row td::before {
    content: "";
    position: absolute;
    right: 100%;
    top: -1px;
    bottom: -1px;
    width: 2000px;
    background: #151922;
    pointer-events: none;
    z-index: 0;
}

.board-add-row {
    color: #9aa0a6;
    cursor: default;
    font-size: 12px;
    padding: 10px 12px;
    background: #2b3048;
}

.board-add-row-label {
    display: inline-block;
    position: sticky;
    left: 12px;
    z-index: 9;
    background: #2b3048;
    padding-right: 10px;
    cursor: pointer;
}

.board-add-row-label:hover {
    color: #fff;
}

.board-table tr.board-add-row-table-row td.board-add-row-table-cell {
    padding: 0;
    border-right: none;
    background: #2b3048;
}

.board-table tr.board-add-row-table-row:hover td.board-add-row-table-cell {
    background: #262c43 !important;
}

.board-table tr.board-add-row-table-row .board-add-row-label {
    display: block;
    position: sticky;
    padding: 8px 12px;
    left: 12px;
    width: max-content;
    z-index: 9;
    background: transparent;
}

.board-progressive-sentinel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-right: 12px;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 115, 234, 0.2);
    border: 1px solid rgba(0, 115, 234, 0.3);
    color: #dbe8ff;
    font-size: 11px;
    gap: 6px;
}

.pill-muted {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cfcfcf;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-right: 6px;
    white-space: nowrap;
}

.status-select {
    min-width: 130px;
}

.video-type-select {
    min-width: 140px;
}

.status-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    --status-chip-width: 118px;
}

.status-pill-trigger {
    font-size: 11px;
    cursor: pointer;
    width: var(--status-chip-width);
    min-width: var(--status-chip-width);
    max-width: var(--status-chip-width);
    justify-content: center;
    border-radius: 8px;
    padding: 7px 8px;
    text-align: center;
    white-space: nowrap;
}

.status-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: max-content;
    background: #2f3554;
    border: 1px solid rgba(180, 196, 228, 0.2);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 22px 40px rgba(3, 6, 18, 0.55);
}

.status-menu.active {
    display: block;
}

.status-menu-arrow {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #2f3554;
    border-left: 1px solid rgba(180, 196, 228, 0.2);
    border-top: 1px solid rgba(180, 196, 228, 0.2);
    transform: translateX(-50%) rotate(45deg);
}

.status-menu.overlay-above .status-menu-arrow {
    top: auto;
    bottom: -8px;
    transform: translateX(-50%) rotate(225deg);
}

.status-grid {
    display: grid;
    grid-template-columns: var(--status-chip-width) var(--status-chip-width);
    gap: 8px;
}

.internal-task-status-menu .status-grid {
    grid-template-columns: var(--status-chip-width);
}

.status-option {
    width: var(--status-chip-width);
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
    text-align: center;
}

.status-option:hover {
    filter: brightness(1.08);
}

.status-option.active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.youbox-occasion-trigger {
    box-shadow: none;
}

.youbox-occasion-option {
    font-weight: 600;
}

.youbox-occasion-option:hover {
    filter: brightness(1.03);
}

.youbox-occasion-option.active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.video-type-cell {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    min-width: 0;
    --status-chip-width: 136px;
}

.video-type-trigger {
    width: var(--status-chip-width);
    min-width: var(--status-chip-width);
    max-width: var(--status-chip-width);
    justify-content: center;
    border-radius: 8px;
    padding: 7px 8px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.youbox-occasion-trigger {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
}

.video-type-option {
    width: var(--status-chip-width);
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
}

.video-type-option:hover {
    filter: brightness(1.08);
}

.video-type-option.active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.row-archive-btn {
    grid-column: 6;
    justify-self: end;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #afb5c6;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
}

.row-archive-btn:hover {
    color: #d8f7e7;
    border-color: rgba(121, 221, 170, 0.75);
    background: rgba(97, 197, 150, 0.18);
}

.row-unarchive-btn {
    grid-column: 5;
    justify-self: end;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(92, 184, 92, 0.5);
    background: rgba(92, 184, 92, 0.1);
    color: #5cb85c;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.row-unarchive-btn:hover {
    color: #7dd67d;
    border-color: rgba(92, 184, 92, 0.8);
    background: rgba(92, 184, 92, 0.2);
}

.video-cell {
    min-width: 260px;
    font-weight: 600;
}

.video-main-cell {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 12;
}

.video-main-cell .video-title.editable {
    margin-left: 8px;
}

.row-copy-btn {
    grid-column: 5;
    justify-self: end;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #b8bfd1;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.row-copy-btn.row-unarchive-btn {
    grid-column: 5;
    width: 28px;
    height: 28px;
    border-color: rgba(92, 184, 92, 0.5);
    background: rgba(92, 184, 92, 0.1);
    color: #5cb85c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.row-thread-btn {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #b8bfd1;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.row-thread-btn:hover {
    color: #e7edff;
    border-color: rgba(135, 162, 226, 0.65);
    background: rgba(90, 122, 194, 0.16);
    transform: translateY(-1px);
}

.row-thread-btn-icon {
    width: 15px;
    height: 15px;
    display: block;
    pointer-events: none;
}

.row-thread-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    width: 14px;
    height: 14px;
    min-width: 14px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.row-thread-badge.is-unread {
    background: #5f8cff;
    color: #fff;
}

.row-thread-badge.is-read {
    background: #7c89a8;
    color: #b9c3da;
    border: 1px solid rgba(162, 176, 207, 0.28);
    box-shadow: none;
}

.row-copy-btn:hover {
    color: #e7edff;
    border-color: rgba(135, 162, 226, 0.65);
    background: rgba(90, 122, 194, 0.16);
}

.row-copy-btn.is-copied {
    color: #d8f7e7;
    border-color: rgba(121, 221, 170, 0.75);
    background: rgba(97, 197, 150, 0.18);
}

.row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"]):hover::after,
.row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"]):focus-visible::after {
    content: attr(data-copy-tooltip);
    position: absolute;
    left: auto;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 180px;
    max-width: 320px;
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(22, 28, 43, 0.98);
    border: 1px solid rgba(139, 162, 204, 0.18);
    color: #e8efff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: 0 10px 22px rgba(0,0,0,0.28);
    white-space: normal;
    word-break: break-word;
    z-index: 4000100;
    pointer-events: none;
    text-align: center;
    transform: none;
}

.row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"]):hover::before,
.row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"]):focus-visible::before {
    content: "";
    position: absolute;
    left: auto;
    right: 10px;
    bottom: calc(100% + 3px);
    width: 8px;
    height: 8px;
    background: rgba(22, 28, 43, 0.98);
    border-right: 1px solid rgba(139, 162, 204, 0.18);
    border-bottom: 1px solid rgba(139, 162, 204, 0.18);
    transform: rotate(45deg);
    z-index: 4000099;
    pointer-events: none;
    margin-left: 0;
}

.row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"])[data-tooltip-side="bottom"]:hover::after,
.row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"])[data-tooltip-side="bottom"]:focus-visible::after {
    top: calc(100% + 8px);
    bottom: auto;
}

.row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"])[data-tooltip-side="bottom"]:hover::before,
.row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"])[data-tooltip-side="bottom"]:focus-visible::before {
    top: calc(100% + 3px);
    bottom: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(139, 162, 204, 0.18);
    border-top: 1px solid rgba(139, 162, 204, 0.18);
}

:root[data-theme="light"] .row-copy-btn {
    border-color: rgba(95, 116, 150, 0.2);
    color: #5d7090;
    background: rgba(255,255,255,0.72);
}

:root[data-theme="light"] .row-copy-btn:hover {
    color: #26405f;
    border-color: rgba(67, 110, 185, 0.34);
    background: #edf3fd;
}

:root[data-theme="light"] .row-copy-btn.is-copied {
    color: #1f7a45;
    border-color: rgba(58, 164, 103, 0.35);
    background: #ecfaf2;
}

:root[data-theme="light"] .row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"]):hover::after,
:root[data-theme="light"] .row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"]):focus-visible::after {
    background: rgba(255,255,255,0.99);
    border-color: rgba(67, 89, 126, 0.14);
    color: #263a58;
    box-shadow: 0 12px 24px rgba(17, 31, 56, 0.14);
}

:root[data-theme="light"] .row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"]):hover::before,
:root[data-theme="light"] .row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"]):focus-visible::before {
    background: rgba(255,255,255,0.99);
    border-right-color: rgba(67, 89, 126, 0.14);
    border-bottom-color: rgba(67, 89, 126, 0.14);
}

:root[data-theme="light"] .row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"])[data-tooltip-side="bottom"]:hover::before,
:root[data-theme="light"] .row-copy-btn[data-copy-tooltip]:not([data-copy-tooltip-mode="js"])[data-tooltip-side="bottom"]:focus-visible::before {
    border-left-color: rgba(67, 89, 126, 0.14);
    border-top-color: rgba(67, 89, 126, 0.14);
}

:root[data-theme="light"] .row-thread-btn {
    border-color: rgba(95, 116, 150, 0.2);
    color: #5d7090;
    background: rgba(255,255,255,0.72);
}

:root[data-theme="light"] .row-thread-btn:hover {
    color: #26405f;
    border-color: rgba(67, 110, 185, 0.34);
    background: #edf3fd;
}

.video-header-cell {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
}

.video-header-cell > .board-th-sort-btn {
    justify-self: center;
}

.video-title {
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subtask-toggle {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: #d4dced;
    cursor: pointer;
    line-height: 0;
    padding: 0;
    opacity: 0.95;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 50%;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    z-index: 40;
}

.subtask-toggle svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.15s ease;
}

.subtask-toggle.empty {
    opacity: 0;
}

.subtask-toggle.has-items {
    color: #eef4ff;
    background: rgba(122, 162, 255, 0.12);
    border-color: rgba(122, 162, 255, 0.44);
}

.video-main-cell:hover .subtask-toggle.empty,
.subtask-toggle.open {
    opacity: 1;
}

.subtask-toggle.has-items:hover,
.subtask-toggle.has-items.open {
    background: rgba(140, 176, 255, 0.18);
    border-color: rgba(156, 188, 255, 0.62);
}

:root[data-theme="light"] .subtask-toggle.has-items {
    color: #35537f;
    background: rgba(116, 154, 228, 0.12);
    border-color: rgba(96, 136, 213, 0.34);
}

:root[data-theme="light"] .subtask-toggle.has-items:hover,
:root[data-theme="light"] .subtask-toggle.has-items.open {
    color: #213b61;
    background: rgba(103, 145, 224, 0.18);
    border-color: rgba(82, 123, 205, 0.46);
}

.subtask-toggle:hover:not(.has-items),
.subtask-toggle.open:not(.has-items) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(168, 183, 216, 0.35);
}

.subtask-toggle.open {
    transform: rotate(90deg);
}

.subtask-toggle::before {
    content: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 3px);
    transform: translateX(-50%);
    width: 13px;
    height: 13px;
    background: rgba(238, 240, 244, 0.94);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 99998;
}

.subtask-toggle::after {
    content: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 15px);
    transform: translateX(-50%);
    background: rgba(238, 240, 244, 0.94);
    color: #2e3346;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(9, 13, 30, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 99999;
}

.video-main-cell:hover .subtask-toggle:hover::before,
.video-main-cell:hover .subtask-toggle:hover::after {
    opacity: 1;
}

.board-table tr.draggable:hover {
    position: relative;
    z-index: 15;
}

.subtask-toggle.open::before,
.subtask-toggle.open::after {
    opacity: 0 !important;
}

.subtask-count-badge {
    grid-column: 4;
    justify-self: start;
    min-width: 18px;
    height: 18px;
    border-radius: 6px;
    background: transparent;
    color: #c7d4ee;
    border: 1px solid rgba(160, 178, 218, 0.36);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

:root[data-theme="light"] .subtask-count-badge {
    color: #49627f;
    border-color: rgba(116, 139, 171, 0.36);
}

.row-selected td {
    background: #234887 !important;
}

:root[data-theme="light"] .row-selected td {
    background: #dfeaff !important;
}

.row-selected td[data-col="video"] .video-main-cell {
    background: #234887 !important;
}

:root[data-theme="light"] .row-selected td[data-col="video"] .video-main-cell {
    background: #dfeaff !important;
}

#youboxView .youbox-board-row.row-selected td[data-col="video"] .video-main-cell,
#youboxView .youbox-board-row.row-selected td[data-yb-col="video"] .video-main-cell {
    background: #234887 !important;
}

:root[data-theme="light"] #youboxView .youbox-board-row.row-selected td[data-col="video"] .video-main-cell,
:root[data-theme="light"] #youboxView .youbox-board-row.row-selected td[data-yb-col="video"] .video-main-cell {
    background: #dfeaff !important;
}

.timeline-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #c9ccd4;
    color: #2b3248;
    font-size: 12px;
    min-width: 72px;
    text-align: center;
}

.zeitraum-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    --date-chip-width: 136px;
    width: var(--date-chip-width);
    min-width: var(--date-chip-width);
    max-width: var(--date-chip-width);
}

.zeitraum-board-cell {
    text-align: center;
}

.date-board-cell {
    text-align: center;
}

.date-board-cell .date-cell {
    --date-chip-width: 112px;
}

.date-board-cell .date-trigger {
    padding-left: 6px;
    padding-right: 23px;
    font-size: 12px;
}

.date-board-cell .date-trigger::after {
    right: 7px;
}

.date-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    --date-chip-width: 136px;
    width: var(--date-chip-width);
    min-width: var(--date-chip-width);
    max-width: var(--date-chip-width);
}

.date-trigger {
    width: var(--date-chip-width);
    min-width: var(--date-chip-width);
    max-width: var(--date-chip-width);
    border: 1px solid rgba(116, 138, 176, 0.55);
    border-radius: 6px;
    background: #23293a;
    color: #e7edf9;
    padding: 6px 27px 6px 9px;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.date-trigger::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23A9B7D0' d='M10.5 1C10.7761 1 11 1.22386 11 1.5V2H11.5C12.3284 2 13 2.67157 13 3.5V11.5C13 12.3284 12.3284 13 11.5 13H2.5C1.67157 13 1 12.3284 1 11.5V3.5C1 2.67157 1.67157 2 2.5 2H3V1.5C3 1.22386 3.22386 1 3.5 1C3.77614 1 4 1.22386 4 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1ZM12 5H2V11.5C2 11.7761 2.22386 12 2.5 12H11.5C11.7761 12 12 11.7761 12 11.5V5ZM11.5 3H2.5C2.22386 3 2 3.22386 2 3.5V4H12V3.5C12 3.22386 11.7761 3 11.5 3Z'/%3E%3C/svg%3E");
    pointer-events: none;
}

.date-clear-btn {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(96, 105, 132, 0.8);
    color: #dfe6ff;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.date-clear-btn:hover {
    background: rgba(255, 98, 98, 0.28);
    border-color: rgba(255, 165, 165, 0.65);
    color: #ffd7d7;
}

.date-clear-btn.is-hidden {
    display: none;
}

:root[data-theme="light"] .date-trigger {
    border-color: #d9d9d9;
    background: #ffffff;
    color: rgba(0, 0, 0, 0.88);
}

:root[data-theme="light"] .date-trigger::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23000000' fill-opacity='.25' d='M10.5 1C10.7761 1 11 1.22386 11 1.5V2H11.5C12.3284 2 13 2.67157 13 3.5V11.5C13 12.3284 12.3284 13 11.5 13H2.5C1.67157 13 1 12.3284 1 11.5V3.5C1 2.67157 1.67157 2 2.5 2H3V1.5C3 1.22386 3.22386 1 3.5 1C3.77614 1 4 1.22386 4 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1ZM12 5H2V11.5C2 11.7761 2.22386 12 2.5 12H11.5C11.7761 12 12 11.7761 12 11.5V5ZM11.5 3H2.5C2.22386 3 2 3.22386 2 3.5V4H12V3.5C12 3.22386 11.7761 3 11.5 3Z'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .date-clear-btn {
    border-color: rgba(131, 149, 181, 0.22);
    background: #f2f6fc;
    color: #5b7292;
}

:root[data-theme="light"] .date-clear-btn:hover {
    background: rgba(230, 108, 119, 0.12);
    border-color: rgba(220, 104, 112, 0.34);
    color: #a3313d;
}

.date-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    /* bump base z-index so date menus float above most other UI layers */
    z-index: 700000;
    width: min(288px, calc(100vw - 16px));
    background: #1f2432;
    border: 1px solid rgba(154, 173, 207, 0.28);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 16px 36px rgba(5, 9, 20, 0.5);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    overflow-x: hidden;
}

.date-menu.active {
    display: block;
    pointer-events: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 861px) {
    .date-menu.active,
    .me-checklist-date-menu.active,
    .entity-doc-reminder-date-menu.active {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 16px);
        scrollbar-gutter: stable;
    }
}

.date-menu.active.overlay-below,
.me-checklist-date-menu.active.overlay-below,
.date-menu.active.overlay-above,
.me-checklist-date-menu.active.overlay-above,
.entity-doc-reminder-date-menu.active.overlay-below,
.entity-doc-reminder-date-menu.active.overlay-above {
    background: #1f2432;
}

:root[data-theme="light"] .date-menu.active.overlay-below,
:root[data-theme="light"] .me-checklist-date-menu.active.overlay-below,
:root[data-theme="light"] .date-menu.active.overlay-above,
:root[data-theme="light"] .me-checklist-date-menu.active.overlay-above,
:root[data-theme="light"] .entity-doc-reminder-date-menu.active.overlay-below,
:root[data-theme="light"] .entity-doc-reminder-date-menu.active.overlay-above {
    background: #ffffff;
}

.me-checklist-date-menu {
    width: min(340px, calc(100vw - 16px));
    border-radius: 12px;
    background: var(--ui-surface-soft-03);
}

:root[data-theme="light"] .me-checklist-date-menu {
    background: #f5f8fd;
    border-color: rgba(110, 133, 170, 0.22);
}

:root[data-theme="light"] .date-time-mode {
    background: #edf2fb;
    border-color: rgba(110, 133, 170, 0.28);
}

:root[data-theme="light"] .date-time-mode-btn {
    color: #5b6f8f;
}

:root[data-theme="light"] .date-time-mode-btn.is-active {
    background: #ffffff;
    border-color: rgba(110, 133, 170, 0.34);
    color: #223b63;
}

.date-menu-top {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    margin-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.date-today-btn {
    border: 1px solid rgba(149, 167, 199, 0.34);
    background: rgba(255, 255, 255, 0.04);
    color: #e6ecf8;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    cursor: pointer;
    flex: 1 1 0;
    min-width: 0;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-quick-preset-sections {
    display: grid;
    gap: 8px;
}

.profile-notification-pref-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 2px;
}

.profile-notification-pref-list .date-quick-toggle {
    display: flex;
}

.profile-notification-pref-list .date-quick-toggle span {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
}

.date-quick-preset-section {
    display: grid;
    gap: 6px;
}

.date-quick-preset-title {
    font-size: 11px;
    color: #9fb0cf;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.date-quick-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.date-quick-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.date-quick-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.date-quick-toggle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(149, 167, 199, 0.34);
    background: rgba(255, 255, 255, 0.03);
    color: #d7e0f2;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .12s ease;
}

.date-quick-toggle input[type="checkbox"]:checked + span {
    background: rgba(79, 124, 255, 0.22);
    border-color: rgba(104, 145, 255, 0.72);
    color: #eef3ff;
}

.date-quick-toggle.is-checked span {
    background: rgba(79, 124, 255, 0.22);
    border-color: rgba(104, 145, 255, 0.72);
    color: #eef3ff;
}

.date-quick-toggle span:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.06);
}

.date-input-text,
.date-input-text {
    width: 100%;
    background: #171d2a;
    border: 1px solid rgba(149, 167, 199, 0.34);
    color: #f0f4fe;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}

.date-time-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.date-time-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1f2738;
    border: 1px solid rgba(149, 167, 199, 0.34);
    border-radius: 8px;
    padding: 3px;
}

.date-time-mode-btn {
    border: 1px solid transparent;
    background: transparent;
    color: #cfd9ef;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    line-height: 1.1;
    cursor: pointer;
}

.date-time-mode-btn.is-active {
    background: #2a3650;
    border-color: rgba(149, 167, 199, 0.34);
    color: #eef4ff;
}

.date-time-selects {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.date-time-selects.is-disabled {
    opacity: 0.55;
}

.date-cal-head {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.date-period-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.date-period-select {
    background: #252d40;
    border: 1px solid rgba(149, 167, 199, 0.38);
    color: #e5ecfa;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    outline: none;
}

.date-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.date-nav-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(149, 167, 199, 0.38);
    border-radius: 6px;
    background: #252d40;
    color: #dbe4f7;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.date-weekdays {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    color: #92a0bb;
    font-size: 12px;
    text-align: center;
}

.date-days-grid {
    margin-top: 4px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}

.date-menu-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

.date-menu-ok-btn {
    min-width: 56px;
    height: 28px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(113, 154, 226, 0.62);
    background: rgba(68, 118, 214, 0.26);
    color: #edf4ff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.date-menu-ok-btn:hover {
    background: rgba(84, 134, 232, 0.34);
    border-color: rgba(126, 170, 238, 0.76);
}

.date-day {
    border: none;
    background: transparent;
    color: #e5ecfa;
    min-height: 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
}

.date-day.outside {
    color: #69708b;
}

.date-day.current:hover {
    background: rgba(255, 255, 255, 0.08);
}

.date-day.selected {
    background: #1677ff;
    color: #fff;
}

.date-day.today:not(.selected) {
    background: rgba(22, 119, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(115, 173, 255, 0.42);
    color: #e6eeff;
}

.calendar-title-date-menu {
    width: min(360px, calc(100vw - 16px));
    padding: 10px;
    border-radius: 12px;
    background: rgba(18, 24, 35, 0.92);
    border-color: rgba(155, 176, 214, 0.18);
    box-shadow: 0 14px 28px rgba(8, 12, 22, 0.24);
    backdrop-filter: blur(8px);
}

.calendar-title-date-menu-top {
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.calendar-title-date-period-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.calendar-title-date-select {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.calendar-title-date-year-select {
    max-width: 88px;
}

.calendar-title-date-edge-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex: 0 0 auto;
    font-size: 20px;
}

.calendar-title-date-weekdays {
    margin-top: 2px;
    margin-bottom: 4px;
    color: rgba(220, 229, 245, 0.68);
    font-size: 10px;
    font-weight: 600;
}

.calendar-title-date-days-grid {
    gap: 2px 0;
}

.calendar-title-date-day {
    min-height: 32px;
    font-size: 13px;
    border-radius: 999px;
    position: relative;
    z-index: 1;
}

.calendar-title-date-day.calendar-title-date-in-range {
    background: rgba(86, 131, 230, 0.14);
    color: #eef3ff;
    border-radius: 0;
}

.calendar-title-date-day.calendar-title-date-range-start,
.calendar-title-date-day.calendar-title-date-range-end {
    background: #3f7fe6;
    color: #fff;
    border-radius: 999px;
}

.calendar-title-date-day.calendar-title-date-in-range.calendar-title-date-range-start {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.calendar-title-date-day.calendar-title-date-in-range.calendar-title-date-range-end {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.calendar-title-date-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
}

.calendar-title-date-action-btn {
    max-width: none;
    min-height: 34px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.calendar-title-date-action-btn.secondary {
    background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="light"] .date-menu {
    background: #ffffff;
    border-color: #d9d9d9;
    box-shadow: 0 9px 28px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .date-today-btn {
    border-color: #d9d9d9;
    background: #fff;
    color: rgba(0, 0, 0, 0.65);
}

:root[data-theme="light"] .date-today-btn:hover {
    border-color: #91caff;
    color: #1677ff;
}

:root[data-theme="light"] .date-quick-preset-title {
    color: #6a7fa5;
}

:root[data-theme="light"] .date-quick-toggle span {
    background: #f5f8ff;
    border-color: rgba(110, 133, 170, 0.32);
    color: #3e5175;
}

:root[data-theme="light"] .date-quick-toggle input[type="checkbox"]:checked + span {
    background: rgba(79, 124, 255, 0.16);
    border-color: rgba(104, 145, 255, 0.65);
    color: #244072;
}

:root[data-theme="light"] .date-quick-toggle.is-checked span {
    background: rgba(79, 124, 255, 0.16);
    border-color: rgba(104, 145, 255, 0.65);
    color: #244072;
}

:root[data-theme="light"] .date-input-text {
    background: #ffffff;
    border-color: #d9d9d9;
    color: rgba(0, 0, 0, 0.88);
}

:root[data-theme="light"] .date-input-text::placeholder {
    color: #8ea1bc;
}

:root[data-theme="light"] .entity-doc-reminder-time-label {
    color: #6c829f;
}

:root[data-theme="light"] .entity-doc-reminder-trigger,
:root[data-theme="light"] .entity-doc-reminder-time-input,
:root[data-theme="light"] .entity-doc-reminder-team-picker {
    background: #ffffff;
    border-color: #d9d9d9;
    color: rgba(0, 0, 0, 0.88);
}

:root[data-theme="light"] .date-period-select {
    color: rgba(0, 0, 0, 0.88);
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 5px 8px;
}

:root[data-theme="light"] .date-period-select:focus {
    border-color: #91caff;
}

:root[data-theme="light"] .date-nav-btn {
    color: rgba(0, 0, 0, 0.65);
    background: #fff;
    border-color: #d9d9d9;
}

:root[data-theme="light"] .date-nav-btn:hover {
    color: #1677ff;
    border-color: #91caff;
}

:root[data-theme="light"] .date-weekdays {
    color: rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] .date-day {
    color: rgba(0, 0, 0, 0.88);
}

:root[data-theme="light"] .date-day.outside {
    color: rgba(0, 0, 0, 0.25);
}

:root[data-theme="light"] .date-day.current:hover {
    background: #e6f4ff;
}

:root[data-theme="light"] .date-day.selected {
    background: #1677ff;
    color: #fff;
}

:root[data-theme="light"] .date-day.today:not(.selected) {
    background: rgba(22, 119, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.32);
    color: #0f4cb3;
}

:root[data-theme="light"] .fc .fc-toolbar-title.calendar-toolbar-title-button {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(104, 129, 170, 0.12);
}

:root[data-theme="light"] .fc .fc-toolbar-title.calendar-toolbar-title-button:hover {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(104, 129, 170, 0.18);
}

:root[data-theme="light"] .fc .fc-toolbar-title.calendar-toolbar-title-button[aria-expanded="true"] {
    background: rgba(63, 127, 230, 0.12);
    border-color: rgba(63, 127, 230, 0.28);
}

:root[data-theme="light"] .calendar-title-date-menu {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(104, 129, 170, 0.16);
    box-shadow: 0 14px 28px rgba(30, 52, 92, 0.14);
}

:root[data-theme="light"] .calendar-title-date-weekdays {
    color: rgba(83, 101, 132, 0.62);
}

:root[data-theme="light"] .calendar-title-date-day.calendar-title-date-in-range {
    background: rgba(63, 127, 230, 0.12);
    color: #2b3f62;
}

:root[data-theme="light"] .calendar-title-date-action-btn.secondary {
    background: #f2f5fb;
    color: #446087;
}

.zeitraum-trigger {
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: var(--date-chip-width);
    min-width: var(--date-chip-width);
    max-width: var(--date-chip-width);
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zeitraum-clear-btn {
    border-radius: 6px;
}

.zeitraum-clear-btn:hover {
    background: rgba(255, 98, 98, 0.28);
    border-color: rgba(255, 165, 165, 0.65);
    color: #ffd7d7;
}

.date-cell:hover .date-clear-btn,
.zeitraum-cell:hover .zeitraum-clear-btn {
    opacity: 1;
    pointer-events: auto;
}

.date-cell:has(.date-clear-btn:not(.is-hidden)):hover .date-trigger::after {
    background-image: none;
}

.zeitraum-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 420px;
    background: #343858;
    border: 1px solid rgba(180, 196, 228, 0.2);
    border-radius: 12px;
    padding: 18px 20px 16px;
    box-shadow: 0 22px 40px rgba(3, 6, 18, 0.55);
}

.zeitraum-menu.active {
    display: block;
}

.zeitraum-menu.active.overlay-above {
    z-index: 100120;
}

:root[data-theme="light"] .zeitraum-menu {
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    border-color: rgba(121, 143, 181, 0.3);
    box-shadow: 0 18px 38px rgba(28, 45, 74, 0.14);
}

:root[data-theme="light"] .zeitraum-menu-head {
    color: #1f3554;
}

:root[data-theme="light"] .zeitraum-days-count {
    color: #5f7698;
}

.zeitraum-menu-head {
    color: #e6ebfa;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.zeitraum-days-count {
    color: #aab3cb;
    font-weight: 500;
    font-size: 14px;
}

.zeitraum-menu-fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}

.zeitraum-menu-fields input[type="date"] {
    width: 100%;
}

.zeitraum-menu-fields input[type="text"] {
    width: 100%;
    background: #343858;
    border: 1px solid rgba(180, 196, 228, 0.2);
    color: #e8edff;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

.zeitraum-field-input {
    height: 36px;
}

.zeitraum-field-separator {
    color: #aab5cf;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.zeitraum-cal-head {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zeitraum-period-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zeitraum-period-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    color: #e1e8fb;
    font-size: 14px;
    font-weight: 500;
    padding: 0 28px 0 12px;
    min-height: 30px;
    cursor: pointer;
    outline: none;
    width: 100%;
    border-radius: 8px;
}

.zeitraum-period-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 108px;
    border: 1px solid rgba(180, 196, 228, 0.3);
    background: rgba(20, 27, 47, 0.42);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.zeitraum-period-dropdown.zeitraum-period-dropdown-year {
    min-width: 88px;
}

.zeitraum-period-dropdown::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-40%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid rgba(223, 232, 250, 0.9);
    pointer-events: none;
}

.zeitraum-period-dropdown:focus-within {
    border-color: rgba(108, 155, 247, 0.7);
    box-shadow: 0 0 0 2px rgba(69, 121, 220, 0.28);
}

.zeitraum-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.zeitraum-nav-btn {
    border: 1px solid rgba(180, 196, 228, 0.26);
    background: rgba(20, 27, 47, 0.38);
    color: #dce5fa;
    font-size: 18px;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
}

.zeitraum-nav-btn:hover {
    background: rgba(56, 103, 190, 0.3);
    border-color: rgba(123, 169, 248, 0.45);
}

.zeitraum-weekdays {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    color: #8e97b4;
    font-size: 14px;
    text-align: center;
}

.zeitraum-days-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px 0;
}

.zeitraum-day {
    border: none;
    background: transparent;
    color: #d9e2f8;
    min-height: 40px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
}

.zeitraum-day.current:hover {
    background: rgba(255, 255, 255, 0.11);
}

.zeitraum-day.outside {
    color: #69708b;
}

.zeitraum-day.in-range {
    background: #214a92;
    border-radius: 0;
}

.zeitraum-day.preview-range {
    background: #16213f;
    border-radius: 0;
}

.zeitraum-day.range-start,
.zeitraum-day.range-end {
    background: #2f80ff;
    border-radius: 10px;
    color: #fff;
}

.zeitraum-day.preview-end {
    background: #2f80ff;
    border-radius: 10px;
    color: #fff;
}

.zeitraum-day.range-end {
    text-decoration: underline;
    text-underline-offset: 4px;
}

:root[data-theme="light"] .zeitraum-field-separator {
    color: #6d83a3;
}

:root[data-theme="light"] .zeitraum-menu-fields input[type="text"] {
    background: #ffffff;
    border-color: rgba(121, 143, 181, 0.34);
    color: #1f3554;
}

:root[data-theme="light"] .zeitraum-menu-fields input[type="text"]::placeholder {
    color: #8a9fbc;
}

:root[data-theme="light"] .zeitraum-menu-fields input[type="text"]:focus {
    border-color: rgba(77, 124, 206, 0.62);
    box-shadow: 0 0 0 2px rgba(74, 125, 206, 0.16);
    outline: none;
}

:root[data-theme="light"] .zeitraum-period-select {
    color: #1f3f63;
}

:root[data-theme="light"] .zeitraum-period-dropdown {
    background: #ffffff;
    border-color: rgba(121, 143, 181, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .zeitraum-period-dropdown::after {
    border-top-color: #5f7899;
}

:root[data-theme="light"] .zeitraum-period-dropdown:focus-within {
    border-color: rgba(77, 124, 206, 0.62);
    box-shadow: 0 0 0 2px rgba(74, 125, 206, 0.18);
}

:root[data-theme="light"] .zeitraum-nav-btn {
    background: #ffffff;
    border-color: rgba(121, 143, 181, 0.34);
    color: #2f4f78;
}

:root[data-theme="light"] .zeitraum-nav-btn:hover {
    background: #e9f2ff;
    border-color: rgba(101, 140, 210, 0.46);
}

:root[data-theme="light"] .zeitraum-weekdays {
    color: #7188a8;
}

:root[data-theme="light"] .zeitraum-day {
    color: #223a59;
}

:root[data-theme="light"] .zeitraum-day.current:hover {
    background: rgba(74, 125, 206, 0.12);
}

:root[data-theme="light"] .zeitraum-day.outside {
    color: #a0b1c9;
}

:root[data-theme="light"] .zeitraum-day.in-range {
    background: #dbe9ff;
    color: #284d7a;
}

:root[data-theme="light"] .zeitraum-day.preview-range {
    background: #eaf2ff;
    color: #385f8b;
}

:root[data-theme="light"] .zeitraum-day.range-start,
:root[data-theme="light"] .zeitraum-day.range-end,
:root[data-theme="light"] .zeitraum-day.preview-end {
    background: #3f7de0;
    color: #ffffff;
}

:root[data-theme="light"] .zeitraum-trigger {
    border-color: rgba(121, 143, 181, 0.32);
    background: #ffffff;
    color: #1f3554;
}

:root[data-theme="light"] .zeitraum-clear-btn:hover {
    background: rgba(230, 71, 88, 0.14);
    border-color: rgba(214, 80, 100, 0.38);
    color: #b13b4b;
}

.file-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 130px;
}

.file-cell a {
    color: #9ac7ff;
    text-decoration: none;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-actions {
    display: inline-flex;
    gap: 4px;
}

.board-attachment-cell {
    position: relative;
    min-width: 92px;
    gap: 1px;
    padding: 1px 0;
    border-radius: 7px;
    min-height: 34px;
    display: flex;
    align-items: center;
    transition: background 140ms ease, box-shadow 140ms ease;
    overflow: visible;
}

.board-attachment-cell.is-drag-over,
.board-attachment-cell:hover {
    background: rgba(126, 163, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(126, 163, 255, 0.16);
}

.board-attachment-cell:hover,
.board-attachment-cell:focus-within {
    z-index: 10115;
}

.board-attachment-cell.is-uploading {
    background: rgba(126, 163, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(126, 163, 255, 0.22);
}

.board-attachment-row {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
    min-height: 32px;
    transition: opacity 120ms ease, transform 120ms ease;
    overflow: visible;
}

.board-attachment-cell.is-drag-over .board-attachment-row {
    opacity: 1;
    transform: none;
}

.board-attachment-cell.is-uploading .board-attachment-row,
.board-attachment-cell.is-external-required .board-attachment-row,
.board-attachment-cell.is-error .board-attachment-row {
    opacity: 0.08;
    transform: scale(0.985);
}

.board-attachment-main {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    overflow: hidden;
    display: grid;
    align-content: center;
    gap: 0;
    min-height: 100%;
    cursor: pointer;
}

.board-attachment-main.is-empty {
    cursor: default;
}

.board-attachment-icon-row {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 14px;
    max-width: 100%;
    overflow: hidden;
}

.board-attachment-icon-wrap {
    position: relative;
    display: inline-flex;
    padding-bottom: 8px;
    margin-bottom: -8px;
    z-index: 1;
}

.board-attachment-icon-wrap:hover,
.board-attachment-icon-wrap:focus-within {
    z-index: 10120;
}

.board-attachment-icon-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.board-attachment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    font: 700 8px/1 'Figtree', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(120, 148, 198, 0.28);
    color: #6e83a8;
    box-shadow: inset 0 0 0 1px rgba(126, 163, 255, 0.18);
}

.board-attachment-icon.is-image {
    background: rgba(112, 178, 255, 0.24);
    color: #5f8cc7;
}

.board-attachment-icon.is-pdf {
    background: rgba(255, 126, 126, 0.24);
    color: #bf6d6d;
}

.board-attachment-icon.is-link {
    background: rgba(118, 214, 184, 0.24);
    color: #5d9b89;
}

.board-attachment-icon.is-video {
    background: rgba(255, 196, 112, 0.26);
    color: #b97c31;
}

.board-attachment-icon.is-archive {
    background: rgba(153, 136, 255, 0.24);
    color: #7564bd;
}

.board-attachment-more-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    flex: 0 0 auto;
    border-radius: 999px;
    font: 700 8px/1 'Figtree', sans-serif;
    color: #58709a;
    background: rgba(126, 163, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(126, 163, 255, 0.2);
}

.board-attachment-badges {
    display: none;
}

.board-attachment-upload-btn {
    min-width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    flex: 0 0 20px;
    align-self: center;
    border-radius: 8px;
    font-size: 10px;
}

.board-attachment-cell.is-uploading .board-attachment-upload-btn {
    background: rgba(126, 163, 255, 0.18);
    border-color: rgba(126, 163, 255, 0.3);
    color: #26446e;
}

.board-attachment-drop-overlay {
    position: absolute;
    inset: 1px 0;
    border-radius: 7px;
    display: none;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 5px 8px;
    box-shadow: inset 0 0 0 1px rgba(118, 160, 255, 0.22);
    pointer-events: none;
    z-index: 2;
}

.board-attachment-drop-overlay[hidden],
.board-attachment-progress[hidden] {
    display: none;
}

.board-attachment-cell.is-drag-over .board-attachment-drop-overlay {
    display: grid;
    background: rgba(244, 248, 255, 0.88);
}

.board-attachment-cell.is-uploading .board-attachment-drop-overlay {
    display: grid;
    background: rgba(244, 248, 255, 0.94);
    box-shadow: inset 0 0 0 1px rgba(118, 160, 255, 0.26);
}

.board-attachment-cell.is-external-required .board-attachment-drop-overlay,
.board-attachment-cell.is-error .board-attachment-drop-overlay {
    display: grid;
    background: rgba(244, 248, 255, 0.96);
}

.board-attachment-cell.is-external-required .board-attachment-drop-overlay {
    box-shadow: inset 0 0 0 1px rgba(255, 191, 94, 0.28);
}

.board-attachment-cell.is-error .board-attachment-drop-overlay {
    box-shadow: inset 0 0 0 1px rgba(255, 121, 121, 0.24);
}

.board-attachment-drop-overlay-hint {
    color: #dce6fb;
    font: 500 9px/1.35 'Figtree', sans-serif;
    text-align: center;
    max-width: 150px;
}

.board-attachment-drop-overlay-label {
    color: #36527f;
    font: 600 9px/1.2 'Figtree', sans-serif;
    text-align: center;
    max-width: 100%;
}

.board-attachment-progress {
    width: 100%;
    display: grid;
    gap: 3px;
}

.board-attachment-progress-track {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(109, 141, 196, 0.18);
}

.board-attachment-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #79a8ff, #c7dbff);
}

.board-attachment-progress-text {
    color: #36527f;
    font: 600 8px/1 'Figtree', sans-serif;
    text-align: center;
}

.board-attachment-drop-hint {
    display: none;
}

.board-attachment-badge,
.board-attachment-chip {
    display: inline-flex;
    align-items: center;
    min-height: 14px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(92, 138, 255, 0.16);
    color: #dbe7ff;
    font: 600 9px/1 'Figtree', sans-serif;
    white-space: nowrap;
}

.board-attachment-badge.is-external {
    background: rgba(118, 214, 184, 0.16);
    color: #d8fff1;
}

.board-attachment-chip.is-link {
    background: rgba(118, 214, 184, 0.16);
    color: #d8fff1;
}

.board-attachment-badge.is-legacy {
    background: rgba(255, 202, 116, 0.16);
    color: #ffe4b7;
}

.board-attachment-chip.is-legacy {
    background: rgba(255, 202, 116, 0.16);
    color: #ffe4b7;
}

.board-attachment-hover {
    position: absolute;
    left: 0;
    top: calc(100% + 2px);
    transform: translateY(4px);
    width: 260px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(25, 32, 51, 0.96);
    border: 1px solid rgba(140, 163, 210, 0.24);
    box-shadow: 0 18px 40px rgba(8, 12, 24, 0.32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    z-index: 10130;
}

body.entity-attachment-drawer-open .board-attachment-hover {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateY(-4px);
}

.board-attachment-icon-wrap:hover .board-attachment-hover,
.board-attachment-icon-wrap:focus-within .board-attachment-hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.board-attachment-hover-head,
.board-attachment-hover-foot {
    color: #dbe7ff;
    font: 600 10px/1.35 'Figtree', sans-serif;
}

.board-attachment-hover-head {
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9eb2da;
}

.board-attachment-hover-foot {
    margin-top: 8px;
    color: #c6d6f6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-attachment-hover-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.board-attachment-hover-action {
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #e5eefc;
    font: 600 8px/1 'Figtree', sans-serif;
    white-space: nowrap;
    padding: 0 3px;
    cursor: pointer;
}

.board-attachment-hover-action:hover {
    background: rgba(255,255,255,0.10);
}

.board-attachment-hover-action.danger {
    color: #ffd8d8;
    border-color: rgba(255, 125, 125, 0.2);
    background: rgba(255, 125, 125, 0.08);
}

.board-attachment-hover-action-spacer {
    display: block;
}

.board-attachment-hover-media {
    height: 132px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.board-attachment-hover-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.board-attachment-hover-media video,
.board-attachment-hover-pdf-canvas,
.board-attachment-hover-office-frame {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #fff;
    border: 0;
}

.board-attachment-hover-pdf {
    height: 132px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 122, 122, 0.22), rgba(255, 122, 122, 0.08)),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 160, 160, 0.16);
    display: grid;
    place-items: center;
    text-align: center;
    gap: 6px;
    padding: 12px;
}

.board-attachment-hover-generic {
    height: 132px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: grid;
    place-items: center;
    gap: 6px;
    text-align: center;
    padding: 12px;
}

.board-attachment-hover-generic span {
    color: #e8eefc;
    font: 700 18px/1 'Figtree', sans-serif;
    letter-spacing: 0.08em;
}

.board-attachment-hover-generic small {
    color: #b9c8e8;
    font: 500 10px/1.4 'Figtree', sans-serif;
}

.board-attachment-hover-pdf span {
    color: #ffe4e4;
    font: 700 18px/1 'Figtree', sans-serif;
    letter-spacing: 0.08em;
}

.board-attachment-hover-pdf small {
    color: #f1c6c6;
    font: 500 10px/1.4 'Figtree', sans-serif;
}

.board-attachment-badge.is-muted {
    display: none;
}

.mini-btn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #d8dce8;
    border-radius: 6px;
    font-size: 11px;
    padding: 3px 7px;
    margin: 5px;
    cursor: pointer;
}

:root[data-theme="light"] .mini-btn {
    border-color: rgba(131, 149, 181, 0.24);
    background: #f3f7fd;
    color: #29405f;
}

:root[data-theme="light"] .mini-btn:hover {
    background: #e7effb;
    border-color: rgba(86, 130, 210, 0.3);
    color: #1f3655;
}

.center-cell {
    text-align: center;
}

.board-bulk-bar {
    display: none;
}

.board-bulk-bar.active {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: rgba(42, 48, 75, 0.96);
    border: 1px solid rgba(160, 178, 218, 0.28);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 18px 42px rgba(6, 9, 20, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

:root[data-theme="light"] .board-bulk-bar.active {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(131, 149, 181, 0.32);
    color: #23364f;
    box-shadow: 0 12px 28px rgba(28, 45, 74, 0.16), 0 0 0 1px rgba(131, 149, 181, 0.08) inset;
}

:root[data-theme="light"] .board-bulk-bar.active select {
    background: #ffffff;
    border: 1px solid #d7e1ef;
    color: #1d2a3d;
}

.row-copy-btn.row-unarchive-btn:hover {
    color: #7dd67d;
    border-color: rgba(92, 184, 92, 0.8);
    background: rgba(92, 184, 92, 0.2);
}

:root[data-theme="light"] .crm-bulk-inline-field {
    color: #304968;
}

:root[data-theme="light"] .crm-bulk-inline-field select,
:root[data-theme="light"] .crm-bulk-inline-field input[type="date"] {
    background: #ffffff;
    border-color: #d7e1ef;
    color: #1d2a3d;
}

.board-bulk-count {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2e80ff;
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.board-bulk-title {
    font-size: 18px;
    font-weight: 700;
    margin-right: 6px;
}

.crm-bulk-inline-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #c9d6f2;
}

.crm-bulk-inline-field select,
.crm-bulk-inline-field input[type="date"] {
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(160, 178, 218, 0.32);
    background: rgba(255,255,255,0.08);
    color: #ecf2ff;
    padding: 0 8px;
    min-width: 130px;
}

.crm-company-list-toolbar .secondary-btn.is-active,
.crm-search-row .secondary-btn.is-active {
    opacity: 1;
}

.stage-select {
    min-width: 140px;
}

.team-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    min-height: 26px;
}

.team-board-cell {
    cursor: pointer;
}

.team-board-cell .team-cell-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1;
}

.team-board-cell .team-cell-pills .team-avatar,
.team-board-cell .team-cell-pills .team-pill {
    flex: 0 0 auto;
}

.team-pill {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #eee;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 11px;
}

.team-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: #1b243f;
    border: 1px solid #4371cc;
    color: #e9eefc;
    font-size: 10px;
    font-weight: 600;
    overflow: hidden;
}

.team-avatar.small {
    width: 20px;
    height: 20px;
    font-size: 9px;
}

.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-picker {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: min(184px, calc(100vw - 24px));
    min-width: 184px;
    background: #1b243f;
    border: 1px solid #4371cc;
    border-radius: 10px;
    padding: 6px;
    display: none;
    box-shadow: 0 12px 28px rgba(6, 12, 28, 0.34);
    opacity: 1;
    isolation: isolate;
}

.team-picker.active {
    display: block;
}

.team-picker.active.overlay-below,
.team-picker.active.overlay-above {
    opacity: 1 !important;
    z-index: 4000001 !important;
}

.team-picker-list {
    max-height: min(36vh, 220px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    display: grid;
    gap: 4px;
}

.team-picker label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: #e9eefc;
    padding: 6px 7px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border: 1px solid rgba(67, 113, 204, 0.18);
    background: rgba(255, 255, 255, 0.02);
}

.team-picker label:hover {
    background: rgba(67, 113, 204, 0.12);
    border-color: rgba(103, 145, 224, 0.34);
}

.team-picker label.selected {
    background: rgba(67, 113, 204, 0.22);
    border-color: rgba(111, 155, 236, 0.55);
    color: #f3f7ff;
}

.crm-kontakt-owner-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #ddd;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.crm-kontakt-owner-option:hover {
    background: rgba(122, 162, 232, 0.18);
    border-color: rgba(122, 162, 232, 0.35);
}

.crm-kontakt-owner-option.selected {
    background: rgba(47, 128, 255, 0.28);
    border-color: rgba(125, 177, 255, 0.6);
    color: #ecf4ff;
}

.crm-company-owner-cell,
.crm-contact-owner-cell {
    cursor: pointer;
}

.crm-company-owner-cell {
    display: inline-flex;
    align-items: center;
    position: relative;
    min-width: 0;
}

.team-picker-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-picker input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 14px;
    transform: none;
    accent-color: #5f8fe6;
}

.team-picker-actions {
    display: flex;
    justify-content: stretch;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(67, 113, 204, 0.18);
}

.team-picker .mini-btn {
    width: 100%;
    min-height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(67, 113, 204, 0.24);
    color: #e9eefc;
}

.team-picker .mini-btn:hover {
    background: rgba(67, 113, 204, 0.14);
    border-color: rgba(103, 145, 224, 0.34);
}

:root[data-theme="light"] .team-picker {
    background: #ffffff;
    border: 1px solid rgba(145, 164, 195, 0.28);
    box-shadow: 0 14px 28px rgba(33, 52, 84, 0.16);
}

:root[data-theme="light"] .team-picker label {
    color: #3d5270;
    background: #ffffff;
    border-color: rgba(145, 164, 195, 0.18);
}

:root[data-theme="light"] .team-picker label:hover {
    background: rgba(74, 125, 206, 0.06);
    border-color: rgba(74, 125, 206, 0.18);
}

:root[data-theme="light"] .team-picker label.selected {
    background: rgba(58, 108, 196, 0.12);
    border-color: rgba(58, 108, 196, 0.32);
    color: #2d4466;
}

:root[data-theme="light"] .crm-kontakt-owner-option {
    color: #263a55;
}

:root[data-theme="light"] .crm-kontakt-owner-option:hover {
    background: rgba(74, 125, 206, 0.08);
    border-color: rgba(74, 125, 206, 0.22);
}

:root[data-theme="light"] .crm-kontakt-owner-option.selected {
    background: rgba(58, 108, 196, 0.14);
    border-color: rgba(58, 108, 196, 0.42);
    color: #1f3555;
}

:root[data-theme="light"] .team-picker-actions {
    border-top-color: rgba(145, 164, 195, 0.18);
}

:root[data-theme="light"] .team-picker .mini-btn {
    background: #f2f6fc;
    border-color: rgba(131, 149, 181, 0.24);
    color: #2a4160;
    width: 100%;
    min-height: 34px;
    border-radius: 8px;
}

:root[data-theme="light"] .team-picker .mini-btn:hover {
    background: #e7effb;
    border-color: rgba(86, 130, 210, 0.3);
    color: #1f3655;
}

.u-billing-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.2);
    border: 1px solid rgba(255, 59, 48, 0.6);
    position: relative;
}

.u-billing-flag::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 2px;
    background: rgba(255, 59, 48, 0.9);
    transform: rotate(-45deg);
    border-radius: 2px;
}

.subtasks-shell {
    position: relative;
    margin: 0;
    padding-left: 0;
    display: grid;
    grid-template-columns: 2px minmax(0, 1fr);
    column-gap: 10px;
    align-items: stretch;
    --subtasks-sticky-offset: 15px;
    --subline-x: -15px;
    --sub-connector-color: var(--group-color, #7aa2ff);
}

.subtasks-shell::before {
    content: none;
}

.subtasks-shell-rail {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    left: 2px;
    top: 0;
    justify-self: start;
    align-self: stretch;
    min-height: 100%;
    height: auto;
    width: 2px;
    background: var(--group-color, #7aa2ff);
    border-radius: 0;
    z-index: 12;
    pointer-events: none;
}

.subtasks {
    grid-column: 2;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(156, 175, 209, 0.22);
    border-radius: 0;
    padding: 0;
    background: rgba(37, 43, 69, 0.88);
    display: grid;
    gap: 0;
    --st-title: 360px;
    --st-deadline: 140px;
    --st-team: 180px;
    --st-status: 120px;
    --st-details: 240px;
    --st-files: 170px;
}

.subtask-row {
    display: grid;
    grid-template-columns: 44px var(--st-title) var(--st-deadline) var(--st-team) var(--st-status) var(--st-details) var(--st-files);
    gap: 0;
    align-items: center;
    min-height: 42px;
    font-size: 13px;
    position: relative;
}

.subtask-row.subtask-draggable {
    cursor: grab;
}

.subtask-row.subtask-draggable > :first-child {
    box-shadow: inset 1px 0 0 rgba(156, 175, 209, 0.18);
}

.subtask-row.subtask-header > :first-child {
    box-shadow: inset 1px 0 0 rgba(156, 175, 209, 0.18);
}

.subtask-row.subtask-draggable.dragging {
    cursor: grabbing;
}

.subtask-row.subtask-drag-target {
    border-top: 3px dashed #64b4ff !important;
    background: linear-gradient(to bottom, rgba(100, 180, 255, 0.1), transparent) !important;
}

.subtask-row.subtask-drag-target > * {
    background: rgba(100, 180, 255, 0.08) !important;
}

.subtask-row.subtask-drag-blocked {
    cursor: not-allowed;
}

.subtask-row.subtask-drag-blocked > * {
    background: rgba(255, 115, 115, 0.05) !important;
}

.subtask-row:not(.subtask-header)::before {
    content: none;
}

.subtask-row .my-work-team-cell .team-picker {
    top: calc(100% + 8px);
}

.subtask-header {
    color: #b8c3dd;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-top: none;
    padding-top: 0;
    background: #2e3350;
}

.subtask-row.subtask-header > * {
    min-height: 30px;
}

.subtask-head-resizable {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 8px;
    text-align: center;
}

.subtask-complete {
    opacity: 1;
}

.subtask-complete > * {
    opacity: 1;
}

.subtask-complete::before {
    opacity: 1;
}

.subtask-complete input[type="text"] {
    text-decoration: line-through;
}

.subtask-complete input.project-inline-input {
    text-decoration: none;
}

.subtasks .subtask-row:first-child {
    border-top: none;
}

.subtask-row input[type="text"],
.subtask-row input[type="date"] {
    width: 100%;
}

.subtask-row {
    border-top: 1px solid rgba(156, 175, 209, 0.16);
}

.subtask-row > * {
    border-right: 1px solid rgba(156, 175, 209, 0.12);
    min-height: 42px;
    box-sizing: border-box;
    padding: 0 8px;
}

.subtask-row.subtask-header {
    min-height: 30px;
}

.subtask-row > div,
.subtask-row > button {
    display: flex;
    align-items: center;
}

/* Erste zwei Subtask-Spalten (Checkbox + Titel) horizontal fixieren */
.subtask-row > :first-child {
    position: sticky;
    left: var(--subtasks-sticky-offset);
    z-index: 6;
    background: #252b45;
}

.subtask-row > :first-child::before {
    content: "";
    position: absolute;
    right: 100%;
    top: -1px;
    bottom: -1px;
    width: 2000px;
    background: #151922;
    pointer-events: none;
    z-index: 0;
}

.subtask-row > :nth-child(2) {
    position: sticky;
    left: calc(var(--subtasks-sticky-offset) + 44px);
    z-index: 5;
    background: #252b45;
}

.subtask-row.subtask-header > :first-child,
.subtask-row.subtask-header > :nth-child(2) {
    background: #2e3350;
}

.subtask-row.subtask-complete > :first-child,
.subtask-row.subtask-complete > :nth-child(2) {
    background: #252b45;
}

.subtask-row.is-due-overdue > * {
    background: linear-gradient(var(--due-color-overdue), var(--due-color-overdue)), #2f3450;
}

.subtask-row.is-due-today > * {
    background: linear-gradient(var(--due-color-today), var(--due-color-today)), #2f3450;
}

.subtask-row.is-due-tomorrow > * {
    background: linear-gradient(var(--due-color-tomorrow), var(--due-color-tomorrow)), #2f3450;
}

.subtask-row.is-due-week > * {
    background: linear-gradient(var(--due-color-week), var(--due-color-week)), #2f3450;
}

.subtask-row.is-due-next-week > * {
    background: linear-gradient(var(--due-color-next-week), var(--due-color-next-week)), #2f3450;
}

.subtask-row.is-due-overdue > :first-child,
.subtask-row.is-due-overdue > :nth-child(2),
.subtask-row.is-due-today > :first-child,
.subtask-row.is-due-today > :nth-child(2),
.subtask-row.is-due-tomorrow > :first-child,
.subtask-row.is-due-tomorrow > :nth-child(2),
.subtask-row.is-due-week > :first-child,
.subtask-row.is-due-week > :nth-child(2),
.subtask-row.is-due-next-week > :first-child,
.subtask-row.is-due-next-week > :nth-child(2),
.subtask-row.is-due-overdue .my-work-team-cell,
.subtask-row.is-due-overdue .subtask-status-cell,
.subtask-row.is-due-overdue .subtask-actions-cell,
.subtask-row.is-due-overdue .board-attachment-cell,
.subtask-row.is-due-today .my-work-team-cell,
.subtask-row.is-due-today .subtask-status-cell,
.subtask-row.is-due-today .subtask-actions-cell,
.subtask-row.is-due-today .board-attachment-cell,
.subtask-row.is-due-tomorrow .my-work-team-cell,
.subtask-row.is-due-tomorrow .subtask-status-cell,
.subtask-row.is-due-tomorrow .subtask-actions-cell,
.subtask-row.is-due-tomorrow .board-attachment-cell,
.subtask-row.is-due-week .my-work-team-cell,
.subtask-row.is-due-week .subtask-status-cell,
.subtask-row.is-due-week .subtask-actions-cell,
.subtask-row.is-due-week .board-attachment-cell,
.subtask-row.is-due-next-week .my-work-team-cell,
.subtask-row.is-due-next-week .subtask-status-cell,
.subtask-row.is-due-next-week .subtask-actions-cell,
.subtask-row.is-due-next-week .board-attachment-cell {
    background: var(--subtask-due-fill) !important;
    opacity: 1 !important;
}

.subtask-row.is-due-overdue .my-work-team-cell,
.subtask-row.is-due-today .my-work-team-cell,
.subtask-row.is-due-tomorrow .my-work-team-cell,
.subtask-row.is-due-week .my-work-team-cell,
.subtask-row.is-due-next-week .my-work-team-cell,
.subtask-row.is-due-overdue .board-attachment-cell,
.subtask-row.is-due-today .board-attachment-cell,
.subtask-row.is-due-tomorrow .board-attachment-cell,
.subtask-row.is-due-week .board-attachment-cell,
.subtask-row.is-due-next-week .board-attachment-cell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
    min-height: 42px !important;
    height: 100% !important;
    align-self: stretch !important;
}

.subtask-row.is-due-overdue .my-work-team-cell,
.subtask-row.is-due-today .my-work-team-cell,
.subtask-row.is-due-tomorrow .my-work-team-cell,
.subtask-row.is-due-week .my-work-team-cell,
.subtask-row.is-due-next-week .my-work-team-cell {
    padding-inline: 0 !important;
    display: flex !important;
}

.subtask-row.is-due-overdue .board-attachment-cell,
.subtask-row.is-due-today .board-attachment-cell,
.subtask-row.is-due-tomorrow .board-attachment-cell,
.subtask-row.is-due-week .board-attachment-cell,
.subtask-row.is-due-next-week .board-attachment-cell {
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.subtask-row.is-due-overdue > :first-child,
.subtask-row.is-due-today > :first-child,
.subtask-row.is-due-tomorrow > :first-child,
.subtask-row.is-due-week > :first-child,
.subtask-row.is-due-next-week > :first-child {
    background: linear-gradient(var(--subtask-due-bg), var(--subtask-due-bg)), #2f3450 !important;
}

.subtask-row.is-due-overdue {
    --subtask-due-bg: var(--due-color-overdue);
    --subtask-due-fill: linear-gradient(var(--due-color-overdue), var(--due-color-overdue)), #2f3450;
    background: var(--subtask-due-fill);
    box-shadow: 2000px 0 0 0 var(--subtask-due-bg);
}

.subtask-row.is-due-today {
    --subtask-due-bg: var(--due-color-today);
    --subtask-due-fill: linear-gradient(var(--due-color-today), var(--due-color-today)), #2f3450;
    background: var(--subtask-due-fill);
    box-shadow: 2000px 0 0 0 var(--subtask-due-bg);
}

.subtask-row.is-due-tomorrow {
    --subtask-due-bg: var(--due-color-tomorrow);
    --subtask-due-fill: linear-gradient(var(--due-color-tomorrow), var(--due-color-tomorrow)), #2f3450;
    background: var(--subtask-due-fill);
    box-shadow: 2000px 0 0 0 var(--subtask-due-bg);
}

.subtask-row.is-due-week {
    --subtask-due-bg: var(--due-color-week);
    --subtask-due-fill: linear-gradient(var(--due-color-week), var(--due-color-week)), #2f3450;
    background: var(--subtask-due-fill);
    box-shadow: 2000px 0 0 0 var(--subtask-due-bg);
}

.subtask-row.is-due-next-week {
    --subtask-due-bg: var(--due-color-next-week);
    --subtask-due-fill: linear-gradient(var(--due-color-next-week), var(--due-color-next-week)), #2f3450;
    background: var(--subtask-due-fill);
    box-shadow: 2000px 0 0 0 var(--subtask-due-bg);
}

.subtask-row.is-due-overdue > :first-child::before,
.subtask-row.is-due-today > :first-child::before,
.subtask-row.is-due-tomorrow > :first-child::before,
.subtask-row.is-due-week > :first-child::before,
.subtask-row.is-due-next-week > :first-child::before {
    background: linear-gradient(var(--subtask-due-bg), var(--subtask-due-bg)), #151922 !important;
}

.subtask-select-cell {
    justify-content: center;
    padding: 0;
    overflow: visible;
    position: relative;
}

.subtask-row:not(.subtask-header):not(.subtask-add-row):not(.subtask-empty-row) > .subtask-select-cell::after {
    content: "";
    position: absolute;
    left: calc(var(--subline-x) - -2.25px);
    top: 50%;
    width: 12px;
    height: 16px;
    transform: translateY(-100%);
    border-left: 2px solid var(--sub-connector-color);
    border-bottom: 2px solid var(--sub-connector-color);
    border-bottom-left-radius: 8px;
    opacity: 1;
    z-index: 8;
    pointer-events: none;
}

.subtask-row.subtask-add-row > *,
.subtask-row.subtask-empty-row > * {
    border-right: none;
}

.subtask-row.subtask-add-row,
.subtask-row.subtask-empty-row {
    position: relative;
}

.subtask-row.subtask-empty-row {
    display: none;
}

.subtask-row.subtask-add-row {
    min-height: 32px;
    border-top: 1px solid rgba(156, 175, 209, 0.18);
}

.subtask-row.subtask-add-row > * {
    min-height: 32px;
}

.subtask-row.subtask-add-row > :first-child {
    display: none;
}

.subtask-row.subtask-add-row > :nth-child(2) {
    grid-column: 1 / -1;
    left: 2px;
    position: sticky;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    background: #252b45;
    border-right: none;
}

.subtask-row.subtask-add-row > :nth-child(2)::before {
    content: "";
    position: absolute;
    right: 100%;
    top: -1px;
    bottom: -1px;
    width: 2000px;
    background: #151922;
    pointer-events: none;
    z-index: 0;
}

.subtask-add-row-label {
    white-space: nowrap;
}

.subtask-row.subtask-empty-row > :nth-child(2) {
    grid-column: 2 / 7;
    left: var(--subtasks-sticky-offset);
    border-right: none;
}

.subtask-row.subtask-add-row > :nth-child(n+3),
.subtask-row.subtask-empty-row > :nth-child(n+3) {
    display: none;
}

.subtask-row .video-title.editable {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0 8px;
}

.subtask-row > *:last-child {
    border-right: none;
}

.subtask-row input[type="text"],
.subtask-row input[type="date"] {
    width: calc(100% - 12px);
    margin: 0 6px;
    background: #232428;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #eaeaea;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
}

.subtask-row input.new-subtask-title-input {
    width: calc(100% - 12px);
    margin: 0 6px;
    background: #232428;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #eaeaea;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.subtask-row input.new-subtask-title-input::placeholder {
    color: #9ea8c3;
    opacity: 0.95;
}

.subtask-row input.new-subtask-title-input:focus {
    outline: none;
    border-color: rgba(120, 171, 255, 0.45);
    background: #232428;
}

.subtask-row .subtask-new-title-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.subtask-row .subtask-new-title-cell .new-subtask-title-input {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.subtask-inline-hint {
    font-size: 11px;
    line-height: 1.2;
    color: rgba(214, 223, 245, 0.78);
}

.board-table input.project-inline-input {
    width: calc(100% - 12px);
    min-width: 140px;
    margin: 0 6px;
    background: #232428;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #eaeaea;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    box-sizing: border-box;
}

.board-table textarea.project-inline-input.board-details-inline-input {
    width: calc(100% - 12px);
    min-width: 140px;
    height: auto;
    min-height: 32px;
    margin: 0 6px;
    background: #232428;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #eaeaea;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    box-sizing: border-box;
    resize: vertical;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.board-table input.project-inline-input.is-invalid {
    border-color: rgba(255, 120, 120, 0.75);
    background: rgba(58, 34, 40, 0.95);
}

.project-inline-hint {
    margin: 4px 6px 0;
    font-size: 11px;
    line-height: 1.2;
    color: #ffb5b5;
}

.board-table input.project-inline-input:focus {
    outline: none;
    border-color: rgba(120, 171, 255, 0.45);
    background: #232428;
}

.board-table textarea.project-inline-input.board-details-inline-input:focus {
    outline: none;
    border-color: rgba(120, 171, 255, 0.45);
    background: #232428;
}

.board-table textarea.project-inline-input.youbox-notes-inline-input {
    width: calc(100% - 12px);
    min-width: 0;
    margin: 0 6px;
    background: #232428;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #eaeaea;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    box-sizing: border-box;
    resize: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.board-table textarea.project-inline-input.youbox-notes-inline-input:focus {
    outline: none;
    border-color: rgba(120, 171, 255, 0.45);
    background: #232428;
}

.board-table input.project-inline-input.youbox-reminder-inline-input {
    width: 58px;
    min-width: 58px;
    margin: 0 auto;
    text-align: center;
    padding: 6px 6px;
}

:root[data-theme="light"] .board-table input.project-inline-input.youbox-reminder-inline-input {
    width: 58px;
    min-width: 58px;
    margin: 0 auto;
}

.board-table td.youbox-reminder-cell {
    text-align: center;
}

.subtask-row .subtask-date-board-cell {
    padding: 0 8px;
}

#internalTaskBoard .internal-subtask-row {
    grid-template-columns: 44px var(--itst-title, var(--st-title)) var(--itst-deadline, var(--st-deadline)) var(--itst-team, var(--st-team)) var(--itst-status, var(--st-status)) var(--itst-details, 240px) var(--itst-files, var(--st-files)) 54px;
}

#internalTaskBoard .internal-subtask-row .subtask-title-cell,
#internalTaskBoard .internal-subtask-row .subtask-details-cell {
    min-width: 0;
}

#internalTaskBoard .internal-subtask-row .subtask-details-cell {
    display: flex;
    align-items: center;
    color: #d7def1;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
}

#internalTaskBoard .internal-subtask-row .subtask-details-cell.is-empty {
    color: #8f9ab7;
}

#internalTaskBoard .board-table td[data-it-col="details"] {
    color: #d7def1;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#internalTaskBoard .board-table td[data-it-col="details"].is-empty {
    color: #8f9ab7;
}

#internalTaskBoard .internal-subtask-row .internal-subtask-details-input {
    width: calc(100% - 12px);
}

#internalTaskBoard .internal-subtask-row .subtask-actions-cell {
    justify-content: center;
    padding: 0;
}

#internalTaskBoard .internal-subtask-row .subtask-actions-cell .mini-btn {
    min-width: 32px;
}

#internalTaskBoard .internal-subtask-row.subtask-empty-row > :nth-child(2) {
    grid-column: 2 / 8;
}

#internalTaskBoard .internal-subtask-row .subtask-status-cell-placeholder {
    pointer-events: none;
    justify-content: center;
}

.subtask-row .subtask-date-cell {
    width: 100%;
    min-width: 0;
    max-width: none;
    --date-chip-width: 100%;
}

.subtask-row .subtask-title-cell,
.subtask-row .subtask-details-cell {
    min-width: 0;
}

.subtask-row .subtask-title-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.subtask-row .subtask-title-cell .video-title {
    flex: 1 1 auto;
    min-width: 0;
}


.subtask-row .date-menu.active,
.subtask-row .team-picker.active,
.subtask-row .status-menu.active {
    z-index: 1200000 !important;
}

.subtask-row .team-cell.my-work-team-cell,
.subtask-row .team-cell.my-work-team-cell.is-single {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    border-radius: 0;
    align-self: stretch;
    justify-content: center;
}

.subtask-row .subtask-date-cell,
.subtask-row .my-work-team-cell,
.subtask-row .subtask-status-cell,
#internalTaskBoard .internal-subtask-row .subtask-date-cell,
#internalTaskBoard .internal-subtask-row .my-work-team-cell,
#internalTaskBoard .internal-subtask-row .subtask-status-cell {
    position: relative;
}

.subtask-row .subtask-date-cell:has(.date-menu.active),
.subtask-row .my-work-team-cell:has(.team-picker.active),
.subtask-row .subtask-status-cell:has(.status-menu.active),
#internalTaskBoard .internal-subtask-row .subtask-date-cell:has(.date-menu.active),
#internalTaskBoard .internal-subtask-row .my-work-team-cell:has(.team-picker.active),
#internalTaskBoard .internal-subtask-row .subtask-status-cell:has(.status-menu.active) {
    z-index: 4000001 !important;
    opacity: 1 !important;
    filter: none !important;
}

.date-menu.active,
.team-picker.active,
.status-menu.active,
.subtask-status-menu.active {
    opacity: 1 !important;
    filter: none !important;
}

/* Keep dynamic subtask/internal-task overlays above row/table stacking contexts. */
.date-menu.active[id^="dateMenu_"],
.date-menu.active[id^="projectCostDateMenu_"],
.date-menu.active[id^="subtaskDateMenu_"],
.date-menu.active[id^="newSubtaskDateMenu_"],
.date-menu.active[id^="myWorkDateMenu_"],
.date-menu.active[id^="crmKontaktDateMenu_"],
.date-menu.active[id^="meChecklistDateMenu_"],
.date-menu.active[id^="meChecklistConvertDateMenu_"],
.status-menu.active[id^="statusMenu_"],
.status-menu.active[id^="subtaskStatusMenu_"],
.status-menu.active[id^="myWorkStatusMenu_"],
.team-picker.active[id^="subtaskTeamPicker_"],
.team-picker.active[id^="teamPicker_"],
.team-picker.active[id^="myWorkTeamPicker_"],
.team-picker.active[id^="meChecklistTeamPicker_"],
.team-picker.active[id^="meChecklistConvertTeamPicker_"],
.team-picker.active[id^="crmKontaktOwnerPicker_"],
.team-picker.active[id^="crmCompanyOwnerPicker_"],
.zeitraum-menu.active[id^="zeitraumMenu_"],
.date-menu.active[id^="internalTaskDateMenu_"],
.team-picker.active[id^="internalTaskTeamPicker_"],
.date-menu.active[id^="internalTaskSubtaskDateMenu_"],
.date-menu.active[id^="newInternalTaskSubtaskDateMenu_"],
.status-menu.active[id^="internalTaskStatusMenu_"],
.status-menu.active[id^="internalTaskSubtaskStatusMenu_"] {
    z-index: 1200000 !important;
}

.subtask-row .subtask-title-cell .row-thread-btn {
    flex: 0 0 auto;
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 13px;
}

.subtask-row .subtask-title-cell .row-thread-btn .row-thread-btn-icon {
    width: 15px;
    height: 15px;
}

.subtask-row .subtask-details-cell {
    color: #b8c7e4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
}

.subtask-row .board-attachment-cell {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subtask-row .board-attachment-cell .board-attachment-row {
    justify-content: flex-start;
}

.subtask-row .board-attachment-cell .board-attachment-main.is-empty {
    flex: 1 1 auto;
}

.subtask-row .board-attachment-cell:hover,
.subtask-row .board-attachment-cell.is-drag-over,
#internalTaskBoard .internal-subtask-row .board-attachment-cell:hover,
#internalTaskBoard .internal-subtask-row .board-attachment-cell.is-drag-over {
    background: rgba(126, 163, 255, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(126, 163, 255, 0.16);
}

.subtask-row.is-due-overdue .board-attachment-cell:hover,
.subtask-row.is-due-overdue .board-attachment-cell.is-drag-over,
.subtask-row.is-due-today .board-attachment-cell:hover,
.subtask-row.is-due-today .board-attachment-cell.is-drag-over,
.subtask-row.is-due-tomorrow .board-attachment-cell:hover,
.subtask-row.is-due-tomorrow .board-attachment-cell.is-drag-over,
.subtask-row.is-due-week .board-attachment-cell:hover,
.subtask-row.is-due-week .board-attachment-cell.is-drag-over,
.subtask-row.is-due-next-week .board-attachment-cell:hover,
.subtask-row.is-due-next-week .board-attachment-cell.is-drag-over {
    background: linear-gradient(rgba(126, 163, 255, 0.08), rgba(126, 163, 255, 0.08)), var(--subtask-due-fill) !important;
}

.subtask-row.is-due-overdue .my-work-team-cell:hover,
.subtask-row.is-due-overdue .my-work-team-cell:focus-within,
.subtask-row.is-due-today .my-work-team-cell:hover,
.subtask-row.is-due-today .my-work-team-cell:focus-within,
.subtask-row.is-due-tomorrow .my-work-team-cell:hover,
.subtask-row.is-due-tomorrow .my-work-team-cell:focus-within,
.subtask-row.is-due-week .my-work-team-cell:hover,
.subtask-row.is-due-week .my-work-team-cell:focus-within,
.subtask-row.is-due-next-week .my-work-team-cell:hover,
.subtask-row.is-due-next-week .my-work-team-cell:focus-within {
    background: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)), var(--subtask-due-fill) !important;
    box-shadow: inset 0 0 0 1px rgba(126, 163, 255, 0.2);
}

:root[data-theme="light"] .subtask-row .board-attachment-cell:hover,
:root[data-theme="light"] .subtask-row .board-attachment-cell.is-drag-over,
:root[data-theme="light"] #internalTaskBoard .internal-subtask-row .board-attachment-cell:hover,
:root[data-theme="light"] #internalTaskBoard .internal-subtask-row .board-attachment-cell.is-drag-over {
    background: rgba(66, 118, 213, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(66, 118, 213, 0.16);
}

:root[data-theme="light"] .subtask-row.is-due-overdue .board-attachment-cell:hover,
:root[data-theme="light"] .subtask-row.is-due-overdue .board-attachment-cell.is-drag-over,
:root[data-theme="light"] .subtask-row.is-due-today .board-attachment-cell:hover,
:root[data-theme="light"] .subtask-row.is-due-today .board-attachment-cell.is-drag-over,
:root[data-theme="light"] .subtask-row.is-due-tomorrow .board-attachment-cell:hover,
:root[data-theme="light"] .subtask-row.is-due-tomorrow .board-attachment-cell.is-drag-over,
:root[data-theme="light"] .subtask-row.is-due-week .board-attachment-cell:hover,
:root[data-theme="light"] .subtask-row.is-due-week .board-attachment-cell.is-drag-over,
:root[data-theme="light"] .subtask-row.is-due-next-week .board-attachment-cell:hover,
:root[data-theme="light"] .subtask-row.is-due-next-week .board-attachment-cell.is-drag-over {
    background: linear-gradient(rgba(66, 118, 213, 0.08), rgba(66, 118, 213, 0.08)), var(--subtask-due-fill) !important;
}

:root[data-theme="light"] .subtask-row.is-due-overdue .my-work-team-cell:hover,
:root[data-theme="light"] .subtask-row.is-due-overdue .my-work-team-cell:focus-within,
:root[data-theme="light"] .subtask-row.is-due-today .my-work-team-cell:hover,
:root[data-theme="light"] .subtask-row.is-due-today .my-work-team-cell:focus-within,
:root[data-theme="light"] .subtask-row.is-due-tomorrow .my-work-team-cell:hover,
:root[data-theme="light"] .subtask-row.is-due-tomorrow .my-work-team-cell:focus-within,
:root[data-theme="light"] .subtask-row.is-due-week .my-work-team-cell:hover,
:root[data-theme="light"] .subtask-row.is-due-week .my-work-team-cell:focus-within,
:root[data-theme="light"] .subtask-row.is-due-next-week .my-work-team-cell:hover,
:root[data-theme="light"] .subtask-row.is-due-next-week .my-work-team-cell:focus-within {
    background: linear-gradient(rgba(66, 118, 213, 0.08), rgba(66, 118, 213, 0.08)), var(--subtask-due-fill) !important;
    box-shadow: inset 0 0 0 1px rgba(66, 118, 213, 0.18);
}

.subtask-row .board-attachment-row {
    min-height: 34px;
}

.subtask-row .board-attachment-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    align-self: center;
}

.subtask-row .subtask-details-cell.is-empty {
    color: #8fa0c3;
    font-style: italic;
}

.subtask-actions {
    display: flex;
    gap: 6px;
}

.subtask-status-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --status-chip-width: 120px;
}

.subtask-status-trigger {
    width: var(--status-chip-width);
    min-width: var(--status-chip-width);
    max-width: var(--status-chip-width);
    justify-content: center;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    text-align: center;
}

.subtask-status-menu .status-grid {
    grid-template-columns: var(--status-chip-width);
}

.subtask-status-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    padding: 7px 8px;
    cursor: pointer;
}

.subtask-status-btn.todo {
    background: #8f95a8;
}

.subtask-status-btn.done {
    background: #5aa07f;
}

.subtask-bulk-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(45, 52, 84, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 8px;
}

:root[data-theme="light"] .subtask-bulk-bar {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(131, 149, 181, 0.22);
    color: #24364f;
    box-shadow: 0 8px 20px rgba(22, 40, 70, 0.08);
}

.mini-btn.danger {
    border-color: rgba(255, 116, 116, 0.5);
    color: #ffd5d5;
    background: rgba(255, 94, 94, 0.18);
}

:root[data-theme="light"] .mini-btn.danger {
    border-color: rgba(220, 104, 112, 0.28);
    color: #a3313d;
    background: rgba(230, 108, 119, 0.08);
}

:root[data-theme="light"] .mini-btn.danger:hover {
    border-color: rgba(220, 104, 112, 0.4);
    background: rgba(230, 108, 119, 0.13);
    color: #8f2531;
}

.mini-btn.is-disabled,
.mini-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ui-toast-host {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    z-index: 6005010;
    pointer-events: none;
}

.ui-toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(23, 28, 41, 0.94);
    color: #e6edfb;
    box-shadow: 0 14px 28px rgba(8, 12, 20, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: auto;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

.ui-toast-action {
    margin-left: auto;
    border: 0;
    background: rgba(255,255,255,0.08);
    color: inherit;
    border-radius: 8px;
    padding: 5px 8px;
    font: 600 12px/1 'Figtree', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.ui-toast-action:hover {
    background: rgba(255,255,255,0.14);
}

.ui-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ui-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
}

.ui-toast-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
    background: rgba(97, 203, 140, 0.18);
    color: #8ff0bd;
    border: 1px solid rgba(97, 203, 140, 0.26);
}

.ui-toast-text {
    font-size: 13px;
    line-height: 1.25;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    white-space: pre-wrap;
}

@keyframes notif-bell-attention {
    0%   { transform: scale(1) rotate(0deg); }
    15%  { transform: scale(1.2) rotate(-12deg); }
    30%  { transform: scale(1.15) rotate(10deg); }
    45%  { transform: scale(1.1) rotate(-8deg); }
    60%  { transform: scale(1.05) rotate(5deg); }
    75%  { transform: scale(1.02) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.user-notifications-trigger.is-attention {
    animation: notif-bell-attention 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.ui-toast.is-reminder {
    border-left: 3px solid rgba(240, 168, 0, 0.55);
}

.ui-toast.is-reminder .ui-toast-icon {
    background: rgba(240, 168, 0, 0.16);
    color: #f5c542;
    border-color: rgba(240, 168, 0, 0.30);
    font-weight: 800;
}

:root[data-theme="light"] .ui-toast {
    background: rgba(255, 255, 255, 0.96);
    color: #24364f;
    border-color: rgba(131, 149, 181, 0.2);
    box-shadow: 0 14px 28px rgba(22, 40, 70, 0.12);
}

:root[data-theme="light"] .ui-toast-icon {
    background: rgba(98, 183, 120, 0.14);
    color: #2f8a4a;
    border-color: rgba(98, 183, 120, 0.22);
}

:root[data-theme="light"] .ui-toast.is-reminder {
    border-left-color: rgba(185, 120, 0, 0.5);
}

:root[data-theme="light"] .ui-toast.is-reminder .ui-toast-icon {
    background: rgba(185, 120, 0, 0.12);
    color: #9a6200;
    border-color: rgba(185, 120, 0, 0.22);
}

:root[data-theme="light"] .ui-toast-action {
    background: rgba(22, 40, 70, 0.06);
    color: #2a4162;
}

:root[data-theme="light"] .ui-toast-action:hover {
    background: rgba(22, 40, 70, 0.1);
}

.bulk-hint {
    width: 100%;
    font-size: 12px;
    color: #cbd5f2;
    opacity: 0.92;
}

.subtask-add-row {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #9aa0a6;
    font-size: 12px;
    cursor: default;
    background: #252b45;
}

.subtask-add-row:hover {
    color: #fff;
    background: #252b45;
}

.subtask-row.subtask-add-row:hover > * {
    background: #252b45 !important;
}

.subtask-row.subtask-add-row.end-drop-active {
    border-top: 3px dashed #64b4ff !important;
    background: #252b45;
}

.subtask-row.subtask-add-row.end-drop-active > :first-child,
.subtask-row.subtask-add-row.end-drop-active > :nth-child(2),
.subtask-row.subtask-add-row.end-drop-active .subtask-add-row-label {
    background: #252b45;
}

.subtask-row.subtask-add-row:hover > :first-child,
.subtask-row.subtask-add-row:hover > :nth-child(2) {
    background: #252b45;
}

.subtask-add-row-label {
    width: 100%;
    flex: 1 1 auto;
    min-height: 32px;
    display: flex;
    align-items: center;
    color: inherit;
    padding: 0 12px 0 34px;
    box-sizing: border-box;
    cursor: pointer;
}

.subtask-empty-row {
    color: #9ea7bc;
    font-size: 12px;
    background: #252b45;
}

.subtask-empty-label {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
}

.subtask-add-row::before,
.subtask-empty-row::before {
    content: none;
}

.board-page input.monday-check,
.crm-contact-table input.monday-check {
    appearance: none;
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid rgba(174, 188, 220, 0.45);
    background: rgba(24, 31, 52, 0.72);
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.board-page input.monday-check:checked,
.crm-contact-table input.monday-check:checked {
    background-color: #2f80ff;
    border-color: #2f80ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.2l3 3.1L12.8 4.8' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

:root[data-theme="light"] .board-page input.monday-check:not(:checked),
:root[data-theme="light"] .crm-contact-table input.monday-check:not(:checked) {
    border-color: rgba(131, 149, 181, 0.46);
    background: #f7faff;
}

.group-drop-zone {
    border: 0;
    outline: 1px dashed transparent;
    outline-offset: -1px;
}

.group-drop-zone.drag-over {
    outline-color: rgba(0, 115, 234, 0.5);
    background: rgba(0, 115, 234, 0.05);
}

.board-add-row.end-drop-active {
    border-top: 3px dashed #64b4ff;
    background: #2b3048;
}

.board-add-row.end-drop-active .board-add-row-label {
    background: #2b3048;
}

@media (max-width: 1180px) {
    .board-toolbar {
        grid-template-columns: 1fr 1fr 1fr;
        padding-right: var(--user-quick-safe-space);
    }

    .board-toolbar.board-toolbar-rich {
        grid-template-columns: 1fr;
    }

    .board-toolbar-controls {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .board-kpis {
        grid-template-columns: 1fr 1fr;
    }
}

.crm-container { display: flex; flex: 1 1 0; min-height: 0; gap: 0; }
.crm-panel { overflow-y: auto; }
.crm-list-panel { flex: 0 0 400px; width: 400px; min-width: 400px; border-right: 1px solid var(--monday-border); background: rgba(0,0,0,0.12); }
.crm-detail-panel { flex-grow: 1; background: rgba(255,255,255,0.01); }
#companyDetails { padding: 20px; }
.crm-main-header {
    gap: 10px;
    flex-wrap: wrap;
}
.crm-primary-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(20, 26, 40, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    padding: 3px;
    width: fit-content;
    margin-bottom: 0;
    flex: 0 0 auto;
}

.crm-primary-mode-switch .secondary-btn {
    min-width: 0;
    padding: 5px 11px;
    font-size: 12px;
    line-height: 1.1;
    border-radius: 999px;
    border-color: transparent;
}

.crm-primary-mode-switch .secondary-btn.is-active {
    background: rgba(47, 111, 208, 0.24);
    border-color: rgba(122, 174, 255, 0.34);
    color: #e9f2ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.crm-company-list-header {
    justify-content: flex-start;
    gap: 10px;
    padding-right: 0;
}

.crm-company-list-toolbar {
    margin-bottom: 2px;
}

.crm-company-list-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.crm-mobile-company-back {
    display: none;
}

.crm-company-list-mobile-back {
    display: none;
}

.crm-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    width: min(560px, 100%);
}

.crm-search-row input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
}

#crmView .section-header {
    margin-bottom: 14px;
}

#crmView .section-header h1,
#crmView .section-header h2 {
    margin: 0;
}

.crm-company-summary-card {
    border: 1px solid rgba(160, 178, 218, 0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(30, 38, 58, 0.80), rgba(24, 32, 49, 0.82));
    padding: 14px;
    margin-bottom: 16px;
}

.crm-inline-feedback {
    display: none;
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(160, 178, 218, 0.18);
    background: rgba(24, 32, 49, 0.82);
    color: #d7e4fa;
    font-size: 12px;
    font-weight: 600;
}

.crm-inline-feedback.is-info,
.crm-inline-feedback.is-success,
.crm-inline-feedback.is-error {
    display: block;
}

.crm-inline-feedback.is-success {
    border-color: rgba(3, 127, 76, 0.28);
    background: rgba(3, 127, 76, 0.10);
    color: #a7e3c0;
}

.crm-inline-feedback.is-error {
    border-color: rgba(190, 76, 60, 0.28);
    background: rgba(190, 76, 60, 0.10);
    color: #f0b2a8;
}

.crm-inline-feedback.is-info {
    border-color: rgba(82, 117, 191, 0.28);
    background: rgba(82, 117, 191, 0.10);
    color: #c6d5ef;
}

.crm-company-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.crm-company-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.crm-mobile-company-context {
    display: none;
}

.crm-company-selected-inline {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: #dfe8f8;
}

.crm-company-selected-color {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    flex: 0 0 auto;
}

.crm-company-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.crm-company-title-row h1 {
    margin: 0;
    min-width: 0;
}

.crm-company-header-color-badge {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
    flex: 0 0 auto;
    cursor: pointer;
    padding: 0;
    appearance: none;
    background: transparent;
}

.crm-company-header-color-dots {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.crm-company-header-color-dot {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 999px;
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.16s ease;
}

.crm-company-header-color-dot:hover,
.crm-company-header-color-dot.active {
    transform: translateY(-1px) scale(1.06);
}

.crm-company-header-custom-dot {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.crm-company-header-color-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 120;
    width: 286px;
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #1e2638;
    box-shadow: 0 18px 36px rgba(8, 12, 20, 0.24);
}

.crm-company-header-main {
    position: relative;
}

.crm-company-header-manual-row {
    width: auto;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-company-header-manual-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crm-company-header-manual-actions .secondary-btn,
.crm-company-header-manual-actions .primary-btn {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 11px;
}

.crm-company-header-color-popover .color-dot {
    width: 28px;
    height: 28px;
}

.crm-company-header-color-hex {
    width: 110px;
    min-width: 110px;
    height: 28px;
    padding: 4px 8px;
    font-size: 11px;
}

.crm-company-summary-card p {
    margin: 6px 0;
    color: #c6d5ef;
}

.crm-company-summary-card strong {
    color: #e8f0ff;
}

.crm-company-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.crm-company-meta-row {
    margin: 0;
}

.crm-owner-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crm-owner-display-name {
    display: inline-block;
    vertical-align: middle;
}

.crm-company-notes {
    margin-top: 10px !important;
}

.crm-company-kpi-line {
    margin-top: 10px !important;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(67, 113, 204, 0.12);
}

.crm-company-action-row,
.crm-filter-row,
.crm-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-company-color-title {
    margin-top: 14px;
}

.crm-company-color-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crm-company-contacts-head {
    margin-top: 22px;
    margin-bottom: 12px !important;
}

.crm-company-contacts-head-actions {
    display: none;
}

.crm-global-contacts-head-actions {
    display: none;
}

/* Hero: 2-Zeilen-Leiste statt 2-Spalten-Grid */
.crm-company-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding: 7px 12px;
    border: 1px solid rgba(160, 178, 218, 0.18);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(30, 38, 58, 0.80), rgba(24, 32, 49, 0.82));
    box-shadow: 0 4px 14px rgba(8, 12, 20, 0.18);
}

.crm-company-summary-card,
.crm-company-notes-panel-card,
.crm-company-activity-card,
.crm-company-project-card {
    border: 1px solid rgba(160, 178, 218, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(30, 38, 58, 0.80), rgba(24, 32, 49, 0.82));
    box-shadow: 0 10px 28px rgba(8, 12, 20, 0.18);
}

/* hero-main: Zeile 1 — Topline + KPIs nebeneinander */
.crm-company-hero-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.crm-company-hero-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    flex-shrink: 0;
    padding-right: 10px;
    border-right: 1px solid rgba(160, 178, 218, 0.15);
}

.crm-company-owner-slot,
.crm-company-billing-slot {
    display: flex;
    align-items: center;
    gap: 5px;
}

.crm-company-hero-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7b91b4;
    white-space: nowrap;
}

.crm-company-kpi-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    flex: 1;
}

.crm-company-kpi-card {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border: none;
    background: none;
    flex: 1;
    min-width: 0;
    border-left: 1px solid rgba(160, 178, 218, 0.13);
}

.crm-company-kpi-label {
    font-size: 10px;
    color: #6a80a0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.crm-company-kpi-card strong {
    font-size: 12px;
    font-weight: 600;
    color: #c8d8f0;
    white-space: nowrap;
}

/* hero-side: Zeile 2 — alle Felder horizontal */
.crm-company-hero-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 4px 0 0 0;
    border-top: 1px solid rgba(160, 178, 218, 0.10);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.crm-company-side-grid {
    display: contents;
}

.crm-company-side-card {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px 0 0;
    margin-right: 10px;
    border: none;
    border-right: 1px solid rgba(160, 178, 218, 0.13);
    background: none;
    color: #a8bcda;
    font-size: 12px;
    min-height: 0;
    white-space: nowrap;
}

.crm-company-side-card:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.crm-company-detail-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 5px;
    border-radius: 14px;
    border: 1px solid rgba(160, 178, 218, 0.14);
    background: rgba(17, 23, 37, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.crm-company-detail-tabs .secondary-btn {
    position: relative;
    z-index: 1;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 10px;
    border-color: transparent;
    background: transparent;
    color: #b9c8e4;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15px;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.crm-company-detail-tabs .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #eef4ff;
}

.crm-company-detail-tabs .secondary-btn.active,
.crm-company-detail-tabs .secondary-btn.is-current-company-tab,
.crm-company-detail-tabs .secondary-btn[aria-selected="true"] {
    z-index: 3;
    background: linear-gradient(180deg, rgba(88, 145, 255, 0.34), rgba(54, 104, 191, 0.28)) !important;
    border-color: rgba(145, 186, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(21, 48, 96, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.crm-company-detail-tabs .secondary-btn.active::after,
.crm-company-detail-tabs .secondary-btn.is-current-company-tab::after,
.crm-company-detail-tabs .secondary-btn[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
}

.crm-company-tab-panel {
    margin-bottom: 14px;
}

.crm-company-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
    gap: 14px;
}

.crm-company-summary-card {
    padding: 16px;
    margin-bottom: 0;
}

.crm-company-summary-card h3,
.crm-company-notes-panel-card h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #eef4ff;
}

.crm-company-notes-panel-card {
    padding: 16px;
}

.crm-company-notes-panel-card p {
    margin: 0;
    color: #d3dff4;
    white-space: pre-wrap;
}

.crm-company-project-list {
    display: grid;
    gap: 12px;
}

.crm-company-project-card {
    padding: 15px 16px;
}

.crm-company-project-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.crm-company-project-card-top h3 {
    margin: 0 0 4px;
    font-size: 16px;
    color: #eef4ff;
}

.crm-company-project-card-top p {
    margin: 0;
    color: #98abc8;
}

.crm-company-project-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #c3d2ea;
}

.crm-company-stage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--crm-stage-color, #6f819d) 52%, transparent);
    background: color-mix(in srgb, var(--crm-stage-color, #6f819d) 16%, transparent);
    color: color-mix(in srgb, var(--crm-stage-color, #6f819d) 82%, white);
    font-size: 12px;
    font-weight: 700;
}

.crm-company-activity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.crm-company-activity-card {
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-company-activity-card span {
    font-size: 11px;
    color: #8fa4c3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.crm-company-activity-card strong {
    color: #eef4ff;
    font-size: 16px;
}

.crm-company-empty-state {
    min-height: 160px;
}

.crm-quick-contact-edit {
    border: 1px solid rgba(120, 154, 220, 0.28);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(23, 32, 52, 0.90), rgba(18, 25, 40, 0.92));
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 12px 28px rgba(8, 12, 20, 0.26);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.crm-quick-contact-edit.is-open {
    opacity: 1;
    transform: translateY(0);
}

.crm-quick-contact-edit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.crm-quick-contact-edit-meta {
    font-size: 12px;
    opacity: 0.78;
    margin-top: 3px;
}

.crm-quick-contact-edit-shortcuts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-top: 0;
}

.crm-quick-contact-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: start;
}

.crm-quick-contact-edit-actions {
    margin-top: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    position: sticky;
    bottom: 0;
    padding: 16px 20px 14px;
    margin-left: -20px;
    margin-right: -20px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(180deg, rgba(23, 30, 45, 0.92) 0%, rgba(23, 30, 45, 0.98) 40%, rgba(23, 30, 45, 1) 100%);
    backdrop-filter: blur(8px);
}

.crm-quick-overlay {
    z-index: 10080;
}

.crm-quick-contact-drawer {
    width: min(var(--app-dialog-panel-width), calc(100vw - 24px));
    max-width: min(var(--app-dialog-panel-width), calc(100vw - 24px));
    max-height: calc(100vh - 20px);
    grid-template-rows: auto 1fr;
    background:
        radial-gradient(circle at top right, rgba(100, 180, 255, 0.12), transparent 24%),
        linear-gradient(180deg, #202739, #181d2c);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.crm-quick-contact-drawer-body {
    padding: 18px 20px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    gap: 14px;
    background: transparent;
}

.crm-quick-contact-edit-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.crm-quick-contact-edit-grid label > span,
.crm-quick-contact-checkline > span {
    font-size: 11px;
    color: #b8c3dd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.crm-quick-contact-drawer .entity-thread-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
}

.crm-quick-contact-drawer .entity-thread-header-texts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.crm-quick-contact-drawer .entity-thread-title {
    color: #eef3ff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

.crm-quick-contact-drawer .entity-thread-subtitle {
    color: #9fb0cf;
    font-size: 12px;
    line-height: 1.45;
}

.crm-quick-contact-drawer .entity-thread-close-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #dbe4f6;
    font-size: 20px;
}

.crm-quick-contact-drawer .entity-thread-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.crm-quick-contact-edit-grid input,
.crm-quick-contact-edit-grid select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #23283a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ecf2ff;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
}

.crm-quick-contact-edit-grid input::placeholder {
    color: #9fb0cf;
}

.crm-quick-contact-edit-grid input:focus,
.crm-quick-contact-edit-grid select:focus {
    outline: none;
    border-color: rgba(100, 180, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(100, 180, 255, 0.14);
}

.crm-quick-contact-drawer .board-search-select-input {
    background: #23283a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ecf2ff !important;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
}

.crm-quick-contact-edit-grid input,
.crm-quick-contact-edit-grid select {
    min-height: 38px;
}

.crm-quick-col-span-2 {
    grid-column: span 2;
}

.crm-quick-contact-edit-grid input[type="date"] {
    padding-right: 34px;
}

#crmQuickNextIter {
    display: block;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    max-width: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

#crmQuickKontaktAm {
    display: block;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    max-width: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.crm-quick-contact-checkline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: var(--ui-surface-soft-03);
    width: fit-content;
    min-height: 44px;
}


.crm-quick-contact-color-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: var(--ui-surface-soft-03);
    align-items: center;
}

.crm-quick-contact-color-block > span {
    grid-column: 1 / -1;
    font-size: 11px;
    color: #b8c3dd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.crm-quick-contact-color-block .color-dots-container {
    margin-top: 0;
    min-width: 0;
}

.crm-quick-contact-color-block .color-picker-manual-row {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.crm-quick-details-toggle {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.crm-quick-details-toggle > summary {
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    color: #b8c3dd;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crm-quick-details-toggle > summary::-webkit-details-marker {
    display: none;
}

.crm-quick-details-toggle > summary::before {
    content: ">";
    opacity: 0.9;
    transform: translateY(-1px);
    transition: transform 0.14s ease;
}

.crm-quick-details-toggle[open] > summary {
    margin-bottom: 8px;
}

.crm-quick-details-toggle[open] > summary::before {
    transform: rotate(90deg) translateY(1px);
}

.crm-quick-details-grid {
    padding-top: 1px;
}

.crm-quick-contact-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    min-height: 36px;
    flex: 0 0 auto;
}

.crm-quick-company-btn {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-quick-contact-status-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.crm-quick-essentials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.crm-quick-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.crm-quick-contact-edit-shortcuts {
    margin-top: -2px;
}

.crm-quick-contact-edit-shortcuts .secondary-btn,
.crm-quick-contact-edit-actions .secondary-btn,
.crm-quick-contact-edit-actions .primary-btn,
.crm-quick-company-btn {
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
}

#companyColorValue {
    color: #b8c8ea;
    font-variant-numeric: tabular-nums;
}

#cList {
    display: block;
}

.crm-contact-table-wrap {
    overflow-x: auto;
}

.crm-contact-table {
    min-width: 760px;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.crm-contact-table col.crm-col-check {
    width: 56px;
}

.crm-contact-table col.crm-col-name {
    width: 180px;
}

.crm-contact-table col.crm-col-company {
    width: 230px;
}

.crm-contact-table col.crm-col-typ {
    width: 142px;
}

.crm-contact-table col.crm-col-owner {
    width: 112px;
}

.crm-contact-table col.crm-col-overdue {
    width: 92px;
}

.crm-contact-table col.crm-col-followup {
    width: 122px;
}

.crm-contact-table col.crm-col-tags {
    width: 112px;
}

.crm-contact-table col.crm-col-notes {
    width: 64px;
}

.crm-contact-table col.crm-col-actions {
    width: 238px;
}

.crm-contact-table col.crm-col-edit {
    width: 92px;
}

.crm-contact-table th,
.crm-contact-table td {
    vertical-align: middle;
    text-align: left;
}

.crm-contact-table thead {
    position: relative;
}

.crm-contact-header-row {
    background: linear-gradient(180deg, rgba(43, 50, 76, 0.92), rgba(39, 45, 71, 0.92));
}

.crm-contact-header-row th {
    position: relative;
    border-bottom: 1px solid rgba(156, 175, 209, 0.2);
    padding-top: 8px;
    padding-bottom: 8px;
}

.crm-contact-table thead th[data-col="check"] {
    width: 56px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.crm-contact-table .crm-contact-check {
    width: 56px;
    text-align: center;
    position: relative;
    border-right: 1px solid rgba(156, 175, 209, 0.12);
}

.crm-contact-table .crm-contact-check::before,
.crm-contact-table thead th[data-col="check"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--group-color, #5bd6a3);
    pointer-events: none;
}

.crm-contact-table thead th[data-col="check"]::before {
    display: none;
}

.crm-contact-table .crm-contact-check::before {
    background: var(--contact-color, var(--group-color, #5bd6a3));
}

.crm-contact-table .crm-contact-check input.monday-check {
    margin: 0;
    vertical-align: middle;
}

.crm-contact-table th[data-col="notes"],
.crm-contact-table th[data-col="typ"],
.crm-contact-table th[data-col="wv"],
.crm-contact-table th[data-col="followup"],
.crm-contact-table th[data-col="edit"],
.crm-contact-table th[data-col="actions"],
.crm-contact-table th[data-col="overdue"],
.crm-contact-table th[data-col="owner"],
.crm-contact-table td[data-col="typ"],
.crm-contact-table td[data-col="notes"],
.crm-contact-table td[data-col="followup"],
.crm-contact-table td[data-col="edit"],
.crm-contact-table td[data-col="actions"],
.crm-contact-table td[data-col="overdue"],
.crm-contact-table td[data-col="owner"] {
    text-align: center;
}

.crm-contact-table th[data-col="typ"] .crm-header-sort-btn,
.crm-contact-table th[data-col="wv"] .crm-header-sort-btn,
.crm-contact-table th[data-col="followup"] .crm-header-sort-btn,
.crm-contact-table th[data-col="edit"] .crm-header-sort-btn {
    justify-content: center;
    width: 100%;
}

.crm-contact-table .crm-contact-typ .crm-contact-typ-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.crm-contact-table .crm-contact-typ .crm-contact-typ-trigger {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.crm-contact-table .crm-contact-tags {
    min-width: 0;
}

.crm-contact-table .crm-contact-row td {
    transition: box-shadow 0.45s ease;
}

.crm-contact-row.crm-contact-jump-highlight td {
    box-shadow: inset 0 2px 0 rgba(75, 150, 255, 0.95), inset 0 -2px 0 rgba(75, 150, 255, 0.95);
}

.crm-contact-row.crm-contact-jump-highlight td:first-child {
    box-shadow:
        inset 2px 0 0 rgba(75, 150, 255, 0.95),
        inset 0 2px 0 rgba(75, 150, 255, 0.95),
        inset 0 -2px 0 rgba(75, 150, 255, 0.95);
}

.crm-contact-row.crm-contact-jump-highlight td:last-child {
    box-shadow:
        inset -2px 0 0 rgba(75, 150, 255, 0.95),
        inset 0 2px 0 rgba(75, 150, 255, 0.95),
        inset 0 -2px 0 rgba(75, 150, 255, 0.95);
}

.crm-contact-table .crm-contact-notes {
    text-align: center;
}

.crm-contact-table .crm-contact-actions,
.crm-contact-table .crm-contact-edit {
    text-align: center;
}

.crm-contact-table .crm-contact-owner {
    text-align: center;
}

.crm-contact-table .crm-contact-owner .crm-contact-owner-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: auto;
    max-width: 100%;
}

.crm-contact-table .crm-contact-owner .team-avatar,
.crm-contact-table .crm-contact-owner .team-pill {
    margin-left: auto;
    margin-right: auto;
}

.crm-contact-table .crm-contact-actions {
    white-space: nowrap;
}

.crm-contact-table .crm-contact-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-contact-table .crm-contact-company {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-contact-table .crm-contact-typ,
.crm-contact-table .crm-contact-overdue,
.crm-contact-table .crm-contact-followup {
    min-width: 0;
}

.crm-contact-table .crm-contact-typ-cell {
    --status-chip-width: 150px;
}

.crm-contact-table .crm-contact-typ-trigger {
    width: var(--status-chip-width);
    min-width: var(--status-chip-width);
    max-width: var(--status-chip-width);
    justify-content: center;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
}

.crm-contact-table .crm-contact-typ-trigger:disabled {
    opacity: 0.7;
    cursor: wait;
}

.crm-contact-typ-menu {
    z-index: 4500000;
}

.crm-contact-typ-grid {
    grid-template-columns: var(--status-chip-width);
}

.crm-contact-typ-option {
    width: var(--status-chip-width);
    text-align: center;
}

.crm-contact-table .crm-contact-followup .date-cell {
    width: 145px;
    min-width: 145px;
    max-width: 145px;
}

.crm-contact-table .crm-contact-followup .date-trigger {
    width: 145px;
    min-width: 145px;
    max-width: 145px;
}

.crm-contact-table .crm-contact-actions {
    width: 380px;
    min-width: 380px;
    white-space: nowrap;
}

.crm-contact-thread-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
}

.crm-contact-thread-btn .row-thread-btn-icon {
    width: 15px;
    height: 15px;
}

.crm-contact-actions .secondary-btn {
    margin: 0 3px 4px 0;
    white-space: nowrap;
}

.crm-contact-row {
    cursor: default;
}

.crm-contact-row:hover td {
    background: rgba(70, 85, 124, 0.24);
}

.crm-contact-row.is-selected td {
    background: rgba(91, 214, 163, 0.09) !important;
}

.crm-contact-overdue.is-overdue {
    color: #ff9b80;
    font-weight: 700;
}

.crm-view-toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin: 0;
    padding: 5px;
    border-radius: 14px;
    border: 1px solid rgba(160, 178, 218, 0.14);
    background: rgba(17, 23, 37, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.crm-contacts-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 10px;
}

.crm-contacts-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.crm-view-toggle-row .secondary-btn {
    position: relative;
    z-index: 1;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 10px;
    border-color: transparent;
    background: transparent;
    color: #b9c8e4;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15px;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.crm-view-toggle-row .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #eef4ff;
}

.crm-view-toggle-row .secondary-btn.active,
.crm-view-toggle-row .secondary-btn[aria-selected="true"] {
    z-index: 3;
    background: linear-gradient(180deg, rgba(88, 145, 255, 0.34), rgba(54, 104, 191, 0.28)) !important;
    border-color: rgba(145, 186, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(21, 48, 96, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.crm-view-toggle-row .secondary-btn.active::after,
.crm-view-toggle-row .secondary-btn[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
}

.crm-contact-board {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    align-items: stretch;
    padding-bottom: 4px;
}

.crm-contact-board-column {
    flex: 1 1 220px;
    min-width: 220px;
    border: 1px solid rgba(156, 175, 209, 0.2);
    border-radius: 0 14px 14px 0;
    background: rgba(24, 30, 43, 0.94);
    overflow: hidden;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.crm-contact-board-column.is-collapsed {
    flex: 0 0 50px;
    min-width: 50px;
    border-radius: 0 14px 14px 0;
    background: rgba(28, 34, 48, 0.96);
    opacity: 1;
}

.crm-contact-board-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(194, 208, 236, 0.14);
    background: rgba(82, 93, 111, 0.98);
    position: relative;
}

.crm-contact-board-column-head::before,
.crm-contact-board-column-head::after {
    content: none;
}

.crm-contact-board-column-head-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.crm-contact-board-column-title {
    font-size: 12px;
    font-weight: 700;
    color: #f2f5fb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-contact-board-column-count {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.crm-contact-board-column-body {
    display: grid;
    gap: 8px;
    padding: 10px;
    align-content: start;
    flex: 1 1 auto;
    min-height: 260px;
    position: relative;
}

.crm-contact-board-column-toggle {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.14);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    flex: 0 0 auto;
}

.crm-contact-board-column-toggle::before {
    content: '\2039';
    font-size: 14px;
    line-height: 1;
}

.crm-contact-board-column.is-collapsed .crm-contact-board-column-toggle::before {
    content: '\203A';
}

.crm-contact-board-column.is-collapsed .crm-contact-board-column-head {
    min-height: 100%;
    writing-mode: initial;
    text-orientation: initial;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 5px 7px;
    border-bottom: none;
}

.crm-contact-board-column.is-collapsed .crm-contact-board-column-head-main {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    order: 2;
}

.crm-contact-board-column.is-collapsed .crm-contact-board-column-title,
.crm-contact-board-column.is-collapsed .crm-contact-board-column-count {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.crm-contact-board-column.is-collapsed .crm-contact-board-column-title {
    white-space: normal;
    text-align: center;
    line-height: 1.05;
    max-height: 168px;
    font-size: 11px;
    font-weight: 700;
}

.crm-contact-board-column.is-collapsed .crm-contact-board-column-count {
    min-width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.18);
}

.crm-contact-board-column.is-collapsed .crm-contact-board-column-body {
    display: none;
}

.crm-contact-board-column.is-collapsed .crm-contact-board-column-head::before,
.crm-contact-board-column.is-collapsed .crm-contact-board-column-head::after {
    display: none;
}

.crm-contact-board-column.is-collapsed .crm-contact-board-column-toggle {
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.28);
    order: 1;
    margin-top: 0;
}

.crm-contact-board-empty {
    border: 2px dashed rgba(156, 175, 209, 0.32);
    border-radius: 12px;
    padding: 18px 14px;
    color: rgba(225, 233, 255, 0.74);
    font-size: 12px;
    text-align: center;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-contact-board-column:not(.is-collapsed) .crm-contact-board-empty {
    min-height: 240px;
}

.crm-contact-board-card {
    border: 1px solid rgba(184, 199, 227, 0.18);
    border-left: 3px solid var(--crm-col-accent, #7fb0e6);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    padding: 8px 9px;
    display: grid;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    cursor: grab;
}

.crm-contact-board-card.is-selected {
    box-shadow: 0 0 0 1px rgba(91, 214, 163, 0.35), 0 12px 24px rgba(0, 0, 0, 0.16);
}

.crm-contact-board-card.is-dragging {
    opacity: 0.6;
    cursor: grabbing;
}

.crm-contact-board-column.is-drop-target .crm-contact-board-column-body,
.crm-contact-board-column-body.is-drop-target {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
    border-radius: 12px;
}

.crm-contact-board-column.is-drop-target {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.crm-contact-board-column.is-drop-target .crm-contact-board-column-body::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px dashed rgba(255, 255, 255, 0.46);
    border-radius: 12px;
    pointer-events: none;
    z-index: 2;
}

.crm-contact-board-column.is-drop-target .crm-contact-board-card {
    opacity: 0.3;
    transform: scale(0.985);
}

.crm-contact-board-column.is-drop-target .crm-contact-board-empty,
.crm-contact-board-column-body.is-drop-target .crm-contact-board-empty {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.04);
}

.crm-contact-board-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.crm-contact-board-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.crm-contact-board-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.crm-contact-board-card-open {
    border: 1px solid rgba(194, 208, 236, 0.22);
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #edf3ff;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 700;
}

.crm-contact-board-card-actions .crm-contact-thread-btn {
    width: 26px;
    min-width: 26px;
    height: 26px;
}

.crm-contact-board-card-main {
    display: grid;
    gap: 2px;
    text-align: left;
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.crm-contact-board-card-main strong {
    font-size: 13px;
    font-weight: 700;
    color: #f4f7fd;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.crm-contact-board-card-main span {
    font-size: 10px;
    color: rgba(222, 230, 243, 0.9);
    line-height: 1.2;
}

.crm-contact-board-card-meta {
    display: grid;
    gap: 3px;
}

.crm-contact-board-chip-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.crm-contact-board-date-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.crm-contact-board-date-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(194, 208, 236, 0.2);
    background: rgba(255,255,255,0.08);
    color: #eef3fb;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(194, 208, 236, 0.2);
}

.crm-contact-board-overdue {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(233, 240, 250, 0.9);
    font-size: 8px;
    font-weight: 700;
}

.crm-contact-board-overdue.is-overdue {
    background: rgba(255, 122, 89, 0.14);
    color: #ff9b80;
}

.crm-contact-board-owner {
    margin-left: auto;
    flex: 0 0 auto;
}

.crm-contact-board-owner .crm-owner-cell {
    justify-content: flex-end;
}

.crm-contact-board-owner .team-cell {
    background: transparent;
    border: none;
    padding: 0;
    min-height: auto;
}

.crm-contact-board-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.crm-contact-board-dnd-active .crm-contact-board-column-body {
    transition: none;
}

:root[data-theme="light"] .crm-panel {
    background: #f6f9fe;
}

:root[data-theme="light"] .crm-list-panel {
    background: #edf3fb;
    border-right-color: #d7e1ef;
}

:root[data-theme="light"] .crm-detail-panel {
    background: #f9fbff;
}

:root[data-theme="light"] .crm-primary-mode-switch {
    background: #f3f7fd;
    border-color: #dde7f3;
}

:root[data-theme="light"] .crm-view-toggle-row {
    border-color: rgba(160, 178, 218, 0.16);
    background: rgba(243, 247, 252, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

:root[data-theme="light"] .crm-view-toggle-row .secondary-btn {
    color: #667d9d;
}

:root[data-theme="light"] .crm-view-toggle-row .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.74);
    color: #324866;
}

:root[data-theme="light"] .crm-view-toggle-row .secondary-btn.active,
:root[data-theme="light"] .crm-view-toggle-row .secondary-btn[aria-selected="true"] {
    background: linear-gradient(180deg, #ffffff, #f3f7ff) !important;
    border-color: rgba(131, 149, 181, 0.22) !important;
    color: #244266 !important;
    box-shadow: 0 8px 18px rgba(22, 40, 70, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

:root[data-theme="light"] .crm-view-toggle-row .secondary-btn.active::after,
:root[data-theme="light"] .crm-view-toggle-row .secondary-btn[aria-selected="true"]::after {
    background: rgba(48, 81, 138, 0.82);
}

:root[data-theme="light"] .crm-primary-mode-switch .secondary-btn.is-active {
    background: #e8f0fe;
    border-color: #c7d9f6;
    color: #1f3a62;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

:root[data-theme="light"] .crm-company-detail-tabs {
    border-color: rgba(28, 45, 75, 0.12);
    background: rgba(244, 247, 252, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

:root[data-theme="light"] .crm-company-detail-tabs .secondary-btn {
    color: #5a708f;
}

:root[data-theme="light"] .crm-company-detail-tabs .secondary-btn:hover {
    background: rgba(74, 121, 211, 0.08);
    color: #234062;
}

:root[data-theme="light"] .crm-company-detail-tabs .secondary-btn.active,
:root[data-theme="light"] .crm-company-detail-tabs .secondary-btn.is-current-company-tab,
:root[data-theme="light"] .crm-company-detail-tabs .secondary-btn[aria-selected="true"] {
    background: linear-gradient(180deg, rgba(74, 121, 211, 0.24), rgba(74, 121, 211, 0.15)) !important;
    border-color: rgba(74, 121, 211, 0.34) !important;
    color: #173150 !important;
    box-shadow: 0 8px 16px rgba(24, 52, 98, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

:root[data-theme="light"] .crm-company-detail-tabs .secondary-btn.active::after,
:root[data-theme="light"] .crm-company-detail-tabs .secondary-btn.is-current-company-tab::after,
:root[data-theme="light"] .crm-company-detail-tabs .secondary-btn[aria-selected="true"]::after {
    background: rgba(23, 49, 80, 0.86);
}

:root[data-theme="light"] .crm-company-kpi-line {
    background: #f0f6ff;
}

:root[data-theme="light"] .crm-quick-contact-edit {
    background: linear-gradient(180deg, #fcfdff, #f6faff);
    border-color: #d7e4f5;
    box-shadow: 0 10px 24px rgba(21, 37, 64, 0.10);
}

:root[data-theme="light"] .crm-quick-contact-edit-grid label > span,
:root[data-theme="light"] .crm-quick-contact-checkline > span {
    color: #667d9d;
}

:root[data-theme="light"] .crm-quick-contact-edit-grid label,
:root[data-theme="light"] .crm-quick-contact-checkline,
:root[data-theme="light"] .crm-quick-contact-color-block,
:root[data-theme="light"] .crm-quick-details-toggle {
    border-color: transparent;
    background: transparent;
}

:root[data-theme="light"] .crm-quick-contact-color-block > span {
    color: #667d9d;
}

:root[data-theme="light"] .crm-quick-details-toggle > summary {
    color: #667d9d;
}

:root[data-theme="light"] .crm-quick-details-toggle > summary::before {
    opacity: 0.72;
}

:root[data-theme="light"] .crm-quick-contact-header-bar {
    border-bottom-color: rgba(131, 149, 181, 0.24);
}

:root[data-theme="light"] .crm-quick-contact-edit-actions {
    background: linear-gradient(180deg, rgba(249, 251, 255, 0.92) 0%, rgba(249, 251, 255, 0.98) 38%, rgba(249, 251, 255, 1) 100%);
}

:root[data-theme="light"] .crm-quick-contact-drawer {
    background:
        radial-gradient(circle at top right, rgba(64, 122, 214, 0.08), transparent 24%),
        linear-gradient(180deg, #fdfefe, #f4f8fd);
    border-color: rgba(131, 149, 181, 0.24);
    box-shadow: 0 24px 60px rgba(41, 58, 89, 0.18);
}

:root[data-theme="light"] .crm-quick-contact-drawer .entity-thread-title {
    color: #17243a;
}

:root[data-theme="light"] .crm-quick-contact-drawer .entity-thread-subtitle {
    color: #6a7f9d;
}

:root[data-theme="light"] .crm-quick-contact-checkline,
:root[data-theme="light"] .crm-quick-contact-color-block {
    background: rgba(24, 44, 77, 0.04);
    border-color: rgba(24, 44, 77, 0.10);
}

:root[data-theme="light"] .crm-quick-contact-edit-grid input,
:root[data-theme="light"] .crm-quick-contact-edit-grid select,
:root[data-theme="light"] .crm-quick-contact-drawer .board-search-select-input {
    background: #ffffff !important;
    border-color: rgba(131, 149, 181, 0.22) !important;
    color: #1f3046 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .crm-quick-contact-edit-grid input::placeholder,
:root[data-theme="light"] .crm-quick-contact-drawer .board-search-select-input::placeholder {
    color: #8da0bb;
}

:root[data-theme="light"] .crm-quick-contact-edit-grid input:focus,
:root[data-theme="light"] .crm-quick-contact-edit-grid select:focus,
:root[data-theme="light"] .crm-quick-contact-drawer .board-search-select-input:focus {
    border-color: rgba(64, 122, 214, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(64, 122, 214, 0.12);
}

:root[data-theme="light"] .crm-company-summary-card {
    background: #ffffff !important;
    border-color: rgba(22, 37, 60, 0.10);
    box-shadow: 0 10px 24px rgba(17, 31, 56, 0.06);
}

:root[data-theme="light"] .crm-company-hero {
    background: #ffffff;
    border-color: rgba(22, 37, 60, 0.10);
    box-shadow: 0 4px 12px rgba(17, 31, 56, 0.06);
}

:root[data-theme="light"] .crm-company-summary-card,
:root[data-theme="light"] .crm-company-notes-panel-card,
:root[data-theme="light"] .crm-company-activity-card,
:root[data-theme="light"] .crm-company-project-card {
    background: #ffffff;
    border-color: rgba(22, 37, 60, 0.10);
    box-shadow: 0 10px 24px rgba(17, 31, 56, 0.06);
}

:root[data-theme="light"] .crm-company-kpi-label {
    color: #8497b5;
}
:root[data-theme="light"] .crm-company-kpi-card strong {
    color: #2e4060;
}
:root[data-theme="light"] .crm-company-side-card {
    color: #4a607f;
}
:root[data-theme="light"] .crm-company-kpi-card,
:root[data-theme="light"] .crm-company-side-card {
    border-color: rgba(100, 130, 175, 0.18);
}

:root[data-theme="light"] .crm-company-kpi-card strong,
:root[data-theme="light"] .crm-company-summary-card h3,
:root[data-theme="light"] .crm-company-notes-panel-card h3,
:root[data-theme="light"] .crm-company-project-card-top h3,
:root[data-theme="light"] .crm-company-activity-card strong {
    color: #1f2e45;
}

:root[data-theme="light"] .crm-company-hero-label,
:root[data-theme="light"] .crm-company-kpi-label,
:root[data-theme="light"] .crm-company-activity-card span {
    color: #6c7e99;
}

:root[data-theme="light"] .crm-company-project-card-top p,
:root[data-theme="light"] .crm-company-project-card-meta,
:root[data-theme="light"] .crm-company-notes-panel-card p {
    color: #556985;
}

:root[data-theme="light"] .crm-contact-board-column {
    border-color: rgba(129, 149, 184, 0.24);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246, 248, 251, 0.98));
}

:root[data-theme="light"] .crm-contact-board-column.is-collapsed {
    background: linear-gradient(180deg, rgba(243, 246, 250, 0.98), rgba(233, 238, 245, 0.98));
    opacity: 1;
}

:root[data-theme="light"] .crm-contact-board-column-head {
    background: #4a5568;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .crm-contact-board-column-head::before,
:root[data-theme="light"] .crm-contact-board-column-head::after {
    content: none;
}

:root[data-theme="light"] .crm-contact-board-card {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(129, 149, 184, 0.16);
    box-shadow: 0 8px 20px rgba(36, 56, 92, 0.08);
}

:root[data-theme="light"] .crm-contact-board-card-main strong {
    color: #243651;
    font-weight: 700;
}

:root[data-theme="light"] .crm-contact-board-card-main span,
:root[data-theme="light"] .crm-contact-board-overdue,
:root[data-theme="light"] .crm-contact-board-empty {
    color: #5f7390;
}

:root[data-theme="light"] .crm-contact-board-date-chip {
    background: #f8fbff;
    border-color: rgba(129, 149, 184, 0.18);
    color: #40566f;
}

:root[data-theme="light"] .crm-contact-board-overdue {
    background: #edf2f8;
    color: #60748f;
}

:root[data-theme="light"] .crm-contact-board-card-open {
    background: #f8fbff;
    border-color: rgba(129, 149, 184, 0.18);
    color: #7286a3;
}

:root[data-theme="light"] .crm-contact-board-column-count,
:root[data-theme="light"] .crm-contact-board-column-toggle {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.16);
}

:root[data-theme="light"] .crm-contact-board-column.is-drop-target {
    box-shadow: 0 0 0 2px rgba(78, 105, 153, 0.18);
}

:root[data-theme="light"] .crm-contact-board-column.is-drop-target .crm-contact-board-column-body::before {
    border-color: rgba(78, 105, 153, 0.45);
}

:root[data-theme="light"] .crm-inline-feedback {
    border-color: rgba(22, 37, 60, 0.10);
    background: #ffffff;
    color: #445a82;
}

:root[data-theme="light"] .crm-inline-feedback.is-success {
    border-color: rgba(3, 127, 76, 0.22);
    background: rgba(3, 127, 76, 0.08);
    color: #236948;
}

:root[data-theme="light"] .crm-inline-feedback.is-error {
    border-color: rgba(190, 76, 60, 0.22);
    background: rgba(190, 76, 60, 0.08);
    color: #8f4134;
}

:root[data-theme="light"] .crm-inline-feedback.is-info {
    border-color: rgba(82, 117, 191, 0.22);
    background: rgba(82, 117, 191, 0.08);
    color: #4e6999;
}

:root[data-theme="light"] .crm-company-summary-card p {
    color: #3f526d;
}

:root[data-theme="light"] .crm-company-summary-card strong {
    color: #1f2e45;
}

:root[data-theme="light"] .crm-company-contacts-head h1 {
    color: #1f2e45;
}

:root[data-theme="light"] #companyColorValue {
    color: #5f738f;
}

:root[data-theme="light"] #companyColorBox {
    border-color: rgba(90, 111, 147, 0.24) !important;
}

:root[data-theme="light"] .crm-company-header-color-badge,
:root[data-theme="light"] .crm-company-header-custom-dot {
    border-color: rgba(90, 111, 147, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

:root[data-theme="light"] .crm-company-header-color-popover {
    border-color: rgba(90, 111, 147, 0.16);
    background: #f8fbff;
    box-shadow: 0 16px 34px rgba(60, 88, 132, 0.14);
}

:root[data-theme="light"] .crm-contact-header-row {
    background: linear-gradient(180deg, #f4f8ff, #eef4ff);
}

:root[data-theme="light"] .crm-contact-table thead th[data-col="check"]::before {
    background: var(--group-color, #5bd6a3);
}

:root[data-theme="light"] .crm-contact-table .crm-contact-check::before {
    background: var(--contact-color, var(--group-color, #5bd6a3));
}

:root[data-theme="light"] .crm-contact-table .crm-contact-check {
    border-right-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .crm-contact-row:hover td {
    background: rgba(231, 239, 255, 0.56);
}

:root[data-theme="light"] .crm-contact-row.is-selected td {
    background: rgba(91, 214, 163, 0.14) !important;
}

.u-item {
    padding: 7px 12px;
    margin: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.03);
}

.u-item > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.u-item .my-work-note-tag {
    margin-left: auto;
}
.u-item:hover {
    background: rgba(72, 115, 193, 0.14);
    border-color: rgba(113, 144, 207, 0.16);
}
.u-item.active {
    background: var(--monday-blue);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

:root[data-theme="light"] .u-item {
    color: #22324a;
    background: #f7faff;
    border-color: #e2eaf5;
}

:root[data-theme="light"] .u-item:hover {
    background: #eef4fd;
    border-color: #d8e2f0;
}

:root[data-theme="light"] .u-item.active {
    background: #dce9ff;
    color: #173150;
    border-color: transparent;
}

:root[data-theme="light"] .u-item.active > span,
:root[data-theme="light"] .u-item.active .my-work-note-tag,
:root[data-theme="light"] .u-item.active .u-billing-flag {
    color: #173150 !important;
}

:root[data-theme="light"] .u-item.contact-entry {
    background: #ffffff;
    border: 1px solid #e2eaf5;
    box-shadow: 0 4px 12px rgba(17, 31, 56, 0.04);
}

:root[data-theme="light"] .u-item.contact-entry:hover {
    background: #f8fbff;
    border-color: #d5e0ef;
}

@media (max-width: 1100px) {
    .crm-primary-mode-switch {
        width: 100%;
    }
    .crm-primary-mode-switch .secondary-btn {
        flex: 1 1 0;
        min-width: 0;
    }
    .crm-company-hero,
    .crm-company-summary-grid,
    .crm-company-activity-grid,
    .crm-company-kpi-grid,
    .crm-company-side-grid {
        grid-template-columns: 1fr;
    }
    .crm-company-meta-grid {
        grid-template-columns: 1fr;
    }
    .crm-quick-contact-edit-grid {
        grid-template-columns: 1fr;
    }
    .crm-quick-contact-edit-head {
        flex-direction: column;
        align-items: stretch;
    }
    .crm-quick-col-span-2 {
        grid-column: span 1;
    }
    .crm-quick-contact-drawer {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
    }
    .crm-quick-contact-drawer-body {
        padding: 10px;
        gap: 10px;
    }
    .crm-quick-contact-header-bar {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }
    .crm-quick-contact-status-badges {
        justify-content: flex-start;
    }
    .crm-company-header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 860px) {
    .crm-quick-essentials-grid,
    .crm-quick-details-grid,
    .crm-quick-contact-edit-grid {
        grid-template-columns: 1fr;
    }
    .crm-quick-col-span-2 {
        grid-column: span 1;
    }
    .crm-quick-contact-color-block {
        grid-template-columns: 1fr;
    }
    .crm-quick-contact-color-block .color-picker-manual-row {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    #crmQuickNextIter {
        width: 100% !important;
        inline-size: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-inline-size: 0 !important;
    }

    #crmQuickKontaktAm {
        width: 100% !important;
        inline-size: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-inline-size: 0 !important;
    }
}

/* FARB-PICKER (RUND) */
.color-dots-container { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.color-dot {
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, filter 0.2s ease; position: relative;
}
.color-dot.is-unavailable {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.2);
}
.color-dot.is-unavailable::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.22);
    transform: rotate(-45deg);
    border-left-color: transparent;
    border-right-color: transparent;
}
.color-dot.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 10px rgba(255,255,255,0.3); }

:root[data-theme="light"] .color-dot.active {
    border-color: #1f2b3e;
    box-shadow: 0 0 0 2px rgba(31, 43, 62, 0.18);
}

:root[data-theme="light"] .color-dot.is-unavailable::after {
    border-top-color: rgba(26, 39, 60, 0.85);
    border-bottom-color: rgba(26, 39, 60, 0.85);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.8);
}

/* Runder Custom Picker */
.custom-color-dot {
    display: flex !important; align-items: center; justify-content: center;
    background: #333; border: 2px dashed #555; overflow: hidden;
}
.custom-color-dot input[type="color"] { position: absolute; width: 150%; height: 150%; cursor: pointer; opacity: 0; }
.plus-icon { font-size: 20px; font-weight: bold; color: #777; pointer-events: none; }

.color-picker-manual-row {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.color-hex-input {
    width: 140px;
    min-width: 120px;
    height: 32px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: #e9f1ff;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
}

:root[data-theme="light"] .color-hex-input {
    border-color: #d7e1ef;
    background: #fff;
    color: #1f2e45;
}

/* FORMS & BUTTONS */
.grid-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
input, select, textarea {
    background: var(--input-bg); border: 1px solid var(--monday-border);
    color: var(--input-text); padding: 10px; border-radius: 4px; font-size: 14px;
}
textarea { grid-column: span 2; height: 80px; }

#entryModal select,
#entryModal option {
    background: var(--input-bg);
    color: var(--input-text);
}

#entryModal .modal-search-select-input {
    width: 100%;
    box-sizing: border-box;
}

.mobile-datalist-fallback {
    position: fixed;
    z-index: 2200;
    border-radius: 12px;
    border: 1px solid rgba(143, 169, 219, 0.34);
    background: rgba(16, 22, 36, 0.98);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.42);
    overflow: auto;
    display: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-datalist-fallback.active {
    display: block;
    z-index: 5005000 !important;
}

.mobile-select-fallback {
    position: fixed;
    z-index: 2200;
    border-radius: 12px;
    border: 1px solid rgba(143, 169, 219, 0.34);
    background: rgba(16, 22, 36, 0.98);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.42);
    overflow: auto;
    display: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-select-fallback.active {
    display: block;
    z-index: 5005000 !important;
}

.mobile-datalist-option {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(124, 146, 187, 0.2);
    background: transparent;
    color: #e8efff;
    text-align: left;
    padding: 10px 12px;
    display: grid;
    gap: 2px;
    font-size: 14px;
}

.mobile-datalist-option:last-child {
    border-bottom: 0;
}

.mobile-select-option {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(124, 146, 187, 0.2);
    background: transparent;
    color: #e8efff;
    text-align: left;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
}

.mobile-select-option:last-child {
    border-bottom: 0;
}

.mobile-datalist-option:active,
.mobile-datalist-option:hover {
    background: rgba(74, 122, 214, 0.2);
}

.mobile-select-option:active,
.mobile-select-option:hover {
    background: rgba(74, 122, 214, 0.2);
}

.mobile-select-option.active {
    background: rgba(74, 122, 214, 0.22);
}

.mobile-select-option:disabled {
    opacity: 0.45;
}

.mobile-datalist-value {
    font-weight: 600;
    line-height: 1.25;
}

.mobile-select-value {
    font-weight: 600;
    line-height: 1.25;
}

.mobile-datalist-meta {
    color: #9db3da;
    font-size: 12px;
    line-height: 1.2;
}

.mobile-datalist-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #97abcf;
}

.mobile-select-group {
    padding: 7px 12px 5px;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9db3da;
    border-bottom: 1px solid rgba(124, 146, 187, 0.2);
}

.mobile-select-check {
    font-size: 13px;
    font-weight: 700;
    color: #9ec2ff;
}

:root[data-theme="light"] .mobile-datalist-fallback {
    border-color: rgba(107, 132, 173, 0.3);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 24px rgba(20, 36, 62, 0.18);
}

:root[data-theme="light"] .mobile-select-fallback {
    border-color: rgba(107, 132, 173, 0.3);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 24px rgba(20, 36, 62, 0.18);
}

:root[data-theme="light"] .mobile-datalist-option {
    border-bottom-color: rgba(127, 149, 183, 0.2);
    color: #223550;
}

:root[data-theme="light"] .mobile-select-option {
    border-bottom-color: rgba(127, 149, 183, 0.2);
    color: #223550;
}

:root[data-theme="light"] .mobile-datalist-option:active,
:root[data-theme="light"] .mobile-datalist-option:hover {
    background: rgba(82, 126, 202, 0.12);
}

:root[data-theme="light"] .mobile-select-option:active,
:root[data-theme="light"] .mobile-select-option:hover,
:root[data-theme="light"] .mobile-select-option.active {
    background: rgba(82, 126, 202, 0.12);
}

:root[data-theme="light"] .mobile-datalist-meta {
    color: #6781a7;
}

:root[data-theme="light"] .mobile-datalist-empty {
    color: #5f769a;
}

:root[data-theme="light"] .mobile-select-group {
    color: #6781a7;
    border-bottom-color: rgba(127, 149, 183, 0.2);
}

:root[data-theme="light"] .mobile-select-check {
    color: #3f6fc7;
}

#entryModal .modal-inline-add-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

#entryModal .modal-inline-add-row input {
    flex: 1;
}

#entryModal .modal-inline-add-row button {
    white-space: nowrap;
    min-width: 104px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #e9edf3;
    font-weight: 600;
    padding: 0 14px;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

:root[data-theme="light"] #entryModal .modal-inline-add-row button {
    border-color: #d7e1ef;
    background: #f4f7fc;
    color: #1d2a3d;
}

:root[data-theme="light"] #entryModal .modal-inline-add-row button:hover {
    background: #ebf1fa;
    border-color: #c8d5e7;
}

:root[data-theme="light"] #entryModal .modal-inline-add-row .btn-ghost {
    background: #f8fafe;
    color: #42556f;
}

#entryModal .modal-inline-add-row button:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}

#entryModal .modal-inline-add-row button:active {
    transform: translateY(1px);
}

#entryModal .modal-inline-add-row .btn-secondary {
    background: rgba(0, 179, 107, 0.14);
    border-color: rgba(0, 179, 107, 0.35);
    color: #b9ffdf;
}

#entryModal .modal-inline-add-row .btn-secondary:hover {
    background: rgba(0, 179, 107, 0.2);
    border-color: rgba(0, 179, 107, 0.5);
}

#entryModal .modal-inline-add-row .btn-ghost {
    background: var(--ui-surface-soft-03);
    color: rgba(233,237,243,0.9);
}

.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
    background-color: #444;
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

:root[data-theme="light"] .switch .slider {
    background-color: #d9e2ef;
}

.switch .slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    top: 2px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.switch input:checked + .slider {
    background-color: #00b36b;
}

.switch input:checked + .slider::before {
    transform: translateX(22px);
}

.switch.switch-billable-inverse input:not(:checked) + .slider {
    background-color: #00b36b;
}

.switch.switch-billable-inverse input:not(:checked) + .slider::before {
    transform: translateX(22px);
}

.switch.switch-billable-inverse input:checked + .slider {
    background-color: #444;
}

.switch.switch-billable-inverse input:checked + .slider::before {
    transform: translateX(0);
}

:root[data-theme="light"] .switch.switch-billable-inverse input:checked + .slider {
    background-color: #d9e2ef;
}

#userStartCalendarToggle:checked + .slider {
    background-color: #2f61a8;
}

.me-checklist-auto-rule-active-toggle input:checked + .slider {
    background: #2f61a8 !important;
}

#userStartCalendarToggle:checked + .slider + .switch-text {
    color: #9fc5ff;
    font-weight: 600;
}

.switch-text {
    font-size: 12px;
    color: #aaa;
    min-width: 26px;
    text-align: left;
    user-select: none;
}

.primary-btn { background: var(--monday-blue); color: #fff; border: none; padding: 10px 20px; border-radius: 999px; cursor: pointer; font-weight: 600; }
.secondary-btn {
    background: rgba(255, 255, 255, 0.055);
    color: #e6ecf8;
    border: 1px solid rgba(160, 178, 218, 0.22);
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.082);
    border-color: rgba(180, 197, 232, 0.34);
    color: #f5f8ff;
}
.secondary-btn:active {
    transform: translateY(1px);
}
.micro-btn { background: transparent; color: #7aa2e8; border: 1px solid #4a5f99; padding: 2px 6px; border-radius: 2px; cursor: pointer; font-size: 11px; font-weight: 500; }
.micro-btn:hover { color: #9fc5ff; border-color: #6a7fbb; }

/* LOGIN OVERLAY */
#loginOverlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #1f1f1f;
    display: flex; justify-content: center; align-items: center; z-index: 10000;
    overflow: hidden;
}

.login-container {
    position: relative; width: 100%; height: 100%; display: flex;
    justify-content: center; align-items: center;
}

.login-container::before {
    content: ''; position: absolute; top: -50%; right: -10%;
    width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 115, 234, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.login-container::after {
    content: ''; position: absolute; bottom: -30%; left: -5%;
    width: 500px; height: 500px; background: radial-gradient(circle, rgba(0, 115, 234, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.login-box {
    background: rgba(30, 30, 30, 0.9); backdrop-filter: blur(10px);
    padding: 50px 45px; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center; width: min(100% - 24px, 380px); max-width: 380px; box-sizing: border-box;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 115, 234, 0.3);
    position: relative; z-index: 1;
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0; transform: translateY(30px);
    }
    to {
        opacity: 1; transform: translateY(0);
    }
}

.login-header {
    margin-bottom: 35px;
}

.login-logo {
    width: 92px;
    height: 92px;
    margin: 0 auto 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: pulseLogo 2.2s ease-in-out infinite;
    transform-origin: center center;
}

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

.login-logo-fallback {
    display: none;
    font-size: 72px;
    line-height: 1;
    font-weight: 600;
    color: #e7ebf4;
    font-family: "Figtree", sans-serif;
}

.login-logo.logo-fallback-visible .login-logo-fallback {
    display: inline-block;
}

@keyframes pulseLogo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.88; }
}

.login-header h1 {
    margin: 0; font-size: 28px; font-weight: 700;
    color: #ffffff;
}

.login-subtitle {
    margin: 8px 0 0 0; font-size: 13px; color: #888;
    font-weight: 400; letter-spacing: 0.5px;
}

.login-form {
    display: flex; flex-direction: column; gap: 16px;
}

.input-group {
    position: relative;
}

.login-input {
    width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px;
    color: #fff; font-size: 14px; font-family: 'Figtree', sans-serif;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; box-sizing: border-box;
}

.login-input:focus {
    outline: none; background: rgba(255, 255, 255, 0.12);
    border-color: rgba(0, 115, 234, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 115, 234, 0.1);
}

.login-input::placeholder {
    color: #666;
}

.login-btn {
    padding: 12px 24px; background: linear-gradient(135deg, #0073ea, #0056b3);
    color: #fff; border: none; border-radius: 8px;
    font-weight: 600; font-size: 14px; cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease; margin-top: 8px;
    font-family: 'Figtree', sans-serif;
    box-shadow: 0 4px 15px rgba(0, 115, 234, 0.3);
    letter-spacing: 0.3px;
}

.login-btn:hover {
    background: linear-gradient(135deg, #0056b3, #003d82);
    box-shadow: 0 6px 20px rgba(0, 115, 234, 0.4);
    transform: translateY(-2px);
}

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

.login-btn.login-btn-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.10));
    color: #e8eef9;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.login-btn.login-btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.13));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
}


/* MODAL */
.modal { 
    display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; 
    background: rgba(7, 11, 20, 0.26);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content { 
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
    margin: 8% auto; 
    padding: 30px; 
    width: 450px; 
    box-sizing: border-box;
    border-radius: 18px; 
    border: 1px solid rgba(141, 169, 228, 0.16);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: slideIn 0.3s ease;
}

:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .archive-modal-body,
:root[data-theme="light"] .app-confirm-dialog {
    background: var(--overlay-panel);
    color: #172033;
    border-color: rgba(18, 30, 48, 0.14);
    box-shadow: 0 20px 44px rgba(17, 31, 56, 0.13);
}

:root[data-theme="light"] .modal-content label,
:root[data-theme="light"] .modal-content .form-label,
:root[data-theme="light"] .app-confirm-title,
:root[data-theme="light"] .app-confirm-message {
    color: #243149;
}

#entryModal {
    background: rgba(8, 12, 22, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#entryModal .modal-content {
    width: min(560px, calc(100vw - 28px));
    margin: 5vh auto;
    padding: 22px 22px 18px;
    border-radius: 22px;
    border: 1px solid rgba(121, 151, 205, 0.18);
    background:
        radial-gradient(circle at top right, rgba(86, 167, 125, 0.14), transparent 26%),
        radial-gradient(circle at top left, rgba(92, 146, 233, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(18, 24, 40, 0.98), rgba(11, 17, 31, 0.98));
    box-shadow: 0 28px 64px rgba(4, 10, 20, 0.44);
    position: relative;
    overflow: hidden;
}

#entryModal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 92px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
    pointer-events: none;
}

#entryModal .modal-content h2 {
    position: relative;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(126, 147, 191, 0.16);
    color: #eef4ff;
}

#entryModal .form-label,
#entryModal label {
    color: #9fb3d1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#entryModal .calendar-entry-modal-form {
    position: relative;
    z-index: 1;
}

#entryModal .modal-time-row,
#entryModal .modal-rate-row {
    padding: 12px 14px;
    border: 1px solid rgba(120, 142, 190, 0.14);
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(92, 146, 233, 0.1), transparent 32%),
        rgba(255, 255, 255, 0.03);
}

#entryModal .calendar-entry-modal-help {
    color: #90a3bf !important;
    line-height: 1.45;
    padding: 2px 2px 0;
}

#entryModal .calendar-entry-modal-actions {
    position: relative;
    z-index: 1;
    padding-top: 14px;
    border-top: 1px solid rgba(126, 147, 191, 0.14);
}

#entryModal .modal-search-select-input,
#entryModal select,
#entryModal textarea,
#entryModal #modalDate,
#entryModal #modalStartTime,
#entryModal #modalEndTime {
    border-radius: 12px;
    border: 1px solid rgba(120, 142, 190, 0.18);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #edf3ff;
}

#entryModal .modal-search-select-input:focus,
#entryModal select:focus,
#entryModal textarea:focus,
#entryModal #modalDate:focus,
#entryModal #modalStartTime:focus,
#entryModal #modalEndTime:focus {
    border-color: rgba(92, 146, 233, 0.44);
    box-shadow: 0 0 0 4px rgba(92, 146, 233, 0.12);
}

#entryModal .modal-billable-switch {
    border-color: rgba(120, 142, 190, 0.18);
    background:
        radial-gradient(circle at top right, rgba(86, 167, 125, 0.12), transparent 34%),
        rgba(255, 255, 255, 0.045);
}

#entryModal .modal-inline-add-row {
    padding: 12px;
    border: 1px dashed rgba(126, 147, 191, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

:root[data-theme="light"] #entryModal {
    background: rgba(27, 39, 61, 0.22);
}

:root[data-theme="light"] #entryModal .modal-content {
    border-color: rgba(121, 141, 176, 0.2);
    background:
        radial-gradient(circle at top right, rgba(86, 167, 125, 0.12), transparent 26%),
        radial-gradient(circle at top left, rgba(89, 137, 222, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(243, 247, 253, 0.985));
    box-shadow: 0 24px 56px rgba(17, 31, 56, 0.18);
}

:root[data-theme="light"] #entryModal .modal-content h2 {
    border-bottom-color: rgba(121, 141, 176, 0.14);
    color: #20324a;
}

:root[data-theme="light"] #entryModal .form-label,
:root[data-theme="light"] #entryModal label {
    color: #607391;
}

:root[data-theme="light"] #entryModal .modal-time-row,
:root[data-theme="light"] #entryModal .modal-rate-row {
    border-color: rgba(121, 141, 176, 0.14);
    background:
        radial-gradient(circle at top right, rgba(89, 137, 222, 0.08), transparent 32%),
        rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] #entryModal .calendar-entry-modal-help {
    color: #70839f !important;
}

:root[data-theme="light"] #entryModal .calendar-entry-modal-actions {
    border-top-color: rgba(121, 141, 176, 0.12);
}

:root[data-theme="light"] #entryModal .modal-search-select-input,
:root[data-theme="light"] #entryModal select,
:root[data-theme="light"] #entryModal textarea,
:root[data-theme="light"] #entryModal #modalDate,
:root[data-theme="light"] #entryModal #modalStartTime,
:root[data-theme="light"] #entryModal #modalEndTime {
    border-color: rgba(121, 141, 176, 0.18);
    background: rgba(255, 255, 255, 0.92);
    color: #31445f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

:root[data-theme="light"] #entryModal .modal-search-select-input:focus,
:root[data-theme="light"] #entryModal select:focus,
:root[data-theme="light"] #entryModal textarea:focus,
:root[data-theme="light"] #entryModal #modalDate:focus,
:root[data-theme="light"] #entryModal #modalStartTime:focus,
:root[data-theme="light"] #entryModal #modalEndTime:focus {
    border-color: rgba(89, 137, 222, 0.34);
    box-shadow: 0 0 0 4px rgba(89, 137, 222, 0.12);
}

:root[data-theme="light"] #entryModal .modal-billable-switch {
    border-color: rgba(121, 141, 176, 0.18);
    background:
        radial-gradient(circle at top right, rgba(86, 167, 125, 0.1), transparent 34%),
        rgba(255, 255, 255, 0.86);
}

:root[data-theme="light"] #entryModal .modal-inline-add-row {
    border-color: rgba(121, 141, 176, 0.18);
    background: rgba(255, 255, 255, 0.62);
}

:root[data-theme="light"] .app-confirm-overlay {
    background: rgba(16, 24, 38, 0.28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

:root[data-theme="light"] .app-confirm-dialog {
    border: 1px solid rgba(18, 30, 48, 0.16);
}

:root[data-theme="light"] .app-confirm-title {
    color: #162133;
    font-weight: 700;
}

:root[data-theme="light"] .app-confirm-message {
    color: #40546f;
}

:root[data-theme="light"] .app-confirm-message .app-confirm-spacer {
    height: 6px;
}

:root[data-theme="light"] .app-confirm-actions .secondary-btn {
    background: #f2f5fb;
    border: 1px solid #d7e1ef;
    color: #1e2b3f;
}

:root[data-theme="light"] .app-confirm-actions .secondary-btn:hover {
    background: #eaf0fa;
    border-color: #c8d5e7;
}

:root[data-theme="light"] .app-confirm-actions .app-confirm-ok.danger {
    background: #fff0f1;
    border-color: #f0b8bf;
    color: #b32233;
}

:root[data-theme="light"] .app-confirm-actions .app-confirm-ok.danger:hover {
    background: #ffe5e8;
    border-color: #e79ca8;
}

:root[data-theme="light"] .app-prompt-input {
    background: #ffffff;
    border-color: #d7e1ef;
    color: #1d2a3d;
}

:root[data-theme="light"] .app-alert-dialog .app-confirm-title::before {
    color: #3260a8;
    background: rgba(66, 118, 213, 0.12);
    border-color: rgba(66, 118, 213, 0.22);
}

:root[data-theme="light"] .app-alert-actions .secondary-btn {
    background: linear-gradient(135deg, rgba(66, 118, 213, 0.12), rgba(66, 118, 213, 0.07));
    border-color: rgba(66, 118, 213, 0.2);
    color: #244266;
}

:root[data-theme="light"] .entity-doc-reminder-label {
    color: #5f7393;
}

:root[data-theme="light"] .entity-doc-reminder-popover-card {
    background: #ffffff;
    border-color: #d9d9d9;
    box-shadow: 0 16px 30px rgba(17, 31, 56, 0.14);
}

#crmQuickContactOverlay,
#unternehmenModal {
    z-index: 10090;
}

#crmQuickContactDrawer,
#unternehmenModalDrawer {
    position: relative;
    z-index: 1;
}

#unternehmenModalDrawer {
    grid-template-rows: auto 1fr;
}

#unternehmenModal .crm-company-create-dialog {
    background:
        radial-gradient(circle at top right, rgba(100, 180, 255, 0.12), transparent 24%),
        linear-gradient(180deg, #202739, #181d2c);
}

#unternehmenModal .crm-company-create-form {
    overflow: auto;
    min-height: 0;
    padding: 18px 20px 30px;
}

#unternehmenModal .crm-company-create-grid {
    align-content: start;
}

#unternehmenModal .crm-company-create-grid textarea {
    min-height: 110px;
}

#unternehmenModal .company-color-compact {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--ui-surface-soft-03);
}

#unternehmenModal .company-color-compact .color-dots-container {
    margin-top: 0;
    gap: 8px;
}

#unternehmenModal .company-color-compact .color-dot {
    width: 28px;
    height: 28px;
}

#unternehmenModal .company-color-compact .color-picker-manual-row {
    width: auto;
    gap: 8px;
    flex-wrap: wrap;
}

#unternehmenModal .company-color-compact .color-hex-input {
    width: 110px;
    min-width: 110px;
    height: 28px;
    padding: 4px 8px;
    font-size: 11px;
}

#unternehmenModal .crm-company-billing-row {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--ui-surface-soft-03);
}

#unternehmenModal .crm-company-billing-row .switch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

#unternehmenModal .crm-company-billing-row .switch .slider {
    margin: 0;
    flex: 0 0 auto;
}

#unternehmenModal .crm-company-billing-label {
    color: #b9c6dd;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

#unternehmenModal .crm-company-create-actions {
    margin-top: 22px;
    padding: 14px 0 16px;
}

:root[data-theme="light"] #unternehmenModal .company-color-compact,
:root[data-theme="light"] #unternehmenModal .crm-company-billing-row {
    background: rgba(24, 44, 77, 0.04);
    border-color: rgba(24, 44, 77, 0.10);
}

:root[data-theme="light"] #unternehmenModal .crm-company-billing-label {
    color: #5f7290;
}

:root[data-theme="light"] #unternehmenModal .crm-company-create-dialog {
    background:
        radial-gradient(circle at top right, rgba(64, 122, 214, 0.08), transparent 24%),
        linear-gradient(180deg, #fdfefe, #f4f8fd);
    border-color: rgba(131, 149, 181, 0.24);
    box-shadow: 0 24px 60px rgba(41, 58, 89, 0.18);
}

:root[data-theme="light"] .entity-doc-reminder-popover-title {
    color: #20324f;
}

:root[data-theme="light"] .entity-doc-reminder-popover-close {
    color: #6a7e9d;
}

:root[data-theme="light"] .entity-doc-reminder-popover-close:hover {
    color: #223a62;
    background: rgba(31, 64, 122, 0.08);
    border-color: rgba(110, 133, 170, 0.22);
}

:root[data-theme="light"] .entity-doc-reminder-input {
    border-color: #d9d9d9;
    background: #ffffff;
    color: #22324a;
}

:root[data-theme="light"] .entity-doc-reminder-user,
:root[data-theme="light"] .entity-doc-reminder-note,
:root[data-theme="light"] .entity-doc-reminder-free {
    border-color: rgba(22, 37, 60, 0.14);
    background: rgba(255,255,255,0.94);
    color: #22324a;
}

:root[data-theme="light"] .entity-doc-reminder-actions .secondary-btn[data-action="save"] {
    border-color: rgba(66,118,213,0.24);
    color: #2d4d7c;
    background: rgba(66,118,213,0.08);
}

:root[data-theme="light"] .entity-doc-reminder-actions {
    border-top-color: rgba(110, 133, 170, 0.16);
}

:root[data-theme="light"] .entity-doc-reminder-actions .secondary-btn[data-action="clear"] {
    color: #b63e4f;
}

:root[data-theme="light"] .app-alert-actions .secondary-btn:hover {
    background: linear-gradient(135deg, rgba(66, 118, 213, 0.18), rgba(66, 118, 213, 0.10));
    border-color: rgba(66, 118, 213, 0.28);
}

:root[data-theme="light"] .secondary-btn {
    background: #f8fbff;
    color: #233751;
    border-color: rgba(131, 149, 181, 0.22);
}

:root[data-theme="light"] .secondary-btn:hover {
    background: #eef4fc;
    border-color: rgba(113, 140, 186, 0.3);
}

:root[data-theme="light"] .user-profile-page,
:root[data-theme="light"] .main-content {
    background: var(--monday-bg);
    color: var(--monday-text);
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-content h2 {
    margin-top: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

:root[data-theme="light"] .modal-content h2 {
    color: #172338;
}

.modal-content label,
.modal-content .form-label {
    display: block;
    color: #aaa;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.modal-content select,
.modal-content textarea {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    font-family: 'Figtree', sans-serif;
}

:root[data-theme="light"] .modal-content textarea {
    border-color: #d6e0ee;
    background: #ffffff;
    color: #1b2940;
}

:root[data-theme="light"] .modal-content select {
    border-color: #d6e0ee;
    background: #ffffff;
    color: #1b2940;
}

#entryModal .modal-billable-switch {
    display: inline-flex;
    align-items: center;
    height: 44px;
    min-width: 62px;
    padding: 0 9px;
    box-sizing: border-box;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#entryModal .modal-billable-switch input {
    min-height: 0;
    height: 0;
}

#entryModal .modal-billable-switch .slider {
    flex: 0 0 auto;
    margin: 0;
}

:root[data-theme="light"] #entryModal .modal-billable-switch {
    border-color: #d6e0ee;
    background: #ffffff;
}

.modal-content select:focus,
.modal-content textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(0, 115, 234, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 115, 234, 0.1);
}

:root[data-theme="light"] .modal-content textarea:focus {
    border-color: rgba(11, 103, 208, 0.45);
    box-shadow: 0 0 0 3px rgba(11, 103, 208, 0.12);
}

.modal-content #modalDate,
.modal-content #modalStartTime,
.modal-content #modalEndTime,
.project-create-grid #projectCreateDeadline,
.project-create-grid #projectCreateAnfrageDate {
    border: 1px solid rgba(116, 138, 176, 0.55);
    border-radius: 6px;
    background-color: #23293a;
    color: #e7edf9;
    padding: 6px 34px 6px 10px;
    font-size: 13px;
    line-height: 1.25;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23A9B7D0' d='M10.5 1C10.7761 1 11 1.22386 11 1.5V2H11.5C12.3284 2 13 2.67157 13 3.5V11.5C13 12.3284 12.3284 13 11.5 13H2.5C1.67157 13 1 12.3284 1 11.5V3.5C1 2.67157 1.67157 2 2.5 2H3V1.5C3 1.22386 3.22386 1 3.5 1C3.77614 1 4 1.22386 4 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1ZM12 5H2V11.5C2 11.7761 2.22386 12 2.5 12H11.5C11.7761 12 12 11.7761 12 11.5V5ZM11.5 3H2.5C2.22386 3 2 3.22386 2 3.5V4H12V3.5C12 3.22386 11.7761 3 11.5 3Z'/%3E%3C/svg%3E");
    color-scheme: dark;
}

.modal-content #modalDate::-webkit-calendar-picker-indicator,
.project-create-grid #projectCreateDeadline::-webkit-calendar-picker-indicator,
.project-create-grid #projectCreateAnfrageDate::-webkit-calendar-picker-indicator {
    opacity: 0.01;
    cursor: pointer;
}

:root[data-theme="light"] .modal-content #modalDate,
:root[data-theme="light"] .modal-content #modalStartTime,
:root[data-theme="light"] .modal-content #modalEndTime,
:root[data-theme="light"] .project-create-grid #projectCreateDeadline,
:root[data-theme="light"] .project-create-grid #projectCreateAnfrageDate {
    border-color: #d9d9d9;
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.88);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23000000' fill-opacity='.25' d='M10.5 1C10.7761 1 11 1.22386 11 1.5V2H11.5C12.3284 2 13 2.67157 13 3.5V11.5C13 12.3284 12.3284 13 11.5 13H2.5C1.67157 13 1 12.3284 1 11.5V3.5C1 2.67157 1.67157 2 2.5 2H3V1.5C3 1.22386 3.22386 1 3.5 1C3.77614 1 4 1.22386 4 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1ZM12 5H2V11.5C2 11.7761 2.22386 12 2.5 12H11.5C11.7761 12 12 11.7761 12 11.5V5ZM11.5 3H2.5C2.22386 3 2 3.22386 2 3.5V4H12V3.5C12 3.22386 11.7761 3 11.5 3Z'/%3E%3C/svg%3E");
    color-scheme: light;
}

.modal-content #modalStartTime,
.modal-content #modalEndTime {
    background-image: none;
    padding-right: 10px;
}

.modal-content #modalDate:focus,
.modal-content #modalStartTime:focus,
.modal-content #modalEndTime:focus,
.project-create-grid #projectCreateDeadline:focus,
.project-create-grid #projectCreateAnfrageDate:focus {
    outline: none;
    border-color: rgba(100, 180, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(100, 180, 255, 0.14);
}

:root[data-theme="light"] .modal-content #modalDate:focus,
:root[data-theme="light"] .modal-content #modalStartTime:focus,
:root[data-theme="light"] .modal-content #modalEndTime:focus,
:root[data-theme="light"] .project-create-grid #projectCreateDeadline:focus,
:root[data-theme="light"] .project-create-grid #projectCreateAnfrageDate:focus {
    border-color: rgba(11, 103, 208, 0.45);
    box-shadow: 0 0 0 3px rgba(11, 103, 208, 0.12);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 15px;
}

:root[data-theme="light"] .modal-header {
    border-bottom-color: rgba(22, 37, 60, 0.08);
}

.modal-header h2 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.modal-close-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.modal-close-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] .modal-close-btn {
    color: #7b879b;
}

:root[data-theme="light"] .modal-close-btn:hover {
    color: #1c2a3f;
    background: rgba(41, 66, 109, 0.08);
}

.modal-body {
    margin-bottom: 20px;
}

.archive-modal-content {
    width: min(700px, calc(100vw - 32px));
    margin: 7vh auto;
    padding: 24px 26px 20px;
    max-height: min(78vh, 620px);
    overflow: auto;
}

.archive-modal-body {
    color: #ccc;
    line-height: 1.5;
    display: grid;
    gap: 12px;
}

.archive-modal-body p {
    margin: 0;
    font-size: 15px;
    color: #d8deea;
}

.archive-warning-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255, 170, 56, 0.12), rgba(255, 141, 32, 0.08));
    border: 1px solid rgba(255, 174, 63, 0.28);
    border-left: 3px solid #ffb13c;
    padding: 12px 14px;
    border-radius: 10px;
    color: #ffc165;
    font-size: 14px;
    margin-top: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

:root[data-theme="light"] .archive-warning-box {
    background: linear-gradient(180deg, #fff9ef, #fff4df);
    border-color: rgba(215, 154, 33, 0.20);
    border-left-color: #d79a21;
    color: #7a5917;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.archive-modal-actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.archive-modal-content .modal-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.archive-modal-content .modal-header h2 {
    font-size: 18px;
    letter-spacing: -0.02em;
}

.archive-modal-content .modal-body {
    margin-bottom: 0;
}

.archive-modal-content .secondary-btn,
.archive-modal-content .archive-danger-btn {
    min-height: 40px;
    border-radius: 10px;
    padding: 8px 16px;
}

.archive-modal-content .archive-danger-btn {
    min-width: 132px;
    font-weight: 700;
}

:root[data-theme="light"] .archive-modal-content {
    box-shadow: 0 26px 56px rgba(17, 31, 56, 0.18);
}

:root[data-theme="light"] .archive-modal-body p {
    color: #334864;
}

:root[data-theme="light"] .archive-modal-actions {
    border-top-color: rgba(22, 37, 60, 0.08);
}

@media (max-width: 640px) {
    .archive-modal-content {
        padding: 20px 18px 16px;
        margin: 5vh auto;
    }
    .archive-modal-actions {
        justify-content: stretch;
    }
    .archive-modal-actions .secondary-btn,
    .archive-modal-actions .archive-danger-btn {
        flex: 1 1 0;
    }
}

.archive-danger-btn {
    background: linear-gradient(135deg, #ff3b30 0%, #ff6b5a 100%);
    color: #fff;
    border: none;
}

.archive-danger-btn:hover {
    background: linear-gradient(135deg, #ff5a4a 0%, #ff8575 100%);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

.app-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 18, 0.58);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 6005005;
    backdrop-filter: blur(3px);
}

.app-confirm-dialog {
    width: min(520px, calc(100vw - 32px));
    background: linear-gradient(180deg, #242b42 0%, #1d2438 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38);
    padding: 18px;
    color: #e8eefc;
    position: relative;
    z-index: 4005006;
}

.app-confirm-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.app-confirm-message {
    font-size: 14px;
    line-height: 1.45;
    color: #d0d9ef;
}

.app-confirm-spacer {
    height: 6px;
}

.app-confirm-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.app-confirm-actions .secondary-btn {
    min-width: 110px;
}

.app-confirm-actions .secondary-btn.danger {
    border-color: rgba(255, 116, 116, 0.5);
    color: #ffd5d5;
    background: rgba(255, 94, 94, 0.18);
}

.app-confirm-actions .secondary-btn.danger:hover {
    background: rgba(255, 94, 94, 0.28);
    border-color: rgba(255, 146, 146, 0.65);
}

.app-alert-dialog {
    width: min(560px, calc(100vw - 32px));
}

.app-prompt-dialog {
    width: min(440px, calc(100vw - 40px));
    padding: 20px 22px 18px;
}

.app-prompt-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(160, 178, 218, 0.24);
    background: rgba(255, 255, 255, 0.04);
    color: #eef4ff;
    padding: 0 11px;
    font-size: 14px;
    line-height: 1.2;
    outline: none;
}

.app-prompt-dialog .app-confirm-title {
    margin-bottom: 8px;
}

.app-prompt-dialog .app-confirm-message {
    margin-bottom: 0;
}

.app-prompt-dialog .app-confirm-actions {
    margin-top: 16px;
    justify-content: flex-end;
    align-items: center;
}

.app-prompt-dialog .app-confirm-actions .secondary-btn,
.app-prompt-dialog .app-confirm-actions .primary-btn {
    min-width: 132px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
}

.app-prompt-input:focus {
    border-color: rgba(110, 155, 242, 0.48);
    box-shadow: 0 0 0 3px rgba(79, 137, 216, 0.16);
}

.app-alert-dialog .app-confirm-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-alert-dialog .app-confirm-title::before {
    content: "i";
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #d7e8ff;
    background: rgba(72, 130, 255, 0.22);
    border: 1px solid rgba(114, 162, 255, 0.34);
}

.app-alert-actions {
    justify-content: center;
}

.app-alert-actions .secondary-btn {
    min-width: 140px;
    background: linear-gradient(135deg, rgba(72, 130, 255, 0.22), rgba(72, 130, 255, 0.14));
    border-color: rgba(114, 162, 255, 0.35);
    color: #e9f1ff;
}

.app-alert-actions .secondary-btn:hover {
    background: linear-gradient(135deg, rgba(72, 130, 255, 0.30), rgba(72, 130, 255, 0.18));
    border-color: rgba(135, 176, 255, 0.45);
}

.entity-doc-reminder-dialog {
    width: min(460px, calc(100vw - 32px));
}

.entity-doc-reminder-popover {
    position: fixed;
    z-index: 10095;
    width: min(288px, calc(100vw - 24px));
}

.entity-doc-reminder-popover.is-my-work-popover {
    width: min(380px, calc(100vw - 24px));
}

.entity-doc-reminder-popover-card {
    border-radius: 8px;
    border: 1px solid rgba(154, 173, 207, 0.28);
    background: #1f2432;
    box-shadow: 0 16px 36px rgba(5, 9, 20, 0.5);
    padding: 10px;
}

.entity-doc-reminder-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.entity-doc-reminder-popover-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #e6ecf8;
}

.entity-doc-reminder-popover-close {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #9fb0c9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.entity-doc-reminder-popover-close:hover {
    color: #edf3ff;
    background: rgba(255,255,255,0.06);
    border-color: rgba(149, 167, 199, 0.22);
}

.entity-doc-reminder-popover-body {
    padding: 0;
}

.entity-doc-reminder-date-menu {
    width: min(340px, calc(100vw - 16px));
}

.entity-doc-reminder-date-menu.active {
    display: block;
}

.entity-doc-reminder-field {
    position: relative;
}

.entity-doc-reminder-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(14, 18, 28, 0.58);
    color: #eef3ff;
    border-radius: 10px;
    padding: 10px 12px;
    font: 500 14px/1.2 'Figtree', sans-serif;
    text-align: left;
    cursor: pointer;
}

.entity-doc-reminder-trigger-icon {
    flex: 0 0 auto;
    color: #9fb0c9;
}

.entity-doc-reminder-time-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.entity-doc-reminder-time-label {
    font-size: 12px;
    color: #9fb0c9;
    white-space: nowrap;
}

.entity-doc-reminder-time-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(14, 18, 28, 0.58);
    color: #eef3ff;
    border-radius: 10px;
    padding: 9px 12px;
    font: 500 13px/1.2 'Figtree', sans-serif;
}

.entity-doc-reminder-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #9fb0c9;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.entity-doc-reminder-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(149, 167, 199, 0.34);
    background: #171d2a;
    color: #f0f4fe;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.2;
}

.entity-doc-reminder-user,
.entity-doc-reminder-note,
.entity-doc-reminder-free {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(14, 18, 28, 0.58);
    color: #eef3ff;
    border-radius: 10px;
    padding: 9px 12px;
    font: 500 13px/1.2 'Figtree', sans-serif;
}

.entity-doc-reminder-assignee-label,
.entity-doc-reminder-note-label {
    margin-top: 10px;
}

.entity-doc-reminder-team-picker {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    display: none;
    width: 100%;
    min-width: 0;
    max-height: 180px;
    overflow-y: auto;
    z-index: 12;
}

.entity-doc-reminder-team-picker.active {
    display: block;
}

.entity-doc-reminder-team-picker label {
    font-size: 13px;
    padding: 7px 8px;
}

.entity-doc-reminder-date-cell {
    position: relative;
    flex: 1 1 100%;
    width: 100%;
    --date-chip-width: 100%;
}

.entity-doc-reminder-date-trigger {
    width: 100%;
}

.entity-doc-reminder-date-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.entity-doc-reminder-date-quick {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;
    container-type: inline-size;
}

.entity-doc-reminder-quick-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 29px;
    padding: 0 5px;
    white-space: nowrap;
    font-size: clamp(8px, 3.1cqw, 12px);
    border-radius: 6px;
    overflow: hidden;
    text-overflow: clip;
}

.entity-doc-reminder-team-list {
    flex-wrap: wrap;
    gap: 8px;
    max-height: none;
    overflow: visible;
    padding: 8px;
}

.entity-doc-reminder-team-list .project-create-team-item {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
}

.entity-doc-reminder-team-avatar {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 999px;
    justify-content: center;
    gap: 0;
    min-width: 42px;
    flex: 0 0 42px;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.entity-doc-reminder-team-avatar::after {
    display: none;
}

.entity-doc-reminder-team-avatar .team-avatar.small {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.entity-doc-reminder-team-avatar > .team-avatar {
    min-width: auto;
    flex: 0 0 auto;
    font-weight: inherit;
}

.entity-doc-reminder-team-avatar > span:not(.team-avatar) {
    display: none;
}

.entity-doc-reminder-team-avatar.selected {
    border-color: rgba(100, 180, 255, 0.48);
    background: rgba(100, 180, 255, 0.12);
    box-shadow: 0 0 0 2px rgba(100, 180, 255, 0.18);
}

@media (max-width: 720px) {
    .entity-doc-reminder-date-row {
        flex-direction: column;
    }

    .entity-doc-reminder-date-cell {
        width: 100%;
    }
}

.entity-doc-reminder-quick {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.entity-doc-reminder-quick .secondary-btn {
    padding: 7px 10px;
    font-size: 12px;
    min-width: 0;
}

.entity-doc-reminder-actions .secondary-btn[data-action="save"] {
    border-color: rgba(66,118,213,0.34);
    color: #dce8ff;
    background: rgba(66,118,213,0.12);
}

.entity-doc-reminder-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(149, 167, 199, 0.16);
}

.entity-thread-overlay {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(7, 11, 20, 0.26);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}

.entity-thread-overlay.has-background-focus {
    background: rgba(7, 11, 20, 0.16);
}

.notif-jump-highlight {
    animation: notifJumpFlash 2s ease;
    outline: 2px solid rgba(77, 134, 230, 0.45);
    outline-offset: -1px;
}

tr.notif-jump-highlight,
.subtask-row.notif-jump-highlight {
    background-color: transparent !important;
}

.notif-persistent-highlight {
    position: relative;
    outline: none;
    box-shadow: none;
    background: transparent !important;
}

tr.notif-persistent-highlight,
.subtask-row.notif-persistent-highlight {
    background-color: transparent !important;
}

:root[data-theme="light"] .notif-persistent-highlight {
    outline-color: rgba(55, 118, 226, 0.92);
}

:root[data-theme="light"] tr.notif-persistent-highlight,
:root[data-theme="light"] .subtask-row.notif-persistent-highlight {
    background-color: transparent !important;
}

tr.notif-persistent-highlight td {
    border-top: 2px solid rgba(102, 163, 255, 0.96) !important;
    border-bottom: 2px solid rgba(102, 163, 255, 0.96) !important;
    background: #232940 !important;
    background-color: #232940 !important;
}

tr.notif-persistent-highlight td:first-child {
    border-left: 2px solid rgba(102, 163, 255, 0.96) !important;
}

tr.notif-persistent-highlight td:last-child {
    border-right: 2px solid rgba(102, 163, 255, 0.96) !important;
}

.subtask-row.notif-persistent-highlight::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(102, 163, 255, 0.96);
    pointer-events: none;
    z-index: 4000002;
}

.subtask-row.notif-persistent-highlight.is-due-overdue,
.subtask-row.notif-persistent-highlight.is-due-today,
.subtask-row.notif-persistent-highlight.is-due-tomorrow,
.subtask-row.notif-persistent-highlight.is-due-week,
.subtask-row.notif-persistent-highlight.is-due-next-week {
    background: var(--subtask-due-fill) !important;
    box-shadow: 2000px 0 0 0 var(--subtask-due-bg);
}

.me-checklist-row-card.notif-persistent-highlight::after {
    content: "";
    position: absolute;
    inset: 2px 0;
    border: 1px solid rgba(102, 163, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(102, 163, 255, 0.16);
    pointer-events: none;
    z-index: 18;
    box-sizing: border-box;
}

.me-checklist-row-card.notif-persistent-highlight {
    cursor: grab;
    background: linear-gradient(180deg, rgba(76, 125, 215, 0.04), rgba(76, 125, 215, 0.02)) !important;
}

.me-checklist-row-card.notif-persistent-highlight:active {
    cursor: grabbing;
}

.me-checklist-row-card.notif-focus-keep::after {
    border-color: rgba(102, 163, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(102, 163, 255, 0.22), 0 0 0 2px rgba(102, 163, 255, 0.12);
}

:root[data-theme="light"] .me-checklist-row-card.notif-focus-keep::after {
    border-color: rgba(55, 118, 226, 0.9) !important;
    box-shadow: inset 0 0 0 1px rgba(55, 118, 226, 0.18), 0 0 0 2px rgba(55, 118, 226, 0.1);
}

.entity-doc-note-card.entity-doc-notification-highlight {
    position: relative;
}

.entity-doc-note-card.entity-doc-notification-highlight::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(102, 163, 255, 0.96);
    border-radius: inherit;
    box-shadow: 0 0 0 3px rgba(102, 163, 255, 0.12);
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.65s ease;
    z-index: 20;
}

.entity-doc-note-card.entity-doc-notification-highlight-fade::after {
    opacity: 0;
}

:root[data-theme="light"] .entity-doc-note-card.entity-doc-notification-highlight::after {
    border-color: rgba(55, 118, 226, 0.92);
    box-shadow: 0 0 0 3px rgba(55, 118, 226, 0.1);
}

:root[data-theme="light"] tr.notif-persistent-highlight td {
    border-top-color: rgba(55, 118, 226, 0.92) !important;
    border-bottom-color: rgba(55, 118, 226, 0.92) !important;
    background: #eaf1fb !important;
    background-color: #eaf1fb !important;
}

:root[data-theme="light"] tr.notif-persistent-highlight td:first-child {
    border-left-color: rgba(55, 118, 226, 0.92) !important;
}

:root[data-theme="light"] tr.notif-persistent-highlight td:last-child {
    border-right-color: rgba(55, 118, 226, 0.92) !important;
}

:root[data-theme="light"] .subtask-row.notif-persistent-highlight::after {
    border-color: rgba(55, 118, 226, 0.92) !important;
}

:root[data-theme="light"] .subtask-row.notif-persistent-highlight.is-due-overdue,
:root[data-theme="light"] .subtask-row.notif-persistent-highlight.is-due-today,
:root[data-theme="light"] .subtask-row.notif-persistent-highlight.is-due-tomorrow,
:root[data-theme="light"] .subtask-row.notif-persistent-highlight.is-due-week,
:root[data-theme="light"] .subtask-row.notif-persistent-highlight.is-due-next-week {
    background: var(--subtask-due-fill) !important;
    box-shadow: 2000px 0 0 0 var(--subtask-due-bg);
}

:root[data-theme="light"] .me-checklist-row-card.notif-persistent-highlight::after {
    border-color: rgba(55, 118, 226, 0.92) !important;
}

.notif-focus-dim {
    position: relative;
    opacity: 1 !important;
    background: transparent !important;
}

.notif-focus-keep {
    opacity: 1 !important;
    transition: none;
    position: relative;
    z-index: auto;
}

tr.notif-focus-keep,
.subtask-row.notif-focus-keep {
    background-color: transparent !important;
    outline: none !important;
}

.notif-focus-surface {
    position: relative;
    isolation: auto;
}

.notif-focus-surface::before {
    content: none;
}

.notif-focus-dim.is-clearing {
    transition: none;
}

.notif-focus-keep.is-clearing {
    transition: opacity 1s ease, box-shadow 1s ease, background-color 1s ease, outline-color 1s ease;
}

tr.notif-focus-keep.is-clearing,
.subtask-row.notif-focus-keep.is-clearing {
    background-color: transparent !important;
    outline-color: transparent;
}

.notif-focus-surface.is-clearing::before {
    opacity: 0;
    transition: opacity 1s ease;
}

@keyframes notifJumpFlash {
    0% { box-shadow: 0 0 0 0 rgba(77, 134, 230, 0.0); }
    18% { box-shadow: 0 0 0 3px rgba(77, 134, 230, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(77, 134, 230, 0.0); }
}

.entity-thread-drawer {
    width: min(var(--app-dialog-panel-width), calc(100vw - 24px));
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    background: linear-gradient(180deg, #20283c 0%, #171d2e 100%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    box-shadow: 0 24px 44px rgba(0,0,0,0.34);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    min-height: 0;
    box-sizing: border-box;
}

#entityAttachmentDrawer {
    height: auto;
    max-height: min(calc(100vh - 60px), 760px);
    max-height: min(calc(100dvh - 60px), 760px);
    grid-template-rows: auto 1fr;
    contain: layout;
}

.entity-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 17px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-sizing: border-box;
}

.entity-thread-header > * {
    min-width: 0;
}

.entity-thread-title {
    font-size: 19px;
    font-weight: 700;
    color: #ecf2ff;
}

.entity-thread-subtitle {
    font-size: 14px;
    color: #9fb0d3;
    margin-top: 3px;
}

.entity-thread-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.entity-thread-header-custom {
    display: none;
    min-width: 0;
}

.entity-thread-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

.entity-thread-jump-btn {
    height: 41px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: #d9e5fb;
    padding: 0 14px;
    font: 600 14px/1 'Figtree', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.entity-thread-mode-switch .entity-thread-jump-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    border-color: transparent;
    background: transparent;
    color: #afc0e2;
}

.entity-thread-mode-switch .entity-thread-jump-btn.is-active {
    background: rgba(124, 163, 255, 0.18);
    border-color: rgba(145, 181, 255, 0.24);
    color: #f4f8ff;
}

.entity-thread-jump-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.28);
    color: #fff;
}

.entity-thread-close-btn {
    width: 41px;
    height: 41px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(255,255,255,0.10);
    color: #f1f5ff;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.entity-thread-close-btn:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.28);
    color: #ffffff;
}

.entity-thread-meta-bar {
    display: none !important;
}

.entity-thread-meta-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-thread-meta-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.entity-attachments-section {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.035);
    box-shadow: none;
    contain: layout;
}

.entity-attachments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.entity-attachments-subtitle {
    font-size: 12px;
    color: #9fb0d3;
    margin-top: 5px;
}

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

.entity-attachments-dropzone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(140, 183, 255, 0.34);
    background: rgba(66, 85, 125, 0.58);
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.entity-attachments-dropzone.is-drag-active {
    border-color: rgba(140, 183, 255, 0.72);
    box-shadow: 0 0 0 1px rgba(140, 183, 255, 0.26), 0 16px 32px rgba(9, 17, 33, 0.24);
    transform: translateY(-1px);
}

.entity-attachments-dropzone.is-busy {
    opacity: 0.84;
}

.entity-attachments-dropzone-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.entity-attachments-dropzone-title {
    color: #f6f9ff;
    font: 700 15px/1.2 'Figtree', sans-serif;
}

.entity-attachments-dropzone-subtitle {
    color: rgba(226, 236, 255, 0.76);
    font-size: 13px;
    line-height: 1.4;
}

.entity-attachments-dropzone-actions {
    flex: 0 0 auto;
}

.entity-attachments-link-form {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.entity-attachments-link-input {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(8, 13, 24, 0.5);
    color: #eef4ff;
    font: 500 13px/1.2 'Figtree', sans-serif;
    padding: 0 12px;
}

.entity-attachments-link-input::placeholder {
    color: #8fa1c5;
}

.entity-attachments-link-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.entity-attachments-grid {
    display: grid;
    gap: 10px;
}

.entity-attachments-empty {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    color: #9fb0d3;
    font-size: 13px;
}

.entity-attachment-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(9, 14, 26, 0.22);
    contain: layout;
}

.entity-attachment-card.is-active {
    border-color: rgba(114, 164, 255, 0.42);
    box-shadow: 0 0 0 1px rgba(114, 164, 255, 0.18);
}

.entity-attachment-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 46px;
}

.entity-attachment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(114, 164, 255, 0.14);
    color: #d9e7ff;
    font-size: 12px;
    font-weight: 700;
}

.entity-attachment-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 42px;
    flex: 0 0 58px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(114, 164, 255, 0.12);
    border: 1px solid rgba(255,255,255,0.08);
}

.entity-attachment-thumb.is-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: rgba(255,255,255,0.04);
}

.entity-attachment-thumb.is-image span {
    color: #d9f7ff;
    font: 700 13px/1 'Figtree', sans-serif;
}

.entity-attachment-thumb.is-pdf {
    background:
        linear-gradient(135deg, rgba(255, 126, 126, 0.18), rgba(255, 126, 126, 0.08)),
        rgba(255,255,255,0.04);
}

.entity-attachment-thumb.is-pdf span {
    color: #ffe5e5;
    font: 700 16px/1 'Figtree', sans-serif;
    letter-spacing: 0.08em;
}

.entity-attachment-thumb.is-image-placeholder {
    background: rgba(114, 164, 255, 0.14);
}

.entity-attachment-thumb.is-image-placeholder span {
    color: #d9f7ff;
}

.entity-attachment-texts {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.entity-attachment-name {
    color: #eef4ff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-attachment-meta {
    color: #9fb0d3;
    font-size: 12px;
}

.entity-attachment-version-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(114, 164, 255, 0.12);
    color: #d8e7ff;
    font: 600 11px/1.2 'Figtree', sans-serif;
}

.entity-attachment-version-badge.is-single {
    background: rgba(255,255,255,0.06);
    color: #9fb0d3;
}

.entity-attachment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    padding-left: 70px;
}

.entity-attachment-action {
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: #dbe7fb;
    padding: 0 9px;
    font: 600 11.5px/1 'Figtree', sans-serif;
    cursor: pointer;
}

.entity-attachment-action.danger {
    color: #ffd9d9;
    border-color: rgba(255, 125, 125, 0.22);
    background: rgba(255, 125, 125, 0.08);
}

.entity-attachment-versions {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.entity-attachment-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

.entity-attachment-version-row.is-latest {
    border-color: rgba(114, 164, 255, 0.20);
    background: rgba(114, 164, 255, 0.08);
}

.entity-attachment-version-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.entity-attachment-version-title {
    color: #eaf2ff;
    font: 600 13px/1.3 'Figtree', sans-serif;
}

.entity-attachment-version-meta {
    color: #9fb0d3;
    font-size: 12px;
}

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

.entity-attachment-preview-shell {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(8, 13, 24, 0.56);
    border: 1px solid rgba(255,255,255,0.10);
}

.entity-attachment-dialog-shell {
    display: grid;
    gap: 0;
}

.entity-attachment-inline-page {
    padding: 0;
    background: transparent;
    box-shadow: none;
    min-height: auto;
}

#entityAttachmentBody .entity-doc-canvas {
    padding: 0;
}

#entityAttachmentBody .entity-attachments-section {
    margin-bottom: 0;
}

.entity-attachment-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.entity-attachment-preview-title {
    color: #eef4ff;
    font-size: 14px;
    font-weight: 700;
}

.entity-attachment-preview-body {
    min-height: min(72vh, 780px);
    max-height: min(78vh, 860px);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}

.entity-attachment-preview-body img,
.entity-attachment-preview-body iframe,
.entity-attachment-preview-body video {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: contain;
    background: #fff;
}

.attachment-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 10120;
    display: none;
    align-items: stretch;
    justify-content: center;
    padding: 14px;
    background: rgba(13, 18, 31, 0.82);
    backdrop-filter: blur(8px);
}

.attachment-preview-pdf-fallback {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.attachment-preview-pdf-fallback .entity-thread-jump-btn {
    pointer-events: auto;
    box-shadow: 0 10px 24px rgba(13, 18, 31, 0.22);
}

.attachment-preview-pdf-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.attachment-preview-doc-text {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #f7f8fb;
    color: #1d2838;
    padding: 28px;
    box-sizing: border-box;
}

.attachment-preview-doc-text pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font: 500 14px/1.55 'Figtree', sans-serif;
}

.attachment-preview-pdf-host {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #f1f4f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
}

.attachment-preview-pdf-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.attachment-preview-pdf-page-label {
    color: #34455f;
    font: 600 13px/1.2 'Figtree', sans-serif;
}

.attachment-preview-pdf-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    box-shadow: 0 18px 42px rgba(15, 22, 38, 0.18);
    background: #ffffff;
}

.attachment-preview-modal {
    width: min(96vw, 1780px);
    height: calc(100vh - 28px);
    border-radius: 22px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: linear-gradient(180deg, rgba(24, 31, 48, 0.98), rgba(17, 23, 37, 0.98));
    border: 1px solid rgba(158, 183, 228, 0.18);
    box-shadow: 0 26px 60px rgba(4, 9, 20, 0.42);
}

.attachment-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.attachment-preview-header-texts {
    min-width: 0;
}

.attachment-preview-title {
    color: #f4f7ff;
    font: 700 20px/1.2 'Figtree', sans-serif;
}

.attachment-preview-subtitle {
    color: #a9bad9;
    font: 500 12px/1.4 'Figtree', sans-serif;
    margin-top: 4px;
}

.attachment-preview-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attachment-preview-body-shell {
    min-height: 0;
    padding: 18px;
}

.attachment-preview-canvas,
.attachment-preview-state {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 150px);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
}

.attachment-preview-state {
    display: grid;
    place-items: center;
    color: #dbe6fb;
    font: 600 15px/1.4 'Figtree', sans-serif;
    text-align: center;
    padding: 24px;
}

.attachment-preview-state.is-error {
    color: #ffd3d3;
}

.attachment-preview-canvas img,
.attachment-preview-canvas iframe,
.attachment-preview-canvas video,
.attachment-preview-pdf {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #fff;
    object-fit: contain;
}

@media (max-width: 820px) {
    .entity-attachments-head,
    .entity-attachments-dropzone,
    .entity-attachment-card,
    .entity-attachment-preview-head {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .entity-attachments-actions,
    .entity-attachments-dropzone-actions,
    .entity-attachment-actions,
    .entity-attachments-link-actions {
        justify-content: stretch;
    }

    .entity-attachments-actions > *,
    .entity-attachments-dropzone-actions > *,
    .entity-attachment-actions > *,
    .entity-attachments-link-actions > * {
        width: 100%;
    }

    .attachment-preview-overlay {
        padding: 8px;
    }

    .attachment-preview-modal {
        width: 100%;
        height: calc(100vh - 16px);
        border-radius: 18px;
    }

    .attachment-preview-header {
        padding: 14px 16px;
        align-items: flex-start;
        flex-direction: column;
    }

    .attachment-preview-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .attachment-preview-body-shell {
        padding: 12px;
    }
}

.entity-thread-meta-inline-notice {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid rgba(110,166,255,0.22);
    background: rgba(84,136,236,0.12);
    color: #dbe9ff;
    border-radius: 999px;
    padding: 3px 9px;
    font: 600 11px/1.2 'Figtree', sans-serif;
}

.entity-thread-meta-toggle {
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: #d8e3f7;
    border-radius: 999px;
    padding: 3px 9px;
    font: 600 11px/1.2 'Figtree', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.entity-thread-meta-toggle:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.22);
}

.entity-thread-meta-toggle.is-active {
    color: #edf4ff;
    background: rgba(84,136,236,0.16);
    border-color: rgba(84,136,236,0.28);
}

.entity-thread-messages {
    overflow: auto;
    height: auto;
    min-height: 0;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 141, 176, 0.55) transparent;
    overscroll-behavior: contain;
    padding: 0 14px;
    display: block;
    background: #202733;
    box-sizing: border-box;
}

.entity-thread-messages > .entity-doc-canvas {
    min-height: 0;
}

#entityAttachmentBody {
    overflow: auto;
    padding: 14px;
    contain: layout;
}

#entityAttachmentBody .entity-doc-canvas,
#entityAttachmentBody .entity-doc-page,
#entityAttachmentBody .entity-attachments-section,
#entityAttachmentBody .entity-attachments-grid,
#entityAttachmentBody .entity-attachment-card,
#entityAttachmentBody .entity-attachment-actions {
    overflow: visible;
}

.entity-thread-messages::-webkit-scrollbar {
    width: 10px;
}

.entity-thread-messages::-webkit-scrollbar-thumb {
    background: rgba(120, 141, 176, 0.55);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.entity-thread-messages::-webkit-scrollbar-track {
    background: transparent;
}

.entity-thread-empty {
    color: #99a9c9;
    font-size: 13px;
    padding: 12px 4px;
}

.entity-thread-msg {
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--ui-surface-soft-03);
    border-radius: 10px;
    padding: 10px;
}

.entity-thread-msg.is-note {
    border-color: rgba(121, 170, 255, 0.18);
    background: rgba(74, 115, 191, 0.08);
}

.entity-thread-msg.is-checklist {
    border-color: rgba(128, 216, 162, 0.18);
    background: rgba(61, 144, 92, 0.08);
}

.entity-thread-msg-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
}

.entity-thread-msg-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: #d7e2fb;
    border: 1px solid rgba(255,255,255,0.08);
}

.entity-thread-msg-author {
    color: #dfe8fb;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-thread-msg-time {
    color: #95a7c8;
}

.entity-thread-msg-body {
    color: #e7eefc;
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
}

.entity-thread-checklist-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.entity-thread-checklist {
    display: grid;
    gap: 6px;
}

.entity-thread-check-item {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: start;
    gap: 8px;
    font-size: 13px;
    color: inherit;
}

.entity-thread-check-item input[type="checkbox"] {
    margin: 1px 0 0;
}

.entity-thread-check-item span {
    min-width: 0;
    word-break: break-word;
}

.entity-thread-check-item.is-done span {
    text-decoration: line-through;
    opacity: 0.7;
}

.entity-thread-msg-mentions {
    margin-top: 6px;
    font-size: 11px;
    color: #9bc0ff;
}

.entity-doc-block {
    border: 1px solid rgba(20,30,45,0.06);
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 1px 0 rgba(20, 30, 45, 0.03);
}

.entity-doc-block.is-checklist {
    border-color: rgba(131,149,181,0.16);
    background: rgba(255,255,255,0.96);
}

.entity-doc-block.is-link {
    border-color: rgba(66, 118, 213, 0.14);
    background: rgba(66, 118, 213, 0.03);
}

.entity-doc-block-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    min-height: 38px;
}

.entity-doc-head-left {
    display: grid;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    width: auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.entity-doc-head-left > * {
    grid-area: 1 / 1;
    min-width: 0;
}

.entity-doc-head-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
    pointer-events: auto;
    isolation: isolate;
}

.entity-doc-head-right > * {
    position: relative;
    z-index: 6;
    pointer-events: auto;
}

.entity-doc-composer-head-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.entity-doc-composer-pill {
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(131,149,181,0.18);
    background: rgba(255,255,255,0.92);
    color: #5d7191;
    padding: 0 12px;
    font: 600 12px/1 'Figtree', sans-serif;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.entity-doc-composer-pill:hover {
    background: #ffffff;
    border-color: rgba(93, 126, 183, 0.28);
    color: #355f9b;
}

.entity-doc-composer-pill.is-private {
    border-style: dashed;
}

.entity-doc-composer-pill.is-active {
    background: rgba(98, 109, 127, 0.11);
    border-color: rgba(98, 109, 127, 0.34);
    color: #47586f;
}

.entity-doc-assignee-inline {
    cursor: pointer;
    margin-right: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    padding: 2px 4px;
    appearance: none;
    -webkit-appearance: none;
}

.entity-doc-assignee-inline:hover {
    background: rgba(255, 255, 255, 0.07);
}

.entity-doc-head-action-btn.entity-doc-note-visibility-trigger:hover {
    background: rgba(255, 255, 255, 0.07);
}

.entity-doc-head-action-btn.entity-doc-note-visibility-trigger:hover .team-overflow-popover,
.entity-doc-head-action-btn.entity-doc-note-visibility-trigger:focus-within .team-overflow-popover {
    display: grid;
    gap: 6px;
}

.entity-doc-assignee-inline .team-avatar,
.entity-doc-assignee-inline .team-pill {
    flex-shrink: 0;
}

.entity-doc-head-action-btn {
    width: 26px;
    min-width: 26px;
    height: 26px;
    border: 1px solid rgba(131,149,181,0.18);
    background: rgba(255,255,255,0.92);
    color: #667896;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: none;
    position: relative;
}

.entity-doc-note-reminder-trigger {
    width: 26px;
    min-width: 26px;
    height: 26px;
    color: #7d8da8;
    background: rgba(255,255,255,0.82);
    border-color: rgba(131,149,181,0.14);
    box-shadow: none;
}

.entity-doc-head-action-btn:hover {
    background: rgba(255,255,255,1);
    color: #355f9b;
    border-color: rgba(93, 126, 183, 0.28);
}

.entity-doc-head-action-btn.is-active {
    color: #355f9b;
    border-color: rgba(66,118,213,0.24);
    background: rgba(66,118,213,0.08);
}

.entity-doc-note-drag-handle {
    cursor: grab;
}

.entity-doc-note-drag-handle:active {
    cursor: grabbing;
}

.entity-doc-note-drag-handle-icon {
    width: 14px;
    height: 14px;
    display: block;
}

.entity-doc-head-right .entity-doc-head-reminder-badge {
    display: inline-flex;
    align-items: center;
}

.entity-doc-head-right .entity-doc-head-reminder-badge .entity-doc-note-badge-reminder {
    box-shadow: 0 4px 14px rgba(31, 49, 82, 0.08);
}

.entity-doc-head-right .entity-doc-head-reminder-badge .entity-doc-note-badge-main {
    white-space: nowrap;
}

.entity-doc-collapse-btn {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255,255,255,0.10);
    background: var(--ui-surface-soft-03);
    color: #8fa1bf;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.entity-doc-collapse-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: #d7e5fb;
}

.entity-doc-collapse-svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50% 50%;
}

.entity-doc-collapse-btn.is-collapsed .entity-doc-collapse-svg {
    transform: rotate(90deg);
}

.entity-doc-show-title-btn {
    border: 0;
    background: transparent;
    color: #8b98ac;
    border-radius: 999px;
    padding: 3px 9px;
    min-height: 24px;
    font: 500 11px/1.2 'Figtree', sans-serif;
    cursor: pointer;
    margin: 0;
    opacity: 0.78;
    align-self: center;
    justify-self: start;
    text-align: left;
}

.entity-doc-show-title-btn:hover {
    background: transparent;
    color: #d7e5fb;
    opacity: 1;
}

.entity-doc-block-kind {
    font-size: 11px;
    color: #6a7f9e;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.entity-doc-block textarea,
.entity-doc-input-title,
.entity-doc-input-url {
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(20,30,45,0.10);
    background: #fff;
    color: #1f3048;
    padding: 10px 12px;
    font: 400 14px/1.45 'Figtree', sans-serif;
}

.entity-doc-block textarea {
    min-height: 120px;
    resize: vertical;
}

.entity-doc-input-title {
    margin-bottom: 8px;
    font-weight: 500;
}

.entity-doc-input-url {
    margin-top: 8px;
}

.entity-doc-block textarea:focus,
.entity-doc-input-title:focus,
.entity-doc-input-url:focus {
    outline: none;
    border-color: rgba(84, 136, 236, 0.45);
    box-shadow: 0 0 0 2px rgba(84, 136, 236, 0.12);
}

.entity-doc-checklist-items {
    display: grid;
    gap: 6px;
}

.entity-doc-check-row {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    gap: 8px;
    align-items: center;
}

.entity-doc-check-row > input[type="checkbox"] {
    margin: 0;
}

.entity-doc-check-row > input[type="text"] {
    min-width: 0;
}

.entity-doc-check-row.is-done > input[type="text"] {
    text-decoration: line-through;
    opacity: 0.75;
}

.entity-doc-checklist-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-start;
}

.entity-doc-empty-inline {
    color: #7c92b0;
    font-size: 12px;
    padding: 4px 2px;
}

.entity-doc-toolbar-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0 12px;
    border-bottom: 1px solid rgba(20, 30, 45, 0.08);
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    background: rgba(247, 249, 253, 0.92);
    backdrop-filter: blur(8px);
    z-index: 2;
}

.entity-doc-canvas {
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 6px 0 28px;
    box-sizing: border-box;
}

.entity-doc-page {
    width: min(980px, 100%);
    background: #f7f9fd;
    color: #1d2b40;
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(20, 30, 45, 0.08);
    padding: 20px 28px 24px;
    box-sizing: border-box;
}

.entity-doc-page-titlewrap {
    margin-bottom: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(20, 30, 45, 0.08);
}

.entity-doc-page-title-label {
    font-size: 11px;
    color: #6f819d;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

.entity-doc-page-title-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #18263a;
    font: 700 30px/1.15 'Figtree', sans-serif;
    padding: 0;
}

.entity-doc-page-title-input::placeholder {
    color: #9aabc5;
}

.entity-doc-blocks {
    display: grid;
    gap: 12px;
    align-content: start;
}

.entity-doc-toolbar-group {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.entity-doc-toolbar-spacer {
    flex: 1 1 auto;
    min-width: 8px;
}

.entity-doc-toolbar-hint {
    font-size: 11px;
    color: #6f819d;
    white-space: nowrap;
}

.entity-doc-empty-state {
    border: 1px dashed rgba(20, 30, 45, 0.18);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 18px 16px;
    color: #4d627f;
}

.entity-doc-empty-title {
    font-weight: 600;
    color: #2a3b56;
    margin-bottom: 4px;
}

.entity-doc-empty-text {
    font-size: 13px;
    color: #6f819d;
}

.entity-doc-page.is-keep-layout {
    width: min(1040px, 100%);
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 8px 12px 18px;
    box-sizing: border-box;
}

.entity-doc-keep-top {
    position: sticky;
    top: 0;
    z-index: 3;
    padding-bottom: 8px;
    background: linear-gradient(180deg, rgba(237, 242, 251, 0.98), rgba(237, 242, 251, 0.9) 72%, rgba(237, 242, 251, 0));
}

.entity-doc-collection-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.entity-doc-collection-input {
    font: 500 14px/1.2 'Figtree', sans-serif;
    color: #354a68;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(131,149,181,0.18);
    border-radius: 10px;
    padding: 8px 10px;
}

.entity-doc-collection-input::placeholder {
    color: #8ea0bc;
}

.entity-doc-quickbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid rgba(131,149,181,0.2);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(17,31,56,0.10);
    padding: 12px 16px;
    box-sizing: border-box;
    min-width: 0;
}

.entity-doc-composer-card {
    background: #fff;
    border: 1px solid rgba(131,149,181,0.2);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(17,31,56,0.10);
    padding: 18px 18px 12px;
    box-sizing: border-box;
    min-width: 0;
}

.entity-doc-composer-head,
.entity-doc-note-card .entity-doc-block-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    min-height: 30px;
    position: relative;
}

.entity-doc-note-card .entity-doc-block-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
}

.entity-doc-composer-title,
.entity-doc-note-title-input,
.entity-doc-checklist-title-input {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    display: block;
    padding-right: 0;
}

.entity-doc-composer-title,
.entity-doc-note-title-input {
    border: 0;
    background: transparent;
    color: #1a2740;
    font: 500 18px/1.2 'Figtree', sans-serif;
    padding: 3px 9px;
    margin: -4px 0 4px;
    border-radius: 8px;
}

.entity-doc-block-head .entity-doc-note-title-input {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

.entity-doc-composer-head .entity-doc-composer-title {
    flex: 1 1 auto;
    margin: 0;
}

.entity-doc-composer-title::placeholder,
.entity-doc-note-title-input::placeholder {
    color: #6f819d;
}

.entity-doc-composer-title:focus,
.entity-doc-note-title-input:focus {
    outline: none;
    background: rgba(66,118,213,0.035);
    box-shadow: inset 0 0 0 1px rgba(66,118,213,0.16);
}

.entity-doc-composer-body,
.entity-doc-note-body-input {
    width: 100%;
    box-sizing: border-box;
    min-height: calc(1.35em + 6px);
    border: 0;
    resize: vertical;
    background: transparent;
    color: #1f3048;
    font: 400 15px/1.35 'Figtree', sans-serif;
    padding: 3px 9px;
    border-radius: 8px;
}

.entity-doc-composer-body::placeholder,
.entity-doc-note-body-input::placeholder {
    color: #6f819d;
}

.entity-doc-composer-body:focus,
.entity-doc-note-body-input:focus {
    outline: none;
    background: rgba(66,118,213,0.035);
    box-shadow: inset 0 0 0 1px rgba(66,118,213,0.16);
}

.entity-doc-rich-editor.is-inline-widget-dragging {
    background: rgba(66,118,213,0.035);
    box-shadow: inset 0 0 0 1px rgba(66,118,213,0.16);
}

.entity-doc-composer-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.entity-doc-composer-checklist {
    margin-top: 2px;
}

.entity-doc-composer-checklist-items {
    display: grid;
    gap: 2px;
}

.entity-doc-composer-check-row {
    display: grid;
    grid-template-columns: 18px 22px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 2px 0;
}

.entity-doc-composer-check-row > input[type="checkbox"] {
    opacity: 0.7;
    cursor: default;
    margin: 0;
}

.entity-doc-composer-check-row > input[type="text"] {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 6px 2px;
    font: 400 16px/1.3 'Figtree', sans-serif;
    color: #1f3048;
}

.entity-doc-composer-check-row .entity-doc-check-handle {
    margin-top: 0;
}

.entity-doc-composer-check-row .entity-doc-check-remove-btn {
    opacity: 0;
}

.entity-doc-composer-check-row:hover .entity-doc-check-remove-btn,
.entity-doc-composer-check-row:focus-within .entity-doc-check-remove-btn {
    opacity: 1;
}

.entity-doc-composer-check-row > input[type="text"]:focus {
    outline: none;
    background: rgba(66,118,213,0.035);
    box-shadow: inset 0 0 0 1px rgba(66,118,213,0.16);
}

.entity-doc-format-toolbar {
    position: absolute;
    left: 0;
    bottom: calc(100% + 2px);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(131,149,181,0.18);
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(17,31,56,0.16);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px) scale(.98);
    transform-origin: left bottom;
    transition: opacity .12s ease, transform .12s ease;
}

.entity-doc-format-toolbar.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.entity-doc-selection-action-menu {
    position: fixed;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
    background: rgba(26, 34, 48, 0.96);
    border: 1px solid rgba(126, 144, 176, 0.28);
    box-shadow: 0 16px 34px rgba(8, 16, 30, 0.26);
    backdrop-filter: blur(10px);
}

.entity-doc-selection-action-btn {
    border: 0;
    border-radius: 9px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #f4f7fb;
    font: 600 13px/1 'Figtree', sans-serif;
    cursor: pointer;
}

.entity-doc-selection-action-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.entity-doc-format-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.entity-doc-format-btn {
    min-width: 34px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #3f4650;
    border-radius: 8px;
    font: 600 14px/1 'Figtree', sans-serif;
    cursor: pointer;
    padding: 0 8px;
}

.entity-doc-format-btn:hover {
    background: rgba(20, 30, 45, 0.06);
}

.entity-doc-format-icon {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entity-doc-format-sep {
    width: 1px;
    height: 20px;
    background: rgba(131,149,181,0.22);
    margin: 0 2px;
}

.entity-doc-rich-editor {
    white-space: pre-wrap;
    word-break: break-word;
}

.entity-doc-rich-editor[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: #6f819d;
    pointer-events: none;
}

.entity-doc-rich-editor h1,
.entity-doc-rich-editor h2,
.entity-doc-rich-editor div,
.entity-doc-rich-editor p {
    margin: 0;
}

.entity-doc-rich-editor a {
    cursor: pointer;
}

.entity-doc-inline-password-widget {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    margin: 0 2px;
    border-radius: 999px;
    border: 1px solid rgba(131,149,181,0.2);
    background: rgba(26, 34, 48, 0.08);
    vertical-align: middle;
}

.entity-doc-inline-password-value {
    font: 700 12px/1 'Figtree', sans-serif;
    color: #24334d;
    letter-spacing: 0.08em;
}

.entity-doc-inline-password-widget.is-revealed .entity-doc-inline-password-value {
    letter-spacing: 0.01em;
}

.entity-doc-inline-password-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.entity-doc-inline-password-btn {
    border: 0;
    border-radius: 999px;
    padding: 4px 7px;
    background: rgba(66,118,213,0.12);
    color: #36527c;
    font: 700 11px/1 'Figtree', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.entity-doc-inline-password-btn:hover {
    background: rgba(66,118,213,0.18);
}

.entity-doc-inline-password-btn.is-toggle {
    width: 32px;
    min-width: 32px;
    height: 28px;
    padding: 0;
}

.entity-doc-password-icon {
    width: 17px;
    height: 17px;
    display: block;
    stroke: currentColor;
    fill: none;
    flex: 0 0 auto;
}

.entity-doc-rich-editor .entity-doc-mention-token {
    display: inline-block;
    padding: 0 6px;
    margin: 0 1px;
    border-radius: 999px;
    background: rgba(106, 153, 255, 0.18);
    color: #dce9ff;
    border: 1px solid rgba(106, 153, 255, 0.26);
    font-weight: 600;
}

.entity-doc-rich-editor .entity-doc-mention-token.is-unread-receipt {
    box-shadow: inset 0 0 0 1px rgba(131, 176, 255, 0.22);
}

.entity-doc-rich-editor h1 {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}

.entity-doc-rich-editor h2 {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.entity-doc-inline-block {
    border: 1px solid rgba(131,149,181,0.18);
    background: rgba(255,255,255,0.7);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 6px 0;
}

.entity-doc-inline-attachment-widget {
    border: 0;
    background: transparent;
    border-radius: 0;
}

.entity-doc-inline-checklist-widget {
    display: block;
    position: relative;
    padding: 10px 10px;
    border-radius: 10px;
}

.entity-doc-inline-checklist-widget.is-dragging {
    opacity: 0.55;
}

.entity-doc-inline-checklist-widget-handle {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: #95a3b7;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.entity-doc-inline-checklist-widget-handle:hover {
    color: #4c6487;
    background: rgba(66, 118, 213, 0.08);
}

.entity-doc-rich-editor .entity-doc-inline-checklist-widget {
    margin-top: 8px;
    margin-bottom: 8px;
}

.entity-doc-inline-checklist-title {
    font: 700 13px/1.2 'Figtree', sans-serif;
    color: #24334d;
    margin: 0 22px 6px 22px !important;
}

.entity-doc-inline-checklist-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: #98a6b8;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
}

.entity-doc-inline-checklist-widget:hover .entity-doc-inline-checklist-delete,
.entity-doc-inline-checklist-widget:focus-within .entity-doc-inline-checklist-delete {
    opacity: 1;
}

.entity-doc-inline-checklist-delete:hover {
    color: #b74444;
    background: rgba(194, 68, 68, 0.08);
}

.entity-doc-rich-editor > .drop-before,
.entity-doc-rich-editor > .drop-after {
    position: relative;
}

.entity-doc-rich-editor > .drop-before::before,
.entity-doc-rich-editor > .drop-after::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: rgba(66, 118, 213, 0.65);
}

.entity-doc-rich-editor.is-inline-widget-dragging > .drop-before::before,
.entity-doc-rich-editor.is-inline-widget-dragging > .drop-after::after {
    height: 3px;
    background: rgba(45, 106, 214, 0.9);
    box-shadow: 0 0 0 3px rgba(45, 106, 214, 0.12);
}

.entity-doc-rich-editor.is-inline-widget-dragging > .drop-before::after,
.entity-doc-rich-editor.is-inline-widget-dragging > .drop-after::before {
    position: absolute;
    right: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(45, 106, 214, 0.12);
    color: #2d5ea8;
    font: 600 11px/1.2 'Figtree', sans-serif;
    letter-spacing: 0.02em;
}

.entity-doc-rich-editor > .drop-before::before {
    top: -5px;
}

.entity-doc-rich-editor > .drop-after::after {
    bottom: -5px;
}

.entity-doc-rich-editor.is-inline-widget-dragging > .drop-before::after {
    content: "Hier ablegen";
    top: -24px;
}

.entity-doc-rich-editor.is-inline-widget-dragging > .drop-after::before {
    content: "Hier ablegen";
    bottom: -24px;
}

.entity-doc-inline-checklist-items {
    display: grid;
    gap: 3px;
}

.entity-doc-inline-checklist-row {
    display: grid;
    grid-template-columns: 14px 18px 1fr auto;
    align-items: center;
    gap: 6px;
    position: relative;
    border-radius: 6px;
    padding: 1px 0;
}

.entity-doc-inline-checklist-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8fa0b8;
}

.entity-doc-inline-checklist-handle-icon {
    width: 12px;
    height: 12px;
    display: block;
}

.entity-doc-inline-checklist-row.drop-before::before,
.entity-doc-inline-checklist-row.drop-after::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: rgba(66,118,213,0.55);
}

.entity-doc-inline-checklist-row.drop-before::before {
    top: -3px;
}

.entity-doc-inline-checklist-row.drop-after::after {
    bottom: -3px;
}

.entity-doc-inline-checklist-row.is-dragging {
    opacity: 0.55;
}

.entity-doc-inline-checklist-handle {
    color: #95a3b7;
    font-size: 11px;
    line-height: 1;
    letter-spacing: -1px;
    user-select: none;
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
}

.entity-doc-inline-checklist-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
}

.entity-doc-inline-checklist-text {
    min-height: 18px;
    outline: none;
    border-radius: 6px;
    padding: 0 2px;
    line-height: 1.25;
}

.entity-doc-inline-checklist-text:empty::before {
    content: 'Listeneintrag';
    color: #7b8ca5;
}

.entity-doc-inline-checklist-row.is-checked .entity-doc-inline-checklist-text {
    color: #6f7b8d;
    text-decoration: line-through;
}

.entity-doc-inline-checklist-remove {
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: #9aa6b8;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
}

.entity-doc-inline-checklist-row:hover .entity-doc-inline-checklist-remove,
.entity-doc-inline-checklist-row:focus-within .entity-doc-inline-checklist-remove {
    opacity: 1;
}

.entity-doc-inline-checklist-remove:hover {
    color: #b74444;
    background: rgba(194, 68, 68, 0.08);
}

.entity-doc-inline-checklist-add {
    margin-top: 4px;
    border: 0;
    background: transparent;
    color: #5d6b7d;
    font: 500 13px/1.2 'Figtree', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 4px 6px;
    cursor: pointer;
}

.entity-doc-inline-checklist-add:hover {
    background: rgba(66,118,213,0.06);
    color: #355f9b;
}

.entity-doc-inline-checklist-completed-wrap {
    margin-top: 6px;
    border-top: 1px solid rgba(131,149,181,0.16);
    padding-top: 6px;
}

.entity-doc-inline-checklist-completed-head {
    border: 0;
    background: transparent;
    color: #616f83;
    font: 500 12px/1.2 'Figtree', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0 4px;
    cursor: pointer;
}

.entity-doc-inline-checklist-completed-caret {
    width: 16px;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.entity-doc-inline-checklist-items-done .entity-doc-inline-checklist-row {
    opacity: 0.92;
}

.entity-doc-inline-link a {
    color: #335f9c;
    text-decoration: underline;
}

.entity-doc-inline-image {
    color: #5f6f86;
}

.entity-doc-inline-attachment-widget {
    margin: 12px 0;
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    width: fit-content;
    max-width: fit-content;
}

.entity-doc-inline-attachment-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border: 1px solid rgba(83, 125, 192, 0.18);
    background: rgba(248, 251, 255, 0.9);
    color: inherit;
    cursor: pointer;
    width: fit-content;
    max-width: fit-content;
    line-height: 0;
    flex: 0 0 auto;
}

.entity-doc-inline-attachment-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border: 0;
    color: #98a6b8;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    z-index: 1;
}

.entity-doc-inline-attachment-widget:hover .entity-doc-inline-attachment-delete,
.entity-doc-inline-attachment-widget:focus-within .entity-doc-inline-attachment-delete {
    opacity: 1;
}

.entity-doc-inline-attachment-delete:hover {
    color: #b74444;
    background: rgba(194, 68, 68, 0.08);
}

.entity-doc-inline-attachment-thumb {
    width: auto;
    min-width: 0;
    height: auto;
    max-width: 320px;
    max-height: 240px;
    border-radius: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(83, 125, 192, 0.14);
}

.entity-doc-inline-attachment-thumb img {
    width: auto;
    height: auto;
    max-width: 320px;
    max-height: 240px;
    object-fit: contain;
    display: block;
}

.entity-doc-inline-attachment-thumb video,
.entity-doc-inline-attachment-thumb iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
    pointer-events: none;
    background: #fff;
}

.entity-doc-inline-attachment-pdf-canvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 320px;
    max-height: 240px;
}

.entity-doc-inline-attachment-thumb.is-empty,
.entity-doc-inline-attachment-thumb.is-generic {
    background: linear-gradient(135deg, rgba(83, 125, 192, 0.16), rgba(83, 125, 192, 0.08));
}

.entity-doc-inline-attachment-thumb-label {
    padding: 0 6px;
    font: 700 12px/1.1 'Figtree', sans-serif;
    color: #335f9c;
    text-align: center;
}

.entity-doc-inline-attachment-thumb.is-image {
    background: transparent;
}

.entity-doc-inline-attachment-thumb.is-video,
.entity-doc-inline-attachment-thumb.is-pdf,
.entity-doc-inline-attachment-thumb.is-office,
.entity-doc-inline-attachment-thumb.is-file,
.entity-doc-inline-attachment-thumb.is-generic {
    width: 320px;
    height: auto;
    aspect-ratio: 16 / 9;
}

.entity-doc-inline-attachment-thumb.is-empty {
    width: 220px;
    aspect-ratio: 4 / 3;
}

.entity-doc-inline-attachment-picker-dialog {
    width: min(560px, calc(100vw - 32px));
}

.entity-doc-inline-attachment-picker-dropzone {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px dashed rgba(83, 125, 192, 0.34);
    border-radius: 14px;
    background: rgba(244, 248, 255, 0.72);
}

.entity-doc-inline-attachment-picker-dropzone.is-drag-active {
    border-color: rgba(83, 125, 192, 0.62);
    background: rgba(226, 236, 255, 0.9);
}

.entity-doc-inline-attachment-picker-dropzone-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #556884;
    font: 500 12px/1.35 'Figtree', sans-serif;
}

.entity-doc-inline-attachment-picker-dropzone-copy strong {
    color: #22324a;
    font-weight: 700;
}

.entity-doc-inline-attachment-picker-list {
    margin-top: 12px;
    display: grid;
    gap: 8px;
    max-height: min(48vh, 420px);
    overflow: auto;
}

.entity-doc-inline-attachment-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 1px solid rgba(83, 125, 192, 0.2);
    border-radius: 14px;
    background: rgba(244, 248, 255, 0.88);
    padding: 10px 12px;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.entity-doc-inline-attachment-picker-thumb {
    width: 56px;
    min-width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(83, 125, 192, 0.14);
    border: 1px solid rgba(83, 125, 192, 0.16);
}

.entity-doc-inline-attachment-picker-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.entity-doc-inline-attachment-picker-thumb.is-generic span {
    color: #335f9c;
    font: 700 11px/1 'Figtree', sans-serif;
}

.entity-doc-inline-attachment-picker-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.entity-doc-inline-attachment-picker-title {
    color: #22324a;
    font: 700 14px/1.25 'Figtree', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-doc-inline-attachment-picker-meta {
    color: #6f829f;
    font: 500 12px/1.35 'Figtree', sans-serif;
}

.entity-doc-inline-attachment-picker-empty {
    padding: 16px;
    border-radius: 14px;
    background: rgba(244, 248, 255, 0.72);
    color: #6f829f;
    font: 500 12px/1.4 'Figtree', sans-serif;
}

.entity-doc-inline-insert-marker {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
    line-height: 0;
}

.entity-doc-inline-video {
    padding: 8px;
}

.entity-doc-inline-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(17, 31, 56, 0.06);
}

.entity-doc-inline-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.entity-doc-inline-video-link {
    margin-top: 6px;
    font: 500 12px/1.2 'Figtree', sans-serif;
    overflow-wrap: anywhere;
}

.entity-doc-inline-video-link a {
    color: #335f9c;
    text-decoration: underline;
}

.entity-doc-inline-reminder-widget {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 8px 0;
    border-radius: 12px;
    border: 1px solid rgba(131,149,181,0.18);
    background: rgba(255,255,255,0.7);
    padding: 4px 28px 4px 6px;
    max-width: 100%;
}

.entity-doc-inline-reminder-main {
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #425a7d;
    cursor: pointer;
    max-width: 100%;
}

.entity-doc-inline-reminder-main:hover {
    color: #314869;
}

.entity-doc-inline-reminder-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.entity-doc-inline-reminder-icon .entity-doc-action-svg {
    width: 16px;
    height: 16px;
}

.entity-doc-inline-reminder-when {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.entity-doc-inline-reminder-person,
.entity-doc-inline-reminder-text {
    font-size: 12px;
    opacity: 0.9;
    white-space: nowrap;
}

.entity-doc-inline-reminder-person::before,
.entity-doc-inline-reminder-text::before {
    content: "•";
    margin-right: 6px;
    opacity: 0.55;
}

.entity-doc-inline-reminder-text {
    opacity: 0.82;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-doc-inline-reminder-delete {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    color: #8fa1bc;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    opacity: 0;
}

.entity-doc-inline-reminder-widget:hover .entity-doc-inline-reminder-delete,
.entity-doc-inline-reminder-widget:focus-within .entity-doc-inline-reminder-delete {
    opacity: 1;
}

.entity-doc-inline-reminder-delete:hover {
    background: rgba(31,48,72,0.06);
    color: #5e7290;
}

.entity-doc-inline-reminder-widget.is-overdue {
    background: rgba(214, 86, 101, 0.09);
    border-color: rgba(214, 86, 101, 0.20);
}

.entity-doc-inline-reminder-widget.is-today {
    background: rgba(225, 157, 69, 0.10);
    border-color: rgba(225, 157, 69, 0.22);
}

.entity-doc-inline-reminder-widget.is-tomorrow {
    background: rgba(86, 133, 224, 0.08);
    border-color: rgba(86, 133, 224, 0.18);
}

.entity-doc-inline-reminder-widget.is-future {
    background: rgba(94, 140, 120, 0.08);
    border-color: rgba(94, 140, 120, 0.18);
}

.entity-doc-quickbar-input {
    text-align: left;
    border: 0;
    background: transparent;
    color: #516782;
    font: 500 16px/1.2 'Figtree', sans-serif;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
}

.entity-doc-quickbar-input:hover {
    background: rgba(66,118,213,0.05);
    color: #324c72;
}

.entity-doc-quickbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.entity-doc-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: #637a9a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}

.entity-doc-icon-btn:hover {
    background: rgba(66,118,213,0.08);
    color: #345b96;
}

.entity-doc-icon-btn.is-disabled,
.entity-doc-icon-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.entity-doc-section {
    margin-top: 16px;
}

.entity-doc-section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6f819d;
    text-transform: uppercase;
    margin: 0 2px 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(131,149,181,0.16);
}

.entity-doc-blocks.entity-doc-blocks-notes {
    display: grid;
    gap: 10px;
}

.entity-doc-note-card {
    border-radius: 16px;
    border: 1px solid rgba(131,149,181,0.18);
    background: rgba(255,255,255,0.96);
    box-shadow: 0 2px 8px rgba(17,31,56,0.06);
    padding: 14px 14px 10px;
    position: relative;
    box-sizing: border-box;
    min-width: 0;
}

.entity-doc-note-card.is-archived-note {
    opacity: 0.84;
}

.entity-doc-note-card.is-private-note,
.entity-doc-composer-card.is-private-note {
    border-style: dashed;
    border-color: rgba(111, 123, 142, 0.4);
    background: linear-gradient(180deg, rgba(245, 247, 250, 0.98) 0%, rgba(239, 242, 246, 0.98) 100%);
    box-shadow: 0 2px 8px rgba(17,31,56,0.04);
}

.entity-doc-note-card.is-private-note::before,
.entity-doc-composer-card.is-private-note::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 4px dashed rgba(111, 123, 142, 0.24);
    border-radius: 16px;
    pointer-events: none;
}

.entity-doc-composer-card.is-private-note {
    background: rgba(255,255,255,0.96);
    box-shadow: 0 2px 8px rgba(17,31,56,0.06);
}

.entity-doc-section-archived .entity-doc-section-label {
    color: #8a97ad;
}

.entity-doc-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.entity-doc-section-toggle-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6f819d;
    background: rgba(131,149,181,0.10);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.entity-doc-note-card.is-pinned-sortable {
    cursor: grab;
}

.entity-doc-note-card.is-block-sortable.is-dragging,
.entity-doc-note-card.is-pinned-sortable.is-dragging {
    opacity: 0.72;
}

.entity-doc-note-card.is-block-sortable.drop-before::before,
.entity-doc-note-card.is-block-sortable.drop-after::after,
.entity-doc-note-card.is-pinned-sortable.drop-before::before,
.entity-doc-note-card.is-pinned-sortable.drop-after::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    height: 3px;
    border-radius: 999px;
    background: rgba(66,118,213,0.9);
    box-shadow: 0 0 0 2px rgba(66,118,213,0.14);
    pointer-events: none;
}

.entity-doc-note-card.is-block-sortable.drop-before::before,
.entity-doc-note-card.is-pinned-sortable.drop-before::before {
    top: -7px;
}

.entity-doc-note-card.is-block-sortable.drop-after::after,
.entity-doc-note-card.is-pinned-sortable.drop-after::after {
    bottom: -7px;
}

.entity-doc-note-card .entity-doc-block-kind {
    font-size: 10px;
    color: #7288aa;
    visibility: hidden;
}

.entity-doc-note-card textarea,
.entity-doc-note-card .entity-doc-input-title,
.entity-doc-note-card .entity-doc-input-url {
    border: 0;
    background: transparent;
    border-radius: 10px;
    box-shadow: none;
    padding: 3px 9px;
    box-sizing: border-box;
    min-width: 0;
}

.entity-doc-note-card textarea {
    min-height: 64px;
}

.entity-doc-note-badges {
    min-height: 24px;
    display: flex;
    align-items: center;
    align-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.entity-doc-note-card > .entity-doc-note-badges,
.entity-doc-composer-card > .entity-doc-note-badges {
    display: none !important;
}

.entity-doc-note-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: rgba(110, 126, 149, 0.12);
    color: #4e6486;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    cursor: default;
}

.entity-doc-note-badge-reminder {
    cursor: default;
}

.entity-doc-note-badge-reminder:hover {
    background: rgba(110, 126, 149, 0.17);
}

.entity-doc-note-badge-reminder.is-overdue:not(.is-done) {
    background: rgba(204, 64, 83, 0.14);
    color: #9f3448;
}

.entity-doc-note-badge-reminder.is-today:not(.is-done) {
    background: rgba(214, 149, 57, 0.16);
    color: #855915;
}

.entity-doc-note-badge-reminder.is-tomorrow:not(.is-done) {
    background: rgba(66, 118, 213, 0.12);
    color: #345a92;
}

.entity-doc-note-badge-reminder.is-future:not(.is-done) {
    background: rgba(77, 125, 106, 0.12);
    color: #426657;
}

.entity-doc-note-badge-reminder.is-done {
    background: rgba(110, 126, 149, 0.08);
    color: #8b96a8;
}

.entity-doc-note-badge-assignee {
    background: rgba(61, 110, 193, 0.10);
    color: #365f99;
    font-weight: 600;
}

.entity-doc-note-badge-private {
    background: rgba(98, 109, 127, 0.12);
    color: #526174;
    border: 1px dashed rgba(98, 109, 127, 0.32);
    font-weight: 700;
}

.entity-doc-note-badge-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: currentColor;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.entity-doc-note-badge-reminder.is-done .entity-doc-note-badge-main {
    opacity: 0.78;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.entity-doc-note-badge-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.entity-doc-note-badge-icon .entity-doc-action-svg {
    width: 14px;
    height: 14px;
}

.entity-doc-note-badge-label {
    white-space: nowrap;
}

.entity-doc-note-badge-note {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.9;
}

.entity-doc-note-badge-done,
.entity-doc-note-badge-clear {
    border: 0;
    background: transparent;
    color: currentColor;
    opacity: 0.6;
    padding: 0 1px;
    line-height: 1;
    cursor: pointer;
}

.entity-doc-note-badge-done:hover,
.entity-doc-note-badge-clear:hover {
    opacity: 1;
}

.entity-doc-note-badge-done.is-active {
    opacity: 1;
    color: #70c78d;
}

.entity-doc-note-pin-btn {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: #8a96a8;
    border-radius: 6px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.72;
    position: static;
    z-index: 2;
    padding: 0;
}

.entity-doc-note-pin-btn:hover {
    background: rgba(20, 30, 45, 0.035);
    color: #647388;
    opacity: 0.95;
}

.entity-doc-note-pin-btn.is-pinned {
    color: #355f9b;
    background: rgba(66,118,213,0.08);
    opacity: 0.92;
}

.entity-doc-note-pin-btn.is-pinned:hover {
    background: rgba(66,118,213,0.12);
}

.entity-doc-pin-svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entity-doc-note-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.entity-doc-note-card .entity-doc-note-footer {
    position: sticky;
    bottom: -2px;
    z-index: 2;
    padding: 8px 0 14px 0;
    border-top: 1px solid rgba(131,149,181,0.12);
    background: #ffffff;
    opacity: 1;
    pointer-events: auto;
    max-height: none;
    overflow: visible;
    isolation: isolate;
}

.entity-doc-note-footer-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.entity-doc-note-footer-right {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.entity-doc-note-meta-stack {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
    min-height: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-right: 4px;
}

.entity-doc-note-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.entity-doc-like-btn {
    min-width: 46px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(131,149,181,0.18);
    background: rgba(255,255,255,0.92);
    color: #667896;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: 600 12px/1 'Figtree', sans-serif;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.entity-doc-like-btn:hover {
    background: rgba(255,255,255,1);
    color: #355f9b;
    border-color: rgba(93, 126, 183, 0.28);
}

.entity-doc-like-btn.is-active {
    color: #a63f63;
    border-color: rgba(166,63,99,0.24);
    background: rgba(166,63,99,0.08);
}

.entity-doc-like-btn-icon {
    font-size: 14px;
    line-height: 1;
}

.entity-doc-like-btn-count {
    min-width: 8px;
    text-align: center;
}

.entity-doc-like-popover {
    min-width: 156px;
}

.entity-doc-like-popover-empty {
    color: #e9eefc;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
}

.entity-doc-note-edited {
    color: #5f6f86;
    font: 500 11px/1.15 'Figtree', sans-serif;
    white-space: nowrap;
    text-align: right;
}

.entity-doc-note-created {
    color: #6f7f95;
    font: 500 11px/1.15 'Figtree', sans-serif;
    white-space: nowrap;
    display: none;
    text-align: right;
}

.entity-doc-note-card:hover .entity-doc-note-created,
.entity-doc-note-card:focus-within .entity-doc-note-created {
    display: inline;
}

.entity-doc-note-action-btn {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #666d76;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-family: 'Figtree', 'Segoe UI Symbol', sans-serif;
    font-variant-emoji: text;
    line-height: 1;
    opacity: 0.95;
    cursor: default;
}

.entity-doc-note-action-btn:disabled {
    opacity: 0.9;
}

.entity-doc-action-svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entity-doc-mention-popup {
    position: fixed;
    z-index: 12020;
    min-width: 220px;
    max-width: 300px;
    display: grid;
    gap: 3px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(26, 34, 47, 0.98);
    box-shadow: 0 14px 28px rgba(0,0,0,0.34);
    backdrop-filter: blur(8px);
}

.entity-doc-mention-reply-hover-btn {
    position: fixed;
    z-index: 12025;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(25, 31, 44, 0.96);
    color: #dce7fb;
    box-shadow: 0 10px 22px rgba(0,0,0,0.28);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
}

.entity-doc-mention-reply-hover-btn.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.board-attachment-cell.is-drag-over .board-attachment-hover,
.board-attachment-cell.is-uploading .board-attachment-hover {
    display: none;
}

.entity-doc-mention-reply-hover-btn .entity-doc-action-svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.entity-doc-mention-reply-hover-btn span {
    font: 600 11px/1 'Figtree', sans-serif;
}

.entity-doc-mention-reply-hover-btn:hover {
    background: rgba(37, 47, 67, 0.98);
    border-color: rgba(255,255,255,0.20);
}

.entity-doc-mention-item {
    border: 0;
    background: transparent;
    color: #dfe8fb;
    border-radius: 10px;
    padding: 8px 10px;
    display: grid;
    text-align: left;
    gap: 2px;
    cursor: pointer;
}

.entity-doc-mention-item:hover,
.entity-doc-mention-item.is-active {
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.entity-doc-mention-name {
    font: 600 13px/1.2 'Figtree', sans-serif;
    color: inherit;
}

.entity-doc-mention-email {
    font: 400 11px/1.2 'Figtree', sans-serif;
    color: #9db0d3;
}

.entity-doc-note-close-btn {
    border: 0;
    background: transparent;
    color: #1b2430;
    font: 500 15px/1.2 'Figtree', sans-serif;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer;
}

.entity-doc-note-close-btn:hover {
    background: rgba(20, 30, 45, 0.05);
}

.entity-doc-note-delete-btn {
    border: 0;
    background: transparent;
    color: #b74444;
    font: 500 14px/1.2 'Figtree', sans-serif;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.entity-doc-note-delete-btn:hover {
    background: rgba(194, 68, 68, 0.08);
}

.entity-doc-note-card textarea:focus,
.entity-doc-note-card .entity-doc-input-title:focus,
.entity-doc-note-card .entity-doc-input-url:focus {
    background: rgba(66,118,213,0.035);
    box-shadow: inset 0 0 0 1px rgba(66,118,213,0.16);
    border-color: transparent;
}

.entity-doc-note-card.is-link .entity-doc-input-url {
    margin-top: 2px;
    color: #335f9c;
}

.entity-doc-note-card .entity-doc-check-row {
    grid-template-columns: 18px 22px 1fr auto;
    align-items: start;
    padding: 4px 0;
}

.entity-doc-note-card .entity-doc-check-row > input[type="checkbox"] {
    margin-top: 5px;
}

.entity-doc-note-card .entity-doc-input-title {
    font: 600 18px/1.2 'Figtree', sans-serif;
    color: #1a2740;
    padding-bottom: 2px;
}

.entity-doc-note-card .entity-doc-checklist-items {
    margin-top: 4px;
}

.entity-doc-check-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    color: #8b98ac;
    font-size: 13px;
    line-height: 1;
    user-select: none;
    letter-spacing: -1px;
    margin-top: 3px;
}

.entity-doc-check-remove-btn {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #a7b0bc;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}

.entity-doc-check-row:hover .entity-doc-check-remove-btn,
.entity-doc-check-row:focus-within .entity-doc-check-remove-btn {
    opacity: 1;
}

.entity-doc-check-row[draggable="true"] {
    cursor: default;
    position: relative;
}

.entity-doc-check-row.is-dragging {
    opacity: 0.55;
}

.entity-doc-check-row.drop-before::before,
.entity-doc-check-row.drop-after::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #4b7bd1;
    border-radius: 999px;
}

.entity-doc-check-row.drop-before::before {
    top: -3px;
}

.entity-doc-check-row.drop-after::after {
    bottom: -3px;
}

.entity-doc-check-remove-btn:hover {
    background: rgba(194, 68, 68, 0.08);
    color: #b74444;
}

.entity-doc-checklist-title-input {
    font: 600 20px/1.2 'Figtree', sans-serif;
    color: #1a2740;
    margin-bottom: 8px;
}

.entity-doc-checklist-items-open {
    margin-top: 2px;
}

.entity-doc-checklist-addline {
    margin-top: 6px;
}

.entity-doc-checklist-add-btn {
    border: 0;
    background: transparent;
    color: #61656d;
    font: 500 15px/1.2 'Figtree', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
}

.entity-doc-checklist-add-btn:hover {
    background: rgba(20, 30, 45, 0.05);
}

.entity-doc-checklist-add-btn > span:first-child {
    font-size: 20px;
    line-height: 1;
    color: #5f6470;
}

.entity-doc-checklist-completed-wrap {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(131,149,181,0.16);
}

.entity-doc-checklist-completed-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4c607d;
    font: 500 14px/1.2 'Figtree', sans-serif;
    margin-bottom: 10px;
    border: 0;
    background: transparent;
    padding: 4px 2px;
    border-radius: 8px;
    cursor: pointer;
}

.entity-doc-checklist-completed-head:hover {
    background: rgba(20, 30, 45, 0.04);
}

.entity-doc-checklist-items-done .entity-doc-check-row {
    opacity: 0.92;
}

.entity-doc-checklist-items-done .entity-doc-check-row > input[type="text"] {
    text-decoration: line-through;
    color: #7d8795;
}

/* Saved checklist cards should read like a clean list; reveal editing controls on interaction */
.entity-doc-note-card.is-checklist .entity-doc-block-kind,
.entity-doc-note-card.is-checklist .entity-doc-note-pin-btn,
.entity-doc-note-card.is-checklist .entity-doc-note-footer,
.entity-doc-note-card.is-checklist .entity-doc-checklist-addline {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: opacity .12s ease;
}

.entity-doc-note-card.is-checklist .entity-doc-check-handle {
    opacity: 0;
}

.entity-doc-note-card.is-checklist .entity-doc-check-remove-btn {
    opacity: 0 !important;
}

.entity-doc-note-card.is-checklist .entity-doc-check-row {
    grid-template-columns: 0 22px 1fr 0;
    gap: 10px;
}

.entity-doc-note-card.is-checklist .entity-doc-check-row > input[type="checkbox"] {
    margin-top: 6px;
}

.entity-doc-note-card.is-checklist .entity-doc-check-row > input[type="text"] {
    font: 400 16px/1.35 'Figtree', sans-serif;
    color: #1f3048;
    padding-top: 5px;
    padding-bottom: 5px;
}

.entity-doc-note-card.is-checklist .entity-doc-checklist-title-input {
    margin-bottom: 12px;
    max-width: calc(100% - 44px);
    margin-top: -4px;
}

.entity-doc-note-card.is-no-title .entity-doc-note-title-input,
.entity-doc-note-card.is-no-title .entity-doc-checklist-title-input,
.entity-doc-note-card.is-no-title .entity-doc-input-title {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.entity-doc-note-card.is-no-title.force-show-title .entity-doc-note-title-input,
.entity-doc-note-card.is-no-title.force-show-title .entity-doc-checklist-title-input,
.entity-doc-note-card.is-no-title.force-show-title .entity-doc-input-title,
.entity-doc-note-card.is-no-title:has(.entity-doc-note-title-input:focus) .entity-doc-note-title-input,
.entity-doc-note-card.is-no-title:has(.entity-doc-checklist-title-input:focus) .entity-doc-checklist-title-input,
.entity-doc-note-card.is-no-title:has(.entity-doc-input-title:focus) .entity-doc-input-title {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.entity-doc-note-card.is-text.is-no-title .entity-doc-note-body-input {
    margin-top: 0;
    min-height: 56px;
    padding-top: 0;
}

.entity-doc-note-card.is-no-title .entity-doc-block-head {
    margin-bottom: 8px;
}

.entity-doc-note-card.is-text.is-no-title.force-show-title .entity-doc-show-title-btn,
.entity-doc-note-card.is-text.is-no-title:has(.entity-doc-note-title-input:focus) .entity-doc-show-title-btn {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.entity-doc-collapsed-preview {
    display: none;
    margin: -2px 0 2px;
    padding: 2px 9px 0;
    color: #5f7392;
    font: 400 15px/1.25 'Figtree', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    border: 0;
    background: transparent;
    outline: none;
    box-sizing: border-box;
}

.entity-doc-note-card.is-collapsed-note .entity-doc-note-body-input,
.entity-doc-note-card.is-collapsed-note .entity-doc-checklist-items,
.entity-doc-note-card.is-collapsed-note .entity-doc-checklist-addline,
.entity-doc-note-card.is-collapsed-note .entity-doc-checklist-completed-wrap,
.entity-doc-note-card.is-collapsed-note .entity-doc-input-url,
.entity-doc-note-card.is-collapsed-note .entity-doc-note-badges,
.entity-doc-note-card.is-collapsed-note .entity-doc-note-footer {
    display: none !important;
}

.entity-doc-note-card.is-collapsed-note {
    padding-bottom: 10px;
}

.entity-doc-note-card.is-collapsed-note .entity-doc-note-title-input,
.entity-doc-note-card.is-collapsed-note .entity-doc-checklist-title-input,
.entity-doc-note-card.is-collapsed-note .entity-doc-input-title {
    margin-bottom: 0;
}

.entity-doc-note-card.is-collapsed-note .entity-doc-show-title-btn {
    display: none;
}

.entity-doc-note-card.is-collapsed-note.is-no-title .entity-doc-collapsed-preview {
    display: block;
}

.entity-doc-note-card.is-checklist.is-no-title .entity-doc-checklist-items-open {
    margin-top: 0;
}

.entity-doc-note-card.is-checklist:hover .entity-doc-block-kind,
.entity-doc-note-card.is-checklist:hover .entity-doc-note-pin-btn,
.entity-doc-note-card.is-checklist:hover .entity-doc-note-footer,
.entity-doc-note-card.is-checklist:hover .entity-doc-checklist-addline,
.entity-doc-note-card.is-checklist:focus-within .entity-doc-block-kind,
.entity-doc-note-card.is-checklist:focus-within .entity-doc-note-pin-btn,
.entity-doc-note-card.is-checklist:focus-within .entity-doc-note-footer,
.entity-doc-note-card.is-checklist:focus-within .entity-doc-checklist-addline {
    opacity: 1;
    pointer-events: auto;
    max-height: 240px;
    overflow: visible;
}

.entity-doc-note-card.is-checklist:hover .entity-doc-check-handle,
.entity-doc-note-card.is-checklist:focus-within .entity-doc-check-handle {
    opacity: 1;
}

.entity-doc-note-card.is-checklist:hover .entity-doc-check-remove-btn,
.entity-doc-note-card.is-checklist:focus-within .entity-doc-check-remove-btn {
    opacity: 1 !important;
}

.entity-doc-note-card.is-checklist:hover .entity-doc-check-row,
.entity-doc-note-card.is-checklist:focus-within .entity-doc-check-row {
    grid-template-columns: 18px 22px 1fr auto;
}

.entity-thread-compose {
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 10px 14px 12px;
    background: rgba(13, 18, 29, 0.42);
    grid-row: 3;
}

.entity-thread-compose-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.entity-thread-compose-top select {
    min-width: 120px;
    max-width: 160px;
}

.entity-thread-reminder-placeholder {
    font-size: 11px;
    color: #8fa2c4;
    margin-left: auto;
}

.entity-thread-compose textarea {
    width: 100%;
    min-height: 88px;
    resize: vertical;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #eef3fd;
    padding: 10px 12px;
    font: 400 13px/1.4 'Figtree', sans-serif;
}

.entity-thread-title-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #eef3fd;
    padding: 9px 11px;
    font: 500 13px/1.2 'Figtree', sans-serif;
}

.entity-thread-compose textarea:focus {
    outline: none;
    border-color: rgba(84, 136, 236, 0.45);
    box-shadow: 0 0 0 2px rgba(84, 136, 236, 0.12);
}

.entity-thread-title-input:focus {
    outline: none;
    border-color: rgba(84, 136, 236, 0.45);
    box-shadow: 0 0 0 2px rgba(84, 136, 236, 0.12);
}

.entity-thread-compose-actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.entity-thread-hint {
    font-size: 11px;
    color: #90a3c5;
}

:root[data-theme="light"] .entity-thread-overlay {
    background: rgba(16, 24, 38, 0.16);
}

:root[data-theme="light"] .entity-thread-overlay.has-background-focus {
    background: rgba(16, 24, 38, 0.1);
}

:root[data-theme="light"] .modal {
    background: rgba(16, 24, 38, 0.16);
}

:root[data-theme="light"] .entity-thread-drawer {
    background: linear-gradient(180deg, #f9fbff 0%, #f2f6fd 100%);
    border-color: rgba(18, 30, 48, 0.12);
    box-shadow: 0 22px 38px rgba(17,31,56,0.12);
}

:root[data-theme="light"] #entityAttachmentDrawer {
    background:
        linear-gradient(180deg, rgba(252, 253, 255, 0.99), rgba(241, 246, 255, 0.96));
}

:root[data-theme="light"] #entityAttachmentBody {
    background: #edf2fb;
}

:root[data-theme="light"] .entity-thread-messages {
    background: #edf2fb;
}

:root[data-theme="light"] .entity-thread-header,
:root[data-theme="light"] .entity-thread-meta-bar,
:root[data-theme="light"] .entity-thread-compose {
    border-color: rgba(131,149,181,0.16);
}

:root[data-theme="light"] .entity-thread-title { color: #17243a; }
:root[data-theme="light"] .entity-thread-subtitle,
:root[data-theme="light"] .entity-thread-meta-bar,
:root[data-theme="light"] .entity-thread-hint,
:root[data-theme="light"] .entity-thread-reminder-placeholder { color: #677f9f; }

:root[data-theme="light"] .entity-thread-close-btn {
    border-color: rgba(131,149,181,0.24);
    background: rgba(255,255,255,0.92);
    color: #304661;
}

:root[data-theme="light"] .entity-thread-close-btn:hover {
    background: #ffffff;
    border-color: rgba(66,118,213,0.26);
    color: #213a5a;
}

:root[data-theme="light"] .entity-thread-jump-btn {
    background: rgba(255,255,255,0.94);
    border-color: rgba(131,149,181,0.24);
    color: #304661;
}

:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread {
    background: #ffffff;
}

:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-thread-header,
:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-thread-meta-bar {
    background: transparent;
    border-color: rgba(131,149,181,0.16);
}

:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-thread-close-btn {
    background: rgba(255,255,255,0.94);
    border-color: rgba(131,149,181,0.20);
    color: #304661;
}

:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-thread-close-btn:hover {
    background: #ffffff;
    border-color: rgba(66,118,213,0.26);
    color: #213a5a;
}

:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-thread-messages {
    background: #edf2fb;
}

:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-doc-note-card,
:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-doc-composer-card {
    background: rgba(255,255,255,0.96);
    border-color: rgba(131,149,181,0.18);
    box-shadow: 0 2px 8px rgba(17,31,56,0.06);
}

:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-doc-quickbar {
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(73, 96, 140, 0.10);
}

:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-doc-head-action-btn,
:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-doc-like-btn,
:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-doc-assignee-inline {
    background: rgba(255,255,255,0.92);
    border-color: rgba(131,149,181,0.18);
    color: #667896;
}

:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .entity-doc-section-label {
    color: #6f819d;
    border-bottom-color: rgba(131,149,181,0.16);
}

:root[data-theme="light"] .entity-thread-drawer.is-team-news-thread .team-news-detail-link {
    background: rgba(255,255,255,0.94);
    border-color: rgba(131,149,181,0.20);
    color: #29405f;
}

:root[data-theme="light"] .entity-thread-jump-btn:hover {
    background: #ffffff;
    border-color: rgba(66,118,213,0.26);
    color: #213a5a;
}

:root[data-theme="light"] .entity-attachments-section {
    border-color: rgba(140, 160, 197, 0.24);
    background:
        radial-gradient(circle at top right, rgba(129, 163, 255, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff, #f5f8fd);
    box-shadow: 0 18px 36px rgba(98, 124, 176, 0.10);
}

:root[data-theme="light"] .entity-attachments-head {
    border-bottom-color: rgba(165, 181, 213, 0.22);
}

:root[data-theme="light"] .entity-attachments-subtitle {
    color: #6d84a5;
}

:root[data-theme="light"] .entity-attachments-dropzone {
    border-color: rgba(109, 144, 224, 0.28);
    background:
        radial-gradient(circle at top left, rgba(127, 164, 255, 0.16), transparent 42%),
        linear-gradient(135deg, #5f7398, #7383a2);
}

:root[data-theme="light"] .entity-attachments-dropzone-title {
    color: #ffffff;
}

:root[data-theme="light"] .entity-attachments-dropzone-subtitle {
    color: rgba(243, 247, 255, 0.82);
}

:root[data-theme="light"] .entity-attachments-link-form {
    border-color: rgba(165, 181, 213, 0.20);
    background: #f7faff;
}

:root[data-theme="light"] .entity-attachments-link-input {
    border-color: rgba(131,149,181,0.22);
    background: #ffffff;
    color: #24374f;
}

:root[data-theme="light"] .entity-attachments-link-input::placeholder {
    color: #8a9db9;
}

:root[data-theme="light"] .entity-attachments-empty {
    background: #f3f7fc;
    color: #69819f;
}

:root[data-theme="light"] .entity-attachment-card {
    border-color: rgba(165, 181, 213, 0.18);
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(34, 54, 87, 0.05);
}

:root[data-theme="light"] .entity-attachment-card.is-active {
    border-color: rgba(66,118,213,0.28);
    box-shadow: 0 0 0 1px rgba(66,118,213,0.10), 0 10px 24px rgba(34, 54, 87, 0.08);
}

:root[data-theme="light"] .entity-attachment-icon {
    background: #eef4ff;
    color: #4b6d9f;
}

:root[data-theme="light"] .entity-attachment-thumb {
    background: #f1f5fb;
    border-color: rgba(165, 181, 213, 0.18);
}

:root[data-theme="light"] .entity-attachment-thumb.is-pdf {
    background:
        linear-gradient(135deg, rgba(255, 142, 142, 0.18), rgba(255, 142, 142, 0.08)),
        #f8f4f4;
}

:root[data-theme="light"] .entity-attachment-thumb.is-pdf span {
    color: #c86a6a;
}

:root[data-theme="light"] .entity-attachment-thumb.is-image-placeholder {
    background:
        linear-gradient(135deg, rgba(92, 136, 220, 0.18), rgba(56, 174, 148, 0.10)),
        #f1f7fb;
}

:root[data-theme="light"] .entity-attachment-thumb.is-image-placeholder span {
    color: #39709a;
}

:root[data-theme="light"] .entity-attachment-name {
    color: #22344f;
}

:root[data-theme="light"] .entity-attachment-meta {
    color: #6f86a4;
}

:root[data-theme="light"] .entity-attachment-version-badge {
    background: #edf4ff;
    color: #43648f;
}

:root[data-theme="light"] .entity-attachment-version-badge.is-single {
    background: #f3f7fc;
    color: #7087a6;
}

:root[data-theme="light"] .entity-attachment-preview-shell {
    background: #f5f8fd;
    border-color: rgba(165, 181, 213, 0.20);
}

:root[data-theme="light"] .entity-attachment-versions {
    border-top-color: rgba(165, 181, 213, 0.18);
}

:root[data-theme="light"] .entity-attachment-version-row {
    background: #f7faff;
    border-color: rgba(165, 181, 213, 0.18);
}

:root[data-theme="light"] .entity-attachment-version-row.is-latest {
    background: #eef4ff;
    border-color: rgba(119, 147, 194, 0.22);
}

:root[data-theme="light"] .entity-attachment-version-title {
    color: #233750;
}

:root[data-theme="light"] .entity-attachment-version-meta {
    color: #6f86a4;
}

:root[data-theme="light"] .entity-attachment-preview-title {
    color: #22344f;
}

:root[data-theme="light"] .entity-attachment-preview-body {
    background: #ffffff;
    border-color: rgba(165, 181, 213, 0.18);
}

:root[data-theme="light"] .entity-attachment-dialog-kicker {
    color: #7388ad;
}

:root[data-theme="light"] .entity-attachment-dialog-copy {
    color: #4e6481;
}

:root[data-theme="light"] .entity-thread-overlay {
    background: rgba(15, 24, 38, 0.16);
}

:root[data-theme="light"] .entity-thread-overlay.has-background-focus {
    background: rgba(15, 24, 38, 0.10);
}

:root[data-theme="light"] .entity-thread-drawer {
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fd 100%);
    border-color: rgba(165, 181, 213, 0.22);
    box-shadow: 0 28px 56px rgba(33, 49, 75, 0.16);
}

:root[data-theme="light"] .entity-thread-header {
    border-bottom-color: rgba(165, 181, 213, 0.18);
}

:root[data-theme="light"] .entity-thread-title {
    color: #22344f;
}

:root[data-theme="light"] .entity-thread-subtitle {
    color: #6f86a4;
}

:root[data-theme="light"] .entity-thread-jump-btn {
    border-color: rgba(165, 181, 213, 0.22);
    background: #ffffff;
    color: #304764;
}

:root[data-theme="light"] .entity-thread-jump-btn:hover {
    background: #eef4fc;
    border-color: rgba(119, 147, 194, 0.26);
    color: #1f3450;
}

:root[data-theme="light"] .entity-thread-close-btn {
    border-color: rgba(165, 181, 213, 0.22);
    background: #ffffff;
    color: #3c506c;
}

:root[data-theme="light"] .entity-thread-close-btn:hover {
    background: #eef4fc;
    border-color: rgba(119, 147, 194, 0.26);
    color: #24364f;
}

:root[data-theme="light"] .entity-thread-messages {
    background: #f3f7fc;
}

:root[data-theme="light"] .entity-doc-selection-action-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(165, 181, 213, 0.24);
    box-shadow: 0 16px 34px rgba(33, 49, 75, 0.16);
}

:root[data-theme="light"] .entity-doc-selection-action-btn {
    background: #eef4fc;
    color: #2f4565;
}

:root[data-theme="light"] .entity-doc-selection-action-btn:hover {
    background: #e3ecf9;
}

:root[data-theme="light"] #entityAttachmentBody {
    background: transparent;
}

:root[data-theme="light"] .notif-jump-highlight {
    outline-color: rgba(66,118,213,0.35);
}

:root[data-theme="light"] tr.notif-jump-highlight,
:root[data-theme="light"] .subtask-row.notif-jump-highlight {
    background-color: rgba(66,118,213,0.08) !important;
}

:root[data-theme="light"] .notif-focus-surface::before {
    background: rgba(24, 35, 56, 0.28);
}

:root[data-theme="light"] tr.notif-focus-keep,
:root[data-theme="light"] .subtask-row.notif-focus-keep {
    background-color: rgba(66,118,213,0.10) !important;
    outline-color: rgba(66,118,213,0.28);
}

:root[data-theme="light"] tr.notif-focus-keep.is-clearing,
:root[data-theme="light"] .subtask-row.notif-focus-keep.is-clearing {
    background-color: transparent !important;
    outline-color: transparent;
}

:root[data-theme="light"] .entity-doc-mention-popup {
    border-color: rgba(131,149,181,0.20);
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(17,31,56,0.14);
}

:root[data-theme="light"] .entity-doc-rich-editor .entity-doc-mention-token {
    background: rgba(52, 103, 196, 0.07);
    color: #466892;
}

:root[data-theme="light"] .entity-doc-rich-editor .entity-doc-mention-token.is-unread-receipt {
    box-shadow: inset 0 0 0 1px rgba(52, 103, 196, 0.12);
}

:root[data-theme="light"] .entity-doc-note-badge {
    background: rgba(64, 86, 121, 0.08);
    color: #536c90;
}

:root[data-theme="light"] .entity-doc-note-badge-reminder:hover {
    background: rgba(64, 86, 121, 0.12);
}

:root[data-theme="light"] .entity-doc-note-badge-reminder.is-done {
    background: rgba(64, 86, 121, 0.06);
    color: #8a96aa;
}

:root[data-theme="light"] .entity-doc-note-badge-reminder.is-overdue {
    background: rgba(204, 64, 83, 0.10);
    color: #9a3448;
}

:root[data-theme="light"] .entity-doc-note-badge-reminder.is-today {
    background: rgba(214, 149, 57, 0.12);
    color: #8a5e17;
}

:root[data-theme="light"] .entity-doc-note-badge-reminder.is-tomorrow {
    background: rgba(66,118,213,0.09);
    color: #345a92;
}

:root[data-theme="light"] .entity-doc-note-badge-reminder.is-future {
    background: rgba(77, 125, 106, 0.08);
    color: #4f6f61;
}

:root[data-theme="light"] .entity-doc-note-badge-assignee {
    background: rgba(54, 95, 153, 0.10);
    color: #365f99;
}

:root[data-theme="light"] .entity-doc-mention-item {
    color: #253852;
}

:root[data-theme="light"] .entity-doc-mention-reply-hover-btn {
    background: rgba(255,255,255,0.98);
    color: #314764;
    border-color: rgba(22,37,60,0.14);
    box-shadow: 0 12px 22px rgba(17,31,56,0.14);
}

:root[data-theme="light"] .entity-doc-mention-reply-hover-btn:hover {
    background: #ffffff;
    border-color: rgba(22,37,60,0.20);
}

:root[data-theme="light"] .entity-doc-mention-item:hover,
:root[data-theme="light"] .entity-doc-mention-item.is-active {
    background: rgba(66,118,213,0.10);
    box-shadow: inset 0 0 0 1px rgba(66,118,213,0.10);
}

:root[data-theme="light"] .entity-doc-mention-email {
    color: #6e84a4;
}

:root[data-theme="light"] .entity-thread-meta-toggle {
    border-color: rgba(131,149,181,0.22);
    background: rgba(255,255,255,0.78);
    color: #4f6180;
}

:root[data-theme="light"] .entity-thread-meta-toggle:hover {
    background: rgba(255,255,255,0.95);
    border-color: rgba(131,149,181,0.3);
}

:root[data-theme="light"] .entity-thread-meta-toggle.is-active {
    color: #2f5798;
    background: rgba(66,118,213,0.10);
    border-color: rgba(66,118,213,0.20);
}

:root[data-theme="light"] .entity-thread-meta-inline-notice {
    border-color: rgba(66,118,213,0.18);
    background: rgba(66,118,213,0.08);
    color: #365483;
}

:root[data-theme="light"] .entity-doc-show-title-btn {
    background: transparent;
    color: #8a98ad;
}

:root[data-theme="light"] .entity-doc-show-title-btn:hover {
    background: transparent;
    color: #3d5578;
}

:root[data-theme="light"] .entity-doc-collapse-btn {
    border-color: rgba(131,149,181,0.16);
    background: rgba(255,255,255,0.55);
    color: #7488a8;
}

:root[data-theme="light"] .entity-doc-collapse-btn:hover {
    background: rgba(255,255,255,0.90);
    border-color: rgba(131,149,181,0.24);
    color: #3d5578;
}

:root[data-theme="light"] .entity-thread-msg {
    border-color: rgba(131,149,181,0.16);
    background: rgba(255,255,255,0.84);
}

:root[data-theme="light"] .entity-thread-msg.is-note {
    border-color: rgba(66,118,213,0.22);
    background: rgba(66,118,213,0.06);
}

:root[data-theme="light"] .entity-thread-msg.is-checklist {
    border-color: rgba(73, 168, 112, 0.22);
    background: rgba(73, 168, 112, 0.06);
}

:root[data-theme="light"] .entity-thread-msg-type {
    background: rgba(131,149,181,0.09);
    color: #345071;
    border-color: rgba(131,149,181,0.14);
}

:root[data-theme="light"] .entity-thread-msg-author { color: #20314b; }
:root[data-theme="light"] .entity-thread-msg-time { color: #738aa8; }
:root[data-theme="light"] .entity-thread-msg-body { color: #243851; }
:root[data-theme="light"] .entity-thread-msg-mentions { color: #3568b8; }

:root[data-theme="light"] .entity-doc-block {
    border-color: rgba(131,149,181,0.16);
    background: rgba(255,255,255,0.84);
}

:root[data-theme="light"] .entity-doc-note-card.is-block-sortable.drop-before::before,
:root[data-theme="light"] .entity-doc-note-card.is-block-sortable.drop-after::after,
:root[data-theme="light"] .entity-doc-note-card.is-pinned-sortable.drop-before::before,
:root[data-theme="light"] .entity-doc-note-card.is-pinned-sortable.drop-after::after {
    background: rgba(58,104,200,0.9);
    box-shadow: 0 0 0 2px rgba(58,104,200,0.14);
}

:root[data-theme="light"] .entity-doc-block.is-checklist {
    border-color: rgba(131,149,181,0.16);
    background: rgba(255,255,255,0.84);
}

:root[data-theme="light"] .entity-doc-block.is-link {
    border-color: rgba(66,118,213,0.22);
    background: rgba(66,118,213,0.05);
}

:root[data-theme="light"] .entity-doc-block-kind {
    color: #6a7f9e;
}

:root[data-theme="light"] .entity-doc-block textarea,
:root[data-theme="light"] .entity-doc-input-title,
:root[data-theme="light"] .entity-doc-input-url {
    border-color: rgba(131,149,181,0.2);
    background: rgba(255,255,255,0.92);
    color: #1f3048;
}

:root[data-theme="light"] .entity-doc-empty-inline {
    color: #7c92b0;
}

:root[data-theme="light"] .entity-thread-compose {
    background: rgba(255,255,255,0.65);
}

:root[data-theme="light"] .entity-thread-compose textarea {
    border-color: rgba(131,149,181,0.2);
    background: rgba(255,255,255,0.92);
    color: #1f3048;
}

:root[data-theme="light"] .entity-thread-title-input {
    border-color: rgba(131,149,181,0.2);
    background: rgba(255,255,255,0.92);
    color: #1f3048;
}

:root[data-theme="light"] .entity-doc-page {
    background: #ffffff;
    border-color: rgba(131,149,181,0.16);
    box-shadow: 0 10px 24px rgba(17,31,56,0.10);
}

:root[data-theme="light"] .entity-doc-toolbar-row {
    border-bottom-color: rgba(131,149,181,0.16);
    background: rgba(255,255,255,0.92);
}

:root[data-theme="light"] .entity-doc-toolbar-hint {
    color: #7189aa;
}

:root[data-theme="light"] .entity-doc-empty-state {
    border-color: rgba(131,149,181,0.22);
    background: rgba(255,255,255,0.84);
}

:root[data-theme="light"] .entity-doc-page.is-keep-layout {
    background: transparent;
    border: 0;
    box-shadow: none;
}

:root[data-theme="light"] .entity-doc-keep-top {
    background: linear-gradient(180deg, rgba(237, 242, 251, 0.98), rgba(237, 242, 251, 0.9) 72%, rgba(237, 242, 251, 0));
}

:root[data-theme="light"] .entity-doc-page-titlewrap {
    border-bottom-color: rgba(131,149,181,0.16);
}

:root[data-theme="light"] .entity-doc-page-title-label {
    color: #7189aa;
}

:root[data-theme="light"] .entity-doc-page-title-input {
    color: #17243a;
}

html:not([data-theme="light"]) .entity-thread-messages {
    background: #202733;
}

html:not([data-theme="light"]) .entity-doc-page {
    background: #f7f9fd;
}

html:not([data-theme="light"]) .entity-doc-toolbar-row {
    background: rgba(247, 249, 253, 0.9);
}

html:not([data-theme="light"]) .entity-doc-page.is-keep-layout {
    background: transparent;
    border: 0;
    box-shadow: none;
}

html:not([data-theme="light"]) .entity-doc-keep-top {
    background: linear-gradient(180deg, rgba(32, 39, 51, 0.98), rgba(32, 39, 51, 0.92) 72%, rgba(32, 39, 51, 0));
}

html:not([data-theme="light"]) .entity-doc-collection-input {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
    color: #d9e4f8;
}

html:not([data-theme="light"]) .entity-doc-collection-input::placeholder {
    color: #8fa2c4;
}

html:not([data-theme="light"]) .entity-doc-quickbar {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

html:not([data-theme="light"]) .entity-doc-composer-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

html:not([data-theme="light"]) .entity-doc-composer-title,
html:not([data-theme="light"]) .entity-doc-note-title-input {
    color: #eef3fd;
}

html:not([data-theme="light"]) .entity-doc-composer-title::placeholder,
html:not([data-theme="light"]) .entity-doc-note-title-input::placeholder,
html:not([data-theme="light"]) .entity-doc-composer-body::placeholder,
html:not([data-theme="light"]) .entity-doc-note-body-input::placeholder {
    color: #9bb0d3;
}

html:not([data-theme="light"]) .entity-doc-composer-body,
html:not([data-theme="light"]) .entity-doc-note-body-input {
    color: #ebf1fb;
}

html:not([data-theme="light"]) .entity-doc-composer-title:focus,
html:not([data-theme="light"]) .entity-doc-note-title-input:focus,
html:not([data-theme="light"]) .entity-doc-composer-body:focus,
html:not([data-theme="light"]) .entity-doc-note-body-input:focus {
    background: rgba(84,136,236,0.08);
    box-shadow: inset 0 0 0 1px rgba(84,136,236,0.22);
}

html:not([data-theme="light"]) .entity-doc-composer-check-row > input[type="text"] {
    color: #ebf1fb;
}

html:not([data-theme="light"]) .entity-doc-composer-check-row > input[type="text"]:focus {
    background: rgba(84,136,236,0.08);
    box-shadow: inset 0 0 0 1px rgba(84,136,236,0.22);
}

html:not([data-theme="light"]) .entity-doc-format-toolbar {
    border-color: rgba(255,255,255,0.12);
    background: #1b2230;
    box-shadow: 0 10px 24px rgba(0,0,0,0.34);
}

html:not([data-theme="light"]) .entity-doc-format-btn {
    color: #d6e0f2;
}

html:not([data-theme="light"]) .entity-doc-format-btn:hover {
    background: rgba(255,255,255,0.06);
}

html:not([data-theme="light"]) .entity-doc-format-sep {
    background: rgba(255,255,255,0.14);
}

html:not([data-theme="light"]) .entity-doc-rich-editor[contenteditable="true"]:empty::before {
    color: #9bb0d3;
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-title {
    color: #d6e2f8;
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-delete {
    color: #9fb3d4;
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-delete:hover {
    color: #ffc1c1;
    background: rgba(255, 122, 122, 0.12);
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-text:empty::before {
    color: #93a8c9;
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-row.is-checked .entity-doc-inline-checklist-text {
    color: #93a3bd;
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-remove {
    color: #9fb3d4;
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-remove:hover {
    color: #ffc1c1;
    background: rgba(255, 122, 122, 0.12);
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-add {
    color: #aec0dd;
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-add:hover {
    background: rgba(124, 167, 255, 0.12);
    color: #d6e4ff;
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-completed-wrap {
    border-top-color: rgba(255,255,255,0.10);
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-completed-head {
    color: #aebfdb;
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-row.drop-before::before,
html:not([data-theme="light"]) .entity-doc-inline-checklist-row.drop-after::after {
    background: rgba(124, 167, 255, 0.7);
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-handle,
html:not([data-theme="light"]) .entity-doc-inline-checklist-widget-handle {
    color: #9fb3d4;
}

html:not([data-theme="light"]) .entity-doc-inline-checklist-widget-handle:hover {
    color: #c5d6ef;
    background: rgba(124, 167, 255, 0.12);
}

html:not([data-theme="light"]) .entity-doc-inline-block {
    border-color: rgba(255,255,255,0.12);
    background: var(--ui-surface-soft-03);
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-widget {
    border-color: transparent;
    background: transparent;
}

html:not([data-theme="light"]) .entity-doc-inline-link a {
    color: #9ec1ff;
}

html:not([data-theme="light"]) .entity-doc-rich-editor a,
html:not([data-theme="light"]) .entity-thread-msg-body a,
html:not([data-theme="light"]) .entity-doc-inline-video-link a {
    color: #b9d2ff;
    text-decoration-color: rgba(185, 210, 255, 0.72);
}

html:not([data-theme="light"]) .entity-doc-rich-editor a:hover,
html:not([data-theme="light"]) .entity-thread-msg-body a:hover,
html:not([data-theme="light"]) .entity-doc-inline-link a:hover,
html:not([data-theme="light"]) .entity-doc-inline-video-link a:hover {
    color: #d7e6ff;
    text-decoration-color: currentColor;
}

html:not([data-theme="light"]) .entity-doc-inline-password-widget {
    border-color: rgba(148, 181, 241, 0.42);
    background: rgba(73, 104, 166, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

html:not([data-theme="light"]) .entity-doc-inline-password-value {
    color: #f1f6ff;
}

html:not([data-theme="light"]) .entity-doc-inline-password-btn {
    background: rgba(148, 181, 241, 0.2);
    color: #e6f0ff;
}

html:not([data-theme="light"]) .entity-doc-inline-password-btn:hover {
    background: rgba(148, 181, 241, 0.34);
    color: #ffffff;
}

html:not([data-theme="light"]) .entity-doc-inline-image {
    color: #a9bddf;
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-thumb {
    background: rgba(120, 154, 213, 0.12);
    border-color: rgba(120, 154, 213, 0.2);
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-trigger {
    border-color: rgba(120, 154, 213, 0.22);
    background: rgba(16, 24, 39, 0.92);
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-thumb.is-empty,
html:not([data-theme="light"]) .entity-doc-inline-attachment-thumb.is-generic {
    background: linear-gradient(135deg, rgba(120, 154, 213, 0.18), rgba(120, 154, 213, 0.1));
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-thumb-label {
    color: #c6d6f1;
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-delete {
    color: #9fb0d3;
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-delete:hover {
    color: #ffd5d5;
    background: rgba(255, 94, 94, 0.16);
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-dropzone {
    border-color: rgba(120, 154, 213, 0.32);
    background: rgba(22, 33, 52, 0.9);
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-dropzone.is-drag-active {
    border-color: rgba(140, 173, 229, 0.64);
    background: rgba(29, 44, 68, 0.96);
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-dropzone-copy {
    color: #aebed7;
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-dropzone-copy strong,
html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-title {
    color: #e4ecfb;
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-item,
html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-empty {
    background: rgba(22, 33, 52, 0.9);
    border-color: rgba(120, 154, 213, 0.24);
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-thumb {
    background: rgba(120, 154, 213, 0.12);
    border-color: rgba(120, 154, 213, 0.18);
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-thumb.is-generic span {
    color: #c6d6f1;
}

html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-meta,
html:not([data-theme="light"]) .entity-doc-inline-attachment-picker-empty {
    color: #aebed7;
}

html:not([data-theme="light"]) .entity-doc-inline-video-frame {
    background: rgba(255,255,255,0.06);
}

html:not([data-theme="light"]) .entity-doc-inline-video-link a {
    color: #9ec1ff;
}

html:not([data-theme="light"]) .entity-doc-inline-reminder-main {
    color: #c7d7f0;
}

html:not([data-theme="light"]) .entity-doc-inline-reminder-main:hover {
    color: #eef4ff;
}

html:not([data-theme="light"]) .entity-doc-inline-reminder-delete {
    color: #a7bbdd;
}

html:not([data-theme="light"]) .entity-doc-inline-reminder-delete:hover {
    color: #ffc1c1;
    background: rgba(255,122,122,0.12);
}

html:not([data-theme="light"]) .entity-doc-quickbar-input {
    color: #b8c8e5;
}

html:not([data-theme="light"]) .entity-doc-quickbar-input:hover {
    background: rgba(84,136,236,0.12);
    color: #e2ebfb;
}

html:not([data-theme="light"]) .entity-doc-icon-btn {
    color: #a9bada;
}

html:not([data-theme="light"]) .entity-doc-icon-btn:hover {
    background: rgba(84,136,236,0.14);
    color: #eef3fd;
}

html:not([data-theme="light"]) .entity-doc-section-label {
    color: #9fb0d3;
    border-bottom-color: rgba(255,255,255,0.08);
}

html:not([data-theme="light"]) .entity-doc-note-card {
    background: #292F3B;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

html:not([data-theme="light"]) .entity-doc-note-card.is-private-note,
html:not([data-theme="light"]) .entity-doc-composer-card.is-private-note {
    background: linear-gradient(180deg, rgba(214, 220, 230, 0.08) 0%, rgba(194, 201, 213, 0.06) 100%);
    border-color: rgba(198, 208, 224, 0.28);
}

html:not([data-theme="light"]) .entity-doc-note-card.is-private-note::before,
html:not([data-theme="light"]) .entity-doc-composer-card.is-private-note::before {
    border-color: rgba(198, 208, 224, 0.2);
}

html:not([data-theme="light"]) .entity-doc-note-card .entity-doc-note-footer {
    border-top-color: rgba(255,255,255,0.08);
    background: #292F3B;
}

html:not([data-theme="light"]) .entity-doc-note-card.is-private-note .entity-doc-note-footer,
html:not([data-theme="light"]) .entity-doc-composer-card.is-private-note .entity-doc-note-footer {
    background: rgba(20, 26, 37, 0.96);
}

html:not([data-theme="light"]) .entity-doc-composer-card.is-private-note {
    background: rgba(18, 24, 35, 0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

html:not([data-theme="light"]) .entity-doc-assignee-inline,
html:not([data-theme="light"]) .entity-doc-head-action-btn {
    background: rgba(25, 33, 49, 0.96);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    color: #b3c2dd;
}

html:not([data-theme="light"]) .entity-doc-assignee-inline:hover,
html:not([data-theme="light"]) .entity-doc-head-action-btn:hover {
    background: rgba(32, 42, 61, 1);
    border-color: rgba(140, 173, 230, 0.22);
    color: #d7e5fb;
}

html:not([data-theme="light"]) .entity-doc-head-action-btn.entity-doc-note-visibility-trigger:hover {
    background: rgba(32, 42, 61, 1);
}

html:not([data-theme="light"]) .entity-doc-like-btn {
    background: rgba(25, 33, 49, 0.96);
    border-color: rgba(255,255,255,0.1);
    color: #b3c2dd;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

html:not([data-theme="light"]) .entity-doc-like-btn:hover {
    background: rgba(32, 42, 61, 1);
    border-color: rgba(140, 173, 230, 0.22);
    color: #d7e5fb;
}

html:not([data-theme="light"]) .entity-doc-like-btn.is-active {
    color: #ffb6c9;
    border-color: rgba(235, 132, 166, 0.32);
    background: rgba(145, 49, 81, 0.28);
}

html:not([data-theme="light"]) .entity-doc-note-badge-reminder.is-overdue:not(.is-done) {
    background: rgba(214, 86, 101, 0.18);
    color: #ffb6c4;
}

html:not([data-theme="light"]) .entity-doc-note-badge-reminder.is-today:not(.is-done) {
    background: rgba(225, 157, 69, 0.18);
    color: #ffd494;
}

html:not([data-theme="light"]) .entity-doc-note-badge-reminder.is-tomorrow:not(.is-done) {
    background: rgba(86, 133, 224, 0.18);
    color: #bfd1ff;
}

html:not([data-theme="light"]) .entity-doc-note-badge-reminder.is-future:not(.is-done) {
    background: rgba(94, 140, 120, 0.18);
    color: #bce6d3;
}

html:not([data-theme="light"]) .entity-doc-assignee-inline {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

html:not([data-theme="light"]) .entity-doc-assignee-inline:hover {
    background: rgba(255,255,255,0.07);
    border-color: transparent;
}

html:not([data-theme="light"]) .entity-doc-head-action-btn.is-active {
    background: rgba(124, 167, 255, 0.14);
    border-color: rgba(124, 167, 255, 0.24);
    color: #c8d8ff;
}

html:not([data-theme="light"]) .entity-doc-composer-pill {
    background: rgba(25, 33, 49, 0.96);
    border-color: rgba(255,255,255,0.1);
    color: #b3c2dd;
}

html:not([data-theme="light"]) .entity-doc-composer-pill:hover {
    background: rgba(32, 42, 61, 1);
    border-color: rgba(140, 173, 230, 0.22);
    color: #d7e5fb;
}

html:not([data-theme="light"]) .entity-doc-composer-pill.is-active {
    background: rgba(169, 180, 197, 0.12);
    border-color: rgba(169, 180, 197, 0.3);
    color: #e6edf9;
}

html:not([data-theme="light"]) .entity-doc-note-reminder-trigger {
    background: rgba(25, 33, 49, 0.82);
    border-color: rgba(255,255,255,0.08);
    color: #9fb0d3;
}

html:not([data-theme="light"]) .entity-doc-note-card.is-archived-note {
    background: rgba(255,255,255,0.025);
    border-color: rgba(255,255,255,0.08);
}

html:not([data-theme="light"]) .entity-doc-note-badge-assignee {
    background: rgba(91, 139, 229, 0.16);
    color: #dbe7ff;
}

html:not([data-theme="light"]) .entity-doc-note-badge-private {
    background: rgba(169, 180, 197, 0.1);
    border-color: rgba(169, 180, 197, 0.26);
    color: #d5deee;
}

html:not([data-theme="light"]) .entity-doc-note-card .entity-doc-block-kind {
    color: #9db3d6;
}

html:not([data-theme="light"]) .entity-doc-note-card textarea,
html:not([data-theme="light"]) .entity-doc-note-card .entity-doc-input-title,
html:not([data-theme="light"]) .entity-doc-note-card .entity-doc-input-url {
    color: #ebf1fb;
}

html:not([data-theme="light"]) .entity-doc-note-card textarea:focus,
html:not([data-theme="light"]) .entity-doc-note-card .entity-doc-input-title:focus,
html:not([data-theme="light"]) .entity-doc-note-card .entity-doc-input-url:focus {
    background: rgba(84,136,236,0.08);
    box-shadow: inset 0 0 0 1px rgba(84,136,236,0.22);
}

html:not([data-theme="light"]) .entity-doc-empty-state {
    border-color: rgba(255,255,255,0.14);
    background: var(--ui-surface-soft-03);
}

html:not([data-theme="light"]) .entity-doc-empty-title {
    color: #e4ebf8;
}

.entity-doc-assignee-popover-card {
    width: min(184px, calc(100vw - 24px));
    min-width: 184px;
    background: #1b243f;
    border: 1px solid #4371cc;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 28px rgba(6, 12, 28, 0.34);
}

.entity-doc-assignee-popover-card.team-picker {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    display: block;
    opacity: 1;
    isolation: isolate;
}

.entity-doc-assignee-popover-body {
    padding: 0;
}

.entity-doc-assignee-list {
    display: grid;
    gap: 4px;
    max-height: min(36vh, 220px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.entity-doc-assignee-row {
    cursor: pointer;
}

.entity-doc-assignee-row.is-locked {
    opacity: 0.62;
}

.entity-doc-assignee-row input[type="checkbox"] {
    margin: 0;
}

.entity-doc-assignee-row.is-locked input[type="checkbox"] {
    cursor: not-allowed;
}

.entity-doc-assignee-row .team-avatar.small {
    flex: 0 0 auto;
}

.entity-doc-assignee-empty {
    font-size: 12px;
    color: #9fb0c9;
}

.entity-doc-assignee-actions {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(67, 113, 204, 0.18);
}

.entity-doc-assignee-actions .mini-btn {
    width: 100%;
}

:root[data-theme="light"] .entity-doc-assignee-popover-card {
    background: #ffffff;
    border-color: rgba(145, 164, 195, 0.28);
    box-shadow: 0 14px 28px rgba(33, 52, 84, 0.16);
}

:root[data-theme="light"] .entity-doc-assignee-empty {
    color: #637a99;
}

:root[data-theme="light"] .entity-doc-assignee-actions {
    border-top-color: rgba(145, 164, 195, 0.18);
}

html:not([data-theme="light"]) .entity-doc-empty-text {
    color: #9bb0d3;
}

html:not([data-theme="light"]) .entity-doc-note-pin-btn,
html:not([data-theme="light"]) .entity-doc-note-action-btn {
    color: #b3c2dd;
}

html:not([data-theme="light"]) .entity-doc-note-pin-btn:hover {
    background: rgba(255,255,255,0.06);
}

html:not([data-theme="light"]) .entity-doc-note-pin-btn.is-pinned {
    color: #c8d8ff;
    background: rgba(124, 167, 255, 0.14);
}

html:not([data-theme="light"]) .entity-doc-note-pin-btn.is-pinned:hover {
    background: rgba(124, 167, 255, 0.2);
}

html:not([data-theme="light"]) .entity-doc-note-close-btn {
    color: #eef3fd;
}

html:not([data-theme="light"]) .entity-doc-note-close-btn:hover {
    background: rgba(255,255,255,0.06);
}

html:not([data-theme="light"]) .entity-doc-note-delete-btn {
    color: #ffaaaa;
}

html:not([data-theme="light"]) .entity-doc-note-delete-btn:hover {
    background: rgba(215, 92, 92, 0.14);
}

html:not([data-theme="light"]) .entity-doc-note-edited {
    color: #a9bddf;
}

html:not([data-theme="light"]) .entity-doc-note-created {
    color: #9db1d3;
}

html:not([data-theme="light"]) .entity-doc-check-handle {
    color: #93a7c9;
}

html:not([data-theme="light"]) .entity-doc-checklist-title-input {
    color: #eef3fd;
}

html:not([data-theme="light"]) .entity-doc-checklist-add-btn {
    color: #b7c6df;
}

html:not([data-theme="light"]) .entity-doc-checklist-add-btn:hover {
    background: rgba(255,255,255,0.05);
}

html:not([data-theme="light"]) .entity-doc-checklist-add-btn > span:first-child {
    color: #c3d1e8;
}

html:not([data-theme="light"]) .entity-doc-checklist-completed-wrap {
    border-top-color: rgba(255,255,255,0.08);
}

html:not([data-theme="light"]) .entity-doc-checklist-completed-head {
    color: #b9c8e2;
}

html:not([data-theme="light"]) .entity-doc-checklist-completed-head:hover {
    background: rgba(255,255,255,0.05);
}

html:not([data-theme="light"]) .entity-doc-checklist-items-done .entity-doc-check-row > input[type="text"] {
    color: #9fb1ce;
}

html:not([data-theme="light"]) .entity-doc-check-remove-btn {
    color: #9fb1ce;
}

html:not([data-theme="light"]) .entity-doc-check-remove-btn:hover {
    background: rgba(215, 92, 92, 0.14);
    color: #ffb3b3;
}

html:not([data-theme="light"]) .entity-doc-check-row.drop-before::before,
html:not([data-theme="light"]) .entity-doc-check-row.drop-after::after {
    background: #7fa8ff;
}

@media (max-width: 640px) {
    .entity-thread-overlay {
        padding: 10px 8px;
    }
    .entity-thread-drawer {
        width: calc(100vw - 16px);
        height: calc(100vh - 20px);
        height: calc(100dvh - 20px);
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 14px;
    }
    .entity-thread-header {
        gap: 8px;
        padding: 14px 14px 10px;
    }
    .entity-thread-title {
        font-size: 17px;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }
    .entity-thread-subtitle {
        font-size: 13px;
    }
    .entity-thread-header-actions {
        gap: 6px;
        flex: 0 0 auto;
    }
    .entity-thread-close-btn {
        width: 36px;
        min-width: 36px;
        height: 36px;
        border-radius: 9px;
        font-size: 22px;
    }
    .entity-thread-messages {
        padding: 0 10px;
    }
    .entity-doc-page {
        padding: 14px 10px 18px;
        border-radius: 10px;
    }
    .entity-doc-page-title-input {
        font-size: 24px;
    }
    .entity-doc-toolbar-hint {
        display: none;
    }
    .entity-doc-collection-row {
        flex-wrap: wrap;
    }
    .entity-doc-collection-row .mini-btn {
        margin-left: auto;
    }
    .entity-doc-quickbar {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: stretch;
    }
    .entity-doc-quickbar-actions {
        justify-content: flex-end;
    }
    .entity-doc-note-card .entity-doc-block-head {
        grid-template-columns: minmax(0, 1fr) max-content;
        gap: 4px;
        min-height: 26px;
        margin-bottom: 0;
    }
    .entity-doc-head-right {
        gap: 2px;
        max-width: 100%;
        align-self: start;
    }
    .entity-doc-head-right .entity-doc-assignee-inline {
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        height: 28px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
    }
    .entity-doc-head-right .entity-doc-head-action-btn,
    .entity-doc-head-right .entity-doc-note-reminder-trigger {
        width: 20px;
        min-width: 20px;
        height: 20px;
        border-radius: 6px;
    }
    .entity-doc-head-right .entity-doc-like-btn {
        min-width: 34px;
        height: 20px;
        gap: 3px;
        padding: 0 5px;
        font-size: 10px;
    }
    .entity-doc-head-right .entity-doc-note-drag-handle {
        order: 20;
    }
    .entity-doc-head-right .entity-doc-collapse-btn {
        order: 30;
    }
    .entity-doc-head-right .entity-doc-note-pin-btn {
        order: 40;
    }
    .entity-doc-note-card,
    .entity-doc-composer-card {
        padding: 12px 12px 10px;
    }
    .entity-doc-head-left {
        min-width: 0;
    }
    .entity-doc-note-title-input,
    .entity-doc-checklist-title-input,
    .entity-doc-input-title,
    .entity-doc-input-url,
    .entity-doc-note-body-input,
    .entity-doc-collapsed-preview {
        min-width: 0;
    }
}

.project-create-overlay,
.internal-task-create-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 10, 17, 0.66);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    padding: 20px;
}

.project-create-dialog,
.internal-task-create-dialog {
    width: min(880px, 100%);
    max-height: min(90vh, 860px);
    overflow: auto;
    background:
        radial-gradient(circle at top right, rgba(100, 180, 255, 0.12), transparent 24%),
        linear-gradient(180deg, #202739, #181d2c);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.project-create-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-create-head-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.project-create-title {
    color: #eef3ff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

.project-create-subtitle {
    color: #9fb0cf;
    font-size: 12px;
    line-height: 1.45;
}

.project-create-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #dbe4f6;
    font-size: 20px;
    cursor: pointer;
}

.project-create-close:hover {
    background: rgba(255, 255, 255, 0.08);
}

.project-create-form {
    padding: 18px 20px 20px 20px;
}

.project-create-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.project-create-grid > label,
.project-create-grid > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.project-create-grid > label > span,
.project-create-field-label {
    color: #b8c3dd;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-create-grid input,
.project-create-grid select,
.project-create-grid textarea {
    width: 100%;
    box-sizing: border-box;
    background: #23283a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ecf2ff;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
}

.project-create-grid textarea {
    resize: vertical;
    min-height: 72px;
}

.project-create-grid input:focus,
.project-create-grid select:focus,
.project-create-grid textarea:focus {
    outline: none;
    border-color: rgba(100, 180, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(100, 180, 255, 0.14);
}

.project-create-grid input[readonly] {
    opacity: 0.9;
}

.project-create-date-cell {
    --date-chip-width: 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.project-create-date-cell .date-trigger {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.project-create-col-span-2 {
    grid-column: 1 / -1;
}

.project-create-zeitraum {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--ui-surface-soft-03);
    color: #e2e8f8;
    padding: 0 12px;
    font-size: 13px;
}

.project-create-team-picker-shell {
    position: relative;
    width: 100%;
}

.project-create-team-trigger {
    width: 100%;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #23283a;
    color: #ecf2ff;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.project-create-team-trigger::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(236, 242, 255, 0.88);
    flex: 0 0 auto;
}

#projectCreateTeamSummary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#projectCreateOverlay #projectCreateTeamList.team-picker {
    width: min(320px, calc(100vw - 32px));
    min-width: 220px;
}

.project-create-team-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--ui-surface-soft-03);
    max-height: 220px;
    overflow: visible;
    align-items: stretch;
}

.project-create-team-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #dce6fa;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--ui-surface-soft-02);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    min-width: 0;
    flex: 1 1 0;
}

.project-create-team-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(100, 180, 255, 0.26);
    transform: translateY(-1px);
}

.project-create-team-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.project-create-team-item::after {
    content: "";
    margin-left: auto;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 3px transparent;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.project-create-team-item.selected {
    background: rgba(100, 180, 255, 0.14);
    border-color: rgba(100, 180, 255, 0.44);
    box-shadow: 0 10px 24px rgba(14, 24, 45, 0.18);
}

.project-create-team-item.selected::after {
    border-color: rgba(100, 180, 255, 0.7);
    background: rgba(100, 180, 255, 0.18);
    box-shadow: inset 0 0 0 5px #64b4ff;
}

.project-create-team-item > span {
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 600;
}

.project-create-team-item .team-avatar.small {
    width: 28px;
    height: 28px;
    font-size: 11px;
    flex: 0 0 auto;
    line-height: 1;
}

.project-create-muted {
    color: #9aa8c5;
    font-size: 12px;
}

.project-create-inline-hint,
.project-create-error {
    color: #ff8f97;
    font-size: 11px;
}

.project-create-grid input.is-invalid {
    border-color: rgba(255, 105, 120, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 105, 120, 0.12);
}

.project-create-error {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 120, 130, 0.22);
    background: rgba(255, 90, 110, 0.08);
}

.project-create-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

body.has-project-create-dialog,
body.has-internal-task-create-dialog {
    overflow: hidden;
}

:root[data-theme="light"] .project-create-overlay,
:root[data-theme="light"] .internal-task-create-overlay {
    background: rgba(231, 237, 247, 0.7);
}

:root[data-theme="light"] .project-create-dialog,
:root[data-theme="light"] .internal-task-create-dialog {
    background:
        radial-gradient(circle at top right, rgba(64, 122, 214, 0.08), transparent 24%),
        linear-gradient(180deg, #fdfefe, #f4f8fd);
    border: 1px solid rgba(131, 149, 181, 0.24);
    box-shadow: 0 24px 60px rgba(41, 58, 89, 0.18);
}

:root[data-theme="light"] .project-create-head {
    border-bottom-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .project-create-title {
    color: #1e2f47;
}

:root[data-theme="light"] .project-create-subtitle {
    color: #6f84a2;
}

:root[data-theme="light"] .project-create-close {
    border-color: rgba(131, 149, 181, 0.24);
    background: #f2f6fc;
    color: #536a8a;
}

:root[data-theme="light"] .project-create-close:hover {
    background: #e9f0fb;
    color: #2c4669;
}

:root[data-theme="light"] .project-create-grid > label > span,
:root[data-theme="light"] .project-create-field-label {
    color: #667d9d;
}

:root[data-theme="light"] .project-create-grid input,
:root[data-theme="light"] .project-create-grid select,
:root[data-theme="light"] .project-create-grid textarea {
    background: #ffffff;
    border-color: rgba(131, 149, 181, 0.22);
    color: #1f3046;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .project-create-grid input::placeholder,
:root[data-theme="light"] .project-create-grid textarea::placeholder {
    color: #8da0bb;
}

:root[data-theme="light"] .project-create-grid input:focus,
:root[data-theme="light"] .project-create-grid select:focus,
:root[data-theme="light"] .project-create-grid textarea:focus {
    border-color: rgba(64, 122, 214, 0.55);
    box-shadow: 0 0 0 3px rgba(64, 122, 214, 0.12);
}

:root[data-theme="light"] .project-create-grid input[readonly] {
    background: #f4f7fc;
    color: #5a6f8d;
    border-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .project-create-zeitraum {
    border-color: rgba(131, 149, 181, 0.18);
    background: #f4f7fc;
    color: #304760;
}

:root[data-theme="light"] .project-create-team-trigger {
    background: #ffffff;
    border-color: rgba(131, 149, 181, 0.22);
    color: #1f3046;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .project-create-team-trigger::after {
    border-top-color: rgba(31, 48, 70, 0.72);
}

:root[data-theme="light"] .project-create-team-list {
    border-color: transparent;
    background: transparent;
    border-radius: 0;
}

:root[data-theme="light"] .project-create-team-item {
    color: #2a3f5b;
    background: transparent;
    border-color: rgba(131, 149, 181, 0.16);
}

:root[data-theme="light"] .project-create-team-item:hover {
    background: #e4eefb;
    border-color: rgba(64, 122, 214, 0.26);
}

:root[data-theme="light"] .project-create-team-item::after {
    border-color: rgba(131, 149, 181, 0.24);
    background: #f9fbff;
}

:root[data-theme="light"] .project-create-team-item.selected {
    background: linear-gradient(180deg, #e8f1ff, #deebff);
    border-color: rgba(64, 122, 214, 0.34);
    box-shadow: 0 10px 24px rgba(64, 122, 214, 0.12);
}

:root[data-theme="light"] .project-create-team-item.selected::after {
    border-color: rgba(64, 122, 214, 0.5);
    background: rgba(64, 122, 214, 0.08);
    box-shadow: inset 0 0 0 5px #407ad6;
}

:root[data-theme="light"] .project-create-muted {
    color: #7d90ab;
}

:root[data-theme="light"] .project-create-inline-hint,
:root[data-theme="light"] .project-create-error {
    color: #b93b45;
}

:root[data-theme="light"] .project-create-error {
    border-color: rgba(218, 93, 103, 0.22);
    background: rgba(230, 108, 119, 0.08);
}

@media (max-width: 860px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
    select {
        -webkit-appearance: none;
        appearance: none;
        background-image:
            linear-gradient(45deg, transparent 50%, rgba(236, 242, 255, 0.88) 50%),
            linear-gradient(135deg, rgba(236, 242, 255, 0.88) 50%, transparent 50%);
        background-position:
            calc(100% - 18px) calc(50% - 2px),
            calc(100% - 12px) calc(50% - 2px);
        background-size: 6px 6px, 6px 6px;
        background-repeat: no-repeat;
        padding-right: 32px !important;
    }
    .date-trigger,
    .mobile-select-option,
    .mobile-datalist-option,
    .board-search-select-input {
        font-size: 16px !important;
    }
    .project-create-team-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding: 6px;
        border-radius: 10px;
        max-height: none;
        align-items: center;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .project-create-team-list::-webkit-scrollbar {
        display: none;
    }
    .project-create-team-item {
        min-width: 132px;
        flex: 0 0 auto;
        justify-content: flex-start;
        padding: 6px 10px;
        border-radius: 10px;
        gap: 8px;
    }
    .project-create-team-item > span {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }
    .project-create-team-item::after {
        position: static;
        margin-left: auto;
        width: 10px;
        height: 10px;
        box-shadow: inset 0 0 0 2px transparent;
    }
    .project-create-team-item.selected::after {
        box-shadow: inset 0 0 0 3px #64b4ff;
    }
    .project-create-team-item .team-avatar.small {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }
    .project-create-head {
        padding: 16px 16px 12px 16px;
    }
    .project-create-form {
        padding: 16px;
    }
    .project-create-grid {
        grid-template-columns: 1fr;
    }
    .project-create-col-span-2 {
        grid-column: auto;
    }
}

@media (max-width: 860px) {
    :root[data-theme="light"] select {
        background-image:
            linear-gradient(45deg, transparent 50%, rgba(42, 63, 91, 0.82) 50%),
            linear-gradient(135deg, rgba(42, 63, 91, 0.82) 50%, transparent 50%);
    }
}

.calendar-inline-notice {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 99999;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(20, 22, 27, 0.92);
    color: #eaf0f8;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px));
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: pre-line;
    max-width: 420px;
}

.calendar-inline-notice.active {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.calendar-worktime-warning-nav {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: min(860px, calc(100vw - 32px));
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 166, 205, 0.22);
    background: rgba(19, 25, 37, 0.92);
    box-shadow: 0 6px 20px rgba(5, 10, 20, 0.32);
    backdrop-filter: blur(10px);
}

.calendar-worktime-warning-nav-main {
    min-width: 0;
}

.calendar-worktime-warning-nav-title {
    color: #eef3ff;
    font-size: 11px;
    font-weight: 700;
}

.calendar-worktime-warning-nav-sub {
    margin-top: 1px;
    color: #b7c5e3;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.calendar-worktime-warning-nav-date {
    white-space: nowrap;
}

.calendar-worktime-warning-nav-detail {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-worktime-warning-nav-result {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(88, 186, 132, 0.16);
    color: #d8ffe8;
    font-size: 10px;
    font-weight: 700;
}

.calendar-worktime-warning-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.calendar-worktime-warning-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: rgba(255, 255, 255, 0.08);
    color: #edf3ff;
}

.calendar-worktime-warning-badge.is-break {
    background: rgba(234, 171, 93, 0.16);
    color: #ffdca6;
}

.calendar-worktime-warning-badge.is-rest {
    background: rgba(133, 160, 230, 0.18);
    color: #dbe7ff;
}

.calendar-worktime-warning-badge.is-limit {
    background: rgba(232, 104, 104, 0.18);
    color: #ffc2c2;
}

.calendar-worktime-warning-badge.is-overtime {
    background: rgba(224, 137, 94, 0.18);
    color: #ffd2b8;
}

.calendar-worktime-warning-nav-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.calendar-worktime-warning-nav-actions .secondary-btn {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 10px;
}

.calendar-worktime-warning-nav-actions .calendar-worktime-warning-autofix-btn:not(:disabled) {
    background: rgba(82, 141, 255, 0.18);
    border-color: rgba(120, 168, 255, 0.42);
    color: #edf4ff;
}

.calendar-worktime-warning-nav-actions .calendar-worktime-warning-autofix-btn:not(:disabled):hover {
    background: rgba(82, 141, 255, 0.24);
    border-color: rgba(138, 180, 255, 0.56);
}

:root[data-theme="light"] .calendar-worktime-warning-nav {
    border-color: rgba(116, 136, 170, 0.20);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 30px rgba(30, 52, 92, 0.14);
}

:root[data-theme="light"] .calendar-worktime-warning-nav-title {
    color: #24364f;
}

:root[data-theme="light"] .calendar-worktime-warning-nav-sub {
    color: #607896;
}

:root[data-theme="light"] .calendar-worktime-warning-nav-result {
    background: rgba(73, 165, 115, 0.12);
    color: #2f7550;
}

:root[data-theme="light"] .calendar-worktime-warning-badge {
    background: rgba(109, 127, 159, 0.10);
    color: #425a7a;
}

:root[data-theme="light"] .calendar-worktime-warning-badge.is-break {
    background: rgba(210, 141, 61, 0.14);
    color: #8b5f22;
}

:root[data-theme="light"] .calendar-worktime-warning-badge.is-rest {
    background: rgba(79, 137, 216, 0.14);
    color: #355d8c;
}

:root[data-theme="light"] .calendar-worktime-warning-badge.is-limit {
    background: rgba(201, 83, 83, 0.14);
    color: #9a2d36;
}

:root[data-theme="light"] .calendar-worktime-warning-badge.is-overtime {
    background: rgba(217, 132, 84, 0.14);
    color: #9a5a2e;
}

:root[data-theme="light"] .calendar-worktime-warning-nav-actions .calendar-worktime-warning-autofix-btn:not(:disabled) {
    background: rgba(67, 120, 230, 0.10);
    border-color: rgba(90, 131, 218, 0.30);
    color: #2d4f89;
}

:root[data-theme="light"] .calendar-worktime-warning-nav-actions .calendar-worktime-warning-autofix-btn:not(:disabled):hover {
    background: rgba(67, 120, 230, 0.16);
    border-color: rgba(90, 131, 218, 0.40);
}

/* Kalender Tages-Hintergründe (Wochenende / Feiertag) */
.fc .calendar-day-bg-weekend.fc-bg-event,
.fc .fc-bg-event.calendar-day-bg-weekend {
    background: rgba(88, 108, 162, 0.06);
    opacity: 1;
    border-radius: 0 !important;
    pointer-events: none;
}

.fc .calendar-day-bg-holiday.fc-bg-event,
.fc .fc-bg-event.calendar-day-bg-holiday {
    background: rgba(204, 108, 122, 0.09);
    opacity: 1;
    border-radius: 0 !important;
    pointer-events: none;
}

.fc .calendar-day-bg-holiday.fc-bg-event::after,
.fc .fc-bg-event.calendar-day-bg-holiday::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        var(--ui-surface-soft-02) 0px,
        var(--ui-surface-soft-02) 6px,
        rgba(255,255,255,0) 6px,
        rgba(255,255,255,0) 12px
    );
    pointer-events: none;
}

.fc .calendar-day-bg-absence.fc-bg-event,
.fc .fc-bg-event.calendar-day-bg-absence {
    background: rgba(46, 53, 78, 0.18);
    opacity: 1;
    border-radius: 0 !important;
    pointer-events: none;
}

.fc .calendar-day-bg-absence.is-urlaub.fc-bg-event,
.fc .fc-bg-event.calendar-day-bg-absence.is-urlaub {
    background:
    repeating-linear-gradient(-45deg, var(--ui-surface-soft-02) 0 6px, rgba(255,255,255,0) 6px 12px),
      rgba(34, 70, 52, 0.36);
}

.fc .calendar-day-bg-absence.is-zeitausgleich.fc-bg-event,
.fc .fc-bg-event.calendar-day-bg-absence.is-zeitausgleich {
    background:
    repeating-linear-gradient(-45deg, var(--ui-surface-soft-02) 0 6px, rgba(255,255,255,0) 6px 12px),
      rgba(31, 50, 84, 0.36);
}

.fc .calendar-day-bg-absence.is-krankenstand.fc-bg-event,
.fc .fc-bg-event.calendar-day-bg-absence.is-krankenstand {
    background:
    repeating-linear-gradient(-45deg, var(--ui-surface-soft-02) 0 6px, rgba(255,255,255,0) 6px 12px),
      rgba(96, 64, 22, 0.38);
}

:root[data-theme="light"] .fc .calendar-day-bg-absence.fc-bg-event,
:root[data-theme="light"] .fc .fc-bg-event.calendar-day-bg-absence {
    background: rgba(96, 110, 138, 0.06);
}

:root[data-theme="light"] .fc .calendar-day-bg-absence.is-urlaub.fc-bg-event,
:root[data-theme="light"] .fc .fc-bg-event.calendar-day-bg-absence.is-urlaub {
    background:
      repeating-linear-gradient(-45deg, rgba(79,137,216,0.02) 0 6px, rgba(79,137,216,0) 6px 12px),
      rgba(74, 160, 111, 0.08);
}

:root[data-theme="light"] .fc .calendar-day-bg-absence.is-zeitausgleich.fc-bg-event,
:root[data-theme="light"] .fc .fc-bg-event.calendar-day-bg-absence.is-zeitausgleich {
    background:
      repeating-linear-gradient(-45deg, rgba(79,137,216,0.02) 0 6px, rgba(79,137,216,0) 6px 12px),
      rgba(79, 137, 216, 0.08);
}

:root[data-theme="light"] .fc .calendar-day-bg-absence.is-krankenstand.fc-bg-event,
:root[data-theme="light"] .fc .fc-bg-event.calendar-day-bg-absence.is-krankenstand {
    background:
      repeating-linear-gradient(-45deg, rgba(210,141,61,0.02) 0 6px, rgba(210,141,61,0) 6px 12px),
      rgba(210, 141, 61, 0.09);
}

.fc .fc-timegrid-event.calendar-worktime-marker-event {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fc .fc-timegrid-event.calendar-worktime-marker-event .fc-event-main {
    padding: 0 !important;
}

.calendar-worktime-marker-frame {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 8px;
    border: 1px solid rgba(174, 132, 231, 0.38);
    background:
            repeating-linear-gradient(-45deg, var(--ui-surface-soft-03) 0 6px, rgba(255,255,255,0) 6px 12px),
      rgba(86, 58, 120, 0.48);
    color: #f0e7ff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.05;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.calendar-worktime-marker-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-worktime-marker-label {
    display: none;
}

.calendar-worktime-marker-frame.calendar-worktime-marker-frame-absence {
    justify-content: center;
    border-radius: 6px;
    border-width: 1px;
    font-size: 10px;
    letter-spacing: 0.02em;
    background:
            repeating-linear-gradient(-45deg, var(--ui-surface-soft-02) 0 6px, rgba(255,255,255,0) 6px 12px),
      rgba(46, 53, 78, 0.42);
}

.calendar-worktime-marker-frame.calendar-worktime-marker-frame-absence.is-urlaub {
    border-color: rgba(116, 201, 146, 0.28);
    background:
            repeating-linear-gradient(-45deg, var(--ui-surface-soft-02) 0 6px, rgba(255,255,255,0) 6px 12px),
      rgba(34, 70, 52, 0.36);
    color: #def7e7;
}

.calendar-worktime-marker-frame.calendar-worktime-marker-frame-absence.is-zeitausgleich {
    border-color: rgba(126, 162, 227, 0.28);
    background:
            repeating-linear-gradient(-45deg, var(--ui-surface-soft-02) 0 6px, rgba(255,255,255,0) 6px 12px),
      rgba(31, 50, 84, 0.36);
    color: #ddeaff;
}

.calendar-worktime-marker-frame.calendar-worktime-marker-frame-absence.is-krankenstand {
    border-color: rgba(236, 175, 99, 0.30);
    background:
            repeating-linear-gradient(-45deg, var(--ui-surface-soft-02) 0 6px, rgba(255,255,255,0) 6px 12px),
      rgba(96, 64, 22, 0.40);
    color: #ffe9cb;
}

:root[data-theme="light"] .calendar-worktime-marker-frame.calendar-worktime-marker-frame-absence {
    background:
      repeating-linear-gradient(-45deg, rgba(79,137,216,0.015) 0 6px, rgba(79,137,216,0) 6px 12px),
      rgba(110, 125, 154, 0.10);
    border-color: rgba(131, 149, 181, 0.16);
    color: #5a6f8d;
    box-shadow: none;
}

:root[data-theme="light"] .calendar-worktime-marker-frame.calendar-worktime-marker-frame-absence.is-urlaub {
    border-color: rgba(74, 160, 111, 0.22);
    background:
      repeating-linear-gradient(-45deg, rgba(74,160,111,0.015) 0 6px, rgba(74,160,111,0) 6px 12px),
      rgba(74, 160, 111, 0.11);
    color: #2f684a;
}

:root[data-theme="light"] .calendar-worktime-marker-frame.calendar-worktime-marker-frame-absence.is-zeitausgleich {
    border-color: rgba(79, 137, 216, 0.22);
    background:
      repeating-linear-gradient(-45deg, rgba(79,137,216,0.015) 0 6px, rgba(79,137,216,0) 6px 12px),
      rgba(79, 137, 216, 0.11);
    color: #2f567f;
}

:root[data-theme="light"] .calendar-worktime-marker-frame.calendar-worktime-marker-frame-absence.is-krankenstand {
    border-color: rgba(210, 141, 61, 0.24);
    background:
      repeating-linear-gradient(-45deg, rgba(210,141,61,0.015) 0 6px, rgba(210,141,61,0) 6px 12px),
      rgba(210, 141, 61, 0.12);
    color: #7a5320;
}

.fc .fc-timegrid-event.calendar-worktime-marker-event .fc-event-time,
.fc .fc-timegrid-event.calendar-worktime-marker-event .fc-event-title-container {
    display: none !important;
}

.fc .fc-col-header-cell .fc-col-holiday-hint,
.calendar-holiday-header-overlay .fc-col-holiday-hint {
    position: absolute;
    transform: translate(-50%, 20px);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 10px);
    padding: 3px 7px 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border: 1px solid rgba(222, 144, 160, 0.28);
    border-bottom: 0;
    background: rgba(52, 29, 38, 0.72);
    backdrop-filter: blur(4px);
    font-size: 10px;
    line-height: 1.05;
    font-weight: 600;
    color: rgba(245, 211, 218, 0.96);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.fc .fc-col-header-cell .fc-col-holiday-hints {
    position: absolute;
    left: 0;
    right: 0;
    display: grid;
    align-items: start;
    gap: 0;
    pointer-events: none;
    z-index: 40;
}

.fc .fc-col-header-cell .fc-col-holiday-hint-slot {
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.fc .fc-col-header-cell .fc-col-holiday-hint.is-urlaub,
.calendar-holiday-header-overlay .fc-col-holiday-hint.is-urlaub {
    border-color: rgba(112, 197, 143, 0.30);
    background: rgba(26, 58, 43, 0.80);
    color: rgba(221, 246, 229, 0.96);
}

.fc .fc-col-header-cell .fc-col-holiday-hint.is-zeitausgleich,
.calendar-holiday-header-overlay .fc-col-holiday-hint.is-zeitausgleich {
    border-color: rgba(116, 154, 224, 0.30);
    background: rgba(24, 43, 72, 0.82);
    color: rgba(221, 234, 255, 0.96);
}

.fc .fc-col-header-cell .fc-col-holiday-hint.is-krankenstand,
.calendar-holiday-header-overlay .fc-col-holiday-hint.is-krankenstand {
    border-color: rgba(234, 171, 93, 0.30);
    background: rgba(81, 52, 17, 0.84);
    color: rgba(255, 233, 203, 0.97);
}

:root[data-theme="light"] .fc .fc-col-header-cell .fc-col-holiday-hint,
:root[data-theme="light"] .calendar-holiday-header-overlay .fc-col-holiday-hint {
    border-color: rgba(131, 149, 181, 0.18);
    background: rgba(255, 255, 255, 0.88);
    color: #5d7290;
    box-shadow: 0 2px 8px rgba(28, 45, 74, 0.08);
    backdrop-filter: blur(3px);
}

:root[data-theme="light"] .fc .fc-col-header-cell .fc-col-holiday-hint.is-urlaub,
:root[data-theme="light"] .calendar-holiday-header-overlay .fc-col-holiday-hint.is-urlaub {
    border-color: rgba(74, 160, 111, 0.22);
    background: rgba(242, 251, 246, 0.95);
    color: #3f7757;
}

:root[data-theme="light"] .fc .fc-col-header-cell .fc-col-holiday-hint.is-zeitausgleich,
:root[data-theme="light"] .calendar-holiday-header-overlay .fc-col-holiday-hint.is-zeitausgleich {
    border-color: rgba(79, 137, 216, 0.22);
    background: rgba(243, 248, 255, 0.95);
    color: #426897;
}

:root[data-theme="light"] .fc .fc-col-header-cell .fc-col-holiday-hint.is-krankenstand,
:root[data-theme="light"] .calendar-holiday-header-overlay .fc-col-holiday-hint.is-krankenstand {
    border-color: rgba(210, 141, 61, 0.24);
    background: rgba(255, 249, 240, 0.95);
    color: #8a632d;
}

.calendar-holiday-header-overlay {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 55;
}

.fc .fc-timegrid-header {
    overflow: visible !important;
}

.fc .fc-scrollgrid-section-header,
.fc .fc-scrollgrid-section-header .fc-col-header,
.fc .fc-scrollgrid-section-header table {
    overflow: visible !important;
}

.fc .fc-scrollgrid-section-header .fc-scroller-harness {
    overflow: visible !important;
    position: relative;
}

/* Worktime / Stundenliste */
.worktime-toolbar-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-right: var(--user-quick-safe-space);
    box-sizing: border-box;
}

.worktime-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    width: auto;
    min-height: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-right: 0;
}

.worktime-nav-btn {
    width: auto;
    text-align: center;
    justify-content: center;
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
}

.worktime-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.worktime-month-selects {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
}

.worktime-month-selects select {
    min-width: 0;
    flex: 0 1 140px;
}

.worktime-range-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    min-width: 0;
    min-height: 0;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 1 auto;
    justify-content: flex-end;
    margin-left: auto;
}

.worktime-range-toolbar #worktimeRangeNote {
    flex: 1 1 220px;
    min-width: 160px;
    max-width: 260px;
    height: 30px;
    min-height: unset;
    font-size: 12px;
    box-sizing: border-box;
}

.worktime-range-label {
    flex: 0 0 auto;
    color: #b9c8ea;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.7;
    font-size: 10.5px;
    font-weight: 700;
}

.worktime-range-toolbar .worktime-range-picker {
    --date-chip-width: 204px;
    flex: 0 0 var(--date-chip-width);
    min-width: var(--date-chip-width);
    max-width: var(--date-chip-width);
}

.worktime-range-toolbar .worktime-range-apply-btn,
.worktime-range-toolbar .worktime-range-clear-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

#worktimeKpis.board-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 6px;
    margin-top: 2px;
    margin-bottom: 16px;
    position: relative;
    z-index: 8;
}

#worktimeKpis .report-kpi {
    padding: 6px 8px 6px 9px;
    border-radius: 8px;
    background: var(--theme-worktime-kpi-bg);
    border-color: var(--theme-worktime-kpi-border);
}

#worktimeKpis .report-kpi-label {
    font-size: 9px;
    letter-spacing: 0.42px;
    line-height: 1.05;
}

#worktimeKpis .report-kpi-value {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.05;
}

#worktimeKpis .worktime-kpi-card {
    position: relative;
    overflow: visible;
}

#worktimeKpis .worktime-kpi-button {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

#worktimeKpis .worktime-kpi-button:focus-visible {
    outline: 2px solid rgba(227, 115, 115, 0.5);
    outline-offset: 2px;
}

.worktime-warnings-kpi-wrap {
    position: relative;
}

.worktime-warnings-popover {
    position: fixed;
    top: 0;
    left: 0;
    width: min(420px, calc(100vw - 28px));
    max-height: min(68vh, 500px);
    display: none;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(136, 150, 177, 0.22);
    background:
        radial-gradient(circle at top right, rgba(233, 110, 110, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(20, 28, 40, 0.98), rgba(16, 22, 33, 0.98));
    box-shadow: 0 18px 40px rgba(5, 10, 18, 0.34);
    z-index: 30;
}

.worktime-warnings-popover.active {
    display: block;
}

.worktime-warnings-popover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid rgba(136, 150, 177, 0.14);
}

.worktime-warnings-popover-title {
    font-size: 14px;
    font-weight: 700;
    color: #f5f8ff;
}

.worktime-warnings-popover-sub {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(219, 226, 239, 0.74);
}

.worktime-warnings-close {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
}

.worktime-warnings-popover-list {
    max-height: min(68vh, 444px);
    overflow: auto;
    padding: 8px;
}

.worktime-warnings-empty {
    padding: 12px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(219, 226, 239, 0.76);
    font-size: 11px;
}

.worktime-warning-day {
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

.worktime-warning-day + .worktime-warning-day {
    margin-top: 6px;
}

.worktime-warning-day-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.worktime-warning-date-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.worktime-warning-date {
    font-size: 12px;
    font-weight: 700;
    color: #f5f8ff;
}

.worktime-warning-count {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(233, 110, 110, 0.18);
    color: #ffb3b3;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.worktime-warning-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.worktime-warning-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(239, 243, 251, 0.92);
    font-size: 10px;
    line-height: 1.2;
}

.worktime-warning-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
    flex: 0 0 auto;
}

.worktime-warning-actions .micro-btn {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 10px;
}

#worktimeKpis .worktime-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--ui-surface-shade-25);
}

#worktimeKpis .worktime-kpi-group-meta::before { background: rgba(167, 176, 196, 0.42); }
#worktimeKpis .worktime-kpi-group-zeit::before { background: rgba(93, 154, 231, 0.48); }
#worktimeKpis .worktime-kpi-group-za::before { background: rgba(110, 121, 235, 0.48); }
#worktimeKpis .worktime-kpi-group-urlaub::before { background: rgba(90, 181, 130, 0.50); }
#worktimeKpis .worktime-kpi-group-abwesenheit::before { background: rgba(230, 161, 84, 0.52); }
#worktimeKpis .worktime-kpi-group-warn::before { background: rgba(233, 110, 110, 0.56); }

#worktimeKpis .worktime-kpi-summary-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
    position: relative;
    z-index: 1;
}

.worktime-kpi-summary-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 56px;
}

.worktime-kpi-summary-head.has-header-info {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    column-gap: 10px;
}

.worktime-kpi-summary-head-main {
    min-width: 0;
}

.worktime-kpi-summary-head-info {
    font-size: 10.5px;
    line-height: 1.32;
    color: rgba(227, 234, 246, 0.84);
}

.worktime-kpi-summary-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--monday-text-color, #eef3ff);
}

.worktime-kpi-summary-subtitle,
.worktime-kpi-summary-meta {
    font-size: 11px;
    line-height: 1.35;
    color: rgba(214, 223, 240, 0.76);
}

.worktime-kpi-summary-text {
    font-size: 11px;
    line-height: 1.45;
    color: rgba(227, 234, 246, 0.86);
    min-height: calc(1.45em * 2);
}

.worktime-kpi-summary-text.is-empty {
    visibility: hidden;
}

.worktime-kpi-period-mobile-compact .worktime-kpi-summary-text.is-empty {
    display: none;
}

.worktime-kpi-summary-head.has-header-info + .worktime-kpi-summary-text.is-empty {
    display: none;
}

.worktime-kpi-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.worktime-kpi-summary-sections {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.worktime-kpi-summary-grid.worktime-kpi-summary-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.worktime-kpi-summary-grid.worktime-kpi-summary-grid-cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

.worktime-kpi-summary-grid.worktime-kpi-summary-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.worktime-kpi-summary-grid.worktime-kpi-summary-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.worktime-kpi-summary-item {
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    position: relative;
}

.worktime-kpi-summary-item.has-info {
    cursor: help;
}

.worktime-kpi-info-popover {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    translate: -50% 0;
    z-index: 60;
    width: min(280px, calc(100vw - 48px));
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(122, 148, 201, 0.20);
    background:
        radial-gradient(circle at top right, rgba(92, 146, 233, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(18, 24, 40, 0.98), rgba(12, 17, 29, 0.98));
    box-shadow: 0 16px 34px rgba(7, 12, 22, 0.34);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
    pointer-events: none;
}

.worktime-kpi-summary-item.is-variants-only .worktime-kpi-info-popover {
    left: auto;
    right: 8px;
    translate: 0 0;
}

.worktime-kpi-summary-item.has-info:hover .worktime-kpi-info-popover,
.worktime-kpi-summary-item.has-info:focus-within .worktime-kpi-info-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.worktime-kpi-info-title {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #eef4ff;
}

.worktime-kpi-info-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
    font-size: 10px;
}

.worktime-kpi-info-popover.no-factor .worktime-kpi-info-line {
    grid-template-columns: minmax(0, 1fr) auto;
}

.worktime-kpi-info-line + .worktime-kpi-info-line {
    margin-top: 5px;
}

.worktime-kpi-info-label {
    color: rgba(222, 230, 244, 0.92);
}

.worktime-kpi-info-value {
    color: #f4f8ff;
    font-weight: 700;
}

.worktime-kpi-info-factor {
    min-width: 42px;
    padding: 2px 6px;
    border-radius: 999px;
    text-align: center;
    background: rgba(84, 128, 216, 0.18);
    color: #dbe7ff;
    font-size: 9px;
    font-weight: 700;
}

.worktime-kpi-summary-item-button {
    width: 100%;
    border: 1px solid transparent;
    text-align: left;
    cursor: pointer;
}

.worktime-kpi-summary-item-button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.worktime-kpi-summary-item-button:focus-visible {
    outline: 2px solid rgba(122, 168, 255, 0.9);
    outline-offset: 1px;
}

.worktime-kpi-summary-item-button.worktime-kpi-group-warn {
    background: rgba(233, 110, 110, 0.12);
    border-color: rgba(233, 110, 110, 0.28);
}

.worktime-kpi-summary-item-button.worktime-kpi-group-warn:hover {
    background: rgba(233, 110, 110, 0.18);
}

.worktime-kpi-summary-item-button.worktime-kpi-group-warn .worktime-kpi-summary-item-label {
    color: rgba(255, 208, 208, 0.82);
}

.worktime-kpi-summary-item-button.worktime-kpi-group-warn .worktime-kpi-summary-item-value {
    color: #ffd0d0;
}

.worktime-kpi-summary-item-label {
    font-size: 10px;
    line-height: 1.25;
    color: rgba(195, 206, 227, 0.82);
}

.worktime-kpi-summary-item-value {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #f4f8ff;
}

.worktime-kpi-summary-item.is-variants-only {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 0;
}

.worktime-kpi-summary-variants {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 7px;
}

.worktime-kpi-summary-item.is-variants-only .worktime-kpi-summary-variants {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-right: 8px;
    margin-top: 0;
}

.worktime-kpi-summary-variant {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.worktime-kpi-summary-item.is-variants-only .worktime-kpi-summary-variant {
    align-items: flex-start;
    gap: 1px;
    padding-top: 0;
    border-top: 0;
}

.worktime-kpi-summary-variant-label {
    font-size: 10px;
    line-height: 1.25;
    color: rgba(195, 206, 227, 0.82);
}

.worktime-kpi-summary-variant-value {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #f4f8ff;
}

.worktime-kpi-summary-item.is-variants-only .worktime-kpi-summary-variant-label,
.worktime-kpi-summary-item.is-variants-only .worktime-kpi-summary-variant-value {
    white-space: nowrap;
}

.worktime-kpi-summary-item.is-variants-only .worktime-kpi-summary-variant {
    flex-direction: column;
}

.worktime-kpi-summary-warnings {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.worktime-kpi-summary-warning {
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(233, 110, 110, 0.10);
    color: rgba(255, 208, 208, 0.94);
    font-size: 10px;
    line-height: 1.4;
}

.worktime-toolbar .secondary-btn {
    min-height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
}

.worktime-range-toolbar .secondary-btn {
    height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
}

.worktime-range-toolbar .worktime-range-apply-btn {
    height: 30px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(31, 91, 191, 0.14);
    line-height: 30px;
    border-radius: 8px;
}

.worktime-range-toolbar .worktime-range-clear-btn {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
    opacity: 0.9;
    border-radius: 8px;
}

.worktime-month-selects #worktimeMonthSelect,
.worktime-month-selects #worktimeYearSelect,
.worktime-month-selects #worktimeUserSelect {
    min-height: 30px;
    min-width: 0;
}

.worktime-range-toolbar .zeitraum-trigger {
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 34px;
    text-align: center;
}

.worktime-range-confirm-popup {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 13, 22, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.worktime-range-confirm-card {
    min-width: 300px;
    max-width: 420px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--theme-worktime-confirm-card-border);
    background: var(--theme-worktime-confirm-card-bg);
    box-shadow: var(--theme-worktime-confirm-card-shadow);
}

.worktime-range-confirm-title {
    font-size: 14px;
    font-weight: 700;
    color: #eef3ff;
    margin-bottom: 6px;
}

.worktime-range-confirm-range {
    font-size: 12px;
    color: #b8c7ea;
    margin-bottom: 12px;
}

.worktime-range-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.worktime-range-confirm-actions .secondary-btn,
.worktime-range-confirm-actions .primary-btn {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
}

@media (max-width: 980px) {
    .worktime-kpi-summary-grid.worktime-kpi-summary-grid-cols-3,
    .worktime-kpi-summary-grid.worktime-kpi-summary-grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .worktime-kpi-summary-grid.worktime-kpi-summary-grid-cols-2,
    .worktime-kpi-summary-grid.worktime-kpi-summary-grid-cols-3,
    .worktime-kpi-summary-grid.worktime-kpi-summary-grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .worktime-toolbar-row {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .worktime-toolbar {
        width: 100%;
        flex-wrap: nowrap;
        gap: 6px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .worktime-month-selects {
        gap: 6px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .worktime-month-selects select {
        flex: 1 1 0;
        min-width: 0;
    }

    .worktime-range-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }
    .worktime-range-toolbar .worktime-range-picker {
        flex: 1 1 120px;
    }
    .worktime-range-toolbar #worktimeRangeNote {
        flex: 1 1 100px;
        max-width: none;
    }
    .worktime-range-toolbar .worktime-range-label {
        flex: 0 0 100%;
        font-size: 10px;
    }
}

#worktimeTableWrap {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

.worktime-table th,
.worktime-table td {
    vertical-align: middle;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 1.15;
}

.worktime-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

.worktime-col-date { width: clamp(86px, 6.5vw, 108px); }
.worktime-col-time { width: clamp(48px, 5.2vw, 72px); }
.worktime-col-entry { width: clamp(90px, 10vw, 140px); }
.worktime-col-note { width: clamp(90px, 10vw, 140px); }

.worktime-table th,
.worktime-table td {
    min-width: 0;
}

.worktime-table th {
    overflow: hidden;
}

.worktime-table thead tr {
    background: #1b2132;
}

.worktime-table th {
    position: sticky;
    top: 0;
    z-index: 6;
    padding-top: 7px;
    padding-bottom: 7px;
    background: linear-gradient(180deg, rgba(30, 37, 58, 1), rgba(24, 30, 47, 1));
    box-shadow: inset 0 -1px 0 rgba(156, 175, 209, 0.14);
}

.worktime-table th:first-child {
    text-align: left;
}

.worktime-table th:not(:first-child) {
    text-align: center;
}

.worktime-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-top: 7px;
    padding-bottom: 7px;
    background: linear-gradient(180deg, rgba(49, 55, 82, 0.995), rgba(43, 49, 73, 0.99));
    border-top: 1px solid rgba(156, 175, 209, 0.20);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(156, 175, 209, 0.12);
}

.worktime-table tfoot tr.board-group-sum-row:hover td {
    background: #2f3450 !important;
}

.worktime-table td:nth-child(2),
.worktime-table td:nth-child(3),
.worktime-table td:nth-child(4),
.worktime-table td:nth-child(5),
.worktime-table td:nth-child(6),
.worktime-table td:nth-child(7) {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.worktime-date-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 18px;
    min-width: 0;
    position: relative;
}

.worktime-date-main {
    white-space: nowrap;
}

.worktime-day-tag {
    display: inline-flex;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 1.1;
    border: 1px solid rgba(156, 175, 209, 0.2);
    color: #bfcdf0;
    background: rgba(46, 56, 87, 0.35);
    align-items: center;
    gap: 4px;
}

.worktime-day-tag-button {
    border: 1px solid rgba(119, 158, 232, 0.24);
    background: rgba(84, 128, 216, 0.14);
    color: #dce7ff;
    cursor: default;
}

.worktime-za-popover {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.worktime-za-popover:hover .worktime-day-tag-button,
.worktime-za-popover:focus-within .worktime-day-tag-button {
    background: rgba(99, 141, 224, 0.20);
    border-color: rgba(132, 171, 243, 0.34);
}

.worktime-za-popover-count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(220, 104, 112, 0.22);
    color: #ffd4d8;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.worktime-za-popover-card {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 80;
    width: min(320px, calc(100vw - 48px));
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(122, 148, 201, 0.20);
    background:
        radial-gradient(circle at top right, rgba(92, 146, 233, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(18, 24, 40, 0.98), rgba(12, 17, 29, 0.98));
    box-shadow: 0 18px 38px rgba(7, 12, 22, 0.38);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
    pointer-events: none;
}

.worktime-za-popover:hover .worktime-za-popover-card,
.worktime-za-popover:focus-within .worktime-za-popover-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.worktime-za-popover-title {
    font-size: 11px;
    font-weight: 700;
    color: #eef4ff;
    margin-bottom: 8px;
}

.worktime-za-popover-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.worktime-za-popover-cell {
    padding: 6px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    min-width: 0;
}

.worktime-za-popover-label {
    font-size: 9px;
    color: rgba(196, 209, 233, 0.82);
}

.worktime-za-popover-value {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #f4f8ff;
}

.worktime-za-popover-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(122, 148, 201, 0.14);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.worktime-za-popover-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
    font-size: 10px;
}

.worktime-za-popover-line-label {
    color: rgba(222, 230, 244, 0.92);
}

.worktime-za-popover-line-value {
    color: #f4f8ff;
    font-weight: 700;
}

.worktime-za-popover-line-factor {
    min-width: 46px;
    padding: 2px 6px;
    border-radius: 999px;
    text-align: center;
    background: rgba(84, 128, 216, 0.18);
    color: #dbe7ff;
    font-size: 9px;
    font-weight: 700;
}

.worktime-za-popover-warnings {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.worktime-za-popover-warning {
    padding: 6px 7px;
    border-radius: 8px;
    background: rgba(220, 104, 112, 0.12);
    color: #ffd4d8;
    font-size: 9px;
    line-height: 1.35;
}

.worktime-table tr.is-weekend td {
    background: rgba(21, 28, 49, 0.45);
}

.worktime-table tr.is-saturday td {
    background: rgba(41, 54, 92, 0.42);
}

.worktime-table tr.is-sunday td {
    background: rgba(41, 54, 92, 0.42);
}

.worktime-table tr.is-holiday td {
    background: rgba(62, 38, 38, 0.18);
}

.worktime-table tr.has-override-urlaub td {
    background-image: linear-gradient(0deg, rgba(89, 181, 130, 0.10), rgba(89, 181, 130, 0.10));
}

.worktime-table tr.has-override-zeitausgleich td {
    background-image: linear-gradient(0deg, rgba(108, 154, 234, 0.11), rgba(108, 154, 234, 0.11));
}

.worktime-table tr.has-override-arzt td {
    background-image: linear-gradient(0deg, rgba(140, 119, 214, 0.10), rgba(140, 119, 214, 0.10));
}

.worktime-table tr.has-override-krankenstand td {
    background-image: linear-gradient(0deg, rgba(226, 154, 74, 0.10), rgba(226, 154, 74, 0.10));
}

.worktime-table tr.is-today td {
    box-shadow: inset 0 1px 0 rgba(126, 182, 255, 0.25), inset 0 -1px 0 rgba(126, 182, 255, 0.25);
}

.worktime-table tr.is-range-selected td {
    background-image: linear-gradient(0deg, rgba(84, 132, 255, 0.12), rgba(84, 132, 255, 0.12));
}

.worktime-table tr.is-range-edge-start td,
.worktime-table tr.is-range-edge-end td {
    box-shadow: inset 0 1px 0 rgba(122, 163, 255, 0.28), inset 0 -1px 0 rgba(122, 163, 255, 0.28);
}

.worktime-override-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    align-items: center;
}

.worktime-override-type-cell {
    width: 100%;
    display: inline-flex;
    --status-chip-width: 100%;
}

.worktime-override-type-trigger {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 0;
    background: rgba(13, 19, 36, 0.7);
    border: 1px solid rgba(120, 142, 190, 0.2);
    color: #eaf0ff;
}

.worktime-override-menu {
    width: min(220px, calc(100vw - 24px));
    padding: 8px;
    background: linear-gradient(180deg, rgba(40, 48, 76, 0.98), rgba(28, 35, 58, 0.98));
    border-color: rgba(132, 151, 198, 0.22);
}

.worktime-override-menu .status-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.worktime-override-option {
    width: 100%;
    min-width: 0;
    background: rgba(18, 25, 43, 0.96);
    border-color: rgba(112, 134, 184, 0.18);
    color: #eaf1ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    filter: none;
}

.worktime-override-option:hover {
    background: rgba(33, 43, 69, 0.98);
    filter: none;
}

.worktime-override-option.active {
    background: linear-gradient(180deg, rgba(67, 110, 198, 0.92), rgba(48, 88, 170, 0.92));
    border-color: rgba(124, 165, 243, 0.42);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 0 0 1px rgba(100, 145, 230, 0.18);
}

.worktime-override-controls .worktime-override-time-range {
    display: none;
}

.worktime-override-controls.is-arzt {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 132px);
    align-items: stretch;
}

.worktime-override-controls.is-arzt .worktime-override-time-range {
    display: block;
}

.worktime-time-range-trigger {
    width: 100%;
    min-height: 30px;
    border: 1px solid rgba(120, 142, 190, 0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(27, 35, 61, 0.86), rgba(14, 20, 37, 0.86));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    color: #edf3ff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    padding: 6px 8px;
    text-align: center;
    cursor: pointer;
}

.worktime-time-range-trigger.is-empty {
    color: rgba(184, 199, 231, 0.78);
}

.worktime-time-select {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    border-radius: 0;
    border: none;
    background: transparent;
    color: #edf3ff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    padding: 4px 8px;
    transition: background-color 0.14s ease, color 0.14s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.worktime-time-select:hover {
    background-color: var(--ui-surface-soft-03);
}

.worktime-time-select:focus {
    outline: none;
    background-color: rgba(86, 127, 214, 0.10);
    color: #f4f8ff;
}

.worktime-time-select:disabled {
    opacity: 0.55;
    cursor: default;
}

.worktime-arzt-add-btn {
    min-height: 32px;
}

.worktime-arzt-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.worktime-arzt-slot-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(157, 126, 214, 0.22);
    background: rgba(69, 49, 102, 0.28);
    color: #e7ddfb;
    font-size: 11px;
    line-height: 1.15;
}

.worktime-arzt-slot-pill button {
    border: none;
    background: transparent;
    color: #d6c4ff;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    font-size: 12px;
}

.worktime-arzt-slot-pill button:hover {
    color: #fff;
}

.worktime-time-picker {
    position: relative;
    min-width: 0;
}

.worktime-time-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    display: none;
    max-height: 260px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid rgba(144, 163, 205, 0.18);
    background: rgba(47, 53, 88, 0.98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
    padding: 6px;
    z-index: 120;
}

.worktime-time-dropdown.active {
    display: block;
}

.worktime-time-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(8, 12, 22, 0.52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.worktime-time-overlay.active {
    display: flex;
}

.worktime-time-overlay-card {
    width: min(420px, calc(100vw - 24px));
    max-height: min(78vh, 680px);
    overflow: auto;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(122, 148, 201, 0.22);
    background:
        radial-gradient(circle at top right, rgba(92, 146, 233, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(19, 26, 43, 0.98), rgba(11, 17, 31, 0.98));
    box-shadow: 0 24px 52px rgba(4, 10, 20, 0.44);
}

.worktime-time-overlay-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.worktime-time-overlay-title {
    font-size: 15px;
    font-weight: 700;
    color: #eef4ff;
}

.worktime-time-overlay-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(194, 209, 236, 0.78);
}

.worktime-time-overlay-close {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border: 1px solid rgba(120, 142, 190, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #edf3ff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.worktime-time-overlay-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.worktime-time-overlay-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.worktime-time-overlay-field-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(194, 209, 236, 0.82);
}

.worktime-time-overlay-select {
    width: 100%;
    min-height: 36px;
    border: 1px solid rgba(120, 142, 190, 0.18);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(30, 38, 62, 0.96), rgba(18, 25, 43, 0.96));
    color: #dfe8fb;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.worktime-time-overlay-select:focus {
    outline: none;
    border-color: rgba(108, 151, 235, 0.42);
    box-shadow: 0 0 0 2px rgba(69, 113, 201, 0.18);
}

.worktime-time-overlay-select option {
    background: #1a2338;
    color: #edf3ff;
}

.worktime-time-overlay-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.worktime-time-overlay-clear,
.worktime-time-overlay-apply {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.worktime-time-dropdown-option {
    width: 100%;
    min-height: 34px;
    border: none;
    background: transparent;
    color: #d8deef;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    padding: 5px 6px;
}

.worktime-time-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #f0f4ff;
}

.worktime-time-dropdown-option.active {
    background: rgba(30, 73, 152, 0.82);
    color: #eef4ff;
    font-weight: 700;
}

.worktime-override-controls select,
.worktime-override-controls input,
.worktime-table td input.project-inline-input {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    box-sizing: border-box;
    background: rgba(13, 19, 36, 0.7);
    border: 1px solid rgba(120, 142, 190, 0.2);
    border-radius: 6px;
    color: #eaf0ff;
    font-size: 12px;
}

.worktime-table td input.project-inline-input {
    min-height: 28px;
    padding: 4px;
}

.worktime-override-controls select,
.worktime-override-controls input {
    padding: 3px 8px;
}

.worktime-override-controls input[type="time"] {
    min-width: 0;
    padding: 3px 6px;
}

.worktime-delta-cell.is-plus {
    color: #8fe0ab;
    font-weight: 600;
}

.worktime-delta-cell.is-minus {
    color: #f0a3ad;
    font-weight: 600;
}

.worktime-delta-cell.is-zero {
    color: #cfd8ee;
}

.worktime-entry-locked {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid rgba(156, 175, 209, 0.14);
    color: #aebad7;
    background: rgba(16, 22, 40, 0.35);
    font-size: 12px;
}

.worktime-entry-locked-note {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #aebad7;
    font-size: 12px;
    opacity: 0.95;
}

/* Worktime light-theme polish */
:root[data-theme="light"] .worktime-toolbar {
    box-shadow: none;
}

:root[data-theme="light"] .worktime-range-confirm-popup {
    background: rgba(22, 33, 51, 0.12);
}

:root[data-theme="light"] .worktime-range-confirm-title {
    color: #20324a;
}

:root[data-theme="light"] .worktime-range-confirm-range {
    color: #657b98;
}

:root[data-theme="light"] .worktime-range-label {
    color: #607391;
    opacity: 1;
}

:root[data-theme="light"] #worktimeKpis .report-kpi {
    box-shadow: 0 1px 2px rgba(34, 55, 92, 0.06);
}

:root[data-theme="light"] #worktimeKpis .report-kpi-label {
    color: #6a7f9c;
    font-weight: 600;
}

:root[data-theme="light"] #worktimeKpis .worktime-kpi-group-warn .report-kpi-label {
    color: #9a5960;
}

:root[data-theme="light"] #worktimeKpis .worktime-kpi-group-warn .report-kpi-value {
    color: #7d202b;
}

:root[data-theme="dark"] #worktimeKpis .worktime-kpi-group-warn .report-kpi-label {
    color: #e07a7a;
}

:root[data-theme="dark"] #worktimeKpis .worktime-kpi-group-warn .report-kpi-value {
    color: #f0a0a0;
}

:root[data-theme="light"] .worktime-warnings-popover {
    border-color: rgba(198, 144, 144, 0.28);
    background:
        radial-gradient(circle at top right, rgba(233, 110, 110, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 252, 0.99), rgba(251, 247, 247, 0.99));
    box-shadow: 0 16px 36px rgba(62, 30, 30, 0.14);
}

:root[data-theme="light"] .worktime-warnings-popover-title {
    color: #3b1d22;
}

:root[data-theme="light"] .worktime-warnings-popover-sub {
    color: #8a6268;
}

:root[data-theme="light"] .worktime-warnings-close {
    background: rgba(141, 87, 87, 0.10);
    color: #7d202b;
}

:root[data-theme="light"] .worktime-warning-day {
    background: rgba(181, 92, 92, 0.06);
}

:root[data-theme="light"] .worktime-warnings-empty {
    background: rgba(181, 92, 92, 0.06);
    color: #7c6167;
}

:root[data-theme="light"] .worktime-warning-date {
    color: #3b1d22;
}

:root[data-theme="light"] .worktime-warning-count {
    background: rgba(191, 79, 79, 0.12);
    color: #9c2731;
}

/* Shared section language for CRM / Reports / Worktime / User / Admin */
.feature-surface {
    --feature-accent-rgb: 92, 146, 233;
    --feature-accent: rgb(var(--feature-accent-rgb));
    --feature-accent-soft: rgba(var(--feature-accent-rgb), 0.16);
    --feature-accent-border: rgba(var(--feature-accent-rgb), 0.26);
    --feature-accent-strong: rgba(var(--feature-accent-rgb), 0.42);
}

.feature-surface-crm {
    --feature-accent-rgb: 67, 160, 140;
}

.feature-surface-reports {
    --feature-accent-rgb: 92, 146, 233;
}

.feature-surface-worktime {
    --feature-accent-rgb: 86, 167, 125;
}

.feature-surface-user {
    --feature-accent-rgb: 79, 152, 216;
}

.feature-surface-admin {
    --feature-accent-rgb: 201, 139, 60;
}

.feature-surface .section-header {
    margin-bottom: 25px;
}

.feature-surface .section-header h1,
.feature-surface .section-header h2 {
    color: var(--monday-text);
}

.feature-surface .section-header .form-label,
.feature-surface .section-header .admin-hint,
.feature-surface .section-header .crm-company-selected-inline {
    color: var(--feature-shell-muted);
}

#crmView .crm-panel,
#reportsView .report-panel,
#reportsView .reports-insight-card,
#worktimeView .admin-card,
#userView .admin-card,
#adminView .admin-card {
    border: 1px solid var(--feature-shell-border);
    background:
        radial-gradient(circle at top right, rgba(var(--feature-accent-rgb), 0.08), transparent 28%),
        var(--feature-shell-card-bg);
    box-shadow: var(--feature-shell-shadow);
}

#crmView .crm-company-summary-card,
#crmView .crm-company-notes-panel-card,
#crmView .crm-company-activity-card,
#crmView .crm-company-project-card,
#crmView .crm-company-hero {
    border-color: var(--feature-shell-border);
    background:
        radial-gradient(circle at top right, rgba(var(--feature-accent-rgb), 0.1), transparent 28%),
        var(--feature-shell-card-bg);
    box-shadow: var(--feature-shell-shadow);
}

#crmView .crm-company-list-toolbar,
#crmView .crm-contacts-toolbar,
#crmView .crm-search-row,
#reportsView .reports-filters,
#reportsView .reports-subtabs,
#worktimeView .worktime-toolbar,
#worktimeView .worktime-range-toolbar {
    border: 1px solid var(--feature-shell-border);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(var(--feature-accent-rgb), 0.1), transparent 32%),
        var(--feature-shell-toolbar-bg);
    box-shadow: 0 12px 30px rgba(10, 18, 31, 0.12);
}

#crmView .crm-company-list-toolbar,
#crmView .crm-contacts-toolbar,
#reportsView .reports-filters,
#reportsView .reports-subtabs {
    padding: 12px 14px;
}

#crmView .crm-search-row {
    margin-bottom: 0;
    padding: 10px 12px;
    width: min(620px, 100%);
}

#worktimeView .worktime-toolbar-row {
    gap: 12px;
}

#worktimeView .worktime-toolbar,
#worktimeView .worktime-range-toolbar {
    height: 52px;
    padding: 10px 12px;
    min-height: 52px;
}

#crmView .crm-search-row input[type="search"],
#reportsView .reports-filters input,
#reportsView .reports-filters select,
#worktimeView .worktime-toolbar select,
#worktimeView .worktime-range-toolbar input,
#userView .admin-card input,
#userView .admin-card select,
#userView .admin-card textarea,
#adminView .admin-card input,
#adminView .admin-card select,
#adminView .admin-card textarea {
    background: var(--feature-shell-input-bg);
    border: 1px solid var(--feature-shell-input-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#worktimeView .worktime-toolbar select {
    color: #eaf1ff;
    color-scheme: dark;
}

#worktimeView .worktime-toolbar select option {
    background: #182136;
    color: #eaf1ff;
}

#crmView .crm-search-row input[type="search"]:focus,
#reportsView .reports-filters input:focus,
#reportsView .reports-filters select:focus,
#worktimeView .worktime-toolbar select:focus,
#worktimeView .worktime-range-toolbar input:focus,
#userView .admin-card input:focus,
#userView .admin-card select:focus,
#userView .admin-card textarea:focus,
#adminView .admin-card input:focus,
#adminView .admin-card select:focus,
#adminView .admin-card textarea:focus {
    outline: none;
    border-color: var(--feature-accent-strong);
    box-shadow: 0 0 0 4px rgba(var(--feature-accent-rgb), 0.08);
}

#reportsView .reports-subtab {
    border-color: var(--feature-accent-border);
    background: rgba(var(--feature-accent-rgb), 0.12);
}

#reportsView .reports-subtab:hover {
    background: rgba(var(--feature-accent-rgb), 0.2);
}

#reportsView .reports-subtab.active {
    background: rgba(var(--feature-accent-rgb), 0.94);
    border-color: rgba(var(--feature-accent-rgb), 0.94);
    box-shadow: 0 10px 24px rgba(var(--feature-accent-rgb), 0.24);
}

#crmView .crm-view-toggle-row,
#crmView .crm-company-detail-tabs {
    border-color: var(--feature-shell-border);
    background: rgba(var(--feature-accent-rgb), 0.08);
}

#crmView .crm-view-toggle-row .secondary-btn.active,
#crmView .crm-view-toggle-row .secondary-btn[aria-selected="true"],
#crmView .crm-company-detail-tabs .secondary-btn.active,
#crmView .crm-company-detail-tabs .secondary-btn.is-current-company-tab,
#crmView .crm-company-detail-tabs .secondary-btn[aria-selected="true"] {
    background: linear-gradient(180deg, rgba(var(--feature-accent-rgb), 0.34), rgba(var(--feature-accent-rgb), 0.24)) !important;
    border-color: rgba(var(--feature-accent-rgb), 0.42) !important;
    box-shadow: 0 10px 22px rgba(var(--feature-accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#userView .user-avatar-preview {
    border-color: rgba(var(--feature-accent-rgb), 0.26);
    background:
        radial-gradient(circle at 30% 30%, rgba(var(--feature-accent-rgb), 0.22), transparent 54%),
        rgba(31, 39, 58, 0.92);
    box-shadow: 0 14px 28px rgba(var(--feature-accent-rgb), 0.12);
}

#userView .admin-card h3,
#reportsView .reports-insight-section-title,
#reportsView .reports-insight-title,
#worktimeView .worktime-range-label,
#crmView .crm-company-hero-label,
#crmView .crm-company-kpi-label {
    color: color-mix(in srgb, var(--feature-accent) 38%, var(--monday-text));
}

#adminView .admin-card h3,
#adminView .admin-calendar-section-title,
#adminView .admin-subsection-title {
    color: var(--monday-text);
}

:root[data-theme="light"] #crmView .crm-panel,
:root[data-theme="light"] #reportsView .report-panel,
:root[data-theme="light"] #reportsView .reports-insight-card,
:root[data-theme="light"] #worktimeView .admin-card,
:root[data-theme="light"] #userView .admin-card,
:root[data-theme="light"] #adminView .admin-card,
:root[data-theme="light"] #crmView .crm-company-summary-card,
:root[data-theme="light"] #crmView .crm-company-notes-panel-card,
:root[data-theme="light"] #crmView .crm-company-activity-card,
:root[data-theme="light"] #crmView .crm-company-project-card,
:root[data-theme="light"] #crmView .crm-company-hero,
:root[data-theme="light"] #crmView .crm-company-list-toolbar,
:root[data-theme="light"] #crmView .crm-contacts-toolbar,
:root[data-theme="light"] #crmView .crm-search-row,
:root[data-theme="light"] #reportsView .reports-filters,
:root[data-theme="light"] #reportsView .reports-subtabs,
:root[data-theme="light"] #worktimeView .worktime-toolbar,
:root[data-theme="light"] #worktimeView .worktime-range-toolbar {
    box-shadow: 0 16px 34px rgba(23, 37, 63, 0.08);
}

:root[data-theme="light"] #worktimeView .worktime-toolbar select {
    color: #24344d;
    color-scheme: light;
}

:root[data-theme="light"] #worktimeView .worktime-toolbar select option {
    background: #ffffff;
    color: #24344d;
}

@media (max-width: 900px) {
    #crmView .crm-company-list-toolbar,
    #crmView .crm-contacts-toolbar,
    #crmView .crm-search-row,
    #reportsView .reports-filters,
    #reportsView .reports-subtabs,
    #worktimeView .worktime-toolbar,
    #worktimeView .worktime-range-toolbar {
        border-radius: 14px;
    }
}

:root[data-theme="light"] .worktime-warning-tag {
    background: rgba(255, 255, 255, 0.72);
    color: #62434a;
}

:root[data-theme="light"] #worktimeKpis .report-kpi-value {
    color: #1d2a3f;
}

:root[data-theme="light"] .worktime-kpi-summary-title {
    color: #23324a;
}

:root[data-theme="light"] .worktime-kpi-summary-subtitle,
:root[data-theme="light"] .worktime-kpi-summary-meta {
    color: #7183a0;
}

:root[data-theme="light"] .worktime-kpi-summary-text {
    color: #51627d;
}

:root[data-theme="light"] .worktime-kpi-summary-item {
    background: rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .worktime-kpi-summary-variant {
    border-top-color: rgba(131, 149, 181, 0.16);
}

:root[data-theme="light"] .worktime-kpi-summary-variant-label {
    color: #6b809f;
}

:root[data-theme="light"] .worktime-kpi-summary-variant-value {
    color: #1f3046;
}

:root[data-theme="light"] .worktime-kpi-info-popover {
    border-color: rgba(131, 149, 181, 0.24);
    background:
        radial-gradient(circle at top right, rgba(64, 122, 214, 0.08), transparent 24%),
        linear-gradient(180deg, #ffffff, #f5f8fd);
    box-shadow: 0 16px 34px rgba(41, 58, 89, 0.16);
}

:root[data-theme="light"] .worktime-kpi-info-title {
    color: #22324a;
}

:root[data-theme="light"] .worktime-kpi-info-label {
    color: #48607e;
}

:root[data-theme="light"] .worktime-kpi-info-value {
    color: #1f3046;
}

:root[data-theme="light"] .worktime-kpi-info-factor {
    background: rgba(84, 128, 216, 0.10);
    color: #35547d;
}

:root[data-theme="light"] .worktime-kpi-summary-item-button:hover {
    background: rgba(236, 242, 255, 0.98);
}

:root[data-theme="light"] .worktime-kpi-summary-item-button.worktime-kpi-group-warn {
    background: rgba(191, 79, 79, 0.10);
    border-color: rgba(191, 79, 79, 0.22);
}

:root[data-theme="light"] .worktime-kpi-summary-item-button.worktime-kpi-group-warn:hover {
    background: rgba(191, 79, 79, 0.15);
}

:root[data-theme="light"] .worktime-kpi-summary-item-button.worktime-kpi-group-warn .worktime-kpi-summary-item-label {
    color: #9d4f5b;
}

:root[data-theme="light"] .worktime-kpi-summary-item-button.worktime-kpi-group-warn .worktime-kpi-summary-item-value {
    color: #8b2d37;
}

:root[data-theme="light"] .worktime-kpi-summary-item-label {
    color: #7183a0;
}

:root[data-theme="light"] .worktime-kpi-summary-item-value {
    color: #21314a;
}

:root[data-theme="light"] .worktime-kpi-summary-warning {
    background: rgba(191, 79, 79, 0.10);
    color: #8b2d37;
}

:root[data-theme="light"] .worktime-table th,
:root[data-theme="light"] .worktime-table td {
    border-bottom-color: rgba(142, 159, 190, 0.20);
}

:root[data-theme="light"] .worktime-table th {
    color: #6f829d;
    background: linear-gradient(180deg, rgba(253, 255, 255, 1), rgba(245, 249, 255, 1));
    position: sticky;
    top: 0;
    z-index: 6;
    box-shadow: inset 0 -1px 0 rgba(131, 149, 181, 0.16);
}

:root[data-theme="light"] .worktime-table thead tr {
    background: #f7faff;
}

:root[data-theme="light"] .worktime-table tfoot td {
    background: linear-gradient(180deg, rgba(240, 245, 253, 0.995), rgba(234, 241, 251, 0.99));
    border-top: 1px solid rgba(131, 149, 181, 0.18);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(131, 149, 181, 0.12);
}

:root[data-theme="light"] .worktime-table tfoot tr.board-group-sum-row:hover td {
    background: #eef3fb !important;
}

:root[data-theme="light"] .worktime-table tbody tr td {
    background: rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .worktime-table tbody tr:nth-child(even):not(.is-weekend):not(.is-holiday) td {
    background: rgba(249, 251, 255, 0.86);
}

:root[data-theme="light"] .worktime-table tr.is-weekend td {
    background: rgba(242, 244, 248, 0.94);
    color: #66758a;
}

:root[data-theme="light"] .worktime-table tr.is-saturday td {
    background: rgba(242, 243, 245, 0.94);
    color: #6f7782;
}

:root[data-theme="light"] .worktime-table tr.is-sunday td {
    background: rgba(242, 243, 245, 0.94);
    color: #6f7782;
}

:root[data-theme="light"] .worktime-table tr.is-holiday td {
    background: rgba(248, 241, 243, 0.92);
}

:root[data-theme="light"] .worktime-table tr.has-override-urlaub td {
    background: rgba(239, 248, 242, 0.96) !important;
    background-image: none !important;
}

:root[data-theme="light"] .worktime-table tr.has-override-zeitausgleich td {
    background: rgba(239, 244, 252, 0.96) !important;
    background-image: none !important;
}

:root[data-theme="light"] .worktime-table tr.has-override-arzt td {
    background: rgba(244, 241, 251, 0.96) !important;
    background-image: none !important;
}

:root[data-theme="light"] .worktime-table tr.has-override-krankenstand td {
    background: rgba(251, 245, 238, 0.96) !important;
    background-image: none !important;
}

:root[data-theme="light"] .worktime-table tr.is-range-selected td {
    background: #e8effb !important;
    background-image: none !important;
    box-shadow: none;
    border-bottom-color: rgba(151, 171, 207, 0.22);
}

:root[data-theme="light"] .worktime-table tr.is-range-edge-start td,
:root[data-theme="light"] .worktime-table tr.is-range-edge-end td {
    background: #e2ebfb !important;
    background-image: none !important;
}

:root[data-theme="light"] .worktime-table tr.is-range-edge-start td:first-child,
:root[data-theme="light"] .worktime-table tr.is-range-edge-start td:last-child,
:root[data-theme="light"] .worktime-table tr.is-range-edge-end td:first-child,
:root[data-theme="light"] .worktime-table tr.is-range-edge-end td:last-child {
    background: #dbe7fb !important;
}

:root[data-theme="light"] .worktime-table tr.is-range-edge-start td:first-child {
    box-shadow: inset 2px 0 0 rgba(98, 134, 203, 0.45), inset 0 1px 0 rgba(98, 134, 203, 0.24);
}

:root[data-theme="light"] .worktime-table tr.is-range-edge-start td:last-child {
    box-shadow: inset -2px 0 0 rgba(98, 134, 203, 0.45), inset 0 1px 0 rgba(98, 134, 203, 0.24);
}

:root[data-theme="light"] .worktime-table tr.is-range-edge-end td:first-child {
    box-shadow: inset 2px 0 0 rgba(98, 134, 203, 0.45), inset 0 -1px 0 rgba(98, 134, 203, 0.24);
}

:root[data-theme="light"] .worktime-table tr.is-range-edge-end td:last-child {
    box-shadow: inset -2px 0 0 rgba(98, 134, 203, 0.45), inset 0 -1px 0 rgba(98, 134, 203, 0.24);
}

:root[data-theme="light"] .worktime-day-tag {
    border-color: rgba(122, 141, 176, 0.24);
    color: #516882;
    background: rgba(234, 240, 249, 0.95);
}

:root[data-theme="light"] .worktime-day-tag-button {
    border-color: rgba(98, 134, 203, 0.28);
    color: #2d4b73;
    background: rgba(223, 234, 251, 0.96);
}

:root[data-theme="light"] .worktime-za-popover-count {
    background: rgba(191, 79, 79, 0.12);
    color: #9c2731;
}

:root[data-theme="light"] .worktime-za-popover-card {
    border-color: rgba(131, 149, 181, 0.24);
    background:
        radial-gradient(circle at top right, rgba(64, 122, 214, 0.08), transparent 24%),
        linear-gradient(180deg, #ffffff, #f5f8fd);
    box-shadow: 0 18px 38px rgba(41, 58, 89, 0.18);
}

:root[data-theme="light"] .worktime-za-popover-title {
    color: #22324a;
}

:root[data-theme="light"] .worktime-za-popover-cell {
    background: rgba(240, 245, 252, 0.92);
}

:root[data-theme="light"] .worktime-za-popover-label {
    color: #6b809f;
}

:root[data-theme="light"] .worktime-za-popover-value {
    color: #1f3046;
}

:root[data-theme="light"] .worktime-za-popover-block {
    border-top-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .worktime-za-popover-line-label {
    color: #48607e;
}

:root[data-theme="light"] .worktime-za-popover-line-value {
    color: #1f3046;
}

:root[data-theme="light"] .worktime-za-popover-line-factor {
    background: rgba(84, 128, 216, 0.10);
    color: #35547d;
}

:root[data-theme="light"] .worktime-za-popover-warning {
    background: rgba(191, 79, 79, 0.08);
    color: #8f3c45;
}

:root[data-theme="light"] .worktime-override-controls select,
:root[data-theme="light"] .worktime-override-controls input,
:root[data-theme="light"] .worktime-table td input.project-inline-input {
    background: #ffffff;
    border-color: rgba(121, 141, 176, 0.24);
    color: #22314a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

:root[data-theme="light"] .worktime-override-controls select:focus,
:root[data-theme="light"] .worktime-override-controls input:focus,
:root[data-theme="light"] .worktime-table td input.project-inline-input:focus {
    border-color: rgba(50, 111, 213, 0.45);
    box-shadow: 0 0 0 2px rgba(50, 111, 213, 0.12);
    outline: none;
}

:root[data-theme="light"] .worktime-table td input.project-inline-input::placeholder {
    color: #8b9bb1;
}

:root[data-theme="light"] .worktime-override-controls.is-arzt .worktime-override-time-range {
    border-color: rgba(121, 141, 176, 0.22);
    background: linear-gradient(180deg, rgba(250,252,255,0.95), rgba(239,244,252,0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

:root[data-theme="light"] .worktime-override-type-trigger {
    background: rgba(255,255,255,0.92);
    border-color: rgba(121, 141, 176, 0.18);
    color: #31445f;
}

:root[data-theme="light"] .worktime-override-menu {
    background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(243,247,253,0.985));
    border-color: rgba(121, 141, 176, 0.22);
}

:root[data-theme="light"] .worktime-override-menu .status-menu-arrow {
    background: rgba(249, 251, 255, 1);
    border-left-color: rgba(121, 141, 176, 0.22);
    border-top-color: rgba(121, 141, 176, 0.22);
}

:root[data-theme="light"] .worktime-override-option {
    background: rgba(235, 241, 250, 0.96);
    border-color: rgba(121, 141, 176, 0.16);
    color: #31445f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
    filter: none;
}

:root[data-theme="light"] .worktime-override-option:hover {
    background: rgba(224, 233, 247, 0.98);
    filter: none;
}

:root[data-theme="light"] .worktime-override-option.active {
    background: linear-gradient(180deg, rgba(76, 125, 219, 0.94), rgba(56, 103, 194, 0.94));
    border-color: rgba(56, 103, 194, 0.34);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 0 0 1px rgba(78, 121, 201, 0.12);
}

:root[data-theme="light"] .worktime-override-controls .worktime-override-time-range span {
    color: #607391;
    border-left-color: rgba(121, 141, 176, 0.16);
    border-right-color: rgba(121, 141, 176, 0.16);
    background: rgba(98, 117, 152, 0.04);
}

:root[data-theme="light"] .worktime-time-select {
    color: #24344d;
}

:root[data-theme="light"] .worktime-time-select:hover {
    background: rgba(54, 106, 195, 0.06);
    color: #1a2a42;
}

:root[data-theme="light"] .worktime-time-dropdown {
    border-color: rgba(121, 141, 176, 0.24);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(34, 52, 84, 0.14);
}

:root[data-theme="light"] .worktime-time-overlay {
    background: rgba(39, 49, 69, 0.24);
}

:root[data-theme="light"] .worktime-time-overlay-card {
    border-color: rgba(121, 141, 176, 0.22);
    background:
        radial-gradient(circle at top right, rgba(89, 137, 222, 0.10), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.985), rgba(243,247,253,0.985));
    box-shadow: 0 18px 42px rgba(36, 52, 84, 0.18);
}

:root[data-theme="light"] .worktime-time-overlay-title {
    color: #24344d;
}

:root[data-theme="light"] .worktime-time-overlay-subtitle {
    color: #677b98;
}

:root[data-theme="light"] .worktime-time-overlay-close {
    border-color: rgba(121, 141, 176, 0.2);
    background: rgba(98, 117, 152, 0.05);
    color: #31445f;
}

:root[data-theme="light"] .worktime-time-overlay-field-label {
    color: #677b98;
}

:root[data-theme="light"] .worktime-time-overlay-select {
    border-color: rgba(121, 141, 176, 0.18);
    background: linear-gradient(180deg, rgba(248,250,254,0.98), rgba(237,242,249,0.98));
    color: #31445f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

:root[data-theme="light"] .worktime-time-overlay-select:focus {
    border-color: rgba(66, 112, 198, 0.34);
    box-shadow: 0 0 0 2px rgba(66, 112, 198, 0.12);
}

:root[data-theme="light"] .worktime-time-overlay-select option {
    background: #f7f9fd;
    color: #31445f;
}

:root[data-theme="light"] .worktime-time-dropdown-option {
    color: #31445f;
}

:root[data-theme="light"] .worktime-time-dropdown-option:hover {
    background: rgba(54, 106, 195, 0.07);
    color: #23354f;
}

:root[data-theme="light"] .worktime-time-dropdown-option.active {
    background: rgba(46, 101, 196, 0.92);
    color: #fff;
}

:root[data-theme="light"] .worktime-entry-locked {
    border-color: rgba(121, 141, 176, 0.18);
    color: #61758f;
    background: rgba(239, 243, 250, 0.95);
}

:root[data-theme="light"] .worktime-entry-locked-note {
    color: #7d8ea6;
}

:root[data-theme="light"] .worktime-arzt-slot-pill {
    border-color: rgba(142, 118, 206, 0.26);
    background: rgba(130, 106, 193, 0.10);
    color: #4d3f73;
}

:root[data-theme="light"] .worktime-arzt-slot-pill button {
    color: #67539b;
}

:root[data-theme="light"] .worktime-delta-cell.is-plus {
    color: #1f8d4d;
}

:root[data-theme="light"] .worktime-delta-cell.is-minus {
    color: #c14a55;
}

:root[data-theme="light"] .worktime-delta-cell.is-zero {
    color: #7c8da6;
}

.worktime-profile-grid {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 208px);
    gap: 8px 12px;
    align-items: center;
}

.worktime-profile-modal-content {
    width: min(980px, calc(100vw - 32px));
    max-height: min(90vh, 920px);
    margin: 4vh auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    background:
        radial-gradient(circle at top right, rgba(100, 180, 255, 0.10), transparent 26%),
        linear-gradient(180deg, #202739, #181d2c);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.worktime-profile-modal-content .modal-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.worktime-profile-modal-content .modal-header h2 {
    font-size: 19px;
    line-height: 1.2;
}

.worktime-profile-modal-content .modal-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #dbe4f6;
}

.worktime-profile-modal-content .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.worktime-profile-modal-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
    max-height: calc(90vh - 176px);
    padding: 18px 20px 0;
    margin-bottom: 0;
}

.worktime-profile-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.worktime-profile-columns > * {
    min-width: 0;
}

.worktime-profile-panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    padding: 12px;
}

.worktime-profile-panel-title {
    margin: 1px 2px 10px;
    padding: 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b8c3dd;
}

.worktime-profile-panel.is-auto .worktime-profile-panel-title {
    color: #9fb0cf;
}

.worktime-profile-version-list {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.worktime-profile-version-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.worktime-profile-version-row > .secondary-btn:first-child {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.worktime-profile-version-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.worktime-profile-version-badge.is-current {
    color: #0d7a43;
    background: rgba(207, 247, 223, 0.95);
}

.worktime-profile-version-badge.is-past {
    color: #8b99b4;
    background: rgba(49, 58, 84, 0.75);
}

.worktime-profile-version-badge.is-future {
    color: #d97706;
    background: rgba(84, 49, 14, 0.72);
}

.worktime-profile-panel .worktime-profile-grid {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.worktime-profile-panel.is-editable .worktime-profile-grid {
    grid-template-columns: minmax(0, 1fr) clamp(124px, 31%, 156px) !important;
}

.worktime-profile-panel.is-auto .worktime-profile-grid {
    grid-template-columns: minmax(0, 1fr) clamp(144px, 34%, 188px) !important;
    gap: 10px 12px;
}

.worktime-profile-grid label {
    color: #b8c3dd;
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    min-width: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.worktime-profile-grid input,
.worktime-profile-grid select {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.worktime-profile-panel.is-editable input[type="text"],
.worktime-profile-panel.is-editable input[type="number"],
.worktime-profile-panel.is-editable input[type="date"],
.worktime-profile-panel.is-editable select {
    justify-self: end;
    height: 34px;
    padding: 7px 10px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.2;
    background: #23283a;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #ecf2ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.worktime-profile-panel.is-editable input[type="text"] {
    max-width: 128px;
}

.worktime-profile-panel.is-editable input[type="number"] {
    max-width: 128px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.worktime-profile-panel.is-editable input[type="date"] {
    max-width: 146px;
    font-variant-numeric: tabular-nums;
}

.worktime-profile-panel.is-editable #wtEmploymentStartDate {
    width: 146px;
    max-width: 146px;
}

.worktime-profile-panel.is-editable select {
    max-width: 146px;
    padding-right: 28px;
}

.worktime-profile-panel.is-editable input[type="text"]:focus,
.worktime-profile-panel.is-editable input[type="number"]:focus,
.worktime-profile-panel.is-editable input[type="date"]:focus,
.worktime-profile-panel.is-editable select:focus {
    border-color: rgba(100, 180, 255, 0.42);
    box-shadow: 0 0 0 3px rgba(100, 180, 255, 0.12);
}

.worktime-profile-panel.is-auto .worktime-auto-input {
    justify-self: end;
    width: min(100%, 168px);
}

.worktime-profile-grid #wtVacationCycleLabel {
    font-size: 11px;
}

.worktime-profile-grid .worktime-auto-label {
    color: #9fb0cf;
    font-weight: 600;
}

.worktime-profile-grid .worktime-auto-input {
    background: rgba(35, 40, 58, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #dbe4f6;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-radius: 11px;
    padding-inline: 10px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.worktime-profile-grid .worktime-auto-input[readonly] {
    cursor: default;
    opacity: 1;
}

.worktime-profile-grid #wtVacationCycleLabel {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.01em;
    min-height: 34px;
    line-height: 1.2;
    width: min(100%, 220px);
    justify-self: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: flex-start;
}

.worktime-profile-grid .worktime-auto-input:focus {
    outline: none;
    border-color: rgba(100, 180, 255, 0.42);
    box-shadow: 0 0 0 3px rgba(100, 180, 255, 0.12);
}

.worktime-profile-actions {
    margin-top: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.worktime-profile-actions .primary-btn,
.worktime-profile-actions .secondary-btn {
    min-height: 36px;
    padding-top: 8px;
    padding-bottom: 8px;
}

:root[data-theme="light"] .worktime-profile-modal-content {
    background:
        radial-gradient(circle at top right, rgba(64, 122, 214, 0.08), transparent 24%),
        linear-gradient(180deg, #fdfefe, #f4f8fd);
    border-color: rgba(131, 149, 181, 0.24);
    box-shadow: 0 24px 60px rgba(41, 58, 89, 0.18);
}

:root[data-theme="light"] .worktime-profile-modal-content .modal-header {
    border-bottom-color: rgba(131, 149, 181, 0.18);
}

:root[data-theme="light"] .worktime-profile-modal-content .modal-close-btn {
    border-color: rgba(131, 149, 181, 0.24);
    background: #f2f6fc;
    color: #536a8a;
}

:root[data-theme="light"] .worktime-profile-modal-content .modal-close-btn:hover {
    background: #e9f0fb;
    color: #2c4669;
}

:root[data-theme="light"] .worktime-profile-panel {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(131, 149, 181, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

:root[data-theme="light"] .worktime-profile-panel-title {
    color: #667d9d;
}

:root[data-theme="light"] .worktime-profile-panel.is-auto .worktime-profile-panel-title {
    color: #667d9d;
}

:root[data-theme="light"] .worktime-profile-grid label {
    color: #667d9d;
}

:root[data-theme="light"] .worktime-profile-panel.is-editable input[type="text"],
:root[data-theme="light"] .worktime-profile-panel.is-editable input[type="number"],
:root[data-theme="light"] .worktime-profile-panel.is-editable input[type="date"],
:root[data-theme="light"] .worktime-profile-panel.is-editable select {
    background: #ffffff;
    border-color: rgba(131, 149, 181, 0.22);
    color: #1f3046;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .worktime-profile-grid .worktime-auto-label {
    color: #667d9d;
    font-weight: 700;
}

:root[data-theme="light"] .worktime-profile-grid .worktime-auto-input {
    background: #f6f8fc;
    border-color: rgba(131, 149, 181, 0.18);
    color: #41556f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

:root[data-theme="light"] .worktime-profile-grid #wtVacationCycleLabel {
    color: #556d8c;
}

:root[data-theme="light"] .worktime-profile-actions {
    border-top-color: rgba(131, 149, 181, 0.18);
}

@media (max-width: 1200px) {
    .worktime-profile-columns {
        grid-template-columns: 1fr;
    }
    .worktime-profile-panel.is-auto .worktime-auto-input {
        width: min(100%, 220px);
    }
    .worktime-profile-grid #wtVacationCycleLabel {
        width: min(100%, 300px);
    }
}

@media (max-width: 860px) {
    .worktime-range-toolbar {
        display: none;
    }

    .worktime-kpi-mobile-hide {
        display: none !important;
    }

    .worktime-kpi-period-mobile-compact {
        gap: 4px;
    }

    .worktime-kpi-summary-head {
        min-height: 0;
        gap: 0;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-head {
        margin-bottom: 2px;
    }

    .worktime-kpi-summary-text {
        min-height: 0;
    }

    .worktime-kpi-summary-text.is-empty {
        display: none;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-meta,
    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-text,
    .worktime-kpi-period-mobile-compact .worktime-kpi-mobile-hide-item {
        display: none;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-subtitle {
        font-size: 10px;
        line-height: 1.25;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-sections {
        gap: 4px;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-grid {
        gap: 4px;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-grid.worktime-kpi-summary-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-item {
        padding: 6px 7px;
        border-radius: 7px;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-item-label {
        font-size: 10px;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-item-value {
        font-size: 12px;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-variants {
        gap: 2px;
        margin-top: 4px;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-variant {
        gap: 6px;
    }

    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-variant-label,
    .worktime-kpi-period-mobile-compact .worktime-kpi-summary-variant-value {
        font-size: 10px;
    }

    .worktime-profile-actions {
        justify-content: stretch;
    }
    .worktime-profile-actions .primary-btn,
    .worktime-profile-actions .secondary-btn {
        flex: 1 1 calc(50% - 5px);
    }
}

.calendar-inline-notice.info {
    border-color: rgba(0, 179, 107, 0.35);
    background: rgba(8, 34, 24, 0.94);
}

.calendar-inline-notice.warn {
    border-color: rgba(255, 166, 0, 0.45);
    background: rgba(44, 30, 5, 0.94);
}

.worktime-inline-notice {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    z-index: 1600;
    max-width: min(860px, calc(100vw - 32px));
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(154, 173, 212, 0.16);
    background: rgba(23, 30, 49, 0.96);
    color: #e9f0ff;
    box-shadow: 0 14px 28px rgba(0,0,0,0.28);
    font-size: 12px;
    line-height: 1.3;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.worktime-inline-notice.active {
    opacity: 1;
    transform: translate(-50%, 0);
}

.worktime-inline-notice.info {
    border-color: rgba(112, 154, 236, 0.24);
    background: rgba(24, 36, 66, 0.96);
}

.worktime-inline-notice.is-modal {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -46%);
    max-width: min(640px, calc(100vw - 32px));
    padding: 14px;
    border-radius: 12px;
    pointer-events: auto;
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
    z-index: 1800;
}

.worktime-inline-notice.is-modal.active {
    transform: translate(-50%, -50%);
}

.worktime-inline-notice-text {
    font-size: 13px;
    line-height: 1.35;
    color: #edf3ff;
}

.worktime-inline-notice-ok {
    min-width: 90px;
}

#boardView .board-table th[data-col="video"],
#internalTasksView .board-table th[data-col="video"] {
    z-index: 120 !important;
}

#boardView .board-table td[data-col="video"],
#internalTasksView .board-table td[data-col="video"] {
    z-index: 60 !important;
    isolation: isolate;
    background-clip: padding-box;
}

#boardView .board-table th[data-col="video"]::before,
#boardView .board-table tr.draggable td[data-col="video"]::before,
#boardView .board-table th[data-col="video"]::after,
#boardView .board-table tr.draggable td[data-col="video"]::after,
#internalTasksView .board-table th[data-col="video"]::before,
#internalTasksView .board-table tr.draggable td[data-col="video"]::before,
#internalTasksView .board-table th[data-col="video"]::after,
#internalTasksView .board-table tr.draggable td[data-col="video"]::after {
    z-index: 0 !important;
}

.date-menu.active,
.team-picker.active,
.status-menu.active {
    z-index: 2000000 !important;
}

#boardView .date-menu.active,
#boardView .team-picker.active,
#boardView .status-menu.active,
#internalTasksView .date-menu.active,
#internalTasksView .team-picker.active,
#internalTasksView .status-menu.active,
#youboxView .date-menu.active,
#youboxView .team-picker.active,
#youboxView .status-menu.active {
    z-index: 4000000 !important;
}

#boardView .board-table tr.board-group-sum-row td,
#internalTasksView .board-table tr.board-group-sum-row td {
    z-index: 10 !important;
}

#boardView .board-table tr.board-group-sum-row td[data-col="video"],
#internalTasksView .board-table tr.board-group-sum-row td[data-col="video"] {
    z-index: 80 !important;
}

/* If any floating picker/menu is open, keep sticky/fixed columns underneath it. */
#boardView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .board-table th[data-col="video"],
#boardView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .board-table td[data-col="video"],
#internalTasksView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .board-table th[data-col="video"],
#internalTasksView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .board-table td[data-col="video"],
#youboxView:has(.date-menu.active, .team-picker.active, .status-menu.active) .youbox-board-table th[data-col="video"],
#youboxView:has(.date-menu.active, .team-picker.active, .status-menu.active) .youbox-board-table td[data-col="video"] {
    z-index: 1 !important;
    isolation: auto !important;
}

#boardView:has(.my-work-team-cell:hover) .board-table th[data-col="video"],
#boardView:has(.my-work-team-cell:hover) .board-table td[data-col="video"],
#internalTasksView:has(.my-work-team-cell:hover) .board-table th[data-col="video"],
#internalTasksView:has(.my-work-team-cell:hover) .board-table td[data-col="video"],
#youboxView:has(.my-work-team-cell:hover) .youbox-board-table th[data-col="video"],
#youboxView:has(.my-work-team-cell:hover) .youbox-board-table td[data-col="video"] {
    z-index: 1 !important;
    isolation: auto !important;
}

#boardView:has(.my-work-team-cell:hover) .board-table tr.board-group-sum-row td,
#internalTasksView:has(.my-work-team-cell:hover) .board-table tr.board-group-sum-row td,
#boardView:has(.my-work-team-cell:hover) .board-group-title,
#internalTasksView:has(.my-work-team-cell:hover) .board-group-title {
    z-index: 1 !important;
}

#boardView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .subtask-row > :first-child,
#boardView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .subtask-row > :nth-child(2),
#internalTasksView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .subtask-row > :first-child,
#internalTasksView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .subtask-row > :nth-child(2) {
    z-index: 1 !important;
}

#boardView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .board-table tr.board-group-sum-row td,
#internalTasksView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .board-table tr.board-group-sum-row td,
#boardView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .board-group-title,
#internalTasksView:has(.date-menu.active, .team-picker.active, .status-menu.active, .zeitraum-menu.active) .board-group-title,
#youboxView:has(.date-menu.active, .team-picker.active, .status-menu.active) .board-group-title {
    z-index: 1 !important;
}






/* iPhone UX refresh: responsive, accessible, engaging */
@media (max-width: 860px) and (pointer: coarse) {
    .my-work-panel-checklist {
        height: auto;
        min-height: 0;
    }

    .my-work-layout-left {
        min-height: 0;
    }

    .my-work-panel-body-checklist {
        height: auto;
        overflow: visible;
    }

    .my-work-layout-left .me-checklist-widget,
    .my-work-layout-left .me-checklist-widget-clean,
    .my-work-layout-left .me-checklist-scroll-sync,
    .my-work-layout-left .me-checklist-list-clean {
        height: auto;
        min-height: 0;
    }

    .my-work-layout-left .me-checklist-list-clean {
        flex: 0 0 auto;
        overflow-y: visible;
    }

    :root {
        --user-quick-safe-right: 0px;
        --user-quick-safe-gap: 0px;
    }

    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .app-container {
        height: 100dvh;
        width: 100%;
        display: block;
        background: radial-gradient(120% 120% at 50% -20%, rgba(0, 115, 234, 0.12), transparent 55%);
    }

    .content-area {
        position: relative;
        height: 100%;
        padding: calc(8px + env(safe-area-inset-top)) 0 calc(84px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background:
            radial-gradient(130% 70% at 50% 0%, rgba(66, 118, 213, 0.2) 0%, rgba(66, 118, 213, 0.03) 45%, transparent 70%),
            linear-gradient(180deg, rgba(10, 14, 22, 0.98), rgba(8, 12, 20, 1));
    }

    :root[data-theme="light"] .app-container {
        background: linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
    }

    :root[data-theme="light"] .content-area {
        background:
            radial-gradient(130% 70% at 50% 0%, rgba(84, 132, 226, 0.14) 0%, rgba(84, 132, 226, 0.03) 45%, transparent 70%),
            linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
    }

    .nav-tabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        min-width: 0;
        flex: 0 0 auto;
        height: calc(72px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        overflow: visible;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        background: linear-gradient(180deg, rgba(17, 24, 39, 0.9) 0%, rgba(12, 16, 29, 0.94) 100%);
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28);
        -webkit-overflow-scrolling: touch;
        z-index: 1000;
    }

    :root[data-theme="light"] .nav-tabs {
        border-top: 1px solid rgba(15, 24, 38, 0.1);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 248, 255, 0.97) 100%);
        box-shadow: 0 -10px 26px rgba(23, 37, 62, 0.12);
    }

    .nav-tabs .tab-icon:not([data-mobile-primary="1"]):not(.tab-icon-more),
    .nav-tabs .logout-btn {
        display: none;
    }

    .nav-tabs #adminTab {
        display: none !important;
    }

    .nav-tabs .mobile-notifications-tab {
        display: inline-flex;
        overflow: visible;
    }

    .tab-icon-more {
        display: inline-flex;
    }

    .tab-icon,
    .logout-btn {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
        max-width: 82px;
        height: 54px;
        padding: 6px 4px;
        border-radius: 14px;
        gap: 4px;
        transform: none;
    }

    .logout-btn {
        margin: 0;
        margin-left: 2px;
    }

    .tab-icon:hover,
    .logout-btn:hover {
        transform: none;
    }

    .tab-icon-svg,
    .logout-icon-svg {
        width: 21px;
        height: 21px;
    }

    .tab-label {
        font-size: 9px;
        letter-spacing: 0.35px;
    }

    .mobile-more-sheet {
        display: grid;
        position: fixed;
        right: 10px;
        left: 10px;
        bottom: calc(84px + env(safe-area-inset-bottom));
        z-index: 1200;
        gap: 8px;
        padding: 10px;
        border-radius: 18px;
        border: 1px solid rgba(110, 144, 205, 0.28);
        background:
            radial-gradient(120% 120% at 20% 0%, rgba(65, 129, 255, 0.22) 0%, rgba(65, 129, 255, 0.03) 46%, transparent 78%),
            linear-gradient(180deg, rgba(18, 24, 40, 0.98), rgba(12, 18, 30, 0.98));
        box-shadow: 0 20px 42px rgba(0, 0, 0, 0.35);
        transform: translateY(16px) scale(0.98);
        opacity: 0;
        pointer-events: none;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .mobile-more-sheet.active {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-more-sheet button {
        min-height: 44px;
        border-radius: 12px;
        border: 1px solid rgba(142, 172, 224, 0.22);
        background: rgba(22, 31, 50, 0.78);
        color: #e7efff;
        font-size: 13px !important;
        font-weight: 600;
        text-align: left;
        padding: 10px 12px;
    }

    .mobile-more-sheet .mobile-more-user-quick-trigger {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-more-sheet button.active {
        border-color: rgba(80, 133, 235, 0.6);
        background: linear-gradient(180deg, rgba(44, 82, 152, 0.7), rgba(35, 64, 120, 0.75));
    }

    .mobile-more-sheet .mobile-more-logout {
        border-color: rgba(255, 108, 108, 0.35);
        background: rgba(92, 28, 34, 0.65);
        color: #ffd6d6;
    }

    :root[data-theme="light"] .mobile-more-sheet {
        border-color: rgba(100, 128, 172, 0.25);
        background:
            radial-gradient(120% 120% at 20% 0%, rgba(65, 129, 255, 0.13) 0%, rgba(65, 129, 255, 0.02) 50%, transparent 78%),
            linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(239, 245, 255, 0.99));
        box-shadow: 0 18px 34px rgba(24, 43, 72, 0.16);
    }

    :root[data-theme="light"] .mobile-more-sheet button {
        border-color: rgba(101, 130, 176, 0.2);
        background: rgba(255, 255, 255, 0.9);
        color: #1f3150;
    }

    :root[data-theme="light"] .mobile-more-sheet button.active {
        border-color: rgba(78, 120, 195, 0.4);
        background: linear-gradient(180deg, rgba(225, 236, 255, 1), rgba(212, 227, 255, 1));
    }

    :root[data-theme="light"] .mobile-more-sheet .mobile-more-logout {
        border-color: rgba(201, 106, 112, 0.34);
        background: rgba(255, 237, 239, 0.95);
        color: #9a3d47;
    }

    .user-quick-menu-wrap {
        position: fixed;
        top: auto;
        bottom: calc(84px + env(safe-area-inset-bottom));
        right: 12px;
        z-index: 1250;
        gap: 6px;
        align-items: flex-end;
    }

    .user-quick-menu-wrap > .user-notifications-trigger,
    .user-quick-menu-wrap > .user-quick-trigger {
        display: none;
    }

    .user-notifications-trigger,
    .user-quick-trigger {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .nav-tabs .mobile-notifications-tab {
        width: auto;
        min-width: 0;
        height: 54px;
        border-radius: 14px;
    }

    .nav-tabs .mobile-notifications-tab .user-notifications-badge {
        top: 3px;
        right: 3px;
        min-width: 15px;
        height: 15px;
        padding: 0 3px;
        font-size: 9px;
    }

    .user-quick-menu-wrap.active .user-quick-trigger {
        border-radius: 12px;
    }

    .user-quick-dropdown {
        position: fixed;
        top: auto;
        bottom: calc(84px + env(safe-area-inset-bottom));
        right: 0;
    }

    .notifications-center-panel {
        position: fixed;
        left: 10px;
        right: 10px;
        top: calc(68px + env(safe-area-inset-top));
        bottom: calc(84px + env(safe-area-inset-bottom));
        min-width: 0;
        max-width: none;
        max-height: none;
        border-radius: 16px;
    }

    .notifications-center-panel .notifications-center-body {
        max-height: calc(100% - 76px);
    }

    .ui-toast-host {
        right: 10px;
        left: 10px;
        bottom: calc(86px + env(safe-area-inset-bottom));
        align-items: stretch;
    }

    .ui-toast {
        max-width: none;
        width: 100%;
    }

    .quick-user-avatar {
        width: 30px;
        height: 30px;
    }

    .section-header {
        margin-bottom: 14px;
        padding-bottom: 10px;
        padding-right: 0;
        gap: 10px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .section-header h1,
    .section-header h2 {
        font-size: 22px;
        line-height: 1.15;
        letter-spacing: -0.2px;
    }

    #boardView .section-header,
    #internalTasksView .section-header,
    #youboxView .section-header {
        min-height: 0;
        height: auto;
        margin-bottom: 14px;
        padding-bottom: 10px;
        padding-left: 0;
        padding-right: 0;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 10px;
    }

    #boardView .section-header .primary-btn,
    #internalTasksView .section-header .primary-btn,
    #youboxView .section-header .primary-btn {
        min-height: 28px;
        height: 28px;
        padding: 0 8px;
        font-size: 10px;
        line-height: 1;
        flex: 0 0 auto;
        border-radius: 8px;
        align-self: flex-start;
        max-width: 42vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #boardView .section-header h1,
    #internalTasksView .section-header h1,
    #youboxView .section-header h1 {
        min-width: 0;
        line-height: 1;
    }

    .board-page,
    .reports-page,
    .calendar-layout,
    .my-work-page,
    .crm-page {
        padding-left: 0;
        padding-right: 0;
    }

    .view-section.active > .board-page,
    .view-section.active > .calendar-layout,
    .view-section.active > .reports-page,
    .view-section.active > .admin-container {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 14px 0 18px;
        box-sizing: border-box;
        min-height: calc(100% - 6px);
        overflow: visible;
    }

    #crmView .board-page {
        min-height: calc(100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    :root[data-theme="light"] .view-section.active > .board-page,
    :root[data-theme="light"] .view-section.active > .calendar-layout,
    :root[data-theme="light"] .view-section.active > .reports-page,
    :root[data-theme="light"] .view-section.active > .admin-container {
        background: transparent;
        box-shadow: none;
    }

    .section-header {
        border-bottom: 1px solid rgba(128, 157, 208, 0.22);
        margin-bottom: 12px;
    }

    .view-section,
    .view-section.active {
        height: auto;
        min-height: 100%;
    }

    #calendarView .calendar-stage {
        border-radius: 16px;
        overflow: hidden;
    }

    .board-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .board-toolbar-controls {
        grid-template-columns: 1fr;
    }

    #boardView .board-toolbar.board-toolbar-rich {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 10px;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    #boardView .board-toolbar-main {
        gap: 6px;
    }

    #boardView .board-toolbar-controls {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding-top: 0;
    }

    #boardView .board-toolbar-controls > :not(#boardSearchInput) {
        display: none !important;
    }

    #boardSearchInput,
    #internalTaskSearchInput,
    #youboxSearchInput,
    #teamNewsSearchInput,
    #reportSearchInput {
        font-size: 12px !important;
    }

    #boardView .board-toolbar input,
    #boardView .board-toolbar select,
    #boardView .board-toolbar button,
    #boardView .board-toolbar .column-menu-trigger,
    #internalTasksView .board-toolbar input,
    #internalTasksView .board-toolbar select,
    #internalTasksView .board-toolbar button,
    #youboxView .board-toolbar input,
    #youboxView .board-toolbar select,
    #youboxView .board-toolbar button {
        min-height: 34px;
        height: 34px;
        padding: 7px 10px;
        font-size: 12px !important;
    }

    #teamNewsView .team-news-toolbar input,
    #teamNewsView .team-news-toolbar select,
    #crmView .crm-search-row input[type="search"],
    #crmView .crm-company-list-toolbar input[type="search"],
    #crmView .crm-company-list-toolbar select,
    #crmView .crm-contacts-toolbar select,
    #reportView .reports-filters input,
    #reportView .reports-filters select {
        font-size: 12px !important;
    }

    #boardView .board-toolbar-views {
        gap: 4px;
    }

    #boardView .board-quick-views {
        flex-wrap: nowrap;
        gap: 6px;
        min-height: 32px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        padding-bottom: 2px;
    }

    #boardView .board-quick-views::-webkit-scrollbar {
        display: none;
    }

    #boardView .board-quick-view-chip-wrap {
        flex: 0 0 auto;
        padding: 2px;
    }

    #boardView .board-quick-view-chip {
        height: 28px;
        padding: 0 10px;
        font-size: 11px;
    }

    #boardView .board-quick-view-manage,
    #boardView #boardKpis,
    #boardView #boardBulkBar,
    #internalTasksView #internalTaskBulkBar,
    #youboxView #youboxBulkBar {
        display: none !important;
    }

    #boardView .board-scroll-shell,
    #internalTasksView .board-scroll-shell,
    #youboxView .board-scroll-shell {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        touch-action: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    #boardView .board-scroll-shell::-webkit-scrollbar,
    #internalTasksView .board-scroll-shell::-webkit-scrollbar,
    #youboxView .board-scroll-shell::-webkit-scrollbar {
        display: none;
    }

    #boardView .board-table,
    #internalTasksView .board-table,
    #youboxView .board-table {
        min-width: max-content;
    }

    #boardView .subtasks-shell,
    #internalTasksView .subtasks-shell {
        --subtasks-sticky-offset: 0;
        --subline-x: 0;
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    #boardView .subtasks-shell-rail,
    #internalTasksView .subtasks-shell-rail {
        grid-column: 1;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--group-color, #7aa2ff);
        z-index: 24;
        pointer-events: none;
    }

    #boardView .subtasks,
    #internalTasksView .subtasks {
        grid-column: 1;
        --st-title: calc(var(--board-mobile-sticky-width-current, clamp(280px, 92vw, 420px)) + 6px);
        --st-team: 160px;
        --st-status: 118px;
        border-left: 0;
    }

    #boardView .subtask-row > :nth-child(2),
    #internalTasksView .subtask-row > :nth-child(2) {
        width: calc(var(--board-mobile-sticky-width-current, clamp(280px, 92vw, 420px)) + 6px) !important;
        min-width: calc(var(--board-mobile-sticky-width-current, clamp(280px, 92vw, 420px)) + 6px) !important;
        max-width: calc(var(--board-mobile-sticky-width-current, clamp(280px, 92vw, 420px)) + 6px) !important;
        left: 0 !important;
        padding-left: 52px !important;
        box-sizing: border-box;
        position: sticky;
        z-index: 6;
    }

    #boardView .subtask-row > :nth-child(2)::before,
    #internalTasksView .subtask-row > :nth-child(2)::before {
        content: "";
        position: absolute;
        right: 100%;
        top: -1px;
        bottom: -1px;
        width: 2000px;
        background: inherit;
        pointer-events: none;
        z-index: 0;
    }

    #boardView .subtask-row > :nth-child(2)::after,
    #internalTasksView .subtask-row > :nth-child(2)::after {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        bottom: -1px;
        width: 2px;
        background: var(--group-color, #7aa2ff);
        pointer-events: none;
        z-index: 1;
    }

    #boardView .subtask-row .subtask-select-cell,
    #internalTasksView .subtask-row .subtask-select-cell {
        display: none;
    }

    #boardView .subtask-row > :first-child,
    #internalTasksView .subtask-row > :first-child {
        display: none;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        left: 0 !important;
    }

    #boardView .subtask-row,
    #boardView .subtask-row.subtask-header,
    #boardView .subtask-row.subtask-add-row,
    #boardView .subtask-row.subtask-empty-row {
        grid-template-columns: var(--st-title) var(--st-deadline) var(--st-team) var(--st-status) var(--st-details) var(--st-files);
    }

    #internalTaskBoard .internal-subtask-row,
    #internalTaskBoard .internal-subtask-row.subtask-header,
    #internalTaskBoard .internal-subtask-row.subtask-add-row,
    #internalTaskBoard .internal-subtask-row.subtask-empty-row {
        grid-template-columns: var(--itst-title, var(--st-title)) var(--itst-deadline, var(--st-deadline)) var(--itst-team, var(--st-team)) var(--itst-status, var(--st-status)) var(--itst-details, 240px) var(--itst-files, var(--st-files)) 54px;
    }

    #boardView .subtask-row,
    #internalTasksView .subtask-row {
        min-height: 38px;
        font-size: 11px;
    }

    #boardView .subtask-row > *,
    #internalTasksView .subtask-row > * {
        min-height: 38px;
        padding: 0 3px;
    }

    #boardView .subtask-row > :nth-child(2),
    #internalTasksView .subtask-row > :nth-child(2) {
        grid-column: 1 / 2;
    }

    #boardView .subtask-row.subtask-header,
    #internalTasksView .subtask-row.subtask-header {
        min-height: 24px;
    }

    #boardView .subtask-row.subtask-header > *,
    #internalTasksView .subtask-row.subtask-header > * {
        min-height: 24px;
    }

    #boardView .subtask-head-resizable,
    #internalTasksView .subtask-head-resizable {
        min-height: 24px;
        padding-right: 2px;
        font-size: 9px;
        line-height: 1;
    }

    #boardView .subtask-row .video-title.editable,
    #internalTasksView .subtask-row .video-title.editable {
        min-height: 38px;
        padding: 0 3px;
        line-height: 1;
    }

    #boardView .subtask-row .subtask-title-cell,
    #internalTasksView .subtask-row .subtask-title-cell,
    #boardView .subtask-row .subtask-date-cell,
    #internalTasksView .subtask-row .subtask-date-cell,
    #boardView .subtask-row .my-work-team-cell,
    #internalTasksView .subtask-row .my-work-team-cell,
    #boardView .subtask-row .subtask-status-cell,
    #internalTasksView .subtask-row .subtask-status-cell,
    #boardView .subtask-row .subtask-actions-cell,
    #internalTasksView .subtask-row .subtask-actions-cell,
    #boardView .subtask-row .board-attachment-cell,
    #internalTasksView .subtask-row .board-attachment-cell {
        min-height: 38px !important;
        height: 38px;
        align-self: stretch;
        box-sizing: border-box;
    }

    #boardView .subtask-row .my-work-team-cell,
    #internalTasksView .subtask-row .my-work-team-cell,
    #boardView .subtask-row .subtask-status-cell,
    #internalTasksView .subtask-row .subtask-status-cell {
        padding-inline: 0 !important;
        border-radius: 0 !important;
        justify-content: center;
    }

    #boardView .subtask-row .my-work-team-cell,
    #internalTasksView .subtask-row .my-work-team-cell {
        border-left: 1px solid rgba(156, 175, 209, 0.12) !important;
        margin-left: -1px;
    }

    #boardView .subtask-status-trigger,
    #internalTasksView .subtask-status-trigger {
        width: 118px;
        min-width: 118px;
        max-width: 118px;
        min-height: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 8px;
        line-height: 1;
    }

    #boardView .subtask-row .board-attachment-cell,
    #internalTasksView .subtask-row .board-attachment-cell {
        padding-inline: 0 !important;
    }

    #boardView .subtask-row .subtask-date-board-cell,
    #internalTasksView .subtask-row .subtask-date-board-cell {
        padding: 0 3px;
    }

    #boardView .board-table input.project-inline-input,
    #boardView .board-table textarea.project-inline-input,
    #boardView .subtask-row input[type="text"],
    #boardView .subtask-row input[type="date"],
    #boardView .subtask-row input.new-subtask-title-input,
    #internalTasksView .board-table input.project-inline-input,
    #internalTasksView .board-table textarea.project-inline-input,
    #internalTasksView .subtask-row input[type="text"],
    #internalTasksView .subtask-row input[type="date"],
    #internalTasksView .subtask-row input.new-subtask-title-input,
    #youboxView .board-table input.project-inline-input,
    #youboxView .board-table textarea.project-inline-input {
        min-height: 20px;
        height: 20px;
        margin: 0 3px;
        padding: 0 5px;
        font-size: 8px;
        line-height: 1;
        border-radius: 4px;
        box-sizing: border-box;
    }

    #boardView .subtask-row .subtask-new-title-cell,
    #internalTasksView .subtask-row .subtask-new-title-cell {
        gap: 2px;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    #boardView .subtask-inline-hint,
    #internalTasksView .subtask-inline-hint {
        font-size: 9px;
        line-height: 1.05;
    }

    #projectBoard {
        gap: 10px;
        width: max-content;
        min-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    #boardView .board-group,
    #internalTasksView .board-group,
    #youboxView .board-group {
        min-width: max-content;
    }

    #boardView .board-group,
    #internalTasksView .board-group,
    #youboxView .board-group {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        border-left: 0;
        border-right: 0;
    }

    #boardView .board-page,
    #boardView .board-toolbar.board-toolbar-rich,
    #internalTasksView .board-page,
    #internalTasksView .board-toolbar.board-toolbar-rich,
    #youboxView .board-page,
    #youboxView .board-toolbar.board-toolbar-rich {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    #boardView .board-scroll-shell,
    #internalTasksView .board-scroll-shell,
    #youboxView .board-scroll-shell {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    #boardView .board-table th,
    #boardView .board-table td,
    #internalTasksView .board-table th,
    #internalTasksView .board-table td,
    #youboxView .board-table th,
    #youboxView .board-table td {
        padding: 0 3px;
        font-size: 11px;
        line-height: 1;
    }

    #boardView .board-table tbody tr,
    #internalTasksView .board-table tbody tr,
    #youboxView .board-table tbody tr {
        height: 38px;
    }

    #boardView .board-table th,
    #internalTasksView .board-table th,
    #youboxView .board-table th {
        padding-top: 0;
        padding-bottom: 0;
    }

    #boardView .board-table input,
    #boardView .board-table select,
    #internalTasksView .board-table input,
    #internalTasksView .board-table select,
    #youboxView .board-table input,
    #youboxView .board-table select {
        min-height: 18px;
        height: 18px;
        padding: 0 4px;
        font-size: 10px;
    }

    #boardView,
    #internalTasksView,
    #youboxView {
        --board-mobile-sticky-width: clamp(280px, 92vw, 420px);
        --board-mobile-sticky-width-scrolled: clamp(116px, 30vw, 168px);
        --board-mobile-sticky-width-current: var(--board-mobile-sticky-width);
    }

    #boardView .board-table th[data-col="video"],
    #boardView .board-table td[data-col="video"],
    #internalTasksView .board-table th[data-col="video"],
    #internalTasksView .board-table td[data-col="video"],
    #youboxView .board-table th[data-col="video"],
    #youboxView .board-table td[data-col="video"] {
        width: var(--board-mobile-sticky-width-current) !important;
        min-width: var(--board-mobile-sticky-width-current) !important;
        max-width: var(--board-mobile-sticky-width-current) !important;
        left: 0 !important;
    }

    #boardView .video-cell,
    #internalTasksView .video-cell,
    #youboxView td[data-col="video"] {
        min-width: var(--board-mobile-sticky-width-current);
    }

    #boardView .video-main-cell,
    #internalTasksView .video-main-cell,
    #youboxView .video-main-cell,
    #boardView .video-header-cell,
    #internalTasksView .video-header-cell,
    #youboxView .video-header-cell {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        line-height: 1;
    }

    #boardView .video-main-cell,
    #internalTasksView .video-main-cell,
    #youboxView .video-main-cell {
        min-height: 38px;
    }

    #boardView .board-table input,
    #boardView .board-table select,
    #internalTasksView .board-table input,
    #internalTasksView .board-table select,
    #youboxView .board-table input,
    #youboxView .board-table select {
        min-height: 20px;
        height: 20px;
        padding: 0 4px;
        font-size: 10px;
    }

    #boardView .video-main-cell,
    #internalTasksView .video-main-cell,
    #youboxView .video-main-cell {
        min-height: 38px;
        padding-left: 6px;
    }

    #boardView .status-cell,
    #internalTasksView .status-cell,
    #youboxView .status-cell {
        --status-chip-width: 88px;
        min-height: 0;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    #boardView .status-pill,
    #internalTasksView .status-pill,
    #youboxView .status-pill {
        padding: 0 6px;
        min-height: 20px;
        height: 20px;
        font-size: 9px;
        line-height: 1;
        margin-right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    #boardView .status-pill-trigger,
    #internalTasksView .status-pill-trigger,
    #youboxView .status-pill-trigger {
        width: var(--status-chip-width);
        min-width: var(--status-chip-width);
        max-width: var(--status-chip-width);
        min-height: 20px;
        height: 20px;
        padding: 0 4px;
        font-size: 9px;
        border-radius: 4px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        text-align: center;
    }

    #boardView .video-type-select,
    #internalTasksView .video-type-select,
    #youboxView .video-type-select,
    #boardView .status-select,
    #internalTasksView .status-select,
    #youboxView .status-select {
        min-width: 88px;
        width: 88px;
        max-width: 88px;
    }

    #boardView .date-board-cell .date-cell,
    #internalTasksView .date-board-cell .date-cell,
    #youboxView .date-board-cell .date-cell {
        --date-chip-width: 96px;
        width: var(--date-chip-width);
        min-width: var(--date-chip-width);
        max-width: var(--date-chip-width);
        min-height: 20px;
        height: 20px;
        line-height: 1;
        box-sizing: border-box;
    }

    #boardView .date-board-cell .date-trigger,
    #internalTasksView .date-board-cell .date-trigger,
    #youboxView .date-board-cell .date-trigger {
        width: var(--date-chip-width);
        min-width: var(--date-chip-width);
        max-width: var(--date-chip-width);
        min-height: 20px;
        height: 20px;
        padding: 0 14px 0 4px;
        font-size: 7px;
        border-radius: 4px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    #boardView .board-table th[data-col="anfrage"],
    #boardView .board-table td[data-col="anfrage"],
    #boardView .board-table th[data-col="deadline"],
    #boardView .board-table td[data-col="deadline"],
    #boardView .board-table th[data-col="abgeschlossen"],
    #boardView .board-table td[data-col="abgeschlossen"],
    #internalTasksView .board-table th[data-col="deadline"],
    #internalTasksView .board-table td[data-col="deadline"],
    #internalTasksView .board-table th[data-col="abgeschlossen"],
    #internalTasksView .board-table td[data-col="abgeschlossen"],
    #youboxView .board-table th[data-yb-col="eventDate"],
    #youboxView .board-table td[data-yb-col="eventDate"],
    #youboxView .board-table th[data-yb-col="endDate"],
    #youboxView .board-table td[data-yb-col="endDate"] {
        min-width: 125px !important;
        width: 125px !important;
        max-width: 125px !important;
    }

    #boardView .date-board-cell .date-trigger::after,
    #internalTasksView .date-board-cell .date-trigger::after,
    #youboxView .date-board-cell .date-trigger::after {
        right: 4px;
    }

    #boardView .board-table th[data-col="video"]::before,
    #boardView .board-table tr.draggable td[data-col="video"]::before,
    #internalTasksView .board-table th[data-col="video"]::before,
    #internalTasksView .board-table tr.draggable td[data-col="video"]::before,
    #youboxView .board-table th[data-col="video"]::before,
    #youboxView .board-table tr.draggable td[data-col="video"]::before {
        left: 0;
    }

    #boardView .video-title,
    #internalTasksView .video-title,
    #youboxView .video-title,
    #youboxView .youbox-board-title-wrap {
        min-width: 0;
        flex: 1 1 auto;
    }

    #boardView .video-main-cell .video-title.editable,
    #internalTasksView .video-main-cell .video-title.editable,
    #boardView .video-title,
    #internalTasksView .video-title,
    #youboxView .video-title {
        margin-left: 0;
        font-size: 11px;
        line-height: 1;
    }

    #boardView .monday-check,
    #internalTasksView .monday-check,
    #youboxView .monday-check,
    #boardView .row-copy-btn,
    #internalTasksView .row-copy-btn,
    #youboxView .row-copy-btn,
    #boardView .board-col-resizer,
    #internalTasksView .board-col-resizer,
    #youboxView .board-col-resizer {
        display: none !important;
    }

    #boardView .subtask-toggle,
    #internalTasksView .subtask-toggle,
    #boardView .row-thread-btn,
    #internalTasksView .row-thread-btn,
    #youboxView .row-thread-btn,
    #youboxView .youbox-thread-btn {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        max-width: 22px;
        max-height: 22px;
        padding: 0;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 22px;
        border-radius: 5px;
    }

    #youboxView .youbox-board-main-cell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 22px;
        align-items: center;
        column-gap: 4px;
        width: 100%;
        min-width: 0;
        padding-right: 6px;
        box-sizing: border-box;
    }

    #youboxView .youbox-board-title-wrap {
        grid-column: 1;
        min-width: 0;
        max-width: 100%;
    }

    #youboxView .youbox-thread-btn {
        grid-column: 2;
        justify-self: end;
        align-self: center;
        margin-left: 0;
        position: relative;
        right: 0;
    }

    #youboxView .youbox-board-summary,
    #youboxView .youbox-board-actions,
    #youboxBoardSummary {
        display: none !important;
    }

    #boardView .subtask-toggle.has-items,
    #internalTasksView .subtask-toggle.has-items {
        padding-left: 0;
    }

    #boardView .subtask-count-badge,
    #internalTasksView .subtask-count-badge {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        max-width: 22px;
        max-height: 22px;
        padding: 0;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 22px;
        font-size: 8px;
    }

    #boardView .board-group-header,
    #internalTasksView .board-group-header,
    #youboxView .board-group-header {
        padding: 8px 0;
        justify-content: flex-start;
        width: 100%;
        min-width: 100%;
    }

    #boardView .board-search-select-input,
    #internalTasksView .board-search-select-input,
    #youboxView .board-search-select-input {
        font-size: 12px !important;
    }

    #boardView .date-board-cell .date-trigger,
    #internalTasksView .date-board-cell .date-trigger,
    #youboxView .date-board-cell .date-trigger {
        font-size: 7px !important;
    }

    #boardView .subtasks-shell-rail,
    #internalTasksView .subtasks-shell-rail {
        width: 3px;
        z-index: 20;
    }

    #boardView .board-group-title,
    #internalTasksView .board-group-title,
    #youboxView .board-group-title {
        gap: 6px;
        font-size: 13px;
        position: sticky;
        left: 0;
        width: fit-content;
        max-width: min(92vw, 100%);
        justify-content: flex-start;
        text-align: left;
        padding: 0;
        z-index: 11;
        background: transparent;
    }

    #boardView .board-group-toggle,
    #internalTasksView .board-group-toggle,
    #youboxView .board-group-toggle {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        max-width: 22px;
        max-height: 22px;
        padding: 0;
        border-radius: 5px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    #boardView .video-header-cell,
    #internalTasksView .video-header-cell,
    #youboxView .video-header-cell {
        justify-content: center;
        text-align: center;
    }

    .my-work-panel-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "heading toggle"
            "summary summary";
        align-items: start;
        column-gap: 8px;
        row-gap: 6px;
        position: relative;
        padding: 8px;
    }

    .my-work-panel-heading {
        grid-area: heading;
        width: 100%;
        min-width: 0;
        gap: 0;
    }

    .my-work-panel-title-row {
        align-items: center;
        min-width: 0;
    }

    .my-work-panel-summary-row {
        grid-area: summary;
        width: 100%;
        min-width: 0;
    }

    .my-work-panel-summary-row .my-work-panel-summary {
        width: 100%;
        min-width: 0;
    }

    .my-work-panel-title-row .me-checklist-autoentries-btn {
        min-height: 24px !important;
        height: 24px;
        padding: 0 7px;
        font-size: 10px;
    }

    .my-work-panel-header-tools,
    .my-work-checklist-header-search,
    .me-checklist-search {
        display: none !important;
    }

    .my-work-panel-toggle {
        grid-area: toggle;
        position: static;
        justify-self: end;
        align-self: start;
        margin-top: 0;
        height: 26px;
        box-sizing: border-box;
        min-width: 48px;
        padding: 0 6px;
        gap: 4px;
    }

    .my-work-panel-toggle-count {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 9px;
    }

    .my-work-panel-toggle-icon {
        width: 14px;
        font-size: 13px;
    }

    .my-work-panel-body,
    .my-work-panel-body-checklist {
        padding: 0;
    }

    .my-work-panel-summary {
        flex-wrap: nowrap;
        gap: 3px;
        max-width: 100%;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .my-work-panel-summary::-webkit-scrollbar {
        display: none;
    }

    .my-work-panel-summary-pill,
    .my-work-panel-summary-reset {
        flex: 0 0 auto;
        height: 18px;
        min-height: 18px;
        padding: 0 5px;
        gap: 3px;
        font-size: 8px;
    }

    .my-work-panel-summary-pill strong {
        font-size: 8px;
    }

    .me-checklist-addline.is-top.is-composer {
        grid-template-columns: 28px minmax(0, 1fr) 32px;
        column-gap: 8px;
        align-items: center;
    }

    .me-checklist-addline.is-top.is-composer .me-checklist-row-circle-btn {
        grid-column: 1;
        grid-row: 1;
        min-height: 28px;
    }

    .me-checklist-addline.is-top.is-composer #meChecklistQuickInput {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 37px;
        box-sizing: border-box;
    }

    .me-checklist-addline.is-top.is-composer .me-checklist-addclear,
    .me-checklist-addline.is-top.is-composer .me-checklist-addsubmit {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        box-sizing: border-box;
    }

    .my-work-panel-body-checklist .me-checklist-list-clean {
        flex: 0 0 auto;
        min-height: auto;
        max-height: none;
        overflow-x: visible;
        overflow-y: visible !important;
        padding: 0;
        scrollbar-gutter: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }

    .my-work-panel-body-checklist .me-checklist-list-archived {
        max-height: min(220px, 32dvh);
        min-width: 0;
        width: max-content;
        min-width: 650px;
        overflow-x: visible;
        overflow-y: auto;
        padding-bottom: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .my-work-panel-body-checklist .me-checklist-scroll-sync-archived {
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
    }

    .my-work-panel-body-checklist .me-checklist-scroll-sync-archived::-webkit-scrollbar {
        display: none;
    }

    .my-work-panel-body-checklist .me-checklist-list-archived .me-checklist-row-card,
    .my-work-panel-body-checklist .me-checklist-list-archived .me-checklist-row-line {
        min-width: 650px;
    }

    .my-work-page,
    .my-work-content,
    .my-work-shell,
    .my-work-layout,
    .my-work-column,
    .my-work-panel,
    .my-work-panel-checklist,
    .my-work-panel-body,
    .my-work-panel-body-checklist,
    .my-work-panel-body-checklist .me-checklist-widget-clean,
    .my-work-panel-body-checklist .me-checklist-row-card {
        overflow: visible;
    }

    .my-work-page {
        min-height: 0;
        overflow: visible;
        padding-right: 0;
        scrollbar-gutter: auto;
    }

    .my-work-content {
        overflow: visible;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .my-work-panel-body-checklist .me-checklist-scroll-sync {
        --my-work-mobile-sticky-width-full: 232px;
        --my-work-mobile-sticky-width-compact: 122px;
        --my-work-mobile-sticky-width-current: var(--my-work-mobile-sticky-width-full);
        --my-work-checklist-sticky-circle: 28px;
        --my-work-checklist-title-width: calc(var(--my-work-mobile-sticky-width-current) - var(--my-work-checklist-sticky-circle));
        --my-work-checklist-sticky-tint: rgba(255, 255, 255, 0.03);
        --my-work-checklist-sticky-base: var(--monday-bg, #0f1629);
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        min-height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        touch-action: auto;
        padding: 0;
    }

    .my-work-panel-body-checklist .me-checklist-scroll-sync::-webkit-scrollbar {
        display: none;
    }

    .my-work-panel-body-checklist .me-checklist-inline-sort {
        min-width: 650px;
        margin-right: 0;
        margin-bottom: 2px;
        padding: 0 8px 0 4px;
        box-sizing: border-box;
        justify-content: flex-start;
        min-height: 16px;
    }

    .my-work-panel-body-checklist .me-checklist-inline-sort-controls {
        width: 100%;
        min-width: 0;
        justify-content: flex-end;
        padding-right: 16px;
        gap: 4px;
    }

    .my-work-panel-body-checklist .me-checklist-inline-sort-btn-date {
        margin-left: 10px;
    }

    .my-work-panel-body-checklist .me-checklist-row-card {
        min-width: 650px;
    }

    .my-work-panel-body-checklist .me-checklist-row-card.has-open-date-menu,
    .my-work-panel-body-checklist .me-checklist-row-card.has-open-team-picker,
    .my-work-panel-body-checklist .me-checklist-row-card.has-open-priority-menu {
        z-index: 4000010;
    }

    .my-work-panel-checklist:has(.date-menu.active),
    .my-work-panel-checklist:has(.team-picker.active),
    .my-work-panel-checklist:has(.me-checklist-prio-options),
    .my-work-auto-group:has(.date-menu.active),
    .my-work-auto-group:has(.team-picker.active),
    .my-work-auto-group:has(.me-checklist-prio-options) {
        z-index: 4000005;
    }

    .my-work-panel-body-checklist .me-checklist-list-clean,
    .my-work-panel-body-checklist .me-checklist-row-line {
        min-width: 650px;
    }

    .my-work-panel-body-checklist .me-checklist-row-line {
        --me-checklist-actions-space: 0px;
        grid-template-columns: var(--my-work-checklist-sticky-circle) minmax(var(--my-work-checklist-title-width), var(--my-work-checklist-title-width)) auto;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        padding: 0 4px 0 2px;
        row-gap: 0;
    }

    .my-work-panel-body-checklist .me-checklist-row-actions {
        position: static;
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        width: auto;
        margin-top: 0;
        gap: 4px;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .my-work-panel-body-checklist .me-checklist-quick-controls {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .my-work-panel-body-checklist .me-checklist-row-title {
        min-width: 0;
        max-width: var(--my-work-checklist-title-width);
        width: var(--my-work-checklist-title-width);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 36px;
        min-height: 36px;
        font-size: 12px !important;
        line-height: 36px;
        position: sticky;
        left: calc(2px + var(--my-work-checklist-sticky-circle) + 6px);
        z-index: 3;
        background: linear-gradient(var(--my-work-checklist-sticky-tint, rgba(255, 255, 255, 0.03)), var(--my-work-checklist-sticky-tint, rgba(255, 255, 255, 0.03))), var(--my-work-checklist-sticky-base, var(--monday-bg, #0f1629));
        box-shadow: 8px 0 18px rgba(5, 10, 20, 0.22);
    }

    .my-work-panel-body-checklist .me-checklist-row-circle-btn,
    .my-work-panel-body-checklist .me-checklist-date-cell,
    .my-work-panel-body-checklist .me-checklist-date-trigger,
    .my-work-panel-body-checklist .me-checklist-priority-quick,
    .my-work-panel-body-checklist .me-checklist-icon-btn,
    .my-work-panel-body-checklist .me-checklist-drag-handle {
        flex: 0 0 auto;
    }

    .my-work-panel-body-checklist .me-checklist-date-cell,
    .my-work-panel-body-checklist .me-checklist-date-trigger {
        --date-chip-width: 104px;
    }

    .my-work-panel-body-checklist .me-checklist-date-cell {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        min-height: 26px;
        align-self: center;
        box-sizing: border-box;
        margin: 0;
    }

    .my-work-panel-body-checklist .me-checklist-row-circle-btn {
        width: 24px;
        height: 24px;
        min-height: 24px;
        position: sticky;
        left: 2px;
        z-index: 4;
        background: linear-gradient(var(--my-work-checklist-sticky-tint, rgba(255, 255, 255, 0.03)), var(--my-work-checklist-sticky-tint, rgba(255, 255, 255, 0.03))), var(--my-work-checklist-sticky-base, var(--monday-bg, #0f1629));
    }

    .my-work-panel-body-checklist .me-checklist-row-circle-btn .me-checklist-row-circle {
        width: 14px;
        height: 14px;
    }

    .my-work-panel-body-checklist .me-checklist-date-trigger {
        height: 26px;
        min-height: 26px;
        border-radius: 6px;
        padding: 0 16px 0 6px;
        font-size: 9.5px !important;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin: 0;
        appearance: none;
        -webkit-appearance: none;
    }

    .my-work-panel-body-checklist .me-checklist-date-cell .date-clear-btn {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        max-width: 18px;
        max-height: 18px;
        right: 3px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 5px;
        padding: 0;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .my-work-panel-body-checklist .me-checklist-date-menu {
        max-height: min(560px, calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .my-work-panel-body-checklist .me-checklist-date-menu.active {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .my-work-panel-body-checklist .team-picker {
        max-height: min(520px, calc(100dvh - 110px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .my-work-panel-body-checklist .team-picker-list {
        max-height: min(440px, calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    }


    .my-work-panel-body-checklist .me-checklist-priority-quick,
    .my-work-panel-body-checklist .me-checklist-icon-btn,
    .my-work-panel-body-checklist .me-checklist-drag-handle {
        width: 26px;
        height: 26px;
        min-height: 26px;
        border-radius: 6px;
        font-size: 10px;
        align-self: center;
    }

    .my-work-panel-body-checklist .me-checklist-prio-current {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
        border-radius: 6px;
        box-sizing: border-box;
        margin: 0;
        appearance: none;
        -webkit-appearance: none;
    }

    .my-work-panel-body-checklist .me-checklist-prio-options .me-checklist-prio-btn {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        aspect-ratio: 1 / 1;
        padding: 0;
        border-radius: 6px;
    }

    .my-work-panel-body-checklist .me-checklist-icon-btn,
    .my-work-panel-body-checklist .me-checklist-drag-handle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        appearance: none;
        -webkit-appearance: none;
    }

    .my-work-panel-body-checklist .me-checklist-prio-icon {
        width: 12px;
        height: 12px;
        font-size: 12px;
    }

    .my-work-panel-body-checklist .me-checklist-prio-current .me-checklist-prio-icon.icon-dot {
        width: 26px;
        height: 26px;
        font-size: 20px;
        line-height: 1;
    }

    .my-work-panel-body-checklist .me-checklist-inline-sort-team-label {
        position: static;
        min-width: 50px;
        width: 50px;
        max-width: 50px;
    }

    .my-work-panel-body-checklist .me-checklist-list-archived .me-checklist-row-circle-btn,
    .my-work-panel-body-checklist .me-checklist-list-archived .me-checklist-row-title {
        background: linear-gradient(var(--my-work-checklist-sticky-tint, rgba(255, 255, 255, 0.03)), var(--my-work-checklist-sticky-tint, rgba(255, 255, 255, 0.03))), var(--my-work-checklist-sticky-base, var(--monday-bg, #0f1629));
    }

    .my-work-panel-body-checklist .me-checklist-list-archived .me-checklist-row-circle-archived {
        position: sticky;
        left: 2px;
        z-index: 4;
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        background: linear-gradient(var(--my-work-checklist-sticky-tint, rgba(255, 255, 255, 0.03)), var(--my-work-checklist-sticky-tint, rgba(255, 255, 255, 0.03))), var(--my-work-checklist-sticky-base, var(--monday-bg, #0f1629));
    }

    .my-work-panel-body-checklist .me-checklist-list-archived .me-checklist-row-circle-archived .me-checklist-row-circle {
        width: 14px;
        height: 14px;
    }

    :root[data-theme="light"] .my-work-overview-panel .my-work-list-head > span:first-child,
    :root[data-theme="light"] .my-work-overview-panel .my-work-item-main {
        --my-work-overview-row-base: #f9fbff;
    }

    :root[data-theme="light"] .my-work-overview-panel .my-work-group-overdue .my-work-item {
        --my-work-overview-row-tint: color-mix(in srgb, var(--due-color-overdue) 48%, transparent);
    }

    :root[data-theme="light"] .my-work-overview-panel .my-work-group-today .my-work-item {
        --my-work-overview-row-tint: color-mix(in srgb, var(--due-color-today) 46%, transparent);
    }

    :root[data-theme="light"] .my-work-overview-panel .my-work-group-tomorrow .my-work-item {
        --my-work-overview-row-tint: color-mix(in srgb, var(--due-color-tomorrow) 46%, transparent);
    }

    :root[data-theme="light"] .my-work-overview-panel .my-work-group-week .my-work-item {
        --my-work-overview-row-tint: color-mix(in srgb, var(--due-color-week) 46%, transparent);
    }

    :root[data-theme="light"] .my-work-overview-panel .my-work-group-nextweek .my-work-item {
        --my-work-overview-row-tint: color-mix(in srgb, var(--due-color-next-week) 46%, transparent);
    }

    :root[data-theme="light"] .my-work-panel-body-checklist .me-checklist-row-title,
    :root[data-theme="light"] .my-work-panel-body-checklist .me-checklist-row-circle-btn,
    :root[data-theme="light"] .my-work-panel-body-checklist .me-checklist-inline-sort-team-label,
    :root[data-theme="light"] .my-work-panel-body-checklist .me-checklist-list-archived .me-checklist-row-circle-btn,
    :root[data-theme="light"] .my-work-panel-body-checklist .me-checklist-list-archived .me-checklist-row-title {
        --my-work-checklist-sticky-base: #f9fbff;
        --my-work-checklist-sticky-tint: rgba(24, 44, 77, 0.04);
    }

    .admin-container,
    .admin-card,
    .admin-calendar-settings-columns,
    .admin-calendar-settings-column,
    .admin-calendar-settings-column > .admin-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .admin-calendar-settings-columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .admin-container .grid-form,
    .admin-container .admin-theme-tuning-grid,
    .admin-container .admin-calendar-task-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .admin-container .grid-form > *,
    .admin-container input,
    .admin-container select,
    .admin-container textarea,
    .admin-container button {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .admin-container .admin-calendar-task-actions,
    .admin-container .admin-my-work-rule-top-actions {
        flex-wrap: wrap;
    }

    .admin-container .admin-calendar-task-row {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch;
    }

    .admin-container .admin-calendar-task-edit-actions,
    .admin-container .admin-calendar-task-extra-pair {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
    }

    .admin-container .admin-calendar-task-extra-pair > *,
    .admin-container .admin-calendar-task-row .mini-btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .crm-container,
    .crm-panel,
    .crm-list-panel,
    .crm-detail-panel,
    #crmGlobalContactsView,
    #crmGlobalContactList {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .crm-container {
        display: block;
    }

    .crm-list-panel {
        border-right: 0;
        border-bottom: 0;
        margin-bottom: 0;
        width: 100%;
        min-width: 0;
        background: transparent;
    }

    .crm-panel {
        overflow-x: hidden;
    }

    .crm-detail-panel {
        display: none;
    }

    #crmView .board-page.crm-contacts-mode .crm-detail-panel {
        display: block !important;
        position: relative;
        inset: auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        background: transparent;
    }

    #crmView.crm-mobile-company-detail-open .crm-list-panel,
    #crmView.crm-mobile-company-detail-open #crmCompanyListToolbar {
        display: none !important;
    }

    #crmView.crm-mobile-company-detail-open .crm-detail-panel {
        display: block !important;
        position: relative;
        inset: auto;
        z-index: auto;
        background: transparent;
        overflow-y: visible;
        overflow-x: hidden;
        padding: 0;
    }

    #crmView.crm-mobile-company-detail-open .board-page {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #crmView.crm-mobile-company-detail-open #companyDetails,
    #crmView.crm-mobile-company-detail-open #contactForm {
        display: block;
        min-height: 100%;
        box-sizing: border-box;
        padding: 14px 14px 20px;
    }

    #crmView.crm-mobile-company-detail-open .board-page,
    #crmView.crm-mobile-company-detail-open .crm-container {
        overflow-y: auto;
        overflow-x: hidden;
    }

    #crmView.crm-mobile-company-detail-open #companyDetails > .section-header {
        display: none !important;
    }

    .crm-mobile-company-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        height: 28px;
        padding: 0 10px;
        font-size: 11px;
        margin-right: 6px;
    }

    .crm-company-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .crm-company-title-row h1 {
        min-width: 0;
        font-size: 17px;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .crm-company-header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }

    .crm-company-header-actions .primary-btn,
    .crm-company-header-actions .secondary-btn {
        min-height: 30px;
        height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }

    #crmCompanyListHeader {
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    #crmView.crm-mobile-company-detail-open #crmCompanyListMobileBack {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        height: 28px;
        padding: 0 10px;
        font-size: 11px;
        flex: 0 0 auto;
    }

    #crmCompanyListHeader h1 {
        flex: 0 0 auto;
        min-width: 0;
    }

    #crmCompanyListHeader .crm-company-selected-inline {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 15px;
    }

    #crmCompanyListHeader .crm-company-selected-color {
        flex: 0 0 auto;
    }

    #crmCompanyListHeader .crm-company-list-actions {
        margin-left: auto;
        gap: 6px;
        flex: 0 0 auto;
    }

    #crmView.crm-mobile-company-detail-open #crmCompanyListHeader .crm-company-list-actions {
        display: none !important;
    }

    .crm-company-hero {
        display: grid;
        gap: 8px;
        padding: 8px;
        border-radius: 12px;
    }

    .crm-company-hero-main,
    .crm-company-hero-side {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        border: 0;
        padding: 0;
    }

    .crm-company-hero-main {
        gap: 6px;
    }

    .crm-company-hero-topline {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .crm-company-owner-slot,
    .crm-company-billing-slot,
    .crm-company-kpi-card,
    .crm-company-side-card {
        min-height: 0;
        margin: 0;
        padding: 8px 10px;
        border: 1px solid rgba(160, 178, 218, 0.12);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.02);
        box-sizing: border-box;
    }

    .crm-company-owner-slot,
    .crm-company-billing-slot {
        padding: 6px 8px;
    }

    .crm-company-kpi-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .crm-company-kpi-card {
        display: grid;
        gap: 2px;
        border-left: 1px solid rgba(160, 178, 218, 0.12);
        padding: 5px 7px;
    }

    .crm-company-side-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .crm-company-side-card:first-child {
        grid-column: 1 / -1;
    }

    .crm-company-hero-label {
        font-size: 8px;
        line-height: 1;
        margin-bottom: 1px;
    }

    .crm-company-side-card > div,
    .crm-company-kpi-card strong,
    .crm-company-owner-slot > span:last-child,
    .crm-company-billing-slot > span:last-child {
        line-height: 1.2;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .crm-company-owner-slot > span:last-child,
    .crm-company-billing-slot > span:last-child,
    .crm-company-side-card > div {
        white-space: nowrap;
    }

    .crm-company-kpi-label {
        font-size: 8px;
        line-height: 1.05;
        letter-spacing: 0.02em;
        white-space: normal;
    }

    .crm-company-kpi-card strong {
        font-size: 11px;
    }

    .crm-company-owner-slot > span:last-child,
    .crm-company-billing-slot > span:last-child {
        font-size: 11px;
    }

    .crm-company-detail-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .crm-company-detail-tabs::-webkit-scrollbar {
        display: none;
    }

    .crm-company-detail-tabs .secondary-btn {
        flex: 0 0 auto;
        min-height: 28px;
        height: 28px;
        padding: 0 9px;
        font-size: 11px;
        white-space: nowrap;
    }

    .crm-company-contacts-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .crm-company-contacts-head h1 {
        min-width: 0;
        flex: 1 1 auto;
    }

    .crm-company-contacts-head-actions {
        display: flex;
        flex: 0 0 auto;
    }

    .crm-global-contacts-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .crm-global-contacts-head h1 {
        min-width: 0;
        flex: 1 1 auto;
    }

    .crm-global-contacts-head-actions {
        display: flex;
        flex: 0 0 auto;
    }

    #crmGlobalContactsView .section-header .primary-btn.crm-company-add-contact-mobile,
    #crmCompanyTabPanelContacts .section-header .primary-btn.crm-company-add-contact-mobile {
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        border-radius: 8px !important;
        align-self: flex-start;
        max-width: 42vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 0 0 auto;
    }

    .crm-company-action-row {
        gap: 6px;
    }

    .crm-company-action-row .secondary-btn,
    .crm-company-action-row .primary-btn {
        min-height: 24px;
        height: 24px;
        padding: 0 8px;
        font-size: 10px;
    }

    .crm-company-project-list {
        gap: 8px;
    }

    .crm-company-project-card {
        padding: 10px 10px;
        border-radius: 10px;
    }

    .crm-company-project-card-top {
        gap: 8px;
        margin-bottom: 8px;
    }

    .crm-company-project-card-top h3 {
        font-size: 13px;
        line-height: 1.2;
        margin: 0 0 2px;
    }

    .crm-company-project-card-top p {
        font-size: 11px;
        line-height: 1.15;
    }

    .crm-company-project-card-meta {
        gap: 8px;
        font-size: 11px;
        line-height: 1.15;
    }

    .crm-company-project-card-meta .secondary-btn {
        min-height: 24px;
        height: 24px;
        padding: 0 9px;
        font-size: 10px;
    }

    .crm-company-stage-pill {
        min-height: 24px;
        padding: 3px 10px;
        font-size: 10px;
        line-height: 1.1;
    }

    .crm-search-row,
    #crmGlobalContactsView .crm-search-row,
    #crmGlobalContactsView .crm-search-row + div,
    .crm-contacts-toolbar,
    .crm-contacts-toolbar-actions,
    .crm-view-toggle-row {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .crm-contacts-toolbar-actions,
    .crm-contacts-toolbar,
    #crmGlobalContactsView .crm-search-row + div[style*="display:flex"][style*="gap:8px"][style*="margin-bottom:10px"],
    #crmCompanyTabPanelContacts > div[style*="display:flex"][style*="gap:8px"][style*="margin-bottom:10px"] {
        display: none !important;
    }

    .crm-search-row input[type="search"] {
        flex: 1 1 100% !important;
        width: 100%;
        min-width: 0;
    }

    #crmCompanyFilterResetBtn {
        display: none !important;
    }

    #crmCompanyListHeader {
        align-items: center;
        gap: 8px;
    }

    #crmCompanyListHeader .crm-company-list-actions {
        margin-left: auto;
        gap: 6px;
    }

    #crmCompanyListHeader .crm-company-list-actions .primary-btn {
        min-height: 32px;
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    #crmCompanyListToolbar {
        margin-bottom: 8px;
    }

    #crmCompanyListToolbar .crm-search-row {
        width: 100%;
        margin-bottom: 8px;
    }

    #crmCompanyFilterStats {
        margin-bottom: 8px !important;
        font-size: 11px !important;
    }

    #uList {
        padding-bottom: 8px;
    }

    .u-item {
        margin: 0 0 8px;
        border-radius: 0;
        padding: 4px 10px;
        min-height: 24px;
        background: rgba(255,255,255,0.02);
        border-left-width: 4px !important;
    }

    .u-item > span:first-child {
        line-height: 1.1;
    }

    :root[data-theme="light"] .u-item {
        background: #f9fbff;
    }

    .crm-search-row .secondary-btn,
    #crmGlobalContactsView .secondary-btn,
    #crmGlobalContactsView .primary-btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    #crmGlobalContactFilterStats,
    #crmGlobalContactFilterResetBtn {
        display: none !important;
    }

    #crmGlobalContactList,
    #cList {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #crmGlobalContactList .crm-contact-table-wrap,
    #cList .crm-contact-table-wrap {
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        --crm-mobile-sticky-width: clamp(150px, 50vw, 220px);
        --crm-mobile-sticky-width-scrolled: clamp(96px, 26vw, 132px);
        --crm-mobile-sticky-width-current: var(--crm-mobile-sticky-width);
    }

    #crmGlobalContactList .crm-contact-table,
    #cList .crm-contact-table {
        min-width: 1050px !important;
        width: max-content !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-check,
    #crmGlobalContactList .crm-contact-table th[data-col="check"],
    #crmGlobalContactList .crm-contact-table td[data-col="check"],
    #cList .crm-contact-table col.crm-col-check,
    #cList .crm-contact-table th[data-col="check"],
    #cList .crm-contact-table td[data-col="check"] {
        display: none !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-name,
    #cList .crm-contact-table col.crm-col-name {
        width: var(--crm-mobile-sticky-width-current) !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-company,
    #cList .crm-contact-table col.crm-col-company {
        width: 220px !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-typ,
    #cList .crm-contact-table col.crm-col-typ {
        width: 132px !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-owner,
    #cList .crm-contact-table col.crm-col-owner {
        width: 120px !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-overdue,
    #cList .crm-contact-table col.crm-col-overdue {
        width: 92px !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-followup,
    #cList .crm-contact-table col.crm-col-followup {
        width: 118px !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-tags,
    #cList .crm-contact-table col.crm-col-tags {
        width: 112px !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-notes,
    #cList .crm-contact-table col.crm-col-notes {
        width: 58px !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-actions,
    #cList .crm-contact-table col.crm-col-actions {
        width: 220px !important;
    }

    #crmGlobalContactList .crm-contact-table col.crm-col-edit,
    #cList .crm-contact-table col.crm-col-edit {
        width: 88px !important;
    }

    #crmGlobalContactList .crm-contact-table th,
    #crmGlobalContactList .crm-contact-table td,
    #cList .crm-contact-table th,
    #cList .crm-contact-table td {
        padding: 4px 6px;
        min-width: 0;
        height: 32px;
        box-sizing: border-box;
    }

    #crmGlobalContactList .crm-contact-table thead th[data-col="name"],
    #crmGlobalContactList .crm-contact-table td[data-col="name"],
    #cList .crm-contact-table thead th[data-col="name"],
    #cList .crm-contact-table td[data-col="name"] {
        position: sticky;
        left: 0;
        z-index: 3;
        width: var(--crm-mobile-sticky-width-current) !important;
        min-width: var(--crm-mobile-sticky-width-current) !important;
        max-width: var(--crm-mobile-sticky-width-current) !important;
        background: var(--monday-bg) !important;
        background-color: var(--monday-bg) !important;
        overflow: hidden;
        background-clip: padding-box;
        box-shadow: 1px 0 0 rgba(156, 175, 209, 0.14);
    }

    #crmGlobalContactList .crm-contact-table thead th[data-col="name"],
    #cList .crm-contact-table thead th[data-col="name"] {
        z-index: 4;
        background: linear-gradient(180deg, rgba(43, 50, 76, 0.92), rgba(39, 45, 71, 0.92)) !important;
        background-color: #2b324c !important;
    }

    #crmGlobalContactList .crm-contact-row.is-selected td[data-col="name"],
    #cList .crm-contact-row.is-selected td[data-col="name"] {
        background: var(--monday-bg) !important;
        background-color: var(--monday-bg) !important;
    }

    #crmGlobalContactList .crm-contact-table .crm-contact-name,
    #crmGlobalContactList .crm-contact-table .crm-contact-company,
    #crmGlobalContactList .crm-contact-table .crm-contact-company-btn,
    #cList .crm-contact-table .crm-contact-name,
    #cList .crm-contact-table .crm-contact-company,
    #cList .crm-contact-table .crm-contact-company-btn {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1;
    }

    #crmGlobalContactList .crm-contact-table .crm-contact-name,
    #cList .crm-contact-table .crm-contact-name {
        background: var(--monday-bg) !important;
        background-color: var(--monday-bg) !important;
    }

    :root[data-theme="dark"] #crmGlobalContactList .crm-contact-table .crm-contact-name,
    :root[data-theme="dark"] #crmGlobalContactList .crm-contact-table td[data-col="name"],
    :root[data-theme="dark"] #cList .crm-contact-table .crm-contact-name,
    :root[data-theme="dark"] #cList .crm-contact-table td[data-col="name"] {
        background: #0e131e !important;
        background-color: #0e131e !important;
    }

    :root[data-theme="light"] #crmGlobalContactList .crm-contact-table thead th[data-col="name"],
    :root[data-theme="light"] #crmGlobalContactList .crm-contact-table td[data-col="name"],
    :root[data-theme="light"] #crmGlobalContactList .crm-contact-table .crm-contact-name,
    :root[data-theme="light"] #cList .crm-contact-table thead th[data-col="name"],
    :root[data-theme="light"] #cList .crm-contact-table td[data-col="name"],
    :root[data-theme="light"] #cList .crm-contact-table .crm-contact-name {
        background: #F9FBFF !important;
        background-color: #F9FBFF !important;
    }

    :root[data-theme="light"] #crmGlobalContactList .crm-contact-table thead th[data-col="name"],
    :root[data-theme="light"] #cList .crm-contact-table thead th[data-col="name"] {
        background: linear-gradient(180deg, #f4f8ff, #eef4ff) !important;
        background-color: #f4f8ff !important;
    }

    :root[data-theme="light"] #crmGlobalContactList .crm-contact-row.is-selected td[data-col="name"],
    :root[data-theme="light"] #cList .crm-contact-row.is-selected td[data-col="name"] {
        background: #F9FBFF !important;
        background-color: #F9FBFF !important;
    }

    #crmGlobalContactList .crm-contact-table .crm-contact-company-btn,
    #cList .crm-contact-table .crm-contact-company-btn {
        min-height: 20px;
        height: 20px;
        padding: 0 8px;
        font-size: 10px;
        line-height: 20px;
    }

    #crmGlobalContactList .crm-contact-table .crm-contact-typ-trigger,
    #crmGlobalContactList .crm-contact-table .crm-contact-followup .date-trigger,
    #cList .crm-contact-table .crm-contact-typ-trigger,
    #cList .crm-contact-table .crm-contact-followup .date-trigger {
        height: 22px;
        min-height: 22px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 11px;
    }

    #crmGlobalContactList .crm-contact-table .crm-contact-followup .date-cell,
    #crmGlobalContactList .crm-contact-table .crm-contact-followup .date-trigger,
    #cList .crm-contact-table .crm-contact-followup .date-cell,
    #cList .crm-contact-table .crm-contact-followup .date-trigger {
        width: 124px;
        min-width: 124px;
        max-width: 124px;
    }

    #crmGlobalContactList .crm-contact-table .crm-contact-actions,
    #cList .crm-contact-table .crm-contact-actions {
        width: 240px;
        min-width: 240px;
        white-space: nowrap;
    }

    #crmGlobalContactList .crm-contact-thread-btn,
    #cList .crm-contact-thread-btn {
        width: 24px;
        min-width: 24px;
        height: 24px;
    }

    #crmGlobalContactList .crm-contact-actions .secondary-btn,
    #cList .crm-contact-actions .secondary-btn {
        min-height: 22px;
        height: 22px;
        padding: 0 8px;
        font-size: 11px;
    }

    #boardView .team-board-cell,
    #internalTasksView .team-board-cell,
    #youboxView .team-board-cell {
        vertical-align: middle;
    }

    #boardView .team-cell,
    #internalTasksView .team-cell,
    #youboxView .team-cell,
    #boardView .team-board-cell .team-cell.my-work-team-cell,
    #internalTasksView .team-board-cell .team-cell.my-work-team-cell,
    #youboxView .team-board-cell .team-cell.my-work-team-cell,
    #boardView .subtask-row .team-cell.my-work-team-cell,
    #internalTasksView .subtask-row .team-cell.my-work-team-cell {
        min-height: 38px;
        height: 38px;
        padding: 0;
        gap: 3px;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    #boardView .team-board-cell .team-cell-pills,
    #internalTasksView .team-board-cell .team-cell-pills,
    #youboxView .team-board-cell .team-cell-pills,
    #boardView .subtask-row .my-work-team-cell .team-cell-pills,
    #internalTasksView .subtask-row .my-work-team-cell .team-cell-pills {
        gap: 3px;
        flex-wrap: nowrap;
        line-height: 1;
    }

    #boardView .team-avatar,
    #internalTasksView .team-avatar,
    #youboxView .team-avatar,
    #boardView .team-pill.me-checklist-team-overflow,
    #internalTasksView .team-pill.me-checklist-team-overflow,
    #youboxView .team-pill.me-checklist-team-overflow {
        width: 20px;
        min-width: 20px;
        height: 20px;
        font-size: 8px;
    }

    #boardView .team-pill,
    #internalTasksView .team-pill,
    #youboxView .team-pill {
        min-height: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 9px;
        font-size: 8px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        white-space: nowrap;
    }

    #boardView .board-table td[data-col="kalenderkosten"],
    #boardView .board-table td[data-col="budget"],
    #boardView .board-table td[data-col="budgetstatus"],
    #boardView .board-table td[data-col="abgerechnet"],
    #boardView .board-table td[data-col="kalkulation"],
    #boardView .board-table td[data-col="dateiupload"] {
        padding-top: 0;
        padding-bottom: 0;
    }

    #boardView .board-project-budget-col,
    #boardView .board-project-cost-cell {
        min-height: 38px;
        gap: 0;
        justify-content: center;
    }

    #boardView .board-project-cost-row {
        min-height: 38px;
        height: 38px;
        align-items: center;
    }

    #boardView .board-project-budget-value,
    #boardView .board-project-cost-value {
        min-width: 0;
        font-size: 10px;
        line-height: 1;
    }

    #boardView .board-project-budget-value.is-empty {
        font-size: 9px;
        line-height: 1;
    }

    #boardView .board-project-budget-empty-btn {
        min-height: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
    }

    #boardView .board-project-budget-usage {
        min-height: 38px;
        padding: 1px 0;
        border-radius: 0;
    }

    #boardView .board-project-budget-usage-track {
        height: 16px;
    }

    #boardView .board-project-budget-usage-track-label {
        padding: 0 4px;
        font-size: 8px;
    }

    #boardView .board-project-budget-usage-foot {
        margin-top: 1px;
        padding: 0 2px 1px;
        font-size: 7px;
        line-height: 1;
    }

    #boardView .board-project-calc-review {
        min-height: 18px;
        padding: 1px 4px;
        gap: 0;
    }

    #boardView .board-project-calc-review-state,
    #boardView .board-project-calc-review-meta {
        font-size: 8px;
        line-height: 1;
    }

    #boardView .subtask-row .team-cell.my-work-team-cell.is-single,
    #internalTasksView .subtask-row .team-cell.my-work-team-cell.is-single {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    #boardView .board-attachment-cell,
    #internalTasksView .board-attachment-cell {
        min-width: 72px;
        min-height: 38px;
        height: 38px;
        padding: 0;
        border-radius: 4px;
    }

    #boardView .board-attachment-row,
    #internalTasksView .board-attachment-row {
        min-height: 38px;
        height: 38px;
        gap: 2px;
    }

    #boardView .board-attachment-main,
    #internalTasksView .board-attachment-main {
        min-height: 38px;
    }

    #boardView .board-attachment-icon-wrap,
    #boardView .board-attachment-upload-btn,
    #internalTasksView .board-attachment-icon-wrap,
    #internalTasksView .board-attachment-upload-btn {
        width: 28px;
        min-width: 28px;
        height: 28px;
        min-height: 28px;
        border-radius: 4px;
    }

    #boardView .board-attachment-icon,
    #internalTasksView .board-attachment-icon {
        font-size: 10px;
        line-height: 1;
    }

    #boardView .board-project-cost-edit-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        border-radius: 4px;
        font-size: 10px;
    }

    #worktimeTableWrap {
        overflow-x: hidden;
    }

    .worktime-table {
        width: 100%;
        min-width: 0 !important;
        table-layout: fixed;
        font-size: 12px;
    }

    .worktime-col-date {
        width: 25% !important;
    }

    .worktime-col-time {
        width: 11% !important;
    }

    .worktime-col-entry,
    .worktime-col-note {
        width: 15.5% !important;
    }

    .worktime-table col:nth-child(5),
    .worktime-table col:nth-child(6) {
        display: none;
    }

    .worktime-table th,
    .worktime-table td {
        padding-left: 3px;
        padding-right: 3px;
        font-size: 12px;
    }

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

    .worktime-table th:nth-child(2),
    .worktime-table td:nth-child(2),
    .worktime-table th:nth-child(3),
    .worktime-table td:nth-child(3),
    .worktime-table th:nth-child(4),
    .worktime-table td:nth-child(4),
    .worktime-table th:nth-child(7),
    .worktime-table td:nth-child(7) {
        width: 11%;
        white-space: nowrap;
    }

    .worktime-table th:nth-child(5),
    .worktime-table td:nth-child(5),
    .worktime-table th:nth-child(6),
    .worktime-table td:nth-child(6) {
        display: none;
    }

    .worktime-table th:nth-child(8),
    .worktime-table td:nth-child(8),
    .worktime-table th:nth-child(9),
    .worktime-table td:nth-child(9) {
        width: 15.5%;
    }

    .worktime-table td input.project-inline-input {
        min-width: 0;
        padding-left: 4px;
        padding-right: 4px;
    }

    .worktime-table td {
        vertical-align: top;
    }

    .worktime-override-controls.is-arzt {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        align-items: stretch;
    }

    .worktime-override-menu {
        width: min(240px, calc(100vw - 20px));
    }

    .worktime-arzt-slots {
        margin-top: 4px;
    }

    .worktime-time-overlay {
        padding: 12px;
        align-items: center;
    }

    .worktime-time-overlay-card {
        width: min(100%, 520px);
        max-height: min(72vh, 640px);
        border-radius: 16px;
    }

    .worktime-time-overlay-fields {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .worktime-time-overlay-select,
    .worktime-time-overlay-clear,
    .worktime-time-overlay-apply {
        font-size: 12px;
    }

    .admin-users-table,
    .admin-users-table thead,
    .admin-users-table tbody,
    .admin-users-table tr,
    .admin-users-table th,
    .admin-users-table td {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .admin-users-table thead {
        display: none;
    }

    .admin-users-table tr {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid rgba(156, 175, 209, 0.16);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.025);
    }

    .admin-users-table td {
        padding: 4px 0;
        overflow-wrap: anywhere;
    }

    .admin-users-table td:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .admin-users-table select {
        width: 100%;
        min-width: 0;
    }

    .admin-users-table .micro-btn {
        flex: 1 1 auto;
        min-height: 34px;
        min-width: 0;
    }

    .board-toolbar input,
    .board-toolbar select,
    .board-toolbar button,
    .primary-btn,
    .secondary-btn,
    .mini-btn,
    button,
    input,
    select,
    textarea {
        min-height: 44px;
    }

    .date-menu .date-menu-top {
        margin-bottom: 4px;
        gap: 3px;
    }

    .date-menu .date-input-text {
        min-height: 32px;
        padding: 5px 8px;
        font-size: 12px;
    }

    .date-menu .date-today-btn {
        min-height: 24px;
        height: 24px;
        padding: 0 7px;
        font-size: 11px;
        line-height: 1;
    }

    .date-menu .date-time-row {
        margin-top: 6px;
        gap: 6px;
    }

    .date-menu .date-time-mode {
        padding: 2px;
    }

    .date-menu .date-time-mode-btn {
        min-height: 24px;
        padding: 3px 6px;
        font-size: 11px;
    }

    .date-menu .date-cal-head {
        margin-top: 6px;
    }

    .date-menu .date-period-select {
        min-height: 26px;
        padding: 3px 6px;
        font-size: 12px;
    }

    .date-menu .date-nav-btn {
        width: 24px;
        height: 24px;
        min-height: 24px;
        font-size: 16px;
    }

    .date-menu .date-menu-actions {
        margin-top: 6px;
    }

    .date-menu .date-menu-ok-btn {
        min-height: 24px;
        height: 24px;
        padding: 0 9px;
        font-size: 11px;
    }

    .calendar-layout {
        display: block;
        padding: 0 !important;
    }

    #external-events {
        display: none !important;
    }

    .notifications-center-panel,
    .user-quick-dropdown {
        max-width: min(94vw, 420px);
        right: 0;
    }

    .modal {
        overflow-y: auto;
        padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    .modal-content,
    .archive-modal-content,
    .worktime-profile-modal-content {
        width: min(100%, calc(100vw - 20px)) !important;
        max-width: min(100%, calc(100vw - 20px)) !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
        margin: 0 auto;
        padding: 16px 14px;
        border-radius: 16px;
        box-sizing: border-box;
        overflow: auto;
    }

    .modal-content .modal-body,
    .worktime-profile-modal-content .modal-body,
    .archive-modal-content .modal-body {
        max-height: none;
        overflow: visible;
        min-height: 0;
        padding-right: 0;
    }

    #entryModal .modal-content {
        width: min(100%, calc(100vw - 16px)) !important;
        max-width: min(100%, calc(100vw - 16px)) !important;
        padding: 14px 12px 12px;
    }

    #entryModal .modal-content h2 {
        margin-bottom: 14px;
    }

    #entryModal .modal-time-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 10px !important;
        row-gap: 8px !important;
        width: 100%;
    }

    #entryModal .modal-time-row > :first-child {
        grid-column: 1 / -1;
    }

    #entryModal .modal-time-row > *,
    #entryModal .modal-rate-row > * {
        min-width: 0;
    }

    #entryModal #modalDate,
    #entryModal #modalStartTime,
    #entryModal #modalEndTime,
    #entryModal #modalType {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    #entryModal #modalDate,
    #entryModal #modalStartTime,
    #entryModal #modalEndTime {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        height: 44px;
        min-height: 44px;
        padding: 0 12px !important;
        margin: 0;
        line-height: normal;
        text-align: center;
        font-size: 16px;
        background-image: none !important;
    }

    #entryModal #modalDate::-webkit-date-and-time-value,
    #entryModal #modalStartTime::-webkit-date-and-time-value,
    #entryModal #modalEndTime::-webkit-date-and-time-value {
        min-height: 44px;
        line-height: 44px;
        text-align: center;
    }

    #entryModal #modalDate::-webkit-datetime-edit,
    #entryModal #modalStartTime::-webkit-datetime-edit,
    #entryModal #modalEndTime::-webkit-datetime-edit {
        padding: 0;
        text-align: center;
    }

    #entryModal .modal-inline-add-row {
        flex-wrap: wrap;
    }

    #entryModal .modal-inline-add-row button {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    .app-confirm-overlay,
    .project-create-overlay,
    .project-fixed-costs-overlay {
        padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    .app-confirm-dialog,
    .app-alert-dialog,
    .entity-doc-reminder-dialog,
    .project-fixed-costs-dialog,
    .project-create-dialog {
        width: min(100%, calc(100vw - 20px));
        max-width: min(100%, calc(100vw - 20px));
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
        overflow: auto;
        box-sizing: border-box;
    }

    .app-confirm-actions,
    .project-create-actions {
        flex-wrap: wrap;
    }

    .app-confirm-actions .secondary-btn,
    .project-create-actions .secondary-btn,
    .project-create-actions .primary-btn {
        flex: 1 1 100%;
        min-width: 0;
    }

    .project-fixed-costs-dialog {
        border-radius: 8px;
    }

    .project-fixed-costs-header {
        padding: 12px;
    }

    .project-fixed-costs-header h3 {
        font-size: 15px;
        line-height: 1.25;
    }

    .project-fixed-costs-body {
        padding: 12px;
    }

    .project-fixed-costs-section-title {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .project-billed-entries-hint,
    .project-fixed-costs-empty-note,
    .project-billed-entries-footnote {
        font-size: 11px;
        line-height: 1.3;
    }

    .project-fixed-costs-calendar-wrap {
        padding: 0 8px;
    }

    .project-fixed-costs-calendar-headrow,
    .project-fixed-costs-calendar-table,
    .project-fixed-costs-calendar-footrow {
        grid-template-columns: minmax(120px, 1.4fr) minmax(72px, 0.75fr) 56px 72px;
        gap: 4px 8px;
        font-size: 12px;
    }

    .project-fixed-costs-calendar-headrow > :nth-child(3),
    .project-fixed-costs-calendar-headrow > :nth-child(4),
    .project-fixed-costs-calendar-table > :nth-child(3),
    .project-fixed-costs-calendar-table > :nth-child(4),
    .project-fixed-costs-calendar-footrow > :nth-child(3),
    .project-fixed-costs-calendar-footrow > :nth-child(4) {
        display: none;
    }

    .project-fixed-costs-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) 84px 40px;
        gap: 6px 8px;
    }

    .project-fixed-costs-grid-head {
        font-size: 11px;
        line-height: 1.1;
        white-space: normal;
        word-break: break-word;
    }

    .project-fixed-costs-grid-head:nth-child(3) {
        text-align: center;
    }

    .project-fixed-cost-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) 84px 40px;
        gap: 6px 8px;
    }

    .project-fixed-cost-row input,
    .project-fixed-cost-row select,
    .project-fixed-cost-row .project-fixed-cost-date-trigger {
        min-height: 18px;
        height: 18px;
        font-size: 8px;
        padding: 0 6px;
    }

    .project-fixed-cost-row .project-fixed-cost-date-cell {
        min-width: 84px;
    }

    .project-fixed-cost-row .mini-btn {
        min-width: 40px;
        width: 40px;
        min-height: 18px;
        height: 18px;
        padding: 0;
        font-size: 10px;
    }

    .project-fixed-costs-toolbar {
        gap: 8px;
        align-items: center;
    }

    .project-fixed-costs-total {
        font-size: 11px;
        margin-left: auto;
        white-space: nowrap;
    }

    .project-fixed-costs-actions {
        gap: 8px;
    }

    .project-fixed-costs-actions .secondary-btn,
    .project-fixed-costs-actions .primary-btn {
        min-height: 32px;
        height: 32px;
        padding: 0 12px;
    }

    #calendarView.active {
        display: block;
    }

    #calendarView .calendar-layout {
        height: calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        min-height: 0;
        padding: 0 !important;
    }

    #calendarView .calendar-stage {
        height: 100%;
        min-height: 0;
        margin-bottom: 0;
    }

    #calendarView #calendar {
        height: 100%;
        min-height: 0;
    }

    #calendarView .fc {
        height: 100%;
    }

    #calendarView .fc .fc-header-toolbar,
    #calendarView .fc .fc-toolbar {
        padding: 2px 6px 8px 6px !important;
        margin-bottom: 0 !important;
        gap: 8px;
    }

#calendarView .fc .fc-toolbar-title {
        font-size: 18px !important;
    }

    #calendarView .fc .fc-toolbar-title:not(.calendar-toolbar-title-button) {
        visibility: hidden;
    }

    #calendarView .fc .fc-button {
        border-radius: 12px !important;
        min-height: 38px;
        padding: 6px 10px !important;
    }

    #calendarView .fc .fc-toolbar-chunk {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    #calendarView .fc .fc-toolbar-chunk:nth-child(2) {
        position: static;
        transform: none;
        max-width: 100%;
        width: auto;
        pointer-events: auto;
    }
}

@media (max-width: 430px) and (pointer: coarse) {
    .content-area {
        padding-left: 10px;
        padding-right: 10px;
    }

    .tab-icon,
    .logout-btn {
        max-width: 76px;
    }

    .tab-label {
        font-size: 8.5px;
    }

    .section-header h1,
    .section-header h2 {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tab-icon,
    .logout-btn,
    .primary-btn,
    .secondary-btn,
    .mini-btn,
    button,
    input,
    select,
    textarea {
        transition: none !important;
        animation: none !important;
    }
}

.youbox-shell {
    display: grid;
    grid-template-columns: minmax(272px, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-height: 64vh;
}

.youbox-list-panel,
.youbox-detail-panel {
    border: 1px solid var(--monday-border);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 254, 0.94));
    box-shadow: 0 18px 40px rgba(23, 37, 63, 0.08);
    overflow: hidden;
}

:root[data-theme="dark"] .youbox-list-panel,
:root[data-theme="dark"] .youbox-detail-panel {
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(17, 23, 35, 0.94), rgba(20, 27, 41, 0.94));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

.youbox-list-toolbar {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid var(--monday-border);
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.95), rgba(241, 246, 253, 0.9));
}

:root[data-theme="dark"] .youbox-list-toolbar {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.youbox-list {
    max-height: 74vh;
    overflow: auto;
    padding: 10px;
}

.youbox-list-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #64758f;
    margin-bottom: 8px;
    padding: 0 4px;
}

:root[data-theme="dark"] .youbox-list-summary {
    color: #9fb0c9;
}

.youbox-list-pills,
.youbox-detail-badges,
.youbox-detail-top-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.youbox-mini-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(11, 103, 208, 0.08);
    color: #315486;
    font-size: 12px;
    font-weight: 700;
}

:root[data-theme="dark"] .youbox-mini-pill {
    background: rgba(115, 189, 255, 0.12);
    color: #d3e8ff;
}

.youbox-list-item {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 11px 12px 10px;
    background: rgba(255, 255, 255, 0.86);
    color: inherit;
    text-align: left;
    cursor: pointer;
    margin-bottom: 8px;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

:root[data-theme="dark"] .youbox-list-item {
    background: rgba(255, 255, 255, 0.03);
}

.youbox-list-item:hover,
.youbox-list-item.active {
    border-color: rgba(79, 142, 231, 0.34);
    box-shadow: 0 12px 24px rgba(20, 36, 62, 0.08);
    transform: translateY(-1px);
}

:root[data-theme="dark"] .youbox-list-item:hover,
:root[data-theme="dark"] .youbox-list-item.active {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.youbox-list-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 4px;
}

.youbox-list-title {
    font-weight: 800;
    color: var(--monday-text);
}

.youbox-list-meta,
.youbox-list-sub,
.youbox-list-footer {
    font-size: 12px;
    color: #6a7c98;
}

:root[data-theme="dark"] .youbox-list-meta,
:root[data-theme="dark"] .youbox-list-sub,
:root[data-theme="dark"] .youbox-list-footer {
    color: #a4b2c8;
}

.youbox-list-footer {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.youbox-link-dot {
    font-weight: 700;
    color: #3567ad;
}

.youbox-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pill-color, #315486);
    background: color-mix(in srgb, var(--pill-color, #315486) 12%, white);
    border: 1px solid color-mix(in srgb, var(--pill-color, #315486) 25%, white);
    white-space: nowrap;
}

:root[data-theme="dark"] .youbox-status-pill {
    background: color-mix(in srgb, var(--pill-color, #73bdff) 18%, rgba(255, 255, 255, 0.05));
    border-color: color-mix(in srgb, var(--pill-color, #73bdff) 32%, rgba(255, 255, 255, 0.12));
}

.youbox-detail {
    padding: 14px;
}

.youbox-detail-hero {
    padding: 12px 14px 6px;
    margin: -14px -14px 8px;
    background:
        radial-gradient(circle at top right, rgba(92, 146, 233, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(247, 250, 255, 0.95), rgba(241, 246, 253, 0.75));
    border-bottom: 1px solid var(--monday-border);
}

:root[data-theme="dark"] .youbox-detail-hero {
    background:
        radial-gradient(circle at top right, rgba(115, 189, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.youbox-detail-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    color: #5c7aa4;
    margin-bottom: 6px;
}

:root[data-theme="dark"] .youbox-detail-eyebrow {
    color: #9ec5f1;
}

.youbox-detail-head,
.youbox-detail-actions,
.youbox-detail-kpis {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.youbox-detail-head {
    justify-content: space-between;
}

.youbox-detail-kpis {
    margin: 8px 0 10px;
}

.youbox-kpi-card {
    min-width: 118px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(134, 153, 182, 0.18);
}

:root[data-theme="dark"] .youbox-kpi-card {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}

.youbox-kpi-card span {
    display: block;
    font-size: 11px;
    color: #7387a3;
}

:root[data-theme="dark"] .youbox-kpi-card span {
    color: #9eb0c7;
}

.youbox-kpi-card strong {
    display: block;
    font-size: 13px;
    margin-top: 2px;
}

.youbox-detail-sections {
    display: grid;
    gap: 10px;
}

.youbox-detail-card {
    border: 1px solid rgba(134, 153, 182, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    padding: 11px 12px;
}

:root[data-theme="dark"] .youbox-detail-card {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.youbox-card-head {
    margin-bottom: 8px;
}

.youbox-card-head h3 {
    margin: 0 0 2px 0;
    font-size: 15px;
}

.youbox-card-head p {
    margin: 0;
    font-size: 11px;
    color: #7285a1;
}

:root[data-theme="dark"] .youbox-card-head p {
    color: #9fb0c9;
}

.youbox-empty {
    padding: 26px 18px;
    text-align: center;
    color: #7285a1;
}

.youbox-empty strong {
    display: block;
    color: var(--monday-text);
    margin-bottom: 6px;
}

.youbox-empty p {
    margin: 0;
}

:root[data-theme="dark"] .youbox-empty {
    color: #a4b2c8;
}

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

.youbox-field {
    display: grid;
    gap: 4px;
    grid-column: span 6;
}

.youbox-field.full {
    grid-column: 1 / -1;
}

.youbox-field.span-3 { grid-column: span 3; }
.youbox-field.span-4 { grid-column: span 4; }
.youbox-field.span-5 { grid-column: span 5; }
.youbox-field.span-6 { grid-column: span 6; }
.youbox-field.span-7 { grid-column: span 7; }
.youbox-field.span-8 { grid-column: span 8; }
.youbox-field.span-12 { grid-column: 1 / -1; }

.youbox-field label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    color: #607492;
}

:root[data-theme="dark"] .youbox-field label {
    color: #a4b2c8;
}

.youbox-field input,
.youbox-field select,
.youbox-field textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(128, 148, 178, 0.2);
    background: #ffffff;
    color: var(--monday-text);
    padding: 8px 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    min-height: 40px;
    height: 40px;
}

:root[data-theme="dark"] .youbox-field input,
:root[data-theme="dark"] .youbox-field select,
:root[data-theme="dark"] .youbox-field textarea {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #eef4ff;
    box-shadow: none;
}

.youbox-field input:focus,
.youbox-field select:focus,
.youbox-field textarea:focus {
    outline: none;
    border-color: rgba(11, 103, 208, 0.45);
    box-shadow: 0 0 0 4px rgba(11, 103, 208, 0.08);
}

.youbox-field textarea {
    min-height: 88px;
    height: auto;
    resize: vertical;
}

.youbox-detail-actions {
    margin-top: 10px;
    justify-content: flex-end;
    gap: 8px;
}

.youbox-drawer-body {
    padding: 0;
}

.youbox-drawer-shell {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(242, 246, 252, 0.94));
}

.youbox-drawer-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.youbox-drawer-sections {
    display: grid;
    gap: 14px;
    padding: 18px 18px 16px;
    flex: 1 1 auto;
}

.youbox-drawer-section {
    border: 1px solid rgba(134, 153, 182, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    padding: 14px;
}

.youbox-drawer-grid {
    gap: 14px 16px;
}

.youbox-drawer-grid > label,
.youbox-drawer-grid > div {
    min-width: 0;
}

.youbox-drawer-grid select[multiple] {
    min-height: 118px;
    height: auto;
    padding: 8px;
}

.youbox-drawer-linkrow {
    display: flex;
    align-items: center;
}

.youbox-drawer-actions {
    margin-top: 0;
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(131, 149, 181, 0.18);
    background: rgba(255, 255, 255, 0.88);
    position: sticky;
    bottom: 0;
}

:root[data-theme="dark"] .youbox-drawer-shell {
    background: linear-gradient(180deg, rgba(19, 24, 36, 0.98), rgba(17, 22, 33, 0.95));
}

:root[data-theme="dark"] .youbox-drawer-section {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

:root[data-theme="dark"] .youbox-drawer-actions {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: rgba(17, 22, 33, 0.9);
}

:root[data-theme="dark"] .youbox-email-auto-toggle {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .youbox-email-auto-toggle.is-active {
    border-color: rgba(78, 171, 122, 0.28);
    background: linear-gradient(180deg, rgba(28, 61, 44, 0.64), rgba(22, 47, 34, 0.58));
}

:root[data-theme="dark"] .youbox-email-auto-copy strong {
    color: #eaf1ff;
}

:root[data-theme="dark"] .youbox-email-auto-copy span {
    color: #9fb0c8;
}

:root[data-theme="dark"] .youbox-email-auto-toggle.is-active .youbox-email-auto-copy strong {
    color: #dbf8e4;
}

:root[data-theme="dark"] .youbox-email-auto-toggle.is-active .youbox-email-auto-copy span {
    color: #a8d4b8;
}

:root[data-theme="dark"] .youbox-email-field-hint {
    color: #9fb0c8;
}

:root[data-theme="dark"] .youbox-email-auto-mini-label {
    color: #aab8cc;
}

:root[data-theme="dark"] .youbox-email-auto-toggle-compact.is-active .youbox-email-auto-mini-label {
    color: #dbf8e4;
}

.youbox-inline-split {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 6px;
}

.youbox-email-auto-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 54px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(136, 152, 177, 0.22);
    background: rgba(245, 248, 252, 0.88);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.youbox-email-auto-toggle.is-active {
    border-color: rgba(74, 154, 110, 0.34);
    background: linear-gradient(180deg, rgba(226, 247, 236, 0.98), rgba(214, 241, 226, 0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.youbox-email-auto-toggle.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.youbox-email-auto-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.youbox-email-auto-copy strong {
    font-size: 13px;
    line-height: 1.2;
    color: #1f3148;
}

.youbox-email-auto-copy span {
    font-size: 12px;
    line-height: 1.35;
    color: #63738a;
}

.youbox-email-auto-toggle.is-active .youbox-email-auto-copy strong {
    color: #235340;
}

.youbox-email-auto-toggle.is-active .youbox-email-auto-copy span {
    color: #46705d;
}

.youbox-email-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 6px;
    align-items: center;
}

.youbox-email-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: #63738a;
}

.youbox-email-auto-toggle-compact {
    min-height: 30px;
    height: 30px;
    width: max-content;
    padding: 2px 6px;
    gap: 4px;
    border-radius: 9px;
    justify-content: flex-start;
}

.youbox-email-auto-mini-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #5f718a;
}

.youbox-email-auto-switch {
    transform: scale(.68);
    transform-origin: right center;
}

.youbox-email-auto-toggle-compact .slider {
    width: 42px;
    height: 24px;
}

.youbox-email-auto-toggle-compact .slider::before {
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
}

.youbox-email-auto-toggle-compact input:checked + .slider::before {
    transform: translateX(18px);
}

.youbox-email-inline-toggle.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.youbox-email-inline-toggle.is-disabled .switch,
.youbox-email-auto-toggle.is-disabled .switch {
    pointer-events: none;
}

.youbox-date-cell {
    --date-chip-width: 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.youbox-date-cell .date-trigger {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: left;
    box-sizing: border-box;
    min-height: 40px;
    height: 40px;
    border-radius: 12px;
    padding: 8px 34px 8px 12px;
    line-height: 1.2;
}

.youbox-date-cell .date-clear-btn {
    right: 8px;
}

.youbox-detail-head h2 {
    font-size: 17px;
    line-height: 1.15;
}

.youbox-kpi-card {
    flex: 0 1 150px;
}

.youbox-detail-top-actions .primary-btn,
.youbox-detail-top-actions .secondary-btn,
.youbox-detail-actions .secondary-btn {
    min-height: 36px;
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
}

.youbox-board-summary {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.youbox-board-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.youbox-board-group {
    width: max-content;
    min-width: 100%;
}

.youbox-board-table th,
.youbox-board-table td {
    white-space: nowrap;
}

.youbox-board-table td {
    cursor: pointer;
}

.youbox-board-row.row-selected td {
    background: rgba(95, 136, 222, 0.12) !important;
}

.youbox-board-row.row-selected td[data-col="video"] {
    background: #dbe7fb !important;
}

.youbox-board-main-cell {
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.youbox-board-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.youbox-board-title {
    min-width: 0;
}

.youbox-board-crm-state {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    opacity: 0.68;
    overflow: hidden;
    white-space: nowrap;
}

.youbox-board-crm-state .youbox-mini-pill {
    padding: 1px 5px;
    font-size: 8px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1;
    min-height: 12px;
    border-width: 1px;
}

.youbox-board-crm-state .youbox-mini-pill.is-warning {
    background: rgba(255, 209, 102, 0.08);
    border-color: rgba(224, 171, 27, 0.16);
    color: rgba(138, 90, 0, 0.78);
}

:root[data-theme="dark"] .youbox-board-crm-state .youbox-mini-pill {
    background: rgba(115, 189, 255, 0.08);
    color: rgba(211, 232, 255, 0.72);
}

:root[data-theme="dark"] .youbox-board-crm-state .youbox-mini-pill.is-warning {
    background: rgba(204, 148, 26, 0.10);
    border-color: rgba(236, 186, 56, 0.16);
    color: rgba(242, 212, 131, 0.78);
}

.youbox-mini-pill.is-warning {
    background: rgba(255, 209, 102, 0.16);
    border: 1px solid rgba(224, 171, 27, 0.28);
    color: #8a5a00;
}

:root[data-theme="dark"] .youbox-mini-pill.is-warning {
    background: rgba(204, 148, 26, 0.18);
    border-color: rgba(236, 186, 56, 0.26);
    color: #f2d483;
}

.youbox-board-title.is-generated {
    opacity: 0.78;
    font-style: italic;
}

.youbox-name-autofill-hint {
    opacity: 0.75;
}

.youbox-crm-picker {
    position: fixed;
    z-index: 10050;
}

.youbox-thread-btn {
    margin-left: 0;
    align-self: center;
    justify-self: end;
    flex: 0 0 22px;
}

.youbox-email-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.youbox-email-value {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.youbox-email-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(136, 152, 177, 0.22);
    background: rgba(245, 248, 252, 0.92);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.youbox-email-inline-toggle.is-active {
    border-color: rgba(74, 154, 110, 0.34);
    background: linear-gradient(180deg, rgba(226, 247, 236, 0.98), rgba(214, 241, 226, 0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.youbox-email-inline-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #6a7890;
}

.youbox-email-inline-toggle.is-active .youbox-email-inline-label {
    color: #235340;
}

:root[data-theme="dark"] .youbox-email-inline-toggle {
    border-color: rgba(137, 161, 190, 0.22);
    background: rgba(35, 47, 68, 0.88);
}

:root[data-theme="dark"] .youbox-email-inline-toggle.is-active {
    border-color: rgba(68, 145, 102, 0.4);
    background: linear-gradient(180deg, rgba(28, 70, 53, 0.92), rgba(24, 59, 45, 0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

:root[data-theme="dark"] .youbox-email-inline-label {
    color: #93a5c0;
}

:root[data-theme="dark"] .youbox-email-inline-toggle.is-active .youbox-email-inline-label {
    color: #d7f4df;
}

.youbox-inline-editor-row td {
    padding: 0 !important;
    cursor: pointer;
    pointer-events: auto;
}

.youbox-inline-editor {
    padding: 12px 14px 14px;
    background: rgba(79, 137, 216, 0.06);
    border-top: 1px solid rgba(131, 149, 181, 0.18);
}

.youbox-inline-grid {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 10px;
}

.youbox-inline-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.youbox-inline-field span {
    font-size: 11px;
    font-weight: 700;
    color: #617999;
}

.youbox-inline-field input,
.youbox-inline-field select,
.youbox-inline-field textarea {
    width: 100%;
    min-width: 0;
    background: #fff;
    border: 1px solid #d7e1ef;
    color: #1d2a3d;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    box-sizing: border-box;
}

.youbox-inline-field textarea {
    min-height: 82px;
    resize: vertical;
}

.youbox-inline-field .youbox-date-cell .date-trigger {
    min-height: 36px;
}

.youbox-inline-field.span-1 { grid-column: span 1; }
.youbox-inline-field.span-2 { grid-column: span 2; }
.youbox-inline-field.span-3 { grid-column: span 3; }
.youbox-inline-field.span-11 { grid-column: 1 / -1; }

.youbox-inline-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

:root[data-theme="dark"] .youbox-inline-editor {
    background: rgba(79, 137, 216, 0.08);
    border-top-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .youbox-inline-field span {
    color: #9fb0c9;
}

:root[data-theme="dark"] .youbox-inline-field input,
:root[data-theme="dark"] .youbox-inline-field select,
:root[data-theme="dark"] .youbox-inline-field textarea {
    background: #232834;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e7edf9;
}

.youbox-drawer {
    width: min(980px, calc(100vw - 24px));
    max-width: min(980px, calc(100vw - 24px));
}

.youbox-drawer-body {
    padding: 0;
    overflow: auto;
    background: transparent;
}

:root[data-theme="light"] .youbox-board-row.row-selected td {
    background: rgba(95, 136, 222, 0.1) !important;
}

:root[data-theme="light"] .youbox-board-row.row-selected td[data-col="video"] {
    background: #dbe7fb !important;
}

#internalTaskBoard .board-table tr.is-due-overdue td,
#youboxBoard .youbox-board-table tr.is-due-overdue td {
    background: linear-gradient(var(--due-color-overdue), var(--due-color-overdue)), #2F3450;
}

#internalTaskBoard .board-table tr.is-due-today td,
#youboxBoard .youbox-board-table tr.is-due-today td {
    background: linear-gradient(var(--due-color-today), var(--due-color-today)), #2F3450;
}

#internalTaskBoard .board-table tr.is-due-tomorrow td,
#youboxBoard .youbox-board-table tr.is-due-tomorrow td {
    background: linear-gradient(var(--due-color-tomorrow), var(--due-color-tomorrow)), #2F3450;
}

#internalTaskBoard .board-table tr.is-due-week td,
#youboxBoard .youbox-board-table tr.is-due-week td {
    background: linear-gradient(var(--due-color-week), var(--due-color-week)), #2F3450;
}

#internalTaskBoard .board-table tr.is-due-next-week td,
#youboxBoard .youbox-board-table tr.is-due-next-week td {
    background: linear-gradient(var(--due-color-next-week), var(--due-color-next-week)), #2F3450;
}

:root[data-theme="light"] #internalTaskBoard .board-table tr.is-due-overdue td,
:root[data-theme="light"] #youboxBoard .youbox-board-table tr.is-due-overdue td {
    background: linear-gradient(var(--due-color-overdue), var(--due-color-overdue)), #f9fbff;
}

:root[data-theme="light"] #internalTaskBoard .board-table tr.is-due-today td,
:root[data-theme="light"] #youboxBoard .youbox-board-table tr.is-due-today td {
    background: linear-gradient(var(--due-color-today), var(--due-color-today)), #f9fbff;
}

:root[data-theme="light"] #internalTaskBoard .board-table tr.is-due-tomorrow td,
:root[data-theme="light"] #youboxBoard .youbox-board-table tr.is-due-tomorrow td {
    background: linear-gradient(var(--due-color-tomorrow), var(--due-color-tomorrow)), #f9fbff;
}

:root[data-theme="light"] #internalTaskBoard .board-table tr.is-due-week td,
:root[data-theme="light"] #youboxBoard .youbox-board-table tr.is-due-week td {
    background: linear-gradient(var(--due-color-week), var(--due-color-week)), #f9fbff;
}

:root[data-theme="light"] #internalTaskBoard .board-table tr.is-due-next-week td,
:root[data-theme="light"] #youboxBoard .youbox-board-table tr.is-due-next-week td {
    background: linear-gradient(var(--due-color-next-week), var(--due-color-next-week)), #f9fbff;
}

@media (max-width: 1360px) {
    .youbox-field,
    .youbox-field.span-3,
    .youbox-field.span-4,
    .youbox-field.span-5,
    .youbox-field.span-6,
    .youbox-field.span-7,
    .youbox-field.span-8 {
        grid-column: span 6;
    }
}

@media (max-width: 980px) {
    .youbox-shell,
    .youbox-form-grid {
        grid-template-columns: 1fr;
    }

    .youbox-board-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .youbox-drawer {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }

    .youbox-inline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .youbox-inline-field,
    .youbox-inline-field.span-1,
    .youbox-inline-field.span-2,
    .youbox-inline-field.span-3,
    .youbox-inline-field.span-11 {
        grid-column: span 1;
    }

    .youbox-inline-field.span-11 {
        grid-column: 1 / -1;
    }

    .youbox-field,
    .youbox-field.span-3,
    .youbox-field.span-4,
    .youbox-field.span-5,
    .youbox-field.span-6,
    .youbox-field.span-7,
    .youbox-field.span-8 {
        grid-column: auto;
    }

    .youbox-list {
        max-height: none;
    }

    .youbox-detail-top-actions {
        width: 100%;
    }

    .youbox-detail-top-actions .primary-btn,
    .youbox-detail-top-actions .secondary-btn {
        flex: 1 1 auto;
    }
}

.team-news-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#teamNewsView .board-page {
    height: auto;
    min-height: 0;
    overflow: visible;
}

.view-section#teamNewsView,
.view-section#teamNewsView.active {
    height: auto;
    min-height: 0;
}

.view-section.active > .board-page.team-news-page {
    min-height: auto;
}

.content-area:has(#teamNewsView.active) {
    overflow-y: auto;
    overflow-x: hidden;
}

.content-area:has(#teamNewsView.active) #teamNewsView {
    height: auto;
    min-height: 0;
}

.team-news-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(160px, 0.7fr)) auto;
    gap: 10px;
    align-items: center;
    position: relative;
    z-index: 15;
    box-sizing: border-box;
}

.team-news-toolbar input,
.team-news-toolbar select {
    background: #232428;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #eaeaea;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: none;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.team-news-toolbar .secondary-btn {
    min-height: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.team-news-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.team-news-summary-card {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        rgba(14, 20, 33, 0.72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.team-news-summary-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.72;
}

.team-news-summary-value {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    font-weight: 700;
}

.team-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    align-items: start;
}

.team-news-empty {
    padding: 34px;
    border-radius: 24px;
    border: 1px dashed rgba(255,255,255,0.14);
    background: rgba(13, 18, 30, 0.52);
    text-align: center;
    color: rgba(225, 235, 250, 0.84);
}

.team-news-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 22px;
    border: none;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        rgba(11, 17, 28, 0.88);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255,255,255,0.08);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.team-news-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.34), rgba(255,255,255,0.02));
    pointer-events: none;
}

.team-news-card:hover,
.team-news-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 26px 54px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255,255,255,0.14);
}

.team-news-thumb {
    position: relative;
    height: 118px;
    padding: 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: #fff;
    background-size: cover;
    background-position: center;
}

.team-news-thumb::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 72px;
    background: linear-gradient(180deg, rgba(8, 12, 20, 0), rgba(8, 12, 20, 0.72));
    pointer-events: none;
}

.team-news-thumb > * {
    position: relative;
    z-index: 1;
}

.team-news-thumb-flap {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.team-news-thumb-flap-left {
    margin-left: -14px;
    border-radius: 0 18px 18px 0;
    border: 1px solid color-mix(in srgb, var(--team-news-badge-accent, #7f8ea8) 52%, rgba(255,255,255,0.16));
    border-left: 0;
    background: color-mix(in srgb, var(--team-news-badge-accent, #7f8ea8) 26%, rgba(5, 9, 18, 0.74));
}

.team-news-thumb-flap-right {
    margin-right: -14px;
    justify-content: flex-end;
    border-radius: 18px 0 0 18px;
    border: 1px solid rgba(255,255,255,0.12);
    border-right: 0;
    background: rgba(5, 9, 18, 0.40);
}

.team-news-thumb-flap-right.is-empty {
    min-width: 26px;
    min-height: 24px;
    background: transparent;
    border-color: transparent;
    opacity: 0;
    transition: opacity 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.team-news-thumb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px 6px 9px;
    border-radius: 0;
    background: transparent;
    border: 0;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    max-width: min(100%, 210px);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
}

.team-news-thumb-badge span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-news-thumb-badge.team-news-inline-trigger,
.team-news-thumb-date.team-news-inline-trigger {
    border: 0;
    color: inherit;
    font: inherit;
}

.team-news-thumb-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 32px;
    padding: 6px 9px 6px 11px;
    border-radius: 0;
    background: transparent;
    border: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    justify-self: flex-end;
    box-shadow: none;
}

.team-news-thumb-date.is-empty {
    min-width: 0;
    min-height: 24px;
    padding: 4px 8px 4px 10px;
    border-radius: 0;
    background: transparent;
    color: rgba(29, 49, 79, 0.88);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, filter 0.16s ease;
}

.team-news-thumb-flap-right.is-empty:hover,
.team-news-thumb-flap-right.is-empty:focus-within {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255,255,255,0.22);
    opacity: 1;
}

.team-news-thumb-flap-right.is-empty:hover .team-news-thumb-date.is-empty,
.team-news-thumb-flap-right.is-empty:focus-within .team-news-thumb-date.is-empty {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.team-news-thumb-date.is-range {
    min-width: 74px;
    padding: 7px 9px 7px 11px;
}

.team-news-thumb-date-range {
    display: grid;
    gap: 2px;
    justify-items: center;
}

.team-news-thumb-date-main {
    display: block;
    white-space: nowrap;
}

.team-news-thumb-date-empty {
    display: block;
    white-space: nowrap;
    opacity: 0.92;
}

.team-news-thumb-date-separator {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(230, 237, 248, 0.74);
}

.team-news-card-body {
    padding: 14px;
    display: grid;
    gap: 10px;
    min-height: 210px;
    grid-template-rows: auto 1fr auto auto;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04)),
        rgba(14, 20, 33, 0.04);
}

.team-news-card-title {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: #eef4ff;
    min-height: calc(1.2em * 1.75);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.team-news-card-title-inline-input {
    width: 100%;
    font: 600 15px/1.25 'Figtree', sans-serif;
    color: inherit;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 7px 10px;
    letter-spacing: -0.01em;
}

.team-news-card-title-inline-input:focus {
    outline: none;
    border-color: rgba(124, 176, 255, 0.42);
    box-shadow: 0 0 0 3px rgba(124, 176, 255, 0.12);
}

.team-news-card-title-inline-input.is-hero {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    background:
        linear-gradient(180deg,
            rgba(15, 24, 39, 0.46),
            rgba(15, 24, 39, 0.26));
    box-shadow:
        0 10px 22px rgba(7, 12, 22, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #f7fbff;
    font-size: clamp(22px, 2.5vw, 30px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-shadow: 0 6px 24px rgba(0,0,0,0.28);
}

.team-news-card-title-inline-input.is-hero:focus {
    outline: none;
    border-color: rgba(173, 214, 255, 0.42);
    background:
        linear-gradient(180deg,
            rgba(15, 24, 39, 0.54),
            rgba(15, 24, 39, 0.34));
    box-shadow:
        0 12px 26px rgba(7, 12, 22, 0.16),
        0 0 0 3px rgba(140, 193, 255, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.team-news-card-summary {
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    width: 100%;
    align-self: start;
    color: rgba(223, 232, 247, 0.82);
    min-height: calc(1.42em * 3.5);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-pack: start;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    font-size: 13px;
    white-space: pre-line;
}

.team-news-card-summary.is-empty {
    color: rgba(223, 232, 247, 0.52);
}

.team-news-meta-row,
.team-news-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.team-news-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.team-news-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 11px;
    color: rgba(230, 238, 250, 0.86);
}

.team-news-members {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    color: rgba(230, 238, 250, 0.9);
}

.team-news-actions-row .secondary-btn {
    min-width: 114px;
    border-radius: 999px;
}

.team-news-dialog-overlay {
    z-index: 2100;
}

.team-news-dialog {
    width: min(var(--app-dialog-panel-width), calc(100vw - 24px));
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    min-height: 0;
}

.team-news-dialog-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 18px 18px;
}

.team-news-dialog > .project-create-head {
    display: none;
}

.team-news-dialog-layout {
    display: grid;
    gap: 18px;
}

.team-news-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.team-news-field,
.team-news-field-span {
    display: grid;
    gap: 8px;
}

.team-news-field-span {
    grid-column: 1 / -1;
}

.team-news-field label,
.team-news-field-span label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.74;
}

.team-news-field input,
.team-news-field select,
.team-news-field textarea,
.team-news-field-span input,
.team-news-field-span select,
.team-news-field-span textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(9, 14, 24, 0.84);
    color: inherit;
    padding: 11px 12px;
}

.team-news-field input[type="file"] {
    width: auto;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.team-news-upload-dropzone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,0.18);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)),
        rgba(9, 14, 24, 0.72);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.team-news-upload-dropzone.is-drag-active {
    border-color: rgba(135, 206, 255, 0.78);
    background:
        linear-gradient(180deg, rgba(84, 161, 255, 0.18), rgba(255,255,255,0.05)),
        rgba(9, 14, 24, 0.82);
    box-shadow: 0 16px 36px rgba(25, 82, 143, 0.28);
    transform: translateY(-1px);
}

.team-news-upload-copy {
    display: grid;
    gap: 4px;
}

.team-news-upload-copy strong {
    font-size: 15px;
    font-weight: 700;
}

.team-news-upload-copy span {
    font-size: 13px;
    color: rgba(223, 232, 247, 0.74);
}

.team-news-upload-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.team-news-field textarea,
.team-news-field-span textarea {
    min-height: 112px;
    resize: vertical;
}

.team-news-member-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.team-news-member-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.team-news-member-option input {
    width: auto;
}

.team-news-dialog-actions {
    align-items: center;
}

.team-news-detail-layout {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    flex: 1 1 auto;
    gap: 18px;
    min-height: 100%;
}

.entity-thread-drawer.is-team-news-thread .entity-thread-messages {
    padding: 0 18px 18px;
    background: #202733;
    height: 100%;
    min-height: 0;
}

.entity-thread-drawer.is-team-news-thread {
    background:
        radial-gradient(circle at top right, rgba(119, 166, 255, 0.10), transparent 24%),
        linear-gradient(180deg, #263142 0%, #2b3547 100%);
}

.entity-thread-drawer.is-team-news-thread .entity-thread-header {
    display: block;
    position: relative;
    background: transparent;
    border-bottom: 0;
    padding: 0;
    overflow: hidden;
}

.entity-thread-drawer.is-team-news-thread .entity-thread-header-texts {
    display: none;
}

.entity-thread-drawer.is-team-news-thread .entity-thread-header-custom {
    display: block;
    min-width: 0;
}

.entity-thread-drawer.is-team-news-thread .entity-thread-header-actions {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    align-items: flex-start;
}

.entity-thread-drawer.is-team-news-thread .entity-thread-jump-btn {
    display: none;
}


.entity-thread-drawer.is-team-news-thread .entity-thread-meta-bar {
    background: transparent;
    border-bottom: 0;
    padding: 10px 20px 0;
    min-height: 0;
}

.entity-thread-drawer.is-team-news-thread .entity-thread-meta-inner {
    padding: 0;
    gap: 10px;
}

.entity-thread-drawer.is-team-news-thread .entity-thread-meta-summary {
    color: rgba(194, 209, 233, 0.72);
    font-size: 12px;
}

.entity-thread-drawer.is-team-news-thread .entity-thread-meta-toggle {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: rgba(230, 238, 250, 0.82);
}

.entity-thread-drawer.is-team-news-thread .entity-thread-meta-toggle:hover {
    background: rgba(255,255,255,0.07);
}

.team-news-detail-layout-drawer {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    gap: 14px;
    padding-top: 14px;
}

.team-news-entity-thread-surface-drawer {
    border-radius: 0;
    overflow: visible;
}

.team-news-entity-thread-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 0 0 auto;
    height: auto;
    overflow: clip;
    border-radius: 24px;
}

.team-news-entity-thread-meta {
    border-radius: 20px 20px 0 0;
    margin: 0;
}

.team-news-entity-thread-messages {
    min-height: 0;
    flex: 0 0 auto;
    height: auto;
    border-radius: 0 0 24px 24px;
}

.team-news-detail-hero {
    position: relative;
    min-height: 280px;
    border: none;
    border-radius: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    color: #fff;
    overflow: hidden;
    background-color: rgba(24, 31, 43, 0.92);
    background-size: cover;
    background-position: center;
}

.team-news-detail-hero.has-image {
    min-height: 210px;
}

.team-news-detail-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 12, 22, 0.10), rgba(7, 12, 22, 0.36) 42%, rgba(7, 12, 22, 0.84));
    pointer-events: none;
}

.team-news-detail-hero-top,
.team-news-detail-hero-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.team-news-detail-hero-top {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 18px;
    align-items: flex-start;
}

.team-news-detail-hero-bottom {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    align-items: flex-end;
    width: auto;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    color: #f7fbff;
}

.team-news-detail-hero-copy {
    display: grid;
    flex: 0 1 min(68%, 760px);
    max-width: calc(100% - 230px);
    min-width: 0;
    gap: 8px;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.team-news-detail-hero-copy strong {
    font-size: clamp(22px, 2.5vw, 30px);
    line-height: 1.04;
    max-width: min(780px, 100%);
    text-shadow: 0 6px 24px rgba(0,0,0,0.28);
}

.team-news-detail-hero-copy span {
    font-size: 13px;
    color: rgba(239, 245, 255, 0.84);
    max-width: min(520px, 100%);
    text-shadow: 0 3px 16px rgba(0,0,0,0.24);
}

.team-news-detail-image-trigger {
    align-self: flex-end;
    border: 1px solid rgba(255,255,255,0.16);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(10, 16, 27, 0.34);
    backdrop-filter: blur(10px);
    color: rgba(239, 245, 255, 0.92);
    font: 600 11px/1.15 'Figtree', sans-serif;
    text-align: right;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.team-news-detail-image-trigger:hover {
    background: rgba(10, 16, 27, 0.48);
    border-color: rgba(255,255,255,0.24);
}

.team-news-detail-image-actions {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    margin-left: auto;
    max-width: min(46%, 520px);
    justify-content: flex-end;
    align-items: flex-end;
    gap: 8px;
}

.team-news-detail-image-actions-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.team-news-detail-image-actions-row.is-danger-row {
    justify-content: flex-end;
}

.team-news-detail-image-actions-row.is-media-row {
    justify-content: flex-end;
}

.team-news-detail-image-actions.is-drag-active {
    padding: 8px;
    border-radius: 18px;
    background: rgba(11, 19, 34, 0.36);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset;
}

.team-news-detail-image-trigger.is-danger {
    color: #ffe1e1;
    border-color: rgba(255, 164, 164, 0.28);
    background: rgba(63, 12, 18, 0.30);
}

.team-news-detail-image-trigger.is-danger:hover {
    background: rgba(78, 14, 22, 0.44);
    border-color: rgba(255, 178, 178, 0.38);
}

.team-news-detail-hero-meta {
    display: grid;
    gap: 10px;
}

.team-news-detail-hero-top .team-news-thumb-flap-left {
    margin-left: 0;
    border-top-left-radius: 14px;
}

.team-news-detail-hero-top .team-news-thumb-flap-right {
    margin-right: 0;
    border-top-right-radius: 14px;
}

.entity-thread-drawer.is-team-news-thread .team-news-detail-hero-top .team-news-thumb-flap-right {
    margin-top: 58px;
}

.team-news-detail-hero-top .team-news-thumb-badge {
    padding-left: 18px;
}

.team-news-detail-hero-top .team-news-thumb-date {
    padding-right: 18px;
}

.team-news-detail-hero-top .team-news-thumb-flap-right.is-empty {
    min-width: 14px;
    opacity: 0.08;
    background: rgba(9, 16, 27, 0.04);
    border-color: rgba(255,255,255,0.025);
}

.team-news-detail-hero-top .team-news-thumb-flap-right.is-empty .team-news-thumb-date.is-empty {
    transform: translateX(14px);
    opacity: 0.045;
}

.team-news-detail-hero-top .team-news-thumb-flap-right.is-empty:hover .team-news-thumb-date.is-empty,
.team-news-detail-hero-top .team-news-thumb-flap-right.is-empty:focus-within .team-news-thumb-date.is-empty {
    transform: translateX(0);
    opacity: 1;
}

.team-news-detail-members {
    gap: 8px;
    padding-top: 2px;
}

.entity-thread-drawer.is-team-news-thread .entity-doc-canvas {
    background: transparent;
}

.entity-thread-drawer.is-team-news-thread .entity-doc-page {
    padding-top: 0;
}

.entity-thread-drawer.is-team-news-thread .entity-doc-keep-top {
    margin-top: 4px;
}

.entity-thread-drawer.is-team-news-thread .entity-doc-quickbar {
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(239, 244, 251, 0.98));
    box-shadow: 0 16px 34px rgba(11, 18, 30, 0.16);
}

.entity-thread-drawer.is-team-news-thread .entity-doc-section-label {
    color: rgba(173, 189, 219, 0.78);
}

.entity-thread-drawer.is-team-news-thread .entity-doc-note-card,
.entity-thread-drawer.is-team-news-thread .entity-doc-composer-card {
    border-radius: 24px;
    border-color: rgba(179, 193, 216, 0.18);
    background: linear-gradient(180deg, rgba(246, 249, 253, 0.98), rgba(236, 242, 249, 0.98));
    box-shadow: 0 16px 30px rgba(7, 12, 22, 0.12);
}

.entity-thread-drawer.is-team-news-thread .entity-doc-note-card .entity-doc-note-footer,
.entity-thread-drawer.is-team-news-thread .entity-doc-composer-card .entity-doc-note-footer {
    position: sticky;
    bottom: -2px;
    z-index: 2;
    padding: 8px 0 14px 0;
    border-top: 1px solid rgba(131,149,181,0.12);
    background: #ffffff;
    opacity: 1;
    pointer-events: auto;
    max-height: none;
    overflow: visible;
    isolation: isolate;
}

.entity-thread-drawer.is-team-news-thread .entity-doc-note-card .entity-doc-block-kind,
.entity-thread-drawer.is-team-news-thread .entity-doc-note-card textarea,
.entity-thread-drawer.is-team-news-thread .entity-doc-note-card .entity-doc-input-title,
.entity-thread-drawer.is-team-news-thread .entity-doc-note-card .entity-doc-input-url,
.entity-thread-drawer.is-team-news-thread .entity-doc-composer-card textarea,
.entity-thread-drawer.is-team-news-thread .entity-doc-composer-card .entity-doc-input-title,
.entity-thread-drawer.is-team-news-thread .entity-doc-composer-card .entity-doc-input-url {
    color: #334765;
}

.entity-thread-drawer.is-team-news-thread .entity-doc-assignee-inline,
.entity-thread-drawer.is-team-news-thread .entity-doc-head-action-btn,
.entity-thread-drawer.is-team-news-thread .entity-doc-like-btn {
    background: rgba(255,255,255,0.74);
    border-color: rgba(175, 191, 216, 0.20);
    box-shadow: none;
    color: #6881a3;
}

.entity-thread-drawer.is-team-news-thread .entity-doc-head-action-btn:hover,
.entity-thread-drawer.is-team-news-thread .entity-doc-like-btn:hover,
.entity-thread-drawer.is-team-news-thread .entity-doc-assignee-inline:hover {
    background: rgba(255,255,255,0.88);
    border-color: rgba(150, 174, 214, 0.28);
    color: #486688;
}

.entity-thread-drawer.is-team-news-thread .entity-doc-note-action-btn,
.entity-thread-drawer.is-team-news-thread .entity-doc-note-pin-btn {
    color: #7085a3;
}

.team-news-entity-thread-surface-drawer > .entity-doc-canvas,
.team-news-entity-thread-messages > .entity-doc-canvas {
    min-height: 0;
}

.team-news-entity-thread-surface-drawer .entity-doc-page,
.team-news-entity-thread-messages .entity-doc-page,
.team-news-embedded-thread .entity-doc-page {
    min-height: 0;
    padding: 8px 0 20px;
    background: transparent;
}

.team-news-embedded-note-list {
    display: grid;
    gap: 12px;
}

.team-news-embedded-keep-top {
    margin-top: 14px;
}

.team-news-embedded-composer {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.team-news-embedded-composer-input {
    width: 100%;
    min-height: 110px;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: inherit;
    padding: 14px 16px;
    resize: vertical;
    font: 400 14px/1.5 'Figtree', sans-serif;
}

.team-news-embedded-composer-input:focus {
    outline: none;
    border-color: rgba(100, 180, 255, 0.42);
    box-shadow: 0 0 0 3px rgba(100, 180, 255, 0.10);
}

.team-news-embedded-composer-hint {
    font-size: 12px;
    color: rgba(180, 194, 221, 0.74);
}

.team-news-embedded-composer-footer {
    margin-top: 2px;
}

.team-news-embedded-composer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.team-news-embedded-note-card {
    cursor: default;
}

.team-news-embedded-note-card .entity-doc-block-head {
    display: none;
}

.team-news-embedded-note-card .entity-doc-note-body-input {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.team-news-embedded-note-card .entity-doc-note-footer {
    position: static;
    bottom: auto;
    padding: 8px 0 0;
    border-top: 1px solid rgba(131,149,181,0.12);
    background: transparent;
}

.team-news-embedded-note-title {
    color: inherit;
    font-weight: 700;
}

.team-news-embedded-note-body {
    color: rgba(228, 236, 249, 0.9);
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

.team-news-embedded-saving-label {
    font-size: 12px;
    color: rgba(180, 194, 221, 0.74);
}

.team-news-debug-panel {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(10, 16, 27, 0.52);
}

.team-news-debug-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(235, 242, 255, 0.88);
    font-size: 12px;
}

.team-news-debug-clear {
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(173, 193, 228, 0.92);
    font: 600 12px/1 'Figtree', sans-serif;
    cursor: pointer;
}

.team-news-debug-list {
    display: grid;
    gap: 6px;
    max-height: 144px;
    overflow: auto;
    font: 500 11px/1.4 'IBM Plex Mono', 'Consolas', monospace;
}

.team-news-debug-row {
    color: rgba(220, 232, 251, 0.84);
    word-break: break-word;
}

.team-news-debug-row.is-empty {
    color: rgba(220, 232, 251, 0.52);
}

.team-news-embedded-note-body[contenteditable="false"] {
    cursor: text;
}

.team-news-embedded-link {
    display: inline-flex;
    max-width: 100%;
    color: #9fc4ff;
    text-decoration: none;
    word-break: break-all;
}

.team-news-embedded-link:hover {
    text-decoration: underline;
}

.team-news-detail-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(180, 194, 221, 0.78);
}

.team-news-detail-summary {
    font-size: 20px;
    line-height: 1.4;
    color: #eef4ff;
}

.team-news-detail-copy {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(228, 236, 249, 0.88);
}

.team-news-detail-copy.is-note {
    white-space: pre-wrap;
}

.team-news-detail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: #eaf2ff;
    text-decoration: none;
    font-weight: 600;
}

.team-news-detail-link:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(140, 176, 236, 0.24);
}

.team-news-inline-trigger {
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}

.team-news-inline-trigger:hover,
.team-news-inline-trigger:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.team-news-inline-popover {
    display: none;
}

.team-news-inline-popover.active {
    display: block;
}

.team-news-inline-popover.team-picker {
    width: min(280px, calc(100vw - 20px));
    min-width: 240px;
}

.team-news-inline-popover.team-news-inline-members-menu {
    width: min(320px, calc(100vw - 20px));
}

.team-news-inline-popover.team-news-inline-date-menu {
    width: min(332px, calc(100vw - 20px));
    border-radius: 12px;
}

.team-news-inline-section-label {
    margin: 2px 4px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(177, 192, 221, 0.88);
}

.team-news-inline-option-list,
.team-news-inline-owner-grid {
    display: grid;
    gap: 6px;
}

.team-news-inline-option,
.team-news-inline-owner-option {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(92, 126, 191, 0.22);
    background: rgba(255, 255, 255, 0.04);
    color: #eef4ff;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.team-news-inline-option:hover,
.team-news-inline-owner-option:hover {
    background: rgba(96, 136, 212, 0.14);
    border-color: rgba(116, 159, 238, 0.34);
    transform: translateY(-1px);
}

.team-news-inline-option.selected,
.team-news-inline-owner-option.selected {
    border-color: rgba(138, 177, 247, 0.48);
    box-shadow: 0 0 0 1px rgba(138, 177, 247, 0.14) inset;
}

.team-news-inline-date-head {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.team-news-inline-date-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.team-news-inline-date-tab {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(111, 139, 196, 0.24);
    background: rgba(255, 255, 255, 0.04);
    color: #e9effb;
    border-radius: 10px;
    padding: 9px 10px;
    text-align: left;
}

.team-news-inline-date-tab span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(174, 190, 220, 0.8);
}

.team-news-inline-date-tab strong {
    font-size: 13px;
    line-height: 1.3;
}

.team-news-inline-date-tab.is-active {
    background: rgba(84, 128, 216, 0.18);
    border-color: rgba(132, 170, 242, 0.42);
}

.team-news-inline-date-tab:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

.team-news-inline-date-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.team-news-inline-mini-btn {
    border: 1px solid rgba(130, 151, 193, 0.24);
    background: rgba(255, 255, 255, 0.04);
    color: #e7eefc;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    line-height: 1.2;
}

.team-news-inline-mini-btn.danger {
    color: #ffb3b3;
    border-color: rgba(220, 104, 112, 0.3);
}

.team-news-inline-actions {
    gap: 8px;
}

:root[data-theme="light"] .team-news-inline-section-label {
    color: #6b7f9f;
}

:root[data-theme="light"] .team-news-inline-option,
:root[data-theme="light"] .team-news-inline-owner-option,
:root[data-theme="light"] .team-news-inline-date-tab,
:root[data-theme="light"] .team-news-inline-mini-btn {
    background: #ffffff;
    color: #29405f;
    border-color: rgba(116, 142, 186, 0.22);
}

:root[data-theme="light"] .team-news-inline-option:hover,
:root[data-theme="light"] .team-news-inline-owner-option:hover,
:root[data-theme="light"] .team-news-inline-date-tab.is-active {
    background: rgba(72, 118, 198, 0.1);
    border-color: rgba(72, 118, 198, 0.28);
}

:root[data-theme="light"] .team-news-inline-date-tab span {
    color: #7286a8;
}

:root[data-theme="light"] .team-news-inline-mini-btn.danger {
    color: #b34b4b;
    border-color: rgba(200, 89, 89, 0.24);
}

.team-news-section-editor-dialog {
    width: min(680px, 100%);
}

.team-news-section-editor-form {
    display: grid;
    gap: 14px;
}

.team-news-section-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-news-subtle-action {
    border: 0;
    background: transparent;
    color: #9fb7df;
    font: 600 13px/1.2 'Figtree', sans-serif;
    padding: 4px 2px;
    cursor: pointer;
}

.team-news-subtle-action:hover {
    color: #ddecff;
}

.team-news-notes-card {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    padding: 14px 16px;
    color: rgba(226, 234, 247, 0.86);
    line-height: 1.55;
    white-space: pre-wrap;
}

:root[data-theme="light"] .team-news-summary-card,
:root[data-theme="light"] .team-news-card,
:root[data-theme="light"] .team-news-empty,
:root[data-theme="light"] .team-news-embedded-thread .entity-doc-page,
:root[data-theme="light"] .team-news-notes-card,
:root[data-theme="light"] .team-news-member-option {
    border-color: rgba(22, 37, 60, 0.10);
    background: rgba(255,255,255,0.82);
    box-shadow: 0 18px 36px rgba(35, 55, 88, 0.08);
}

:root[data-theme="light"] .team-news-upload-dropzone {
    border-color: rgba(22, 37, 60, 0.14);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245, 248, 253, 0.92)),
        rgba(255,255,255,0.82);
}

:root[data-theme="light"] .team-news-upload-dropzone.is-drag-active {
    border-color: rgba(33, 113, 185, 0.65);
    background:
        linear-gradient(180deg, rgba(224, 239, 255, 0.98), rgba(245, 249, 255, 0.96)),
        rgba(255,255,255,0.92);
    box-shadow: 0 16px 32px rgba(45, 96, 160, 0.14);
}

:root[data-theme="light"] .team-news-subtle-action {
    color: #5876a3;
}

:root[data-theme="light"] .team-news-subtle-action:hover {
    color: #2d4f82;
}

:root[data-theme="light"] .team-news-detail-kicker {
    color: #6d84a5;
}

:root[data-theme="light"] .team-news-detail-summary {
    color: #1d3048;
}

:root[data-theme="light"] .team-news-detail-copy {
    color: #45607f;
}

:root[data-theme="light"] .team-news-detail-link {
    background: rgba(255,255,255,0.92);
    border-color: rgba(22, 37, 60, 0.10);
    color: #29405f;
}

:root[data-theme="light"] .team-news-card-body {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247, 250, 255, 0.98)),
        rgba(255,255,255,0.92);
}

:root[data-theme="light"] .team-news-card-title {
    color: #3c475b;
}

:root[data-theme="light"] .team-news-card-summary {
    color: #6f7d92;
}

:root[data-theme="light"] .team-news-card-summary.is-empty {
    color: #c5cedc;
}

:root[data-theme="light"] .team-news-pill {
    background: rgba(237, 242, 249, 0.96);
    border-color: rgba(22, 37, 60, 0.10);
    color: #50627d;
}

:root[data-theme="light"] .team-news-thumb-badge {
    color: #18304d;
}

:root[data-theme="light"] .team-news-thumb-flap-left {
    background: color-mix(in srgb, var(--team-news-badge-accent, #7f8ea8) 16%, rgba(255,255,255,0.96));
    border-color: color-mix(in srgb, var(--team-news-badge-accent, #7f8ea8) 42%, rgba(22, 37, 60, 0.12));
}

:root[data-theme="light"] .team-news-thumb-date {
    color: #223a59;
}

:root[data-theme="light"] .team-news-thumb-flap-right {
    background: rgba(255,255,255,0.86);
    border-color: rgba(22, 37, 60, 0.10);
}

:root[data-theme="light"] .team-news-thumb-flap-right.is-empty {
    background: transparent;
    border-color: transparent;
}

:root[data-theme="light"] .team-news-thumb-flap-right.is-empty:hover,
:root[data-theme="light"] .team-news-thumb-flap-right.is-empty:focus-within {
    background: rgba(255,255,255,0.94);
    border-color: rgba(22, 37, 60, 0.08);
}

:root[data-theme="light"] .team-news-thumb-date.is-empty {
    background: rgba(255,255,255,0.94);
    border-color: rgba(22, 37, 60, 0.08);
    color: #5f718f;
}

:root[data-theme="light"] .team-news-detail-hero-top .team-news-thumb-flap-right.is-empty {
    background: rgba(255,255,255,0.1);
    border-color: rgba(22, 37, 60, 0.025);
}

:root[data-theme="light"] .team-news-detail-hero-top .team-news-thumb-flap-right.is-empty .team-news-thumb-date.is-empty {
    opacity: 0.055;
}

:root[data-theme="light"] .team-news-thumb-date-separator {
    color: #7c8daa;
}

:root[data-theme="light"] .team-news-members {
    color: #50627d;
}

:root[data-theme="light"] .team-news-card-title-inline-input {
    background: rgba(248, 251, 255, 0.96);
    border-color: rgba(22, 37, 60, 0.12);
    color: #18304d;
}

:root[data-theme="light"] .team-news-card-title-inline-input.is-hero {
    background:
        linear-gradient(180deg,
            rgba(250, 253, 255, 0.92),
            rgba(241, 247, 255, 0.84));
    border-color: rgba(112, 142, 184, 0.18);
    color: #18304d;
    box-shadow:
        0 18px 34px rgba(71, 94, 131, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.6);
    text-shadow: none;
}

:root[data-theme="light"] .team-news-card-title-inline-input.is-hero:focus {
    border-color: rgba(96, 150, 223, 0.42);
    background:
        linear-gradient(180deg,
            rgba(252, 254, 255, 0.96),
            rgba(244, 249, 255, 0.9));
    box-shadow:
        0 12px 24px rgba(71, 94, 131, 0.12),
        0 0 0 3px rgba(111, 168, 244, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

:root[data-theme="light"] .team-news-embedded-note-body {
    color: #45607f;
}

:root[data-theme="light"] .team-news-embedded-link {
    color: #3767ad;
}

:root[data-theme="light"] .team-news-embedded-composer-input {
    background: rgba(255,255,255,0.94);
    border-color: rgba(22, 37, 60, 0.12);
    color: #1d3048;
}

:root[data-theme="light"] .team-news-embedded-composer {
    border-color: rgba(22, 37, 60, 0.10);
    background: rgba(255,255,255,0.82);
}

:root[data-theme="light"] .team-news-embedded-note-card .entity-doc-note-footer {
    background: transparent;
}

:root[data-theme="light"] .team-news-embedded-thread .entity-doc-page {
    background: transparent;
}

/* ── Team News thread – dark mode overrides ── */
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-note-card,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-composer-card {
    background: #292F3B;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-note-card .entity-doc-note-footer,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-composer-card .entity-doc-note-footer {
    background: #292F3B;
    border-top-color: rgba(255,255,255,0.08);
}

html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-note-card .entity-doc-block-kind,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-note-card textarea,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-note-card .entity-doc-input-title,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-note-card .entity-doc-input-url,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-composer-card textarea,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-composer-card .entity-doc-input-title,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-composer-card .entity-doc-input-url {
    color: #c7d6f0;
}

html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-assignee-inline,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-head-action-btn,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-like-btn {
    background: rgba(25,33,49,0.96);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    color: #b3c2dd;
}

html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-head-action-btn:hover,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-like-btn:hover,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-assignee-inline:hover {
    background: rgba(32,42,61,1);
    border-color: rgba(140,173,230,0.22);
    color: #d7e5fb;
}

html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-note-action-btn,
html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-note-pin-btn {
    color: #a9bada;
}

html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-quickbar {
    background: linear-gradient(180deg, rgba(41,47,59,0.98), rgba(35,41,54,0.98));
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}

html:not([data-theme="light"]) .entity-thread-drawer.is-team-news-thread .entity-doc-section-label {
    color: #9fb0d3;
    border-bottom-color: rgba(255,255,255,0.08);
}

:root[data-theme="light"] .team-news-embedded-composer-hint {
    color: #6d84a5;
}

:root[data-theme="light"] .team-news-field input,
:root[data-theme="light"] .team-news-field select,
:root[data-theme="light"] .team-news-field textarea,
:root[data-theme="light"] .team-news-field-span input,
:root[data-theme="light"] .team-news-field-span select,
:root[data-theme="light"] .team-news-field-span textarea {
    background: rgba(248, 251, 255, 0.96);
    border-color: rgba(22, 37, 60, 0.12);
    color: #18304d;
}

@media (max-width: 1024px) {
    .team-news-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-news-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .team-news-section-editor-grid {
        grid-template-columns: 1fr;
    }

    #teamNewsSummary,
    .team-news-summary {
        display: none !important;
    }

    .team-news-toolbar,
    .team-news-dialog-grid,
    .team-news-summary {
        grid-template-columns: 1fr;
    }

    .team-news-thumb {
        height: 132px;
    }
}

@media (max-width: 1024px) {
    #userQuickMenuWrap.user-quick-menu-wrap.notifications-open {
        z-index: 7002000 !important;
    }

    #notificationsCenterPanel.notifications-center-panel {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: calc(68px + env(safe-area-inset-top)) !important;
        bottom: calc(84px + env(safe-area-inset-bottom)) !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 16px !important;
        z-index: 7001000 !important;
        overflow: hidden !important;
    }

    #notificationsCenterPanel.notifications-center-panel .notifications-center-body {
        max-height: calc(100% - 76px) !important;
    }

    .user-quick-menu-wrap.notifications-open #notificationsCenterPanel {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: calc(68px + env(safe-area-inset-top)) !important;
        bottom: calc(84px + env(safe-area-inset-bottom)) !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 16px !important;
        z-index: 7001000 !important;
        overflow: hidden !important;
    }

    .user-quick-menu-wrap.notifications-open #notificationsCenterPanel .notifications-center-body {
        max-height: calc(100% - 76px) !important;
    }
}