@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Calendar/BkPerBalances.razor.rz.scp.css */
.bkperbal[b-p6to4a07qn] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.25rem 0.25rem 0.5rem;
}

.bkperbal__msg[b-p6to4a07qn] {
    padding: 1rem;
    color: #555;
}

.bkperbal__header[b-p6to4a07qn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #b0b0b0;
}

.bkperbal__header-label[b-p6to4a07qn] {
    color: #333;
}

.bkperbal__emp-id[b-p6to4a07qn] {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: #00008b;
    padding: 0.1rem 0.4rem;
    border: 1px solid #c0c0c0;
    background: #fff;
    min-width: 4rem;
    text-align: right;
}

.bkperbal__emp-name[b-p6to4a07qn] {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: #00008b;
    padding: 0.1rem 0.4rem;
    border: 1px solid #c0c0c0;
    background: #fff;
    flex: 1;
    min-width: 18rem;
}

.bkperbal__table[b-p6to4a07qn] {
    width: auto;
    border-collapse: collapse;
    border: 1px solid #6f9fc7;
    background: #fff;
    table-layout: fixed;
}

.bkperbal__table thead th[b-p6to4a07qn] {
    background: #d0d0d0;
    color: #000;
    font-weight: normal;
    border: 1px solid #6f9fc7;
    padding: 0.2rem 0.4rem;
    text-align: center;
}

.bkperbal__th-lit[b-p6to4a07qn] { width: 22rem; }
.bkperbal__th-hrs[b-p6to4a07qn] { width: 6rem; }
.bkperbal__th-dhm[b-p6to4a07qn] { width: 13rem; }

.bkperbal__table tbody td[b-p6to4a07qn] {
    border-bottom: 1px solid #e0e0e0;
    padding: 0.15rem 0.4rem;
    background: #fff;
    height: 1.55rem;
    vertical-align: middle;
}

.bkperbal__td-lit[b-p6to4a07qn] { color: #00008b; }

.bkperbal__td-val[b-p6to4a07qn] {
    color: #00008b;
    text-align: right;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.bkperbal__td-dhm[b-p6to4a07qn] {
    text-align: center;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: #00008b;
}

.bkperbal__td-days[b-p6to4a07qn],
.bkperbal__td-hrs[b-p6to4a07qn],
.bkperbal__td-min[b-p6to4a07qn] {
    display: inline-block;
    min-width: 2.2rem;
    text-align: center;
}

.bkperbal__td-sep[b-p6to4a07qn] {
    color: #888;
    margin: 0 0.2rem;
}

/* Negative balances render in dark red — every cell in the row.
   Mirrors desktop TabA_SetRowColorRed at BkPerBalances\TabA.cs:199-206. */
.bkperbal__row--neg .bkperbal__td-lit[b-p6to4a07qn],
.bkperbal__row--neg .bkperbal__td-val[b-p6to4a07qn],
.bkperbal__row--neg .bkperbal__td-dhm[b-p6to4a07qn],
.bkperbal__row--neg .bkperbal__td-days[b-p6to4a07qn],
.bkperbal__row--neg .bkperbal__td-hrs[b-p6to4a07qn],
.bkperbal__row--neg .bkperbal__td-min[b-p6to4a07qn] {
    color: #8b0000;
}

.bkperbal__footer-row[b-p6to4a07qn] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-end;
    padding: 0.2rem 0.5rem 0;
}

.bkperbal__footer-row label[b-p6to4a07qn] {
    color: #333;
}

.bkperbal__select[b-p6to4a07qn] {
    width: 4.5rem;
    text-align: right;
    padding: 0.1rem 0.25rem;
    border: 1px solid #b0b0b0;
}

.bkperbal__hrs-suffix[b-p6to4a07qn] {
    color: #333;
}

.bkperbal__btn-exit[b-p6to4a07qn] {
    min-width: 6rem;
}
/* /Components/Calendar/CommentEditor.razor.rz.scp.css */
.comment-editor__input[b-4j0ikgogcx] {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid #b8c0c8;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
    background: #fffefb;
}

.comment-editor__input:focus[b-4j0ikgogcx] {
    outline: none;
    border-color: #5b8def;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.18);
}

.comment-editor__counter[b-4j0ikgogcx] {
    margin-top: 0.3rem;
    text-align: right;
    font-size: 0.78rem;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}
/* /Components/Calendar/DayCell.razor.rz.scp.css */
.day-cell[b-btak4kt8i3] {
    border: 1px solid #d0d0d0;
    padding: 4px 6px;
    min-height: 96px;
    background: #fff;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.day-cell--muted[b-btak4kt8i3] {
    background: #f4f4f4;
    color: #bbb;
}

/* In-month day with no SCH1 row — visually de-emphasized so the user can tell
   it's intentional, not a render bug. Matches desktop ProtectDayNoRec. */
.day-cell--no-data[b-btak4kt8i3] {
    background: #fafafa;
    color: #999;
}

.day-cell--clickable[b-btak4kt8i3] {
    cursor: pointer;
}

.day-cell--clickable:hover[b-btak4kt8i3] {
    background: #eef5ff;
}

.day-cell--clickable:focus-visible[b-btak4kt8i3] {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

/* Today's cell — pale-gold border + tinted background + bolder day number.
   Stays inside its existing 1px outer border so the grid layout doesn't shift. */
.day-cell--today[b-btak4kt8i3] {
    background: #fff8e1;
    box-shadow: inset 0 0 0 2px #f4b400;
}

.day-cell--today.day-cell--clickable:hover[b-btak4kt8i3] {
    background: #fff1c4;
}

.day-cell--today .day-cell__num[b-btak4kt8i3] {
    color: #8a5a00;
}

.day-cell__head[b-btak4kt8i3] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #eee;
    padding-bottom: 2px;
    margin-bottom: 2px;
}

.day-cell__num[b-btak4kt8i3] {
    font-weight: 600;
    font-size: 0.95rem;
}

.day-cell__mark[b-btak4kt8i3] {
    color: #c33;
    margin-right: 1px;
    font-weight: 700;
}

.day-cell__unit[b-btak4kt8i3] {
    font-size: 0.75rem;
    color: #666;
}

.day-cell__split[b-btak4kt8i3] {
    margin-left: 4px;
    color: #1a4480;
    font-weight: 600;
}

.day-cell__row[b-btak4kt8i3] {
    display: flex;
    gap: 4px;
    line-height: 1.2;
}

.day-cell__code[b-btak4kt8i3] {
    font-weight: 600;
    min-width: 1.5em;
}

.day-cell__desc[b-btak4kt8i3] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Calendar/DayDetailModal.razor.rz.scp.css */
.day-detail[b-lzfq1cwfw8] {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 8px;
    margin: 0;
}

.day-detail dt[b-lzfq1cwfw8] {
    font-weight: 600;
    color: #555;
}

.day-detail dd[b-lzfq1cwfw8] {
    margin: 0;
}

.day-detail__badge[b-lzfq1cwfw8] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #e8f0fe;
    color: #1a4480;
    border-radius: 10px;
    font-size: 0.75rem;
}

.day-detail__shift-code[b-lzfq1cwfw8] {
    font-weight: 600;
    margin-right: 8px;
}

.day-detail__shift-desc[b-lzfq1cwfw8] {
    margin-right: 8px;
}

.day-detail__shift-times[b-lzfq1cwfw8] {
    color: #555;
    font-variant-numeric: tabular-nums;
}

.day-detail__statuses-label[b-lzfq1cwfw8] {
    align-self: start;
    padding-top: 2px;
}

.day-detail__status-list[b-lzfq1cwfw8] {
    list-style: decimal inside;
    padding: 0;
    margin: 0;
}

.day-detail__status-list li[b-lzfq1cwfw8] {
    margin-bottom: 2px;
}

.day-detail__status-code[b-lzfq1cwfw8] {
    font-weight: 600;
    margin-right: 8px;
}

.day-detail__status-desc[b-lzfq1cwfw8] {
    font-weight: 500;
}
/* /Components/Calendar/DayRecord.razor.rz.scp.css */
/* =========================================================================
   DayRecord.razor — scoped styles, organized by concern.

   READING GUIDE
   1.  Container & messaging
   2.  Mode pill (footer status indicator)
   3.  Section base & h4
   4.  Section modifiers (inline-title, remarks, rule-above/below)
   5.  Definition list base & modifiers (__dl, __dl--two-up, __dl--inline)
   6.  Reserved-width dd modifiers (__dd--w-*)
   7.  dl labels & values + shared inline value classes (__muted, __lit,
       __person-name-cap, accent labels)
   8.  Per-section position nudges (org-status, unit, sector, authby, shift)
   9.  O.T. Pay Dt / Approved / Authorized merged-row View-mode bundle
   10. Form inputs (base, invalid, uppercase, size variants, focus washes)
   11. Slots table (status / desc / hrs columns)
   12. Remarks (View pre + Edit textarea)
   13. Footer (action buttons + last-modified note)
   14. Per-slot comment buttons

   NEW-LAYOUT GUIDANCE: prefer fixed widths + flex `gap` on parents over
   `min-width` + per-element margin nudging. See CLAUDE.md
   "UI conventions — Form rows".
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Container & messaging
   ------------------------------------------------------------------------- */

.dayrecord[b-d27rl4pp0e] {
    font-size: 0.92rem;
}

.dayrecord__msg[b-d27rl4pp0e] {
    padding: 1.5rem 0.5rem;
    text-align: center;
    color: #666;
}


/* -------------------------------------------------------------------------
   2. Mode pill — footer status indicator (View / Edit / Can Edit)
   ------------------------------------------------------------------------- */

.dayrecord__mode[b-d27rl4pp0e] {
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: #f4f6f8;
    border-left: 3px solid #27ae60;
    font-size: 0.85rem;
}

/* Footer placement — Mode sits left of the action buttons. The modal
   footer is `display: flex; justify-content: flex-end`, so margin-right:
   auto pushes the Mode element to the left while the buttons stay right.
   The footer's default align-items: stretch makes the Mode pill match the
   buttons' height; turning the Mode element into a flex container with
   align-items: center vertically centers its text within that height. */
.dayrecord__mode--footer[b-d27rl4pp0e] {
    margin-bottom: 0;
    margin-right: auto;
    display: flex;
    align-items: center;
    /* Allow the Mode pill to shrink below its intrinsic content width when
       the footer is tight. Pairs with flex-shrink:0 on the buttons —
       overflow goes here instead of into the buttons, where it would wrap
       text and balloon the button height. The pill's text just truncates
       (or the auto-margin gap shrinks) when buttons need the room. */
    min-width: 0;
}

/* Edit-mode color cue. Lives on the mode element directly (rather than
   parent-scoped via .dayrecord--edit) because the Mode div renders inside
   the modal footer, outside the .dayrecord container. */
.dayrecord__mode--edit[b-d27rl4pp0e] {
    border-left-color: #c0392b;
}

.dayrecord__mode--edit .dayrecord__mode-value[b-d27rl4pp0e] {
    color: #8a1f14;
}

.dayrecord__mode--can-edit .dayrecord__mode-value[b-d27rl4pp0e] {
    color: #1e7e3d;
}

/* Last-modified inline footer text. Always default body color (black-ish),
   even when the parent footer is in can-edit (green) or edit (red) state —
   the color rules above target only .dayrecord__mode-value. margin-left
   gives a clear visual gap from the Mode label. Tune that value for
   tighter / looser spacing. */
.dayrecord__mode-modified[b-d27rl4pp0e] {
    color: #1a2233;
    margin-left: 0.75rem;
}

/* Cap the modifier-name with ellipsis so unusually long names ("Vandenberghe,
   Christopher") don't grow the footer's "By:" segment past what fits next
   to the action buttons — a wrapped footer would push the buttons to a
   second row. inline-block + max-width + overflow:hidden + nowrap is the
   standard ellipsis recipe; vertical-align:bottom keeps the baseline
   aligned with the EmpId next to it. Tune `max-width` here. Floor before
   common names ("Smith, John") start truncating is ~7rem. */
.dayrecord__mode-modified-name[b-d27rl4pp0e] {
    display: inline-block;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}


/* -------------------------------------------------------------------------
   3. Section base & h4
   ------------------------------------------------------------------------- */

.dayrecord__section[b-d27rl4pp0e] {
    margin-bottom: 0.5rem;
}

/* View-mode-only tightening. Drops the section-to-section gap to match the
   .dayrecord__dl row-gap (0.2rem) so vertical rhythm is consistent:
   Employee/Rank → Date/Record Type → Shift → Assignment → O.T. Pay Dt →
   Remarks all sit one row-gap apart. NOT applied in Edit mode — the wider
   0.5rem keeps O.T. Pay Dt's inline fields on a single row instead of
   wrapping. Per CLAUDE.md "Positioning changes — always confirm View vs
   Edit mode". */
.dayrecord:not(.dayrecord--edit) .dayrecord__section[b-d27rl4pp0e] {
    margin-bottom: 0.2rem;
}

.dayrecord__section h4[b-d27rl4pp0e] {
    font-size: 0.95rem;
    margin: 0 0 0.4rem 0;
    color: #6c757d;
}


/* -------------------------------------------------------------------------
   4. Section modifiers
        --inline-title  pulls h4 onto the same line as the dl below it
        --remarks       align-items: center for tall pre/textarea
        --rule-above    hairline divider above section content
        --rule-below    hairline divider below section content (mirror)
   ------------------------------------------------------------------------- */

.dayrecord__section--inline-title[b-d27rl4pp0e] {
    display: flex;
    /* nowrap so the section's <h4> and <dl> always sit on one row.
       Originally `wrap`, then scoped to Edit mode, now universal because
       Remarks (View mode) was just over the wrap threshold (5.5rem h4 +
       0.75rem gap + 51rem pre = 57.25rem vs ~57rem content area in the
       wide modal). The other inline-title sections (Shift, Assignment,
       O.T. Pay Dt, Approved) have content well under that width so
       they're unaffected. */
    flex-wrap: nowrap;
    align-items: baseline;
    /* Match the dl two-up grid's column-gap (0.75rem) so the first value
       aligns with the value column above (e.g. shift code under date). */
    column-gap: 0.75rem;
    row-gap: 0.4rem;
}

.dayrecord__section--inline-title > h4[b-d27rl4pp0e] {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    /* Render the section title as a label (grey, normal weight, body size)
       so it visually matches the dt labels next to it (Start, End, ...). */
    color: #6c757d;
    font-weight: normal;
    font-size: 0.92rem;
    /* Fixed width = same dt column width used by the two-up grid above —
       lets the first value (shift code) align vertically with the date
       value. */
    width: 5.5rem;
}

/* Remarks section — center-align the "Remarks" label vertically with the
   multi-line pre / textarea. Overrides the inline-title section's default
   `align-items: baseline`, which lands the h4 near the bottom (last
   visual line's baseline) on a tall pre/textarea. Other inline-title
   sections only contain single-line content so they're unaffected. */
.dayrecord__section--remarks[b-d27rl4pp0e] {
    align-items: center;
}

/* Hairline divider above a section. Same color and weight as the work-slot
   header underline (`.dayrecord__slots th { border-bottom: 1px solid #d0d4da }`)
   so the rule reads as part of the same visual family. */
.dayrecord__section--rule-above[b-d27rl4pp0e] {
    border-top: 1px solid #d0d4da;
    padding-top: 0.5rem;
}

/* Mirror of --rule-above. border-bottom + padding-bottom give a hairline
   under the section content with the same hairline weight + a matching gap
   between content and line. */
.dayrecord__section--rule-below[b-d27rl4pp0e] {
    border-bottom: 1px solid #d0d4da;
    padding-bottom: 0.5rem;
}

/* View mode runs tighter section gaps overall (see `.dayrecord__section`
   override above), which leaves the previous row almost touching the
   divider. Push the line down (margin-top, NOT padding-top — padding adds
   space below the border, margin adds space above it) in View only.
   margin-right shortens the border-top by trimming the box width — the
   inline content (O.T. Pay Dt label + date) is short enough that it fits
   fine in the reduced area, so only the line visibly shortens. */
.dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-above[b-d27rl4pp0e] {
    margin-top: 0.85rem;
    margin-right: 0.28in;
}

/* Mirror of the rule-above View-mode override. margin-bottom adds breathing
   room between the bottom hairline and the next section; margin-right keeps
   the bottom line trimmed to the same length as the top. */
.dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-below[b-d27rl4pp0e] {
    margin-bottom: 0.85rem;
    margin-right: 0.28in;
}


/* -------------------------------------------------------------------------
   5. Definition list base & modifiers
   ------------------------------------------------------------------------- */

.dayrecord__dl[b-d27rl4pp0e] {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.2rem 0.75rem;
    margin: 0;
}

/* Two-up modifier — 4 columns so each row holds two label/value pairs.
   Used on dense info sections (employee header) to cut scrolling. Col 2
   (Employee / Date values) is fixed at 17rem because the content
   (typical full name, formatted date) doesn't need the full 1fr — leaves
   col 3 (Rank / Record Type label) starting ~1 inch closer to col 2. */
.dayrecord__dl--two-up[b-d27rl4pp0e] {
    grid-template-columns: 5.5rem 17rem 7rem 1fr;
}

/* Inline modifier — drop the grid entirely and flow label/value pairs as
   one wrapping row. Used on the Shift section so Code / Start / End / Org
   Status sit side-by-side. Auto-wraps on narrow screens.
   Spacing: label-to-value is tight (0.25rem) so a pair reads as one unit;
   pair-to-pair is wider (2.5rem via dd margin-right) for clear separation. */
.dayrecord__dl--inline[b-d27rl4pp0e] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    grid-template-columns: none;
    row-gap: 0.4rem;
}

.dayrecord__dl--inline dt[b-d27rl4pp0e] {
    margin-right: 0.25rem;
}

.dayrecord__dl--inline dd[b-d27rl4pp0e] {
    margin: 0 2.5rem 0 0;
}

/* Tighter gap after the FIRST dd in each inline row (the value following the
   section's h4 label — Shift / Assignment / O.T. Pay Dt). Tuned alongside the
   per-field min-widths so End (Shift row) and Unit (Assignment row) align
   vertically with Rank / Record Type from the two-up grid above. The actual
   rendered content widths of "01 07:20-15:30" and "1/1 PLATOON 1/PATROL SQUAD"
   ran wider than the --w-shift / --w-asg reservations, which pushed End and
   Unit visibly right; trimming this margin pulls them back to the column line. */
.dayrecord__dl--inline > dd:first-of-type[b-d27rl4pp0e] {
    margin-right: 0.3rem;
}

/* Opt-in tighter gap after a specific dd. Used on the Approved dd so the
   "Authorized" label sits closer to the Approved name (overriding the
   default 2.5rem pair-to-pair gap). Tweak `margin-right` to taste. */
.dayrecord__dl--inline > dd.dayrecord__dd--tight-after[b-d27rl4pp0e] {
    margin-right: -0.75rem;
}


/* -------------------------------------------------------------------------
   6. Reserved-width dd modifiers
      Without these, an empty value (rendered as "—") collapses the dd to
      one character wide and the row visually compresses against the next
      dt. min-width values approximate the width of a typical populated
      cell so the row holds its shape whether the field has data or not.
      Pick the size matching the field's content class. When porting a new
      page, add new --w-* classes here as needed; resist using one big size
      for everything since narrow data (HH:MM) packed against wide
      reservations feels overspaced.

      NEW-LAYOUT NOTE: For *new* rows prefer fixed widths + flex gap on the
      parent (see CLAUDE.md "UI conventions — Form rows"). Keep --w-* for
      existing rows; don't propagate the min-width pattern to new ones.
   ------------------------------------------------------------------------- */

.dayrecord__dd--w-date[b-d27rl4pp0e]    { min-width: 7rem;    }
.dayrecord__dd--w-person[b-d27rl4pp0e]  { min-width: 13.5rem; }
.dayrecord__dd--w-time[b-d27rl4pp0e]    { min-width: 4rem;    }
.dayrecord__dd--w-status[b-d27rl4pp0e]  { min-width: 10rem;   }
.dayrecord__dd--w-shift[b-d27rl4pp0e]   { min-width: 9rem;    }
.dayrecord__dd--w-asg[b-d27rl4pp0e]     { min-width: 14rem; max-width: 14rem; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.dayrecord__dd--w-unit[b-d27rl4pp0e]    { min-width: 5rem;    }
.dayrecord__dd--w-sector[b-d27rl4pp0e]  { min-width: 7rem;    }

/* Edit-mode-only: drop the dd-shift reservation floor so its width tracks
   actual content (input + desc literal), pulling Start / 07:20 / End / OS
   closer to the input. View mode keeps the 9rem floor so empty-dash rows
   don't visually collapse. */
.dayrecord--edit .dayrecord__dd--w-shift[b-d27rl4pp0e] {
    min-width: 0;
}

/* Edit-mode-only: own cap for the Assignment dd. Wider than View's 14rem
   because Edit also has the two number inputs + `/` separator (~6rem)
   eating space before the composed desc literal starts. Clip with
   ellipsis so long descs truncate next to the inputs rather than pushing
   Unit / Report Area rightward. Tune the 20rem value here. */
.dayrecord--edit .dayrecord__dd--w-asg[b-d27rl4pp0e] {
    max-width: 19rem;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}


/* -------------------------------------------------------------------------
   7. dl labels & values + shared inline value classes
   ------------------------------------------------------------------------- */

.dayrecord__dl dt[b-d27rl4pp0e] {
    color: #6c757d;
    font-weight: normal;
}

.dayrecord__dl dd[b-d27rl4pp0e] {
    margin: 0;
    color: #1a2233;
}

.dayrecord__muted[b-d27rl4pp0e] {
    color: #6c757d;
    margin-left: 0.4rem;
}

/* Same spacing as __muted but inherits the dd value color (dark) — used for
   resolved literals that should read as part of the value, not as commentary
   (e.g. shift time-range "07:20-15:30"). */
.dayrecord__lit[b-d27rl4pp0e] {
    margin-left: 0.4rem;
}

/* Cap the resolved-name span next to the Approved / Authorized EmpId inputs.
   Used in both Edit (next to the input) and View (next to the label) modes;
   the View-mode override in section 9 widens the cap because there's no
   input competing for horizontal space. inline-block + max-width +
   overflow:hidden + nowrap is the standard ellipsis recipe — same as
   .dayrecord__mode-modified-name. */
.dayrecord__person-name-cap[b-d27rl4pp0e] {
    display: inline-block;
    max-width: 1.5in;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* `bottom` made the name sit lower than the input text; `baseline` made
       it sit higher (form controls have a quirky baseline near their bottom).
       `middle` splits the difference by aligning the span's vertical center
       with the line's mid-line, which usually sits at roughly the input's
       text vertical-center. */
    vertical-align: middle;
}

/* Accent label modifier — applied to O.T. Pay Dt / Approved / Authorized
   to visually group the OT-related labels apart from the grey defaults
   (Shift / Start / End / Assignment / Unit / Sector). Specificity above
   the base inline-title h4 rule (0,2,0 vs 0,1,1) ensures the accent color
   wins on h4 and dt usages alike. Tune the color value here. */
.dayrecord__section--inline-title > h4.dayrecord__label--accent[b-d27rl4pp0e],
.dayrecord__dl--inline dt.dayrecord__label--accent[b-d27rl4pp0e] {
    color: #3da5e0;
}


/* -------------------------------------------------------------------------
   8. Per-section position nudges
      Each label/value below has its own knob — easier to tune than fighting
      shorthand `margin: 0 2.5rem 0 0` on every dd. Edit-mode rules stack
      atop View-mode rules via specificity (0,3,0 vs 0,2,0).

      NEW-LAYOUT NOTE: this stack of nudges is the kind of thing the
      "fixed widths + gap" pattern (CLAUDE.md) avoids. Keep maintaining
      these where they exist; reach for them sparingly on new layouts.
   ------------------------------------------------------------------------- */

/* Push only the Original Status VALUE (input + literal) to the right,
   independent of the label position. Scoped under .dayrecord__dl--inline so
   specificity (0,2,0) overrides the shorthand `margin: 0 2.5rem 0 0` set
   on `.dayrecord__dl--inline dd` (0,1,1) above. Tune as needed. */
.dayrecord__dl--inline .dayrecord__org-status-value[b-d27rl4pp0e] {
    margin-left: 0.6rem;
}

/* Extra push so Original Status LABEL sits a touch further right than the
   standard pair-gap. Stacked on top of the dl's own dd-to-dt gap. */
.dayrecord__org-status-label[b-d27rl4pp0e] {
    margin-left: 0.3rem;
}

/* Edit-mode-only: nudge the Original Status label position. Stacks atop
   the View-mode 0.3rem rule via higher specificity. Tune this value:
   higher = label (and the value that packs after it) moves right; lower
   moves left. The OS value dd has its own margin-left (0.6rem) which is
   stacked, not replaced. */
.dayrecord--edit .dayrecord__org-status-label[b-d27rl4pp0e] {
    margin-left: 0.4rem;
}

/* Edit-mode-only: pull the Original Status code input + desc literal left
   without moving the "Original Status" label. Stacks atop the unscoped
   0.6rem rule on .dayrecord__dl--inline .dayrecord__org-status-value via
   higher specificity (0,3,0 vs 0,2,0). Lower (more negative) = code/desc
   moves further left; higher = right. Label position is set by
   .dayrecord--edit .dayrecord__org-status-label above and is independent. */
.dayrecord--edit .dayrecord__dl--inline .dayrecord__org-status-value[b-d27rl4pp0e] {
    margin-left: -0.0rem;
}

/* Push Unit clear of the Assignment desc value (which can fill ~14rem of
   the dd). Stacked on top of the inline dl's first-dd margin (1rem) so the
   total separation is ~3.5rem when Assignment desc fully fills its dd, and
   wider when shorter content leaves slack inside. Tuned alongside the other
   ML pushers (org-status-label, sector-label) so End / Sector / Authorized
   line up vertically across the Shift / Assignment / O.T. rows. */
.dayrecord__unit-label[b-d27rl4pp0e] {
    margin-left: 2.65rem;
}

/* Pull the Sector label slightly LEFT of the standard pair-gap. Scoped
   under .dayrecord__dl--inline so specificity (0,2,0) overrides the
   `.dayrecord__dl--inline dt { margin-right: 0.25rem; }` rule (0,1,1). */
.dayrecord__dl--inline .dayrecord__sector-label[b-d27rl4pp0e] {
    margin-left: -0.7rem;
}

/* Edit-mode-only: nudge the Sector label position. Stacks atop the
   View-mode -0.7rem rule via higher specificity. Tune this value:
   higher = Sector moves right, lower (or more negative) = moves left.
   Edit-mode inputs (UNIT L textbox is wider than the View-mode "UNIT L"
   text) push the dt position so this lever exists separately from View. */
.dayrecord--edit .dayrecord__dl--inline .dayrecord__sector-label[b-d27rl4pp0e] {
    margin-left: 1.15rem;
}

/* View-mode-only: position the Authorized label on the merged O.T. Pay Dt
   row. Originally tuned to align with Unit two rows above; that math no
   longer holds with the merged row. Free knob — tweak as needed. */
.dayrecord:not(.dayrecord--edit) .dayrecord__dl--inline .dayrecord__authby-label[b-d27rl4pp0e] {
    margin-left: 0.5rem;
}

/* Edit-mode-only: pull the Start hour input slightly left so the time
   pair sits closer to the "Start" label. Tune the margin-left value
   here; values past ~-0.4rem start visually overlapping the "t" at the
   end of "Start". */
.dayrecord--edit .dayrecord__input--shift-hr1[b-d27rl4pp0e] {
    margin-left: -0.2rem;
}


/* -------------------------------------------------------------------------
   9. O.T. Pay Dt / Approved / Authorized merged-row View-mode bundle
      All rules below are scoped to
        .dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-above
      because that's the unique selector combo for this section in View
      mode. Edit-mode for the same row uses defaults from earlier sections.
      Use this block as a reference for future View-mode-only row tweaks.
   ------------------------------------------------------------------------- */

/* Trim the date-dd's min-width so the "Approved" label sits closer to the
   date. The dd's default min-width (7rem from .dayrecord__dd--w-date)
   leaves visible slack after the formatted MM-DD-YYYY value. Tweak the
   subtractor (0.25in) to taste. */
.dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-above .dayrecord__dd--w-date[b-d27rl4pp0e] {
    min-width: calc(6rem - 0.25in);
}

/* Pin both the Approved and Authorized dds to a fixed width so the row
   reads consistently regardless of content (long name, short name, or "—"
   all reserve the same horizontal real estate). Both dds share
   .dayrecord__dd--w-person; one rule covers both. flex-shrink: 0 prevents
   the dl's nowrap-shrinker from collapsing the dd below its chosen width
   when total content gets tight. Tweak the width to taste. */
.dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-above .dayrecord__dd--w-person[b-d27rl4pp0e] {
    width: 2.5in;
    flex-shrink: 0;
}

/* Wider person-name cap for the Approved / Authorized name spans on this
   row. The base .dayrecord__person-name-cap (section 7) is 1.5in (sized
   for the cramped Edit-mode row alongside the EmpId input + label). View
   mode has no input next to it, so we can spend more horizontal budget on
   the name itself before ellipsis kicks in. */
.dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-above .dayrecord__person-name-cap[b-d27rl4pp0e] {
    max-width: 2.5in;
    /* Override the Edit-mode `middle` so the dd's line-box hugs exactly the
       span's height. Combined with align-items: center on the dl below,
       this puts the span exactly opposite the dt text. (`middle` extends
       the line-box downward past the span, shifting the dd center low.) */
    vertical-align: top;
}

/* Keep date / Approved / Authorized on a single line on this row. The
   base .dayrecord__dl--inline allows flex-wrap so narrow viewports can
   stack pairs, but in this section we already cap each name span's width —
   wrapping the trailing pairs to the next line just looks broken.
   align-items: center vertically centers each flex item (dt and dd)
   regardless of inline metrics. */
.dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-above .dayrecord__dl--inline[b-d27rl4pp0e] {
    flex-wrap: nowrap;
    align-items: center;
}

/* Prevent text inside the row from wrapping to a second visual line. With
   flex-wrap: nowrap above, narrow widths shrink each flex item; once an
   item shrinks below its content size the text inside wraps unless we
   lock white-space. The .dayrecord__person-name-cap spans already have
   nowrap; this rule covers the date dd and the section's h4 ("O.T. Pay
   Dt") for the same effect. */
.dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-above > h4[b-d27rl4pp0e],
.dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-above .dayrecord__dl--inline > dd[b-d27rl4pp0e],
.dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-above .dayrecord__dl--inline > dt[b-d27rl4pp0e] {
    white-space: nowrap;
}

/* Let the "O.T. Pay Dt" h4 shrink to its content width on the merged row.
   The base .dayrecord__section--inline-title > h4 width (5.5rem) is wider
   than "O.T. Pay Dt" rendered, leaving visible slack before the date
   value. Try a fixed width like 4.25rem if `auto` hugs too tight. */
.dayrecord:not(.dayrecord--edit) .dayrecord__section--rule-above > h4[b-d27rl4pp0e] {
    width: auto;
}


/* -------------------------------------------------------------------------
   10. Form inputs
       Base + invalid + uppercase + size variants + focus washes.
   ------------------------------------------------------------------------- */

.dayrecord__input[b-d27rl4pp0e] {
    padding: 0.15rem 0.35rem;
    border: 1px solid #b8c0c8;
    border-radius: 3px;
    font-size: 0.88rem;
    background: #fffefb;
}

.dayrecord__input:focus[b-d27rl4pp0e] {
    outline: none;
    border-color: #5b8def;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.18);
}

/* Tab-out invalid feedback — red border, mirrors desktop's
   `BorderBrush = Brushes.Red` on the same Check* paths
   (BkSch001\TabA.cs:983 etc). Save click raises the popup separately. */
.dayrecord__input--invalid[b-d27rl4pp0e] {
    border-color: #c0392b;
    box-shadow: 0 0 0 1px #c0392b;
}

.dayrecord__input--invalid:focus[b-d27rl4pp0e] {
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.25);
}

/* Alpha fields force uppercase. Visual layer only — actual persistence is
   done in @bind:set via the Upper() helper so saved values match what the
   user sees. Free-form text fields (Remarks-type) skip this class. */
.dayrecord__input--upper[b-d27rl4pp0e] {
    text-transform: uppercase;
}

/* Focused-field highlight, two flavors:
     * Library-backed inputs (Status, Shift, Asgn, Unit, RptArea, personnel
       pickers) get a pale BLUE wash — same hue as the Authorized accent
       (#3da5e0). Tells the user "this field has a selection list."
     * Every other input (free-text, numeric, time, date) gets a pale YELLOW
       wash. Tells the user "this is just a normal entry field."
   Both use the same low alpha so they read as soft washes rather than
   colored badges, and only paint while the field actually has focus.
   Inline `style` on inputs only sets `color` (SCT1 status colors), so it
   never overrides these backgrounds.

   Specificity: library rule uses two classes + :focus to beat the general
   one-class + :focus rule below it. Without the bump CSS source order
   would still work, but matching by specificity is the safer pattern when
   future rules get inserted. */
.dayrecord__input.dayrecord__input--library:focus[b-d27rl4pp0e] {
    background-color: rgba(61, 165, 224, 0.18);
}

.dayrecord__input:focus[b-d27rl4pp0e] {
    background-color: rgba(255, 220, 0, 0.18);
}

/* Sized variants — pick the size matching the field's maxlength.
     --num{2,3,6,7} : right-aligned, tabular-nums, sized for digit count
     --w{5,7}       : left-aligned, sized for short alphanumeric codes
     --date         : explicit width on date input */
.dayrecord__input--num2[b-d27rl4pp0e] {
    width: 2.25rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dayrecord__input--num3[b-d27rl4pp0e] {
    width: 2.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dayrecord__input--num6[b-d27rl4pp0e] {
    width: 3.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dayrecord__input--num7[b-d27rl4pp0e] {
    width: calc(4.5rem - 0.13in);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dayrecord__input--w5[b-d27rl4pp0e] {
    width: 5rem;
}

.dayrecord__input--w7[b-d27rl4pp0e] {
    width: calc(6.5rem - 0.25in);
}

/* Explicit width on the date input so we can trim it deliberately. Browser
   default for `<input type="date">` is ~8.5rem; this rule pins it 0.125in
   narrower than that default. Tweak the `width` value to taste. */
.dayrecord__input--date[b-d27rl4pp0e] {
    width: calc(7.5rem - 0.125in);
}

.dayrecord__sep[b-d27rl4pp0e] {
    margin: 0 0.15rem;
    color: #6c757d;
}


/* -------------------------------------------------------------------------
   11. Slots table — work-status grid (status / desc / hrs / etc.)
   ------------------------------------------------------------------------- */

.dayrecord__slots[b-d27rl4pp0e] {
    /* width: auto (not 100%) so the table sits at the sum of its column
       min-contents instead of stretching to fill the modal. Stretching
       triggers auto-layout slack distribution, which silently pads every
       column with leftover space and ignores per-column width hints —
       making "shrink column X" changes visually invisible. With auto
       width, each column is exactly as wide as its content (or its
       explicit width hint, whichever is larger). */
    width: auto;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.dayrecord__slots td[b-d27rl4pp0e],
.dayrecord__slots th[b-d27rl4pp0e] {
    padding: 0.3rem 0.45rem;
    border-bottom: 1px solid #eef0f3;
    text-align: left;
}

.dayrecord__slots th[b-d27rl4pp0e] {
    font-weight: 600;
    color: #6c757d;
    border-bottom: 1px solid #d0d4da;
    white-space: nowrap;
}

.dayrecord__slots td.num[b-d27rl4pp0e],
.dayrecord__slots th.num[b-d27rl4pp0e] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Status column — capped width. Floor is ~3.5rem (the --num3 input plus
   table-cell padding); below that, swap the slot's status code input from
   dayrecord__input--num3 (2.75rem, 3-digit) to --num2 (2.25rem, 2-digit)
   and the column can go ~3rem. */
.dayrecord__slot-status[b-d27rl4pp0e] {
    width: 4rem;
    max-width: 4rem;
}

/* Description column — VIEW mode: 16rem floor + nowrap, so long descs grow
   the column past the floor. View mode has the slack for it; the slot
   table can extend toward the modal's right edge without crowding any
   inputs (there are none). Tune the View-mode floor here. */
.dayrecord__slot-desc[b-d27rl4pp0e] {
    min-width: 16rem;
    white-space: nowrap;
}

/* EDIT-mode only — lock the column at 12rem and ellipsis-truncate long
   descs. Edit-mode rows pack wider (numeric inputs in Wrk Hrs / Ext Hrs /
   Start / End / Hrs/Mns add up to more than View-mode's plain numbers)
   so the description has to give. min-width:0 cancels the View-mode 16rem
   floor; max-width: with overflow:hidden+ellipsis is what actually
   truncates. Tune `width` for tighter / looser. Floor before the
   "Description" header itself wraps is ~7rem. */
.dayrecord--edit .dayrecord__slot-desc[b-d27rl4pp0e] {
    width: 12rem;
    min-width: 0;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rate column — single SCT1_RATE_TYPE character, right-aligned.
   Floor is the "Rate" header text (~2-2.5rem at 0.88rem font); below
   that, the header wraps. The padding override below shaves the
   default 0.45rem side padding to give a tighter rendered width.
   text-align lives on the higher-specificity td/th rule below because
   the generic `.dayrecord__slots td, th { text-align: left }` rule
   wins over a class-only selector. */
.dayrecord__slot-rate[b-d27rl4pp0e] {
    width: 1rem;
}

.dayrecord__slots td.dayrecord__slot-rate[b-d27rl4pp0e],
.dayrecord__slots th.dayrecord__slot-rate[b-d27rl4pp0e] {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    text-align: right;
}

/* Ot Posted column — single SCH1_OT_POSTED_n character. */
.dayrecord__slot-otposted[b-d27rl4pp0e] {
    width: 3rem;
}

.dayrecord__slots td.dayrecord__slot-otposted[b-d27rl4pp0e],
.dayrecord__slots th.dayrecord__slot-otposted[b-d27rl4pp0e] {
    text-align: right;
}

/* Per-slot comment column. Narrow center-aligned cell; the button itself
   carries the populated/empty visual cue (filled vs outlined). */
.dayrecord__cmt-col[b-d27rl4pp0e] {
    width: 2.4rem;
    text-align: center;
}


/* -------------------------------------------------------------------------
   12. Remarks — View (<pre>) and Edit (<textarea>) widths tuned independently
   ------------------------------------------------------------------------- */

.dayrecord__remarks[b-d27rl4pp0e] {
    /* View-mode width — pre fills available row space up to the max-width
       cap, then wraps at the cap for long remarks. flex:1 makes it fill
       (parent section is display:flex); max-width caps the fill so short
       remarks still get a full-width box. Tune the max-width here.
       Edit-mode textarea is independent (.dayrecord__remarks-input below). */
    flex: 1;
    max-width: 45rem;
    margin: 0;
    padding: 0.5rem 0.6rem;
    background: #fbfcfd;
    border: 1px solid #e3e6ea;
    border-radius: 3px;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.88rem;
    color: #1a2233;
    min-height: 2.4rem;
}

.dayrecord__remarks-input[b-d27rl4pp0e] {
    /* Edit-mode width — tune here. Trimmed from 56rem to leave room for the
       inline "Remarks" label (5.5rem h4 + 0.75rem column-gap) so the label
       and textarea sit on one row inside the wide modal. */
    width: 50.5rem;
    /* Edit-mode-only horizontal nudge. ~2mm = ~0.5rem at the default 16px
       root font size. Tune here. View-mode pre uses .dayrecord__remarks
       above and is untouched. */
    margin-left: 0.6rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #b8c0c8;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
}


/* -------------------------------------------------------------------------
   13. Footer (action buttons + last-modified note)
   ------------------------------------------------------------------------- */

.dayrecord__footer-note[b-d27rl4pp0e] {
    color: #6c757d;
    font-size: 0.8rem;
    font-style: italic;
}

/* Fixed-width footer action button — defaults to fitting the longest split
   button label ("View Primary Record" / "View Split Record" / "Add Split
   Record"). Short labels (Edit / Save / Cancel) pair this base width with
   the --half modifier below to take half the room. */
.dayrecord__btn-fixed[b-d27rl4pp0e] {
    width: 9rem;
    /* Trim text + padding from Bootstrap's btn defaults (1rem / .375rem .75rem).
       Widths above are independent — to shrink the button footprint itself,
       reduce `width` here and on --half below. Tune these three values:
         font-size — text size (1rem default → 0.85rem now)
         padding   — top/bottom × left/right inside the button
         width     — outer button width (overrides padding contribution) */
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    /* Prevent flex from shrinking buttons when the footer's total content
       exceeds the modal width — without this, the button shrinks below its
       declared width, the text wraps inside, and the button gets visibly
       taller. The Mode pill below is allowed to take the squeeze instead. */
    flex-shrink: 0;
    white-space: nowrap;
}

/* Half-width variant for the short action labels (Edit / Save / Cancel).
   Tune the width here. The split button keeps the base 9rem because its
   label needs the full width. */
.dayrecord__btn-fixed--half[b-d27rl4pp0e] {
    width: 3.75rem;
}

/* View Balances modifier. Its label ("View Balances", ~5.5rem text + 1rem
   padding) doesn't need the full 9rem reserved for the Split button (whose
   longest label is "View Primary Record" at ~8rem). Tune as needed. */
.dayrecord__btn-fixed--bal[b-d27rl4pp0e] {
    width: 7rem;
}


/* -------------------------------------------------------------------------
   14. Per-slot comment buttons (pencil glyph cell in the slots table)
   ------------------------------------------------------------------------- */

.dayrecord__cmt-btn[b-d27rl4pp0e] {
    width: 1.9rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid #b8c0c8;
    border-radius: 3px;
    background: #fffefb;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: #6c757d;
}

/* Pencil glyph (U+270E). Renders as a monochrome text symbol on every
   platform, so CSS `color` controls darkness directly instead of fighting
   OS emoji rendering. State is carried by the button's bg color (amber
   when populated) plus a darker glyph color for stronger contrast. */
.dayrecord__cmt-icon[b-d27rl4pp0e] {
    display: inline-block;
    font-weight: bold;
}

/* Filled (populated comment) state — amber bg + darker glyph for contrast.
   Merged from two scattered rules in the previous version. */
.dayrecord__cmt-btn--filled[b-d27rl4pp0e] {
    background: #fff8e6;
    border-color: #d4a017;
    color: #5a3e00;
}

.dayrecord__cmt-btn:hover:not(:disabled)[b-d27rl4pp0e] {
    border-color: #5b8def;
    background: #f4f8ff;
}

.dayrecord__cmt-btn--filled:hover:not(:disabled)[b-d27rl4pp0e] {
    background: #ffeec5;
    border-color: #b8860b;
}

.dayrecord__cmt-btn:disabled[b-d27rl4pp0e] {
    opacity: 0.4;
    cursor: default;
}
/* /Components/Calendar/MonthYearNav.razor.rz.scp.css */
.month-nav[b-26c8qcg98v] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.month-nav__month[b-26c8qcg98v] { width: auto; min-width: 8rem; }
.month-nav__year[b-26c8qcg98v]  { width: auto; min-width: 5rem; }

.month-nav__split[b-26c8qcg98v] {
    display: flex;
    gap: 0.75rem;
    margin-left: 1rem;
}

.month-nav__split label[b-26c8qcg98v] {
    font-size: 0.9rem;
    user-select: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-6pdvnrqcp1] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-6pdvnrqcp1] {
    flex: 1;
}

.sidebar[b-6pdvnrqcp1] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #0e7490 70%);
}

@media (min-width: 641px) {
    .page[b-6pdvnrqcp1] {
        flex-direction: row;
    }

    .sidebar[b-6pdvnrqcp1] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    article[b-6pdvnrqcp1] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-6pdvnrqcp1] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-6pdvnrqcp1] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-3vk0qr3b0u] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-3vk0qr3b0u] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-3vk0qr3b0u] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-3vk0qr3b0u] {
    font-size: 0.9rem;
}

.bi[b-3vk0qr3b0u] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-3vk0qr3b0u] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-3vk0qr3b0u] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-3vk0qr3b0u] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-3vk0qr3b0u] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-3vk0qr3b0u] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-3vk0qr3b0u] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-3vk0qr3b0u] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-3vk0qr3b0u] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-3vk0qr3b0u] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-3vk0qr3b0u] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-3vk0qr3b0u] {
        padding-bottom: 1rem;
    }

    .nav-item[b-3vk0qr3b0u]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-3vk0qr3b0u]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-3vk0qr3b0u]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-3vk0qr3b0u] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-3vk0qr3b0u] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-3vk0qr3b0u] {
        display: none;
    }

    .nav-scrollable[b-3vk0qr3b0u] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/Calendar.razor.rz.scp.css */
/* Employee selector bar — same visual language as BkSch001's library-backed
   number inputs (numeric font, blue focus wash, red invalid border) so the
   calendar header reads as part of the same family. Locked branch is shown
   when the user is self-only (SCH9 ApplyToO='Y' && !ApplyToA && !ApplyToS). */
.calendar-emp-bar[b-vbkjavt2bz] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.calendar-emp-bar__label[b-vbkjavt2bz] {
    font-weight: 600;
}

.calendar-emp-bar__input[b-vbkjavt2bz] {
    width: 4.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 0.35rem;
    border: 1px solid #b8c0c8;
    border-radius: 3px;
    font-size: 0.92rem;
    background: #fffefb;
}

.calendar-emp-bar__input:focus[b-vbkjavt2bz] {
    outline: none;
    border-color: #5b8def;
    background-color: rgba(61, 165, 224, 0.18);
    box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.18);
}

.calendar-emp-bar__input--invalid[b-vbkjavt2bz] {
    border-color: #c0392b;
    box-shadow: 0 0 0 1px #c0392b;
}

.calendar-emp-bar__input--invalid:focus[b-vbkjavt2bz] {
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.25);
}

.calendar-emp-bar__name[b-vbkjavt2bz] {
    color: #555;
}

.calendar-emp-bar__locked[b-vbkjavt2bz] {
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #555;
    font-variant-numeric: tabular-nums;
}

.calendar-emp-bar__lock[b-vbkjavt2bz] {
    margin-left: 0.35rem;
    font-size: 0.85rem;
}

.calendar-grid-wrap[b-vbkjavt2bz] {
    position: relative;
}

.calendar-grid[b-vbkjavt2bz] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: #d0d0d0;
    border: 1px solid #d0d0d0;
    transition: opacity 100ms ease;
}

.calendar-grid--loading[b-vbkjavt2bz] {
    opacity: 0.5;
    pointer-events: none;
}

.calendar-grid__head[b-vbkjavt2bz] {
    background: #e8e8e8;
    padding: 4px 6px;
    font-weight: 600;
    font-size: 0.8rem;
    text-align: center;
    text-transform: uppercase;
    color: #555;
}

.calendar-grid__spinner[b-vbkjavt2bz] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d0d0d0;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #555;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* /Components/Pages/Home.razor.rz.scp.css */
.tile-grid[b-gx6q1wt6nt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.tile[b-gx6q1wt6nt] {
    display: block;
    padding: 1rem;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s;
}

.tile:hover[b-gx6q1wt6nt] {
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    text-decoration: none;
}

.tile__title[b-gx6q1wt6nt] { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.25rem; }
.tile__sub[b-gx6q1wt6nt]   { font-size: 0.85rem; color: #666; }
/* /Components/Shared/AlertModal.razor.rz.scp.css */
.alert-modal__message[b-txzctkcghn] {
    margin: 0;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: #1a2233;
    line-height: 1.45;
}
/* /Components/Shared/Modal.razor.rz.scp.css */
.modal-backdrop[b-rgev0jnzuz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-rgev0jnzuz] {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    min-width: 320px;
    max-width: 640px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}

.modal-card--medium[b-rgev0jnzuz] {
    max-width: 720px;
}

.modal-card--wide[b-rgev0jnzuz] {
    max-width: 880px;
}

.modal-card__head[b-rgev0jnzuz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-card__title[b-rgev0jnzuz] {
    margin: 0;
    font-size: 1.1rem;
}

.modal-card__close[b-rgev0jnzuz] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0 4px;
}

.modal-card__close:hover[b-rgev0jnzuz] {
    color: #000;
}

.modal-card__body[b-rgev0jnzuz] {
    padding: 16px;
    overflow-y: auto;
}

.modal-card__foot[b-rgev0jnzuz] {
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* /Components/Shared/Toast.razor.rz.scp.css */
.toast-banner[b-zmsu4zbsx8] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1080; /* above modals (modal-backdrop = 1050) */
    min-width: 14rem;
    max-width: 24rem;
    padding: 0.75rem 1rem;
    background: #1f7a4d;
    color: #f7fef9;
    border-radius: 0.4rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.4;
    user-select: none;
    animation: toast-banner-in-b-zmsu4zbsx8 160ms ease-out;
}

.toast-banner__msg[b-zmsu4zbsx8] {
    display: block;
}

@keyframes toast-banner-in-b-zmsu4zbsx8 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}