/* Styles owned by the Hepra Attendance module.
   Injected by AttendanceTagHelperComponent, which runs after the Generic theme so these
   rules win over the Kendo theme at equal specificity. */

/* ABSENCE TIMELINE
   A plain CSS Grid: column 1 is the frozen employee name, columns 2..n+1 are one day each.
   Header cells stick to the top, name cells to the left, of the single scroll container. */

.abs-timeline {
    --abs-weekend: rgba(15, 23, 42, 0.055);
    --abs-line: rgba(15, 23, 42, 0.07);
    --abs-row-alt: #f7f8fa;
    --abs-month-line: #ced4da;
    --abs-today: #fa5252;
    --abs-header-bg: #ffffff;
    --abs-name-bg: #ffffff;

    overflow: auto;
    max-height: calc(100vh - 260px);
    min-height: 240px;
    border: 1px solid var(--abs-line);
    background: #fff;
}

.abs-grid {
    display: grid;
    position: relative;
    width: max-content;
    min-width: 100%;
}

/* --- frozen corner and header --- */

.abs-corner {
    grid-row: 1 / 3;
    grid-column: 1;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    background: var(--abs-header-bg);
    border-right: 1px solid var(--abs-month-line);
    border-bottom: 1px solid var(--abs-month-line);
}

.abs-month {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--abs-header-bg);
    border-left: 1px solid var(--abs-month-line);
    border-bottom: 1px solid var(--abs-month-line);
}

.abs-month-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Day numbers, one cell per day column, sticking directly under the month row.
   --abs-header-h is emitted inline by the component so this offset tracks HeaderHeight. */
.abs-day {
    position: sticky;
    top: var(--abs-header-h, 24px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.625rem;
    line-height: 1;
    color: #495057;
    background-color: var(--abs-header-bg);
    border-left: 1px solid var(--abs-line);
    border-bottom: 1px solid var(--abs-month-line);
}

/* Weekend numbers are dimmed and tinted to match the stripes in the body, so the weekly
   rhythm is readable in the header too. */
.abs-day-weekend {
    color: #adb5bd;
    background-image: linear-gradient(var(--abs-weekend), var(--abs-weekend));
}

/* --- frozen employee column --- */

.abs-name.abs-row-alt,
.abs-lane.abs-row-alt {
    background-color: var(--abs-row-alt);
}

.abs-name {
    grid-column: 1;
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--abs-name-bg);
    border-right: 1px solid var(--abs-month-line);
    border-bottom: 1px solid var(--abs-line);
}

/* --- day background ---
   One element per employee. Weekend stripes and day gridlines are tiled gradients, so a
   full year costs one element per row rather than 365. The inline background-position
   shifts the weekend layer onto the first Saturday of the range. */

.abs-lane {
    grid-column: 2 / -1;
    border-bottom: 1px solid var(--abs-line);
}

/* --- overlays drawn once across every row --- */

.abs-month-line {
    border-left: 1px solid var(--abs-month-line);
    pointer-events: none;
    z-index: 1;
}

.abs-today {
    box-shadow: inset 1px 0 0 var(--abs-today);
    pointer-events: none;
    z-index: 1;
}

/* --- absence bars --- */

/* Ordinary rows are short and carry a single centred band. Only a row where a full day and
   an hour based absence land on the same day gets "abs-stacked", which splits them into an
   upper and a lower band so neither hides the other. */
.abs-bar {
    align-self: center;
    height: 18px;
    margin: 0 1px;
    cursor: pointer;
    z-index: 1;
    background-color: var(--abs-color, var(--abs-unknown));
}

.abs-bar.abs-stacked {
    align-self: start;
    margin-top: 3px;
}

.abs-bar:hover {
    filter: brightness(0.92);
}

/* A bar continuing past the edge of the range runs flush to that edge instead of keeping
   its 1px gap, so a truncated absence does not read as one that ends here. */
.abs-bar-clip-start {
    margin-left: 0;
}

.abs-bar-clip-end {
    margin-right: 0;
}

.abs-bar-clip-both {
    margin-left: 0;
    margin-right: 0;
}

/* Hour based absences: a half height bar, so they read as partial at a glance. The segments
   inside are positioned by percentage of the working day. */
.abs-bar-partial {
    align-self: center;
    position: relative;
    height: 8px;
    z-index: 1;
}

.abs-bar-partial.abs-stacked {
    align-self: end;
    margin-bottom: 3px;
}

.partial-absence-segment {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    min-width: 3px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    box-shadow: none;
    background-color: var(--abs-color, var(--abs-unknown));
}

.partial-absence-segment:hover {
    filter: brightness(0.92);
}

.abs-timeline-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.abs-range-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 13rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
}

/* Pushes Today/Refresh to the right of the range stepper. */
.abs-timeline-toolbar .k-button:nth-last-child(2) {
    margin-left: auto;
}

/* Year shown between the previous/next buttons in the Leave Overview grid toolbar. */
.leave-year-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Leave Overview: days of an allowance left unused after its year is over. */
.leave-unused {
    color: red;
    font-weight: bold;
}

/* ABSENCE COLOURS
   Every bar, legend swatch and partial-day segment paints with var(--abs-color), which these
   classes set from the event Code. Retune the palette here - nothing in the component picks
   a colour. The class is "abs-code-" + the Code lowercased with non-alphanumerics stripped,
   so a new event type only needs a rule added below; without one it falls back to
   --abs-unknown.

   Palette matched to the reference statuses:
     amber        Vacation (employees) / absence (consultants)
     yellow-green Time off due to weekend shift
     cyan         On client site for training/implementation/meeting
     dark purple  Out sick
     dark red     Other reason
     magenta      Public holiday
     yellow       Planned (not yet approved) vacation */

.abs-timeline,
.absence-legend {
    --abs-unknown: #90a4ae;
}

.abs-code-vacation      { --abs-color: #ffc000; } /* Annual leave */
.abs-code-hours         { --abs-color: #92d050; } /* Using hours */
.abs-code-field         { --abs-color: #00b0f0; } /* Out on field */
.abs-code-implementation{ --abs-color: #00b0f0; } /* Implementation - same "on client site" */
.abs-code-sick          { --abs-color: #7030a0; } /* Sick leave */
.abs-code-sickhours     { --abs-color: #7030a0; } /* Sick leave hours */
.abs-code-personal      { --abs-color: #c00000; } /* Personal leave - "other reason" */
.abs-code-study         { --abs-color: #c00000; } /* Study leave - "other reason" */
.abs-code-holiday       { --abs-color: #ff00ff; } /* Holiday bonus */

/* No counterpart in the reference list; chosen not to collide with the above. */
.abs-code-parental      { --abs-color: #2f5597; } /* Parental leave - dark blue */
.abs-code-team          { --abs-color: #548235; } /* Team building - dark green */
.abs-code-teamhours     { --abs-color: #548235; } /* Team building hours */
.abs-code-unpaid        { --abs-color: #808080; } /* Additional vacation - grey */
.abs-code-exit          { --abs-color: #c55a11; } /* Private exit - dark orange */

/* Approvable absences not yet approved. Vacation gets the reference "Planned Vacation"
   yellow; every other pending type keeps its own colour and is marked by the outline, so
   the type stays readable. */
.abs-pending {
    outline: 1px dashed rgba(0, 0, 0, 0.55);
    outline-offset: -2px;
}

.abs-code-vacation.abs-pending {
    --abs-color: #ffff00;
}

/* ABSENCE TIMELINE LEGEND */

.absence-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
    min-width: 0;
}

.absence-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.absence-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    background-color: var(--abs-color, var(--abs-unknown));
    outline: 1px solid rgba(0, 0, 0, 0.15);
    outline-offset: -1px;
}

.absence-legend-label {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ABSENCE DETAILS WINDOW */

.absence-details-window {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.absence-details-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    align-items: start;
}

.absence-details-label {
    font-weight: 600;
    color: #666;
}

.absence-details-value {
    color: #222;
    white-space: pre-line;
}

/* An allowance comment lists how the days were arrived at, one reason per line. */
.allowance-comment {
    white-space: pre-line;
}

.absence-details-comment-row {
    padding-top: 0.5rem;
    border-top: 1px solid #e5e5e5;
}

.absence-details-muted {
    color: #999;
    font-style: italic;
}

.abs-timeline-empty {
    padding: 1.5rem;
    color: #888;
    font-style: italic;
    border: 1px solid var(--abs-line, #e9ecef);
    background: #fff;
}

/* REVIEW PAGE
   The entry picked in the review queue, marked out among the surrounding days of the past
   events grid next to it. Overrides the Kendo alternating row background, hence the cell
   selector and !important - the row rule alone loses to `.k-table-alt-row > td`. */

.k-grid tr.h-clo-under-review > td {
    background-color: #dbeafe !important;
    font-weight: 600;
}

/* EMPLOYEE DATA (/attendance/employee-data)
   The state pill of a version: in force today, starting later, superseded by a later date, corrected
   by a version with the same date, deleted. Colours are chosen here only - EmployeeRecordState.CssClass
   emits the classes. */
.h-employee-record-state {
    --employee-record-color: #6c757d;
    --employee-record-bg: rgba(108, 117, 125, 0.12);

    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--employee-record-color);
    background: var(--employee-record-bg);
}

.h-employee-record-state-current {
    --employee-record-color: #1b7f4d;
    --employee-record-bg: rgba(27, 127, 77, 0.12);
}

.h-employee-record-state-future {
    --employee-record-color: #1d5fa8;
    --employee-record-bg: rgba(29, 95, 168, 0.12);
}

.h-employee-record-state-replaced {
    --employee-record-color: #9a6700;
    --employee-record-bg: rgba(154, 103, 0, 0.12);
}

.h-employee-record-state-deleted {
    --employee-record-color: #b3261e;
    --employee-record-bg: rgba(179, 38, 30, 0.12);
}

/* Address and work-from-home days keep their line breaks. */
.h-employee-record-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Who wrote a version, under its timestamp in the history window. */
.h-employee-record-by {
    font-size: 0.8125rem;
    opacity: 0.75;
}

.h-employee-record-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0.5rem;
    cursor: pointer;
}

.h-employee-record-form label {
    display: block;
    margin: 0.9rem 0 0.25rem;
    font-weight: 600;
}

.h-employee-record-form > label:first-child {
    margin-top: 0;
}

.h-employee-record-form-value {
    margin: 0;
}

.h-employee-record-form .k-textarea {
    width: 100%;
}

.h-employee-record-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.h-employee-record-form-row > div {
    flex: 1 1 12rem;
}

.h-employee-record-field-hint {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    opacity: 0.75;
}

/* Validation and server refusals, shown in the window rather than as a toast. */
.h-employee-record-form-error {
    margin-top: 1rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #b3261e;
    background: rgba(179, 38, 30, 0.08);
    color: #b3261e;
}

.h-employee-record-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}