html,
body {
    height: 100%;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #eef2f5;
    color: #25313d;
}

#root {
    min-height: 100vh;
    height: 100vh;
    min-width: 1100px;
}

.time-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #eef2f5;
}

.time-shell .crm-shell-top {
    flex: 0 0 54px;
    height: 54px;
    padding: 0 16px 0 18px;
    border-bottom: 1px solid #5f646a;
    background: #747980;
}

.time-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
}

.time-sidebar {
    min-height: 0;
    overflow: auto;
    border-right: 1px solid #d4dbe3;
    background: #f8fafc;
}

.time-nav-head {
    padding: 16px 14px 12px;
    border-bottom: 1px solid #e1e7ee;
    background: #fff;
}

.time-nav-head-kicker {
    color: #7a8794;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    text-transform: uppercase;
}

.time-nav-head-title {
    margin-top: 2px;
    color: #25313d;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
}

.time-nav-group {
    padding: 12px 10px 2px;
}

.time-nav-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 6px 7px;
    color: #6c7885;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.time-nav-title small {
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #e6ecf2;
    color: #667381;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
}

.time-nav-button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    margin-bottom: 4px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #25313d;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.time-nav-button:hover {
    border-color: #d9e2eb;
    background: #fff;
}

.time-nav-button.active {
    border-color: #b8cce0;
    background: #fff;
    color: #1f6fb2;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(23, 39, 54, 0.08);
}

.time-nav-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #e8eef4;
    color: #536273;
    font-size: 11px;
    font-weight: 800;
    line-height: 32px;
    text-align: center;
}

.time-nav-button.active .time-nav-icon {
    background: #1f6fb2;
    color: #fff;
}

.time-nav-label {
    min-width: 0;
}

.time-nav-label strong,
.time-nav-label small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time-nav-label strong {
    font-size: 13px;
    line-height: 17px;
}

.time-nav-label small {
    margin-top: 1px;
    color: #7a8794;
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
}

.time-content {
    min-height: 0;
    padding: 10px;
    overflow: hidden;
}

.time-tab-host,
.time-module {
    height: 100%;
    min-height: 0;
}

.time-module {
    display: flex;
    flex-direction: column;
    border: 1px solid #d4dbe3;
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
}

.time-module-head {
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    padding: 8px 10px;
    border-bottom: 1px solid #d4dbe3;
    background: #f8fafc;
}

.time-title {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
}

.time-subtitle {
    margin-top: 2px;
    color: #6c7885;
    font-size: 12px;
}

.time-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.time-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: #5b6773;
}

.time-field input,
.time-field select {
    height: 30px;
    min-width: 112px;
    box-sizing: border-box;
    border: 1px solid #cfd8e2;
    border-radius: 4px;
    padding: 0 8px;
    background: #fff;
    color: #25313d;
}

.time-button {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #c5d0db;
    border-radius: 4px;
    background: #fff;
    color: #25313d;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.time-button.primary {
    border-color: #1f6fb2;
    background: #1f6fb2;
    color: #fff;
}

.time-button:hover {
    filter: brightness(0.97);
}

.time-grid-host {
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
}

.time-grid-host .dhx_grid {
    border: 0;
}

.time-grid-host .dhx_header-wrapper {
    border-top: 0;
}

.time-empty {
    padding: 18px;
    color: #6c7885;
    font-size: 13px;
}

.time-settings-form {
    max-width: 520px;
    padding: 12px;
}

.time-login-shell {
    min-height: 100vh;
}

.crm-login-card {
    width: min(390px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 56px rgba(19, 31, 43, 0.32);
}

.crm-login-card-wide {
    width: min(560px, calc(100vw - 32px));
}

.time-login-shell .crm-2fa-setup {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 4px 0 18px;
}

.time-login-shell .crm-2fa-qr {
    width: 172px;
    height: 172px;
}

.time-login-shell .crm-2fa-secret {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #d8dee5;
    border-radius: 6px;
    background: #f8fafc;
    color: #25313d;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 20px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 620px) {
    .time-login-shell .crm-2fa-setup {
        grid-template-columns: 1fr;
    }

    .time-login-shell .crm-2fa-qr {
        width: 180px;
        height: 180px;
        margin: 0 auto;
    }
}

.crm-login-brand {
    margin-bottom: 6px;
    color: #1f6fb2;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.crm-login-hint {
    margin: 0 0 12px;
    color: #6c7885;
    font-size: 12px;
    line-height: 18px;
}

/* Accounting-aligned shell with the Time sidebar kept in place. */
#root {
    min-width: 900px;
}

.time-shell.accounting-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #eef2f5;
}

.time-shell .crm-shell-top {
    flex: 0 0 54px;
    height: 54px;
    padding: 0 16px 0 18px;
    border-bottom: 1px solid #5f646a;
    background: #747980;
    box-shadow: 0 1px 2px rgba(20, 31, 42, 0.12);
}

.time-shell .crm-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.time-shell .crm-brand-title {
    color: #fff;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    white-space: nowrap;
}

.time-shell .crm-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.time-root-tenant-select {
    height: 32px;
    max-width: 280px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 4px;
    padding: 0 8px;
    background: #fff;
    color: #25313d;
    font: inherit;
    font-size: 12px;
}

.time-shell .crm-top-button {
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.time-shell .crm-top-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.time-shell .accounting-tenant-label {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 13px;
    font-weight: 500;
    opacity: 0.85;
}

.time-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
}

.time-sidebar {
    min-height: 0;
    overflow: auto;
    border-right: 0;
    background: #888B90;
}

.time-nav-group {
    padding: 0;
}

.time-nav-title {
    margin-top: 8px;
    padding: 12px 14px 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.72);
    justify-content: flex-start;
}

.time-nav-button {
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
    min-height: 42px;
    padding: 7px 12px 7px 24px;
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    color: #fff;
}

.time-nav-button:hover {
    border-color: transparent;
    background: #5D5D5F;
}

.time-nav-button.active {
    border-color: transparent;
    background: #6D6D6F;
    color: #fff;
    box-shadow: none;
}

.time-nav-icon,
.time-nav-button.active .time-nav-icon {
    background: transparent;
    color: #fff;
}

.time-nav-label small {
    color: rgba(255, 255, 255, 0.68);
}

.time-nav-label strong {
    font-size: 15px;
    line-height: 20px;
}

.time-nav-label small {
    font-size: 13px;
    line-height: 17px;
}

.time-content.accounting-content {
    min-height: 0;
    padding: 14px;
    overflow: hidden;
    box-sizing: border-box;
}

.time-tab-host {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.time-module,
.time-module-panel {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.time-module {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: #eef2f5;
    box-shadow: none;
    overflow: hidden;
}

.time-module-panel.fibu-list-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d9e0e7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(23, 39, 54, 0.08);
}

.time-module-panel .fibu-panel-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    flex: 0 0 auto;
    column-gap: 18px;
    min-height: 56px;
    padding: 10px 12px;
    border-bottom: 1px solid #e0e6ec;
    background: #fff;
}

.time-module-panel .fibu-panel-title {
    color: #25313d;
    font-size: 16px;
    line-height: 21px;
    font-weight: 650;
}

.time-module-panel .fibu-panel-subtitle {
    margin-top: 2px;
    color: #6c7885;
    font-size: 12px;
}

.time-module-panel .fibu-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
    padding-right: 8px;
}

.time-module-panel .fibu-filter-bar {
    display: flex;
    align-items: end;
    flex: 0 0 auto;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #e7ecf1;
    background: #f7f9fb;
}

.time-module-panel .fibu-filter-field {
    display: grid;
    gap: 3px;
    color: #5b6773;
    font-size: 12px;
}

.time-module-panel .fibu-filter-field input,
.time-module-panel .fibu-filter-field select,
.time-module-panel .fibu-input {
    height: 30px;
    min-width: 112px;
    box-sizing: border-box;
    border: 1px solid #cfd8e2;
    border-radius: 4px;
    padding: 0 8px;
    background: #fff;
    color: #25313d;
    font: inherit;
    font-size: 12px;
}

.time-module-panel .fibu-button {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #1f6fb2;
    border-radius: 4px;
    background: #1f6fb2;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.time-module-panel .fibu-button-secondary {
    border-color: #c5d0db;
    background: #fff;
    color: #25313d;
}

.time-module-panel .fibu-button:hover {
    filter: brightness(0.97);
}

.fibu-modal {
    border-radius: 8px;
    border-color: #d2dbe4;
    box-shadow: 0 24px 70px rgba(15, 29, 43, 0.34);
}

.fibu-modal-head {
    min-height: 52px;
    box-sizing: border-box;
    background: #f8fafc;
}

.fibu-modal-body {
    background: #fff;
}

.fibu-modal-actions {
    gap: 7px;
    background: #f8fafc;
}

.fibu-icon-button {
    border-color: #cfd8e2;
    background: #fff;
    color: #263442;
}

.time-editor-modal {
    width: min(406px, calc(100vw - 32px));
}

.time-fehlzeiten-modal {
    width: min(820px, calc(100vw - 32px));
}

.time-korrekturen-modal {
    width: min(820px, calc(100vw - 32px));
}

.time-benutzer-modal {
    width: min(820px, calc(100vw - 32px));
}

.time-zeitraeume-modal {
    width: min(406px, calc(100vw - 32px));
}

.time-confabt-modal {
    width: min(430px, calc(100vw - 32px));
}

.time-devices-modal,
.time-device-pin-modal {
    width: min(430px, calc(100vw - 32px));
}

.time-device-pin-error {
    display: none;
    margin-top: 8px;
    color: #9f2d2d;
    font-size: 12px;
    line-height: 18px;
}

.time-device-pin-error-visible {
    display: block;
}

.time-benutzer-message-modal {
    width: min(440px, calc(100vw - 32px));
}

.time-admin-password-modal,
.time-self-password-modal {
    width: min(430px, calc(100vw - 32px));
}

.time-admin-confirm-modal {
    width: min(460px, calc(100vw - 32px));
}

.time-confirm-modal {
    width: min(420px, calc(100vw - 32px));
}

.time-benutzer-message,
.time-admin-message {
    color: #25313d;
    font-size: 13px;
    line-height: 20px;
    white-space: pre-wrap;
}

.time-message-error {
    color: #9f2d2d;
}

.fibu-button.time-button-loading {
    opacity: 0.75;
    cursor: wait;
}

.time-confirm-message {
    color: #25313d;
    font-size: 13px;
    line-height: 20px;
}

.time-admin-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border: 1px solid #cfd8e2;
    border-radius: 999px;
    background: #fff;
    color: #25313d;
    font-size: 12px;
    line-height: 18px;
}

.time-admin-badge-active {
    border-color: #b7d7c0;
    background: #eef8f1;
    color: #246136;
}

.time-admin-badge-open {
    border-color: #ead2a1;
    background: #fff8e8;
    color: #7a5418;
}

.time-approval-modal {
    width: min(520px, calc(100vw - 32px));
}

.time-approval-confirm-modal {
    width: min(420px, calc(100vw - 32px));
}

.time-approval-message {
    color: #25313d;
    font-size: 13px;
    line-height: 20px;
}

.time-approval-modal .time-approval-text,
.time-approval-modal .time-approval-text .dhx_form-group,
.time-approval-modal .time-approval-text .dhx_input__wrapper,
.time-approval-modal .time-approval-text .dhx_input__container {
    min-height: 120px !important;
}

.time-approval-modal .time-approval-text textarea.dhx_input,
.time-approval-modal .time-approval-text textarea.dhx_input--textarea,
.time-approval-modal .time-approval-text .dhx_input--textarea {
    height: 120px !important;
    min-height: 120px !important;
    box-sizing: border-box;
    line-height: 18px !important;
    padding-top: 6px !important;
    resize: vertical;
}

.fibu-button.fibu-button-danger {
    border-color: #a93232;
    background: #a93232;
    color: #fff;
}

.fibu-button.fibu-button-danger:hover {
    background: #8a2626;
}

.time-fehlzeiten-transfer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: 12px 0 8px;
}

.time-fehlzeiten-grid {
    height: 160px;
    min-height: 160px;
    border: 1px solid #d7dde4;
}

.time-print-modal {
    width: min(406px, calc(100vw - 32px));
}

.time-print-modal .dhx_form-group {
    margin-bottom: 8px;
}

.time-editor-modal .dhx_form-group {
    margin-bottom: 8px;
}

.time-editor-modal .dhx_form-group--inline,
.time-print-modal .dhx_form-group--inline,
.dhx_window .dhx_form-group--inline {
    align-items: center;
}

.time-editor-modal .dhx_label,
.time-print-modal .dhx_label,
.dhx_window .dhx_label {
    justify-content: flex-start;
    color: #5b6773;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}

.time-editor-modal .dhx_label__holder,
.time-print-modal .dhx_label__holder,
.dhx_window .dhx_label__holder {
    justify-content: flex-start;
    text-align: left;
}

.time-editor-modal .dhx_input__wrapper,
.time-editor-modal .dhx_input__container,
.time-editor-modal .dhx_combobox-input-box,
.time-print-modal .dhx_input__wrapper,
.time-print-modal .dhx_input__container,
.time-print-modal .dhx_combobox-input-box,
.dhx_window .dhx_input__wrapper,
.dhx_window .dhx_input__container,
.dhx_window .dhx_combobox-input-box {
    min-height: 30px;
}

.time-editor-modal .dhx_input,
.time-editor-modal .dhx_select,
.time-editor-modal .dhx_textarea,
.time-editor-modal .dhx_combobox-input,
.time-editor-modal .dhx_combobox-input-box,
.time-print-modal .dhx_input,
.time-print-modal .dhx_select,
.time-print-modal .dhx_combobox-input,
.time-print-modal .dhx_combobox-input-box,
.dhx_window .dhx_input,
.dhx_window .dhx_select,
.dhx_window .dhx_textarea,
.dhx_window .dhx_combobox-input,
.dhx_window .dhx_combobox-input-box {
    height: 30px !important;
    min-height: 30px;
    box-sizing: border-box;
    border: 1px solid #cfd8e2 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #25313d !important;
    font: inherit;
    font-size: 12px !important;
}

.time-editor-modal .dhx_input,
.time-editor-modal .dhx_select,
.time-editor-modal .dhx_textarea,
.time-editor-modal .dhx_combobox-input,
.time-print-modal .dhx_input,
.time-print-modal .dhx_select,
.time-print-modal .dhx_combobox-input,
.dhx_window .dhx_input,
.dhx_window .dhx_select,
.dhx_window .dhx_textarea,
.dhx_window .dhx_combobox-input {
    padding: 0 8px !important;
    text-align: left !important;
}

.time-editor-modal .dhx_select,
.time-print-modal .dhx_select {
    padding-right: 30px !important;
}

.time-editor-modal input.dhx_input,
.time-editor-modal textarea.dhx_textarea,
.time-print-modal input.dhx_input,
.dhx_window input.dhx_input {
    text-align: left !important;
}

.time-editor-modal input[type="date"].dhx_input,
.time-editor-modal .time-native-date-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    padding-right: 8px !important;
}

.time-editor-modal .time-date-container {
    position: relative;
}

.time-editor-modal .time-date-input-triggered {
    padding-right: 32px !important;
}

.time-editor-modal textarea.dhx_textarea,
.dhx_window textarea.dhx_textarea {
    min-height: 70px !important;
    padding-top: 6px !important;
    resize: vertical;
}

.time-korrekturen-modal .time-korrekturen-text,
.time-korrekturen-modal .time-korrekturen-text .dhx_form-group,
.time-korrekturen-modal .time-korrekturen-text .dhx_input__wrapper,
.time-korrekturen-modal .time-korrekturen-text .dhx_input__container {
    min-height: 220px !important;
}

.time-korrekturen-modal .time-korrekturen-text textarea.dhx_input,
.time-korrekturen-modal .time-korrekturen-text textarea.dhx_input--textarea,
.time-korrekturen-modal .time-korrekturen-text .dhx_input--textarea {
    height: 220px !important;
    min-height: 220px !important;
    box-sizing: border-box;
    line-height: 18px !important;
    padding-top: 6px !important;
    resize: vertical;
    white-space: pre-wrap;
}

.time-editor-modal .time-datetime-input,
.time-editor-modal input[name="zeitpunkt"].dhx_input {
    justify-content: flex-start !important;
    text-align: left !important;
    direction: ltr;
    padding-left: 8px !important;
    padding-right: 32px !important;
}

.time-editor-modal .dhx_input__container:has(select.dhx_select),
.time-print-modal .dhx_input__container:has(select.dhx_select) {
    position: relative;
}

.time-editor-modal .dhx_input__container:has(select.dhx_select)::after,
.time-print-modal .dhx_input__container:has(select.dhx_select)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 11px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #607080;
    border-bottom: 1.5px solid #607080;
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
}

.time-editor-modal select.dhx_select,
.time-print-modal select.dhx_select,
.dhx_window select.dhx_select {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-width: 112px;
    background-image: none !important;
}

.time-editor-modal .dhx_input--icon-padding,
.dhx_window .dhx_input--icon-padding {
    padding: 0 8px !important;
}

.time-editor-modal .dhx_input__icon,
.dhx_window .dhx_input__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    color: #607080;
    pointer-events: none;
}

.time-editor-modal .dhx_input__icon::before,
.dhx_window .dhx_input__icon::before {
    font-size: 16px;
    line-height: 1;
}

.time-editor-modal .time-datetime-input {
    cursor: pointer;
    text-align: left !important;
}

.time-editor-modal .time-datetime-container,
.time-editor-modal .time-time-container,
.dhx_window .time-datetime-container {
    position: relative;
}

.time-editor-modal .time-datetime-container .dhx_input__icon,
.time-editor-modal .time-time-container .dhx_input__icon,
.dhx_window .time-datetime-container .dhx_input__icon {
    display: none !important;
}

.time-datetime-trigger {
    position: absolute;
    top: 1px;
    right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-left: 1px solid #d8e0e8;
    border-radius: 0 4px 4px 0;
    background: #fff;
    color: #607080;
    cursor: pointer;
}

.time-date-trigger {
    position: absolute;
    top: 1px;
    right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-left: 1px solid #d8e0e8;
    border-radius: 0 4px 4px 0;
    background: #fff;
    color: #607080;
    cursor: pointer;
}

.time-time-trigger {
    position: absolute;
    top: 1px;
    right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-left: 1px solid #d8e0e8;
    border-radius: 0 4px 4px 0;
    background: #fff;
    color: #607080;
    cursor: pointer;
}

.time-datetime-trigger:hover,
.time-date-trigger:hover,
.time-time-trigger:hover {
    background: #f4f7fa;
    color: #263442;
}

.time-datetime-trigger::before,
.time-date-trigger::before {
    content: "\1F4C5";
    font-size: 16px;
    line-height: 1;
}

.time-time-trigger::before {
    content: "\1F551";
    font-size: 16px;
    line-height: 1;
}

.time-datetime-popup {
    position: fixed;
    z-index: 10000080;
    display: none;
    width: 198px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #cfd8e2;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 29, 43, 0.18);
}

.time-time-input {
    padding-right: 34px !important;
    text-align: left !important;
    cursor: pointer;
}

.time-time-popup {
    width: 166px;
}

.time-profiles-modal {
    width: min(560px, calc(100vw - 32px));
}

.time-profile-name-modal {
    width: min(430px, calc(100vw - 32px));
}

.time-profile-delete-modal {
    width: min(430px, calc(100vw - 32px));
}

.time-profiles-actions {
    justify-content: flex-start;
    margin-bottom: 10px;
}

#time-profiles-grid {
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
    grid-row: auto !important;
    overflow: hidden;
}

.time-confirm-text {
    color: #25313d;
    font-size: 13px;
    line-height: 1.5;
}

.time-confirm-subtext {
    margin-top: 6px;
    color: #607080;
    font-size: 12px;
    line-height: 1.45;
}

.time-datetime-popup-open {
    display: block;
}

.time-datetime-date {
    margin-bottom: 8px;
}

.time-datetime-date-input {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid #cfd8e2;
    border-radius: 4px;
    background: #fff;
    color: #25313d;
    font: inherit;
    font-size: 12px;
    padding: 0 8px;
}

.time-datetime-time {
    display: flex;
    gap: 8px;
}

.time-datetime-column {
    flex: 1 1 0;
    height: 156px;
    overflow-y: auto;
    border: 1px solid #e1e7ee;
    border-radius: 4px;
    background: #f8fafc;
}

.time-datetime-item {
    display: block;
    width: 100%;
    height: 26px;
    border: 0;
    background: transparent;
    color: #25313d;
    font: inherit;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}

.time-datetime-item:hover,
.time-datetime-item-active {
    background: #1f6fb2;
    color: #fff;
}

.time-editor-modal .time-audit-text .dhx_input,
.dhx_window .time-audit-text .dhx_input {
    border-color: transparent !important;
    background: transparent !important;
    padding-left: 0 !important;
    color: #25313d !important;
}

.time-editor-modal .time-audit-text-empty,
.dhx_window .time-audit-text-empty {
    display: none;
}

.time-editor-modal .dhx_form-group--disabled .dhx_input,
.time-editor-modal .dhx_form-group--disabled .dhx_select,
.time-editor-modal .dhx_combobox--disabled .dhx_combobox-input-box,
.dhx_window .dhx_form-group--disabled .dhx_input,
.dhx_window .dhx_form-group--disabled .dhx_select,
.dhx_window .dhx_combobox--disabled .dhx_combobox-input-box {
    background: #f7f9fb !important;
    color: #607080 !important;
    opacity: 1;
}

.dhx_window .dhx_form-group .dhx_label {
    font-size: 12px;
}

.dhx_window .dhx_button {
    height: 30px;
    padding: 0 12px;
    border-radius: 4px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.dhx_window .time-modal-button {
    margin: 0;
}

.dhx_window .time-modal-button-gap {
    margin-left: 7px;
}

.dhx_window .dhx_button--view_flat {
    border: 1px solid #1f6fb2;
    background: #1f6fb2;
    color: #fff;
}

.dhx_window .dhx_button--view_link {
    border: 1px solid #c5d0db;
    background: #fff;
    color: #25313d;
}

.dhx_window .dhx_button:hover {
    filter: brightness(0.97);
}

.time-grid-host.crm-grid-container {
    grid-row: 3;
    position: relative;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100%;
    overflow: hidden;
    width: 100%;
    background: #fff;
}

.time-grid-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.72);
}

.time-grid-loading-box {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #cfd8e2;
    border-radius: 4px;
    background: #fff;
    color: #25313d;
    box-shadow: 0 8px 24px rgba(15, 29, 43, 0.12);
    font-size: 12px;
    font-weight: 500;
}

.time-grid-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #c8d4df;
    border-top-color: #1f6fb2;
    border-radius: 50%;
    animation: time-spin 0.8s linear infinite;
}

@keyframes time-spin {
    to {
        transform: rotate(360deg);
    }
}

.time-module-panel .crm-grid {
    --dhx-font-size-normal: 12px;
    --dhx-font-size-small: 12px;
    --dhx-font-weight-regular: 400;
    --dhx-s-grid-selection-background: #EBA832;
}

.time-module-panel .crm-grid .dhx_grid-cell {
    padding: 1px 6px !important;
    font-family: Tahoma !important;
    font-size: 12px !important;
    color: #000 !important;
}

.time-module-panel .crm-grid .dhx_grid-header-cell {
    padding: 2px 6px !important;
    font-family: Tahoma !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #EEEEEE !important;
    color: #333 !important;
    border-bottom: 2px solid #bbb !important;
}

.time-module-panel .crm-grid .dhx_grid-header-cell .dhx_input,
.time-module-panel .crm-grid .dhx_grid-filter {
    height: 20px !important;
    padding: 0 4px !important;
    border: 1px solid #c0c8d0 !important;
    background: #eef1f4 !important;
    font-size: 12px !important;
}

.time-module-panel .crm-grid .dhx_grid-row:nth-child(even),
.time-module-panel .crm-grid .dhx_grid-row:nth-child(even) .dhx_grid-cell {
    background: #fafbfc !important;
}

.time-module-panel .crm-grid .dhx_grid-selected-row:after {
    opacity: 0.35 !important;
}

.time-module-panel .crm-grid .dhx_grid-selected-row .dhx_grid-cell {
    background: transparent !important;
}

.time-ms-cell {
    display: block;
    width: 100%;
    min-height: 22px;
    line-height: 22px;
    box-sizing: border-box;
    padding: 0 6px;
}

.time-ms-saldo-plus-ok {
    background: #d9ead7;
    color: #24482a;
}

.time-ms-saldo-plus-high {
    background: #f2e7bf;
    color: #5d4b17;
}

.time-ms-saldo-minus {
    background: #f2d6d6;
    color: #6b2b2b;
}

.time-module-abwesenheiten .dhx_grid-header-cell,
.time-module-abwesenheiten .dhx_grid-cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.time-aw-header-day {
    display: grid;
    place-items: center;
    gap: 1px;
    min-height: 30px;
    font-size: 11px;
    line-height: 1.05;
}

.time-aw-header-day strong {
    font-size: 12px;
    font-weight: 600;
}

.time-aw-header-day span {
    color: #6c7884;
    font-size: 10px;
}

.time-aw-header-weekend,
.time-aw-header-holiday {
    background: #e6e9ed;
}

.time-aw-header-outside {
    color: #b8c0c8;
    background: #f4f6f8;
}

.time-aw-cell-fill {
    display: block;
    width: 100%;
    min-height: 22px;
    line-height: 22px;
    box-sizing: border-box;
}

.time-aw-department-name {
    padding: 0 8px;
    font-weight: 600;
}

.time-aw-day-value {
    text-align: center;
}

.time-aw-cell-department {
    background: #dcecf8 !important;
    color: #1f3f5b !important;
}

.time-aw-cell-weekend,
.time-aw-cell-holiday {
    background: #e6e9ed !important;
    color: #25313d !important;
}

.time-aw-cell-absence-urlaub {
    background: #d9ead7 !important;
    color: #24482a !important;
    font-weight: 600;
}

.time-aw-cell-absence-krank {
    background: #f2d6d6 !important;
    color: #6b2b2b !important;
    font-weight: 600;
}

.time-aw-cell-absence-zeitausgleich {
    background: #d9e7f4 !important;
    color: #25445f !important;
    font-weight: 600;
}

.time-aw-cell-absence-schule {
    background: #eee4c8 !important;
    color: #5b4a1f !important;
    font-weight: 600;
}

.time-aw-cell-absence-sonstig {
    background: #e3e0ea !important;
    color: #463c59 !important;
    font-weight: 600;
}

.time-aw-cell-outside {
    background: #f4f6f8 !important;
    color: transparent !important;
}

.time-module-panel .dhx_grid,
.time-module-panel .dhx_grid-content,
.time-module-panel .dhx_grid-content-wrapper,
.time-module-panel .dhx_grid-body {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    font-family: Tahoma !important;
    font-size: 12px !important;
}

.time-module-panel .dhx_grid {
    overflow: hidden !important;
}

.time-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 18px;
    padding: 0 7px;
    border-radius: 3px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
}

.time-status-badge.present {
    border: 1px solid #8ecb8e;
    background: #dff3df;
    color: #17612a;
}

.time-status-badge.absent {
    border: 1px solid #d39a9a;
    background: #f6dddd;
    color: #8a1f1f;
}

.time-settings-form {
    max-width: 520px;
    padding: 12px;
}