/* ===== Global ===== */
html, body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: #F5F5F5;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100vw;
}

/* MudDrawer fix — verified live in Chrome: the offender is the <hr class="mud-divider">
   between the header and the nav-menu. MudBlazor's default rule gives it
   `flex: 1 0 auto` which lets it grow to 582px inside the flex column,
   pushing the nav-menu to the very bottom of the drawer.
   Solution: force every drawer-content child to flex:0 0 auto so they only
   take their natural height. */
.mud-drawer .mud-drawer-content,
.mud-drawer-content {
    justify-content: flex-start !important;
    align-content: flex-start !important;
}
.mud-drawer .mud-drawer-content > *,
.mud-drawer-content > * {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
}
.mud-drawer .mud-divider,
.mud-drawer hr.mud-divider {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    height: 1px !important;
    min-height: 1px !important;
}
.mud-drawer .mud-nav-menu {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ===== Menu Buttons =====
   Grid αντί για στήλη (v2.7.158): από τη στιγμή που οι σελίδες μενού πήραν πλάτος, μια
   στήλη θα έκανε τα κουμπιά οριζόντιες λωρίδες 1280px × 60px με το κείμενο χαμένο στο
   κέντρο. Με auto-fill/minmax μοιράζονται σε στήλες όσες χωράνε: σε κινητό 375px βγαίνει
   ΜΙΑ στήλη (260 + gap > 375/2), δηλαδή ακριβώς η παλιά εμφάνιση. */
.menu-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.menu-btn {
    height: 60px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border-radius: 12px !important;
    letter-spacing: 0.5px;
}

/* ===== Page Content ===== */
.page-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #212121;
}

/* ===== Cards ===== */
.item-card {
    margin-bottom: 8px;
    border-radius: 8px !important;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.item-card:active {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}

/* ===== Search Bar ===== */
.search-bar {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    z-index: 100;
    background: #F5F5F5;
    padding: 6px 16px 4px 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-bar-spacer {
    height: 80px;
}

/* ===== Fullscreen Picker ===== */
.fullscreen-picker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.picker-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #1565C0;
    color: white;
    min-height: 48px;
}

.picker-search {
    padding: 8px 12px;
    background: #F5F5F5;
    border-bottom: 1px solid #E0E0E0;
}

.picker-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #F0F0F0;
    cursor: pointer;
    transition: background 0.15s;
}

.picker-item:active {
    background: #E3F2FD;
}

.picker-item-selected {
    background: #E8F5E9;
}

.picker-item-selected:active {
    background: #C8E6C9;
}

/* ===== Document Lines ===== */
.doc-line-card {
    border-left: 3px solid #1565C0;
    margin-bottom: 6px;
}

/* ===== Modern card style — used by list pages (orders, items, documents, ...).
   Soft shadow + rounded corners + hover lift. Optional `border-left: 4px solid <status>`
   added inline for color-coded states. ===== */
.modern-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.15s ease, transform 0.05s ease;
    overflow: hidden;
}
.modern-card:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.modern-card:active {
    transform: scale(0.99);
}

/* ===== Login Page ===== */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 16px !important;
    padding: 32px 24px;
}

.login-title {
    text-align: center;
    color: #1565C0;
    margin-bottom: 24px;
}

/* ===== Floating Action Button ===== */
.fab-container {
    position: fixed;
    bottom: 72px;
    right: 16px;
    z-index: 1050;
}

/* ===== Loading ===== */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
}

.loading-progress circle {
    fill: none;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

/* ===== Error UI ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

/* ===== Select popover fix - match input width ===== */
.select-popover-match-width.mud-popover {
    max-height: fit-content !important;
    height: auto !important;
}

.select-popover-match-width .mud-list {
    max-height: fit-content !important;
    height: auto !important;
    overflow-y: visible !important;
}

.select-popover-match-width .mud-list-item {
    min-height: 40px !important;
}

/* ===== Large icon button ===== */
.mud-icon-button-large-icon .mud-icon-root {
    font-size: 32px !important;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .mud-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }

    .mud-card {
        max-width: 100% !important;
        overflow: hidden;
    }

    .mud-select, .mud-input-control {
        max-width: 100% !important;
    }

    .mud-main-content {
        overflow-x: hidden;
    }
}

/* ===== Sticky header support ===== */
main.mud-main-content {
    overflow: visible !important;
    height: auto !important;
}

/* ===== Settings page wider container =====
   ΚΑΤΑΡΓΗΘΗΚΕ στο v2.7.158: η σελίδα Ρυθμίσεων έσπαγε με !important τον περιορισμό των
   600px του layout, γιατί τον χρειαζόταν. Πλέον το MainLayout δίνει πλάτος από μόνο του
   σε όλες τις σελίδες πλην των φορμών, οπότε το hack (και η body class που το άναβε)
   είναι περιττά. Μένει το σχόλιο για να μην ξαναμπεί. */

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    padding-bottom: 8px;
    margin: -8px -8px 0 -8px;
    padding: 8px 8px 8px 8px;
}

/* ===== Totals Footer ===== */
.totals-footer {
    position: fixed;
    bottom: 56px;
    left: 0;
    right: 0;
    z-index: 100;
    background: #1565C0;
    color: white;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
}

.totals-footer .total-item {
    white-space: nowrap;
}

.totals-footer .total-grand {
    font-size: 14px;
}

/* ===== PWA Standalone ===== */
@media (display-mode: standalone) {
    .mud-appbar {
        padding-top: env(safe-area-inset-top, 0px);
    }
}

/* ===== Πλάτος φίλτρων σε desktop (v2.7.158) =====
   Από το v2.7.158 οι σελίδες με λίστες πιάνουν όλο το πλάτος της οθόνης. Οι ΛΙΣΤΕΣ το
   θέλουν (σταματούν να κόβουν κείμενο με «...»), αλλά τα ΦΙΛΤΡΑ από πάνω όχι: ένα
   dropdown ή πεδίο αναζήτησης τεντωμένο σε 1400px είναι δυσανάγνωστο και άσχημο.
   Τα κρατάμε σε λογικό πλάτος αριστερά, χωρίς να αγγίξουμε τη λίστα από κάτω.
   Σε κινητό δεν ισχύει τίποτα — το 820px είναι πολύ πάνω από το πλάτος συσκευής. */
.filters-pane {
    max-width: 820px;
}