/* ============================================================================
   Payroll Management System - base stylesheet

   The palette below was sampled directly from the signed-off mockups in
   /screen, so these values are the source of truth for every screen.
   This file holds layout primitives only; feature screens add their own
   rules on top of these.
   ========================================================================== */

:root {
    /* Brand */
    --navy:            #1E2761;   /* sidebar */
    --navy-active:     #2C3873;   /* active nav pill */
    --amber:           #E9A03B;   /* primary action + warnings */
    --amber-hover:     #D88F2A;
    --amber-soft:      #FBF1DF;   /* warning callout background */

    /* Surfaces */
    --page-bg:         #F4F6FB;
    --card-bg:         #FFFFFF;
    --card-border:     #E3E8F5;
    --table-head-bg:   #F4F6FB;
    --total-row-bg:    #E4EDFA;

    /* Text */
    --ink:             #191E33;   /* headings, strong figures */
    --ink-strong:      #1E2761;   /* emphasis text: card headings, links, pills.
                                     Navy on white here; in dark mode it inverts
                                     to near-white, because navy text on a dark
                                     surface cannot be read. Use this rather than
                                     --navy whenever navy is the COLOUR OF TEXT.
                                     --navy stays for backgrounds and borders. */
    --ink-muted:       #5D6786;   /* labels, secondary figures */
    --sidebar-label:   #9AAAD1;   /* inactive nav label */
    --sidebar-dot:     #CADCFC;   /* inactive nav dot */

    /* Status */
    --green-bg:        #E3F2EA;
    --green-text:      #2E7D5B;

    /* Metrics */
    --sidebar-w:       250px;
    --topbar-h:        68px;
    --radius:          8px;
}

/* ---------------------------------------------------------------- base --- */

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--ink);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Bootstrap ships #0d6efd for links, which is not in this palette and is
   close to unreadable on the dark page background. Links take the emphasis
   token instead, so they follow the theme in both skins. */
:root {
    --bs-link-color:            #1E2761;
    --bs-link-color-rgb:        30, 39, 97;
    --bs-link-hover-color:      #2C3873;
    --bs-link-hover-color-rgb:  44, 56, 115;
}

a { text-decoration: none; }

/* ------------------------------------------------------------- sidebar --- */

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    overflow-y: auto;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 30px 22px 34px;
    color: #FFFFFF;
}

.app-brand__mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--amber);
    flex: 0 0 26px;
}

.app-brand__text {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .1px;
}

.app-nav {
    list-style: none;
    margin: 0;
    padding: 0 14px;
}

.app-nav__item + .app-nav__item { margin-top: 4px; }

.app-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 11px 14px 11px 16px;
    border-radius: var(--radius);
    color: var(--sidebar-label);
    font-size: 15px;
    transition: background-color .12s ease, color .12s ease;
}

.app-nav__link:hover {
    background: rgba(255, 255, 255, .05);
    color: #FFFFFF;
}

/* Bullet that precedes every nav label in the mockups. */
.app-nav__link::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sidebar-dot);
    flex: 0 0 7px;
}

/* Active state: lighter navy pill, amber left rule, amber bullet, white label */
.app-nav__link.is-active {
    background: var(--navy-active);
    color: #FFFFFF;
    font-weight: 600;
}

.app-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: var(--amber);
}

.app-nav__link.is-active::before { background: var(--amber); }

/* Stage B items appear in the mockups but are not built yet. */
.app-nav__link.is-disabled {
    opacity: .38;
    pointer-events: none;
}

/* -------------------------------------------------------------- topbar --- */

.app-main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: var(--topbar-h);
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34px;
    flex: 0 0 var(--topbar-h);
}

.app-breadcrumb {
    font-size: 15px;
    color: var(--ink-muted);
}

.app-breadcrumb a { color: var(--ink-muted); }
.app-breadcrumb a:hover { color: var(--ink-strong); }
.app-breadcrumb__sep { margin: 0 7px; color: #A9B2CC; }
.app-breadcrumb__current { color: var(--ink-muted); }

.app-user {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14.5px;
    color: var(--ink-muted);
}

.app-user__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #E4EDFA;
    color: var(--ink-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* --------------------------------------------------------------- page --- */

.app-content {
    flex: 1 1 auto;
    padding: 22px 34px 40px;
}

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

.card-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 24px 28px;
}

.card-panel + .card-panel { margin-top: 18px; }

/* Page header card - title left, actions right. Every mockup opens with one. */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.page-head__title {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.2px;
}

.page-head__sub {
    margin: 6px 0 0;
    font-size: 14.5px;
    color: var(--ink-muted);
}

.page-head__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Section heading inside a card, with the thin rule beneath it. */
.section-title {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--card-border);
    font-size: 17px;
    font-weight: 700;
    color: var(--ink-strong);
}

/* Buttons ---------------------------------------------------------------- */

.btn-amber {
    background: var(--amber);
    border: 1px solid var(--amber);
    color: #FFFFFF;
    font-weight: 600;
    padding: 11px 26px;
    border-radius: var(--radius);
}

.btn-amber:hover,
.btn-amber:focus {
    background: var(--amber-hover);
    border-color: var(--amber-hover);
    color: #FFFFFF;
}

.btn-navy {
    background: var(--navy);
    border: 1px solid var(--navy);
    color: #FFFFFF;
    font-weight: 600;
    padding: 11px 26px;
    border-radius: var(--radius);
}

.btn-navy:hover,
.btn-navy:focus {
    background: var(--navy-active);
    border-color: var(--navy-active);
    color: #FFFFFF;
}

.btn-ghost {
    background: #FFFFFF;
    border: 1px solid var(--card-border);
    color: var(--ink);
    font-weight: 600;
    padding: 11px 26px;
    border-radius: var(--radius);
}

.btn-ghost:hover,
.btn-ghost:focus {
    background: var(--page-bg);
    color: var(--ink);
}

/* Tables ----------------------------------------------------------------- */

.table-payroll {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14.5px;
}

.table-payroll thead th {
    background: var(--table-head-bg);
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 14px 16px;
    white-space: nowrap;
}

.table-payroll thead th:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.table-payroll thead th:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }

.table-payroll tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--card-border);
    color: var(--ink);
    vertical-align: middle;
}

.table-payroll tfoot td {
    background: var(--total-row-bg);
    padding: 16px;
    font-weight: 700;
    color: var(--ink);
}

.table-payroll tfoot td:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.table-payroll tfoot td:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }

/* Numeric columns are right aligned and tabular throughout the system. */
.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.text-muted-ink { color: var(--ink-muted); }
.text-ink       { color: var(--ink); }

/* Status pills ----------------------------------------------------------- */

.pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
}

.pill--open   { background: var(--green-bg);     color: var(--green-text); }
.pill--locked { background: var(--total-row-bg); color: var(--ink-strong); }

/* Amber cap indicator used on the data entry sheet. */
.cap-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--amber);
}

/* Amber explanatory callout, as on the Payment Profile mockup. */
.callout-amber {
    background: var(--amber-soft);
    border: 1px solid #F0DDBB;
    border-radius: var(--radius);
    padding: 20px 24px;
    color: #8A6420;
}

.callout-amber__title {
    margin: 0 0 10px;
    font-size: 15.5px;
    font-weight: 700;
    color: #7A5714;
}

/* Forms ------------------------------------------------------------------ */

.field-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13.5px;
    color: var(--ink-muted);
}

.field-label .req { color: var(--amber); margin-left: 2px; }

.form-control,
.form-select {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 11px 14px;
    font-size: 15px;
    color: var(--ink);
}

.form-control:focus,
.form-select:focus {
    border-color: #B9C6E8;
    box-shadow: 0 0 0 3px rgba(30, 39, 97, .07);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background: var(--page-bg);
    color: var(--ink-muted);
}

/* ----------------------------------------------------------- responsive --- */

.app-sidebar__toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--ink-muted);
    font-size: 22px;
    line-height: 1;
    padding: 0 14px 0 0;
}

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .app-sidebar.is-open { transform: none; }
    .app-main { margin-left: 0; }
    .app-topbar, .app-content { padding-left: 18px; padding-right: 18px; }
    .app-sidebar__toggle { display: block; }
}

/* ==========================================================================
   Step 3 additions - listing screens, flash messages, import preview
   ========================================================================== */

/* Flash banners ---------------------------------------------------------- */

.flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: var(--radius);
    padding: 15px 20px;
    margin-bottom: 18px;
    font-size: 14.5px;
    border: 1px solid transparent;
}

.flash--ok {
    background: var(--green-bg);
    border-color: #C8E6D5;
    color: var(--green-text);
}

.flash--error {
    background: #FBECEC;
    border-color: #F0CFCF;
    color: #A33A3A;
}

.flash__list {
    margin: 6px 0 0;
    padding-left: 20px;
}

/* Filter bar -------------------------------------------------------------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.filter-bar__field { flex: 0 0 auto; min-width: 170px; }
.filter-bar__field--grow { flex: 1 1 260px; }

/* Tables ----------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
}

.table-payroll tbody tr:hover td {
    background: #FAFBFE;
}

.table-payroll a.link-navy {
    color: var(--ink-strong);
    font-weight: 600;
}

.table-payroll a.link-navy:hover { text-decoration: underline; }

.table-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    white-space: nowrap;
}

.btn-mini {
    background: #FFFFFF;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 5px 13px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-strong);
    line-height: 1.5;
}

.btn-mini:hover { background: var(--page-bg); color: var(--ink-strong); }
.btn-mini--warn { color: #A33A3A; }
.btn-mini--warn:hover { background: #FBECEC; color: #A33A3A; }

/* Status pills ----------------------------------------------------------- */

.pill--active   { background: var(--green-bg); color: var(--green-text); }
.pill--inactive { background: #EFF1F6;         color: #6E7793; }
.pill--error    { background: #FBECEC;         color: #A33A3A; }

/* Readonly display field. The gratuity box on the Employee Profile mockup is
   white like a normal input, not greyed like a disabled one. */
.form-control--display {
    background: #FFFFFF !important;
    color: var(--ink) !important;
    font-weight: 600;
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ink-muted);
}

.field-error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: #A33A3A;
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: #E0A2A2; }

/* Field rows in the three-column profile form ---------------------------- */

.field-row + .field-row { margin-top: 18px; }

.footnote {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-muted);
}

.card-panel__divider {
    border: 0;
    border-top: 1px solid var(--card-border);
    margin: 26px 0 20px;
}

/* Import preview --------------------------------------------------------- */

.table-payroll tbody tr.row--bad td { background: #FDF4F4; }
.table-payroll tbody tr.row--bad:hover td { background: #FBECEC; }

.import-stat {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
}

.import-stat__item .import-stat__label {
    display: block;
    font-size: 13px;
    color: var(--ink-muted);
    margin-bottom: 4px;
}

.import-stat__item .import-stat__value {
    font-size: 25px;
    font-weight: 700;
    color: var(--ink);
}

.import-stat__item--bad .import-stat__value { color: #A33A3A; }

.reasons {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #A33A3A;
}

/* Pagination ------------------------------------------------------------- */

.pagination { margin: 20px 0 0; }

.page-link {
    color: var(--ink-strong);
    border-color: var(--card-border);
}

.page-item.active .page-link {
    background: var(--navy);
    border-color: var(--navy);
}

.page-link:hover { background: var(--page-bg); color: var(--ink-strong); }

/* Empty state ------------------------------------------------------------ */

.empty-state {
    text-align: center;
    padding: 46px 20px;
    color: var(--ink-muted);
}

.empty-state__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}

/* ==========================================================================
   Step 4 additions - Payment Profile
   Colours sampled from screen/p_payment.png.
   ========================================================================== */

/* Segmented toggle: navy when chosen, white when not. Built from radio inputs
   so it works without JavaScript and is keyboard reachable. */

.seg {
    display: inline-flex;
    gap: 10px;
}

.seg__option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.seg__option span {
    display: inline-block;
    min-width: 84px;
    text-align: center;
    padding: 11px 22px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: #FFFFFF;
    color: var(--ink);
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.seg__option input:checked + span {
    background: var(--navy);
    border-color: var(--navy);
    color: #FFFFFF;
}

.seg__option input:focus-visible + span {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.seg__option input:disabled + span {
    opacity: .55;
    cursor: not-allowed;
}

/* Fields the EPF basis toggle switches off. The mockup greys these rather than
   hiding them, so the alternative stays visible. */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly].is-off {
    background: #EEF1F7;
    color: #98A1BC;
}

/* Editable component tables ---------------------------------------------- */

.table-components { width: 100%; border-collapse: separate; border-spacing: 0; }

.table-components thead th {
    background: var(--table-head-bg);
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 13px 14px;
    text-align: left;
    white-space: nowrap;
}

.table-components thead th:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.table-components thead th:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.table-components thead th.num         { text-align: right; }

.table-components tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
}

.table-components .form-control,
.table-components .form-select {
    padding: 9px 12px;
    font-size: 14.5px;
}

.table-components input.amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.col-epf   { width: 108px; text-align: center; }
.col-amt   { width: 168px; }
.col-basis { width: 190px; }
.col-drop  { width: 52px; }

/* Read-only rendering of a component table, used for historic versions. */
.table-components td.readonly-cell {
    color: var(--ink);
    font-weight: 600;
}

.table-components td.readonly-cell--muted {
    color: var(--ink-muted);
    font-weight: 400;
}

/* "+ Add earning component" bar across the foot of each table. */
.add-row {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 13px 16px;
    background: var(--total-row-bg);
    border: 0;
    border-radius: var(--radius);
    color: var(--ink-strong);
    font-weight: 600;
    font-size: 14.5px;
    text-align: left;
    cursor: pointer;
}

.add-row:hover { background: #D9E5F7; }

.row-drop {
    background: none;
    border: 0;
    color: #A9B2CC;
    font-size: 19px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
}

.row-drop:hover { color: #A33A3A; }

/* Header strip on the Payment Profile: employee picker + effective from ---- */

.profile-head {
    display: flex;
    align-items: flex-end;
    gap: 26px;
    flex-wrap: wrap;
}

.profile-head__field { min-width: 210px; }

/* Conditions panel ------------------------------------------------------- */

.conditions__note {
    margin: 18px 0 0;
    font-size: 13.5px;
    color: var(--ink-muted);
}

/* The amber explainer, matched to the mockup's sampled values. */
.callout-amber            { background: #FBEEDA; border-color: #F2DCB4; color: #8A5A12; }
.callout-amber__title     { color: #7A5014; }

/* Version history -------------------------------------------------------- */

.version-row--current td { background: #F7FAFF; }
.version-row--voided  td { opacity: .55; }
.version-row--future  td { background: #FFFDF7; }

/* Field hints ------------------------------------------------------------- */

/* The "?" that sits beside a field label and opens its explanation. Sized to
   the label line so it does not push the row taller. */
.hint-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    border: 0;
    border-radius: 50%;
    background: var(--total-row-bg);
    color: var(--ink-strong);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.hint-dot:hover,
.hint-dot:focus-visible {
    background: var(--ink-strong);
    color: #FFFFFF;
    outline: none;
}

.hint-pop {
    --bs-popover-max-width: 264px;
    --bs-popover-bg: var(--card-bg);
    --bs-popover-border-color: var(--card-border);
    --bs-popover-body-color: var(--ink);
    --bs-popover-body-padding-x: 13px;
    --bs-popover-body-padding-y: 10px;
    --bs-popover-font-size: 12.5px;
    --bs-popover-border-radius: var(--radius);
    box-shadow: 0 4px 18px rgba(20, 27, 60, .13);
}

.hint-pop .popover-body { line-height: 1.5; }

/* Tighter list table ------------------------------------------------------ */

/* A denser variant of .table-payroll for long list screens, where the default
   row height means a screenful is only a handful of people. Applied per table
   rather than to .table-payroll itself, because the Monthly Data Entry Sheet
   was matched to its signed-off mockup and should keep the roomier rows. */
/* The small grey second line inside a cell - a full name under a short name. */
.cell-sub { font-size: 12.5px; }

.table-payroll--tight { font-size: 13.5px; }

.table-payroll--tight thead th { padding: 7px 14px; font-size: 11px; }
.table-payroll--tight tbody td { padding: 5px 14px; }

/* The secondary line under a name shrinks with it. */
.table-payroll--tight .cell-sub { font-size: 11.5px; }

/* Row detail ---------------------------------------------------------------
   The "⋮" at the end of a list row that holds the columns the table no
   longer shows. Kept faint until the row is hovered, so a page of them does
   not read as a column of dots. */

.row-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1;
    cursor: help;
    opacity: .45;
    transition: opacity .12s ease, background-color .12s ease;
}

.table-payroll tbody tr:hover .row-more { opacity: 1; }

.row-more:hover,
.row-more:focus-visible {
    opacity: 1;
    background: var(--total-row-bg);
    color: var(--ink-strong);
    outline: none;
}

.hint-pop--detail { --bs-popover-max-width: 320px; }

.pop-detail__row {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
}

.pop-detail__row + .pop-detail__row { border-top: 1px solid var(--card-border); }

.pop-detail__k {
    color: var(--ink-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

.pop-detail__v {
    font-weight: 600;
    text-align: right;
}

/* Controls inside a tight list ---------------------------------------------
   A row is as tall as the tallest thing in it. At the default sizes that is
   the status pill (32px) and the action buttons (32px), not the text (20px),
   so the padding came off the cells and the row did not move. These bring
   both down to the text's own scale. Only inside .table-payroll--tight: the
   Monthly Data Entry Sheet and the dashboard keep the roomier controls. */

.table-payroll--tight .pill {
    padding: 1px 11px;
    font-size: 12px;
    line-height: 1.65;
}

.table-payroll--tight .act {
    width: 26px;
    height: 26px;
    font-size: 13.5px;
}

.table-payroll--tight .row-more {
    width: 20px;
    height: 20px;
    font-size: 14px;
}

.table-payroll--tight .row-actions { gap: 2px; }