/* 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;
}

/* A row's details (HasRowDetails) render in a full-width cell that inherits the row's colours and
   padding, so the detail block reads as more grid rows. Tint it, indent it past the toggle column
   so it starts under the parent's text, and mark its left edge so it reads as the row's child. */
html .fluent-data-grid td[cell-type=rowdetails] {
    background: var(--falcon-200);
    padding: 0.25rem 1rem 0.5rem 3rem;
    border-left: 3px solid var(--falcon-primary);
}

/* 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;
}