.emp-flex {
    display: flex;
    height: calc(100% - 36px);
    container-type: inline-size;
    container-name: emp-container;
}

.content .body.module-employees {
    height: 100% !important;
}

.details-body .task-header .icon-ambulance {
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: 15px;
    margin-right: 2px;
}

.details-body .task-header .icon-ambulance {
    background-image: url('images/ambulance.svg');
    position: relative;
    bottom: 1px;
}

.details-body .fields .field .input textarea.emp-details-txtarea {
    height: 120px;
    min-height: 120px;
}

.details-body .fields .field .input textarea.emp-details-txtarea.auto-height {
    height: auto;
    min-height: unset;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
}

.emp-map-area {
    flex: 1 1 0;
    min-height: 200px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 20px;
    overflow: hidden;
}

.task-split > .split-row {
    flex-shrink: 0;
}

#map-employees {
    height: 100%;
    border-radius: 20px;
}

.emp-checkboxes {
    gap: 20px;
    justify-content: center;
}

.emp-contact-box {
    border: 1px solid #8696A6;
    border-radius: 6px;
    max-width: 270px !important;
    min-width: 270px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    height: auto !important;
}

.emp-contact-split {
    gap: 20px;
    padding-left: 10px;
}

.emp-contact-split {
    flex-wrap: wrap;
}

.emp-checkboxes > div > * {
    vertical-align: middle;
}

.emp-checkboxes > div > label {
    position: relative;
    top: 3px;
    margin-left: 5px;
}

.module-employees .details-body .task-split .split-row .profile-image {
    position: absolute;
    width: 63px;
    height: 63px;
    left: calc(50% - 40px);
    top: 51px;
    border-radius: 100px;
    background-size: cover;
    background-position: center;
    box-shadow: rgb(213, 213, 213) 0px 1px 4px;
}

    .module-employees .details-body .task-split .split-row .profile-image::before {
        content: '';
        display: block;
        width: 35px;
        height: 10px;
        position: absolute;
        left: 22px;
        top: -11px;
        background: white;
    }

/* When the content area gets narrow (e.g. the user zooms the browser in, which
   shrinks the CSS viewport), the two-up inline field pairs squeeze each label to
   roughly half the column width. Long single-word labels ("Personalnummer",
   "Geburtsdatum", "Geschlecht") then break mid-word onto a second line while their
   sibling stays single-line, pushing the inputs out of alignment and making the
   form look messy. Below this width we stack each pair vertically so every label
   gets the full column width and never wraps. Uses the emp-container container
   query (declared on .emp-flex) so it tracks the real available width regardless
   of zoom level or sidebar state, unlike a viewport media query. */
@container emp-container (max-width: 780px) {
    .module-employees .details-body.emp-details-screen .task-split > .split-row.emp-pad-top-1 .inline-fields {
        flex-direction: column;
    }

        .module-employees .details-body.emp-details-screen .task-split > .split-row.emp-pad-top-1 .inline-fields > .field {
            min-width: 100%;
            max-width: 100%;
            padding-left: 0;
            padding-right: 0;
        }
}

/* Desktop-only column separator + generous side padding for the Employee details first split-row.
   Wrapped in a min-width query so this high-specificity rule doesn't win over the mobile overrides
   (which would otherwise need !important on every padding/border declaration to compete). */
@media (min-width: 769px) {
    .module-employees .details-body:not(.small-width) .task-split > .split-row:not(.emp-hours):first-child > .fields:first-child {
        padding-right: 80px;
        border-right: 1px solid #8696A6;
        padding-left: 60px;
    }

    .module-employees .details-body:not(.small-width) .task-split > .split-row:first-child > .fields:last-child {
        padding-left: 80px;
        padding-right: 60px;
    }
}

.task-split.full-height {
    height: 100%;
}

.split-row > .emp-big-pad:first-child {
    min-width: 33.33%;
    max-width: 33.33%;
}

.split-row > .emp-big-pad:last-child:not(:first-child) {
    min-width: 66.66%;
    max-width: 66.66%;
    min-height: 0;
}

@media(max-width: 1200px) {
    .split-row > .emp-big-pad:first-child {
        min-width: 25%;
        max-width: 25%;
    }

    .split-row > .emp-big-pad:last-child:not(:first-child) {
        min-width: 75%;
        max-width: 75%;
    }
}

@media(max-width: 900px) {
    .split-row > .emp-big-pad:first-child {
        min-width: 100%;
        max-width: 100%;
    }

    .split-row > .emp-big-pad:last-child:not(:first-child) {
        min-width: 100%;
        max-width: 100%;
    }
}

.split-row.single > .emp-big-pad {
    min-width: 100%;
    max-width: 100%;
}

.split-row > .emp-big-pad:first-child {
    padding-top: 18px;
}

.split-row > .emp-big-pad:last-child .task-header:hover {
    background: white;
    cursor: default;
}

.split-row > .emp-big-pad:last-child .task-header.emp-inline-header {
    cursor: pointer;
}

.split-row > .emp-big-pad:last-child .task-header.emp-inline-header:hover {
    background: #edf8ff;
    cursor: pointer;
}

.split-row > .emp-big-pad:last-child .fields {
    padding-left: 15px !important;
}

.task-name.emp-pad-no-icon {
    margin-left: 6px;
}

.fields.no-pad {
    padding-left: 0px !important;
    padding-right: 40px !important;
    height: auto;
}

    .fields.no-pad.right {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

.files-docs.emp-module {
    padding: 15px;
}

    .files-docs.emp-module .file-preview-overlay {
        top: 90px;
        height: calc(100% - 90px);
    }

    .files-docs.emp-module.no-preview-top-space .file-preview-overlay {
        top: 0px;
        height: calc(100%);
    }

.emp-box-column {
    display: flex;
    flex-direction: column;
}

    .emp-box-column.hours-less-width {
        max-width: 300px !important;
        min-width: 300px !important;
    }

.split-row.emp-pad, .emp-pad {
    padding: 10px;
}

.emp-big-pad {
    padding: 20px;
    padding-top: 0px;
    position: relative;
}

.emp-ver-line {
    position: absolute;
    left: 0px;
    top: 10px;
    height: calc(100% - 20px);
    background: #8696A6;
    width: 1px;
}

.emp-big-pad .task-header.no-border {
    border-top: 0 !important;
}

.emp-big-pad .task-header .icon-close.emp-task {
    right: 25px;
    top: 5px;
}

.emp-full-height {
    height: 100%;
}

.emp-fields-inline {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
    position: relative;
}

.emp-inline-profile {
    width: 60px;
    height: 60px;
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 50%;
    margin-bottom: 10px;
}

.emp-info-box input {
    padding-left: 0px;
}

.emp-fields-inline.hoverable {
    cursor: pointer;
}

    .emp-fields-inline.hoverable input {
        cursor: pointer;
    }

    .emp-fields-inline.hoverable:hover {
        background-color: #EDF8FF;
    }

.emp-fields-inline > * {
    flex-grow: 1;
    min-width: calc(33% - 7px);
    max-width: calc(33% - 7px);
}

.emp-fields-inline.with-icon > * {
    min-width: calc(33% - 13px);
    max-width: calc(33% - 13px);
}

    .emp-fields-inline.with-icon > *:first-child {
        min-width: 20px;
        max-width: 20px;
        position: relative;
        top: 8px;
    }

.split-row.emp-pad {
    gap: 20px;
}

    .split-row.emp-pad.bigger-gap {
        gap: 25px;
        padding-top: 5px;
    }

    .split-row.emp-pad > * {
        flex-grow: 1;
        min-width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
    
    .split-row.emp-pad > *.m-60 {
        flex-grow: 1;
        min-width: calc(60% - 10px) !important;
        max-width: calc(60% - 10px) !important;
    }

    .split-row.emp-pad > *.m-40 {
        flex-grow: 1;
        min-width: calc(40% - 10px) !important;
        max-width: calc(40% - 10px) !important;
    }

    .split-row.emp-pad.bigger-gap > * {
        flex-grow: 1;
        min-width: calc(50% - 12.5px) !important;
        max-width: calc(50% - 12.5px) !important;
    }


    .split-row.emp-pad.emp-hours-columns > * {
        min-width: auto !important;
        max-width: 100% !important;
    }

        .split-row.emp-pad.emp-hours-columns > *:first-child {
            flex-grow: 1;
            min-width: 250px !important;
            max-width: 250px !important;
        }



.emp-info-box {
    flex-grow: 1;
    min-width: 100%;
    margin-bottom: 10px;
}

.emp-box-column .single-child {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
}

/* Hours screen: keep year/month bar aligned with the section below.
   Move scrolling to the outer .task-split so both narrow equally if content overflows,
   instead of letting the inner section scroll on its own (which only shrinks the section
   and leaves the year/month bar at full width, causing the visible misalignment). */
.split-row.emp-hours-columns .emp-box-column .single-child {
    overflow: visible;
}

/* Absences listing: same trick — without it the inner box reserves a stable
   scrollbar gutter (~15px) that looks like unexplained right padding. */
.split-row.emp-pad > .emp-box-column.m-60 > .emp-info-box.single-child,
.split-row.emp-pad > .m-40 > .emp-box-column > .emp-info-box.single-child {
    overflow: visible;
}

.task-split.gap-20 > .task-split.full-height {
    overflow: visible;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.task-split.gap-20 > .emp-year-bar.with-months {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
}

.emp-info-box .emp-title {
    background: #f6f8fa;
    border: 1px solid #8696A6;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-family: 'Outfit Medium';
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.emp-info-box .emp-title.text-center {
    padding-left: 30px;
    padding-right: 35px;
}

.emp-info-box .emp-body {
    padding: 10px;
    border: 1px solid #8696A6;
    border-top: 0;
    min-height: 50px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.emp-body .emp-info-box .emp-body {
    min-height: 0px;
}

.emp-centered-fields {
    display: flex;
    width: 100%;
}

    .emp-centered-fields.inline {
        display: flex;
        margin: 0 auto;
        width: 700px;
        align-items: center;
    }

    .emp-centered-fields > * {
        flex-grow: 1;
        min-width: 50%;
        max-width: 50%;
    }

    .emp-centered-fields.three > * {
        flex-grow: 1;
        min-width: 33%;
        max-width: 33%;
    }

.text-right {
    text-align: right;
}

.emp-centered-fields .emp-f-label {
    text-align: right;
    padding-right: 5px;
}

    .emp-centered-fields .emp-f-label.middle {
        text-align: center;
    }

    .emp-centered-fields .emp-f-label .loading-placeholder {
        display: inline-block;
    }

.emp-centered-fields .emp-f-value {
    color: #424343;
    padding-left: 5px;
    text-align: left;
}

.emp-calendar-days .emp-centered-fields .emp-f-label {
    text-align: left;
}

.emp-calendar-days .emp-centered-fields {
    padding: 2px 5px;
    border: 1px solid transparent;
    cursor: pointer;
}

    .emp-calendar-days .emp-centered-fields.active {
        border: 1px solid #008AD1;
        border-radius: 5px;
    }

    .emp-calendar-days .emp-centered-fields .emp-f-value {
        padding-left: 10px;
    }

.emp-body .loading-placeholder {
    margin-bottom: 10px;
}


.icon-military {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-image: url('images/icon-military.svg');
}

.icon-holiday {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-image: url('images/icon-holiday.svg');
}

.icon-holiday.unconfirmed {
    filter: brightness(0) saturate(100%) invert(67%) sepia(64%) saturate(2000%) hue-rotate(360deg) brightness(100%) contrast(95%);
}

.icon-maternity {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-image: url('images/icon-maternity.svg');
}

.icon-sickness {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-image: url('images/icon-sickness.svg');
}

.icon-info {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-image: url('images/info-circle.svg');
    position: relative;
    top: 2px;
    left: 2px;
}

/* Match the icon-comments header icon style when used in the payroll task header */
.details-body .emp-big-pad .task-header .emp-task-title .icon-info {
    width: 15px;
    height: 15px;
    background-size: 15px;
    top: unset;
    left: unset;
    bottom: 1px;
}

.sorba-dropdown .icon-military, .sorba-dropdown .icon-holiday,
.sorba-dropdown .icon-maternity, .sorba-dropdown .icon-sickness {
    position: relative;
    top: 5px;
    margin-right: 10px;
}

.sorba-dropdown-items .icon-military, .sorba-dropdown-items .icon-holiday,
.sorba-dropdown-items .icon-maternity, .sorba-dropdown-items .icon-sickness {
    vertical-align: middle;
    margin-right: 5px;
}

.sorba-dropdown.icon-pad {
    display: inline-block;
    padding-left: 25px;
}

.sorba-dropdown.icon-pad {
    padding-left: 25px;
}

.sorba-dropdown-items .item.icon-pad {
    padding-left: 25px;
}

.emp-pills {
    display: flex;
    max-width: 250px;
}

    .emp-pills > * {
        flex-grow: 1;
    }

    .emp-pills .pill {
        border: 1px solid #8696A6;
        color: #374857;
        font-family: 'Outfit';
        padding-left: 6px;
        cursor: pointer;
        height: 25px;
        line-height: 23px;
        padding-right: 6px;
        min-width: 100px;
        max-width: 100px;
        text-align: center;
    }

        .emp-pills .pill:first-child {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .emp-pills .pill:last-child {
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        .emp-pills .pill:not(.active):not(.non-hover):hover {
            background-color: #EDF8FF;
            border: 1px solid transparent;
        }

        .emp-pills .pill.active {
            background-color: #EDF8FF;
        }

.activity-emp-icon {
    display: block;
    width: 25px;
    height: 25px;
    min-width: 0px !important;
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    background-image: url(/css/images/clipboard-notes.svg);
    position: absolute;
    background-color: #008AD1;
    border-radius: 100%;
    right: 5px;
    top: 5px;
    opacity: 0.8;
    z-index: 99999;
}

    .activity-emp-icon:hover {
        opacity: 1;
    }

    .emp-cal-wrap input {
        border: 1px solid #8696A6;
        color: #374857;
        max-width: 200px;
        min-width: 200px;
        text-align: center;
    }

.emp-cal-wrap .right-aligned {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 5px;
}

.emp-cal-wrap .left-aligned {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.jcalendar-inline {
    border: 1px solid #8696A6 !important;
    border-radius: 5px !important;
    margin-bottom: 5px;
    min-width: 260px;
}

#emp-cal-left,
#emp-cal-right {
    overflow: hidden;
}

#emp-cal-left .jcalendar-table > table,
#emp-cal-right .jcalendar-table > table {
    width: 100%;
}

/* Force equal day columns using grid — bypasses thead colspan distortion */
#emp-cal-left .jcalendar-table > table > tbody > tr,
#emp-cal-right .jcalendar-table > table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* Weekday header row also needs grid */
#emp-cal-left .jcalendar-table > table > thead > tr:last-child,
#emp-cal-right .jcalendar-table > table > thead > tr:last-child {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* Calendar day cells: center content */
#emp-cal-left .jcalendar-table > table > tbody td,
#emp-cal-right .jcalendar-table > table > tbody td,
#emp-cal-left .jcalendar-table > table > thead td,
#emp-cal-right .jcalendar-table > table > thead td {
    text-align: center;
}

.emp-cal-wrap .left-aligned {
    position: relative;
}

    .emp-cal-wrap .left-aligned .emp-to-label {
        position: absolute;
        left: -12px;
        top: 0px;
        color: #374857;
        transform: translateX(-50%);
    }

.emp-details {
    border-radius: 5px;
    padding: 10px;
    padding-left: 40px;
    background-color: #f6f8fa;
}

    .emp-details .regular {
        display: block;
        color: #424343;
    }

    .emp-details label {
        margin-bottom: 0px;
    }

    .emp-details .emp-fields-inline {
        gap: 30px;
    }

        .emp-details .emp-fields-inline > * {
            flex-shrink: 1;
            flex-grow: 0;
            max-width: unset;
            min-width: unset;
        }

.emp-pad.notes {
    min-height: 150px;
    margin-bottom: 15px;
}

    .emp-pad.notes textarea {
        background: #f6f8fa;
        border-radius: 5px;
        border: 0;
        min-height: 100px;
        height: calc(100% - 40px);
    }

.emp-doc-wrap {
    position: relative;
    width: 100%;
    height: 120px;
}

.emp-short-docs {
    max-height: 100px;
    padding-top: 5px;
}

.emp-docs-section {
    position: relative;
    flex-shrink: 0;
}

.emp-docs-section .drop-zone.emp-drop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 5;
    border-radius: 5px;
    border: 2px dashed #8696A6;
    background: rgba(255, 255, 255, 0.9);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .emp-docs-section .drop-zone.emp-drop.hovered {
        background-color: rgba(134, 150, 166, 0.3);
    }

    .emp-docs-section .drop-zone.emp-drop.visible {
        display: flex;
    }

/* Legacy wrapper compat */
.emp-doc-wrap .drop-zone.emp-drop {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    left: unset;
    width: 100px;
    padding-top: 12px;
    display: none;
}

    .emp-doc-wrap .drop-zone.emp-drop.hovered {
        background-color: #8696A6;
    }

    .emp-doc-wrap .drop-zone.emp-drop .icon-plus {
        display: none;
    }

    .emp-doc-wrap .drop-zone.emp-drop.visible {
        display: block;
    }

.jcalendar-controls {
    padding: 0 !important;
}

/* Calendar header row: arrows + centered month title */
#emp-cal-left .jcalendar-table > table > thead > tr:first-child,
#emp-cal-right .jcalendar-table > table > thead > tr:first-child {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
}

#emp-cal-left .jcalendar-prev,
#emp-cal-left .jcalendar-next,
#emp-cal-right .jcalendar-prev,
#emp-cal-right .jcalendar-next {
    border-radius: 4px;
    transition: background-color 0.15s;
}

    #emp-cal-left .jcalendar-prev:hover,
    #emp-cal-left .jcalendar-next:hover,
    #emp-cal-right .jcalendar-prev:hover,
    #emp-cal-right .jcalendar-next:hover {
        background-color: #EDF8FF;
    }

.jcalendar-table > table > tbody > tr {
    height: 28px !important;
}

.jcalendar-table > table > tbody td {
    padding-bottom: 2px;
    padding-top: 2px;
}

.new-entity-button.emp-absence {
    background-color: #008AD1;
    color: white;
    background-image: url('/css/images/plus_white.svg');
}

.new-entity-button.emp-unified {
    min-width: 120px;
    text-align: center;
    box-sizing: border-box;
}

.new-entity-button.emp-edit-small {
    background-color: #008AD1;
    color: white;
    background-image: url('/css/images/icon-edit-white.svg');
}

.new-entity-group {
    display: flex;
    gap: 10px;
    position: absolute;
    position: absolute;
    right: 15px;
    top: 5px;
}

.new-entity-group > .new-entity-button {
    position: relative !important;
    left: unset !important;
    right: unset !important;
    top: unset !important;
}

.emp-f-value > .emp-edit-small {
    position: absolute;
    left: 45px;
    width: 65px;
    top: -1px;
}

.input.emp-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: #f0f0f0;
}

.new-entity-button.emp-send-report {
    right: 140px;
    background-image: url('/css/images/icon-arrow-up-white.svg');
}

.new-entity-button.emp-delete-report {
    right: 70px;
    background-image: url('/css/images/icon-delete-white.svg');
}

td.emp-row-remove, th.emp-row-remove,
.sorba-grid td.emp-row-remove, .sorba-grid th.emp-row-remove,
.emp-table-scroll-wrap table.sorba-grid td.emp-row-remove,
.emp-table-scroll-wrap table.sorba-grid th.emp-row-remove,
.field.required .sorba-grid td.emp-row-remove,
.field.required .sorba-grid th.emp-row-remove {
    cursor: pointer;
    text-align: center;
    width: 24px;
    border: 0 none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    background: none !important;
    padding: 0 2px;
}

.emp-x-btn {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/css/images/times-square_red.svg) no-repeat center;
    background-size: 14px;
    opacity: 0.6;
}

.emp-x-btn:hover {
    opacity: 1;
}

.emp-short-docs {
    flex-direction: row !important;
    justify-items: left;
    align-items: start;
    padding-left: 12px;
}

.task-header .new-entity-button {
    top: 3px;
}

.emp-fields-inline .field.error {
    color: red;
}

.task-header.emp-inline-header {
    border-top: 0;
    padding-left: 32px;
}

.emp-assignee-pic {
    background-image: url(data:image/png;base64,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);
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
}

.emp-task-header {
    margin-left: 40px;
}

.task-header .icon-close.emp-task {
    position: absolute;
    right: 15px;
    top: 3px;
}

.emp-task-header .emp-title {
    vertical-align: middle;
    font-size: 20px;
    display: inline-block;
    font-family: 'Outfit Medium';
}

.emp-days-line {
    position: relative;
}

    .emp-days-line.weekend {
        background-color: rgba(0, 138, 209, 0.08);
    }

    .emp-days-line .emp-time-indicator {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 12px !important;
        min-width: 0px;
        height: 12px;
        display: block;
        background: #ff9d18;
        border-radius: 100%;
        opacity: 0.8;
    }

    .emp-days-line .emp-pending-time, .emp-f-value.emp-pending-time {
        color: #ff9d18;
    }

.emp-year-bar {
    background: #f6f8fa;
    display: flex;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-top: 15px;
    border-radius: 5px;
    border: 1px solid #8696A6;
}

    .emp-year-bar.emp-absences {
        margin-bottom: 10px;
        align-items: center;
        gap: 5px;
        padding-left: 10px;
        padding-right: 10px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .emp-year-bar .item {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 6px;
        padding-bottom: 3px;
        cursor: pointer;
    }

        .emp-year-bar .item:hover {
            border-bottom: 2px solid #ff9d188f;
        }

        .emp-year-bar .item.active {
            border-bottom: 2px solid #ff9d18;
        }

    .emp-year-bar.with-months {
        flex-direction: column;
        gap: 10px;
        background-color: white;
    }

    .emp-year-bar .year-part, .emp-year-bar .month-part {
        display: flex;
        gap: 10px;
        border-radius: 5px;
        background: #f6f8fa;
        align-items: center;
        padding-left: 10px;
        padding-right: 10px;
    }

.emp-title {
    position: relative;
}

    .emp-title .control-left {
        position: absolute;
        width: 20px;
        height: 20px;
        left: 5px;
        top: 1px;
        background-size: 100%;
        background-image: url('/css/images/icon-arrow-left.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    .emp-title .control-right {
        position: absolute;
        right: 5px;
        top: 1px;
        width: 20px;
        height: 20px;
        background-size: 100%;
        background-image: url('/css/images/icon-arrow-right.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    .emp-title .control-right, .emp-title .control-left {
        opacity: 0.8;
        cursor: pointer;
    }

        .emp-title .control-right:hover, .emp-title .control-left:hover {
            opacity: 1;
        }



.row-add {
    padding-top: 2px !important;
    padding-bottom: 0px !important;
}

    .row-add .icon-plus {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(/css/images/icon-plus-new.svg);
        background-position: center;
        background-size: 100%;
    }

    .row-add:hover {
        cursor: pointer;
        background-color: #EDF8FF;
    }

.emp-hide-select {
    border: 0;
    outline: 0;
    width: 100%;
}

.emp-masked {
    position: relative;
}

    .emp-masked .masked-input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: white;
        padding: 2px 5px;
        pointer-events: none;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .emp-masked .sorba-dropdown-wrapper {
        min-width: 50px;
    }

        .emp-masked .sorba-dropdown-wrapper .sorba-dropdown {
            background: none;
            border: 0;
        }

.inline-fields.profile-title {
    gap: 10px;
    align-items: center;
}

    .inline-fields.profile-title > *:first-child {
        min-width: 60px;
        max-width: 60px;
    }

    .inline-fields.profile-title .large-title {
        color: #374857;
        font-size: 20px;
    }

.fields.emp-fields-auto-height {
    height: auto;
    flex-grow: 0;
    border-bottom: 1px solid #8696A6;
}

.task-header .icon-only {
    position: absolute;
    right: 45px;
    top: 6px;
    background-repeat: no-repeat;
    background-size: 18px;
    display: block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    opacity: 0.75;
}

    .task-header .icon-only:hover {
        opacity: 1;
    }


.loading-placeholder.block.emp-cd {
    width: 204px;
    height: 204px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
}

@media (max-width: 768px) {
    .loading-placeholder.block.emp-cd {
        width: calc(50% - 8px);
        height: auto;
        min-height: 140px;
        margin-right: 5px;
        margin-bottom: 5px;
    }
}

/* Day hover highlight - only for cells with dates */
.jcalendar-set-day:hover {
    background-color: #EDF8FF;
    cursor: pointer;
    border-radius: 4px;
}

.jcalendar-set-day.emp-empty-day,
.jcalendar-set-day.emp-empty-day:hover {
    background-color: transparent;
    cursor: default;
    pointer-events: none;
}

/* Days with existing absences - grey with dot indicator */
.jcalendar-set-day.has-absence {
    background: #e8e8e8;
    color: #999;
    cursor: not-allowed;
    position: relative;
}

.jcalendar-set-day.has-absence::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #999;
    border-radius: 50%;
}

.jcalendar-set-day.has-absence:hover {
    background: #e8e8e8 !important;
    cursor: not-allowed;
}

/* Half-day morning absence - can still select afternoon */
.jcalendar-set-day.has-morning-absence {
    position: relative;
}

.jcalendar-set-day.has-morning-absence::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(to right, #e8e8e8 40%, transparent);
    border-radius: 4px 0 0 4px;
    z-index: 0;
}

.jcalendar-set-day.has-morning-absence::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 25%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #999;
    border-radius: 50%;
    z-index: 1;
}

/* Half-day afternoon absence - can still select morning */
.jcalendar-set-day.has-afternoon-absence {
    position: relative;
}

.jcalendar-set-day.has-afternoon-absence::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(to left, #e8e8e8 40%, transparent);
    border-radius: 0 4px 4px 0;
    z-index: 0;
}

.jcalendar-set-day.has-afternoon-absence::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 75%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #999;
    border-radius: 50%;
    z-index: 1;
}

/* Selection highlights - must come after absence styles to take precedence */
.jcalendar-set-day.highlight-range {
    background: #EDF8FF !important;
}

.jcalendar-set-day.highlight-selected {
    background: #d5efff !important;
}

/* Prevent jSuites default selection flash when switching months */
#emp-cal-left .jcalendar-selected,
#emp-cal-right .jcalendar-selected {
    background-color: transparent !important;
}

/* Fix jSuites calendar month/year picker view */
/* Keep calendar at a consistent height so it doesn't collapse */
#emp-cal-left .jcalendar-table,
#emp-cal-right .jcalendar-table {
    min-height: auto;
}

/* The month/year picker is a single-cell row — disable the 7-col grid on it */
#emp-cal-left .jcalendar-table > table > tbody > tr:only-child,
#emp-cal-right .jcalendar-table > table > tbody > tr:only-child {
    display: table-row;
    grid-template-columns: none;
}

/* The inner picker table fills the cell */
#emp-cal-left .jcalendar-table > table > tbody > tr > td > table,
#emp-cal-right .jcalendar-table > table > tbody > tr > td > table {
    height: 100%;
}

/* Month/year cells: bigger text, centered, with padding */
#emp-cal-left .jcalendar-set-month,
#emp-cal-right .jcalendar-set-month {
    font-size: 14px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

#emp-cal-left .jcalendar-set-year,
#emp-cal-right .jcalendar-set-year {
    font-size: 14px;
    padding: 6px 8px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

#emp-cal-left .jcalendar-set-month:hover,
#emp-cal-right .jcalendar-set-month:hover,
#emp-cal-left .jcalendar-set-year:hover,
#emp-cal-right .jcalendar-set-year:hover {
    background-color: #EDF8FF;
}

/* Re-enable selection highlight in month/year picker */
#emp-cal-left .jcalendar-set-month.jcalendar-selected,
#emp-cal-right .jcalendar-set-month.jcalendar-selected,
#emp-cal-left .jcalendar-set-year.jcalendar-selected,
#emp-cal-right .jcalendar-set-year.jcalendar-selected {
    background-color: #d5efff !important;
}

/* When a day with absence is in the selected range, show both indicators */
.jcalendar-set-day.has-absence.highlight-range,
.jcalendar-set-day.has-absence.highlight-selected {
    background: #e8e8e8 !important;
}

.jcalendar-set-day.has-morning-absence.highlight-range,
.jcalendar-set-day.has-morning-absence.highlight-selected,
.jcalendar-set-day.has-afternoon-absence.highlight-range,
.jcalendar-set-day.has-afternoon-absence.highlight-selected {
    background: #EDF8FF !important;
}

input.force-selected {
    border-color: #ff9d18;
}

.emp-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
}

.emp-white-btn, .emp-white-input {
    background: white;
    border: 1px solid #8696A6;
    color: #424343;
    padding: 2px 4px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Outfit Medium';
    font-size: 12px;
    white-space: nowrap;
}

.emp-white-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Date cycler: remove spacing between the arrow buttons and the date input,
   and stretch the input to match the arrow button height */
.emp-toolbar:has(> .emp-white-input) {
    gap: 0;
    align-items: stretch;
}

.emp-toolbar:has(> .emp-white-input) > .emp-white-input {
    width: auto;
}

#date-select {
    width: 10ch;
    min-width: 0;
    box-sizing: content-box;
    text-align: center;
}

.emp-arrow-left {
    background-image: url('/css/images/icon-arrow-left.svg');
    background-size: 100%;
    display: inline-block;
    width: 16px;
    height: 12px;
    cursor: pointer;
    align-self: center;
    padding: 5px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    transition: background-color 0.15s;
}

    .emp-arrow-left:hover {
        background-color: #EDF8FF;
    }

.emp-arrow-right {
    background-image: url('/css/images/icon-arrow-right.svg');
    background-size: 100%;
    display: inline-block;
    width: 16px;
    height: 12px;
    cursor: pointer;
    align-self: center;
    padding: 5px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    transition: background-color 0.15s;
}

    .emp-arrow-right:hover {
        background-color: #EDF8FF;
    }

.emp-white-btn.active {
    background-color: #d9d9da;
}

.emp-schedule-wrap {
    display: flex;
    flex-direction: row;
    gap: 0px;
    border: 1px solid #8696A6;
    border-top: none;
    overflow: auto;
    border-left: 0;
    border-right: 0;
}

.emp-schedule-month-view {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.emp-schedule-month-row {
    display: flex;
    border-bottom: 1px solid #8696A6;
}

.emp-week-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
}

.emp-time-column {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #8696A6;
}

.emp-time-column .emp-time-header {
    padding-left: 0;
}

.emp-time-column .emp-schedule-row {
    min-height: 29px;
}

.emp-schedule-wrap .emp-schedule-day {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.emp-schedule-day > * {
}

.emp-schedule-row {
    display: flex;
}

    .emp-schedule-row:not(.second) > *:first-child {
        border-right: 1px solid #8696A6;
        max-width: 80px;
        border-bottom: 0px solid #8696A6;
    }

    .emp-schedule-row > * {
        flex-grow: 1;
    }

    .emp-schedule-row .emp-half-border-top {
        display: inline-block;
        width: 40px;
        border-top: 1px solid #8696A6;
        margin-left: 40px;
        position: absolute;
        top: 0px;
        right: 0px;
    }

.emp-header-cell {
    font-size: 16px;
    font-family: 'Outfit Medium';
    padding-left: 80px;
    background-color: #edf8ff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .emp-header-cell.second {
        padding-left: 5px;
    }

.emp-schedule-row .emp-time-cell {
    font-size: 16px;
    font-weight: 500;
    color: #424343;
    text-align: right;
    padding-right: 8px;
    padding-top: 5px;
    position: relative;
}

.emp-appointment-cell {
    display: flex;
    gap: 5px;
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
}

    .emp-appointment-cell > * {
        flex: 1;
        min-height: 29px;
        border-right: 1px solid #8696A6;
    }

        .emp-appointment-cell > *:not(.emp-appointment) {
            border-left: 15px solid transparent;
            border-bottom: 1px solid #8696A6
        }

    /* Prevent border doubling at grid edges */
    .emp-schedule-day:last-child .emp-appointment-cell > *:last-child {
        border-right: 0;
    }

    .emp-schedule-day .emp-schedule-row:last-child .emp-appointment-cell > * {
        border-bottom: 0;
    }

/* Align time labels flush with the top of the row so they match
   the appointment block's starting position exactly. */
.emp-time-cell.first {
    border-bottom: 0;
    padding-top: 0;
}

.emp-grouped-btns {
    display: inline-flex;
}

    .emp-grouped-btns > *:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    .emp-grouped-btns > *:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .emp-grouped-btns > *:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.emp-limit-width {
    max-width: 100%;
    margin-left: 0;
}

.emp-side-borders {
    border-left: 1px solid #8696A6;
    border-right: 1px solid #8696A6;
    border-top: 1px solid #8696A6;
    border-bottom: none;
    padding-top: 10px !important;
}

.emp-app-screen.emp-side-borders {
    border: 0 !important;
}

.emp-side-borders > *:last-child .emp-toolbar {
    display: flex;
    justify-content: end;
}

.emp-appointment {
    padding: 5px;
    position: relative;
    background-color: #73c280;
    color: white;
    border-left: 5px solid #f07d22;
    border-bottom: 1px solid #8696A6;
    overflow: visible;
}

/* First cell of a multi-slot appointment renders above continuation cells
   so that overflowing text (title + time) is not covered */
.emp-appointment:not(.no-top):not(.no-both) {
    z-index: 2;
}

    .emp-appointment strong {
        font-size: 14px;
        position: absolute;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 10px);
    }

    .emp-appointment span {
        position: absolute;
        top: 22px;
        z-index: 999;
        white-space: nowrap;
    }

    .emp-appointment.no-bot, .emp-appointment.no-both {
        border-bottom: 0;
    }

        .emp-appointment.no-top strong, .emp-appointment.no-both strong, .emp-appointment.no-top span, .emp-appointment.no-both span {
            display: none;
        }

.fixed-menus.emp-top-pad-fix {
    padding-top: 6px;
}

/* Fixed width for the employee module's left nav — overrides inline styles set
   by the activity module's resize (they persist because the `.navigation` /
   `#main-navigation` element is shared across modules).
   Desktop only: on mobile the navigation should fill the screen when toggled open
   (see .main-content.navi-open #main-navigation in site.css @ max-width:900px). */
@media (min-width: 901px) {
    .navigation:has(.fixed-menus.emp-top-pad-fix) {
        min-width: 185px !important;
        max-width: 185px !important;
    }

    .nav-wrapper:has(> .fixed-menus.emp-top-pad-fix) {
        width: 185px;
        min-width: 185px;
        max-width: 185px;
        flex: 0 0 185px;
    }
}

/* Mobile: bigger nav items, full-width tap target */
@media (max-width: 900px) {
    .navigation .module-menu .fixed-menus.emp-top-pad-fix .item.nav-item {
        width: 100%;
        font-size: 14px;
        line-height: 36px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

.emp-pad-top-1 {
    padding-top: 1rem !important;
}

.split-row > .emp-big-pad:last-child > .task-header.emp-split-task {
    margin-top: 17px;
}

.details-body .task-header.emp-split-task {
    display: flex;
    align-items: center;
}

.details-body .task-header.emp-split-task img {
    position: static;
    margin-left: 5px;
    z-index: 0;
    flex-shrink: 0;
}

.task-header.emp-details-toggle:not(.collapsed) {
    background: #EDF8FF !important;
}

/* Align Details icon/text with the input fields below (matches emp-inline-header) */
.task-header.emp-split-task.emp-details-toggle {
    padding-left: 10px;
}

.task-header.emp-details-toggle.collapsed {
    cursor: pointer !important;
    border-bottom: 1px solid #8696A6;
}

.task-header.emp-inline-header:not(.comments-collapsed) {
    background: #EDF8FF !important;
}

/* Comment button in payroll inline header: keep compact and centered */
.task-header.emp-inline-header .new-entity-button {
    font-size: 12px;
    white-space: nowrap;
    top: 5px;
}

.task-header.emp-details-toggle.collapsed:hover {
    background: #edf8ff !important;
}

.task-header.emp-details-toggle .task-name.emp-task-title {
    font-size: 12px;
}

.emp-emergency-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
}

.split-row.emp-pad.bigger-gap.emp-hours {
    gap: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 500px;
}

    .split-row.emp-pad.bigger-gap.emp-hours > * {
        min-width: calc(50%) !important;
        max-width: calc(50%) !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .split-row.emp-pad.bigger-gap.emp-hours > *:first-child {
        min-width: 60% !important;
        max-width: 60% !important;
        padding-right: 15px !important;
        border-right: none !important;
    }

    .split-row.emp-pad.bigger-gap.emp-hours > *:last-child {
        min-width: 40% !important;
        max-width: 40% !important;
    }

.field-error {
    color: #d32f2f;
    font-size: 12px;
    margin-top: 6px;
}

.field.required .sorba-grid td, .field.required .sorba-grid th {
    border-color: #FF8D8D !important;
}

input.pr-40 {
    padding-right: 40px;
}

@media(max-width: 1200px) {
    .split-row.emp-pad > *.m-60 {
        min-width: calc(65% - 10px) !important;
        max-width: calc(65% - 10px) !important;
    }

    .split-row.emp-pad > *.m-40 {
        min-width: calc(35% - 10px) !important;
        max-width: calc(35% - 10px) !important;
    }
}

@media(max-width: 900px) {
    .split-row.emp-pad > *.m-60,
    .split-row.emp-pad > *.m-40 {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .split-row.emp-pad {
        flex-wrap: wrap;
    }

    /* Absences screen: when columns stack, put Overtime + Holidays (m-40) above the
       Absences list (m-60) so the summary numbers are visible without scrolling. */
    .emp-absences-screen .split-row.emp-pad > .m-40 {
        order: -1;
    }
    .emp-absences-screen .split-row.emp-pad > .m-60 {
        order: 0;
    }

    .comment .note-editor .note-toolbar {
        padding: 2px 36px 2px 4px !important;
        display: flex;
        flex-wrap: nowrap;
        min-height: 34px;
        height: auto;
        align-items: center;
        overflow: visible;
        white-space: nowrap;
    }

    .comment .note-editor .note-editing-area {
        height: auto;
        min-height: 120px;
    }

    .comment.compact-mode .emp-comment-close {
        right: 2px;
        top: 2px;
    }

    .emp-comment-send {
        right: 2px;
        bottom: 2px;
    }
}

@media(max-width: 1000px) {
    .emp-limit-width {
        max-width: 100%;
        margin-left: 0;
    }
}

/* Appointment Popup Styles */
.emp-appointment-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.emp-appointment-popup {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 350px;
    max-width: 500px;
    overflow: hidden;
}

.emp-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #73c280;
    color: #fff;
}

.emp-popup-title {
    font-weight: 600;
    font-size: 16px;
}

.emp-popup-header .icon-close {
    cursor: pointer;
    font-size: 18px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.emp-popup-header .icon-close:hover {
    opacity: 1;
}

.emp-popup-body {
    padding: 20px;
}

.emp-popup-field {
    margin-bottom: 15px;
}

.emp-popup-field:last-child {
    margin-bottom: 0;
}

.emp-popup-field label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    font-weight: 500;
}

.emp-popup-field span {
    display: block;
    font-size: 14px;
    color: #333;
}

.emp-appointment {
    cursor: pointer;
}

.emp-appointment:hover {
    filter: brightness(0.95);
}

.emp-schedule-day.weekend {
    background-color: rgba(0, 138, 209, 0.08);
}

#date-select {
    white-space: nowrap;
}

/* Month view compact grid */
.emp-month-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid #8696A6;
    width: 100%;
}

.emp-month-header-row {
    display: flex;
    background-color: #edf8ff;
    border-bottom: 1px solid #8696A6;
}

.emp-month-header-cell {
    flex: 1;
    text-align: center;
    font-family: 'Outfit Medium';
    font-size: 13px;
    padding: 6px 4px;
    border-right: 1px solid #8696A6;
    min-width: 0;
}

    .emp-month-header-cell:last-child {
        border-right: 0;
    }

.emp-month-week-row {
    display: flex;
    min-height: 80px;
    border-bottom: 1px solid #8696A6;
}

    .emp-month-week-row:last-child {
        border-bottom: 0;
    }

.emp-month-day-cell {
    flex: 1;
    min-width: 0;
    padding: 4px;
    border-right: 1px solid #8696A6;
    overflow: hidden;
}

    .emp-month-day-cell:last-child {
        border-right: 0;
    }

    .emp-month-day-cell.weekend {
        background-color: rgba(0, 138, 209, 0.05);
    }

    .emp-month-day-cell.other-month {
        opacity: 0.4;
    }

    .emp-month-day-cell.today .emp-month-day-number {
        background-color: #008AD1;
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.emp-month-day-number {
    font-size: 13px;
    font-weight: 600;
    color: #374857;
    margin-bottom: 2px;
}

.emp-month-appointment {
    font-size: 11px;
    padding: 2px 4px;
    margin-bottom: 2px;
    background-color: #73c280;
    color: white;
    border-left: 3px solid #f07d22;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .emp-month-appointment:hover {
        filter: brightness(0.95);
    }

.emp-month-appt-time {
    font-size: 10px;
    margin-right: 4px;
    opacity: 0.9;
}

.emp-month-appt-name {
    font-size: 11px;
}

/* Fix toolbar overlap on narrow screens */
.emp-pad.split-row.emp-side-borders {
    flex-wrap: wrap;
    gap: 5px;
}

/* Prevent toolbar children from shrinking; force them to wrap instead */
.emp-pad.split-row.emp-side-borders > * {
    flex-shrink: 0;
}

/* ===== Employee Appointments: Responsive ===== */

/* Week view: allow horizontal scrolling instead of clipping columns */
.emp-week-container {
    overflow-x: auto;
}

/* Medium screens: widen the calendar container */
@media (max-width: 1000px) {
    .emp-header-cell {
        font-size: 14px;
    }
}

/* Small screens / tablets */
@media (max-width: 768px) {
    /* Use full available width */
    .emp-limit-width {
        max-width: 100%;
        margin-left: 0;
    }

    /* Keep toolbars on one row: date nav left, view buttons right */
    .emp-pad.split-row.emp-side-borders {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 5px;
    }

    .emp-pad.split-row.emp-side-borders > * {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        flex-shrink: 1;
        flex-grow: 0;
    }

    .emp-side-borders > *:last-child {
        margin-left: auto;
    }

    .emp-side-borders > *:last-child .emp-toolbar {
        justify-content: end;
    }

    /* Week view: enforce minimum day column widths so content is readable */
    .emp-week-container .emp-schedule-day {
        min-width: 130px;
    }

    /* Month view: allow horizontal scroll when cells get too narrow */
    .emp-month-grid {
        overflow-x: auto;
    }

    .emp-month-header-row,
    .emp-month-week-row {
        min-width: 500px;
    }

    /* Day header: reduce left padding that accounts for time column */
    .emp-header-cell {
        font-size: 13px;
        padding-left: 55px;
    }

    .emp-header-cell.second {
        padding-left: 3px;
    }

    /* Time column: narrower on small screens */
    .emp-time-column {
        flex: 0 0 55px;
    }

    .emp-schedule-row:not(.second) > *:first-child {
        max-width: 55px;
    }

    .emp-schedule-row .emp-time-cell {
        font-size: 13px;
        padding-right: 4px;
    }

    /* Appointment text: compact */
    .emp-appointment strong {
        font-size: 12px;
    }

    .emp-appointment span {
        font-size: 10px;
        top: 18px;
    }

    /* Popup: fit within viewport */
    .emp-appointment-popup {
        min-width: 0;
        max-width: 90vw;
        width: 90vw;
    }

    /* Appointments: hide day name on mobile, shrink date input */
    .emp-day-name {
        display: none;
    }

    .emp-white-input {
        width: auto;
    }

    /* Hours screen: prevent text overflow in info boxes */
    .emp-centered-fields.inline {
        width: 100%;
        margin: 0;
    }

    .emp-centered-fields .emp-f-label {
        text-align: left;
    }
}

/* Very small screens / mobile */
@media (max-width: 480px) {
    /* Compact toolbar buttons */
    .emp-white-btn, .emp-white-input {
        font-size: 11px;
        padding: 2px 3px;
    }

    .emp-toolbar {
        gap: 5px;
    }

    /* Toolbar: force side by side */
    .emp-pad.split-row.emp-side-borders {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    .emp-pad.split-row.emp-side-borders > * {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        flex-shrink: 1;
        flex-grow: 0;
    }

    /* View mode buttons: keep compact */
    .emp-grouped-btns {
        flex-wrap: nowrap;
    }

    .emp-grouped-btns .emp-white-btn {
        padding: 2px 2px;
        font-size: 10px;
    }

    /* Day view: narrower time column */
    .emp-time-column {
        flex: 0 0 45px;
    }

    .emp-header-cell {
        padding-left: 45px;
    }

    .emp-schedule-row:not(.second) > *:first-child {
        max-width: 45px;
    }

    /* Month view: even smaller text */
    .emp-month-day-number {
        font-size: 11px;
    }

    .emp-month-appointment {
        font-size: 10px;
        padding: 1px 3px;
    }

    .emp-month-appt-time {
        font-size: 9px;
    }

    /* Popup: full-width with small margin */
    .emp-appointment-popup {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }

    .emp-popup-header {
        padding: 12px 15px;
    }

    .emp-popup-body {
        padding: 15px;
    }

    .emp-popup-title {
        font-size: 14px;
    }
}

/* Grayed-out hint shown in Notes / Documents when no wage entry is selected
   on the report form. The selected row is what notes/files actually attach to,
   so without one anything typed/uploaded would be silently discarded. */
.emp-no-wage-hint {
    color: #8696A6;
    font-style: italic;
    font-size: 12px;
    padding: 10px 4px;
    line-height: 1.4;
}

/* In the Documents pane the section icon sits at 10px from the section edge
   (5px from .task-header + 5px from .task-name). Match that so the hint text
   reads as a continuation of the section, not as a stray label flush left. */
.emp-docs-section .emp-no-wage-hint {
    padding-left: 10px;
}

/* ===== Employee Hours Screen Fixes ===== */

/* Strip the 40px right padding the base .fields.no-pad rule forces with
   !important. In the hours add-report form every section already shares
   the same left/right edges with the Notes column, so this extra right
   pad would just visually shorten the summary box, tables, and inputs.
   Higher specificity + !important so it beats the base rule everywhere
   (not only on mobile). */
.split-row.emp-pad.bigger-gap.emp-hours .fields.no-pad,
.split-row.emp-pad.bigger-gap.emp-hours .fields.no-pad.right {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Align fields above the time tables with the table content columns (excluding the 24px delete column) */
.emp-hours .fields.no-pad > .emp-pad,
.emp-hours .fields.no-pad > .field:not(.with-table) {
    padding-right: 28px;
}

/* Fix 2: Table overflow in report form */
.emp-table-scroll-wrap {
    width: 100%;
    max-width: 100%;
}

    .emp-table-scroll-wrap table.sorba-grid {
        table-layout: fixed;
        width: 100%;
    }

    .emp-table-scroll-wrap table.sorba-grid td,
    .emp-table-scroll-wrap table.sorba-grid th {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .emp-table-scroll-wrap table.sorba-grid td.emp-masked {
        overflow: visible;
    }

/* Date input: show calendar icon instead of dropdown arrow */
.details-body .fields .field .input.emp-date-input > input {
    background-image: url(/css/images/calendar-alt.svg);
    background-position: calc(100% - 6px) center;
    background-size: 14px;
    cursor: pointer;
}

/* Fix 2: Document header overlap on narrow screens */
.emp-hours .task-header .task-name {
    padding-right: 120px;
}

/* Fix 6: Month/year bar layout */
.emp-year-bar.with-months > .year-part,
.emp-year-bar.with-months > .month-part {
    width: 100%;
    box-sizing: border-box;
}

.emp-year-bar .year-part,
.emp-year-bar .month-part {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

.emp-year-bar .year-part > .emp-arrow-left,
.emp-year-bar .year-part > .emp-arrow-right,
.emp-year-bar .month-part > .emp-arrow-left,
.emp-year-bar .month-part > .emp-arrow-right {
    flex-shrink: 0;
    z-index: 2;
}

.emp-year-bar .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.emp-year-bar.with-months .item {
    padding-left: 8px;
    padding-right: 8px;
}

.emp-year-bar .month-part > .item {
    flex: 1 1 0;
    text-align: center;
}

.emp-year-bar .year-part > .item {
    flex: 0 1 auto;
}

/* ===== Employee Payroll Screen Fixes ===== */

/* 1. Comment field: intensify color and contrast */
/* 2. Comment text overflow: prevent text from escaping the box */
.emp-big-pad .comment .info-line {
    border-color: #8696A6;
    background-color: #f6f8fa;
}

.emp-big-pad .comment .comment-text-wrapper {
    border: 1px solid #8696A6;
    border-top: 0;
    background-color: #FAFBFC;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

.emp-big-pad .comment.external .comment-text-wrapper {
    background-color: #f3fbff;
}

.emp-big-pad #addComment .note-editing-area .note-editable {
    overflow-y: auto;
}

/* 3. Scrollbar only on comment section, not the whole right panel */
.details-body .task-split > .split-row {
    min-height: 0;
    overflow: hidden;
}

.split-row > .emp-big-pad:first-child {
    overflow-y: auto;
}

.split-row > .emp-big-pad:last-child {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.split-row > .emp-big-pad:last-child > .task-header {
    flex-shrink: 0;
}

.split-row > .emp-big-pad:last-child > .task-split {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.split-row > .emp-big-pad:last-child > .task-split > .fields.locked {
    flex-shrink: 0;
    flex-grow: 0;
    height: auto;
}

.split-row > .emp-big-pad:last-child > .task-split > .task-header,
.split-row > .emp-big-pad:last-child > .task-split > .task-split {
    flex-shrink: 0;
    flex-grow: 0;
}

.split-row > .emp-big-pad:last-child > .task-split > .fields.comments {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    height: auto;
}

.split-row > .emp-big-pad:last-child > .task-split > .fields.comments .field {
    height: auto;
}

.split-row > .emp-big-pad:last-child > .task-split > .emp-new-comment-wrapper {
    flex-shrink: 0;
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    background: white;
    border-top: 0;
}

/* 4. Align all section contents to the same left padding */
.split-row > .emp-big-pad:last-child > .task-split > .task-header {
    padding-left: 15px;
    padding-right: 15px;
}

.split-row > .emp-big-pad:last-child > .task-split > .task-header.emp-inline-header {
    padding-left: 15px;
}

.split-row > .emp-big-pad:last-child > .task-split > .fields.comments {
    padding-left: 15px !important;
    padding-right: 15px;
}

.split-row > .emp-big-pad:last-child > .task-split > .task-split.emp-short-docs {
    padding-left: 15px;
}

/* Employee News: fix button sizing */
.emp-big-pad .details-buttons {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
}

/* File delete button */
.file-short .fs-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.file-short .fs-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.file-short {
    position: relative;
}

.file-short:hover .fs-delete {
    opacity: 0.7;
}

.file-short .fs-delete:hover {
    opacity: 1;
}

.file-short .fs-delete .icon-remove {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/css/images/icon-x-hovered.svg') no-repeat;
    background-size: 16px;
    background-position: center;
}

/* Make comment edit/delete icons darker so they are clearly visible */
.comment .info-line .actions .icon-edit {
    background-image: url('/css/images/icon-item-edit-a-hovered.svg');
    opacity: 0.6;
}

.comment .info-line .actions .icon-remove {
    background-image: url('/css/images/icon-x-hovered.svg');
    opacity: 0.6;
}

.comment .info-line .actions .icon-edit:hover,
.comment .info-line .actions .icon-remove:hover {
    opacity: 1;
}

/* Comment toolbar: single line, scroll via arrows */
.emp-big-pad .comment .note-editor .note-toolbar {
    display: flex;
    flex-wrap: nowrap;
    overflow: visible;
    min-height: 34px;
    height: auto;
    align-items: center;
    padding: 2px 36px 2px 4px;
    white-space: nowrap;
    position: relative;
    z-index: 5;
}

.emp-big-pad .comment .note-editor .note-toolbar .note-btn-group {
    flex-shrink: 0;
    margin: 0 2px !important;
}

/* Employee News: keep comment box in normal flow instead of absolute positioning.
   The site.css rules position #addComment absolutely at the bottom of the nearest
   positioned ancestor, but in the employee news layout the documents section and
   save/cancel buttons sit below the comments section and cover it. */
.emp-big-pad #addComment {
    position: static;
    width: 100%;
    margin-bottom: 10px;
}

.emp-big-pad #addComment.editing {
    position: relative;
    height: 180px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    bottom: 0;
}

.emp-big-pad #addComment .comment-text-wrapper {
    border: 1px solid #d2e1ea;
    border-radius: 3px;
    background-color: #f6f8fa;
    cursor: text;
    width: 100%;
    margin-left: 0;
}

.emp-big-pad #addComment .note-frame {
    width: 100%;
    margin-left: 0;
    max-width: 100%;
    box-sizing: border-box;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.emp-big-pad #addComment.editing .text {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.emp-big-pad #addComment.editing .text .note-editor {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.emp-big-pad #addComment.editing .text .note-editing-area {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* Employee News: pinned details/documents, comments take remaining space */
.emp-big-pad:has(> .task-split.full-height) {
    padding-bottom: 0;
}

.emp-big-pad > .task-split.full-height {
    overflow: hidden;
    position: relative;
}

.emp-big-pad > .task-split.full-height > .fields.locked,
.emp-big-pad > .task-split.full-height > .task-header,
.emp-big-pad > .task-split.full-height > .task-split.emp-short-docs,
.emp-big-pad > .task-split.full-height > .details-buttons {
    flex-shrink: 0;
    flex-grow: 0;
}

.emp-big-pad > .task-split.full-height > .fields.locked {
    margin-bottom: 0;
    padding-bottom: 0;
}

.emp-big-pad > .task-split.full-height > .task-header.emp-inline-header {
    margin-top: 0;
}

/* When comments are collapsed, keep the comment header in place */
.emp-big-pad > .task-split.full-height > .task-header.comments-collapsed {
    margin-top: 0;
}

/* Pin documents section to the bottom of the panel */
/* Pin documents section to the bottom */
/* Pin documents section to the bottom */
.task-header.emp-docs-header,
.emp-docs-section.emp-docs-header {
    margin-top: auto;
}

/* Documents section min height */
.emp-docs-section {
    min-height: 100px;
}

.emp-docs-section > .task-header {
    border-top: 1px solid #8696A6 !important;
    border-width: 1px 0 0 0 !important;
    border-style: solid !important;
}

/* Vertical border line through the hours form, stopping at the docs section */
.task-split.full-height.emp-hours-form {
    position: relative;
}

.task-split.full-height.emp-hours-form::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 60%;
    width: 1px;
    background: #8696A6;
    z-index: 1;
    pointer-events: none;
}

.task-split.full-height.emp-hours-form > .emp-docs-section,
.task-split.full-height.emp-hours-form > .details-buttons {
    position: relative;
    z-index: 2;
    background: white;
}


/* emp-new-comment-wrapper is now inside the scrollable comments section */

.emp-big-pad > .task-split.full-height > .fields.comments .field {
    height: auto;
}

.emp-big-pad > .task-split.full-height > .fields.comments {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    height: auto;
}

/* Employee News: compact comment mode — close button */
.comment.compact-mode .emp-comment-close {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 28px;
    height: 28px;
    background: url('/css/images/icon-x-hovered.svg') no-repeat center;
    background-size: 18px;
    cursor: pointer;
    opacity: 0.7;
    z-index: 100;
}

.comment.compact-mode .emp-comment-close:hover {
    opacity: 1;
}

/* Employee News: compact comment mode — send button */
.emp-comment-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 100;
}

.emp-comment-send:hover {
    opacity: 0.7;
}

.emp-send-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23008AD1' d='M568.4 37.7C578.2 34.2 589 36.7 596.4 44C603.8 51.3 606.2 62.2 602.7 72L424.7 568.9C419.7 582.8 406.6 592 391.9 592C377.7 592 364.9 583.4 359.6 570.3L295.4 412.3C290.9 401.3 292.9 388.7 300.6 379.7L395.1 267.3C400.2 261.2 399.8 252.3 394.2 246.7C388.6 241.1 379.6 240.7 373.6 245.8L261.2 340.1C252.1 347.7 239.6 349.7 228.6 345.3L70.1 280.8C57 275.5 48.4 262.7 48.4 248.5C48.4 233.8 57.6 220.7 71.5 215.7L568.4 37.7z'/%3E%3C/svg%3E") no-repeat center;
    background-size: 22px;
}

.comment.compact-mode {
    position: relative;
}

/* Switch sits on its own line below the toolbar */
.emp-big-pad .comment .sorba-switch-wrap {
    position: static;
    padding: 6px 10px;
    border-bottom: 1px solid #8696A6;
    background: #f6f8fa;
}

.comment.compact-mode .sorba-switch-wrap {
    left: auto;
}

/* Remove grey line on editor open — the note-frame border is visible as a line */
.comment.compact-mode .note-frame {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    width: 100%;
    margin-left: 0;
}

/* Editor fills full width without gaps on left/right */
.comment.compact-mode .note-editor {
    width: 100%;
    margin: 0;
}

.comment.compact-mode .note-editing-area .note-editable {
    padding: 8px 10px;
}

/* Employee News: new comment wrapper — flex child between comments and documents */
.emp-big-pad > .task-split.full-height > .emp-new-comment-wrapper {
    flex-shrink: 0;
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    background: white;
    border-top: 0;
}


/* Activities tab: wrap date pickers to next line on narrow screens */
.flex-line.activities-line {
    flex-wrap: wrap;
    gap: 4px;
}

.flex-line.activities-line > .time-pickers {
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .flex-line.activities-line > .time-pickers {
        width: 100%;
    }

    .flex-line.activities-line > .time-pickers .flex-line {
        float: none;
        max-width: 200px;
    }
}

/* Employee News: filter bar */
.emp-news-filter-bar { padding: 10px 0; margin-bottom: 10px; }
.emp-news-filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.emp-news-filter-buttons > .new-entity-button { position: static; background-image: none; padding-right: 10px; }
.emp-news-filter-buttons > .new-entity-button.active { background: #ff9d18; border-color: #ff9d18; color: white; }
.emp-news-filter-panel { background: #f6f8fa; border-radius: 5px; padding: 15px; margin-top: 10px; margin-bottom: 15px; }
.emp-news-filter-panel .emp-news-filter-fields { height: auto; flex-grow: 0; overflow: visible; }
.emp-news-filter-panel .emp-news-filter-fields .field { margin-bottom: 8px; }
.emp-news-filter-panel .emp-news-filter-fields .inline-fields { display: flex; gap: 10px; }
.emp-news-filter-panel .emp-news-filter-fields .inline-fields .field { flex: 1; }
.emp-news-filter-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.emp-news-filter-actions > .new-entity-button { position: static; background-image: none; padding-right: 10px; }

/* Employee News: document preview overlay */
.emp-full-doc-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: white;
}

/* ===== Mobile Responsive: 768px ===== */
@media (max-width: 768px) {
    /* Map area: reduce excessive padding */
    .emp-map-area {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Contact boxes: allow full width */
    .emp-contact-box {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Details screen field padding: reduce large paddings.
       Scoped to the Employee section split-row via .emp-pad-top-1 so it doesn't bleed
       into the Emergency Contacts / Documents split-rows (which also have a :first-child .fields). */
    .module-employees .details-body:not(.small-width) .task-split > .split-row.emp-pad-top-1 > .fields:first-child {
        padding-right: 15px !important;
        padding-bottom: 0 !important;
        padding-left: 15px;
    }

    .module-employees .details-body:not(.small-width) .task-split > .split-row.emp-pad-top-1 > .fields:last-child {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Inline fields: stack vertically */
    .inline-fields {
        flex-direction: column !important;
    }

    .inline-fields > .field {
        min-width: 100% !important;
    }

    /* Year/month bar items: tighter padding */
    .emp-year-bar .item {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 11px;
    }

    /* Calendar inputs: allow shrinking */
    .emp-cal-wrap input {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .emp-cal-wrap {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Calendar inline layout: reduce fixed min-width */
    .jcalendar-inline {
        min-width: 0;
    }

    /* Appointment popup: fit mobile */
    .emp-appointment-popup {
        min-width: 0;
        max-width: 95vw;
        width: 95vw;
    }

    /* Task header inline: reduce left padding */
    .task-header.emp-inline-header {
        padding-left: 10px;
    }

    /* Emp big pad: reduce padding */
    .emp-big-pad {
        padding: 10px;
        padding-top: 0;
    }

    /* Split row emp-pad: reduce gap */
    .split-row.emp-pad {
        gap: 10px;
    }

    /* Absence calendars: stack vertically and stretch full width */
    .split-row.emp-pad.bigger-gap {
        flex-wrap: wrap;
        gap: 15px;
    }

    .split-row.emp-pad.bigger-gap > * {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .split-row.emp-pad.bigger-gap .jcalendar-inline {
        width: 100%;
        min-width: 0;
    }

    .split-row.emp-pad.bigger-gap #emp-cal-left,
    .split-row.emp-pad.bigger-gap #emp-cal-right {
        width: 100%;
    }

    /* Absence calendars: grid layout — calendars on top, from/to fields below */
    .split-row.emp-pad.bigger-gap {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .split-row.emp-pad.bigger-gap > .emp-cal-wrap {
        display: contents;
    }

    .split-row.emp-pad.bigger-gap > .emp-cal-wrap.left #emp-cal-left {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .split-row.emp-pad.bigger-gap > .emp-cal-wrap.right #emp-cal-right {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .split-row.emp-pad.bigger-gap > .emp-cal-wrap.left .right-aligned {
        grid-column: 1;
        grid-row: 3;
        align-items: start;
    }

    .split-row.emp-pad.bigger-gap > .emp-cal-wrap.right .left-aligned {
        grid-column: 2;
        grid-row: 3;
    }

    /* Calendar stretches full width */
    .split-row.emp-pad.bigger-gap #emp-cal-left,
    .split-row.emp-pad.bigger-gap #emp-cal-right {
        width: 100%;
    }

    .split-row.emp-pad.bigger-gap .jcalendar-inline {
        width: 100%;
        min-width: 0;
    }

    /* Absences new-form: side padding + calendar box-sizing so nothing sticks past
       the right edge in the 481-768px range (mirrors the same fixes from the 480
       block below — calendars otherwise overflow because the jcalendar lib sets
       intrinsic table widths and the borders aren't accounted for in content-box). */
    .emp-absences-screen .task-split > .emp-pad,
    .emp-absences-screen .task-split > .split-row.emp-pad {
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box;
    }

    .emp-absences-screen .task-split > .split-row.emp-pad.bigger-gap {
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .emp-absences-screen .jcalendar,
    .emp-absences-screen .jcalendar-inline {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .emp-absences-screen #emp-cal-left,
    .emp-absences-screen #emp-cal-right {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    .emp-absences-screen .jcalendar-inline table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
    }

    .emp-absences-screen .split-row.emp-pad.bigger-gap > .emp-cal-wrap > .right-aligned,
    .emp-absences-screen .split-row.emp-pad.bigger-gap > .emp-cal-wrap > .left-aligned {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    /* "To" label: hide on mobile */
    .emp-cal-wrap .left-aligned .emp-to-label {
        display: none;
    }

    /* Notes field: ensure usable height on mobile */
    .emp-pad.notes {
        min-height: 120px;
        max-height: none;
        margin-bottom: 20px;
    }

    .emp-pad.notes textarea {
        height: auto;
        min-height: 80px;
    }

    /* Hours screen: action buttons as icon-only */
    .new-entity-group {
        gap: 5px;
    }

    .new-entity-group > .new-entity-button {
        font-size: 0;
        padding: 0;
        width: 28px;
        height: 20px;
        padding-right: 0;
        background-position: center;
        background-size: 12px;
        min-width: 28px;
    }

    /* Document blocks: 2 per row on mobile */
    .details-body .file-link {
        width: calc(50% - 8px) !important;
        height: auto !important;
        min-height: 140px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    /* On mobile the .file-link shrinks to auto height (min 140px), so the desktop
       margin-top: 45px on the icon and margin-top: 15px on the name push the label
       to the very bottom of the tile. Tighten both for mobile only. */
    .details-body .file-link .type-icon,
    .details-body .file-link div.type-image {
        margin-top: 12px;
    }

    .details-body .file-link .file-name {
        margin-top: 6px;
    }

    .file-short {
        min-width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }

    .emp-short-docs {
        flex-wrap: wrap;
    }

    /* Payroll/Hours/Absences list views: hide year bar on mobile (year-bar gets `mobile-hide` class from Razor when in list/detail combo view) */
    .emp-year-bar.mobile-hide {
        display: none;
    }

    .split-row:not(.single) > .emp-big-pad:first-child {
        display: none;
    }

    .split-row:not(.single) > .emp-big-pad:last-child:not(:first-child) {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* Appointments screen: padding around schedule area */
    .emp-schedule-wrap {
        margin: 0 8px;
    }

    /* Hours screen: allow full-height sections to scroll on mobile */
    .task-split.full-height {
        height: auto !important;
        overflow: visible !important;
    }

    .emp-big-pad > .task-split.full-height {
        overflow: visible !important;
    }

    .details-body .task-split {
        height: auto !important;
        overflow: visible !important;
    }

    /* News screen edit view: full-height flex layout on mobile */
    .emp-big-pad.emp-full-height {
        height: calc(100vh - 100px) !important;
        overflow: hidden;
        padding-bottom: 0 !important;
    }

    /* Detail view (payroll/news) — pin the docs section + save/cancel buttons inside
       the visible viewport so the user doesn't have to scroll the ancestor (.details-body
       has overflow:auto) to reach them.

       The original calc(100vh - 100px) above is taller than .details-body's actual visible
       area (.body height = 100% - 70px, then .emp-flex subtracts another 36px for the
       breadcrumb badge — leaving ~100vh - 106px), and 100vh is itself unreliable on mobile
       browsers (URL bar collapse). So for the detail view we:
         1. Switch .emp-big-pad.emp-full-height to height:100% with a bounded parent chain.
         2. Force the entire chain (.details-body → outer .task-split → wrappers → detail)
            to behave as a flex column with overflow:hidden so the 100% resolves to the
            actual visible area.
         3. Make the inner .task-split.full-height flex:1 so the docs section sitting at
            its bottom (via margin-top:auto) lands at the bottom of the viewport.

       Scoped via :has(> .task-split.full-height) on .emp-big-pad.emp-full-height so the
       news LIST view (same class, no inner full-height split) isn't affected. */
    .emp-big-pad.emp-full-height:has(> .task-split.full-height) {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .emp-big-pad.emp-full-height:has(> .task-split.full-height) > .task-header {
        flex-shrink: 0;
    }

    .emp-big-pad.emp-full-height > .task-split.full-height {
        height: 100% !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

    .emp-big-pad.emp-full-height:has(> .task-split.full-height) > .task-split.full-height {
        flex: 1 1 0;
        min-height: 0;
        height: auto !important;
    }

    /* Parent-chain enforcement: turn .details-body and the wrappers between it and
       .emp-big-pad.emp-full-height into a bounded flex column so height:100% above
       resolves to .details-body's actual rendered height (not 100vh). */
    .details-body.visible:has(.emp-big-pad.emp-full-height > .task-split.full-height) {
        overflow: hidden !important;
    }

    /* News chain: .details-body.visible > .task-split.full-height > .emp-pad.emp-full-height > .emp-big-pad.emp-full-height */
    .details-body.visible > .task-split.full-height:has(> .emp-pad.emp-full-height > .emp-big-pad.emp-full-height > .task-split.full-height) {
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .details-body.visible > .task-split.full-height:has(> .emp-pad.emp-full-height > .emp-big-pad.emp-full-height > .task-split.full-height) > .emp-pad.emp-full-height {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Payroll chain: .details-body.visible > .task-split (no .full-height) > .split-row > .emp-big-pad.emp-full-height */
    .details-body.visible > .task-split:not(.full-height):has(> .split-row > .emp-big-pad.emp-full-height > .task-split.full-height) {
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .details-body.visible > .task-split:not(.full-height):has(> .split-row > .emp-big-pad.emp-full-height > .task-split.full-height) > .split-row {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .emp-big-pad.emp-full-height > .task-split.full-height > .fields.locked {
        flex-shrink: 0;
    }

    .emp-big-pad.emp-full-height > .task-split.full-height > .task-header.emp-inline-header {
        flex-shrink: 0;
    }

    .emp-big-pad.emp-full-height > .task-split.full-height > .fields.comments {
        flex: 1 1 0;
        min-height: 60px;
        overflow-y: auto;
    }

    .emp-big-pad.emp-full-height > .task-split.full-height > .emp-new-comment-wrapper {
        flex-shrink: 0;
    }

    .emp-big-pad.emp-full-height > .task-split.full-height > .task-header:not(.emp-inline-header) {
        flex-shrink: 0;
        margin-top: auto;
    }

    .emp-big-pad.emp-full-height > .task-split.full-height > .task-split.emp-short-docs {
        flex-shrink: 0;
        max-height: 80px;
        overflow: hidden;
    }

    .emp-big-pad.emp-full-height > .task-split.full-height > .task-split.emp-short-docs .file-short {
        min-width: 80px;
    }

    .emp-big-pad.emp-full-height > .task-split.full-height > .task-split.emp-short-docs .fs-name {
        font-size: 10px;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .emp-big-pad.emp-full-height > .task-split.full-height > .details-buttons {
        flex-shrink: 0;
    }

    /* News detail view: pin the docs section to the bottom (margin-top:auto consumes
       leftover space when the comments section isn't growing — e.g. comments
       collapsed, no comments yet, or new-task ID==0 path). When comments is growing
       (flex:1 1 0), there's no leftover space and the auto margin collapses to 0,
       so the docs section sits naturally right after the comments. */
    .emp-big-pad.emp-full-height > .task-split.full-height > .emp-docs-section {
        flex-shrink: 0;
        margin-top: auto;
    }

    /* Docs short list inside .emp-docs-section (news variant) — cap height like the
       payroll variant (where .task-split.emp-short-docs is a direct child of
       .task-split.full-height and already capped by the rule above). */
    .emp-big-pad.emp-full-height > .task-split.full-height > .emp-docs-section > .task-split.emp-short-docs {
        max-height: 80px;
        overflow: hidden;
    }

    /* New news task (ID == 0): no comments + no docs section, just .fields.locked
       and .details-buttons. Pin the buttons to the bottom directly. The :has() guard
       avoids double margin-top:auto (which would split the free space) when the
       docs section is also present. */
    .emp-big-pad.emp-full-height > .task-split.full-height:not(:has(> .emp-docs-section)) > .details-buttons {
        margin-top: auto;
    }

    /* Hours screen: add report form — stack left/right vertically */
    .split-row.emp-pad.bigger-gap.emp-hours,
    .details-body.small-width .task-split .split-row.emp-pad.bigger-gap.emp-hours {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
    }

    .split-row.emp-pad.bigger-gap.emp-hours > *,
    .split-row.emp-pad.bigger-gap.emp-hours > *:first-child,
    .split-row.emp-pad.bigger-gap.emp-hours > *:last-child {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .split-row.emp-pad.bigger-gap.emp-hours .fields.no-pad {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .split-row.emp-pad.bigger-gap.emp-hours > .emp-pad {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide vertical column divider — columns are stacked on mobile */
    .task-split.full-height.emp-hours-form::before {
        display: none;
    }

    /* Single source of horizontal padding for the form. Every section
       (summary box, date/project inputs, time/wage tables, notes textarea)
       fills the column edge-to-edge so they all share the same left/right
       edges with symmetric padding from the page. */
    .emp-hours .fields.no-pad,
    .emp-hours .fields.no-pad.right {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .emp-hours .fields.no-pad > .emp-pad,
    .emp-hours .fields.no-pad > .field,
    .emp-hours .fields.no-pad > .field.with-table {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .split-row.emp-pad.bigger-gap.emp-hours > .emp-pad {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Drop the 7px left margin on inputs/textareas inside this form so they
       align flush with the table/summary box left edge. */
    .emp-hours .fields .field .input > input,
    .emp-hours .fields .field .input > textarea {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Pin Cancel/Save to the bottom of the viewport */
    .task-split.emp-hours-form + .details-buttons {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: white;
        border-top: 1px solid #8696A6;
    }

    /* Form container holds the only horizontal padding so every child shares
       the same left/right edges. Leave room at the bottom for sticky buttons. */
    .split-row.emp-pad.bigger-gap.emp-hours {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 50px !important;
    }

    /* Show the table column label above each cell when the row collapses
       into a card on mobile — otherwise users see bare inputs with no context. */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: 'Outfit';
        font-size: 11px;
        color: #374857;
        margin-bottom: 3px;
    }

    /* Hours screen: day list full width, capped height, scrollable */
    .split-row.emp-pad.emp-hours-columns {
        flex-wrap: wrap;
    }

    .split-row.emp-pad.emp-hours-columns > *:first-child {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .split-row.emp-pad.emp-hours-columns > * {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .split-row.emp-pad.emp-hours-columns .emp-box-column .single-child {
        max-height: none;
        overflow-y: visible;
    }

    /* Hours screen: on mobile, show the right-column boxes (Current Date, Salary,
       Absences, Expenses) FIRST and the big day-list box SECOND. Reorder via
       flex order on the two children of .emp-hours-columns. */
    .emp-hours-screen .split-row.emp-pad.emp-hours-columns > *:first-child {
        order: 2;
        margin-top: 10px;
    }

    .emp-hours-screen .split-row.emp-pad.emp-hours-columns > *:last-child {
        order: 1;
    }

    /* Hide Salary / Absences / Expenses boxes (any .emp-info-box inside the
       right-column .emp-box-column.text-center) when their .emp-body has no
       element children. The Current Date box always has content, so it's safe
       to match all info-boxes in this column — only the empty ones get hidden. */
    .emp-hours-screen .emp-box-column.text-center > .emp-info-box:has(> .emp-body:not(:has(*))) {
        display: none;
    }

    /* Top margin on the Current Date box so it isn't glued to the top of the page */
    .emp-hours-screen .emp-box-column.text-center > .emp-info-box:first-child {
        margin-top: 10px;
    }

    /* Profile image: hide on narrow screens to free space */
    .details-body .task-split .split-row .profile-image {
        display: none;
    }

    /* Emp details text area: smaller */
    .details-body .fields .field .input textarea.emp-details-txtarea {
        height: 80px;
        min-height: 80px;
    }

    /* Emp pills (morning/afternoon selectors): allow wrapping */
    .emp-pills {
        flex-wrap: wrap;
    }

    .emp-pills .pill {
        min-width: 80px;
        max-width: none;
    }

    /* News filter panel: stack */
    .emp-news-filter-panel .emp-news-filter-fields .inline-fields {
        flex-direction: column;
    }

    /* Document previewer: full coverage on mobile */
    .emp-full-doc-preview {
        position: fixed;
        top: 35px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99998;
        background: white;
    }

    .emp-full-doc-preview .file-preview-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .files-docs.emp-module .file-preview-overlay,
    .files-docs.emp-module.no-preview-top-space .file-preview-overlay {
        position: fixed;
        top: 35px;
        left: 0;
        width: 100%;
        height: calc(100% - 35px);
        z-index: 99999;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}

/* ===== Mobile Responsive: 480px ===== */
@media (max-width: 480px) {
    /* Map area: minimal padding */
    .emp-map-area {
        padding-left: 8px;
        padding-right: 8px;
        min-height: 150px;
    }

    /* Details screen: remove the column separator and add breathe-room padding.
       Scoped to .emp-pad-top-1 so the rule doesn't strip the right border off the
       first .fields.emp-contact-box in the Emergency Contacts split-row. */
    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields:first-child,
    .module-employees .details-body:not(.small-width) .task-split > .split-row.emp-pad-top-1 > .fields:first-child {
        border-right: none;
        padding-left: 18px;
        padding-right: 18px;
    }

    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields:last-child,
    .module-employees .details-body:not(.small-width) .task-split > .split-row.emp-pad-top-1 > .fields:last-child {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Split rows: stack fields vertically (except appointments toolbar) */
    .details-body .task-split .split-row:not(.emp-side-borders) {
        flex-direction: column !important;
    }

    .details-body .task-split .split-row > .fields {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* Kill the .emp-pad-top-1 1rem top padding on the avatar split-row so the circle sits flush at the top */
    .module-employees .details-body .task-split > .split-row.emp-pad-top-1:first-child {
        padding-top: 0 !important;
    }

    /* Employee Details screen: pin the collapsed Emergency Contacts + Documents
       task-headers to the bottom of the viewport so they're tappable without
       scrolling. The active task-split flex-grows to fill the gap, naturally
       pushing the remaining (collapsed) headers below it. */
    .module-employees .details-body.emp-details-screen {
        overflow: hidden !important;
    }

    .module-employees .details-body.emp-details-screen > .task-header {
        flex-shrink: 0;
    }

    .module-employees .details-body.emp-details-screen > .task-split:not(.hidden) {
        flex: 1 1 auto !important;
        min-height: 0;
        min-width: 0 !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-gutter: auto !important;
    }

    /* Emergency contacts: give the row symmetric side padding so contact boxes
       don't get flush against (or clipped by) the right edge, and ensure each
       box can shrink to fit the viewport */
    .module-employees .details-body.emp-details-screen .emp-emergency-wrap.emp-contact-split {
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box;
    }

    .module-employees .details-body.emp-details-screen .emp-contact-box {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: 0 12px;
        align-content: flex-start;
    }

    /* Checkboxes row spans full width at the top of the box */
    .module-employees .details-body.emp-details-screen .emp-contact-box > .inline-fields.emp-checkboxes {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    /* Text fields (Designation, First Name, Surname, etc.) lay out 2 per row */
    .module-employees .details-body.emp-details-screen .emp-contact-box > .field.no-icon {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
        max-width: calc(50% - 6px) !important;
        box-sizing: border-box;
    }

    /* Employee details: lay out the two field columns as a 2-per-row grid to save vertical space.
       Inline-fields wrappers collapse via display:contents so all .field nodes become siblings.
       Scoped to .emp-pad-top-1 so it doesn't reshape the Emergency Contacts split-row. */
    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields {
        display: flex;
        flex-wrap: wrap;
        gap: 0 14px;
        align-content: flex-start;
    }

    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields > .inline-fields {
        display: contents !important;
    }

    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields > .field.no-icon,
    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields > .inline-fields > .field.no-icon {
        flex: 1 1 calc(50% - 7px) !important;
        min-width: 0 !important;
        max-width: calc(50% - 7px) !important;
        box-sizing: border-box;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Address textarea (and loading placeholder for it) keeps full width */
    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields > .field.no-icon:has(textarea),
    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields > .field.no-icon:has(> .loading-placeholder.large-height) {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* Big profile avatar above all fields */
    .module-employees .details-body .task-split .split-row .profile-image {
        display: block !important;
        position: relative !important;
        width: 80px;
        height: 80px;
        margin: 5px auto 6px;
        left: auto !important;
        top: auto !important;
        order: -1;
        border-radius: 50% !important;
        box-shadow: rgb(213, 213, 213) 0 1px 6px;
    }

        .module-employees .details-body .task-split .split-row .profile-image::before {
            display: none !important;
        }

    /* Collapse the gap between the two field columns (above Work Phone) */
    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields:first-child {
        padding-bottom: 0 !important;
        height: auto !important;
    }

    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields:last-child {
        padding-top: 8px !important;
        height: auto !important;
    }

    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields:first-child > .field.no-icon:last-child,
    .module-employees .details-body .task-split > .split-row.emp-pad-top-1 > .fields:first-child > .inline-fields:last-child > .field.no-icon {
        margin-bottom: 0 !important;
    }

    /* Emp big pad: even tighter */
    .emp-big-pad {
        padding: 6px;
        padding-top: 0;
    }

    /* Split row paddings for payroll/news */
    .split-row > .emp-big-pad:last-child > .task-split > .task-header {
        padding-left: 8px;
        padding-right: 8px;
    }

    .split-row > .emp-big-pad:last-child > .task-split > .fields.comments {
        padding-left: 8px !important;
        padding-right: 8px;
    }

    .split-row > .emp-big-pad:last-child .fields {
        padding-left: 8px !important;
    }

    /* Year/month bar: even tighter */
    .emp-year-bar .item {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 10px;
    }

    .emp-year-bar {
        width: calc(100% - 10px);
        margin-left: 5px;
    }

    /* Badge active menu (breadcrumb): compact */
    .badge-active-menu {
        font-size: 11px;
    }

    .badge-active-menu span {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Task header: compact layout */
    .task-header.emp-split-task .task-name.emp-task-title {
        font-size: 12px;
    }


    /* Contact boxes: full width, no gap */
    .emp-contact-split {
        flex-direction: column;
        gap: 10px;
    }

    /* Emp ver line: hide decoration */
    .emp-ver-line {
        display: none;
    }

    /* Comment editor: reduce switch padding */
    .comment .note-editor .note-toolbar {
        padding-left: 10px !important;
    }

    .comment .sorba-switch-wrap {
        position: static;
        margin-bottom: 5px;
    }

    /* Appointment popup: full width */
    .emp-appointment-popup {
        width: 98vw;
        max-width: 98vw;
    }

    /* Hours screen columns: stack */
    .split-row.emp-pad.emp-hours-columns > * {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .split-row.emp-pad.emp-hours-columns {
        flex-wrap: wrap;
    }

    /* Absences list: put Type on row 1, From + To on row 2 so dd.MM.yyyy never gets cut off.
       Icon stays in column 1, activity-task bubble (absolute) stays top-right */
    .emp-fields-inline.with-icon {
        flex-wrap: wrap !important;
        column-gap: 8px;
        row-gap: 2px;
        padding-right: 30px;
    }

    .emp-fields-inline.with-icon > .field.no-icon {
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Type takes the rest of row 1 next to the icon */
    .emp-fields-inline.with-icon > .field.no-icon:nth-of-type(1) {
        flex: 1 1 calc(100% - 28px) !important;
    }

    /* From and To each take half of row 2 */
    .emp-fields-inline.with-icon > .field.no-icon:nth-of-type(2),
    .emp-fields-inline.with-icon > .field.no-icon:nth-of-type(3) {
        flex: 1 1 calc(50% - 4px) !important;
    }

    /* Undo the pr-40 right-padding on the "To" input so the date isn't clipped */
    .emp-fields-inline.with-icon input.pr-40 {
        padding-right: 6px;
    }

    /* Slightly shrink the inputs/labels so three 10-char dates fit comfortably */
    .emp-fields-inline.with-icon .field.no-icon .label {
        font-size: 10px;
    }

    .emp-fields-inline.with-icon .field.no-icon .input > input {
        font-size: 11px;
    }

    /* Hours report tables: collapse each row into a vertical card on mobile */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid,
    .emp-hours .emp-table-scroll-wrap table.sorba-grid tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Hide the header row (only rows that actually contain <th>) */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid tr.header-row {
        display: none !important;
    }

    /* Data row becomes a stacked card. Symmetric horizontal padding so the
       content inside the card matches the alignment of the Notes textarea
       and the other form sections (the absolute remove "X" in the top-right
       sits next to the short data-label text, so it no longer needs reserved
       right padding). */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid tr {
        display: block !important;
        border: 1px solid #d2e1ea;
        border-radius: 4px;
        margin-bottom: 6px;
        padding: 6px;
        position: relative;
    }

    /* First cell needs a little right padding so its data-label text doesn't
       run under the absolute remove button. */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid tr > td:first-child[data-label] {
        padding-right: 22px !important;
    }

    /* Each cell becomes a full-width block inside the card, separated by a thin divider */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px 2px !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        border: 0;
        border-bottom: 1px solid #e3ecf1 !important;
    }

    .emp-hours .emp-table-scroll-wrap table.sorba-grid td:last-child {
        border-bottom: 0 !important;
    }

    /* Undo the forced 80px width on time inputs */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid td[width="80"] {
        width: 100% !important;
    }

    .emp-hours .emp-table-scroll-wrap table.sorba-grid td[width="80"] input,
    .emp-hours .emp-table-scroll-wrap table.sorba-grid td input.emp-hide-select {
        width: 100% !important;
        max-width: 100%;
        padding: 2px 4px !important;
    }

    /* Hide the Designation cell (second .emp-masked, Time Record table) — Wage dropdown already shows the name */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid td.emp-masked + td.emp-masked {
        display: none !important;
    }

    /* Hide the Unit cell — unit is shown inside the Total cell instead */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid td.unit-cell {
        display: none !important;
    }

    /* Append "h" inside the Total cell. Wrap so the data-label sits on its
       own line above the value + unit pair. */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid td.total-cell {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 4px;
    }

    .emp-hours .emp-table-scroll-wrap table.sorba-grid td.total-cell[data-label]::before {
        width: 100%;
    }

    .emp-hours .emp-table-scroll-wrap table.sorba-grid td.total-cell::after {
        content: "h";
        color: #374857;
        flex-shrink: 0;
    }

    /* Remove-row button sits in the top-right corner of the card */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid td.emp-row-remove {
        position: absolute !important;
        top: 4px;
        right: 4px;
        width: auto !important;
        padding: 0 !important;
        display: block !important;
        border-bottom: 0 !important;
    }

    /* Add-row row: full-width dashed button, no card styling */
    .emp-hours .emp-table-scroll-wrap table.sorba-grid tr.add-row {
        border: 0 !important;
        padding: 0 !important;
        margin-bottom: 8px;
    }

    .emp-hours .emp-table-scroll-wrap table.sorba-grid td.row-add {
        border: 1px dashed #8696A6 !important;
        border-radius: 4px;
        padding: 8px !important;
        text-align: center;
    }

    /* ========================================================================
       Absences screen: per-row card styling so each absence is easy to scan/tap.
       The .emp-fields-inline.with-icon entries inside .emp-info-box bodies get
       a card border, padding and breathing room between siblings. */
    .emp-absences-screen .emp-info-box .emp-body .emp-fields-inline.with-icon.hoverable {
        border: 1px solid #d2e1ea;
        border-radius: 6px;
        background: #ffffff;
        padding: 8px 30px 8px 8px;
        margin-bottom: 8px;
        box-sizing: border-box;
    }

    .emp-absences-screen .emp-info-box .emp-body .emp-fields-inline.with-icon.hoverable:last-child {
        margin-bottom: 0;
    }

    /* Slight inner padding so the icon doesn't crowd the type field */
    .emp-absences-screen .emp-info-box .emp-body .emp-fields-inline.with-icon.hoverable > .icon-holiday {
        margin-top: 2px;
    }

    /* ========================================================================
       New Absence form (when adding): keep the form inside the viewport on mobile.
       Various inner elements (the dropdown, emp-details panel, notes textarea)
       were extending past the right edge. */
    .emp-absences-screen .task-split {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    .emp-absences-screen .task-split > .emp-pad,
    .emp-absences-screen .task-split > .split-row.emp-pad {
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Bigger right padding on the calendar grid so the calendars themselves
       (which span the full grid row) have visible breathing room on the right.
       The minmax(0, 1fr) is critical: default `1fr` won't shrink below the grid
       item's min-content, and the jsuites .jcalendar has min-width: 280px which
       combined with two calendars + two date-input columns pushes the grid wider
       than the viewport. minmax(0, 1fr) lets columns shrink to fit. */
    .emp-absences-screen .task-split > .split-row.emp-pad.bigger-gap {
        padding-left: 18px !important;
        padding-right: 18px !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    /* Override the jsuites .jcalendar 280px min-width which would otherwise force
       any grid item containing a calendar to be ≥280px wide */
    .emp-absences-screen .jcalendar,
    .emp-absences-screen .jcalendar-inline {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Calendars: clip any inner table width the jcalendar lib might set inline.
       min-width: 0 lets grid items shrink below their content size. */
    .emp-absences-screen #emp-cal-left,
    .emp-absences-screen #emp-cal-right {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    .emp-absences-screen .jcalendar-inline table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
    }

    /* The .right-aligned / .left-aligned date-input grid items also need to be
       shrinkable, otherwise their min-content (pills + input) drives the column
       width up which forces the calendar at col 1/-1 to be wider too */
    .emp-absences-screen .split-row.emp-pad.bigger-gap > .emp-cal-wrap > .right-aligned,
    .emp-absences-screen .split-row.emp-pad.bigger-gap > .emp-cal-wrap > .left-aligned {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    /* Main absences list: give the (now-reordered) Overtime box top margin so
       it isn't glued to the top of the page on mobile */
    .emp-absences-screen .split-row.emp-pad > .m-40 > .emp-box-column > .emp-info-box:first-child {
        margin-top: 10px;
    }

    /* The .emp-details summary panel has 40px left padding on desktop which
       overflows on narrow phones — bring it back to symmetric mobile padding */
    .emp-absences-screen .emp-details {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        max-width: 100%;
    }

    /* The 30px gap on .emp-details .emp-fields-inline pushes the third field
       past the edge; allow wrapping and use a smaller gap on mobile */
    .emp-absences-screen .emp-details .emp-fields-inline {
        flex-wrap: wrap;
        gap: 10px 16px;
    }

    .emp-absences-screen .emp-details .emp-fields-inline > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Notes textarea should respect the viewport */
    .emp-absences-screen .emp-pad.notes textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Container query: stack boxes vertically when the employee container is narrow */
@container emp-container (max-width: 700px) {
    .split-row.emp-pad > *.m-60,
    .split-row.emp-pad > *.m-40 {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .split-row.emp-pad {
        flex-wrap: wrap;
    }

    .split-row.emp-pad.emp-hours-columns {
        flex-wrap: wrap;
    }

    .split-row.emp-pad.emp-hours-columns > *,
    .split-row.emp-pad.emp-hours-columns > *:first-child {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* Payroll: task view takes full width, hides task list */
    .split-row:not(.single) > .emp-big-pad:first-child {
        display: none;
    }

    .split-row:not(.single) > .emp-big-pad:last-child {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* News: fix task title-section / description width mismatch */
    .content .body .activity-task .content-part .title-section {
        padding-right: 2px;
    }

    .content .body .activity-task .content-part .task-description {
        padding-right: 10px;
    }

    .content .body .activity-task .content-part .task-description .right-actions {
        position: static;
        text-align: left;
        margin-top: 5px;
        max-width: 100%;
    }
}