/* ============================================================================
   Payroll - interaction layer

   Everything the AJAX list / modal / toast pattern needs, plus the dark skin.
   Loaded after app.css so it can override the base tokens.

   THE DARK SKIN. app.css defines the light palette on :root as plain values;
   this file redefines those same tokens under html[data-skin="dark"]. Because
   every component reads the tokens rather than hard-coded colours, the whole
   system switches with one attribute. Light stays the default and is the look
   the client signed off on.
   ========================================================================== */

html[data-skin="dark"] {
    /* Brand: navy is already dark, so the sidebar deepens rather than inverts
       and the amber lifts slightly to keep its contrast on dark surfaces. */
    --navy:            #161C42;
    --navy-active:     #262F63;
    --amber:           #E9A03B;
    --amber-hover:     #F0B054;
    --amber-soft:      #3A2E17;

    /* Surfaces */
    --page-bg:         #12151F;
    --card-bg:         #1A1F2E;
    --card-border:     #2A3145;
    --table-head-bg:   #212739;
    --total-row-bg:    #232B44;

    /* Text */
    --ink:             #E7EAF3;
    /* Emphasis text inverts. Navy on a dark card is unreadable, so card
       headings and links go near-white and sit slightly brighter than body
       text to keep the hierarchy the light theme gets from the navy. */
    --ink-strong:      #F2F5FC;
    --ink-muted:       #99A2BC;
    --sidebar-label:   #8E9BC4;
    --sidebar-dot:     #4A5578;

    /* Status */
    --green-bg:        #16321F;
    --green-text:      #6BC48F;

    color-scheme: dark;
}

html[data-skin="dark"] body { background: var(--page-bg); color: var(--ink); }

html[data-skin="dark"] .app-topbar { background: var(--card-bg); border-bottom: 1px solid var(--card-border); }

html[data-skin="dark"] .btn-ghost {
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--ink);
}
html[data-skin="dark"] .btn-ghost:hover { background: var(--table-head-bg); color: var(--ink); }

html[data-skin="dark"] .form-control,
html[data-skin="dark"] .form-select {
    background: #151A28;
    border-color: var(--card-border);
    color: var(--ink);
}

html[data-skin="dark"] .form-control::placeholder { color: #6D778F; }

html[data-skin="dark"] .form-control:disabled,
html[data-skin="dark"] .form-select:disabled,
html[data-skin="dark"] .form-control[readonly] {
    background: #10141F;
    color: #6D778F;
}

html[data-skin="dark"] .form-control--display { background: #151A28 !important; color: var(--ink) !important; }

html[data-skin="dark"] .seg__option span { background: var(--card-bg); border-color: var(--card-border); color: var(--ink); }
html[data-skin="dark"] .seg__option input:checked + span { background: var(--amber); border-color: var(--amber); color: #1B1405; }

html[data-skin="dark"] .table-payroll tbody tr:hover td { background: #212739; }
html[data-skin="dark"] .app-user__avatar { background: var(--total-row-bg); color: var(--ink); }
html[data-skin="dark"] .btn-mini { background: var(--card-bg); border-color: var(--card-border); color: var(--ink); }
html[data-skin="dark"] .btn-mini:hover { background: var(--table-head-bg); color: var(--ink); }
html[data-skin="dark"] .modal-content { background: var(--card-bg); color: var(--ink); }
html[data-skin="dark"] .modal-header,
html[data-skin="dark"] .modal-footer { border-color: var(--card-border); }
html[data-skin="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }
html[data-skin="dark"] .flash--ok    { background: var(--green-bg);  border-color: #26543A; color: var(--green-text); }
html[data-skin="dark"] .flash--error { background: #3A1D1D; border-color: #5C2E2E; color: #F0A2A2; }
html[data-skin="dark"] .callout-amber { background: #33270F; border-color: #4C3A15; color: #E9C282; }
html[data-skin="dark"] .callout-amber__title { color: #F2CF95; }
html[data-skin="dark"] .pill--inactive { background: #262C3D; color: #98A1BC; }
html[data-skin="dark"] .pill--error    { background: #3A1D1D; color: #F0A2A2; }
html[data-skin="dark"] .add-row { background: var(--total-row-bg); color: #B9C6E8; }
html[data-skin="dark"] .add-row:hover { background: #2C3557; }
html[data-skin="dark"] .page-link { background: var(--card-bg); border-color: var(--card-border); color: var(--ink); }
html[data-skin="dark"] .page-item.active .page-link { background: var(--amber); border-color: var(--amber); color: #1B1405; }
html[data-skin="dark"] .page-item.disabled .page-link { background: var(--card-bg); color: #5A6480; }
html[data-skin="dark"] .row--bad td { background: #3A1D1D; }
html[data-skin="dark"] code { color: #E9C282; }

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

.topbar-search {
    position: relative;
    flex: 1 1 320px;
    max-width: 420px;
    margin-left: 26px;
}

.topbar-search input {
    padding-left: 40px;
    height: 40px;
}

.topbar-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    pointer-events: none;
    font-size: 15px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.icon-btn:hover { background: var(--page-bg); color: var(--ink-strong); }
html[data-skin="dark"] .icon-btn:hover { background: var(--table-head-bg); color: var(--ink); }

.dropdown-menu {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--ink);
    box-shadow: 0 10px 30px rgba(20, 27, 60, .12);
    padding: 14px;
    min-width: 210px;
}

.dropdown-menu label {
    display: block;
    font-size: 11.5px;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px;
}

.nav-skin { display: flex; gap: 8px; }

.nav-skin .nav-link {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
}

.nav-skin .nav-link.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #FFFFFF;
}

html[data-skin="dark"] .nav-skin .nav-link.active { background: var(--amber); border-color: var(--amber); color: #1B1405; }

/* --------------------------------------------------------------- toasts --- */

.toast-host {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.toast-note {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 250px;
    max-width: 380px;
    padding: 13px 18px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: 0 8px 26px rgba(20, 27, 60, .16);
}

.toast-note.is-in { opacity: 1; transform: none; }

.toast-note__mark {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
}

.toast-note--ok    { background: var(--green-bg); border-color: #C8E6D5; color: var(--green-text); }
.toast-note--ok .toast-note__mark { background: var(--green-text); }
.toast-note--error { background: #FBECEC; border-color: #F0CFCF; color: #A33A3A; }
.toast-note--error .toast-note__mark { background: #C0504A; }

html[data-skin="dark"] .toast-note--ok    { background: var(--green-bg); border-color: #26543A; }
html[data-skin="dark"] .toast-note--error { background: #3A1D1D; border-color: #5C2E2E; color: #F0A2A2; }

/* -------------------------------------------------------------- confirm --- */

.modal-sm-plus { max-width: 420px; }

.confirm-mark {
    width: 62px;
    height: 62px;
    margin: 4px auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    background: var(--total-row-bg);
    color: var(--ink-strong);
}

.confirm-mark--danger { background: #FBECEC; color: #C0504A; }
html[data-skin="dark"] .confirm-mark--danger { background: #3A1D1D; color: #F0A2A2; }
html[data-skin="dark"] .confirm-mark { background: var(--total-row-bg); color: var(--ink); }

.confirm-title { font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.confirm-text  { color: var(--ink-muted); font-size: 14.5px; }

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

.btn-danger-solid:hover,
.btn-danger-solid:focus { background: #A8423C; border-color: #A8423C; color: #FFFFFF; }

/* ------------------------------------------------------ list furniture --- */

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

.per-page {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ink-muted);
}

.per-page select {
    width: auto;
    padding: 7px 30px 7px 12px;
    font-size: 14px;
}

.pagination { margin: 0; }

/* Icon action cluster in a table row, as on mrpaint. */
.row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.act {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    border-radius: 6px;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.act:hover      { background: var(--page-bg); color: var(--ink-strong); }
.act--warn:hover{ background: #FBECEC; color: #C0504A; }
.act--ok:hover  { background: var(--green-bg); color: var(--green-text); }

html[data-skin="dark"] .act:hover       { background: var(--table-head-bg); color: var(--ink); }
html[data-skin="dark"] .act--warn:hover { background: #3A1D1D; color: #F0A2A2; }

/* Skeleton rows while a list is loading. */
.skeleton-cell {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--table-head-bg) 25%, var(--card-border) 37%, var(--table-head-bg) 63%);
    background-size: 400% 100%;
    animation: skeleton 1.2s ease-in-out infinite;
}

@keyframes skeleton {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------------------------------------------------------------- modal --- */

.modal-header {
    border-bottom: 1px solid var(--card-border);
    padding: 20px 26px;
}

.modal-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.modal-body  { padding: 24px 26px; }

.modal-footer {
    border-top: 1px solid var(--card-border);
    padding: 16px 26px;
    gap: 10px;
}

/* The Payment Profile opens fullscreen so the signed-off two-column layout
   survives intact while still taking the whole window. */
.modal-fullscreen .modal-body { background: var(--page-bg); padding: 22px 26px 30px; }
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer { background: var(--card-bg); }

/* Field errors returned by an AJAX save. */
.form-control.is-invalid,
.form-select.is-invalid { border-color: #E0A2A2; }

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

html[data-skin="dark"] .invalid-note { color: #F0A2A2; }

/* ==========================================================================
   Step 6 - Monthly Data Entry Sheet
   ========================================================================== */

.table-sheet .col-days  { width: 116px; }
.table-sheet .col-money { width: 150px; }

.table-sheet thead th.col-days,
.table-sheet thead th.col-money { text-align: center; }

.table-sheet tbody td { padding: 10px 16px; }

/* The boxed inputs from the mockup. */
.cell-input {
    width: 100%;
    max-width: 92px;
    padding: 8px 10px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.col-money .cell-input { max-width: 118px; }

.cell-input:focus {
    outline: none;
    border-color: #B9C6E8;
    box-shadow: 0 0 0 3px rgba(30, 39, 97, .08);
}

.cell-input.is-invalid { border-color: #E0A2A2; }

/* Hide the spinner arrows: they invite mis-clicks on a dense sheet. */
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cell-input[type=number] { -moz-appearance: textfield; }

html[data-skin="dark"] .cell-input { background: #151A28; border-color: var(--card-border); color: var(--ink); }

/* Read-only rendering once a period is locked. */
.cell-static {
    display: inline-block;
    width: 100%;
    max-width: 92px;
    padding: 8px 10px;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* Days cell: amber cap dot to the left of the input, as in the mockup. */
.days-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    justify-content: flex-end;
}

.days-cell .cap-dot { flex: 0 0 9px; }
.cap-dot.is-hidden  { visibility: hidden; }

/* The "+550.00 standing" line under the deduction cell. */
.sub-note {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--ink-muted);
    text-align: right;
    white-space: nowrap;
}

.table-sheet .invalid-note { text-align: right; white-space: normal; }

/* Row states */
.table-sheet tr.row--dirty td { background: #FFFDF4; }
.table-sheet tr.row--busy     { opacity: .55; }

html[data-skin="dark"] .table-sheet tr.row--dirty td { background: #262112; }

.table-sheet tfoot td { font-variant-numeric: tabular-nums; }

.sheet-notes {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.sheet-notes .cap-dot { margin-right: 7px; }

/* ==========================================================================
   Step 7 - Reports
   ========================================================================== */

.report-tabs {
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 18px;
    gap: 4px;
}

.report-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 11px 20px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink-muted);
    background: none;
}

.report-tabs .nav-link:hover { color: var(--ink-strong); }

.report-tabs .nav-link.active {
    color: var(--ink-strong);
    border-bottom-color: var(--amber);
    background: none;
}

html[data-skin="dark"] .report-tabs .nav-link.active { color: var(--ink); }

/* Figure cards under the summary table. */
.stat-card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    background: var(--card-bg);
    height: 100%;
}

.stat-card__label {
    display: block;
    font-size: 12.5px;
    color: var(--ink-muted);
    letter-spacing: .3px;
}

.stat-card__value {
    display: block;
    margin: 6px 0 3px;
    font-size: 25px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat-card__sub { display: block; font-size: 12.5px; color: var(--ink-muted); }

/* A division whose period was never started. */
.table-payroll tr.row--muted td { color: var(--ink-muted); }

.text-warn { color: #A8752A; font-weight: 600; }
html[data-skin="dark"] .text-warn { color: #E9C282; }

/* Field hints. The popover is a floating card, so it takes the dark card
   colours rather than Bootstrap's white default. */
html[data-skin="dark"] .hint-dot { background: var(--total-row-bg); color: var(--ink); }
html[data-skin="dark"] .hint-dot:hover,
html[data-skin="dark"] .hint-dot:focus-visible { background: var(--amber); color: #1B1405; }

html[data-skin="dark"] .hint-pop {
    --bs-popover-bg: #232B3E;
    --bs-popover-border-color: var(--card-border);
    --bs-popover-body-color: var(--ink);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .45);
}

/* Links. Bootstrap's dark-mode blue (#6ea8fe) is still blue on a near-black
   page; these go to the same near-white the headings use, so nothing in the
   dark skin relies on reading blue text. */
html[data-skin="dark"] {
    --bs-link-color:            #F2F5FC;
    --bs-link-color-rgb:        242, 245, 252;
    --bs-link-hover-color:      #FFFFFF;
    --bs-link-hover-color-rgb:  255, 255, 255;
}

/* A bare link needs an underline once colour alone no longer marks it.
   Anchors that carry a class are buttons, tabs or nav items and style
   themselves, so they are left out. */
html[data-skin="dark"] a[href]:not([class]) { text-decoration: underline; }