/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --color-primary: #009641;
    --color-primary-dk: #007a35;
    --color-primary-lt: #2ECC71;
    --color-secondary: #ef9e34;
    --color-secondary-dk: #d49a28;
    --color-secondary-lt: #f8d6aa;
    --color-accent: #2ECC71;
    --color-success: #27ae60;
    --color-error: #e74c3c;
    --color-warning: #eeae37;
    --color-bg: #F4F6F8;
    --color-text: #2C3E50;
    --color-muted: #7f8c8d;
    --color-dark: #3a3a3a;
    --gray-900: #1a1a1a;
    --gray-700: #374151;
    --gray-600: #666666;
    --gray-500: #6b7280;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50: #f9fafb;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    --radius: 8px;
    --radius-sm: 4px;
    --sidebar-width: 240px;
    --topbar-height: 56px;
    --f-head: 'Barlow Condensed', system-ui, sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text);
    margin: 0;
    height: 100%;
    line-height: 1.6;
    background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text);
}

a {
    color: var(--color-primary);
}

    a:hover {
        color: var(--color-primary-dk);
    }

.k-switch, .k-switch.k-switch-md {
    width: 30px;
    height: 15px;
    font-size: 8px;
}

    .k-switch .k-switch-track, .k-switch.k-switch-md .k-switch-track {
        width: 30px;
        height: 15px;
    }

    .k-switch .k-switch-thumb, .k-switch.k-switch-md .k-switch-thumb {
        width: 16px;
        height: 16px;
    }

    .k-switch.k-switch-off .k-switch-thumb-wrap, .k-switch.k-switch-md.k-switch-off .k-switch-thumb-wrap {
        inset-inline-start: 7px;
        transition: left var(--kendo-transition-snappy);
    }

    .k-switch.k-switch-on .k-switch-thumb-wrap, .k-switch.k-switch-md.k-switch-on .k-switch-thumb-wrap {
        inset-inline-start: calc(100% - 7px);
        transition: left var(--kendo-transition-bouncy);
    }

/* ============================================================
   INTERNAL APP LAYOUT
   ============================================================ */
.main-layout {
    display: flex;
    height: 100vh; /* fallback for browsers without dvh */
    /* dvh tracks the *visible* viewport (excludes mobile/tablet browser chrome),
       so the bottom of the scroll area isn't hidden behind Safari's toolbars and
       the page can be scrolled all the way down. Identical to 100vh on desktop. */
    height: 100dvh;
    overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 8px rgba(0,0,0,.15);
    z-index: 100;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    flex-shrink: 0;
    height: 48px;
    align-self: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.app-brand {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
}

    /* ── Telerik PanelBar — full green sidebar override ── */

    /* Base: every element gets the sidebar green */
    .sidebar-nav .k-panelbar,
    .sidebar-nav .k-panelbar .k-item,
    .sidebar-nav .k-panelbar .k-panelbar-item,
    .sidebar-nav .k-panelbar .k-group,
    .sidebar-nav .k-panelbar .k-panel,
    .sidebar-nav .k-panelbar .k-link,
    .sidebar-nav .k-panelbar .k-link:link,
    .sidebar-nav .k-panelbar .k-link:visited {
        background-color: var(--color-primary) !important;
        color: rgba(255,255,255,.99) !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

        /* Sub-items (k-level-1+) — slightly darker + deep indent */
        .sidebar-nav .k-panelbar .k-level-1 > .k-link,
        .sidebar-nav .k-panelbar .k-level-2 > .k-link,
        .sidebar-nav .k-panelbar .k-group > .k-item > .k-link,
        .sidebar-nav .k-panelbar .k-panel > .k-item > .k-link,
        .sidebar-nav .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link {
            background-color: var(--color-primary-dk) !important;
            padding-left: 2.5rem !important;
            font-size: 0.88rem !important;
        }

        /* Parent item header bold */
        .sidebar-nav .k-panelbar .k-panelbar-header > .k-link,
        .sidebar-nav .k-panelbar > .k-item > .k-link {
            font-weight: 600 !important;
        }

        /* Inner nested span.k-link (wraps only the text) — always transparent,
   so only the outer k-link (direct child of li) carries the background */
        .sidebar-nav .k-panelbar .k-link .k-link {
            background-color: transparent !important;
            padding: 0 !important;
            display: inline !important;
            pointer-events: none !important;
        }

        /* Leaf menu items render as a real <a href> (NavMenu) so the browser handles
           middle-click / Ctrl+click natively (new tab). It must stay clickable (the
           inner-.k-link rule above kills pointer events) and fill the whole row so the
           pointer cursor + click target cover the item, not just the text. */
        .sidebar-nav .k-panelbar a.nav-link-fill {
            display: flex !important;
            align-items: center;
            width: 100%;
            padding: 0 !important;
            background-color: transparent !important;
            color: inherit !important;
            text-decoration: none !important;
            cursor: pointer !important;
            pointer-events: auto !important;
        }

        /* Hover — outer k-link only (direct child of li) */
        .sidebar-nav .k-panelbar .k-panelbar-item:hover > .k-link,
        .sidebar-nav .k-panelbar .k-panelbar-item.k-state-hover > .k-link,
        .sidebar-nav .k-panelbar .k-panelbar-item.k-hover > .k-link {
            background-color: rgba(0,0,0,.20) !important;
            color: #fff !important;
        }

        /* Selection is driven SOLELY by the route (NavMenu adds .nav-selected to the
           active node's text span from the current URL). We deliberately do NOT style
           Telerik's internal click-selection (.k-selected / .k-state-selected /
           [aria-selected="true"]): it sticks to the last-clicked item and does not move
           when you navigate via an in-page button, which produced two lit menu items
           (e.g. edit a tool → /fleets/{id} lights "Evidence vozidel" while the clicked
           "Evidence nářadí" stayed lit; open an order from the production plan → both
           "Plán výroby" and "Seznam objednávek" lit). */

        /* The actual "badge" — rounded pill behind the label text in the selected item */
        .sidebar-nav .k-panelbar .k-panelbar-item-text.nav-selected {
            background-color: var(--color-secondary-dk) !important;
            color: #fff !important;
            padding: 0.15rem 0.6rem !important;
            border-radius: 0.5rem !important;
            display: inline-block !important;
        }

        /* Expand/collapse arrow */
        .sidebar-nav .k-panelbar .k-panelbar-expand,
        .sidebar-nav .k-panelbar .k-panelbar-collapse {
            color: rgba(255,255,255,.6) !important;
        }

        .sidebar-nav .k-panelbar .k-item:hover .k-panelbar-expand,
        .sidebar-nav .k-panelbar .k-item:hover .k-panelbar-collapse {
            color: #fff !important;
        }

.border-left-none {
    border-left: none !important;
}

/* nav item icon */
.nav-item-icon {
    margin-right: 0.5rem;
    font-size: 1rem;
    opacity: .9;
    flex-shrink: 0;
}

/* ── Main content area ── */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── Topbar ── */
.top-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    z-index: 50;
}

.app-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary);
    font-family: var(--font-heading);
    flex: 1;
    display: none; /* hidden — logo in sidebar */
}

.top-row-spacer {
    flex: 1;
}

/* ── Mobile drawer toggle (hamburger) + backdrop ──
   Both are hidden on desktop and only become active inside the
   ≤768px media query below, so the desktop layout is untouched. */
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text);
    font-size: 1.3rem;
    cursor: pointer;
}

    .sidebar-toggle:hover {
        background: var(--gray-100);
    }

.sidebar-overlay {
    display: none;
}

main {
    flex: 1;
    /* min-height:0 lets this flex item shrink below its content height so its
       own overflow:auto actually scrolls. Without it a tall page (e.g. an order
       with many items/fleet rows, whose grids have no fixed height) grows past
       the 100vh shell and gets clipped by .main-content's overflow:hidden. */
    min-height: 0;
    overflow: auto;
}

.content {
    padding: 1.25rem;
}

/* ── Mobile + tablet: sidebar becomes an off-canvas drawer ──
   On ≤1024px the sidebar slides off-screen and is toggled by the
   hamburger in the topbar; main content then spans the full width.
   Desktop (>1024px) keeps the original fixed sidebar untouched. */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
        will-change: transform;
    }

        .sidebar.open {
            transform: translateX(0);
        }

    .sidebar-overlay.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 99; /* below .sidebar (100), above content */
    }

    .sidebar-toggle {
        display: inline-flex;
    }
}

/* ── Search bar in topbar ── */
.search-wrapper {
    position: relative;
    flex: 1;
    max-width: 480px;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    background: var(--color-bg);
    border: 1px solid #d1d5db;
    border-radius: 20px;
    padding: 0 0.75rem;
    gap: 0.4rem;
    transition: border-color .2s, box-shadow .2s;
}

    .search-input-wrap:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(92,148,98,.15);
        background: #fff;
    }

    .search-input-wrap .bi {
        color: var(--color-muted);
        font-size: 0.95rem;
    }

.search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.88rem;
    padding: 0.45rem 0;
    width: 100%;
    color: var(--color-text);
}

/* Search results dropdown */
.search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    max-height: 420px;
    overflow-y: auto;
}

.search-results-group {
    padding: 0.4rem 0;
}

    .search-results-group + .search-results-group {
        border-top: 1px solid #f0f0f0;
    }

.search-group-label {
    padding: 0.3rem 1rem 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-muted);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    cursor: pointer;
    transition: background .1s;
    text-decoration: none;
    color: var(--color-text);
}

    .search-result-item:hover {
        background: var(--color-primary-lt);
        color: var(--color-text);
    }

.search-result-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

    .search-result-icon.type-order {
        background: #e8f0fe;
        color: #1967d2;
    }

    .search-result-icon.type-customer {
        background: #fce8ff;
        color: #9334e9;
    }

    .search-result-icon.type-contact {
        background: #fff3e0;
        color: #e37400;
    }

    .search-result-icon.type-fleet {
        background: #e6f4ea;
        color: #1e8e3e;
    }

.search-result-title {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
}

.search-result-sub {
    font-size: 0.78rem;
    color: var(--color-muted);
    line-height: 1.2;
}

.search-no-results {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.88rem;
}

/* ── User info in topbar ── */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--color-text);
    white-space: nowrap;
}

    .topbar-user .bi-person-circle {
        font-size: 1.4rem;
        color: var(--color-muted);
    }

.user-name {
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   SIMPLE LAYOUT (auth pages)
   ============================================================ */
.simple-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
}

    .simple-layout main {
        width: 100%;
        max-width: 480px;
        padding: 2rem;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
    }

.login-container {
    width: 100%;
}

    .login-container h2 {
        font-family: var(--font-heading);
        margin-bottom: 1.5rem;
        color: var(--color-primary);
    }

/* ============================================================
   PUBLIC LAYOUT
   ============================================================ */
.public-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    .public-layout > main {
        flex: 1;
    }

    /* Header (navbar) — use heading font for menu items + buttons */
    .public-layout > .navbar,
    .public-layout > .navbar .nav-link,
    .public-layout > .navbar .btn,
    .public-layout > .navbar .navbar-brand {
        font-family: var(--f-head), system-ui, sans-serif;
    }

        .public-layout > .navbar .nav-link {
            font-weight: 600;
            font-size: 1.05rem;
            letter-spacing: .03em;
            text-transform: uppercase;
        }

        .public-layout > .navbar .btn {
            font-weight: 600;
            letter-spacing: .03em;
            text-transform: uppercase;
        }

        /* When no nav menu is rendered (NotAuthorized), push auth controls right */
        .public-layout > .navbar .navbar-brand + .public-auth-actions {
            margin-left: auto;
        }



/* Hero */
.hero-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dk) 60%, #3d6b42 100%);
    color: #fff;
    padding: 5rem 0 4rem;
    text-align: center;
}

    .hero-section h1 {
        font-family: var(--font-heading);
        font-size: 3rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    .hero-section .hero-sub {
        font-size: 1.2rem;
        color: rgba(255,255,255,.85);
        max-width: 600px;
        margin: 0 auto 2rem;
    }

@media (max-width: 640px) {
    .hero-section {
        padding: 3rem 0 2.5rem;
    }

        .hero-section h1 {
            font-size: 1.7rem;
        }

        .hero-section .hero-sub {
            font-size: 1rem;
        }
}

/* CTA Buttons */
.btn-cta-primary {
    background-color: var(--color-secondary);
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, transform .1s;
    display: inline-block;
}

    .btn-cta-primary:hover {
        background-color: var(--color-secondary-dk);
        color: #fff;
        transform: translateY(-1px);
    }

.btn-cta-secondary {
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
    padding: 12px 30px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
    display: inline-block;
}

    .btn-cta-secondary:hover {
        background: rgba(255,255,255,.2);
        color: #fff;
    }

/* Value Prop */
.value-prop-section {
    padding: 4rem 0;
    background: #fff;
}

.value-card {
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: var(--radius);
    transition: box-shadow .2s;
}

    .value-card:hover {
        box-shadow: var(--shadow-md);
    }

.value-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.value-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-primary);
}

/* Features */
.features-section {
    padding: 4rem 0;
    background: var(--color-bg);
}

    .features-section h2 {
        font-family: var(--font-heading);
        font-size: 2rem;
        color: var(--color-primary);
    }

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.feature-icon {
    color: var(--color-secondary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* CTA Section */
.cta-section {
    padding: 4rem 0;
    background: var(--color-primary);
    color: #fff;
    text-align: center;
}

    .cta-section h2 {
        font-family: var(--font-heading);
        font-size: 2rem;
        color: #fff;
    }

/* Footer */
.public-footer {
    background: var(--color-dark);
    color: #cdd5e0;
    padding: 3rem 0 1.5rem;
    font-size: 0.9rem;
}

    .public-footer h5 {
        color: #fff;
        font-family: var(--font-heading);
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .public-footer a {
        color: #cdd5e0;
        text-decoration: none;
    }

        .public-footer a:hover {
            color: #fff;
        }

.footer-brand {
    height: 40px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 2rem;
    padding-top: 1.5rem;
    text-align: center;
    color: var(--color-muted);
}

/* ============================================================
   CUSTOMER LAYOUT (sidebar portal)
   ============================================================ */

.navbar-nav a {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gray-700);
    padding: 10px 10px;
    border-radius: 4px;
    transition: color .15s,background .15s;
    white-space: nowrap;
}

.customer-layout {
    display: flex;
    height: 100vh; /* fallback */
    height: 100dvh;
}

.customer-delimiter {
    height: 10px;
    background-color: var(--color-primary);
}

.customer-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width .2s;
    box-shadow: 2px 0 8px rgba(0,0,0,.15);
}

.customer-sidebar-logo {
    border-bottom: 1px solid rgba(255,255,255,.15);
    font-size: 1.3rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: #fff;
    height: 40px;
}

.customer-nav {
    flex: 1;
    padding: 0.5rem 0;
}

.customer-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    /*color: rgba(255,255,255,.85);*/
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    font-size: 0.92rem;
}

    .customer-nav-item:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
    }

    .customer-nav-item.active {
        background: rgba(0,0,0,.15);
        color: #fff;
        border-left-color: var(--color-secondary);
    }

    .customer-nav-item .nav-icon {
        font-size: 1.1rem;
        width: 20px;
        text-align: center;
    }

.customer-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg);
}

.customer-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: var(--shadow-sm);
}

    .customer-topbar .topbar-title {
        font-weight: 600;
        font-size: 1rem;
        color: var(--color-text);
    }

.customer-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

@media (max-width: 768px) {
    .customer-layout {
        flex-direction: column;
    }

    .customer-sidebar {
        width: 100%;
        min-width: 0;
        height: auto;
    }

    .customer-nav {
        display: flex;
        overflow-x: auto;
        padding: 0;
    }

    .customer-nav-item {
        flex-shrink: 0;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 0.75rem 1rem;
    }

        .customer-nav-item.active {
            border-bottom-color: var(--color-secondary);
            border-left: none;
        }
}

/* ============================================================
   ORDER STATUS BADGES
   ============================================================ */
.order-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    gap: 4px;
}

.badge-pending {
    background-color: #607D8B;
}

.badge-new {
    background-color: var(--color-secondary);
    color: #1a1a1a;
}

.badge-confirmed {
    background-color: #3498DB;
}

.badge-production {
    background-color: #9B59B6;
}

.badge-inprod {
    background-color: var(--color-primary);
}

.badge-payment {
    background-color: #E67E22;
}

.badge-completed {
    background-color: var(--color-success);
}

.badge-cancelled {
    background-color: #95A5A6;
}

/* ============================================================
   ORDER TYPE BADGE
   ============================================================ */
.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.73rem;
    font-weight: 600;
}

.type-concrete {
    background: var(--color-primary);
    color: white;
    border: 1px solid #c5d9fb;
}

.type-asphalt {
    background: var(--color-secondary);
    color: white;
    border: 1px solid #fde68a;
}

/* ============================================================
   WIZARD (new order)
   ============================================================ */
.wizard-progress {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}


.wizard-step-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    border: 2px solid #ddd;
    background: #fff;
    color: #999;
    z-index: 1;
}

.wizard-step.active .wizard-step-circle {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.wizard-step.completed .wizard-step-circle {
    border-color: var(--color-primary-lt);
    background: var(--color-primary-lt);
    color: #fff;
}

.wizard-step-label {
    font-size: 1rem;
    margin-top: 6px;
    color: #999;
    text-align: center;
}

.wizard-step.active .wizard-step-label {
    color: var(--color-primary);
    font-weight: 600;
}

.wizard-step.completed .wizard-step-label {
    color: var(--color-primary-lt);
}

.wizard-step::before {
    content: '';
    position: absolute;
    top: 18px;
    left: -50%;
    right: 50%;
    height: 2px;
    background: #ddd;
    z-index: 0;
}

.wizard-step:first-child::before {
    display: none;
}

.wizard-step.completed::before, .wizard-step.active::before {
    background: var(--color-primary);
}

/* ============================================================
   DASHBOARD STATS
   ============================================================ */
.stat-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-primary);
    text-align: left;
    margin-left: 15px;
    margin-right: 15px;
}

    .stat-card .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--color-primary);
        font-family: var(--font-heading);
    }

    .stat-card .stat-label {
        font-size: 0.5rem;
        color: var(--color-muted);
        margin-top: 0.25rem;
    }

    .stat-card.secondary {
        border-left-color: var(--color-secondary);
    }

        .stat-card.secondary .stat-value {
            color: var(--color-secondary-dk);
        }

    .stat-card.accent {
        border-left-color: var(--gray-500);
    }

        .stat-card.accent .stat-value {
            color: var(--gray-500);
        }

    .stat-card.portal-card {
        padding: 2.5rem 1.5rem;
        text-align: center;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .stat-card.portal-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12));
        }

        .stat-card.portal-card .stat-value {
            font-size: 5rem;
            line-height: 1;
            margin-bottom: 0.75rem;
        }

            .stat-card.portal-card .stat-value .k-icon,
            .stat-card.portal-card .stat-value .k-svg-icon,
            .stat-card.portal-card .stat-value svg {
                width: 4.5rem;
                height: 5rem;
            }

        .stat-card.portal-card .stat-label {
            font-size: 1rem;
            font-weight: 600;
        }

/* ============================================================
   ADMIN PORTAL (Portal.razor)
   ============================================================ */
.dash-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0 15px 1.5rem;
}

.dash-info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
    box-shadow: var(--shadow-sm);
}

.dash-info-card-muted {
    background: var(--gray-100);
    color: var(--color-muted);
}

.dash-info-icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--gray-100);
    color: var(--color-primary);
    font-size: 1.4rem;
}

.dash-info-label {
    font-size: .7rem;
    letter-spacing: .07em;
    color: var(--color-muted);
}

.dash-info-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
}

.dash-section-title {
    font-size: .7rem;
    letter-spacing: .09em;
    color: var(--color-muted);
    margin: 0 15px .6rem;
}

.dash-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin: 0 15px 1.75rem;
}

.dash-action {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 6rem;
    background: #fff;
    border-radius: var(--radius);
    padding: 1.6rem 1.9rem;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-primary);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .dash-action:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .dash-action.accent {
        border-left-color: var(--color-secondary);
    }

    .dash-action.muted {
        border-left-color: var(--gray-500);
    }

.dash-action-icon {
    flex: 0 0 auto;
    font-size: 2.1rem;
    color: var(--color-primary);
}

.dash-action.accent .dash-action-icon {
    color: var(--color-secondary-dk);
}

.dash-action.muted .dash-action-icon {
    color: var(--gray-500);
}

.dash-action-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dash-action-title {
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--color-text);
}

.dash-action-sub {
    font-size: .95rem;
    color: var(--color-muted);
}

.dash-action-arrow {
    flex: 0 0 auto;
    color: var(--color-muted);
}

.dash-badge {
    position: absolute;
    top: .55rem;
    right: .55rem;
    background: var(--color-secondary);
    color: #fff;
    border-radius: 0.5rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    padding: .35rem .65rem;
    white-space: nowrap;
    text-align: center;
}

.dash-charts {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    margin: 0 15px 1.5rem;
}

.dash-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
}

.dash-card-full {
    grid-column: 1 / -1;
}

.dash-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}

.dash-card-title {
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--color-text);
}

.dash-toggle {
    display: inline-flex;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.dash-toggle-btn {
    border: 0;
    background: #fff;
    color: var(--color-muted);
    font-size: .78rem;
    padding: .3rem .7rem;
    cursor: pointer;
}

    .dash-toggle-btn + .dash-toggle-btn {
        border-left: 1px solid var(--gray-200);
    }

    .dash-toggle-btn.active {
        background: var(--color-primary);
        color: #fff;
    }

.dash-stats-row {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--gray-200);
    margin-top: 1rem;
    padding-top: .9rem;
}

.dash-stat-label {
    font-size: .7rem;
    letter-spacing: .05em;
    color: var(--color-muted);
}

.dash-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
}

@media (max-width: 900px) {
    /* Info cards + charts stack into a single column (Top zákazníci ends up
       directly under Výroba m³/den, then Objednávky below). */
    .dash-header, .dash-charts {
        grid-template-columns: 1fr;
    }

    /* Quick actions switch from 4×1 to a 2×2 grid and shrink to fit. */
    .dash-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .dash-action {
        gap: 0.85rem;
        min-height: 5rem;
        padding: 1.1rem 1.15rem;
    }

    .dash-action-icon {
        font-size: 1.7rem;
    }

    .dash-action-title {
        font-size: 1.05rem;
    }

    .dash-action-sub {
        font-size: .85rem;
    }
}

/* Very narrow phones: a single column reads better than a cramped 2×2. */
@media (max-width: 480px) {
    .dash-actions {
        grid-template-columns: 1fr;
    }

    /* Arrow chevron costs width with little value on a phone. */
    .dash-action-arrow {
        display: none;
    }
}

/* ============================================================
   SHARED CARDS / FORMS
   ============================================================ */
.content-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #f0f0f0;
}

    .content-card h4 {
        font-family: var(--font-heading);
        color: var(--color-primary);
        margin-bottom: 1rem;
    }

.section-heading {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-text);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary-lt);
}

/* Page action bar — buttons above grids */
.page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

    .page-actions .btn-action {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 1rem;
        border-radius: var(--radius-sm);
        font-size: 0.88rem;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: background .15s, transform .1s;
        text-decoration: none;
    }

        .page-actions .btn-action:hover {
            transform: translateY(-1px);
        }

.btn-concrete {
    background: var(--color-primary);
    color: #fff;
}

    .btn-concrete:hover {
        background: var(--color-primary-dk);
        color: #fff;
    }

.btn-asphalt {
    background: var(--color-secondary);
    color: #1a1a1a;
}

    .btn-asphalt:hover {
        background: var(--color-secondary-dk);
        color: #1a1a1a;
    }

/* Focus ring */
*:focus-visible {
    outline: 0px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================================
   ORDER DETAIL PAGE
   ============================================================ */
.order-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.order-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.order-page-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .order-page-title h1 {
        margin: 0;
        font-size: 1.7rem;
    }

.order-page-actions {
    display: flex;
    gap: 0.75rem;
}

.order-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .order-page-grid {
        grid-template-columns: 1fr;
    }
}

.order-col-left,
.order-col-right {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* ── Cards ── */
.order-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.order-card-header {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #eef0f3;
}

    .order-card-header h3 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--color-text);
        font-family: var(--font-heading);
    }

.order-card-body {
    padding: 1.25rem;
}

/* ── Customer card ── */
.customer-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.customer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Solid green bubble with white content — applies to both the initials avatar
       (contact) and the icon avatars below. */
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--font-heading);
    flex-shrink: 0;
}

.customer-info {
    min-width: 0;
}

.customer-name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}

.customer-meta {
    font-size: 0.82rem;
    color: var(--color-muted);
}

.contact-row {
    padding-top: 1rem;
    border-top: 1px solid #eef0f3;
}

.customer-avatar-icon {
    /* Same green circle as the initials-avatar, but renders a Telerik SVG icon centred. */
    font-size: 1.4rem;
}

    .customer-avatar-icon .k-svg-icon,
    .customer-avatar-icon .k-svg-icon svg {
        width: 22px;
        height: 22px;
        color: #fff;
        fill: currentColor;
    }

.delivery-row-link {
    /* Anchor wrapping the whole avatar + address row, so hover/click is unified. */
    text-decoration: none;
    color: inherit;
    transition: color 0.15s ease;
}

    .delivery-row-link:hover {
        color: var(--color-primary);
    }

        .delivery-row-link:hover .customer-avatar {
            background: var(--color-primary);
            color: #fff;
        }

        .delivery-row-link:hover .delivery-address-text {
            color: var(--color-primary);
        }

.delivery-address-text {
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
}

/* Indent secondary delivery info (DateRequired / Distance / GPS) so its left edge
   lines up with the address text after the avatar gutter. */
.delivery-aligned {
    margin-top: 0.75rem;
}

.delivery-aligned-label {
    /* "Lokalita doručování" caption — flush left within the delivery card body. */
}

.contact-name {
    font-weight: 500;
    color: var(--color-text);
}

.contact-email {
    display: block;
    color: var(--color-primary);
    font-size: 0.85rem;
    text-decoration: none;
}

    .contact-email:hover {
        text-decoration: underline;
    }

.contact-phone {
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* ── Status timeline ── */
.status-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.status-step {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    position: relative;
    padding-bottom: 0.5rem;
}

    .status-step:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 11px;
        top: 24px;
        bottom: 0;
        width: 2px;
        background: #e5e7eb;
    }

    .status-step.done:not(:last-child)::before {
        background: var(--color-primary);
    }

.status-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    border: 2px solid #e5e7eb;
    z-index: 1;
}

.status-step.done .status-step-dot {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.status-step.current .status-step-dot {
    background: #fff;
    color: var(--color-secondary-dk);
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(238,174,55,.2);
}

.status-step-info {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.status-step-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
}

.status-step.pending .status-step-label {
    color: var(--color-muted);
    font-weight: 400;
}

.status-step.current .status-step-label {
    color: var(--color-secondary-dk);
    font-weight: 600;
}

.status-step-date {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 2px;
}

/* ── Status change form ── */
.status-change-form {
    padding-top: 1rem;
    border-top: 1px solid #eef0f3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .status-change-form h4 {
        margin: 0 0 0.25rem 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--color-text);
    }

/* ── Order summary ── */
.order-summary {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

    .summary-row .summary-label {
        font-weight: 600;
        color: var(--color-text);
        font-size: 1rem;
    }

    .summary-row .summary-value {
        font-weight: 700;
        color: var(--color-primary);
        font-size: 1.25rem;
        font-family: var(--font-heading);
    }

    .summary-row.summary-sub {
        margin-top: 0.35rem;
        padding-top: 0.35rem;
        border-top: 1px dashed #d1d5db;
    }

        .summary-row.summary-sub .summary-label {
            font-weight: 400;
            font-size: 0.85rem;
            color: var(--color-muted);
        }

        .summary-row.summary-sub .summary-value {
            font-weight: 500;
            font-size: 0.95rem;
            color: var(--color-text);
        }

/* ── Order item rendering ── */
.order-item-product-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-item-name {
    font-weight: 600;
    color: var(--color-text);
}

.order-item-recipe {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.order-item-fleet {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-style: italic;
}

/* Emphasised leading value inside a grid cell (e.g. product / vehicle identifier).
   Generic — reuse in any grid where a cell's primary text should stand out, to
   match the bold leading segment of the order "Product" column.
   Works both as an inner <span> and applied directly to a <td> cell via
   GridCellRenderers.Strong (OnCellRender); the td-scoped selector beats the
   default `.k-grid td` color rule. */
.grid-cell-strong,
.k-grid td.grid-cell-strong {
    font-weight: 600;
    color: var(--color-text);
}

/* Clickable variant of the strong cell: the ProductionPlan grid no longer navigates on row
   click (a cell click starts an in-cell edit there), so the order number itself has to look
   and behave like the way into the order. */
.grid-cell-link {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.grid-cell-link:hover {
    color: var(--color-primary, inherit);
}

.order-item-type-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

    .order-item-type-badge.badge-mixture {
        background: #e0f2fe;
        color: #075985;
    }

    .order-item-type-badge.badge-addition {
        background: #ede9fe;
        color: #5b21b6;
    }

    .order-item-type-badge.badge-transport {
        background: #fef3c7;
        color: #92400e;
    }

    .order-item-type-badge.badge-discount {
        background: #fee2e2;
        color: #991b1b;
    }

    .order-item-type-badge.badge-secondary {
        background: #e5e7eb;
        color: #374151;
    }

/* ============================================================
   BB-BADGE — generic public-area badge
   -----------------------------------------------------------
   Shared shape (radius / padding / typography) lives in the
   base class. Each enum value gets its own class where you
   can freely tweak background + text color.
   ============================================================ */
.bb-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .bb-badge.bb-badge-sm {
        padding: 0.05rem 0.45rem;
        font-size: 0.66rem;
    }

/* PriceListType — per-enum colors */
.bb-badge-mixture {
    background: var(--color-primary);
    color: white;
}

.bb-badge-addition {
    background: #ede9fe;
    color: #5b21b6;
}

.bb-badge-fleet-wait {
    background: #dbeafe;
    color: #1e3a8a;
}

.bb-badge-fleet-delay {
    background: #fde2e2;
    color: #7f1d1d;
}

.bb-badge-fleet-distance {
    background: #fef3c7;
    color: #92400e;
}

.bb-badge-own-transport {
    background: #fef3c7;
    color: #92400e;
}

.bb-badge-discount {
    background: #fee2e2;
    color: #991b1b;
}

.bb-badge-fleet {
    background: #d1fae5;
    color: #065f46;
}

.bb-badge-default {
    background: #e5e7eb;
    color: #374151;
}

/* ── Delivery block ── */
.delivery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.delivery-block-label {
    font-size: 0.78rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
}

.delivery-block-value {
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
}

.delivery-block-sub {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 0.25rem;
}

.delivery-block-link {
    display: inline-block;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px dashed var(--color-muted);
    transition: color 0.15s ease;
}

    .delivery-block-link:hover {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

.delivery-note {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eef0f3;
}

.text-muted {
    color: var(--color-muted);
}

/* ── Horizontal status timeline ── */

.status-timeline-horizontal {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.status-step-h {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 0;
    min-width: 0;
}

    .status-step-h:last-child {
        flex: 0 0 auto;
        margin-right: -30px;
    }

.status-step-h-row {
    display: flex;
    align-items: center;
    width: 100%;
    align-self: stretch;
}

.status-step-h-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    z-index: 1;
    transition: all .2s ease;
    cursor: default;
}

.status-step-h.done .status-step-h-icon {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.status-step-h.current .status-step-h-icon {
    background: #fff;
    color: var(--color-secondary-dk);
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 4px rgba(238,174,55,.2);
}

.status-step-h-connector {
    flex: 1 1 auto;
    height: 2px;
    background: #e5e7eb;
    min-width: 24px;
}

.status-step-h.done .status-step-h-connector {
    background: var(--color-primary);
}

.status-step-h-label {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.2;
    white-space: nowrap;
    cursor: default;
    /* icon sits at the start of the column and is 36px wide; center the label under the icon */
    position: relative;
    left: 18px;
    transform: translateX(-50%);
    width: max-content;
    max-width: none;
}

/* First step: align label to the icon's left edge */
.status-step-h:first-child .status-step-h-label {
    left: 0;
    transform: none;
}

/* Last step: align label to the icon's right edge */
.status-step-h:last-child .status-step-h-label {
    left: 36px;
    transform: translateX(-100%);
}

.status-step-h.pending .status-step-h-label {
    color: var(--color-muted);
    font-weight: 400;
}

.status-step-h.current .status-step-h-label {
    color: var(--color-secondary-dk);
    font-weight: 600;
}

.status-step-h.done .status-step-h-label {
    color: var(--color-primary-dk);
}

/* ── Card header with inline actions ── */
.order-card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.order-card-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Fleet scheduler dialog ── */
/* Responsive scheduler window — fill the viewport but stay centered and capped. */
.fleet-scheduler-window {
    max-width: 1600px;
    max-height: 100vh;
}

.fleet-scheduler-dialog {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.scheduler-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eef0f3;
}

    .scheduler-filters .filter-field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

        .scheduler-filters .filter-field label {
            font-size: 0.78rem;
            color: var(--color-muted);
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

.scheduler-appt {
    height: 100%;
    padding: 2px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.scheduler-appt-own {
    background: var(--color-primary);
    color: #fff;
    border-left: 3px solid var(--color-primary-dk);
    cursor: move;
}

.scheduler-appt-other {
    background: #4b5563;
    color: #fff;
    border-left: 3px solid #1f2937;
    cursor: not-allowed;
}

/* ── Order header — Recalculate action ──
   Override the Telerik "tertiary" theme so the recalculate button reads as a
   subdued action (neutral gray) rather than picking up the bright theme accent. */
.order-action-recalculate.k-button {
    background-color: #6b7280;
    border-color: #6b7280;
    color: #fff;
}

    .order-action-recalculate.k-button:hover,
    .order-action-recalculate.k-button:focus {
        background-color: #4b5563;
        border-color: #4b5563;
        color: #fff;
    }

/* ── Buttons — secondary outline ──
   Telerik emits secondary-outline buttons as `k-button-outline` + `k-button-secondary`
   (the theme-color modifier is a separate class, NOT a combined `-outline-secondary`).
   Default rule leaves them near-black until hover; force the brand secondary color so
   cancel / delete read at a glance. */
.k-button.k-button-outline.k-button-secondary {
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    background-color: transparent !important;
}

    .k-button.k-button-outline.k-button-secondary .k-button-icon,
    .k-button.k-button-outline.k-button-secondary .k-icon,
    .k-button.k-button-outline.k-button-secondary .k-svg-icon {
        color: var(--color-secondary) !important;
    }

    .k-button.k-button-outline.k-button-secondary:hover,
    .k-button.k-button-outline.k-button-secondary:focus {
        color: #fff !important;
        background-color: var(--color-secondary) !important;
        border-color: var(--color-secondary-dk) !important;
    }

        .k-button.k-button-outline.k-button-secondary:hover .k-button-icon,
        .k-button.k-button-outline.k-button-secondary:hover .k-icon,
        .k-button.k-button-outline.k-button-secondary:hover .k-svg-icon {
            color: #fff !important;
        }

/* ── Buttons — secondary solid ──
   Telerik's default solid-secondary uses near-black text on the brand-secondary
   background, which reads poorly. Force white text/icons. */
.k-button.k-button-solid.k-button-solid-secondary,
.k-button.k-button-solid.k-button-secondary {
    color: #fff !important;
}

    .k-button.k-button-solid.k-button-solid-secondary .k-button-icon,
    .k-button.k-button-solid.k-button-solid-secondary .k-icon,
    .k-button.k-button-solid.k-button-solid-secondary .k-svg-icon,
    .k-button.k-button-solid.k-button-secondary .k-button-icon,
    .k-button.k-button-solid.k-button-secondary .k-icon,
    .k-button.k-button-solid.k-button-secondary .k-svg-icon {
        color: #fff !important;
    }

/* ── Buttons — tertiary (neutral gray) ──
   Telerik's "tertiary" theme color resolves to blue; remap it to the neutral
   gray used for cancel / delete / remove actions across outline, solid & flat. */

/* Tertiary — outline (grid cancel / delete) */
.k-button.k-button-outline.k-button-tertiary {
    color: var(--gray-500) !important;
    border-color: var(--gray-500) !important;
    background-color: transparent !important;
}

    .k-button.k-button-outline.k-button-tertiary .k-button-icon,
    .k-button.k-button-outline.k-button-tertiary .k-icon,
    .k-button.k-button-outline.k-button-tertiary .k-svg-icon {
        color: var(--gray-500) !important;
    }

    .k-button.k-button-outline.k-button-tertiary:hover,
    .k-button.k-button-outline.k-button-tertiary:focus {
        color: #fff !important;
        background-color: var(--gray-500) !important;
        border-color: var(--gray-700) !important;
    }

        .k-button.k-button-outline.k-button-tertiary:hover .k-button-icon,
        .k-button.k-button-outline.k-button-tertiary:hover .k-icon,
        .k-button.k-button-outline.k-button-tertiary:hover .k-svg-icon {
            color: #fff !important;
        }

/* Tertiary — solid (e.g. EntityListEdit cancel / delete) */
.k-button.k-button-solid.k-button-tertiary {
    background-color: var(--gray-500) !important;
    border-color: var(--gray-500) !important;
    color: #fff !important;
}

    .k-button.k-button-solid.k-button-tertiary .k-button-icon,
    .k-button.k-button-solid.k-button-tertiary .k-icon,
    .k-button.k-button-solid.k-button-tertiary .k-svg-icon {
        color: #fff !important;
    }

    .k-button.k-button-solid.k-button-tertiary:hover,
    .k-button.k-button-solid.k-button-tertiary:focus {
        background-color: var(--gray-700) !important;
        border-color: var(--gray-700) !important;
    }

/* Tertiary — flat (e.g. cart remove) */
.k-button.k-button-flat.k-button-tertiary,
.k-button.k-button-flat.k-button-tertiary .k-button-icon,
.k-button.k-button-flat.k-button-tertiary .k-icon,
.k-button.k-button-flat.k-button-tertiary .k-svg-icon {
    color: var(--gray-500) !important;
}

    .k-button.k-button-flat.k-button-tertiary:hover,
    .k-button.k-button-flat.k-button-tertiary:focus {
        background-color: var(--gray-100) !important;
    }

/* Read-only rows in the top order-items grid: hide inline edit/delete buttons
   (grouped synthetic rows reflect multiple TOrderItemFleet entries and must be
   modified via the bottom fleet grid). */
.order-row-readonly .k-command-cell .k-button {
    display: none;
}

/* Production plan action cell: the row-edit pencil sits next to the send / pending button,
   so the wrapper spaces them instead of the buttons carrying their own margins. */
.production-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Production plan action buttons (SendToProduction / AsterixPending): the default
   Telerik SVG icon reads oversized next to the label — shrink it to ~14px. */
.production-action-btn .k-button-icon,
.production-action-btn .k-svg-icon,
.production-action-btn .k-svg-icon svg {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

/* Center action buttons (edit / save / cancel / delete) within grid command columns. */
.k-grid td.k-command-cell {
    text-align: center;
    justify-content: center;
}

/* ============================================================
   ENTITY LIST PAGE (shared list component)
   ============================================================ */
.entity-list-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.entity-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

    .entity-list-header h1 {
        margin: 0;
    }

.entity-list-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.entity-list-filter {
    padding: 0.75rem;
    background: #f8f9fb;
    border: 1px solid #eef0f3;
    border-radius: 8px;
}

    /* ───── TelerikFilter expression rows ─────
   Each expression row is a .k-toolbar with three direct children:
     1) Field selector  2) Operator selector  3) Value editor   (4) delete btn)
   The group header toolbar (A/Nebo, Přidat podmínku, Přidat skupinu) is ALSO
   a .k-toolbar — we must not touch it. We disambiguate via :has(.k-dropdownlist)
   which is only true for expression rows (the field selector dropdown). */
    .entity-list-filter .k-toolbar:has(.k-dropdownlist) > *:nth-child(1) {
        flex: 0 0 230px;
    }

    .entity-list-filter .k-toolbar:has(.k-dropdownlist) > *:nth-child(2) {
        flex: 0 0 180px;
    }

    .entity-list-filter .k-toolbar:has(.k-dropdownlist) > *:nth-child(3) {
        flex: 0 0 230px;
    }

        .entity-list-filter .k-toolbar:has(.k-dropdownlist) > *:nth-child(1) > *,
        .entity-list-filter .k-toolbar:has(.k-dropdownlist) > *:nth-child(2) > *,
        .entity-list-filter .k-toolbar:has(.k-dropdownlist) > *:nth-child(3) > * {
            width: 100%;
        }

    /* EnumFilterField: hide the built-in operator slot and expand the value slot
   so it covers operator + value columns (toggle in our own .enum-filter-row
   takes the operator width, the value dropdown takes the value width — keeps
   visual alignment with non-enum rows). */
    .entity-list-filter .k-toolbar:has(.enum-filter-row) > *:nth-child(2) {
        display: none;
    }

    .entity-list-filter .k-toolbar:has(.enum-filter-row) > *:nth-child(3) {
        flex-basis: calc(180px + 0.5rem + 230px);
    }

.enum-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

    .enum-filter-row > *:first-child {
        flex: 0 0 180px;
    }

    .enum-filter-row > *:last-child {
        flex: 1 1 auto;
    }

@media (max-width: 720px) {
    .entity-list-filter .k-toolbar:has(.k-dropdownlist) > *:nth-child(1),
    .entity-list-filter .k-toolbar:has(.k-dropdownlist) > *:nth-child(2),
    .entity-list-filter .k-toolbar:has(.k-dropdownlist) > *:nth-child(3) {
        flex-basis: 100%;
    }

    .enum-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

        .enum-filter-row > *:first-child,
        .enum-filter-row > *:last-child {
            flex: 1 1 100%;
        }
}

.entity-list-view-label {
    font-weight: 500;
    color: var(--color-muted);
    margin-left: 0.5rem;
}

/* Grid pager page-size dropdown: the default width only fits 2-digit values, so
   3-digit page sizes (100/150/250) get truncated to "1…". Widen the anchor; the
   Telerik popup inherits its width from the anchor, so the list widens too. */
.k-pager .k-pager-sizes .k-dropdownlist {
    width: auto;
    min-width: 5rem;
}

/* Public order form: make the searchable mixture ComboBox blend in with the neighbouring native
   <select class="form-select"> fields — same text font/colour and the same chevron arrow. */

/* Text/placeholder: match Bootstrap's .form-select (body font, dark text, muted placeholder). */
.bb-native-arrow .k-input-inner {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
}

.bb-native-arrow .k-input-inner::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* Arrow: replace Telerik's filled caret with Bootstrap's form-select chevron. The button MUST
   stay laid out (it is the click-to-open target) — so we only repaint it: transparent background
   with the chevron as its background-image, and the triangle icon made invisible via
   visibility:hidden (NOT display:none, which collapses the button and stops the popup opening). */
.bb-native-arrow .k-input-button {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
    border: none;
    box-shadow: none;
}

.bb-native-arrow .k-input-button .k-icon,
.bb-native-arrow .k-input-button .k-svg-icon,
.bb-native-arrow .k-input-button .k-button-icon {
    visibility: hidden;
}

.save-view-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

    .save-view-dialog .k-label {
        font-weight: 500;
        font-size: 0.85rem;
        color: var(--color-text);
        margin-bottom: 0.15rem;
    }

.save-view-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}
/* Hides the grid while we apply the saved snapshot to avoid a flash of default state.
   visibility:hidden keeps layout reserved (no jump). */
.entity-list-hydrating {
    visibility: hidden;
}

/* ============================================================
   DETAIL PAGE (RolePage, ReportDefinitionPage …)
   — sticky header with the save/close buttons so they stay
     reachable when scrolling long forms / tree-lists.
   ============================================================ */
.detail-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg, #fff);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

    .detail-page-header h1 {
        margin: 0;
        flex: 1;
        font-size: 1.7rem;
    }

.detail-page-section {
    padding: 0.5rem 0;
}

    .detail-page-section h2 {
        font-size: 1.05rem;
        margin: 0 0 0.5rem 0;
        color: var(--color-muted, #555);
    }

/* ============================================================
   ENTITY PAGE (shared layout for <EntityPage> — *Page.razor)
   ============================================================ */
.entity-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.entity-page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg, #fff);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

    .entity-page-header h1 {
        margin: 0;
        flex: 1;
        font-size: 1.7rem;
    }

.entity-page-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.entity-page-section {
    padding: 0.25rem 0;
}

    .entity-page-section h2 {
        font-size: 1.05rem;
        margin: 0 0 0.5rem 0;
        color: var(--color-muted, #555);
    }

.entity-page-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-self: flex-start;
}

.entity-page-full {
    width: 100%;
    max-width: calc(var(--entity-page-col-count) * 300px + (var(--entity-page-col-count) - 1) * 2.5rem);
}

.entity-page-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    align-items: flex-start;
}

.entity-page-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 0 0 300px;
    max-width: 300px;
    min-width: 0;
}

    .entity-page-col .k-form-field {
        margin: 0;
    }

.entity-page-tabs {
    margin-top: 0.5rem;
}

@media (max-width: 680px) {
    .entity-page-col {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .entity-page-full {
        max-width: 100%;
    }
}

.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

    .filters-bar .filter-field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

        .filters-bar .filter-field label {
            font-size: 0.8rem;
            color: var(--color-muted, #555);
        }

/* Settings form — label + control pairs */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 700px;
}

.settings-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--color-border, #e8e8e8);
}

    .settings-row:last-child {
        border-bottom: none;
    }

.settings-label {
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: default;
}

.settings-control {
    display: flex;
    align-items: center;
}

/* ============================================================
   BOOTSTRAP BUTTON OVERRIDES (project palette)
   -----------------------------------------------------------
   Override Bootstrap's default blue palette so any markup using
   .btn-primary / .btn-secondary / .btn-outline-* uses the
   BaBeTon brand colors. Change the --btn-* variables here to
   re-skin every button in the app at once.
   ============================================================ */
:root {
    --btn-primary-bg: var(--color-primary);
    --btn-primary-bg-hover: var(--color-primary-dk);
    --btn-primary-fg: #fff;
    --btn-secondary-bg: var(--color-secondary);
    --btn-secondary-bg-hover: var(--color-secondary-dk);
    --btn-secondary-fg: #fff;
    --btn-outline-fg: var(--color-primary);
    --btn-outline-fg-hover: #fff;
    --btn-outline-border: var(--color-primary);
    --btn-outline-sec-fg: var(--color-secondary-dk);
    --btn-outline-sec-fg-hover: #fff;
    --btn-outline-sec-border: var(--color-secondary);
}

/* Solid primary */
.btn-primary,
.btn-primary:visited {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-fg) !important;
    --bs-btn-bg: var(--btn-primary-bg);
    --bs-btn-border-color: var(--btn-primary-bg);
    --bs-btn-color: var(--btn-primary-fg);
    --bs-btn-hover-bg: var(--btn-primary-bg-hover);
    --bs-btn-hover-border-color: var(--btn-primary-bg-hover);
    --bs-btn-hover-color: var(--btn-primary-fg);
    --bs-btn-active-bg: var(--btn-primary-bg-hover);
    --bs-btn-active-border-color: var(--btn-primary-bg-hover);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active {
        background-color: var(--btn-primary-bg-hover) !important;
        border-color: var(--btn-primary-bg-hover) !important;
        color: var(--btn-primary-fg) !important;
    }

/* Solid secondary */
.btn-secondary,
.btn-secondary:visited {
    background-color: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-fg) !important;
    --bs-btn-bg: var(--btn-secondary-bg);
    --bs-btn-border-color: var(--btn-secondary-bg);
    --bs-btn-color: var(--btn-secondary-fg);
    --bs-btn-hover-bg: var(--btn-secondary-bg-hover);
    --bs-btn-hover-border-color: var(--btn-secondary-bg-hover);
    --bs-btn-hover-color: var(--btn-secondary-fg);
    --bs-btn-active-bg: var(--btn-secondary-bg-hover);
    --bs-btn-active-border-color: var(--btn-secondary-bg-hover);
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active,
    .btn-secondary.active {
        background-color: var(--btn-secondary-bg-hover) !important;
        border-color: var(--btn-secondary-bg-hover) !important;
        color: var(--btn-secondary-fg) !important;
    }

/* Outline primary */
.btn-outline-primary,
.btn-outline-primary:visited {
    background-color: transparent !important;
    border-color: var(--btn-outline-border) !important;
    color: var(--btn-outline-fg) !important;
    --bs-btn-color: var(--btn-outline-fg);
    --bs-btn-border-color: var(--btn-outline-border);
    --bs-btn-hover-bg: var(--btn-outline-border);
    --bs-btn-hover-border-color: var(--btn-outline-border);
    --bs-btn-hover-color: var(--btn-outline-fg-hover);
    --bs-btn-active-bg: var(--btn-outline-border);
    --bs-btn-active-border-color: var(--btn-outline-border);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active,
    .btn-outline-primary.active {
        background-color: var(--btn-outline-border) !important;
        border-color: var(--btn-outline-border) !important;
        color: var(--btn-outline-fg-hover) !important;
    }

/* Outline secondary */
.btn-outline-secondary,
.btn-outline-secondary:visited {
    background-color: transparent !important;
    border-color: var(--btn-outline-sec-border) !important;
    color: var(--btn-outline-sec-fg) !important;
    --bs-btn-color: var(--btn-outline-sec-fg);
    --bs-btn-border-color: var(--btn-outline-sec-border);
    --bs-btn-hover-bg: var(--btn-outline-sec-border);
    --bs-btn-hover-border-color: var(--btn-outline-sec-border);
    --bs-btn-hover-color: var(--btn-outline-sec-fg-hover);
    --bs-btn-active-bg: var(--btn-outline-sec-border);
    --bs-btn-active-border-color: var(--btn-outline-sec-border);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active,
    .btn-outline-secondary.active {
        background-color: var(--btn-outline-sec-border) !important;
        border-color: var(--btn-outline-sec-border) !important;
        color: var(--btn-outline-sec-fg-hover) !important;
    }

/* Link buttons should follow the primary palette too */
.btn-link {
    color: var(--btn-primary-bg) !important;
}

    .btn-link:hover {
        color: var(--btn-primary-bg-hover) !important;
    }

/* Alert-info — project palette */
.alert-info {
    background-color: var(--color-primary-lt) !important;
    border-color: var(--color-primary-lt) !important;
    color: #fff !important;
    --bs-alert-bg: var(--color-primary-lt);
    --bs-alert-border-color: var(--color-primary-lt);
    --bs-alert-color: #fff;
    --bs-alert-link-color: #fff;
}

    .alert-info .alert-link,
    .alert-info a {
        color: #fff !important;
        text-decoration: underline;
    }

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

/* ============================================================
   ATTACHMENTS COMPONENT
   ============================================================ */
.attachments-component {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attachments-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.attachment-card {
    position: relative;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 6px;
    background: #fff;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .attachment-card:hover {
        box-shadow: 0 2px 6px rgba(0,0,0,.08);
    }

    .attachment-card.selected {
        border-color: var(--color-primary, #0d6efd);
        background: #f0f7ff;
    }

.attachment-check {
    position: absolute;
    top: 4px;
    left: 6px;
    z-index: 2;
}

.attachment-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
}

.attachment-body {
    background: transparent;
    border: none;
    padding: 1.25rem 0.25rem 0.25rem 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    width: 100%;
}

.attachment-name {
    font-size: 0.85rem;
    font-weight: 500;
    word-break: break-word;
    text-align: center;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.attachment-size {
    font-size: 0.75rem;
    color: #6c757d;
}

/* ---- Save error banner ---- */
.save-error-banner {
    background: #fdecea;
    border: 1px solid var(--color-error);
    border-radius: var(--radius-sm);
    color: var(--color-error);
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* ---- Autofill decoy inputs ---- */
.autofill-decoy {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---- Password requirements checklist ---- */
.password-requirements {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pw-req {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    transition: color 0.15s ease;
}

    .pw-req.pw-ok {
        color: var(--color-success);
    }

    .pw-req.pw-fail {
        color: var(--color-muted);
    }

.pw-icon {
    width: 1em;
    text-align: center;
    font-size: 0.85rem;
}

/* ── Global error dialog ─────────────────────────────────────────────────
   Lives once in MainLayout.razor (.bb-error-dialog), driven by
   NotificationService.ShowErrorDialog. Styled red so API/business failures
   are unmistakable. */

.bb-error-dialog .k-window {
    border: 2px solid #c0392b;
    box-shadow: 0 14px 40px rgba(192, 57, 43, 0.35);
}

.bb-error-dialog .k-window-titlebar,
.bb-error-dialog .k-dialog-titlebar {
    background: #c0392b;
    color: #fff;
    border-bottom: 1px solid #a83323;
    padding: 12px 16px;
}

.bb-error-dialog .k-window-title,
.bb-error-dialog .k-dialog-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.bb-error-dialog .k-window-titlebar .k-button,
.bb-error-dialog .k-dialog-titlebar .k-button {
    color: #fff;
}

.bb-error-dialog .k-window-content,
.bb-error-dialog .k-dialog-content {
    background: #fff5f4;
    padding: 18px 20px;
}

.bb-error-dialog .k-dialog-actions,
.bb-error-dialog .k-window-actions {
    background: #fff5f4;
    border-top: 1px solid #f1c9c4;
}

.bb-error-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    min-height: 80px;
}

/* The Warning SVG inherits color via currentColor — colorize the wrapper red
   and bump the rendered size beyond Telerik's k-icon-xl (which tops out around
   2rem) so the icon is unmistakable from across the room. */
.bb-error-dialog .bb-error-icon {
    color: #c0392b;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

    .bb-error-dialog .bb-error-icon .k-svg-icon,
    .bb-error-dialog .bb-error-icon svg {
        width: 4rem;
        height: 4rem;
        fill: currentColor;
        color: #c0392b;
    }

.bb-error-dialog .bb-error-message {
    flex: 1 1 auto;
    color: #2b2b2b;
    font-size: 1.05rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

/* ── Warning dialog ──────────────────────────────────────────────────────
   Amber sibling of .bb-error-dialog, used for high-impact-but-recoverable
   confirmations (e.g. the three-stage order-cancel button on OrderPage).
   Reuses the .bb-error-body / .bb-error-icon / .bb-error-message layout. */

.bb-warning-dialog .k-window {
    border: 2px solid #d98c00;
    box-shadow: 0 14px 40px rgba(217, 140, 0, 0.35);
}

.bb-warning-dialog .k-window-titlebar,
.bb-warning-dialog .k-dialog-titlebar {
    background: #d98c00;
    color: #fff;
    border-bottom: 1px solid #b97700;
    padding: 12px 16px;
}

.bb-warning-dialog .k-window-title,
.bb-warning-dialog .k-dialog-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.bb-warning-dialog .k-window-titlebar .k-button,
.bb-warning-dialog .k-dialog-titlebar .k-button {
    color: #fff;
}

.bb-warning-dialog .k-window-content,
.bb-warning-dialog .k-dialog-content {
    background: #fff9ef;
    padding: 18px 20px;
}

.bb-warning-dialog .k-dialog-actions,
.bb-warning-dialog .k-window-actions {
    background: #fff9ef;
    border-top: 1px solid #f0dcae;
}

.bb-warning-dialog .bb-error-icon {
    color: #d98c00;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

    .bb-warning-dialog .bb-error-icon .k-svg-icon,
    .bb-warning-dialog .bb-error-icon svg {
        width: 4rem;
        height: 4rem;
        fill: currentColor;
        color: #d98c00;
    }

.bb-warning-dialog .bb-error-message {
    flex: 1 1 auto;
    color: #2b2b2b;
    font-size: 1.05rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

/* ── Three-stage order-cancel button (OrderPage header) ──────────────────
   Default: compact icon-only. Once armed (first click) it widens to reveal
   the "Zrušit objednávku" label. */
.order-cancel-btn {
    transition: padding 0.15s ease;
}

    .order-cancel-btn.armed {
        font-weight: 600;
    }

.k-filter-container {
    margin-bottom: 0px !important;
    margin-block-end: 0px !important;
}

.k-panelbar {
    font-size: 1rem;
}

.k-panelbar-item-text {
    margin-left: 8px;
}

h1 {
    font-size: 1.7rem;
    margin: 0;
}

.k-table-tfoot {
    background-color: #E7F5E8;
}

.k-event {
    background-color: transparent !important;
}

/* ============================================================
   TELERIK TABSTRIP — global look matching .entity-page-card / .order-card
   (larger radius, shadow, bigger tab header text)
   ============================================================ */
.k-tabstrip {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: #fff;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

    .k-tabstrip > .k-tabstrip-items-wrapper {
        background: #fff;
        border-bottom: 1px solid #eef0f3;
    }

    .k-tabstrip .k-tabstrip-item > .k-link,
    .k-tabstrip .k-item.k-tabstrip-item > .k-link {
        font-size: 1rem;
        padding: 0.7rem 1.25rem;
    }

    /* Remove doubled borders against the outer .k-tabstrip frame:
       - no top border on any tab header
       - no left border on the first tab header */
    .k-tabstrip .k-tabstrip-items .k-tabstrip-item,
    .k-tabstrip .k-tabstrip-items .k-item.k-tabstrip-item {
        border-top-width: 0 !important;
    }

        .k-tabstrip .k-tabstrip-items .k-tabstrip-item:first-child,
        .k-tabstrip .k-tabstrip-items .k-item.k-tabstrip-item:first-child {
            border-left-width: 0 !important;
        }

    .k-tabstrip > .k-content,
    .k-tabstrip > .k-tabstrip-content {
        border: 0;
        background: transparent;
        padding: 1.25rem;
    }

    /* Suppress focus outlines / focus rings on tab header & content
       (keep .k-active / .k-selected styling intact) */
    .k-tabstrip .k-tabstrip-item.k-focus,
    .k-tabstrip .k-tabstrip-item:focus,
    .k-tabstrip .k-tabstrip-item:focus-visible,
    .k-tabstrip .k-tabstrip-item > .k-link:focus,
    .k-tabstrip .k-tabstrip-item > .k-link:focus-visible,
    .k-tabstrip .k-tabstrip-item.k-focus > .k-link {
        box-shadow: none !important;
        outline: none !important;
    }

    .k-tabstrip > .k-content:focus,
    .k-tabstrip > .k-content:focus-visible,
    .k-tabstrip > .k-content.k-focus,
    .k-tabstrip > .k-tabstrip-content:focus,
    .k-tabstrip > .k-tabstrip-content:focus-visible,
    .k-tabstrip > .k-tabstrip-content.k-focus {
        box-shadow: none !important;
        outline: none !important;
    }

.k-tabstrip-items-wrapper .k-tabstrip-item:active, .k-tabstrip-items-wrapper .k-tabstrip-item.k-active, .k-tabstrip-items-wrapper .k-tabstrip-item.k-selected, .k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-items-wrapper .k-item.k-selected {
    background-color: var(--kendo-color-primary, #ff6358);
    color: white;
    font-weight: bold;
}

.fleet-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 1100px) {
    .fleet-overview-grid {
        grid-template-columns: 1fr;
    }
}

.fleet-overview-card {
    background: var(--kendo-color-surface, #fff);
    border: 1px solid var(--kendo-color-border, #e0e0e0);
    border-radius: 4px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

.fleet-overview-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}

    .fleet-overview-card-header h2 {
        margin: 0;
        font-size: 1.1rem;
    }

.fleet-overview-filter {
    display: flex;
    gap: .5rem;
    align-items: center;
}

    .fleet-overview-filter label {
        font-size: .9rem;
        color: var(--kendo-color-subtle, #666);
    }

/* ============================================================
   MOBILE POLISH (≤768 px / ≤600 px)
   Everything below is scoped to narrow viewports and leaves the
   desktop layout untouched.
   ============================================================ */

/* ── Order status timeline ──
   The horizontal timeline has nowrap labels for up to 8 steps and lives
   inside an `overflow:hidden` card, so on a phone it would clip. Let it
   scroll horizontally instead, with fixed-width steps so labels stay legible. */
@media (max-width: 768px) {
    .status-timeline-horizontal {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    .status-step-h,
    .status-step-h:last-child {
        flex: 0 0 auto;
        min-width: 0;
        margin-right: 0;
    }

    /* Drop the desktop "center label under the icon" transform (it overlaps
       neighbours once steps are narrow). Instead left-align each label and let
       the step size to it, with a gap so adjacent labels never touch. */
    .status-step-h-label,
    .status-step-h:first-child .status-step-h-label,
    .status-step-h:last-child .status-step-h-label {
        position: static;
        left: auto;
        transform: none;
        width: max-content;
        font-size: 0.72rem;
        padding-right: 1.5rem;
    }
}

/* ── New-order wizard ── compact the step circles/labels on small screens. */
@media (max-width: 600px) {
    .wizard-progress {
        margin-bottom: 1.25rem;
    }

    .wizard-step-circle {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .wizard-step::before {
        top: 16px;
    }

    .wizard-step-label {
        font-size: 0.8rem;
        line-height: 1.15;
    }
}

/* ── Dialogs / windows ──
   Several dialogs use a fixed px width (e.g. 480–520px) that exceeds a phone
   viewport and would overflow horizontally. max-width clamps the used width to
   the viewport regardless of the inline width, so it never spills off-screen. */
@media (max-width: 600px) {
    .k-window,
    .k-dialog {
        max-width: calc(100vw - 1rem) !important;
    }
}

/* ── Telerik grids ── (tablet + phones)
   List grids use a viewport-relative Height (e.g. calc(100vh - 160px)) and
   scroll their rows internally. On smaller screens the header/toolbar wrap onto
   extra lines, so that fixed height overshoots the visible area and the grid's
   bottom (with its vertical scrollbar) falls off-screen — rows become
   unreachable. Letting the grid auto-size and scrolling the *page* instead
   (main has min-height:0) keeps every row reachable. Horizontal scrolling for
   wide tables stays inside the grid (driven by explicit column Widths). */
@media (max-width: 1024px) {
    .k-grid {
        height: auto !important;
    }

        .k-grid .k-grid-content,
        .k-grid .k-grid-content-locked {
            height: auto !important;
            max-height: none !important;
            -webkit-overflow-scrolling: touch;
        }
}

/* Phones: reclaim the vertical space taken by the grouping drop-zone. */
@media (max-width: 768px) {
    .k-grid .k-grouping-header {
        display: none;
    }
}

/* ── EntityPage header actions (tablet + phones) ──
   The action buttons (Save / Delete / Cancel / extra) can be wider than a small
   display. Drop them onto their own line below the title and let that row scroll
   horizontally instead of overflowing the page. */
@media (max-width: 768px) {
    .entity-page-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

        .entity-page-header h1 {
            flex: 1 1 100%;
        }

    .entity-page-actions {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }

        /* Keep each button at its natural size so the row overflows → scrolls,
           rather than the buttons squashing. */
        .entity-page-actions > * {
            flex: 0 0 auto;
        }
}

/* ── Topbar search (phones) ──
   Collapse the search to a single icon-sized tap target (no room for a legible
   placeholder anyway). Tapping it expands the field across the bar and hides
   the spacer + the logged-in user block; blurring collapses it again. Pure CSS
   via :focus-within — no component coupling. */
@media (max-width: 640px) {
    .top-row .search-wrapper {
        flex: 0 0 auto;
        width: 42px;
        max-width: 42px;
        transition: max-width .2s ease, width .2s ease;
    }

        /* Collapsed: center the magnifier and lay a transparent full-cover input
           over it so the whole 42px box is tappable (taps move focus → expand). */
        .top-row .search-wrapper:not(:focus-within) .search-input-wrap {
            position: relative;
            justify-content: center;
            padding: 0;
            height: 38px;
        }

        .top-row .search-wrapper:not(:focus-within) .search-input {
            position: absolute;
            inset: 0;
            width: 100%;
            padding: 0;
            cursor: pointer;
        }

            .top-row .search-wrapper:not(:focus-within) .search-input::placeholder {
                color: transparent;
            }

        /* Expanded: take the whole bar. */
        .top-row .search-wrapper:focus-within {
            flex: 1 1 auto;
            width: auto;
            max-width: none;
        }

            /* While searching, reclaim the rest of the bar from the spacer + user. */
            .top-row .search-wrapper:focus-within ~ .top-row-spacer,
            .top-row .search-wrapper:focus-within ~ .topbar-user {
                display: none;
            }
}