/* Fluent UI v5 components inside the Falcon theme.
   v5 paints from --color* tokens; point the ones we use at Falcon variables. */

html.light body,
html.dark body {
    --colorNeutralBackground1: var(--falcon-body-bg);
    /* v5 has no dark palette wired up here, so this token stays #242424 in both themes. It is
       inherited by the Bootstrap .modal-content we slot into fluent-dialog, which made every
       inline dialog's body text near-black on the dark #0b1727 card. */
    --colorNeutralForeground1: var(--falcon-body-color);
    /* Same story for the subtle-button foreground, which is what a data-grid column header is
       (fluent-button[appearance=subtle] inside the th): #424242 on the dark grid header is
       unreadable. Hover/pressed follow it so the header does not flicker back to near-black. */
    --colorNeutralForeground2: var(--falcon-body-color);
    --colorNeutralForeground2Hover: var(--falcon-body-color);
    --colorNeutralForeground2Pressed: var(--falcon-body-color);
    --colorBrandBackground: var(--falcon-primary);
    --colorBrandBackgroundHover: var(--falcon-primary);
    --colorNeutralForegroundOnBrand: #ffffff;
    --colorSubtleBackground: var(--falcon-300);
}

html.dark body {
    --colorNeutralBackground1: var(--falcon-card-bg);
    --colorNeutralBackground1Hover: var(--falcon-card-bg);
    --colorNeutralStroke1: var(--falcon-card-bg);
    --colorNeutralStroke1Hover: var(--falcon-card-bg);
}

/* Data-grid column headers are subtle fluent-buttons. The Falcon grey above is right for other
   subtle buttons at rest, but v4 kept grid headers flat (app.css forced .col-sort-button
   transparent), so every header rendered as a grey pill once v5 picked up the token. */
.fluent-data-grid th fluent-button {
    --colorSubtleBackground: transparent;
    --colorSubtleBackgroundHover: transparent;
    --colorSubtleBackgroundPressed: transparent;
}

/* v5 pads grid cells 0 18px, so text sits hard against the row lines and the grid reads smaller
   and cramped. v4 used 6px 16px. The Fluent bundle loads after this sheet, hence the html prefix. */
html .fluent-data-grid td:not([col-select=true]) {
    padding: 6px 16px;
}

/* Row action buttons (edit, copy, send, delete) are default-appearance fluent-buttons. v5 draws those as
   white bordered boxes with a slate icon; v4 drew them flat with the icon in Falcon blue. An icon given its
   own colour (the red delete) keeps it. */
.fluent-data-grid td fluent-button {
    --colorNeutralBackground1: transparent;
    --colorNeutralStroke1: transparent;
    --colorNeutralStroke1Hover: transparent;
    --colorNeutralStroke1Pressed: transparent;
    --colorNeutralForeground1: var(--falcon-primary);
    --colorNeutralForeground1Hover: var(--falcon-primary);
    --colorNeutralForeground1Pressed: var(--falcon-primary);
}

/* v5 pads header cells 2px and writes min-height: 40px inline on each one, so the header row is 40px; v4
   padded them 5px 1px (design-unit + focus stroke) with 44px inline. Only !important outranks the inline style. */
html .fluent-data-grid th[cell-type=columnheader] {
    padding: 5px 1px;
    min-height: 44px !important;
}

/* v5 avatars default to the neutral palette (grey). v4's persona painted initials on the accent
   blue with the page background as the text colour; keep that look. */
fluent-avatar {
    --colorNeutralBackground6: #4691c2;
    --colorNeutralForeground3: var(--falcon-body-bg);
}

html.dark fluent-avatar {
    --colorNeutralBackground6: #83c1dd;
}

/* v4's persona was a block; v5's fluent-avatar sits on the text baseline, and the descender gap under it
   pushed the top bar a pixel past Falcon's 69px min-height. */
.navbar-top fluent-avatar {
    vertical-align: top;
}

/* Paginator: v5 draws its buttons as bordered boxes with slate/grey arrows (near-black blocks when
   disabled in dark mode). v4 had no box and Falcon-blue arrows, and drew disabled buttons as a faint grey
   box (rgb(214,214,214) light / rgb(80,80,80) dark, at 30%) around a faded blue arrow. */
.fluent-paginator fluent-button {
    --colorNeutralBackground1: transparent;
    --colorNeutralStroke1: transparent;
    --colorNeutralStroke1Hover: transparent;
    --colorNeutralStroke1Pressed: transparent;
    --colorNeutralForeground1: var(--falcon-primary);
    --colorNeutralForeground1Hover: var(--falcon-primary);
    --colorNeutralForeground1Pressed: var(--falcon-primary);
    --colorNeutralBackgroundDisabled: rgba(214, 214, 214, 0.3);
    --colorNeutralStrokeDisabled: transparent;
    --colorNeutralForegroundDisabled: rgba(44, 123, 229, 0.45);
}

html.dark .fluent-paginator fluent-button {
    --colorNeutralBackgroundDisabled: rgba(80, 80, 80, 0.3);
}

/* v5's default-fuib.css normalize sheet (body height/overflow, headings, links, tables) is switched off
   with `no-fuib-style` on <body> in App.razor, so Falcon's own reboot styles the page as it did in v4. */

/* The element that gets painted (and sized) is the <dialog> inside fluent-dialog's shadow root,
   exposed as ::part(dialog); the fluent-dialog host itself is display:inline and 0x0, so host-level
   padding/border/background/width rules are inert. Inline dialogs carry Bootstrap .modal-content
   inside, so the Fluent shell must not double-pad.
   The leading `html` is load-bearing, the same trick the `html body` rules above use: v5's own
   part rules sit at the same specificity and later in the cascade, so a bare
   `fluent-dialog.X::part(dialog)` silently loses the width (verified in the browser). */
html fluent-dialog.global-modal-dialog::part(dialog),
html fluent-dialog.BillToModal::part(dialog),
html fluent-dialog.fluent-dialog-plain::part(dialog) {
    padding: 0;
    border: 1px solid var(--falcon-border-color);
}

/* The v5 sheet pins ::part(dialog) to 600px; the billing address form needs the wider layout it
   had in v4. min() keeps it inside a phone viewport. */
html fluent-dialog.BillToModal::part(dialog) {
    width: min(50rem, 100vw);
    max-width: min(50rem, 100vw);
}

/* The element that reaches the top layer is the <dialog> inside fluent-dialog's shadow root, so a
   document-level `fluent-dialog::backdrop` never matches it. The component's own shadow rule is
   `::backdrop { background: var(--dialog-backdrop, ...) }`, and custom properties do cross the
   shadow boundary — so the token is the only lever we have on the backdrop from out here. */
fluent-dialog {
    --dialog-backdrop: rgba(0, 0, 0, 0.5);
}

/* The hand-rolled backdrop, used by the non-Fluent Bootstrap modals (UserAgreementModal). The
   @keyframes fadeIn it animates lives in app.css. */
.dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    animation: fadeIn 0.3s ease-out forwards;
}

/* Inline Fluent dialogs are modal in v5, so the native ::backdrop dims the page; their own
   backdrop element stays in the DOM (tests hook on .dialog-backdrop) but must not double-dim.
   Only the Fluent ones carry the second class, so the Bootstrap modals keep their dimming. */
.fluent-dialog-backdrop {
    display: none;
}

html.dark fluent-dialog::part(dialog) {
    background: #142035;
    border-color: rgba(255, 255, 255, 0.10);
}

/* The v5 day view is taller than the 250px FluentCalendar Style each date picker sets, which
   clipped the last week row. Let the grid size itself; the dropdown then wraps it exactly.
   Every date picker drops its calendar into a .dropdown-menu, so one rule covers all of them
   (Aida, Erica, Gina and Bartender's own Shared/DateInput). */
.dropdown-menu .fluent-calendar {
    height: auto;
}

.fluent-messagebar-notification {
    padding: 0px !important;
    border: none !important
}

.fluent-messagebar.intent-info {
    background-color: var(--falcon-alert-info-background) !important;
    border: var(--falcon-alert-info-border-color) !important;
}