/* ---------------------------------------------------------------------------
   Magical Payroll — "Ledger" theme layer.

   A token layer applied over Bootstrap 4.3.1. Loaded after app.min.css and
   msc-style.css so it wins on equal specificity. The direction comes from the
   app's own subject matter: ruled ledger paper and fixed-width bank records.

   Figures are set in a mono face with tabular numerals so money columns align
   without hand-tuning. Colour is semantic where payroll gives it meaning:
   earnings read green, withheld amounts read claret.

   Contextual Bootstrap backgrounds (bg-info and friends) are re-tinted rather
   than neutralised — several views pair them with .text-white, so they have to
   stay dark enough to carry white text.
--------------------------------------------------------------------------- */

:root {
    --pl-paper:     #f7f8fa;
    --pl-card:      #ffffff;
    --pl-ink:       #14181f;
    --pl-ink-soft:  #5a6472;
    --pl-ink-faint: #8a94a3;
    --pl-rule:      #dde2e8;
    --pl-rule-hard: #c3cbd6;
    --pl-brand:     #e88a3a;
    --pl-brand-deep:#c96f26;
    --pl-earn:      #1b6b4a;
    --pl-hold:      #8b2635;
    --pl-slate:     #2f4858;
    --pl-chip:      #eef1f5;

    --pl-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --pl-radius:      8px;
    --pl-radius-ctl:  7px;
}

body {
    background-color: var(--pl-paper);
    color: var(--pl-ink);
    font-variant-numeric: tabular-nums;
}

/* --- navigation ---------------------------------------------------------- */

.navbar.bg-white {
    background-color: var(--pl-card) !important;
    border-bottom: 1px solid var(--pl-rule);
    box-shadow: none !important;
}

.navbar .nav-link {
    color: var(--pl-ink-soft);
    border-bottom: 2px solid transparent;
    padding-left: .75rem;
    padding-right: .75rem;
    font-weight: 560;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--pl-ink);
    border-bottom-color: var(--pl-rule-hard);
}

/* Current section. The 2px transparent border above is already reserved, so
   colouring it shifts nothing. */
.navbar .nav-link.active {
    color: var(--pl-ink);
    border-bottom-color: var(--pl-brand);
}

.navbar .dropdown-menu {
    border: 1px solid var(--pl-rule);
    border-radius: var(--pl-radius);
    box-shadow: 0 4px 16px rgba(20, 24, 31, .08);
}

/* Bootstrap's #f8f9fa hover is all but invisible on white, and its #007bff
   active fights the brand orange. */
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--pl-chip);
    color: var(--pl-ink);
}

.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    background-color: var(--pl-brand-deep);
    color: #fff;
}

/* Collapsed (below the expand-lg breakpoint) the menu renders inline in the
   page flow, where a floating panel's border and shadow read as noise. */
@media (max-width: 991.98px) {
    .navbar .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: .75rem;
        background-color: transparent;
    }

    .navbar .nav-link {
        border-bottom: none;
        border-left: 2px solid transparent;
        padding-left: .5rem;
    }

    .navbar .nav-link.active {
        border-left-color: var(--pl-brand);
    }
}

/* --- surfaces ------------------------------------------------------------ */

.card {
    background-color: var(--pl-card);
    border: 1px solid var(--pl-rule);
    border-radius: var(--pl-radius);
    box-shadow: none;
}

.card-header {
    background-color: var(--pl-card);
    border-bottom: 1px solid var(--pl-rule);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Re-tint the contextual backgrounds. Kept dark so .text-white still reads. */
.bg-info    { background-color: var(--pl-slate) !important; }
.bg-primary { background-color: #24506b !important; }
.bg-success { background-color: var(--pl-earn) !important; }
.bg-danger  { background-color: var(--pl-hold) !important; }
.bg-light   { background-color: var(--pl-chip) !important; }
.bg-warning { background-color: #f6dfb0 !important; color: var(--pl-ink); }

/* The re-tinted fills are dark, so anything carrying them needs light text —
   not only the headers that remembered to add .text-white. The summaries
   index puts .bg-info straight on a <td>, where the table's ink would
   otherwise sit on slate at under 2:1. */
.bg-info,
.bg-primary,
.bg-success,
.bg-danger {
    color: #fff;
}

/* Views colour their header icons inline (red / forestgreen / yellow) for a
   white card. On the slate header those fall to 1.6–2.3:1. Lift them to
   tints that keep the hue and clear 5:1 on the dark fill. */
.bg-info .material-icons[style*="color:red"],
.pay-card-header .material-icons[style*="color:red"]         { color: #ff9a8f !important; }
.bg-info .material-icons[style*="color:forestgreen"],
.pay-card-header .material-icons[style*="color:forestgreen"] { color: #7fdca4 !important; }
.bg-info .material-icons[style*="color:yellow"],
.pay-card-header .material-icons[style*="color:yellow"]      { color: #ffd76a !important; }

/* --- the ledger: tables -------------------------------------------------- */

.table {
    color: var(--pl-ink);
}

/* Figures in mono with tabular numerals; the leading label column stays sans. */
.table th,
.table td {
    font-family: var(--pl-mono);
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--pl-rule);
    /* the column tick — what makes a table read as ruled paper */
    box-shadow: inset 1px 0 0 var(--pl-rule);
}

.table th:first-child,
.table td:first-child {
    font-family: inherit;
    box-shadow: none;
}

.table thead th {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pl-ink-faint);
    border-bottom: 1px solid var(--pl-rule-hard);
    border-top: none;
}

/* Replaces the #fffac3 yellow striping that used to live in the layout. */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--pl-paper);
}

.table-hover > tbody > tr:hover {
    background-color: var(--pl-chip);
}

/* --- semantic row states -------------------------------------------------
   Bootstrap ships #f7c6c5 for .table-danger and #fffacc for .table-warning.
   Both are saturated enough that secondary text sitting on them falls below a
   readable contrast ratio. These tints carry the same meaning at roughly a
   fifth of the saturation, and a left stripe repeats the state in form as well
   as colour so it survives greyscale and colour-blind viewing.
--------------------------------------------------------------------------- */

.table .table-danger,
.table .table-danger > th,
.table .table-danger > td {
    background-color: #fceff1;
}

.table .table-danger > td:first-child,
.table .table-danger > th:first-child {
    box-shadow: inset 8px 0 0 var(--pl-hold);
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
    background-color: #f8e4e7;
}

.table .table-warning,
.table .table-warning > th,
.table .table-warning > td {
    background-color: #fdf6e9;
}

.table .table-warning > td:first-child,
.table .table-warning > th:first-child {
    box-shadow: inset 8px 0 0 var(--pl-brand);
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
    background-color: #f9ecda;
}

/* Rows with nothing wrong get the same stripe in green, so every row states
   its status and a healthy row is not just an absence of colour. */
.table .table-ok > td:first-child,
.table .table-ok > th:first-child {
    box-shadow: inset 8px 0 0 var(--pl-earn);
}

/* The stripe is an inset shadow, which paints over the cell rather than
   displacing it, so the first cell needs room or its content sits on top. */
.table .table-danger > td:first-child,
.table .table-warning > td:first-child,
.table .table-ok > td:first-child,
.table .table-danger > th:first-child,
.table .table-warning > th:first-child,
.table .table-ok > th:first-child {
    padding-left: 1rem;
}

/* --- secondary text ------------------------------------------------------
   .text-muted is #6c757d and .small is 80% (12.8px), which together sit at
   about 3:1 on white and less on a tinted row. Darker ink and a larger
   minimum keep the hierarchy while staying legible.
--------------------------------------------------------------------------- */

.text-muted {
    color: var(--pl-ink-soft) !important;
}

.table .small,
.table small {
    font-size: .875rem;
}

/* --- controls ------------------------------------------------------------ */

/* The old rule made every select a fixed-width blue pill, including selects
   that hold employee names. Sizing goes back to the layout. */
select,
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--pl-card);
    color: var(--pl-ink);
    border: 1px solid var(--pl-rule-hard);
    border-radius: var(--pl-radius-ctl);
    padding: 4px 26px 4px 10px;
    font-size: inherit;
    text-align: left;
    background-image: linear-gradient(45deg, transparent 50%, var(--pl-ink-soft) 50%),
                      linear-gradient(135deg, var(--pl-ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

select option {
    background-color: var(--pl-card);
    color: var(--pl-ink);
}

.form-control {
    border: 1px solid var(--pl-rule-hard);
    border-radius: var(--pl-radius-ctl);
    color: var(--pl-ink);
}

.form-control:focus {
    border-color: var(--pl-brand);
    box-shadow: 0 0 0 3px rgba(232, 138, 58, .15);
}

.btn {
    border-radius: var(--pl-radius-ctl);
    font-weight: 560;
}

/* --- contextual buttons --------------------------------------------------
   Bootstrap 4's button colours were built for large text and fail as small
   controls. Measured against white: warning #ffc107 is 1.63:1, info #17a2b8
   3.04:1, success #28a745 3.13:1, primary #007bff 3.98:1 — all under the
   4.5:1 minimum, and the yellow is the worst by far. The solid fills are no
   better: white on info measures 3.04:1.

   These keep each role's hue and darken it until both directions pass, so a
   filter row reads the same way it always did, just legibly.
--------------------------------------------------------------------------- */

.btn-outline-primary { color: #24506b; border-color: #24506b; }
.btn-outline-info    { color: #10707f; border-color: #10707f; }
.btn-outline-warning { color: #a75c1e; border-color: #a75c1e; }
.btn-outline-success { color: #1b6b4a; border-color: #1b6b4a; }
.btn-outline-danger  { color: var(--pl-hold); border-color: var(--pl-hold); }

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.active { background-color: #24506b; border-color: #24506b; color: #fff; }
.btn-outline-info:hover,    .btn-outline-info:focus,    .btn-outline-info.active    { background-color: #10707f; border-color: #10707f; color: #fff; }
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning.active { background-color: #a75c1e; border-color: #a75c1e; color: #fff; }
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success.active { background-color: #1b6b4a; border-color: #1b6b4a; color: #fff; }
.btn-outline-danger:hover,  .btn-outline-danger:focus,  .btn-outline-danger.active  { background-color: var(--pl-hold); border-color: var(--pl-hold); color: #fff; }

/* Solid variants carry white text, so the fill has to be dark enough for it. */
.btn-info    { background-color: #10707f; border-color: #10707f; color: #fff; }
.btn-warning { background-color: #a75c1e; border-color: #a75c1e; color: #fff; }
.btn-success { background-color: #1b6b4a; border-color: #1b6b4a; color: #fff; }
.btn-danger  { background-color: var(--pl-hold); border-color: var(--pl-hold); color: #fff; }

.btn-info:hover    { background-color: #0c5c68; border-color: #0c5c68; color: #fff; }
.btn-warning:hover { background-color: #8d4c17; border-color: #8d4c17; color: #fff; }
.btn-success:hover { background-color: #14563a; border-color: #14563a; color: #fff; }
.btn-danger:hover  { background-color: #73202c; border-color: #73202c; color: #fff; }

/* Bootstrap's badge fills fail with white text (info 3.0:1, success 3.1:1)
   and the yellow one clashes with the palette. Same hues as the buttons. */
.badge-info      { background-color: #10707f; color: #fff; }
.badge-success   { background-color: var(--pl-earn); color: #fff; }
.badge-danger    { background-color: var(--pl-hold); color: #fff; }
.badge-warning   { background-color: #f6dfb0; color: #6b3d0f; }
.badge-secondary { background-color: var(--pl-ink-faint); color: #fff; }

/* The count bubble sits on both white and filled grounds, so give it its own
   contrast rather than relying on Bootstrap's near-white .badge-light. */
.btn .badge-light {
    background-color: var(--pl-chip);
    color: var(--pl-ink);
}

.btn-primary {
    background-color: var(--pl-brand-deep);
    border-color: var(--pl-brand-deep);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #b26221;
    border-color: #b26221;
}

/* --- focus: visible everywhere ------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--pl-brand);
    outline-offset: 2px;
}

/* msc-style.css strips outlines on its dialog controls; put them back. */
.msc-confirm button:focus-visible,
.msc-input:focus-visible,
.msc-action button:focus-visible {
    outline: 2px solid var(--pl-brand);
    outline-offset: 2px;
}

/* --- pay run ------------------------------------------------------------- */

/* The period total reads as a ruled-off ledger total, not a blue banner. */
.summary-total-row,
.summary-total-row > td,
.summary-total-row > th {
    background: var(--pl-paper);
    color: var(--pl-ink);
    font-weight: 700;
    border-top: 2px solid var(--pl-rule-hard);
}

.pay-card-header {
    background: #1f2833;
    color: #fff;
}

.pay-highlight {
    background-color: rgba(232, 138, 58, .12) !important;
    border-color: rgba(232, 138, 58, .45);
}

.period-notes-container {
    background: var(--pl-paper);
    border-left: 3px solid var(--pl-brand);
    border-radius: 0 var(--pl-radius-ctl) var(--pl-radius-ctl) 0;
}

.pays-fab {
    border: 1px solid var(--pl-rule);
    box-shadow: 0 2px 10px rgba(20, 24, 31, .18);
}

.pays-fab-btn {
    background: var(--pl-earn);
}

/* --- neon hover ----------------------------------------------------------
   Brand-orange glow on hover, same idiom as .form-control:focus above, just
   brighter. Shadow + border-colour only, so it layers on top of the
   contextual :hover fills instead of fighting them. navbar-toggler is page
   chrome, not a control, so it sits this one out; disabled controls too.
--------------------------------------------------------------------------- */

.btn,
button:not(.navbar-toggler),
input[type="button"],
input[type="submit"],
input[type="reset"] {
    transition: box-shadow .2s ease-in, border-color .2s ease-in;
}

.btn:hover:not(:disabled),
button:not(.navbar-toggler):hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled) {
    border-color: var(--pl-brand);
    box-shadow: 0 0 0 2px rgba(232, 138, 58, .45),
                0 0 12px 2px rgba(232, 138, 58, .55);
}

/* Full 360deg spin, not a 180deg flip — a half turn leaves every label
   mirrored and unreadable, and un-mirroring it would mean a two-face wrapper
   around all 200 buttons. This ends where it started and needs no markup.
   The reduced-motion block below already kills it. */
@keyframes pl-btn-flip {
    from { transform: perspective(600px) rotateY(0); }
    to   { transform: perspective(600px) rotateY(360deg); }
}

.btn:hover:not(:disabled),
button:not(.navbar-toggler):hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled) {
    animation: pl-btn-flip .6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}