/* Human Resource & Payroll.
   Fixed-px like the rest of the suite: zoom scales the screen, it never rearranges it. */

/* ---------------------------------------------------------------- master screens */

.hr-master {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hr-master-art {
    width: 430px;
    height: 470px;
    flex: 0 0 430px;
    border: 1px solid #9db6cc;
    background: #f2f7fb;
    overflow: hidden;
}

.hr-master-art svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hr-master-art-clock {
    height: 420px;
}

.hr-master-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hr-srno {
    font-weight: 600;
    color: #1f4e79;
    min-width: 40px;
    display: inline-block;
}

.hr-readout {
    display: inline-block;
    padding: 2px 6px;
    min-height: 19px;
    border-bottom: 1px solid #b9cbd9;
    color: #14304d;
    font-weight: 600;
}

.hr-readout-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.hr-hint {
    color: #5a7186;
    font-size: 11px;
    line-height: 1.35;
    flex: 1 1 auto;
    min-width: 0;
}

.hr-hint-warn {
    color: #b3401b;
    font-weight: 600;
}

.hr-inline-note {
    color: #34506a;
    font-size: 11px;
    margin-right: 10px;
}

/* ---------------------------------------------------------------- listing grid */

.hr-grid {
    border: 1px solid #9db6cc;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hr-grid-head {
    display: flex;
    background: linear-gradient(#eaf2f9, #d5e4f0);
    border-bottom: 1px solid #9db6cc;
    font-weight: 600;
    color: #14304d;
    /* Reserves the body's scrollbar width so header and rows stay in column. */
    scrollbar-gutter: stable;
    overflow-y: scroll;
    scrollbar-width: none;
    /* Declaring overflow zeroes a flex item's automatic minimum size; without this a
       screen too short for its content squeezes the headings to half a line. */
    flex: 0 0 auto;
}

.hr-grid-head::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.hr-grid-body {
    flex: 1 1 auto;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    min-height: 260px;
    max-height: 420px;
}

.hr-grid-employees .hr-grid-body {
    min-height: 150px;
    max-height: 210px;
}

.hr-grid-documents .hr-grid-body {
    min-height: 220px;
    max-height: 300px;
}

.hr-grid-row {
    display: flex;
    border-bottom: 1px solid #e4edf4;
    cursor: pointer;
}

.hr-grid-row:hover {
    background: #eef6fd;
}

/* Keeps the row's own text readable rather than inheriting the selection blue. */
.hr-grid-row-selected,
.hr-grid-row-selected:hover {
    background: #2f6ea5;
    color: #fff;
}

.hr-grid-row-retired {
    color: #8b9aa6;
    font-style: italic;
}

.hr-grid-row-selected.hr-grid-row-retired {
    color: #dfe9f2;
}

.hr-col {
    padding: 2px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid #e4edf4;
}

.hr-col-sr { width: 62px; flex: 0 0 62px; }
.hr-col-code { width: 96px; flex: 0 0 96px; }
.hr-col-time { width: 96px; flex: 0 0 96px; }
.hr-col-note { width: 130px; flex: 0 0 130px; }
.hr-col-empcode { width: 118px; flex: 0 0 118px; }
.hr-col-mobile { width: 104px; flex: 0 0 104px; }
.hr-col-date { width: 104px; flex: 0 0 104px; }
.hr-col-size { width: 74px; flex: 0 0 74px; }
.hr-col-by { width: 130px; flex: 0 0 130px; }
.hr-col-actions { width: 128px; flex: 0 0 128px; border-right: 0; }
.hr-col-grow { flex: 1 1 0; min-width: 0; }

.hr-row-btn {
    font: inherit;
    font-size: 11px;
    padding: 0 6px;
    margin-right: 4px;
    border: 1px solid #9db6cc;
    border-radius: 3px;
    background: linear-gradient(#fdfefe, #e8f0f7);
    color: #14304d;
    cursor: pointer;
}

.hr-row-btn:hover {
    background: linear-gradient(#fff, #d8e8f5);
}

.hr-row-btn-danger {
    border-color: #d09a90;
    color: #8c2f18;
}

/* ---------------------------------------------------------------- employee input */

.hr-pick-panel {
    margin-bottom: 8px;
}

.hr-employee {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hr-employee-rail {
    width: 262px;
    flex: 0 0 262px;
    border: 1px solid #9db6cc;
    background: #f4f8fb;
    padding: 4px;
}

.hr-rail-caption {
    background: linear-gradient(#e4eff8, #cfe0ee);
    border: 1px solid #b9cbd9;
    padding: 2px 6px;
    font-weight: 600;
    color: #14304d;
    margin-bottom: 4px;
}

.hr-rail-art {
    border: 1px solid #c8d8e5;
    margin-bottom: 6px;
    background: #eef3f8;
}

.hr-rail-art svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* -- the rail's wall clock -------------------------------------------------
   Turned entirely by CSS. Each hand spins a full circle over its own period and
   starts part-way through, at the angle the server rendered as a negative delay. */

.clock { margin-bottom: 6px; }

.clock svg {
    width: 100%;
    height: auto;
    display: block;
}

.clock-hand {
    transform-origin: 150px 150px;
    animation-name: hsm-clock-turn;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* The minute and second hands step rather than sweep, as a quartz wall clock does. */
.clock-hand-minute { animation-timing-function: steps(60); }
.clock-hand-second { animation-timing-function: steps(60); }

@keyframes hsm-clock-turn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .clock-hand { animation: none; }
}

.hr-employee-form {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The form is dense: eighteen rows of fields, so the rows sit tighter than the suite default. */
.hr-entry-grid .entry-row {
    margin-bottom: 3px;
}

.hr-entry-grid .entry-row-tall {
    align-items: flex-start;
}

.entry-input-tiny {
    width: 62px;
    flex: 0 0 62px;
}

.entry-input-mid {
    width: 168px;
    flex: 0 0 168px;
}

.hr-textarea {
    flex: 1 1 0;
    min-width: 0;
    height: 54px;
    resize: vertical;
    font: inherit;
}

.hr-textarea-tall {
    height: 128px;
}

.hr-duty-panel {
    background: #f7fbfe;
}

/* ---------------------------------------------------------------- credentials */

.hr-credential {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 6px;
}

.hr-credential .hr-grid {
    flex: 1 1 auto;
    min-width: 0;
}

.hr-dossier {
    width: 330px;
    flex: 0 0 330px;
    border: 1px solid #9db6cc;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* The reference screen's four image buttons, sized alike so the row reads as one control. */
.hr-scan-buttons {
    display: flex;
    gap: 4px;
    margin-left: 10px;
}

.hr-scan-btn {
    font: inherit;
    font-size: 11px;
    width: 96px;
    padding: 2px 0;
    border: 1px solid #9db6cc;
    border-radius: 2px;
    background: linear-gradient(#fdfefe, #e6eef6);
    color: #14304d;
    cursor: pointer;
}

.hr-scan-btn:hover:not(:disabled) { background: linear-gradient(#fff, #d8e7f4); }
.hr-scan-btn:disabled { opacity: 0.45; cursor: default; }
.hr-scan-btn-danger { color: #9d2020; }
.hr-scan-btn-wide { width: 150px; margin-left: 10px; }

/* The enrolled-fingers list is a handful of rows at most, so it does not need a grid's height. */
/* A session worked entirely inside the rostered shift - it earns nothing, and the verifier
   should see that before pressing Verify rather than after. */
.hr-inside-shift { color: #9d2020; font-weight: 700; }

.hr-grid-fingers { margin-top: 6px; }
.hr-grid-body-short { min-height: 0; max-height: 140px; }

/* The grey pane the scanned page lands in - the reference screen's right-hand box. */
.hr-preview {
    width: 360px;
    flex: 0 0 360px;
    border: 1px solid #9db6cc;
    background: #c9c9c9;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    max-height: 300px;
}

.hr-preview-band {
    flex: 0 0 auto;
    background: linear-gradient(#eaf2f9, #d5e4f0);
    border-bottom: 1px solid #9db6cc;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #14304d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-preview-image {
    flex: 1 1 auto;
    min-height: 0;
    object-fit: contain;
    padding: 4px;
}

.hr-preview-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    font-size: 11px;
    color: #4a4a4a;
    text-align: center;
}

.hr-preview-empty a { color: #14507f; }

/* The dossier is a panel of its own now that the preview pane has the right-hand column. */
.hr-dossier-panel .hr-dossier-body {
    border: 1px solid #9db6cc;
    background: #fff;
    columns: 3;
    column-gap: 10px;
    max-height: none;
}

.hr-dossier-panel .hr-dossier-row { break-inside: avoid; }

.hr-dossier-caption {
    background: linear-gradient(#eaf2f9, #d5e4f0);
    border-bottom: 1px solid #9db6cc;
    padding: 2px 6px;
    font-weight: 600;
    color: #14304d;
}

.hr-dossier-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 220px;
    max-height: 300px;
}

.hr-dossier-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 6px;
    border-bottom: 1px solid #eef4f9;
}

.hr-dossier-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.hr-dossier-select {
    width: 64px;
    flex: 0 0 64px;
}

.hr-dossier-flag {
    width: 12px;
    flex: 0 0 12px;
    color: #1f7a3c;
    text-align: center;
}

/* ---------------------------------------------------------------- roster */

.hr-roster {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hr-roster-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hr-col-tick { width: 58px; flex: 0 0 58px; text-align: center; }
.hr-col-offdays { width: 168px; flex: 0 0 168px; }

.hr-grid-roster .hr-grid-body {
    min-height: 180px;
    max-height: 240px;
}

.hr-grid-holiday .hr-grid-body {
    min-height: 320px;
    max-height: 460px;
}

/* Someone rostered through a gazetted holiday - the exception, so it is the row that stands out. */
.hr-grid-row-working {
    background: #fdf6e6;
}

.hr-grid-row-working:hover {
    background: #f8ecd0;
}

.entry-row-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 6px;
}

.hr-search-btn {
    width: 100%;
    margin: 6px 0;
    padding: 6px 0;
    font: inherit;
    font-weight: 600;
    color: #14304d;
    border: 1px solid #9db6cc;
    border-radius: 4px;
    background: linear-gradient(#f6fbff, #d9e9f6);
    cursor: pointer;
}

.hr-search-btn:hover {
    background: linear-gradient(#fff, #cbe1f3);
}

.hr-search-btn-inline {
    width: auto;
    margin: 0 0 0 8px;
    padding: 2px 14px;
}

.hr-search-icon {
    margin-right: 4px;
}

.hr-regular-panel {
    margin-top: 6px;
}

.hr-offdays {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.hr-offday {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #14304d;
    cursor: pointer;
}

/* ---------------------------------------------------------------- week grid */

.hr-roster-detail {
    background: #f7fbfe;
}

.hr-roster-banner {
    margin-bottom: 6px;
}

.hr-roster-banner-name {
    background: #1f3d63;
    color: #fff;
    font-weight: 700;
    padding: 3px 8px;
}

.hr-roster-banner-sub {
    background: #2f6ea5;
    color: #eaf3fb;
    padding: 2px 8px;
}

.hr-roster-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.hr-fill-picker {
    width: 140px;
    flex: 0 0 140px;
}

.hr-weekgrid {
    border: 1px solid #9db6cc;
    background: #fff;
    overflow-x: auto;
}

.hr-weekgrid-head,
.hr-weekgrid-row {
    display: flex;
    min-width: 720px;
}

.hr-weekgrid-head {
    border-bottom: 1px solid #9db6cc;
}

.hr-weekgrid-label {
    width: 104px;
    flex: 0 0 104px;
    background: #1f3d63;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 6px;
    border-bottom: 1px solid #16304f;
}

.hr-weekgrid-head .hr-weekgrid-label {
    background: transparent;
    border-bottom: 0;
}

.hr-weekgrid-day {
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 4px;
    font-weight: 600;
    color: #14304d;
    text-align: center;
    font-size: 11px;
}

.hr-weekgrid-dow {
    display: block;
    font-weight: 400;
    color: #5a7186;
    font-size: 10px;
}

.hr-weekgrid-cell {
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 4px;
    border-bottom: 1px solid #e4edf4;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Alternating day columns, as the original's blue/green pairs read. */
.hr-weekgrid-day-0 { background: #dcecf9; }
.hr-weekgrid-day-1 { background: #e2f2dc; }

.hr-weekgrid-date {
    width: 18px;
    flex: 0 0 18px;
    font-size: 10px;
    color: #5a7186;
    text-align: right;
}

.hr-weekgrid-select {
    flex: 1 1 0;
    min-width: 0;
    font-size: 11px;
}

/* ---------------------------------------------------------------- holidays */

.hr-holiday-top {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 8px;
}

.hr-holiday-art {
    width: 460px;
    flex: 0 0 460px;
    border: 1px solid #9db6cc;
    overflow: hidden;
}

.hr-holiday-art svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hr-holiday-form {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------------------------------------------------------------- attendance kiosk */

/* The corridor terminal. Deliberately oversized: it is driven by a finger on a touchscreen from
   arm's length, not a mouse. */
.kiosk {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f4f8fb;
    font-size: 15px;
}

.kiosk-off {
    padding: 60px;
    text-align: center;
    color: #34506a;
}

.kiosk-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    background: linear-gradient(#1ea2e8, #0d86c8);
    border-bottom: 4px solid #8cc63f;
}

.kiosk-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.kiosk-title {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
}

.kiosk-tagline {
    font-size: 16px;
    color: #eaf6ff;
}

.kiosk-head-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kiosk-finger {
    font-size: 28px;
    color: #fff;
}

.kiosk-refresh {
    font: inherit;
    padding: 4px 12px;
    border: 1px solid #8cc63f;
    border-radius: 4px;
    background: #f2fae8;
    color: #2c5c12;
    cursor: pointer;
}

.kiosk-body {
    flex: 1 1 auto;
    display: flex;
    gap: 16px;
    padding: 16px;
    min-height: 0;
}

.kiosk-modes {
    width: 250px;
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kiosk-mode {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    color: #23384b;
    border: 1px solid #c3d5e3;
    border-radius: 10px;
    background: linear-gradient(#ffffff, #eef4f9);
    cursor: pointer;
    text-align: left;
}

.kiosk-mode-on {
    border-color: #e0a63d;
    background: linear-gradient(#fff8e8, #f7e3ba);
    box-shadow: inset 0 0 0 1px #f0cd8a;
}

.kiosk-mode-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.kiosk-mode-in .kiosk-mode-icon { background: radial-gradient(circle at 35% 30%, #7fd15a, #2f8f2f); }
.kiosk-mode-out .kiosk-mode-icon { background: radial-gradient(circle at 35% 30%, #f07a6d, #c0392b); }
.kiosk-mode-ot .kiosk-mode-icon { background: radial-gradient(circle at 35% 30%, #ffc46b, #e08e1b); }
.kiosk-mode-break .kiosk-mode-icon { background: radial-gradient(circle at 35% 30%, #c8a4e8, #8e5cc4); }
.kiosk-mode-leave .kiosk-mode-icon { background: radial-gradient(circle at 35% 30%, #7fc4f2, #2a7fc0); }

.kiosk-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kiosk-banner {
    padding: 8px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    background: linear-gradient(#d0473a, #a72a1e);
}

.kiosk-banner-in { background: linear-gradient(#57ab4a, #2f7a2a); }
.kiosk-banner-ot { background: linear-gradient(#e8a33d, #c07a12); }
.kiosk-banner-break { background: linear-gradient(#9b6fd0, #6f43a6); }
.kiosk-banner-leave { background: linear-gradient(#3f9ad6, #1e6fa8); }

.kiosk-entry {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kiosk-code-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    font: inherit;
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid #c3d5e3;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.kiosk-code-icon {
    font-size: 20px;
    color: #2f6ea5;
}

.kiosk-code {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: 26px;
    letter-spacing: 2px;
    padding: 8px 12px;
    border: 2px solid #9db6cc;
    border-radius: 6px;
}

.kiosk-go {
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 26px;
    border: 1px solid #2f7a2a;
    border-radius: 6px;
    background: linear-gradient(#6fc258, #2f8f2f);
    color: #fff;
    cursor: pointer;
}

.kiosk-go:disabled {
    opacity: 0.5;
    cursor: default;
}

.kiosk-result {
    flex: 0 0 auto;
    min-height: 96px;
    border: 1px solid #c3d5e3;
    border-radius: 6px;
    background: #fff;
    padding: 12px;
}

.kiosk-result-ok { border-color: #4aa564; background: #f2fbf3; }
.kiosk-result-bad { border-color: #c0392b; background: #fdf3f1; }

.kiosk-result-idle { color: #7d8f9e; }
.kiosk-result-name { font-size: 24px; font-weight: 700; color: #14304d; }
.kiosk-result-text { color: #34506a; }
.kiosk-result-type { margin-top: 4px; font-weight: 700; color: #2f6ea5; }

/* -- the slip -------------------------------------------------------------
   What the employee reads while still standing at the reader. Sized for a
   glance from arm's length on a touchscreen, not for a desk. */

.kiosk-slip {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kiosk-slip-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.kiosk-slip-name {
    font-size: 26px;
    font-weight: 700;
    color: #14304d;
}

.kiosk-slip-code {
    font-size: 13px;
    color: #6a8098;
    font-family: Consolas, monospace;
}

.kiosk-slip-type {
    align-self: flex-start;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: #2f6ea5;
    letter-spacing: 0.4px;
}

.kiosk-slip-type-in { background: #3d9e5f; }
.kiosk-slip-type-out { background: #c0392b; }
.kiosk-slip-type-ot { background: #d68910; }
.kiosk-slip-type-break { background: #7d5ba6; }
.kiosk-slip-type-leave { background: #2f6ea5; }

.kiosk-slip-time {
    font-size: 34px;
    font-weight: 700;
    color: #14304d;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.kiosk-slip-date { font-size: 13px; color: #6a8098; }

.kiosk-slip-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}

.kiosk-slip-row {
    display: flex;
    gap: 8px;
    font-size: 13px;
}

.kiosk-slip-row span { width: 96px; flex: 0 0 96px; color: #7d8f9e; }
.kiosk-slip-row strong { color: #24405c; font-weight: 600; }

.kiosk-slip-status {
    align-self: flex-start;
    margin-top: 2px;
    padding: 3px 14px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid transparent;
}

/* Tones are the register's own - good / bad / warn / info - so the terminal and the
   monthly report never disagree about how a day reads. */
.kiosk-slip-status-good { background: #eaf7ee; border-color: #4aa564; color: #1f7a3c; }
.kiosk-slip-status-bad { background: #fdf3f1; border-color: #c0392b; color: #9d2020; }
.kiosk-slip-status-warn { background: #fdf6e9; border-color: #d68910; color: #8a5800; }
.kiosk-slip-status-info { background: #eef4fb; border-color: #5b9bd5; color: #1f4e79; }

.kiosk-close {
    align-self: flex-start;
    margin-top: 6px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 6px 26px;
    border: 1px solid #9db6cc;
    border-radius: 4px;
    background: linear-gradient(#fdfefe, #e6eef6);
    color: #14304d;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.kiosk-close:hover { background: linear-gradient(#fff, #d8e7f4); }

/* -- the leave form ---------------------------------------------------------
   What replaces the punch slip once the Leave Request button has identified
   somebody - a small version of LeaveInputScreen's entry panel, sized for the
   same touchscreen the slip is. */

.kiosk-leave {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kiosk-leave-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.kiosk-leave-row label {
    font-size: 13px;
    color: #5a7186;
    font-weight: 600;
}

.kiosk-leave-row select,
.kiosk-leave-row input[type="date"] {
    font: inherit;
    font-size: 15px;
    padding: 6px 8px;
    border: 1px solid #9db6cc;
    border-radius: 4px;
}

.kiosk-leave-days {
    margin-left: auto;
    font-weight: 700;
    color: #2f6ea5;
}

.kiosk-leave-remarks {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: 15px;
    padding: 8px 10px;
    border: 1px solid #9db6cc;
    border-radius: 4px;
}

.kiosk-leave-error {
    padding: 8px 10px;
    border: 1px solid #c0392b;
    border-radius: 4px;
    background: #fdf3f1;
    color: #9d2020;
    font-size: 13px;
}

.kiosk-leave-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.kiosk-recent {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #c3d5e3;
    border-radius: 6px;
    background: #fff;
}

.kiosk-recent-head {
    padding: 4px 10px;
    background: linear-gradient(#eaf2f9, #d5e4f0);
    border-bottom: 1px solid #c3d5e3;
    font-weight: 600;
    color: #14304d;
    font-size: 13px;
}

.kiosk-recent-empty {
    padding: 10px;
    color: #8b9aa6;
    font-size: 13px;
}

.kiosk-recent-row {
    display: flex;
    gap: 10px;
    padding: 4px 10px;
    border-bottom: 1px solid #eef4f9;
    font-size: 14px;
}

.kiosk-recent-time { width: 96px; flex: 0 0 96px; color: #5a7186; }
.kiosk-recent-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #14304d; }
.kiosk-recent-type { width: 170px; flex: 0 0 170px; color: #2f6ea5; }

.kiosk-clock {
    width: 300px;
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kiosk-clock svg {
    width: 100%;
    height: auto;
}

.kiosk-now { font-size: 15px; color: #34506a; }
.kiosk-now-time { font-size: 26px; font-weight: 700; color: #14304d; }

.kiosk-foot {
    padding: 6px 16px;
    text-align: center;
    background: #e6eef5;
    border-top: 1px solid #c3d5e3;
    color: #2f6ea5;
    font-size: 13px;
}

/* ---------------------------------------------------------------- attendance screens */

.hr-manual-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hr-manual-art {
    width: 240px;
    height: 200px;
    flex: 0 0 240px;
    border: 1px solid #9db6cc;
    overflow: hidden;
}

.hr-manual-art svg { width: 100%; height: 100%; display: block; }

.hr-manual-form {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hr-manual-date {
    width: 250px;
    flex: 0 0 250px;
}

.hr-manual-form > .field-panel:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.hr-manual-lower {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    align-items: flex-start;
}

.hr-manual-lower .hr-grid {
    flex: 1 1 0;
    min-width: 0;
}

.hr-grid-punches .hr-grid-body,
.hr-grid-audit .hr-grid-body {
    min-height: 180px;
    max-height: 260px;
}

.hr-row-btn-wide {
    min-width: 118px;
}

.hr-status {
    display: inline-block;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 11px;
}

.hr-status-good { background: #e5f6e8; color: #1f7a3c; }
.hr-status-bad { background: #fbe9e6; color: #b3271d; }
.hr-status-warn { background: #fdf3e2; color: #a4650e; }
.hr-status-info { background: #e8f1fa; color: #2f6ea5; }

.hr-excuse-top {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 8px;
}

.hr-excuse-art {
    width: 420px;
    flex: 0 0 420px;
    border: 1px solid #9db6cc;
    overflow: hidden;
}

.hr-excuse-art svg { width: 100%; height: 100%; display: block; }

.hr-excuse-form {
    flex: 1 1 auto;
    min-width: 0;
}

.hr-col-stamp { width: 132px; flex: 0 0 132px; }
.hr-col-status { width: 140px; flex: 0 0 140px; }

.hr-grid-excuse .hr-grid-body {
    min-height: 260px;
    max-height: 420px;
}

.hr-grid-imports .hr-grid-body {
    min-height: 220px;
    max-height: 340px;
}

.hr-import-result {
    margin-top: 8px;
}

.hr-import-problems {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #d09a90;
    background: #fdf6f4;
    padding: 6px 8px;
    font-size: 11px;
    color: #8c2f18;
}

/* ---------------------------------------------------------------- leave */

.hr-leave-top,
.hr-leave-input-top {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 8px;
}

.hr-leave-art {
    width: 420px;
    flex: 0 0 420px;
    border: 1px solid #9db6cc;
    overflow: hidden;
}

.hr-leave-art svg { width: 100%; height: 100%; display: block; }

.hr-leave-form,
.hr-leave-entry {
    flex: 1 1 auto;
    min-width: 0;
}

.hr-leave-employee {
    width: 470px;
    flex: 0 0 470px;
}

.hr-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #14304d;
    cursor: pointer;
}

/* The employee's name over the balance bar, as the original prints it. */
.hr-leave-name {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #8c2f18;
    padding: 6px 0;
}

.hr-leave-balance {
    border: 1px solid #1f7a3c;
}

.hr-leave-balance-head {
    background: linear-gradient(#2f9c4f, #1f7a3c);
    color: #fff;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    padding: 3px 0;
}

.hr-leave-balance-body {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: #fff;
    flex-wrap: wrap;
}

.hr-leave-bal-label {
    font-weight: 700;
    color: #8c2f18;
    margin-left: 6px;
}

.hr-leave-bal-value {
    min-width: 58px;
    padding: 1px 6px;
    border: 1px solid #b9cbd9;
    background: #f7fbff;
    text-align: center;
    font-weight: 600;
    color: #14304d;
}

.hr-leave-inflight {
    margin-top: 4px;
    padding: 3px 6px;
    background: #fdf3e2;
    border: 1px solid #e0c290;
    color: #a4650e;
    font-size: 11px;
}

.hr-leave-inflight span { margin-right: 10px; font-weight: 600; }

.hr-leave-days {
    min-width: 54px;
    text-align: center;
}

/* The dark caption bands the leave screens separate their grids with. */
.hr-leave-band {
    background: linear-gradient(#5b9bd5, #2f6ea5);
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 2px 0;
    margin: 8px 0 0;
    border: 1px solid #2f6ea5;
}

.hr-col-bal { width: 78px; flex: 0 0 78px; text-align: right; }
.hr-col-type { width: 128px; flex: 0 0 128px; }
.hr-col-add { color: #1f7a3c; font-weight: 600; }

/* From and To are tinted green and orange on the original's leave grids. */
.hr-date-from { background: #e8f6e8; }
.hr-date-to { background: #fdeee0; }

.hr-grid-row-selected .hr-date-from,
.hr-grid-row-selected .hr-date-to { background: transparent; }

.hr-grid-balances .hr-grid-body { min-height: 300px; max-height: 440px; }
.hr-grid-leave-process .hr-grid-body { min-height: 110px; max-height: 170px; }
.hr-grid-leave-record .hr-grid-body { min-height: 140px; max-height: 240px; }
.hr-grid-leave-queue .hr-grid-body { min-height: 190px; max-height: 300px; }

.hr-grid-total {
    display: flex;
    border-top: 1px solid #9db6cc;
    background: #eef4fa;
    font-weight: 700;
    color: #14304d;
}

.hr-leave-detail {
    margin-top: 8px;
}

.hr-leave-detail-top { margin-bottom: 6px; }

.hr-leave-detail-name {
    background: #1f3d63;
    color: #fff;
    font-weight: 700;
    padding: 3px 8px;
}

.hr-leave-detail-sub {
    background: #3f9ad6;
    color: #eaf3fb;
    padding: 2px 8px;
}

/* ---------------------------------------------------------------- extra duty */

.hr-grid-extra-duty .hr-grid-body { min-height: 320px; max-height: 460px; }

.hr-extra-detail { margin-top: 8px; }

/* ---------------------------------------------------------------- increment */

.hr-col-money { width: 96px; flex: 0 0 96px; text-align: right; }

.hr-increment {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hr-increment-main {
    flex: 1 1 auto;
    min-width: 0;
}

.hr-readout-money {
    min-width: 96px;
    text-align: right;
    font-weight: 600;
}

.hr-grid-increment-history { margin-top: 8px; }
.hr-grid-increment-history .hr-grid-body { min-height: 150px; max-height: 240px; }
.hr-grid-increment-queue .hr-grid-body { min-height: 340px; max-height: 480px; }

/* ---------------------------------------------------------------- employee reports */

/* The maroon "Report Type" band the original puts over its dropdown. */
.report-type-head {
    background: linear-gradient(#f2f2f2, #dcdcdc);
    border: 1px solid #b9cbd9;
    color: #7b1a12;
    font-weight: 700;
    text-align: center;
    padding: 2px 0;
}

.report-scope {
    text-align: center;
    font-weight: 600;
    color: #14304d;
    font-size: 11px;
}

.report-range {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.report-range .entry-label { min-width: 34px; }

.report-note {
    color: #7b1a12;
    font-size: 11px;
}

/* ---------------------------------------------------------------- consultants */

.hr-consultant {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hr-consultant-main {
    flex: 1 1 auto;
    min-width: 0;
}

.hr-grid-consultants { margin-top: 8px; }
.hr-grid-consultants .hr-grid-body { min-height: 200px; max-height: 320px; }
.hr-grid-departments .hr-grid-body { min-height: 320px; max-height: 460px; }

.entry-input-tiny { width: 72px; flex: 0 0 72px; }

.hr-credential-preview {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 300px;
    display: flex;
    border: 1px solid #9db6cc;
    background: #55595c;
}

/* ---------------------------------------------------------------- payroll
   The payroll tile lives beside HR and speaks its grid vocabulary - hr-grid, hr-col-money and the
   rest - so its few extra rules sit here rather than in a sheet that would only repeat them. */

.hr-payroll-top {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 8px;
}

.hr-payroll-art {
    width: 420px;
    flex: 0 0 420px;
    border: 1px solid #9db6cc;
    overflow: hidden;
}

.hr-payroll-art svg { width: 100%; height: 100%; display: block; }

.hr-payroll-form { flex: 1 1 auto; min-width: 0; }

.hr-grid-payroll-register .hr-grid-body { min-height: 300px; max-height: 440px; }

/* The payroll sheet is eighteen columns wide: it scrolls sideways rather than reflowing, so a
   column never lands under a different heading than the one it was read against. */
.hr-grid-payroll {
    overflow-x: auto;
}

.hr-grid-payroll .hr-grid-head,
.hr-grid-payroll .hr-grid-row,
.hr-grid-payroll .hr-grid-total {
    min-width: 1920px;
}

.hr-grid-payroll .hr-grid-body { min-height: 300px; max-height: 460px; }

/* Gross Salary is the column the original tints, and the one everybody looks for first. */
.hr-col-gross { background: #fbe0d2; font-weight: 600; }

.hr-grid-row-selected .hr-col-gross { background: transparent; }

.hr-col-bad { color: #b3271d; font-weight: 600; }

.hr-payroll-note {
    margin-top: 6px;
    border: 1px solid #d8c48a;
    background: #fdf8e8;
    padding: 4px 8px;
    font-size: 11px;
    color: #6b5417;
}

/* ---------------------------------------------------------------- hr policies */

.hr-policy-list { max-height: 300px; overflow-y: auto; }

/* An entry with nothing filed against it still lists - greyed, so the gap is visible. */
.hr-policy-missing span { color: #8a8f94; font-style: italic; }

.hr-policy-state {
    border: 1px solid #b9cbd9;
    background: #f4f8fb;
    padding: 2px 6px;
    font-size: 11px;
    color: #14304d;
}

.hr-policy-file { margin-top: 4px; }

.hr-policy-pane {
    display: flex;
    min-height: 560px;
    background: #55595c;
}

.hr-policy-frame {
    flex: 1 1 auto;
    border: 0;
    min-height: 560px;
    background: #fff;
}

.hr-policy-image {
    margin: auto;
    max-width: 100%;
    max-height: 720px;
    background: #fff;
}

/* The pane's own empty state - it sits on the dark viewer background, not on the form. */
.report-empty {
    margin: auto;
    max-width: 420px;
    text-align: center;
    color: #eaf0f5;
    font-size: 12px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- report screens */

.report-screen {
    display: flex;
    gap: 10px;
    align-items: stretch;
    min-height: 560px;
}

.report-criteria {
    width: 250px;
    flex: 0 0 250px;
    border: 1px solid #9db6cc;
    background: #f4f8fb;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.report-art {
    border: 1px solid #c8d8e5;
    background: #eef3f8;
}

.report-art svg { width: 100%; height: auto; display: block; }

.report-criteria-head {
    background: linear-gradient(#e4eff8, #cfe0ee);
    border: 1px solid #b9cbd9;
    padding: 2px 6px;
    font-weight: 600;
    color: #14304d;
}

.report-modes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.report-mode {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #14304d;
    cursor: pointer;
}

.report-mode-arg {
    margin: 2px 0 4px 20px;
}

.report-preview-btn {
    font: inherit;
    font-weight: 600;
    padding: 8px 0;
    border: 1px solid #9db6cc;
    border-radius: 4px;
    background: linear-gradient(#eaf3fb, #cfe2f2);
    color: #14304d;
    cursor: pointer;
}

.report-preview-btn:disabled { opacity: 0.6; cursor: default; }

.report-preview-icon { margin-right: 6px; }

.report-summary {
    border: 1px solid #b9cbd9;
    background: #fff;
    font-size: 12px;
}

.report-summary-head {
    background: linear-gradient(#eaf2f9, #d5e4f0);
    border-bottom: 1px solid #b9cbd9;
    padding: 2px 6px;
    font-weight: 600;
    color: #14304d;
}

.report-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 6px;
    border-bottom: 1px solid #eef4f9;
}

.report-summary-total {
    font-weight: 700;
    color: #1f4e79;
    background: #f2f8fd;
}

.report-pane {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------------------------------------------------------------- resignation */

.hr-resignation {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hr-resignation-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Finger Enrollment: fields down the left, the reference screen's tall pane down the right. */
.hr-resign-body {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.hr-resign-fields {
    flex: 1 1 auto;
    min-width: 0;
}

.hr-preview-tall {
    width: 250px;
    flex: 0 0 250px;
    max-height: none;
}

.hr-attach-btn {
    font: inherit;
    font-size: 11px;
    width: 150px;
    flex: 0 0 150px;
    padding: 2px 0;
    border: 1px solid #9db6cc;
    border-radius: 2px;
    background: linear-gradient(#fdfefe, #e6eef6);
    color: #14304d;
    cursor: pointer;
}

.hr-attach-btn:hover:not(:disabled) { background: linear-gradient(#fff, #d8e7f4); }
.hr-attach-btn:disabled { opacity: 0.45; cursor: default; }

.hr-attach-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.hr-attach-chip {
    font: inherit;
    font-size: 11px;
    padding: 1px 8px;
    border: 1px solid #b9cbd9;
    border-radius: 10px;
    background: #f2f7fb;
    color: #14304d;
    cursor: pointer;
}

.hr-attach-chip-on {
    background: #2f6ea5;
    border-color: #2f6ea5;
    color: #fff;
}