/* Global stylesheet — first one this app has had. Design tokens here mirror ApplicationTheme.cs's
   PaletteLight/Typography/LayoutProperties so plain Razor components (FilterPill, CollapsibleSection, the
   kanban board, etc.) that MudTheme's C# object can't reach still stay visually consistent with it. Nav bar
   colors (appbar/drawer) are deliberately NOT tokenized here — those were left as-is per direction. */

/* MudBlazor's .mud-main-content reserves padding-top: var(--mud-appbar-height) unconditionally — it can't
   tell from CSS alone whether the layout actually has a MudAppBar. This app doesn't (navigation moved into
   the left drawer), so that reserved space is now just a dead gap at the top of every page. */
.mud-main-content {
    padding-top: 0 !important;
}

:root {
    --color-primary: #1D4ED8;
    --color-primary-darken: #1E3A8A;
    --color-primary-lighten: #3B82F6;
    --color-page-bg: #F4F6F9;
    --color-surface: #FFFFFF;
    --color-border: #E4E7EC;
    --color-text-primary: #1C2430;
    --color-text-secondary: #6B7280;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #2E90FA;
    --radius: 8px;
    --radius-pill: 999px;
}

/* ============================== Field density ============================== */

/* MudBlazor's outlined fields default to ~56px tall (18.5px vertical padding), which towers over buttons
   sitting next to them (e.g. the "+ New" quick-add pill beside a Customer/Vehicle autocomplete) and wastes
   space in a form-dense shop app. Forcing the same padding MudBlazor's own Margin="Dense" modifier uses,
   app-wide, regardless of whether a given field set that parameter, keeps every MudTextField/MudSelect/
   MudAutocomplete/MudDatePicker/MudNumericField (they all share this base class) at ~40px consistently. */
.mud-input-root-outlined {
    padding-top: 10.5px !important;
    padding-bottom: 10.5px !important;
}

/* Every MudNumericField ships its own up/down spin-button pair by default — hidden app-wide per product
   direction. Typing (or pasting) a number is the norm here; nobody's hunting for two tiny arrows to set a
   quantity or a dollar amount. */
.mud-input-numeric-spin {
    display: none !important;
}

/* ============================== Print rules ============================== */

.print-only { display: none; }

@media print {
    .mud-appbar, .mud-drawer, .mud-drawer-container, .no-print { display: none !important; }
    .mud-main-content { padding-left: 0 !important; margin-left: 0 !important; }
    .mud-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
    .print-only { display: block !important; }

    /* Pins the Total row to the bottom of every printed page (WorkOrder/Invoice/Statement documents) rather
       than only appearing after the last line item — position:fixed repeats on each page in print layout,
       unlike normal flow. Reserve matching bottom padding on the page itself so the last table row never
       renders underneath it. */
    .wop-pdf-page {
        padding-bottom: 64px;
    }
    .wop-total-row {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 14px 28px;
        background: var(--color-surface);
        border-top: 2px solid var(--color-text-primary);
    }
}

/* ==================== Shop-floor touch targets ==================== */

/* Global touch-target sizing. Reduced from the original large "shop-floor" sizes so buttons
   and nav links are visually more compact across the app. If you need larger tap targets for
   specific controls (e.g. kiosk or tablet mode), add a dedicated class instead of widening
   the global rule. */
.mud-button-root { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.mud-icon-button { padding: 6px; }
.mud-nav-link { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.mud-checkbox-root, .mud-radio-root, .mud-switch-root { padding: 6px; }

/* ==================== Button normalize ====================
   Typography.Button.TextTransform="none" in ApplicationTheme.cs already covers case; this is a belt-and-
   suspenders CSS override plus the flatter, more rounded look the reference screenshots use. */

.mud-button-root {
    text-transform: none;
    border-radius: var(--radius);
    font-weight: 500;
    box-shadow: none !important;
}

/* ==================== Quick-access home screen tiles (migrated from _Layout.cshtml) ==================== */

.quick-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    min-height: 160px;
    padding: 28px 12px;
    cursor: pointer;
    user-select: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.quick-nav-card:hover, .quick-nav-card:active {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(26,31,54,0.10);
    border-color: var(--color-primary-lighten);
}
.quick-nav-card-icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(29,78,216,0.08);
    transition: background-color 0.18s ease;
}
.quick-nav-card:hover .quick-nav-card-icon-badge {
    background: rgba(29,78,216,0.16);
}
.quick-nav-card-icon {
    font-size: 1.85rem;
    color: var(--color-primary);
}

/* ==================== Flat underline tab strip ====================
   Generalized from WorkOrderFormDialog.razor's original page-scoped .wof-tabs/.wof-tab rules so every
   MudTabs-replacement in the app (Settings.razor, WorkOrderFormDialog, future pages) can share one look —
   deliberately not MudTabs' boxed/sliding default header and not a pill-segmented toggle (different control,
   different look). Usage: a flex row of <button class="tab-strip-item [active]"> inside a
   <div class="tab-strip">. */

.tab-strip {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--color-border);
    padding: 0 2px;
    margin-bottom: 16px;
    overflow-x: auto;
    flex: 0 0 auto;
}

.tab-strip-item {
    background: none;
    border: none;
    padding: 10px 2px;
    font-size: 0.86rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab-strip-item:hover {
    color: var(--color-text-primary);
}

.tab-strip-item.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Same flat-underline look applied to MudBlazor's own MudTabs (used by Settings.razor) via its real class
   names, rather than replacing the component — keeps MudTabs' built-in keyboard nav/ARIA/routing behavior,
   only restyles it to match .tab-strip above. */
.mud-tabs-tabbar {
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--color-border);
}
.mud-tab {
    text-transform: none;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--color-text-secondary);
    opacity: 1;
}
.mud-tab-active {
    color: var(--color-primary);
}
.mud-tab-slider {
    background-color: var(--color-primary) !important;
    height: 2px;
}

/* ==================== Field density ====================
   Goes noticeably tighter than MudBlazor's own built-in "dense" metrics — matches the reference
   screenshots' short field height. Applied to both the normal and MudBlazor's own dense variant so every
   field renders at the same height regardless of whether a given usage passes Margin="Margin.Dense" (a few
   quick-add popovers in WorkOrderFormDialog already do). !important is deliberate: MudBlazor's own outlined
   padding is set by several compound selectors at matching specificity (div.mud-input-slot.mud-input-root-
   outlined, its -margin-dense variant, plus a same-specificity base .mud-input-root rule) whose winner
   depends on MudBlazor's own internal stylesheet order — chasing each one individually proved brittle, so
   !important guarantees this value always wins on padding/margin, which don't vary by field state. The
   resting label transform below is deliberately NOT !important — it has to lose to MudBlazor's own
   higher-specificity shrunk/focused-label selector (.mud-shrink ~ label..., 4 classes) once the field has a
   value or is focused; an earlier pass made this !important too and it broke label shrinking app-wide
   (label text sat on top of the field value instead of floating above it). Equal specificity plus this
   file loading after MudBlazor's own CSS is enough for the resting position alone to win. */
.mud-input-root-outlined,
.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
/* A multiline field's <textarea> is sized (by MudBlazor's own JS/CSS) assuming its normal, taller outlined
   padding — squashing that down to the 6px single-line density above leaves the textarea's own content
   taller than the now-shrunk container, which clips overflow and hides all but the bottom sliver of each
   line (the floating label and the first line of placeholder/value end up overlapping the top border).
   16.5px matches MudBlazor's own default outlined padding, so this just opts multiline fields back out of
   the site-wide density override instead of inventing a new value.
   Two selector forms are needed: MudBlazor puts .mud-input-root-outlined directly ON the <textarea> itself
   (not on a wrapping div), so :has(textarea) can never match — a textarea can't contain a descendant
   textarea — hence the plain tag-qualified `textarea.mud-input-root-outlined` rule below, which also wins
   on specificity (0,1,1 vs the 6px rule's 0,1,0) without needing !important's help. The :has() form is kept
   too in case any MudBlazor input ever does wrap a textarea in a classed container. */
textarea.mud-input-root-outlined,
textarea.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-input-root-outlined:has(textarea),
.mud-input-root-outlined.mud-input-root-margin-dense:has(textarea) {
    padding-top: 16.5px !important;
    padding-bottom: 16.5px !important;
}
.mud-input-control-margin-normal,
.mud-input-control-margin-dense {
    margin: 2px 0px !important;
}
.mud-input-label-outlined,
.mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, 8px) scale(1);
}

/* ==================== Filter pill ==================== */

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.filter-pill:hover {
    border-color: var(--color-primary-lighten);
}

.filter-pill.filter-pill-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(29,78,216,0.06);
}

.filter-pill-panel {
    padding: 16px;
    min-width: 260px;
}

.filter-pill-panel-wide {
    padding: 0;
    display: flex;
    min-width: 520px;
}

.filter-pill-presets {
    display: flex;
    flex-direction: column;
    min-width: 160px;
    border-right: 1px solid var(--color-border);
    padding: 8px;
}

.filter-pill-preset {
    background: none;
    border: none;
    text-align: left;
    padding: 8px 10px;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.filter-pill-preset:hover {
    background: var(--color-page-bg);
}

.filter-pill-preset.active {
    background: rgba(29,78,216,0.08);
    color: var(--color-primary);
    font-weight: 500;
}

/* ==================== Collapsible section ==================== */

.collapsible-section {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 16px;
}

.collapsible-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.collapsible-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin: 0 -2px;
    cursor: pointer;
    user-select: none;
    background: var(--color-page-bg);
    border-radius: var(--radius);
}

.collapsible-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.collapsible-section-chevron {
    transition: transform 0.15s ease;
    color: var(--color-text-secondary);
}

.collapsible-section-chevron.expanded {
    transform: rotate(180deg);
}

.collapsible-section-content {
    padding: 8px 2px 26px;
}

/* ==================== Split-view dialog shell ==================== */

.split-view-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.split-view-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto;
}

/* When a TitleSubRow follows, the dividing line belongs at the bottom of THAT row instead — the title row
   just gets a little breathing room under it, no line of its own. */
.split-view-header:has(+ .split-view-header-sub) {
    border-bottom: none;
    padding-bottom: 8px;
}

/* A fully separate line below .split-view-header (not nested inside it) — e.g. WorkOrderFormDialog's
   lane-move pills — so the title row's own layout (title/badge left, buttons/close right) is completely
   untouched. Only rendered when TitleSubRow is set. */
.split-view-header-sub {
    padding: 0 24px 14px;
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto;
}

.split-view-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.split-view-left {
    flex: 1 1 60%;
    overflow-y: auto;
    padding: 24px;
    border-right: 1px solid var(--color-border);
}

.split-view-right {
    flex: 1 1 40%;
    overflow-y: auto;
    padding: 24px;
    background: var(--color-page-bg);
}

.split-view-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    flex: 0 0 auto;
}

/* Phone widths (iPhone-class, ~390-430px logical): the shell's own 24px side padding was eating almost
   an eighth of the viewport on both sides before any content even renders — tighten it so fixed/near-fixed
   width children (job search box, metric cards) have realistic room to fit without forcing a horizontal
   scrollbar inside .split-view-left. */
@media (max-width: 600px) {
    .split-view-header,
    .split-view-header-sub,
    .split-view-left,
    .split-view-right,
    .split-view-footer {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ==================== Work order preview pane (PDF / Email skins) ====================
   Read-only "what the customer would see" mockup shown in a SplitViewDialog's right pane — not real PDF
   generation, just two thin visual skins over one shared summary body (see WorkOrderPreviewPane.razor). */

.wop-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}

.wop-toggle-btn {
    background: var(--color-surface);
    border: none;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wop-toggle-btn + .wop-toggle-btn {
    border-left: 1px solid var(--color-border);
}

.wop-toggle-btn.active {
    background: rgba(29,78,216,0.08);
    color: var(--color-primary);
}

.wop-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--color-text-secondary);
    text-align: center;
}

.wop-pdf-page {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(26,31,54,0.06);
    padding: 28px;
    max-width: 640px;
    margin: 0 auto;
}

.wop-letterhead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.wop-letterhead img {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
}

.wop-pdf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.wop-pdf-header-right {
    text-align: right;
}

.wop-email-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 640px;
    margin: 0 auto;
}

.wop-summary {
    padding-top: 4px;
}

.wop-job-list {
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

/* Section heading inside a WorkOrder/Invoice preview body ("Requested Jobs", "Parts", "Services", etc.) —
   generous top margin separates it from the unrelated section above; tight bottom margin keeps it visually
   attached to its own table/list right below. */
.wop-section-title {
    margin-top: 22px;
    margin-bottom: 8px;
    font-weight: 600;
}

.wop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.wop-table td {
    padding: 6px 4px;
    border-bottom: 1px solid var(--color-border);
}

.wop-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wop-total-row {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 20px;
    border-top: 2px solid var(--color-text-primary);
    font-weight: 600;
    font-size: 0.9375rem;
}

/* Reduced-height variant for FilterPill's filled activator: keeps the quick-add pill compact
   while leaving the larger app-wide touch-target rules intact. */
.filter-pill-filled {
    min-height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 0.875rem;
}