/* The Fabrica skin — the modern-storefront layer over MudBlazor (docs/design-system.md §5c).
 *
 * WHY A LAYER AND NOT A COMPONENT SWEEP. The look is a system, not a page: cards, tables, buttons
 * and fields have to agree, and forty components each carrying their own Class="rounded-lg shadow"
 * would drift apart by the second screen. Everything below is expressed against MudBlazor's own
 * class names and the theme's CSS variables — no literal colours, no literal radii — so a brand
 * change stays a token change (FabricaTheme.BrandTokens) and this file never needs editing for it.
 *
 * It loads AFTER MudBlazor.min.css, fabrica-density.css and app.css, so equal-specificity rules
 * win on source order.
 *
 * THIS FILE NAMES MUDBLAZOR'S CLASSES, the same coupling fabrica-density.css warns about, and it
 * fails the same silent way — a renamed class just stops applying. `FabricaSkinTests` renders the
 * real components and asserts the handful of class names the layer leans on hardest.
 */

/* ─── 1. Canvas ─────────────────────────────────────────────────────────────────────────────── */

body {
    background: var(--mud-palette-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-text-primary);
}

/* Thin, quiet scrollbars — a wide price grid scrolls inside its own box (app.css), and the default
   chrome scrollbar cutting through a card is the loudest thing on the screen. */
.fabrica-scroll-x,
.mud-table-container,
.mud-drawer-content {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-inputs) transparent;
}

/* ─── 2. App bar ────────────────────────────────────────────────────────────────────────────── */

.mud-appbar {
    box-shadow: none;
    /* White-at-8% is an overlay on the dark chrome, not a brand colour: it stays correct whatever
       AppbarBackground becomes. Same reasoning for the hover fills below. */
    border-bottom: 1px solid rgb(255 255 255 / 8%);
}

/* The wordmark. Syne set tight is the brand's signature; the app bar is the one place it appears
   at every screen, so it carries the tracking rather than a heading utility class. */
.mud-toolbar-appbar .mud-typography-h6 {
    font-size: 1.0625rem;
    letter-spacing: -.02em;
}

/* Navigation reads as a row of targets, not a row of underlined links: a quiet pill on hover,
   which is also the affordance a phone-sized finger needs. */
.mud-toolbar-appbar .mud-link,
.mud-toolbar-appbar .fabrica-linkbutton {
    padding: 5px 10px;
    border-radius: var(--mud-default-borderradius);
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.mud-toolbar-appbar .mud-link:hover,
.mud-toolbar-appbar .fabrica-linkbutton:hover {
    background: rgb(255 255 255 / 10%);
    text-decoration: none;
}

/* The wordmark is a link too, and it must not grow a pill. */
.mud-toolbar-appbar > .mud-link:first-of-type:hover {
    background: transparent;
}

/* ─── 3. Surfaces ───────────────────────────────────────────────────────────────────────────── */

/* A card is a hairline plus a whisper of shadow. The theme's elevation ramp is deliberately faint
   (FabricaTheme.BuildElevations), so the border is what actually draws the edge. */
.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2 {
    border: 1px solid var(--mud-palette-lines-default);
}

/* Popovers, menus and dialogs float — they get the shadow instead of a border. */
.mud-popover.mud-paper,
.mud-dialog.mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: calc(var(--mud-default-borderradius) + 4px);
}

/* A clickable card says so before it is clicked. */
.mud-paper.cursor-pointer {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.mud-paper.cursor-pointer:hover {
    transform: translateY(-1px);
    border-color: var(--mud-palette-lines-inputs);
    box-shadow: var(--mud-elevation-4);
}

/* ─── 4. Tables ─────────────────────────────────────────────────────────────────────────────── */

/* A table is a card too: same hairline, same corner. MudTable puts its elevation class on
   `.mud-table`, not on a `.mud-paper`, which is why it needs its own rule. */
.mud-table.mud-elevation-1,
.mud-table.mud-elevation-2 {
    border: 1px solid var(--mud-palette-lines-default);
}

.mud-table {
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

/* Column headers are labels, not sentences: the CASE, SIZE and TRACKING come from the theme's
   Subtitle2 token, because MudBlazor derives every header cell — MudTable and MudSimpleTable
   alike — from `--mud-typography-subtitle2-*`. What is left here is colour and the well behind
   them, and both selectors have to match MudBlazor's own specificity to the class:
   `.mud-table-root .mud-table-head .mud-table-cell` is three classes deep and a two-class
   selector loses to it silently — this layer's first version did exactly that. */
.mud-table-root .mud-table-head .mud-table-cell,
.mud-simple-table table * tr > th {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Dense rows, but not cramped: 6px of vertical padding is a spreadsheet, 10px is a product list. */
.mud-table-dense * .mud-table-row .mud-table-cell,
.mud-simple-table.mud-table-dense * tr td {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* A grouped catalog (Προϊόντα) reads as sections; the group header is a divider with a name. */
.mud-table-root .mud-table-cell.mud-table-cell-custom-group {
    background: var(--mud-palette-background-gray);
    font-family: var(--mud-typography-default-family);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* The table's own toolbar (the search field) belongs to the card, not above it. */
.mud-table .mud-toolbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ─── 5. Buttons ────────────────────────────────────────────────────────────────────────────── */

.mud-button-root {
    border-radius: var(--mud-default-borderradius);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.mud-button-root:active {
    transform: translateY(1px);
}

/* The single primary action per view. It is the only element on the page allowed to look raised. */
.mud-button-filled.mud-button-filled-primary {
    box-shadow: 0 1px 2px rgb(19 19 22 / 8%);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--mud-palette-primary-darken);
    box-shadow: 0 2px 8px -2px rgb(19 19 22 / 18%);
}

/* Secondary actions: a hairline box, not a heavy black outline. */
.mud-button-outlined {
    border-color: var(--mud-palette-lines-inputs);
}

.mud-button-outlined:hover {
    border-color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray);
}

/* Keyboard focus has to be visible on a light card AND on the black app bar. */
.mud-button-root:focus-visible,
.fabrica-linkbutton:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ─── 6. Fields ─────────────────────────────────────────────────────────────────────────────── */

/* MudBlazor types its inputs with `mud-typography-subtitle1`, and the theme maps Subtitle1 to the
   DISPLAY face — so every field, every price cell in the τιμοκατάλογος and every search box was
   rendering in Syne 600. A form field is body text; nothing about it is a heading. */
.mud-input,
.mud-input input,
.mud-input textarea {
    font-family: var(--mud-typography-default-family);
    font-weight: 400;
}

.mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--mud-palette-text-secondary);
}

/* One focus treatment for every field: the accent ring, thin. MudBlazor's default doubles the
   border width instead, which shifts the text by a pixel as you tab through a grid. */
.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

/* A ROW OF FIELDS LINES UP ON THE TOP OF THE BOXES, NEVER ON THEIR CENTRES. MudBlazor renders the
   HelperText — and a validation error — INSIDE the input control, below the box, so one field with
   a hint is a line or two TALLER than the fields beside it. A row that centres its items then
   floats that field's box upward by half the difference and the row reads as broken: «Νέος
   κωδικός» sat ~20px above «Τρέχων κωδικός» on the change-password panel, and every validated form
   would do the same the moment one field showed an error.

   So the grid item (or, in a MudStack Row, the field itself) that holds an input opts out of the
   row's centring; a button, a switch or a chip sharing the row keeps it, which is what
   `align-center` was reached for in the first place. `align-self` on the child beats the parent's
   `align-items`, MudBlazor's `!important` included — they are different properties, and
   `align-items` only supplies the initial value for `align-self: auto`.

   Where no field carries a hint the row is uniform anyway and this rule changes nothing, which is
   why it can be stated once here instead of per screen. */
.align-center > .mud-grid-item:has(.mud-input-control),
.align-center > .mud-input-control {
    align-self: flex-start;
}

/* ─── 7. Chips, badges, alerts ──────────────────────────────────────────────────────────────── */

/* Pills. A status is a label, and a label reads faster with a round end than with a square one —
   the one deliberate exception to "radius comes from the token". */
.mud-chip {
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: .01em;
}

.mud-alert {
    border-radius: var(--mud-default-borderradius);
}

.mud-snackbar {
    border-radius: var(--mud-default-borderradius);
}

/* ─── 8. Tabs ───────────────────────────────────────────────────────────────────────────────── */

.mud-tabs-tabbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: transparent;
}

.mud-tab {
    min-width: 0;
    padding: 0 16px;
    font-family: var(--mud-typography-button-family);
    font-weight: 600;
    text-transform: none;
    letter-spacing: .005em;
}

.mud-tab-slider {
    border-radius: 2px 2px 0 0;
}

/* ─── 9. Drawer (phones) ────────────────────────────────────────────────────────────────────── */

.mud-drawer .mud-nav-link {
    border-radius: var(--mud-default-borderradius);
    margin: 2px 8px;
}

.mud-drawer .mud-nav-link:hover {
    background: rgb(255 255 255 / 10%);
}

/* ─── 10. Page furniture ────────────────────────────────────────────────────────────────────── */

/* An eyebrow above a heading or a value — the caption style, tracked out. */
.fabrica-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* A dashboard tile: the count, its label, and a coloured rule that says which of the four it is.
   The rule is the only colour on an otherwise white card, so four tiles read as four things
   rather than as one long band. */
.fabrica-stat {
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* The tile is wrapped in a real <a>: it navigates to the order list its count belongs to, and a
   link is what a keyboard reaches. The anchor is pure plumbing — it carries the tile's height and
   gives back the text colour the browser takes away. */
.fabrica-stat-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.fabrica-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--fabrica-stat-accent, var(--mud-palette-lines-inputs));
}

.fabrica-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

/* ─── 11. Phones ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 599.98px) {
    /* A stacked table row is a card in a list, so it gets the separation a row does not need. */
    .mud-xs-table .mud-table-body .mud-table-row,
    .mud-sm-table .mud-table-body .mud-table-row {
        display: block;
        padding: 4px 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .fabrica-stat-value {
        font-size: 1.625rem;
    }

    /* A dialog gets the phone's width. MudBlazor's FullWidth is `calc(100% - 64px)`, so a dialog
       is 311px on a 375px screen and 256px on a 320px one — a sixth of the display spent on ground
       nobody reads, in the two places the app asks for a decision: OrderStatusDialog, which is how
       the back office moves an order, and the catalog picker, which is how a partner finds a
       product. The inner gutter comes down with it, from MudBlazor's desktop 24px to the 16px the
       page container already uses at this width.

       Only the CONTENT pane's padding is touched: `.mud-dialog-title` carries a
       `padding-inline-end: 64px` when it holds a close button, and overriding the title's
       horizontal padding here would run the title text under that button. */
    .mud-dialog.mud-dialog-width-full {
        width: calc(100% - 16px);
    }

    .mud-dialog .mud-dialog-content {
        padding-left: 16px;
        padding-right: 16px;
    }
}