/* =============================================================================
   HR - AM Navy soft theme (22 Oct 2026)
   Every HR page root carries .hr-page. White page, tiles in a soft navy
   tint, cards in a lighter tint, tables on white with a tinted header row.
   Slow, smooth movement; breathing room under the page header.
   ============================================================================= */

.hr-page { padding-bottom: 40px; }

.hr-page > .page-header { padding-bottom: 8px; margin-bottom: 6px; }

/* ---- Tiles ------------------------------------------------------------------- */

.hr-page .hr-widgets { gap: 14px; margin: 18px 0 22px; }

.hr-page .hr-widget {
    position: relative;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid rgba(25, 33, 59, 0.08);
    border-radius: 5px;
    background: rgba(25, 33, 59, 0.045);
    transition: border-color 280ms ease, background-color 280ms ease, transform 280ms ease, box-shadow 280ms ease;
}

.hr-page .hr-widget:hover { border-color: rgba(25, 33, 59, 0.16); background: rgba(25, 33, 59, 0.06); }
.hr-page .hr-widget--selected,
.hr-page .hr-widget--link:hover {
    border-color: var(--accent, #19213b);
    box-shadow: 0 0 0 1px var(--accent, #19213b) inset;
}
.hr-page .hr-dash-tiles .hr-widget:not(.hr-widget--link):hover,
.hr-page .attendance-tiles .hr-widget:hover { background: rgba(25, 33, 59, 0.045); border-color: rgba(25, 33, 59, 0.08); }

.hr-page .hr-widget__value { font-size: 26px; color: var(--accent, #19213b); }
.hr-page .hr-widget--neutral .hr-widget__value { color: var(--accent, #19213b); }
.hr-page .hr-widget__label { font-weight: 600; color: var(--text-secondary, #43484f); }
.hr-page .hr-widget__sub { color: var(--text-muted, #8b929b); }

.hr-page .hr-widget__icon {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid rgba(25, 33, 59, 0.1);
    background: var(--surface-panel, #fff);
    color: var(--accent, #19213b);
}

/* ---- Cards ------------------------------------------------------------------- */

.hr-page .hr-dash-card,
.hr-page .hr-card {
    border: 1px solid rgba(25, 33, 59, 0.08);
    border-radius: 5px;
    background: rgba(25, 33, 59, 0.022);
}

.hr-page .hr-dash-grid { gap: 20px; }
.hr-page .hr-dash-card__head { border-bottom-color: rgba(25, 33, 59, 0.06); padding: 16px 18px; }
.hr-page .hr-dash-card__link:hover { color: var(--accent, #19213b); background: rgba(25, 33, 59, 0.06); }

/* hr.css gives every direct child of the page a padding gutter; a tinted
   card or a bordered table takes the gutter as margin instead, so its edge
   lines up with the header and the tiles. */
.hr-page > .hr-card,
.hr-page > .data-table-scroll {
    margin-left: var(--gutter, 24px);
    margin-right: var(--gutter, 24px);
}

/* Beats hr.css's ".page-surface--gutter > *:not(...):not(...)" padding. */
.hr-page.page-surface--gutter > .data-table-scroll:not(.page-header) { padding-left: 0; padding-right: 0; }
.hr-page.page-surface--gutter > .hr-card:not(.page-header) { padding-left: 22px; padding-right: 22px; }

.hr-page .hr-card {
    padding: 20px 22px;
    margin-bottom: 22px;
    animation: hr-fade 360ms ease;
}

.hr-page .hr-card:empty { display: none; }

.attendance-total td:first-child { padding-left: 14px; }

.hr-page .hr-card__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.hr-page .hr-card__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary, #19213b); }
.hr-page .hr-card__hint { margin: 3px 0 0; font-size: 13px; color: var(--text-muted, #8b929b); }

.hr-page .hr-card input,
.hr-page .hr-card select,
.hr-page .hr-card textarea { background: var(--surface-panel, #fff); }

/* ---- Tables and toolbars --------------------------------------------------------- */

.hr-page .page-toolbar { margin: 16px 0 14px; }

.hr-page .data-table-scroll {
    border: 1px solid rgba(25, 33, 59, 0.08);
    border-radius: 5px;
    background: var(--surface-panel, #fff);
}

.hr-page .hr-card .data-table-scroll { border-color: rgba(25, 33, 59, 0.06); }

.hr-page .data-table thead th { background: rgba(25, 33, 59, 0.035); }
.hr-page .data-table tbody tr { transition: background-color 240ms ease; }
.hr-page .data-table tbody tr:hover { background: rgba(25, 33, 59, 0.03); }

.hr-page .cal-grid { border-radius: 5px; overflow: hidden; }

/* ---- Attendance ---------------------------------------------------------------- */

.attendance-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    align-items: end;
}

.attendance-form__people {
    grid-column: span 2;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.attendance-form__people > :first-child { flex: 1 1 auto; min-width: 0; }

.attendance-form__grid .bks-field--wide,
.attendance-form__grid > :last-child { grid-column: 1 / -1; }

.attendance-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.attendance-form__summary { margin: 0; font-size: 13px; color: var(--text-secondary, #43484f); }
.attendance-form__summary.is-error { color: var(--status-danger, #c62828); }

.attendance-list__filters { display: flex; gap: 12px; flex-wrap: wrap; }
.attendance-list__filters > * { min-width: 170px; }

/* Attendance stacks tiles, the log form and the table, so it is taller than
   the screen: the page itself scrolls, and nothing in it shrinks to fit. A
   page-surface is fixed height with overflow hidden, and the table asked
   for the leftover height, which the form had already taken, so the rows
   were cut off with no way to reach them. */
.page-surface.attendance-page { overflow-y: auto; }
.page-surface.attendance-page > * { flex: none; }
.attendance-page .attendance-list .data-table-scroll {
    flex: none;
    min-height: auto;
    overflow-x: auto;
    overflow-y: visible;
}

/* All attendance sits on white; only the log form and the tiles are tinted. */
.hr-page .hr-card.attendance-list { background: var(--surface-panel, #fff); }

/* All attendance: flat, no rounded corners and no inner padding. */
.hr-page.page-surface--gutter > .hr-card.attendance-list:not(.page-header) {
    border: none;
    border-radius: 0;
    padding: 0;
}

.attendance-row { cursor: pointer; }

.attendance-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(25, 33, 59, 0.05);
    color: var(--text-secondary, #43484f);
    font-size: 12px;
    white-space: nowrap;
}

.attendance-source--manual { background: rgba(25, 33, 59, 0.09); color: var(--accent, #19213b); }

.attendance-break {
    display: inline-flex;
    margin: 1px 4px 1px 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--status-warning-tint, #fff4e0);
    color: var(--status-warning, #a15c00);
    font-size: 12px;
    white-space: nowrap;
}

.attendance-break--paid { background: var(--status-success-tint, #e7f6ec); color: var(--status-success, #1e7a3c); }

.attendance-note { margin-top: 2px; font-size: 12px; color: var(--text-muted, #8b929b); }
.attendance-muted { color: var(--text-muted, #8b929b); }

.attendance-total td { background: rgba(25, 33, 59, 0.03); border-top: 1px solid rgba(25, 33, 59, 0.08); }

.attendance-delete:hover { color: var(--status-danger, #c62828); }

/* ---- Employee profile (the user panel's employee variant) -------------------------- */

.employee-form .employee-tabs { margin-bottom: 18px; }

.employee-form .employee-tabpane { animation: hr-fade 320ms ease; }

/* Details and Salary: each section is a soft card. */
.employee-form .slide-over__column { display: flex; flex-direction: column; gap: 16px; }

/* No ruled line between the two columns: the cards already separate them. */
.employee-form .slide-over__layout { gap: 16px; }
.employee-form .slide-over__column,
.employee-form .slide-over__column + .slide-over__column {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    border-left: none;
    border-top: none;
}

.employee-form .form-section {
    padding: 18px 20px;
    border: 1px solid rgba(25, 33, 59, 0.08);
    border-radius: 5px;
    background: rgba(25, 33, 59, 0.022);
}

.employee-form .form-section:first-child { padding-top: 18px; }
.employee-form .form-section:last-child { padding-bottom: 18px; border-bottom: 1px solid rgba(25, 33, 59, 0.08); }

.employee-form .form-section__badge {
    border: 1px solid rgba(25, 33, 59, 0.1);
    border-radius: 5px;
    background: var(--surface-panel, #fff);
    color: var(--accent, #19213b);
}

.employee-form .form-section .form-field__control,
.employee-form .form-section select,
.employee-form .form-section textarea,
.employee-form .employee-leave-form input,
.employee-form .employee-leave-form select,
.employee-form .employee-leave-form textarea { background: var(--surface-panel, #fff); }

.employee-form .form-section .form-field__control[readonly],
.employee-form .kudio-field--read-only .form-field__control { background: rgba(25, 33, 59, 0.03); }

.employee-form .avatar-uploader {
    border: 1px solid rgba(25, 33, 59, 0.08);
    border-radius: 5px;
    background: var(--surface-panel, #fff);
}

.employee-form .role-checkbox {
    border-radius: 5px;
    background: var(--surface-panel, #fff);
}

/* Shifts, Attendance, Annual Leave, Payroll, Agent Meeko: white, no tint. */
.employee-form .employee-tab-section {
    gap: 16px;
    background: transparent;
}

.employee-form .employee-tab-section__title { font-size: 15px; color: var(--text-primary, #19213b); }

/* The add form is hidden until Add is pressed; display:flex used to beat
   [hidden] and left an empty grey bar on the tab. */
.employee-form .employee-leave-form[hidden] { display: none; }

.employee-form .employee-leave-form {
    border: 1px solid rgba(25, 33, 59, 0.1);
    border-radius: 5px;
    background: var(--surface-panel, #fff);
}

.employee-form .leave-widgets { gap: 12px; }

.employee-form .leave-stat {
    border: 1px solid rgba(25, 33, 59, 0.08);
    border-radius: 5px;
    background: rgba(25, 33, 59, 0.045);
    transition: background-color 280ms ease, border-color 280ms ease;
}

.employee-form .leave-stat:hover { background: rgba(25, 33, 59, 0.06); border-color: rgba(25, 33, 59, 0.14); }
.employee-form .leave-stat--balance .leave-stat__value,
.employee-form .leave-stat--neutral .leave-stat__value { color: var(--accent, #19213b); }
.employee-form .leave-stat__label { font-weight: 600; color: var(--text-secondary, #43484f); }

.employee-form .employee-subhead {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent, #19213b);
    opacity: 0.75;
}

.employee-form .employee-table-scroll {
    border: 1px solid rgba(25, 33, 59, 0.08);
    border-radius: 5px;
    background: var(--surface-panel, #fff);
}

.employee-form .employee-table thead th { background: rgba(25, 33, 59, 0.035); border-bottom-color: rgba(25, 33, 59, 0.06); }
.employee-form .employee-table tbody tr { transition: background-color 240ms ease; }
.employee-form .employee-table tbody tr:hover { background: rgba(25, 33, 59, 0.03); }
.employee-form .employee-table__total td { background: rgba(25, 33, 59, 0.03); }

.employee-form .leave-action {
    border-radius: 5px;
    transition: background-color 240ms ease, color 240ms ease;
}

@keyframes hr-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hr-page .hr-widget,
    .hr-page .hr-card,
    .hr-page .data-table tbody tr { transition: none; animation: none; }
}

/* Phones: two tiles a row, as on the other modules. One a row at desktop
   padding stacked the four Attendance tiles (and the HR dashboard's) a full
   screen deep before the form or the list began. The corner icon goes, as a
   half-width tile has no corner to spare for it. */
@media (max-width: 560px) {
    .hr-page :is(.hr-widgets, .hr-dash-tiles) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .hr-page .hr-widget { padding: 10px 12px; }
    .hr-page .hr-widget__value { font-size: var(--font-size-large); }
    .hr-page .hr-widget__icon { display: none; }
    .hr-page .hr-widget__sub { font-size: var(--font-size-tiny); }
}

@media (max-width: 720px) {
    .attendance-form__people { grid-column: 1 / -1; }
    .hr-page .hr-card { padding: 16px; }
    .attendance-list__filters > * { min-width: 0; flex: 1 1 140px; }
}