/* App-owned chrome only: the Blazor loading screen and error surfaces, then the ticket form's
   touch-target, column-layout and surface rules. All other component styling comes from
   MudBlazor (the theme values live in Layout/AppTheme.cs). */

/* The page color before Blazor boots — AppTheme.Background repeated so the loading screen
   does not flash white-then-gray. MudBlazor paints <body> from the theme once it renders. */
body {
    background-color: #dedede;
}

h1:focus {
    outline: none;
}

#blazor-error-ui {
    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 {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #594ae2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* MudBlazor styling isn't up yet during boot, so the loading screen sets its own type. */
.loading-title,
.loading-caption,
.loading-progress-text {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.loading-title {
    position: absolute;
    inset: calc(20vh - 4rem) 0 auto 0;
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: #594ae2;
}

.loading-caption {
    position: absolute;
    inset: calc(20vh + 9rem) 0 auto 0;
    margin: 0 auto;
    max-width: 24rem;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    padding: 0 1rem;
}

/* Touch targets (doc 10 §2 item 22). MudBlazor renders every text field's Clearable ×
   as a Size.Small icon button — a 24 px box with no parameter to enlarge it — which a
   finger misses on a tablet in the field. Widen the hit area to 40 px without moving the
   icon or growing the field: the extra padding is taken back by negative margins (the
   inline-end margin is MudBlazor's own .me-n1, left alone). App-wide on purpose: the form's
   pickers and the search panel's fields share the same ×. */
.mud-input-clear-button.mud-icon-button-size-small {
    padding: 11px;
    margin-top: -8px;
    margin-bottom: -8px;
    margin-inline-start: -8px;
}

/* The phase-column sizer (PhaseColumnSizer) only exists for the md+ column layout below;
   on phones the rows stack full-width and the sizer must not render at all — a nowrap
   phase name would push the stacked cell wider than the screen. */
.tkt-col-sizer {
    display: none;
}

/* The rows' DOM order is the md+ column order and the caption headers' — phase first, delete
   last — so tab order walks the visual columns left to right on the keyboard-heavy
   desktop/tablet surfaces, and phones stack in the same order. (The Billable checkbox that
   used to lead the row, with a phone reorder to push it to the stack's end, went with the
   flag on 2026-10-19: billability is the phase's, captioned under the phase picker.) */

/* iPad portrait (sm, 600–959 px; the field iPad is 820): the allocation row keeps its
   floating labels — there is no header row below md — but stops stacking one field per line.
   The two pickers share the first line, half each, and the fixed-width numbers and the delete
   share the second (Micah's 2026-08-19 portrait note: phase + craft could share a line at 820;
   built 2026-10-26, doc 10 §2 item 22 — two lines per allocation where the phone stacks four).
   A section with no second picker — Equipment, Progress — has room for its phase and numbers
   on one line, so there the phase flexes and nothing wraps. Half of an 820 screen's row is
   ~280 px of text each: the p90 employee, craft and category names fit, phases to ~35
   characters. The grid items' own xs sizes (12/4/6) are single-class rules, so these
   two-class ones win without !important. 600 px is MudBlazor's sm edge. */
@media (min-width: 600px) and (max-width: 959.98px) {
    .tkt-alloc .tkt-col-phase,
    .tkt-alloc .tkt-col-pick {
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0;
    }

    /* No second picker: the phase takes the line's slack and the numbers follow it. */
    .tkt-alloc:not(:has(.tkt-col-pick)) .tkt-col-phase {
        flex: 1 1 0;
        max-width: none;
    }

    .tkt-alloc .tkt-col-hrs {
        flex: 0 0 96px;
        max-width: 96px;
    }

    .tkt-alloc .tkt-col-qty {
        flex: 0 0 120px;
        max-width: 120px;
    }

    .tkt-alloc .tkt-col-um {
        flex: 0 0 90px;
        max-width: 90px;
    }

    .tkt-alloc .tkt-col-del {
        flex: 0 0 56px;
        max-width: 56px;
        justify-content: center;
        margin-inline-start: auto;
    }
}

/* Allocation-row column labels print once in a header row above the labor/equipment rows
   (doc 10 §2 item 22), so at md and up the rows drop their floating labels. Phones and sm keep
   per-field labels — stacked and two-line rows have no columns for a header to describe. display:none
   only — but hidden text is excluded from accessible-name computation, so every control in
   these rows MUST carry its own explicit name: the pickers via ReferencePicker's aria-label,
   the numeric fields' inline aria-label. A control relying on its (hidden) label alone is
   nameless to a screen reader here. 960px is MudBlazor's md edge. */
@media (min-width: 960px) {
    .tkt-alloc .mud-input-label {
        display: none;
    }

    /* The border notch the hidden label would sit in — MudBlazor's outlined border is a
       fieldset whose legend leaves a gap in the top edge whether or not the label shows. */
    .tkt-alloc .mud-input-outlined-border legend {
        display: none;
    }

    /* The allocation columns switch from grid units to flex here: the delete is far narrower
       than one grid unit (its integer column wasted ~90 px the pickers need), the hours are
       fixed-width, and the two pickers divide what is left. The header rows carry the same
       classes — that is what keeps the captions on their columns. */

    /* margin auto pushes the delete to the row's right edge in sections with no flexing
       column (Progress); where a picker already flexes to fill, the free space is zero and
       the margin does nothing. */
    .tkt-alloc .tkt-col-del {
        flex: 0 0 56px;
        max-width: 56px;
        justify-content: center;
        margin-inline-start: auto;
    }

    /* Hours cap at 24.00 — five characters — so the fields carry exactly that; the inputs
       enforce Max=24, which is what makes five characters a true ceiling (an uncapped value
       would clip its leading digits and read as a smaller, plausible number). The digits
       align right, spreadsheet-style (captions too, below): the field must hold five
       characters while mostly showing four, and right-aligned the spare pixel sits on the
       left as column spacing instead of trailing whitespace (Micah, 2026-08-19). */
    .tkt-alloc .tkt-col-hrs {
        flex: 0 0 60px;
        max-width: 60px;
    }

    .tkt-alloc .tkt-col-hrs input {
        padding-left: 4px;
        padding-right: 6px;
        text-align: right;
    }

    .tkt-alloc .tkt-col-hrs .mud-typography {
        text-align: right;
    }

    /* Material/progress quantities are open-ended (1500.00 is ordinary) and have no cap to
       enforce, so their column is sized for six figures with cents (999,999.99) — same
       right-aligned digits. Anything wider still clips its leading digits, but that is
       beyond any quantity the business has keyed. */
    .tkt-alloc .tkt-col-qty {
        flex: 0 0 100px;
        max-width: 100px;
    }

    .tkt-alloc .tkt-col-qty input {
        padding-left: 4px;
        padding-right: 6px;
        text-align: right;
    }

    .tkt-alloc .tkt-col-qty .mud-typography {
        text-align: right;
    }

    /* The read-only unit-of-measure display — short codes (EA, TON, SQFT). */
    .tkt-alloc .tkt-col-um {
        flex: 0 0 76px;
        max-width: 76px;
    }

    .tkt-alloc .tkt-col-um input {
        padding-left: 8px;
        padding-right: 4px;
    }

    /* The phase is the one field where a truncated description has real impact, so its
       column is exactly content-sized: every phase cell (the header's too) contains the
       section's distinct phase names as an invisible sizer (PhaseColumnSizer), the widest
       line sets the cell's max-content width, and all cells agree because they carry the
       same set — no truncation, no excess (Micah, 2026-08-19). The min floors an empty
       section's picker at a usable width; the calc cap floors the leftover picker
       (craft/category) at ~170 px — its code plus the front of its description, the part
       that matters there (406 = the labor row's fixed columns, 236 — three hours fields
       and the delete — plus that floor; 462 while the Billable column was there). On wide
       rows 48% binds instead. */
    .tkt-alloc .tkt-col-phase {
        flex: 0 0 auto;
        width: auto;
        min-width: 240px;
        max-width: min(48%, calc(100% - 406px));
    }

    .tkt-col-sizer {
        display: block;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }

    /* Each name on its own nowrap line; the padding stands in for the input's chrome
       (14 px text padding each side, the 42 px clear button, borders) plus a small
       buffer for letter-spacing the sizer's font may lack. */
    .tkt-col-sizer > div {
        white-space: nowrap;
        font-size: 1rem;
        padding-right: 74px;
    }

    .tkt-alloc .tkt-col-pick {
        flex: 1 1 0;
        max-width: none;
        min-width: 0;
    }
}

/* Surfaces by nesting level (doc 10 §2 item 26(e), decided 2026-10-22): the page is gray
   (AppTheme.Background), section cards are white and elevated, and each resource line — one
   employee, one unit, one material row — is a tinted block inside its card with white inputs
   on it. Tint, not border: the outlined boxes the form used to nest were all white with the
   same hairline, and on a phone one employee ran into the next. The tint is the theme's
   BackgroundGray so a future dark palette carries it. Nothing here moves padding, so item
   22's measured column widths hold. */
.mud-paper.tkt-line {
    background-color: var(--mud-palette-background-gray);
}

    /* Editable inputs read as white fields on the tint; a disabled field stays transparent,
       which is what makes read-only rows (an Exported ticket, the UoM display) look read-only.
       The wrapper div is MudBlazor's own; its border is a separate absolute fieldset, so the
       background sits inside the border exactly. */
    .mud-paper.tkt-line .mud-input-outlined:not(.mud-disabled),
    .mud-paper.tkt-bulk .mud-input-outlined:not(.mud-disabled) {
        background-color: var(--mud-palette-surface);
        border-radius: var(--mud-default-borderradius);
    }

/* The bulk-entry bar at the top of Labor and Equipment is a tray for adding rows, not a row,
   and on the same gray as the resource lines it read as one more employee (Micah, 2026-10-22,
   on the iPhone). It takes a faint wash of the primary color plus a primary accent on its
   leading edge instead: "action area", not "record". The gray line is the fallback for a
   browser without color-mix (older than iOS 16.2 / Chrome 111 - below the device floor). */
.mud-paper.tkt-bulk {
    background-color: var(--mud-palette-background-gray);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    border-inline-start: 3px solid var(--mud-palette-primary);
}