/* ═══════════════════════════════════════════════════════════════════════════
   app.css — ProcureToPayTracker global styles
   Load order: MudBlazor stylesheet first, then this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Font family & global base ───────────────────────────────────────────
   Helvetica Neue / Helvetica — system fonts on macOS/Windows (Arial fallback).
   No @font-face or external font files required.
   MudBlazor sets font-family via the theme; the :root declaration below is a
   safety net for any element that escapes the theme cascade.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --ptpt-font-family: 'Helvetica', Arial, sans-serif;

    /* Override MudBlazor's own typography CSS variables so every component
       that reads --mud-typography-*-family gets the correct stack.
       These variables are what MudBlazor 9 emits for each typography variant. */
    --mud-typography-default-family:  'Helvetica', Arial, sans-serif;
    --mud-typography-h1-family:       'Helvetica', Arial, sans-serif;
    --mud-typography-h2-family:       'Helvetica', Arial, sans-serif;
    --mud-typography-h3-family:       'Helvetica', Arial, sans-serif;
    --mud-typography-h4-family:       'Helvetica', Arial, sans-serif;
    --mud-typography-h5-family:       'Helvetica', Arial, sans-serif;
    --mud-typography-h6-family:       'Helvetica', Arial, sans-serif;
    --mud-typography-subtitle1-family:'Helvetica', Arial, sans-serif;
    --mud-typography-subtitle2-family:'Helvetica', Arial, sans-serif;
    --mud-typography-body1-family:    'Helvetica', Arial, sans-serif;
    --mud-typography-body2-family:    'Helvetica', Arial, sans-serif;
    --mud-typography-button-family:   'Helvetica', Arial, sans-serif;
    --mud-typography-caption-family:  'Helvetica', Arial, sans-serif;
    --mud-typography-overline-family: 'Helvetica', Arial, sans-serif;
}

html, body {
    font-family: var(--ptpt-font-family);
    /* Body: 0.875rem per §2 typography */
    font-size: 0.875rem;
}

/* Catch any element that still escapes the MudBlazor variable cascade —
   inputs, selects and native form controls set their own font-family in
   browser UA stylesheets and need an explicit push. */
input, textarea, select, button {
    font-family: var(--ptpt-font-family);
}

/* ── 3. Tabular numerals utility (.num) ──────────────────────────────────────
   §2: "All numeric/table content uses font-feature-settings: 'tnum'"
   Apply to any element containing figures that must column-align.
   ─────────────────────────────────────────────────────────────────────────── */

.num {
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums; /* modern alias; keeps older browsers */
}

/* ── 4. :focus-visible ring ──────────────────────────────────────────────────
   §11: 2px solid primary, offset 2px. Applied globally so no interactive
   element can accidentally lose a visible focus ring.
   Never removed without replacement — any component that customises focus
   must still satisfy §11 contrast requirements.
   ─────────────────────────────────────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* MudBlazor removes browser outlines internally; restore via :focus-visible
   so keyboard users have a visible ring on all interactive Mud elements. */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-menu-item:focus-visible,
.mud-list-item:focus-visible,
.mud-input-slot:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ── 5. Typography scale ─────────────────────────────────────────────────────
   §2: H1 1.75rem/700 (one per page), H2 1.25rem/600, body 0.875rem, caption 0.75rem.
   These mirror what AppTheme.cs sets on the MudTheme Typography object.
   The classes below are available for edge cases where MudTypography isn't used.
   ─────────────────────────────────────────────────────────────────────────── */

.ptpt-h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.ptpt-h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.ptpt-caption { font-size: 0.75rem; }

/* ── 6. Nav drawer width ─────────────────────────────────────────────────────
   Mini variant width kept tight; full-width on mobile set to 260px.
   ─────────────────────────────────────────────────────────────────────────── */

.mud-drawer--mini .mud-drawer-content {
    /* AA-only rung-4 override: keeps MudBlazor mini-drawer padding correct */
    overflow-x: hidden;
}

/* ── 7. MudDataGrid density & numeric columns ────────────────────────────────
   §7: Dense=true, money columns right-aligned with .num
   ─────────────────────────────────────────────────────────────────────────── */

.mud-table-cell.num,
.mud-data-grid-cell.num {
    text-align: right;
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

/* ── 8. Reconnection overlay ─────────────────────────────────────────────────
   §10: Replaces the default Blazor reconnection banner.
   The actual overlay component (ReconnectionOverlay.razor) is injected into
   App.razor. These styles control the dimmed backdrop.
   ─────────────────────────────────────────────────────────────────────────── */

.ptpt-reconnect-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ptpt-reconnect-card {
    min-width: 280px;
    max-width: 400px;
    text-align: center;
    padding: 2rem;
}

/* ── 9. Session-timeout dialog overlay ───────────────────────────────────────
   Inline overlay — no MudDialog dependency (MudBlazor 9 requires IDialogService).
   ─────────────────────────────────────────────────────────────────────────── */

.ptpt-session-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1400;
}

.ptpt-session-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1401;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 1.5rem;
    width: min(400px, 90vw);
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

.ptpt-session-countdown {
    font-size: 2rem;
    font-weight: 700;
    font-feature-settings: 'tnum';
    color: var(--mud-palette-warning);
}

/* ── 10. Empty-state helpers ─────────────────────────────────────────────────
   §16: Empty state and filtered-to-zero. Centred layout inside any container.
   ─────────────────────────────────────────────────────────────────────────── */

.ptpt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    gap: 0.5rem;
}

.ptpt-empty-state .ptpt-empty-icon {
    font-size: 3rem;
    opacity: 0.3;
}

/* ── 11. Page-level progress bar ─────────────────────────────────────────────
   §16 Loading: MudProgressLinear pinned under the app bar.
   ─────────────────────────────────────────────────────────────────────────── */

.ptpt-page-progress {
    position: sticky;
    top: 0;
    z-index: 1200; /* above drawer, below dialogs */
}

/* ── 12. Login card ──────────────────────────────────────────────────────────
   §15: Centred on Background, no marketing chrome.
   ─────────────────────────────────────────────────────────────────────────── */

.ptpt-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mud-palette-background);
}

.ptpt-login-card {
    width: 100%;
    max-width: 400px;
}

.ptpt-break-glass-toggle {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
}

.ptpt-break-glass-toggle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ── 13. Version / environment footer in user menu ───────────────────────────
   §15 User menu: muted footer line "v1.4.2 · UAT"
   ─────────────────────────────────────────────────────────────────────────── */

.ptpt-version-footer {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    padding: 4px 16px 8px;
    opacity: 0.7;
}

/* ── 14. MudProgressLinear hatched pattern for committed budget ───────────────
   §8: Committed segment shown hatched. Applied via CSS to the secondary
   segment of the budget progress bar via scoped isolation in the component.
   Defined here so the pattern is available globally.
   ─────────────────────────────────────────────────────────────────────────── */

.ptpt-committed-hatch {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.15) 3px,
        rgba(0,0,0,0.15) 6px
    );
}

/* ── Capture page (§6) ──────────────────────────────────────────────────── */

/* Sticky save bar — works on all viewports; extra bottom padding on phone
   so the bar doesn't overlap keyboard-raised inputs.                        */
.mud-capture-save-bar {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Phone: full-width autocomplete popover (§6 "open full-screen on phones") */
@media (max-width: 599px) {
    .mud-popover-overflow-flip-onopen,
    .mud-popover {
        width: 100vw !important;
        left:  0    !important;
    }

    /* Give the save bar more breathing room above the mobile keyboard */
    .mud-capture-save-bar {
        padding-top: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    }
}

/* Offline queue chip alignment */
.ptpt-queue-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}