/*https://themes.arctechonline.tech*/
:root {
    --mud-elevation-0: none;
    --mud-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
    --mud-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
    --mud-elevation-3: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12);
    --mud-elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
    --mud-elevation-5: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12);
    --mud-elevation-6: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
    --mud-elevation-7: 0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12);
    --mud-elevation-8: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
    --mud-elevation-9: 0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12);
    --mud-elevation-10: 0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12);
    --mud-elevation-11: 0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12);
    --mud-elevation-12: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
    --mud-elevation-13: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12);
    --mud-elevation-14: 0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12);
    --mud-elevation-15: 0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12);
    --mud-elevation-16: 0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12);
    --mud-elevation-17: 0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12);
    --mud-elevation-18: 0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12);
    --mud-elevation-19: 0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12);
    --mud-elevation-20: 0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12);
    --mud-elevation-21: 0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12);
    --mud-elevation-22: 0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12);
    --mud-elevation-23: 0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12);
    --mud-elevation-24: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);
    --mud-elevation-25: 0 5px 5px -3px rgba(0,0,0,.06), 0 8px 10px 1px rgba(0,0,0,.042), 0 3px 14px 2px rgba(0,0,0,.036);
    --mud-default-borderradius: 4px;
    --mud-drawer-mini-width-left: 56px;
    --mud-drawer-mini-width-right: 56px;
    --mud-drawer-width-left: 240px;
    --mud-drawer-width-right: 240px;
    --mud-appbar-height: 44px;
    --mud-typography-default-family: Roboto, Helvetica, Arial, sans-serif;
    --mud-typography-default-weight: 400;
    --mud-typography-default-size: .875rem;
    --mud-typography-default-lineheight: 1.43;
    --mud-typography-default-letterspacing: .01071em;
    --mud-typography-default-text-transform: none;
    --mud-typography-h1-family:;
    --mud-typography-h1-weight: 300;
    --mud-typography-h1-size: 6rem;
    --mud-typography-h1-lineheight: 1.167;
    --mud-typography-h1-letterspacing: -.01562em;
    --mud-typography-h1-text-transform: none;
    --mud-typography-h2-family:;
    --mud-typography-h2-weight: 300;
    --mud-typography-h2-size: 3.75rem;
    --mud-typography-h2-lineheight: 1.2;
    --mud-typography-h2-letterspacing: -.00833em;
    --mud-typography-h2-text-transform: none;
    --mud-typography-h3-family:;
    --mud-typography-h3-weight: 400;
    --mud-typography-h3-size: 3rem;
    --mud-typography-h3-lineheight: 1.167;
    --mud-typography-h3-letterspacing: 0;
    --mud-typography-h3-text-transform: none;
    --mud-typography-h4-family:;
    --mud-typography-h4-weight: 400;
    --mud-typography-h4-size: 2.125rem;
    --mud-typography-h4-lineheight: 1.235;
    --mud-typography-h4-letterspacing: .00735em;
    --mud-typography-h4-text-transform: none;
    --mud-typography-h5-family:;
    --mud-typography-h5-weight: 400;
    --mud-typography-h5-size: 1.5rem;
    --mud-typography-h5-lineheight: 1.334;
    --mud-typography-h5-letterspacing: 0;
    --mud-typography-h5-text-transform: none;
    --mud-typography-h6-family:;
    --mud-typography-h6-weight: 500;
    --mud-typography-h6-size: 1.25rem;
    --mud-typography-h6-lineheight: 1.6;
    --mud-typography-h6-letterspacing: .0075em;
    --mud-typography-h6-text-transform: none;
    --mud-typography-subtitle1-family:;
    --mud-typography-subtitle1-weight: 400;
    --mud-typography-subtitle1-size: 1rem;
    --mud-typography-subtitle1-lineheight: 1.75;
    --mud-typography-subtitle1-letterspacing: .00938em;
    --mud-typography-subtitle1-text-transform: none;
    --mud-typography-subtitle2-family:;
    --mud-typography-subtitle2-weight: 500;
    --mud-typography-subtitle2-size: .875rem;
    --mud-typography-subtitle2-lineheight: 1.57;
    --mud-typography-subtitle2-letterspacing: .00714em;
    --mud-typography-subtitle2-text-transform: none;
    --mud-typography-body1-family:;
    --mud-typography-body1-weight: 400;
    --mud-typography-body1-size: 1rem;
    --mud-typography-body1-lineheight: 1.5;
    --mud-typography-body1-letterspacing: .00938em;
    --mud-typography-body1-text-transform: none;
    --mud-typography-body2-family:;
    --mud-typography-body2-weight: 400;
    --mud-typography-body2-size: .875rem;
    --mud-typography-body2-lineheight: 1.43;
    --mud-typography-body2-letterspacing: .01071em;
    --mud-typography-body2-text-transform: none;
    --mud-typography-input-family:;
    --mud-typography-input-weight: 400;
    --mud-typography-input-size: 1rem;
    --mud-typography-input-lineheight: 1.1876;
    --mud-typography-input-letterspacing: .00938em;
    --mud-typography-input-text-transform: none;
    --mud-typography-button-family:;
    --mud-typography-button-weight: 500;
    --mud-typography-button-size: .875rem;
    --mud-typography-button-lineheight: 1.75;
    --mud-typography-button-letterspacing: .02857em;
    --mud-typography-button-text-transform: uppercase;
    --mud-typography-caption-family:;
    --mud-typography-caption-weight: 400;
    --mud-typography-caption-size: .75rem;
    --mud-typography-caption-lineheight: 1.66;
    --mud-typography-caption-letterspacing: .03333em;
    --mud-typography-caption-text-transform: none;
    --mud-typography-overline-family:;
    --mud-typography-overline-weight: 400;
    --mud-typography-overline-size: .75rem;
    --mud-typography-overline-lineheight: 2.66;
    --mud-typography-overline-letterspacing: .08333em;
    --mud-typography-overline-text-transform: none;
    --mud-zindex-drawer: 1100;
    --mud-zindex-popover: 1200;
    --mud-zindex-appbar: 1300;
    --mud-zindex-dialog: 1400;
    --mud-zindex-snackbar: 1500;
    --mud-zindex-tooltip: 1600;
}

/* Fix: date/time picker popovers were rendering clipped (calendar squeezed to
   ~3 columns) on pages where the picker input has a max-width (e.g. report
   filters). Keep the popover calendar at its natural width regardless of the
   input's constrained width, and don't let the picker root clip it. */
.mud-picker-inline-paper,
.mud-popover.mud-picker-inline-paper,
.mud-picker-open .mud-picker-inline-paper {
    min-width: 312px !important;
    max-width: none !important;
    width: 312px !important;
    overflow: visible !important;
    z-index: 1400 !important;
}

.mud-picker-calendar-container {
    width: 312px !important;
    overflow: visible !important;
}

/* Don't let the input's max-width clip the anchored popover, and lift the open picker above the
   page tables (its inline popover was rendering *behind* the data table). */
.mud-picker.mud-picker-inline,
.mud-picker-inline .mud-picker-input {
    overflow: visible !important;
}

.mud-picker.mud-picker-inline.mud-picker-open {
    position: relative;
    z-index: 1400;
}

/* Report filter fields carry .rep-dp where a max-width:150 style used to sit. Constrain the
   INPUT width only — never the .mud-picker root, since that clips the calendar popover. */
.mud-picker.rep-dp .mud-input-control,
.mud-input-control.rep-dp {
    max-width: 260px;
}

/* Mirror the logout nav-link icon left-to-right (icon only, keep the text). */
.logout-nav .mud-nav-link-icon {
    transform: scaleX(-1);
}

/* Nav icon rail (collapsed menu): hover/ripple background should be a soft square,
   not a full circle. */
.nav-rail .mud-icon-button,
.nav-rail .mud-icon-button .mud-ripple {
    border-radius: 6px !important;
}

/* Make all data grids dense (MudBlazor's dense cell padding), regardless of the Dense param. */
.mud-data-grid .mud-table-cell {
    padding: 6px 16px !important;
}

/* Balíky list inside the order dialog: MudSimpleTable wraps its <table> in .mud-table-container,
   which MudBlazor caps at max-height:100% with overflow-y:auto. In the height-bounded dialog that cap
   produces a vertical scrollbar hugging the table. Let it grow with its rows (dialog scrolls instead);
   overflow-x:auto stays for horizontal scrolling on narrow widths. */
.parcel-baliky-list .mud-table-container {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Smaller filter expander header (applies to all expansion panels) — shorter closed height. */
.mud-expand-panel-header {
    min-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Tab-header count badges (MudTabPanel BadgeData) rendered as a rounded rectangle like the
   .cbadge count chips, not a circle/pill. The visible pill is `.mud-badge`. Scoped to the parcel
   detail tabs. */
.details-tabs .mud-badge {
    border-radius: 4px !important;
    height: 18px !important;
    min-width: 18px !important;
    width: auto !important;
    padding: 0 6px !important;
}

/* Palety tab badge is purple (legacy q-badge color="purple"), not the theme secondary. Covers both
   the themed badge (BadgeColor="Secondary" → .mud-theme-secondary) and the default grey pill. */
.details-tabs .mud-badge.mud-theme-secondary,
.details-tabs .mud-badge.mud-badge-default {
    background-color: #9c27b0 !important;
    color: #fff !important;
}

/* Výrobní operace expanded detail row: no hover reaction. The resting background already uses the
   hovered shade (surface + the table-hover overlay baked in), so the detail reads identically whether
   or not the pointer is over it. The :hover selector re-asserts the same value so MudDataGrid's row
   hover can't paint a different color on top. */
.details-tabs .task-detail-cell,
.details-tabs .mud-table-row:hover .task-detail-cell {
    background-color: var(--mud-palette-surface) !important;
    background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover)) !important;
}

/* Filter panels flush with the grid: the filter body is a MudCard (elevation + radius + margin)
   inside a padded expansion-panel content area, which floats it and leaves big gaps on the
   left/right/bottom. Flatten it so the filter sits edge-to-edge like the data grid — just the thin
   panel border, tight inner padding. Scoped to filter areas via the .filter-form marker so other
   expansion panels / cards are untouched. */
.mud-expand-panel:has(.filter-form),
.mud-expand-panel.filter-like {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: var(--mud-elevation-1) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

/* Push whatever follows the filter (the grid) down a few px. Applied to the following element,
   not the panel's margin-bottom, so vertical margin-collapse can't absorb it. Uses `+ *` rather
   than `+ .mud-data-grid` so it doesn't depend on the grid's exact root class. */
.mud-expand-panel:has(.filter-form) + * {
    margin-top: 6px !important;
}

.mud-expand-panel:has(.filter-form) .mud-expand-panel-content,
.mud-expand-panel.filter-like .mud-expand-panel-content {
    padding: 0 !important;
}

/* Flatten only the filter card that lives INSIDE the expansion panel. The login form
   (Login.razor) also carries .filter-form (for Enter-to-submit) but is NOT in an expansion
   panel, so scoping under .mud-expand-panel keeps the login card's border/shadow intact. */
.mud-expand-panel .mud-card:has(.filter-form) {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.mud-expand-panel .mud-card:has(.filter-form) .mud-card-content {
    padding: 8px 12px !important;
}

/* Global: MudDataGrid headers use the theme primary color (blue by default, brown for KONdesign)
   with white text + icons — same look as the report/attendance tables. */
.mud-data-grid .mud-table-head th,
.mud-data-grid .mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-primary) !important;
    color: #fff !important;
}

.mud-data-grid .mud-table-head .mud-table-sort-label,
.mud-data-grid .mud-table-head .mud-table-sort-label:hover,
.mud-data-grid .mud-table-head .mud-button-root,
.mud-data-grid .mud-table-head .mud-icon-root {
    color: #fff !important;
}

/* Report table colors. The header uses the theme PRIMARY colour (same as /attendance/list),
   so it follows each tenant automatically — e.g. KONdesign's primary is brown. The superior
   (2nd-level) rows keep a light blue by default; KONdesign overrides them to gray in its theme. */
.qmt-header {
    background-color: var(--mud-palette-primary);
    color: #fff;
}

/* Header backgrounds (blue / dark-blue / KONdesign brown) are all dark enough for white text,
   and the dark theme's --mud-palette-primary-text is near-black, so force white here. */
.qmt-header th,
.qmt-header td {
    color: #fff !important;
}

.qmt-superior {
    background-color: #a4dbff;
}

/* Superior rows are always a light background (light blue / KONdesign gray), so force dark text
   — otherwise in dark mode they inherit the light theme text and become unreadable. */
.qmt-superior td,
.qmt-superior th {
    color: #1a1a1a !important;
}

.qmt-total {
    background-color: #f2f2f2;
}

/* Report tables (MudSimpleTable Bordered): draw a full 1px cell grid like the legacy report —
   borders on every cell (rows + columns + outer frame). Fixed light-gray line (not the theme
   table-line var, which is near-white in dark mode and would vanish on the light rows below). */
.report-table td,
.report-table th {
    border: 1px solid #d5d5d5 !important;
    padding: 0 10px !important;
    /* MudSimpleTable gives th a taller line-height (subtitle2 = 1.57) than td (body2 = 1.43); force
       one line-height AND one explicit cell height so the header, total rows and plain rows are all
       pixel-identical — on the report pages and the Vyhodnocení tab alike (same .report-table). */
    line-height: 1.4 !important;
    height: 32px !important;
    box-sizing: border-box;
}

/* The operation rows carry a numbered MudChip badge (~24px) that would keep those rows taller than
   the text-only header / total rows. Constrain it so every row is the same height. */
.report-table .mud-chip {
    height: 20px !important;
    margin: 0 !important;
}

/* Report tables render as a LIGHT table in dark mode too (like the legacy reports). The qmt-header
   / qmt-superior / qmt-total rows are already forced to fixed light colors; the PLAIN rows (e.g. the
   expandable task rows) had no override and fell back to the dark theme surface, clashing with them.
   Force plain (non-qmt) rows white with dark text so the whole table reads consistently. */
.report-table tbody tr:not(.qmt-header):not(.qmt-superior):not(.qmt-total) {
    background-color: #ffffff !important;
}

.report-table tbody tr:not(.qmt-header):not(.qmt-superior):not(.qmt-total) td {
    color: #1a1a1a !important;
}

/* Hover on the light superior rows should just darken the blue slightly, not go to the dark
   theme hover color (which turns them near-black). */
tr.qmt-superior:hover,
tr.qmt-superior:hover td {
    background-color: #86c5ec !important;
}

/* Orders report table: never wrap a cell to two lines (scroll horizontally instead), and keep
   the project-name and product-type columns narrow so they don't squeeze the others. */
.orders-report-table td,
.orders-report-table th {
    white-space: nowrap;
}

.orders-report-table td:first-child,
.orders-report-table th:first-child {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-report-table td:nth-child(2),
.orders-report-table th:nth-child(2) {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Project-info report: never wrap a cell, and keep Zákazník (col 3) and Typ výrobku (col 9) narrow. */
.projectinfo-table td,
.projectinfo-table th {
    white-space: nowrap;
}

.projectinfo-table td:nth-child(3),
.projectinfo-table th:nth-child(3),
.projectinfo-table td:nth-child(9),
.projectinfo-table th:nth-child(9) {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icon-rail fly-out submenus (NavMenu.razor MudMenu, PopoverClass="nav-rail-flyout"):
   match the drawer/rail colours instead of the default surface — in BOTH themes, since the
   drawer palette variables auto-switch (primary in light mode, dark drawer in dark mode). */
.nav-rail-flyout,
.nav-rail-flyout .mud-paper,
.nav-rail-flyout .mud-list {
    background-color: var(--mud-palette-drawer-background) !important;
    color: var(--mud-palette-drawer-text) !important;
}

.nav-rail-flyout .mud-menu-item,
.nav-rail-flyout .mud-typography {
    color: var(--mud-palette-drawer-text) !important;
}

.nav-rail-flyout .mud-menu-item .mud-icon-root {
    color: var(--mud-palette-drawer-icon) !important;
}

.nav-rail-flyout .mud-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}