/* Host-level styles for the static-SSR auth pages (login / invitation accept) — MudBlazor
   inputs need interactivity, so these pages use plain form elements styled with the SAME
   design tokens the theme emits as CSS variables. Rules: docs/design-system.md.
   Below them: the framework's error banner and the handful of responsive helpers MudBlazor's
   own breakpoint utilities do not cover. */

.fabrica-auth-card {
    max-width: 420px;
    margin: 10vh auto 0;
    padding: 2rem;
    background: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius, 6px);
    box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
}

/* Under the sign-in card: Google's consent screen points at these, so the page a visitor signs
   in from must link to them too. */
.fabrica-legal-links {
    max-width: 420px;
    margin: 1rem auto 0;
    text-align: center;
    font-size: 0.8rem;
}

.fabrica-legal-links a {
    color: var(--mud-palette-text-secondary);
}

/* /privacy and /terms — a document, so a reading measure rather than the page's full width. */
.fabrica-legal {
    max-width: 760px;
    line-height: 1.6;
}

.fabrica-legal h2 {
    font-size: 1.1rem;
    margin: 1.75rem 0 0.5rem;
}

.fabrica-legal p,
.fabrica-legal ul {
    margin-bottom: 0.75rem;
}

.fabrica-legal ul {
    padding-left: 1.25rem;
}

.fabrica-legal-updated {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

.fabrica-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.fabrica-field label {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.fabrica-field input {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius, 6px);
    font-family: var(--mud-typography-default-family, inherit);
    font-size: 1rem;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.fabrica-field input:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.fabrica-button-primary,
.fabrica-button-secondary {
    display: inline-block;
    width: 100%;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: var(--mud-default-borderradius, 6px);
    font-family: var(--mud-typography-button-family, var(--mud-typography-default-family, inherit));
    font-size: 0.95rem;
    /* Sentence case, matching Typography.Button in FabricaTheme — the static-SSR pages cannot use
       MudBlazor's button, so the two voices have to be kept in step by hand. */
    font-weight: 600;
    letter-spacing: 0.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.fabrica-button-primary {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.fabrica-button-secondary {
    background: transparent;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-text-primary);
}

.fabrica-linkbutton {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

/* Dev quick login (Features:QuickLogin) — one chip per fixture account. The secondary button is
   full-width by design, which is right for ONE dev button and unusable for a dozen: a picker
   wraps instead. Palette tokens only, per docs/design-system.md. */
.fabrica-quicklogin {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fabrica-quicklogin-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.fabrica-quicklogin-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fabrica-quicklogin-chip {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 6px);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-button-family, var(--mud-typography-default-family, inherit));
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: pointer;
}

.fabrica-quicklogin-chip:hover {
    background: var(--mud-palette-action-default-hover);
}

.fabrica-quicklogin-chip.is-backoffice {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

/* The framework's disconnect/unhandled-error banner (blazor.web.js toggles it). Greek copy lives
   in App.razor; this is only its placement, in theme tokens. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1500;
    padding: 0.75rem 1.25rem;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    box-shadow: 0 -1px 8px rgb(0 0 0 / 20%);
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    color: inherit;
    cursor: pointer;
    margin-left: 0.75rem;
    text-decoration: underline;
}

/* Opt-in horizontal scroll for genuinely wide content (tables). The page itself must never
   scroll sideways — the overflow belongs to the wide element, not to the body. */
.fabrica-scroll-x {
    max-width: 100%;
    overflow-x: auto;
}

/* Something the page scrolls TO (the order pad): it lands clear of the fixed app bar, not under it. */
.fabrica-scroll-target {
    scroll-margin-top: 64px;
}

/* A filter select in a wrapping toolbar row: without a floor a MudSelect shrinks to its label. */
.fabrica-filter-field { min-width: 200px; }
.fabrica-filter-field-wide { min-width: 240px; }

/* Free text the partner typed over several lines (the order's ΠΑΡΑΤΗΡΗΣΕΙΣ): keep their breaks. */
.fabrica-prewrap { white-space: pre-line; }

/* The auth-form buttons fill their card; one placed inline in a page keeps its own width. */
.fabrica-button-inline { width: auto; }

/* A reference row that has been switched off. Dimmed rather than hidden: it still has to be
   findable and switchable back on, and it still explains the old order lines that carry its code.
   Theme tokens only — no literal colours (docs/design-system.md). */
.fabrica-row-inactive {
    opacity: 0.55;
}

/* The navigation drawer, made to behave like a drawer — and to leave a rail of icons behind it.

   `NavDrawer` is an interactive island sitting inside the app bar, because the
   layouts render STATICALLY and a toggle written in a layout never fires. MudDrawer only stamps
   `mud-drawer-fixed` on itself when it can see its MudLayout through a cascading value — and a
   cascading value does not cross a render-mode boundary. Without it MudBlazor's own
   `.mud-drawer:not(.mud-drawer-fixed){position:absolute}` took over and the drawer was laid out
   inside the 48px app bar that contains it: tapping the hamburger dimmed the page behind an
   overlay and revealed a 48px-tall sliver. Neither the portal nor the back office had working
   navigation on a phone.

   That missing container is why EVERY rule below exists, and it is why they live here rather than
   in the two components: MudBlazor would have written all of them itself for a drawer inside a
   MudLayout. Both areas' drawers are the same drawer, so this is one copy for both.

   Below Sm the drawer's EffectiveVariant is Temporary (MudBlazor's own swap for a Mini drawer
   under its Breakpoint), and a temporary drawer is a viewport overlay by definition — so it is
   fixed whatever its container. Same specificity as the rule above, and this file loads later. */
.mud-drawer.mud-drawer-temporary {
    position: fixed;
}

/* From Sm up the drawer is Mini: closed it is a 56px rail of icons, opened it is the full menu
   over the page (client request 2026-09-07 — a closed menu that showed nothing made every
   navigation cost open-then-pick). MudBlazor positions a mini drawer with the `mud-drawer-fixed`
   rules it never gets here, so the two lines it would have supplied are restated: the rail hangs
   under the app bar, using the dense bar's OWN height expression
   (`.mud-appbar.mud-appbar-dense .mud-toolbar-appbar`) so it stays right whatever AppbarHeight the
   theme carries. Change one, change the other — a mismatch is a strip of page showing through
   above the rail, not an error. */
.mud-drawer.mud-drawer-mini {
    position: fixed;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4);
    height: calc(100% - (var(--mud-appbar-height) - var(--mud-appbar-height) / 4));
}

/* What does not fit 56px, and comes back the moment the drawer is opened: the header (wordmark and
   close button) and the account block. Neither has an icon-only form worth inventing — the rail is
   for navigation, and «Αποσύνδεση» is one hamburger click away.

   `!important` is not defensive here, it is required: the header carries MudBlazor's own `d-flex`
   utility, and every utility class in that library is declared `!important`. Without it the rule
   loses and the wordmark spills across the page beside the rail. */
.mud-drawer-mini.mud-drawer--closed .mud-drawer-header,
.mud-drawer-mini.mud-drawer--closed .fabrica-drawer-account {
    display: none !important;
}

/* The labels, hidden from the eye but left to a screen reader — MudBlazor's own technique, because
   its own rule cannot reach ours: it selects `.mud-drawer-content > .mud-navmenu`, and our menu
   sits one level deeper, inside the wrapper that closes the drawer when a link is clicked. Without
   this the labels simply run out of the 56px rail and across the page. */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* With the label gone the icon is all that is left, so it sits in the middle of the pill rather
   than where a 16px text indent used to put it. */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link {
    justify-content: center;
    padding-inline: 0;
}

/* And the page has to make room for the drawer, which is the other half of the missing container:
   MudLayout stamps `mud-drawer-close-mini-*` / `mud-drawer-open-mini-*` on ITSELF to shift
   `.mud-main-content`, and it never learns there is a drawer at all. Both widths are MudBlazor's
   own tokens, and the property is `margin-left` because `.mud-main-content` already carries a
   225ms margin transition — so the page slides as the drawer widens instead of jumping.

   Both are read with `:has()`, because the drawer itself is the only thing that knows: it is drawn
   inside an interactive island, and it is drawn only for a SIGNED-IN visitor (`AuthorizeView`), so
   an unconditional margin here would indent the login page by a rail that is not there. A browser
   without `:has()` therefore gets no offset and an overlapping drawer — it is elevated, so it
   still reads as sitting over the page.

   Above Sm ONLY: below it the drawer is Temporary, and a temporary drawer is an overlay with a
   scrim that must never push the page. */
@media (min-width: 600px) {
    .mud-layout:has(.mud-drawer-mini) .mud-main-content {
        margin-left: var(--mud-drawer-width-mini-left);
    }

    .mud-layout:has(.mud-drawer-mini.mud-drawer--open) .mud-main-content {
        margin-left: var(--mud-drawer-width-left);
    }
}

/* Below Sm there is no rail at all. MudBlazor only knows the viewport once its resize listener has
   reported, and until then a phone renders the drawer as Mini — which would flash a 56px rail over
   the page on every load. A rail is a sixth of a 375px screen; the phone keeps the overlay drawer
   it has always had. */
@media (max-width: 599.98px) {
    .mud-drawer.mud-drawer-mini.mud-drawer--closed {
        width: 0;
    }
}

/* A stacked table row (MudBlazor swaps in .mud-xs-table / .mud-sm-table below the breakpoint) lays
   every cell out as `label ... value` on one flex line that cannot wrap. One long value — a
   customer name, an email — therefore widens the whole TABLE past the screen, and the columns run
   off under a scrollbar the reader has no reason to look for. Letting the line wrap keeps the
   table at the width of its container; the value simply drops under its own label. */
.mud-xs-table .mud-table-cell,
.mud-sm-table .mud-table-cell {
    flex-wrap: wrap;
    column-gap: 16px;
}

.mud-xs-table .mud-table-cell::before,
.mud-sm-table .mud-table-cell::before {
    padding-right: 0;
    padding-inline-end: 0;
}

/* A table and its phone twin (PhoneList) are both in the DOM; the width picks one. Sm is the same
   threshold MudBlazor stacks tables at, so a screen that has a twin never shows the stacked layout.
   `!important` because a MudTable / MudPaper sets its own display through MudBlazor's classes. */
.fabrica-phone-only {
    display: none !important;
}

@media (max-width: 599.98px) {
    .fabrica-phone-only {
        display: block !important;
    }

    .fabrica-wide-only {
        display: none !important;
    }
}

.fabrica-phone-list {
    overflow: hidden;
}

.fabrica-phone-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 8px 10px 16px;
}

/* A rule BETWEEN rows rather than under each one: the last row may be followed by «Περισσότερα». */
.fabrica-phone-row + .fabrica-phone-row,
.fabrica-phone-row + .fabrica-phone-list-more {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.fabrica-phone-row:not(:has(.fabrica-phone-row-actions)) {
    padding-right: 16px;
}

.fabrica-phone-row-clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fabrica-phone-row-clickable:active {
    background: var(--mud-palette-action-default-hover);
}

.fabrica-phone-row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The ⋮ button sits level with the entry's first line, not centred on the whole entry. */
.fabrica-phone-row-actions {
    flex: 0 0 auto;
    margin-top: -6px;
}

.fabrica-phone-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.875rem;
    line-height: 1.4;
}

.fabrica-phone-line-start {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fabrica-phone-line-end {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fabrica-phone-line-strong {
    font-weight: 600;
}

.fabrica-phone-line-secondary {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* A group heading inside a phone list (Προϊόντα: ΠΟΡΤΑΚΙΑ / ΒΙΤΡΙΝΕΣ …) — the table's group row. */
.fabrica-phone-group {
    padding: 8px 16px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

.fabrica-phone-row + .fabrica-phone-group {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* PhoneFold: below Sm the content waits behind its button; above it there is no button. And a
   detail that a phone shows only on request (the price ladder of one order line) is
   `fabrica-phone-folded` until its own toggle takes the class away. */
@media (max-width: 599.98px) {
    .fabrica-fold:not(.fabrica-fold-open) > .fabrica-fold-body {
        display: none;
    }

    .fabrica-fold-toggle {
        margin-bottom: 12px;
    }

    .fabrica-phone-folded {
        display: none !important;
    }
}

/* A line that ends in a button: centred on the button, not on a text baseline it does not have. */
.fabrica-phone-line-action {
    align-items: center;
    margin-top: 2px;
}

/* A chip inside a line is a tag in a sentence, not a control: no outer margin to push the line
   taller than its text. */
.fabrica-phone-line .mud-chip {
    margin: 0 0 0 4px;
    height: 20px;
}

/* Phones. Most partners work on a PC, so this is deliberately small: MudBlazor's own breakpoints
   handle the components (drawer, table stacking, grid), and these rules only cover the host-level
   pieces MudBlazor does not own — the static-SSR auth card, the page gutters and the type scale. */
@media (max-width: 599.98px) {
    /* MudBlazor's heading sizes are desktop sizes: at 375px a Typo.h4 page title (34px) wraps to
       two lines and pushes the page's actual content below the fold. Overriding MudBlazor's OWN
       typography variables moves every Typo.h* at once, so no component carries a literal size —
       the same tokens-not-values rule the theme follows.

       The selector is `html:root`, not `:root`: MudThemeProvider injects its variables in a <style>
       element that lands AFTER this file, so an equal-specificity `:root` here would lose the
       cascade. The extra type selector wins on specificity instead of on order. */
    html:root {
        --mud-typography-h3-size: 2rem;
        --mud-typography-h4-size: 1.5rem;
        --mud-typography-h5-size: 1.25rem;
        --mud-typography-h6-size: 1.125rem;
    }

    .fabrica-auth-card {
        max-width: none;
        margin-top: 4vh;
        padding: 1.25rem;
    }

    /* The top gutter too: both layouts give the container `py-8` (32px), which on a phone was a
       blank band above every page's back arrow and title — the admin works from a phone a lot. */
    .mud-main-content .mud-container {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 12px !important;
        padding-bottom: 16px !important;
    }
}

/* Area switch (Πελάτης ⇄ Διαχείριση) — the back office's mode indicator, in the app bar.
   It has to read as a STATE, not as one more link: the whole problem it solves is that the portal
   bar and the admin bar look alike and share the label «Παραγγελίες». Hence a segmented control
   whose active half is filled and is not a link at all. Overlay whites rather than palette colours,
   like the rest of the app-bar chrome — they stay correct whatever AppbarBackground becomes. */
.fabrica-areaswitch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--mud-default-borderradius);
    background: rgb(255 255 255 / 8%);
    flex-shrink: 0;
}

.fabrica-areaswitch-option {
    padding: 3px 9px;
    border-radius: calc(var(--mud-default-borderradius) - 3px);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.6;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    opacity: .65;
}

.fabrica-areaswitch-option:hover {
    background: rgb(255 255 255 / 10%);
    opacity: 1;
}

.fabrica-areaswitch-option.is-active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    opacity: 1;
}

/* Signed-in identity, in the app bar of both areas. Quiet on purpose: it is a STATE, not a
   control — the area switch beside it is the thing you click, and «Αποσύνδεση» lives in the drawer.
   Overlay whites like the rest of the app-bar chrome, so it stays correct whatever
   AppbarBackground becomes.

   It truncates instead of growing: the wordmark and the switch have priority over a long login,
   and the full address is on the element's title. The «Συνδεδεμένος ως» label is dropped below Md,
   where the bar is narrow enough that the icon has to carry that meaning on its own. */
.fabrica-identity {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    margin-left: .75rem;
    font-size: .75rem;
    line-height: 1.6;
    opacity: .8;
}

.fabrica-identity-icon {
    flex-shrink: 0;
    opacity: .8;
}

.fabrica-identity-label {
    flex-shrink: 0;
    opacity: .7;
}

.fabrica-identity-name {
    display: inline-block;
    /* Wide enough for a real login — «dreamy.kitchen@fabrica.local» is 28 characters and was
       clipped at a flat 22ch — but never wide enough to eat the bar: the vw half is what stops a
       long address from crowding the wordmark and the switch on a narrow screen. */
    max-width: min(32ch, 30vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

@media (max-width: 959.98px) {
    .fabrica-identity-label {
        display: none;
    }
}

/* «Σύνδεση ως» banner. Loud on purpose and full-bleed: an admin holding a partner's session writes
   that partner's orders, so the state must be impossible to scroll past or mistake for a page
   notice. It sits between the app bar and the page container. */
.fabrica-impersonation-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .6rem 1.25rem;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    font-size: .8125rem;
}

.fabrica-impersonation-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
}

.fabrica-impersonation-actor {
    opacity: .8;
}

.fabrica-impersonation-stop {
    background: var(--mud-palette-warning-text);
    color: var(--mud-palette-warning);
    border: none;
    border-radius: var(--mud-default-borderradius);
    padding: 4px 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* ServerPager — the strip under a SERVER-paged table (the order lists). It stands in for
   MudTablePager, which can only slice rows it holds, so it is laid out like one: right-aligned,
   the page-size select inline with its caption, then the range and the arrows. */
.fabrica-server-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem .75rem;
    padding: .25rem .5rem;
    border-top: 1px solid var(--mud-palette-table-lines);
}

/* MudSelect wraps its control in an outer .mud-select that carries none of the component's
   classes and grows (flex 1 1 auto), which stretched the size picker across the whole strip. */
.fabrica-server-pager > .mud-select {
    flex: 0 0 4.5rem;
}

.fabrica-server-pager .fabrica-server-pager-size {
    margin: 0;
}

/* «Χρήστες» (/admin/users): each account's role and switch sit in fixed-width cells, so the
   controls line up row under row whatever the address beside them; the row still wraps on a phone. */
.fabrica-user-cell {
    flex: 0 0 auto;
    width: 11.25rem;
}

.fabrica-user-switch {
    flex: 0 0 auto;
    width: 7.5rem;
}

/* A long unbroken string (an invitation's accept link is ~100 characters of token) wraps inside its
   card instead of running past the edge. */
.fabrica-break-anywhere {
    overflow-wrap: anywhere;
}