@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.ewdlgswx1m.bundle.scp.css';
@import '_content/PSC.Blazor.Components.MarkdownEditor/PSC.Blazor.Components.MarkdownEditor.bundle.scp.css';

/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* Landing Layout Container */
.landing-layout-container[b-8rb8jkwbbp] {
    min-height: 100vh;
    background: white;
    /* adisyon-design: the real brand blue is #036ac4 (--brand-600 / --accent).
       FluentUI's --accent-fill-rest (#0078d4) is the fallback the design system
       says to avoid. Remap it to the brand token across the whole landing surface
       so every CTA/accent matches the logo. Scoped here → admin/FluentUI untouched. */
    --accent-fill-rest: var(--brand-600);
    --accent-fill-hover: var(--brand-700);
    --accent-fill-active: var(--brand-700);
    --accent-foreground-rest: var(--brand-600);
}

/* Header Styles — new design system: light, translucent, flat */
.header[b-8rb8jkwbbp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    z-index: 1000;
    margin-top: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.header-hidden[b-8rb8jkwbbp] {
    transform: translateY(-100%);
}

.header-content[b-8rb8jkwbbp] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo-link[b-8rb8jkwbbp] {
    text-decoration: none;
}

.logo-text[b-8rb8jkwbbp] {
    font-family: var(--font-script, 'Damion', cursive);
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--accent);
}

.nav-menu[b-8rb8jkwbbp] {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* Dropdown */
.nav-item-with-dropdown[b-8rb8jkwbbp] {
    position: relative;
}

.dropdown-trigger[b-8rb8jkwbbp] {
    cursor: pointer;
}

.nav-link[b-8rb8jkwbbp] {
    color: var(--fg-2);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    padding: 0.5rem 0.75rem;
}

.nav-link[b-8rb8jkwbbp]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
}

.nav-link:hover[b-8rb8jkwbbp] {
    color: var(--accent);
}

.nav-link:hover[b-8rb8jkwbbp]::after {
    width: 80%;
}

/* Dropdown Content - Grid Layout */
.dropdown-content[b-8rb8jkwbbp] {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.5rem;
    min-width: 400px;
    max-width: 500px;
}

/* Wider dropdown for platform features - 2x5 grid */
.dropdown-content-features[b-8rb8jkwbbp] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    min-width: 400px;
    max-width: 500px;
}

.nav-item-with-dropdown:hover .dropdown-content[b-8rb8jkwbbp] {
    opacity: 1;
    visibility: visible;
}

/* Dropdown Link Cards */
.dropdown-link-card[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    background: #f8fafc;
    border-radius: 8px;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    min-height: 44px;
}

.dropdown-link-card:hover[b-8rb8jkwbbp] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.08) 0%, rgba(100, 116, 139, 0.04) 100%);
    border-color: rgba(100, 116, 139, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.15);
}

/* Dropdown Image */
.dropdown-image[b-8rb8jkwbbp] {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.dropdown-link-card:hover .dropdown-image[b-8rb8jkwbbp] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.2);
}

/* Dropdown Icon (for items without images) */
.dropdown-icon[b-8rb8jkwbbp] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.dropdown-link-card:hover .dropdown-icon[b-8rb8jkwbbp] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.2);
}

.dropdown-text[b-8rb8jkwbbp] {
    color: #2d3748;
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.dropdown-link-card:hover .dropdown-text[b-8rb8jkwbbp] {
    color: #475569;
}

/* Special styling for "Tümünü Gör" link */
.dropdown-link-all[b-8rb8jkwbbp] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(100, 116, 139, 0.05) 100%);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.dropdown-link-all:hover[b-8rb8jkwbbp] {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border-color: #64748b;
}

.dropdown-link-all:hover .dropdown-text[b-8rb8jkwbbp] {
    color: white;
}

.dropdown-link-all:hover .dropdown-icon[b-8rb8jkwbbp] {
    background: rgba(255, 255, 255, 0.2);
}

.header-actions[b-8rb8jkwbbp] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-courier[b-8rb8jkwbbp] {
    padding: 0.75rem 1.5rem;
    background: var(--accent-fill-rest);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-courier:hover[b-8rb8jkwbbp] {
    opacity: 0.9;
}

.btn-secondary[b-8rb8jkwbbp] {
    padding: 0.6rem 1.1rem;
    color: var(--fg-2);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-8rb8jkwbbp] {
    background: var(--bg-muted);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-primary[b-8rb8jkwbbp] {
    padding: 0.6rem 1.2rem;
    background: var(--accent);
    color: var(--fg-on-brand);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.btn-primary:hover[b-8rb8jkwbbp] {
    transform: translateY(-1px);
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-lg);
}

/* Body Content */
.landing-body-content[b-8rb8jkwbbp] {
    padding-top: 80px;
}

/* Floating Courier Button */
.floating-courier-btn[b-8rb8jkwbbp] {
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 9998;
    animation: slideInUp-b-8rb8jkwbbp 0.5s ease;
}

@keyframes slideInUp-b-8rb8jkwbbp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-float-btn[b-8rb8jkwbbp] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    z-index: 9999;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.close-float-btn:hover[b-8rb8jkwbbp] {
    background: #dc2626;
    transform: scale(1.1);
}

.courier-float-link[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--accent-fill-rest) 0%, #5a7de8 100%);
    color: white;
    text-decoration: none;
    padding: 16px 20px;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

.courier-float-link:hover[b-8rb8jkwbbp] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
}

.float-icon[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.float-icon fluent-icon[b-8rb8jkwbbp],
.float-icon svg[b-8rb8jkwbbp],
.float-icon svg path[b-8rb8jkwbbp],
.float-icon *[b-8rb8jkwbbp] {
    color: white !important;
    fill: white !important;
    stroke: white !important;
}

.float-text[b-8rb8jkwbbp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.float-text strong[b-8rb8jkwbbp] {
    font-size: 16px;
    font-weight: 700;
}

.floating-contact-stack[b-8rb8jkwbbp] {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 10020;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.floating-contact-btn[b-8rb8jkwbbp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-contact-btn:hover[b-8rb8jkwbbp] {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.32);
}

.floating-whatsapp[b-8rb8jkwbbp] {
    background: #22c55e;
}

.floating-call[b-8rb8jkwbbp] {
    background: #2563eb;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle[b-8rb8jkwbbp] {
    display: none;
    background: transparent;
    border: none;
    /* Dark gray so the icon is visible on the light header (was white → invisible). */
    color: var(--fg-2);
    cursor: pointer;
    padding: 0.5rem;
    margin-right: 0.5rem;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover[b-8rb8jkwbbp] {
    background: var(--bg-subtle);
    border-radius: 8px;
}

/* ===== FluentIcon sizing — icons inherit currentColor ===== */
.mobile-menu-toggle[b-8rb8jkwbbp]  svg {
    width: 26px;
    height: 26px;
}

.dropdown-icon[b-8rb8jkwbbp]  svg {
    width: 20px;
    height: 20px;
    color: var(--fg-hint);
}

.mobile-sidebar-close[b-8rb8jkwbbp]  svg {
    width: 24px;
    height: 24px;
    color: var(--fg-1);
}

.mobile-menu-link[b-8rb8jkwbbp]  svg {
    width: 22px;
    height: 22px;
    color: var(--fg-hint);
    flex-shrink: 0;
}

.mobile-menu-link-special[b-8rb8jkwbbp]  svg,
.mobile-menu-link-all[b-8rb8jkwbbp]  svg {
    color: var(--accent);
}

.floating-contact-btn[b-8rb8jkwbbp]  svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Mobile Sidebar Overlay */
.mobile-sidebar-overlay[b-8rb8jkwbbp] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.open[b-8rb8jkwbbp] {
    display: block;
    opacity: 1;
}

/* Mobile Sidebar */
.mobile-sidebar[b-8rb8jkwbbp] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: white;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

.mobile-sidebar.open[b-8rb8jkwbbp] {
    transform: translateX(0);
}

.mobile-sidebar-header[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f7fafc;
}

.mobile-sidebar-title[b-8rb8jkwbbp] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
}

.mobile-sidebar-close[b-8rb8jkwbbp] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.mobile-sidebar-close:hover[b-8rb8jkwbbp] {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-sidebar-content[b-8rb8jkwbbp] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.mobile-menu-section[b-8rb8jkwbbp] {
    margin-bottom: 1.5rem;
}

/* Mobile Courier CTA Button */
.mobile-courier-cta-btn[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--accent-fill-rest) 0%, #5a7de8 100%);
    border-radius: 12px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    animation: pulseGlow-b-8rb8jkwbbp 2s ease-in-out infinite;
}

@keyframes pulseGlow-b-8rb8jkwbbp {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }
    50% {
        box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
    }
}

.mobile-courier-cta-btn:hover[b-8rb8jkwbbp] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.mobile-courier-icon[b-8rb8jkwbbp] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-courier-text[b-8rb8jkwbbp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-courier-text strong[b-8rb8jkwbbp] {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

.mobile-courier-text span[b-8rb8jkwbbp] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.mobile-menu-section-title[b-8rb8jkwbbp] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding: 0 0.5rem;
}

.mobile-menu-link[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    text-decoration: none;
    color: #1a202c;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 0.25rem;
}

.mobile-menu-link:hover[b-8rb8jkwbbp] {
    background: #f7fafc;
    transform: translateX(4px);
}

.mobile-menu-icon[b-8rb8jkwbbp] {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.mobile-menu-link-special[b-8rb8jkwbbp] {
    color: #667eea;
    font-weight: 600;
}

.mobile-menu-link-all[b-8rb8jkwbbp] {
    background: #f7fafc;
    font-weight: 600;
}

.mobile-menu-actions[b-8rb8jkwbbp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0.5rem;
    border-top: 1px solid #e2e8f0;
    margin-top: auto;
}

.mobile-btn-secondary[b-8rb8jkwbbp],
.mobile-btn-primary[b-8rb8jkwbbp] {
    display: block;
    text-align: center;
    padding: 0.875rem 1rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-btn-secondary[b-8rb8jkwbbp] {
    background: var(--bg-muted);
    color: var(--accent);
    border: 1px solid var(--border);
}

.mobile-btn-secondary:hover[b-8rb8jkwbbp] {
    background: var(--bg-subtle);
    border-color: var(--accent);
}

.mobile-btn-primary[b-8rb8jkwbbp] {
    background: var(--accent);
    color: var(--fg-on-brand);
    box-shadow: var(--shadow-md);
}

.mobile-btn-primary:hover[b-8rb8jkwbbp] {
    transform: translateY(-2px);
    background: var(--accent-hover);
    box-shadow: var(--shadow-lg);
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo-text[b-8rb8jkwbbp] {
        font-size: 24px;
        letter-spacing: 1.5px;
    }

    .header-content[b-8rb8jkwbbp] {
        padding: 1rem 0.5rem;
    }

    /* Show mobile menu toggle button */
    .mobile-menu-toggle[b-8rb8jkwbbp] {
        display: flex;
    }

    /* Hide desktop nav menu on mobile */
    .nav-menu[b-8rb8jkwbbp] {
        display: none;
    }

    .header-actions[b-8rb8jkwbbp] {
        gap: 0.5rem;
    }

    /* Language picker moves into the hamburger menu on small screens (the mobile
       sidebar has its own LanguageSwitcher), so hide the top-bar one here. */
    .header-lang-switcher[b-8rb8jkwbbp] {
        display: none;
    }

    .btn-secondary[b-8rb8jkwbbp],
    .btn-primary[b-8rb8jkwbbp] {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Hide floating courier button on mobile */
    .floating-courier-btn[b-8rb8jkwbbp] {
        display: none;
    }

    .floating-contact-stack[b-8rb8jkwbbp] {
        right: 12px;
        bottom: 12px;
        gap: 8px;
    }

    .floating-contact-btn[b-8rb8jkwbbp] {
        padding: 10px;
        width: 44px;
        height: 44px;
        justify-content: center;
    }

    .floating-contact-btn span[b-8rb8jkwbbp] {
        display: none;
    }
}

@media (max-width: 380px) {
    .floating-contact-stack[b-8rb8jkwbbp] {
        right: 10px;
        bottom: 10px;
    }

    .floating-contact-btn[b-8rb8jkwbbp] {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    .header-content[b-8rb8jkwbbp] {
        padding: 0.75rem 0.5rem;
    }

    .logo-text[b-8rb8jkwbbp] {
        font-size: 22px;
        letter-spacing: 1px;
    }

    .btn-secondary[b-8rb8jkwbbp],
    .btn-primary[b-8rb8jkwbbp] {
        padding: 0.45rem 0.6rem;
        font-size: 0.8rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ===== Account menu (design-system profile popover) ===== */
.account-menu-backdrop[b-dgwhom7wk8] {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: transparent;
}

/* Üst şerit sağ üst kümesi (yüzen/ızgara modda cüzdan + profil). */
.navbar-wallet[b-dgwhom7wk8] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--fg-2);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.navbar-wallet:hover[b-dgwhom7wk8] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.navbar-wallet:focus-visible[b-dgwhom7wk8] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.navbar-wallet[b-dgwhom7wk8]  svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    color: var(--accent);
}

.navbar-wallet-balance[b-dgwhom7wk8] {
    line-height: 1;
    white-space: nowrap;
}

.navbar-profile[b-dgwhom7wk8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: var(--fg-on-accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.2s ease, transform 0.2s ease;
}

.navbar-profile:hover[b-dgwhom7wk8] {
    background: var(--accent-hover);
}

.navbar-profile:active[b-dgwhom7wk8] {
    transform: translateY(0.5px);
}

.navbar-profile:focus-visible[b-dgwhom7wk8] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.navbar-avatar[b-dgwhom7wk8] {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
}

.account-menu[b-dgwhom7wk8] {
    position: fixed;
    left: 12px;
    bottom: 64px;
    z-index: 1100;
    width: 260px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 8px;
    animation: accountMenuIn-b-dgwhom7wk8 0.14s ease;
}

/* Yüzen/ızgara modda profil düğmesi üst şeritte olduğundan menü sağ üstten açılır. */
.account-menu--topright[b-dgwhom7wk8] {
    left: auto;
    right: 12px;
    top: 60px;
    bottom: auto;
    animation: accountMenuInTop-b-dgwhom7wk8 0.14s ease;
}

@keyframes accountMenuIn-b-dgwhom7wk8 {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes accountMenuInTop-b-dgwhom7wk8 {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.account-menu-id[b-dgwhom7wk8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 12px;
}

.account-menu-avatar[b-dgwhom7wk8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #036ac4;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.account-menu-id-text[b-dgwhom7wk8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.account-menu-name[b-dgwhom7wk8] {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-firm[b-dgwhom7wk8] {
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-newstore[b-dgwhom7wk8] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #036ac4;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.account-menu-newstore:hover[b-dgwhom7wk8] {
    border-color: #036ac4;
    background: #eff6ff;
}

.account-menu-newstore:focus-visible[b-dgwhom7wk8] {
    outline: 2px solid #036ac4;
    outline-offset: -2px;
}

.account-menu-newstore .account-menu-item-icon[b-dgwhom7wk8] {
    color: #036ac4;
}

.account-menu-sep[b-dgwhom7wk8] {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}

.account-menu-list[b-dgwhom7wk8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-menu-item[b-dgwhom7wk8] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.account-menu-item:hover[b-dgwhom7wk8] {
    background: #f1f5f9;
    color: #0f172a;
}

.account-menu-item:focus-visible[b-dgwhom7wk8] {
    outline: 2px solid #036ac4;
    outline-offset: -2px;
}

.account-menu-item--danger[b-dgwhom7wk8] {
    color: #dc2626;
}

.account-menu-item--danger:hover[b-dgwhom7wk8] {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
}

.account-menu-item-icon[b-dgwhom7wk8] {
    display: inline-flex;
    flex-shrink: 0;
    color: inherit;
}

.account-menu-item-icon[b-dgwhom7wk8]  svg {
    width: 18px;
    height: 18px;
}

/* ===== Persistent app shell (sidebar rail + main) ===== */
.admin-shell[b-dgwhom7wk8] {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.admin-sidebar[b-dgwhom7wk8] {
    flex-shrink: 0;
    width: 252px;
    height: 100vh;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    transition: width 0.2s ease;
}

.admin-shell.nav-is-collapsed .admin-sidebar[b-dgwhom7wk8] {
    width: 68px;
}

.admin-main[b-dgwhom7wk8] {
    flex: 1 1 0;
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    /* Design-system page surface: sunken slate (#f1f5f9) so white --ds-surface
       cards read against a subtle backdrop instead of blending into white. */
    background: var(--ds-surface-sunken, #f1f5f9);
}

/* Mobile top bar (hidden on desktop) */
.admin-mobile-topbar[b-dgwhom7wk8] {
    display: none;
}

.admin-mobile-brand[b-dgwhom7wk8] {
    font-family: 'Damion', cursive;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
    line-height: 1;
}

.nav-overlay-backdrop[b-dgwhom7wk8] {
    display: none;
}

@keyframes navFadeIn-b-dgwhom7wk8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== Mobile: sidebar becomes an overlay drawer ===== */
@media (max-width: 768px) {
    .admin-mobile-topbar[b-dgwhom7wk8] {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 48px;
        padding: 0 8px;
        background: #036ac4;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 902;
    }

    .admin-mobile-topbar[b-dgwhom7wk8]  fluent-button#nav-hamburger-btn,
    .admin-mobile-topbar[b-dgwhom7wk8]  fluent-button#nav-hamburger-btn::part(control) {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
    }

    .admin-mobile-topbar[b-dgwhom7wk8]  fluent-button#nav-hamburger-btn:hover::part(control) {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .admin-main[b-dgwhom7wk8] {
        padding-top: 48px;
    }

    .admin-sidebar[b-dgwhom7wk8] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px !important;
        z-index: 901;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
    }

    .admin-shell.nav-is-open .admin-sidebar[b-dgwhom7wk8] {
        transform: translateX(0);
    }

    .admin-shell.nav-is-open .nav-overlay-backdrop[b-dgwhom7wk8] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 900;
        animation: navFadeIn-b-dgwhom7wk8 0.25s ease;
    }
}

/* ===== Masaüstü menü görünümleri (Ayarlar → Görünüm → Menü) ===== */
/* Mobilde (<=768px) ray zaten çekmece; bu kurallar yalnız masaüstünü etkiler. */
@media (min-width: 769px) {
    /* Yüzen mod: ray, üst şeritteki menü düğmesiyle açılan soldan çekmece olur. */
    .admin-shell.menu-mode-floating .admin-sidebar[b-dgwhom7wk8] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px !important;
        z-index: 901;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 2px 0 16px rgba(15, 23, 42, 0.18);
    }

    .admin-shell.menu-mode-floating.nav-is-open .admin-sidebar[b-dgwhom7wk8] {
        transform: translateX(0);
    }

    .admin-shell.menu-mode-floating.nav-is-open .nav-overlay-backdrop[b-dgwhom7wk8] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 900;
        animation: navFadeIn-b-dgwhom7wk8 0.25s ease;
    }

    /* Izgara mod: kalıcı ray hiç görünmez — menü, üst şeridin altındaki dokunmatik panel (AppMenuGrid). */
    .admin-shell.menu-mode-grid .admin-sidebar[b-dgwhom7wk8] {
        display: none;
    }
}

/* Garson: ray + mobil üst çubuk hangi menü modunda / genişlikte olursa olsun
   çizilmez. Marka ve profil/çıkış üst şeritte (AppNavBar) yaşar. */
.admin-shell.waiter-shell .admin-sidebar[b-dgwhom7wk8],
.admin-shell.waiter-shell .admin-mobile-topbar[b-dgwhom7wk8],
.admin-shell.waiter-shell .nav-overlay-backdrop[b-dgwhom7wk8] {
    display: none !important;
}

.admin-shell.waiter-shell .admin-main[b-dgwhom7wk8] {
    padding-top: 0;
}

/* Live order notifications — fixed stack, top-right. Rendered outside the @Body scale
   wrapper, so position:fixed resolves against the viewport. Sits just under the toast layer.
   pointer-events: none on the region, auto on the cards (same pattern as .ad-toast-region):
   the region's gaps/padding/scrollbar gutter must never swallow clicks meant for the page
   underneath — at this z-index that reads as "clicked and nothing happened". */
.onc-region[b-dgwhom7wk8] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2147482000;
    width: min(348px, calc(100vw - 40px));
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 4px;
    pointer-events: none;
}

/* ::deep is required: the region's direct children are CHILD COMPONENT roots
   (OrderNotificationCard/SupportReplyCard), which carry their own scope attribute —
   a plain `> *` compiles to `> *[b-mainlayout]` and matches nothing, so the cards
   inherit the region's pointer-events:none and go click-dead. */
.onc-region[b-dgwhom7wk8]  > * {
    pointer-events: auto;
}

@media (max-width: 640px) {
    .onc-region[b-dgwhom7wk8] {
        top: 14px;
        right: 10px;
        left: 10px;
        width: auto;
    }
}
/* /Components/Layout/MenuPreviewLayout.razor.rz.scp.css */
/* Menu Preview Layout Container */
.menu-preview-layout-container[b-jwewh1t0b0] {
    min-height: 100vh;
    background: #f5f5f5;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ===== Design-system sidebar rail ===== */
.nav-menu-container[b-4ddiwouz5n] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    --ds-accent: #036ac4;
}

/* box-sizing isn't global in this app — full-width padded/bordered rows would
   otherwise overflow the rail to the right and get clipped. */
.nav-brand-row[b-4ddiwouz5n],
.nav-footer[b-4ddiwouz5n],
.nav-footer-content[b-4ddiwouz5n],
.nav-wallet-row[b-4ddiwouz5n],
.nav-profile-row[b-4ddiwouz5n],
.nav-profile-main[b-4ddiwouz5n] {
    box-sizing: border-box;
}

/* Brand + collapse toggle */
.nav-brand-row[b-4ddiwouz5n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 10px;
}

.nav-brand-link[b-4ddiwouz5n] {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    align-items: center;
    line-height: 1;
}

.nav-brand-text[b-4ddiwouz5n] {
    font-family: 'Damion', cursive;
    font-size: 28px;
    color: var(--ds-accent);
    white-space: nowrap;
    overflow: hidden;
}

.nav-brand-mark[b-4ddiwouz5n] {
    font-family: 'Damion', cursive;
    font-size: 30px;
    color: var(--ds-accent);
    line-height: 1;
}

/* Collapsed brand doubles as the expand button */
.nav-brand-expand[b-4ddiwouz5n] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease;
}

.nav-brand-expand:hover[b-4ddiwouz5n] {
    background: #f3f4f7;
}

.nav-collapse-btn[b-4ddiwouz5n] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #5b6470;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.nav-collapse-btn:hover[b-4ddiwouz5n] {
    background: #f3f4f7;
    color: #0f172a;
}

/* Premium "Yeni" pill next to a highlighted nav link. Brand-gradient capsule with a
   soft brand glow + inner top sheen; gently pulses to draw the eye. Flips to a white
   pill with brand text when its link is the active (filled blue) item so it stays legible. */
.nav-new-badge[b-4ddiwouz5n] {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: var(--radius-pill, 9999px);
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.6;
    text-transform: uppercase;
    /* The nav forces both .fluent-nav-text colour AND surrounding backgrounds with !important, and
       the badge lives inside it — so BOTH colour and background must be !important here or the label
       rules win (text turns white, background turns white → an empty white pill). Use --ds-accent
       (defined locally on .nav-menu-container, the same token the avatar uses) so it always resolves
       in the admin app, not the skill-only --brand-* tokens. */
    color: #fff !important;
    background: var(--ds-accent, #036ac4) !important;
    box-shadow: 0 1px 6px rgba(3, 106, 196, 0.45);
    vertical-align: middle;
    white-space: nowrap;
    animation: nav-new-glow-b-4ddiwouz5n 2.6s ease-in-out infinite;
}

@keyframes nav-new-glow-b-4ddiwouz5n {
    0%, 100% { box-shadow: 0 1px 6px rgba(3, 106, 196, 0.40); }
    50%      { box-shadow: 0 2px 11px rgba(3, 106, 196, 0.65); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-new-badge[b-4ddiwouz5n] { animation: none; }
}

/* "Yakında" variant — a calmer amber pill (not brand blue) for links that are not live yet.
   Overrides the brand background/glow of .nav-new-badge; no attention-seeking pulse. */
.nav-soon-badge[b-4ddiwouz5n] {
    background: #f59e0b !important; /* --warning-500 */
    box-shadow: 0 1px 5px rgba(245, 158, 11, 0.40);
    animation: none;
}

/* On the active (filled brand-blue) link, swap to a white pill so it reads on blue. */
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-link.active .nav-new-badge,
.nav-menu-container[b-4ddiwouz5n]  a.active .nav-new-badge {
    background: #fff !important;
    color: var(--ds-accent, #036ac4) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.20);
    animation: none;
}

/* Collapsed rail is icon-only — hide the badge with the labels. */
.nav-menu-container.is-collapsed .nav-new-badge[b-4ddiwouz5n] {
    display: none;
}

/* ===== FluentNavMenu look (white rail, slate items, brand-blue active) ===== */
/* Equal horizontal inset on both sides (links were flush at 0px on the left) */
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-menu {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-item .positioning-region {
    border-radius: 10px;
}

/* Collapsible groups (e.g. "Diğer"): trim the nested indent so sub-item labels
   don't truncate. The default FluentNavGroup content padding eats too much width. */
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-group .content,
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-group [part="content"] {
    padding-inline-start: 0 !important;
    margin-inline-start: 0 !important;
}

.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-group .content .positioning-region {
    padding-inline-start: 10px !important;
}

/* Keep nested labels from being clipped */
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-text {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap;
}

.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-item .positioning-region:hover:not(:has(.disabled)) {
    background: #f3f4f7 !important;
}

.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-text {
    color: #5b6470 !important;
    font-weight: 600 !important;
    font-size: 14px;
}

.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-icon,
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-icon svg {
    color: #5b6470 !important;
    fill: #5b6470 !important;
}

/* Active item -> filled brand-blue pill */
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-link.active .positioning-region,
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-item a.active .positioning-region {
    background: var(--ds-accent) !important;
}

.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-link.active .fluent-nav-text,
.nav-menu-container[b-4ddiwouz5n]  a.active .fluent-nav-text {
    color: #fff !important;
}

.nav-menu-container[b-4ddiwouz5n]  a.active .fluent-nav-icon,
.nav-menu-container[b-4ddiwouz5n]  a.active .fluent-nav-icon svg {
    color: #fff !important;
    fill: #fff !important;
}

/* Keep the active pill brand-blue on hover too — otherwise the generic hover
   rule repaints the background light-gray while the text stays white = unreadable. */
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-item .fluent-nav-link.active .positioning-region:hover,
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-item a.active .positioning-region:hover {
    background: var(--ds-accent) !important;
}

/* Drop the default 3px active indicator bar (pill replaces it) */
.nav-menu-container[b-4ddiwouz5n]  .fluent-nav-item .active .positioning-region::before {
    display: none !important;
}

/* ===== Footer ===== */
/* Connection status + debug info — hidden for now (per request) */
.nav-footer[b-4ddiwouz5n] {
    display: none;
}

.nav-footer-content[b-4ddiwouz5n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px;
}

/* Wallet row */
.nav-wallet-row[b-4ddiwouz5n] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 12px;
    padding: 10px 12px;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    background: #fff;
    color: #5b6470;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.nav-wallet-row:hover[b-4ddiwouz5n] {
    background: #f3f4f7;
    border-color: #d6d8df;
}

.nav-wallet-meta[b-4ddiwouz5n] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.nav-wallet-label[b-4ddiwouz5n] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.nav-wallet-balance[b-4ddiwouz5n] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-accent);
}

/* Mobile apps launcher (QR download) */
.nav-apps-row[b-4ddiwouz5n] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 12px 8px;
    padding: 10px 12px;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    background: #fff;
    color: #5b6470;
    cursor: pointer;
    text-align: left;
    width: calc(100% - 24px);
    box-sizing: border-box;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.nav-apps-row:hover[b-4ddiwouz5n] {
    background: #f3f4f7;
    border-color: #d6d8df;
    color: #0f172a;
}

.nav-apps-row[b-4ddiwouz5n]  svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--ds-accent);
    fill: currentColor;
}

.nav-apps-label[b-4ddiwouz5n] {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-menu-container.is-collapsed .nav-apps-row[b-4ddiwouz5n] {
    justify-content: center;
    margin: 0 8px 8px;
    padding: 10px 0;
    width: calc(100% - 16px);
}

.nav-menu-container.is-collapsed .nav-apps-label[b-4ddiwouz5n] {
    display: none;
}

/* Profile row (pinned bottom) */
.nav-profile-row[b-4ddiwouz5n] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 12px 12px;
    padding: 10px;
    border-radius: 14px;
    background: #f3f4f7;
}

.nav-profile-main[b-4ddiwouz5n] {
    flex: 1;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    padding: 4px 6px;
    border-radius: 10px;
    transition: background 0.12s ease;
}

.nav-profile-main:hover[b-4ddiwouz5n] {
    background: #fff;
}

.nav-profile-main:focus-visible[b-4ddiwouz5n] {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
}

.nav-avatar[b-4ddiwouz5n] {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, #0a7bd6, var(--ds-accent));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-profile-meta[b-4ddiwouz5n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.nav-profile-name[b-4ddiwouz5n] {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-profile-role[b-4ddiwouz5n] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-profile-chevron[b-4ddiwouz5n] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8a929e;
    transition: color 0.12s ease;
}

.nav-profile-main:hover .nav-profile-chevron[b-4ddiwouz5n] {
    color: #0f172a;
}

/* ===== Collapsed (icon-only) rail ===== */
.nav-menu-container.is-collapsed .nav-brand-row[b-4ddiwouz5n] {
    justify-content: center;
    padding: 12px 0 8px;
}

/* Hide every text label -> icon-only */
.nav-menu-container.is-collapsed[b-4ddiwouz5n]  .fluent-nav-text {
    display: none !important;
}

.nav-menu-container.is-collapsed[b-4ddiwouz5n]  .expand-collapse-button {
    display: none !important;
}

/* Hide group children (only top-level icons remain) */
.nav-menu-container.is-collapsed[b-4ddiwouz5n]  .fluent-nav-group .fluent-nav-menu .fluent-nav-item {
    display: none !important;
}

/* Center icons in the narrow rail */
.nav-menu-container.is-collapsed[b-4ddiwouz5n]  .fluent-nav-menu {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.nav-menu-container.is-collapsed[b-4ddiwouz5n]  .fluent-nav-item .positioning-region {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.nav-menu-container.is-collapsed .nav-footer-content .nav-conn-text[b-4ddiwouz5n],
.nav-menu-container.is-collapsed .nav-wallet-meta[b-4ddiwouz5n],
.nav-menu-container.is-collapsed .nav-profile-meta[b-4ddiwouz5n] {
    display: none;
}

.nav-menu-container.is-collapsed .nav-footer-content[b-4ddiwouz5n] {
    justify-content: center;
    padding: 4px 0;
}

.nav-menu-container.is-collapsed .nav-wallet-row[b-4ddiwouz5n] {
    justify-content: center;
    margin: 0 8px;
    padding: 10px 0;
}

.nav-menu-container.is-collapsed .nav-profile-row[b-4ddiwouz5n] {
    justify-content: center;
    margin: 8px;
    padding: 6px 0;
}

.nav-menu-container.is-collapsed .nav-profile-main[b-4ddiwouz5n] {
    flex: 0 0 auto;
    justify-content: center;
}

.nav-menu-container.is-collapsed .nav-profile-chevron[b-4ddiwouz5n] {
    display: none;
}
/* /Components/Layout/PaketGLandingLayout.razor.rz.scp.css */
/* PaketG Landing Layout Container */
.paketg-landing-container[b-54ac8q8zfq] {
    --paketg-primary: #000000;
    --paketg-accent: #8CFA1F;
    min-height: 100vh;
    background: white;
}

/* Header Styles */
.header[b-54ac8q8zfq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--paketg-primary);
    z-index: 1000;
}

.header-content[b-54ac8q8zfq] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo-link[b-54ac8q8zfq] {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo-image[b-54ac8q8zfq] {
    width: 250px;
    max-height: 40px;
    object-fit: cover;
    margin-left: -3.5rem;
    background-color: transparent;
    border-radius: 8px;
}

.header-actions[b-54ac8q8zfq] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-courier[b-54ac8q8zfq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.btn-courier:hover[b-54ac8q8zfq] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.btn-contact[b-54ac8q8zfq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
}

.btn-contact:hover[b-54ac8q8zfq] {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.btn-login[b-54ac8q8zfq] {
    padding: 0.75rem 1.5rem;
    background: white;
    color: var(--paketg-primary);
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-login:hover[b-54ac8q8zfq] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Body Content */
.paketg-body-content[b-54ac8q8zfq] {
    padding-top: 80px;
    min-height: 100vh;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle[b-54ac8q8zfq] {
    display: none;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    margin-right: 0.5rem;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover[b-54ac8q8zfq] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* Mobile Sidebar Overlay */
.mobile-sidebar-overlay[b-54ac8q8zfq] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.open[b-54ac8q8zfq] {
    display: block;
    opacity: 1;
}

/* Mobile Sidebar */
.mobile-sidebar[b-54ac8q8zfq] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: white;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

.mobile-sidebar.open[b-54ac8q8zfq] {
    transform: translateX(0);
}

.mobile-sidebar-header[b-54ac8q8zfq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f7fafc;
}

.mobile-sidebar-title[b-54ac8q8zfq] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
}

.mobile-sidebar-close[b-54ac8q8zfq] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.mobile-sidebar-close:hover[b-54ac8q8zfq] {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-sidebar-content[b-54ac8q8zfq] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.mobile-menu-section[b-54ac8q8zfq] {
    margin-bottom: 1.5rem;
}

/* Mobile Menu Link */
.mobile-menu-link[b-54ac8q8zfq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: #1a202c;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-menu-link:hover[b-54ac8q8zfq] {
    background: rgba(0, 0, 0, 0.05);
}

/* Mobile Courier CTA Button */
.mobile-courier-cta-btn[b-54ac8q8zfq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--paketg-primary) 0%, #1a1a1a 100%);
    border-radius: 12px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.mobile-courier-cta-btn:hover[b-54ac8q8zfq] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.mobile-courier-icon[b-54ac8q8zfq] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-courier-text[b-54ac8q8zfq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-courier-text strong[b-54ac8q8zfq] {
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.mobile-menu-actions[b-54ac8q8zfq] {
    margin-top: auto;
    padding: 1rem 0;
    border-top: 1px solid #e2e8f0;
}

.mobile-btn-primary[b-54ac8q8zfq] {
    display: block;
    text-align: center;
    padding: 0.875rem 1rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: var(--paketg-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mobile-btn-primary:hover[b-54ac8q8zfq] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo-image[b-54ac8q8zfq] {
        height: 36px;
    }

    .header-content[b-54ac8q8zfq] {
        padding: 1rem 0.75rem;
    }

    /* Show mobile menu toggle button */
    .mobile-menu-toggle[b-54ac8q8zfq] {
        display: flex;
    }

    /* Hide courier and contact buttons completely on mobile */
    .btn-courier[b-54ac8q8zfq],
    .btn-contact[b-54ac8q8zfq] {
        display: none;
    }

    .header-actions[b-54ac8q8zfq] {
        gap: 0.5rem;
    }

    .btn-login[b-54ac8q8zfq] {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .paketg-body-content[b-54ac8q8zfq] {
        padding-top: 70px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Reconnect Modal Container */
.reconnect-modal[b-4sg4fjkvou] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

/* Show states - connecting */
.reconnect-modal.components-reconnect-show[b-4sg4fjkvou],
.reconnect-modal.components-reconnect-retrying[b-4sg4fjkvou],
.reconnect-modal.components-reconnect-paused[b-4sg4fjkvou] {
    display: flex;
}

/* Show states - failed */
.reconnect-modal.components-reconnect-resume-failed[b-4sg4fjkvou] {
    display: flex;
}

/* Content box */
.reconnect-content[b-4sg4fjkvou] {
    background: transparent;
    padding: 32px 48px;
    text-align: center;
}

/* Failed state - add background */
.components-reconnect-resume-failed .reconnect-content[b-4sg4fjkvou] {
    background: var(--neutral-layer-1, #ffffff);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Icon container with heartbeat */
.reconnect-icon[b-4sg4fjkvou] {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    animation: heartbeat-b-4sg4fjkvou 1.2s ease-in-out infinite;
}

.reconnect-icon img[b-4sg4fjkvou] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* Heartbeat animation */
@keyframes heartbeat-b-4sg4fjkvou {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.15);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(1);
    }
}

/* Message styles - all hidden by default */
.reconnect-message[b-4sg4fjkvou] {
    display: none;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    font-size: 16px;
    color: #ffffff;
}

/* Connecting message - Damion font */
.reconnect-message-connecting[b-4sg4fjkvou] {
    font-family: 'Damion', cursive;
    font-size: 32px;
    color: #ffffff;
    white-space: nowrap;
}

/* Failed message - normal font, dark text for white background */
.components-reconnect-resume-failed .reconnect-message-failed[b-4sg4fjkvou] {
    color: var(--neutral-foreground-rest, #1a1a1a);
}

/* Show connecting message for show/retrying/paused states */
.components-reconnect-show .reconnect-message-connecting[b-4sg4fjkvou],
.components-reconnect-retrying .reconnect-message-connecting[b-4sg4fjkvou],
.components-reconnect-paused .reconnect-message-connecting[b-4sg4fjkvou] {
    display: flex;
}

/* Show failed message for resume-failed state */
.components-reconnect-resume-failed .reconnect-message-failed[b-4sg4fjkvou] {
    display: flex;
}

/* Failed state - stop animation */
.components-reconnect-resume-failed .reconnect-icon[b-4sg4fjkvou] {
    animation: none;
    opacity: 0.5;
}

/* Subtext styles */
.reconnect-subtext[b-4sg4fjkvou] {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

/* Button styles */
.reconnect-message button[b-4sg4fjkvou] {
    background: var(--app-primary-color, var(--accent-fill-rest, #0066cc));
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.reconnect-message button:hover[b-4sg4fjkvou] {
    background: var(--accent-fill-hover, #0055aa);
}

.reconnect-message button:active[b-4sg4fjkvou] {
    background: var(--accent-fill-active, #004499);
}
/* /Components/Pages/AdminDashboard/AdminDashboard.razor.rz.scp.css */
.ad-dash[b-m7cs77to6x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--bg-subtle);
    min-height: 100%;
}

/* ---------- Header ---------- */
.ad-head[b-m7cs77to6x] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.ad-head-text[b-m7cs77to6x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ad-eyebrow[b-m7cs77to6x] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent);
}

.ad-title[b-m7cs77to6x] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin: 0;
    line-height: 1.15;
}

.ad-subtitle[b-m7cs77to6x] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    color: var(--fg-hint);
    margin: 0;
}

.ad-refresh[b-m7cs77to6x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast, 150ms) ease, color var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease;
}

.ad-refresh:hover[b-m7cs77to6x] {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.ad-refresh:focus-visible[b-m7cs77to6x] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ad-refresh[b-m7cs77to6x]  svg { width: 17px; height: 17px; }

.ad-refresh--icon[b-m7cs77to6x] {
    padding: var(--space-2);
}

.ad-refresh--icon[b-m7cs77to6x]  svg { width: 19px; height: 19px; }

.ad-refresh.is-active[b-m7cs77to6x] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.ad-head-actions[b-m7cs77to6x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ad-oplink[b-m7cs77to6x] {
    text-decoration: none;
}

/* ---------- Panel visibility menu (göz) ---------- */
.ad-panel-menu[b-m7cs77to6x] {
    position: relative;
    display: inline-flex;
}

.ad-panel-menu__backdrop[b-m7cs77to6x] {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.ad-panel-menu__pop[b-m7cs77to6x] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 264px;
    max-width: calc(100vw - var(--space-6) * 2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.14));
}

.ad-panel-menu__title[b-m7cs77to6x] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    color: var(--fg-hint);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    padding: 2px 6px 4px;
}

.ad-panel-menu__list[b-m7cs77to6x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.ad-panel-menu__item[b-m7cs77to6x] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur-fast, 120ms) ease, color var(--dur-fast, 120ms) ease;
}

.ad-panel-menu__item:hover[b-m7cs77to6x] {
    background: var(--bg-subtle);
}

.ad-panel-menu__item:focus-visible[b-m7cs77to6x] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ad-panel-menu__item.is-on[b-m7cs77to6x] {
    background: var(--accent-soft);
    color: var(--accent);
}

.ad-panel-menu__item[b-m7cs77to6x]  svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.ad-panel-menu__item span[b-m7cs77to6x] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ad-panel-menu__hint[b-m7cs77to6x] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    line-height: 1.4;
    color: var(--fg-hint);
    padding: 6px 6px 2px;
}

/* ---------- Empty state (every panel hidden) ---------- */
.ad-panel-empty[b-m7cs77to6x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 40px 20px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-card);
    background: var(--layer-1);
}

.ad-panel-empty__icon[b-m7cs77to6x]  svg {
    width: 32px;
    height: 32px;
    color: var(--fg-hint);
}

.ad-panel-empty__title[b-m7cs77to6x] {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg-1);
}

.ad-panel-empty__desc[b-m7cs77to6x] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    color: var(--fg-hint);
    max-width: 420px;
}

/* ---------- Rows ----------
   auto-fit + minmax(min(100%, …), 1fr) lets cards wrap instead of overflowing:
   the track floor is the smaller of 100% (so a card is never wider than its row on
   phones) and the design min-width, so a 2/3-up row degrades to fewer columns as the
   viewport shrinks — no horizontal scroll at any width. */
.ad-row[b-m7cs77to6x] {
    display: grid;
    gap: var(--space-5);
    align-items: stretch;
}

.ad-row--2[b-m7cs77to6x] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ad-row--3[b-m7cs77to6x] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ad-row--full[b-m7cs77to6x] { grid-template-columns: 1fr; }

/* Grid children may hold wide content (tables, bars); allow them to shrink below
   min-content so nothing pushes past the row edge. */
.ad-row[b-m7cs77to6x]  .dc { min-width: 0; }

@media (max-width: 640px) {
    .ad-dash[b-m7cs77to6x] {
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .ad-row[b-m7cs77to6x] { gap: var(--space-4); }

    .ad-head-actions .ad-refresh span[b-m7cs77to6x] { display: none; }
    .ad-head-actions .ad-refresh[b-m7cs77to6x] { padding: var(--space-2); }
    .ad-head-actions .ad-refresh[b-m7cs77to6x]  svg { width: 19px; height: 19px; }
}
/* /Components/Pages/AdminDashboard/Cards/ActiveUsersCard.razor.rz.scp.css */
.au-all[b-39sfgku9h2] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
}

.au-all:hover[b-39sfgku9h2] { background: var(--brand-100); }

.au-feed[b-39sfgku9h2] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

.au-row[b-39sfgku9h2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.au-row:last-child[b-39sfgku9h2] { border-bottom: none; }

.au-avatar[b-39sfgku9h2] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
}

.au-main[b-39sfgku9h2] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.au-name[b-39sfgku9h2] {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.au-sub[b-39sfgku9h2] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    overflow: hidden;
    white-space: nowrap;
}

.au-sub a[b-39sfgku9h2] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.au-dot[b-39sfgku9h2] { opacity: 0.6; }

.au-time[b-39sfgku9h2] {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Components/Pages/AdminDashboard/Cards/DashboardCard.razor.rz.scp.css */
.dc[b-j5jl10l6ap] {
    display: flex;
    flex-direction: column;
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
    /* NOTE: intentionally NOT clipping here. A header action (e.g. DateRangePicker's
       FluentPopover) is a DOM descendant of the card, so `overflow:hidden` on `.dc`
       would crop the popover at the card edge. Corner-clipping is delegated to
       `.dc-body` instead, which is the only part with flush, edge-touching content. */
    overflow: visible;
    height: 100%;
    transition: border-color var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease;
}

.dc:hover[b-j5jl10l6ap] {
    box-shadow: var(--shadow-sm);
}

.dc-head[b-j5jl10l6ap] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.dc-head-left[b-j5jl10l6ap] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.dc-ico[b-j5jl10l6ap] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dc-ico[b-j5jl10l6ap]  svg {
    width: 18px;
    height: 18px;
}

.dc-titles[b-j5jl10l6ap] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dc-title-row[b-j5jl10l6ap] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.dc-title[b-j5jl10l6ap] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-sub[b-j5jl10l6ap] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Live pulse badge */
.dc-live[b-j5jl10l6ap] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--success-50);
    color: var(--success-600);
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    flex-shrink: 0;
}

.dc-live-dot[b-j5jl10l6ap] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-500);
    animation: dc-pulse-b-j5jl10l6ap 1.6s ease-in-out infinite;
}

@keyframes dc-pulse-b-j5jl10l6ap {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

.dc-head-right[b-j5jl10l6ap] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dc-body[b-j5jl10l6ap] {
    flex: 1;
    min-height: 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
    /* Clip flush/edge-touching content to the card's rounded bottom corners. Lives here
       (not on `.dc`) so header popovers can overflow the card — see note on `.dc` above. */
    overflow: hidden;
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
}

.dc-body--flush[b-j5jl10l6ap] {
    padding: 0;
}
/* /Components/Pages/AdminDashboard/Cards/InsightKpiCard.razor.rz.scp.css */
.kpi[b-7pl9x045b8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-3) var(--space-4);
    height: 100%;
    transition: border-color var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease, transform var(--dur-fast, 150ms) ease;
}

.kpi:hover[b-7pl9x045b8] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.kpi-top[b-7pl9x045b8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.kpi-ico[b-7pl9x045b8] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kpi-ico[b-7pl9x045b8]  svg {
    width: 16px;
    height: 16px;
}

.kpi-ico.tone-accent[b-7pl9x045b8]  { background: var(--accent-soft); color: var(--accent); }
.kpi-ico.tone-success[b-7pl9x045b8] { background: var(--success-50); color: var(--success-600); }
.kpi-ico.tone-warning[b-7pl9x045b8] { background: color-mix(in srgb, var(--warning-600) 12%, transparent); color: var(--warning-600); }
.kpi-ico.tone-danger[b-7pl9x045b8]  { background: var(--danger-50); color: var(--danger-600); }

.kpi-delta[b-7pl9x045b8] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kpi-delta-arrow[b-7pl9x045b8] { font-size: 0.7em; line-height: 1; }

.kpi-delta.is-up[b-7pl9x045b8]   { background: var(--success-50); color: var(--success-600); }
.kpi-delta.is-down[b-7pl9x045b8] { background: var(--danger-50); color: var(--danger-600); }
.kpi-delta.is-flat[b-7pl9x045b8] { background: var(--bg-subtle); color: var(--fg-hint); }

.kpi-value[b-7pl9x045b8] {
    font-family: var(--font-ui);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--fg-1);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    min-height: 1.5rem;
}

.kpi-label[b-7pl9x045b8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--fg-3);
    line-height: 1.3;
}

.kpi-label-text[b-7pl9x045b8] { min-width: 0; }

/* Info icon + hover/focus popover explaining the metric */
.kpi-info[b-7pl9x045b8] {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--fg-disabled);
    cursor: help;
    outline: none;
}

.kpi-info[b-7pl9x045b8]  svg { width: 14px; height: 14px; fill: currentColor; }
.kpi-info:hover[b-7pl9x045b8], .kpi-info:focus-visible[b-7pl9x045b8] { color: var(--accent); }

.kpi-pop[b-7pl9x045b8] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: var(--space-2) var(--space-3);
    background: var(--fg-1);
    color: var(--bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--xs-size);
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast, 150ms) ease;
    z-index: var(--z-toolbar, 100);
    pointer-events: none;
}

.kpi-pop[b-7pl9x045b8]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--fg-1);
}

.kpi-info:hover .kpi-pop[b-7pl9x045b8],
.kpi-info:focus-visible .kpi-pop[b-7pl9x045b8] {
    opacity: 1;
    visibility: visible;
}

.kpi-foot[b-7pl9x045b8] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    margin-top: auto;
    min-height: 1rem;
}

.kpi-foot.is-warn[b-7pl9x045b8] {
    color: var(--warning-600);
    font-weight: 700;
}

/* Loading skeleton */
.kpi-skel[b-7pl9x045b8] {
    display: inline-block;
    width: 64px;
    height: 1.4rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-muted) 50%, var(--bg-subtle) 75%);
    background-size: 200% 100%;
    animation: kpi-shimmer-b-7pl9x045b8 1.2s ease-in-out infinite;
}

@keyframes kpi-shimmer-b-7pl9x045b8 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Components/Pages/AdminDashboard/Cards/InsightMetricsCard.razor.rz.scp.css */
.insight-grid[b-xfhmbh1hlh] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-2);
}

/* Six tiles on one row means every tile is narrow — tighten the padding, scale the value
   with the viewport and let long labels/footnotes wrap instead of pushing the row wider. */
.insight-grid[b-xfhmbh1hlh]  .kpi {
    padding: var(--space-2) var(--space-3);
    min-width: 0;
}

.insight-grid[b-xfhmbh1hlh]  .kpi-value {
    font-size: clamp(1rem, 1.05vw + 0.4rem, 1.35rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.insight-grid[b-xfhmbh1hlh]  .kpi-label,
.insight-grid[b-xfhmbh1hlh]  .kpi-foot {
    overflow-wrap: anywhere;
}

@media (max-width: 1440px) {
    .insight-grid[b-xfhmbh1hlh] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .insight-grid[b-xfhmbh1hlh]  .kpi { padding: var(--space-3) var(--space-4); }
}

@media (max-width: 760px) {
    .insight-grid[b-xfhmbh1hlh] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
    .insight-grid[b-xfhmbh1hlh] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/AdminDashboard/Cards/LiveOrdersCard.razor.rz.scp.css */
.lo-all[b-e6gd0tmdt5] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    transition: background var(--dur-fast, 150ms) ease;
}

.lo-all:hover[b-e6gd0tmdt5] { background: var(--brand-100); }

.lo-feed[b-e6gd0tmdt5] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
}

.lo-row[b-e6gd0tmdt5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--dur-fast, 150ms) ease;
}

.lo-row:last-child[b-e6gd0tmdt5] { border-bottom: none; }
.lo-row:hover[b-e6gd0tmdt5] { background: var(--bg-muted); }

/* New-row highlight that fades out over a few seconds */
.lo-row.is-new[b-e6gd0tmdt5] {
    animation: lo-flash-b-e6gd0tmdt5 4s ease-out;
}

@keyframes lo-flash-b-e6gd0tmdt5 {
    0% { background: var(--accent-soft); }
    100% { background: transparent; }
}

.lo-avatar[b-e6gd0tmdt5] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--fg-on-brand);
}

.lo-avatar img[b-e6gd0tmdt5] { width: 100%; height: 100%; object-fit: contain; background: var(--layer-1); }
.lo-avatar[b-e6gd0tmdt5]  svg { width: 16px; height: 16px; fill: var(--fg-on-brand) !important; }
.lo-avatar[b-e6gd0tmdt5]  svg path { fill: var(--fg-on-brand) !important; }

.lo-avatar.tone-dinein[b-e6gd0tmdt5]   { background: var(--brand-600); }
.lo-avatar.tone-takeaway[b-e6gd0tmdt5] { background: var(--courier-600, #7c3aed); }
.lo-avatar.tone-delivery[b-e6gd0tmdt5] { background: var(--success-600); }
.lo-avatar.tone-other[b-e6gd0tmdt5]    { background: var(--slate-500, #64748b); }

.lo-main[b-e6gd0tmdt5] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lo-store-line[b-e6gd0tmdt5] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

.lo-store[b-e6gd0tmdt5] {
    display: inline-block;
    vertical-align: bottom;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
}

.lo-firm[b-e6gd0tmdt5] {
    display: inline-block;
    vertical-align: bottom;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 42%;
}

.lo-meta[b-e6gd0tmdt5] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
}

.lo-channel[b-e6gd0tmdt5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.lo-time[b-e6gd0tmdt5] { font-variant-numeric: tabular-nums; white-space: nowrap; }

.lo-right[b-e6gd0tmdt5] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.lo-amount[b-e6gd0tmdt5] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Components/Pages/AdminDashboard/Cards/LiveTicketsCard.razor.rz.scp.css */
.lt-all[b-pnfioowjuf] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    transition: background var(--dur-fast, 150ms) ease;
}

.lt-all:hover[b-pnfioowjuf] { background: var(--brand-100); }

.lt-feed[b-pnfioowjuf] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
}

.lt-row[b-pnfioowjuf] { border-bottom: 1px solid var(--border-subtle); }
.lt-row:last-child[b-pnfioowjuf] { border-bottom: none; }
.lt-row.is-new[b-pnfioowjuf] { animation: lt-flash-b-pnfioowjuf 4s ease-out; }

@keyframes lt-flash-b-pnfioowjuf {
    0% { background: var(--accent-soft); }
    100% { background: transparent; }
}

.lt-link[b-pnfioowjuf] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-fast, 150ms) ease;
}

.lt-link:hover[b-pnfioowjuf] { background: var(--bg-muted); }
.lt-link:focus-visible[b-pnfioowjuf] { outline: 2px solid var(--accent); outline-offset: -2px; }

.lt-prio[b-pnfioowjuf] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 2px;
}

.lt-prio.prio-critical[b-pnfioowjuf] { background: var(--danger-500); box-shadow: 0 0 0 3px var(--danger-50); }
.lt-prio.prio-high[b-pnfioowjuf]     { background: var(--warning-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning-600) 14%, transparent); }
.lt-prio.prio-normal[b-pnfioowjuf]   { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lt-prio.prio-low[b-pnfioowjuf]      { background: var(--border-strong); }

.lt-main[b-pnfioowjuf] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lt-subject[b-pnfioowjuf] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Unread ticket: bolder subject + accent dot */
.lt-row.is-unread .lt-subject[b-pnfioowjuf] { font-weight: 800; }

.lt-unread-dot[b-pnfioowjuf] {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: middle;
}

.lt-meta[b-pnfioowjuf] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    min-width: 0;
}

.lt-code[b-pnfioowjuf] { font-variant-numeric: tabular-nums; }

.lt-firm[b-pnfioowjuf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.lt-time[b-pnfioowjuf] { font-variant-numeric: tabular-nums; white-space: nowrap; }

.lt-right[b-pnfioowjuf] { flex-shrink: 0; }
/* /Components/Pages/AdminDashboard/Cards/NewFirmsCard.razor.rz.scp.css */
.nf-all[b-agx989byu0] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
}

.nf-all:hover[b-agx989byu0] { background: var(--brand-100); }

.nf-feed[b-agx989byu0] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

.nf-row[b-agx989byu0] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--dur-fast, 150ms) ease;
}

.nf-row:last-child[b-agx989byu0] { border-bottom: none; }
.nf-row:hover[b-agx989byu0] { background: var(--bg-muted); }

.nf-avatar[b-agx989byu0] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    text-transform: uppercase;
}

.nf-main[b-agx989byu0] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.nf-name[b-agx989byu0] {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.nf-sub[b-agx989byu0] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    min-width: 0;
}

.nf-person[b-agx989byu0] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.nf-time[b-agx989byu0] { font-variant-numeric: tabular-nums; white-space: nowrap; }

.nf-contact[b-agx989byu0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin-top: 2px;
    min-width: 0;
}

.nf-link[b-agx989byu0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-2);
    text-decoration: none;
}

.nf-link:hover[b-agx989byu0] { color: var(--accent); text-decoration: underline; }
.nf-link span[b-agx989byu0] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-link[b-agx989byu0]  svg { width: 14px; height: 14px; flex-shrink: 0; }

.nf-right[b-agx989byu0] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.nf-type[b-agx989byu0] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    white-space: nowrap;
}
/* /Components/Pages/AdminDashboard/Cards/OrderDistributionCard.razor.rz.scp.css */
.od-summary[b-cncqjm28jg] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: var(--space-3);
}

.od-total[b-cncqjm28jg] {
    font-family: var(--font-ui);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--fg-1);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.od-total-cap[b-cncqjm28jg] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
}

.od-bar[b-cncqjm28jg] {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--bg-subtle);
    margin-bottom: var(--space-4);
}

.od-bar-seg[b-cncqjm28jg] {
    height: 100%;
    min-width: 2px;
    transition: width var(--dur-base, 250ms) ease;
}

.od-bar-seg + .od-bar-seg[b-cncqjm28jg] {
    box-shadow: inset 1px 0 0 var(--layer-1);
}

.od-legend[b-cncqjm28jg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.od-leg-row[b-cncqjm28jg] {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--small-size);
}

.od-leg-dot[b-cncqjm28jg] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.od-leg-label[b-cncqjm28jg] {
    color: var(--fg-2);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-leg-count[b-cncqjm28jg] {
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

.od-leg-pct[b-cncqjm28jg] {
    color: var(--fg-hint);
    font-size: var(--xs-size);
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    text-align: right;
}
/* /Components/Pages/AdminDashboard/Cards/PendingFirmsCard.razor.rz.scp.css */
.pf-all[b-0xqrs9zwah] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
}

.pf-all:hover[b-0xqrs9zwah] { background: var(--brand-100); }

.pf-feed[b-0xqrs9zwah] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

.pf-row[b-0xqrs9zwah] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--dur-fast, 150ms) ease;
}

.pf-row:last-child[b-0xqrs9zwah] { border-bottom: none; }
.pf-row:hover[b-0xqrs9zwah] { background: var(--bg-muted); }

.pf-main[b-0xqrs9zwah] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.pf-name[b-0xqrs9zwah] {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.pf-meta[b-0xqrs9zwah] { display: flex; align-items: center; gap: var(--space-2); }

.pf-time[b-0xqrs9zwah] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

.pf-actions[b-0xqrs9zwah] { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }

.pf-btn[b-0xqrs9zwah] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-3);
    cursor: pointer;
    transition: background var(--dur-fast, 150ms) ease, border-color var(--dur-fast, 150ms) ease, color var(--dur-fast, 150ms) ease;
}

.pf-btn[b-0xqrs9zwah]  svg { width: 15px; height: 15px; fill: currentColor; }
.pf-btn:disabled[b-0xqrs9zwah] { opacity: 0.5; cursor: not-allowed; }
.pf-btn:focus-visible[b-0xqrs9zwah] { outline: 2px solid var(--accent); outline-offset: 1px; }

.pf-approve[b-0xqrs9zwah] { color: var(--success-600); }
.pf-approve:hover:not(:disabled)[b-0xqrs9zwah] { background: var(--success-50); border-color: var(--success-500); }

.pf-reject[b-0xqrs9zwah] { color: var(--danger-600); }
.pf-reject:hover:not(:disabled)[b-0xqrs9zwah] { background: var(--danger-50); border-color: var(--danger-500); }

.pf-view:hover[b-0xqrs9zwah] { background: var(--bg-subtle); color: var(--fg-1); }
/* /Components/Pages/AdminDashboard/Cards/SystemSummaryCard.razor.rz.scp.css */
.ss-grid[b-5urjoh4lxr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.ss-stat[b-5urjoh4lxr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.ss-val[b-5urjoh4lxr] {
    font-family: var(--font-ui);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--fg-1);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ss-val-warn[b-5urjoh4lxr] { color: var(--warning-600); }

.ss-lbl[b-5urjoh4lxr] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--fg-3);
}

.ss-foot[b-5urjoh4lxr] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

.ss-foot-pos[b-5urjoh4lxr] { color: var(--success-600); }

@media (max-width: 900px) {
    .ss-grid[b-5urjoh4lxr] { grid-template-columns: repeat(2, 1fr); }
    .ss-stat-wide[b-5urjoh4lxr] { grid-column: span 2; }
}

@media (max-width: 460px) {
    .ss-grid[b-5urjoh4lxr] { grid-template-columns: 1fr; }
    .ss-stat-wide[b-5urjoh4lxr] { grid-column: span 1; }
}
/* /Components/Pages/AdminDashboard/Cards/TopStoresCard.razor.rz.scp.css */
.ts-feed[b-i0wcg2exs0] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 380px;
    overflow-y: auto;
}

.ts-row[b-i0wcg2exs0] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.ts-row:last-child[b-i0wcg2exs0] { border-bottom: none; }

.ts-rank[b-i0wcg2exs0] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--bg-subtle);
    color: var(--fg-3);
}

.ts-rank.rank-1[b-i0wcg2exs0] { background: color-mix(in srgb, var(--warning-500) 18%, transparent); color: var(--warning-600); }
.ts-rank.rank-3[b-i0wcg2exs0] { background: color-mix(in srgb, var(--warning-600) 12%, transparent); color: var(--warning-600); }

.ts-main[b-i0wcg2exs0] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.ts-line[b-i0wcg2exs0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.ts-name[b-i0wcg2exs0] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ts-revenue[b-i0wcg2exs0] {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

.ts-track[b-i0wcg2exs0] {
    width: 100%;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.ts-fill[b-i0wcg2exs0] {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
    transition: width var(--dur-base, 250ms) ease;
}

.ts-sub[b-i0wcg2exs0] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    min-width: 0;
}

.ts-firm[b-i0wcg2exs0] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.ts-dot[b-i0wcg2exs0] { opacity: 0.6; }
.ts-orders[b-i0wcg2exs0] { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* /Components/Pages/AdminDashboard/Cards/TopTokenActionsCard.razor.rz.scp.css */
.tk-feed[b-10g3at8scl] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 380px;
    overflow-y: auto;
}

.tk-row[b-10g3at8scl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.tk-row:last-child[b-10g3at8scl] { border-bottom: none; }

.tk-line[b-10g3at8scl] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.tk-name[b-10g3at8scl] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tk-amount[b-10g3at8scl] {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

.tk-track[b-10g3at8scl] {
    width: 100%;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.tk-fill[b-10g3at8scl] {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, color-mix(in srgb, var(--courier-600, #7c3aed) 70%, var(--brand-600)), var(--courier-600, #7c3aed));
    transition: width var(--dur-base, 250ms) ease;
}

.tk-sub[b-10g3at8scl] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/AdminDashboard/Cards/TopTokenFirmsCard.razor.rz.scp.css */
.tf-feed[b-cbihajhlkv] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

.tf-row[b-cbihajhlkv] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.tf-row:last-child[b-cbihajhlkv] { border-bottom: none; }

.tf-rank[b-cbihajhlkv] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--bg-subtle);
    color: var(--fg-3);
}

.tf-rank.rank-1[b-cbihajhlkv] { background: color-mix(in srgb, var(--courier-600, #7c3aed) 16%, transparent); color: var(--courier-600, #7c3aed); }
.tf-rank.rank-2[b-cbihajhlkv] { background: var(--bg-subtle); color: var(--fg-2); }
.tf-rank.rank-3[b-cbihajhlkv] { background: color-mix(in srgb, var(--courier-600, #7c3aed) 10%, transparent); color: var(--courier-600, #7c3aed); }

.tf-main[b-cbihajhlkv] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.tf-line[b-cbihajhlkv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.tf-name[b-cbihajhlkv] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tf-amount[b-cbihajhlkv] {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

.tf-track[b-cbihajhlkv] {
    width: 100%;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.tf-fill[b-cbihajhlkv] {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, color-mix(in srgb, var(--courier-600, #7c3aed) 70%, var(--brand-600)), var(--courier-600, #7c3aed));
    transition: width var(--dur-base, 250ms) ease;
}

.tf-sub[b-cbihajhlkv] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/AdminDashboard/Cards/TopViewedMenusCard.razor.rz.scp.css */
.vm-feed[b-sqbl1e5hdj] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

.vm-row[b-sqbl1e5hdj] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.vm-row:last-child[b-sqbl1e5hdj] { border-bottom: none; }

.vm-rank[b-sqbl1e5hdj] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--bg-subtle);
    color: var(--fg-3);
}

.vm-rank.rank-1[b-sqbl1e5hdj] { background: var(--accent-soft); color: var(--accent); }
.vm-rank.rank-3[b-sqbl1e5hdj] { background: var(--accent-soft); color: var(--accent); }

.vm-main[b-sqbl1e5hdj] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.vm-line[b-sqbl1e5hdj] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.vm-name[b-sqbl1e5hdj] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.vm-views[b-sqbl1e5hdj] {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

.vm-track[b-sqbl1e5hdj] {
    width: 100%;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.vm-fill[b-sqbl1e5hdj] {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
    transition: width var(--dur-base, 250ms) ease;
}

.vm-sub[b-sqbl1e5hdj] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    min-width: 0;
}

.vm-store[b-sqbl1e5hdj], .vm-firm[b-sqbl1e5hdj] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.vm-dot[b-sqbl1e5hdj] { opacity: 0.6; }
/* /Components/Pages/Admin/MaterialCleanupModal.razor.rz.scp.css */
.mc-body[b-l15k71oa53] { display: flex; flex-direction: column; gap: 16px; }

.mc-setup[b-l15k71oa53] { display: flex; flex-direction: column; gap: 14px; }

.mc-radio[b-l15k71oa53] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--ds-text);
    cursor: pointer;
    padding: 4px 0;
}

.mc-note[b-l15k71oa53] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-muted);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-sm);
    padding: 8px 10px;
}

.mc-note svg[b-l15k71oa53] { flex-shrink: 0; margin-top: 1px; }

.mc-empty[b-l15k71oa53] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--ds-text-muted);
    font-size: 0.875rem;
}

.mc-empty svg[b-l15k71oa53] { color: var(--ds-success, var(--brand-600)); }

.mc-preview-bar[b-l15k71oa53] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.mc-groups[b-l15k71oa53] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

.mc-group[b-l15k71oa53] {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    overflow: hidden;
    transition: opacity var(--ds-dur-fast) var(--ds-ease);
}

.mc-group.is-excluded[b-l15k71oa53] { opacity: 0.45; }

.mc-group-head[b-l15k71oa53] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    background: var(--ds-surface-alt);
}

.mc-vh[b-l15k71oa53] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.mc-group-name[b-l15k71oa53] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.mc-group-meta[b-l15k71oa53] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-group-count[b-l15k71oa53] {
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
}

.mc-members[b-l15k71oa53] {
    display: flex;
    flex-direction: column;
}

.mc-member[b-l15k71oa53] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 16px;
    border-top: 1px solid var(--ds-border);
    font-size: 0.8125rem;
    cursor: pointer;
}

.mc-member-name[b-l15k71oa53] { color: var(--ds-text); font-weight: 500; }
.mc-member-cat[b-l15k71oa53] { color: var(--ds-text-subtle); font-size: 0.6875rem; }
.mc-member-refs[b-l15k71oa53] { margin-left: auto; color: var(--ds-text-muted); font-size: 0.75rem; }

.mc-member-verdict[b-l15k71oa53] {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--ds-border);
}

.mc-member.is-keep .mc-member-verdict[b-l15k71oa53] {
    background: color-mix(in srgb, var(--brand-600) 14%, transparent);
    color: var(--brand-700);
    border-color: color-mix(in srgb, var(--brand-600) 30%, transparent);
}

.mc-member.is-drop .mc-member-verdict[b-l15k71oa53] {
    background: color-mix(in srgb, #d33 12%, transparent);
    color: #c0392b;
    border-color: color-mix(in srgb, #d33 28%, transparent);
}

.mc-member.is-drop .mc-member-name[b-l15k71oa53] { color: var(--ds-text-muted); text-decoration: line-through; }
/* /Components/Pages/Admin/MenuBulkFillModal.razor.rz.scp.css */
.mbf[b-9955gi09zp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mbf-setup[b-9955gi09zp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mbf-hint[b-9955gi09zp] {
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
}

.mbf-subhead[b-9955gi09zp] {
    margin: 0 0 4px;
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted);
}

/* ===== Type selection ===== */
.mbf-types[b-9955gi09zp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.mbf-type[b-9955gi09zp] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    text-align: left;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}

.mbf-type:hover[b-9955gi09zp] { border-color: var(--ds-border-strong); }

.mbf-type.is-on[b-9955gi09zp] {
    border-color: var(--brand-600);
    background: var(--ds-surface-alt);
}

.mbf-type:focus-visible[b-9955gi09zp] {
    outline: 2px solid var(--brand-600);
    outline-offset: 1px;
}

.mbf-type-body[b-9955gi09zp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mbf-type-title[b-9955gi09zp] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
}

.mbf-type-desc[b-9955gi09zp] {
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--ds-text-subtle);
}

.mbf-note[b-9955gi09zp] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-muted);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-sm);
    padding: 8px 10px;
}

.mbf-note svg[b-9955gi09zp] { flex-shrink: 0; margin-top: 1px; }

.mbf-note--free[b-9955gi09zp] {
    color: var(--brand-700);
    background: color-mix(in srgb, var(--brand-600) 8%, transparent);
}

/* ===== Preview ===== */
.mbf-preview[b-9955gi09zp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 4px;
}

.mbf-preview-head[b-9955gi09zp] { display: flex; justify-content: flex-end; }

.mbf-count[b-9955gi09zp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.mbf-row[b-9955gi09zp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    transition: opacity var(--ds-dur-fast) var(--ds-ease);
}

.mbf-row.is-excluded[b-9955gi09zp] { opacity: 0.45; }

.mbf-row-head[b-9955gi09zp] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mbf-check[b-9955gi09zp] { cursor: pointer; display: inline-flex; }

.mbf-row-cat[b-9955gi09zp] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-subtle);
}

.mbf-row-badge[b-9955gi09zp] {
    margin-left: auto;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ds-surface-alt);
    color: var(--ds-text-muted);
    border: 1px solid var(--ds-border);
}

.mbf-row-title[b-9955gi09zp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.mbf-desc[b-9955gi09zp] { resize: vertical; min-height: 48px; }

/* Binding block */
.mbf-bind[b-9955gi09zp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.mbf-bind-head[b-9955gi09zp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mbf-bind-kind[b-9955gi09zp] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mbf-bind-itemcount[b-9955gi09zp] {
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
}

.mbf-bind-stockrow[b-9955gi09zp],
.mbf-bind-item[b-9955gi09zp] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mbf-bind-item-name[b-9955gi09zp] { flex: 1 1 auto; min-width: 0; }
.mbf-bind-item-qty[b-9955gi09zp] { flex: 0 0 80px; text-align: right; }
.mbf-bind-item-unit[b-9955gi09zp] { flex: 0 0 84px; }

.mbf-matbadge[b-9955gi09zp] {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ds-surface-alt);
    color: var(--ds-text-muted);
    border: 1px solid var(--ds-border);
}

.mbf-matbadge.is-new[b-9955gi09zp] {
    background: color-mix(in srgb, var(--brand-600) 14%, transparent);
    color: var(--brand-700);
    border-color: color-mix(in srgb, var(--brand-600) 30%, transparent);
}

.mbf-bind-item-rm[b-9955gi09zp] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.mbf-bind-item-rm:hover:not(:disabled)[b-9955gi09zp] { border-color: var(--ds-border-strong); color: var(--ds-text); }

@media (max-width: 600px) {
    .mbf-types[b-9955gi09zp] { grid-template-columns: 1fr; }
    .mbf-bind-item[b-9955gi09zp] { flex-wrap: wrap; }
    .mbf-bind-item-name[b-9955gi09zp] { flex: 1 1 100%; }
}
/* /Components/Pages/Admin/MergedProductsModal.razor.rz.scp.css */
.mp-body[b-ap4fzap4zl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 180px;
}

.mp-firm[b-ap4fzap4zl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-1);
}

.mp-firm__label[b-ap4fzap4zl] { font-size: 0.85rem; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.mp-firm .ds-select[b-ap4fzap4zl] { max-width: 340px; }

/* Setup */
.mp-intro[b-ap4fzap4zl] {
    color: var(--fg-2);
    line-height: 1.5;
    margin: 0;
}

.mp-note[b-ap4fzap4zl] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-subtle);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    color: var(--fg-2);
    font-size: 0.9rem;
    line-height: 1.45;
}

.mp-note svg[b-ap4fzap4zl] { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }

/* Empty */
.mp-empty[b-ap4fzap4zl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) 0;
    color: var(--fg-2);
    text-align: center;
}

.mp-empty svg[b-ap4fzap4zl] { color: var(--success, #2e7d32); }

/* Summary + list */
.mp-summary[b-ap4fzap4zl] {
    font-weight: 600;
    color: var(--fg-1);
    padding: var(--space-2) 0;
}

.mp-split[b-ap4fzap4zl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--warning, #b26a00) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning, #b26a00) 35%, transparent);
    border-radius: var(--radius-md);
}

.mp-split__text[b-ap4fzap4zl] { color: var(--fg-1); font-size: 0.9rem; line-height: 1.45; }
.mp-split__actions[b-ap4fzap4zl] { display: flex; gap: var(--space-2); flex: 0 0 auto; }

.mp-list[b-ap4fzap4zl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    max-height: 58dvh;
    padding-right: 4px;
}

.mp-item[b-ap4fzap4zl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-subtle);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
}

.mp-item__head[b-ap4fzap4zl] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.mp-item__name[b-ap4fzap4zl] { font-weight: 600; color: var(--fg-1); }
.mp-item__firm[b-ap4fzap4zl] { font-size: 0.82rem; color: var(--fg-3, var(--fg-2)); white-space: nowrap; }

.mp-worlds[b-ap4fzap4zl] { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.mp-world[b-ap4fzap4zl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.mp-world--own[b-ap4fzap4zl] {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.mp-world--int[b-ap4fzap4zl] {
    background: var(--bg-muted);
    color: var(--fg-1);
    border-color: var(--border-2, var(--border-1));
}

.mp-world__n[b-ap4fzap4zl] {
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    opacity: 0.75;
    padding-left: 6px;
    border-left: 1px solid currentColor;
}

.mp-meta[b-ap4fzap4zl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.82rem;
    color: var(--fg-2);
}

.mp-meta__groups[b-ap4fzap4zl] { margin-right: auto; }

.mp-tag[b-ap4fzap4zl] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--fg-2);
    font-size: 0.75rem;
    white-space: nowrap;
}

.mp-tag--warn[b-ap4fzap4zl] {
    background: color-mix(in srgb, var(--warning, #b26a00) 15%, transparent);
    color: var(--warning, #b26a00);
}
/* /Components/Pages/Admin/Operations.razor.rz.scp.css */
.ops-page[b-1an2prtx8o] {
    gap: var(--space-6);
}

/* Header back-link */
.ops-back[b-1an2prtx8o] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.ops-back:hover[b-1an2prtx8o] {
    border-color: var(--accent);
    color: var(--accent);
}

.ops-back:focus-visible[b-1an2prtx8o] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Category section */
.ops-section[b-1an2prtx8o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ops-section__head[b-1an2prtx8o] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}

.ops-section__label[b-1an2prtx8o] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2);
}

.ops-section__desc[b-1an2prtx8o] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    color: var(--fg-hint);
}

/* Operation rows */
.ops-list[b-1an2prtx8o] {
    display: flex;
    flex-direction: column;
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.ops-row[b-1an2prtx8o] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    transition: background var(--dur-fast) ease;
}

.ops-row + .ops-row[b-1an2prtx8o] {
    border-top: 1px solid var(--border);
}

.ops-row:hover[b-1an2prtx8o] {
    background: var(--bg-subtle);
}

.ops-row__icon[b-1an2prtx8o] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    background: var(--bg-muted);
    color: var(--fg-3);
}

.ops-row__icon--ai[b-1an2prtx8o] {
    background: var(--accent-soft);
    color: var(--accent);
}

.ops-row__icon--danger[b-1an2prtx8o] {
    background: color-mix(in srgb, var(--danger, #c62828) 10%, transparent);
    color: var(--danger, #c62828);
}

.ops-row__icon[b-1an2prtx8o]  svg {
    width: 22px;
    height: 22px;
}

.ops-row__body[b-1an2prtx8o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.ops-row__title[b-1an2prtx8o] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg-1);
    margin: 0;
    line-height: 1.25;
}

.ops-row__text[b-1an2prtx8o] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    color: var(--fg-hint);
    line-height: 1.55;
    margin: 0;
    max-width: 70ch;
}

.ops-row__action[b-1an2prtx8o] {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-2);
}

.ops-result[b-1an2prtx8o] {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    line-height: 1.5;
    align-self: flex-start;
}

.ops-result svg[b-1an2prtx8o] {
    flex: 0 0 auto;
    margin-top: 1px;
}

/* Stack the row on narrow screens */
@media (max-width: 720px) {
    .ops-row[b-1an2prtx8o] {
        flex-wrap: wrap;
    }

    .ops-row__action[b-1an2prtx8o] {
        flex-basis: 100%;
        margin-left: calc(44px + var(--space-4));
    }
}
/* /Components/Pages/Admin/OrderTaxRecalcModal.razor.rz.scp.css */
.tx-body[b-lk97j65do7] { display: flex; flex-direction: column; gap: 16px; }

/* ---- Setup ---- */
.tx-setup[b-lk97j65do7] { display: flex; flex-direction: column; gap: 14px; }

.tx-hint[b-lk97j65do7] {
    font-size: 0.75rem;
    color: var(--ds-text-subtle);
    margin-top: 4px;
    display: block;
}

.tx-check[b-lk97j65do7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 4px 0;
}

.tx-check-text[b-lk97j65do7] { display: flex; flex-direction: column; gap: 2px; }
.tx-check-title[b-lk97j65do7] { font-size: 0.875rem; font-weight: 600; color: var(--ds-text); }
.tx-check-hint[b-lk97j65do7] { font-size: 0.75rem; color: var(--ds-text-muted); line-height: 1.4; }

.tx-vh[b-lk97j65do7] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.tx-note[b-lk97j65do7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-muted);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-sm);
    padding: 8px 10px;
}

.tx-note[b-lk97j65do7]  svg { flex-shrink: 0; margin-top: 1px; }

/* ---- Summary stats ---- */
.tx-summary[b-lk97j65do7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.tx-stat[b-lk97j65do7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
}

.tx-stat.is-warn[b-lk97j65do7] {
    border-color: color-mix(in srgb, var(--brand-600) 30%, transparent);
    background: color-mix(in srgb, var(--brand-600) 8%, transparent);
}

.tx-stat-num[b-lk97j65do7] { font-size: 1.375rem; font-weight: 700; color: var(--ds-text); line-height: 1.1; }
.tx-stat-label[b-lk97j65do7] { font-size: 0.6875rem; color: var(--ds-text-muted); }

/* ---- Empty ---- */
.tx-empty[b-lk97j65do7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 0;
    color: var(--ds-text-muted);
    font-size: 0.875rem;
}

.tx-empty[b-lk97j65do7]  svg { color: var(--ds-success, var(--brand-600)); }

/* ---- Sections ---- */
.tx-section[b-lk97j65do7] { display: flex; flex-direction: column; gap: 8px; }

.tx-section-head[b-lk97j65do7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tx-section-title[b-lk97j65do7] { font-size: 0.9375rem; font-weight: 600; color: var(--ds-text); margin: 0; }
.tx-section-note[b-lk97j65do7] { font-size: 0.75rem; color: var(--ds-text-muted); margin: 0; }
.tx-trunc[b-lk97j65do7] { font-size: 0.6875rem; color: var(--ds-text-subtle); }

.tx-selall[b-lk97j65do7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    cursor: pointer;
}

/* ---- Order rows ---- */
.tx-orders[b-lk97j65do7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 38vh;
    overflow-y: auto;
    padding-right: 4px;
}

.tx-order[b-lk97j65do7] {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tx-order-head[b-lk97j65do7] { display: flex; align-items: center; gap: 10px; }
.tx-order-id[b-lk97j65do7] { font-size: 0.8125rem; font-weight: 700; color: var(--ds-text); }
.tx-order-store[b-lk97j65do7] { font-size: 0.75rem; color: var(--ds-text-muted); }
.tx-order-firm[b-lk97j65do7] { font-size: 0.6875rem; color: var(--ds-text-subtle); margin-left: auto; }

.tx-order-amounts[b-lk97j65do7] { display: flex; flex-wrap: wrap; gap: 20px; }

.tx-amount[b-lk97j65do7] { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; }
.tx-amount-label[b-lk97j65do7] { font-size: 0.6875rem; color: var(--ds-text-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.tx-amount-old[b-lk97j65do7] { color: var(--ds-text-muted); text-decoration: line-through; }
.tx-amount-new[b-lk97j65do7] { color: var(--ds-text); font-weight: 600; }
.tx-amount-new--accent[b-lk97j65do7] { color: var(--brand-700); }
.tx-amount[b-lk97j65do7]  svg { color: var(--ds-text-subtle); }

.tx-items[b-lk97j65do7] { display: flex; flex-wrap: wrap; gap: 6px; }

.tx-item-chip[b-lk97j65do7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    font-size: 0.6875rem;
}

.tx-item-name[b-lk97j65do7] { color: var(--ds-text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-item-rate[b-lk97j65do7] { color: var(--ds-text); font-weight: 600; }

/* ---- Product rows ---- */
.tx-products[b-lk97j65do7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 32vh;
    overflow-y: auto;
    padding-right: 4px;
}

.tx-product[b-lk97j65do7] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
}

.tx-product.is-selected[b-lk97j65do7] {
    border-color: color-mix(in srgb, var(--brand-600) 40%, transparent);
    background: color-mix(in srgb, var(--brand-600) 6%, transparent);
}

.tx-product-pick[b-lk97j65do7] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 200px;
    min-width: 0;
    cursor: pointer;
}

.tx-product-main[b-lk97j65do7] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-product-name[b-lk97j65do7] { font-size: 0.8125rem; font-weight: 500; color: var(--ds-text); }
.tx-product-firm[b-lk97j65do7] { font-size: 0.6875rem; color: var(--ds-text-subtle); }

.tx-product-rates[b-lk97j65do7] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.tx-rate-current[b-lk97j65do7] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    white-space: nowrap;
}

.tx-rate-current b[b-lk97j65do7] { color: var(--ds-text); font-weight: 700; }
.tx-rate-observed b[b-lk97j65do7] { color: var(--brand-700); }

.tx-rate-target[b-lk97j65do7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tx-rate-target-label[b-lk97j65do7] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-subtle);
}

.tx-rate-select[b-lk97j65do7] {
    width: auto;
    min-width: 84px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: 700;
    color: var(--brand-700);
}

@media (max-width: 720px) {
    .tx-summary[b-lk97j65do7] { grid-template-columns: repeat(2, 1fr); }
}
/* /Components/Pages/Admin/StorePurgeModal.razor.rz.scp.css */
.vsp-body[b-du4zmjx0gy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 180px;
}

/* Scope pickers */
.vsp-scope[b-du4zmjx0gy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-1);
}

@media (max-width: 640px) {
    .vsp-scope[b-du4zmjx0gy] { grid-template-columns: 1fr; }
}

/* What to delete */
.vsp-opts[b-du4zmjx0gy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.vsp-opt[b-du4zmjx0gy] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-subtle);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.vsp-opt:hover[b-du4zmjx0gy] { border-color: var(--border-2, var(--border-1)); }
.vsp-opt:focus-within[b-du4zmjx0gy] { outline: 2px solid var(--accent); outline-offset: 2px; }
.vsp-opt.is-disabled[b-du4zmjx0gy] { opacity: 0.5; cursor: not-allowed; }

.vsp-opt input[b-du4zmjx0gy] { margin-top: 3px; flex: 0 0 auto; }

.vsp-opt__body[b-du4zmjx0gy] { display: flex; flex-direction: column; gap: 2px; }

.vsp-opt__name[b-du4zmjx0gy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--fg-1);
}

.vsp-opt__hint[b-du4zmjx0gy] { font-size: 0.82rem; color: var(--fg-2); line-height: 1.4; }

.vsp-opt__meta[b-du4zmjx0gy] {
    margin-top: 2px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--fg-3, var(--fg-2));
}

.vsp-badge[b-du4zmjx0gy] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--fg-2);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid var(--border-1);
}

.vsp-badge--scope[b-du4zmjx0gy] {
    margin-left: var(--space-2);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Warning / info note */
.vsp-note[b-du4zmjx0gy] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--danger, #c62828) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, #c62828) 30%, transparent);
    border-radius: var(--radius-md);
    color: var(--fg-1);
    font-size: 0.88rem;
    line-height: 1.45;
}

.vsp-note svg[b-du4zmjx0gy] { flex: 0 0 auto; margin-top: 2px; color: var(--danger, #c62828); }

/* Empty */
.vsp-empty[b-du4zmjx0gy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) 0;
    color: var(--fg-2);
    text-align: center;
}

.vsp-empty svg[b-du4zmjx0gy] { color: var(--success, #2e7d32); }

/* Preview */
.vsp-preview-title[b-du4zmjx0gy] {
    margin: 0;
    font-weight: 600;
    color: var(--fg-1);
}

.vsp-stats[b-du4zmjx0gy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2);
}

.vsp-stat[b-du4zmjx0gy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-subtle);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
}

.vsp-stat__n[b-du4zmjx0gy] {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
}

.vsp-stat__l[b-du4zmjx0gy] { font-size: 0.78rem; color: var(--fg-2); }

.vsp-chips[b-du4zmjx0gy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.vsp-chips__label[b-du4zmjx0gy] { font-size: 0.82rem; font-weight: 600; color: var(--fg-2); }

.vsp-chip[b-du4zmjx0gy] {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--fg-1);
    font-size: 0.78rem;
    border: 1px solid var(--border-1);
}

.vsp-chip--int[b-du4zmjx0gy] {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.vsp-confirm .ds-input[b-du4zmjx0gy] { max-width: 320px; }
/* /Components/Pages/Admin/SystemMaterialNutritionModal.razor.rz.scp.css */
.mn-body[b-i1a8qmowco] { display: flex; flex-direction: column; gap: 16px; }

.mn-setup[b-i1a8qmowco] { display: flex; flex-direction: column; gap: 14px; }
.mn-count[b-i1a8qmowco] { max-width: 220px; }
.mn-hint[b-i1a8qmowco] { font-size: 0.6875rem; color: var(--ds-text-subtle); }

.mn-note[b-i1a8qmowco] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-muted);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-sm);
    padding: 8px 10px;
}

.mn-note svg[b-i1a8qmowco] { flex-shrink: 0; margin-top: 1px; }

.mn-empty[b-i1a8qmowco] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--ds-text-muted);
    font-size: 0.875rem;
}

.mn-empty svg[b-i1a8qmowco] { color: var(--brand-600); }

.mn-preview-bar[b-i1a8qmowco] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mn-selall[b-i1a8qmowco] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    cursor: pointer;
}

.mn-count-pill[b-i1a8qmowco] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
}

.mn-vh[b-i1a8qmowco] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.mn-list[b-i1a8qmowco] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

.mn-row[b-i1a8qmowco] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    cursor: pointer;
}

.mn-row.is-selected[b-i1a8qmowco] { border-color: var(--brand-600); background: var(--ds-surface-alt); }

.mn-row-main[b-i1a8qmowco] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.mn-row-name[b-i1a8qmowco] { font-size: 0.8125rem; font-weight: 600; color: var(--ds-text); }
.mn-row-cat[b-i1a8qmowco] { font-size: 0.6875rem; color: var(--ds-text-subtle); }

.mn-row-nutri[b-i1a8qmowco] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.mn-tag[b-i1a8qmowco] {
    font-size: 0.6875rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ds-surface-alt);
    color: var(--ds-text-muted);
    border: 1px solid var(--ds-border);
    white-space: nowrap;
}

.mn-tag--kcal[b-i1a8qmowco] {
    background: color-mix(in srgb, var(--brand-600) 12%, transparent);
    color: var(--brand-700);
    border-color: color-mix(in srgb, var(--brand-600) 28%, transparent);
    font-weight: 700;
}

.mn-tag--allergen[b-i1a8qmowco] {
    background: color-mix(in srgb, #e67e22 12%, transparent);
    color: #b9651b;
    border-color: color-mix(in srgb, #e67e22 28%, transparent);
}

@media (max-width: 600px) {
    .mn-row[b-i1a8qmowco] { flex-wrap: wrap; }
    .mn-row-nutri[b-i1a8qmowco] { justify-content: flex-start; }
}
/* /Components/Pages/Admin/SystemMaterialsModal.razor.rz.scp.css */
.sm-body[b-dj941jhsh4] {
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

/* ---------- Setup ---------- */
.sm-setup[b-dj941jhsh4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.sm-hint[b-dj941jhsh4] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
}

.sm-count[b-dj941jhsh4] {
    max-width: 220px;
}

.sm-note[b-dj941jhsh4] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    border-radius: var(--radius-lg);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    line-height: 1.45;
}

.sm-note svg[b-dj941jhsh4] {
    flex: 0 0 auto;
    margin-top: 1px;
}

/* ---------- Empty ---------- */
.sm-empty[b-dj941jhsh4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-4);
    color: var(--fg-hint);
    text-align: center;
}

.sm-empty p[b-dj941jhsh4] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size);
}

/* ---------- Preview ---------- */
.sm-preview-bar[b-dj941jhsh4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.sm-selall[b-dj941jhsh4] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-2);
    user-select: none;
}

.sm-count-pill[b-dj941jhsh4] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.sm-list[b-dj941jhsh4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 52dvh;
    overflow-y: auto;
    padding-right: 4px;
}

.sm-row[b-dj941jhsh4] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--layer-1);
    cursor: pointer;
    transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.sm-row:hover[b-dj941jhsh4] {
    border-color: var(--border-strong);
}

.sm-row.is-selected[b-dj941jhsh4] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.sm-row-main[b-dj941jhsh4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.sm-row-name[b-dj941jhsh4] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
}

.sm-row-desc[b-dj941jhsh4] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-row-tags[b-dj941jhsh4] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 55%;
}

.sm-tag[b-dj941jhsh4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.sm-tag--cat[b-dj941jhsh4] {
    background: var(--bg-muted);
    color: var(--fg-3);
}

.sm-tag--nonfood[b-dj941jhsh4] {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.sm-tag--kcal[b-dj941jhsh4] {
    background: var(--bg-muted);
    color: var(--fg-hint);
}

.sm-tag--barcode[b-dj941jhsh4] {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    max-width: 150px;
}

.sm-tag--barcode span[b-dj941jhsh4] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-tag--allergen[b-dj941jhsh4] {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

/* Native checkbox kept accessible but visually replaced by the .ds-checkbox glyph. */
.sm-visually-hidden[b-dj941jhsh4] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sm-row:focus-within[b-dj941jhsh4],
.sm-selall:focus-within[b-dj941jhsh4] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}
/* /Components/Pages/Admin/VirtualStoreDispatchSyncModal.razor.rz.scp.css */
.vds-body[b-jbk7s0jdsj] { display: flex; flex-direction: column; gap: 16px; }

/* ---- Setup ---- */
.vds-setup[b-jbk7s0jdsj] { display: flex; flex-direction: column; gap: 14px; }

.vds-note[b-jbk7s0jdsj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-muted);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-sm);
    padding: 8px 10px;
}

.vds-note[b-jbk7s0jdsj]  svg { flex-shrink: 0; margin-top: 1px; }

/* ---- Summary stats ---- */
.vds-summary[b-jbk7s0jdsj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vds-stat[b-jbk7s0jdsj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
}

.vds-stat.is-warn[b-jbk7s0jdsj] {
    border-color: color-mix(in srgb, var(--brand-600) 30%, transparent);
    background: color-mix(in srgb, var(--brand-600) 8%, transparent);
}

.vds-stat-num[b-jbk7s0jdsj] { font-size: 1.375rem; font-weight: 700; color: var(--ds-text); line-height: 1.1; }
.vds-stat-label[b-jbk7s0jdsj] { font-size: 0.6875rem; color: var(--ds-text-muted); }

/* ---- Empty ---- */
.vds-empty[b-jbk7s0jdsj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 0;
    color: var(--ds-text-muted);
    font-size: 0.875rem;
}

.vds-empty[b-jbk7s0jdsj]  svg { color: var(--ds-success, var(--brand-600)); }

/* ---- Drift groups: one physical store, its drifted tabelas underneath ---- */
.vds-groups[b-jbk7s0jdsj] { display: flex; flex-direction: column; gap: 12px; }

.vds-group[b-jbk7s0jdsj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 12px 14px;
    background: var(--ds-surface-alt);
}

.vds-group-head[b-jbk7s0jdsj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vds-group-parent[b-jbk7s0jdsj] { font-size: 0.9375rem; font-weight: 600; color: var(--ds-text); }
.vds-group-firm[b-jbk7s0jdsj] { font-size: 0.75rem; color: var(--ds-text-muted); }
.vds-group-count[b-jbk7s0jdsj] { margin-left: auto; font-size: 0.6875rem; color: var(--ds-text-subtle); }

.vds-store[b-jbk7s0jdsj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
}

.vds-store-head[b-jbk7s0jdsj] { display: flex; align-items: baseline; gap: 8px; }
.vds-store-name[b-jbk7s0jdsj] { font-size: 0.875rem; font-weight: 600; color: var(--ds-text); }
.vds-store-code[b-jbk7s0jdsj] { font-size: 0.6875rem; color: var(--ds-text-subtle); }

.vds-fields[b-jbk7s0jdsj] { display: flex; flex-direction: column; gap: 4px; }

.vds-field[b-jbk7s0jdsj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

.vds-field[b-jbk7s0jdsj]  svg { flex-shrink: 0; color: var(--ds-text-subtle); }

.vds-field-label[b-jbk7s0jdsj] { min-width: 190px; color: var(--ds-text); }
.vds-field-old[b-jbk7s0jdsj] { color: var(--ds-text-muted); text-decoration: line-through; }
.vds-field-new[b-jbk7s0jdsj] { font-weight: 600; color: var(--ds-text); }

/* Otomatik atama sapması siparişin kurye atamasını doğrudan değiştirir — öne çıkar. */
.vds-field.is-key .vds-field-new[b-jbk7s0jdsj] { color: var(--brand-600); }

@media (max-width: 620px) {
    .vds-summary[b-jbk7s0jdsj] { grid-template-columns: 1fr; }
    .vds-field[b-jbk7s0jdsj] { flex-wrap: wrap; }
    .vds-field-label[b-jbk7s0jdsj] { min-width: 0; width: 100%; }
}
/* /Components/Pages/AIAssistant/AIAssistant.razor.rz.scp.css */
.page-container[b-c4fxmsfcyx] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    overflow: hidden;
}

.page-header[b-c4fxmsfcyx] {
    background: var(--neutral-layer-1);
    padding: 1.5rem;
    border-radius: var(--layer-corner-radius);
    box-shadow: var(--elevation-shadow-card-rest);
}

.page-subtitle[b-c4fxmsfcyx] {
    color: var(--neutral-foreground-hint);
    margin-top: 0.5rem;
}

.chat-container[b-c4fxmsfcyx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--neutral-layer-1);
    border-radius: var(--layer-corner-radius);
    box-shadow: var(--elevation-shadow-card-rest);
    border: 1px solid var(--neutral-stroke-divider-rest);
}

.chat-messages[b-c4fxmsfcyx] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
}

.welcome-message[b-c4fxmsfcyx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
/*    padding: 2rem;*/
    gap: 1rem;
    height: 100%;
}

.suggested-questions[b-c4fxmsfcyx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    align-items: center;
    width: 100%;
}

.suggestions-grid[b-c4fxmsfcyx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.suggestions-title[b-c4fxmsfcyx] {
    margin-bottom: 0.5rem;
    color: var(--neutral-foreground-hint);
}

.suggestion-button[b-c4fxmsfcyx] {
    width: 100%;
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    white-space: normal;
    height: auto;
    min-height: 60px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .suggestions-grid[b-c4fxmsfcyx] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 0.5rem;
    }
}

@media (max-width: 600px) {
    .suggestions-grid[b-c4fxmsfcyx] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .suggestions-grid[b-c4fxmsfcyx] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .suggestion-button[b-c4fxmsfcyx] {
        min-height: 50px;
        padding: 0.5rem;
    }
}

.chat-message[b-c4fxmsfcyx] {
    max-width: 80%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.user-message[b-c4fxmsfcyx] {
    align-self: flex-end;
    background: var(--accent-fill-rest);
    color: white;
    padding: 1rem;
    border-radius: 16px 16px 4px 16px;
    margin-bottom: 20px;
}

.assistant-message[b-c4fxmsfcyx] {
    align-self: flex-start;
    background: var(--neutral-layer-2);
    padding: 1rem;
    border-radius: 16px 16px 16px 4px;
    margin-bottom: 20px;
}

.message-time[b-c4fxmsfcyx] {
    position: absolute;
    bottom: -18px;
    right: 8px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    opacity: 0.7;
}

.message-content[b-c4fxmsfcyx] {
    line-height: 1.5;
}

.assistant-content[b-c4fxmsfcyx] {
    white-space: pre-line;
}

.typing-indicator[b-c4fxmsfcyx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--neutral-foreground-hint);
    font-style: italic;
    margin-top: 0.5rem;
}

.chat-input-container[b-c4fxmsfcyx] {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-floating);
    flex-shrink: 0;
    padding: 1rem;
}

.user-message .message-time[b-c4fxmsfcyx] {
    color: white;
    opacity: 0.9;
}

/* Scrollbar Styling */
.chat-messages[b-c4fxmsfcyx]::-webkit-scrollbar {
    width: 8px;
}

.chat-messages[b-c4fxmsfcyx]::-webkit-scrollbar-track {
    background: var(--neutral-layer-2);
    border-radius: 4px;
}

.chat-messages[b-c4fxmsfcyx]::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-control-default);
    border-radius: 4px;
}

.chat-messages[b-c4fxmsfcyx]::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-stroke-control-hover);
}

/* Responsive Design */
@media (max-width: 768px) {
    .chat-message[b-c4fxmsfcyx] {
        max-width: 95%;
    }
    
    .page-container[b-c4fxmsfcyx] {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .page-header[b-c4fxmsfcyx] {
        padding: 1rem;
    }
    
    .welcome-message[b-c4fxmsfcyx] {
        padding: 1rem;
    }
    
    .suggested-questions[b-c4fxmsfcyx] {
        width: 100%;
    }
}
/* /Components/Pages/Announcements/AnnouncementCreate.razor.rz.scp.css */
/* Oluşturma sayfası kabuğu — form AnnouncementEditor içinde; burada yalnızca başlık alanı. */

.ae-page-head[b-5m9yg05xjn] {
    align-items: flex-start;
    margin-bottom: 18px;
}

.ae-page-head__titles[b-5m9yg05xjn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ae-page-back[b-5m9yg05xjn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
    text-decoration: none;
    width: fit-content;
}

.ae-page-back:hover[b-5m9yg05xjn] { color: var(--brand-600, #036ac4); }

.ae-page-back:focus-visible[b-5m9yg05xjn] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
    border-radius: 6px;
}

.ae-page-back[b-5m9yg05xjn]  svg { width: 15px; height: 15px; }

.ae-page-sub[b-5m9yg05xjn] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ds-text-muted, #64748b);
}

.ae-page-loading[b-5m9yg05xjn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--ds-text-muted, #64748b);
    font-size: 0.9rem;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    max-width: 1240px;
}
/* /Components/Pages/Announcements/AnnouncementDetail.razor.rz.scp.css */
/* ── Duyuru detayı — makale + kenar paneli (design-system, FluentUI-free) ────
   Readable column (max 760px) for the article, sticky side panel with summary,
   targeting (admin) and other announcements. Category colour only as soft tint. */

.det-page[b-p0w7giwh8w] {
    gap: 0;
}

/* ── Top bar ──────────────────────────────────────────────────── */
.det-topbar[b-p0w7giwh8w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.det-back[b-p0w7giwh8w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 6px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
    text-decoration: none;
    transition: color 120ms ease, background 120ms ease;
}

.det-back:hover[b-p0w7giwh8w] {
    color: var(--brand-600, #036ac4);
    background: var(--brand-50, #eff6ff);
}

.det-back:focus-visible[b-p0w7giwh8w] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.det-back[b-p0w7giwh8w]  svg {
    width: 16px;
    height: 16px;
}

.det-actions[b-p0w7giwh8w] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Layout ───────────────────────────────────────────────────── */
.det-layout[b-p0w7giwh8w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
    max-width: 1160px;
}

/* ── Article ──────────────────────────────────────────────────── */
.det-article[b-p0w7giwh8w] {
    --cat-color: var(--slate-500, #64748b);
    --cat-tint: var(--slate-100, #f1f5f9);
    min-width: 0;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    padding: 32px 40px 36px;
    overflow: hidden;
}

.det-article.cat--news[b-p0w7giwh8w]        { --cat-color: var(--brand-600, #036ac4); --cat-tint: rgba(3, 106, 196, 0.10); }
.det-article.cat--update[b-p0w7giwh8w]      { --cat-color: #4338ca; --cat-tint: #eef2ff; }
.det-article.cat--warning[b-p0w7giwh8w]     { --cat-color: #b45309; --cat-tint: #fffbeb; }
.det-article.cat--feature[b-p0w7giwh8w]     { --cat-color: #047857; --cat-tint: #ecfdf5; }
.det-article.cat--maintenance[b-p0w7giwh8w] { --cat-color: #475569; --cat-tint: #f1f5f9; }
.det-article.cat--security[b-p0w7giwh8w]    { --cat-color: #b91c1c; --cat-tint: #fef2f2; }

.det-header[b-p0w7giwh8w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.det-tags[b-p0w7giwh8w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.det-cat[b-p0w7giwh8w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 8px;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--cat-tint);
    color: var(--cat-color);
    font-size: 0.76rem;
    font-weight: 700;
}

.det-cat[b-p0w7giwh8w]  svg {
    width: 15px;
    height: 15px;
}

.det-chip[b-p0w7giwh8w] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--ds-radius-pill, 999px);
    font-size: 0.72rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}

.det-chip[b-p0w7giwh8w]  svg {
    width: 12px;
    height: 12px;
}

.det-chip__dot[b-p0w7giwh8w] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.det-chip.pri--critical[b-p0w7giwh8w] { background: #fef2f2; color: #b91c1c; }
.det-chip.pri--high[b-p0w7giwh8w]     { background: #fffbeb; color: #b45309; }
.det-chip--sticky[b-p0w7giwh8w]       { background: rgba(3, 106, 196, 0.1); color: #036ac4; }
.det-chip.st--scheduled[b-p0w7giwh8w] { background: var(--brand-50, #eff6ff); color: var(--brand-700, #0356a0); }
.det-chip.st--expired[b-p0w7giwh8w]   { background: #fffbeb; color: #b45309; }
.det-chip.st--inactive[b-p0w7giwh8w]  { background: #f1f5f9; color: #64748b; }
.det-chip.st--archived[b-p0w7giwh8w]  { background: #f1f5f9; color: #475569; }

.det-title[b-p0w7giwh8w] {
    margin: 0;
    font-family: var(--ds-font-display, "Sora", "Inter", sans-serif);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ds-text, #0f172a);
    overflow-wrap: anywhere;
}

.det-lead[b-p0w7giwh8w] {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ds-text-muted, #475569);
}

.det-byline[b-p0w7giwh8w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--ds-text-muted, #64748b);
}

.det-avatar[b-p0w7giwh8w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-50, #eff6ff);
    color: var(--brand-700, #0356a0);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.det-byline__author[b-p0w7giwh8w] {
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.det-byline__sep[b-p0w7giwh8w] {
    color: var(--ds-border-strong, #cbd5e1);
}

.det-byline__item[b-p0w7giwh8w] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.det-byline__item[b-p0w7giwh8w]  svg {
    width: 15px;
    height: 15px;
    color: var(--ds-text-subtle, #94a3b8);
}

/* Banner image */
.det-banner[b-p0w7giwh8w] {
    margin: 0 0 26px;
    border-radius: var(--ds-radius-md, 12px);
    overflow: hidden;
    background: var(--ds-surface-sunken, #f1f5f9);
    border: 1px solid var(--ds-border, #e2e8f0);
}

.det-banner img[b-p0w7giwh8w] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
}

/* ── Markdown content typography ──────────────────────────────── */
.det-content[b-p0w7giwh8w] {
    max-width: 760px;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--ds-text, #1e293b);
    overflow-wrap: anywhere;
}

.det-content__empty[b-p0w7giwh8w] {
    margin: 0;
    padding: 20px;
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-alt, #f8fafc);
    color: var(--ds-text-muted, #64748b);
    font-size: 0.9rem;
    text-align: center;
}

.det-content[b-p0w7giwh8w]  h1,
.det-content[b-p0w7giwh8w]  h2,
.det-content[b-p0w7giwh8w]  h3,
.det-content[b-p0w7giwh8w]  h4,
.det-content[b-p0w7giwh8w]  h5,
.det-content[b-p0w7giwh8w]  h6 {
    font-family: var(--ds-font-display, "Sora", "Inter", sans-serif);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ds-text, #0f172a);
    margin: 1.6em 0 0.6em;
}

.det-content[b-p0w7giwh8w]  h1 { font-size: 1.5rem; }
.det-content[b-p0w7giwh8w]  h2 { font-size: 1.3rem; }
.det-content[b-p0w7giwh8w]  h3 { font-size: 1.12rem; }
.det-content[b-p0w7giwh8w]  h4,
.det-content[b-p0w7giwh8w]  h5,
.det-content[b-p0w7giwh8w]  h6 { font-size: 1rem; }

.det-content[b-p0w7giwh8w]  > :first-child { margin-top: 0; }

.det-content[b-p0w7giwh8w]  p {
    margin: 0 0 1.1em;
}

.det-content[b-p0w7giwh8w]  ul,
.det-content[b-p0w7giwh8w]  ol {
    margin: 0 0 1.1em;
    padding-left: 1.5rem;
}

.det-content[b-p0w7giwh8w]  li {
    margin: 0.35em 0;
}

.det-content[b-p0w7giwh8w]  li::marker {
    color: var(--cat-color);
}

.det-content[b-p0w7giwh8w]  a {
    color: var(--brand-600, #036ac4);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--brand-200, #bfdbfe);
    transition: text-decoration-color 120ms ease;
}

.det-content[b-p0w7giwh8w]  a:hover {
    text-decoration-color: var(--brand-600, #036ac4);
}

.det-content[b-p0w7giwh8w]  blockquote {
    margin: 1.4em 0;
    padding: 14px 18px;
    border-left: 3px solid var(--cat-color);
    background: var(--cat-tint);
    border-radius: 0 var(--ds-radius-md, 12px) var(--ds-radius-md, 12px) 0;
    color: var(--ds-text, #1e293b);
}

.det-content[b-p0w7giwh8w]  code {
    padding: 0.15em 0.45em;
    border-radius: 6px;
    background: var(--ds-surface-sunken, #f1f5f9);
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
    font-size: 0.88em;
}

.det-content[b-p0w7giwh8w]  pre {
    margin: 1.4em 0;
    padding: 16px 18px;
    border-radius: var(--ds-radius-md, 12px);
    background: var(--slate-900, #0f172a);
    color: #e2e8f0;
    overflow-x: auto;
    font-size: 0.88rem;
    line-height: 1.6;
}

.det-content[b-p0w7giwh8w]  pre code {
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
}

.det-content[b-p0w7giwh8w]  strong {
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.det-content[b-p0w7giwh8w]  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ds-radius-md, 12px);
    margin: 1em 0;
}

.det-content[b-p0w7giwh8w]  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 0.92rem;
}

.det-content[b-p0w7giwh8w]  th,
.det-content[b-p0w7giwh8w]  td {
    padding: 8px 12px;
    border: 1px solid var(--ds-border, #e2e8f0);
    text-align: left;
}

.det-content[b-p0w7giwh8w]  th {
    background: var(--ds-surface-alt, #f8fafc);
    font-weight: 600;
}

.det-content[b-p0w7giwh8w]  hr {
    border: none;
    border-top: 1px solid var(--ds-border, #e2e8f0);
    margin: 2em 0;
}

/* CTA */
.det-cta[b-p0w7giwh8w] {
    margin-top: 28px;
}

.det-cta__btn[b-p0w7giwh8w] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--brand-600, #036ac4);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(3, 106, 196, 0.25);
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.det-cta__btn:hover[b-p0w7giwh8w] {
    background: var(--brand-700, #0356a0);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(3, 106, 196, 0.32);
}

.det-cta__btn:focus-visible[b-p0w7giwh8w] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 3px;
}

.det-cta__btn[b-p0w7giwh8w]  svg {
    width: 16px;
    height: 16px;
}

.det-footer[b-p0w7giwh8w] {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid var(--ds-border, #e2e8f0);
    font-size: 0.78rem;
    color: var(--ds-text-subtle, #94a3b8);
}

/* ── Side panel ───────────────────────────────────────────────── */
.det-side[b-p0w7giwh8w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 0;
}

.det-card[b-p0w7giwh8w] {
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.det-card__head[b-p0w7giwh8w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.det-card__title[b-p0w7giwh8w] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-muted, #64748b);
}

.det-card__link[b-p0w7giwh8w] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-600, #036ac4);
    text-decoration: none;
}

.det-card__link:hover[b-p0w7giwh8w] { text-decoration: underline; }

.det-card__label[b-p0w7giwh8w] {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ds-text-subtle, #94a3b8);
    margin-top: 2px;
}

.det-card__muted[b-p0w7giwh8w] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.85rem;
    color: var(--ds-text-muted, #64748b);
}

.det-card__muted[b-p0w7giwh8w]  svg {
    width: 15px;
    height: 15px;
    color: var(--ds-text-subtle, #94a3b8);
}

/* Definition list: label / value rows */
.det-dl[b-p0w7giwh8w] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 14px;
    margin: 0;
    font-size: 0.84rem;
}

.det-dl dt[b-p0w7giwh8w] {
    color: var(--ds-text-subtle, #94a3b8);
    white-space: nowrap;
}

.det-dl dd[b-p0w7giwh8w] {
    margin: 0;
    color: var(--ds-text, #0f172a);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.det-code[b-p0w7giwh8w] {
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
    font-size: 0.78rem;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--ds-surface-sunken, #f1f5f9);
}

.det-status[b-p0w7giwh8w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.det-status.st--published[b-p0w7giwh8w] { color: var(--ds-success, #16a34a); }
.det-status.st--scheduled[b-p0w7giwh8w] { color: var(--brand-600, #036ac4); }
.det-status.st--expired[b-p0w7giwh8w]   { color: var(--ds-warning, #d97706); }
.det-status.st--inactive[b-p0w7giwh8w]  { color: var(--slate-500, #64748b); }
.det-status.st--archived[b-p0w7giwh8w]  { color: var(--slate-600, #475569); }

.det-pills[b-p0w7giwh8w] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.det-pill[b-p0w7giwh8w] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--brand-50, #eff6ff);
    color: var(--brand-700, #0356a0);
    font-size: 0.74rem;
    font-weight: 600;
}

/* Other announcements */
.det-others[b-p0w7giwh8w] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.det-others li + li[b-p0w7giwh8w] {
    border-top: 1px solid var(--ds-border, #eef2f6);
}

.det-other[b-p0w7giwh8w] {
    --cat-color: var(--slate-500, #64748b);
    --cat-tint: var(--slate-100, #f1f5f9);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 2px;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    transition: background 120ms ease;
}

.det-other:hover[b-p0w7giwh8w] { background: var(--ds-surface-alt, #f8fafc); }

.det-other:focus-visible[b-p0w7giwh8w] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 1px;
}

.det-other.cat--news[b-p0w7giwh8w]        { --cat-color: var(--brand-600, #036ac4); --cat-tint: rgba(3, 106, 196, 0.10); }
.det-other.cat--update[b-p0w7giwh8w]      { --cat-color: #4338ca; --cat-tint: #eef2ff; }
.det-other.cat--warning[b-p0w7giwh8w]     { --cat-color: #b45309; --cat-tint: #fffbeb; }
.det-other.cat--feature[b-p0w7giwh8w]     { --cat-color: #047857; --cat-tint: #ecfdf5; }
.det-other.cat--maintenance[b-p0w7giwh8w] { --cat-color: #475569; --cat-tint: #f1f5f9; }
.det-other.cat--security[b-p0w7giwh8w]    { --cat-color: #b91c1c; --cat-tint: #fef2f2; }

.det-other__icon[b-p0w7giwh8w] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--cat-tint);
    color: var(--cat-color);
}

.det-other__icon[b-p0w7giwh8w]  svg {
    width: 16px;
    height: 16px;
}

.det-other__body[b-p0w7giwh8w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.det-other__title[b-p0w7giwh8w] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-text, #0f172a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.det-other:hover .det-other__title[b-p0w7giwh8w] { color: var(--brand-600, #036ac4); }

.det-other__meta[b-p0w7giwh8w] {
    font-size: 0.74rem;
    color: var(--ds-text-subtle, #94a3b8);
}

/* ── Empty / not found ────────────────────────────────────────── */
.det-empty[b-p0w7giwh8w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 20px;
    max-width: 760px;
    background: var(--ds-surface, #fff);
    border: 1px dashed var(--ds-border-strong, #cbd5e1);
    border-radius: var(--ds-radius-lg, 16px);
    text-align: center;
}

.det-empty__icon[b-p0w7giwh8w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--brand-50, #eff6ff);
    color: var(--brand-600, #036ac4);
}

.det-empty__icon[b-p0w7giwh8w]  svg {
    width: 26px;
    height: 26px;
}

.det-empty__text[b-p0w7giwh8w] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ds-text-muted, #64748b);
}

/* ── Skeleton ─────────────────────────────────────────────────── */
.det-article--skeleton[b-p0w7giwh8w],
.det-card--skeleton[b-p0w7giwh8w] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sk[b-p0w7giwh8w] {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--slate-100, #f1f5f9) 25%, var(--slate-200, #e2e8f0) 50%, var(--slate-100, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: det-shimmer-b-p0w7giwh8w 1.3s ease-in-out infinite;
}

.sk--chip[b-p0w7giwh8w] { width: 90px; height: 22px; border-radius: 999px; }
.sk--h1[b-p0w7giwh8w]   { width: 85%; height: 28px; }
.sk--line[b-p0w7giwh8w] { width: 100%; height: 13px; }
.sk--w80[b-p0w7giwh8w]  { width: 80%; }
.sk--w60[b-p0w7giwh8w]  { width: 60%; }
.sk--gap[b-p0w7giwh8w]  { height: 10px; background: transparent; animation: none; }

@keyframes det-shimmer-b-p0w7giwh8w {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .det-layout[b-p0w7giwh8w] {
        grid-template-columns: minmax(0, 1fr);
    }

    .det-side[b-p0w7giwh8w] {
        position: static;
    }
}

@media (max-width: 640px) {
    .det-article[b-p0w7giwh8w] {
        padding: 22px 20px 26px;
    }

    .det-topbar[b-p0w7giwh8w] {
        flex-wrap: wrap;
    }

    .det-content[b-p0w7giwh8w] {
        font-size: 0.98rem;
    }
}
/* /Components/Pages/Announcements/AnnouncementEdit.razor.rz.scp.css */
/* Düzenleme sayfası kabuğu — form AnnouncementEditor içinde; burada yalnızca başlık alanı. */

.ae-page-head[b-kjtwgxeu7z] {
    align-items: flex-start;
    margin-bottom: 18px;
}

.ae-page-head__titles[b-kjtwgxeu7z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ae-page-back[b-kjtwgxeu7z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
    text-decoration: none;
    width: fit-content;
}

.ae-page-back:hover[b-kjtwgxeu7z] { color: var(--brand-600, #036ac4); }

.ae-page-back:focus-visible[b-kjtwgxeu7z] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
    border-radius: 6px;
}

.ae-page-back[b-kjtwgxeu7z]  svg { width: 15px; height: 15px; }

.ae-page-sub[b-kjtwgxeu7z] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ds-text-muted, #64748b);
}

.ae-page-loading[b-kjtwgxeu7z] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--ds-text-muted, #64748b);
    font-size: 0.9rem;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    max-width: 1240px;
}
/* /Components/Pages/Announcements/AnnouncementEditor.razor.rz.scp.css */
/* ── Duyuru editörü (Create + Edit ortak) ─────────────────────────────────────
   İki kolon: sol içerik, sağ yayın/gösterim/hedefleme + canlı önizleme. Alt tarafta
   yapışkan eylem çubuğu. Token-tabanlı, FluentUI yok; kategori renkleri yalnızca
   yumuşak tonlar. */

.ae[b-nfo5vpv0pc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
    max-width: 1240px;
}

.ae-main[b-nfo5vpv0pc],
.ae-side[b-nfo5vpv0pc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ── Kart ─────────────────────────────────────────────────────── */
.ae-card[b-nfo5vpv0pc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
}

.ae-card__head[b-nfo5vpv0pc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ae-card__meta[b-nfo5vpv0pc] {
    font-size: 0.76rem;
    color: var(--ds-text-subtle, #94a3b8);
}

.ae-eyebrow[b-nfo5vpv0pc] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-muted, #64748b);
}

/* ── Alanlar ──────────────────────────────────────────────────── */
.ae-field[b-nfo5vpv0pc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ae-field__head[b-nfo5vpv0pc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ae-label[b-nfo5vpv0pc] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.ae-req[b-nfo5vpv0pc] { color: var(--ds-danger, #dc2626); }

.ae-hint[b-nfo5vpv0pc] {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ds-text-subtle, #94a3b8);
}

.ae-error[b-nfo5vpv0pc] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--ds-danger, #dc2626);
}

.ae-title-input[b-nfo5vpv0pc] {
    height: 46px;
    font-size: 1.05rem;
    font-weight: 600;
}

.ds-input.is-invalid[b-nfo5vpv0pc] {
    border-color: var(--ds-danger, #dc2626);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.ae-input--narrow[b-nfo5vpv0pc] { max-width: 160px; }

.ae-grid-2[b-nfo5vpv0pc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Markdown editor frame */
.ae-md[b-nfo5vpv0pc] {
    border-radius: var(--ds-radius-md, 12px);
    overflow: hidden;
}

.ae-md.is-invalid[b-nfo5vpv0pc] {
    outline: 2px solid var(--ds-danger, #dc2626);
    outline-offset: 1px;
}

.ae-md[b-nfo5vpv0pc]  .EasyMDEContainer .CodeMirror {
    border-color: var(--ds-border, #e2e8f0);
    border-radius: 0 0 var(--ds-radius-md, 12px) var(--ds-radius-md, 12px);
    font-family: var(--ds-font-ui, "Inter", system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.65;
}

.ae-md[b-nfo5vpv0pc]  .editor-toolbar {
    border-color: var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px) var(--ds-radius-md, 12px) 0 0;
    background: var(--ds-surface-alt, #f8fafc);
}

.ae-md[b-nfo5vpv0pc]  .editor-toolbar button.active,
.ae-md[b-nfo5vpv0pc]  .editor-toolbar button:hover {
    background: #fff;
    border-color: var(--ds-border, #e2e8f0);
}

.ae-md[b-nfo5vpv0pc]  .editor-statusbar {
    color: var(--ds-text-subtle, #94a3b8);
    font-size: 0.75rem;
}

/* ── Toggle satırları ─────────────────────────────────────────── */
.ae-toggle-row[b-nfo5vpv0pc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-alt, #f8fafc);
}

.ae-toggle-row__text[b-nfo5vpv0pc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* ── Segment (öncelik) ────────────────────────────────────────── */
.ae-seg[b-nfo5vpv0pc] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 3px;
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-sunken, #f1f5f9);
}

.ae-seg__opt[b-nfo5vpv0pc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-text-muted, #64748b);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.ae-seg__opt:hover[b-nfo5vpv0pc] { color: var(--ds-text, #0f172a); }

.ae-seg__opt:focus-visible[b-nfo5vpv0pc] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 1px;
}

.ae-seg__opt.is-active[b-nfo5vpv0pc] {
    background: #fff;
    color: var(--ds-text, #0f172a);
    border-color: var(--ds-border, #e2e8f0);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
}

.ae-seg__dot[b-nfo5vpv0pc] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-border-strong, #cbd5e1);
}

.ae-seg__opt.pri--low .ae-seg__dot[b-nfo5vpv0pc]      { background: var(--slate-400, #94a3b8); }
.ae-seg__opt.pri--normal .ae-seg__dot[b-nfo5vpv0pc]   { background: var(--brand-500, #2080d6); }
.ae-seg__opt.pri--high .ae-seg__dot[b-nfo5vpv0pc]     { background: var(--ds-warning, #d97706); }
.ae-seg__opt.pri--critical .ae-seg__dot[b-nfo5vpv0pc] { background: var(--ds-danger, #dc2626); }

/* ── Çipler (kategori, workspace, rol) ────────────────────────── */
.ae-chips[b-nfo5vpv0pc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ae-chip-btn[b-nfo5vpv0pc] {
    --cat-color: var(--brand-700, #0356a0);
    --cat-tint: var(--brand-50, #eff6ff);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-pill, 999px);
    background: #fff;
    color: var(--ds-text-muted, #475569);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ae-chip-btn[b-nfo5vpv0pc]  svg {
    width: 14px;
    height: 14px;
}

.ae-chip-btn:hover[b-nfo5vpv0pc] {
    border-color: var(--ds-border-strong, #cbd5e1);
    color: var(--ds-text, #0f172a);
}

.ae-chip-btn:focus-visible[b-nfo5vpv0pc] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.ae-chip-btn.is-active[b-nfo5vpv0pc] {
    background: var(--cat-tint);
    border-color: transparent;
    color: var(--cat-color);
    box-shadow: inset 0 0 0 1px var(--cat-color);
}

.ae-chip-btn.cat--news[b-nfo5vpv0pc]        { --cat-color: var(--brand-600, #036ac4); --cat-tint: rgba(3, 106, 196, 0.10); }
.ae-chip-btn.cat--update[b-nfo5vpv0pc]      { --cat-color: #4338ca; --cat-tint: #eef2ff; }
.ae-chip-btn.cat--warning[b-nfo5vpv0pc]     { --cat-color: #b45309; --cat-tint: #fffbeb; }
.ae-chip-btn.cat--feature[b-nfo5vpv0pc]     { --cat-color: #047857; --cat-tint: #ecfdf5; }
.ae-chip-btn.cat--maintenance[b-nfo5vpv0pc] { --cat-color: #475569; --cat-tint: #f1f5f9; }
.ae-chip-btn.cat--security[b-nfo5vpv0pc]    { --cat-color: #b91c1c; --cat-tint: #fef2f2; }

/* ── Gösterim tile'ları ───────────────────────────────────────── */
.ae-tiles[b-nfo5vpv0pc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ae-tile[b-nfo5vpv0pc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    background: #fff;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.ae-tile:hover[b-nfo5vpv0pc] { border-color: var(--ds-border-strong, #cbd5e1); }

.ae-tile:focus-visible[b-nfo5vpv0pc] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.ae-tile.is-active[b-nfo5vpv0pc] {
    border-color: var(--brand-600, #036ac4);
    background: var(--brand-50, #eff6ff);
    box-shadow: inset 0 0 0 1px var(--brand-600, #036ac4);
}

.ae-tile__icon[b-nfo5vpv0pc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ds-surface-sunken, #f1f5f9);
    color: var(--ds-text-muted, #64748b);
}

.ae-tile.is-active .ae-tile__icon[b-nfo5vpv0pc] {
    background: #fff;
    color: var(--brand-600, #036ac4);
}

.ae-tile__icon[b-nfo5vpv0pc]  svg { width: 18px; height: 18px; }

.ae-tile__text[b-nfo5vpv0pc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ae-tile__text strong[b-nfo5vpv0pc] {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.ae-tile__text small[b-nfo5vpv0pc] {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--ds-text-muted, #64748b);
}

/* Modal ayarları kutusu */
.ae-modal-box[b-nfo5vpv0pc] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border: 1px dashed var(--brand-200, #bfdbfe);
    border-radius: var(--ds-radius-md, 12px);
    background: rgba(3, 106, 196, 0.03);
}

.ae-img[b-nfo5vpv0pc] {
    position: relative;
    border-radius: var(--ds-radius-md, 12px);
    overflow: hidden;
    border: 1px solid var(--ds-border, #e2e8f0);
    background: var(--ds-surface-sunken, #f1f5f9);
}

.ae-img img[b-nfo5vpv0pc] {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
}

.ae-img__remove[b-nfo5vpv0pc] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    cursor: pointer;
}

.ae-img__remove[b-nfo5vpv0pc]  svg { width: 14px; height: 14px; }

.ae-img-controls[b-nfo5vpv0pc] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ae-img-controls .ds-input[b-nfo5vpv0pc] { flex: 1; min-width: 0; }

.ae-upload[b-nfo5vpv0pc] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
}

.ae-upload:hover[b-nfo5vpv0pc] { border-color: var(--brand-600, #036ac4); color: var(--brand-600, #036ac4); }
.ae-upload.is-busy[b-nfo5vpv0pc] { opacity: 0.7; pointer-events: none; }

.ae-upload[b-nfo5vpv0pc]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ae-upload[b-nfo5vpv0pc]  svg { width: 16px; height: 16px; }

/* ── Önizleme kartı ───────────────────────────────────────────── */
.ae-card--preview[b-nfo5vpv0pc] {
    gap: 10px;
    background: var(--ds-surface-alt, #f8fafc);
}

.ae-preview[b-nfo5vpv0pc] {
    --cat-color: var(--slate-500, #64748b);
    --cat-tint: var(--slate-100, #f1f5f9);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    overflow: hidden;
}

.ae-preview.is-muted[b-nfo5vpv0pc] { opacity: 0.6; }

.ae-preview.cat--news[b-nfo5vpv0pc]        { --cat-color: var(--brand-600, #036ac4); --cat-tint: rgba(3, 106, 196, 0.10); }
.ae-preview.cat--update[b-nfo5vpv0pc]      { --cat-color: #4338ca; --cat-tint: #eef2ff; }
.ae-preview.cat--warning[b-nfo5vpv0pc]     { --cat-color: #b45309; --cat-tint: #fffbeb; }
.ae-preview.cat--feature[b-nfo5vpv0pc]     { --cat-color: #047857; --cat-tint: #ecfdf5; }
.ae-preview.cat--maintenance[b-nfo5vpv0pc] { --cat-color: #475569; --cat-tint: #f1f5f9; }
.ae-preview.cat--security[b-nfo5vpv0pc]    { --cat-color: #b91c1c; --cat-tint: #fef2f2; }

.ae-preview__media[b-nfo5vpv0pc] {
    margin: -14px -16px 6px;
    aspect-ratio: 16 / 6;
    background: var(--ds-surface-sunken, #f1f5f9);
}

.ae-preview__media img[b-nfo5vpv0pc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ae-preview__top[b-nfo5vpv0pc] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ae-preview__cat[b-nfo5vpv0pc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--cat-tint);
    color: var(--cat-color);
    font-size: 0.7rem;
    font-weight: 700;
}

.ae-preview__cat[b-nfo5vpv0pc]  svg { width: 13px; height: 13px; }

.ae-preview__title[b-nfo5vpv0pc] {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-text, #0f172a);
    overflow-wrap: anywhere;
}

.ae-preview__desc[b-nfo5vpv0pc] {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ds-text-muted, #64748b);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ae-preview__title.is-placeholder[b-nfo5vpv0pc],
.ae-preview__desc.is-placeholder[b-nfo5vpv0pc] {
    color: var(--ds-text-subtle, #94a3b8);
    font-style: italic;
    font-weight: 500;
}

.ae-chip[b-nfo5vpv0pc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill, 999px);
    font-size: 0.68rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
}

.ae-chip[b-nfo5vpv0pc]  svg { width: 11px; height: 11px; }
.ae-chip.pri--critical[b-nfo5vpv0pc] { background: #fef2f2; color: #b91c1c; }
.ae-chip.pri--high[b-nfo5vpv0pc]     { background: #fffbeb; color: #b45309; }
.ae-chip--sticky[b-nfo5vpv0pc]       { background: rgba(3, 106, 196, 0.1); color: #036ac4; }

/* ── Yapışkan eylem çubuğu ────────────────────────────────────── */
.ae-bar[b-nfo5vpv0pc] {
    grid-column: 1 / -1;
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-3, 0 8px 24px rgba(15, 23, 42, 0.10));
}

.ae-bar__status[b-nfo5vpv0pc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--ds-text-muted, #64748b);
    min-width: 0;
    flex-wrap: wrap;
}

.ae-bar__dot[b-nfo5vpv0pc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--slate-400, #94a3b8);
}

.ae-bar__dot.is-on[b-nfo5vpv0pc] { background: var(--ds-success, #16a34a); }

.ae-bar__sep[b-nfo5vpv0pc] { color: var(--ds-border-strong, #cbd5e1); }

.ae-bar__actions[b-nfo5vpv0pc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ae[b-nfo5vpv0pc] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .ae-card[b-nfo5vpv0pc] { padding: 16px; }
    .ae-seg[b-nfo5vpv0pc] { grid-template-columns: repeat(2, 1fr); }
    .ae-tiles[b-nfo5vpv0pc],
    .ae-grid-2[b-nfo5vpv0pc] { grid-template-columns: 1fr; }
    .ae-bar[b-nfo5vpv0pc] { flex-direction: column; align-items: stretch; }
    .ae-bar__actions[b-nfo5vpv0pc] { justify-content: flex-end; }
}
/* /Components/Pages/Announcements/Announcements.razor.rz.scp.css */
/* ── Duyurular — feed redesign (design-system, FluentUI-free) ────────────────
   Segmented category filter + (admin) status segments, "Öne Çıkanlar" strip,
   then a date-grouped card grid. Brand blue on the active segment only; category
   colour appears as soft tints (chip + icon), never as solid fills. */

.ann-page[b-3x5g971sgy] {
    gap: 0;
}

/* ── Header ───────────────────────────────────────────────────── */
.ann-header[b-3x5g971sgy] {
    align-items: flex-start;
    margin-bottom: 20px;
}

.ann-head[b-3x5g971sgy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ann-subtitle[b-3x5g971sgy] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ds-text-muted, #64748b);
}

/* ── Toolbar rows ─────────────────────────────────────────────── */
.ann-toolbar[b-3x5g971sgy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* Second row sits tight under the first one, separated by a hairline. */
.ann-toolbar--admin[b-3x5g971sgy] {
    margin-top: -8px;
    padding-top: 12px;
    border-top: 1px dashed var(--ds-border, #e2e8f0);
}

.ann-toolbar--clear[b-3x5g971sgy] {
    margin-top: -12px;
    justify-content: flex-end;
}

/* Segmented filter — horizontally scrollable, never wraps. */
.ann-segs[b-3x5g971sgy] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;
    margin: -2px;
}

.ann-segs[b-3x5g971sgy]::-webkit-scrollbar { display: none; }

.ann-seg[b-3x5g971sgy] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text-muted, #475569);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ds-dur-fast, 120ms) ease, border-color var(--ds-dur-fast, 120ms) ease, color var(--ds-dur-fast, 120ms) ease;
}

.ann-seg[b-3x5g971sgy]  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ann-seg:hover[b-3x5g971sgy] {
    border-color: var(--ds-border-strong, #cbd5e1);
    color: var(--ds-text, #0f172a);
}

.ann-seg:focus-visible[b-3x5g971sgy] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.ann-seg.is-active[b-3x5g971sgy] {
    background: var(--brand-600, #036ac4);
    border-color: var(--brand-600, #036ac4);
    color: #fff;
}

.ann-seg__count[b-3x5g971sgy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--ds-surface-sunken, #f1f5f9);
    color: var(--ds-text-muted, #64748b);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ann-seg.is-active .ann-seg__count[b-3x5g971sgy] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Category tint on the segment icon (inactive state only). */
.ann-seg.cat--news:not(.is-active)[b-3x5g971sgy]  svg        { color: var(--brand-600, #036ac4); }
.ann-seg.cat--update:not(.is-active)[b-3x5g971sgy]  svg      { color: #4f46e5; }
.ann-seg.cat--warning:not(.is-active)[b-3x5g971sgy]  svg     { color: #d97706; }
.ann-seg.cat--feature:not(.is-active)[b-3x5g971sgy]  svg     { color: #059669; }
.ann-seg.cat--maintenance:not(.is-active)[b-3x5g971sgy]  svg { color: #64748b; }
.ann-seg.cat--security:not(.is-active)[b-3x5g971sgy]  svg    { color: #dc2626; }

/* Smaller status segments (admin row). */
.ann-seg--sm[b-3x5g971sgy] {
    height: 30px;
    padding: 0 10px;
    font-size: 0.76rem;
}

.ann-seg--sm .ann-seg__count[b-3x5g971sgy] {
    min-width: 18px;
    height: 18px;
    font-size: 0.68rem;
}

.ann-seg__dot[b-3x5g971sgy] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ds-border-strong, #cbd5e1);
    flex-shrink: 0;
}

.ann-seg.is-active .ann-seg__dot[b-3x5g971sgy] { background: #fff; }

.st--published .ann-seg__dot[b-3x5g971sgy],
.ann-chip.st--published .ann-chip__dot[b-3x5g971sgy] { background: var(--ds-success, #16a34a); }
.st--scheduled .ann-seg__dot[b-3x5g971sgy],
.ann-chip.st--scheduled .ann-chip__dot[b-3x5g971sgy] { background: var(--brand-500, #2080d6); }
.st--expired .ann-seg__dot[b-3x5g971sgy],
.ann-chip.st--expired .ann-chip__dot[b-3x5g971sgy]   { background: var(--ds-warning, #d97706); }
.st--inactive .ann-seg__dot[b-3x5g971sgy],
.ann-chip.st--inactive .ann-chip__dot[b-3x5g971sgy]  { background: var(--slate-400, #94a3b8); }
.st--archived .ann-seg__dot[b-3x5g971sgy],
.ann-chip.st--archived .ann-chip__dot[b-3x5g971sgy]  { background: var(--slate-500, #64748b); }

/* Search + selects */
.ann-search[b-3x5g971sgy] {
    position: relative;
    flex: 0 1 300px;
    min-width: 200px;
}

.ann-search__icon[b-3x5g971sgy] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--ds-text-subtle, #94a3b8);
    pointer-events: none;
}

.ann-search__icon[b-3x5g971sgy]  svg {
    width: 18px;
    height: 18px;
}

.ann-search__input[b-3x5g971sgy] {
    padding-left: 38px;
    height: 38px;
}

.ann-tools[b-3x5g971sgy] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ann-filter-select[b-3x5g971sgy] {
    width: auto;
    min-width: 150px;
    max-width: 220px;
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.82rem;
    cursor: pointer;
}

/* ── Sections / groups ────────────────────────────────────────── */
.ann-section[b-3x5g971sgy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.ann-section__head[b-3x5g971sgy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ann-eyebrow[b-3x5g971sgy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-muted, #64748b);
}

.ann-eyebrow[b-3x5g971sgy]  svg {
    width: 14px;
    height: 14px;
    color: var(--brand-600, #036ac4);
}

.ann-section__count[b-3x5g971sgy] {
    font-size: 0.78rem;
    color: var(--ds-text-subtle, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.ann-group[b-3x5g971sgy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ann-group + .ann-group[b-3x5g971sgy] {
    margin-top: 8px;
}

/* Date label with a hairline running to the right edge. */
.ann-group__label[b-3x5g971sgy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.ann-group__label[b-3x5g971sgy]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ds-border, #e2e8f0);
}

/* ── Grids ────────────────────────────────────────────────────── */
.ann-grid[b-3x5g971sgy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.ann-featured[b-3x5g971sgy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: 14px;
}

/* ── Card ─────────────────────────────────────────────────────── */
.ann-card[b-3x5g971sgy] {
    --cat-color: var(--slate-500, #64748b);
    --cat-tint: var(--slate-100, #f1f5f9);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    overflow: hidden;
    cursor: pointer;
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.ann-card:hover[b-3x5g971sgy] {
    transform: translateY(-3px);
    border-color: var(--brand-300, #93c5fd);
    box-shadow: var(--ds-shadow-3, 0 8px 24px rgba(15, 23, 42, 0.10));
}

.ann-card:focus-visible[b-3x5g971sgy] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.ann-card.is-muted .ann-card__body[b-3x5g971sgy] { opacity: 0.72; }

.ann-card.cat--news[b-3x5g971sgy]        { --cat-color: var(--brand-600, #036ac4); --cat-tint: rgba(3, 106, 196, 0.10); }
.ann-card.cat--update[b-3x5g971sgy]      { --cat-color: #4338ca; --cat-tint: #eef2ff; }
.ann-card.cat--warning[b-3x5g971sgy]     { --cat-color: #b45309; --cat-tint: #fffbeb; }
.ann-card.cat--feature[b-3x5g971sgy]     { --cat-color: #047857; --cat-tint: #ecfdf5; }
.ann-card.cat--maintenance[b-3x5g971sgy] { --cat-color: #475569; --cat-tint: #f1f5f9; }
.ann-card.cat--security[b-3x5g971sgy]    { --cat-color: #b91c1c; --cat-tint: #fef2f2; }

.ann-card__media[b-3x5g971sgy] {
    aspect-ratio: 16 / 7;
    background: var(--ds-surface-sunken, #f1f5f9);
    overflow: hidden;
}

.ann-card__media img[b-3x5g971sgy] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ann-card__body[b-3x5g971sgy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 14px;
    min-width: 0;
    flex: 1;
}

.ann-card__top[b-3x5g971sgy] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.ann-card__date[b-3x5g971sgy] {
    margin-left: auto;
    font-size: 0.76rem;
    color: var(--ds-text-subtle, #94a3b8);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ann-cat[b-3x5g971sgy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--cat-tint);
    color: var(--cat-color);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.ann-cat[b-3x5g971sgy]  svg {
    width: 14px;
    height: 14px;
}

.ann-card__title[b-3x5g971sgy] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ds-text, #0f172a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.ann-card__desc[b-3x5g971sgy] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ds-text-muted, #64748b);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.ann-card__foot[b-3x5g971sgy] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--ds-border, #eef2f6);
}

.ann-meta[b-3x5g971sgy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    color: var(--ds-text-subtle, #94a3b8);
    white-space: nowrap;
}

.ann-meta[b-3x5g971sgy]  svg {
    width: 14px;
    height: 14px;
}

.ann-card__more[b-3x5g971sgy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-600, #036ac4);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.ann-card__more[b-3x5g971sgy]  svg {
    width: 14px;
    height: 14px;
}

.ann-card:hover .ann-card__more[b-3x5g971sgy],
.ann-card:focus-visible .ann-card__more[b-3x5g971sgy] {
    opacity: 1;
    transform: translateX(0);
}

/* Featured — horizontal layout on wide screens, larger title. */
.ann-card--featured[b-3x5g971sgy] {
    flex-direction: row;
    border-color: var(--brand-200, #bfdbfe);
    background: linear-gradient(180deg, #fff 0%, var(--brand-50, #eff6ff) 140%);
}

.ann-card--featured .ann-card__media[b-3x5g971sgy] {
    flex: 0 0 38%;
    aspect-ratio: auto;
    min-height: 160px;
}

.ann-card__tile[b-3x5g971sgy] {
    flex: 0 0 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cat-tint);
    color: var(--cat-color);
}

.ann-card__tile[b-3x5g971sgy]  svg {
    width: 32px;
    height: 32px;
}

.ann-card--featured .ann-card__body[b-3x5g971sgy] {
    padding: 18px 20px 16px;
}

.ann-card--featured .ann-card__title[b-3x5g971sgy] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ann-card--featured .ann-card__desc[b-3x5g971sgy] {
    -webkit-line-clamp: 3;
}

/* Hover actions (admin) — float over the top-right corner. */
.ann-card__actions[b-3x5g971sgy] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: var(--ds-shadow-2, 0 4px 12px rgba(15, 23, 42, 0.08));
    opacity: 0;
    transition: opacity 120ms ease;
}

.ann-card:hover .ann-card__actions[b-3x5g971sgy],
.ann-card:focus-within .ann-card__actions[b-3x5g971sgy] {
    opacity: 1;
}

.ann-icon-btn[b-3x5g971sgy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text-muted, #64748b);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.ann-icon-btn:hover[b-3x5g971sgy] {
    background: rgba(3, 106, 196, 0.1);
    color: var(--brand-600, #036ac4);
}

.ann-icon-btn:focus-visible[b-3x5g971sgy] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 1px;
}

.ann-icon-btn[b-3x5g971sgy]  svg {
    width: 16px;
    height: 16px;
}

/* ── Chips: soft tint + darker text ───────────────────────────── */
.ann-chip[b-3x5g971sgy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill, 999px);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    background: #f1f5f9;
    color: #475569;
}

.ann-chip[b-3x5g971sgy]  svg {
    width: 12px;
    height: 12px;
}

.ann-chip__dot[b-3x5g971sgy] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ann-chip.pri--critical[b-3x5g971sgy] { background: #fef2f2; color: #b91c1c; }
.ann-chip.pri--high[b-3x5g971sgy]     { background: #fffbeb; color: #b45309; }
.ann-chip--sticky[b-3x5g971sgy]       { background: rgba(3, 106, 196, 0.1); color: #036ac4; }

.ann-chip.st--scheduled[b-3x5g971sgy] { background: var(--brand-50, #eff6ff); color: var(--brand-700, #0356a0); }
.ann-chip.st--expired[b-3x5g971sgy]   { background: #fffbeb; color: #b45309; }
.ann-chip.st--inactive[b-3x5g971sgy]  { background: #f1f5f9; color: #64748b; }
.ann-chip.st--archived[b-3x5g971sgy]  { background: #f1f5f9; color: #475569; }

/* ── Load more ────────────────────────────────────────────────── */
.ann-more[b-3x5g971sgy] {
    display: flex;
    justify-content: center;
    padding: 4px 0 16px;
}

/* ── Skeleton ─────────────────────────────────────────────────── */
.ann-card--skeleton[b-3x5g971sgy] {
    gap: 10px;
    padding: 16px 18px;
    cursor: default;
    pointer-events: none;
}

.sk[b-3x5g971sgy] {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--slate-100, #f1f5f9) 25%, var(--slate-200, #e2e8f0) 50%, var(--slate-100, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: ann-shimmer-b-3x5g971sgy 1.3s ease-in-out infinite;
}

.sk--chip[b-3x5g971sgy]  { width: 84px; height: 20px; border-radius: 999px; }
.sk--title[b-3x5g971sgy] { width: 80%; height: 18px; margin-top: 4px; }
.sk--line[b-3x5g971sgy]  { width: 100%; height: 12px; }
.sk--short[b-3x5g971sgy] { width: 55%; }

@keyframes ann-shimmer-b-3x5g971sgy {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty state ──────────────────────────────────────────────── */
.ann-empty[b-3x5g971sgy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 56px 20px;
    background: var(--ds-surface, #fff);
    border: 1px dashed var(--ds-border-strong, #cbd5e1);
    border-radius: var(--ds-radius-lg, 16px);
}

.ann-empty__icon[b-3x5g971sgy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--brand-50, #eff6ff);
    color: var(--brand-600, #036ac4);
    margin-bottom: 6px;
}

.ann-empty__icon[b-3x5g971sgy]  svg {
    width: 26px;
    height: 26px;
}

.ann-empty__title[b-3x5g971sgy] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.ann-empty__desc[b-3x5g971sgy] {
    margin: 0 0 6px;
    font-size: 0.875rem;
    color: var(--ds-text-muted, #64748b);
    max-width: 340px;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ann-toolbar[b-3x5g971sgy] {
        flex-direction: column;
        align-items: stretch;
    }

    .ann-search[b-3x5g971sgy] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ann-tools[b-3x5g971sgy] {
        flex-wrap: wrap;
    }

    .ann-card--featured[b-3x5g971sgy] {
        flex-direction: column;
    }

    .ann-card--featured .ann-card__media[b-3x5g971sgy] {
        flex: 0 0 auto;
        aspect-ratio: 16 / 7;
        min-height: 0;
    }

    .ann-card__tile[b-3x5g971sgy] {
        flex: 0 0 auto;
        height: 64px;
    }
}

@media (max-width: 640px) {
    .ann-grid[b-3x5g971sgy] {
        grid-template-columns: 1fr;
    }

    .ann-filter-select[b-3x5g971sgy] {
        flex: 1 1 auto;
        max-width: none;
    }

    .ann-card__actions[b-3x5g971sgy] {
        opacity: 1;
    }

    .ann-card__more[b-3x5g971sgy] {
        opacity: 1;
        transform: none;
    }
}
/* /Components/Pages/CallHistory/CallHistoryModal.razor.rz.scp.css */
.ch[b-ebcbp7u83i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    min-height: 200px;
}

/* ---- Search + filter row ---- */
.ch__search[b-ebcbp7u83i] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.ch__search-icon[b-ebcbp7u83i] {
    width: 18px;
    height: 18px;
    color: var(--fg-hint, #64748b);
    flex-shrink: 0;
    margin-right: -28px;
    margin-left: 10px;
    pointer-events: none;
    z-index: 1;
}

.ch__search-input[b-ebcbp7u83i] {
    flex: 1 1 220px;
    min-width: 0;
    height: 40px;
    padding: 0 14px 0 36px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 10px);
    background: var(--bg, #fff);
    color: var(--fg-1, #0f172a);
    font: inherit;
    font-size: 14px;
    transition: border-color var(--dur-fast, 150ms) ease;
}

.ch__search-input:focus-visible[b-ebcbp7u83i] {
    outline: none;
    border-color: var(--accent, #036ac4);
}

.ch__filter[b-ebcbp7u83i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fg-3, #475569);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.ch__filter input[b-ebcbp7u83i] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent, #036ac4);
    cursor: pointer;
}

/* ---- Loading / empty states ---- */
.ch__loading[b-ebcbp7u83i],
.ch__empty[b-ebcbp7u83i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 12px);
    padding: var(--space-10, 40px) var(--space-4, 16px);
    color: var(--fg-hint, #64748b);
    text-align: center;
}

.ch__empty svg[b-ebcbp7u83i] {
    color: var(--border-strong, #cbd5e1);
}

.ch__empty p[b-ebcbp7u83i] {
    margin: 0;
    font-size: 14px;
    color: var(--fg-hint, #64748b);
}

/* ---- List ---- */
.ch__list[b-ebcbp7u83i] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.ch__row[b-ebcbp7u83i] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-xl, 12px);
    background: var(--bg, #fff);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.05));
    transition: border-color var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease;
}

.ch__row:hover[b-ebcbp7u83i] {
    border-color: var(--border-strong, #cbd5e1);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(15, 23, 42, 0.07));
}

.ch__row-icon[b-ebcbp7u83i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-soft, #eff6ff);
    color: var(--accent, #036ac4);
}

.ch__row-icon svg[b-ebcbp7u83i] {
    width: 18px;
    height: 18px;
}

.ch__row-main[b-ebcbp7u83i] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ch__row-line[b-ebcbp7u83i] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
}

.ch__phone[b-ebcbp7u83i] {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-1, #0f172a);
}

.ch__caller[b-ebcbp7u83i] {
    font-size: 13px;
    color: var(--fg-3, #475569);
}

/* Matched (saved) customer — accent-tinted with a person glyph to distinguish it
   from the raw CallerID-reported name. */
.ch__customer[b-ebcbp7u83i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #036ac4);
}

.ch__customer svg[b-ebcbp7u83i] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.ch__row-meta[b-ebcbp7u83i] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--fg-hint, #64748b);
}

.ch__row-aside[b-ebcbp7u83i] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
}

/* ---- Order status badge ---- */
.ch__badge[b-ebcbp7u83i] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill, 9999px);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ch__badge--info[b-ebcbp7u83i] {
    background: var(--status-info-bg, #eff6ff);
    color: var(--status-info-fg, #1d4ed8);
}

.ch__badge--success[b-ebcbp7u83i] {
    background: var(--status-success-bg, #f0fdf4);
    color: var(--status-success-fg, #166534);
}

.ch__badge--danger[b-ebcbp7u83i] {
    background: var(--status-danger-bg, #fef2f2);
    color: var(--status-danger-fg, #b91c1c);
}

.ch__badge--muted[b-ebcbp7u83i] {
    background: var(--bg-subtle, #f1f5f9);
    color: var(--fg-hint, #64748b);
}

/* ---- Load more ---- */
.ch__more[b-ebcbp7u83i] {
    display: flex;
    justify-content: center;
    padding-top: var(--space-2, 8px);
}

@media (max-width: 560px) {
    .ch__row[b-ebcbp7u83i] {
        flex-wrap: wrap;
    }
    .ch__row-aside[b-ebcbp7u83i] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/Pages/Companies/Companies.razor.rz.scp.css */
/* Companies list page — filter bar sizing only. Layout comes from the global
   .page-container / .page-header / .fbar classes in app.css. */

.cmp-firm-select[b-ju9607m7e5] {
    width: 250px;
}

.cmp-search-input[b-ju9607m7e5] {
    width: 220px;
}

@media (max-width: 720px) {
    .cmp-firm-select[b-ju9607m7e5],
    .cmp-search-input[b-ju9607m7e5] {
        width: 100%;
    }
}
/* /Components/Pages/Companies/CompaniesGrid.razor.rz.scp.css */
/* CompaniesGrid — cell presentation. Grid chrome itself comes from AppDataGrid. */

.cg-identity[b-132h304pkr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.cg-avatar[b-132h304pkr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--accent);
}

.cg-avatar[b-132h304pkr]  svg:not([fill="none"]),
.cg-avatar[b-132h304pkr]  svg:not([fill="none"]) path { fill: currentColor; }
.cg-avatar[b-132h304pkr]  svg[fill="none"] { stroke: currentColor; }

.cg-address[b-132h304pkr] {
    display: block;
    color: var(--fg-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cg-act-row[b-132h304pkr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.cg-act-btn[b-132h304pkr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--layer-1);
    color: var(--fg-2);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.cg-act-btn:hover[b-132h304pkr] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-subtle);
}

.cg-act-btn:focus-visible[b-132h304pkr] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cg-act-btn[b-132h304pkr]  svg:not([fill="none"]),
.cg-act-btn[b-132h304pkr]  svg:not([fill="none"]) path { fill: currentColor; }
.cg-act-btn[b-132h304pkr]  svg[fill="none"] { stroke: currentColor; }
/* /Components/Pages/Companies/CompanyDetails.razor.rz.scp.css */
/* =====================================================================
   CompanyDetails — design-system (FluentUI-free) styles.
   Semantic tokens only (see app.css :root). Layout rides on the global
   .page-container / .page-header / .page-title classes.
   ===================================================================== */

.cd-page[b-4sll5x1wvp] {
    gap: var(--space-5);
}

/* ---- Header actions (right side of .page-header) ---- */
.cd-header-actions[b-4sll5x1wvp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ---- Card ---- */
.cd-card[b-4sll5x1wvp] {
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 1100px;
}

.cd-card-head[b-4sll5x1wvp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.cd-card-ico[b-4sll5x1wvp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
}

.cd-card-headtext[b-4sll5x1wvp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cd-eyebrow[b-4sll5x1wvp] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 700;
    letter-spacing: var(--tracking-caps, 0.08em);
    text-transform: uppercase;
    color: var(--fg-hint);
}

.cd-card-title[b-4sll5x1wvp] {
    margin: 0;
    font-family: var(--font-display, var(--font-ui));
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg-1);
    line-height: 1.3;
}

.cd-card-desc[b-4sll5x1wvp] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    line-height: 1.5;
    color: var(--fg-3);
    max-width: 78ch;
}

/* ---- Form grid ---- */
.cd-form[b-4sll5x1wvp] {
    display: block;
}

.cd-grid[b-4sll5x1wvp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.cd-field--full[b-4sll5x1wvp] {
    grid-column: 1 / -1;
}

.cd-req[b-4sll5x1wvp] {
    color: var(--danger-600);
    margin-left: 2px;
}

.cd-help[b-4sll5x1wvp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--fg-hint);
}

.cd-switch-field[b-4sll5x1wvp] {
    justify-content: flex-start;
    align-items: flex-start;
}

/* PhoneMaskInput fills the field width beneath our own .ds-label. */
.cd-phone[b-4sll5x1wvp]  fluent-text-field {
    width: 100%;
}

/* ---- Footer ---- */
.cd-card-foot[b-4sll5x1wvp] {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
}

/* ---- Loading ---- */
.cd-loading[b-4sll5x1wvp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    color: var(--fg-3);
}

.cd-loading-text[b-4sll5x1wvp] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
}

/* ---- FluentIcon glyph colouring (icons inherit currentColor) ---- */
.cd-card-ico[b-4sll5x1wvp]  svg:not([fill="none"]),
.cd-card-ico[b-4sll5x1wvp]  svg:not([fill="none"]) path {
    fill: currentColor;
}

.cd-card-ico[b-4sll5x1wvp]  svg[fill="none"] {
    stroke: currentColor;
}

.cd-help[b-4sll5x1wvp]  svg:not([fill="none"]),
.cd-help[b-4sll5x1wvp]  svg:not([fill="none"]) path {
    fill: currentColor;
}

.cd-help[b-4sll5x1wvp]  svg[fill="none"] {
    stroke: currentColor;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .cd-grid[b-4sll5x1wvp] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cd-field--full[b-4sll5x1wvp] {
        grid-column: auto;
    }
}
/* /Components/Pages/Companies/CreateCompanyDialog.razor.rz.scp.css */
/* CreateCompanyDialog — 5-step company creator inside AppModal.
   Chrome (backdrop, card, header, footer) comes from AppModal. */

.cc-form[b-b21br5wy7h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ---- Stepper ---- */
.cc-stepper[b-b21br5wy7h] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: 0 0 var(--space-4);
    list-style: none;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
}

.cc-step[b-b21br5wy7h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 0;
    min-width: 76px;
    text-align: center;
}

.cc-step-dot[b-b21br5wy7h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-3);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 600;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.cc-step-label[b-b21br5wy7h] {
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-3);
    line-height: 1.3;
}

.cc-step.is-active .cc-step-dot[b-b21br5wy7h] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--fg-on-brand);
}

.cc-step.is-active .cc-step-label[b-b21br5wy7h] {
    color: var(--fg-1);
    font-weight: 600;
}

.cc-step.is-done .cc-step-dot[b-b21br5wy7h] {
    background: var(--bg-subtle);
    border-color: var(--accent);
    color: var(--accent);
}

.cc-step.is-done .cc-step-label[b-b21br5wy7h] { color: var(--fg-2); }

/* ---- Panels & fields ---- */
.cc-panel[b-b21br5wy7h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cc-heading[b-b21br5wy7h] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg-1);
}

.cc-row[b-b21br5wy7h] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .cc-row[b-b21br5wy7h] { grid-template-columns: minmax(0, 1fr); }
}

.cc-muted[b-b21br5wy7h] {
    margin: 0;
    color: var(--fg-3);
    font-size: var(--small-size, 0.875rem);
}

.cc-divider[b-b21br5wy7h] {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border-subtle);
}

.cc-validation[b-b21br5wy7h] {
    color: var(--danger-600);
    font-size: var(--small-size, 0.875rem);
}

/* ---- Map ---- */
.cc-map-wrap[b-b21br5wy7h] {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.cc-map-search[b-b21br5wy7h] {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cc-map-input[b-b21br5wy7h] {
    flex: 1;
    box-shadow: var(--shadow-md);
}

.cc-map-btn[b-b21br5wy7h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--fg-on-brand);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

.cc-map-btn:hover[b-b21br5wy7h] { filter: brightness(1.06); }

.cc-map-btn:focus-visible[b-b21br5wy7h] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cc-map-btn[b-b21br5wy7h]  svg:not([fill="none"]),
.cc-map-btn[b-b21br5wy7h]  svg:not([fill="none"]) path { fill: currentColor; }
.cc-map-btn[b-b21br5wy7h]  svg[fill="none"] { stroke: currentColor; }

/* ---- Callouts ---- */
.cc-callout[b-b21br5wy7h] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.cc-callout--info[b-b21br5wy7h] {
    border-color: var(--accent);
    background: var(--bg-subtle);
}

.cc-callout--info .cc-callout-icon[b-b21br5wy7h] { color: var(--accent); }

.cc-callout--success[b-b21br5wy7h] {
    border-color: var(--success-600);
    background: var(--status-success-bg);
}

.cc-callout--success .cc-callout-icon[b-b21br5wy7h] { color: var(--success-600); }

.cc-callout-icon[b-b21br5wy7h] {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 2px;
}

.cc-callout-icon[b-b21br5wy7h]  svg:not([fill="none"]),
.cc-callout-icon[b-b21br5wy7h]  svg:not([fill="none"]) path { fill: currentColor; }
.cc-callout-icon[b-b21br5wy7h]  svg[fill="none"] { stroke: currentColor; }

.cc-callout-title[b-b21br5wy7h] {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    color: var(--fg-1);
}

.cc-callout-text[b-b21br5wy7h] {
    margin: 0;
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-2);
    line-height: 1.5;
}

/* ---- Radio group ---- */
.cc-radio-group[b-b21br5wy7h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.cc-radio-group > legend[b-b21br5wy7h] {
    padding: 0;
    margin-bottom: var(--space-2);
}

.cc-radio-row[b-b21br5wy7h] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--layer-1);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cc-radio-row:hover[b-b21br5wy7h] { border-color: var(--accent); }

.cc-radio-row.is-selected[b-b21br5wy7h] {
    border-color: var(--accent);
    background: var(--bg-subtle);
}

.cc-radio-row .ds-radio[b-b21br5wy7h] { margin-top: 2px; }

.cc-radio-body[b-b21br5wy7h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--fg-1);
}

.cc-radio-hint[b-b21br5wy7h] {
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-3);
    line-height: 1.4;
}

/* ---- Confirmation summary cards ---- */
.cc-card[b-b21br5wy7h] {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--layer-1);
    box-shadow: var(--shadow-xs);
}

.cc-card-title[b-b21br5wy7h] {
    margin: 0 0 var(--space-3);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps, 0.08em);
    color: var(--fg-hint);
}

.cc-summary[b-b21br5wy7h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
}

.cc-summary-row[b-b21br5wy7h] {
    display: grid;
    grid-template-columns: minmax(120px, 0.5fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
}

.cc-summary-row dt[b-b21br5wy7h] {
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-3);
}

.cc-summary-row dd[b-b21br5wy7h] {
    margin: 0;
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    color: var(--fg-1);
    word-break: break-word;
}

@media (max-width: 640px) {
    .cc-summary-row[b-b21br5wy7h] { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}
/* /Components/Pages/CustomerDeliveryMonitor/CustomerDeliveryMonitor.razor.rz.scp.css */
/* ===== Delivery Tracker - Full-screen Map + Floating Panel ===== */

/* ===== Loading State ===== */
.dt-loading[b-0q53v3v20p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    gap: 16px;
    color: #888;
    font-size: 0.95rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
}

.dt-loading p[b-0q53v3v20p] {
    margin: 0;
}

/* ===== Wrapper ===== */
.dt-wrapper[b-0q53v3v20p] {
    position: fixed;
    inset: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1a1a1a;
    overflow: hidden;
}

/* ===== Map Background ===== */
.dt-map-bg[b-0q53v3v20p] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #e8e8e8;
}

.dt-map-bg > :first-child[b-0q53v3v20p] {
    width: 100% !important;
    height: 100% !important;
}

.dt-map-inactive[b-0q53v3v20p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #888;
    font-size: 1rem;
    font-weight: 500;
}

/* ===== Floating Panel ===== */
.dt-panel[b-0q53v3v20p] {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.dt-panel-inner[b-0q53v3v20p] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    pointer-events: auto;
}

/* ===== Panel Header ===== */
.dt-panel-header[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.dt-panel-header[b-0q53v3v20p]::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
}

.dt-panel-title[b-0q53v3v20p] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
}

.dt-header-actions[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dt-order-id[b-0q53v3v20p] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #888;
    background: #f0f0f0;
    padding: 4px 10px;
    border-radius: 8px;
}

.dt-chevron[b-0q53v3v20p] {
    color: #aaa;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.dt-panel.collapsed .dt-chevron[b-0q53v3v20p] {
    transform: rotate(180deg);
}

/* ===== Status Section (always visible) ===== */
.dt-status-section[b-0q53v3v20p] {
    padding: 0 20px 14px;
    flex-shrink: 0;
}

/* ===== Panel Scroll (collapsible) ===== */
.dt-panel-scroll[b-0q53v3v20p] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
    transition: max-height 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s ease;
    max-height: 50dvh;
    opacity: 1;
}

.dt-panel.collapsed .dt-panel-scroll[b-0q53v3v20p] {
    max-height: 0;
    opacity: 0;
    padding: 0 16px;
    overflow: hidden;
}

/* Terminal-state full-screen takeover — when the delivery is Delivered/Cancelled/NotDelivered,
   the map behind is hidden anyway and the panel should fill the viewport so the order summary
   and review form aren't crammed behind a small floating card. */
.dt-wrapper.is-final .dt-panel[b-0q53v3v20p] {
    top: 0;
}
.dt-wrapper.is-final .dt-panel .dt-panel-inner[b-0q53v3v20p] {
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}
.dt-wrapper.is-final .dt-panel-scroll[b-0q53v3v20p] {
    max-height: none;
    flex: 1;
}
.dt-wrapper.is-final .dt-map-bg[b-0q53v3v20p] {
    display: none;
}

/* ===== Cards ===== */
.dt-card[b-0q53v3v20p] {
    background: #f9f9f9;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 10px;
}

.dt-card-label[b-0q53v3v20p] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #999;
    margin-bottom: 12px;
}

/* ===== Status ===== */
.dt-progress-track[b-0q53v3v20p] {
    width: 100%;
    height: 6px;
    background: #e8e8e8;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.dt-progress-fill[b-0q53v3v20p] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background-color 0.3s ease;
}

.dt-status-row[b-0q53v3v20p] {
    margin-bottom: 6px;
}

.dt-status-badge[b-0q53v3v20p] {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.dt-status-desc[b-0q53v3v20p] {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
    line-height: 1.4;
}

/* ===== Location Rows ===== */
.dt-loc-row[b-0q53v3v20p] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 5px 0;
}

.dt-loc-marker[b-0q53v3v20p] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    flex-shrink: 0;
}

.dt-loc-marker.a[b-0q53v3v20p] {
    background: #4CAF50;
}

.dt-loc-marker.b[b-0q53v3v20p] {
    background: #2196F3;
}

.dt-loc-info[b-0q53v3v20p] {
    flex: 1;
    min-width: 0;
}

.dt-loc-title[b-0q53v3v20p] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1px;
}

.dt-loc-addr[b-0q53v3v20p] {
    font-size: 0.78rem;
    color: #999;
    line-height: 1.35;
    word-break: break-word;
}

.dt-loc-name[b-0q53v3v20p] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

.dt-loc-divider[b-0q53v3v20p] {
    height: 1px;
    background: #eee;
    margin: 6px 0 6px 42px;
}

.dt-courier-avatar[b-0q53v3v20p] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.dt-courier-avatar svg[b-0q53v3v20p] {
    display: block;
}

/* ===== Last Update ===== */
.dt-update-row[b-0q53v3v20p] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.dt-update-text[b-0q53v3v20p] {
    font-size: 0.75rem;
    color: #bbb;
}

/* ===== Refresh Button (in header) ===== */
.dt-refresh-btn[b-0q53v3v20p] {
    width: 30px;
    height: 30px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    padding: 0;
    transition: all 0.15s;
    flex-shrink: 0;
}

.dt-refresh-btn:hover[b-0q53v3v20p] {
    border-color: #ccc;
    background: #fafafa;
    color: #555;
}

.dt-refresh-btn:active[b-0q53v3v20p] {
    transform: scale(0.93);
}

/* ===== Order Items ===== */
.dt-item-row[b-0q53v3v20p] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.dt-item-row:last-of-type[b-0q53v3v20p] {
    border-bottom: none;
}

.dt-item-qty[b-0q53v3v20p] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a1a1a;
    min-width: 22px;
    flex-shrink: 0;
}

.dt-item-name[b-0q53v3v20p] {
    flex: 1;
    font-size: 0.85rem;
    color: #1a1a1a;
    font-weight: 500;
}

.dt-item-price[b-0q53v3v20p] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
}

.dt-mod-row[b-0q53v3v20p] {
    padding: 1px 0 1px 30px;
    font-size: 0.75rem;
    color: #aaa;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.dt-mod-price[b-0q53v3v20p] {
    font-weight: 600;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
}

.dt-mod-row.dt-note[b-0q53v3v20p] {
    font-style: italic;
    color: #bbb;
    display: block;
}

.dt-total-row[b-0q53v3v20p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1.5px solid #e0e0e0;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a1a1a;
}

/* ===== Rating ===== */
.dt-rating-card[b-0q53v3v20p] {
    text-align: center;
}

.dt-rating-header[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2ecc71;
    margin-bottom: 4px;
}

.dt-rating-sub[b-0q53v3v20p] {
    font-size: 0.82rem;
    color: #aaa;
    margin: 0 0 16px;
}

/* Three-up grid: Hız | Servis | Lezzet side-by-side with label on top, stars below.
   On mobile (≤520px) collapses to one column so 5 stars still fit. */
.dt-rate-grid[b-0q53v3v20p] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.dt-rate-cell[b-0q53v3v20p] {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dt-rate-label[b-0q53v3v20p] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1a1a;
}

.dt-stars[b-0q53v3v20p] {
    display: flex;
    gap: 2px;
}

@media (max-width: 520px) {
    .dt-rate-grid[b-0q53v3v20p] {
        grid-template-columns: 1fr;
    }
    .dt-rate-cell[b-0q53v3v20p] {
        flex-direction: row;
        justify-content: space-between;
    }
}

.dt-star[b-0q53v3v20p] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    transition: transform 0.15s;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dt-star:hover[b-0q53v3v20p] {
    transform: scale(1.15);
}

.dt-star:active[b-0q53v3v20p] {
    transform: scale(1.25);
}

.dt-star.on svg[b-0q53v3v20p] {
    filter: drop-shadow(0 0 4px rgba(243, 156, 18, 0.35));
}

.dt-textarea[b-0q53v3v20p] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #1a1a1a;
    background: #fafafa;
    outline: none;
    resize: none;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    margin-top: 10px;
}

.dt-textarea:focus[b-0q53v3v20p] {
    border-color: #333;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
    background: #fff;
}

.dt-textarea[b-0q53v3v20p]::placeholder {
    color: #ccc;
}

.dt-submit-btn[b-0q53v3v20p] {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    background: #1a1a1a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.1s;
    margin-top: 6px;
}
.dt-submit-btn:disabled[b-0q53v3v20p] {
    opacity: 0.6;
    cursor: default;
}
.dt-rating-error[b-0q53v3v20p] {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fff1f1;
    color: #b13528;
    border-radius: 8px;
    font-size: 0.85rem;
}

.dt-submit-btn:hover[b-0q53v3v20p] {
    background: #333;
}

.dt-submit-btn:active[b-0q53v3v20p] {
    transform: scale(0.985);
}

/* ===== Google Maps InfoWindow ===== */
[b-0q53v3v20p] .gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    max-width: 320px !important;
    overflow: visible !important;
}

[b-0q53v3v20p] .gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
    max-height: none !important;
}

[b-0q53v3v20p] .gm-style .gm-style-iw-t::after {
    background: linear-gradient(45deg, rgba(235, 235, 240, 1) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

[b-0q53v3v20p] .gm-style-iw-tc,
[b-0q53v3v20p] .gm-style-iw-tc::after,
[b-0q53v3v20p] .gm-style-iw-tc div {
    background-color: transparent !important;
}

[b-0q53v3v20p] .gm-style-iw-c {
    z-index: 999 !important;
    pointer-events: auto !important;
}

[b-0q53v3v20p] .gm-style-iw-chr {
    opacity: 0 !important;
    pointer-events: auto !important;
    display: none !important;
}

[b-0q53v3v20p] .gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    top: 5px !important;
    right: 5px !important;
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

[b-0q53v3v20p] .gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

[b-0q53v3v20p] .gm-style .gm-style-iw-c button.gm-ui-hover-effect img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    opacity: 0.8 !important;
}

[b-0q53v3v20p] .marker-info-window {
    padding: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 320px;
}

[b-0q53v3v20p] .courier-status-popup,
[b-0q53v3v20p] .delivery-point-popup {
    width: 100%;
    max-width: 320px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

[b-0q53v3v20p] .courier-status-header,
[b-0q53v3v20p] .delivery-point-header {
    padding: 10px 14px;
    color: white;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
}

[b-0q53v3v20p] .courier-status-header span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-0q53v3v20p] .point-header-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

[b-0q53v3v20p] .point-id {
    font-weight: 600;
}

[b-0q53v3v20p] .marker-info-content {
    padding: 12px 14px;
    background: #ebebf0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

[b-0q53v3v20p] .marker-info-row {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
}

[b-0q53v3v20p] .marker-info-row:last-child {
    margin-bottom: 0;
}

[b-0q53v3v20p] .marker-info-label {
    font-size: 12px;
    font-weight: 500;
    color: #555;
    width: 65px;
    flex-shrink: 0;
}

[b-0q53v3v20p] .marker-info-value {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    flex-grow: 1;
}

[b-0q53v3v20p] .status-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    display: inline-flex;
    align-items: center;
}

[b-0q53v3v20p] .marker-info-value.status {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    background-color: #e0e2e8;
}

/* ===== Scrollbar ===== */
.dt-panel-scroll[b-0q53v3v20p] {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

.dt-panel-scroll[b-0q53v3v20p]::-webkit-scrollbar {
    width: 3px;
}

.dt-panel-scroll[b-0q53v3v20p]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 20px;
}

/* ===== Desktop (768px+) ===== */
@media (min-width: 768px) {
    .dt-panel[b-0q53v3v20p] {
        top: 16px;
        bottom: 16px;
        left: 16px;
        right: auto;
        width: 400px;
    }

    .dt-panel-inner[b-0q53v3v20p] {
        border-radius: 18px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        max-height: calc(100dvh - 32px);
        height: 100%;
    }

    .dt-panel-header[b-0q53v3v20p]::before {
        display: none;
    }

    .dt-panel-header[b-0q53v3v20p] {
        padding: 20px 20px 14px;
        border-bottom: 1px solid #f0f0f0;
        cursor: default;
    }

    .dt-chevron[b-0q53v3v20p] {
        display: none;
    }

    .dt-panel-scroll[b-0q53v3v20p] {
        max-height: none;
        opacity: 1;
    }

    .dt-panel.collapsed .dt-panel-scroll[b-0q53v3v20p] {
        max-height: none;
        opacity: 1;
        overflow-y: auto;
        padding: 0 16px;
    }
}

/* ===== Large Desktop (1200px+) ===== */
@media (min-width: 1200px) {
    .dt-panel[b-0q53v3v20p] {
        width: 420px;
        top: 20px;
        bottom: 20px;
        left: 20px;
    }

    .dt-panel-inner[b-0q53v3v20p] {
        max-height: calc(100dvh - 40px);
    }
}
/* /Components/Pages/Customers/CreateCustomerDialog.razor.rz.scp.css */
.cc-form[b-wpi5ww43wo] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cc-req[b-wpi5ww43wo] {
    color: var(--error, #d13438);
    margin-left: 2px;
}
/* /Components/Pages/Customers/CustomerDetails.razor.rz.scp.css */
/* =====================================================================
   Customer Details — token-driven (design-system --ds-* tokens).
   White surfaces, subtle slate borders, no FluentUI neutral-layer grays.
   ===================================================================== */

/* Page Container */
.cd-container[b-d7ovw6l3q5] {
    padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    height: 100%;
    overflow-y: auto;
    background: var(--ds-surface-sunken);
    font-family: var(--ds-font-ui);
    color: var(--ds-text);
}

/* ===== Page header ===== */
.cd-page-header[b-d7ovw6l3q5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
}
.cd-identity[b-d7ovw6l3q5] { min-width: 0; }
.cd-name[b-d7ovw6l3q5] {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ds-text);
    font-size: 1.6rem;
    line-height: 1.15;
}
.cd-subtitle[b-d7ovw6l3q5] {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    color: var(--ds-text-muted);
}

.cd-page-actions[b-d7ovw6l3q5] { display: flex; gap: var(--ds-space-2); flex-shrink: 0; }

/* Header action links (WhatsApp / Ara) — styled like ghost buttons */
.cd-action[b-d7ovw6l3q5] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 8px 14px;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--ds-dur) var(--ds-ease),
                border-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
}
.cd-action:hover[b-d7ovw6l3q5] {
    background: var(--brand-50);
    border-color: var(--brand-600);
    color: var(--brand-700);
}
.cd-action:focus-visible[b-d7ovw6l3q5] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}
.cd-action-icon[b-d7ovw6l3q5] { display: inline-flex; color: var(--brand-600); }
.cd-action-icon[b-d7ovw6l3q5]  svg { width: 16px; height: 16px; }

/* ===== KPI strip ===== */
.cd-kpis[b-d7ovw6l3q5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ds-space-3);
}
.cd-kpi[b-d7ovw6l3q5] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
    padding: 14px 16px;
}
.cd-kpi-icon[b-d7ovw6l3q5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-50);
    color: var(--brand-600);
    flex-shrink: 0;
}
.cd-kpi-icon[b-d7ovw6l3q5]  svg { width: 18px; height: 18px; }
.cd-kpi-text[b-d7ovw6l3q5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.cd-kpi-label[b-d7ovw6l3q5] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ds-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-kpi-value[b-d7ovw6l3q5] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Dashboard body ===== */
.cd-dash[b-d7ovw6l3q5] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--ds-space-4);
    align-items: flex-start;
}
.cd-dash-main[b-d7ovw6l3q5], .cd-dash-side[b-d7ovw6l3q5] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    min-width: 0;
}

/* ===== Card ===== */
.cd-card[b-d7ovw6l3q5] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
    padding: var(--ds-space-4) 18px;
}
.cd-card--flush[b-d7ovw6l3q5] { padding: 0; overflow: hidden; }
.cd-card-header[b-d7ovw6l3q5] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ds-text);
    margin-bottom: var(--ds-space-3);
}
.cd-card-icon[b-d7ovw6l3q5] { display: inline-flex; color: var(--brand-600); flex-shrink: 0; }
.cd-card-icon[b-d7ovw6l3q5]  svg { width: 16px; height: 16px; }
.cd-card-header--inset[b-d7ovw6l3q5] { padding: var(--ds-space-4) 18px 0; margin-bottom: var(--ds-space-2); }
.cd-card-header-spacer[b-d7ovw6l3q5] { flex: 1; }
.cd-card-header-hint[b-d7ovw6l3q5] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    font-weight: 500;
}
.cd-card-actions[b-d7ovw6l3q5] { display: flex; justify-content: flex-end; margin-top: var(--ds-space-3); }

/* ===== Form row: phone / name / email ===== */
.cd-form-row[b-d7ovw6l3q5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-space-3);
    align-items: end;
}

/* ===== Monthly snapshot ===== */
.cd-monthly-grid[b-d7ovw6l3q5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-space-3);
}
.cd-monthly-cell[b-d7ovw6l3q5] {
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cd-monthly-label[b-d7ovw6l3q5] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cd-monthly-value[b-d7ovw6l3q5] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ds-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cd-monthly-value--text[b-d7ovw6l3q5] { font-size: 1.05rem; }
.cd-monthly-sub[b-d7ovw6l3q5] {
    font-size: 11px;
    color: var(--ds-text-muted);
}
.cd-bar[b-d7ovw6l3q5] {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: var(--brand-100);
    overflow: hidden;
}
.cd-bar-fill[b-d7ovw6l3q5] {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
    border-radius: 4px;
    transition: width var(--ds-dur-slow) var(--ds-ease);
}
.cd-monthly-channels[b-d7ovw6l3q5] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cd-channel-chip[b-d7ovw6l3q5] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill);
    background: var(--brand-50);
    color: var(--brand-700);
}

/* ===== Integration sources ===== */
.cd-sources[b-d7ovw6l3q5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--ds-space-2);
}
.cd-source[b-d7ovw6l3q5] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 10px 12px;
}
.cd-source-logo[b-d7ovw6l3q5] {
    width: 36px;
    height: 36px;
    border-radius: var(--ds-radius-sm);
    object-fit: contain;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cd-source-logo--fallback[b-d7ovw6l3q5] {
    background: var(--ds-surface);
    color: var(--ds-text-subtle);
}
.cd-source-logo-ic[b-d7ovw6l3q5] { display: inline-flex; }
.cd-source-logo-ic[b-d7ovw6l3q5]  svg { width: 16px; height: 16px; }
.cd-source-body[b-d7ovw6l3q5] { display: flex; flex-direction: column; min-width: 0; }
.cd-source-name[b-d7ovw6l3q5] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text);
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-source-meta[b-d7ovw6l3q5] { font-size: 11px; color: var(--ds-text-muted); }

/* ===== Monthly breakdown ===== */
.cd-months[b-d7ovw6l3q5] { display: flex; flex-direction: column; }
.cd-month-row[b-d7ovw6l3q5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 10px 18px;
    border-top: 1px solid var(--ds-border);
}
.cd-month-row:first-child[b-d7ovw6l3q5] { border-top: none; }
.cd-month-name[b-d7ovw6l3q5] { font-weight: 600; text-transform: capitalize; color: var(--ds-text); }
.cd-month-count[b-d7ovw6l3q5] { color: var(--ds-text-muted); font-size: 0.85rem; }
.cd-month-spent[b-d7ovw6l3q5] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 600;
    color: var(--ds-text);
}

/* ===== Activity feed (orders) ===== */
.cd-activity-feed[b-d7ovw6l3q5] { display: flex; flex-direction: column; padding-bottom: 6px; }
.cd-activity-item[b-d7ovw6l3q5] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto auto auto;
    gap: var(--ds-space-2);
    padding: 8px 18px;
    align-items: center;
    border-bottom: 1px solid var(--ds-border);
    border-left: 3px solid transparent;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
    font-size: 0.85em;
    cursor: pointer;
}
.cd-activity-item:hover[b-d7ovw6l3q5] { background: var(--ds-surface-alt); }
.cd-activity-item:last-child[b-d7ovw6l3q5] { border-bottom: none; }
.cd-activity-item.side-success[b-d7ovw6l3q5] { border-left-color: var(--ds-success); }
.cd-activity-item.side-warning[b-d7ovw6l3q5] { border-left-color: var(--ds-warning); }
.cd-activity-item.side-error[b-d7ovw6l3q5] { border-left-color: var(--ds-danger); }
.cd-activity-item.side-info[b-d7ovw6l3q5] { border-left-color: var(--brand-600); }

.cd-activity-avatar[b-d7ovw6l3q5] {
    width: 24px; height: 24px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    display: flex; align-items: center; justify-content: center;
    padding: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.cd-activity-avatar img[b-d7ovw6l3q5] { width: 100%; height: 100%; object-fit: contain; }
.cd-activity-avatar-fallback[b-d7ovw6l3q5] {
    width: 100%; height: 100%;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.cd-activity-avatar-ic[b-d7ovw6l3q5] { display: inline-flex; }
.cd-activity-avatar-ic[b-d7ovw6l3q5]  svg { width: 14px; height: 14px; }
.cd-activity-avatar-fallback.color-dinein[b-d7ovw6l3q5] { background: var(--brand-600); }
.cd-activity-avatar-fallback.color-takeaway[b-d7ovw6l3q5] { background: var(--courier-500, #8b5cf6); }
.cd-activity-avatar-fallback.color-delivery[b-d7ovw6l3q5] { background: var(--ds-success); }
.cd-activity-avatar-fallback.color-other[b-d7ovw6l3q5] { background: var(--slate-500); }

.cd-activity-main[b-d7ovw6l3q5] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.cd-activity-id[b-d7ovw6l3q5] { font-weight: 600; font-family: var(--ds-font-mono, monospace); color: var(--ds-text); }
.cd-activity-store[b-d7ovw6l3q5] {
    font-weight: 500;
    color: var(--ds-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92em;
}
.cd-activity-tag[b-d7ovw6l3q5] {
    background: var(--ds-surface-sunken);
    color: var(--ds-text);
    padding: 1px 8px;
    border-radius: var(--ds-radius-pill);
    font-weight: 600;
    font-size: 0.9em;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-activity-time[b-d7ovw6l3q5] {
    font-size: 0.92em;
    color: var(--ds-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cd-activity-amount[b-d7ovw6l3q5] {
    font-weight: 700;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cd-activity-status[b-d7ovw6l3q5] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: var(--ds-radius-pill);
    font-size: 0.75em; font-weight: 600;
    white-space: nowrap;
}
.cd-status-dot[b-d7ovw6l3q5] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cd-activity-status.s-completed[b-d7ovw6l3q5] { background: var(--status-success-bg, #f0fdf4); color: var(--ds-success); }
.cd-activity-status.s-active[b-d7ovw6l3q5] { background: var(--brand-50); color: var(--brand-600); }
.cd-activity-status.s-pending[b-d7ovw6l3q5] { background: var(--warning-100, #fef3c7); color: var(--ds-warning); }
.cd-activity-status.s-cancelled[b-d7ovw6l3q5] { background: var(--danger-100, #fee2e2); color: var(--ds-danger); }

/* ===== Reservation list ===== */
.cd-res-list[b-d7ovw6l3q5] { display: flex; flex-direction: column; }
.cd-res-row[b-d7ovw6l3q5] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ds-space-3);
    padding: 10px 18px;
    border-bottom: 1px solid var(--ds-border);
}
.cd-res-row:last-child[b-d7ovw6l3q5] { border-bottom: none; }
.cd-res-date[b-d7ovw6l3q5] { display: flex; flex-direction: column; text-align: right; }
.cd-res-day[b-d7ovw6l3q5] { font-size: 12px; font-weight: 600; color: var(--ds-text); }
.cd-res-hour[b-d7ovw6l3q5] { font-size: 11px; color: var(--ds-text-muted); }
.cd-res-body[b-d7ovw6l3q5] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-res-title[b-d7ovw6l3q5] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-text);
}
.cd-res-title-ic[b-d7ovw6l3q5] { display: inline-flex; color: var(--ds-text-muted); }
.cd-res-title-ic[b-d7ovw6l3q5]  svg { width: 12px; height: 12px; }
.cd-res-note[b-d7ovw6l3q5] { font-size: 11px; color: var(--ds-text-muted); font-style: italic; }
.cd-dot-sep[b-d7ovw6l3q5] { opacity: 0.5; margin: 0 2px; }

/* ===== Generic status pill ===== */
.cd-status-pill[b-d7ovw6l3q5] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--ds-radius-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.cd-status-pill--ok[b-d7ovw6l3q5] { background: var(--success-100, #dcfce7); color: var(--success-700, #15803d); }
.cd-status-pill--bad[b-d7ovw6l3q5] { background: var(--danger-100, #fee2e2); color: var(--ds-danger); }
.cd-status-pill--warn[b-d7ovw6l3q5] { background: var(--warning-100, #fef3c7); color: var(--ds-warning); }
.cd-status-pill--info[b-d7ovw6l3q5] { background: var(--brand-50); color: var(--brand-600); }
.cd-status-pill--muted[b-d7ovw6l3q5] { background: var(--ds-surface-sunken); color: var(--ds-text-muted); }

/* ===== Tags ===== */
.cd-tags-area[b-d7ovw6l3q5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    padding: 4px 0;
}
.cd-tag-chip[b-d7ovw6l3q5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 10px;
    border-radius: var(--ds-radius-pill);
    border: 1px solid var(--brand-200);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--ds-dur) var(--ds-ease),
                border-color var(--ds-dur) var(--ds-ease);
}
.cd-tag-chip:hover[b-d7ovw6l3q5] { background: var(--danger-50, #fef2f2); border-color: var(--danger-300, #fca5a5); color: var(--ds-danger); }
.cd-tag-chip:focus-visible[b-d7ovw6l3q5] { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.cd-tag-chip-x[b-d7ovw6l3q5] { display: inline-flex; }
.cd-tag-chip-x[b-d7ovw6l3q5]  svg { width: 12px; height: 12px; }
.cd-tag-add[b-d7ovw6l3q5] {
    display: flex;
    align-items: stretch;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-2);
}
.cd-tag-add .ds-input[b-d7ovw6l3q5] { flex: 1; }

/* ===== Reference lists (names / addresses) ===== */
.cd-list[b-d7ovw6l3q5] { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.cd-list-item[b-d7ovw6l3q5] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 8px 10px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    transition: background-color var(--ds-dur) var(--ds-ease);
}
.cd-list-item:hover[b-d7ovw6l3q5] { background: var(--ds-surface-sunken); }
.cd-list-item--address[b-d7ovw6l3q5] { border-left: 2px solid var(--brand-600); }
.cd-list-avatar[b-d7ovw6l3q5] {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--brand-600);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
}
.cd-list-pin[b-d7ovw6l3q5] {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-50);
    color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
}
.cd-list-pin-ic[b-d7ovw6l3q5] { display: inline-flex; }
.cd-list-pin-ic[b-d7ovw6l3q5]  svg { width: 16px; height: 16px; }
.cd-list-body[b-d7ovw6l3q5] { flex: 1; min-width: 0; }
.cd-list-title[b-d7ovw6l3q5] { font-size: 13px; font-weight: 500; color: var(--ds-text); white-space: normal; overflow: hidden; text-overflow: ellipsis; }
.cd-list-sub[b-d7ovw6l3q5] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--ds-text-muted); margin-top: 2px; }
.cd-list-sub-ic[b-d7ovw6l3q5] { display: inline-flex; }
.cd-list-sub-ic[b-d7ovw6l3q5]  svg { width: 12px; height: 12px; }
.cd-list-count[b-d7ovw6l3q5] {
    flex: 0 0 auto;
    color: var(--brand-600);
    font-weight: 700;
    font-size: 12px;
    background: var(--brand-50);
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill);
}
.cd-list-pill[b-d7ovw6l3q5] {
    display: inline-flex; align-items: center;
    padding: 1px 7px;
    border-radius: var(--ds-radius-pill);
    font-size: 10px;
    font-weight: 600;
}
.cd-list-pill--ok[b-d7ovw6l3q5] { background: var(--success-100, #dcfce7); color: var(--success-700, #15803d); }
.cd-list-pill--warn[b-d7ovw6l3q5] { background: var(--warning-100, #fef3c7); color: var(--ds-warning); }

/* Empty states */
.cd-empty-inline[b-d7ovw6l3q5] {
    font-size: 12px;
    color: var(--ds-text-muted);
    padding: 4px 0;
}
.cd-empty-block[b-d7ovw6l3q5] {
    text-align: center;
    padding: 20px;
    color: var(--ds-text-muted);
    font-size: 0.85rem;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .cd-dash[b-d7ovw6l3q5] { grid-template-columns: 1fr; }
    .cd-monthly-grid[b-d7ovw6l3q5] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .cd-form-row[b-d7ovw6l3q5] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .cd-container[b-d7ovw6l3q5] { padding: var(--ds-space-3); }
    .cd-kpis[b-d7ovw6l3q5] { grid-template-columns: repeat(2, 1fr); }
    .cd-monthly-grid[b-d7ovw6l3q5] { grid-template-columns: 1fr; }
    .cd-activity-item[b-d7ovw6l3q5] {
        grid-template-columns: 24px minmax(0, 1fr) auto auto;
        gap: var(--ds-space-2);
        padding: 8px 12px;
    }
    .cd-activity-tag[b-d7ovw6l3q5], .cd-activity-time[b-d7ovw6l3q5] { display: none; }
}


/* ===== Orders + favorite products row ===== */
.cd-orders-row[b-d7ovw6l3q5] {
    display: flex;
    gap: var(--ds-space-4);
    align-items: flex-start;
    min-width: 0;
}
.cd-orders-row > .cd-orders-col[b-d7ovw6l3q5] {
    flex: 1 1 0;
    min-width: 0;
}
.cd-orders-row > .cd-fav-col[b-d7ovw6l3q5] {
    flex: 0 0 300px;
    max-width: 320px;
    min-width: 0;
    align-self: stretch;
}

/* ===== Favorite products list ===== */
.cd-fav-list[b-d7ovw6l3q5] { display: flex; flex-direction: column; padding-bottom: 6px; }
.cd-fav-item[b-d7ovw6l3q5] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 8px 18px;
    border-bottom: 1px solid var(--ds-border);
}
.cd-fav-item:last-child[b-d7ovw6l3q5] { border-bottom: none; }
.cd-fav-rank[b-d7ovw6l3q5] {
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--brand-600);
    font-variant-numeric: tabular-nums;
}
.cd-fav-main[b-d7ovw6l3q5] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cd-fav-name[b-d7ovw6l3q5] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-fav-sub[b-d7ovw6l3q5] { font-size: 11px; color: var(--ds-text-muted); }
.cd-fav-qty[b-d7ovw6l3q5] {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-text);
    background: var(--brand-50);
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1000px) {
    .cd-orders-row[b-d7ovw6l3q5] { flex-direction: column; }
    .cd-orders-row > .cd-fav-col[b-d7ovw6l3q5] { flex: 1 1 auto; max-width: none; width: 100%; }
}
/* /Components/Pages/Customers/Customers.razor.rz.scp.css */
/* Header: title left, filter toolbar right (wraps on small screens) */
.cust-header[b-x7uk6o91lr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
/* /Components/Pages/Customers/ImportCustomersDialog.razor.rz.scp.css */
/* ===== Upload step ===== */
.ic-upload[b-5hi5q31zgt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ic-firm[b-5hi5q31zgt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ic-firm-req[b-5hi5q31zgt] {
    color: var(--danger-600);
    margin-left: 2px;
}

.ic-howto[b-5hi5q31zgt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.ic-howto-head[b-5hi5q31zgt] {
    font-weight: 600;
    color: var(--fg-1);
}

.ic-howto-list[b-5hi5q31zgt] {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--fg-2);
    font-size: 0.875rem;
    line-height: 1.6;
}

.ic-cols[b-5hi5q31zgt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.ic-col-chip[b-5hi5q31zgt] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    color: var(--fg-2);
    font-size: 0.75rem;
    font-weight: 500;
}

.ic-col-chip--req[b-5hi5q31zgt] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.ic-hint[b-5hi5q31zgt] {
    color: var(--fg-hint);
    font-size: 0.75rem;
}

/* Upload drop zone — clickable label wrapping a hidden InputFile */
.ic-drop[b-5hi5q31zgt] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-8) var(--space-4);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-muted);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease);
}

.ic-drop:hover[b-5hi5q31zgt] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.ic-drop:focus-within[b-5hi5q31zgt] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ic-drop.is-busy[b-5hi5q31zgt] {
    cursor: progress;
    opacity: 0.75;
}

.ic-drop-ico[b-5hi5q31zgt] {
    color: var(--accent);
    line-height: 0;
}

.ic-drop-title[b-5hi5q31zgt] {
    font-weight: 600;
    color: var(--fg-1);
}

.ic-drop-sub[b-5hi5q31zgt] {
    color: var(--fg-hint);
    font-size: 0.8125rem;
}

/* InputFile renders its own <input>, which doesn't inherit this component's scoped
   attribute — reach it with ::deep so the native control stays visually hidden. */
.ic-drop[b-5hi5q31zgt]  .ic-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.ic-error[b-5hi5q31zgt] {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--danger-50);
    border: 1px solid var(--danger-500);
    color: var(--danger-600);
    font-size: 0.875rem;
}

/* ===== Preview step ===== */
.ic-preview[b-5hi5q31zgt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ic-summary[b-5hi5q31zgt] {
    display: flex;
    gap: var(--space-3);
}

.ic-stat[b-5hi5q31zgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-muted);
}

.ic-stat-num[b-5hi5q31zgt] {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    color: var(--fg-1);
}

.ic-stat-lbl[b-5hi5q31zgt] {
    font-size: 0.75rem;
    color: var(--fg-3);
}

.ic-stat--new .ic-stat-num[b-5hi5q31zgt] { color: var(--success-600); }
.ic-stat--update .ic-stat-num[b-5hi5q31zgt] { color: var(--accent); }
.ic-stat--invalid .ic-stat-num[b-5hi5q31zgt] { color: var(--danger-600); }

/* Table — one compact line per row */
.ic-table[b-5hi5q31zgt] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ic-tr[b-5hi5q31zgt] {
    display: grid;
    grid-template-columns: 40px minmax(96px, 1.1fr) 116px minmax(120px, 1.7fr) minmax(104px, 0.9fr);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.ic-tr:last-child[b-5hi5q31zgt] {
    border-bottom: none;
}

.ic-tbody .ic-tr:hover[b-5hi5q31zgt] {
    background: var(--bg-muted);
}

.ic-tr--head[b-5hi5q31zgt] {
    background: var(--bg-subtle);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-3);
    position: sticky;
    top: 0;
    z-index: 1;
}

.ic-tbody[b-5hi5q31zgt] {
    max-height: 380px;
    overflow-y: auto;
}

/* Every cell stays on a single line and ellipsizes on overflow. */
.ic-c[b-5hi5q31zgt] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
}

.ic-c-row[b-5hi5q31zgt] {
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

.ic-c-name[b-5hi5q31zgt] {
    font-weight: 600;
    color: var(--fg-1);
}

.ic-c-phone[b-5hi5q31zgt] {
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
}

.ic-c-addr[b-5hi5q31zgt] {
    color: var(--fg-hint);
}

.ic-c-status[b-5hi5q31zgt] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ic-badge[b-5hi5q31zgt] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
}

.ic-badge--new[b-5hi5q31zgt] {
    background: var(--success-50);
    color: var(--success-700);
}

.ic-badge--update[b-5hi5q31zgt] {
    background: var(--accent-soft);
    color: var(--accent);
}

.ic-badge--invalid[b-5hi5q31zgt] {
    background: var(--danger-50);
    color: var(--danger-600);
}

.ic-note[b-5hi5q31zgt] {
    min-width: 0;
    font-size: 0.72rem;
    color: var(--fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Pages/DailySummary/DailySummary.razor.rz.scp.css */
.gds[b-dxmnfv5p33] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--bg-subtle);
    min-height: 100%;
}

/* ---------- Header ---------- */
.gds-head[b-dxmnfv5p33] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.gds-head-text[b-dxmnfv5p33] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gds-eyebrow[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent);
}

.gds-title[b-dxmnfv5p33] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin: 0;
    line-height: 1.15;
}

.gds-sub[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    color: var(--fg-hint);
    margin: 0;
}

/* ---------- Filters ---------- */
.gds-filters[b-dxmnfv5p33] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.gds-field[b-dxmnfv5p33] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gds-flabel[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--fg-hint);
}

/* Rapor indirme (Excel / PDF) — filtre alanlarıyla aynı hizada iki hızlı buton */
.gds-report-btns[b-dxmnfv5p33] {
    display: flex;
    gap: var(--space-1);
}

.gds-daynav[b-dxmnfv5p33] {
    display: inline-flex;
    align-items: stretch;
    gap: var(--space-1);
}

.gds-step[b-dxmnfv5p33],
.gds-refresh[b-dxmnfv5p33] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.gds-step:hover:not(:disabled)[b-dxmnfv5p33],
.gds-refresh:hover:not(:disabled)[b-dxmnfv5p33] {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.gds-step:disabled[b-dxmnfv5p33],
.gds-refresh:disabled[b-dxmnfv5p33] {
    opacity: 0.45;
    cursor: not-allowed;
}

.gds-step:focus-visible[b-dxmnfv5p33],
.gds-refresh:focus-visible[b-dxmnfv5p33],
.gds-today:focus-visible[b-dxmnfv5p33],
.gds-datebox:focus-within[b-dxmnfv5p33] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.gds-step[b-dxmnfv5p33]  svg,
.gds-refresh[b-dxmnfv5p33]  svg { width: 18px; height: 18px; }

.gds-refresh[b-dxmnfv5p33] { align-self: flex-end; }

.gds-datebox[b-dxmnfv5p33] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    height: 38px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--layer-1);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
}

.gds-datelabel[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    text-transform: capitalize;
    pointer-events: none;
}

.gds-dateinput[b-dxmnfv5p33] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    cursor: pointer;
}

.gds-today[b-dxmnfv5p33] {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    height: 38px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast) ease;
}

.gds-today:hover[b-dxmnfv5p33] { background: var(--brand-100); }

/* ---------- Pace note ---------- */
.gds-pacenote[b-dxmnfv5p33] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    width: fit-content;
}

.gds-pacenote[b-dxmnfv5p33]  svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- Metric cards (system MetricCard) ---------- */
/* Headline-metrics carousel — one row that pages by 4 via translateX. No scrollbar; the prev/next
   arrows step a full page (= the viewport width = 4 cards). */
.gds-metricsbar[b-dxmnfv5p33] {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.gds-metricsvp[b-dxmnfv5p33] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.gds-metricstrack[b-dxmnfv5p33] {
    display: flex;
    transition: transform var(--dur-base) var(--ease-out);
}

.gds-mpage[b-dxmnfv5p33] {
    flex: 0 0 100%;
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}

.gds-mpage[b-dxmnfv5p33]  .metric-card-container {
    flex: 0 0 calc((100% - 3 * var(--space-3)) / 4);
    min-width: 0;
    height: auto;
}

/* The carousel viewport must clip (overflow:hidden) for the slider, so MetricCard's custom
   hover popover would be cut off. Drop it here — the icon keeps its native `title` tooltip,
   which the browser renders in the top layer and never clips. */
.gds-metricstrack[b-dxmnfv5p33]  .metric-pop { display: none; }
.gds-metricstrack[b-dxmnfv5p33]  .metric-info { cursor: help; }

.gds-mnav[b-dxmnfv5p33] {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.gds-mnav:hover:not(:disabled)[b-dxmnfv5p33] { border-color: var(--accent); color: var(--accent); }
.gds-mnav:disabled[b-dxmnfv5p33] { opacity: 0.35; cursor: default; }
.gds-mnav:focus-visible[b-dxmnfv5p33] { outline: 2px solid var(--accent); outline-offset: 2px; }
.gds-mnav[b-dxmnfv5p33]  svg { width: 18px; height: 18px; }

/* Mobile: drop the arrows and let the row scroll/swipe freely (scrollbar hidden). */
@media (max-width: 900px) {
    .gds-mnav[b-dxmnfv5p33] { display: none; }
    .gds-metricsvp[b-dxmnfv5p33] { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .gds-metricsvp[b-dxmnfv5p33]::-webkit-scrollbar { display: none; }
    .gds-metricstrack[b-dxmnfv5p33] { transform: none !important; }
    .gds-mpage[b-dxmnfv5p33] { flex: 0 0 auto; }
    .gds-mpage[b-dxmnfv5p33]  .metric-card-container { flex-basis: 46vw; }
}

/* ---------- Rows ---------- */
.gds-row[b-dxmnfv5p33] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    /* Fluid: each card sizes to its own content instead of stretching to the tallest sibling. */
    align-items: start;
}

.gds-row--full[b-dxmnfv5p33] { grid-template-columns: 1fr; }

/* "Match" row: the top-products card stretches to the taller finance card and scrolls inside.
   The card is absolutely positioned in its slot so its long list can't grow the row height. */
.gds-row--match[b-dxmnfv5p33] { align-items: stretch; }
.gds-topslot[b-dxmnfv5p33] { position: relative; min-height: 0; }
.gds-topslot[b-dxmnfv5p33]  .report-card { position: absolute; inset: 0; }

@media (max-width: 1024px) { .gds-row[b-dxmnfv5p33] { grid-template-columns: 1fr; } }
@media (max-width: 1024px) {
    /* Stacked single column: give the slot a real height and let the card flow normally. */
    .gds-topslot[b-dxmnfv5p33] { height: 460px; }
    .gds-topslot[b-dxmnfv5p33]  .report-card { position: static; }
}
@media (max-width: 640px)  { .gds[b-dxmnfv5p33] { padding: var(--space-4); } }

/* ---------- States ---------- */
.gds-state[b-dxmnfv5p33] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 120px;
    color: var(--fg-hint);
    font-family: var(--font-ui);
    font-size: var(--small-size);
}

.gds-empty[b-dxmnfv5p33]  svg { width: 30px; height: 30px; color: var(--fg-disabled); }

/* ---------- Hourly area chart (fills the card height) ---------- */
.gds-chart-wrap[b-dxmnfv5p33] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Plot area: a sensible fixed height (no longer stretched to match the Gün Detayı card).
   The SVG fills it; dots/value labels are HTML-overlaid on top. */
.gds-chart-box[b-dxmnfv5p33] {
    position: relative;
    height: 300px;
}

.gds-chart[b-dxmnfv5p33] {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.gds-chart-grid[b-dxmnfv5p33] {
    stroke: var(--border-subtle);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.gds-chart-area[b-dxmnfv5p33] {
    stroke: none;
    fill: var(--accent);
    fill-opacity: 0.13;
}

.gds-chart-line[b-dxmnfv5p33] {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Round node markers (HTML so they don't distort under the non-uniform SVG scale) */
.gds-chart-dot[b-dxmnfv5p33] {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--layer-1);
    box-shadow: 0 0 0 1px var(--accent);
}

.gds-chart-dot.is-now[b-dxmnfv5p33] {
    width: 10px;
    height: 10px;
    background: var(--warning-600);
    box-shadow: 0 0 0 1px var(--warning-600), 0 0 0 5px color-mix(in srgb, var(--warning-500) 22%, transparent);
}

.gds-chart-dotval[b-dxmnfv5p33] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

.gds-chart-dot.is-now .gds-chart-dotval[b-dxmnfv5p33] {
    color: var(--warning-600);
    font-weight: 800;
}

.gds-chart-x[b-dxmnfv5p33] {
    display: flex;
    justify-content: space-between;
}

.gds-chart-xlbl[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: 10px;
    color: var(--fg-disabled);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gds-chart-xlbl.is-now[b-dxmnfv5p33] { color: var(--warning-600); font-weight: 800; }

/* ---------- Finance / operations mini tiles ---------- */
.gds-stats[b-dxmnfv5p33] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-3);
}

.gds-stats--3[b-dxmnfv5p33] { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 480px) { .gds-stats--3[b-dxmnfv5p33] { grid-template-columns: 1fr 1fr; } }

/* Courier summary strip sits above the courier list, separated by a divider */
.gds-csummary[b-dxmnfv5p33] {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.gds-stat[b-dxmnfv5p33] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
}

.gds-stat-ico[b-dxmnfv5p33] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
}

.gds-stat-ico[b-dxmnfv5p33]  svg { width: 16px; height: 16px; }

.gds-stat-meta[b-dxmnfv5p33] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.gds-stat-l[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--fg-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gds-stat-v[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 800;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

/* ---------- Sub-section label + divider inside a card ---------- */
.gds-subhead[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-hint);
    margin-bottom: var(--space-2);
}

.gds-detail-sep[b-dxmnfv5p33] {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-3) 0;
}

/* ---------- Order-type infographic ---------- */
.gds-typewrap[b-dxmnfv5p33] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.gds-typebar[b-dxmnfv5p33] {
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--bg-subtle);
}

.gds-typeseg[b-dxmnfv5p33] { height: 100%; min-width: 3px; }

.gds-typeseg--dineIn[b-dxmnfv5p33]     { background: var(--success-500); }
.gds-typeseg--takeAway[b-dxmnfv5p33]   { background: var(--warning-500); }
.gds-typeseg--delivery[b-dxmnfv5p33]   { background: var(--accent); }
.gds-typeseg--thirdParty[b-dxmnfv5p33] { background: var(--courier-500); }
.gds-typeseg--freelance[b-dxmnfv5p33]  { background: var(--slate-400); }

.gds-typelist[b-dxmnfv5p33] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gds-typeitem[b-dxmnfv5p33] {
    display: grid;
    grid-template-columns: 30px 1fr auto auto;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.gds-typeico[b-dxmnfv5p33] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gds-typeico[b-dxmnfv5p33]  svg { width: 16px; height: 16px; }

.gds-typeico--dineIn[b-dxmnfv5p33]     { background: color-mix(in srgb, var(--success-500) 14%, transparent); color: var(--success-600); }
.gds-typeico--takeAway[b-dxmnfv5p33]   { background: color-mix(in srgb, var(--warning-500) 16%, transparent); color: var(--warning-600); }
.gds-typeico--delivery[b-dxmnfv5p33]   { background: var(--accent-soft); color: var(--accent); }
.gds-typeico--thirdParty[b-dxmnfv5p33] { background: color-mix(in srgb, var(--courier-500) 14%, transparent); color: var(--courier-600); }
.gds-typeico--freelance[b-dxmnfv5p33]  { background: var(--bg-subtle); color: var(--fg-hint); }

.gds-typename[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gds-typepct[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 800;
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
}

.gds-typevals[b-dxmnfv5p33] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gds-typevals small[b-dxmnfv5p33] {
    font-size: var(--xs-size);
    font-weight: 500;
    color: var(--fg-hint);
}

/* ---------- Top products (with image thumbnails) ---------- */
.gds-prodlist[b-dxmnfv5p33] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gds-prod[b-dxmnfv5p33] {
    display: grid;
    grid-template-columns: 16px 38px 1fr auto;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.gds-prod-rank[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    color: var(--fg-disabled);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.gds-prod-img[b-dxmnfv5p33] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-disabled);
}

.gds-prod-img img[b-dxmnfv5p33] { width: 100%; height: 100%; object-fit: cover; }
.gds-prod-img[b-dxmnfv5p33]  svg { width: 18px; height: 18px; }

.gds-prod-main[b-dxmnfv5p33] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gds-prod-name[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gds-prod-track[b-dxmnfv5p33] {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    overflow: hidden;
}

.gds-prod-fill[b-dxmnfv5p33] {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand-400), var(--accent));
    transition: width var(--dur-base) var(--ease-out);
}

.gds-prod-val[b-dxmnfv5p33] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 800;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gds-prod-val small[b-dxmnfv5p33] {
    font-size: var(--xs-size);
    font-weight: 500;
    color: var(--fg-hint);
}

/* ---------- Compact single-line bars (payments / couriers) ---------- */
.gds-cbarlist[b-dxmnfv5p33] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gds-cbar[b-dxmnfv5p33] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 34px;
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
    overflow: hidden;
}

.gds-cbar-fill[b-dxmnfv5p33] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: var(--radius-lg);
}

.gds-cbar-fill--accent[b-dxmnfv5p33]  { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.gds-cbar-fill--success[b-dxmnfv5p33] { background: color-mix(in srgb, var(--success-500) 18%, transparent); }

.gds-cbar-row[b-dxmnfv5p33] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: 0 var(--space-3);
}

.gds-cbar-label[b-dxmnfv5p33] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.gds-cbar-rank[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    color: var(--fg-disabled);
    min-width: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.gds-cbar-name[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gds-cbar-val[b-dxmnfv5p33] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 800;
    color: var(--fg-1);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gds-cbar-val small[b-dxmnfv5p33] {
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--fg-hint);
}

.gds-cbar-val small[b-dxmnfv5p33]::before {
    content: "·";
    margin-right: 6px;
    color: var(--fg-disabled);
}

/* ---------- Sales channels ---------- */
.gds-channels[b-dxmnfv5p33] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gds-channel[b-dxmnfv5p33] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-muted);
}

.gds-channel-mark[b-dxmnfv5p33] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--layer-1);
    border: 1px solid var(--border);
    overflow: hidden;
    color: var(--accent);
}

.gds-channel-mark img[b-dxmnfv5p33] { width: 100%; height: 100%; object-fit: cover; }
.gds-channel-mark[b-dxmnfv5p33]  svg { width: 18px; height: 18px; }

.gds-channel-body[b-dxmnfv5p33] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gds-channel-top[b-dxmnfv5p33] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.gds-channel-name[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gds-channel-amount[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 800;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gds-channel-track[b-dxmnfv5p33] {
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    overflow: hidden;
}

.gds-channel-fill[b-dxmnfv5p33] {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
    transition: width var(--dur-base) var(--ease-out);
}

.gds-channel-fill.is-internal[b-dxmnfv5p33] { background: var(--success-500); }

.gds-channel-meta[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

/* ---------- Interactive payment filter (Kanal × Kaynak facets → method bars) ---------- */

/* Channel facet tiles (clickable) */
.gds-pf-channels[b-dxmnfv5p33] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.gds-pf-chan[b-dxmnfv5p33] {
    appearance: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    border-left-width: 3px;
    background: var(--bg-muted);
    transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.gds-pf-chan:hover[b-dxmnfv5p33] { border-color: var(--border); }
.gds-pf-chan:focus-visible[b-dxmnfv5p33] { outline: 2px solid var(--accent); outline-offset: 2px; }

.gds-pf-chan--success[b-dxmnfv5p33] { border-left-color: var(--success-500); }
.gds-pf-chan--warning[b-dxmnfv5p33] { border-left-color: var(--warning-500); }
.gds-pf-chan--accent[b-dxmnfv5p33]  { border-left-color: var(--accent); }

.gds-pf-chan--success.is-active[b-dxmnfv5p33] { background: color-mix(in srgb, var(--success-500) 10%, transparent); box-shadow: inset 0 0 0 1px var(--success-500); }
.gds-pf-chan--warning.is-active[b-dxmnfv5p33] { background: color-mix(in srgb, var(--warning-500) 10%, transparent); box-shadow: inset 0 0 0 1px var(--warning-500); }
.gds-pf-chan--accent.is-active[b-dxmnfv5p33]  { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

.gds-pf-chan-l[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-hint);
}

.gds-pf-chan-v[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 800;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

.gds-pf-chan-n[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

/* Source facet chips (clickable) */
.gds-pf-sources[b-dxmnfv5p33] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-3);
}

.gds-pf-src[b-dxmnfv5p33] {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 5px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--bg-muted);
    transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.gds-pf-src:hover[b-dxmnfv5p33] { border-color: var(--border); }
.gds-pf-src:focus-visible[b-dxmnfv5p33] { outline: 2px solid var(--accent); outline-offset: 2px; }
.gds-pf-src.is-active[b-dxmnfv5p33] { border-color: var(--accent); background: var(--accent-soft); }

.gds-pf-src-mark[b-dxmnfv5p33] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--layer-1);
    border: 1px solid var(--border);
    color: var(--accent);
}

.gds-pf-src-mark img[b-dxmnfv5p33] { width: 100%; height: 100%; object-fit: cover; }
.gds-pf-src-mark[b-dxmnfv5p33]  svg { width: 13px; height: 13px; }

.gds-pf-src-name[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    white-space: nowrap;
}

.gds-pf-src-amt[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

.gds-pf-src.is-active .gds-pf-src-name[b-dxmnfv5p33],
.gds-pf-src.is-active .gds-pf-src-amt[b-dxmnfv5p33] { color: var(--accent); }

.gds-pf-clear[b-dxmnfv5p33] {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: auto;
    padding: 4px 6px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--fg-hint);
    text-decoration: underline;
}

.gds-pf-clear:hover[b-dxmnfv5p33] { color: var(--accent); }
.gds-pf-clear:focus-visible[b-dxmnfv5p33] { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-md); }

/* Empty state for a filter selection with no payments */
.gds-pf-empty[b-dxmnfv5p33] {
    padding: var(--space-3);
    text-align: center;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    color: var(--fg-hint);
}

/* ---------- Tabela (virtual store) comparison ---------- */
.gds-stats--4[b-dxmnfv5p33] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) { .gds-stats--4[b-dxmnfv5p33] { grid-template-columns: 1fr 1fr; } }

/* Sort switcher — lives in the card header actions slot */
.gds-vssort[b-dxmnfv5p33] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--bg-muted);
}

.gds-vssort-b[b-dxmnfv5p33] {
    appearance: none;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    color: var(--fg-hint);
    white-space: nowrap;
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.gds-vssort-b:hover[b-dxmnfv5p33] { color: var(--fg-1); }
.gds-vssort-b:focus-visible[b-dxmnfv5p33] { outline: 2px solid var(--accent); outline-offset: 2px; }

.gds-vssort-b.is-active[b-dxmnfv5p33] {
    background: var(--layer-1);
    color: var(--accent);
    box-shadow: var(--shadow-xs);
}

/* Comparison rows */
.gds-vslist[b-dxmnfv5p33] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gds-vsrow[b-dxmnfv5p33] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-muted);
}

.gds-vsrow.is-idle[b-dxmnfv5p33] { opacity: 0.62; }

.gds-vsrank[b-dxmnfv5p33] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--layer-1);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

.gds-vsbody[b-dxmnfv5p33] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gds-vstop[b-dxmnfv5p33] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.gds-vsname[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.gds-vsparent[b-dxmnfv5p33] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--fg-hint);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--layer-1);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.gds-vssrcs[b-dxmnfv5p33] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.gds-vssrc[b-dxmnfv5p33] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--layer-1);
    border: 1px solid var(--border-subtle);
    color: var(--accent);
}

.gds-vssrc img[b-dxmnfv5p33] { width: 100%; height: 100%; object-fit: cover; }
.gds-vssrc[b-dxmnfv5p33]  svg { width: 11px; height: 11px; }

.gds-vsdelta[b-dxmnfv5p33] {
    margin-left: auto;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gds-vsdelta.is-up[b-dxmnfv5p33] { background: var(--success-50); color: var(--success-600); }
.gds-vsdelta.is-down[b-dxmnfv5p33] { background: var(--danger-50); color: var(--danger-600); }

.gds-vstrack[b-dxmnfv5p33] {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    overflow: hidden;
}

.gds-vsfill[b-dxmnfv5p33] {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
    transition: width var(--dur-base) var(--ease-out);
}

.gds-vsnums[b-dxmnfv5p33] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}

.gds-vsnum[b-dxmnfv5p33] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--font-ui);
    white-space: nowrap;
}

.gds-vsnum b[b-dxmnfv5p33] {
    font-size: var(--small-size);
    font-weight: 800;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

.gds-vsnum small[b-dxmnfv5p33] {
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--fg-hint);
}

.gds-vsnum.is-warn b[b-dxmnfv5p33] { color: var(--danger-600); }

@media (max-width: 640px) {
    .gds-vsname[b-dxmnfv5p33] { max-width: 150px; }
    .gds-vsdelta[b-dxmnfv5p33] { margin-left: 0; }
    .gds-vsnums[b-dxmnfv5p33] { gap: var(--space-2) var(--space-3); }
}
/* /Components/Pages/Dashboard/Cards/ActiveDeliveriesCard.razor.rz.scp.css */
/* Active Deliveries Card Styles */

/* Deliveries List */
[b-mnm5ijmzyo] .deliveries-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
    height: min-content;
}

[b-mnm5ijmzyo] .deliveries-list::-webkit-scrollbar {
    width: 6px;
}

[b-mnm5ijmzyo] .deliveries-list::-webkit-scrollbar-track {
    background: var(--neutral-layer-2);
    border-radius: 3px;
}

[b-mnm5ijmzyo] .deliveries-list::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-rest);
    border-radius: 3px;
}

[b-mnm5ijmzyo] .deliveries-list::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-stroke-hover);
}

[b-mnm5ijmzyo] .delivery-row {
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background-color: var(--neutral-layer-1);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

[b-mnm5ijmzyo] .delivery-row:hover {
    background-color: var(--neutral-layer-2);
    border-color: var(--accent-stroke-rest);
}

[b-mnm5ijmzyo] .delivery-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

[b-mnm5ijmzyo] .delivery-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
}

[b-mnm5ijmzyo] .delivery-id {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    font-size: 14px;
}

[b-mnm5ijmzyo] .delivery-separator {
    color: var(--neutral-foreground-hint);
    font-size: 12px;
}

[b-mnm5ijmzyo] .delivery-status {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

[b-mnm5ijmzyo] .delivery-status.pending {
    background-color: #fef3c7;
    color: #d69e2e;
}

[b-mnm5ijmzyo] .delivery-status.assigned {
    background-color: color-mix(in srgb, var(--app-primary-color, #2563eb) 12%, white);
    color: var(--app-primary-color, #2563eb);
}

[b-mnm5ijmzyo] .delivery-status.picked-up {
    background-color: #ecfdf5;
    color: #059669;
}

[b-mnm5ijmzyo] .delivery-status.delivered {
    background-color: #f0fdf4;
    color: #16a34a;
}

[b-mnm5ijmzyo] .delivery-status.cancelled {
    background-color: #fef2f2;
    color: #dc2626;
}

[b-mnm5ijmzyo] .delivery-duration {
    background-color: var(--accent-background-rest, #e3f2fd);
    color: var(--accent-foreground-rest, #1976d2);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

[data-theme="dark"][b-mnm5ijmzyo]  .delivery-duration {
    background-color: #263143;
    color: #b3e0ff;
}

[b-mnm5ijmzyo] .delivery-amount {
    font-weight: 600;
    color: var(--accent-foreground-rest);
    font-size: 14px;
    white-space: nowrap;
}

[b-mnm5ijmzyo] .delivery-details {
    margin-bottom: 6px;
}

[b-mnm5ijmzyo] .delivery-extra-info {
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    line-height: 1.3;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

[b-mnm5ijmzyo] .delivery-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

[b-mnm5ijmzyo] .action-group-left {
    display: flex;
    gap: 4px;
}

[b-mnm5ijmzyo] .action-group-right {
    display: flex;
    gap: 4px;
}

[b-mnm5ijmzyo] .delivery-actions .btn-small {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 12px;
    border-radius: 4px;
}

/* Empty State */
[b-mnm5ijmzyo] .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

[b-mnm5ijmzyo] .empty-state .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

[b-mnm5ijmzyo] .empty-state p {
    margin-bottom: 1rem;
    margin-top: 0;
}

/* Active Deliveries Card */
[b-mnm5ijmzyo] .active-deliveries-card {
    margin-bottom: 1rem;
}
/* /Components/Pages/Dashboard/Cards/ActiveOrdersCard.razor.rz.scp.css */
/* Active Orders Card Styles */

/* Orders List */
[b-1uxsh0t320] .orders-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 1rem;
}

/* Grid (geniş panel): flex/grid gap ile aralık. */
[b-1uxsh0t320] .orders-list.grid-panel {
    gap: 18px !important;
}

/* Tek sütun (floating / dar panel): flex-gap bazı render durumlarında uygulanmıyordu; bu yüzden
   gap'i sıfırlayıp kartlar arasına DETERMİNİSTİK margin koyuyoruz (block/flex fark etmez, asla
   sıfır olmaz). Scoped + !important olduğu için inline <style> kurallarının üstüne yazar. */
[b-1uxsh0t320] .orders-list.narrow-panel {
    gap: 0 !important;
}

[b-1uxsh0t320] .orders-list.narrow-panel .order-row-enhanced + .order-row-enhanced {
    margin-top: 18px !important;
}

/* NOT: Bu bileşenin kökü <FluentCard> (alt bileşen) olduğu için .razor.css içindeki ::deep
   kuralları eşleşmiyor (scope attribute'u yok). Adres/tutar yerleşimi ve panel-genişliği
   davranışı bu yüzden bileşenin inline <style> bloğunda (global) tanımlı — orada güvenle çalışır. */

[b-1uxsh0t320] .orders-list.ultra-compact {
    height: auto;
    padding: 10px;   /* equal breathing room on all sides — matches the inter-row gap */
    margin: 0;
}

/* Desktop: scroll aktif (1024px ve ustu) */
@media (min-width: 1024px) {
    [b-1uxsh0t320] .orders-list.ultra-compact {
        overflow-y: auto;
        /* Cap to the viewport so a busy queue scrolls inside the card, not down the page.
           Matches TableOverviewCard's .tov-body so both panels stay the same height. */
        max-height: calc(100dvh - 220px);
    }
}

/* Mobilde liste scroll olmasin, uzadikca uzasin (1023px ve alti) */
@media (max-width: 1023px) {
    [b-1uxsh0t320] .orders-list.ultra-compact {
        overflow-y: visible !important;
        height: auto !important;
        flex: unset !important;
    }
}

[b-1uxsh0t320] .orders-list.ultra-compact::-webkit-scrollbar {
    width: 6px;
}

[b-1uxsh0t320] .orders-list.ultra-compact::-webkit-scrollbar-track {
    background: var(--neutral-layer-2);
    border-radius: 3px;
}

[b-1uxsh0t320] .orders-list.ultra-compact::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-rest);
    border-radius: 3px;
}

[b-1uxsh0t320] .orders-list.ultra-compact::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-stroke-hover);
}

[b-1uxsh0t320] .order-row-enhanced {
    padding: 15px;          /* top/bottom equalized to the 15px left/right */
    margin: 5px;              /* spacing comes from the list padding + gap, equal on all sides */
    background: var(--ds-surface, #ffffff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.05));
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    container-type: inline-size;   /* each card is its own query container (meta-row alignment) */
}

[b-1uxsh0t320] .order-row-enhanced:hover {
    background: #ffffff;
    border-color: var(--ds-border-strong, #cbd5e1);
    box-shadow: var(--ds-shadow-2, 0 4px 14px rgba(15, 23, 42, 0.07));
}

[b-1uxsh0t320] .order-row-enhanced:active {
    transform: translateY(0.5px);
}

/* Card Header Styling - matching DeliveryManagement */
.card-header[b-1uxsh0t320] {
    background: var(--neutral-layer-1);
    padding: 16px 24px;
    border-top-left-radius: calc(var(--layer-corner-radius) * 1px);
    border-top-right-radius: calc(var(--layer-corner-radius) * 1px);
    display: flex;
    align-items: center;
}

[b-1uxsh0t320] .order-row-enhanced:last-child {
    border-bottom: none;
}

[b-1uxsh0t320] .order-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-direction: row; /* Desktop: yatay layout */
}

/* Desktop: status badge sağda, margin-left: auto ile */
[b-1uxsh0t320] .status-badge-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    order: 4; /* Desktop: en sağda */
}

[b-1uxsh0t320] .order-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    order: 1; /* Desktop: ilk sirada */
}

/* Store + Amount wrapper */
[b-1uxsh0t320] .store-amount-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    order: 2; /* Desktop: ikinci sirada */
}

/* Desktop: amount info */
[b-1uxsh0t320] .order-amount-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Desktop: esnaf kurye container */
[b-1uxsh0t320] .esnaf-kurye-container {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 3; /* Desktop: üçüncü sırada */
}

/* ======================================== */
/* PANEL WIDTH BASED LAYOUT (ResizeObserver) */
/* narrow-panel class JS ile eklenir        */
/* ======================================== */

/* Genis panel (700px+): tek satir */
[b-1uxsh0t320] .orders-list:not(.narrow-panel) .order-main {
    flex-wrap: nowrap;
    flex-direction: row;
}

[b-1uxsh0t320] .orders-list:not(.narrow-panel) .store-amount-wrapper {
    order: 2;
    width: auto;
    margin-top: 0;
    flex-basis: auto;
}

[b-1uxsh0t320] .orders-list:not(.narrow-panel) .store-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dar panel (700px alti): store-amount-wrapper alta insin */
[b-1uxsh0t320] .orders-list.narrow-panel .order-main {
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 4px 8px !important;
}

[b-1uxsh0t320] .orders-list.narrow-panel .store-amount-wrapper {
    order: 10 !important;
    width: 100% !important;
    margin-top: 4px !important;
    flex-basis: 100% !important;
}

[b-1uxsh0t320] .orders-list.narrow-panel .store-name {
    max-width: none !important;
    white-space: normal !important;
}

/* ======================================== */
/* MOBILE SCREEN LAYOUT (768px alti ekran)  */
/* mobile-screen class JS ile eklenir       */
/* ======================================== */
[b-1uxsh0t320] .orders-list.mobile-screen .order-main {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

[b-1uxsh0t320] .orders-list.mobile-screen .status-badge-container {
    order: 1 !important;
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: end !important;
}

[b-1uxsh0t320] .orders-list.mobile-screen .order-info {
    order: 2 !important;
    width: 100% !important;
}

[b-1uxsh0t320] .orders-list.mobile-screen .store-amount-wrapper {
    order: 3 !important;
    width: 100% !important;
    margin-top: 0 !important;
}

[b-1uxsh0t320] .orders-list.mobile-screen .esnaf-kurye-container {
    order: 4 !important;
    width: 100% !important;
}

[b-1uxsh0t320] .order-type {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    font-size: 13px;
}

[b-1uxsh0t320] .order-separator {
    color: #ccc;
    font-size: 10px;
}

[b-1uxsh0t320] .order-table {
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-1uxsh0t320] .order-duration {
    color: var(--accent-foreground-rest, #1976d2);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

[data-theme="dark"][b-1uxsh0t320]  .order-duration {
    color: #b3e0ff;
}

[b-1uxsh0t320] .order-amount {
    font-weight: 600;
    color: var(--accent-foreground-rest);
    font-size: 13px;
    white-space: nowrap;
}

[b-1uxsh0t320] .order-details {
    padding: 4px 0;
}

[b-1uxsh0t320] .order-extra-info {
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    line-height: 1.2;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-1uxsh0t320] .scheduled-time {
    color: var(--accent-foreground-rest, #1976d2);
    font-size: 11px;
    font-weight: 600;
    background-color: var(--accent-background-rest, #e3f2fd);
    padding: 2px 6px;
    border-radius: 12px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 2px;
}

[data-theme="dark"][b-1uxsh0t320]  .scheduled-time {
    background-color: #263143;
    color: #b3e0ff;
}

[b-1uxsh0t320] .order-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    min-height: 40px;
}

[b-1uxsh0t320] .action-group-left {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

[b-1uxsh0t320] .action-group-right {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    min-width: 0;
}

[b-1uxsh0t320] .order-actions .btn-small {
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    font-size: 11px;
    border-radius: 4px;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    flex-shrink: 0;
}

[b-1uxsh0t320] .order-actions .btn-small:only-child {
    width: 32px;
    padding: 0;
}

[b-1uxsh0t320] .order-actions .btn-small[title="Detaylar"] {
    width: 32px;
    padding: 0;
}

/* Active Orders Card Specific */
[b-1uxsh0t320] .active-orders-card.compact {
    margin-top: 0.2rem;
    padding: 0.2rem 0.2rem 0 0.2rem;
}

[b-1uxsh0t320] .active-orders-card.minimal-width {
    min-width: 180px;
    max-width: 220px;
    width: 100%;
}

/* Mobilde FluentCard overflow ayarları (1023px ve alti) */
@media (max-width: 1023px) {
    .active-orders-card[b-1uxsh0t320] {
        overflow: visible !important;
        height: auto !important;
        flex: unset !important;
    }

    [b-1uxsh0t320] .active-orders-card.compact {
        overflow: visible !important;
    }

    [b-1uxsh0t320] .active-orders-card.minimal-width {
        max-width: 100%;
    }
}

/* Empty State */
[b-1uxsh0t320] .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

[b-1uxsh0t320] .empty-state .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

[b-1uxsh0t320] .empty-state p {
    margin-bottom: 1rem;
    margin-top: 0;
}

/* ============================================ */
/* RESPONSIVE BREAKPOINTS                      */
/* 600px, 768px, 1024px, 1280px, 1440px, 1600px */
/* ============================================ */

/* 1600px+ - Buyuk Desktop */
@media (min-width: 1600px) {
    .card-header[b-1uxsh0t320] {
        padding: 18px 28px;
    }


    [b-1uxsh0t320] .order-info {
        gap: 10px;
    }

    [b-1uxsh0t320] .order-table {
        font-size: 15px;
        max-width: none;
    }
}

/* 1440px - Desktop */
@media (max-width: 1599px) {
    .card-header[b-1uxsh0t320] {
        padding: 16px 24px;
    }

    [b-1uxsh0t320] .order-row-enhanced {
        padding: 14px;
    }
}

/* 1280px - Laptop */
@media (max-width: 1279px) {
    .card-header[b-1uxsh0t320] {
        padding: 14px 20px;
    }

    [b-1uxsh0t320] .order-row-enhanced {
        padding: 12px;
    }

    [b-1uxsh0t320] .order-info {
        gap: 6px;
    }

    [b-1uxsh0t320] .order-table {
        font-size: 13px;
        max-width: 150px;
    }

    [b-1uxsh0t320] .order-main {
        gap: 10px;
        flex-direction: row; /* Desktop layout koru */
    }

    /* 1280px'de yatay layout için order değerleri */
    [b-1uxsh0t320] .order-info {
        order: 1;
    }

    [b-1uxsh0t320] .order-amount-info {
        order: 2;
    }

    [b-1uxsh0t320] .esnaf-kurye-container {
        order: 3;
    }

    [b-1uxsh0t320] .status-badge-container {
        order: 4;
        margin-left: auto;
    }
}

/* 1023px - Tablet Landscape (Desktop layout devam eder) */
@media (max-width: 1023px) {
    .card-header[b-1uxsh0t320] {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-header h2[b-1uxsh0t320] {
        font-size: 1rem !important;
    }

    [b-1uxsh0t320] .order-row-enhanced {
        padding: 10px;
    }

    [b-1uxsh0t320] .order-main {
        gap: 8px;
        flex-direction: row; /* Desktop layout koru */
    }

    /* 1023px'de yatay layout için order değerleri */
    [b-1uxsh0t320] .order-info {
        order: 1;
        gap: 6px;
        flex-wrap: wrap;
    }

    [b-1uxsh0t320] .order-amount-info {
        order: 2;
    }

    [b-1uxsh0t320] .esnaf-kurye-container {
        order: 3;
    }

    [b-1uxsh0t320] .status-badge-container {
        order: 4;
        margin-left: auto;
    }

    [b-1uxsh0t320] .order-table {
        max-width: 120px;
    }

    [b-1uxsh0t320] .order-duration {
        padding: 2px 8px;
        font-size: 10px;
    }

    /* Esnaf Kurye Cagir butonu daralt */
    [b-1uxsh0t320] button[style*="background-color: #27ae60"] {
        padding: 4px 8px;
        font-size: 10px;
    }

    /* Status chip container */
    [b-1uxsh0t320] .status-badge-container {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* 768px - Tablet Portrait - MOBILE CARD DESIGN */
@media (max-width: 768px) {
    .card-header[b-1uxsh0t320] {
        padding: 10px 12px;
        flex-direction: row;
        justify-content: space-between;
    }

    .card-header h2[b-1uxsh0t320] {
        font-size: 0.95rem !important;
        white-space: nowrap;
    }

    .header-title[b-1uxsh0t320] {
        gap: 4px !important;
    }

    /* Son guncelleme gizle */
    .desktop-only-info[b-1uxsh0t320] {
        display: none !important;
    }

    /* ===== MOBILE CARD DESIGN ===== */
    /* Her siparis bir kart olarak gorunur */
    [b-1uxsh0t320] .order-row-enhanced {
        padding: 12px;
        margin: 8px;
        border-radius: 12px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        background: var(--neutral-layer-1);
    }

    [b-1uxsh0t320] .order-row-enhanced:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    /* ===== MOBILE CARD LAYOUT ===== */
    /* Dikey layout: status badge en ustte */
    [b-1uxsh0t320] .order-main {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    [b-1uxsh0t320] .status-badge-container {
        order: 1 !important;
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: end !important;
    }

    [b-1uxsh0t320] .order-info {
        order: 2 !important;
        width: 100% !important;
    }

    [b-1uxsh0t320] .store-amount-wrapper {
        order: 3 !important;
        width: 100% !important;
    }

    [b-1uxsh0t320] .esnaf-kurye-container {
        order: 4 !important;
        width: 100% !important;
    }

    /* Musteri adi - tam gosterilsin, kesilmesin */
    [b-1uxsh0t320] .order-table {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* Store name */
    [b-1uxsh0t320] .store-name {
        font-size: 11px !important;
    }

    [b-1uxsh0t320] .order-amount-info span[style*="font-weight: 600"] {
        font-size: 13px !important;
        color: #27ae60 !important;
    }

    /* Status chip daha kompakt */
    [b-1uxsh0t320] .status-chip-group {
        border-radius: 12px !important;
    }

    [b-1uxsh0t320] .status-chip-group > span {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }

    /* Order details alani - status chip'in hemen altinda, bosluklari minimize et */
    [b-1uxsh0t320] .order-details {
        padding: 2px 0 0 0 !important;
        margin-top: 2px !important;
        border-top: none !important;
    }

    /* ===== DELIVERY DETAILS SECTION ===== */
    [b-1uxsh0t320] .delivery-details-section {
        gap: 4px !important;
    }

    /* Adres satiri - margin ve padding azalt */
    [b-1uxsh0t320] .delivery-address-row {
        margin-bottom: 0 !important;
        margin-top: 2px !important;
        padding: 0 !important;
    }

    /* Butonlar ve bilgiler satiri - dikey layout, bilgiler ustte, butonlar altta */
    [b-1uxsh0t320] .delivery-actions-row {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    /* Kurye/Teslimat bilgileri - dikey, background yok */
    [b-1uxsh0t320] .delivery-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        font-size: 11px !important;
    }

    [b-1uxsh0t320] .delivery-info > span {
        white-space: normal !important;
    }

    /* Butonlar - yatay wrap, kucuk */
    [b-1uxsh0t320] .delivery-buttons {
        flex-wrap: wrap !important;
        gap: 4px !important;
        width: 100% !important;
    }

    /* Order details dikey layout */
    [b-1uxsh0t320] .order-details > div {
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* Adres satiri - tam genislik, margin azalt */
    [b-1uxsh0t320] .order-details > div:first-child {
        margin-bottom: 2px;
    }

    /* Adres metni - okunabilir */
    [b-1uxsh0t320] .order-details span[style*="font-size:13px"] {
        font-size: 12px !important;
        line-height: 1.4;
        display: block;
        color: #444 !important;
    }

    /* FluentButton - buyuk ve touch-friendly */
    [b-1uxsh0t320] fluent-button {
        font-size: 12px;
    }

    [b-1uxsh0t320] fluent-button::part(control) {
        min-height: 40px;
        padding: 8px 14px;
        border-radius: 8px;
    }

    /* FluentMenuButton */
    [b-1uxsh0t320] fluent-menu-button::part(control) {
        padding: 8px 14px;
        font-size: 12px;
        min-height: 40px;
        border-radius: 8px;
    }

    /* Aksiyon butonlari - buyuk ve renkli */
    [b-1uxsh0t320] button[type="button"] {
        padding: 10px 14px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        min-height: 40px;
    }

    /* Separator gizle */
    [b-1uxsh0t320] .order-separator {
        display: none;
    }

    /* Status chip icindeki divider'lari gizle */
    [b-1uxsh0t320] .status-chip-group > span[style*="width: 1px"] {
        display: none !important;
    }

    /* Yazdır ve Islemler butonlari - mobilde kompakt */
    [b-1uxsh0t320] .delivery-buttons fluent-button,
    [b-1uxsh0t320] .delivery-buttons fluent-menu-button {
        font-size: 10px !important;
    }

    [b-1uxsh0t320] .delivery-buttons fluent-button::part(control),
    [b-1uxsh0t320] .delivery-buttons fluent-menu-button::part(control) {
        min-height: 28px !important;
        padding: 2px 8px !important;
        font-size: 10px !important;
    }

    /* Aksiyon butonlari (Onayla, Hazırlandı vb.) - kompakt */
    [b-1uxsh0t320] .delivery-buttons button[type="button"] {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-height: 28px !important;
    }

    /* Adres tam gosterilsin, kesilmesin */
    [b-1uxsh0t320] .delivery-address-row span[style*="overflow: hidden"],
    [b-1uxsh0t320] .order-details span[style*="overflow: hidden"] {
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
        display: block !important;
        line-height: 1.4 !important;
    }

    /* Duration badge daha belirgin */
    [b-1uxsh0t320] .order-duration {
        padding: 4px 10px;
        font-size: 11px;
        min-width: 30px;
        font-weight: 700;
    }
}

/* 600px - Telefon - COMPACT MOBILE CARD */
@media (max-width: 600px) {
    .card-header[b-1uxsh0t320] {
        padding: 8px 10px;
    }

    .card-header h2[b-1uxsh0t320] {
        font-size: 0.9rem !important;
    }

    .header-title fluent-button[b-1uxsh0t320] {
        min-width: 36px !important;
        padding: 6px !important;
    }

    /* ===== COMPACT MOBILE CARD ===== */
    [b-1uxsh0t320] .order-row-enhanced {
        padding: 10px;
        margin: 6px;
        border-radius: 10px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    /* ===== COMPACT MOBILE CARD LAYOUT ===== */
    /* Layout JS ResizeObserver ile kontrol edilir */
    /* Burada sadece gorsel stiller */

    /* Musteri adi - tam gosterilsin, kesilmesin */
    [b-1uxsh0t320] .order-table {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* Store name */
    [b-1uxsh0t320] .store-name {
        font-size: 10px !important;
    }

    /* Integration logo */
    [b-1uxsh0t320] .order-info img {
        width: 16px !important;
        height: 16px !important;
    }

    [b-1uxsh0t320] .order-amount-info span[style*="font-weight: 600"] {
        font-size: 12px !important;
        color: #27ae60 !important;
    }

    /* Odeme yontemi badge */
    [b-1uxsh0t320] .order-amount-info span[style*="padding: 1px 6px"] {
        font-size: 9px !important;
        padding: 1px 5px !important;
    }

    /* Status chip daha kompakt */
    [b-1uxsh0t320] .status-chip-group {
        border-radius: 10px !important;
    }

    [b-1uxsh0t320] .status-chip-group > span {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    /* Esnaf Kurye Cagir butonu */
    [b-1uxsh0t320] button[style*="background-color: #27ae60"] {
        padding: 6px 8px !important;
        font-size: 10px !important;
        min-width: auto;
        border-radius: 6px !important;
    }

    /* Diger aksiyon butonlari */
    [b-1uxsh0t320] button[style*="background-color: #3498db"],
    [b-1uxsh0t320] button[style*="background-color: #f39c12"],
    [b-1uxsh0t320] button[style*="background-color: #9b59b6"],
    [b-1uxsh0t320] button[style*="background-color: #1abc9c"] {
        padding: 6px 8px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
        min-height: 32px;
    }

    /* Order details - kompakt, border yok */
    [b-1uxsh0t320] .order-details {
        margin-top: 2px !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    /* ===== DELIVERY DETAILS SECTION ===== */
    [b-1uxsh0t320] .delivery-details-section {
        gap: 2px !important;
    }

    /* Adres satiri - margin ve padding azalt */
    [b-1uxsh0t320] .delivery-address-row {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* Butonlar ve bilgiler satiri - dikey layout, bilgiler ustte, butonlar altta */
    [b-1uxsh0t320] .delivery-actions-row {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 4px !important;
    }

    /* Kurye/Teslimat bilgileri - dikey, background yok */
    [b-1uxsh0t320] .delivery-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1px !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        font-size: 10px !important;
    }

    [b-1uxsh0t320] .delivery-info > span {
        white-space: normal !important;
        font-size: 10px !important;
    }

    /* Butonlar - yatay wrap, kucuk */
    [b-1uxsh0t320] .delivery-buttons {
        flex-wrap: wrap !important;
        gap: 3px !important;
        width: 100% !important;
    }

    /* Status chip icindeki divider'lari gizle */
    [b-1uxsh0t320] .status-chip-group > span[style*="width: 1px"] {
        display: none !important;
    }

    /* Yazdır ve Islemler butonlari - telefonda daha kucuk */
    [b-1uxsh0t320] .delivery-buttons fluent-button,
    [b-1uxsh0t320] .delivery-buttons fluent-menu-button {
        font-size: 10px !important;
    }

    [b-1uxsh0t320] .delivery-buttons fluent-button::part(control),
    [b-1uxsh0t320] .delivery-buttons fluent-menu-button::part(control) {
        min-height: 28px !important;
        padding: 3px 8px !important;
        font-size: 10px !important;
    }

    /* Aksiyon butonlari (Onayla, Hazırlandı vb.) - telefonda kompakt */
    [b-1uxsh0t320] .delivery-buttons button[type="button"] {
        padding: 3px 8px !important;
        font-size: 10px !important;
        min-height: 28px !important;
        border-radius: 6px !important;
    }

    /* Adres tam gosterilsin, kesilmesin */
    [b-1uxsh0t320] .delivery-address-row span[style*="overflow: hidden"],
    [b-1uxsh0t320] .order-details span[style*="overflow: hidden"] {
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
        display: block !important;
        line-height: 1.4 !important;
        font-size: 11px !important;
    }

    /* Metre bilgisi */
    [b-1uxsh0t320] .order-details span[style*="font-weight: 700"] {
        font-size: 10px !important;
    }

    /* FluentIcon */
    [b-1uxsh0t320] .order-details fluent-icon {
        font-size: 11px !important;
    }

    /* Yazdır ve Islemler butonlari - tam genislik */
    [b-1uxsh0t320] .order-details fluent-button,
    [b-1uxsh0t320] .order-details fluent-menu-button {
        font-size: 10px;
        flex: 1;
        min-width: 0;
    }

    [b-1uxsh0t320] .order-details fluent-button::part(control),
    [b-1uxsh0t320] .order-details fluent-menu-button::part(control) {
        padding: 5px 8px;
        min-height: 34px;
        border-radius: 6px;
        justify-content: center;
    }

    /* Scheduled time */
    [b-1uxsh0t320] .scheduled-time {
        font-size: 10px;
        padding: 3px 6px;
    }

    /* Duration badge */
    [b-1uxsh0t320] .order-duration {
        padding: 3px 8px;
        font-size: 10px;
        font-weight: 700;
    }

    /* Empty state */
    [b-1uxsh0t320] .empty-state {
        padding: 1.5rem;
    }

    [b-1uxsh0t320] .empty-state .fui-Icon {
        font-size: 2rem;
    }
}

/* ============================================ */
/* Touch-friendly & iOS improvements           */
/* ============================================ */
@media (pointer: coarse) {
    [b-1uxsh0t320] .order-row-enhanced {
        min-height: 44px;
    }

    /* Genel butonlar icin touch-friendly boyut */
    /* delivery-buttons icindeki butonlar mobile breakpoint'lerde !important ile override edilir */
    [b-1uxsh0t320] .order-actions fluent-button,
    [b-1uxsh0t320] .order-actions fluent-menu-button,
    [b-1uxsh0t320] .order-actions button[type="button"] {
        min-height: 40px;
    }
}

/* iOS Safari safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        [b-1uxsh0t320] .orders-list {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* Smooth scrolling for touch */
@media (pointer: coarse) {
    [b-1uxsh0t320] .orders-list {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}
/* Order type filter — matches TableOverviewCard tabs */
[b-1uxsh0t320] .aof-status-tabs {
    display: inline-flex;
    background: transparent;
    border-radius: 8px;
    padding: 0;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

[b-1uxsh0t320] .aof-status-tabs::-webkit-scrollbar {
    display: none;
}

[b-1uxsh0t320] .aof-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    font-family: inherit;
    white-space: nowrap;
}

[b-1uxsh0t320] .aof-tab:hover { background: var(--neutral-layer-2); color: var(--neutral-foreground-rest); }

[b-1uxsh0t320] .aof-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    height: 18px;
    min-width: 20px;
    border-radius: 999px;
    background: var(--neutral-layer-3);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

[b-1uxsh0t320] .aof-tab.is-active { background: var(--brand-600); color: #fff; }
[b-1uxsh0t320] .aof-tab.is-active .aof-tab-count { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* ==========================================================================
   ROW DENSITY / ALIGNMENT — kill the empty space (esp. dine-in rows)
   ========================================================================== */
/* Başlık şeridi — SABİT iki kolon (flex-wrap yok): isim soldan akar, süre + fiş no her
   genişlikte sağ üstte kalır. Kolon sayısı değişmediği için kart daralınca blok yer
   değiştirmez; yalnız isim kısalır. */
[b-1uxsh0t320] .aoc-head-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 10px;
    margin-bottom: 2px;
}

[b-1uxsh0t320] .aoc-name-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

/* İsim taşarsa üç noktayla kısalır — alta sarkıp sağdaki sayı bloğunu itmez. */
[b-1uxsh0t320] .aoc-name-line .order-info {
    flex-wrap: nowrap;
    overflow: hidden;
}

[b-1uxsh0t320] .aoc-name-line .order-table {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sağ üst meta: büyük süre + fiş no — başlık satırının sağ kolonu, sona yaslı. */
[b-1uxsh0t320] .aoc-meta-top {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    min-width: 0;
}

[b-1uxsh0t320] .aoc-keyline {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1;
    white-space: nowrap;
}

[b-1uxsh0t320] .aoc-min {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

[b-1uxsh0t320] .aoc-fisno {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

/* Durum kutuları satırı — başlığın hemen altında, tam genişlik, sola yaslı, yan yana. */
[b-1uxsh0t320] .aoc-statusrow {
    margin: 2px 0 6px;
}

/* Günlük fiş no — kolon satır yüksekliğine uzatılıp en alta itildiği için
   sağdaki km çip satırıyla yatayda hizalanır (sürenin hemen altında değil). */
[b-1uxsh0t320] .aoc-receipt-no {
    margin-top: auto;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: -0.01em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Tighter content stack: name → meta sit right under each other, buttons beside. */
[b-1uxsh0t320] .order-details { padding: 0 !important; margin-top: 2px; }
[b-1uxsh0t320] .order-main { gap: 6px 10px; }

/* Dine-in: content + buttons share one band, vertically centered (no tall empty gap). */
[b-1uxsh0t320] .dinein-actions-row { align-items: center !important; gap: 14px !important; }

/* Teslimat gövdesi tek satır: km + adres (sol, 2 satıra kadar sarar) · eylem butonları (sağ,
   adresin üstüyle aynı hizada). Stacked CSS bunu :is(.narrow-panel,.grid-panel) ile yönetir. */
[b-1uxsh0t320] .delivery-details-section {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    /* Adresin (veya adres yoksa ödeme satırının) altında küçük bir boşluk; tam boşluğu adres taşır. */
    margin-top: 8px;
}

/* Buton satırı — doğal boyutta, sağa + üste yaslı (adresin yanında). */
[b-1uxsh0t320] .delivery-buttons {
    align-self: flex-start !important;
}

/* Dine-in content collapses onto a single inline row (amount · ödeme · km · garson). */
[b-1uxsh0t320] .dinein-content-column { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 6px 10px !important; }
[b-1uxsh0t320] .dinein-info { font-size: 11.5px !important; }

/* Action buttons — dokunmatik hedef ölçüsünde (mobil uygulamadaki gibi), kalın çerçeveli. */
[b-1uxsh0t320] .action-square-btn,
[b-1uxsh0t320] .square-buttons > button:not(.action-square-btn) {
    width: 70px !important;
    height: 68px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}
[b-1uxsh0t320] .action-square-btn .btn-name { font-size: 11px !important; }

/* Auto-print failed for this order (tracked client-side in localStorage via UnprintedTracker) —
   the Yazdır button goes solid green with white icon/label so the operator sees the ticket still
   needs printing. Clears automatically once any receipt for the order prints. */
[b-1uxsh0t320] .action-square-btn.btn-print--unprinted {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}
[b-1uxsh0t320] .action-square-btn.btn-print--unprinted span { color: #fff !important; }
[b-1uxsh0t320] .action-square-btn.btn-print--unprinted svg,
[b-1uxsh0t320] .action-square-btn.btn-print--unprinted svg path { fill: #fff !important; }

/* Mali fiş düğmesi, mağazada POS terminali TANIMSIZKEN: görünür kalır (aksiyonun var olduğu
   bilinsin) ama edilgen durur; tıklanınca gereksinimi anlatan modal açılır. Gizlemek yerine
   kesik çerçeve, kullanıcının "neden yapamıyorum" sorusunu cevaplar. Opaklık DÜŞÜRÜLMEZ —
   yazı okunur kalmalı; edilgenlik yalnız kesik çerçeve + soluk zeminle anlatılır. */
[b-1uxsh0t320] .action-square-btn.btn-fiscal--muted {
    /* 3px = düğmenin öteden beri çizdiği kalınlık (eskiden `border:none`ın `medium` genişliğinden
       geliyordu); artık kazara değil, açıkça yazılı. */
    border-style: dashed !important;
    border-width: 3px !important;
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}
[b-1uxsh0t320] .action-square-btn.btn-fiscal--muted span { color: #475569 !important; }
[b-1uxsh0t320] .action-square-btn.btn-fiscal--muted svg,
[b-1uxsh0t320] .action-square-btn.btn-fiscal--muted svg path { fill: #64748b !important; }

/* Logo column: channel/type logo + elapsed-time chip stacked beneath it.
   align-self: stretch → kolon satırın tam yüksekliğine uzar; böylece fiş no
   (margin-top:auto ile) en alta inip sağdaki km satırıyla hizalanabilir. */
[b-1uxsh0t320] .aoc-iconcol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    align-self: stretch;
}

/* Square placeholder shared across every order type (integration logo, PaketG,
   order-type icon tile, Adisyon fallback). 44x44 (1:1) — the calendar chip below
   inherits the same width so it grows in proportion with the logo. */
[b-1uxsh0t320] .aoc-logo-frame {
    flex-shrink: 0;
}

/* Mağaza logosu + köşe tür rozeti (Masa / Gel Al / Paket Servis) — logo varsa jenerik
   ikon yerine mağaza görseli, tür ikonu sağ-alt köşede küçük bir rozete iner. */
[b-1uxsh0t320] .aoc-logo-frame--badged {
    position: relative;
    display: inline-block;
}
[b-1uxsh0t320] .aoc-logo-img--store {
    object-fit: cover;
    background: #fff;
    border: 1px solid #e2e8f0;
}
[b-1uxsh0t320] .aoc-logo-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #036ac4;
}
[b-1uxsh0t320] .aoc-logo-badge svg {
    width: 13px;
    height: 13px;
}

[b-1uxsh0t320] .aoc-logo-img,
[b-1uxsh0t320] .order-icon-tile {
    width: 62px;
    height: 62px;
    border-radius: 12px;
    overflow: hidden;
}

/* Integration / platform logos cover-fill the rounded tile edge-to-edge —
   the same clean treatment as the integrations marketplace cards. */
[b-1uxsh0t320] .aoc-logo-img {
    object-fit: contain;
}

[b-1uxsh0t320] .aoc-logo-img--bordered {
    background: transparent;
    border: none;
    padding: 0;
}

/* Order-type icon tile — soft, very-transparent brand tint (no gray box / frame), glyph centered. */
[b-1uxsh0t320] .order-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 106, 196, 0.06);
    border: none;
    box-sizing: border-box;
}

/* Elapsed-time chip below the logo — its own fully-rounded pill with a small
   gap, so the logo above can stay rounded on all corners (not cropped).
   Fixed width so a longer value ("1s 6dk") never widens the column. */
[b-1uxsh0t320] .aoc-cal {
    width: 44px;
    margin-top: 4px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

[b-1uxsh0t320] .aoc-cal__val {
    padding: 3px 1px 4px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

/* Amount now lives in the top badge cluster (next to the status pills). */
[b-1uxsh0t320] .aoc-amount {
    font-family: var(--font-ui, inherit);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Top cluster: amount + chips + status pills align on one trailing row. */
[b-1uxsh0t320] .status-badge-container { gap: 6px 8px; }

/* Address starts at the freed price slot — sits directly under the name. */
[b-1uxsh0t320] .delivery-address-row { margin-top: 0; }

/* ==========================================================================
   PANEL HEAD — aligned with TableOverviewCard (.tov-head)
   ========================================================================== */
.aof-head[b-1uxsh0t320] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
}

.aof-head-title[b-1uxsh0t320] {
    margin: 0;
    margin-right: 2px;
    white-space: nowrap;
    font-family: var(--font-display, inherit);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.aof-head-spacer[b-1uxsh0t320] {
    flex: 1;
    min-width: 8px;
}

.aof-icon-btn[b-1uxsh0t320] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.aof-icon-btn:hover[b-1uxsh0t320] {
    background: var(--slate-100);
    color: var(--ds-text);
}

.aof-icon-btn svg[b-1uxsh0t320] {
    width: 16px;
    height: 16px;
}

.aof-icon-btn.is-spinning svg[b-1uxsh0t320] {
    animation: aof-spin-b-1uxsh0t320 0.8s linear infinite;
}

@keyframes aof-spin-b-1uxsh0t320 {
    to { transform: rotate(360deg); }
}

/* View-options dropdown (eye) — anchored to the header's right edge, opens down-left
   inside the card so it never clips on the panel boundary. */
.aof-view-backdrop[b-1uxsh0t320] {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.aof-view-pop[b-1uxsh0t320] {
    position: absolute;
    top: calc(100% + 4px);
    right: 12px;
    z-index: 50;
    width: 210px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    box-shadow: var(--ds-shadow-3, 0 8px 24px rgba(15, 23, 42, 0.12));
}

.aof-view-title[b-1uxsh0t320] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.aof-view-item[b-1uxsh0t320] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 6px;
    border-radius: var(--ds-radius-sm);
    font-size: 0.88rem;
    color: var(--ds-text);
    cursor: pointer;
}

.aof-view-item:hover[b-1uxsh0t320] {
    background: var(--slate-100);
}

.aof-view-item input[b-1uxsh0t320] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-600);
    cursor: pointer;
}


/* ==========================================================================
   DELIVERY TIME CHIPS — Kurye varışı / Teslimat
   Clean, glanceable pills replacing the old inline plain-text run.
   ========================================================================== */
[b-1uxsh0t320] .aoc-delivery-times {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* One compact pill — soft slate surface, hint label, bold value */
[b-1uxsh0t320] .aoc-timechip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    line-height: 1.4;
    padding: 3px 9px;
    background: var(--bg-muted, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-pill, 9999px);
    white-space: nowrap;
}

[b-1uxsh0t320] .aoc-timechip svg {
    width: 12px;
    height: 12px;
    color: var(--fg-hint, #64748b);
    flex-shrink: 0;
}

[b-1uxsh0t320] .aoc-timechip__label {
    color: var(--fg-hint, #64748b);
    font-weight: 600;
}

[b-1uxsh0t320] .aoc-timechip__val {
    color: var(--fg-1, #0f172a);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

[b-1uxsh0t320] .aoc-timechip__eta {
    color: var(--fg-hint, #64748b);
    font-weight: 600;
}

/* Teslimat — neutral pill, brand-tinted moto icon to read apart from Kurye */
[b-1uxsh0t320] .aoc-timechip--delivery svg {
    color: #036ac4;                /* --brand-600 */
}

/* Imminent arrival (≤5 dk) — soft amber emphasis instead of harsh red text */
[b-1uxsh0t320] .aoc-timechip--soon {
    background: #fffbeb;           /* --warning-50 */
    border-color: #fde68a;        /* warning-100/200 */
}

[b-1uxsh0t320] .aoc-timechip--soon svg,
[b-1uxsh0t320] .aoc-timechip--soon .aoc-timechip__label,
[b-1uxsh0t320] .aoc-timechip--soon .aoc-timechip__val,
[b-1uxsh0t320] .aoc-timechip--soon .aoc-timechip__eta {
    color: #b45309;                /* --status-warning-fg */
}

/* Courier-tracking header button — motorcycle with a small location-pin badge. */
[b-1uxsh0t320] .aof-track-ic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

[b-1uxsh0t320] .aof-track-ic > svg {
    width: 20px;
    height: 20px;
}

[b-1uxsh0t320] .aof-track-pin {
    position: absolute;
    top: -6px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface, #fff);
    border-radius: 50%;
    padding: 1px;
}

[b-1uxsh0t320] .aof-track-pin > svg {
    width: 12px;
    height: 12px;
}
/* /Components/Pages/Dashboard/Cards/ActiveOrdersMap.razor.rz.scp.css */
/* Map container needs position relative for absolute positioning of the popup */
.map-container[b-l91uubo1sa] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Courier Status Bar - Compact chip style */
.courier-status-bar[b-l91uubo1sa] {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    transition: all 0.2s ease;
    max-width: calc(100% - 70px);
    overflow: visible;
}

.courier-status-bar.collapsed[b-l91uubo1sa] {
    max-width: 50px;
    border-radius: 50%;
}

.toggle-button[b-l91uubo1sa] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: #475569;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
    overflow: visible;
}

.toggle-button:hover[b-l91uubo1sa] {
    background: #334155;
}

.toggle-button:active[b-l91uubo1sa] {
    background: #1e293b;
}

.toggle-button[b-l91uubo1sa]  svg {
    width: 18px;
    height: 18px;
}

.toggle-count[b-l91uubo1sa] {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    background: #22c55e;
    border-radius: 10px;
    padding: 2px 5px;
    min-width: 16px;
    text-align: center;
    line-height: 1;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.status-chips[b-l91uubo1sa] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.status-chips[b-l91uubo1sa]::-webkit-scrollbar {
    display: none;
}

.status-chip[b-l91uubo1sa] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    background: #f1f5f9;
    white-space: nowrap;
    font-size: 12px;
    border: 1px solid transparent;
}

.status-chip .dot[b-l91uubo1sa] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-chip .label[b-l91uubo1sa] {
    color: #64748b;
    font-weight: 500;
}

.status-chip .count[b-l91uubo1sa] {
    font-weight: 700;
    color: #1e293b;
}

.status-chip.online[b-l91uubo1sa] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.status-chip.online .dot[b-l91uubo1sa] {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.status-chip.online .count[b-l91uubo1sa] {
    color: #15803d;
}

.status-chip.onbreak[b-l91uubo1sa] {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.3);
}

.status-chip.onbreak .dot[b-l91uubo1sa] {
    background: #fb923c;
    box-shadow: 0 0 6px rgba(251, 146, 60, 0.5);
}

.status-chip.onbreak .count[b-l91uubo1sa] {
    color: #c2410c;
}

.status-chip.offline[b-l91uubo1sa] {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.3);
}

.status-chip.offline .dot[b-l91uubo1sa] {
    background: #94a3b8;
}

.status-chip.offline .count[b-l91uubo1sa] {
    color: #475569;
}

.status-chip.workspace[b-l91uubo1sa] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.status-chip.workspace .dot[b-l91uubo1sa] {
    background: #8b5cf6;
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.5);
}

.status-chip.workspace .count[b-l91uubo1sa] {
    color: #6d28d9;
}

.status-chip.total[b-l91uubo1sa] {
    background: #475569;
    border: none;
}

.status-chip.total .label[b-l91uubo1sa],
.status-chip.total .count[b-l91uubo1sa] {
    color: white;
}

/* ============================================ */
/* RESPONSIVE BREAKPOINTS                      */
/* 600px, 768px, 1024px, 1280px, 1440px, 1600px */
/* ============================================ */

/* 1600px+ - Buyuk Desktop */
@media (min-width: 1600px) {
    .courier-status-bar[b-l91uubo1sa] {
        top: 12px;
        left: 12px;
    }

    .status-chip[b-l91uubo1sa] {
        padding: 5px 12px;
        font-size: 13px;
    }

    .toggle-button[b-l91uubo1sa] {
        width: 44px;
        height: 44px;
    }

    [b-l91uubo1sa] .marker-info-window {
        max-width: 400px;
    }

    [b-l91uubo1sa] .marker-info-header {
        padding: 14px 18px;
        font-size: 17px;
    }

    [b-l91uubo1sa] .marker-info-content {
        padding: 18px;
    }
}

/* 1440px - Desktop */
@media (max-width: 1599px) {
    .courier-status-bar[b-l91uubo1sa] {
        top: 10px;
        left: 10px;
    }

    .status-chip[b-l91uubo1sa] {
        padding: 4px 10px;
        font-size: 12px;
    }
}

/* 1280px - Laptop */
@media (max-width: 1279px) {
    .courier-status-bar[b-l91uubo1sa] {
        display: none;;
    }

    .status-chip[b-l91uubo1sa] {
        padding: 4px 8px;
        font-size: 11px;
        gap: 3px;
    }

    .status-chip .dot[b-l91uubo1sa] {
        width: 7px;
        height: 7px;
    }

    .toggle-button[b-l91uubo1sa] {
        width: 38px;
        height: 38px;
    }

    [b-l91uubo1sa] .marker-info-window {
        max-width: 340px;
    }

    [b-l91uubo1sa] .marker-info-header {
        padding: 10px 14px;
        font-size: 15px;
    }

    [b-l91uubo1sa] .marker-info-content {
        padding: 14px;
    }

    [b-l91uubo1sa] .marker-info-label {
        font-size: 12px;
        width: 65px;
    }

    [b-l91uubo1sa] .marker-info-value {
        font-size: 13px;
    }
}

/* 1023px - Mobile baslangici */
@media (max-width: 1023px) {
    .map-container[b-l91uubo1sa] {
        min-height: 400px;
    }

    /* Mobilde courier status bar gizle */
    .courier-status-bar[b-l91uubo1sa] {
        display: none !important;
    }

    [b-l91uubo1sa] .marker-info-window {
        max-width: 320px;
    }

    [b-l91uubo1sa] .marker-info-header {
        padding: 10px 12px;
        font-size: 14px;
    }

    [b-l91uubo1sa] .marker-info-content {
        padding: 12px;
    }

    [b-l91uubo1sa] .marker-info-row {
        margin-bottom: 10px;
    }

    [b-l91uubo1sa] .marker-info-label {
        font-size: 11px;
        width: 60px;
    }

    [b-l91uubo1sa] .marker-info-value {
        font-size: 12px;
    }
}

/* 768px - Tablet Portrait */
@media (max-width: 768px) {
    .map-container[b-l91uubo1sa] {
        min-height: 400px;
    }

    .courier-status-bar[b-l91uubo1sa] {
        top: 6px;
        left: 6px;
        max-width: calc(100% - 50px);
        padding: 3px;
    }

    .status-chips[b-l91uubo1sa] {
        gap: 4px;
        padding: 4px 8px 4px 6px;
    }

    .status-chip[b-l91uubo1sa] {
        padding: 2px 6px;
        font-size: 10px;
        border-radius: 10px;
    }

    .status-chip .label[b-l91uubo1sa] {
        display: none;
    }

    .status-chip .dot[b-l91uubo1sa] {
        width: 6px;
        height: 6px;
    }

    .toggle-button[b-l91uubo1sa] {
        width: 34px;
        height: 34px;
    }

    .toggle-count[b-l91uubo1sa] {
        font-size: 9px;
        padding: 1px 4px;
        min-width: 14px;
        top: -3px;
        right: -3px;
    }

    [b-l91uubo1sa] .gm-style .gm-style-iw-c {
        max-width: 300px !important;
    }

    [b-l91uubo1sa] .marker-info-window {
        max-width: 300px;
        min-width: 260px;
    }

    [b-l91uubo1sa] .marker-info-header {
        padding: 8px 10px;
        font-size: 13px;
    }

    [b-l91uubo1sa] .marker-info-content {
        padding: 10px;
    }

    [b-l91uubo1sa] .marker-info-row {
        margin-bottom: 8px;
        flex-direction: row;
        align-items: flex-start;
        gap: 6px;
    }

    [b-l91uubo1sa] .marker-info-label {
        font-size: 10px;
        width: 55px;
        min-width: 55px;
        color: #888;
    }

    [b-l91uubo1sa] .marker-info-value {
        font-size: 12px;
        flex: 1;
        word-break: break-word;
    }

    [b-l91uubo1sa] .marker-info-value.phone-value {
        flex-wrap: wrap;
    }

    [b-l91uubo1sa] .marker-info-value .call-btn {
        width: 20px;
        height: 20px;
        min-width: 20px;
        margin-left: 6px;
    }

    [b-l91uubo1sa] .marker-info-value .call-btn svg {
        width: 10px;
        height: 10px;
    }

    [b-l91uubo1sa] .marker-info-value.status {
        padding: 3px 8px;
        font-size: 11px;
    }
}

/* 600px - Telefon */
@media (max-width: 600px) {
    .map-container[b-l91uubo1sa] {
        min-height: 400px;
    }

    .courier-status-bar[b-l91uubo1sa] {
        top: 4px;
        left: 4px;
        max-width: calc(100% - 44px);
        padding: 2px;
        border-radius: 16px;
    }

    .courier-status-bar.collapsed[b-l91uubo1sa] {
        max-width: 40px;
        border-radius: 50%;
    }

    .status-chips[b-l91uubo1sa] {
        gap: 3px;
        padding: 3px 6px 3px 4px;
    }

    .status-chip[b-l91uubo1sa] {
        padding: 2px 5px;
        font-size: 9px;
        border-radius: 8px;
        gap: 2px;
    }

    .status-chip .label[b-l91uubo1sa] {
        display: none;
    }

    .status-chip .dot[b-l91uubo1sa] {
        width: 5px;
        height: 5px;
    }

    .status-chip .count[b-l91uubo1sa] {
        font-size: 9px;
    }

    .toggle-button[b-l91uubo1sa] {
        width: 32px;
        height: 32px;
    }

    .toggle-button[b-l91uubo1sa]  svg {
        width: 14px;
        height: 14px;
    }

    .toggle-count[b-l91uubo1sa] {
        font-size: 8px;
        padding: 1px 3px;
        min-width: 12px;
        top: -2px;
        right: -2px;
        border-width: 1px;
    }

    [b-l91uubo1sa] .gm-style .gm-style-iw-c {
        max-width: 280px !important;
        min-width: 240px !important;
    }

    [b-l91uubo1sa] .gm-style .gm-style-iw-c button.gm-ui-hover-effect {
        width: 20px !important;
        height: 20px !important;
        top: 4px !important;
        right: 4px !important;
    }

    [b-l91uubo1sa] .gm-style .gm-style-iw-c button.gm-ui-hover-effect img {
        width: 12px !important;
        height: 12px !important;
    }

    [b-l91uubo1sa] .marker-info-window {
        max-width: 280px;
        min-width: 240px;
    }

    [b-l91uubo1sa] .marker-info-header {
        padding: 6px 8px;
        font-size: 12px;
        gap: 6px;
    }

    [b-l91uubo1sa] .marker-info-content {
        padding: 8px;
    }

    [b-l91uubo1sa] .marker-info-row {
        margin-bottom: 6px;
        flex-direction: row;
        align-items: flex-start;
        gap: 4px;
    }

    [b-l91uubo1sa] .marker-info-label {
        font-size: 9px;
        width: 50px;
        min-width: 50px;
        color: #888;
        flex-shrink: 0;
    }

    [b-l91uubo1sa] .marker-info-value {
        font-size: 11px;
        word-break: break-word;
        flex: 1;
    }

    [b-l91uubo1sa] .marker-info-value.phone-value {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    [b-l91uubo1sa] .marker-info-value .call-btn {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-left: 4px;
    }

    [b-l91uubo1sa] .marker-info-value .call-btn svg {
        width: 9px;
        height: 9px;
    }

    [b-l91uubo1sa] .marker-info-value.status {
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* ============================================ */
/* Touch-friendly & iOS improvements           */
/* ============================================ */
@media (pointer: coarse) {
    .toggle-button[b-l91uubo1sa] {
        min-width: 44px;
        min-height: 44px;
    }

    .status-chip[b-l91uubo1sa] {
        min-height: 32px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* iOS Safari safe area */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .courier-status-bar[b-l91uubo1sa] {
            left: max(6px, env(safe-area-inset-left));
        }
    }
}

/* Smooth touch scrolling for status chips */
@media (pointer: coarse) {
    .status-chips[b-l91uubo1sa] {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
    }

    .status-chip[b-l91uubo1sa] {
        scroll-snap-align: start;
    }
}

/* Modern marker tooltip/info window styles */
[b-l91uubo1sa] .gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    max-width: 360px !important;
    overflow: visible !important;
}

[b-l91uubo1sa] .gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
    max-height: none !important;
}

[b-l91uubo1sa] .gm-style .gm-style-iw-t::after {
    background: linear-gradient(45deg, rgba(235, 235, 240, 1) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

[b-l91uubo1sa] .gm-style-iw-tc,
[b-l91uubo1sa] .gm-style-iw-tc::after,
[b-l91uubo1sa] .gm-style-iw-tc div {
    background-color: transparent !important;
}

[b-l91uubo1sa] .gm-style-iw-c {
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: default !important;
}

[b-l91uubo1sa] .gm-style-iw-chr {
    opacity: 0 !important;
    pointer-events: auto !important;
    display: none !important;
}

[b-l91uubo1sa] .gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    top: 5px !important;
    right: 5px !important;
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
}

[b-l91uubo1sa] .gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.1) !important;
}

[b-l91uubo1sa] .gm-style .gm-style-iw-c button.gm-ui-hover-effect img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    opacity: 0.8 !important;
}

[b-l91uubo1sa] .marker-info-window {
    padding: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
}

[b-l91uubo1sa] .marker-info-header {
    padding: 12px 16px;
    color: white;
    font-weight: 600;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    letter-spacing: 0.3px;
    position: relative;
}

[b-l91uubo1sa] .marker-info-content {
    padding: 16px;
    background: #ebebf0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

[b-l91uubo1sa] .marker-info-row {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
}

[b-l91uubo1sa] .marker-info-row:last-child {
    margin-bottom: 0;
}

[b-l91uubo1sa] .marker-info-label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    width: 70px;
    flex-shrink: 0;
}

[b-l91uubo1sa] .marker-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    flex-grow: 1;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
}

[b-l91uubo1sa] .marker-info-value.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    background-color: #e0e2e8;
}

[b-l91uubo1sa] .marker-info-value.status.online {
    background-color: rgba(56, 193, 114, 0.2);
    color: #1e7d45;
}

[b-l91uubo1sa] .marker-info-value.status.onbreak {
    background-color: rgba(246, 173, 85, 0.2);
    color: #975a16;
}

[b-l91uubo1sa] .marker-info-value.status.offline {
    background-color: rgba(160, 174, 192, 0.2);
    color: #4a5568;
}

/* Phone value with call button */
[b-l91uubo1sa] .marker-info-value.phone-value {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

[b-l91uubo1sa] .marker-info-value .call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    background-color: #22c55e;
    border-radius: 50%;
    margin-left: 8px;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

[b-l91uubo1sa] .marker-info-value .call-btn:hover {
    background-color: #16a34a;
}

[b-l91uubo1sa] .marker-info-value .call-btn svg {
    width: 12px;
    height: 12px;
}

/* ============================================================== */
/*  Floating courier route panel (left)                           */
/* ============================================================== */
.aom-route-panel[b-l91uubo1sa] {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 320px;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(15, 23, 42, 0.12));
    z-index: 1100;
    overflow: hidden;
    font-family: var(--ds-font-ui, 'Inter', 'Segoe UI', system-ui, sans-serif);
}

.aom-rp-head[b-l91uubo1sa] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.aom-rp-avatar[b-l91uubo1sa] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill, 999px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.aom-rp-id[b-l91uubo1sa] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aom-rp-name[b-l91uubo1sa] {
    font-weight: 600;
    font-size: 14px;
    color: var(--ds-text, var(--fg-1, #0f172a));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aom-rp-status[b-l91uubo1sa] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-muted, var(--fg-3, #64748b));
}

/* Durum <button> oldu (tıklanınca durum modalı açılır) ama görünüm aynı kalmalı:
   yalnızca tarayıcının kendi buton stili sıfırlanıyor. font-family kullanılıyor,
   `font: inherit` üstteki font-size/weight değerlerini de ezerdi. */
.aom-rp-status.is-clickable[b-l91uubo1sa] {
    appearance: none;
    -webkit-appearance: none;
    /* Hover zemininin metne yapışmaması için hafif dolgu; negatif margin ile
       rozet başlangıçtaki hizasında kalıyor. */
    padding: 2px 6px;
    margin-left: -6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    /* color VERİLMİYOR: .aom-rp-status--online/--onbreak tek sınıf (0,1,0),
       buradaki iki sınıflı seçici (0,2,0) onları ezip rengi düz alırdı. */
    font-family: inherit;
    cursor: pointer;
    transition: background-color .12s ease;
}

.aom-rp-status.is-clickable:hover[b-l91uubo1sa] {
    background: var(--ds-surface-2, rgba(100, 116, 139, 0.12));
}

.aom-rp-status.is-clickable:focus-visible[b-l91uubo1sa] {
    outline: 2px solid var(--ds-accent, #2563eb);
    outline-offset: 2px;
}

.aom-rp-dot[b-l91uubo1sa] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}

.aom-rp-status--online[b-l91uubo1sa] { color: #15803d; }
.aom-rp-status--online .aom-rp-dot[b-l91uubo1sa] { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
.aom-rp-status--onbreak[b-l91uubo1sa] { color: #c2410c; }
.aom-rp-status--onbreak .aom-rp-dot[b-l91uubo1sa] { background: #fb923c; }
.aom-rp-status--offline[b-l91uubo1sa] { color: #475569; }
.aom-rp-status--offline .aom-rp-dot[b-l91uubo1sa] { background: #94a3b8; }

.aom-rp-close[b-l91uubo1sa] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--ds-text-muted, #64748b);
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.aom-rp-close:hover[b-l91uubo1sa] { background: var(--bg-subtle, #f8fafc); color: var(--ds-text, #0f172a); }
.aom-rp-close:focus-visible[b-l91uubo1sa] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }
.aom-rp-close[b-l91uubo1sa]  svg { width: 18px; height: 18px; }

.aom-rp-meta[b-l91uubo1sa] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
    background: var(--bg-subtle, #f8fafc);
}

.aom-rp-metaitem[b-l91uubo1sa] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ds-text, var(--fg-2, #334155));
    text-decoration: none;
}

.aom-rp-metaitem[b-l91uubo1sa]  svg { width: 14px; height: 14px; color: var(--ds-text-muted, #64748b); }
.aom-rp-muted[b-l91uubo1sa] { color: var(--ds-text-muted, #64748b); font-weight: 400; }
.aom-rp-call[b-l91uubo1sa] { color: var(--accent, #036ac4); }
.aom-rp-call:hover[b-l91uubo1sa] { text-decoration: underline; }
.aom-rp-call[b-l91uubo1sa]  svg { color: var(--accent, #036ac4); }

/* Kurye batarya seviyesi — renk bandı: düşük (kırmızı) / orta (amber) / yüksek (yeşil). */
.aom-rp-battery[b-l91uubo1sa] { font-weight: 600; font-variant-numeric: tabular-nums; }
.aom-rp-battery--low[b-l91uubo1sa] { color: var(--error, #dc2626); }
.aom-rp-battery--low[b-l91uubo1sa]  svg { color: var(--error, #dc2626); }
.aom-rp-battery--medium[b-l91uubo1sa] { color: var(--warning, #d97706); }
.aom-rp-battery--medium[b-l91uubo1sa]  svg { color: var(--warning, #d97706); }
.aom-rp-battery--high[b-l91uubo1sa] { color: var(--success, #16a34a); }
.aom-rp-battery--high[b-l91uubo1sa]  svg { color: var(--success, #16a34a); }

.aom-rp-empty[b-l91uubo1sa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-6, 28px) var(--space-4, 16px);
    color: var(--ds-text-muted, #64748b);
    font-size: 13px;
    text-align: center;
}

.aom-rp-empty[b-l91uubo1sa]  svg { width: 24px; height: 24px; color: var(--ds-border-strong, #cbd5e1); }

.aom-rp-summary[b-l91uubo1sa] {
    display: flex;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.aom-rp-stat[b-l91uubo1sa] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.aom-rp-stat + .aom-rp-stat[b-l91uubo1sa] { border-left: 1px solid var(--ds-border, #e2e8f0); }
.aom-rp-stat-l[b-l91uubo1sa] { font-size: 11px; color: var(--ds-text-muted, #64748b); }
.aom-rp-stat strong[b-l91uubo1sa] { font-size: 14px; color: var(--ds-text, var(--fg-1, #0f172a)); font-weight: 700; }

.aom-rp-steps[b-l91uubo1sa] {
    list-style: none;
    margin: 0;
    padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
    overflow-y: auto;
}

.aom-rp-step[b-l91uubo1sa] {
    display: flex;
    gap: var(--space-3, 12px);
    padding-bottom: var(--space-3, 12px);
    position: relative;
}

.aom-rp-step.is-clickable[b-l91uubo1sa] { cursor: pointer; }
.aom-rp-step.is-clickable .aom-rp-step-body[b-l91uubo1sa] {
    border-radius: var(--radius-md, 10px);
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.aom-rp-step.is-clickable:hover .aom-rp-step-body[b-l91uubo1sa] { background: var(--bg-subtle, #f8fafc); }
.aom-rp-step.is-selected .aom-rp-step-body[b-l91uubo1sa] {
    background: var(--bg-subtle, #f8fafc);
    box-shadow: inset 3px 0 0 var(--seg, var(--accent, #036ac4));
    padding-left: 9px;
}

/* Connector line between step pins */
.aom-rp-step:not(:last-child)[b-l91uubo1sa]::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--ds-border, #e2e8f0);
}

.aom-rp-step-pin[b-l91uubo1sa] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill, 999px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 1;
}

.aom-rp-step-pin[b-l91uubo1sa]  svg { width: 15px; height: 15px; }
.aom-rp-step-pin.is-start[b-l91uubo1sa] { background: var(--ds-text, #475569); }
.aom-rp-step-pin.is-pickup[b-l91uubo1sa] { background: #f59e0b; }
.aom-rp-step-pin.is-drop[b-l91uubo1sa] { background: var(--accent, #036ac4); }

.aom-rp-step-body[b-l91uubo1sa] { flex: 1; min-width: 0; }

.aom-rp-step-top[b-l91uubo1sa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
}

.aom-rp-step-title[b-l91uubo1sa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text, var(--fg-1, #0f172a));
}

.aom-rp-step-kind[b-l91uubo1sa] {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted, #64748b);
}

.aom-rp-step-name[b-l91uubo1sa] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aom-rp-step-logo[b-l91uubo1sa] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--ds-border, #e2e8f0);
    flex-shrink: 0;
}

.aom-rp-seg[b-l91uubo1sa] {
    width: 20px;
    height: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

.aom-rp-step-addr[b-l91uubo1sa] {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ds-text-muted, #64748b);
    line-height: 1.35;
}

.aom-rp-step-metrics[b-l91uubo1sa] {
    display: flex;
    gap: var(--space-4, 16px);
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--ds-text-subtle, #94a3b8);
}

.aom-rp-step-metrics span[b-l91uubo1sa] { display: inline-flex; align-items: center; gap: 4px; }
.aom-rp-step-metrics[b-l91uubo1sa]  svg { width: 12px; height: 12px; }

@media (max-width: 600px) {
    .aom-route-panel[b-l91uubo1sa] { width: calc(100% - 16px); top: 8px; left: 8px; max-height: 70%; }
}
/* /Components/Pages/Dashboard/Cards/CourierStatusCard.razor.rz.scp.css */
/* Courier Status Card Styles */

/* Couriers Grid */
[b-uadusjnxwq] .couriers-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
    height: min-content;
}

[b-uadusjnxwq] .couriers-grid::-webkit-scrollbar {
    width: 6px;
}

[b-uadusjnxwq] .couriers-grid::-webkit-scrollbar-track {
    background: var(--neutral-layer-2);
    border-radius: 3px;
}

[b-uadusjnxwq] .couriers-grid::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-rest);
    border-radius: 3px;
}

[b-uadusjnxwq] .couriers-grid::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-stroke-hover);
}

[b-uadusjnxwq] .courier-card {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background-color: var(--neutral-layer-1);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 12px;
}

[b-uadusjnxwq] .courier-card:hover {
    background-color: var(--neutral-layer-2);
    border-color: var(--accent-stroke-rest);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

[b-uadusjnxwq] .courier-card.online {
    border-left: 4px solid #16a34a;
}

[b-uadusjnxwq] .courier-card.on-break {
    border-left: 4px solid #d69e2e;
}

[b-uadusjnxwq] .courier-card.offline {
    border-left: 4px solid #6b7280;
    opacity: 0.7;
}

[b-uadusjnxwq] .courier-card.undefined {
    border-left: 4px solid #dc2626;
}

[b-uadusjnxwq] .courier-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--neutral-layer-3);
    color: var(--neutral-foreground-rest);
}

[b-uadusjnxwq] .courier-info {
    flex: 1;
    min-width: 0;
}

[b-uadusjnxwq] .courier-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-uadusjnxwq] .courier-status {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

[b-uadusjnxwq] .courier-delivery-count {
    font-size: 11px;
    color: var(--accent-foreground-rest);
    margin-top: 2px;
}

[b-uadusjnxwq] .courier-indicator {
    display: flex;
    align-items: center;
}

[b-uadusjnxwq] .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

[b-uadusjnxwq] .status-dot.online {
    background-color: #16a34a;
}

[b-uadusjnxwq] .status-dot.on-break {
    background-color: #d69e2e;
}

[b-uadusjnxwq] .status-dot.offline {
    background-color: #6b7280;
}

[b-uadusjnxwq] .status-dot.undefined {
    background-color: #dc2626;
}

/* Empty State */
[b-uadusjnxwq] .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

[b-uadusjnxwq] .empty-state .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

[b-uadusjnxwq] .empty-state p {
    margin-bottom: 1rem;
    margin-top: 0;
}

/* Couriers Status Card */
[b-uadusjnxwq] .couriers-status-card {
    margin-bottom: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    [b-uadusjnxwq] .couriers-grid {
        max-height: 50vh;
    }
    
    [b-uadusjnxwq] .courier-card {
        padding: 8px;
        gap: 8px;
    }
    
    [b-uadusjnxwq] .courier-avatar {
        width: 32px;
        height: 32px;
    }
}
/* /Components/Pages/Dashboard/Cards/CustomerLeaderboardCard.razor.rz.scp.css */
/* Customer leaderboard — design-system surface, brand-blue accents */
.lb-card[b-9dgv3lr0k9] {
    display: flex;
    flex-direction: column;
    height: 600px;
    padding: 20px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    box-sizing: border-box;
}

.lb-card__head[b-9dgv3lr0k9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.lb-card__title[b-9dgv3lr0k9] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.lb-card__title-icon[b-9dgv3lr0k9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ds-radius-sm, 8px);
    background: rgba(3, 106, 196, 0.10);
    color: var(--brand-600, #036ac4);
}

.lb-card__title-icon[b-9dgv3lr0k9]  svg {
    width: 18px;
    height: 18px;
}

/* Period toggle */
.lb-card__period[b-9dgv3lr0k9] {
    display: flex;
    gap: 2px;
    background: var(--ds-surface-sunken, #f1f5f9);
    border-radius: var(--ds-radius-pill, 999px);
    padding: 3px;
}

.lb-pill[b-9dgv3lr0k9] {
    border: none;
    background: transparent;
    padding: 5px 14px;
    border-radius: var(--ds-radius-pill, 999px);
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--ds-text-muted, #64748b);
    transition: background 0.15s ease, color 0.15s ease;
}

.lb-pill.active[b-9dgv3lr0k9] {
    background: var(--brand-600, #036ac4);
    color: #fff;
}

.lb-pill:hover:not(.active)[b-9dgv3lr0k9] {
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0f172a);
}

.lb-card__body[b-9dgv3lr0k9] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Skeleton */
.lb-skeleton[b-9dgv3lr0k9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lb-skeleton__row[b-9dgv3lr0k9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

/* Empty state */
.lb-empty[b-9dgv3lr0k9] {
    text-align: center;
    padding: 32px 16px;
    color: var(--ds-text-muted, #64748b);
}

.lb-empty div[b-9dgv3lr0k9] {
    font-size: 14px;
}

/* Table */
.lb-table[b-9dgv3lr0k9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lb-table__head[b-9dgv3lr0k9] {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    font-size: 11px;
    color: var(--ds-text-subtle, #94a3b8);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.lb-col-rank[b-9dgv3lr0k9] { width: 32px; flex-shrink: 0; }
.lb-col-name[b-9dgv3lr0k9] { flex: 1; min-width: 0; }
.lb-col-orders[b-9dgv3lr0k9] { width: 70px; text-align: right; }
.lb-col-spent[b-9dgv3lr0k9] { width: 90px; text-align: right; }
.lb-col-source[b-9dgv3lr0k9] { width: 100px; text-align: right; }

.lb-row[b-9dgv3lr0k9] {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: var(--ds-radius-sm, 8px);
    cursor: pointer;
    transition: background 0.12s ease;
}

.lb-row:hover[b-9dgv3lr0k9] {
    background: var(--ds-surface-alt, #f8fafc);
}

.lb-name[b-9dgv3lr0k9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-spent[b-9dgv3lr0k9] {
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-text-muted, #475569);
}

.lb-source[b-9dgv3lr0k9] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.lb-source img[b-9dgv3lr0k9] {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    object-fit: contain;
}

.lb-source span[b-9dgv3lr0k9] {
    font-size: 12px;
    color: var(--ds-text-muted, #64748b);
}

.lb-rank-plain[b-9dgv3lr0k9] {
    font-size: 13px;
    color: var(--ds-text-muted, #64748b);
    font-weight: 600;
}

.lb-rank[b-9dgv3lr0k9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.rank-1[b-9dgv3lr0k9] { background: linear-gradient(135deg, #facc15, #f59e0b); }
.rank-2[b-9dgv3lr0k9] { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.rank-3[b-9dgv3lr0k9] { background: linear-gradient(135deg, #d6a06a, #b45309); }

.lb-badge[b-9dgv3lr0k9] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--ds-radius-pill, 999px);
    font-size: 12px;
    font-weight: 700;
    background: rgba(3, 106, 196, 0.10);
    color: var(--brand-600, #036ac4);
}
/* /Components/Pages/Dashboard/Cards/DeliveryMapCard.razor.rz.scp.css */
/* Delivery Map Card Styles */

/* Map Container */
[b-ylo8bsyu4j] .map-container-mini {
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--neutral-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
}

/* Map Card */
[b-ylo8bsyu4j] .map-card {
    margin-bottom: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    [b-ylo8bsyu4j] .map-container-mini {
        height: 150px;
    }
}
/* /Components/Pages/Dashboard/Cards/LiveOperationsMetricCard.razor.rz.scp.css */
/* Live-operations KPI card — design-system tokens (white --ds-surface card on the
   --ds-surface-sunken page), brand-blue accent chip. Single horizontal row: icon +
   title on the left, the two metrics (Bugün / Bu Ay) side-by-side on the right,
   filling the horizontal space instead of stacking under the title. */
.kpi-card[b-ds6s2bzakg] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    box-sizing: border-box;
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover[b-ds6s2bzakg] {
    border-color: var(--ds-border-strong, #cbd5e1);
    box-shadow: var(--ds-shadow-2, 0 4px 12px rgba(15, 23, 42, 0.08));
}

.kpi-card__head[b-ds6s2bzakg] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.kpi-card__icon[b-ds6s2bzakg] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--brand-50, #eff6ff);
    color: var(--brand-600, #036ac4);
}

.kpi-card__icon[b-ds6s2bzakg]  svg {
    width: 20px;
    height: 20px;
}

.kpi-card__title[b-ds6s2bzakg] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Both metrics sit side-by-side on the right, on the same row as the title. */
.kpi-card__values[b-ds6s2bzakg] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
    flex-shrink: 0;
}

.kpi-card__metric[b-ds6s2bzakg] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
}

.kpi-card__metric-label[b-ds6s2bzakg] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

.kpi-card__metric-value[b-ds6s2bzakg] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text-muted, #475569);
    white-space: nowrap;
    text-align: right;
}

.kpi-card__metric-value--primary[b-ds6s2bzakg] {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ds-text, #0f172a);
}

.kpi-card__divider[b-ds6s2bzakg] {
    align-self: stretch;
    width: 1px;
    background: var(--ds-border, #e2e8f0);
    margin: 2px 0;
}

.kpi-card__masked[b-ds6s2bzakg] {
    letter-spacing: 0.1em;
    color: var(--ds-text-subtle, #94a3b8);
}

@media (max-width: 600px) {
    .kpi-card[b-ds6s2bzakg] {
        padding: 16px;
    }

    .kpi-card__metric-value--primary[b-ds6s2bzakg] {
        font-size: 20px;
    }
}
/* /Components/Pages/Dashboard/Cards/OrdersKanbanBoard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Aktif Siparişler — Pano (Kanban)
   Kompakt not-kartları, canlı sürükle geri bildirimi, solan tamamlanan kartlar.
   Token sürücülü, ileri-yönlü akış.  (no FluentUI underneath)
   ══════════════════════════════════════════════════════════════════════════ */

.kbn[b-cf77l2emvr] {
    display: flex;
    gap: var(--space-3);
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    padding: var(--space-3);
    overflow-x: auto;
}

/* ── Sütun ── */
.kbn-col[b-cf77l2emvr] {
    flex: 1 1 0;
    min-width: 268px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* Sürüklerken sütunlar hafifçe geri çekilir; kaynak/hedef net okunur. */
.kbn--dragging .kbn-col[b-cf77l2emvr] { opacity: .9; }

.kbn-col--drop[b-cf77l2emvr] {
    background: var(--accent-soft);
    border-color: var(--accent);
    border-style: dashed;
    box-shadow: var(--shadow-lg);
    opacity: 1 !important;
}

.kbn-col__head[b-cf77l2emvr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-2);
    border-bottom: 1px solid var(--border-subtle);
}

.kbn-col__dot[b-cf77l2emvr] {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--slate-400);
    flex-shrink: 0;
}

.kbn-col__head--new       .kbn-col__dot[b-cf77l2emvr] { background: var(--brand-500); }
.kbn-col__head--preparing .kbn-col__dot[b-cf77l2emvr] { background: var(--warning-500); }
.kbn-col__head--onTheWay  .kbn-col__dot[b-cf77l2emvr] { background: var(--courier-500); }
.kbn-col__head--completed .kbn-col__dot[b-cf77l2emvr] { background: var(--success-500); }

.kbn-col__title[b-cf77l2emvr] { flex: 1; }

.kbn-col__count[b-cf77l2emvr] {
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--fg-3);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kbn-col__body[b-cf77l2emvr] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Dar yatay padding + sabit kaydırma oluğu: kaydırma çubuğu sağ boşluğu yemesin,
       sol ile sağ boşluk eşit kalsın. */
    padding: var(--space-2) 4px;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.kbn-empty[b-cf77l2emvr] {
    margin: auto;
    padding: var(--space-6) var(--space-2);
    text-align: center;
    color: var(--fg-disabled);
    font-size: 13px;
}

/* Sürüklenen ileri sütunda gösterilen animasyonlu bırakma alanı. */
.kbn-dropzone[b-cf77l2emvr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 64px;
    border: 2px dashed var(--accent);
    border-radius: var(--radius-lg);
    background: var(--bg);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    animation: kbn-pulse-b-cf77l2emvr 1.1s ease-in-out infinite;
}

@keyframes kbn-pulse-b-cf77l2emvr {
    0%, 100% { box-shadow: 0 0 0 0 rgba(3, 106, 196, .18); }
    50%      { box-shadow: 0 0 0 6px rgba(3, 106, 196, .06); }
}

/* ── Kart ── */
.kbn-card[b-cf77l2emvr] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 6px !important;
    box-shadow: var(--shadow-xs);
    cursor: grab;
    display: flex;
    flex-direction: column;
    animation: kbn-card-in-b-cf77l2emvr .26s ease;
    transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease, opacity .8s linear;
}

.kbn-card:hover[b-cf77l2emvr] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.kbn-card:active[b-cf77l2emvr] { cursor: grabbing; }

/* Sürüklenen kart: kaldırılmış, hafif eğik, hayaletlenmiş — "elde". */
.kbn-card.is-dragging[b-cf77l2emvr] {
    opacity: .55;
    border: 1px dashed var(--accent);
    box-shadow: var(--shadow-lg);
    transform: scale(.98) rotate(-1deg);
}

.kbn-card--courier[b-cf77l2emvr] { background: var(--warning-50); }

/* Tamamlanan kartlar 5 dakikalık ömürleri boyunca solar (opacity satır içi ayarlanır). */
.kbn-card--done[b-cf77l2emvr] {
    cursor: default;
    background: var(--bg-muted);
    transition: opacity 6s linear, box-shadow .2s ease, border-color .2s ease;
}

@keyframes kbn-card-in-b-cf77l2emvr {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Kimlik satırı: logo · (ad + platform kodu) · (süre + fiş no, sağ üst).
   align-items: flex-start → süre/fiş no üste hizalı (ortalanmaz); ad görselin üstüyle,
   platform kodu görselin altıyla hizalanır. */
.kbn-card__top[b-cf77l2emvr] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

/* Ad — sol, görselin üstüyle hizalı. */
.kbn-namecol[b-cf77l2emvr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Sağ meta sütunu — süre + fiş no üstte, platform kodu fişin altında (sağa hizalı).
   align-self: stretch + space-between → platform kodunun altı görselin altıyla hizalanır. */
.kbn-meta[b-cf77l2emvr] {
    flex-shrink: 0;
    align-self: stretch;
    min-height: 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
}

/* Süre + fiş no satırı. */
.kbn-meta-top[b-cf77l2emvr] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.kbn-logo[b-cf77l2emvr] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* contain: platform logoları kare değil (ör. Migros Yemek geniş wordmark); kare logolarda fark yok. */
.kbn-logo img[b-cf77l2emvr] { width: 100%; height: 100%; object-fit: contain; display: block; }
.kbn-logo__icon[b-cf77l2emvr] { display: flex; align-items: center; justify-content: center; }

.kbn-name[b-cf77l2emvr] {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kbn-elapsed[b-cf77l2emvr] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kbn-receipt[b-cf77l2emvr] {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    color: var(--fg-2);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Meta satırı */
.kbn-card__meta[b-cf77l2emvr] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kbn-amount[b-cf77l2emvr] { font-size: 13px; font-weight: 700; color: var(--fg-1); }

.kbn-chip[b-cf77l2emvr] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    color: var(--fg-3);
    font-size: 11px;
    font-weight: 600;
}

.kbn-chip--courier[b-cf77l2emvr] {
    background: var(--warning-50);
    border-color: var(--warning-100);
    color: var(--warning-600);
}

/* Mesafe çipi — konum ikonu + km/m değeri. */
.kbn-chip--km[b-cf77l2emvr] {
    flex-shrink: 0;
    gap: 3px;
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
}

.kbn-chip--km[b-cf77l2emvr]  svg {
    width: 12px;
    height: 12px;
    color: var(--fg-hint);
}

.kbn-store[b-cf77l2emvr] {
    margin-left: auto;
    font-size: 11px;
    color: var(--fg-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}

/* Adres + km satırı — adres soldan (kısalır), km en sağda. */
.kbn-addr-row[b-cf77l2emvr] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.kbn-addr[b-cf77l2emvr] {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--fg-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Alt: eylem butonları ── */
.kbn-card__foot[b-cf77l2emvr] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    min-height: 32px;
}

/* Platform kodu — fiş no'nun altında, sağa hizalı; altı görselin altıyla hizalanır. */
.kbn-platform[b-cf77l2emvr] {
    align-self: flex-end;
    max-width: 130px;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Birincil eylem butonu (durum ilerletme) */
.kbn-pbtn[b-cf77l2emvr] {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
}

.kbn-pbtn span[b-cf77l2emvr] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbn-pbtn:hover[b-cf77l2emvr] { filter: brightness(1.06); }
.kbn-pbtn:active[b-cf77l2emvr] { transform: translateY(0.5px); }
.kbn-pbtn:focus-visible[b-cf77l2emvr] { outline: 2px solid var(--accent); outline-offset: 2px; }

.kbn-pbtn--accept[b-cf77l2emvr]   { background: var(--success-600); }
.kbn-pbtn--prep[b-cf77l2emvr]     { background: var(--warning-500); }
.kbn-pbtn--go[b-cf77l2emvr]       { background: var(--brand-500); }
.kbn-pbtn--handover[b-cf77l2emvr] { background: var(--courier-600); }
.kbn-pbtn--deliver[b-cf77l2emvr]  { background: var(--accent); }

/* İkon butonları (kurye / yazdır / diğer / sütun bilgisi) */
.kbn-iconbtn[b-cf77l2emvr] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--fg-3);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.kbn-iconbtn:hover[b-cf77l2emvr] { background: var(--bg-muted); border-color: var(--border-strong); color: var(--fg-1); }
.kbn-iconbtn:focus-visible[b-cf77l2emvr] { outline: 2px solid var(--accent); outline-offset: 2px; }

.kbn-iconbtn--ghost[b-cf77l2emvr] {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-hint);
}

.kbn-iconbtn--ghost:hover[b-cf77l2emvr],
.kbn-iconbtn--ghost.is-active[b-cf77l2emvr] { background: var(--bg); color: var(--accent); }

/* ── Sütun bilgi popover'ı ── */
.kbn-col__info[b-cf77l2emvr] { position: relative; display: inline-flex; }

.kbn-pop-backdrop[b-cf77l2emvr] { position: fixed; inset: 0; z-index: 40; }

.kbn-pop[b-cf77l2emvr] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 41;
    width: 232px;
    padding: var(--space-3);
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: kbn-fade-b-cf77l2emvr .12s ease;
}

.kbn-pop__head[b-cf77l2emvr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-1);
    border: none;
    padding: 0;
}

.kbn-pop p[b-cf77l2emvr] {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg-3);
}

/* ── "Diğer" satır içi menü ── */
.kbn-more[b-cf77l2emvr] { position: relative; flex-shrink: 0; }

.kbn-menu[b-cf77l2emvr] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 41;
    min-width: 184px;
    padding: 4px;
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: kbn-fade-b-cf77l2emvr .12s ease;
}

.kbn-menu__item[b-cf77l2emvr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-2);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}

.kbn-menu__item:hover[b-cf77l2emvr] { background: var(--bg-muted); }
.kbn-menu__item:focus-visible[b-cf77l2emvr] { outline: 2px solid var(--accent); outline-offset: -2px; }
.kbn-menu__item--ok[b-cf77l2emvr] { color: var(--success-700); }
.kbn-menu__item--danger[b-cf77l2emvr] { color: var(--danger-600); }

/* ── Onay penceresi ── */
.kbn-confirm-backdrop[b-cf77l2emvr] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: kbn-fade-b-cf77l2emvr .15s ease;
}

@keyframes kbn-fade-b-cf77l2emvr { from { opacity: 0; } to { opacity: 1; } }

.kbn-confirm[b-cf77l2emvr] {
    width: 100%;
    max-width: 430px;
    background: var(--layer-1);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
    text-align: center;
    animation: kbn-pop-b-cf77l2emvr .2s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes kbn-pop-b-cf77l2emvr {
    from { opacity: 0; transform: scale(.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.kbn-confirm__icon[b-cf77l2emvr] {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-3);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kbn-confirm__icon[b-cf77l2emvr]  svg { width: 28px; height: 28px; }

.kbn-confirm--dragstatus .kbn-confirm__icon[b-cf77l2emvr] { background: var(--accent-soft); color: var(--accent); }
.kbn-confirm--complete   .kbn-confirm__icon[b-cf77l2emvr] { background: var(--status-success-bg); color: var(--success-600); }
.kbn-confirm--cancel     .kbn-confirm__icon[b-cf77l2emvr] { background: var(--status-danger-bg); color: var(--danger-600); }

.kbn-confirm__title[b-cf77l2emvr] {
    margin: 0 0 var(--space-2);
    font-size: 18px;
    font-weight: 700;
    color: var(--fg-1);
}

.kbn-confirm__body[b-cf77l2emvr] {
    margin: 0 0 var(--space-4);
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg-3);
}

.kbn-confirm__suppress[b-cf77l2emvr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: 13px;
    color: var(--fg-2);
    cursor: pointer;
}

.kbn-confirm__suppress input[b-cf77l2emvr] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.kbn-confirm__actions[b-cf77l2emvr] { display: flex; gap: var(--space-2); justify-content: center; }

.kbn-btn[b-cf77l2emvr] {
    flex: 1;
    height: 42px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, background .15s ease, border-color .15s ease;
}

.kbn-btn--ghost[b-cf77l2emvr] { background: var(--bg); border: 1px solid var(--border); color: var(--fg-2); }
.kbn-btn--ghost:hover[b-cf77l2emvr] { background: var(--bg-muted); border-color: var(--border-strong); }

.kbn-btn--primary[b-cf77l2emvr] { background: var(--accent); border: 1px solid var(--accent); color: var(--fg-on-brand); }
.kbn-btn--success[b-cf77l2emvr] { background: var(--success-600); border: 1px solid var(--success-600); color: #fff; }
.kbn-btn--danger[b-cf77l2emvr]  { background: var(--danger-600); border: 1px solid var(--danger-600); color: #fff; }

.kbn-btn--primary:hover[b-cf77l2emvr], .kbn-btn--success:hover[b-cf77l2emvr], .kbn-btn--danger:hover[b-cf77l2emvr] { filter: brightness(1.06); }
.kbn-btn:focus-visible[b-cf77l2emvr] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mobil: sütunlar yatay kayar. */
@media (max-width: 768px) {
    .kbn-col[b-cf77l2emvr] { min-width: 84vw; }
}
/* /Components/Pages/Dashboard/Cards/SetupProgressCard.razor.rz.scp.css */
/* Setup Progress Card Styles */

/* Setup Steps */
[b-9n2lzpz8uz] .setup-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

[b-9n2lzpz8uz] .setup-step {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 1rem;
}

[b-9n2lzpz8uz] .setup-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

[b-9n2lzpz8uz] .setup-step.completed {
    background: var(--success-background-rest);
    border: 1px solid var(--success-stroke-rest);
}

[b-9n2lzpz8uz] .setup-step:not(.completed) {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
}

[b-9n2lzpz8uz] .step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--neutral-layer-card);
    border-radius: 8px;
    color: var(--accent-foreground-rest);
}

[b-9n2lzpz8uz] .setup-step.completed .step-icon {
    background: var(--success-background-rest);
    color: var(--success-foreground-rest);
}

[b-9n2lzpz8uz] .step-content {
    flex: 1;
}

[b-9n2lzpz8uz] .step-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

[b-9n2lzpz8uz] .step-description {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
}

[b-9n2lzpz8uz] .step-status {
    color: var(--success-foreground-rest);
}

[b-9n2lzpz8uz] .setup-step.completed .step-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Setup Progress Card */
[b-9n2lzpz8uz] .setup-progress-card {
    background: var(--neutral-layer-card);
    width: fit-content !important;
}
/* /Components/Pages/Dashboard/Cards/TableOverviewCard.razor.rz.scp.css */
/* ==========================================================================
   Table Overview Card — design-system rework (brand blue #036ac4)
   Lean, monochrome tiles: white surface + colored status dot + meta line.
   ========================================================================== */

/* ==========================================================================
   PANEL HEAD (design-system panel-head)
   ========================================================================== */
.tov-head[b-rdlehpq7pz] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
}

.tov-head-title[b-rdlehpq7pz] {
    margin: 0;
    margin-right: 2px;
    white-space: nowrap;
    font-family: var(--font-display, inherit);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ds-text);
}

.tov-head-spacer[b-rdlehpq7pz] {
    flex: 1;
    min-width: 8px;
}

/* Ghost icon button (design-system .icon-btn) */
.tov-icon-btn[b-rdlehpq7pz] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.tov-icon-btn:hover[b-rdlehpq7pz] {
    background: var(--slate-100);
    color: var(--ds-text);
}

.tov-icon-btn.is-active[b-rdlehpq7pz] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.tov-icon-btn svg[b-rdlehpq7pz] {
    width: 16px;
    height: 16px;
}

.tov-icon-btn.is-spinning svg[b-rdlehpq7pz] {
    animation: tov-spin-b-rdlehpq7pz 0.8s linear infinite;
}

@keyframes tov-spin-b-rdlehpq7pz {
    to { transform: rotate(360deg); }
}

/* Compact search box (design-system .search) */
.tov-searchbox[b-rdlehpq7pz] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 150px;
    max-width: 240px;
    flex: 1 1 160px;
}

.tov-search-ico[b-rdlehpq7pz] {
    position: absolute;
    left: 10px;
    width: 14px;
    height: 14px;
    color: var(--ds-text-subtle);
    pointer-events: none;
}

.tov-searchbox input[b-rdlehpq7pz] {
    width: 100%;
    height: 32px;
    padding: 0 28px 0 30px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--ds-text);
    outline: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.tov-searchbox input[b-rdlehpq7pz]::placeholder {
    color: var(--ds-text-subtle);
}

.tov-searchbox input:focus[b-rdlehpq7pz] {
    border-color: var(--brand-600);
    background: var(--ds-surface);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.10);
}

.tov-search-clear[b-rdlehpq7pz] {
    position: absolute;
    right: 6px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ds-text-subtle);
    border-radius: 50%;
    cursor: pointer;
}

.tov-search-clear:hover[b-rdlehpq7pz] {
    background: var(--slate-100);
    color: var(--ds-text);
}

.tov-search-clear svg[b-rdlehpq7pz] {
    width: 13px;
    height: 13px;
}

/* Compact primary button (design-system .btn-primary) */
.tov-btn-primary[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-600);
    color: #fff;
    font-family: var(--font-ui, inherit);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease;
}

.tov-btn-primary:hover[b-rdlehpq7pz] {
    background: #0257a3;
}

.tov-btn-primary svg[b-rdlehpq7pz] {
    width: 15px;
    height: 15px;
}

/* ==========================================================================
   STATUS TABS (design-system .tab) — uniform brand-blue active
   ========================================================================== */
/* ===== Floor dropdown (grid view, multi-floor) — custom, token-driven ===== */
/* Let the open dropdown panel escape the card box (a short single-row card was
   clipping it). The body keeps its own overflow:auto, so scrolling is unaffected. */
.table-overview-card[b-rdlehpq7pz] { overflow: visible !important; }

.tov-floor-dd[b-rdlehpq7pz] { position: relative; display: inline-flex; }

.tov-floor-dd-btn[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0f172a);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.tov-floor-dd-btn:hover[b-rdlehpq7pz] { background: var(--slate-100, #f1f5f9); border-color: var(--ds-border-strong, #cbd5e1); }
.tov-floor-dd.is-open .tov-floor-dd-btn[b-rdlehpq7pz] { border-color: var(--brand-600, #036ac4); }

/* "All occupied" active state — signal the cross-floor busy view with the occupied red. */
.tov-floor-dd-btn.is-all-occ[b-rdlehpq7pz] { border-color: #fecaca; background: #fef2f2; }
.tov-floor-dd-btn.is-all-occ:hover[b-rdlehpq7pz] { background: #fee2e2; border-color: #fca5a5; }
.tov-floor-dd-btn.is-all-occ[b-rdlehpq7pz]  svg { color: #dc2626; }
.tov-floor-dd-btn.is-all-floors[b-rdlehpq7pz] { border-color: var(--brand-600, #036ac4); background: var(--brand-50, #eff6ff); }
.tov-floor-dd-btn.is-all-floors[b-rdlehpq7pz]  svg { color: var(--brand-600, #036ac4); }
.tov-floor-dd-btn[b-rdlehpq7pz]  svg { width: 16px; height: 16px; }
.tov-floor-dd-name[b-rdlehpq7pz] { white-space: nowrap; }
.tov-floor-dd-ratio[b-rdlehpq7pz] {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: var(--ds-radius-pill, 999px);
    background: var(--slate-100, #f1f5f9); color: var(--ds-text-muted, #64748b);
    font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tov-floor-dd-ratio.has-occ[b-rdlehpq7pz] { background: #fef2f2; color: #b91c1c; }
.tov-floor-dd-caret[b-rdlehpq7pz] { display: inline-flex; color: var(--ds-text-muted, #64748b); transition: transform 0.15s ease; }
.tov-floor-dd-caret svg[b-rdlehpq7pz] { width: 15px; height: 15px; }
.tov-floor-dd.is-open .tov-floor-dd-caret[b-rdlehpq7pz] { transform: rotate(180deg); }

/* Rendered at component root and lifted to a viewport-fixed layer by
   dsDropdown.position. High z-index (app modal tier) so it paints above all
   dashboard content; starts off-screen so there's no mid-position flash before
   the JS anchors it under the trigger. */
.tov-floor-dd-overlay[b-rdlehpq7pz] { position: fixed; inset: 0; z-index: 9998; }

.tov-floor-dd-panel[b-rdlehpq7pz] {
    position: fixed;
    top: -2000px;
    left: -2000px;
    z-index: 9999;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    box-shadow: var(--ds-shadow-3, 0 12px 32px rgba(15, 23, 42, 0.16));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tov-floor-dd-item[b-rdlehpq7pz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--ds-radius-sm, 8px);
    background: transparent;
    color: var(--ds-text, #0f172a);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
}
.tov-floor-dd-item:hover[b-rdlehpq7pz] { background: var(--slate-100, #f1f5f9); }
.tov-floor-dd-item.is-active[b-rdlehpq7pz] { background: var(--brand-50, #eff6ff); color: var(--brand-700, #0353a4); }
.tov-floor-dd-item-name[b-rdlehpq7pz] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "All occupied" aggregate entry — pinned to the top of the floor list. */
.tov-floor-dd-item.all-occ[b-rdlehpq7pz] { font-weight: 700; }
.tov-floor-dd-item.all-occ .tov-floor-dd-item-name[b-rdlehpq7pz] { display: inline-flex; align-items: center; gap: 7px; }
.tov-floor-dd-item.all-occ[b-rdlehpq7pz]  svg { width: 15px; height: 15px; color: #dc2626; flex-shrink: 0; }
.tov-floor-dd-item.all-occ:hover[b-rdlehpq7pz] { background: #fef2f2; }
.tov-floor-dd-item.all-occ.is-active[b-rdlehpq7pz] { background: #fef2f2; color: #b91c1c; }
.tov-floor-dd-item.all-floors[b-rdlehpq7pz] { font-weight: 700; }
.tov-floor-dd-item.all-floors .tov-floor-dd-item-name[b-rdlehpq7pz] { display: inline-flex; align-items: center; gap: 7px; }
.tov-floor-dd-item.all-floors[b-rdlehpq7pz]  svg { width: 15px; height: 15px; color: var(--brand-600, #036ac4); flex-shrink: 0; }
.tov-floor-dd-item.all-floors.is-active[b-rdlehpq7pz] { background: var(--brand-50, #eff6ff); color: var(--brand-700, #0353a4); }
.tov-floor-dd-sep[b-rdlehpq7pz] { height: 1px; margin: 4px 4px; background: var(--ds-border, #e2e8f0); }
.tov-floor-dd-item-meta[b-rdlehpq7pz] { display: inline-flex; gap: 6px; flex-shrink: 0; }
.tov-floor-pill[b-rdlehpq7pz] {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: var(--ds-radius-pill, 999px);
    font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tov-floor-pill.occupied[b-rdlehpq7pz] { background: #fef2f2; color: #b91c1c; }
.tov-floor-pill.available[b-rdlehpq7pz] { background: #f0fdf4; color: #166534; }

.tov-status-tabs[b-rdlehpq7pz] {
    display: inline-flex;
    gap: 4px;
}

.tov-tab[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: var(--ds-radius-sm);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease;
}

.tov-tab:hover[b-rdlehpq7pz] {
    background: var(--slate-100);
    color: var(--ds-text);
}

.tov-tab.is-active[b-rdlehpq7pz] {
    background: var(--brand-600);
    color: #fff;
}

.tov-tab-count[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--ds-radius-pill);
    background: var(--slate-100);
    color: var(--ds-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tov-tab.is-active .tov-tab-count[b-rdlehpq7pz] {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

/* ==========================================================================
   BODY
   ========================================================================== */
.tov-body[b-rdlehpq7pz] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
}

/* Desktop: cap the scroll region to the viewport so a large store (e.g. 100+ tables)
   scrolls WITHIN the card instead of stretching the whole page down. Below 1024px the
   card keeps its natural page-scroll (expected on phones). */
@media (min-width: 1024px) {
    .tov-body[b-rdlehpq7pz] {
        max-height: calc(100dvh - 220px);
    }
}

.tov-grid[b-rdlehpq7pz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

/* ==========================================================================
   FLOOR SECTIONS (collapsible)
   ========================================================================== */
.tov-section[b-rdlehpq7pz] {
    margin-bottom: 8px;
}

.tov-section-header[b-rdlehpq7pz] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ds-text);
    transition: background 0.12s ease;
}

.tov-section-header:hover[b-rdlehpq7pz] {
    background: var(--slate-100);
}

.tov-section.is-open .tov-section-header[b-rdlehpq7pz] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tov-section-title[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tov-section-total[b-rdlehpq7pz] {
    color: var(--ds-text-muted);
    font-weight: 500;
    font-size: 0.8rem;
}

.tov-section-meta[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tov-section-badge[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.tov-section-badge.occupied[b-rdlehpq7pz] {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
}

.tov-section-badge.available[b-rdlehpq7pz] {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.tov-section.is-open .tov-grid[b-rdlehpq7pz] {
    padding: 10px 2px 6px;
}

.tov-section-empty[b-rdlehpq7pz] {
    padding: 16px;
    text-align: center;
    color: var(--ds-text-muted);
    font-size: 0.85rem;
}

/* ==========================================================================
   TILE — lean monochrome (design-system .table-tile)
   ========================================================================== */
.tov-tile[b-rdlehpq7pz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 84px;
    padding: 11px 13px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.tov-tile:hover[b-rdlehpq7pz] {
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-2);
    border-color: var(--ds-border-strong);
}

.tov-tile:active[b-rdlehpq7pz] {
    transform: translateY(0);
}

.tov-tile:focus-visible[b-rdlehpq7pz] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.25);
}

.tov-tile-name[b-rdlehpq7pz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Floor badge shown on each tile in the cross-floor "all occupied" view. */
.tov-tile-floor[b-rdlehpq7pz] {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--slate-100, #f1f5f9);
    color: var(--ds-text-muted, #64748b);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.tov-tile-state[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.tov-dot[b-rdlehpq7pz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.tov-tile-dur[b-rdlehpq7pz] {
    font-weight: 600;
}

.tov-tile-meta[b-rdlehpq7pz] {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ds-text-muted);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.tov-tile-meta b[b-rdlehpq7pz] {
    color: var(--ds-text);
    font-weight: 600;
}

.tov-tile-meta[b-rdlehpq7pz]  svg {
    width: 12px;
    height: 12px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* state accents — color lives on the dot + label, surface stays calm */
.tov-tile.available .tov-tile-state[b-rdlehpq7pz] {
    color: #16a34a;
}

.tov-tile.occupied[b-rdlehpq7pz] {
    background: #fef7f6;
}

.tov-tile.occupied .tov-tile-state[b-rdlehpq7pz] {
    color: #dc2626;
}

.tov-tile.reserved[b-rdlehpq7pz] {
    background: rgba(3, 106, 196, 0.045);
}

.tov-tile.reserved .tov-tile-state[b-rdlehpq7pz] {
    color: var(--brand-600);
}

.tov-tile-resv[b-rdlehpq7pz] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tov-tile-meta.reserv[b-rdlehpq7pz] {
    margin-top: 0;
    color: var(--brand-600);
}

.tov-tile.out-of-service[b-rdlehpq7pz] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tov-tile.out-of-service:hover[b-rdlehpq7pz] {
    transform: none;
    box-shadow: none;
    border-color: var(--ds-border);
}

.tov-tile.out-of-service .tov-tile-state[b-rdlehpq7pz] {
    color: var(--ds-text-subtle);
}

/* Quick-add tile — dashed, brand-accented affordance shaped like a table tile. */
.tov-tile-add[b-rdlehpq7pz] {
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px dashed var(--ds-border-strong, #cbd5e1);
    color: var(--ds-text-muted, #64748b);
    font-family: inherit;
}

.tov-tile-add:hover[b-rdlehpq7pz] {
    border-color: var(--brand-600, #036ac4);
    color: var(--brand-600, #036ac4);
    background: var(--brand-50, #eff6ff);
    box-shadow: none;
}

.tov-tile-add-plus[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    color: inherit;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.tov-tile-add:hover .tov-tile-add-plus[b-rdlehpq7pz] {
    border-color: var(--brand-600, #036ac4);
    background: #fff;
}

.tov-tile-add-plus[b-rdlehpq7pz]  svg {
    width: 18px;
    height: 18px;
}

.tov-tile-add-label[b-rdlehpq7pz] {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   LOADING / EMPTY
   ========================================================================== */
.tov-loading[b-rdlehpq7pz],
.tov-empty[b-rdlehpq7pz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    color: var(--ds-text-muted);
    grid-column: 1 / -1;
}

.tov-loading p[b-rdlehpq7pz],
.tov-empty p[b-rdlehpq7pz] {
    margin: 0;
    font-size: 0.9rem;
}

.tov-empty-icon[b-rdlehpq7pz] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ds-surface-alt);
    color: var(--ds-text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   DIAGRAM (read-only floor plan) view
   ========================================================================== */
.tovd-floor-tabs[b-rdlehpq7pz] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 2px;
}

.tovd-floor-tab[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text);
    border-radius: var(--ds-radius-pill);
    padding: 4px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tovd-floor-tab:hover[b-rdlehpq7pz] {
    background: var(--slate-100);
}

.tovd-floor-tab.is-active[b-rdlehpq7pz] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.tovd-floor-name[b-rdlehpq7pz] {
    font-weight: 600;
}

.tovd-floor-ratio[b-rdlehpq7pz] {
    font-size: 0.7rem;
    background: var(--slate-100);
    color: var(--ds-text-muted);
    border-radius: var(--ds-radius-pill);
    padding: 0 7px;
}

.tovd-floor-tab.is-active .tovd-floor-ratio[b-rdlehpq7pz] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.tovd-floor-ratio.has-occ[b-rdlehpq7pz] {
    background: rgba(220, 38, 38, 0.16);
    color: #b91c1c;
}

.tovd-floor-tab.is-active .tovd-floor-ratio.has-occ[b-rdlehpq7pz] {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* ===== View-options (eye) popover — mirrors the Aktif Siparişler pattern ===== */
.tov-view-backdrop[b-rdlehpq7pz] {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.tov-view-pop[b-rdlehpq7pz] {
    position: absolute;
    top: calc(100% + 4px);
    right: 12px;
    z-index: 50;
    width: 232px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    box-shadow: var(--ds-shadow-3, 0 8px 24px rgba(15, 23, 42, 0.12));
}

.tov-view-title[b-rdlehpq7pz] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.tov-view-item[b-rdlehpq7pz] {
    display: flex;
    align-items: center;
    gap: 9px;
    /* Touch target — these panels are used on POS touchscreens. */
    min-height: 40px;
    padding: 7px 6px;
    border-radius: var(--ds-radius-sm);
    font-size: 0.88rem;
    color: var(--ds-text);
    cursor: pointer;
}

.tov-view-item:hover[b-rdlehpq7pz] { background: var(--slate-100, #f1f5f9); }

.tov-view-item:focus-within[b-rdlehpq7pz] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: -2px;
}

.tov-view-item input[b-rdlehpq7pz] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-600, #036ac4);
    cursor: pointer;
}

.tov-view-hint[b-rdlehpq7pz] {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-muted, #94a3b8);
    padding: 6px 6px 2px;
}

/* The eye button reads as pressed while its panel is open. */
.tov-icon-btn.is-active[b-rdlehpq7pz] {
    background: var(--accent-soft, #eff6ff);
    color: var(--accent, #036ac4);
}

.tovd-viewport[b-rdlehpq7pz] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    flex: 1;
    overflow: hidden;
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-border);
    background-color: var(--ds-surface-alt);
    background-image:
        linear-gradient(#eaf2fb 1px, transparent 1px),
        linear-gradient(90deg, #eaf2fb 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Per-table overlays (children of .fpe-table; clicks pass through to the table). */
.tovd-badge[b-rdlehpq7pz] {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--ds-radius-pill);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.tovd-badge.time[b-rdlehpq7pz] {
    top: -9px;
    right: -9px;
    background: #dc2626;
    color: #fff;
}

.tovd-rsv-stack[b-rdlehpq7pz] {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}

.tovd-badge.rsv[b-rdlehpq7pz] {
    position: static;
    transform: none;
    background: var(--brand-600);
    color: #fff;
    padding: 4px 9px;
    font-size: 0.66rem;
    gap: 4px;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.tovd-badge.rsv:hover[b-rdlehpq7pz] {
    box-shadow: 0 2px 6px rgba(3, 106, 196, 0.45);
    transform: translateY(-1px);
}

.tovd-badge.rsv.dragging[b-rdlehpq7pz] {
    opacity: 0.4;
}

.tovd-badge.rsv[b-rdlehpq7pz]  svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    fill: currentColor;
    color: #fff;
}

.tovd-badge.rsv[b-rdlehpq7pz]  svg path {
    fill: currentColor;
}

.tovd-emp[b-rdlehpq7pz] {
    position: absolute;
    top: -9px;
    left: -6px;
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--ds-border);
    color: var(--ds-text-muted);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--ds-radius-pill);
    pointer-events: none;
}

/* Draggable variant — the occupied table's order/guest chip can be dragged onto
   another table to move (empty) or swap (occupied) the order. Needs pointer events. */
.tovd-emp.tovd-order-drag[b-rdlehpq7pz] {
    pointer-events: auto;
    cursor: grab;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    z-index: 3;
    max-width: 90%;
}
.tovd-emp.tovd-order-drag:active[b-rdlehpq7pz] { cursor: grabbing; }
.tovd-emp.tovd-order-drag:hover[b-rdlehpq7pz] { border-color: var(--brand-400, #3b82f6); color: var(--ds-text, #0f172a); }
.tovd-emp.tovd-order-drag.dragging[b-rdlehpq7pz] { opacity: 0.45; }
.tovd-emp.tovd-order-drag[b-rdlehpq7pz]  svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Move / swap confirmation copy */
.tov-move-text[b-rdlehpq7pz] { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ds-text, #0f172a); }

.tovd-legend[b-rdlehpq7pz] {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 5;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 6px 10px;
    font-size: 0.72rem;
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-1);
    pointer-events: none;
}

.tovd-legend span[b-rdlehpq7pz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tovd-dot[b-rdlehpq7pz] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
    border: 1.5px solid;
}

.tovd-dot.available[b-rdlehpq7pz] {
    background: rgba(22, 163, 74, 0.16);
    border-color: rgba(22, 163, 74, 0.75);
}

.tovd-dot.occupied[b-rdlehpq7pz] {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.75);
}

.tovd-dot.reserved[b-rdlehpq7pz] {
    background: rgba(3, 106, 196, 0.16);
    border-color: rgba(3, 106, 196, 0.75);
}

.tovd-dot.rsvdot[b-rdlehpq7pz] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    border-radius: 50%;
}

/* ==========================================================================
   ALL-KROKI (combined floor plans) — one pan/zoom canvas with every floor
   ========================================================================== */
/* Shares .tovd-viewport (grid bg + clip). The stage is dragged to pan; show a grab cursor.
   `touch-action: none` is REQUIRED, not cosmetic: without it the browser claims the touch
   gesture for page scroll / native pinch-zoom and our pointer handlers never see the second
   finger, so pinch-zoom silently does nothing on the POS touchscreens. */
.tovak-viewport[b-rdlehpq7pz] {
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.tovak-stage.tovak-panning[b-rdlehpq7pz],
.tovak-viewport:active[b-rdlehpq7pz] { cursor: grabbing; }

/* Logical surface; JS owns its size + the translate+scale transform. Floor boxes are placed
   absolutely inside it (2-column grid computed in JS so variable-width boxes never crop). */
.tovak-stage[b-rdlehpq7pz] {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}

/* Each box hugs its own floor's content (size + left/top set by JS). One shared outer zoom
   scales every box, so all floors render at a single consistent scale. */
.tovak-floor[b-rdlehpq7pz] {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    box-shadow: var(--ds-shadow-2, 0 4px 14px rgba(15, 23, 42, 0.08));
    overflow: hidden;
}

.tovak-floor-head[b-rdlehpq7pz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    background: var(--ds-surface-alt, #f8fafc);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
    /* Drag handle: grab the header to rearrange this floor within the canvas. */
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.tovak-floor--dragging[b-rdlehpq7pz] {
    z-index: 5;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
}

.tovak-floor--dragging .tovak-floor-head[b-rdlehpq7pz] { cursor: grabbing; }

.tovak-floor-name[b-rdlehpq7pz] {
    font-family: var(--font-display, inherit);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tovak-floor-ratio[b-rdlehpq7pz] {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--slate-100, #f1f5f9);
    color: var(--ds-text-muted, #64748b);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tovak-floor-ratio.has-occ[b-rdlehpq7pz] {
    background: #fef2f2;
    color: #b91c1c;
}

/* The floor-plan surface — sized by JS to the floor's bounding box; the read-only .fpe-canvas
   inside is translated (native scale) so its content sits at the box origin. */
.tovak-floor-body[b-rdlehpq7pz] {
    position: relative;
    min-width: 180px;
    min-height: 130px;
    overflow: hidden;
    background-color: var(--ds-surface-alt, #f8fafc);
    background-image:
        linear-gradient(#eef2f7 1px, transparent 1px),
        linear-gradient(90deg, #eef2f7 1px, transparent 1px);
    background-size: 18px 18px;
}

/* Floating zoom / fit controls (top-right of the viewport). */
.tovak-controls[b-rdlehpq7pz] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tovak-ctrl-btn[b-rdlehpq7pz] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: rgba(255, 255, 255, 0.96);
    color: var(--ds-text-muted, #64748b);
    cursor: pointer;
    box-shadow: var(--ds-shadow-1, 0 1px 3px rgba(15, 23, 42, 0.1));
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.tovak-ctrl-btn:hover[b-rdlehpq7pz] {
    background: #fff;
    color: var(--brand-600, #036ac4);
    border-color: var(--brand-600, #036ac4);
}

.tovak-ctrl-btn:focus-visible[b-rdlehpq7pz] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.tovak-ctrl-btn svg[b-rdlehpq7pz] {
    width: 17px;
    height: 17px;
}

/* Floor-dropdown "Tüm Kroki" states (mirrors the brand-blue map glyph). */
.tov-floor-dd-btn.is-all-kroki[b-rdlehpq7pz] { border-color: var(--brand-600, #036ac4); background: var(--brand-50, #eff6ff); }
.tov-floor-dd-btn.is-all-kroki[b-rdlehpq7pz]  svg { color: var(--brand-600, #036ac4); }
.tov-floor-dd-item.all-kroki[b-rdlehpq7pz] { font-weight: 700; }
.tov-floor-dd-item.all-kroki .tov-floor-dd-item-name[b-rdlehpq7pz] { display: inline-flex; align-items: center; gap: 7px; }
.tov-floor-dd-item.all-kroki[b-rdlehpq7pz]  svg { width: 15px; height: 15px; color: var(--brand-600, #036ac4); flex-shrink: 0; }
.tov-floor-dd-item.all-kroki.is-active[b-rdlehpq7pz] { background: var(--brand-50, #eff6ff); color: var(--brand-700, #0353a4); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .tov-grid[b-rdlehpq7pz] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 6px;
    }

    .tov-tile[b-rdlehpq7pz] {
        min-height: 76px;
        padding: 9px 11px;
    }
}

@media (max-width: 480px) {
    .tov-grid[b-rdlehpq7pz] {
        grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    }
}
/* /Components/Pages/Dashboard/Charts/MenuViewsChart.razor.rz.scp.css */
/* Menu views trend — design-system surface, brand-blue accents.
   Mirrors the sibling CustomerLeaderboardCard so the two align side-by-side. */
.mv-card[b-6g4pe56s0i] {
    display: flex;
    flex-direction: column;
    height: 600px;
    padding: 20px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    box-sizing: border-box;
}

.mv-card__head[b-6g4pe56s0i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.mv-card__title[b-6g4pe56s0i] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mv-card__title-icon[b-6g4pe56s0i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-sm, 8px);
    background: rgba(3, 106, 196, 0.10);
    color: var(--brand-600, #036ac4);
}

.mv-card__title-icon[b-6g4pe56s0i]  svg {
    width: 18px;
    height: 18px;
}

.mv-card__title-text[b-6g4pe56s0i] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mv-card__eyebrow[b-6g4pe56s0i] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

.mv-card__heading[b-6g4pe56s0i] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    line-height: 1.2;
}

/* Total badge */
.mv-total[b-6g4pe56s0i] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.mv-total__value[b-6g4pe56s0i] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--brand-600, #036ac4);
    line-height: 1;
}

.mv-total__label[b-6g4pe56s0i] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

/* Period selector */
.mv-periods[b-6g4pe56s0i] {
    display: inline-flex;
    gap: 2px;
    align-self: flex-start;
    background: var(--ds-surface-sunken, #f1f5f9);
    border-radius: var(--ds-radius-pill, 999px);
    padding: 3px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.mv-pill[b-6g4pe56s0i] {
    border: none;
    background: transparent;
    padding: 5px 14px;
    border-radius: var(--ds-radius-pill, 999px);
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--ds-text-muted, #64748b);
    transition: background 0.15s ease, color 0.15s ease;
}

.mv-pill.active[b-6g4pe56s0i] {
    background: var(--brand-600, #036ac4);
    color: #fff;
}

.mv-pill:hover:not(.active)[b-6g4pe56s0i] {
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0f172a);
}

.mv-pill:focus-visible[b-6g4pe56s0i] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

/* Body */
.mv-card__body[b-6g4pe56s0i] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mv-chart[b-6g4pe56s0i] {
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Loading */
.mv-loading[b-6g4pe56s0i] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Summary stats */
.mv-stats[b-6g4pe56s0i] {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    padding: 12px;
    background: var(--ds-surface-sunken, #f1f5f9);
    border-radius: var(--ds-radius-md, 12px);
    flex-shrink: 0;
}

.mv-stat[b-6g4pe56s0i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    text-align: center;
}

.mv-stat__label[b-6g4pe56s0i] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

.mv-stat__value[b-6g4pe56s0i] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

/* Empty state */
.mv-empty[b-6g4pe56s0i] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ds-text-muted, #64748b);
    text-align: center;
}

.mv-empty[b-6g4pe56s0i]  svg {
    opacity: 0.35;
}

.mv-empty span[b-6g4pe56s0i] {
    font-size: 13px;
}
/* /Components/Pages/Dashboard/Charts/WeeklyRevenueChart.razor.rz.scp.css */
/* Revenue trend — design-system surface, brand-blue accents.
   Mirrors the sibling MenuViewsChart / TopSellingProductsReport so the row aligns. */
.rt-card[b-9ux91epdd9] {
    display: flex;
    flex-direction: column;
    height: 600px;
    padding: 20px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    box-sizing: border-box;
}

.rt-card__head[b-9ux91epdd9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.rt-card__title[b-9ux91epdd9] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rt-card__title-icon[b-9ux91epdd9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-sm, 8px);
    background: rgba(3, 106, 196, 0.10);
    color: var(--brand-600, #036ac4);
}

.rt-card__title-icon[b-9ux91epdd9]  svg {
    width: 18px;
    height: 18px;
}

.rt-card__title-text[b-9ux91epdd9] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rt-card__eyebrow[b-9ux91epdd9] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

.rt-card__heading[b-9ux91epdd9] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    line-height: 1.2;
}

.rt-card__head-right[b-9ux91epdd9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Total badge */
.rt-total[b-9ux91epdd9] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.rt-total__value[b-9ux91epdd9] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--brand-600, #036ac4);
    line-height: 1;
    white-space: nowrap;
}

.rt-total__label[b-9ux91epdd9] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

/* Body */
.rt-card__body[b-9ux91epdd9] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rt-chart[b-9ux91epdd9] {
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Loading */
.rt-loading[b-9ux91epdd9] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Summary stats */
.rt-stats[b-9ux91epdd9] {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    padding: 12px;
    background: var(--ds-surface-sunken, #f1f5f9);
    border-radius: var(--ds-radius-md, 12px);
    flex-shrink: 0;
}

.rt-stat[b-9ux91epdd9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    text-align: center;
}

.rt-stat__label[b-9ux91epdd9] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

.rt-stat__value[b-9ux91epdd9] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
}

/* Empty state */
.rt-empty[b-9ux91epdd9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ds-text-muted, #64748b);
    text-align: center;
}

.rt-empty[b-9ux91epdd9]  svg {
    opacity: 0.35;
}

.rt-empty span[b-9ux91epdd9] {
    font-size: 13px;
}
/* /Components/Pages/Dashboard/Components/LowTokenBalancePopup.razor.rz.scp.css */
/* Component-specific bits only — the modal shell, buttons and animations live in
   AppModal.razor.css / AppButton.razor.css. Here we just style the balance pill. */

.ltb-balance[b-0u88wuu31l] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.ltb-balance-label[b-0u88wuu31l] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.ltb-balance-value[b-0u88wuu31l] {
    font-size: 22px;
    font-weight: 800;
    color: #b45309;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.ltb-balance-unit[b-0u88wuu31l] {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    margin-left: 2px;
}

@media (max-width: 480px) {
    .ltb-balance-value[b-0u88wuu31l] { font-size: 20px; }
}
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* Control Panel Dashboard Styles */
/* Flex column so the dashboard's panel row can claim the leftover viewport height (a card shown
   on its own then stretches to the bottom instead of stopping at its natural height). The
   MainLayout body wrapper is already a scrolling flex column, so `flex: 1` resolves against it;
   content taller than the viewport still scrolls as before. */
.dashboard-container[b-8xdruzeydh] {
    margin: 0 auto;
    padding: 1rem;
    font-family: var(--body-font);
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-header[b-8xdruzeydh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dashboard-header h1[b-8xdruzeydh] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.date-display[b-8xdruzeydh] {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
}

/* Shared Card Styling for Dashboard Components */
[b-8xdruzeydh] .panel-card {
    height: 100%;
    border-radius: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    overflow: hidden;
}

[b-8xdruzeydh] .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: transparent;
}

[b-8xdruzeydh] .card-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

[b-8xdruzeydh] .view-all {
    display: flex;
    align-items: center;
}

/* Header Info Styles */
[b-8xdruzeydh] .table-listing-info-header {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

[b-8xdruzeydh] .card-update-info {
    font-size: 11px;
    color: #999;
    font-style: italic;
    white-space: nowrap;
}

[b-8xdruzeydh] .header-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: auto;
}

[b-8xdruzeydh] .header-info-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

[b-8xdruzeydh] .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-8xdruzeydh] .refresh-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 4px;
}

[b-8xdruzeydh] .refresh-btn.loading svg {
    animation: spin-b-8xdruzeydh 0.6s linear infinite;
}

@keyframes spin-b-8xdruzeydh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Unknown Firm Type Warning Card Styles */
[b-8xdruzeydh] .panel-card.warning-card {
    text-align: center;
    padding: 2rem;
}

[b-8xdruzeydh] .panel-card.warning-card .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--warning-foreground-rest);
}

[b-8xdruzeydh] .panel-card.warning-card h3 {
    color: var(--neutral-foreground-rest);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

[b-8xdruzeydh] .panel-card.warning-card p {
    color: var(--neutral-foreground-hint);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}
/* /Components/Pages/Dashboard/DashboardAnnouncementsButton.razor.rz.scp.css */
/* ── Dashboard "Duyurular" quick action + popover ─────────────────────────────
   Button mirrors .dash-btn (40px, white, slate border) so it sits flush with the
   other toolbar actions; unread count rides on the icon as a small pill (brand blue,
   red when a critical/high unread exists). Popover anchors under the button. */

.dab[b-v0cm41ehfd] {
    position: relative;
    display: inline-flex;
}

.dab-btn[b-v0cm41ehfd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #334155);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.dab-btn:hover[b-v0cm41ehfd],
.dab-btn.is-active[b-v0cm41ehfd] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

.dab-btn:focus-visible[b-v0cm41ehfd] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

/* Unread: a quiet brand tint so it stands out without shouting. */
.dab-btn.has-unread[b-v0cm41ehfd] {
    border-color: var(--brand-300, #93c5fd);
    color: var(--brand-700, #0356a0);
    background: var(--brand-50, #eff6ff);
}

.dab-btn.has-unread:hover[b-v0cm41ehfd],
.dab-btn.has-unread.is-active[b-v0cm41ehfd] {
    background: #e0edfb;
}

.dab-btn.has-urgent[b-v0cm41ehfd] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.dab-btn.has-urgent:hover[b-v0cm41ehfd],
.dab-btn.has-urgent.is-active[b-v0cm41ehfd] {
    background: #fee2e2;
}

.dab-btn__icon[b-v0cm41ehfd] {
    position: relative;
    display: inline-flex;
}

.dab-btn__icon[b-v0cm41ehfd]  svg {
    width: 18px;
    height: 18px;
}

.dab-badge[b-v0cm41ehfd] {
    position: absolute;
    top: -8px;
    right: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-600, #036ac4);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
    font-variant-numeric: tabular-nums;
}

.dab-btn.has-urgent .dab-badge[b-v0cm41ehfd] {
    background: var(--ds-danger, #dc2626);
    animation: dab-pulse-b-v0cm41ehfd 2.2s ease-in-out infinite;
}

@keyframes dab-pulse-b-v0cm41ehfd {
    0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(220, 38, 38, 0.45); }
    50%      { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(220, 38, 38, 0); }
}

.dab-sr[b-v0cm41ehfd] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Popover ─────────────────────────────────────────────────── */
.dab-backdrop[b-v0cm41ehfd] {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.dab-pop[b-v0cm41ehfd] {
    position: absolute;
    top: calc(100% + 8px);
    /* Düğme üst şeridin sağ ucunda (cüzdanın yanında) durduğundan panel SOLA doğru açılır:
       sağ kenarını düğmeye yaslarız, yoksa 400px'lik panel ekranın sağından taşardı. */
    right: 0;
    z-index: 50;
    width: 400px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    animation: dab-in-b-v0cm41ehfd 160ms ease;
}

@keyframes dab-in-b-v0cm41ehfd {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dab-pop__head[b-v0cm41ehfd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--ds-border, #eef2f6);
}

.dab-pop__titles[b-v0cm41ehfd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dab-pop__title[b-v0cm41ehfd] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-muted, #64748b);
}

.dab-pop__new[b-v0cm41ehfd] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand-50, #eff6ff);
    color: var(--brand-700, #0356a0);
    font-size: 0.7rem;
    font-weight: 700;
}

.dab-pop__new.is-urgent[b-v0cm41ehfd] {
    background: #fef2f2;
    color: #b91c1c;
}

.dab-pop__mark[b-v0cm41ehfd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text-muted, #64748b);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}

.dab-pop__mark:hover[b-v0cm41ehfd] {
    background: var(--slate-100, #f1f5f9);
    color: var(--brand-600, #036ac4);
}

.dab-pop__mark[b-v0cm41ehfd]  svg { width: 14px; height: 14px; }

.dab-list[b-v0cm41ehfd] {
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow-y: auto;
    padding: 6px;
}

/* Row */
.dab-row[b-v0cm41ehfd] {
    --cat-color: var(--slate-500, #64748b);
    --cat-tint: var(--slate-100, #f1f5f9);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s ease;
}

.dab-row:hover[b-v0cm41ehfd] { background: var(--slate-50, #f8fafc); }

.dab-row:focus-visible[b-v0cm41ehfd] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: -2px;
}

.dab-row.is-unread[b-v0cm41ehfd] { background: var(--brand-50, #eff6ff); }
.dab-row.is-unread:hover[b-v0cm41ehfd] { background: #e0edfb; }

.dab-row + .dab-row[b-v0cm41ehfd] { margin-top: 2px; }

.dab-row.cat--news[b-v0cm41ehfd]        { --cat-color: var(--brand-600, #036ac4); --cat-tint: rgba(3, 106, 196, 0.10); }
.dab-row.cat--update[b-v0cm41ehfd]      { --cat-color: #4338ca; --cat-tint: #eef2ff; }
.dab-row.cat--warning[b-v0cm41ehfd]     { --cat-color: #b45309; --cat-tint: #fffbeb; }
.dab-row.cat--feature[b-v0cm41ehfd]     { --cat-color: #047857; --cat-tint: #ecfdf5; }
.dab-row.cat--maintenance[b-v0cm41ehfd] { --cat-color: #475569; --cat-tint: #f1f5f9; }
.dab-row.cat--security[b-v0cm41ehfd]    { --cat-color: #b91c1c; --cat-tint: #fef2f2; }

.dab-row__tile[b-v0cm41ehfd] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--cat-tint);
    color: var(--cat-color);
}

.dab-row__tile[b-v0cm41ehfd]  svg { width: 18px; height: 18px; }

.dab-row__body[b-v0cm41ehfd] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dab-row__top[b-v0cm41ehfd] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dab-row__title[b-v0cm41ehfd] {
    flex: 1;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dab-row.is-unread .dab-row__title[b-v0cm41ehfd] { font-weight: 700; }

.dab-row__dot[b-v0cm41ehfd] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-600, #036ac4);
}

.dab-row__dot.is-urgent[b-v0cm41ehfd] { background: var(--ds-danger, #dc2626); }

.dab-row__desc[b-v0cm41ehfd] {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--ds-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dab-row__meta[b-v0cm41ehfd] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--ds-text-subtle, #94a3b8);
    white-space: nowrap;
}

.dab-row__sep[b-v0cm41ehfd] { color: var(--ds-border-strong, #cbd5e1); }

.dab-chip[b-v0cm41ehfd] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
}

.dab-chip[b-v0cm41ehfd]  svg { width: 10px; height: 10px; }
.dab-chip.pri--critical[b-v0cm41ehfd] { background: #fef2f2; color: #b91c1c; }
.dab-chip.pri--high[b-v0cm41ehfd]     { background: #fffbeb; color: #b45309; }
.dab-chip--sticky[b-v0cm41ehfd]       { background: rgba(3, 106, 196, 0.1); color: #036ac4; padding: 2px 5px; }

.dab-row__arrow[b-v0cm41ehfd] {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    color: var(--ds-text-subtle, #94a3b8);
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.dab-row:hover .dab-row__arrow[b-v0cm41ehfd] {
    opacity: 1;
    transform: translateX(0);
}

.dab-row__arrow[b-v0cm41ehfd]  svg { width: 14px; height: 14px; }

/* Empty */
.dab-empty[b-v0cm41ehfd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: var(--ds-text-subtle, #94a3b8);
    font-size: 0.84rem;
}

.dab-empty[b-v0cm41ehfd]  svg { width: 22px; height: 22px; }

/* Skeleton */
.dab-row--skeleton[b-v0cm41ehfd] { cursor: default; pointer-events: none; }

.dab-sk-col[b-v0cm41ehfd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.dab-sk[b-v0cm41ehfd] {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--slate-100, #f1f5f9) 25%, var(--slate-200, #e2e8f0) 50%, var(--slate-100, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: dab-shimmer-b-v0cm41ehfd 1.3s ease-in-out infinite;
}

.dab-sk--tile[b-v0cm41ehfd]  { width: 34px; height: 34px; border-radius: 10px; }
.dab-sk--line[b-v0cm41ehfd]  { width: 100%; height: 11px; }
.dab-sk--short[b-v0cm41ehfd] { width: 55%; }

@keyframes dab-shimmer-b-v0cm41ehfd {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Footer link */
.dab-pop__foot[b-v0cm41ehfd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--ds-border, #eef2f6);
    background: var(--slate-50, #f8fafc);
    color: var(--brand-600, #036ac4);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.dab-pop__foot:hover[b-v0cm41ehfd] { background: var(--brand-50, #eff6ff); }
.dab-pop__foot[b-v0cm41ehfd]  svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
    .dab-btn__label[b-v0cm41ehfd] { display: none; }
    .dab-btn[b-v0cm41ehfd] { width: 40px; padding: 0; justify-content: center; gap: 0; }
    .dab-pop[b-v0cm41ehfd] { left: auto; right: 0; }
}
/* /Components/Pages/Dashboard/Dialogs/CourierTrackingMapModal.razor.rz.scp.css */
/* Full-bleed map inside the AppModal body — fills the card, rounded + framed. */
.ctm-map-wrap[b-1kzu12x2ye] {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    border: 1px solid var(--ds-border, #e2e8f0);
    background: var(--bg-subtle, #f8fafc);
}
/* /Components/Pages/Dashboard/Dialogs/ProductStatusModal.razor.rz.scp.css */
/* =====================================================================
   ProductStatusModal — body styles (AppModal chrome).
   ===================================================================== */

.prs[b-f8egsmac2x] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    font-family: var(--ds-font-ui);
    color: var(--ds-text);
}

/* ---------- Filters row ---------- */
.prs__filters[b-f8egsmac2x] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--ds-space-3);
}

@media (max-width: 540px) {
    .prs__filters[b-f8egsmac2x] { grid-template-columns: 1fr; }
}

.prs__search[b-f8egsmac2x], .prs__store[b-f8egsmac2x] { min-width: 0; }

/* ---------- Loading + empty ---------- */
.prs__loading[b-f8egsmac2x],
.prs__empty[b-f8egsmac2x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-6) var(--ds-space-4);
    color: var(--ds-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.prs__empty svg[b-f8egsmac2x] { color: var(--ds-text-subtle); }
.prs__empty p[b-f8egsmac2x]   { margin: 0; }

/* ---------- Bulk actions ---------- */
.prs__bulk[b-f8egsmac2x] {
    display: flex;
    justify-content: flex-end;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.prs__bulk-progress[b-f8egsmac2x] {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-300) 50%, var(--brand-600) 100%);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: prs-bar-b-f8egsmac2x 1.4s ease-in-out infinite;
}

@keyframes prs-bar-b-f8egsmac2x {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Store group card ---------- */
.prs__group[b-f8egsmac2x] {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}

.prs__group-head[b-f8egsmac2x] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 10px var(--ds-space-3);
    background: var(--ds-surface-alt);
    border-bottom: 1px solid var(--ds-border);
}

.prs__group-head svg[b-f8egsmac2x] { color: var(--brand-600); flex-shrink: 0; }

.prs__group-title[b-f8egsmac2x] {
    margin: 0;
    font-family: var(--ds-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ds-text);
    letter-spacing: -0.005em;
}

/* ---------- List rows ---------- */
.prs__list[b-f8egsmac2x] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.prs__row[b-f8egsmac2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: var(--ds-space-2) var(--ds-space-3);
    border-bottom: 1px solid var(--ds-border);
}

.prs__row:last-child[b-f8egsmac2x] { border-bottom: none; }

.prs__row-main[b-f8egsmac2x] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-width: 0;
    flex: 1;
}

.prs__row-aside[b-f8egsmac2x] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-shrink: 0;
}

.prs__product-img[b-f8egsmac2x] {
    width: 38px;
    height: 38px;
    border-radius: var(--ds-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.prs__product-img--placeholder[b-f8egsmac2x] {
    background: var(--ds-surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-subtle);
}

.prs__product-text[b-f8egsmac2x] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.prs__product-name-row[b-f8egsmac2x] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.prs__product-name[b-f8egsmac2x] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prs__product-meta[b-f8egsmac2x] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: var(--ds-text-muted);
}

.prs__menu-logo[b-f8egsmac2x] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: contain;
}

.prs__status[b-f8egsmac2x] {
    min-width: 42px;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 600;
}

.prs__status--on[b-f8egsmac2x]  { color: var(--ds-success); }
.prs__status--off[b-f8egsmac2x] { color: var(--ds-danger); }
/* /Components/Pages/Dashboard/Dialogs/StoreStatusModal.razor.rz.scp.css */
/* =====================================================================
   StoreStatusModal — body styles only (AppModal chrome).
   ===================================================================== */

.sst[b-0x1mnqgfn8] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    font-family: var(--ds-font-ui);
    color: var(--ds-text);
}

/* ---------- Loading / empty ---------- */
.sst__loading[b-0x1mnqgfn8],
.sst__empty[b-0x1mnqgfn8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-6) var(--ds-space-4);
    color: var(--ds-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.sst__empty svg[b-0x1mnqgfn8] { color: var(--ds-text-subtle); }
.sst__empty p[b-0x1mnqgfn8]   { margin: 0; }

/* ---------- Gruplama modu + toplu işlemler ---------- */
.sst__bulk[b-0x1mnqgfn8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.sst__bulk-actions[b-0x1mnqgfn8] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin-left: auto;
    flex-wrap: wrap;
}

/* Segmentli gruplama anahtarı (medya kütüphanesindeki görünüm anahtarıyla aynı dil) */
.sst__viewswitch[b-0x1mnqgfn8] {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-sunken);
}

.sst__view-btn[b-0x1mnqgfn8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ds-text-subtle);
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease),
                color var(--ds-dur-fast) var(--ds-ease);
}

.sst__view-btn svg[b-0x1mnqgfn8] { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.sst__view-btn:hover[b-0x1mnqgfn8] { color: var(--ds-text-muted); }

.sst__view-btn.is-on[b-0x1mnqgfn8] {
    background: var(--ds-surface);
    color: var(--brand-600);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.sst__view-btn:focus-visible[b-0x1mnqgfn8] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.sst__bulk-progress[b-0x1mnqgfn8] {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-300) 50%, var(--brand-600) 100%);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: sst-bar-b-0x1mnqgfn8 1.4s ease-in-out infinite;
}

@keyframes sst-bar-b-0x1mnqgfn8 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Store group card ---------- */
.sst__group[b-0x1mnqgfn8] {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    animation: sst-group-in-b-0x1mnqgfn8 0.22s var(--ds-ease);
}

@keyframes sst-group-in-b-0x1mnqgfn8 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.sst__group-head[b-0x1mnqgfn8] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 10px var(--ds-space-3);
    background: var(--ds-surface-alt);
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-text);
}

.sst__group-head svg[b-0x1mnqgfn8] { color: var(--brand-600); flex-shrink: 0; }

.sst__group-logo[b-0x1mnqgfn8] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.sst__group-title[b-0x1mnqgfn8] {
    margin: 0;
    font-family: var(--ds-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ds-text);
    letter-spacing: -0.005em;
}

.sst__group-count[b-0x1mnqgfn8] {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-subtle);
    white-space: nowrap;
}

/* ---------- List rows ---------- */
.sst__list[b-0x1mnqgfn8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sst__row[b-0x1mnqgfn8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: 10px var(--ds-space-3);
    border-bottom: 1px solid var(--ds-border);
}

.sst__row:last-child[b-0x1mnqgfn8] { border-bottom: none; }

.sst__row-main[b-0x1mnqgfn8] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-width: 0;
    flex: 1;
}

.sst__row-aside[b-0x1mnqgfn8] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-shrink: 0;
}

.sst__logo[b-0x1mnqgfn8] {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.sst__logo--placeholder[b-0x1mnqgfn8] {
    background: var(--ds-surface-sunken);
}

/* Platform gruplamasında satır = mağaza */
.sst__row-icon[b-0x1mnqgfn8] {
    color: var(--ds-text-subtle);
    flex-shrink: 0;
}

.sst__name[b-0x1mnqgfn8] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sst__status[b-0x1mnqgfn8] {
    min-width: 42px;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 600;
}

.sst__status--on[b-0x1mnqgfn8]  { color: var(--ds-success); }
.sst__status--off[b-0x1mnqgfn8] { color: var(--ds-danger); }

/* "Yoğuna Al" per-row trigger */
.sst__busy-btn[b-0x1mnqgfn8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
}

.sst__busy-btn:hover[b-0x1mnqgfn8] {
    border-color: var(--ds-warning, #b7791f);
    color: var(--ds-warning, #b7791f);
    background: var(--ds-surface-alt);
}

.sst__busy-btn:focus-visible[b-0x1mnqgfn8] {
    outline: 2px solid var(--ds-warning, #b7791f);
    outline-offset: 2px;
}
/* /Components/Pages/Dashboard/ECommerceDashboard.razor.rz.scp.css */
/* E-Commerce Dashboard — design-system layout (token-driven, no FluentUI chrome) */

.ecd[b-szevnhkid1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ---------- Header ---------- */
.ecd-head[b-szevnhkid1] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.ecd-head__text[b-szevnhkid1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ecd-eyebrow[b-szevnhkid1] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 700;
    letter-spacing: var(--tracking-caps, 0.08em);
    text-transform: uppercase;
    color: var(--accent);
}

.ecd-title[b-szevnhkid1] {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin: 0;
    line-height: 1.15;
}

.ecd-subtitle[b-szevnhkid1] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
    margin: 0;
}

.ecd-head__actions[b-szevnhkid1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ecd-btn[b-szevnhkid1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
    transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.ecd-btn:hover[b-szevnhkid1] {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.ecd-btn:focus-visible[b-szevnhkid1] { outline: 2px solid var(--accent); outline-offset: 2px; }
.ecd-btn[b-szevnhkid1]  svg { width: 17px; height: 17px; }

/* FluentIcon glyphs default to their own fill, which turns invisible on the blue
   primary button (blue-on-blue). Force them to inherit the button's text color —
   same rule AppButton uses. Filled icons via fill, outline (fill="none") via stroke. */
.ecd-btn[b-szevnhkid1]  svg:not([fill="none"]),
.ecd-btn[b-szevnhkid1]  svg:not([fill="none"]) path { fill: currentColor; }
.ecd-btn[b-szevnhkid1]  svg[fill="none"] { stroke: currentColor; }

.ecd-btn--primary[b-szevnhkid1] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--fg-on-accent, #fff);
}

.ecd-btn--primary:hover[b-szevnhkid1] {
    color: var(--fg-on-accent, #fff);
    filter: brightness(1.05);
    box-shadow: var(--shadow-md);
}

/* ---------- KPI strip ---------- */
/* Horizontal tiles (icon beside the number) wrap fluidly instead of forcing 6 across. */
.ecd-kpis[b-szevnhkid1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: var(--space-3);
}

/* ---------- Main row ---------- */
.ecd-row[b-szevnhkid1] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.ecd-col[b-szevnhkid1] {
    min-width: 0;
}

@media (max-width: 1024px) {
    .ecd-row[b-szevnhkid1] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Dashboard/ECommerce/ECommerceActiveOrdersCard.razor.rz.scp.css */
/* Header actions */
.eao-updated[b-hs9jo0l4tr] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    font-style: italic;
    white-space: nowrap;
}

.eao-icon-btn[b-hs9jo0l4tr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.eao-icon-btn:hover[b-hs9jo0l4tr] { border-color: var(--accent); color: var(--accent); }
.eao-icon-btn:focus-visible[b-hs9jo0l4tr] { outline: 2px solid var(--accent); outline-offset: 2px; }
.eao-icon-btn[b-hs9jo0l4tr]  svg { width: 16px; height: 16px; }
.eao-icon-btn.is-spinning[b-hs9jo0l4tr]  svg { animation: eao-spin-b-hs9jo0l4tr 0.7s linear infinite; }

@keyframes eao-spin-b-hs9jo0l4tr { to { transform: rotate(360deg); } }

.eao-all[b-hs9jo0l4tr] {
    border: none;
    background: transparent;
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.eao-all:hover[b-hs9jo0l4tr] { text-decoration: underline; }
.eao-all:focus-visible[b-hs9jo0l4tr] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Feed */
.eao-feed[b-hs9jo0l4tr] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 520px;
    overflow-y: auto;
}

.eao-row[b-hs9jo0l4tr] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    transition: background 150ms ease;
}

.eao-row:last-child[b-hs9jo0l4tr] { border-bottom: none; }
.eao-row:hover[b-hs9jo0l4tr] { background: var(--bg-subtle); }

.eao-status-rail[b-hs9jo0l4tr] {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
}

.eao-rail--success[b-hs9jo0l4tr] { background: var(--success-500); }
.eao-rail--danger[b-hs9jo0l4tr]  { background: var(--danger-500, var(--danger-600)); }
.eao-rail--warning[b-hs9jo0l4tr] { background: var(--warning-500, var(--warning-600)); }
.eao-rail--info[b-hs9jo0l4tr]    { background: var(--accent); }
.eao-rail--neutral[b-hs9jo0l4tr] { background: var(--border-strong); }

.eao-main[b-hs9jo0l4tr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eao-line-top[b-hs9jo0l4tr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.eao-id[b-hs9jo0l4tr] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 700;
    color: var(--fg-1);
}

.eao-pickup[b-hs9jo0l4tr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.eao-pickup[b-hs9jo0l4tr]  svg { width: 13px; height: 13px; }

.eao-duration[b-hs9jo0l4tr] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    margin-left: auto;
}

.eao-duration[b-hs9jo0l4tr]  svg { width: 13px; height: 13px; }

.eao-line-mid[b-hs9jo0l4tr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex-wrap: wrap;
}

.eao-cust[b-hs9jo0l4tr] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 600;
    color: var(--fg-2);
}

.eao-phone[b-hs9jo0l4tr] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

.eao-addr[b-hs9jo0l4tr] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eao-addr[b-hs9jo0l4tr]  svg { width: 13px; height: 13px; flex-shrink: 0; }

.eao-right[b-hs9jo0l4tr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2);
    flex-shrink: 0;
}

.eao-amount[b-hs9jo0l4tr] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 800;
    color: var(--fg-1);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.eao-actions[b-hs9jo0l4tr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Primary lifecycle-advance button — labeled, so the next step reads at a glance. */
.eao-advance[b-hs9jo0l4tr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms ease, color 150ms ease;
}

.eao-advance:hover[b-hs9jo0l4tr] { background: var(--accent); color: var(--fg-on-accent, #fff); }
.eao-advance:focus-visible[b-hs9jo0l4tr] { outline: 2px solid var(--accent); outline-offset: 2px; }
.eao-advance[b-hs9jo0l4tr]  svg { width: 14px; height: 14px; }

.eao-act[b-hs9jo0l4tr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.eao-act:hover[b-hs9jo0l4tr] { border-color: var(--accent); color: var(--accent); }
.eao-act:focus-visible[b-hs9jo0l4tr] { outline: 2px solid var(--accent); outline-offset: 2px; }
.eao-act[b-hs9jo0l4tr]  svg { width: 15px; height: 15px; }

.eao-act--danger:hover[b-hs9jo0l4tr] {
    border-color: var(--danger-500, var(--danger-600));
    color: var(--danger-600);
    background: var(--danger-50);
}

/* Empty state */
.eao-empty[b-hs9jo0l4tr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    text-align: center;
}

.eao-empty__icon[b-hs9jo0l4tr] {
    color: var(--fg-disabled);
    opacity: 0.6;
    margin-bottom: var(--space-1);
}

.eao-empty__icon[b-hs9jo0l4tr]  svg { width: 34px; height: 34px; }

.eao-empty__title[b-hs9jo0l4tr] {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fg-2);
}

.eao-empty__desc[b-hs9jo0l4tr] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
    margin-bottom: var(--space-2);
}

.eao-empty__cta[b-hs9jo0l4tr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    border: none;
    background: var(--accent);
    color: var(--fg-on-accent, #fff);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: filter 150ms ease, transform 150ms ease;
}

.eao-empty__cta:hover[b-hs9jo0l4tr] { filter: brightness(1.05); transform: translateY(-1px); }
.eao-empty__cta:focus-visible[b-hs9jo0l4tr] { outline: 2px solid var(--accent); outline-offset: 2px; }
.eao-empty__cta[b-hs9jo0l4tr]  svg { width: 15px; height: 15px; }

/* FluentIcon glyphs default to their own fill (invisible on the accent CTA).
   Force inheritance of the element's text color — same rule AppButton uses. */
.eao-empty__cta[b-hs9jo0l4tr]  svg:not([fill="none"]),
.eao-empty__cta[b-hs9jo0l4tr]  svg:not([fill="none"]) path,
.eao-advance[b-hs9jo0l4tr]  svg:not([fill="none"]),
.eao-advance[b-hs9jo0l4tr]  svg:not([fill="none"]) path,
.eao-act[b-hs9jo0l4tr]  svg:not([fill="none"]),
.eao-act[b-hs9jo0l4tr]  svg:not([fill="none"]) path,
.eao-icon-btn[b-hs9jo0l4tr]  svg:not([fill="none"]),
.eao-icon-btn[b-hs9jo0l4tr]  svg:not([fill="none"]) path,
.eao-duration[b-hs9jo0l4tr]  svg:not([fill="none"]),
.eao-duration[b-hs9jo0l4tr]  svg:not([fill="none"]) path,
.eao-addr[b-hs9jo0l4tr]  svg:not([fill="none"]),
.eao-addr[b-hs9jo0l4tr]  svg:not([fill="none"]) path,
.eao-pickup[b-hs9jo0l4tr]  svg:not([fill="none"]),
.eao-pickup[b-hs9jo0l4tr]  svg:not([fill="none"]) path,
.eao-empty__icon[b-hs9jo0l4tr]  svg:not([fill="none"]),
.eao-empty__icon[b-hs9jo0l4tr]  svg:not([fill="none"]) path { fill: currentColor; }

.eao-empty__cta[b-hs9jo0l4tr]  svg[fill="none"],
.eao-advance[b-hs9jo0l4tr]  svg[fill="none"],
.eao-act[b-hs9jo0l4tr]  svg[fill="none"],
.eao-icon-btn[b-hs9jo0l4tr]  svg[fill="none"],
.eao-duration[b-hs9jo0l4tr]  svg[fill="none"],
.eao-addr[b-hs9jo0l4tr]  svg[fill="none"],
.eao-pickup[b-hs9jo0l4tr]  svg[fill="none"],
.eao-empty__icon[b-hs9jo0l4tr]  svg[fill="none"] { stroke: currentColor; }
/* /Components/Pages/Dashboard/LogisticsDashboard.razor.rz.scp.css */
/* Logistics Dashboard — design-system layout (token-driven, no FluentUI chrome) */

.ld[b-whmooze233] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ---------- Header ---------- */
.ld-head[b-whmooze233] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.ld-head__text[b-whmooze233] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ld-eyebrow[b-whmooze233] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 700;
    letter-spacing: var(--tracking-caps, 0.08em);
    text-transform: uppercase;
    color: var(--accent);
}

.ld-title[b-whmooze233] {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin: 0;
    line-height: 1.15;
}

.ld-subtitle[b-whmooze233] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
    margin: 0;
}

.ld-head__actions[b-whmooze233] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ld-btn[b-whmooze233] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
    transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.ld-btn:hover[b-whmooze233] {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.ld-btn:focus-visible[b-whmooze233] { outline: 2px solid var(--accent); outline-offset: 2px; }
.ld-btn[b-whmooze233]  svg { width: 17px; height: 17px; }

/* FluentIcon glyphs default to their own fill, which turns invisible on the blue
   primary button (blue-on-blue). Force them to inherit the button's text color —
   same rule AppButton uses. Filled icons via fill, outline (fill="none") via stroke. */
.ld-btn[b-whmooze233]  svg:not([fill="none"]),
.ld-btn[b-whmooze233]  svg:not([fill="none"]) path { fill: currentColor; }
.ld-btn[b-whmooze233]  svg[fill="none"] { stroke: currentColor; }

.ld-btn--primary[b-whmooze233] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--fg-on-accent, #fff);
}

.ld-btn--primary:hover[b-whmooze233] {
    color: var(--fg-on-accent, #fff);
    filter: brightness(1.05);
    box-shadow: var(--shadow-md);
}

/* ---------- KPI strip ---------- */
/* Horizontal tiles (icon beside the number) need more width than the old stacked
   cards, so the strip wraps fluidly instead of forcing 6 across. */
.ld-kpis[b-whmooze233] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: var(--space-3);
}

/* ---------- Main row ---------- */
.ld-row[b-whmooze233] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.ld-col[b-whmooze233] {
    min-width: 0;
}

@media (max-width: 1024px) {
    .ld-row[b-whmooze233] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Dashboard/Logistics/LogisticsActiveDeliveriesCard.razor.rz.scp.css */
/* Header actions */
.lad-updated[b-p9s30emnps] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    font-style: italic;
    white-space: nowrap;
}

.lad-icon-btn[b-p9s30emnps] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.lad-icon-btn:hover[b-p9s30emnps] { border-color: var(--accent); color: var(--accent); }
.lad-icon-btn:focus-visible[b-p9s30emnps] { outline: 2px solid var(--accent); outline-offset: 2px; }
.lad-icon-btn[b-p9s30emnps]  svg { width: 16px; height: 16px; }
.lad-icon-btn.is-spinning[b-p9s30emnps]  svg { animation: lad-spin-b-p9s30emnps 0.7s linear infinite; }

@keyframes lad-spin-b-p9s30emnps { to { transform: rotate(360deg); } }

.lad-all[b-p9s30emnps] {
    border: none;
    background: transparent;
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.lad-all:hover[b-p9s30emnps] { text-decoration: underline; }
.lad-all:focus-visible[b-p9s30emnps] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Feed */
.lad-feed[b-p9s30emnps] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 520px;
    overflow-y: auto;
}

.lad-row[b-p9s30emnps] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    transition: background 150ms ease;
}

.lad-row:last-child[b-p9s30emnps] { border-bottom: none; }
.lad-row:hover[b-p9s30emnps] { background: var(--bg-subtle); }

.lad-status-rail[b-p9s30emnps] {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
}

.lad-rail--success[b-p9s30emnps] { background: var(--success-500); }
.lad-rail--danger[b-p9s30emnps]  { background: var(--danger-500, var(--danger-600)); }
.lad-rail--warning[b-p9s30emnps] { background: var(--warning-500, var(--warning-600)); }
.lad-rail--info[b-p9s30emnps]    { background: var(--accent); }
.lad-rail--neutral[b-p9s30emnps] { background: var(--border-strong); }

.lad-main[b-p9s30emnps] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lad-line-top[b-p9s30emnps] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.lad-id[b-p9s30emnps] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 700;
    color: var(--fg-1);
}

.lad-duration[b-p9s30emnps] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    margin-left: auto;
}

.lad-duration[b-p9s30emnps]  svg { width: 13px; height: 13px; }

.lad-line-mid[b-p9s30emnps] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex-wrap: wrap;
}

.lad-cust[b-p9s30emnps] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 600;
    color: var(--fg-2);
}

.lad-addr[b-p9s30emnps] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lad-addr[b-p9s30emnps]  svg { width: 13px; height: 13px; flex-shrink: 0; }

.lad-line-bot[b-p9s30emnps] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.lad-courier[b-p9s30emnps] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.lad-courier[b-p9s30emnps]  svg { width: 13px; height: 13px; }
.lad-courier.is-empty[b-p9s30emnps] { color: var(--fg-hint); background: var(--bg-subtle); font-weight: 500; }

.lad-right[b-p9s30emnps] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2);
    flex-shrink: 0;
}

.lad-amount[b-p9s30emnps] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 800;
    color: var(--fg-1);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lad-actions[b-p9s30emnps] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lad-act[b-p9s30emnps] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.lad-act:hover[b-p9s30emnps] { border-color: var(--accent); color: var(--accent); }
.lad-act:focus-visible[b-p9s30emnps] { outline: 2px solid var(--accent); outline-offset: 2px; }
.lad-act[b-p9s30emnps]  svg { width: 15px; height: 15px; }

.lad-act--success:hover[b-p9s30emnps] {
    border-color: var(--success-500);
    color: var(--success-600);
    background: var(--success-50);
}

.lad-act--danger:hover[b-p9s30emnps] {
    border-color: var(--danger-500, var(--danger-600));
    color: var(--danger-600);
    background: var(--danger-50);
}

/* Empty state */
.lad-empty[b-p9s30emnps] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    text-align: center;
}

.lad-empty__icon[b-p9s30emnps] {
    color: var(--fg-disabled);
    opacity: 0.6;
    margin-bottom: var(--space-1);
}

.lad-empty__icon[b-p9s30emnps]  svg { width: 34px; height: 34px; }

.lad-empty__title[b-p9s30emnps] {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fg-2);
}

.lad-empty__desc[b-p9s30emnps] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
    margin-bottom: var(--space-2);
}

.lad-empty__cta[b-p9s30emnps] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    border: none;
    background: var(--accent);
    color: var(--fg-on-accent, #fff);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: filter 150ms ease, transform 150ms ease;
}

.lad-empty__cta:hover[b-p9s30emnps] { filter: brightness(1.05); transform: translateY(-1px); }
.lad-empty__cta:focus-visible[b-p9s30emnps] { outline: 2px solid var(--accent); outline-offset: 2px; }
.lad-empty__cta[b-p9s30emnps]  svg { width: 15px; height: 15px; }

/* FluentIcon glyphs default to their own fill (invisible on the accent CTA).
   Force inheritance of the element's text color — same rule AppButton uses. */
.lad-empty__cta[b-p9s30emnps]  svg:not([fill="none"]),
.lad-empty__cta[b-p9s30emnps]  svg:not([fill="none"]) path,
.lad-act[b-p9s30emnps]  svg:not([fill="none"]),
.lad-act[b-p9s30emnps]  svg:not([fill="none"]) path,
.lad-icon-btn[b-p9s30emnps]  svg:not([fill="none"]),
.lad-icon-btn[b-p9s30emnps]  svg:not([fill="none"]) path,
.lad-duration[b-p9s30emnps]  svg:not([fill="none"]),
.lad-duration[b-p9s30emnps]  svg:not([fill="none"]) path,
.lad-addr[b-p9s30emnps]  svg:not([fill="none"]),
.lad-addr[b-p9s30emnps]  svg:not([fill="none"]) path,
.lad-courier[b-p9s30emnps]  svg:not([fill="none"]),
.lad-courier[b-p9s30emnps]  svg:not([fill="none"]) path,
.lad-empty__icon[b-p9s30emnps]  svg:not([fill="none"]),
.lad-empty__icon[b-p9s30emnps]  svg:not([fill="none"]) path { fill: currentColor; }

.lad-empty__cta[b-p9s30emnps]  svg[fill="none"],
.lad-act[b-p9s30emnps]  svg[fill="none"],
.lad-icon-btn[b-p9s30emnps]  svg[fill="none"],
.lad-duration[b-p9s30emnps]  svg[fill="none"],
.lad-addr[b-p9s30emnps]  svg[fill="none"],
.lad-courier[b-p9s30emnps]  svg[fill="none"],
.lad-empty__icon[b-p9s30emnps]  svg[fill="none"] { stroke: currentColor; }
/* /Components/Pages/Dashboard/Logistics/LogisticsCourierStatusCard.razor.rz.scp.css */
/* Compact courier list (replaces the old big-tile grid) */
.lcs-list[b-ynywyql8px] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 460px;
    overflow-y: auto;
}

.lcs-list li + li[b-ynywyql8px] { border-top: 1px solid var(--border-subtle); }

.lcs-row[b-ynywyql8px] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-1);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-radius: var(--radius-md);
    transition: background 150ms ease;
}

.lcs-row:hover[b-ynywyql8px] { background: var(--bg-subtle); }
.lcs-row:focus-visible[b-ynywyql8px] { outline: 2px solid var(--accent); outline-offset: -2px; }

.lcs-all[b-ynywyql8px] {
    border: none;
    background: transparent;
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.lcs-all:hover[b-ynywyql8px] { text-decoration: underline; }
.lcs-all:focus-visible[b-ynywyql8px] { outline: 2px solid var(--accent); outline-offset: 2px; }


.lcs-avatar[b-ynywyql8px] {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    color: var(--fg-3);
}

.lcs-avatar--online[b-ynywyql8px]  { background: var(--success-50); color: var(--success-600); }
.lcs-avatar--break[b-ynywyql8px]   { background: color-mix(in srgb, var(--warning-600) 14%, transparent); color: var(--warning-600); }
.lcs-avatar--offline[b-ynywyql8px] { background: var(--bg-subtle); color: var(--fg-hint); }
.lcs-avatar--undefined[b-ynywyql8px] { background: var(--bg-subtle); color: var(--fg-hint); }

.lcs-avatar[b-ynywyql8px]  svg { width: 15px; height: 15px; }
.lcs-avatar[b-ynywyql8px]  svg:not([fill="none"]),
.lcs-avatar[b-ynywyql8px]  svg:not([fill="none"]) path { fill: currentColor; }
.lcs-avatar[b-ynywyql8px]  svg[fill="none"] { stroke: currentColor; }

.lcs-dot[b-ynywyql8px] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--layer-1);
}

.lcs-dot--online[b-ynywyql8px]  { background: var(--success-500); }
.lcs-dot--break[b-ynywyql8px]   { background: var(--warning-500, var(--warning-600)); }
.lcs-dot--offline[b-ynywyql8px] { background: var(--fg-disabled); }
.lcs-dot--undefined[b-ynywyql8px] { background: var(--fg-disabled); }

.lcs-name[b-ynywyql8px] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 600;
    color: var(--fg-1);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lcs-status[b-ynywyql8px] {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    white-space: nowrap;
}

.lcs-status--online[b-ynywyql8px]  { background: var(--success-50); color: var(--success-600); }
.lcs-status--break[b-ynywyql8px]   { background: color-mix(in srgb, var(--warning-600) 14%, transparent); color: var(--warning-600); }
.lcs-status--offline[b-ynywyql8px] { background: var(--bg-subtle); color: var(--fg-hint); }
.lcs-status--undefined[b-ynywyql8px] { background: var(--bg-subtle); color: var(--fg-hint); }

/* Empty state */
.lcs-empty[b-ynywyql8px] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    text-align: center;
}

.lcs-empty__icon[b-ynywyql8px] {
    color: var(--fg-disabled);
    opacity: 0.6;
    margin-bottom: var(--space-1);
}

.lcs-empty__icon[b-ynywyql8px]  svg { width: 34px; height: 34px; }

.lcs-empty__title[b-ynywyql8px] {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fg-2);
}

.lcs-empty__desc[b-ynywyql8px] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
    margin-bottom: var(--space-2);
}

.lcs-empty__cta[b-ynywyql8px] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.lcs-empty__cta:hover[b-ynywyql8px] { border-color: var(--accent); color: var(--accent); }
.lcs-empty__cta:focus-visible[b-ynywyql8px] { outline: 2px solid var(--accent); outline-offset: 2px; }
.lcs-empty__cta[b-ynywyql8px]  svg { width: 15px; height: 15px; }

.lcs-empty__cta[b-ynywyql8px]  svg:not([fill="none"]),
.lcs-empty__cta[b-ynywyql8px]  svg:not([fill="none"]) path,
.lcs-empty__icon[b-ynywyql8px]  svg:not([fill="none"]),
.lcs-empty__icon[b-ynywyql8px]  svg:not([fill="none"]) path { fill: currentColor; }
.lcs-empty__cta[b-ynywyql8px]  svg[fill="none"],
.lcs-empty__icon[b-ynywyql8px]  svg[fill="none"] { stroke: currentColor; }
/* /Components/Pages/Dashboard/Logistics/LogisticsMetricTile.razor.rz.scp.css */
.lmt[b-8csim2fubn] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4);
    height: 100%;
    min-width: 0;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.lmt:hover[b-8csim2fubn] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.lmt-ico[b-8csim2fubn] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lmt-ico[b-8csim2fubn]  svg { width: 20px; height: 20px; }
.lmt-ico[b-8csim2fubn]  svg:not([fill="none"]),
.lmt-ico[b-8csim2fubn]  svg:not([fill="none"]) path { fill: currentColor; }
.lmt-ico[b-8csim2fubn]  svg[fill="none"] { stroke: currentColor; }

.lmt-ico.tone-accent[b-8csim2fubn]  { background: var(--accent-soft); color: var(--accent); }
.lmt-ico.tone-success[b-8csim2fubn] { background: var(--success-50); color: var(--success-600); }
.lmt-ico.tone-warning[b-8csim2fubn] { background: color-mix(in srgb, var(--warning-600) 12%, transparent); color: var(--warning-600); }
.lmt-ico.tone-danger[b-8csim2fubn]  { background: var(--danger-50); color: var(--danger-600); }

.lmt-body[b-8csim2fubn] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.lmt-value[b-8csim2fubn] {
    font-family: var(--font-ui);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--fg-1);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lmt-label[b-8csim2fubn] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 600;
    color: var(--fg-3);
    line-height: 1.3;
    min-width: 0;
}

.lmt-label-text[b-8csim2fubn] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lmt-foot[b-8csim2fubn] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Info tooltip */
.lmt-info[b-8csim2fubn] {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--fg-disabled);
    cursor: help;
    outline: none;
    flex-shrink: 0;
}

.lmt-info[b-8csim2fubn]  svg { width: 13px; height: 13px; fill: currentColor; }
.lmt-info:hover[b-8csim2fubn], .lmt-info:focus-visible[b-8csim2fubn] { color: var(--accent); }

.lmt-pop[b-8csim2fubn] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: var(--space-2) var(--space-3);
    background: var(--fg-1);
    color: var(--bg, #fff);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, var(--shadow-md));
    font-size: var(--xs-size, 0.75rem);
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease;
    z-index: 100;
    pointer-events: none;
}

.lmt-info:hover .lmt-pop[b-8csim2fubn],
.lmt-info:focus-visible .lmt-pop[b-8csim2fubn] { opacity: 1; visibility: visible; }

/* Loading skeleton */
.lmt-skel[b-8csim2fubn] {
    display: inline-block;
    width: 56px;
    height: 1.3rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-muted) 50%, var(--bg-subtle) 75%);
    background-size: 200% 100%;
    animation: lmt-shimmer-b-8csim2fubn 1.2s ease-in-out infinite;
}

@keyframes lmt-shimmer-b-8csim2fubn {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* /Components/Pages/Dashboard/OrdersManagement.razor.rz.scp.css */
/* OrdersManagement.razor - Mobile Responsive CSS */
/* Breakpoints: 600px, 768px, 1024px, 1280px, 1440px, 1600px */
/* 1024px ve ustu = Desktop (FluentSplitter) */
/* 1023px ve alti = Mobile (Dikey layout) */

/* ============================================ */
/* PAGE CONTAINER - Base styles                */
/* ============================================ */
.page-container[b-t5dynecnnm] {
    display: flex;
    flex-direction: column;
    /* Robust fill: match the global app.css pattern (flex item) instead of height:100%,
       which collapses to the header when there's no intrinsic content height (e.g. 0 orders),
       zeroing every flex:1 child — including the Kanban board. */
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
}

/* ============================================ */
/* DESKTOP LAYOUT - full-screen map + floating orders card */
/* Layout visibility controlled by IsMobile    */
/* ============================================ */
.orders-layout-desktop[b-t5dynecnnm] {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 14px;
}

/* ===== Full-screen harita sahnesi (Uber tarzı) =====
   Harita tüm alanı doldurur; Aktif Siparişler kartı sol üst köşede floating durur. */
.om-map-stage[b-t5dynecnnm] {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: var(--ds-radius-lg, 16px);
    overflow: hidden;
    border: 1px solid var(--ds-border, #e2e8f0);
    background: var(--ds-surface, #fff);
}

.om-map-stage__map[b-t5dynecnnm] {
    position: absolute;
    inset: 0;
}

.om-map-stage__map[b-t5dynecnnm]  .map-container {
    height: 100%;
}

/* Aktif kuryeler çubuğu — siparişler kartı sol üste alındığı için kurye durum çubuğunu
   sola-alta itiyoruz (yalnızca bu sayfadaki haritada). */
.om-map-stage__map[b-t5dynecnnm]  .courier-status-bar {
    top: auto !important;
    bottom: 14px !important;
    left: 14px !important;
}

/* Kurye rota paneli — Aktif Siparişler kartı sol üstte floating olduğundan paneli sağ
   üste alıyoruz (yalnızca bu sayfadaki haritada), böylece kartın üzerine binmez. */
.om-map-stage__map[b-t5dynecnnm]  .aom-route-panel {
    left: auto !important;
    right: 14px !important;
}

/* Aktif Siparişler kartı — haritanın sol ÜST köşesinde floating.
   Kurye durum çubuğu (.courier-status-bar) ise alta itilir, böylece çakışmazlar. */
.om-orders-floating[b-t5dynecnnm] {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    width: 640px;
    max-width: calc(100% - 28px);
    max-height: calc(100% - 28px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Panel küçültüldüğünde: kart gizli, yalnızca ince açma sekmesi kalır; harita engellenmez. */
.om-orders-floating.is-collapsed[b-t5dynecnnm] {
    width: auto !important;
    max-width: none;
}

/* Küçültülmüş panelin açma sekmesi — sol üstte kompakt bir çip. */
.om-orders-reveal[b-t5dynecnnm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-2, 10px);
    background: var(--ds-surface, #ffffff);
    box-shadow: var(--ds-shadow-3, 0 12px 32px rgba(2, 6, 23, 0.18));
    color: var(--ds-text, #0f172a);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.om-orders-reveal:hover[b-t5dynecnnm] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

.om-orders-reveal:focus-visible[b-t5dynecnnm] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.om-orders-reveal[b-t5dynecnnm]  svg { width: 18px; height: 18px; color: var(--ds-text-muted, #64748b); }

.om-orders-reveal__count[b-t5dynecnnm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-600, #036ac4);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Sağ kenar resize tutamağı — paneli yatayda dinamik büyüt/küçült (JS pointer drag). */
.om-resize-handle[b-t5dynecnnm] {
    position: absolute;
    top: 0;
    right: -4px;
    width: 12px;
    height: 100%;
    z-index: 6;
    cursor: ew-resize;
    touch-action: none;
}

.om-resize-handle[b-t5dynecnnm]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 4px;
    height: 52px;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--ds-border, #cbd5e1);
    transition: background 0.12s ease, height 0.12s ease;
}

.om-resize-handle:hover[b-t5dynecnnm]::after,
.om-resize-handle.is-dragging[b-t5dynecnnm]::after {
    background: var(--brand-600, #036ac4);
    height: 72px;
}

/* Bounded max-height + min-height:0 zinciri: kart içindeki orders-list (flex:1, overflow-y:auto)
   gerçek bir yükseklik sınırı görüp scroll olabilsin diye height:100% YOK — flex ile büzülür. */
.om-orders-floating[b-t5dynecnnm]  .active-orders-card {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    box-shadow: var(--ds-shadow-3, 0 12px 32px rgba(2, 6, 23, 0.18));
}

/* Harita kapalıyken kart tek başına tüm alanı kaplar. */
.om-orders-fill[b-t5dynecnnm] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.om-orders-fill[b-t5dynecnnm]  .active-orders-card {
    flex: 1;
    min-height: 0;
}

@media (max-width: 1023px) {
    .om-orders-floating[b-t5dynecnnm] {
        position: static;
        /* JS inline genişliğini ez — mobilde panel tam genişlik. */
        width: 100% !important;
        max-width: 100%;
        max-height: none;
    }

    /* Mobilde sağ-kenar resize tutamağı gizli (dokunmatik + tam genişlik). */
    .om-resize-handle[b-t5dynecnnm] {
        display: none;
    }
}

/* ===== Harita panel card (design-system) — wraps ActiveOrdersMap with a header ===== */
.om-map-card[b-t5dynecnnm] {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    background: var(--ds-surface, #fff);
    overflow: hidden;
}

.om-map-card__head[b-t5dynecnnm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.om-map-card__title[b-t5dynecnnm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.om-map-card__title[b-t5dynecnnm]  svg {
    width: 18px;
    height: 18px;
}

.om-map-card__body[b-t5dynecnnm] {
    flex: 1;
    min-height: 0;
    position: relative;
}

.om-map-card__body[b-t5dynecnnm]  .map-container {
    height: 100%;
}

.om-map-loading[b-t5dynecnnm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: var(--ds-text-muted, #64748b);
    font-size: 13px;
}

/* Square 32px icon button used in the map panel header (mirrors ActiveOrdersCard .aof-icon-btn). */
.om-icon-btn[b-t5dynecnnm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #334155);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.om-icon-btn:hover[b-t5dynecnnm] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

.om-icon-btn:focus-visible[b-t5dynecnnm] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
}

.om-icon-btn[b-t5dynecnnm]  svg {
    width: 18px;
    height: 18px;
}

/* Mobile layout - Blazor controls visibility via IsMobile parameter */
.orders-layout-mobile[b-t5dynecnnm] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.75rem;
    padding: 14px;
    overflow: visible;
    position: relative;
}

/* ============================================ */
/* HEADER (design-system) — title + actions     */
/* Mirrors .dash-head / .tbl-head on sibling     */
/* pages: single row, title left, controls right */
/* ============================================ */
.om-head[b-t5dynecnnm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 14px 0 14px;
}

.om-head-left[b-t5dynecnnm] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Restoran Aç/Kapa + Harita butonları — başlık/Son güncelleme yanındaki aksiyon kümesi */
.om-head-tools[b-t5dynecnnm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.om-title[b-t5dynecnnm] {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
}

.om-updated[b-t5dynecnnm] {
    font-size: 12px;
    color: var(--ds-text-muted, var(--neutral-foreground-hint));
    white-space: nowrap;
}

/* Top-row filters (firma / bölge) — admin & logistics only */
.om-head-filters[b-t5dynecnnm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

/* Store selector (firm/store admin) — plain ds-select, matching the Çalışanlar/Müşteriler lists. */
.om-store-select[b-t5dynecnnm] {
    width: 230px;
}

/* ===== Header toolbar controls (rendered inside the card header, next to refresh/eye) =====
   Individual buttons & toggle chips — NOT grouped. Sized to the 32px header icon-button row. */
.om-btn[b-t5dynecnnm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #334155);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.om-btn:hover[b-t5dynecnnm] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

.om-btn:disabled[b-t5dynecnnm] {
    opacity: 0.55;
    cursor: default;
}

/* Active filter state — brand-blue, matches .tbl-btn--primary */
.om-btn--active[b-t5dynecnnm] {
    background: var(--brand-600, #036ac4);
    border-color: var(--brand-600, #036ac4);
    color: #fff;
}

.om-btn--active:hover[b-t5dynecnnm] {
    background: #0257a3;
    border-color: #0257a3;
}

.om-btn[b-t5dynecnnm]  fluent-icon,
.om-btn[b-t5dynecnnm]  svg {
    width: 16px;
    height: 16px;
}

/* Liste ↔ Pano (Kanban) segmented toggle */
.om-viewtoggle[b-t5dynecnnm] {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--slate-100, #f1f5f9);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
}

.om-viewtoggle__btn[b-t5dynecnnm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text, #475569);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.om-viewtoggle__btn:hover[b-t5dynecnnm] { color: var(--brand-600, #036ac4); }

.om-viewtoggle__btn.is-active[b-t5dynecnnm] {
    background: var(--ds-surface, #fff);
    color: var(--brand-600, #036ac4);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.05));
}

.om-viewtoggle__btn:focus-visible[b-t5dynecnnm] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.om-viewtoggle__btn[b-t5dynecnnm]  svg { width: 16px; height: 16px; }

/* Kanban layout wrapper — mirrors .orders-layout-desktop so the board (flex:1 child)
   stretches to fill the remaining height reliably. */
.orders-layout-kanban[b-t5dynecnnm] {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 8px;
}

/* Initial load placeholder — shown until prefs + data are ready (avoids Liste→Pano flash) */
.om-initial-loading[b-t5dynecnnm] {
    flex: 1;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--slate-500, #64748b);
    font-size: 13px;
}

/* Icon-only header button (refresh) */
.om-btn--icon[b-t5dynecnnm] { padding: 0; width: 32px; justify-content: center; }
.om-btn--icon.is-spinning[b-t5dynecnnm]  svg { animation: om-spin-b-t5dynecnnm 0.8s linear infinite; }
@keyframes om-spin-b-t5dynecnnm { to { transform: rotate(360deg); } }

/* "How the board works" hint under the title (Kanban mode) */
.om-kanban-hint[b-t5dynecnnm] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 14px;
    padding: 10px 14px;
    background: var(--accent-soft, #eff6ff);
    border: 1px solid var(--brand-200, #bfdbfe);
    border-radius: var(--ds-radius-sm, 10px);
}

.om-kanban-hint__icon[b-t5dynecnnm] { display: inline-flex; flex-shrink: 0; }

.om-kanban-hint__text[b-t5dynecnnm] {
    flex: 1;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--brand-800, #003f7d);
}

.om-kanban-hint__close[b-t5dynecnnm] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--slate-500, #64748b);
    cursor: pointer;
    transition: background 0.15s ease;
}

.om-kanban-hint__close:hover[b-t5dynecnnm] { background: rgba(15, 23, 42, 0.06); }
.om-kanban-hint__close:focus-visible[b-t5dynecnnm] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 1px; }

/* Auto-print / auto-accept — borderless inline toggles (no chip/box) */
.om-toggle[b-t5dynecnnm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: var(--ds-text, #334155);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.om-toggle[b-t5dynecnnm]  fluent-icon,
.om-toggle[b-t5dynecnnm]  svg {
    width: 16px;
    height: 16px;
}

/* Firma / Bölge filtre dropdownları — sistemdeki diğer ds-select'lerle aynı görünüm. */
.om-filter-select[b-t5dynecnnm] {
    width: 240px;
    max-width: 100%;
}

/* ===== Filtreler dropdown — self-anchored (like the eye dropdown) so it never clips ===== */
.om-filter-wrap[b-t5dynecnnm] {
    position: relative;
    display: inline-flex;
}

.om-filter-backdrop[b-t5dynecnnm] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.om-filter-pop[b-t5dynecnnm] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 14px);
    box-shadow: var(--ds-shadow-3, 0 12px 32px rgba(2, 6, 23, 0.14));
}

.om-filter-pop__title[b-t5dynecnnm] {
    font-family: var(--font-display, inherit);
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.om-filter-pop__grid[b-t5dynecnnm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.om-filter-opt[b-t5dynecnnm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.om-filter-opt__label[b-t5dynecnnm] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-text, #334155);
}

/* Görünüm seçenekleri (göz) — dikey onay kutusu listesi */
.om-viewopts-list[b-t5dynecnnm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.om-viewopts-list .om-filter-opt input[type="checkbox"][b-t5dynecnnm] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-600, #036ac4);
    cursor: pointer;
}

.om-filter-pop__footer[b-t5dynecnnm] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--ds-border, #e2e8f0);
    margin-top: 2px;
}

/* ============================================ */
/* 1280px - Laptop                             */
/* ============================================ */
@media (max-width: 1279px) and (min-width: 1024px) {
    .om-head-filters[b-t5dynecnnm] {
        gap: 6px;
    }
}

/* ============================================ */
/* 1023px ve alti - Responsive adjustments     */
/* Layout visibility controlled by IsMobile    */
/* ============================================ */
@media (max-width: 1023px) {
    /* Mobile layout adjustments */
    .orders-layout-mobile[b-t5dynecnnm] {
        flex: unset;
        height: auto;
    }

    /* Page container mobilde overflow unset */
    .page-container[b-t5dynecnnm] {
        overflow: visible !important;
        height: auto !important;
    }

    /* Panel stilleri */
    .orders-panel-list[b-t5dynecnnm] {
        width: 100%;
        min-width: unset;
        max-height: unset;
        height: auto;
        flex-shrink: 0;
        overflow-y: visible;
    }

    .orders-panel-map[b-t5dynecnnm] {
        width: 100%;
        min-width: unset;
        min-height: 400px;
        height: 400px;
        flex: unset;
        position: relative;
        overflow: hidden;
    }

    .om-head[b-t5dynecnnm] {
        flex-direction: column;
        align-items: stretch !important;
    }

    .om-head-filters[b-t5dynecnnm] {
        justify-content: flex-start;
    }
}

/* ============================================ */
/* 768px - Tablet Portrait                     */
/* ============================================ */
@media (max-width: 768px) {
    /* Firma ve Bolge filtreleri tam genislik */
    .om-head-filters .om-filter-select[b-t5dynecnnm] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================ */
/* 600px - Telefon                             */
/* ============================================ */
@media (max-width: 600px) {
    /* Filtre dropdownları tam genislik */
    .om-head-filters .om-filter-select[b-t5dynecnnm] {
        width: 100% !important;
        flex: 1 1 100%;
    }

    .om-filter-pop__grid[b-t5dynecnnm] {
        grid-template-columns: 1fr;
    }

    /* Aksiyon butonlarini esit genislikte yan yana tut */
    .om-btn[b-t5dynecnnm],
    .om-toggle[b-t5dynecnnm] {
        flex: 1 1 auto;
        justify-content: center;
        font-size: 12px;
    }
}

/* ============================================ */
/* Touch-friendly improvements                 */
/* ============================================ */
@media (max-width: 1023px) {
    /* Butonlar icin minimum touch target */
    fluent-button[b-t5dynecnnm] {
        min-height: 44px;
    }

    /* Filter popover daha genis */
    fluent-popover[b-t5dynecnnm] {
        width: calc(100vw - 32px) !important;
        max-width: 400px;
    }
}

/* iOS Safari icin safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .orders-layout-mobile[b-t5dynecnnm] {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* Smooth scroll for touch devices */
@media (pointer: coarse) {
    .orders-panel-list[b-t5dynecnnm] {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}
/* /Components/Pages/Dashboard/RestaurantDashboard.razor.rz.scp.css */
/* Restaurant Dashboard Styles */

/* ===== Panel area height =====
   The panel row claims whatever vertical space the toolbar (and the statistics section, when
   shown) leaves over, so a solo card fills the screen. `min-height` keeps it usable if the
   viewport is short; `min-height: 0` on the flex children lets inner scroll areas actually
   scroll instead of pushing the card taller. */
.dash-panels[b-j4rwmvrykx] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

/* A single visible panel: stretch the lone card over the whole area. */
.dash-solo[b-j4rwmvrykx] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ::deep .panel-card forces `height: auto !important` further down this file (needed for the
   stacked/expanded layouts). Undo it for the stretched ones, or the card ignores the space. */
.dash-solo[b-j4rwmvrykx] >  .panel-card {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
}

/* ===== Resizable split: Aktif Siparişler ↔ Masalar =====
   --orders-ratio (a %) drives the orders pane width; the tables pane takes the
   rest. The handle is a fixed-width grab strip between them. JS updates the var
   on drag/keyboard; on mobile the whole thing stacks vertically. */
.dash-split[b-j4rwmvrykx] {
    display: flex;
    align-items: stretch;
    width: 100%;
    /* Claim the panel area's full height so both cards reach the bottom, same as .dash-solo. */
    flex: 1 1 auto;
    min-height: 0;
    position: relative;    /* the handle is positioned against this box */
    --orders-ratio: 50%;
    --dash-gap: 12px;      /* breathing room between the two cards */
}

/* Both panes stretch their card over the pane (the orders pane already had this; the tables
   pane relied on the plan's intrinsic min-height and stopped short on tall screens). */
.dash-split__pane--tables[b-j4rwmvrykx] {
    display: flex;
    flex-direction: column;
}

.dash-split__pane--tables[b-j4rwmvrykx]  .panel-card {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
}

.dash-split__pane[b-j4rwmvrykx] {
    min-width: 0;          /* let the grids inside actually shrink */
    overflow: hidden;
}

/* Panes split the row exactly; the gap between them comes from a half-gap of
   right/left padding so there is no stray whitespace beyond --dash-gap. */
.dash-split__pane--orders[b-j4rwmvrykx] {
    flex: 0 0 var(--orders-ratio);
    padding-right: calc(var(--dash-gap) / 2);
}

.dash-split__pane--tables[b-j4rwmvrykx] {
    flex: 1 1 0;           /* absorb whatever orders doesn't take */
    padding-left: calc(var(--dash-gap) / 2);
}

/* The row already stretches both panes to equal height (align-items: stretch),
   but the card inside the orders pane is top-aligned and — when empty — collapses
   to its natural (short) height. Make the orders pane a column and let the card
   fill it, so an empty Aktif Siparişler matches the Masalar card's height instead
   of looking stunted. (height:auto !important is set elsewhere, hence the override.) */
.dash-split__pane--orders[b-j4rwmvrykx] {
    display: flex;
    flex-direction: column;
}

.dash-split__pane--orders[b-j4rwmvrykx]  .active-orders-card.panel-card {
    height: 100% !important;
    flex: 1 1 auto;
}

.dash-split__pane--orders[b-j4rwmvrykx]  .orders-list {
    flex: 1 1 auto;
}

/* Center the empty-state within the now-taller card. */
.dash-split__pane--orders[b-j4rwmvrykx]  .empty-state {
    flex: 1 1 auto;
    justify-content: center;
}

/* The grab handle floats on the seam — it has zero layout width, so it never
   pushes the panels apart; it just overlays the gap centered on the split. */
.dash-split__handle[b-j4rwmvrykx] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--orders-ratio);
    transform: translateX(-50%);
    width: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    background: transparent;
    border: 0;
    padding: 0;
    touch-action: none;    /* keep the page from scrolling while dragging */
}

.dash-split__handle[b-j4rwmvrykx]::before {
    content: "";
    width: 4px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--border);
    transition: background 0.15s ease, height 0.15s ease;
}

.dash-split__handle:hover[b-j4rwmvrykx]::before,
.dash-split.is-dragging .dash-split__handle[b-j4rwmvrykx]::before {
    background: var(--accent);
    height: 64px;
}

.dash-split__handle:focus-visible[b-j4rwmvrykx] {
    outline: none;
}

.dash-split__handle:focus-visible[b-j4rwmvrykx]::before {
    background: var(--accent);
    height: 64px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.dash-split.is-dragging[b-j4rwmvrykx] {
    user-select: none;
    cursor: col-resize;
}

/* Mobile / narrow: stack panels, drop the drag handle entirely. */
@media (max-width: 768px) {
    .dash-split[b-j4rwmvrykx] {
        flex-direction: column;
        gap: 16px;
    }
    .dash-split__pane--orders[b-j4rwmvrykx],
    .dash-split__pane--tables[b-j4rwmvrykx] {
        flex: 1 1 auto;
        width: 100%;
    }
    .dash-split__handle[b-j4rwmvrykx] {
        display: none;
    }
}

/* ===== Dashboard header: "Genel Görünüm" title + rectangular action buttons ===== */
.dash-head[b-j4rwmvrykx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.dash-title[b-j4rwmvrykx] {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ds-text, #0f172a);
}

/* Spans the width left over by the title so the trailing actions can sit on the far right. */
.dash-actions-wrap[b-j4rwmvrykx] {
    min-width: 0;
    flex: 1;
}

.dash-actions[b-j4rwmvrykx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Pushes itself — and everything after it — to the right edge of the toolbar row.
   Carried by the first food-platform action (Restoran Aç/Kapa), so those buttons
   separate visually from the QR / panel-visibility group on the left. */
.dash-btn--push[b-j4rwmvrykx] {
    margin-left: auto;
}

/* "Mobil Uygulamalar" quick action — pinned to the far right of the toolbar row
   (opposite the title), on its own so it stays right-aligned regardless of how
   the quick-action carousel to its left is sized. */
.dash-btn--mobile[b-j4rwmvrykx] {
    margin-left: auto;
    flex: 0 0 auto;
}

.dash-btn[b-j4rwmvrykx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #334155);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.dash-btn:hover[b-j4rwmvrykx] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

.dash-btn:disabled[b-j4rwmvrykx] {
    opacity: 0.6;
    cursor: default;
}

/* Accent variant — used for the "connect food platforms" onboarding nudge. */
.dash-btn--accent[b-j4rwmvrykx] {
    border-color: var(--brand-600, #036ac4);
    color: var(--brand-600, #036ac4);
    background: var(--accent-soft, #eff6ff);
}
.dash-btn--accent:hover[b-j4rwmvrykx] {
    background: #e0edfb;
    border-color: var(--brand-700, #0356a0);
}

/* Icon-only variant — square button, no label (e.g. the panel-visibility "göz" toggle). */
.dash-btn--icon[b-j4rwmvrykx] {
    width: 40px;
    padding: 0;
    justify-content: center;
    gap: 0;
}

.dash-btn[b-j4rwmvrykx]  fluent-icon,
.dash-btn[b-j4rwmvrykx]  svg {
    width: 18px;
    height: 18px;
}


/* ===== Panel visibility menu (toolbar "Panel Görünümü" dropdown) ===== */
.panel-menu[b-j4rwmvrykx] {
    position: relative;
    display: inline-flex;
}

/* Open-state highlight on the trigger, matching .dash-btn:hover. */
.panel-menu .dash-btn.is-active[b-j4rwmvrykx] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

.panel-menu__backdrop[b-j4rwmvrykx] {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.panel-menu__pop[b-j4rwmvrykx] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 248px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.panel-menu__title[b-j4rwmvrykx] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ds-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px 6px;
}

.panel-menu__item[b-j4rwmvrykx] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm, 10px);
    background: transparent;
    color: var(--ds-text-muted, #64748b);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.panel-menu__item:hover[b-j4rwmvrykx] {
    background: var(--slate-100, #f1f5f9);
}

.panel-menu__item:focus-visible[b-j4rwmvrykx] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
}

/* Shown panel: brand-tinted so "açık" reads at a glance. */
.panel-menu__item.is-on[b-j4rwmvrykx] {
    background: #eff6ff;
    color: var(--accent, #036ac4);
}

.panel-menu__item[b-j4rwmvrykx]  svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.panel-menu__hint[b-j4rwmvrykx] {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-muted, #94a3b8);
    padding: 6px 6px 2px;
}

/* Empty-state shown when every panel is hidden. */
.panel-empty[b-j4rwmvrykx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 32px 20px;
    margin-bottom: 16px;
    border: 1px dashed var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius, 16px);
    background: var(--ds-surface-muted, #f8fafc);
}

.panel-empty__icon[b-j4rwmvrykx]  svg {
    width: 32px;
    height: 32px;
    color: var(--ds-text-muted, #94a3b8);
}

.panel-empty__title[b-j4rwmvrykx] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.panel-empty__desc[b-j4rwmvrykx] {
    font-size: 13px;
    color: var(--ds-text-muted, #64748b);
    max-width: 420px;
}


/* ===== Compact printer-setup nudge ===== */
/* Pinned to the far right of the header row, in line with the quick-action buttons.
   Soft brand-blue tint pill (matches the design-system notification style). */
.printer-nudge[b-j4rwmvrykx] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    height: 36px;
    padding: 0 6px 0 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--accent, #036ac4);
    white-space: nowrap;
    flex: 0 0 auto;
}

.printer-nudge__cta[b-j4rwmvrykx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.printer-nudge__cta:hover[b-j4rwmvrykx] {
    text-decoration: underline;
}

.printer-nudge__cta[b-j4rwmvrykx]  svg {
    width: 16px;
    height: 16px;
}

.printer-nudge__close[b-j4rwmvrykx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.printer-nudge__close:hover[b-j4rwmvrykx] {
    background: rgba(2, 106, 196, 0.12);
    color: var(--accent, #036ac4);
}

.printer-nudge__close[b-j4rwmvrykx]  svg {
    width: 14px;
    height: 14px;
}

.printer-nudge :focus-visible[b-j4rwmvrykx] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ===== Bottom-right notification stack (order-toast style) ===== */
.ds-toast-region[b-j4rwmvrykx] {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(400px, calc(100vw - 40px));
    pointer-events: none;
}

.ds-announce-toast[b-j4rwmvrykx] {
    --at-accent: #2563eb;
    --at-accent-bg: rgba(59, 130, 246, 0.12);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--at-accent);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
    animation: ds-announce-toast-in-b-j4rwmvrykx 0.28s cubic-bezier(0.21, 1.02, 0.73, 1);
}

@keyframes ds-announce-toast-in-b-j4rwmvrykx {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ds-announce-toast[b-j4rwmvrykx] {
        animation: none;
    }
}

.ds-announce-toast--news[b-j4rwmvrykx]        { --at-accent: #2563eb; --at-accent-bg: rgba(59, 130, 246, 0.12); }
.ds-announce-toast--update[b-j4rwmvrykx]      { --at-accent: #7c3aed; --at-accent-bg: rgba(139, 92, 246, 0.12); }
.ds-announce-toast--warning[b-j4rwmvrykx]     { --at-accent: #b45309; --at-accent-bg: rgba(245, 158, 11, 0.15); }
.ds-announce-toast--feature[b-j4rwmvrykx]     { --at-accent: #059669; --at-accent-bg: rgba(16, 185, 129, 0.12); }
.ds-announce-toast--maintenance[b-j4rwmvrykx] { --at-accent: #ea580c; --at-accent-bg: rgba(249, 115, 22, 0.12); }
.ds-announce-toast--security[b-j4rwmvrykx]    { --at-accent: #dc2626; --at-accent-bg: rgba(239, 68, 68, 0.12); }

.ds-announce-toast__icon[b-j4rwmvrykx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--at-accent-bg);
    color: var(--at-accent);
}

.ds-announce-toast__icon[b-j4rwmvrykx]  svg,
.ds-announce-toast__icon[b-j4rwmvrykx]  svg path {
    fill: var(--at-accent) !important;
}

.ds-announce-toast__icon[b-j4rwmvrykx]  svg {
    width: 20px;
    height: 20px;
}

.ds-announce-toast__text[b-j4rwmvrykx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
}

.ds-announce-toast__badge[b-j4rwmvrykx] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--at-accent-bg);
    color: var(--at-accent);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ds-announce-toast__title[b-j4rwmvrykx] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.ds-announce-toast__snippet[b-j4rwmvrykx] {
    font-size: 13px;
    color: var(--ds-text-muted, #64748b);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ds-announce-toast__link[b-j4rwmvrykx] {
    align-self: flex-start;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--at-accent);
    text-decoration: none;
}

.ds-announce-toast__link:hover[b-j4rwmvrykx] {
    text-decoration: underline;
}

.ds-announce-toast__link:focus-visible[b-j4rwmvrykx] {
    outline: 2px solid var(--at-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.ds-announce-toast__cta[b-j4rwmvrykx] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--brand-600, #036ac4);
    color: #fff;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease;
}

.ds-announce-toast__cta:hover[b-j4rwmvrykx] {
    background: #0257a3;
}

.ds-announce-toast__cta:focus-visible[b-j4rwmvrykx] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.ds-announce-toast__cta[b-j4rwmvrykx]  svg,
.ds-announce-toast__cta[b-j4rwmvrykx]  svg path {
    width: 16px;
    height: 16px;
    fill: #fff !important;
}

.ds-announce-toast__close[b-j4rwmvrykx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--ds-radius-sm, 8px);
    background: transparent;
    color: var(--ds-text-muted, #64748b);
    cursor: pointer;
    transition: background 0.12s ease;
}

.ds-announce-toast__close:hover[b-j4rwmvrykx] {
    background: rgba(15, 23, 42, 0.06);
}

.ds-announce-toast__close:focus-visible[b-j4rwmvrykx] {
    outline: 2px solid var(--at-accent);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .ds-toast-region[b-j4rwmvrykx] {
        right: 10px;
        left: 10px;
        bottom: 14px;
        width: auto;
    }
}

/* ===== İstatistikler section header ===== */
.statistics-section[b-j4rwmvrykx] {
    margin-top: 24px;
}

.stats-head[b-j4rwmvrykx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 14px;
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.stats-head__title[b-j4rwmvrykx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stats-head__icon[b-j4rwmvrykx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-md, 12px);
    background: rgba(3, 106, 196, 0.10);
    color: var(--brand-600, #036ac4);
    flex-shrink: 0;
}

.stats-head__icon[b-j4rwmvrykx]  svg {
    width: 22px;
    height: 22px;
}

.stats-head__eyebrow[b-j4rwmvrykx] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

.stats-head__heading[b-j4rwmvrykx] {
    margin: 0;
    font-family: var(--ds-font-display, "Sora", sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ds-text, #0f172a);
    line-height: 1.2;
}

.stats-head__actions[b-j4rwmvrykx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dashboard Toolbar Layout */
.dashboard-toolbar[b-j4rwmvrykx] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}

.toolbar-utilities[b-j4rwmvrykx] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

/* Single-row carousel wrapper for quick action tiles */
.quick-actions-carousel[b-j4rwmvrykx] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex: 1 1 100%;
    min-width: 0;
}

.quick-actions-row[b-j4rwmvrykx] {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
    scrollbar-width: none;
}

.quick-actions-row[b-j4rwmvrykx]::-webkit-scrollbar {
    display: none;
}

/* Chevron arrows — hidden by default, shown only when overflow exists */
.carousel-arrow[b-j4rwmvrykx] {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 76px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.carousel-arrow:hover[b-j4rwmvrykx] {
    background: var(--neutral-layer-2);
    border-color: var(--accent-foreground-rest);
}

.quick-actions-carousel.can-scroll-left .carousel-arrow-left[b-j4rwmvrykx] {
    display: inline-flex;
}

.quick-actions-carousel.can-scroll-right .carousel-arrow-right[b-j4rwmvrykx] {
    display: inline-flex;
}

/* Square tile action buttons — match ActiveOrdersCard .action-square-btn */
.quick-action-btn[b-j4rwmvrykx] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 80px;
    height: 76px;
    flex: 0 0 80px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
    padding: 6px 4px;
    text-align: center;
    line-height: 1.15;
    overflow: hidden;
}

.quick-action-btn > span[b-j4rwmvrykx] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    max-width: 100%;
}

.quick-action-btn:hover[b-j4rwmvrykx] {
    background: var(--neutral-layer-2);
    border-color: var(--accent-foreground-rest);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.quick-action-btn:active[b-j4rwmvrykx] {
    background: var(--neutral-layer-3);
    transform: translateY(1px);
}

.quick-action-btn[b-j4rwmvrykx]  svg {
    flex-shrink: 0;
    fill: var(--accent-foreground-rest, currentColor);
}

/* Pro subscription lead button — solid amber, premium feel, no gradient */
.quick-action-btn.pro-cta-btn[b-j4rwmvrykx] {
    background: #f59e0b;
    border-color: #d97706;
    border-width: 1.5px;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.32);
    animation: pro-cta-pulse-b-j4rwmvrykx 2.6s ease-in-out infinite;
}

.quick-action-btn.pro-cta-btn:hover[b-j4rwmvrykx] {
    background: #d97706;
    border-color: #b45309;
    color: #fff;
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.5);
    transform: translateY(-1px);
    animation: none;
}

.quick-action-btn.pro-cta-btn:active[b-j4rwmvrykx] {
    background: #b45309;
    color: #fff;
    transform: translateY(0);
}

.quick-action-btn.pro-cta-btn[b-j4rwmvrykx]  svg {
    fill: #ffffff;
}

.quick-action-btn.pro-cta-btn:hover[b-j4rwmvrykx]  svg {
    fill: #ffffff;
}

/* First button of the right-aligned group — pushes itself + following siblings to the end of the row */
.quick-action-btn.quick-action-right-start[b-j4rwmvrykx] {
    margin-left: auto;
}

@keyframes pro-cta-pulse-b-j4rwmvrykx {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.32);
    }
    50% {
        box-shadow: 0 6px 22px rgba(245, 158, 11, 0.55);
    }
}

/* Card Styling with deep selectors for FluentUI */
[b-j4rwmvrykx] .panel-card {
    height: auto !important;
    border-radius: var(--ds-radius-lg, 16px);
    border: 1px solid var(--ds-border, #e2e8f0);
    overflow: hidden;
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06)) !important;
}

/* FluentCard specific styling - remove shadows */
[b-j4rwmvrykx] fluent-card {
    box-shadow: none !important;
    --elevation: 0;
}

[b-j4rwmvrykx] fluent-card.panel-card {
    height: auto !important;
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06)) !important;
}

[b-j4rwmvrykx] fluent-card::part(content) {
    height: auto !important;
}

[b-j4rwmvrykx] fluent-card::part(root) {
    height: auto !important;
    box-shadow: none !important;
}

[b-j4rwmvrykx] .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem 0.7rem 1rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: transparent;
}

[b-j4rwmvrykx] .card-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

[b-j4rwmvrykx] .view-all {
    display: flex;
    align-items: center;
}

/* Stats Grid */
[b-j4rwmvrykx] .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

[b-j4rwmvrykx] .stat-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    background-color: var(--neutral-layer-1);
    transition: transform 0.2s;
    gap: 0.75rem;
}

[b-j4rwmvrykx] .stat-item:hover {
    transform: translateY(-2px);
}

[b-j4rwmvrykx] .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: white;
}

[b-j4rwmvrykx] .stat-details {
    flex: 1;
}

[b-j4rwmvrykx] .stat-label {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-j4rwmvrykx] .stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* Quick Actions */
[b-j4rwmvrykx] .quick-actions-card {
    max-width: 200px !important;
}

[b-j4rwmvrykx] .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

[b-j4rwmvrykx] .action-button {
    width: 100%;
    justify-content: flex-start;
    padding-left: 0.75rem;
}

[b-j4rwmvrykx] .action-button::part(content) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

[b-j4rwmvrykx] .action-button::part(start) {
    margin-right: 0;
}




/* Empty State */
[b-j4rwmvrykx] .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

[b-j4rwmvrykx] .empty-state.compact {
    padding: 0.2rem 0.2rem 0.1rem 0.2rem;
    font-size: 0.92em;
}

[b-j4rwmvrykx] .empty-state .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

[b-j4rwmvrykx] .empty-state p {
    margin-bottom: 1rem;
}

/* Header Info */
[b-j4rwmvrykx] .table-listing-info-header {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

[b-j4rwmvrykx] .card-update-info {
    font-size: 11px;
    color: #999;
    font-style: italic;
    white-space: nowrap;
}

[b-j4rwmvrykx] .header-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: auto;
}

[b-j4rwmvrykx] .header-info-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

[b-j4rwmvrykx] .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-j4rwmvrykx] .refresh-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 4px;
}

[b-j4rwmvrykx] .refresh-btn.loading svg {
    animation: spin-b-j4rwmvrykx 0.6s linear infinite;
}

@keyframes spin-b-j4rwmvrykx {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



/* Active Staff Card */
[b-j4rwmvrykx] .active-staff-card {
    grid-area: staff;
}

[b-j4rwmvrykx] .staff-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

[b-j4rwmvrykx] .staff-card {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    background-color: var(--neutral-layer-1);
    cursor: pointer;
    transition: transform 0.2s;
}

[b-j4rwmvrykx] .staff-card:hover {
    transform: translateY(-2px);
}

[b-j4rwmvrykx] .staff-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--neutral-layer-2);
    margin-right: 0.75rem;
    overflow: hidden;
}

[b-j4rwmvrykx] .staff-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

[b-j4rwmvrykx] .staff-details {
    flex: 1;
}

[b-j4rwmvrykx] .staff-name {
    font-weight: 500;
    line-height: 1.2;
}

[b-j4rwmvrykx] .staff-role {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

[b-j4rwmvrykx] .staff-actions {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Daily Sales Card */
[b-j4rwmvrykx] .daily-sales-card {
    grid-area: sales;
}

[b-j4rwmvrykx] .completed-orders-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
}

[b-j4rwmvrykx] .completed-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: 4px;
    background-color: var(--neutral-layer-1);
}

[b-j4rwmvrykx] .order-basic-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-j4rwmvrykx] .sales-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    margin-top: 0.5rem;
}

[b-j4rwmvrykx] .summary-value {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent-foreground-rest);
}

/* Loading States */
[b-j4rwmvrykx] .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
    height: 100%;
    color: var(--neutral-foreground-hint);
}

[b-j4rwmvrykx] .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

[b-j4rwmvrykx] .loading-container p {
    color: var(--neutral-foreground-hint);
    font-size: 16px;
    margin: 0;
}

/* Setup Progress Card Styles */
[b-j4rwmvrykx] .setup-progress-card {
    background: var(--neutral-layer-card);
}

/* Responsive Layout */
@media (max-width: 1024px) {
    [b-j4rwmvrykx] .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tables Grid - Multiple selector approaches */
.tables-grid[b-j4rwmvrykx] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 1rem !important;
    padding: 1rem !important;
    height: min-content !important;
}

.tables-grid.compact[b-j4rwmvrykx] {
    gap: 0.5rem !important;
    padding: 0.5rem !important;
}

[b-j4rwmvrykx] .tables-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 1rem !important;
    padding: 1rem !important;
    height: min-content !important;
}

[b-j4rwmvrykx] .tables-grid.compact {
    gap: 0.5rem !important;
    padding: 0.5rem !important;
}

/* Alternative approach with descendant selectors */
[b-j4rwmvrykx] fluent-card .tables-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 1rem !important;
    padding: 1rem !important;
}

[b-j4rwmvrykx] fluent-card .tables-grid.compact {
    gap: 0.5rem !important;
    padding: 0.5rem !important;
}

/* Table Cards - Multiple approaches */
.table-card[b-j4rwmvrykx] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    border: none !important;
    border-left: 3px solid #bdbdbd !important;
    background: var(--neutral-layer-2) !important;
    color: var(--neutral-foreground-rest) !important;
    transition: border 0.2s, background 0.2s, color 0.2s !important;
    padding: 1.2rem 0.5rem !important;
    min-height: 100px !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.table-card.compact[b-j4rwmvrykx] {
    padding: 0.5rem 0.5rem 0.4rem 0.5rem !important;
    min-width: 0 !important;
    font-size: 0.95em !important;
}

[b-j4rwmvrykx] .table-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: none;
    border-left: 3px solid #bdbdbd;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    transition: border 0.2s, background 0.2s, color 0.2s;
    padding: 1.2rem 0.5rem;
    min-height: 120px;
    cursor: pointer;
    box-shadow: none;
}

[b-j4rwmvrykx] .table-card.compact {
    padding: 0.5rem 0.5rem 0.4rem 0.5rem;
    min-width: 0;
    font-size: 0.95em;
}

[b-j4rwmvrykx] .table-card:hover {
    transform: translateY(-2px);
}

[b-j4rwmvrykx] .table-card.available {
    border-left: 3px solid #1ecb4f;
}

[b-j4rwmvrykx] .table-card.occupied {
    border-left: 3px solid #ff3b3b;
    background: #ffeaea;
}

[b-j4rwmvrykx] .table-card.reserved {
    border-left: 3px solid #ffb300;
}

[b-j4rwmvrykx] .table-card.out-of-service {
    border-left: 3px solid #bdbdbd;
    opacity: 0.5;
    cursor: not-allowed;
}

[b-j4rwmvrykx] .table-card .table-icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

[b-j4rwmvrykx] .table-card .table-number {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: inherit;
}

[b-j4rwmvrykx] .table-card .table-status {
    font-size: 0.95rem;
    color: var(--neutral-foreground-hint);
    opacity: 1;
}

[b-j4rwmvrykx] .table-card .table-employee {
    font-size: 0.8rem;
    margin-top: 0.2rem;
    opacity: 0.9;
}

/* NOTE: The orders list + rows are styled entirely by ActiveOrdersCard (its own
   .razor.css + responsive grid). The stale ::deep .orders-list / .order-row-enhanced
   overrides that used to live here were removed — they fought the card's card styling
   via scoped-CSS specificity ties and forced a dense, borderless list look. */

@media (max-width: 768px) {
    [b-j4rwmvrykx] .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    [b-j4rwmvrykx] .tables-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (max-width: 480px) {
    [b-j4rwmvrykx] .stats-grid {
        grid-template-columns: 1fr;
    }

    [b-j4rwmvrykx] .action-buttons {
        flex-direction: column;
    }

    .quick-action-btn[b-j4rwmvrykx] {
        width: 72px;
        height: 70px;
        flex-basis: 72px;
        font-size: 10px;
        padding: 5px 4px;
        gap: 3px;
    }

    .carousel-arrow[b-j4rwmvrykx] {
        width: 32px;
        height: 70px;
    }

    .toolbar-utilities[b-j4rwmvrykx] {
        margin-left: 0;
    }
}

/* Metrics and Charts Animations */
@keyframes fadeIn-b-j4rwmvrykx {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Metrics Container Animation */
.metrics-container[b-j4rwmvrykx] {
    overflow: hidden;
    transition: all 0.35s ease-in-out;
}

.metrics-container.visible[b-j4rwmvrykx] {
    opacity: 1;
    max-height: 2000px;
    margin-bottom: 16px;
    animation: fadeIn-b-j4rwmvrykx 0.35s ease-in-out forwards;
}

.metrics-container.hidden[b-j4rwmvrykx] {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    pointer-events: none;
}

/* Charts Container Animation */
.charts-container[b-j4rwmvrykx] {
    overflow: hidden;
    transition: all 0.35s ease-in-out;
}

.charts-container.visible[b-j4rwmvrykx] {
    opacity: 1;
    max-height: 2000px;
    margin-top: 16px;
    animation: fadeIn-b-j4rwmvrykx 0.35s ease-in-out forwards;
}

.charts-container.hidden[b-j4rwmvrykx] {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    pointer-events: none;
}

/* Smooth Layout Transitions */
fluent-grid[b-j4rwmvrykx] {
    transition: all 0.3s ease-in-out;
}

[b-j4rwmvrykx] fluent-grid {
    transition: all 0.3s ease-in-out;
}
/* New-reservation badge — a small red counter chip on the Yeni Rezervasyon quick action.
   Scoped via the rsv-quick container so it never bleeds onto other quick-action buttons. */
.rsv-quick[b-j4rwmvrykx] { position: relative; }
.rsv-quick__badge[b-j4rwmvrykx] {
    position: absolute;
    top: 6px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* /Components/Pages/Deliveries/ActiveDeliveriesMap.razor.rz.scp.css */
/* Map container needs position relative for absolute positioning of the popup */
.map-container[b-3vpz5tpoyc] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Modern courier status popup styles */
.courier-status-popup[b-3vpz5tpoyc] {
    position: absolute;
    top: 15px;
    left: 15px;
    width: auto;
    max-width: calc(100% - 30px); /* Ensure it can't be wider than container minus padding */
    background-color: rgba(26, 26, 37, 0.92);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap based on their own width */
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-sizing: border-box;
    overflow: hidden;
}

.courier-status-header[b-3vpz5tpoyc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: white;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto; /* Don't grow or shrink */
}

.courier-status-header[b-3vpz5tpoyc]  svg {
    width: 18px;
    height: 18px;
    color: #e2e8f0;
    margin-right: 0;
}

.status-indicators[b-3vpz5tpoyc] {
    display: flex;
    flex-wrap: wrap; /* Allow status items to wrap within their container */
    gap: 8px;
    flex: 1 1 270px; /* Grow and shrink, with a flex-basis of 270px */
    min-width: 0; /* Allow container to be narrower than its contents */
}

.status-item[b-3vpz5tpoyc] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: #4a5568;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 32px;
    box-sizing: border-box;
    flex: 0 1 auto; /* Allow status items to shrink */
    justify-content: space-between;
}

.status-item:hover[b-3vpz5tpoyc] {
    background-color: #4a5568;
}

.status-dot[b-3vpz5tpoyc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 6px;
}

.status-dot.online[b-3vpz5tpoyc] {
    background-color: #38c172;
    box-shadow: 0 0 4px rgba(56, 193, 114, 0.6);
}

.status-dot.onbreak[b-3vpz5tpoyc] {
    background-color: #f6ad55;
    box-shadow: 0 0 4px rgba(246, 173, 85, 0.6);
}

.status-dot.offline[b-3vpz5tpoyc] {
    background-color: #a0aec0;
    box-shadow: 0 0 4px rgba(160, 174, 192, 0.6);
}

.courier-count[b-3vpz5tpoyc] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    display: inline-block;
}

.status-label[b-3vpz5tpoyc] {
    font-size: 0.95rem;
    color: #cbd5e0;
    font-weight: 400;
    display: inline-block;
    margin-right: 8px;
}

.total-counter[b-3vpz5tpoyc] {
    background-color: #4a5568;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    flex: 0 0 auto; /* Don't grow or shrink */
}

/* Modern marker tooltip/info window styles */
[b-3vpz5tpoyc] .gm-style .gm-style-iw-c {
    padding: 0 !important; /* Remove default padding */
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    max-width: 360px !important; /* Increased from 320px to 360px */
    overflow: visible !important;
}

[b-3vpz5tpoyc] .gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
    max-height: none !important;
}

[b-3vpz5tpoyc] .gm-style .gm-style-iw-t::after {
    background: linear-gradient(45deg, rgba(235, 235, 240, 1) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Fix for the close button container */
[b-3vpz5tpoyc] .gm-style-iw-tc,
[b-3vpz5tpoyc] .gm-style-iw-tc::after,
[b-3vpz5tpoyc] .gm-style-iw-tc div {
    background-color: transparent !important;
}

/* Make sure the info window has proper z-index and pointer events */
[b-3vpz5tpoyc] .gm-style-iw-c {
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: default !important;
}

/* Make sure close button container is visible but transparent */
[b-3vpz5tpoyc] .gm-style-iw-chr {
    opacity: 0 !important; /* Keep it invisible but functional */
    pointer-events: auto !important; /* Ensure click events work */
    display: none !important;
}

/* Google Maps InfoWindow close button styling */
[b-3vpz5tpoyc] .gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    top: 5px !important;
    right: 5px !important;
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
}

[b-3vpz5tpoyc] .gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.1) !important;
}

[b-3vpz5tpoyc] .gm-style .gm-style-iw-c button.gm-ui-hover-effect img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    opacity: 0.8 !important;
}

[b-3vpz5tpoyc] .marker-info-window {
    padding: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
}

[b-3vpz5tpoyc] .marker-info-header {
    padding: 12px 16px;
    color: white;
    font-weight: 600;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    letter-spacing: 0.3px;
    position: relative; /* For properly positioning the close button */
}

[b-3vpz5tpoyc] .marker-info-content {
    padding: 16px;
    background: #ebebf0; /* Darker background color */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

[b-3vpz5tpoyc] .marker-info-row {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
}

[b-3vpz5tpoyc] .marker-info-row:last-child {
    margin-bottom: 0;
}

[b-3vpz5tpoyc] .marker-info-label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    width: 70px;
    flex-shrink: 0;
}

[b-3vpz5tpoyc] .marker-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    flex-grow: 1;
}

/* Status indicator in info window */
[b-3vpz5tpoyc] .marker-info-value.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    background-color: #e0e2e8;
}

[b-3vpz5tpoyc] .marker-info-value.status.online {
    background-color: rgba(56, 193, 114, 0.2);
    color: #1e7d45;
}

[b-3vpz5tpoyc] .marker-info-value.status.onbreak {
    background-color: rgba(246, 173, 85, 0.2);
    color: #975a16;
}

[b-3vpz5tpoyc] .marker-info-value.status.offline {
    background-color: rgba(160, 174, 192, 0.2);
    color: #4a5568;
}
/* /Components/Pages/Deliveries/DeliveryCard.razor.rz.scp.css */
/* DeliveryCard - ActiveOrdersCard tarzı stiller */

.order-row-enhanced[b-e9jo5f2lab] {
    padding: 12px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.order-row-enhanced:hover[b-e9jo5f2lab] {
    background-color: #f8f9fa;
}

.order-row-enhanced:last-child[b-e9jo5f2lab] {
    border-bottom: none;
}

.order-main[b-e9jo5f2lab] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.order-info[b-e9jo5f2lab] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-duration[b-e9jo5f2lab] {
    color: var(--accent-foreground-rest, #1976d2);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
    display: inline-block;
    transition: background 0.2s, color 0.2s;
}

.order-sender[b-e9jo5f2lab] {
    font-size: 12px;
    color: #666;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-table[b-e9jo5f2lab] {
    font-weight: 700;
    color: #2c3e50;
}

.order-separator[b-e9jo5f2lab] {
    color: #ccc;
    font-size: 10px;
}

.order-details[b-e9jo5f2lab] {
    padding: 4px 0;
}

/* Animation classes */
.delivery-card-highlight[b-e9jo5f2lab] {
    position: relative;
    z-index: 10;
}

.delivery-card-highlight[b-e9jo5f2lab]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

.delivery-card-created[b-e9jo5f2lab]::before {
    animation: border-pulse-created-b-e9jo5f2lab 3s ease-out;
}

.delivery-card-assigned[b-e9jo5f2lab]::before {
    animation: border-pulse-assigned-b-e9jo5f2lab 3s ease-out;
}

.delivery-card-status-updated[b-e9jo5f2lab]::before {
    animation: border-pulse-status-updated-b-e9jo5f2lab 3s ease-out;
}

.delivery-card-cancelled[b-e9jo5f2lab]::before {
    animation: border-pulse-cancelled-b-e9jo5f2lab 3s ease-out;
}

.delivery-card-completed[b-e9jo5f2lab]::before {
    animation: border-pulse-completed-b-e9jo5f2lab 3s ease-out;
}

@keyframes border-pulse-created-b-e9jo5f2lab {
    0% {
        box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.8);
        background-color: rgba(46, 204, 113, 0.1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
        background-color: transparent;
    }
}

@keyframes border-pulse-assigned-b-e9jo5f2lab {
    0% {
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.8);
        background-color: rgba(52, 152, 219, 0.1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
        background-color: transparent;
    }
}

@keyframes border-pulse-status-updated-b-e9jo5f2lab {
    0% {
        box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.8);
        background-color: rgba(241, 196, 15, 0.1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
        background-color: transparent;
    }
}

@keyframes border-pulse-cancelled-b-e9jo5f2lab {
    0% {
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.8);
        background-color: rgba(231, 76, 60, 0.1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
        background-color: transparent;
    }
}

@keyframes border-pulse-completed-b-e9jo5f2lab {
    0% {
        box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.8);
        background-color: rgba(39, 174, 96, 0.1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
        background-color: transparent;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .order-main[b-e9jo5f2lab] {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-info[b-e9jo5f2lab] {
        width: 100%;
    }

    .order-details[b-e9jo5f2lab] {
        width: 100%;
    }
}
/* /Components/Pages/Deliveries/DeliveryManagement.razor.rz.scp.css */
[b-gmvgeg1khr] fluent-tabs::part(activeIndicator) {
    width: 85%;
}

/* Modern courier status popup styles */
.courier-status-popup[b-gmvgeg1khr] {
    position: absolute;
    top: 15px;
    left: 15px;
    width: auto;
    max-width: calc(100% - 30px); /* Ensure it can't be wider than container minus padding */
    background-color: rgba(26, 26, 37, 0.92);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap based on their own width */
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-sizing: border-box;
    overflow: hidden;
}

.courier-status-header[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: white;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto; /* Don't grow or shrink */
}

.courier-status-header[b-gmvgeg1khr]  svg {
    width: 18px;
    height: 18px;
    color: #e2e8f0;
    margin-right: 0;
}

.delivery-link[b-gmvgeg1khr] {
    font-weight: bold;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
}

    .delivery-link:hover[b-gmvgeg1khr] {
        color: var(--accent-foreground-rest);
    }

.status-indicators[b-gmvgeg1khr] {
    display: flex;
    flex-wrap: wrap; /* Allow status items to wrap within their container */
    gap: 8px;
    flex: 1 1 270px; /* Grow and shrink, with a flex-basis of 270px */
    min-width: 0; /* Allow container to be narrower than its contents */
}

.status-item[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: #4a5568;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 32px;
    box-sizing: border-box;
    flex: 0 1 auto; /* Allow status items to shrink */
    justify-content: space-between;
}

.status-item:hover[b-gmvgeg1khr] {
    background-color: #4a5568;
}

.status-dot[b-gmvgeg1khr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 6px;
}

.status-dot.online[b-gmvgeg1khr] {
    background-color: #38c172;
    box-shadow: 0 0 4px rgba(56, 193, 114, 0.6);
}

.status-dot.break[b-gmvgeg1khr] {
    background-color: #f6ad55;
    box-shadow: 0 0 4px rgba(246, 173, 85, 0.6);
}

.status-dot.offline[b-gmvgeg1khr] {
    background-color: #a0aec0;
    box-shadow: 0 0 4px rgba(160, 174, 192, 0.6);
}

.courier-count[b-gmvgeg1khr] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    display: inline-block;
}

.status-label[b-gmvgeg1khr] {
    font-size: 0.95rem;
    color: #cbd5e0;
    font-weight: 400;
    display: inline-block;
    margin-right: 8px;
}

.total-counter[b-gmvgeg1khr] {
    background-color: #4a5568;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    flex: 0 0 auto; /* Don't grow or shrink */
}

/* Map container needs position relative for absolute positioning of the popup */
.map-container[b-gmvgeg1khr] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Modern marker tooltip/info window styles */
[b-gmvgeg1khr] .gm-style .gm-style-iw-c {
    padding: 0 !important; /* Remove default padding */
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    max-width: 360px !important; /* Increased from 320px to 360px */
    overflow: visible !important;
}

[b-gmvgeg1khr] .gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
    max-height: none !important;
}

[b-gmvgeg1khr] .gm-style .gm-style-iw-t::after {
    background: linear-gradient(45deg, rgba(235, 235, 240, 1) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Fix for the close button container */
[b-gmvgeg1khr] .gm-style-iw-tc,
[b-gmvgeg1khr] .gm-style-iw-tc::after,
[b-gmvgeg1khr] .gm-style-iw-tc div {
    background-color: transparent !important;
}

/* Make sure the info window has proper z-index and pointer events */
[b-gmvgeg1khr] .gm-style-iw-c {
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: default !important;
}

/* Make sure close button container is visible but transparent */
[b-gmvgeg1khr] .gm-style-iw-chr {
    opacity: 0 !important; /* Keep it invisible but functional */
    pointer-events: auto !important; /* Ensure click events work */
    display: none !important;
}

/* Google Maps InfoWindow close button styling */
[b-gmvgeg1khr] .gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    top: 5px !important;
    right: 5px !important;
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
}

[b-gmvgeg1khr] .gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.1) !important;
}

[b-gmvgeg1khr] .gm-style .gm-style-iw-c button.gm-ui-hover-effect img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    opacity: 0.8 !important;
}

[b-gmvgeg1khr] .marker-info-window {
    padding: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
}

[b-gmvgeg1khr] .marker-info-header {
    padding: 12px 16px;
    color: white;
    font-weight: 600;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    letter-spacing: 0.3px;
    position: relative; /* For properly positioning the close button */
}

[b-gmvgeg1khr] .marker-info-content {
    padding: 16px;
    background: #ebebf0; /* Darker background color */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

[b-gmvgeg1khr] .marker-info-row {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
}

[b-gmvgeg1khr] .marker-info-row:last-child {
    margin-bottom: 0;
}

[b-gmvgeg1khr] .marker-info-label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    width: 70px;
    flex-shrink: 0;
}

[b-gmvgeg1khr] .marker-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    flex-grow: 1;
}

/* Status indicator in info window */
[b-gmvgeg1khr] .marker-info-value.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    background-color: #e0e2e8;
}

[b-gmvgeg1khr] .marker-info-value.status.online {
    background-color: rgba(56, 193, 114, 0.2);
    color: #1e7d45;
}

[b-gmvgeg1khr] .marker-info-value.status.onbreak {
    background-color: rgba(246, 173, 85, 0.2);
    color: #975a16;
}

[b-gmvgeg1khr] .marker-info-value.status.offline {
    background-color: rgba(160, 174, 192, 0.2);
    color: #4a5568;
}

/* Delivery list styling */
.delivery-item[b-gmvgeg1khr] {
    background-color: white;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.delivery-item:hover[b-gmvgeg1khr] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.delivery-header[b-gmvgeg1khr] {
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.delivery-details[b-gmvgeg1khr] {
    padding: 12px 8px 0px 8px;
    background-color: transparent;
}

/* Time duration styling */
.time-duration[b-gmvgeg1khr] {
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    width: 50px;
    flex-shrink: 0;
}

/* Progress bar styles for accordion items */
.progress-container[b-gmvgeg1khr] {
    position: relative;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px; /* Add margin between text and progress bar */
}

.progress-bar[b-gmvgeg1khr] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Status badge styling */
.status-badge[b-gmvgeg1khr] {
    padding: 4px 10px;
    color: white;
    font-size: 0.85rem;
    border-radius: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    height: 28px;
}

/* Remove the absolute positioning from the header's status badge */
.progress-container .status-badge[b-gmvgeg1khr] {
    display: none; /* Hide the badge in the header */
}

/* Style the status badge in the delivery details section */
.delivery-details .status-badge[b-gmvgeg1khr] {
    margin-right: 8px;
    background-color: var(--neutral-layer-4);
}

/* Status-specific badge colors in details section */
.delivery-details .status-badge.pending[b-gmvgeg1khr] {
    background-color: rgba(255, 165, 0, 0.15);
    color: darkorange;
}

.delivery-details .status-badge.assigned[b-gmvgeg1khr] {
    background-color: rgba(52, 152, 219, 0.15);
    color: #2980b9;
}

.delivery-details .status-badge.pickedup[b-gmvgeg1khr] {
    background-color: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.delivery-details .status-badge.delivered[b-gmvgeg1khr] {
    background-color: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.delivery-details .status-badge.cancelled[b-gmvgeg1khr] {
    background-color: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}

/* Accordion styling */
[b-gmvgeg1khr] .fluent-accordion-item {
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

[b-gmvgeg1khr] .fluent-accordion-item-header {
    padding: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

[b-gmvgeg1khr] .fluent-accordion-item-header:hover {
    background-color: transparent !important;
}

[b-gmvgeg1khr] .fluent-accordion-item-header[aria-expanded="true"] {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

[b-gmvgeg1khr] .fluent-accordion-item-content {
    padding: 0 !important;
    transition: all 0.3s ease;
}

/* Add styling for detail rows in the expanded view */
.detail-row[b-gmvgeg1khr] {
    display: flex;
    margin-bottom: 6px;
    align-items: flex-start;
}

.detail-label[b-gmvgeg1khr] {
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    width: 120px;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.detail-value[b-gmvgeg1khr] {
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    flex: 1;
    font-size: 0.9rem;
}

/* Add address styling for expanded details */
.address-container[b-gmvgeg1khr] {
    display: flex;
    align-items: flex-start;
    margin: 10px 0;
    padding: 12px;
    background-color: var(--neutral-layer-1);
    border-radius: 8px;
}

.address-icon[b-gmvgeg1khr] {
    margin-right: 12px;
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
    font-size: 18px;
}

.address-text[b-gmvgeg1khr] {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
}

/* Payment information section */
.payment-info[b-gmvgeg1khr] {
    background-color: var(--neutral-layer-1);
    padding: 12px;
    border-radius: 8px;
    margin: 10px 0;
}

.payment-row[b-gmvgeg1khr] {
    display: flex;
    align-items: stretch;
    border-radius: 6px;
    overflow: hidden;
}

.payment-column[b-gmvgeg1khr] {
    flex: 1;
    padding: 8px 12px;
    border-right: 1px solid var(--neutral-stroke-subtle);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.payment-column:last-child[b-gmvgeg1khr] {
    border-right: none;
}

.payment-method[b-gmvgeg1khr], .delivery-option[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

.total-amount[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: white;
}

/* Make sure we handle overflow properly */
.payment-method[b-gmvgeg1khr], .delivery-option[b-gmvgeg1khr], .total-amount[b-gmvgeg1khr] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 8px;
}

/* Hide deprecated payment classes */
.payment-label-container[b-gmvgeg1khr],
.payment-label[b-gmvgeg1khr],
.payment-value[b-gmvgeg1khr] {
    display: none;
}


/* Contact Information Row Styling */
.contacts-row[b-gmvgeg1khr] {
    display: flex;
    align-items: stretch;
    background-color: var(--neutral-layer-1);
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 8px;
    overflow: hidden;
}

.contact-column[b-gmvgeg1khr] {
    flex: 1;
    padding: 8px 12px;
    border-right: 1px solid var(--neutral-stroke-subtle);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.contact-column:last-child[b-gmvgeg1khr] {
    border-right: none;
}

.contact-label[b-gmvgeg1khr] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    align-self: flex-start;
    font-size: 0.75rem;
    margin-right: 4px;
    opacity: 0.9;
}

.contact-name[b-gmvgeg1khr] {
    font-weight: 600;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-phone[b-gmvgeg1khr] {
    color: var(--neutral-foreground-hint);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Info Row Styling (Address + Payment) */
.info-row[b-gmvgeg1khr] {
    display: flex;
    margin-bottom: 10px;
    gap: 10px;
}

.info-row .address-container[b-gmvgeg1khr] {
    flex: 3;
    margin: 0;
    margin-bottom: 0;
    background-color: var(--neutral-layer-1);
}

.info-row .payment-info[b-gmvgeg1khr] {
    flex: 2;
    margin: 0;
    margin-bottom: 0;
}

/* Options Row Styling */
.options-row[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--neutral-layer-1);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.8rem;
}

.option-item[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    margin-right: 24px;
    color: var(--neutral-foreground-rest);
}

.option-item:last-child[b-gmvgeg1khr] {
    margin-right: 0;
}

.option-item fluent-icon[b-gmvgeg1khr] {
    margin-right: 6px;
    color: var(--neutral-foreground-hint);
}

/* Standardize icons */
.detail-icon[b-gmvgeg1khr] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-foreground-rest);
}

/* Status badge improvements */
.order-status[b-gmvgeg1khr] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 600;
}

.order-status.pending[b-gmvgeg1khr] {
    background-color: rgba(255, 165, 0, 0.15);
    color: darkorange;
}

.order-status.assigned[b-gmvgeg1khr] {
    background-color: rgba(52, 152, 219, 0.15);
    color: #2980b9;
}

.order-status.pickedup[b-gmvgeg1khr] {
    background-color: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.order-status.delivered[b-gmvgeg1khr] {
    background-color: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.order-status.cancelled[b-gmvgeg1khr] {
    background-color: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}

/* Status colors for text elements */
.status-text-pending[b-gmvgeg1khr] {
    color: orange;
    font-weight: 600;
}

.status-text-assigned[b-gmvgeg1khr] {
    color: #3498db;
    font-weight: 600;
}

.status-text-pickedup[b-gmvgeg1khr] {
    color: #2ecc71;
    font-weight: 600;
}

.status-text-delivered[b-gmvgeg1khr] {
    color: #2ecc71;
    font-weight: 600;
}

.status-text-cancelled[b-gmvgeg1khr] {
    color: #e74c3c;
    font-weight: 600;
}

.category-title[b-gmvgeg1khr] {
    margin: 0 !important;
    font-weight: 600;
}

.size24-icon[b-gmvgeg1khr] {
    font-size: 1.5rem;
}

/* Status-specific styling */
.status-pending[b-gmvgeg1khr] {
    border-left: 4px solid orange;
}

.status-assigned[b-gmvgeg1khr] {
    border-left: 4px solid #3498db;
}

.status-pickedup[b-gmvgeg1khr] {
    border-left: 4px solid #2ecc71;
}

.status-delivered[b-gmvgeg1khr] {
    border-left: 4px solid #2ecc71;
}

.status-cancelled[b-gmvgeg1khr] {
    border-left: 4px solid #e74c3c;
}

/* Empty state styling */
.empty-state[b-gmvgeg1khr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-layer-1);
    border-radius: 8px;
    margin: 16px 0;
}

.empty-state fluent-icon[b-gmvgeg1khr] {
    margin-bottom: 16px;
    color: var(--neutral-foreground-hint);
}

/* Custom card replacement for FluentCard */
.custom-card[b-gmvgeg1khr] {
    display: flex;
    flex-direction: column;
    background-color: var(--neutral-layer-card-rest);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--neutral-stroke-rest);
    overflow-y: auto;
}

/* Card header and body styling, matching MenuCategories.razor */
.card-header[b-gmvgeg1khr] {
    background: var(--neutral-layer-1);
    padding: 16px 24px;
    border-top-left-radius: calc(var(--layer-corner-radius) * 1px);
    border-top-right-radius: calc(var(--layer-corner-radius) * 1px);
    display: flex;
    align-items: center;
}

.card-body[b-gmvgeg1khr] {
    padding: 8px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
[b-gmvgeg1khr] .gm-style .gm-style-iw-c button.gm-ui-hover-effect img {
    width: 14px !important;
    height: 14px !important;
    margin: 5px !important;
}

/* Animation for delivery items */
@keyframes highlight-created-b-gmvgeg1khr {
    0% {
        background-color: rgba(46, 204, 113, 0.3);
        transform: scale(1.02);
        box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes highlight-updated-b-gmvgeg1khr {
    0% {
        background-color: rgba(52, 152, 219, 0.3);
        transform: scale(1.02);
        box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes highlight-cancelled-b-gmvgeg1khr {
    0% {
        background-color: rgba(231, 76, 60, 0.3);
        transform: scale(1.02);
        box-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes highlight-completed-b-gmvgeg1khr {
    0% {
        background-color: rgba(39, 174, 96, 0.3);
        transform: scale(1.02);
        box-shadow: 0 0 15px rgba(39, 174, 96, 0.5);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes fade-out-b-gmvgeg1khr {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

.delivery-item-created[b-gmvgeg1khr] {
    animation: highlight-created-b-gmvgeg1khr 3s ease-out;
}

.delivery-item-updated[b-gmvgeg1khr] {
    animation: highlight-updated-b-gmvgeg1khr 3s ease-out;
}

.delivery-item-cancelled[b-gmvgeg1khr] {
    animation: highlight-cancelled-b-gmvgeg1khr 3s ease-out;
}

.delivery-item-completed[b-gmvgeg1khr] {
    animation: highlight-completed-b-gmvgeg1khr 3s ease-out;
}

.delivery-item-removed[b-gmvgeg1khr] {
    animation: fade-out-b-gmvgeg1khr 1s ease-out forwards;
}

/* Animated badge for new events */
.event-badge[b-gmvgeg1khr] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    margin-left: 5px;
    animation: badge-pulse-b-gmvgeg1khr 2s infinite;
}

@keyframes badge-pulse-b-gmvgeg1khr {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.event-badge-created[b-gmvgeg1khr] {
    background-color: #2ecc71;
}

.event-badge-updated[b-gmvgeg1khr] {
    background-color: #3498db;
}

.event-badge-cancelled[b-gmvgeg1khr] {
    background-color: #e74c3c;
}

.event-badge-completed[b-gmvgeg1khr] {
    background-color: #27ae60;
}

/* Highlight animation for accordion item */
.accordion-item-highlight[b-gmvgeg1khr] {
    position: relative;
    z-index: 10;
}

.accordion-item-highlight[b-gmvgeg1khr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

.accordion-item-created[b-gmvgeg1khr]::before {
    animation: border-pulse-created-b-gmvgeg1khr 3s ease-out;
}

.accordion-item-updated[b-gmvgeg1khr]::before {
    animation: border-pulse-updated-b-gmvgeg1khr 3s ease-out;
}

.accordion-item-cancelled[b-gmvgeg1khr]::before {
    animation: border-pulse-cancelled-b-gmvgeg1khr 3s ease-out;
}

.accordion-item-completed[b-gmvgeg1khr]::before {
    animation: border-pulse-completed-b-gmvgeg1khr 3s ease-out;
}

@keyframes border-pulse-created-b-gmvgeg1khr {
    0% {
        box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

@keyframes border-pulse-updated-b-gmvgeg1khr {
    0% {
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}

@keyframes border-pulse-cancelled-b-gmvgeg1khr {
    0% {
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

@keyframes border-pulse-completed-b-gmvgeg1khr {
    0% {
        box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
    }
}

.delivery-details[b-gmvgeg1khr] {
    padding: 16px;
    background-color: var(--neutral-layer-1);
    border-radius: 8px;
}

.detail-header[b-gmvgeg1khr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.detail-id[b-gmvgeg1khr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-date[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.detail-actions[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-grid[b-gmvgeg1khr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.contact-card[b-gmvgeg1khr] {
    background-color: var(--neutral-layer-2);
    border-radius: 6px;
    padding: 12px;
}

.contact-title[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.contact-info[b-gmvgeg1khr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-name[b-gmvgeg1khr] {
    font-weight: 600;
}

.contact-phone[b-gmvgeg1khr] {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.details-grid[b-gmvgeg1khr] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}

.detail-card[b-gmvgeg1khr] {
    background-color: var(--neutral-layer-2);
    border-radius: 6px;
    padding: 12px;
}

.detail-title[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.detail-content[b-gmvgeg1khr] {
    font-size: 0.875rem;
}

.address .detail-content[b-gmvgeg1khr] {
    line-height: 1.4;
}

.distance-info[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.payment-row[b-gmvgeg1khr], .option-row[b-gmvgeg1khr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.amount[b-gmvgeg1khr] {
    font-weight: 600;
    color: var(--accent-foreground-rest);
}

.delivery-link[b-gmvgeg1khr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

    .delivery-link:hover[b-gmvgeg1khr] {
        text-decoration: underline;
    }

.status-badge[b-gmvgeg1khr] {
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
}

.courier-note[b-gmvgeg1khr] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.note-title[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    margin-bottom: 4px;
}

.note-content[b-gmvgeg1khr] {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-layer-3);
    padding: 8px;
    border-radius: 4px;
    margin-left: 22px;
}

/* FluentCombobox dropdown height limit for firm selection */
[b-gmvgeg1khr] fluent-combobox::part(listbox) {
    max-height: 300px !important;
    overflow-y: auto !important;
    height: auto !important;
}
/* /Components/Pages/Deliveries/DeliverySimulation.razor.rz.scp.css */
/* Delivery Route Simulation — design-system reskin (token-driven, no FluentUI chrome) */

.sim[b-szstg6dfjq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
}

/* ---------- Header ---------- */
.sim-head[b-szstg6dfjq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sim-eyebrow[b-szstg6dfjq] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 700;
    letter-spacing: var(--tracking-caps, 0.08em);
    text-transform: uppercase;
    color: var(--accent);
}

.sim-title[b-szstg6dfjq] {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin: 0;
    line-height: 1.15;
}

.sim-subtitle[b-szstg6dfjq] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
    margin: 0;
}

/* ---------- Split layout ---------- */
.sim-split[b-szstg6dfjq] {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}

.sim-pane--left[b-szstg6dfjq] {
    flex: 0 0 25%;
    min-width: 300px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sim-pane--right[b-szstg6dfjq] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 1024px) {
    .sim-split[b-szstg6dfjq] { flex-direction: column; }

    .sim-pane--left[b-szstg6dfjq] {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }

    .sim-pane--right[b-szstg6dfjq] { width: 100%; }
}

/* ---------- Card / panel ---------- */
.sim-card[b-szstg6dfjq] {
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
}

.sim-panel[b-szstg6dfjq] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sim-section[b-szstg6dfjq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.sim-section:last-child[b-szstg6dfjq] { border-bottom: none; }

.sim-section-title[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--small-size, 0.875rem);
    font-weight: 700;
    color: var(--fg-1);
}

.sim-section-title[b-szstg6dfjq]  svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
    fill: currentColor;
}

.sim-loc[b-szstg6dfjq] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--fg-2);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--xs-size, 0.75rem);
    text-align: center;
}

.sim-hint[b-szstg6dfjq] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    line-height: 1.4;
}

/* ---------- Delivery-type radios ---------- */
.sim-radios[b-szstg6dfjq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.sim-radio[b-szstg6dfjq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-2);
}

.sim-radio input[b-szstg6dfjq] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.sim-radio input:focus-visible + .ds-radio[b-szstg6dfjq] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Count badge ---------- */
.sim-badge[b-szstg6dfjq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--fg-on-brand, #fff);
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 700;
}

/* ---------- Delivery list ---------- */
.sim-delivery-list[b-szstg6dfjq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 300px;
    overflow-y: auto;
    padding-right: 2px;
}

.sim-delivery[b-szstg6dfjq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.sim-delivery__head[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.sim-delivery__id[b-szstg6dfjq] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 700;
    color: var(--fg-1);
}

.sim-delivery__vol[b-szstg6dfjq] {
    font-weight: 400;
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
}

.sim-delivery__body[b-szstg6dfjq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sim-delivery__row[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-2);
}

.sim-delivery__row[b-szstg6dfjq]  svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--fg-hint);
    fill: currentColor;
}

.sim-delivery__loc[b-szstg6dfjq] {
    overflow: hidden;
    font-family: var(--font-mono, ui-monospace, monospace);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- Action buttons ---------- */
.sim-actions[b-szstg6dfjq] {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.sim-run[b-szstg6dfjq] { display: block; }

/* White-on-brand loader "a" inside the primary run button */
.sim-actions[b-szstg6dfjq]  .app-spinner {
    --al-ink: var(--fg-on-brand, #fff);
}

/* ---------- Map ---------- */
.sim-map-wrap[b-szstg6dfjq] { position: relative; }

#map[b-szstg6dfjq] {
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ---------- Instruction overlay ---------- */
.sim-instructions[b-szstg6dfjq] {
    position: absolute;
    top: var(--space-4);
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
    pointer-events: none;
}

.sim-instruction[b-szstg6dfjq] {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--layer-1);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
}

.sim-instruction__body[b-szstg6dfjq] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.sim-instruction__icon[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--fg-on-brand, #fff);
}

.sim-instruction__icon[b-szstg6dfjq]  svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.sim-instruction__icon--courier[b-szstg6dfjq] { background: var(--accent); }
.sim-instruction__icon--delivery[b-szstg6dfjq] { background: var(--success-600); }

.sim-instruction__text[b-szstg6dfjq] {
    flex: 1;
    min-width: 0;
}

.sim-instruction__title[b-szstg6dfjq] {
    margin: 0 0 2px 0;
    font-family: var(--font-display);
    font-size: var(--small-size, 0.875rem);
    font-weight: 700;
    color: var(--fg-1);
}

.sim-instruction__text p[b-szstg6dfjq] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-3);
    line-height: 1.4;
}

.sim-instruction__current[b-szstg6dfjq] {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
}

.sim-instruction__current strong[b-szstg6dfjq] { color: var(--fg-2); }

/* ---------- Route panel ---------- */
.sim-route[b-szstg6dfjq] {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    width: 280px;
    max-height: 680px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--layer-1);
    box-shadow: var(--shadow-md);
    z-index: 5;
}

.sim-route__summary[b-szstg6dfjq] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--layer-1);
}

.sim-route__title[b-szstg6dfjq] {
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg-1);
}

.sim-route__stats[b-szstg6dfjq] {
    display: flex;
    text-align: center;
}

.sim-route__stat[b-szstg6dfjq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--space-1);
}

.sim-route__stat--divided[b-szstg6dfjq] {
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
}

.sim-route__stat small[b-szstg6dfjq] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
}

.sim-route__stat strong[b-szstg6dfjq] {
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 700;
    color: var(--fg-1);
}

.sim-route__loading[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
}

.sim-route__steps[b-szstg6dfjq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
}

/* ---------- Route step card ---------- */
.sim-step[b-szstg6dfjq] {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--layer-1);
    cursor: pointer;
    transition: background-color 250ms ease;
}

.sim-step.is-highlighted[b-szstg6dfjq] { background: var(--bg-subtle); }
.sim-step.is-hovered[b-szstg6dfjq] { background: var(--bg-subtle); }

.sim-step__head[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sim-step__icon[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--fg-on-brand, #fff);
}

.sim-step__icon[b-szstg6dfjq]  svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.sim-step__icon.is-pickup[b-szstg6dfjq] { background: var(--success-600); }
.sim-step__icon.is-delivery[b-szstg6dfjq] { background: var(--danger-500); }

.sim-step__info[b-szstg6dfjq] {
    flex: 1;
    min-width: 0;
}

.sim-step__titlerow[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.sim-step__title[b-szstg6dfjq] {
    overflow: hidden;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 700;
    color: var(--fg-1);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sim-step__leg[b-szstg6dfjq] {
    width: 24px;
    height: 3px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.sim-step__time[b-szstg6dfjq] {
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
}

.sim-step__metrics[b-szstg6dfjq] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding-left: calc(24px + var(--space-2));
}

.sim-step__metric[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
}

.sim-step__metric[b-szstg6dfjq]  svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

.sim-step__divider[b-szstg6dfjq] {
    height: 1px;
    margin: var(--space-1) 0 0 calc(24px + var(--space-2));
    background: var(--border-subtle);
}
/* /Components/Pages/Deliveries/Dialogs/AssignCourierModal.razor.rz.scp.css */
.acm[b-p1sygicnm4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- Loading / empty states ---- */
.acm__loading[b-p1sygicnm4],
.acm__empty[b-p1sygicnm4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 16px;
    color: var(--ds-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.acm__empty svg[b-p1sygicnm4] { color: var(--ds-text-subtle); }
.acm__empty p[b-p1sygicnm4] { margin: 0; max-width: 320px; line-height: 1.5; }

/* ---- Currently assigned courier (shown above the pick list) ---- */
.acm__current[b-p1sygicnm4] {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    color: var(--ds-text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* ---- Unassign confirmation step ---- */
.acm__warn[b-p1sygicnm4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid #fecaca;
    border-radius: var(--ds-radius-sm);
    background: #fef2f2;
    color: #b91c1c;
}

.acm__warn svg[b-p1sygicnm4] { flex-shrink: 0; margin-top: 1px; }
.acm__warn p[b-p1sygicnm4] { margin: 0; font-size: 0.875rem; line-height: 1.55; }

/* ---- Search ---- */
.acm__search[b-p1sygicnm4] { margin-bottom: 2px; }

/* ---- Courier list ---- */
.acm__list[b-p1sygicnm4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    /* gutter so focus rings / hover shadow aren't clipped by the scroll edge */
    margin: 0 -4px;
    padding: 2px 4px;
}

.acm__noresult[b-p1sygicnm4] {
    margin: 8px 4px;
}

.acm__card[b-p1sygicnm4] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    cursor: pointer;
    text-align: left;
    color: var(--ds-text);
    font-family: var(--ds-font-ui);
    transition: border-color var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease);
}

.acm__card:hover[b-p1sygicnm4] {
    border-color: var(--ds-border-strong);
    background: var(--ds-surface-alt);
}

.acm__card.is-selected[b-p1sygicnm4] {
    border-color: var(--brand-600);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-600);
}

.acm__status[b-p1sygicnm4] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.04);
}

.acm__status--online[b-p1sygicnm4]  { background: #16a34a; }
.acm__status--break[b-p1sygicnm4]   { background: #f59e0b; }
.acm__status--offline[b-p1sygicnm4] { background: #94a3b8; }

.acm__card-info[b-p1sygicnm4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.acm__card-name[b-p1sygicnm4] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acm__card-meta[b-p1sygicnm4] {
    font-size: 0.8rem;
    color: var(--ds-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acm__check[b-p1sygicnm4] {
    color: var(--brand-600);
    flex-shrink: 0;
}
/* /Components/Pages/Deliveries/Dialogs/CreateLogisticsDeliveryModal.razor.rz.scp.css */
.cld-form[b-prwfap7h9w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cld-row[b-prwfap7h9w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.cld-row--top[b-prwfap7h9w] {
    align-items: start;
}

@media (max-width: 560px) {
    .cld-row[b-prwfap7h9w] { grid-template-columns: 1fr; }
}

.cld-req[b-prwfap7h9w] { color: var(--danger-600); margin-left: 2px; }

.cld-addr-row[b-prwfap7h9w] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

.cld-addr-row .ds-textarea[b-prwfap7h9w] { flex: 1; }

.cld-prev-addr[b-prwfap7h9w] { margin-bottom: var(--space-2); }

/* Notes / info bars */
.cld-note[b-prwfap7h9w] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
}

.cld-note[b-prwfap7h9w]  svg { width: 16px; height: 16px; flex-shrink: 0; }

.cld-note--info[b-prwfap7h9w] {
    background: var(--accent-soft);
    color: var(--accent);
}

.cld-note--warn[b-prwfap7h9w] {
    background: color-mix(in srgb, var(--warning-600) 12%, transparent);
    color: var(--warning-600);
}

/* ETA card */
.cld-eta[b-prwfap7h9w] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
}

.cld-eta__head[b-prwfap7h9w] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    color: var(--fg-1);
}

.cld-eta__head[b-prwfap7h9w]  svg { width: 16px; height: 16px; }

.cld-eta__stats[b-prwfap7h9w] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-2);
}

.cld-price[b-prwfap7h9w] { margin-top: var(--space-2); }

/* Delivery-option checkboxes */
.cld-check[b-prwfap7h9w] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-2);
    cursor: pointer;
    margin-top: 2px;
}

.cld-check input[b-prwfap7h9w] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.cld-sms[b-prwfap7h9w] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-2);
}

.cld-link[b-prwfap7h9w] {
    display: inline-block;
    margin-top: 4px;
    font-family: var(--font-ui);
    font-size: var(--xs-size, 0.75rem);
    color: var(--accent);
    text-decoration: none;
}

.cld-link:hover[b-prwfap7h9w] { text-decoration: underline; }

/* Loading state */
.cld-state[b-prwfap7h9w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    color: var(--fg-hint);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
}


/* ---------- Two-column body (customer/address | payment/options) ---------- */
.cld-cols[b-prwfap7h9w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
}

.cld-col[b-prwfap7h9w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

@media (max-width: 780px) {
    .cld-cols[b-prwfap7h9w] { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---------- Payment method: square selectable tiles ---------- */
.cld-pay-grid[b-prwfap7h9w] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (max-width: 520px) {
    .cld-pay-grid[b-prwfap7h9w] { grid-template-columns: repeat(2, 1fr); }
}

.cld-pay-tile[b-prwfap7h9w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 78px;
    padding: 10px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--layer-1);
    color: var(--fg-1);
    cursor: pointer;
    text-align: center;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.cld-pay-tile:hover[b-prwfap7h9w] { border-color: var(--accent); transform: translateY(-1px); }
.cld-pay-tile:focus-visible[b-prwfap7h9w] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.cld-pay-tile.is-selected[b-prwfap7h9w] {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: var(--shadow-sm);
}

.cld-pay-tile__icon[b-prwfap7h9w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--bg-subtle);
    color: var(--fg-hint);
    flex-shrink: 0;
    transition: background 150ms ease, color 150ms ease;
}

.cld-pay-tile.is-selected .cld-pay-tile__icon[b-prwfap7h9w] { background: var(--accent); color: var(--fg-on-accent, #fff); }

.cld-pay-tile__name[b-prwfap7h9w] {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fg-1);
    word-break: break-word;
}

.cld-pay-tile.is-selected .cld-pay-tile__name[b-prwfap7h9w] { color: var(--accent); }

.cld-pay-empty[b-prwfap7h9w] {
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
}

/* ---------- Delivery options: toggle chips ---------- */
.cld-chips[b-prwfap7h9w] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cld-chip[b-prwfap7h9w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--layer-1);
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.cld-chip:hover[b-prwfap7h9w] { border-color: var(--accent); color: var(--accent); }
.cld-chip:focus-visible[b-prwfap7h9w] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.cld-chip.is-on[b-prwfap7h9w] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.cld-chip svg[b-prwfap7h9w] { flex-shrink: 0; }
/* /Components/Pages/Deliveries/Dialogs/EditDeliveryModal.razor.rz.scp.css */
.edl-form[b-hux6psr1d9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.edl-row[b-hux6psr1d9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

.edl-row--3[b-hux6psr1d9] { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 560px) {
    .edl-row[b-hux6psr1d9], .edl-row--3[b-hux6psr1d9] { grid-template-columns: 1fr; }
}

.edl-req[b-hux6psr1d9] { color: var(--danger-600); margin-left: 2px; }

.edl-prev[b-hux6psr1d9] { margin-bottom: var(--space-2); }

.edl-addr-row[b-hux6psr1d9] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

.edl-addr-field[b-hux6psr1d9] {
    flex: 1;
    border-color: var(--accent) !important;
    background: var(--accent-soft);
}

.edl-addr-actions[b-hux6psr1d9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
}

.edl-price-field[b-hux6psr1d9] { margin-top: var(--space-2); }

/* Geocode status note */
.edl-note[b-hux6psr1d9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
}

.edl-note[b-hux6psr1d9]  svg { width: 16px; height: 16px; flex-shrink: 0; }

.edl-note--warn[b-hux6psr1d9] {
    background: color-mix(in srgb, var(--warning-600) 12%, transparent);
    color: var(--warning-600);
}

.edl-note--ok[b-hux6psr1d9] {
    background: var(--success-50);
    color: var(--success-600);
}

.edl-options[b-hux6psr1d9] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.edl-check[b-hux6psr1d9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-3);
}

.edl-check input[b-hux6psr1d9] { width: 16px; height: 16px; accent-color: var(--accent); }

/* /Components/Pages/DistanceDisputes/Dialogs/CreateDistanceDisputeDialog.razor.rz.scp.css */
/* CreateDistanceDisputeDialog — design-token styling. Rendered inside the FluentUI
   DialogService chrome (header + dismiss come from the dialog host); this file only
   styles the body + footer content. */

.ddc-body[b-sz24ddpl5p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-4);
}

.ddc-order[b-sz24ddpl5p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
}

.ddc-order[b-sz24ddpl5p]  svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

.ddc-order-details[b-sz24ddpl5p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ddc-order-number[b-sz24ddpl5p] {
    font-weight: 600;
    font-size: var(--body-size);
    color: var(--fg-1);
}

.ddc-order-distance[b-sz24ddpl5p] {
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
}

.ddc-info[b-sz24ddpl5p],
.ddc-warning[b-sz24ddpl5p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-2);
}

.ddc-info[b-sz24ddpl5p] {
    background: var(--bg-subtle);
}

.ddc-info[b-sz24ddpl5p]  svg {
    width: 16px;
    height: 16px;
    color: var(--warning-600);
    flex-shrink: 0;
}

.ddc-warning[b-sz24ddpl5p] {
    background: var(--bg-muted);
    border: 1px solid var(--border);
}

.ddc-warning[b-sz24ddpl5p]  svg {
    width: 16px;
    height: 16px;
    color: var(--fg-hint);
    flex-shrink: 0;
}

.ddc-footer[b-sz24ddpl5p] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}
/* /Components/Pages/DistanceDisputes/Dialogs/ReviewDistanceDisputeDialog.razor.rz.scp.css */
/* ReviewDistanceDisputeDialog — design-token styling for the AppModal body. */

.rd-body[b-aj9lisn5tr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rd-cards[b-aj9lisn5tr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 640px) {
    .rd-cards[b-aj9lisn5tr] {
        grid-template-columns: 1fr;
    }
}

.rd-card[b-aj9lisn5tr] {
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.rd-card-title[b-aj9lisn5tr] {
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    color: var(--fg-1);
    margin: 0 0 var(--space-2);
}

.rd-row[b-aj9lisn5tr] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--small-size, 0.875rem);
}

.rd-label[b-aj9lisn5tr] {
    color: var(--fg-hint);
    min-width: 110px;
    flex-shrink: 0;
}

.rd-label[b-aj9lisn5tr]::after {
    content: ":";
}

.rd-value[b-aj9lisn5tr] {
    font-weight: 500;
    color: var(--fg-2);
}

.rd-map-section[b-aj9lisn5tr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rd-map-box[b-aj9lisn5tr] {
    height: 400px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

.rd-selected[b-aj9lisn5tr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--success-50);
    border-radius: var(--radius-sm);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-2);
}

.rd-selected[b-aj9lisn5tr]  svg {
    width: 16px;
    height: 16px;
    color: var(--success-600);
    flex-shrink: 0;
}

.rd-decision[b-aj9lisn5tr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rd-check[b-aj9lisn5tr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-2);
}

.rd-check input[type="checkbox"][b-aj9lisn5tr] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
/* /Components/Pages/DistanceDisputes/Dialogs/ViewDistanceDisputeDialog.razor.rz.scp.css */
/* ViewDistanceDisputeDialog — design-token styling for the AppModal body. */

.dv-body[b-noyxbgtpjq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dv-status-row[b-noyxbgtpjq] {
    display: flex;
}

.dv-cards[b-noyxbgtpjq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 640px) {
    .dv-cards[b-noyxbgtpjq] {
        grid-template-columns: 1fr;
    }
}

.dv-card[b-noyxbgtpjq] {
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.dv-card--full[b-noyxbgtpjq] {
    grid-column: 1 / -1;
}

.dv-card--review[b-noyxbgtpjq] {
    background: var(--bg-subtle);
    border-left: 3px solid var(--accent);
}

.dv-card-title[b-noyxbgtpjq] {
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    color: var(--fg-1);
    margin: 0 0 var(--space-2);
}

.dv-review-grid[b-noyxbgtpjq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-6);
}

.dv-row[b-noyxbgtpjq] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--small-size, 0.875rem);
}

.dv-row--spaced[b-noyxbgtpjq] {
    margin-top: var(--space-2);
}

.dv-label[b-noyxbgtpjq] {
    color: var(--fg-hint);
    min-width: 120px;
    flex-shrink: 0;
}

.dv-label[b-noyxbgtpjq]::after {
    content: ":";
}

.dv-value[b-noyxbgtpjq] {
    font-weight: 500;
    color: var(--fg-2);
}

.dv-note[b-noyxbgtpjq] {
    background: var(--layer-2);
    padding: 4px var(--space-2);
    border-radius: var(--radius-xs);
    font-style: italic;
}

.dv-token[b-noyxbgtpjq] {
    font-weight: 600;
    white-space: nowrap;
}

.dv-token.is-positive[b-noyxbgtpjq] {
    color: var(--success-600);
}

.dv-token.is-negative[b-noyxbgtpjq] {
    color: var(--danger-600);
}

.dv-map-section[b-noyxbgtpjq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dv-map-box[b-noyxbgtpjq] {
    height: 350px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

.dv-legend[b-noyxbgtpjq] {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-2);
    flex-wrap: wrap;
}

.dv-legend-item[b-noyxbgtpjq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dv-legend-marker[b-noyxbgtpjq] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-on-brand);
    font-weight: 700;
    font-size: 10px;
    flex-shrink: 0;
}

.dv-legend-marker--r[b-noyxbgtpjq] {
    background: var(--accent);
}

.dv-legend-marker--d[b-noyxbgtpjq] {
    background: var(--danger-500);
}

.dv-legend-marker--x[b-noyxbgtpjq] {
    background: var(--success-500);
}

.dv-legend-line[b-noyxbgtpjq] {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    flex-shrink: 0;
}
/* /Components/Pages/DistanceDisputes/DistanceDisputes.razor.rz.scp.css */
/* Distance Disputes — page-scoped styles (design tokens only). */

.dd-filters[b-1zvives3c4] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

.dd-filter[b-1zvives3c4] {
    min-width: 190px;
}

/* Dispute-No cell: document glyph + bold id. */
.dd-id-cell[b-1zvives3c4] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.dd-id-cell[b-1zvives3c4]  svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

/* Order link cell. */
.dd-order-link[b-1zvives3c4] {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.dd-order-link:hover[b-1zvives3c4] {
    text-decoration: underline;
}

/* Dispute-type chip (neutral tinted pill + directional arrow). */
.dd-type-chip[b-1zvives3c4] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    color: var(--fg-2);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
}

.dd-type-chip[b-1zvives3c4]  svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Token adjustment cell. */
.dd-token[b-1zvives3c4] {
    font-weight: 600;
    white-space: nowrap;
}

.dd-token.is-positive[b-1zvives3c4] {
    color: var(--success-600);
}

.dd-token.is-negative[b-1zvives3c4] {
    color: var(--danger-600);
}

/* Row action buttons. */
.dd-actions[b-1zvives3c4] {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}
/* /Components/Pages/EmailCampaigns.razor.rz.scp.css */
.ec-page[b-2ssbyvx21d] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 1500px;
    margin: 0 auto;
}

.ec-header[b-2ssbyvx21d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ec-title[b-2ssbyvx21d] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ds-text);
}

.ec-subtitle[b-2ssbyvx21d] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    max-width: 60ch;
}

/* ===== Layout ===== */
.ec-grid[b-2ssbyvx21d] {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(0, 2fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .ec-grid[b-2ssbyvx21d] { grid-template-columns: 1fr; }
}

.ec-card[b-2ssbyvx21d] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
}

.ec-config[b-2ssbyvx21d] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

/* ===== Sender ===== */
.ec-sender[b-2ssbyvx21d] {
    display: block;
    padding: 8px 12px;
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-sm);
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    word-break: break-all;
}

.ec-mono[b-2ssbyvx21d] { font-family: ui-monospace, "SF Mono", monospace; }

/* ===== Inline status text ===== */
.ec-status[b-2ssbyvx21d] {
    font-size: 0.6875rem;
    font-weight: 600;
}

.ec-status--ok[b-2ssbyvx21d] { color: var(--ds-success); }
.ec-status--error[b-2ssbyvx21d] { color: var(--ds-danger); }
.ec-warn-text[b-2ssbyvx21d] { color: var(--ds-warning); font-weight: 600; }

/* ===== Segmented recipient-source toggle ===== */
.ec-seg[b-2ssbyvx21d] {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-pill);
    width: 100%;
}

.ec-seg-btn[b-2ssbyvx21d] {
    flex: 1;
    padding: 7px 12px;
    border: none;
    border-radius: var(--ds-radius-pill);
    background: transparent;
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}

.ec-seg-btn:hover[b-2ssbyvx21d] { color: var(--ds-text); }

.ec-seg-btn.is-active[b-2ssbyvx21d] {
    background: var(--ds-surface);
    color: var(--brand-700);
    box-shadow: var(--ds-shadow-1);
}

.ec-seg-btn:focus-visible[b-2ssbyvx21d] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* ===== Firm source row ===== */
.ec-firm-row[b-2ssbyvx21d] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== Confirm box ===== */
.ec-confirm[b-2ssbyvx21d] {
    padding: 14px;
    background: var(--warning-50, #fffbeb);
    border: 1px solid var(--warning-100, #fef3c7);
    border-radius: var(--ds-radius-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ec-confirm-text[b-2ssbyvx21d] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--warning-600, #d97706);
}

.ec-confirm-actions[b-2ssbyvx21d] {
    display: flex;
    gap: 8px;
}

/* ===== Queued summary ===== */
.ec-queued[b-2ssbyvx21d] {
    padding: 14px;
    background: color-mix(in srgb, var(--ds-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ds-success) 30%, transparent);
    border-radius: var(--ds-radius-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ec-queued-title[b-2ssbyvx21d] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ds-success);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ec-queued-body[b-2ssbyvx21d] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ds-text);
}

.ec-queued-note[b-2ssbyvx21d] {
    margin: 0;
    font-size: 0.6875rem;
    color: var(--ds-text-muted);
    line-height: 1.5;
}

/* ===== Footer note ===== */
.ec-note[b-2ssbyvx21d] {
    padding: 12px;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    font-size: 0.6875rem;
    color: var(--ds-text-muted);
    line-height: 1.6;
}

/* ===== Preview ===== */
.ec-preview[b-2ssbyvx21d] {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
}

.ec-preview-bar[b-2ssbyvx21d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ec-preview-title[b-2ssbyvx21d] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    word-break: break-all;
}

.ec-preview-toggles[b-2ssbyvx21d] {
    display: inline-flex;
    gap: 6px;
}

.ec-toggle[b-2ssbyvx21d] {
    padding: 6px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease);
}

.ec-toggle:hover[b-2ssbyvx21d] { border-color: var(--ds-border-strong); color: var(--ds-text); }

.ec-toggle.is-active[b-2ssbyvx21d] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.ec-toggle:focus-visible[b-2ssbyvx21d] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.ec-preview-stage[b-2ssbyvx21d] {
    background: var(--ds-surface-sunken);
    padding: 16px;
    border-radius: var(--ds-radius-md);
    min-height: 700px;
    display: flex;
    justify-content: center;
}

.ec-preview-frame[b-2ssbyvx21d] {
    height: 800px;
    max-width: 100%;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: #fff;
    transition: width 0.2s var(--ds-ease);
}
/* /Components/Pages/Employees/Dialogs/ChangeEmployeeStatusModal.razor.rz.scp.css */
.ces-body[b-83lco8atxp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Employee chip */
.ces-emp[b-83lco8atxp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ds-surface-sunken, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
}

.ces-emp-avatar[b-83lco8atxp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-50, #dbeafe);
    color: var(--brand-700, #1d4ed8);
}

.ces-emp-avatar svg[b-83lco8atxp] { width: 22px; height: 22px; }

.ces-emp-info[b-83lco8atxp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ces-emp-name[b-83lco8atxp] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ds-text, #0f172a);
}

.ces-emp-status[b-83lco8atxp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--ds-text-muted, #64748b);
}

.ces-dot[b-83lco8atxp] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ces-dot--online[b-83lco8atxp]  { background: #16a34a; }
.ces-dot--break[b-83lco8atxp]   { background: #f59e0b; }
.ces-dot--offline[b-83lco8atxp] { background: #94a3b8; }

.ces-opt[b-83lco8atxp] {
    font-weight: 400;
    color: var(--ds-text-muted, #64748b);
}

/* Outcome hint */
.ces-info[b-83lco8atxp] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-radius: var(--ds-radius-sm, 10px);
    font-size: 0.825rem;
    line-height: 1.45;
    border: 1px solid transparent;
}

.ces-info--online[b-83lco8atxp]  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ces-info--break[b-83lco8atxp]   { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.ces-info--offline[b-83lco8atxp] { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
/* /Components/Pages/Employees/Dialogs/CreateEmployeeModal.razor.rz.scp.css */
.cem-form[b-2lq6l5fdjt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cem-section[b-2lq6l5fdjt] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted);
}

.cem-section:not(:first-child)[b-2lq6l5fdjt] {
    padding-top: 14px;
    border-top: 1px solid var(--ds-border);
}

.cem-row[b-2lq6l5fdjt] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cem-row > .ds-field[b-2lq6l5fdjt] {
    flex: 1 1 200px;
    min-width: 0;
}

.cem-row > .cem-narrow[b-2lq6l5fdjt] {
    flex: 1 1 140px;
}

.cem-input--invalid[b-2lq6l5fdjt] {
    border-color: var(--ds-danger, #dc2626) !important;
}

.cem-required[b-2lq6l5fdjt] {
    margin-left: 2px;
    color: var(--ds-danger, #dc2626);
    font-weight: 600;
}

.cem-error[b-2lq6l5fdjt] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--ds-danger, #dc2626);
}

.cem-state[b-2lq6l5fdjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 16px;
    color: var(--ds-text-muted);
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .cem-row > .ds-field[b-2lq6l5fdjt],
    .cem-row > .cem-narrow[b-2lq6l5fdjt] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Employees/Dialogs/EmployeeQrModal.razor.rz.scp.css */
/* =====================================================================
   EmployeeQrModal — body styles only. Chrome from AppModal.
   ===================================================================== */

.eqr[b-tfms8gh0ex] {
    /* Default: 2-column row layout (form left ~32%, result right ~68%).
       The modal MaxWidth (880px) already guarantees enough horizontal room
       on any non-mobile viewport, so we can drop the desktop-only @media
       guard — only collapse back to a stack on actually-narrow viewports. */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--ds-space-5);
    font-family: var(--ds-font-ui);
    color: var(--ds-text);
}

/* Narrow viewports (phones) — stack so neither column is squished. */
@media (max-width: 640px) {
    .eqr[b-tfms8gh0ex] {
        flex-direction: column;
        gap: var(--ds-space-4);
    }
}

.eqr__col[b-tfms8gh0ex] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    min-width: 0;
}

/* Explicit widths via flex-basis — keeps the form compact at ~32% and
   lets the result panel claim the rest. flex-shrink: 0 on the form locks
   the proportion so a long employee select can't push the layout. */
.eqr__col-form[b-tfms8gh0ex] {
    flex: 0 0 32%;
    max-width: 32%;
}

.eqr__col-result[b-tfms8gh0ex] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 640px) {
    .eqr__col-form[b-tfms8gh0ex],
    .eqr__col-result[b-tfms8gh0ex] {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

/* ---------- Loading ---------- */
.eqr__loading[b-tfms8gh0ex] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-6) var(--ds-space-4);
    color: var(--ds-text-muted);
    font-size: 0.875rem;
}

/* ---------- Form ---------- */
.eqr__form[b-tfms8gh0ex] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}

/* (eqr__row / eqr__field-wide / eqr__field-narrow were removed — the
   form column is narrow enough that Çalışan + Geçerlilik now stack
   vertically using plain .ds-field children.) */

/* Validity row — number input + "Süresiz" checkbox laid out side by side
   so the checkbox doesn't push the form taller. The input flexes, the
   checkbox label keeps its natural width. */
.eqr__validity-row[b-tfms8gh0ex] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
}

.eqr__validity-input[b-tfms8gh0ex] {
    flex: 1 1 auto;
    min-width: 0;
}

.eqr__indefinite[b-tfms8gh0ex] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    white-space: nowrap;
}

.eqr__indefinite-label[b-tfms8gh0ex] {
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text);
}

/* On the smallest screens the side-by-side gets too tight — wrap. */
@media (max-width: 380px) {
    .eqr__validity-row[b-tfms8gh0ex] { flex-wrap: wrap; gap: 6px var(--ds-space-3); }
    .eqr__validity-input[b-tfms8gh0ex] { flex-basis: 100%; }
}

/* (Warning toast + inline employee-summary chip were removed from the form
   column to keep the left side compact. Employee identity now lives in
   the result card alongside the QR — see .eqr__employee-card below.) */

/* Employee card — rendered above the QR image in the result column once a
   code is generated. Two-line layout (name in display font, meta in muted
   inline list) keeps it scannable without competing with the QR.

   Note: when the user has no logo / store, the meta line gracefully
   shortens — the separators (`.eqr__sep`) only appear between rendered
   spans. */
.eqr__employee-card[b-tfms8gh0ex] {
    /* .eqr__result is a 2-column grid (QR left, meta right). Span the
       employee card across both columns so it reads as a header above
       the QR + meta pair. */
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ds-space-2) 0;
    margin-bottom: var(--ds-space-1);
    border-bottom: 1px solid var(--ds-border);
}

.eqr__employee-name[b-tfms8gh0ex] {
    font-family: var(--ds-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ds-text);
    letter-spacing: -0.005em;
}

.eqr__employee-meta[b-tfms8gh0ex] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

.eqr__sep[b-tfms8gh0ex] {
    color: var(--ds-text-subtle);
    font-weight: 400;
}

/* ---------- Result section (QR + meta) ---------- */
.eqr__result[b-tfms8gh0ex] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ds-space-4);
    align-items: start;
    padding: var(--ds-space-3);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

/* Result fills the right column. Default layout (QR left, meta right)
   works fine inside the 68% column on desktop. Mobile single-column flip
   handled by the .eqr__result media query below. */

/* Empty-state placeholder — shown in the right column before a QR is
   generated. Keeps the modal feeling intentional (vs. an empty void). */
.eqr__placeholder[b-tfms8gh0ex] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ds-space-2);
    min-height: 280px;
    padding: var(--ds-space-5);
    background: var(--ds-surface-alt);
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    color: var(--ds-text-subtle);
}

.eqr__placeholder svg[b-tfms8gh0ex] { opacity: 0.5; }

.eqr__placeholder-text[b-tfms8gh0ex] {
    margin: 4px 0 0;
    font-family: var(--ds-font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.eqr__placeholder-hint[b-tfms8gh0ex] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    color: var(--ds-text-subtle);
}

.eqr__qr-card[b-tfms8gh0ex] {
    background: #ffffff;
    padding: var(--ds-space-2);
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-1);
    flex-shrink: 0;
}

.eqr__qr-canvas[b-tfms8gh0ex] {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eqr__qr-meta[b-tfms8gh0ex] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    min-width: 0;
}

.eqr__code-row[b-tfms8gh0ex] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 6px 8px 6px 12px;
}

.eqr__code[b-tfms8gh0ex] {
    flex: 1;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ds-text);
    word-break: break-all;
}

.eqr__expiration[b-tfms8gh0ex] {
    margin: 4px 0 0;
}

.eqr__qr-actions[b-tfms8gh0ex] {
    display: flex;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .eqr__result[b-tfms8gh0ex] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .eqr__qr-meta[b-tfms8gh0ex] { width: 100%; align-items: stretch; }
    .eqr__qr-actions[b-tfms8gh0ex] { justify-content: stretch; }
    .eqr__qr-actions[b-tfms8gh0ex]  .ab { flex: 1 1 auto; }

    /* Tighter placeholder on small screens. */
    .eqr__placeholder[b-tfms8gh0ex] { min-height: 200px; padding: var(--ds-space-4); }
}
/* /Components/Pages/Employees/EmployeeDetails.razor.rz.scp.css */
/* =====================================================================
   Employee Details — design-system (FluentUI-free) styles.
   Tokens: --ds-* / --brand-* (see app.css :root). Brand blue #036ac4.
   ===================================================================== */

.page[b-po5mm717pu] {
    padding: var(--ds-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-5);
    /* Same scroll shell as the global .page-container (StoreDetails uses it):
       a flex item that owns its own scrollbar instead of relying on height:100%. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    font-family: var(--ds-font-ui);
    color: var(--ds-text);
}

/* ---- Header ---- */
.ed-header[b-po5mm717pu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
}

.ed-title-area[b-po5mm717pu] { min-width: 0; }

.ed-eyebrow[b-po5mm717pu] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-subtle);
    margin: 0 0 var(--ds-space-1);
}

.ed-title-row[b-po5mm717pu] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
}

.ed-title[b-po5mm717pu] {
    font-family: var(--ds-font-display, var(--ds-font-ui));
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-text);
    margin: 0;
    line-height: 1.2;
}

/* ---- Status pill + badge ---- */
.ed-status[b-po5mm717pu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--ds-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}
.ed-status[b-po5mm717pu]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
/* neutral fallback for any unmapped status */
.ed-status[b-po5mm717pu] { background: var(--ds-surface-sunken); color: var(--ds-text-muted); }
.ed-status.status-online[b-po5mm717pu] { background: color-mix(in srgb, var(--ds-success) 14%, transparent); color: var(--ds-success); }
.ed-status.status-break[b-po5mm717pu],
.ed-status.status-busy[b-po5mm717pu] { background: color-mix(in srgb, var(--ds-warning) 16%, transparent); color: var(--ds-warning); }
.ed-status.status-offline[b-po5mm717pu],
.ed-status.status-unknown[b-po5mm717pu] { background: var(--ds-surface-sunken); color: var(--ds-text-muted); }

.ed-badge[b-po5mm717pu] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ds-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}
.ed-badge--accent[b-po5mm717pu] { background: var(--brand-50); color: var(--brand-700); }
.ed-badge--neutral[b-po5mm717pu] { background: var(--ds-surface-sunken); color: var(--ds-text-muted); }

/* ---- Tabs ---- */
.ed-tabs[b-po5mm717pu] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--ds-border);
}
.ed-tab[b-po5mm717pu] {
    appearance: none;
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
    white-space: nowrap;
}
.ed-tab:hover[b-po5mm717pu] { color: var(--ds-text); }
.ed-tab.is-active[b-po5mm717pu] { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.ed-tab:focus-visible[b-po5mm717pu] { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 4px; }

.ed-panel[b-po5mm717pu] { padding-top: var(--ds-space-2); }
.ed-panel[hidden][b-po5mm717pu] { display: none; }

/* ---- Cards ---- */
.ed-card[b-po5mm717pu] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
    padding: var(--ds-space-5);
}
.ed-card-head[b-po5mm717pu] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-4);
    flex-wrap: wrap;
}
.ed-card-head h2[b-po5mm717pu] { font-size: 1.05rem; font-weight: 700; color: var(--ds-text); margin: 0; }
.ed-card-icon[b-po5mm717pu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-50);
    color: var(--brand-600);
    flex-shrink: 0;
}
.ed-card-icon[b-po5mm717pu]  svg { width: 18px; height: 18px; }
.ed-card-head-actions[b-po5mm717pu] { margin-left: auto; display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap; }

/* ---- Details layout ---- */
.ed-details-grid[b-po5mm717pu] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--ds-space-5);
    align-items: start;
}
@media (max-width: 980px) { .ed-details-grid[b-po5mm717pu] { grid-template-columns: 1fr; } }

/* ---- Form ---- */
.ed-form-grid[b-po5mm717pu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-4);
}
@media (max-width: 640px) { .ed-form-grid[b-po5mm717pu] { grid-template-columns: 1fr; } }
.ed-col-span-2[b-po5mm717pu] { grid-column: 1 / -1; }

.ed-field[b-po5mm717pu] { display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; }
.ed-label[b-po5mm717pu] { font-size: 0.8rem; font-weight: 600; color: var(--ds-text); }
.ed-input[b-po5mm717pu], .ed-select[b-po5mm717pu] {
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
    box-sizing: border-box;
}
.ed-input:focus[b-po5mm717pu], .ed-select:focus[b-po5mm717pu] {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px var(--brand-100, rgba(3, 106, 196, 0.18));
}
.ed-input:disabled[b-po5mm717pu], .ed-select:disabled[b-po5mm717pu] {
    background: var(--ds-surface-sunken);
    color: var(--ds-text-muted);
    cursor: not-allowed;
}
.ed-input[b-po5mm717pu]::placeholder { color: var(--ds-text-subtle); }

.ed-sub-head[b-po5mm717pu] {
    grid-column: 1 / -1;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ds-text);
    margin: var(--ds-space-2) 0 0;
}

/* switch */
.ed-switch[b-po5mm717pu] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    cursor: pointer;
    user-select: none;
    padding-top: 4px;
}
.ed-switch input[b-po5mm717pu] { position: absolute; opacity: 0; width: 0; height: 0; }
.ed-switch-track[b-po5mm717pu] {
    width: 40px;
    height: 22px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-border-strong);
    position: relative;
    transition: background var(--ds-dur-fast) var(--ds-ease);
    flex: none;
}
.ed-switch-track[b-po5mm717pu]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-1);
    transition: transform var(--ds-dur-fast) var(--ds-ease);
}
.ed-switch input:checked + .ed-switch-track[b-po5mm717pu] { background: var(--brand-600); }
.ed-switch input:checked + .ed-switch-track[b-po5mm717pu]::after { transform: translateX(18px); }
.ed-switch input:focus-visible + .ed-switch-track[b-po5mm717pu] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.ed-form-actions[b-po5mm717pu] {
    margin-top: var(--ds-space-5);
    padding-top: var(--ds-space-4);
    border-top: 1px solid var(--ds-border);
    display: flex;
    justify-content: flex-end;
}

/* ---- Metrics (compact MetricCard rows) ---- */
.ed-metrics[b-po5mm717pu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-2);
}

/* ---- Credentials ---- */
.ed-creds[b-po5mm717pu] {
    margin-top: var(--ds-space-3);
    padding: var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
}
.ed-creds-head[b-po5mm717pu] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--ds-space-3);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ds-text);
}
.ed-creds-head .ed-cred-ic[b-po5mm717pu] { display: inline-flex; color: var(--ds-text-muted); }
.ed-creds-head .ed-cred-ic[b-po5mm717pu]  svg { width: 16px; height: 16px; }
.ed-creds-row[b-po5mm717pu] {
    display: flex;
    gap: var(--ds-space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}
.ed-cred-field[b-po5mm717pu] { flex: 1; min-width: 150px; }
.ed-cred-label[b-po5mm717pu] { font-size: 0.72rem; color: var(--ds-text-muted); margin-bottom: 2px; display: block; }
.ed-cred-input-row[b-po5mm717pu] { display: flex; gap: 4px; }
.ed-cred-input-row .ed-input[b-po5mm717pu] { flex: 1; }

/* ---- List rows (workspaces / stores) ---- */
/* No `flex: 1` here: a flex-basis:0 item inside an auto-height column collapses and the
   scroll box never gets a usable height. Matches .sd-list in StoreDetails. */
.ed-list[b-po5mm717pu] { display: flex; flex-direction: column; gap: var(--ds-space-2); overflow-y: auto; max-height: 460px; }
.ed-list-row[b-po5mm717pu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
}
.ed-list-row-main[b-po5mm717pu] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}
.ed-list-row-icon[b-po5mm717pu] { color: var(--brand-600); display: inline-flex; flex: none; }
.ed-list-row-icon[b-po5mm717pu]  svg { width: 16px; height: 16px; }
.ed-list-row-name[b-po5mm717pu] { font-weight: 600; color: var(--ds-text); }
.ed-list-row-meta[b-po5mm717pu] { color: var(--ds-text-muted); font-size: 0.85rem; }

.ed-pager[b-po5mm717pu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-3);
    margin-top: var(--ds-space-4);
}
.ed-pager-info[b-po5mm717pu] { color: var(--ds-text-muted); font-size: 0.85rem; }

/* empty / loading states */
.ed-tab-loading[b-po5mm717pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-4);
    padding: var(--ds-space-7) var(--ds-space-4);
    color: var(--ds-text-muted);
}
.ed-empty[b-po5mm717pu] {
    text-align: center;
    padding: var(--ds-space-6) var(--ds-space-4);
    color: var(--ds-text-muted);
    font-size: 0.875rem;
}
.ed-empty-icon[b-po5mm717pu] { color: var(--ds-text-subtle); display: inline-flex; margin-bottom: var(--ds-space-2); }
.ed-empty-icon[b-po5mm717pu]  svg { width: 40px; height: 40px; }

/* search field */
.ed-search[b-po5mm717pu] { position: relative; margin-bottom: var(--ds-space-4); }
.ed-search .ed-input[b-po5mm717pu] { padding-left: 36px; }
.ed-search-icon[b-po5mm717pu] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-text-subtle);
    display: inline-flex;
    pointer-events: none;
}
.ed-search-icon[b-po5mm717pu]  svg { width: 16px; height: 16px; }

/* two-column card grid */
.ed-grid-2[b-po5mm717pu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-4);
    /* start, not stretch: each list card keeps its natural height (like .sd-dual),
       so a short list is not padded out to match the tall one. */
    align-items: start;
}
@media (max-width: 860px) { .ed-grid-2[b-po5mm717pu] { grid-template-columns: 1fr; } }
.ed-card--list[b-po5mm717pu] { display: flex; flex-direction: column; }

/* ---- Courier route map ---- */
.ed-map-wrap[b-po5mm717pu] {
    position: relative;
    height: calc(100vh - 260px);
    min-height: 420px;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ds-border);
}
.ed-map-controls[b-po5mm717pu] {
    position: absolute;
    top: var(--ds-space-4);
    left: var(--ds-space-4);
    right: var(--ds-space-4);
    z-index: 1000;
    pointer-events: none;
}
.ed-map-panel[b-po5mm717pu] {
    pointer-events: auto;
    background: color-mix(in srgb, var(--ds-surface) 94%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-3);
    padding: var(--ds-space-4);
    max-width: fit-content;
}
.ed-map-controls-row[b-po5mm717pu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-4);
    align-items: flex-end;
}
.ed-map-info[b-po5mm717pu] {
    position: absolute;
    bottom: var(--ds-space-4);
    right: var(--ds-space-4);
    z-index: 1000;
}
.ed-map-center[b-po5mm717pu] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}
.ed-route-legend[b-po5mm717pu] { display: flex; align-items: center; gap: var(--ds-space-2); }
.ed-route-line[b-po5mm717pu] {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--brand-600), var(--ds-success));
}
.ed-inline[b-po5mm717pu] { display: flex; align-items: center; gap: 6px; }
.ed-inline[b-po5mm717pu]  svg { width: 16px; height: 16px; }
.ed-muted[b-po5mm717pu] { color: var(--ds-text-muted); font-size: 0.85rem; }
.ed-mt-2[b-po5mm717pu] { margin-top: var(--ds-space-2); }
.ed-mt-3[b-po5mm717pu] { margin-top: var(--ds-space-3); }
.ed-center[b-po5mm717pu] { text-align: center; }
.ed-month-label[b-po5mm717pu] { min-width: 120px; text-align: center; font-weight: 600; color: var(--ds-text); }
.ed-field-inline[b-po5mm717pu] { display: flex; align-items: center; gap: var(--ds-space-2); }
.ed-field-inline .ed-label[b-po5mm717pu] { white-space: nowrap; }
.ed-date[b-po5mm717pu] { width: 150px; }
.ed-time[b-po5mm717pu] { width: 110px; }
/* /Components/Pages/Employees/EmployeeLogin.razor.rz.scp.css */
/* ===== Giriş — admin-app kit, token-driven, compact ===== */

.login-page[b-xa02c06nbg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--space-6);
    font-family: var(--font-ui);
    /* Soft brand-tinted hero gradient + a single blue glow, per design system */
    background:
        radial-gradient(900px circle at 100% 0%, rgba(3, 106, 196, 0.12), transparent 55%),
        linear-gradient(170deg, var(--slate-50) 0%, var(--brand-50) 55%, #f0f9ff 100%);
}

.login-card[b-xa02c06nbg] {
    width: 100%;
    max-width: 400px;
    background: var(--layer-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xl);
    padding: var(--space-10) var(--space-8);
}

/* ── Brand wordmark (Damion cursive) + tagline ─────────── */
.login-brand[b-xa02c06nbg] {
    text-align: center;
    margin-bottom: var(--space-6);
}

.login-wordmark[b-xa02c06nbg] {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--accent);
}

.login-tagline[b-xa02c06nbg] {
    margin: var(--space-2) 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--fg-hint);
}

/* ── Store-specific header (/magaza-girisi/{slug}) ─────── */
.login-store[b-xa02c06nbg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.login-store-logo[b-xa02c06nbg] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--layer-1);
    box-shadow: var(--shadow-sm);
}

.login-store-logo--ph[b-xa02c06nbg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-hint);
    background: var(--bg-muted);
}

.login-store-logo--ph[b-xa02c06nbg]  svg {
    width: 30px;
    height: 30px;
}

.login-store-name[b-xa02c06nbg] {
    margin: var(--space-2) 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fg-1);
    text-align: center;
}

.login-store-subtitle[b-xa02c06nbg] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--fg-hint);
}

/* Subtle "adisyon.ai" attribution under the store identity */
.login-store-powered[b-xa02c06nbg] {
    margin-top: var(--space-1);
    font-family: var(--font-script);
    font-size: 1rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.7;
}

/* ── Segmented switch (owner ⇄ employee) ───────────────── */
.login-seg[b-xa02c06nbg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
    padding: var(--space-1);
    margin-bottom: var(--space-6);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.login-seg-btn[b-xa02c06nbg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--fg-hint);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease);
}

.login-seg-btn[b-xa02c06nbg]  svg {
    width: 18px;
    height: 18px;
}

.login-seg-btn:hover[b-xa02c06nbg] {
    color: var(--fg-2);
}

.login-seg-btn.is-active[b-xa02c06nbg] {
    background: var(--layer-1);
    color: var(--accent);
    box-shadow: var(--shadow-xs);
}

.login-seg-btn:focus-visible[b-xa02c06nbg] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Active pane (sizes to its own content) ────────────── */
.login-pane[b-xa02c06nbg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.login-pane-desc[b-xa02c06nbg] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--fg-hint);
    text-align: center;
}

.login-pane-hint[b-xa02c06nbg] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--fg-hint);
}

.login-pane-hint[b-xa02c06nbg]  svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--fg-hint);
}

/* ── Form ──────────────────────────────────────────────── */
/* ::deep + anchored on .login-card: the <form> is rendered by the EditForm
   child component, so it does NOT carry this component's scope id — a plain
   `.login-form { … }` rule would silently never match (gap = 0). */
.login-card[b-xa02c06nbg]  .login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Auth-code field — centered, spaced, larger (overrides .ds-input). */
.login-card[b-xa02c06nbg]  .login-code-input {
    height: 52px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

.login-card[b-xa02c06nbg]  .login-code-input::placeholder {
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.login-validation[b-xa02c06nbg] {
    font-size: 0.75rem;
    color: var(--danger-600);
}

/* ── Captcha (shown after repeated failures) ───────────── */
.login-captcha[b-xa02c06nbg] {
    padding: var(--space-4);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.login-captcha-prompt[b-xa02c06nbg] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--fg-hint);
}

.login-captcha-row[b-xa02c06nbg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-1);
}

.login-captcha-question[b-xa02c06nbg] {
    flex-shrink: 0;
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
    white-space: nowrap;
}

.login-captcha-input[b-xa02c06nbg] {
    flex: 1;
    text-align: center;
    font-weight: 600;
}

/* Error banner */
.login-error[b-xa02c06nbg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--danger-50);
    border: 1px solid var(--danger-100);
    border-radius: var(--radius-md);
    color: var(--danger-600);
    font-size: 0.875rem;
}

.login-error[b-xa02c06nbg]  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* One-line help note under the employee form */
.login-note[b-xa02c06nbg] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--fg-hint);
    text-align: center;
}

/* ── Back to home (muted text link) ────────────────────── */
.login-back[b-xa02c06nbg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    align-self: center;
    margin: var(--space-6) auto 0;
    border: none;
    background: transparent;
    color: var(--fg-hint);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    width: 100%;
}

.login-back[b-xa02c06nbg]  svg {
    width: 16px;
    height: 16px;
}

.login-back:hover[b-xa02c06nbg] {
    color: var(--fg-2);
}

.login-back:focus-visible[b-xa02c06nbg] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── "Beni Hatırla" ────────────────────────────────────── */
.login-remember[b-xa02c06nbg] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.login-remember-box[b-xa02c06nbg] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0.15rem 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.login-remember-box:focus-visible[b-xa02c06nbg] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.login-remember-label[b-xa02c06nbg] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    cursor: pointer;
    user-select: none;
}

.login-remember-label > span[b-xa02c06nbg] {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--fg-1);
}

.login-remember-label > small[b-xa02c06nbg] {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--fg-hint);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
    .login-page[b-xa02c06nbg] {
        padding: 0;
        background: var(--layer-1);
    }

    .login-card[b-xa02c06nbg] {
        max-width: 100%;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: var(--space-8) var(--space-6);
    }
}
/* /Components/Pages/Employees/Employees.razor.rz.scp.css */
/* Header: title left, filter toolbar right (wraps on small screens) */
.emp-header[b-tgrecvs5yx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
/* /Components/Pages/Employees/Shifts/CalendarDayView.razor.rz.scp.css */
.calendar-day-view[b-apet0dte37] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.day-timeline-header[b-apet0dte37] {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 2px solid var(--ds-border);
    background: var(--ds-surface-alt);
    position: sticky;
    top: 0;
    z-index: 2;
}

.employee-column-header[b-apet0dte37] {
    padding: 1rem;
    font-weight: 600;
    color: var(--ds-text);
    border-right: 1px solid var(--ds-border);
}

.timeline-hours[b-apet0dte37] {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    position: relative;
}

.hour-label[b-apet0dte37] {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    border-left: 1px solid var(--ds-border);
}

.day-timeline-body[b-apet0dte37] {
    flex: 1;
    overflow-y: auto;
}

.employee-timeline-row[b-apet0dte37] {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 1px solid var(--ds-border);
    min-height: 80px;
}

.employee-info-cell[b-apet0dte37] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-right: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

.employee-avatar[b-apet0dte37] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--slate-400);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.employee-avatar.online[b-apet0dte37] {
    background: var(--ds-success);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.employee-avatar.offline[b-apet0dte37] {
    background: var(--slate-400);
}

.employee-avatar.busy[b-apet0dte37] {
    background: var(--ds-warning);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
}

.employee-details[b-apet0dte37] {
    flex: 1;
    min-width: 0;
}

.employee-name[b-apet0dte37] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--brand-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.employee-role[b-apet0dte37] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-grid[b-apet0dte37] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hour-line[b-apet0dte37] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--ds-border);
    opacity: 0.6;
    pointer-events: none;
}

.current-time-line[b-apet0dte37] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ds-success);
    z-index: 3;
    pointer-events: none;
}

.current-time-line[b-apet0dte37]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    width: 10px;
    height: 10px;
    background: var(--ds-success);
    border-radius: 50%;
}

.timeline-shift[b-apet0dte37] {
    position: absolute;
    top: 8px;
    bottom: 8px;
    border-radius: var(--ds-radius-sm);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: transform var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease);
}

.timeline-shift.planned[b-apet0dte37] {
    background: var(--brand-600);
    color: #fff;
    border: 2px solid transparent;
    cursor: pointer;
    z-index: 2;
}

.timeline-shift.active[b-apet0dte37] {
    background: var(--ds-warning);
    color: #fff;
    border: 2px solid #b45309;
    cursor: default;
    z-index: 3;
}

.timeline-shift.completed[b-apet0dte37] {
    background: var(--ds-success);
    color: #fff;
    opacity: 0.92;
    cursor: default;
    z-index: 3;
}

.timeline-shift.planned:hover[b-apet0dte37] {
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-3);
}

.shift-time-label[b-apet0dte37] {
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
}

.shift-note-ico[b-apet0dte37] {
    display: inline-flex;
    opacity: 0.85;
}

.shift-note-ico svg[b-apet0dte37] {
    width: 12px;
    height: 12px;
}

/* Gün aşırı vardiya stilleri */
.timeline-shift.overnight-part1[b-apet0dte37] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 2px dashed rgba(255, 255, 255, 0.5);
}

.timeline-shift.overnight-part2[b-apet0dte37] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 2px dashed rgba(255, 255, 255, 0.5);
}

.timeline-shift.planned.overnight-part1[b-apet0dte37],
.timeline-shift.planned.overnight-part2[b-apet0dte37] {
    position: relative;
}

.timeline-shift.planned.overnight-part1[b-apet0dte37]::after {
    content: '→';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--brand-600);
    font-weight: bold;
    z-index: 10;
}

.timeline-shift.completed.overnight-part1[b-apet0dte37]::after,
.timeline-shift.active.overnight-part1[b-apet0dte37]::after {
    content: '→';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: bold;
    z-index: 10;
}

.timeline-shift.completed.overnight-part1[b-apet0dte37]::after {
    color: var(--ds-success);
}

.timeline-shift.active.overnight-part1[b-apet0dte37]::after {
    color: var(--ds-warning);
}

/* Break bar styling */
.timeline-shift.break-bar[b-apet0dte37] {
    background: repeating-linear-gradient(
        45deg,
        #d97706,
        #d97706 3px,
        #fbbf24 3px,
        #fbbf24 6px
    );
    opacity: 0.85;
    z-index: 4;
    height: 6px;
    top: auto;
    bottom: 2px;
    border-radius: 2px;
    min-width: 4px;
    cursor: default;
}
/* /Components/Pages/Employees/Shifts/CalendarMonthView.razor.rz.scp.css */
.calendar-month-view[b-uf5x5q33c7] {
    height: 100%;
    overflow: auto;
    padding: 1rem;
}

.month-grid[b-uf5x5q33c7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.month-header-row[b-uf5x5q33c7] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.day-name-header[b-uf5x5q33c7] {
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ds-text-muted);
    background: var(--ds-surface-alt);
    border-radius: var(--ds-radius-sm);
}

.month-body[b-uf5x5q33c7] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.day-cell[b-uf5x5q33c7] {
    min-height: 120px;
    padding: 0.75rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    cursor: pointer;
    transition: border-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease),
                transform var(--ds-dur) var(--ds-ease);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.day-cell:hover[b-uf5x5q33c7] {
    background: var(--ds-surface-alt);
    border-color: var(--brand-600);
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-2);
}

.day-cell.empty[b-uf5x5q33c7] {
    background: var(--ds-surface-sunken);
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.day-cell.today[b-uf5x5q33c7] {
    border: 2px solid var(--brand-600);
    background: var(--brand-50);
}

.day-number[b-uf5x5q33c7] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ds-text);
}

.day-cell.today .day-number[b-uf5x5q33c7] {
    color: var(--brand-600);
}

.shift-indicators[b-uf5x5q33c7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.shift-dot[b-uf5x5q33c7] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.25rem;
}

.shift-dot.planned[b-uf5x5q33c7] {
    background: var(--brand-600);
}

.shift-dot.active[b-uf5x5q33c7] {
    background: var(--ds-success);
    animation: pulse-dot-b-uf5x5q33c7 2s infinite;
}

.shift-dot.completed[b-uf5x5q33c7] {
    background: var(--slate-400);
}

.shift-count[b-uf5x5q33c7] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    margin-top: auto;
}

@keyframes pulse-dot-b-uf5x5q33c7 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(22, 163, 74, 0);
    }
}
/* /Components/Pages/Employees/Shifts/EditShiftModal.razor.rz.scp.css */
.esm-body[b-149ww99qab] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.esm-grid-2[b-149ww99qab] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 520px) {
    .esm-grid-2[b-149ww99qab] { grid-template-columns: 1fr; }
}

.esm-req[b-149ww99qab] { color: var(--ds-danger); }

.esm-readbox[b-149ww99qab] {
    padding: 10px 12px;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    min-height: 40px;
    display: flex;
    align-items: center;
}

.esm-readbox--icon[b-149ww99qab] { gap: 8px; }

.esm-ico[b-149ww99qab] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--ds-text-muted);
}

.esm-ico[b-149ww99qab]  svg { width: 16px; height: 16px; }
.esm-ico--brand[b-149ww99qab]   { color: var(--brand-600); }
.esm-ico--success[b-149ww99qab] { color: var(--ds-success); }
.esm-ico--warn[b-149ww99qab]    { color: var(--ds-warning); }

.esm-actual[b-149ww99qab] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: rgba(22, 163, 74, 0.08);
    border-left: 3px solid var(--ds-success);
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
}

.esm-strong[b-149ww99qab] { font-weight: 600; color: var(--ds-text); }

.esm-arrow[b-149ww99qab] { display: inline-flex; color: var(--ds-text-subtle); }
.esm-arrow[b-149ww99qab]  svg { width: 14px; height: 14px; }

.esm-dur[b-149ww99qab] {
    font-weight: 700;
    color: var(--brand-700);
    margin-left: 2px;
}

.esm-breaks[b-149ww99qab] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.esm-break[b-149ww99qab] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 12px;
    background: rgba(217, 119, 6, 0.08);
    border-left: 3px solid var(--ds-warning);
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    color: var(--ds-text);
}

.esm-reason[b-149ww99qab] { opacity: 0.75; margin-left: auto; }

.esm-warn-bar[b-149ww99qab] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(217, 119, 6, 0.10);
    border: 1px solid rgba(217, 119, 6, 0.25);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-warning);
    font-size: 0.8125rem;
}

.esm-warn-bar .esm-ico[b-149ww99qab] { color: var(--ds-warning); }

.esm-confirm-text[b-149ww99qab] {
    margin-right: auto;
    align-self: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}
/* /Components/Pages/Employees/Shifts/EmployeeScheduleCalendarEnhanced.razor.rz.scp.css */
.schedule-calendar-enhanced[b-e3n4lui4eq] {
    font-family: var(--ds-font-ui);
}

/* ---- Metrics ---- */
.esc-metrics[b-e3n4lui4eq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.esc-metric[b-e3n4lui4eq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
}

.esc-metric-ico[b-e3n4lui4eq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-50);
    color: var(--brand-600);
    flex-shrink: 0;
}

.esc-metric-ico[b-e3n4lui4eq]  svg { width: 22px; height: 22px; }
.esc-metric-ico--warn[b-e3n4lui4eq] { background: rgba(217, 119, 6, 0.12); color: var(--ds-warning); }

.esc-metric-body[b-e3n4lui4eq] { min-width: 0; }
.esc-metric-title[b-e3n4lui4eq] { font-size: 0.75rem; color: var(--ds-text-muted); }
.esc-metric-value[b-e3n4lui4eq] { font-size: 1.15rem; font-weight: 700; color: var(--ds-text); }

/* ---- Calendar grid ---- */
.calendar-grid[b-e3n4lui4eq] {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}

.calendar-row[b-e3n4lui4eq] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-header-row[b-e3n4lui4eq] {
    background: var(--ds-surface-sunken);
    border-bottom: 1px solid var(--ds-border);
}

.calendar-day-header[b-e3n4lui4eq] {
    padding: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ds-text);
}

.calendar-day[b-e3n4lui4eq] {
    min-height: 120px;
    padding: 8px;
    border-right: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
    position: relative;
}

.calendar-day:hover[b-e3n4lui4eq] { background: var(--ds-surface-alt); }
.calendar-day:last-child[b-e3n4lui4eq] { border-right: none; }
.calendar-row:last-child .calendar-day[b-e3n4lui4eq] { border-bottom: none; }
.calendar-day.current-month[b-e3n4lui4eq] { background: var(--ds-surface); }
.calendar-day.other-month[b-e3n4lui4eq] { background: var(--ds-surface-alt); color: var(--ds-text-subtle); }

.calendar-day.today[b-e3n4lui4eq] {
    background: var(--brand-50);
    border: 2px solid var(--brand-600);
}

.calendar-day.past-date[b-e3n4lui4eq] { opacity: 0.92; }

.day-number[b-e3n4lui4eq] {
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ds-text);
}

.esc-today-pill[b-e3n4lui4eq] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--ds-radius-pill);
    background: var(--brand-600);
    color: #fff;
}

.esc-ico[b-e3n4lui4eq] { display: inline-flex; align-items: center; }
.esc-ico[b-e3n4lui4eq]  svg { width: 14px; height: 14px; }
.esc-ico--brand[b-e3n4lui4eq]   { color: var(--brand-600); }
.esc-ico--success[b-e3n4lui4eq] { color: var(--ds-success); }
.esc-ico--warn[b-e3n4lui4eq]    { color: var(--ds-warning); }
.esc-ico--danger[b-e3n4lui4eq]  { color: var(--ds-danger); }

.shift-info[b-e3n4lui4eq] {
    padding: 4px 6px;
    border-radius: var(--ds-radius-sm);
    font-size: 0.75rem;
    line-height: 1.4;
    margin-bottom: 4px;
}

.shift-info.scheduled[b-e3n4lui4eq] {
    background: var(--brand-50);
    color: var(--brand-700);
    border: 1px solid var(--brand-200);
}

.shift-info.scheduled.overnight[b-e3n4lui4eq] {
    border: 1px dashed var(--brand-600);
}

.shift-info.scheduled.missed[b-e3n4lui4eq] { opacity: 0.5; text-decoration: line-through; }

.shift-info.worked[b-e3n4lui4eq] { background: var(--ds-success); color: #fff; }
.shift-info.worked.overtime[b-e3n4lui4eq] { background: var(--ds-warning); }
.shift-info.worked.active[b-e3n4lui4eq] { background: var(--brand-600); animation: esc-pulse-b-e3n4lui4eq 2s infinite; }

.shift-info.absent[b-e3n4lui4eq] {
    background: var(--ds-danger);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
}

@keyframes esc-pulse-b-e3n4lui4eq {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.shift-time[b-e3n4lui4eq] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.active-indicator[b-e3n4lui4eq] { color: #fde047; font-weight: 700; }

.duration-badge[b-e3n4lui4eq] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 3px;
    font-size: 0.7rem;
    margin-top: 2px;
}

.duration-badge.overtime[b-e3n4lui4eq] { background: rgba(255, 255, 255, 0.3); font-weight: 700; }

.no-shift[b-e3n4lui4eq] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    opacity: 0.3;
}

.add-shift-hint[b-e3n4lui4eq] { font-size: 24px; color: var(--ds-text-subtle); }
.calendar-day:hover .add-shift-hint[b-e3n4lui4eq] { color: var(--brand-600); opacity: 1; }

/* ---- Legend ---- */
.esc-legend[b-e3n4lui4eq] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.legend-item[b-e3n4lui4eq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--ds-text);
}

.legend-indicator[b-e3n4lui4eq] { width: 18px; height: 18px; border-radius: 4px; }
.legend-indicator.scheduled[b-e3n4lui4eq] { background: var(--brand-600); }
.legend-indicator.worked[b-e3n4lui4eq] { background: var(--ds-success); }
.legend-indicator.overtime[b-e3n4lui4eq] { background: var(--ds-warning); }
.legend-indicator.absent[b-e3n4lui4eq] { background: var(--ds-danger); }
.legend-indicator.incomplete[b-e3n4lui4eq] { background: #fbbf24; }
.legend-indicator.break-legend[b-e3n4lui4eq] {
    background: repeating-linear-gradient(45deg, #d97706, #d97706 3px, #fbbf24 3px, #fbbf24 6px);
}

/* ---- Detail modal body ---- */
.esc-detail[b-e3n4lui4eq] { display: flex; flex-direction: column; gap: 16px; }

.esc-section[b-e3n4lui4eq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.esc-section-title[b-e3n4lui4eq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ds-text);
}

.esc-grid-2[b-e3n4lui4eq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .esc-grid-2[b-e3n4lui4eq] { grid-template-columns: 1fr; }
}

.esc-section-actions[b-e3n4lui4eq] { display: flex; gap: 8px; }

.esc-readline[b-e3n4lui4eq] { font-size: 0.875rem; color: var(--ds-text); }
.esc-readline--warn[b-e3n4lui4eq] { color: var(--ds-warning); }
.esc-muted[b-e3n4lui4eq] { color: var(--ds-text-muted); }

.esc-break[b-e3n4lui4eq] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(217, 119, 6, 0.08);
    border-left: 3px solid var(--ds-warning);
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    color: var(--ds-text);
}

.esc-total-break[b-e3n4lui4eq] { font-weight: 700; color: var(--ds-text); }

.esc-absent-card[b-e3n4lui4eq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--ds-radius-md);
    color: var(--ds-danger);
    font-weight: 600;
}
/* /Components/Pages/Employees/Shifts/EmployeeShiftTracking.razor.rz.scp.css */
/* Page shell: relies on the global .page-container / .page-header layout.
   Only the calendar-specific overflow behaviour is scoped here. */
.shift-tracking-page[b-309vrapv2c] {
    overflow: hidden;
}

/* ---- Header ---- */
.stk-header[b-309vrapv2c] {
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.stk-header-left[b-309vrapv2c] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Toolbar lives inside the global .fbar rail */
.stk-toolbar[b-309vrapv2c] {
    align-items: center;
}

.stk-header-ico[b-309vrapv2c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-50);
    color: var(--brand-600);
    flex-shrink: 0;
}

.stk-header-ico[b-309vrapv2c]  svg { width: 22px; height: 22px; }

.stk-title[b-309vrapv2c] {
    margin: 0;
    font-family: var(--ds-font-display, var(--ds-font-ui));
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ds-text);
}

.stk-date[b-309vrapv2c] {
    padding: 0 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
}

/* ---- Buttons ---- */
.stk-btn[b-309vrapv2c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text);
    transition: background-color var(--ds-dur-fast) var(--ds-ease),
                border-color var(--ds-dur-fast) var(--ds-ease),
                color var(--ds-dur-fast) var(--ds-ease);
}

.stk-btn:hover[b-309vrapv2c] { border-color: var(--ds-border-strong); }
.stk-btn--ghost[b-309vrapv2c] { background: var(--ds-surface); }
.stk-btn--accent[b-309vrapv2c] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}
.stk-btn--accent:hover[b-309vrapv2c] { background: var(--brand-700); border-color: var(--brand-700); }

.stk-btn-ico[b-309vrapv2c] { display: inline-flex; }
.stk-btn-ico[b-309vrapv2c]  svg { width: 18px; height: 18px; }

.stk-icon-btn[b-309vrapv2c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease),
                color var(--ds-dur-fast) var(--ds-ease);
}

.stk-icon-btn:hover[b-309vrapv2c] { background: var(--ds-surface-alt); color: var(--ds-text); }
.stk-icon-btn[b-309vrapv2c]  svg { width: 20px; height: 20px; }

/* FluentIcon glyphs inside custom (non-AppButton) controls inherit currentColor */
.stk-header-ico[b-309vrapv2c]  svg:not([fill="none"]),
.stk-header-ico[b-309vrapv2c]  svg:not([fill="none"]) path,
.stk-btn-ico[b-309vrapv2c]  svg:not([fill="none"]),
.stk-btn-ico[b-309vrapv2c]  svg:not([fill="none"]) path,
.stk-icon-btn[b-309vrapv2c]  svg:not([fill="none"]),
.stk-icon-btn[b-309vrapv2c]  svg:not([fill="none"]) path,
.stk-seg-ico[b-309vrapv2c]  svg:not([fill="none"]),
.stk-seg-ico[b-309vrapv2c]  svg:not([fill="none"]) path,
.stk-state-ico[b-309vrapv2c]  svg:not([fill="none"]),
.stk-state-ico[b-309vrapv2c]  svg:not([fill="none"]) path,
.shift-badge-ico[b-309vrapv2c]  svg:not([fill="none"]),
.shift-badge-ico[b-309vrapv2c]  svg:not([fill="none"]) path { fill: currentColor; }

.stk-header-ico[b-309vrapv2c]  svg[fill="none"],
.stk-btn-ico[b-309vrapv2c]  svg[fill="none"],
.stk-icon-btn[b-309vrapv2c]  svg[fill="none"],
.stk-seg-ico[b-309vrapv2c]  svg[fill="none"],
.stk-state-ico[b-309vrapv2c]  svg[fill="none"],
.shift-badge-ico[b-309vrapv2c]  svg[fill="none"] { stroke: currentColor; }

/* ---- Segmented control ---- */
.stk-seg[b-309vrapv2c] {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-sm);
}

.stk-seg-btn[b-309vrapv2c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease),
                color var(--ds-dur-fast) var(--ds-ease);
}

.stk-seg-btn:hover[b-309vrapv2c] { color: var(--ds-text); }
.stk-seg-btn.is-active[b-309vrapv2c] {
    background: var(--ds-surface);
    color: var(--brand-600);
    box-shadow: var(--ds-shadow-1);
}

.stk-seg-ico[b-309vrapv2c] { display: inline-flex; }
.stk-seg-ico[b-309vrapv2c]  svg { width: 15px; height: 15px; }

/* ---- Filter dropdown ---- */
.stk-filter-wrap[b-309vrapv2c] { position: relative; }

.stk-filter-backdrop[b-309vrapv2c] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.stk-filter-panel[b-309vrapv2c] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 360px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-3);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stk-filter-group[b-309vrapv2c] { display: flex; flex-direction: column; gap: 8px; }

.stk-filter-label[b-309vrapv2c] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ds-text);
}

.stk-filter-options[b-309vrapv2c] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stk-opt[b-309vrapv2c] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease),
                border-color var(--ds-dur-fast) var(--ds-ease);
}

.stk-opt:hover[b-309vrapv2c] { border-color: var(--brand-600); }
.stk-opt.is-on[b-309vrapv2c] {
    background: var(--brand-50);
    border-color: var(--brand-600);
    color: var(--brand-700);
}

.stk-check[b-309vrapv2c] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1.5px solid var(--ds-border-strong);
    flex-shrink: 0;
    position: relative;
}

.stk-check.is-on[b-309vrapv2c] {
    background: var(--brand-600);
    border-color: var(--brand-600);
}

.stk-check.is-on[b-309vrapv2c]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 7px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.stk-filter-actions[b-309vrapv2c] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--ds-border);
}

/* ---- Content ---- */
.calendar-content[b-309vrapv2c] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.stk-state[b-309vrapv2c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 400px;
    color: var(--ds-text-muted);
}

.stk-state--empty[b-309vrapv2c] { flex-direction: column; }
.stk-state-ico[b-309vrapv2c] { color: var(--ds-text-subtle); }
.stk-state-ico[b-309vrapv2c]  svg { width: 48px; height: 48px; }

/* ---- Week grid ---- */
.week-calendar-wrapper[b-309vrapv2c] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    box-shadow: var(--ds-shadow-1);
}

.week-grid-table[b-309vrapv2c] {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

.week-header-row[b-309vrapv2c] {
    display: grid;
    grid-template-columns: 220px repeat(7, minmax(140px, 1fr));
    gap: 1px;
    background: var(--ds-border);
    border-bottom: 2px solid var(--ds-border);
    position: sticky;
    top: 0;
    z-index: 5;
}

.employee-header[b-309vrapv2c] {
    background: var(--ds-surface-sunken);
    padding: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ds-text);
    display: flex;
    align-items: center;
}

.day-header[b-309vrapv2c] {
    background: var(--ds-surface-sunken);
    padding: 0.75rem;
    text-align: center;
    color: var(--ds-text);
}

.day-header.today[b-309vrapv2c] {
    background: var(--brand-600);
    color: #fff;
}

.day-name[b-309vrapv2c] {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: capitalize;
}

.day-date[b-309vrapv2c] {
    font-size: 0.75rem;
    opacity: 0.75;
    margin-top: 2px;
}

.employee-row-grid[b-309vrapv2c] {
    display: grid;
    grid-template-columns: 220px repeat(7, minmax(140px, 1fr));
    gap: 1px;
    background: var(--ds-border);
}

.employee-cell[b-309vrapv2c] {
    background: var(--ds-surface);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: sticky;
    left: 0;
    z-index: 3;
    cursor: pointer;
    box-shadow: 2px 0 4px rgba(15, 23, 42, 0.04);
}

.employee-avatar[b-309vrapv2c] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--slate-400);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.employee-avatar.online[b-309vrapv2c] { background: var(--ds-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); }
.employee-avatar.offline[b-309vrapv2c] { background: var(--slate-400); }
.employee-avatar.busy[b-309vrapv2c] { background: var(--ds-warning); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2); }

.employee-info[b-309vrapv2c] { flex: 1; min-width: 0; }

.employee-name[b-309vrapv2c] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--brand-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employee-role[b-309vrapv2c] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    margin-top: 2px;
}

.day-cell[b-309vrapv2c] {
    background: var(--ds-surface);
    padding: 0.5rem;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
    position: relative;
}

.day-cell.today[b-309vrapv2c] { background: var(--brand-50); }
.day-cell:hover[b-309vrapv2c] { background: var(--ds-surface-alt); }
.day-cell:hover .empty-hint[b-309vrapv2c] { display: flex; }

.shift-badge[b-309vrapv2c] {
    background: var(--brand-600);
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform var(--ds-dur-fast) var(--ds-ease),
                box-shadow var(--ds-dur-fast) var(--ds-ease);
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.shift-badge.planned[b-309vrapv2c] { background: var(--brand-600); }

.shift-badge.active[b-309vrapv2c] {
    background: var(--ds-warning);
    border: 1px solid #b45309;
    animation: pulse-badge-b-309vrapv2c 2s infinite;
}

.shift-badge.completed[b-309vrapv2c] { background: var(--ds-success); opacity: 0.92; }

.shift-badge:hover[b-309vrapv2c] {
    transform: scale(1.02);
    box-shadow: var(--ds-shadow-2);
    z-index: 100;
}

.shift-badge.completed:hover[b-309vrapv2c],
.shift-badge.active:hover[b-309vrapv2c] { cursor: default; }

.shift-badge-ico[b-309vrapv2c] { display: inline-flex; opacity: 0.85; }
.shift-badge-ico[b-309vrapv2c]  svg { width: 12px; height: 12px; }

@keyframes pulse-badge-b-309vrapv2c {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.6); }
    50% { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0); }
}

.shift-time[b-309vrapv2c] { font-weight: 500; }

.empty-hint[b-309vrapv2c] {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    font-size: 1.5rem;
    opacity: 0.3;
    color: var(--ds-text-muted);
}

/* Responsive */
@media (max-width: 768px) {
    .week-header-row[b-309vrapv2c],
    .employee-row-grid[b-309vrapv2c] {
        grid-template-columns: 180px repeat(7, minmax(100px, 1fr));
    }
    .stk-filter-panel[b-309vrapv2c] { width: min(360px, calc(100vw - 32px)); }
}
/* /Components/Pages/Employees/Shifts/QuickAddShiftModal.razor.rz.scp.css */
.qas-body[b-vpthbcvg74] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qas-grid-2[b-vpthbcvg74] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 520px) {
    .qas-grid-2[b-vpthbcvg74] { grid-template-columns: 1fr; }
}

.qas-req[b-vpthbcvg74] { color: var(--ds-danger); }

.qas-readbox[b-vpthbcvg74] {
    padding: 10px 12px;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* Gün seçici: kapalı = beyaz/çerçeveli, açık = marka dolgusu. Tasarım
   sisteminde toggle'lar pill; 32px varsayılan düğme yüksekliğinde. */
.qas-days[b-vpthbcvg74] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qas-day[b-vpthbcvg74] {
    min-width: 46px;
    height: 32px;
    padding: 0 10px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill, 9999px);
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease),
                border-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
}

.qas-day:hover[b-vpthbcvg74] { border-color: var(--ds-border-strong); }

.qas-day.is-on[b-vpthbcvg74] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.qas-day:focus-visible[b-vpthbcvg74] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.14);
}

.qas-info[b-vpthbcvg74] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--brand-50);
    border: 1px solid var(--brand-100, rgba(3, 106, 196, 0.18));
    border-radius: var(--ds-radius-md);
}

.qas-info-ico[b-vpthbcvg74] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--brand-600);
}

.qas-info-ico[b-vpthbcvg74]  svg { width: 18px; height: 18px; }

.qas-info-title[b-vpthbcvg74] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    margin-bottom: 4px;
}

.qas-info-sub[b-vpthbcvg74] {
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    line-height: 1.5;
}

.qas-info-sub strong[b-vpthbcvg74] { color: var(--brand-700); }
/* /Components/Pages/Firms/FirmDetails.razor.rz.scp.css */
.fd-page[b-4ztmlucwph] {
    gap: 18px;
}

/* ===== Loading ===== */
.fd-loading[b-4ztmlucwph] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    color: var(--fg-2, #334155);
}

/* ===== Header ===== */
.fd-header[b-4ztmlucwph] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fd-header__avatar[b-4ztmlucwph] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--accent, #036ac4);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: "Sora", "Inter", sans-serif;
}

.fd-header__meta[b-4ztmlucwph] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fd-header__eyebrow[b-4ztmlucwph] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2, #94a3b8);
}

.fd-header__name[b-4ztmlucwph] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--fg-1, #0f172a);
    font-family: "Sora", "Inter", sans-serif;
}

.fd-header__sub[b-4ztmlucwph] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--fg-2, #334155);
}

.fd-header__id[b-4ztmlucwph] {
    font-size: 0.75rem;
    color: var(--fg-2, #64748b);
}

.fd-header__dot[b-4ztmlucwph] {
    color: var(--border-2, #cbd5e1);
}

/* ===== Tabs ===== */
.fd-tabs[b-4ztmlucwph] {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-1, #e2e8f0);
}

.fd-tab[b-4ztmlucwph] {
    position: relative;
    padding: 10px 14px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-2, #64748b);
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: color 0.2s ease, background 0.2s ease;
}

.fd-tab:hover[b-4ztmlucwph] {
    color: var(--fg-1, #0f172a);
    background: var(--bg-subtle, #f1f5f9);
}

.fd-tab.is-active[b-4ztmlucwph] {
    color: var(--accent, #036ac4);
}

.fd-tab.is-active[b-4ztmlucwph]::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent, #036ac4);
}

.fd-tab:focus-visible[b-4ztmlucwph] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: -2px;
}

/* ===== Pane ===== */
.fd-pane[b-4ztmlucwph] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Card ===== */
.fd-card[b-4ztmlucwph] {
    background: #fff;
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.05));
    padding: 20px;
}

.fd-card__head[b-4ztmlucwph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.fd-card__title[b-4ztmlucwph] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fd-card__title h2[b-4ztmlucwph] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
}

.fd-card__heading[b-4ztmlucwph] {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
}

.fd-status-edit[b-4ztmlucwph] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fd-status-edit .ds-select[b-4ztmlucwph] {
    width: 180px;
}

/* ===== Form ===== */
.fd-grid[b-4ztmlucwph] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fd-field--full[b-4ztmlucwph] {
    grid-column: 1 / -1;
}

.fd-switch-field[b-4ztmlucwph] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.fd-req[b-4ztmlucwph] {
    color: var(--danger, #ef4444);
    margin-left: 2px;
}

.fd-section-title[b-4ztmlucwph] {
    margin: 20px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-1, #e2e8f0);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
}

.fd-form-actions[b-4ztmlucwph] {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* Kaydet kapalıysa sebebi — düğmenin solunda, sessiz kalmasın. */
.fd-save-hint[b-4ztmlucwph] {
    font-size: 0.8125rem;
    color: var(--fg-hint, #64748b);
    text-align: right;
}

/* ===== Alerts ===== */
.fd-alert[b-4ztmlucwph] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-md, 8px);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.fd-alert strong[b-4ztmlucwph] { font-size: 0.875rem; }

.fd-alert--info[b-4ztmlucwph] { background: var(--accent-soft, #eff6ff); color: #1e3a8a; border: 1px solid rgba(3, 106, 196, 0.2); }
.fd-alert--warning[b-4ztmlucwph] { background: var(--warning-50, #fffbeb); color: var(--warning-600, #92400e); border: 1px solid rgba(245, 158, 11, 0.3); }
.fd-alert--success[b-4ztmlucwph] { background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); border: 1px solid rgba(34, 197, 94, 0.3); }
.fd-alert--error[b-4ztmlucwph] { background: var(--danger-50, #fef2f2); color: #991b1b; border: 1px solid rgba(239, 68, 68, 0.3); }

/* ===== Toolbar ===== */
.fd-toolbar[b-4ztmlucwph] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fd-search[b-4ztmlucwph] {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

.fd-search .ds-input[b-4ztmlucwph] { width: 100%; }

/* ===== Chips / status ===== */
.fd-chip[b-4ztmlucwph] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.fd-status--unverified[b-4ztmlucwph],
.fd-sub--pending[b-4ztmlucwph] { background: var(--warning-50, #fef3c7); color: var(--warning-600, #92400e); }
.fd-status--processing[b-4ztmlucwph] { background: var(--accent-soft, #eff6ff); color: #1e40af; }
.fd-status--verified[b-4ztmlucwph],
.fd-sub--active[b-4ztmlucwph] { background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); }
.fd-status--rejected[b-4ztmlucwph],
.fd-sub--failed[b-4ztmlucwph],
.fd-sub--cancelled[b-4ztmlucwph] { background: var(--danger-50, #fee2e2); color: #991b1b; }
.fd-sub--expired[b-4ztmlucwph] { background: var(--bg-subtle, #f1f5f9); color: var(--fg-2, #475569); }

.fd-muted[b-4ztmlucwph] { color: var(--fg-2, #64748b); font-size: 0.8125rem; }

/* ===== Subscriptions ===== */
.fd-sub-head[b-4ztmlucwph] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.fd-sub-active[b-4ztmlucwph] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--fg-2, #334155);
}

.fd-sub-actions[b-4ztmlucwph] {
    display: flex;
    gap: 8px;
}

.fd-grant[b-4ztmlucwph] {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fd-grant-row[b-4ztmlucwph] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
}

.fd-grant-actions[b-4ztmlucwph] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.fd-grant-warning[b-4ztmlucwph] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--warning-50, #fffbeb);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md, 8px);
    font-size: 0.75rem;
    color: var(--warning-600, #92400e);
}

/* ===== Table ===== */
.fd-empty[b-4ztmlucwph] {
    padding: 32px;
    text-align: center;
    color: var(--fg-2, #64748b);
    font-size: 0.875rem;
}

.fd-table-wrap[b-4ztmlucwph] {
    overflow-x: auto;
}

.fd-table[b-4ztmlucwph] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.fd-table thead th[b-4ztmlucwph] {
    padding: 10px 12px;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-2, #64748b);
    border-bottom: 1px solid var(--border-1, #e2e8f0);
}

.fd-table tbody td[b-4ztmlucwph] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-1, #e2e8f0);
    color: var(--fg-1, #0f172a);
}

.fd-table tbody tr:hover[b-4ztmlucwph] { background: var(--bg-subtle, #f1f5f9); }
.fd-table .num[b-4ztmlucwph] { text-align: right; }
.fd-table code[b-4ztmlucwph] { font-size: 0.6875rem; color: var(--fg-2, #475569); }
.fd-table__note[b-4ztmlucwph] { max-width: 240px; font-size: 0.75rem; color: var(--fg-2, #64748b); }

.fd-id-cell[b-4ztmlucwph] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== Switch ===== */
.ds-switch[b-4ztmlucwph] {
    position: relative;
    width: 36px;
    height: 20px;
    border: none;
    border-radius: 999px;
    background: var(--border-2, #cbd5e1);
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.ds-switch[b-4ztmlucwph]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.ds-switch.is-on[b-4ztmlucwph] { background: var(--success-500, #22c55e); }
.ds-switch.is-on[b-4ztmlucwph]::after { transform: translateX(16px); }
.ds-switch.is-disabled[b-4ztmlucwph] { opacity: 0.45; cursor: not-allowed; }
.ds-switch:focus-visible[b-4ztmlucwph] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }

/* ===== Responsive ===== */
@media (max-width: 760px) {
    .fd-grid[b-4ztmlucwph] { grid-template-columns: 1fr; }
    .fd-grant-row[b-4ztmlucwph] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Firms/FirmLegalDocuments.razor.rz.scp.css */
.fld-card[b-4vd4z4zxa4] {
    background: var(--bg-1, #fff);
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ===== Intro ===== */
.fld-intro__title[b-4vd4z4zxa4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fld-intro__title h2[b-4vd4z4zxa4] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
    font-family: "Sora", "Inter", sans-serif;
}

.fld-intro__desc[b-4vd4z4zxa4] {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--fg-2, #475569);
    max-width: 70ch;
}

/* ===== Loading / empty ===== */
.fld-loading[b-4vd4z4zxa4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--fg-2, #334155);
}

.fld-empty[b-4vd4z4zxa4] {
    padding: 40px;
    text-align: center;
    color: var(--fg-2, #64748b);
}

/* ===== Layout ===== */
.fld-layout[b-4vd4z4zxa4] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
    align-items: start;
}

/* ===== Doc list ===== */
.fld-list[b-4vd4z4zxa4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fld-list__item[b-4vd4z4zxa4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: 12px;
    background: var(--bg-1, #fff);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.fld-list__item:hover[b-4vd4z4zxa4] {
    background: var(--bg-subtle, #f8fafc);
}

.fld-list__item.is-active[b-4vd4z4zxa4] {
    border-color: var(--accent, #036ac4);
    background: var(--accent-subtle, #eff6ff);
}

.fld-list__item:focus-visible[b-4vd4z4zxa4] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
}

.fld-list__name[b-4vd4z4zxa4] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fg-1, #0f172a);
}

.fld-badge[b-4vd4z4zxa4] {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.fld-badge--custom[b-4vd4z4zxa4] {
    background: #dcfce7;
    color: #166534;
}

.fld-badge--default[b-4vd4z4zxa4] {
    background: var(--bg-muted, #f1f5f9);
    color: var(--fg-2, #64748b);
}

/* ===== Editor pane ===== */
.fld-editor-pane[b-4vd4z4zxa4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.fld-editor-head[b-4vd4z4zxa4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.fld-editor-head h3[b-4vd4z4zxa4] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
}

.fld-editor-head__meta[b-4vd4z4zxa4] {
    font-size: 0.75rem;
    color: var(--fg-2, #94a3b8);
}

.fld-mode-toggle[b-4vd4z4zxa4] {
    display: inline-flex;
    background: var(--bg-muted, #f1f5f9);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}

.fld-mode-btn[b-4vd4z4zxa4] {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fg-2, #64748b);
    cursor: pointer;
}

.fld-mode-btn.is-active[b-4vd4z4zxa4] {
    background: var(--bg-1, #fff);
    color: var(--accent, #036ac4);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.fld-mode-btn:focus-visible[b-4vd4z4zxa4] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 1px;
}

.fld-editor[b-4vd4z4zxa4] {
    width: 100%;
    min-height: 420px;
    resize: vertical;
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    tab-size: 2;
}

/* ===== Rendered preview ===== */
.fld-preview[b-4vd4z4zxa4] {
    min-height: 420px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px 24px;
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: 12px;
    background: var(--bg-subtle, #f8fafc);
    color: var(--fg-1, #1e293b);
    font-size: 0.875rem;
    line-height: 1.65;
}

.fld-preview h1[b-4vd4z4zxa4] { font-size: 1.35rem; margin: 0 0 12px; }
.fld-preview h2[b-4vd4z4zxa4] { font-size: 1.1rem; margin: 20px 0 8px; }
.fld-preview h3[b-4vd4z4zxa4] { font-size: 0.95rem; margin: 16px 0 6px; }
.fld-preview p[b-4vd4z4zxa4] { margin: 0 0 10px; }
.fld-preview ul[b-4vd4z4zxa4] { margin: 0 0 10px; padding-left: 20px; }
.fld-preview li[b-4vd4z4zxa4] { margin: 3px 0; }
.fld-preview strong[b-4vd4z4zxa4] { color: var(--fg-1, #0f172a); }

/* ===== Actions ===== */
.fld-actions[b-4vd4z4zxa4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--border-1, #eef2f7);
}

.fld-actions__left[b-4vd4z4zxa4],
.fld-actions__right[b-4vd4z4zxa4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fld-dirty[b-4vd4z4zxa4] {
    font-size: 0.75rem;
    color: #b45309;
    font-weight: 600;
}

/* ===== AI modal ===== */
.fld-ai-hint[b-4vd4z4zxa4] {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--fg-2, #475569);
}

.fld-ai-instructions[b-4vd4z4zxa4] {
    width: 100%;
    resize: vertical;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.fld-ai-cost[b-4vd4z4zxa4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-muted, #f1f5f9);
    font-size: 0.75rem;
    color: var(--fg-2, #475569);
}

.fld-ai-preview[b-4vd4z4zxa4] {
    min-height: unset;
    max-height: 46vh;
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
    .fld-layout[b-4vd4z4zxa4] {
        grid-template-columns: 1fr;
    }

    .fld-list[b-4vd4z4zxa4] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .fld-list__item[b-4vd4z4zxa4] {
        width: auto;
        flex: 1 1 45%;
    }
}
/* /Components/Pages/Firms/FirmSetupNew.razor.rz.scp.css */
/* =====================================================
   Firm onboarding — split-screen, micro-step setup wizard.
   Uses the app's real tokens (app.css). Type scale + motion
   tokens from the skill aren't present in app.css, so type
   sizes/weights/line-heights are raw values (matching the
   pattern in sibling pages like EmployeeLogin), and motion
   uses the --ds-ease / --ds-dur* tokens the app defines.
   ===================================================== */

.ob[b-dqrakch0dq] {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    background: var(--bg);
    font-family: var(--font-ui);
}

/* ── Brand aside ─────────────────────────────────────── */

.ob__aside[b-dqrakch0dq] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-10);
    color: var(--fg-on-brand);
    background:
        radial-gradient(circle at 80% 8%, rgba(255, 255, 255, 0.18), transparent 42%),
        linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 100%);
}

.ob__brand .brand-wordmark[b-dqrakch0dq] {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--fg-on-brand);
}

.ob__intro[b-dqrakch0dq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ob__eyebrow[b-dqrakch0dq] {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    color: var(--fg-on-brand);
}

.ob__title[b-dqrakch0dq] {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.2vw, 2.05rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--fg-on-brand);
    margin: 0;
}

.ob__subtitle[b-dqrakch0dq] {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 34ch;
}

/* Step checklist */
.ob__steps[b-dqrakch0dq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ob__step[b-dqrakch0dq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    transition: background var(--ds-dur) var(--ds-ease);
}

.ob__step--active[b-dqrakch0dq] {
    background: rgba(255, 255, 255, 0.12);
}

.ob__step-marker[b-dqrakch0dq] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 700;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.8);
    transition: background var(--ds-dur) var(--ds-ease),
                border-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
}

.ob__step--active .ob__step-marker[b-dqrakch0dq] {
    background: var(--fg-on-brand);
    border-color: var(--fg-on-brand);
    color: var(--brand-700);
}

.ob__step--done .ob__step-marker[b-dqrakch0dq] {
    background: var(--success-500);
    border-color: var(--success-500);
    color: var(--fg-on-brand);
}

.ob__step-marker[b-dqrakch0dq]  svg {
    width: 15px;
    height: 15px;
    fill: currentColor !important;
}

.ob__step-label[b-dqrakch0dq] {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.ob__step--active .ob__step-label[b-dqrakch0dq] {
    color: var(--fg-on-brand);
    font-weight: 600;
}

.ob__step--done .ob__step-label[b-dqrakch0dq] {
    color: rgba(255, 255, 255, 0.85);
}

/* Decorative vector art */
.ob__art[b-dqrakch0dq] {
    margin-top: auto;
    display: flex;
    justify-content: center;
}

.ob__art-svg[b-dqrakch0dq] {
    width: 100%;
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(0, 26, 54, 0.35));
}

/* ── Main panel ──────────────────────────────────────── */

.ob__main[b-dqrakch0dq] {
    display: flex;
    flex-direction: column;
    /* Split block/inline padding so a single bad value can't drop the whole shorthand,
       and avoid --space-16 (not defined in app.css). */
    padding-block: var(--space-8);
    padding-inline: clamp(var(--space-6), 5vw, 4rem);
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.ob__head[b-dqrakch0dq] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.ob__progress[b-dqrakch0dq] {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    overflow: hidden;
}

.ob__progress-fill[b-dqrakch0dq] {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
    transition: width var(--ds-dur) var(--ds-ease);
}

.ob__counter[b-dqrakch0dq] {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-hint);
}

/* Loading state */
.ob__state[b-dqrakch0dq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--fg-3);
}

/* Step pane */
.ob__pane[b-dqrakch0dq] {
    flex: 1;
    animation: ob-fade-b-dqrakch0dq var(--ds-dur-slow) var(--ds-ease);
}

@keyframes ob-fade-b-dqrakch0dq {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ob__pane-head[b-dqrakch0dq] {
    margin-bottom: var(--space-6);
}

.ob__pane-head h2[b-dqrakch0dq] {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin: 0 0 var(--space-2);
}

.ob__pane-head p[b-dqrakch0dq] {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--fg-3);
    margin: 0;
    max-width: 56ch;
}

.ob__success-mark[b-dqrakch0dq] {
    display: inline-flex;
    color: var(--success-500);
    margin-bottom: var(--space-3);
}

.ob__success-mark[b-dqrakch0dq]  svg {
    width: 48px;
    height: 48px;
    fill: currentColor !important;
}

/* ── Business-type cards ─────────────────────────────── */

.type-grid[b-dqrakch0dq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.type-card[b-dqrakch0dq] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    text-align: left;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--bg);
    cursor: pointer;
    transition: border-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease),
                transform var(--ds-dur-fast) var(--ds-ease),
                background var(--ds-dur) var(--ds-ease);
}

.type-card:hover[b-dqrakch0dq] {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.type-card:focus-visible[b-dqrakch0dq] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.type-card.is-selected[b-dqrakch0dq] {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: var(--shadow-lg);
}

.type-card__icon[b-dqrakch0dq] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    background: var(--accent-soft);
    color: var(--accent);
    transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}

.type-card.is-selected .type-card__icon[b-dqrakch0dq] {
    background: var(--accent);
    color: var(--fg-on-brand);
}

/* FluentIcon paints its own fill inline (defaults to accent), which beats a normal rule.
   Force it to follow the container color (!important) so the glyph turns white on the
   selected blue tile and blue on the rest. */
.type-card__icon[b-dqrakch0dq]  svg,
.type-card__icon[b-dqrakch0dq]  svg path {
    fill: currentColor !important;
}

.type-card__icon[b-dqrakch0dq]  svg {
    width: 24px;
    height: 24px;
}

.type-card__body[b-dqrakch0dq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.type-card__label[b-dqrakch0dq] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg-1);
}

.type-card__desc[b-dqrakch0dq] {
    font-size: 0.8rem;
    color: var(--fg-hint);
    line-height: 1.35;
}

.type-card__check[b-dqrakch0dq] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    color: var(--accent);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
}

.type-card.is-selected .type-card__check[b-dqrakch0dq] {
    opacity: 1;
    transform: scale(1);
}

.type-card__check[b-dqrakch0dq]  svg {
    width: 18px;
    height: 18px;
    fill: currentColor !important;
}

/* ── Form fields ─────────────────────────────────────── */

.ob__form[b-dqrakch0dq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 460px;
}

.field[b-dqrakch0dq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field__label[b-dqrakch0dq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-2);
}

.field__input[b-dqrakch0dq] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 1rem;
    color: var(--fg-1);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}

.field__input[b-dqrakch0dq]::placeholder {
    color: var(--fg-disabled);
}

.field__input:focus[b-dqrakch0dq],
.field__input:focus-visible[b-dqrakch0dq] {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field__textarea[b-dqrakch0dq] {
    resize: vertical;
    min-height: 64px;
    line-height: 1.55;
}

/* Address field + "find on map" search button side by side. */
.address-row[b-dqrakch0dq] {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.address-row .field__textarea[b-dqrakch0dq] {
    flex: 1;
    min-width: 0;
}

.address-search[b-dqrakch0dq] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    align-self: stretch;
    color: var(--fg-on-accent);
    background: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--ds-dur-fast) var(--ds-ease), opacity var(--ds-dur-fast) var(--ds-ease);
}

.address-search:hover:not(:disabled)[b-dqrakch0dq] {
    background: var(--accent-hover, var(--accent));
}

.address-search:focus-visible[b-dqrakch0dq] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.address-search:disabled[b-dqrakch0dq] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* FluentIcon paints its own accent fill inline, which matches the button's accent
   background and makes the glyph vanish — force it to follow the button color. */
.address-search[b-dqrakch0dq]  svg,
.address-search[b-dqrakch0dq]  svg path {
    fill: currentColor !important;
}

/* ── Map ─────────────────────────────────────────────── */

.map[b-dqrakch0dq] {
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--bg-muted);
}

.map__bar[b-dqrakch0dq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.map__hint[b-dqrakch0dq] {
    font-size: 0.8rem;
    color: var(--fg-hint);
    line-height: 1.3;
}

.map__canvas[b-dqrakch0dq] {
    position: relative;
    height: 300px;
}

.map__host[b-dqrakch0dq] {
    width: 100%;
    height: 100%;
}

.map__pin[b-dqrakch0dq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    color: var(--danger-500);
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.3));
}

.map__pin[b-dqrakch0dq]  svg {
    width: 32px;
    height: 32px;
    fill: currentColor !important;
}

/* ── Table stepper ───────────────────────────────────── */

.tables[b-dqrakch0dq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
    padding-top: var(--space-4);
}

.stepper[b-dqrakch0dq] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.stepper__btn[b-dqrakch0dq] {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
}

.stepper__btn:hover:not(:disabled)[b-dqrakch0dq] {
    background: var(--brand-100);
}

.stepper__btn:active:not(:disabled)[b-dqrakch0dq] {
    transform: scale(0.94);
}

.stepper__btn:focus-visible[b-dqrakch0dq] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.stepper__btn:disabled[b-dqrakch0dq] {
    opacity: 0.4;
    cursor: not-allowed;
}

.stepper__value[b-dqrakch0dq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.stepper__num[b-dqrakch0dq] {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--fg-1);
    letter-spacing: -0.02em;
}

.stepper__unit[b-dqrakch0dq] {
    font-size: 0.875rem;
    color: var(--fg-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tables__presets[b-dqrakch0dq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.tables__presets-label[b-dqrakch0dq] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-hint);
}

.tables__chips[b-dqrakch0dq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.chip[b-dqrakch0dq] {
    min-width: 44px;
    padding: 0.4rem 0.9rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-2);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--ds-dur-fast) var(--ds-ease),
                border-color var(--ds-dur-fast) var(--ds-ease),
                color var(--ds-dur-fast) var(--ds-ease);
}

.chip:hover[b-dqrakch0dq] {
    border-color: var(--brand-300);
    color: var(--fg-1);
}

.chip:focus-visible[b-dqrakch0dq] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.chip.is-selected[b-dqrakch0dq] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--fg-on-brand);
}

.chip--wide[b-dqrakch0dq] {
    padding-inline: var(--space-4);
}

.tables__note[b-dqrakch0dq] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--fg-hint);
    text-align: center;
}

/* ── Summary ─────────────────────────────────────────── */

.summary[b-dqrakch0dq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    max-width: 560px;
}

.summary__row[b-dqrakch0dq] {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-muted);
}

.summary__row dt[b-dqrakch0dq] {
    flex-shrink: 0;
    width: 140px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-hint);
    margin: 0;
}

.summary__row dd[b-dqrakch0dq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--fg-1);
    word-break: break-word;
}

/* ── Footer actions ──────────────────────────────────── */

.ob__actions[b-dqrakch0dq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: transparent;
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 900px) {
    .ob[b-dqrakch0dq] {
        grid-template-columns: 1fr;
    }

    .ob__aside[b-dqrakch0dq] {
        padding: var(--space-8) var(--space-6);
        gap: var(--space-6);
    }

    /* On narrow screens the checklist + art take too much vertical room above
       the form; keep the brand intro but hide the secondary scaffolding. */
    .ob__steps[b-dqrakch0dq],
    .ob__art[b-dqrakch0dq] {
        display: none;
    }

    .ob__main[b-dqrakch0dq] {
        padding: var(--space-6);
    }
}

@media (max-width: 520px) {
    .type-grid[b-dqrakch0dq] {
        grid-template-columns: 1fr;
    }

    .stepper[b-dqrakch0dq] {
        gap: var(--space-4);
    }

    .summary__row[b-dqrakch0dq] {
        flex-direction: column;
        gap: var(--space-1);
    }

    .summary__row dt[b-dqrakch0dq] {
        width: auto;
    }
}
/* /Components/Pages/FoodCompany/FoodCompanyDetails.razor.rz.scp.css */
.dashboard-card[b-jg59nxgg9v] {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

    .dashboard-card:hover[b-jg59nxgg9v] {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.metric-card[b-jg59nxgg9v] {
    text-align: center;
    padding: 16px;
}

.metric-value[b-jg59nxgg9v] {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 10px 0;
    color: var(--accent-fill-rest);
}

.metric-label[b-jg59nxgg9v] {
    font-size: 1rem;
    color: var(--neutral-foreground-rest);
}

.metric-icon[b-jg59nxgg9v] {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--accent-fill-rest);
}

.section-title[b-jg59nxgg9v] {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-container[b-jg59nxgg9v] {
    border-radius: 8px;
    overflow: hidden;
    height: 350px;
}

.form-container[b-jg59nxgg9v] {
    padding: 16px;
}

.action-buttons[b-jg59nxgg9v] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.tab-content[b-jg59nxgg9v] {
    padding: 16px 0;
}

.custom-grid[b-jg59nxgg9v] {
    margin-top: 16px;
}

.status-badge[b-jg59nxgg9v] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-active[b-jg59nxgg9v] {
    background-color: #e6f7e6;
    color: #2e7d32;
}

.status-inactive[b-jg59nxgg9v] {
    background-color: #ffebee;
    color: #c62828;
}
/* /Components/Pages/FreelanceDashboard/Cards/QuickActionsCard.razor.rz.scp.css */
.quick-actions-card[b-mzt2k3w0t7] {
    padding: 1.5rem;
    height: 100%;
}

.secondary-actions-grid[b-mzt2k3w0t7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

/* Mobile - stack individually and stretch */
@media (max-width: 768px) {
    .secondary-actions-grid[b-mzt2k3w0t7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/FreelanceDashboard/Cards/QuickStatsCard.razor.rz.scp.css */
.stat-card[b-zxllrieepx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--neutral-layer-1);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 250px;
}

.stat-card:hover[b-zxllrieepx] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.stat-icon[b-zxllrieepx] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon[b-zxllrieepx]  svg {
    width: 20px;
    height: 20px;
}

.stat-content[b-zxllrieepx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stat-label[b-zxllrieepx] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value[b-zxllrieepx] {
    font-size: 20px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.1;
}

.stat-description[b-zxllrieepx] {
    font-size: 10px;
    color: var(--neutral-foreground-hint);
}

/* Mobile */
@media (max-width: 767px) {
    .stat-card[b-zxllrieepx] {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        width: 100%;
        min-width: unset;
        max-width: unset;
    }

    .stat-icon[b-zxllrieepx] {
        width: 40px;
        height: 40px;
    }

    .stat-icon[b-zxllrieepx]  svg {
        width: 20px;
        height: 20px;
    }

    .stat-value[b-zxllrieepx] {
        font-size: 20px;
    }

    .stat-label[b-zxllrieepx] {
        font-size: 11px;
    }

    .stat-description[b-zxllrieepx] {
        font-size: 10px;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .stat-card[b-zxllrieepx] {
        padding: 0.5rem 0.625rem;
        gap: 0.5rem;
        min-width: 100px;
        max-width: 140px;
    }

    .stat-icon[b-zxllrieepx] {
        width: 30px;
        height: 30px;
    }

    .stat-icon[b-zxllrieepx]  svg {
        width: 15px;
        height: 15px;
    }

    .stat-value[b-zxllrieepx] {
        font-size: 15px;
    }

    .stat-label[b-zxllrieepx] {
        font-size: 8px;
    }

    .stat-description[b-zxllrieepx] {
        font-size: 7px;
    }
}

/* Small Desktop (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .stat-card[b-zxllrieepx] {
        padding: 0.5rem 0.625rem;
        gap: 0.5rem;
        min-width: 115px;
        max-width: 150px;
    }

    .stat-icon[b-zxllrieepx] {
        width: 32px;
        height: 32px;
    }

    .stat-icon[b-zxllrieepx]  svg {
        width: 16px;
        height: 16px;
    }

    .stat-value[b-zxllrieepx] {
        font-size: 16px;
    }

    .stat-label[b-zxllrieepx] {
        font-size: 9px;
    }

    .stat-description[b-zxllrieepx] {
        font-size: 8px;
    }
}

/* Medium Desktop (1280px - 1399px) */
@media (min-width: 1280px) and (max-width: 1399px) {
    .stat-card[b-zxllrieepx] {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        min-width: 145px;
        max-width: 200px;
    }

    .stat-icon[b-zxllrieepx] {
        width: 42px;
        height: 42px;
    }

    .stat-icon[b-zxllrieepx]  svg {
        width: 21px;
        height: 21px;
    }

    .stat-value[b-zxllrieepx] {
        font-size: 20px;
    }

    .stat-label[b-zxllrieepx] {
        font-size: 11px;
    }

    .stat-description[b-zxllrieepx] {
        font-size: 9px;
    }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .stat-card[b-zxllrieepx] {
        padding: 1rem 1.5rem;
        gap: 1rem;
        min-width: 180px;
        max-width: 250px;
    }

    .stat-icon[b-zxllrieepx] {
        width: 48px;
        height: 48px;
    }

    .stat-icon[b-zxllrieepx]  svg {
        width: 24px;
        height: 24px;
    }

    .stat-value[b-zxllrieepx] {
        font-size: 24px;
    }

    .stat-label[b-zxllrieepx] {
        font-size: 13px;
    }

    .stat-description[b-zxllrieepx] {
        font-size: 11px;
    }
}
/* /Components/Pages/FreelanceDashboard/FreelanceAnnouncements.razor.rz.scp.css */
.freelance-announcements-container[b-58yq6v7c2s] {
    padding: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.page-header[b-58yq6v7c2s] {
    margin-bottom: 1.5rem;
}

.loading-container[b-58yq6v7c2s] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

.empty-state[b-58yq6v7c2s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--neutral-layer-2);
    border-radius: 12px;
}

.announcements-list[b-58yq6v7c2s] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.announcement-card[b-58yq6v7c2s] {
    padding: 1rem;
    padding-left: 1.25rem;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.announcement-card:hover[b-58yq6v7c2s] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Category indicator on left edge */
.category-indicator[b-58yq6v7c2s] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 1;
}

/* Priority indicator - inline with badges */
.priority-indicator[b-58yq6v7c2s] {
    display: none;
}

/* Sticky indicator - inline with badges */
.sticky-indicator[b-58yq6v7c2s] {
    display: none;
}

.card-content-wrapper[b-58yq6v7c2s] {
    padding-right: 0;
}

.card-content-wrapper h3.card-title[b-58yq6v7c2s] {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.5rem 0;
    color: var(--neutral-foreground-rest);
}

.card-content-wrapper .card-description[b-58yq6v7c2s] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
    margin: 0 0 0.75rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta[b-58yq6v7c2s] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.meta-date[b-58yq6v7c2s] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.card-header[b-58yq6v7c2s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 8px;
}

.badges[b-58yq6v7c2s] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.date[b-58yq6v7c2s] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.card-title[b-58yq6v7c2s] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.card-description[b-58yq6v7c2s] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.card-content[b-58yq6v7c2s] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
    line-height: 1.6;
    padding-top: 0.75rem;
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* Markdown content styling */
.markdown-content[b-58yq6v7c2s] {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--neutral-foreground-rest);
}

.markdown-content h1[b-58yq6v7c2s] {
    font-size: 1.5em;
    margin: 1em 0 0.5em 0;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.markdown-content h2[b-58yq6v7c2s] {
    font-size: 1.3em;
    margin: 1em 0 0.5em 0;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.markdown-content h3[b-58yq6v7c2s] {
    font-size: 1.1em;
    margin: 0.8em 0 0.4em 0;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.markdown-content h4[b-58yq6v7c2s],
.markdown-content h5[b-58yq6v7c2s],
.markdown-content h6[b-58yq6v7c2s] {
    font-size: 1em;
    margin: 0.6em 0 0.3em 0;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.markdown-content p[b-58yq6v7c2s] {
    margin: 0.75em 0;
    line-height: 1.6;
}

.markdown-content p:first-child[b-58yq6v7c2s] {
    margin-top: 0;
}

.markdown-content p:last-child[b-58yq6v7c2s] {
    margin-bottom: 0;
}

.markdown-content ul[b-58yq6v7c2s],
.markdown-content ol[b-58yq6v7c2s] {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
    line-height: 1.5;
}

.markdown-content li[b-58yq6v7c2s] {
    margin-bottom: 0.25rem;
}

.markdown-content blockquote[b-58yq6v7c2s] {
    margin: 0.75em 0;
    padding: 0.5em 1em;
    border-left: 3px solid var(--accent-fill-rest);
    background: var(--neutral-layer-2);
    border-radius: 0 4px 4px 0;
    font-style: italic;
}

.markdown-content strong[b-58yq6v7c2s] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.markdown-content em[b-58yq6v7c2s] {
    font-style: italic;
}

.markdown-content a[b-58yq6v7c2s] {
    color: #f46d43;
    text-decoration: none;
}

.markdown-content a:hover[b-58yq6v7c2s] {
    text-decoration: underline;
}

.markdown-content code[b-58yq6v7c2s] {
    background: var(--neutral-layer-3);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-family: 'Consolas', monospace;
}

.markdown-content pre[b-58yq6v7c2s] {
    background: var(--neutral-layer-3);
    padding: 0.75rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.75rem 0;
    border: 1px solid var(--neutral-stroke-divider);
}

.markdown-content pre code[b-58yq6v7c2s] {
    background: none;
    padding: 0;
}

.card-content p[b-58yq6v7c2s] {
    margin: 0 0 0.75rem 0;
}

.card-content p:last-child[b-58yq6v7c2s] {
    margin-bottom: 0;
}

.card-content ul[b-58yq6v7c2s],
.card-content ol[b-58yq6v7c2s] {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.card-content li[b-58yq6v7c2s] {
    margin-bottom: 0.25rem;
}

.card-content a[b-58yq6v7c2s] {
    color: #f46d43;
    text-decoration: none;
}

.card-content a:hover[b-58yq6v7c2s] {
    text-decoration: underline;
}

.card-content code[b-58yq6v7c2s] {
    background: var(--neutral-layer-3);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8125rem;
}

.card-content pre[b-58yq6v7c2s] {
    background: var(--neutral-layer-3);
    padding: 0.75rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.75rem 0;
}

.card-content pre code[b-58yq6v7c2s] {
    background: none;
    padding: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .freelance-announcements-container[b-58yq6v7c2s] {
        padding: 0.75rem;
    }

    .page-header[b-58yq6v7c2s] {
        margin-bottom: 1rem;
    }

    .announcement-card[b-58yq6v7c2s] {
        padding: 0.875rem;
    }

    .card-title[b-58yq6v7c2s] {
        font-size: 1rem;
    }

    .card-description[b-58yq6v7c2s],
    .card-content[b-58yq6v7c2s] {
        font-size: 0.8125rem;
    }

    .empty-state[b-58yq6v7c2s] {
        padding: 3rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .freelance-announcements-container[b-58yq6v7c2s] {
        padding: 0.5rem;
    }

    .card-header[b-58yq6v7c2s] {
        flex-direction: column;
        gap: 6px;
    }

    .date[b-58yq6v7c2s] {
        align-self: flex-start;
    }

    .badges[b-58yq6v7c2s] {
        width: 100%;
    }
}
/* /Components/Pages/FreelanceDashboard/FreelanceCourierDeliveries.razor.rz.scp.css */
.courier-deliveries-container[b-jbgvahn9ew] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
}

@media (min-width: 1024px) {
    .courier-deliveries-container[b-jbgvahn9ew] {
        padding: 2rem;
    }
}

.page-header[b-jbgvahn9ew] {
    background: var(--neutral-layer-1);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
}

/* Metrics Grid */
.metrics-grid[b-jbgvahn9ew] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .metrics-grid[b-jbgvahn9ew] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .metrics-grid[b-jbgvahn9ew] {
        grid-template-columns: 1fr;
    }
}

.list-header[b-jbgvahn9ew] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.list-title[b-jbgvahn9ew] {
    margin: 0;
    color: #000000;
    font-weight: 600;
    font-size: 1.25rem;
}

.header-actions[b-jbgvahn9ew] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filters-card[b-jbgvahn9ew] {
    background: var(--neutral-layer-1);
    border-radius: var(--layer-corner-radius);
    box-shadow: var(--elevation-shadow-card-rest);
}

/* ============================================ */
/* DESKTOP GRID VIEW - Horizontal scroll       */
/* ============================================ */
[b-jbgvahn9ew] .desktop-grid-view {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

[b-jbgvahn9ew] .desktop-grid-view fluent-data-grid {
    min-width: max-content;
}

/* ============================================ */
/* GRID CELL STYLES - Base (1600px+)           */
/* ============================================ */
[b-jbgvahn9ew] .col-delivery-no { min-width: 130px; }
[b-jbgvahn9ew] .col-date { min-width: 140px; }
[b-jbgvahn9ew] .col-address { min-width: 280px; max-width: 400px; }
[b-jbgvahn9ew] .col-distance { min-width: 80px; }
[b-jbgvahn9ew] .col-token { min-width: 70px; }
[b-jbgvahn9ew] .col-status { min-width: 130px; }

[b-jbgvahn9ew] .cell-delivery-no {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-jbgvahn9ew] .delivery-id {
    font-weight: 600;
    color: #000000;
    font-size: 13px;
}

[b-jbgvahn9ew] .cell-text {
    font-size: 13px;
}

[b-jbgvahn9ew] .cell-address {
    line-height: 1.3;
    font-size: 12px;
    word-break: break-word;
}

[b-jbgvahn9ew] .cell-token {
    font-size: 13px;
    font-weight: 500;
    color: #16a34a;
}

[b-jbgvahn9ew] .cell-empty {
    opacity: 0.5;
}

[b-jbgvahn9ew] .status-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 13px;
}

[b-jbgvahn9ew] .status-cell svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

[b-jbgvahn9ew] .status-delivered span { color: #10b981; }
[b-jbgvahn9ew] .status-cancelled span { color: #ef4444; }
[b-jbgvahn9ew] .status-pickedup span { color: #f59e0b; }
[b-jbgvahn9ew] .status-assigned span { color: var(--app-primary-color, #3b82f6); }
[b-jbgvahn9ew] .status-pending span { color: #6b7280; }

/* ============================================ */
/* 1400px - Laptop                             */
/* ============================================ */
@media (max-width: 1400px) {
    [b-jbgvahn9ew] .col-delivery-no { min-width: 110px; }
    [b-jbgvahn9ew] .col-date { min-width: 120px; }
    [b-jbgvahn9ew] .col-address { min-width: 200px; max-width: 300px; }
    [b-jbgvahn9ew] .col-distance { min-width: 65px; }
    [b-jbgvahn9ew] .col-token { min-width: 55px; }
    [b-jbgvahn9ew] .col-status { min-width: 110px; }

    [b-jbgvahn9ew] .cell-delivery-no { gap: 6px; }
    [b-jbgvahn9ew] .cell-delivery-no svg { width: 14px; height: 14px; }
    [b-jbgvahn9ew] .delivery-id { font-size: 12px; }
    [b-jbgvahn9ew] .cell-text { font-size: 12px; }
    [b-jbgvahn9ew] .cell-address { font-size: 11px; }
    [b-jbgvahn9ew] .cell-token { font-size: 12px; }
    [b-jbgvahn9ew] .status-cell { gap: 4px; font-size: 12px; }
    [b-jbgvahn9ew] .status-cell svg { width: 12px; height: 12px; }
}

/* ============================================ */
/* 1200px - Smaller Laptop                     */
/* ============================================ */
@media (max-width: 1200px) {
    [b-jbgvahn9ew] .col-delivery-no { min-width: 95px; }
    [b-jbgvahn9ew] .col-date { min-width: 105px; }
    [b-jbgvahn9ew] .col-address { min-width: 160px; max-width: 220px; }
    [b-jbgvahn9ew] .col-distance { min-width: 55px; }
    [b-jbgvahn9ew] .col-token { min-width: 45px; }
    [b-jbgvahn9ew] .col-status { min-width: 95px; }

    [b-jbgvahn9ew] .cell-delivery-no { gap: 4px; }
    [b-jbgvahn9ew] .cell-delivery-no svg { width: 12px; height: 12px; }
    [b-jbgvahn9ew] .delivery-id { font-size: 11px; }
    [b-jbgvahn9ew] .cell-text { font-size: 11px; }
    [b-jbgvahn9ew] .cell-address { font-size: 10px; }
    [b-jbgvahn9ew] .cell-token { font-size: 11px; }
    [b-jbgvahn9ew] .status-cell { gap: 3px; font-size: 11px; }
    [b-jbgvahn9ew] .status-cell svg { width: 11px; height: 11px; }

    [b-jbgvahn9ew] .desktop-grid-view fluent-data-grid-cell {
        padding: 6px 6px;
    }
}

/* ============================================ */
/* 1024px - Tablet Landscape                   */
/* ============================================ */
@media (max-width: 1024px) {
    [b-jbgvahn9ew] .col-delivery-no { min-width: 85px; }
    [b-jbgvahn9ew] .col-date { min-width: 95px; }
    [b-jbgvahn9ew] .col-address { min-width: 140px; max-width: 180px; }
    [b-jbgvahn9ew] .col-distance { min-width: 50px; }
    [b-jbgvahn9ew] .col-token { min-width: 40px; }
    [b-jbgvahn9ew] .col-status { min-width: 85px; }

    [b-jbgvahn9ew] .cell-delivery-no svg { width: 10px; height: 10px; }
    [b-jbgvahn9ew] .delivery-id { font-size: 10px; }
    [b-jbgvahn9ew] .cell-text { font-size: 10px; }
    [b-jbgvahn9ew] .cell-address { font-size: 9px; }
    [b-jbgvahn9ew] .cell-token { font-size: 10px; }
    [b-jbgvahn9ew] .status-cell { gap: 2px; font-size: 10px; }
    [b-jbgvahn9ew] .status-cell svg { width: 10px; height: 10px; }

    [b-jbgvahn9ew] .desktop-grid-view fluent-data-grid-cell {
        padding: 4px 4px;
    }
}

/* ============================================ */
/* Mobile Card View                            */
/* ============================================ */
.mobile-card-view[b-jbgvahn9ew] {
    display: none;
    width: 100%;
}

.delivery-card[b-jbgvahn9ew] {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #000000;
    height: fit-content;
}

/* Delivery Status Badge Styles */
.delivery-status-badge[b-jbgvahn9ew] {
    display: inline-block;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.delivery-status-badge.status-delivered[b-jbgvahn9ew] {
    background-color: #10b981;
    color: white;
}

.delivery-status-badge.status-cancelled[b-jbgvahn9ew] {
    background-color: #ef4444;
    color: white;
}

.delivery-status-badge.status-pickedup[b-jbgvahn9ew] {
    background-color: #f59e0b;
    color: white;
}

.delivery-status-badge.status-assigned[b-jbgvahn9ew] {
    background-color: var(--app-primary-color, #3b82f6);
    color: white;
}

.delivery-status-badge.status-pending[b-jbgvahn9ew] {
    background-color: #6b7280;
    color: white;
}

.delivery-info-row[b-jbgvahn9ew] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.delivery-info-row:last-of-type[b-jbgvahn9ew] {
    border-bottom: none;
}

.info-label[b-jbgvahn9ew] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
}

.info-value[b-jbgvahn9ew] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ============================================ */
/* Mobile Responsive Styles                    */
/* ============================================ */
@media (max-width: 768px) {
    .courier-deliveries-container[b-jbgvahn9ew] {
        padding: 1rem;
    }

    .page-header[b-jbgvahn9ew] {
        padding: 1rem;
    }

    [b-jbgvahn9ew] .desktop-grid-view {
        display: none !important;
    }

    .mobile-card-view[b-jbgvahn9ew] {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .courier-deliveries-container[b-jbgvahn9ew] {
        padding: 0.75rem;
    }

    .page-header[b-jbgvahn9ew] {
        padding: 0.75rem;
    }

    .delivery-card[b-jbgvahn9ew] {
        padding: 0.875rem;
    }
}
/* /Components/Pages/FreelanceDashboard/FreelanceCouriers.razor.rz.scp.css */
.freelance-couriers-container[b-sf7z2v9ghv] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
}

@media (min-width: 1024px) {
    .freelance-couriers-container[b-sf7z2v9ghv] {
        padding: 2rem;
    }
}

.page-header[b-sf7z2v9ghv] {
    background: var(--neutral-layer-1);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
}

/* List Header */
.list-header[b-sf7z2v9ghv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.list-title[b-sf7z2v9ghv] {
    margin: 0;
    color: #000000;
    font-weight: 600;
    font-size: 1.25rem;
}

.header-actions[b-sf7z2v9ghv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ============================================ */
/* DESKTOP GRID VIEW - Horizontal scroll       */
/* ============================================ */
[b-sf7z2v9ghv] .desktop-grid-view {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

[b-sf7z2v9ghv] .desktop-grid-view fluent-data-grid {
    min-width: max-content;
}

/* ============================================ */
/* GRID CELL STYLES - Base (1600px+)           */
/* ============================================ */
[b-sf7z2v9ghv] .col-courier { min-width: 200px; }
[b-sf7z2v9ghv] .col-phone { min-width: 140px; }
[b-sf7z2v9ghv] .col-battery { min-width: 80px; }
[b-sf7z2v9ghv] .col-status { min-width: 120px; }
[b-sf7z2v9ghv] .col-actions { min-width: 150px; }

[b-sf7z2v9ghv] .cell-courier {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-sf7z2v9ghv] .courier-name {
    font-weight: 600;
    color: #000000;
    font-size: 13px;
}

[b-sf7z2v9ghv] .cell-text {
    font-size: 13px;
}

[b-sf7z2v9ghv] .cell-battery {
    font-size: 13px;
    font-weight: 500;
}

[b-sf7z2v9ghv] .cell-empty {
    opacity: 0.5;
}

/* Status Cell */
[b-sf7z2v9ghv] .status-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 13px;
}

[b-sf7z2v9ghv] .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

[b-sf7z2v9ghv] .status-online .status-dot {
    background-color: #28a745;
    box-shadow: 0 0 6px rgba(40, 167, 69, 0.5);
}

[b-sf7z2v9ghv] .status-online span {
    color: #28a745;
}

[b-sf7z2v9ghv] .status-onbreak .status-dot {
    background-color: #ffc107;
    box-shadow: 0 0 6px rgba(255, 193, 7, 0.5);
}

[b-sf7z2v9ghv] .status-onbreak span {
    color: #ffc107;
}

[b-sf7z2v9ghv] .status-offline .status-dot {
    background-color: #dc3545;
}

[b-sf7z2v9ghv] .status-offline span {
    color: #dc3545;
}

[b-sf7z2v9ghv] .status-unknown .status-dot {
    background-color: #6c757d;
}

[b-sf7z2v9ghv] .status-unknown span {
    color: #6c757d;
}

/* ============================================ */
/* 1400px - Laptop                             */
/* ============================================ */
@media (max-width: 1400px) {
    [b-sf7z2v9ghv] .col-courier { min-width: 180px; }
    [b-sf7z2v9ghv] .col-phone { min-width: 120px; }
    [b-sf7z2v9ghv] .col-battery { min-width: 70px; }
    [b-sf7z2v9ghv] .col-status { min-width: 100px; }
    [b-sf7z2v9ghv] .col-actions { min-width: 140px; }

    [b-sf7z2v9ghv] .cell-courier { gap: 6px; }
    [b-sf7z2v9ghv] .cell-courier svg { width: 14px; height: 14px; }
    [b-sf7z2v9ghv] .courier-name { font-size: 12px; }
    [b-sf7z2v9ghv] .cell-text { font-size: 12px; }
    [b-sf7z2v9ghv] .cell-battery { font-size: 12px; }
    [b-sf7z2v9ghv] .status-cell { gap: 4px; font-size: 12px; }
}

/* ============================================ */
/* 1200px - Smaller Laptop                     */
/* ============================================ */
@media (max-width: 1200px) {
    [b-sf7z2v9ghv] .col-courier { min-width: 160px; }
    [b-sf7z2v9ghv] .col-phone { min-width: 100px; }
    [b-sf7z2v9ghv] .col-battery { min-width: 60px; }
    [b-sf7z2v9ghv] .col-status { min-width: 90px; }
    [b-sf7z2v9ghv] .col-actions { min-width: 120px; }

    [b-sf7z2v9ghv] .cell-courier { gap: 4px; }
    [b-sf7z2v9ghv] .cell-courier svg { width: 12px; height: 12px; }
    [b-sf7z2v9ghv] .courier-name { font-size: 11px; }
    [b-sf7z2v9ghv] .cell-text { font-size: 11px; }
    [b-sf7z2v9ghv] .cell-battery { font-size: 11px; }
    [b-sf7z2v9ghv] .status-cell { gap: 3px; font-size: 11px; }

    [b-sf7z2v9ghv] .desktop-grid-view fluent-data-grid-cell {
        padding: 6px 6px;
    }
}

/* ============================================ */
/* 1024px - Tablet Landscape                   */
/* ============================================ */
@media (max-width: 1024px) {
    [b-sf7z2v9ghv] .col-courier { min-width: 140px; }
    [b-sf7z2v9ghv] .col-phone { min-width: 90px; }
    [b-sf7z2v9ghv] .col-battery { min-width: 50px; }
    [b-sf7z2v9ghv] .col-status { min-width: 80px; }
    [b-sf7z2v9ghv] .col-actions { min-width: 100px; }

    [b-sf7z2v9ghv] .cell-courier svg { width: 10px; height: 10px; }
    [b-sf7z2v9ghv] .courier-name { font-size: 10px; }
    [b-sf7z2v9ghv] .cell-text { font-size: 10px; }
    [b-sf7z2v9ghv] .cell-battery { font-size: 10px; }
    [b-sf7z2v9ghv] .status-cell { gap: 2px; font-size: 10px; }
    [b-sf7z2v9ghv] .status-dot { width: 6px; height: 6px; }

    [b-sf7z2v9ghv] .desktop-grid-view fluent-data-grid-cell {
        padding: 4px 4px;
    }
}

/* ============================================ */
/* Mobile Card View                            */
/* ============================================ */
.mobile-card-view[b-sf7z2v9ghv] {
    display: none;
    width: 100%;
}

.courier-card[b-sf7z2v9ghv] {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #000000;
    height: fit-content;
}

.courier-card-header[b-sf7z2v9ghv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.courier-card-name[b-sf7z2v9ghv] {
    font-weight: 700;
    color: #000000;
    font-size: 16px;
}

/* Status Badge Styles */
.status-badge[b-sf7z2v9ghv] {
    display: inline-block;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.status-online[b-sf7z2v9ghv] {
    background-color: #16a34a;
    color: white;
}

.status-badge.status-onbreak[b-sf7z2v9ghv] {
    background-color: #eab308;
    color: #1a1a1a;
}

.status-badge.status-offline[b-sf7z2v9ghv] {
    background-color: #dc2626;
    color: white;
}

.status-badge.status-unknown[b-sf7z2v9ghv] {
    background-color: #6b7280;
    color: white;
}

.courier-info-row[b-sf7z2v9ghv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.courier-info-row:last-of-type[b-sf7z2v9ghv] {
    border-bottom: none;
}

.info-label[b-sf7z2v9ghv] {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-hint);
}

.info-value[b-sf7z2v9ghv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ============================================ */
/* Mobile Responsive Styles                    */
/* ============================================ */
@media (max-width: 768px) {
    .freelance-couriers-container[b-sf7z2v9ghv] {
        padding: 1rem;
    }

    .page-header[b-sf7z2v9ghv] {
        padding: 1rem;
    }

    .page-header h3[b-sf7z2v9ghv] {
        font-size: 1.5rem !important;
    }

    .page-header .body[b-sf7z2v9ghv] {
        font-size: 0.875rem !important;
    }

    /* Hide desktop grid, show mobile cards */
    [b-sf7z2v9ghv] .desktop-grid-view {
        display: none !important;
    }

    .mobile-card-view[b-sf7z2v9ghv] {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .freelance-couriers-container[b-sf7z2v9ghv] {
        padding: 0.75rem;
    }

    .page-header[b-sf7z2v9ghv] {
        padding: 0.75rem;
    }

    .courier-card[b-sf7z2v9ghv] {
        padding: 0.875rem;
    }

    fluent-button[b-sf7z2v9ghv] {
        font-size: 14px !important;
    }
}
/* /Components/Pages/FreelanceDashboard/FreelanceDashboard.razor.rz.scp.css */
.freelance-dashboard-container[b-cilosjwjd8] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Dashboard Message Bar Styles */
[b-cilosjwjd8] .dashboard-message-bar {
    margin: 8px 0;
    border-radius: 6px;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

[b-cilosjwjd8] .dashboard-message-bar > div {
    max-width: 100%;
    overflow: hidden;
}

/* Announcement Bar Styles */
.announcement-bar[b-cilosjwjd8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 6px;
    margin: 8px 0;
    gap: 12px;
}

.announcement-intent-icon[b-cilosjwjd8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-content[b-cilosjwjd8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.announcement-text[b-cilosjwjd8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.announcement-text strong[b-cilosjwjd8] {
    font-size: 0.95rem;
    font-weight: 600;
}

.announcement-description[b-cilosjwjd8] {
    font-size: 0.85rem;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.announcement-actions[b-cilosjwjd8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.announcement-link[b-cilosjwjd8] {
    font-size: 0.875rem;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    background: white;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition: background 0.2s, border-color 0.2s;
}

.announcement-link:hover[b-cilosjwjd8] {
    background: #f5f5f5;
    border-color: #ccc;
    text-decoration: none;
}

.announcement-dismiss[b-cilosjwjd8] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.announcement-dismiss:hover[b-cilosjwjd8] {
    opacity: 1;
}

/* Top Bar - Quick Actions + Stats */
.top-bar[b-cilosjwjd8] {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.quick-actions-bar[b-cilosjwjd8] {
    display: flex;
    gap: 6px;
    padding: 0;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.quick-action-btn[b-cilosjwjd8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 110px;
    height: 90px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    font-size: 12px;
    font-weight: 600;
    gap: 4px;
    padding: 6px 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.quick-action-btn span[b-cilosjwjd8] {
    text-align: center;
    line-height: 1.2;
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%;
}

.quick-action-btn:hover[b-cilosjwjd8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quick-action-btn:active[b-cilosjwjd8] {
    transform: translateY(0);
}

.quick-action-btn.blue[b-cilosjwjd8] {
    background: linear-gradient(135deg, var(--app-primary-color, #3b82f6), var(--app-primary-color, #2563eb));
}

.quick-action-btn.black[b-cilosjwjd8] {
    background: linear-gradient(135deg, #000000 0%, #166534 60%);
}

.quick-action-btn.green[b-cilosjwjd8] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.quick-action-btn.purple[b-cilosjwjd8] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.quick-action-btn.outline[b-cilosjwjd8] {
    background: var(--neutral-layer-1);
    border: 2px solid #000000;
    color: #000000;
}

.quick-action-btn.outline:hover[b-cilosjwjd8] {
    background: rgba(0, 0, 0, 0.1);
}

/* Button with badge */
.quick-action-btn.has-badge[b-cilosjwjd8] {
    position: relative;
}

/* Courier availability badge */
.courier-badge[b-cilosjwjd8] {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.courier-badge.online[b-cilosjwjd8] {
    background: #22c55e;
    color: white;
}

.courier-badge.offline[b-cilosjwjd8] {
    background: #9ca3af;
    color: white;
}

/* Orders Management Section - Full Height */
.orders-management-section[b-cilosjwjd8] {
    flex: 1;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.orders-management-section > *:not(.bottom-stats-section)[b-cilosjwjd8] {
    flex: 1;
}

/* Bottom Stats Section (Mobile only) */
.bottom-stats-section[b-cilosjwjd8] {
    margin-top: 1rem;
    flex: none !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Card header styles */
[b-cilosjwjd8] .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem 0.7rem 1rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: transparent;
}

[b-cilosjwjd8] .card-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

[b-cilosjwjd8] .card-update-info {
    font-size: 11px;
    color: #999;
    font-style: italic;
    white-space: nowrap;
}

[b-cilosjwjd8] .header-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: auto;
}

[b-cilosjwjd8] .header-info-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

[b-cilosjwjd8] .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-cilosjwjd8] .refresh-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 4px;
}

[b-cilosjwjd8] .refresh-btn.loading svg {
    animation: spin-b-cilosjwjd8 0.6s linear infinite;
}

@keyframes spin-b-cilosjwjd8 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Small Desktop (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .freelance-dashboard-container[b-cilosjwjd8] {
        padding: 0rem 1rem 1rem 1rem;
    }

    .quick-action-btn[b-cilosjwjd8] {
        width: 100px;
        height: 80px;
        font-size: 12px;
        padding: 5px 8px;
        gap: 3px;
    }

    .courier-badge[b-cilosjwjd8] {
        font-size: 7px;
        padding: 2px 6px;
        top: -7px;
    }
}

/* Medium Desktop (1280px - 1399px) */
@media (min-width: 1280px) and (max-width: 1399px) {
    .freelance-dashboard-container[b-cilosjwjd8] {
        padding: 0rem 1.25rem 1.25rem 1.25rem;
    }

    .top-bar[b-cilosjwjd8] {
        flex-wrap: nowrap;
        align-items: center;
    }

    .quick-actions-bar[b-cilosjwjd8] {
        gap: 8px;
    }

    .quick-action-btn[b-cilosjwjd8] {
        width: 105px;
        height: 85px;
        font-size: 12px;
        padding: 5px 8px;
        gap: 3px;
    }

    .courier-badge[b-cilosjwjd8] {
        font-size: 8px;
        padding: 2px 7px;
        top: -7px;
    }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .freelance-dashboard-container[b-cilosjwjd8] {
        padding: 0rem 1.5rem 1.5rem 1.5rem;
    }

    .top-bar[b-cilosjwjd8] {
        flex-wrap: nowrap;
        align-items: center;
    }

    .quick-actions-bar[b-cilosjwjd8] {
        gap: 10px;
    }

    .quick-action-btn[b-cilosjwjd8] {
        width: 115px;
        height: 95px;
        font-size: 12px;
        padding: 6px 10px;
        gap: 4px;
        border-radius: 10px;
    }

    .courier-badge[b-cilosjwjd8] {
        font-size: 9px;
        padding: 2px 8px;
        top: -8px;
    }
}

/* Tablet */
@media (max-width: 1023px) and (min-width: 768px) {
    .freelance-dashboard-container[b-cilosjwjd8] {
        padding: 0.75rem;
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .top-bar[b-cilosjwjd8] {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    .quick-actions-bar[b-cilosjwjd8] {
        gap: 8px;
        flex: 1 1 auto;
    }

    .quick-action-btn[b-cilosjwjd8] {
        min-width: 80px;
        max-width: 120px;
        height: 58px;
        font-size: 8px;
        padding: 5px 6px;
        gap: 2px;
        border-radius: 7px;
    }

    .courier-badge[b-cilosjwjd8] {
        font-size: 7px;
        padding: 2px 6px;
        top: -7px;
    }

    .orders-management-section[b-cilosjwjd8] {
        min-height: 500px;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .freelance-dashboard-container[b-cilosjwjd8] {
        padding: 0.75rem;
        height: auto;
        overflow: visible;
    }

    .top-bar[b-cilosjwjd8] {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
    }

    .quick-actions-bar[b-cilosjwjd8] {
        width: 100%;
        gap: 6px;
        flex-wrap: wrap;
    }

    /* 3 buton per row: (100% - 2*6px gap) / 3 = ~31% */
    .quick-action-btn[b-cilosjwjd8] {
        width: calc((100% - 12px) / 3);
        min-width: 90px;
        max-width: 120px;
        height: 65px;
        font-size: 9px;
        padding: 4px 6px;
        gap: 3px;
        border-radius: 8px;
        flex: 0 0 auto;
    }

    .quick-action-btn span[b-cilosjwjd8] {
        font-size: 9px;
        line-height: 1.15;
    }

    .courier-badge[b-cilosjwjd8] {
        font-size: 8px;
        padding: 2px 6px;
        top: -8px;
    }

    .orders-management-section[b-cilosjwjd8] {
        min-height: 400px;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .bottom-stats-section[b-cilosjwjd8] {
        margin-top: 0.75rem;
    }
}

/* Short height screens - horizontal buttons */
@media (max-height: 720px) {
    .quick-action-btn[b-cilosjwjd8] {
        flex-direction: row;
        min-width: auto;
        max-width: none;
        width: auto;
        height: 32px;
        padding: 4px 10px;
        gap: 6px;
        font-size: 12px;
    }

    .quick-action-btn span[b-cilosjwjd8] {
        white-space: nowrap;
        font-size: 12px;
    }

    /* Smaller icons in horizontal mode */
    .quick-action-btn svg[b-cilosjwjd8],
    [b-cilosjwjd8] .quick-action-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .quick-actions-bar[b-cilosjwjd8] {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Show badge text in horizontal mode */
    .courier-badge[b-cilosjwjd8] {
        position: static;
        transform: none;
        margin-left: 4px;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    .quick-action-btn.has-badge[b-cilosjwjd8] {
        flex-direction: row;
        gap: 6px;
    }

    .top-bar[b-cilosjwjd8] {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        gap: 0.5rem;
    }

    .orders-management-section[b-cilosjwjd8] {
        min-height: 300px;
    }
}
/* /Components/Pages/FreelanceDashboard/FreelanceDeliveries.razor.rz.scp.css */
.freelance-deliveries-container[b-nqlw513p1p] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
}

@media (min-width: 1024px) {
    .freelance-deliveries-container[b-nqlw513p1p] {
        padding: 2rem;
    }
}

.page-header[b-nqlw513p1p] {
    background: var(--neutral-layer-1);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* List Header */
.list-header[b-nqlw513p1p] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.list-title[b-nqlw513p1p] {
    margin: 0;
    color: #000000;
    font-weight: 600;
    font-size: 1.25rem;
}

.header-actions[b-nqlw513p1p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ============================================ */
/* DESKTOP GRID VIEW - Horizontal scroll       */
/* ============================================ */
[b-nqlw513p1p] .desktop-grid-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

[b-nqlw513p1p] .desktop-grid-view fluent-data-grid {
    min-width: max-content;
}

/* ============================================ */
/* GRID CELL STYLES - Base (1600px+)           */
/* ============================================ */
[b-nqlw513p1p] .col-order-no { min-width: 130px; }
[b-nqlw513p1p] .col-date { min-width: 140px; }
[b-nqlw513p1p] .col-customer { min-width: 140px; }
[b-nqlw513p1p] .col-courier { min-width: 110px; }
[b-nqlw513p1p] .col-address { min-width: 280px; max-width: 400px; }
[b-nqlw513p1p] .col-arrival { min-width: 70px; text-align: center; }
[b-nqlw513p1p] .col-distance { min-width: 80px; }
[b-nqlw513p1p] .col-token { min-width: 70px; }
[b-nqlw513p1p] .col-duration { min-width: 70px; }
[b-nqlw513p1p] .col-status { min-width: 130px; }

[b-nqlw513p1p] .cell-order-no {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-nqlw513p1p] .order-id {
    font-weight: 600;
    color: #000000;
    font-size: 13px;
}

[b-nqlw513p1p] .cell-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-nqlw513p1p] .date-text {
    font-size: 13px;
    font-weight: 500;
}

[b-nqlw513p1p] .payment-method {
    font-size: 11px;
    opacity: 0.7;
}

[b-nqlw513p1p] .cell-customer {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

[b-nqlw513p1p] .cell-text {
    font-size: 13px;
}

[b-nqlw513p1p] .cell-address {
    line-height: 1.3;
    font-size: 12px;
    word-break: break-word;
}

[b-nqlw513p1p] .cell-arrival {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-primary-color, #0078d4);
}

[b-nqlw513p1p] .cell-token {
    font-size: 13px;
    font-weight: 500;
    color: #16a34a;
}

[b-nqlw513p1p] .cell-duration {
    font-size: 13px;
    font-weight: 500;
}

[b-nqlw513p1p] .cell-empty {
    opacity: 0.5;
}

[b-nqlw513p1p] .status-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 13px;
}

[b-nqlw513p1p] .status-delivered span { color: #10b981; }
[b-nqlw513p1p] .status-cancelled span { color: #ef4444; }
[b-nqlw513p1p] .status-pickedup span { color: #f59e0b; }
[b-nqlw513p1p] .status-assigned span { color: var(--app-primary-color, #3b82f6); }
[b-nqlw513p1p] .status-route-pickup span { color: #8b5cf6; }
[b-nqlw513p1p] .status-at-pickup span { color: #06b6d4; }
[b-nqlw513p1p] .status-route-delivery span { color: #000000; }
[b-nqlw513p1p] .status-at-delivery span { color: #14b8a6; }
[b-nqlw513p1p] .status-failed span { color: #dc2626; }
[b-nqlw513p1p] .status-default span { color: #6b7280; }

[b-nqlw513p1p] .status-cell svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ============================================ */
/* 1400px - Laptop                             */
/* ============================================ */
@media (max-width: 1400px) {
    [b-nqlw513p1p] .col-order-no { min-width: 110px; }
    [b-nqlw513p1p] .col-date { min-width: 120px; }
    [b-nqlw513p1p] .col-customer { min-width: 110px; }
    [b-nqlw513p1p] .col-courier { min-width: 90px; }
    [b-nqlw513p1p] .col-address { min-width: 200px; max-width: 300px; }
    [b-nqlw513p1p] .col-arrival { min-width: 60px; }
    [b-nqlw513p1p] .col-distance { min-width: 65px; }
    [b-nqlw513p1p] .col-token { min-width: 55px; }
    [b-nqlw513p1p] .col-duration { min-width: 55px; }
    [b-nqlw513p1p] .col-status { min-width: 110px; }

    [b-nqlw513p1p] .cell-order-no { gap: 6px; }
    [b-nqlw513p1p] .cell-order-no svg { width: 14px; height: 14px; }
    [b-nqlw513p1p] .order-id { font-size: 12px; }
    [b-nqlw513p1p] .date-text { font-size: 12px; }
    [b-nqlw513p1p] .payment-method { font-size: 10px; }
    [b-nqlw513p1p] .cell-customer { font-size: 12px; }
    [b-nqlw513p1p] .cell-text { font-size: 12px; }
    [b-nqlw513p1p] .cell-address { font-size: 11px; }
    [b-nqlw513p1p] .cell-arrival { font-size: 12px; }
    [b-nqlw513p1p] .cell-token { font-size: 12px; }
    [b-nqlw513p1p] .cell-duration { font-size: 12px; }
    [b-nqlw513p1p] .status-cell { gap: 4px; font-size: 12px; }
    [b-nqlw513p1p] .status-cell svg { width: 12px; height: 12px; }
}

/* ============================================ */
/* 1200px - Smaller Laptop                     */
/* ============================================ */
@media (max-width: 1200px) {
    [b-nqlw513p1p] .col-order-no { min-width: 95px; }
    [b-nqlw513p1p] .col-date { min-width: 105px; }
    [b-nqlw513p1p] .col-customer { min-width: 90px; }
    [b-nqlw513p1p] .col-courier { min-width: 80px; }
    [b-nqlw513p1p] .col-address { min-width: 160px; max-width: 220px; }
    [b-nqlw513p1p] .col-arrival { min-width: 50px; }
    [b-nqlw513p1p] .col-distance { min-width: 55px; }
    [b-nqlw513p1p] .col-token { min-width: 45px; }
    [b-nqlw513p1p] .col-duration { min-width: 50px; }
    [b-nqlw513p1p] .col-status { min-width: 95px; }

    [b-nqlw513p1p] .cell-order-no { gap: 4px; }
    [b-nqlw513p1p] .cell-order-no svg { width: 12px; height: 12px; }
    [b-nqlw513p1p] .order-id { font-size: 11px; }
    [b-nqlw513p1p] .date-text { font-size: 11px; }
    [b-nqlw513p1p] .payment-method { font-size: 9px; }
    [b-nqlw513p1p] .cell-customer { font-size: 11px; max-width: 90px; }
    [b-nqlw513p1p] .cell-text { font-size: 11px; }
    [b-nqlw513p1p] .cell-address { font-size: 10px; }
    [b-nqlw513p1p] .cell-arrival { font-size: 11px; }
    [b-nqlw513p1p] .cell-token { font-size: 11px; }
    [b-nqlw513p1p] .cell-duration { font-size: 11px; }
    [b-nqlw513p1p] .status-cell { gap: 3px; font-size: 11px; }
    [b-nqlw513p1p] .status-cell svg { width: 11px; height: 11px; }

    [b-nqlw513p1p] .desktop-grid-view fluent-data-grid-cell {
        padding: 6px 6px;
    }
}

/* ============================================ */
/* 1024px - Tablet Landscape                   */
/* ============================================ */
@media (max-width: 1024px) {
    [b-nqlw513p1p] .col-order-no { min-width: 85px; }
    [b-nqlw513p1p] .col-date { min-width: 95px; }
    [b-nqlw513p1p] .col-customer { min-width: 80px; }
    [b-nqlw513p1p] .col-courier { min-width: 70px; }
    [b-nqlw513p1p] .col-address { min-width: 140px; max-width: 180px; }
    [b-nqlw513p1p] .col-arrival { min-width: 45px; }
    [b-nqlw513p1p] .col-distance { min-width: 50px; }
    [b-nqlw513p1p] .col-token { min-width: 40px; }
    [b-nqlw513p1p] .col-duration { min-width: 45px; }
    [b-nqlw513p1p] .col-status { min-width: 85px; }

    [b-nqlw513p1p] .cell-order-no svg { width: 10px; height: 10px; }
    [b-nqlw513p1p] .order-id { font-size: 10px; }
    [b-nqlw513p1p] .date-text { font-size: 10px; }
    [b-nqlw513p1p] .payment-method { font-size: 8px; }
    [b-nqlw513p1p] .cell-customer { font-size: 10px; max-width: 80px; }
    [b-nqlw513p1p] .cell-text { font-size: 10px; }
    [b-nqlw513p1p] .cell-address { font-size: 9px; }
    [b-nqlw513p1p] .cell-arrival { font-size: 10px; }
    [b-nqlw513p1p] .cell-token { font-size: 10px; }
    [b-nqlw513p1p] .cell-duration { font-size: 10px; }
    [b-nqlw513p1p] .status-cell { gap: 2px; font-size: 10px; }
    [b-nqlw513p1p] .status-cell svg { width: 10px; height: 10px; }

    [b-nqlw513p1p] .desktop-grid-view fluent-data-grid-cell {
        padding: 4px 4px;
    }
}

@media (max-width: 768px) {
    .freelance-deliveries-container[b-nqlw513p1p] {
        padding: 1rem;
    }
}
/* /Components/Pages/FreelanceDashboard/FreelanceWallet.razor.rz.scp.css */
.freelance-wallet-container[b-5m5k4bljb0] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
}

@media (min-width: 1024px) {
    .freelance-wallet-container[b-5m5k4bljb0] {
        padding: 2rem;
    }
}

.page-header[b-5m5k4bljb0] {
    background: var(--neutral-layer-1);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Top Bar - Quick Actions + Stats (Dashboard ile aynı stil) */
.top-bar[b-5m5k4bljb0] {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex-wrap: wrap;
}

.quick-actions-bar[b-5m5k4bljb0] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--layer-corner-radius);
    align-items: center;
    flex-wrap: wrap;
}

.quick-action-btn[b-5m5k4bljb0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 85px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: white;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.quick-action-btn:hover[b-5m5k4bljb0] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quick-action-btn:active[b-5m5k4bljb0] {
    transform: translateY(0);
}

.quick-action-btn.black[b-5m5k4bljb0] {
    background: linear-gradient(135deg, #000000 0%, #166534 60%);
}

.quick-action-btn.green[b-5m5k4bljb0] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.quick-action-btn.outline[b-5m5k4bljb0] {
    background: var(--neutral-layer-1);
    border: 2px solid #000000;
    color: #000000;
}

.quick-action-btn.outline:hover[b-5m5k4bljb0] {
    background: rgba(0, 0, 0, 0.05);
}

/* Wallet Stats Wrapper - Transparan container (QuickStatsCard ile aynı stil) */
.wallet-stats-wrapper[b-5m5k4bljb0] {
    flex: 1;
    padding: 1.5rem;
    background: transparent;
    border: none;
}

.stats-grid[b-5m5k4bljb0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.stat-card[b-5m5k4bljb0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--neutral-layer-1);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-5m5k4bljb0] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-icon[b-5m5k4bljb0] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-content[b-5m5k4bljb0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label[b-5m5k4bljb0] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
}

.stat-value[b-5m5k4bljb0] {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

/* Desktop layout */
@media (min-width: 1024px) {
    .top-bar[b-5m5k4bljb0] {
        flex-wrap: nowrap;
    }

    .quick-actions-bar[b-5m5k4bljb0] {
        flex: 0 0 auto;
    }

    .wallet-stats-wrapper[b-5m5k4bljb0] {
        flex: 1;
    }
}

/* Tablet */
@media (max-width: 1023px) and (min-width: 768px) {
    .top-bar[b-5m5k4bljb0] {
        flex-direction: column;
    }

    .quick-actions-bar[b-5m5k4bljb0] {
        width: 100%;
        justify-content: center;
    }

    .wallet-stats-wrapper[b-5m5k4bljb0] {
        width: 100%;
    }

    .stats-grid[b-5m5k4bljb0] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .freelance-wallet-container[b-5m5k4bljb0] {
        padding: 1rem;
    }

    .top-bar[b-5m5k4bljb0] {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 12px;
    }

    .quick-actions-bar[b-5m5k4bljb0] {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }

    .quick-action-btn[b-5m5k4bljb0] {
        width: 95px;
        height: 75px;
        font-size: 11px;
    }

    .wallet-stats-wrapper[b-5m5k4bljb0] {
        width: 100%;
        padding: 0;
    }

    .stats-grid[b-5m5k4bljb0] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Integrations/ConfigureIntegration.razor.rz.scp.css */
/* Configure Integration — design-system surfaces + tokens */

/* ===== Header ===== */
.cfg-head[b-vawh68gwx3] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.cfg-back[b-vawh68gwx3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text-muted, #64748b);
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.cfg-back:hover[b-vawh68gwx3] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

.cfg-head__brand[b-vawh68gwx3] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cfg-head__logo[b-vawh68gwx3] {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-md, 12px);
    object-fit: contain;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    padding: 6px;
    box-sizing: border-box;
}

.cfg-head__logo--icon[b-vawh68gwx3] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 106, 196, 0.10);
    border-color: transparent;
}

.cfg-head__eyebrow[b-vawh68gwx3] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

.cfg-head__title[b-vawh68gwx3] {
    margin: 0;
    font-family: var(--ds-font-display, "Sora", sans-serif);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ds-text, #0f172a);
    line-height: 1.2;
}

/* ===== Grid ===== */
.cfg-grid[b-vawh68gwx3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .cfg-grid[b-vawh68gwx3] {
        grid-template-columns: 1fr;
    }
}

/* ===== Card ===== */
.cfg-card[b-vawh68gwx3] {
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    padding: 22px;
    box-sizing: border-box;
}

.cfg-card__head[b-vawh68gwx3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.cfg-card__head-icon[b-vawh68gwx3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-sm, 8px);
    background: rgba(3, 106, 196, 0.10);
}

.cfg-card__title[b-vawh68gwx3] {
    margin: 0;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.cfg-card__subtitle[b-vawh68gwx3] {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--ds-text-muted, #64748b);
}

.cfg-card__desc[b-vawh68gwx3] {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ds-text-muted, #475569);
}

/* ===== Form ===== */
.cfg-fields[b-vawh68gwx3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cfg-req[b-vawh68gwx3] {
    color: #dc2626;
    margin-left: 2px;
}

.cfg-field-error[b-vawh68gwx3] {
    margin-top: 4px;
    font-size: 11.5px;
    color: #dc2626;
}

.cfg-note[b-vawh68gwx3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(3, 106, 196, 0.06);
    border: 1px solid rgba(3, 106, 196, 0.20);
    border-left: 3px solid var(--brand-600, #036ac4);
    border-radius: var(--ds-radius-sm, 8px);
    font-size: 12.5px;
    color: var(--ds-text-muted, #475569);
}

.cfg-inline-loading[b-vawh68gwx3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    font-size: 13px;
    color: var(--ds-text-muted, #64748b);
}

/* ===== Actions ===== */
.cfg-actions[b-vawh68gwx3] {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--ds-border, #e2e8f0);
}

.cfg-btn[b-vawh68gwx3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm, 8px);
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.cfg-btn[b-vawh68gwx3]  svg {
    width: 16px;
    height: 16px;
}

.cfg-btn:disabled[b-vawh68gwx3] {
    opacity: 0.55;
    cursor: default;
}

.cfg-btn--primary[b-vawh68gwx3] {
    background: var(--brand-600, #036ac4);
    color: #fff;
}

.cfg-btn--primary:not(:disabled):hover[b-vawh68gwx3] {
    background: #0257a3;
}

.cfg-btn--ghost[b-vawh68gwx3] {
    background: var(--ds-surface, #fff);
    border-color: var(--ds-border, #e2e8f0);
    color: var(--ds-text, #334155);
}

.cfg-btn--ghost:not(:disabled):hover[b-vawh68gwx3] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

/* ===== Help content ===== */
.cfg-help[b-vawh68gwx3] {
    font-size: 13px;
    line-height: 1.65;
    color: var(--ds-text-muted, #334155);
    overflow-y: auto;
    max-height: 540px;
}

.cfg-help[b-vawh68gwx3]  h1,
.cfg-help[b-vawh68gwx3]  h2,
.cfg-help[b-vawh68gwx3]  h3 {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    margin: 18px 0 8px;
}

.cfg-help[b-vawh68gwx3]  h1 { font-size: 16px; }
.cfg-help[b-vawh68gwx3]  h2 { font-size: 15px; }
.cfg-help[b-vawh68gwx3]  h3 { font-size: 14px; }

.cfg-help[b-vawh68gwx3]  p { margin: 0 0 10px; }

.cfg-help[b-vawh68gwx3]  a {
    color: var(--brand-600, #036ac4);
    text-decoration: none;
}

.cfg-help[b-vawh68gwx3]  a:hover { text-decoration: underline; }

.cfg-help[b-vawh68gwx3]  code {
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: 12px;
    background: var(--ds-surface-sunken, #f1f5f9);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--ds-text, #0f172a);
}

.cfg-help[b-vawh68gwx3]  ul,
.cfg-help[b-vawh68gwx3]  ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

.cfg-help[b-vawh68gwx3]  li { margin-bottom: 4px; }

.cfg-help[b-vawh68gwx3]  img {
    max-width: 100%;
    border-radius: var(--ds-radius-sm, 8px);
    border: 1px solid var(--ds-border, #e2e8f0);
    margin: 8px 0;
}

/* ===== Not found / loading ===== */
.cfg-notfound[b-vawh68gwx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 6px;
    max-width: 460px;
    margin: 40px auto;
}

.cfg-notfound__icon[b-vawh68gwx3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    margin-bottom: 10px;
}

.cfg-notfound h2[b-vawh68gwx3] {
    margin: 0;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.cfg-notfound p[b-vawh68gwx3] {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: var(--ds-text-muted, #64748b);
}

.cfg-notfound .cfg-btn[b-vawh68gwx3] {
    flex: 0 0 auto;
}

/* ===== Sync waiting overlay ===== */
.cfg-sync-overlay[b-vawh68gwx3] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    animation: cfg-fade-in-b-vawh68gwx3 0.18s ease;
}

.cfg-sync-card[b-vawh68gwx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 100%;
    max-width: 380px;
    padding: 36px 28px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.cfg-sync-logo[b-vawh68gwx3] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--ds-radius-sm, 8px);
    margin-bottom: 2px;
}

.cfg-sync-title[b-vawh68gwx3] {
    margin: 0;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.cfg-sync-text[b-vawh68gwx3] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ds-text-muted, #475569);
}

.cfg-sync-hint[b-vawh68gwx3] {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--ds-text-subtle, #94a3b8);
}

@keyframes cfg-fade-in-b-vawh68gwx3 {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/Integrations/IntegrationAutomationModal.razor.rz.scp.css */
.iam-list[b-w5xi974epd] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.iam-row[b-w5xi974epd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    padding: var(--ds-space-3) 0;
    border-bottom: 1px solid var(--ds-border);
}
.iam-row:last-of-type[b-w5xi974epd] { border-bottom: none; }

.iam-row__text[b-w5xi974epd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.iam-row__label[b-w5xi974epd] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-text);
}

.iam-row__help[b-w5xi974epd] {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--ds-text-muted);
}

/* Minute field appears beneath its toggle row when the timed action is on */
.iam-minute[b-w5xi974epd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    margin: calc(var(--ds-space-2) * -1) 0 var(--ds-space-1);
    padding: var(--ds-space-2) var(--ds-space-3);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.iam-minute__label[b-w5xi974epd] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.iam-minute__field[b-w5xi974epd] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.iam-minute__input[b-w5xi974epd] {
    width: 96px;
    text-align: right;
}

.iam-minute__suffix[b-w5xi974epd] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.iam-note[b-w5xi974epd] {
    margin: var(--ds-space-2) 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-subtle);
}

/* /Components/Pages/Integrations/IntegrationConfigModal.razor.rz.scp.css */
/* IntegrationConfigModal — wide, responsive connection modal (design tokens only) */

/* ===== Branded header (AppModal HeaderContent slot) ===== */
.icm-head[b-8yz1g5qbkf] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 32px; /* clear the AppModal close (X) button */
    min-width: 0;
}

.icm-head__logo[b-8yz1g5qbkf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    overflow: hidden;
}

.icm-head__logo img[b-8yz1g5qbkf] {
    width: 100%;
    height: 100%;
    /* contain: platform logoları kare değil (ör. Migros Yemek geniş wordmark) — cover kırpıyordu.
       Kare logolarda contain ile cover aynı sonucu verir, bu yüzden diğerleri etkilenmez. */
    object-fit: contain;
    display: block;
}

.icm-head__logo[b-8yz1g5qbkf]  svg {
    width: 26px;
    height: 26px;
}

.icm-head__text[b-8yz1g5qbkf] {
    min-width: 0;
}

.icm-head__eyebrow[b-8yz1g5qbkf] {
    display: block;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

.icm-head__title[b-8yz1g5qbkf] {
    margin: 2px 0 0;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ds-text, #0f172a);
}

.icm-head__store[b-8yz1g5qbkf] {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--ds-text-muted, #64748b);
}

/* ===== Body layout =====
   Two-column: the grid fills the modal body height (AppModal BodyScroll is off),
   the left "Bağlantı Bilgileri" column stays put, and the right "Kurulum Rehberi"
   column scrolls on its own. Single-column: normal flow, the modal body scrolls. */
.icm-grid[b-8yz1g5qbkf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 24px;
    height: 100%;
    min-height: 0;
}

.icm-grid--single[b-8yz1g5qbkf] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    height: auto;
}

.icm-col[b-8yz1g5qbkf] {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.icm-grid--single .icm-col[b-8yz1g5qbkf] {
    overflow: visible;
}

.icm-col--guide[b-8yz1g5qbkf] {
    padding-left: 24px;
    border-left: 1px solid var(--ds-border, #e2e8f0);
}

/* Keep the guide heading anchored while its body scrolls. */
.icm-col--guide .icm-section__head[b-8yz1g5qbkf] {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 12px;
    padding-bottom: 12px;
    background: var(--ds-surface, #fff);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

/* ===== Section heads ===== */
.icm-section__head[b-8yz1g5qbkf] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.icm-section__icon[b-8yz1g5qbkf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-sm, 8px);
    background: rgba(3, 106, 196, 0.10);
}

.icm-section__icon[b-8yz1g5qbkf]  svg {
    width: 19px;
    height: 19px;
}

.icm-section__title[b-8yz1g5qbkf] {
    margin: 0;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.icm-section__sub[b-8yz1g5qbkf] {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--ds-text-muted, #64748b);
}

.icm-desc[b-8yz1g5qbkf] {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ds-text-muted, #475569);
}

/* ===== Setup guide ===== */
.icm-guide[b-8yz1g5qbkf] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ds-text-muted, #334155);
}

.icm-guide[b-8yz1g5qbkf]  h1,
.icm-guide[b-8yz1g5qbkf]  h2,
.icm-guide[b-8yz1g5qbkf]  h3 {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    margin: 16px 0 6px;
}

.icm-guide[b-8yz1g5qbkf]  h1 { font-size: 16px; }
.icm-guide[b-8yz1g5qbkf]  h2 { font-size: 15px; }
.icm-guide[b-8yz1g5qbkf]  h3 { font-size: 14px; }

/* Trim leading/trailing whitespace and collapse empty markdown blocks so the
   guide reads as one tidy column instead of widely-spaced fragments. */
.icm-guide[b-8yz1g5qbkf]  > *:first-child { margin-top: 0; }
.icm-guide[b-8yz1g5qbkf]  > *:last-child { margin-bottom: 0; }
.icm-guide[b-8yz1g5qbkf]  p:empty,
.icm-guide[b-8yz1g5qbkf]  br + br { display: none; }

.icm-guide[b-8yz1g5qbkf]  p { margin: 0 0 8px; }

.icm-guide[b-8yz1g5qbkf]  a {
    color: var(--brand-600, #036ac4);
    text-decoration: none;
}

.icm-guide[b-8yz1g5qbkf]  a:hover { text-decoration: underline; }

.icm-guide[b-8yz1g5qbkf]  code {
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: 12px;
    background: var(--ds-surface-sunken, #f1f5f9);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--ds-text, #0f172a);
}

.icm-guide[b-8yz1g5qbkf]  ul,
.icm-guide[b-8yz1g5qbkf]  ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.icm-guide[b-8yz1g5qbkf]  li { margin-bottom: 4px; }

.icm-guide[b-8yz1g5qbkf]  img {
    max-width: 100%;
    border-radius: var(--ds-radius-sm, 8px);
    border: 1px solid var(--ds-border, #e2e8f0);
    margin: 8px 0;
}

/* ===== Overlays (token confirm + sync) ===== */
.icm-overlay[b-8yz1g5qbkf] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    animation: icm-fade-in-b-8yz1g5qbkf 0.18s ease;
}

@keyframes icm-fade-in-b-8yz1g5qbkf {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* token confirm card */
.icm-confirm[b-8yz1g5qbkf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 100%;
    max-width: 380px;
    padding: 28px 26px 22px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.icm-confirm__icon[b-8yz1g5qbkf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(3, 106, 196, 0.10);
    margin-bottom: 4px;
}

.icm-confirm__title[b-8yz1g5qbkf] {
    margin: 0;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.icm-confirm__text[b-8yz1g5qbkf] {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ds-text-muted, #475569);
}

.icm-confirm__actions[b-8yz1g5qbkf] {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* sync waiting card */
.icm-sync[b-8yz1g5qbkf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 100%;
    max-width: 380px;
    padding: 36px 28px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.icm-sync__logo[b-8yz1g5qbkf] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--ds-radius-sm, 8px);
    margin-bottom: 2px;
}

.icm-sync__title[b-8yz1g5qbkf] {
    margin: 0;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.icm-sync__text[b-8yz1g5qbkf] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ds-text-muted, #475569);
}

.icm-sync__hint[b-8yz1g5qbkf] {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--ds-text-subtle, #94a3b8);
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
    /* Stacked: columns flow at natural height and the grid itself scrolls
       (the modal body scroll is off whenever a guide is present). */
    .icm-grid[b-8yz1g5qbkf] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 0;
        overflow-y: auto;
    }

    .icm-col[b-8yz1g5qbkf] {
        overflow: visible;
    }

    .icm-col--guide[b-8yz1g5qbkf] {
        padding-left: 0;
        border-left: none;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--ds-border, #e2e8f0);
    }

    /* No sticky heading once stacked — it would overlap while the grid scrolls. */
    .icm-col--guide .icm-section__head[b-8yz1g5qbkf] {
        position: static;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 16px;
    }
}
/* /Components/Pages/Integrations/IntegrationConfigPanel.razor.rz.scp.css */
.icp-fields[b-4on0uba4bi] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.icp-req[b-4on0uba4bi] {
    color: var(--danger, #ef4444);
    margin-left: 2px;
}

.icp-note[b-4on0uba4bi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-muted, #f8fafc);
    border: 1px solid var(--border-1, #e2e8f0);
    font-size: 0.8125rem;
    color: var(--fg-2, #334155);
}

.icp-empty[b-4on0uba4bi] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--fg-2, #334155);
}

/* Salt okunur (sistemin ürettiği) alan + kopyala düğmesi */
.icp-readonly[b-4on0uba4bi] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icp-readonly .ds-input[b-4on0uba4bi] {
    flex: 1;
    min-width: 0;
}

.icp-copy[b-4on0uba4bi] {
    flex-shrink: 0;
}
/* /Components/Pages/Integrations/IntegrationsIndex.razor.rz.scp.css */
/* Integration Marketplace — design-system surfaces + tokens */

.int-embedded[b-57wgt64wdt] {
    width: 100%;
}

/* ===== Header ===== */
.int-header[b-57wgt64wdt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.int-header__title[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.int-header__icon[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-md, 12px);
    background: rgba(3, 106, 196, 0.10);
}

.int-header__eyebrow[b-57wgt64wdt] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-subtle, #94a3b8);
}

.int-header__heading[b-57wgt64wdt] {
    margin: 0;
    font-family: var(--ds-font-display, "Sora", sans-serif);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ds-text, #0f172a);
    line-height: 1.2;
}

/* ===== Filters ===== */
.int-filters[b-57wgt64wdt] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.int-store-filter[b-57wgt64wdt] {
    gap: 5px;
}

.int-store-filter .ds-select[b-57wgt64wdt] {
    width: 220px;
}

.int-clear-btn[b-57wgt64wdt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #334155);
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.int-clear-btn:hover[b-57wgt64wdt] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

.int-clear-btn[b-57wgt64wdt]  svg {
    width: 16px;
    height: 16px;
}

/* ===== Marketplace ===== */
.int-marketplace[b-57wgt64wdt] {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.int-category[b-57wgt64wdt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.int-category__header[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.int-category__icon[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-md, 12px);
    background: rgba(3, 106, 196, 0.10);
}

.int-category__icon[b-57wgt64wdt]  svg {
    width: 19px;
    height: 19px;
}

.int-category__title[b-57wgt64wdt] {
    margin: 0;
    font-family: var(--ds-font-display, "Sora", sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ds-text, #0f172a);
}

.int-category__count[b-57wgt64wdt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--ds-radius-pill, 999px);
    background: rgba(3, 106, 196, 0.10);
    color: var(--brand-600, #036ac4);
    font-size: 12px;
    font-weight: 700;
}

/* thin rule to the right of the label, grouping the section */
.int-category__header[b-57wgt64wdt]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ds-border, #e2e8f0);
    margin-left: 2px;
}

/* ===== Grid ===== */
.int-grid[b-57wgt64wdt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ===== Card ===== */
.int-card[b-57wgt64wdt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    padding: 16px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.int-card:hover[b-57wgt64wdt] {
    border-color: rgba(3, 106, 196, 0.40);
    box-shadow: var(--ds-shadow-2, 0 4px 12px rgba(15, 23, 42, 0.08));
    transform: translateY(-1px);
}

/* "Coming soon" cards read as inert — muted brand, no actions. */
.int-card--soon[b-57wgt64wdt] {
    background: var(--ds-surface-alt, #f8fafc);
}

.int-card--soon:hover[b-57wgt64wdt] {
    border-color: var(--ds-border, #e2e8f0);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    transform: none;
}

.int-card--soon .int-card__logo[b-57wgt64wdt],
.int-card--soon .int-card__name[b-57wgt64wdt],
.int-card--soon .int-card__desc[b-57wgt64wdt] {
    opacity: 0.72;
}

.int-card__head[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.int-card__logo[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-alt, #f8fafc);
    overflow: hidden;
    color: var(--ds-text-subtle, #94a3b8);
}

/* Logos fill the rounded tile edge-to-edge (cover), so they don't read as a
   small square inside a rounded box. */
.int-card__logo img[b-57wgt64wdt] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.int-card__logo[b-57wgt64wdt]  svg {
    width: 22px;
    height: 22px;
}

/* ===== Status pill ===== */
.int-status[b-57wgt64wdt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--ds-radius-pill, 999px);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.int-status__dot[b-57wgt64wdt] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Connected reads on-brand (blue), not green — single-accent system. */
.int-status--connected[b-57wgt64wdt] {
    background: rgba(3, 106, 196, 0.10);
    color: var(--brand-600, #036ac4);
}

.int-status--paused[b-57wgt64wdt] {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.int-card__name[b-57wgt64wdt] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    line-height: 1.25;
}

/* Full-width, flush-left so it lines up with the logo and the footer badge —
   no indent under the logo column. */
.int-card__desc[b-57wgt64wdt] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ds-text-muted, #64748b);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Footer ===== */
.int-card__footer[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ds-border, #e2e8f0);
    margin-top: auto;
}

/* Actions always sit on one row (Ayarlar + Durdur side by side), flush-right. */
.int-card__actions[b-57wgt64wdt] {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* ===== Badges ===== */
.int-badge[b-57wgt64wdt] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--ds-radius-pill, 999px);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.int-badge--free[b-57wgt64wdt] {
    background: var(--ds-surface-sunken, #f1f5f9);
    color: var(--ds-text-muted, #64748b);
}

.int-badge--paid[b-57wgt64wdt] {
    background: rgba(3, 106, 196, 0.10);
    color: var(--brand-600, #036ac4);
}

.int-badge--soon[b-57wgt64wdt] {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

/* ===== Action buttons ===== */
.int-btn[b-57wgt64wdt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 34px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm, 8px);
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.int-btn[b-57wgt64wdt]  svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.int-btn--primary[b-57wgt64wdt] {
    background: var(--brand-600, #036ac4);
    color: #fff;
}

.int-btn--primary:hover[b-57wgt64wdt] {
    background: #0257a3;
}

.int-btn--ghost[b-57wgt64wdt] {
    background: var(--ds-surface, #fff);
    border-color: var(--ds-border, #e2e8f0);
    color: var(--ds-text, #334155);
}

.int-btn--ghost:hover[b-57wgt64wdt] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

/* ===== Empty + loading ===== */
.int-empty[b-57wgt64wdt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
}

.int-empty__icon[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ds-surface-sunken, #f1f5f9);
    color: var(--ds-text-subtle, #94a3b8);
    margin-bottom: 14px;
}

.int-empty h3[b-57wgt64wdt] {
    margin: 0 0 4px;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.int-empty p[b-57wgt64wdt] {
    margin: 0;
    font-size: 13.5px;
    color: var(--ds-text-muted, #64748b);
    max-width: 320px;
    line-height: 1.5;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .int-header[b-57wgt64wdt] {
        align-items: stretch;
    }

    .int-filters[b-57wgt64wdt] {
        width: 100%;
    }

    .int-store-filter[b-57wgt64wdt] {
        flex: 1;
    }

    .int-store-filter .ds-select[b-57wgt64wdt] {
        width: 100%;
    }

    .int-grid[b-57wgt64wdt] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Inventory/Inventory.razor.rz.scp.css */
.inventory-page[b-wnjwfyyk1c] { gap: var(--space-5); }

.page-head[b-wnjwfyyk1c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.page-head__titles[b-wnjwfyyk1c] { display: flex; flex-direction: column; gap: var(--space-2); }

.eyebrow[b-wnjwfyyk1c] {
    display: inline-block;
    align-self: flex-start;
    background: var(--accent-soft);
    color: var(--brand-600);
    font-size: var(--xs-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.page-title[b-wnjwfyyk1c] { margin: 0; font-weight: 700; color: var(--fg-1); }

.page-subtitle[b-wnjwfyyk1c] {
    margin: 0;
    max-width: 64ch;
    color: var(--fg-3);
    font-size: var(--small-size);
    line-height: 1.5;
}

.page-head__actions[b-wnjwfyyk1c] { display: flex; gap: var(--space-2); flex-wrap: nowrap; align-items: center; }
.inv-store[b-wnjwfyyk1c] { width: 220px; flex: 0 0 auto; }

/* ---------- metrics ---------- */
.inv-metrics[b-wnjwfyyk1c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

/* ---------- tabs ---------- */
.inv-tabs[b-wnjwfyyk1c] { display: flex; gap: var(--space-1); }
.inv-tab[b-wnjwfyyk1c] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--fg-2);
    font-size: var(--small-size);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.inv-tab:hover[b-wnjwfyyk1c] { border-color: var(--border-strong); }
.inv-tab.is-active[b-wnjwfyyk1c] { background: var(--accent); border-color: var(--accent); color: var(--fg-on-brand); }
.inv-tab:focus-visible[b-wnjwfyyk1c] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- filter bar (shared chrome) ---------- */
.filter-bar[b-wnjwfyyk1c] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
}
.filter-bar .ds-field[b-wnjwfyyk1c] { min-width: 150px; }
.filter-grow[b-wnjwfyyk1c] { flex: 1 1 220px; }

.ds-toolbar-btn[b-wnjwfyyk1c] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--fg-2);
    font-size: var(--small-size);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.ds-toolbar-btn:hover[b-wnjwfyyk1c] { border-color: var(--border-strong); }
.ds-toolbar-btn:focus-visible[b-wnjwfyyk1c] { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 768px) {
    .filter-bar .ds-field[b-wnjwfyyk1c], .filter-grow[b-wnjwfyyk1c] { flex: 1 1 100%; min-width: 0; }
    .inv-store[b-wnjwfyyk1c] { flex: 1 1 100%; }
}
/* /Components/Pages/Inventory/InventoryStockGrid.razor.rz.scp.css */
.ig-qty[b-cpfcaxmf8u] { font-weight: 600; color: var(--fg-1); font-variant-numeric: tabular-nums; }
/* /Components/Pages/Inventory/InventoryTransactionsGrid.razor.rz.scp.css */
.cell-stack[b-r1lvpbgjrl] { display: flex; flex-direction: column; gap: 2px; }
.cell-primary[b-r1lvpbgjrl] { font-weight: 600; color: var(--fg-1); }
.cell-secondary[b-r1lvpbgjrl] { color: var(--fg-3); font-size: var(--small-size); }
.cell-muted[b-r1lvpbgjrl] { color: var(--fg-hint); font-variant-numeric: tabular-nums; }

.tx-pill[b-r1lvpbgjrl] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--xs-size);
    font-weight: 600;
    background: var(--bg-muted);
    color: var(--fg-2);
}
.tx-pill--stockin[b-r1lvpbgjrl] { background: var(--status-success-bg); color: var(--status-success-fg); }
.tx-pill--stockout[b-r1lvpbgjrl] { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.tx-pill--wastage[b-r1lvpbgjrl] { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.tx-pill--return[b-r1lvpbgjrl] { background: var(--status-success-bg); color: var(--status-success-fg); }
.tx-pill--adjustment[b-r1lvpbgjrl] { background: var(--accent-soft); color: var(--brand-600); }
.tx-pill--production[b-r1lvpbgjrl] { background: var(--accent-soft); color: var(--brand-600); }
.tx-pill--transfer[b-r1lvpbgjrl] { background: var(--status-info-bg); color: var(--status-info-fg); }
.tx-pill--sale[b-r1lvpbgjrl] { background: var(--status-info-bg); color: var(--status-info-fg); }

.tx-change[b-r1lvpbgjrl] { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-hint); }
.tx-change.is-pos[b-r1lvpbgjrl] { color: var(--success-600); }
.tx-change.is-neg[b-r1lvpbgjrl] { color: var(--danger-600); }
/* /Components/Pages/Inventory/InvoiceStockImportPanel.razor.rz.scp.css */
.isi[b-tddv4crvsr] {
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

/* ---- Setup ---- */
.isi-setup[b-tddv4crvsr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Dropzone — mirrors the menu import (MenuTypeSelectionModal .mtm-dropzone). */
.isi-dropzone[b-tddv4crvsr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--space-6);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-muted);
    color: var(--fg-hint);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.isi-dropzone:hover[b-tddv4crvsr] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.isi-dropzone__icon[b-tddv4crvsr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}

.isi-dropzone__icon svg[b-tddv4crvsr] { width: 26px; height: 26px; }

.isi-dropzone__text[b-tddv4crvsr] {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--fg-1);
}

.isi-dropzone__btn[b-tddv4crvsr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--fg-on-brand);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    transition: filter var(--dur-fast) ease;
}

.isi-dropzone:hover .isi-dropzone__btn[b-tddv4crvsr] { filter: brightness(0.94); }
.isi-dropzone__btn svg[b-tddv4crvsr] { width: 16px; height: 16px; }

.isi-dropzone__hint[b-tddv4crvsr] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
}

/* Hide the native file input — the styled label is the click target. The input is rendered by the
   InputFile child component, so it doesn't carry this component's scope id; reach it with ::deep. */
.isi-dropzone[b-tddv4crvsr]  .isi-file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Optional free-text guidance for the extraction model */
.isi-optional[b-tddv4crvsr] {
    font-weight: 400;
    color: var(--fg-hint);
}

.isi-hint[b-tddv4crvsr] {
    display: block;
    margin-top: 6px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
}

/* Selected file chips */
.isi-files[b-tddv4crvsr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.isi-file-chip[b-tddv4crvsr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--accent);
}

.isi-file-chip > svg[b-tddv4crvsr] { flex-shrink: 0; }

.isi-file-chip__name[b-tddv4crvsr] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 500;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.isi-file-chip__size[b-tddv4crvsr] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    flex-shrink: 0;
}

.isi-file-chip__rm[b-tddv4crvsr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--fg-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.isi-file-chip__rm:hover[b-tddv4crvsr] {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
}

/* ---- Loading / empty ---- */
.isi-loading[b-tddv4crvsr], .isi-empty[b-tddv4crvsr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-4);
    color: var(--fg-hint);
    text-align: center;
}

.isi-loading p[b-tddv4crvsr], .isi-empty p[b-tddv4crvsr] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size);
}

/* ---- Preview ---- */
.isi-preview-bar[b-tddv4crvsr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.isi-selall[b-tddv4crvsr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-2);
    user-select: none;
}

.isi-count[b-tddv4crvsr] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

/* Dense table — one thin line per product so more fit in the viewport. */
.isi-table[b-tddv4crvsr] {
    --isi-cols: 24px minmax(110px, 1.5fr) minmax(110px, 1.5fr) 70px 92px 82px 116px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.isi-head[b-tddv4crvsr] {
    display: grid;
    grid-template-columns: var(--isi-cols);
    gap: var(--space-2);
    align-items: center;
    padding: 0 var(--space-2) 6px;
    border-bottom: 1px solid var(--border);
}

.isi-head span[b-tddv4crvsr] {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--fg-hint);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.isi-h-num[b-tddv4crvsr] { text-align: right; }

.isi-list[b-tddv4crvsr] {
    display: flex;
    flex-direction: column;
    max-height: 58dvh;
    overflow-y: auto;
}

.isi-row[b-tddv4crvsr] {
    display: grid;
    grid-template-columns: var(--isi-cols);
    gap: var(--space-2);
    align-items: center;
    padding: 5px var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    border-left: 3px solid transparent;
    transition: background var(--dur-fast) ease;
}

.isi-row:hover[b-tddv4crvsr] { background: var(--bg-muted); }

/* State reads from a thin left stripe + a faint tint on new rows. */
.isi-row--matched[b-tddv4crvsr] { border-left-color: var(--status-success-fg); }
.isi-row--new[b-tddv4crvsr] {
    border-left-color: var(--status-warning-fg);
    background: color-mix(in srgb, var(--status-warning-bg) 30%, transparent);
}
.isi-row--new:hover[b-tddv4crvsr] { background: color-mix(in srgb, var(--status-warning-bg) 55%, transparent); }

.isi-row.is-off[b-tddv4crvsr] { opacity: 0.45; }

.isi-row-check[b-tddv4crvsr] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Compact form controls inside the table (incl. the autocomplete's inner input). */
.isi-row .ds-input.isi-input[b-tddv4crvsr],
.isi-row .ds-select.isi-input[b-tddv4crvsr],
.isi-row[b-tddv4crvsr]  .aac-input {
    height: 32px;
    min-height: 32px;
    padding: 4px 8px;
    font-size: 0.8125rem;
}

.isi-num[b-tddv4crvsr] { text-align: right; }

.isi-cat-na[b-tddv4crvsr] {
    text-align: center;
    color: var(--fg-disabled);
    font-size: var(--small-size);
}

.isi-vh[b-tddv4crvsr] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 760px) {
    .isi-head[b-tddv4crvsr] { display: none; }
    .isi-row[b-tddv4crvsr] {
        grid-template-columns: 24px 1fr 1fr;
        row-gap: 4px;
        padding: var(--space-2);
    }
}
/* /Components/Pages/Inventory/StockOperationModal.razor.rz.scp.css */
.so-grid[b-w5rev4uapp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    align-items: end;
}
.so-col-2[b-w5rev4uapp] { grid-column: 1 / -1; }

/* Manuel / Faturadan segmented control */
.so-tabs[b-w5rev4uapp] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--space-4);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.so-tab[b-w5rev4uapp] {
    appearance: none;
    border: none;
    background: transparent;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-hint);
    cursor: pointer;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.so-tab:hover[b-w5rev4uapp] { color: var(--fg-2); }

.so-tab.is-active[b-w5rev4uapp] {
    background: var(--layer-1);
    color: var(--accent);
    box-shadow: var(--shadow-xs);
}

.so-tab:focus-visible[b-w5rev4uapp] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.so-stat[b-w5rev4uapp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
}
.so-stat--accent[b-w5rev4uapp] { background: var(--accent-soft); }
.so-stat__label[b-w5rev4uapp] { font-size: var(--small-size); color: var(--fg-hint); }
.so-stat__value[b-w5rev4uapp] { font-weight: 700; color: var(--fg-1); }

.so-diff[b-w5rev4uapp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--small-size);
    font-weight: 600;
}
.so-diff.is-pos[b-w5rev4uapp] { background: var(--status-success-bg); color: var(--status-success-fg); }
.so-diff.is-neg[b-w5rev4uapp] { background: var(--status-danger-bg); color: var(--status-danger-fg); }

.so-error[b-w5rev4uapp] {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
    border-radius: var(--radius-md);
    font-size: var(--small-size);
    font-weight: 600;
}

.so-limits[b-w5rev4uapp] {
    margin: var(--space-3) 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}
.so-limits summary[b-w5rev4uapp] {
    cursor: pointer;
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-2);
    list-style: none;
}
.so-limits summary[b-w5rev4uapp]::-webkit-details-marker { display: none; }
.so-limits[open] summary[b-w5rev4uapp] { margin-bottom: var(--space-3); }

@media (max-width: 560px) {
    .so-grid[b-w5rev4uapp] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Kiosks/KioskDetails.razor.rz.scp.css */
/* Section title styling */
.section-title-wrapper[b-lqrlnsasd1] {
    padding: 16px 16px 0 16px;
}

.section-title-heading[b-lqrlnsasd1] {
    margin: 0;
    font-size: 14px;
}

/* Description text */
.section-description[b-lqrlnsasd1] {
    padding: 8px 16px 0 16px;
    font-size: 11px;
    color: #666;
    line-height: 1.3;
}

/* Form container */
.form-wrapper[b-lqrlnsasd1] {
    padding: 12px;
}

/* Labels */
.field-label[b-lqrlnsasd1] {
    font-weight: bold;
    font-size: 12px;
}

/* Pairing key display */
.pairing-key-code[b-lqrlnsasd1] {
    background: var(--neutral-layer-2);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    flex: 1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pairing-key-button[b-lqrlnsasd1] {
    min-width: 32px;
    padding: 4px 8px;
}

/* Device identifier code */
.device-id-code[b-lqrlnsasd1] {
    background: var(--neutral-layer-2);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    display: block;
    margin-top: 4px;
}

/* Info text */
.info-text[b-lqrlnsasd1] {
    padding: 8px 0;
    font-size: 13px;
}

/* Save buttons container */
.save-buttons-container[b-lqrlnsasd1] {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* Section headings */
.section-heading[b-lqrlnsasd1] {
    font-size: 13px;
    margin-top: 8px;
}

.section-heading-large[b-lqrlnsasd1] {
    font-size: 13px;
    margin-top: 16px;
}
/* /Components/Pages/Kiosks/Kiosks.razor.rz.scp.css */
/* Filters container */
.filters-container[b-01kbifzl64] {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
}

/* Filter item wrapper */
.filter-item[b-01kbifzl64] {
    display: flex;
    flex-direction: column;
}

/* Filter labels */
.filter-label[b-01kbifzl64] {
    margin-bottom: 5px;
    font-weight: 500;
}

/* Filter selects */
.filter-select[b-01kbifzl64] {
    width: 200px;
    height: 32px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.filter-select-status[b-01kbifzl64] {
    width: 150px;
    height: 32px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Search field */
.search-field[b-01kbifzl64] {
    width: 200px;
}
/* /Components/Pages/Kiosks/KiosksGrid.razor.rz.scp.css */
/* Pairing key code block */
.pairing-key-display[b-h5ygj7ff2k] {
    background: var(--neutral-layer-2);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
}

/* Empty state text */
.empty-state-text[b-h5ygj7ff2k] {
    color: var(--neutral-foreground-hint);
}
/* /Components/Pages/Landing/About.razor.rz.scp.css */
/* About Page Styles */
.about-container[b-o7ld7dhdnc] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.about-content[b-o7ld7dhdnc] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Header Styles */
.about-header[b-o7ld7dhdnc] {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.back-link[b-o7ld7dhdnc] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-o7ld7dhdnc] {
    color: #5a67d8;
}

.about-title[b-o7ld7dhdnc] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.about-subtitle[b-o7ld7dhdnc] {
    font-size: 1.25rem;
    color: #4a5568;
    margin: 0;
}

/* Hero Section */
.hero-section[b-o7ld7dhdnc] {
    margin-bottom: 4rem;
    text-align: center;
}

.hero-content h2[b-o7ld7dhdnc] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1.5rem;
}

.hero-content p[b-o7ld7dhdnc] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.hero-stats[b-o7ld7dhdnc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.stat-item[b-o7ld7dhdnc] {
    text-align: center;
    padding: 2rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease;
}

.stat-item:hover[b-o7ld7dhdnc] {
    transform: translateY(-5px);
}

.stat-number[b-o7ld7dhdnc] {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-fill-rest);
    margin-bottom: 0.5rem;
}

.stat-label[b-o7ld7dhdnc] {
    font-size: 1rem;
    color: #4a5568;
    font-weight: 500;
}

/* Mission Section */
.mission-section[b-o7ld7dhdnc] {
    margin-bottom: 4rem;
}

.mission-grid[b-o7ld7dhdnc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.mission-item[b-o7ld7dhdnc] {
    text-align: center;
    padding: 2.5rem;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mission-item[b-o7ld7dhdnc]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-fill-rest);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.mission-item:hover[b-o7ld7dhdnc]::before {
    transform: scaleX(1);
}

.mission-item:hover[b-o7ld7dhdnc] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.mission-icon[b-o7ld7dhdnc] {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.mission-item h3[b-o7ld7dhdnc] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
}

.mission-item p[b-o7ld7dhdnc] {
    color: #4a5568;
    line-height: 1.6;
}

/* Story Section */
.story-section[b-o7ld7dhdnc] {
    margin-bottom: 4rem;
}

.story-section h2[b-o7ld7dhdnc] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 3rem;
}

.story-content[b-o7ld7dhdnc] {
    display: grid;
    gap: 4rem;
    align-items: start;
}

.story-text p[b-o7ld7dhdnc] {
    margin-bottom: 1.5rem;
    color: #4a5568;
    line-height: 1.7;
    font-size: 1.1rem;
}

.story-timeline[b-o7ld7dhdnc] {
    position: relative;
    padding-left: 2rem;
}

.story-timeline[b-o7ld7dhdnc]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-fill-rest);
}

.timeline-item[b-o7ld7dhdnc] {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 2rem;
}

.timeline-item[b-o7ld7dhdnc]::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    width: 12px;
    height: 12px;
    background: var(--accent-fill-rest);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 3px var(--accent-fill-rest);
}

.timeline-year[b-o7ld7dhdnc] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    margin-bottom: 0.5rem;
}

.timeline-content h4[b-o7ld7dhdnc] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.25rem;
}

.timeline-content p[b-o7ld7dhdnc] {
    color: #4a5568;
    font-size: 0.9rem;
    margin: 0;
}

/* Team Section */
.team-section[b-o7ld7dhdnc] {
    margin-bottom: 4rem;
}

.team-section h2[b-o7ld7dhdnc] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 1rem;
}

.team-description[b-o7ld7dhdnc] {
    text-align: center;
    color: #4a5568;
    font-size: 1.1rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.team-grid[b-o7ld7dhdnc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.team-member[b-o7ld7dhdnc] {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.team-member:hover[b-o7ld7dhdnc] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.member-avatar[b-o7ld7dhdnc] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.team-member h3[b-o7ld7dhdnc] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.member-role[b-o7ld7dhdnc] {
    color: var(--accent-fill-rest);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.member-bio[b-o7ld7dhdnc] {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Technology Section */
.technology-section[b-o7ld7dhdnc] {
    margin-bottom: 4rem;
}

.technology-section h2[b-o7ld7dhdnc] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 3rem;
}

.tech-content[b-o7ld7dhdnc] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.tech-text p[b-o7ld7dhdnc] {
    color: #4a5568;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.tech-features[b-o7ld7dhdnc] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-features li[b-o7ld7dhdnc] {
    color: #4a5568;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.tech-stack[b-o7ld7dhdnc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.tech-item[b-o7ld7dhdnc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.tech-item:hover[b-o7ld7dhdnc] {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.tech-icon[b-o7ld7dhdnc] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.tech-name[b-o7ld7dhdnc] {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.9rem;
}

/* Contact CTA */
.contact-cta[b-o7ld7dhdnc] {
    text-align: center;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: var(--accent-fill-rest);
    border-radius: 16px;
    color: white;
}

.contact-cta h2[b-o7ld7dhdnc] {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.contact-cta p[b-o7ld7dhdnc] {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-buttons[b-o7ld7dhdnc] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-primary[b-o7ld7dhdnc] {
    padding: 1rem 2rem;
    background: white;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary:hover[b-o7ld7dhdnc] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.btn-secondary[b-o7ld7dhdnc] {
    padding: 1rem 2rem;
    background: transparent;
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-secondary:hover[b-o7ld7dhdnc] {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .story-content[b-o7ld7dhdnc] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .tech-content[b-o7ld7dhdnc] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-stats[b-o7ld7dhdnc] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .about-container[b-o7ld7dhdnc] {
        padding: 1rem 0.5rem;
    }

    .about-content[b-o7ld7dhdnc] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .about-title[b-o7ld7dhdnc] {
        font-size: 2.5rem;
    }

    .mission-grid[b-o7ld7dhdnc] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .team-grid[b-o7ld7dhdnc] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }

    .tech-stack[b-o7ld7dhdnc] {
        grid-template-columns: 1fr;
    }

    .cta-buttons[b-o7ld7dhdnc] {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .cta-buttons a[b-o7ld7dhdnc] {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .about-container[b-o7ld7dhdnc] {
        padding: 0.5rem 0.25rem;
    }

    .about-content[b-o7ld7dhdnc] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .about-title[b-o7ld7dhdnc] {
        font-size: 2rem;
    }

    .hero-stats[b-o7ld7dhdnc] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-item[b-o7ld7dhdnc] {
        padding: 1.5rem;
    }

    .mission-item[b-o7ld7dhdnc] {
        padding: 2rem;
    }

    .team-member[b-o7ld7dhdnc] {
        padding: 1.5rem;
    }
} 
/* /Components/Pages/Landing/Applications.razor.rz.scp.css */
/* Applications Page Styles */
.applications-container[b-mgx5u1udit] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.applications-content[b-mgx5u1udit] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Header Styles */
.applications-header[b-mgx5u1udit] {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.back-link[b-mgx5u1udit] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-mgx5u1udit] {
    color: #5a67d8;
}

.applications-title[b-mgx5u1udit] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.applications-subtitle[b-mgx5u1udit] {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 2rem;
}

/* Section Styles */
.mobile-apps-section[b-mgx5u1udit],
.extensions-section[b-mgx5u1udit] {
    margin-bottom: 4rem;
}

.mobile-apps-section h2[b-mgx5u1udit],
.extensions-section h2[b-mgx5u1udit] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 1rem;
}

.section-description[b-mgx5u1udit] {
    color: #4a5568;
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.apps-grid[b-mgx5u1udit] {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.app-card[b-mgx5u1udit] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    max-width: 600px;
    width: 100%;
}

.app-card[b-mgx5u1udit]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-fill-rest), #5a67d8);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.app-card:hover[b-mgx5u1udit]::before {
    transform: scaleX(1);
}

.app-card:hover[b-mgx5u1udit] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
}

/* App Header */
.app-header[b-mgx5u1udit] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.app-icon[b-mgx5u1udit] {
    width: 60px;
    height: 60px;
    background-image: url('assets/employee-app-icon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    flex-shrink: 0;
}

.app-icon .icon[b-mgx5u1udit] {
    display: none;
}

.app-info[b-mgx5u1udit] {
    flex: 1;
}

.app-title[b-mgx5u1udit] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.app-description[b-mgx5u1udit] {
    color: #4a5568;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Screenshots Carousel */
.app-screenshots[b-mgx5u1udit] {
    margin-bottom: 2rem;
}

.screenshots-carousel[b-mgx5u1udit] {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #f8fafc;
    padding: 1rem;
}

.screenshot-container[b-mgx5u1udit] {
    display: flex;
    transition: transform 0.5s ease;
    gap: 1rem;
}

.screenshot[b-mgx5u1udit] {
    width: calc(100% / 2 - 0.5rem);
    height: 500px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    background: white;
}

/* Carousel Navigation */
.carousel-nav[b-mgx5u1udit] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}

.carousel-btn.prev[b-mgx5u1udit] {
    position: absolute;
    left: 0.5rem;
    pointer-events: all;
}

.carousel-btn.next[b-mgx5u1udit] {
    position: absolute;
    right: 0.5rem;
    pointer-events: all;
}

.carousel-btn[b-mgx5u1udit] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--accent-fill-rest);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    pointer-events: all;
}

.carousel-btn:hover[b-mgx5u1udit] {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: var(--accent-fill-hover);
}

/* Carousel Dots */
.carousel-dots[b-mgx5u1udit] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dot[b-mgx5u1udit] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active[b-mgx5u1udit] {
    background: var(--accent-fill-rest);
    transform: scale(1.2);
}

.dot:hover[b-mgx5u1udit] {
    background: #a0aec0;
}


.app-features[b-mgx5u1udit] {
    margin-bottom: 2.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.feature-section[b-mgx5u1udit] {
    margin-bottom: 0;
}

.feature-section-title[b-mgx5u1udit] {
    font-size: 1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.feature-item[b-mgx5u1udit] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.feature-check[b-mgx5u1udit] {
    color: #48bb78;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Download Section */
.download-section[b-mgx5u1udit] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.download-buttons[b-mgx5u1udit] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    align-items: flex-start;
}

.store-badge-btn[b-mgx5u1udit] {
    display: block;
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

.store-badge-btn:hover[b-mgx5u1udit] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.store-badge[b-mgx5u1udit] {
    height: 60px;
    width: auto;
    display: block;
}

/* QR Section */
.qr-section[b-mgx5u1udit] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.qr-code[b-mgx5u1udit] {
    width: 120px;
    height: 120px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 8px;
}

.qr-code:hover[b-mgx5u1udit] {
    border-color: var(--accent-fill-rest);
    background: #f0f4ff;
}

.qr-placeholder[b-mgx5u1udit] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-label[b-mgx5u1udit] {
    font-size: 0.75rem;
    color: #718096;
    font-weight: 500;
}

/* Extensions Section */
.extensions-section[b-mgx5u1udit] {
    padding: 6rem 2rem;
    background: #f7fafc;
    width: 100%;
}

.extensions-grid[b-mgx5u1udit] {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 3rem auto 0;
}

.extension-card[b-mgx5u1udit] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.extension-card[b-mgx5u1udit]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4285f4, #0f9d58, #f4b400, #ea4335);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.extension-card:hover[b-mgx5u1udit]::before {
    transform: scaleX(1);
}

.extension-card:hover[b-mgx5u1udit] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #4285f4;
}

/* Extension Header */
.extension-header[b-mgx5u1udit] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.extension-icon[b-mgx5u1udit] {
    width: 60px;
    height: 60px;
    background-image: url('assets/employee-app-icon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
    flex-shrink: 0;
}

.extension-icon .icon[b-mgx5u1udit] {
    display: none;
}

.extension-info[b-mgx5u1udit] {
    flex: 1;
}

.extension-title[b-mgx5u1udit] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.extension-description[b-mgx5u1udit] {
    color: #4a5568;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 0.9rem;
}

.extension-features[b-mgx5u1udit] {
    margin-bottom: 2.5rem;
}

/* Browser Buttons */
.extension-download[b-mgx5u1udit] {
    display: flex;
    justify-content: center;
}

.browser-buttons[b-mgx5u1udit] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.browser-btn[b-mgx5u1udit] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: white;
    color: #1a202c;
    text-decoration: none;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    font-weight: 600;
    min-width: 180px;
}

.browser-btn:hover[b-mgx5u1udit] {
    border-color: var(--accent-fill-rest);
    background: #f0f4ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.browser-btn.chrome:hover[b-mgx5u1udit] {
    border-color: #4285f4;
    background: #f0f4ff;
}

.browser-btn.edge:hover[b-mgx5u1udit] {
    border-color: #0078d4;
    background: #f0f8ff;
}

.browser-btn img[b-mgx5u1udit] {
    width: 32px;
    height: 32px;
}

.browser-label[b-mgx5u1udit] {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.8;
}

.browser-platform[b-mgx5u1udit] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .apps-grid[b-mgx5u1udit] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .download-section[b-mgx5u1udit] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .download-buttons[b-mgx5u1udit] {
        flex-direction: row;
    }
    
    .qr-section[b-mgx5u1udit] {
        flex-direction: row;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .applications-content[b-mgx5u1udit] {
        padding: 2rem;
    }
    
    .applications-title[b-mgx5u1udit] {
        font-size: 2.5rem;
    }
    
    .mobile-apps-section[b-mgx5u1udit],
    .extensions-section[b-mgx5u1udit] {
        padding: 4rem 1rem;
    }
    
    .app-card[b-mgx5u1udit],
    .extension-card[b-mgx5u1udit] {
        padding: 2rem;
    }
    
    .app-header[b-mgx5u1udit],
    .extension-header[b-mgx5u1udit] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    
    .app-icon[b-mgx5u1udit],
    .extension-icon[b-mgx5u1udit] {
        width: 80px;
        height: 80px;
    }
    
    /* Mobile carousel shows 1 image */
    .screenshot[b-mgx5u1udit] {
        width: calc(100% - 0rem);
        height: 400px;
    }
    
    .app-features[b-mgx5u1udit] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .download-buttons[b-mgx5u1udit] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .browser-buttons[b-mgx5u1udit] {
        flex-direction: column;
        width: 100%;
    }
    
    .browser-btn[b-mgx5u1udit] {
        min-width: auto;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-title[b-mgx5u1udit] {
        font-size: 2rem;
    }
    
    .apps-grid[b-mgx5u1udit] {
        grid-template-columns: 1fr;
    }
    
    .app-card[b-mgx5u1udit],
    .extension-card[b-mgx5u1udit] {
        padding: 1.5rem;
    }
    
    .download-section[b-mgx5u1udit] {
        gap: 1rem;
    }
}

/* Contact Section */
.contact-section[b-mgx5u1udit] {
    text-align: center;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: var(--accent-fill-rest);
    border-radius: 16px;
    color: white;
    margin-top: 4rem;
}

.contact-section h2[b-mgx5u1udit] {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.contact-section p[b-mgx5u1udit] {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.contact-buttons[b-mgx5u1udit] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-primary[b-mgx5u1udit] {
    padding: 1rem 2rem;
    background: white;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary:hover[b-mgx5u1udit] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.btn-secondary[b-mgx5u1udit] {
    padding: 1rem 2rem;
    background: transparent;
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-secondary:hover[b-mgx5u1udit] {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}
/* ===== Masaüstü uygulaması bölümü (download endpoint + PWA + ek kurulumlar) ===== */
.desktop-app-section[b-mgx5u1udit] {
    margin-bottom: 4rem;
}

.desktop-app-section h2[b-mgx5u1udit] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 1rem;
}

.desktop-card[b-mgx5u1udit] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    max-width: 720px;
    margin: 0 auto;
}

.desktop-card__main[b-mgx5u1udit] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.desktop-card__icon[b-mgx5u1udit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--accent-soft, rgba(3, 106, 196, 0.1));
    flex-shrink: 0;
}

.desktop-card__icon .icon[b-mgx5u1udit] {
    font-size: 32px;
    line-height: 1;
}

.desktop-card__actions[b-mgx5u1udit] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 240px;
}

.desktop-dl-btn[b-mgx5u1udit],
.desktop-pwa-btn[b-mgx5u1udit] {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0.75rem 1.35rem;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.desktop-dl-btn[b-mgx5u1udit] {
    background: var(--accent, #036ac4);
    color: #fff;
    border-color: var(--accent, #036ac4);
}

.desktop-dl-btn:hover[b-mgx5u1udit] {
    transform: translateY(-2px);
    opacity: 0.95;
}

.desktop-dl-btn__title[b-mgx5u1udit] {
    font-size: 0.95rem;
    font-weight: 600;
}

.desktop-dl-btn__hint[b-mgx5u1udit] {
    font-size: 0.75rem;
    opacity: 0.85;
}

.desktop-pwa-btn[b-mgx5u1udit] {
    background: #fff;
    color: var(--accent, #036ac4);
    border-color: #e2e8f0;
}

.desktop-pwa-btn:hover[b-mgx5u1udit] {
    transform: translateY(-2px);
    background: var(--accent-soft, rgba(3, 106, 196, 0.08));
    border-color: var(--accent, #036ac4);
}

.desktop-pwa-btn__title[b-mgx5u1udit] {
    font-size: 0.95rem;
    font-weight: 600;
}

.desktop-pwa-btn__hint[b-mgx5u1udit] {
    font-size: 0.75rem;
    opacity: 0.75;
}

.desktop-dl-btn:focus-visible[b-mgx5u1udit],
.desktop-pwa-btn:focus-visible[b-mgx5u1udit] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 3px;
}

.desktop-extras[b-mgx5u1udit] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

.desktop-extras__title[b-mgx5u1udit] {
    margin: 0 0 2px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a202c;
}

.desktop-extras__subtitle[b-mgx5u1udit] {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    color: #718096;
}

.desktop-extra[b-mgx5u1udit] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
}

.desktop-extra + .desktop-extra[b-mgx5u1udit] {
    border-top: 1px solid #f1f4f7;
}

.desktop-extra__meta[b-mgx5u1udit] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.desktop-extra__meta strong[b-mgx5u1udit] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a202c;
}

.desktop-extra__meta small[b-mgx5u1udit] {
    font-size: 0.78rem;
    line-height: 1.4;
    color: #4a5568;
}

.desktop-extra__dl[b-mgx5u1udit] {
    flex-shrink: 0;
    padding: 0.5rem 1.1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: var(--accent, #036ac4);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.desktop-extra__dl:hover[b-mgx5u1udit] {
    background: var(--accent-soft, rgba(3, 106, 196, 0.08));
    border-color: var(--accent, #036ac4);
}

.desktop-extra__dl:focus-visible[b-mgx5u1udit] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .desktop-card[b-mgx5u1udit] {
        padding: 1.5rem;
    }

    .desktop-card__actions[b-mgx5u1udit] {
        min-width: 0;
        width: 100%;
    }

    .desktop-dl-btn[b-mgx5u1udit],
    .desktop-pwa-btn[b-mgx5u1udit] {
        flex: 1;
    }

    .desktop-extra[b-mgx5u1udit] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Landing/BusinessCalculator.razor.rz.scp.css */
/* Business Calculator - Landing ile Uyumlu */

/* Container & Layout */
.calculator-container[b-ejjshlu6nm] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.calculator-content[b-ejjshlu6nm] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

/* Header Section */
.calculator-header[b-ejjshlu6nm] {
    text-align: center;
    margin-bottom: 3rem;
}

.calculator-header h1[b-ejjshlu6nm] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.calculator-header p[b-ejjshlu6nm] {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 2rem;
}

/* Progress Indicator */
.progress-indicator[b-ejjshlu6nm] {
    max-width: 600px;
    margin: 0 auto;
}

.progress-bar-container[b-ejjshlu6nm] {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-bar-fill[b-ejjshlu6nm] {
    height: 100%;
    background: var(--accent-fill-rest);
    border-radius: 8px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text[b-ejjshlu6nm] {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5568;
}

/* Wizard Container */
.wizard-container[b-ejjshlu6nm] {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

/* Step Content */
.step-content[b-ejjshlu6nm] {
    min-height: 400px;
    animation: fadeIn-b-ejjshlu6nm 0.5s ease-out;
}

@keyframes fadeIn-b-ejjshlu6nm {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-header[b-ejjshlu6nm] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    text-align: left;
    margin-bottom: 2rem;
}

.step-header-icon[b-ejjshlu6nm] {
    flex-shrink: 0;
}

.step-header-content[b-ejjshlu6nm] {
    flex: 1;
}

.step-header h2[b-ejjshlu6nm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 0.5rem 0;
}

.step-header p[b-ejjshlu6nm] {
    font-size: 1rem;
    color: #4a5568;
    margin: 0;
}

/* Form Inputs */
.form-inputs[b-ejjshlu6nm] {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Slider Value Display */
.slider-value[b-ejjshlu6nm] {
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 8px;
    font-size: 1rem;
    color: #1a202c;
}

.input-group[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group label[b-ejjshlu6nm] {
    font-weight: 600;
    color: #2d3748;
    font-size: 1rem;
}

.input-group small[b-ejjshlu6nm] {
    font-size: 0.875rem;
    color: #718096;
    margin-top: 0.25rem;
}

.checkbox-group[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-list[b-ejjshlu6nm] {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.radio-group[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-group label[b-ejjshlu6nm] {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

/* Business Type Cards */
.options-grid[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.options-grid.single-row[b-ejjshlu6nm] {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.option-card[b-ejjshlu6nm] {
    padding: 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    background: white;
}

.option-card:hover[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.option-card.selected[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    background: rgba(102, 126, 234, 0.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.option-card h3[b-ejjshlu6nm] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    color: #1a202c;
}

.option-card p[b-ejjshlu6nm] {
    font-size: 0.875rem;
    color: #718096;
    margin: 0;
    line-height: 1.5;
}

/* Platform Selection */
.platform-selection[b-ejjshlu6nm] {
    max-width: 800px;
    margin: 0 auto;
}

.platforms-detail[b-ejjshlu6nm] {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.platform-item[b-ejjshlu6nm] {
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f7fafc;
}

.courier-type-selection[b-ejjshlu6nm] {
    margin-top: 1rem;
    margin-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.courier-type-selection label[b-ejjshlu6nm] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #2d3748;
}

.input-group.small[b-ejjshlu6nm] {
    margin-top: 0.75rem;
}

/* Wizard Actions */
.wizard-actions[b-ejjshlu6nm] {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
    justify-content: space-between;
}

.wizard-actions .spacer[b-ejjshlu6nm] {
    flex: 1;
}

/* Results Container */
.results-container[b-ejjshlu6nm] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Parameters Summary */
.parameters-summary[b-ejjshlu6nm] {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 3rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.parameters-summary h3[b-ejjshlu6nm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1.5rem;
    text-align: center;
}

.parameters-grid[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.param-item[b-ejjshlu6nm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border-left: 3px solid var(--accent-fill-rest);
}

.param-label[b-ejjshlu6nm] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4a5568;
}

.param-value[b-ejjshlu6nm] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a202c;
}

.param-item.editable[b-ejjshlu6nm] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--accent-fill-rest);
    transition: all 0.2s ease;
}

.param-item.editable:hover[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.param-unit[b-ejjshlu6nm] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4a5568;
    margin-left: 0.5rem;
}

.results-header[b-ejjshlu6nm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    gap: 2rem;
}

.results-header-content[b-ejjshlu6nm] {
    flex: 1;
    text-align: left;
}

.results-header h1[b-ejjshlu6nm] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 1rem;
}

.results-header p[b-ejjshlu6nm] {
    font-size: 1.125rem;
    color: #4a5568;
}

/* Comparison Section */
.comparison-section[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: start;
}

.comparison-card[b-ejjshlu6nm] {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.comparison-card.before[b-ejjshlu6nm] {
    border-color: #fc8181;
}

.comparison-card.after[b-ejjshlu6nm] {
    border-color: #68d391;
}

.comparison-card .card-header[b-ejjshlu6nm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.comparison-card h2[b-ejjshlu6nm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
}

.comparison-arrow[b-ejjshlu6nm] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-fill-rest);
}

.metrics[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metric-with-explanation[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.metric[b-ejjshlu6nm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f7fafc;
    border-radius: 8px;
}

.metric-label[b-ejjshlu6nm] {
    font-size: 0.875rem;
    color: #4a5568;
    font-weight: 500;
}

.metric-value[b-ejjshlu6nm] {
    font-size: 1.125rem;
    font-weight: 700;
}

.metric-value.cost[b-ejjshlu6nm] {
    color: #e53e3e;
}

.metric-value.savings[b-ejjshlu6nm] {
    color: #38a169;
}

.metric-value.negative[b-ejjshlu6nm] {
    color: #e53e3e;
}

.metric-value.positive[b-ejjshlu6nm] {
    color: #38a169;
}

.metric-explanation[b-ejjshlu6nm] {
    font-size: 0.75rem;
    color: #718096;
    font-style: italic;
    padding-left: 0.75rem;
    line-height: 1.4;
}

/* Savings Highlight */
.savings-highlight[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.savings-card[b-ejjshlu6nm] {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    border: 2px solid var(--accent-fill-rest);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.savings-card.annual[b-ejjshlu6nm] {
    border-color: #ed8936;
}

.savings-content h3[b-ejjshlu6nm] {
    font-size: 1rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.savings-amount[b-ejjshlu6nm] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 0.25rem;
}

.savings-percentage[b-ejjshlu6nm],
.savings-note[b-ejjshlu6nm] {
    font-size: 0.875rem;
    color: #718096;
}

/* Feature Recommendations */
.recommendations-section[b-ejjshlu6nm] {
    margin-bottom: 3rem;
}

.section-header[b-ejjshlu6nm] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-header h2[b-ejjshlu6nm] {
    font-size: 2rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.section-header p[b-ejjshlu6nm] {
    font-size: 1.125rem;
    color: #4a5568;
}

.features-grid[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.feature-card[b-ejjshlu6nm] {
    background: white;
    padding: 1.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-card:hover[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.feature-icon[b-ejjshlu6nm] {
    margin-bottom: 1rem;
}

.feature-card h3[b-ejjshlu6nm] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.feature-card p[b-ejjshlu6nm] {
    font-size: 0.875rem;
    color: #4a5568;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.feature-benefit[b-ejjshlu6nm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f0fff4;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #38a169;
    border: 1px solid #c6f6d5;
}

/* Breakdown Table */
.breakdown-section[b-ejjshlu6nm] {
    margin-bottom: 3rem;
}

.breakdown-section .section-header[b-ejjshlu6nm] {
    text-align: center;
    margin-bottom: 2rem;
}

.breakdown-section h3[b-ejjshlu6nm] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.breakdown-section p[b-ejjshlu6nm] {
    font-size: 1rem;
    color: #718096;
}

.breakdown-table-container[b-ejjshlu6nm] {
    background: white;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.breakdown-table[b-ejjshlu6nm] {
    width: 100%;
    border-collapse: collapse;
}

.breakdown-table thead[b-ejjshlu6nm] {
    background: var(--accent-fill-rest);
}

.breakdown-table thead tr[b-ejjshlu6nm] {
    color: white;
}

.breakdown-table th[b-ejjshlu6nm] {
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.breakdown-table th.feature-column[b-ejjshlu6nm] {
    width: 40%;
}

.breakdown-table th.cost-column[b-ejjshlu6nm] {
    width: 20%;
    text-align: right;
}

.breakdown-table th.savings-column[b-ejjshlu6nm] {
    width: 20%;
    text-align: right;
}

.breakdown-table tbody tr[b-ejjshlu6nm] {
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
}

.breakdown-table tbody tr:hover[b-ejjshlu6nm] {
    background: #f7fafc;
}

.breakdown-table tbody tr:last-child[b-ejjshlu6nm] {
    border-bottom: none;
}

.breakdown-table tbody tr.positive-row[b-ejjshlu6nm] {
    background: rgba(16, 185, 129, 0.03);
}

.breakdown-table tbody tr.negative-row[b-ejjshlu6nm] {
    background: rgba(239, 68, 68, 0.03);
}

.breakdown-table td[b-ejjshlu6nm] {
    padding: 1.25rem 1.5rem;
}

.feature-cell[b-ejjshlu6nm] {
    font-weight: 500;
}

.feature-info[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.feature-info strong[b-ejjshlu6nm] {
    font-size: 0.95rem;
    color: #1a202c;
    font-weight: 600;
}

.feature-info small[b-ejjshlu6nm] {
    font-size: 0.8rem;
    color: #718096;
    font-style: italic;
    line-height: 1.4;
}

.cost-cell[b-ejjshlu6nm],
.savings-cell[b-ejjshlu6nm] {
    text-align: right;
}

.amount[b-ejjshlu6nm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
    font-weight: 600;
}

.amount.current[b-ejjshlu6nm] {
    color: #e53e3e;
}

.amount.new[b-ejjshlu6nm] {
    color: #4a5568;
}

.amount.positive[b-ejjshlu6nm] {
    color: #10B981;
    font-weight: 700;
}

.amount.negative[b-ejjshlu6nm] {
    color: #EF4444;
    font-weight: 700;
}

.amount-zero[b-ejjshlu6nm] {
    color: #cbd5e0;
    font-size: 1.25rem;
}

.breakdown-table tfoot[b-ejjshlu6nm] {
    background: #f7fafc;
    border-top: 3px solid var(--accent-fill-rest);
}

.breakdown-table tfoot tr.total-row td[b-ejjshlu6nm] {
    padding: 1.5rem;
    font-size: 1.1rem;
}

.breakdown-table tfoot .amount.total-savings[b-ejjshlu6nm] {
    color: #10B981;
    font-size: 1.5rem;
    font-weight: 800;
}

/* CTA Section */
.results-cta[b-ejjshlu6nm] {
    background: white;
    padding: 3rem 2rem;
    border-radius: 16px;
    border: 2px solid var(--accent-fill-rest);
    text-align: center;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.results-cta h2[b-ejjshlu6nm] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.results-cta p[b-ejjshlu6nm] {
    font-size: 1.125rem;
    color: #4a5568;
    margin-bottom: 2rem;
}

.cta-buttons[b-ejjshlu6nm] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-ejjshlu6nm],
.btn-secondary[b-ejjshlu6nm],
.btn-neutral[b-ejjshlu6nm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary[b-ejjshlu6nm] {
    background: var(--accent-fill-rest);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover[b-ejjshlu6nm] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-secondary[b-ejjshlu6nm] {
    background: white;
    color: var(--accent-fill-rest);
    border: 2px solid var(--accent-fill-rest);
}

.btn-secondary:hover[b-ejjshlu6nm] {
    background: #f7fafc;
    transform: translateY(-2px);
}

.btn-neutral[b-ejjshlu6nm] {
    background: #e2e8f0;
    color: #2d3748;
}

.btn-neutral:hover[b-ejjshlu6nm] {
    background: #cbd5e0;
    transform: translateY(-2px);
}

.btn-accent[b-ejjshlu6nm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    background: var(--accent-fill-rest);
    color: white;
}

.btn-accent:hover[b-ejjshlu6nm] {
    background: var(--accent-fill-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
}

.btn-accent:disabled[b-ejjshlu6nm] {
    background: #cbd5e0;
    color: #718096;
    cursor: not-allowed;
    transform: none;
}

/* Yes/No Selection */
.yes-no-selection[b-ejjshlu6nm] {
    max-width: 600px;
    margin: 0 auto 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.selection-label[b-ejjshlu6nm] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1rem;
    text-align: center;
}

.yes-no-buttons[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.yn-button[b-ejjshlu6nm] {
    padding: 1.25rem 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #4a5568;
}

.yn-button:hover[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.yn-button.selected[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    background: rgba(102, 126, 234, 0.08);
    color: var(--accent-fill-rest);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* Features Selection Section */
.features-selection-section[b-ejjshlu6nm] {
    margin-top: 2rem;
}

.features-selection-section h3[b-ejjshlu6nm] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    text-align: center;
    margin-bottom: 0.5rem;
}

.selection-subtitle[b-ejjshlu6nm] {
    text-align: center;
    font-size: 0.95rem;
    color: #4a5568;
    margin-bottom: 1.5rem;
}

/* Feature Cards Grid */
.feature-cards-grid[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.feature-select-card[b-ejjshlu6nm] {
    padding: 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    position: relative;
}

.feature-select-card:hover[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.feature-select-card.selected[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    background: rgba(102, 126, 234, 0.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.feature-card-icon[b-ejjshlu6nm] {
    flex-shrink: 0;
    color: var(--accent-fill-rest);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-select-card.selected .feature-card-icon[b-ejjshlu6nm] {
    color: var(--accent-fill-rest);
}

.feature-card-content[b-ejjshlu6nm] {
    flex: 1;
    min-width: 0;
}

.feature-card-content h4[b-ejjshlu6nm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}

.feature-card-content p[b-ejjshlu6nm] {
    font-size: 0.8rem;
    color: #718096;
    margin: 0;
    line-height: 1.4;
}

.feature-card-check[b-ejjshlu6nm] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .calculator-content[b-ejjshlu6nm] {
        padding: 1.5rem 1rem 2rem;
    }

    .calculator-header h1[b-ejjshlu6nm] {
        font-size: 1.875rem;
    }

    .wizard-container[b-ejjshlu6nm] {
        padding: 1.5rem;
    }

    .step-header[b-ejjshlu6nm] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .step-header h2[b-ejjshlu6nm] {
        font-size: 1.5rem;
    }

    .step-header p[b-ejjshlu6nm] {
        text-align: center;
    }

    .comparison-section[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }

    .comparison-arrow[b-ejjshlu6nm] {
        transform: rotate(90deg);
        margin: 1rem 0;
    }

    .breakdown-row[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: left;
    }

    .options-grid[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }

    .savings-amount[b-ejjshlu6nm] {
        font-size: 2rem;
    }

    .features-grid[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }

    .cta-buttons[b-ejjshlu6nm] {
        flex-direction: column;
    }

    .feature-cards-grid[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }

    .yes-no-buttons[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }

    .benefits-grid[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }
}

/* Extra Benefits Section */
.extra-benefits-section[b-ejjshlu6nm] {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.benefits-list[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.benefit-item[b-ejjshlu6nm] {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #10B981;
    transition: all 0.2s ease;
}

.benefit-item:hover[b-ejjshlu6nm] {
    background: #f1f5f9;
    transform: translateX(4px);
}

.benefit-item span[b-ejjshlu6nm] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
}

.benefit-item strong[b-ejjshlu6nm] {
    color: #1e293b;
    font-weight: 600;
}

/* ===================================================================
   Native form controls (FluentUI-free) + icon sizing
   =================================================================== */

/* Text & number inputs.
   Tokens fall back to this landing page's existing palette
   (brand #036ac4, slate borders) so controls stay styled
   regardless of which design-token layer is loaded. */
.calc-input[b-ejjshlu6nm] {
    font: inherit;
    padding: 0.6rem 0.8rem;
    border: 1.5px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface, #ffffff);
    color: var(--ds-text, #1a202c);
    box-sizing: border-box;
}

.calc-input:hover[b-ejjshlu6nm] {
    border-color: var(--ds-border-strong, #cbd5e1);
}

.calc-input:focus-visible[b-ejjshlu6nm] {
    outline: none;
    border-color: var(--brand-600, #036ac4);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.18);
}

/* Range slider */
.calc-slider-wrap[b-ejjshlu6nm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.calc-slider[b-ejjshlu6nm] {
    accent-color: var(--brand-600, #036ac4);
    width: 100%;
}

.calc-slider:focus-visible[b-ejjshlu6nm] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.calc-slider:disabled[b-ejjshlu6nm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.calc-slider-end[b-ejjshlu6nm] {
    font-size: 0.8rem;
    color: var(--ds-text-muted, #718096);
    white-space: nowrap;
}

/* Checkbox & radio rows */
.calc-checkbox[b-ejjshlu6nm],
.calc-radio[b-ejjshlu6nm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--ds-text, #1a202c);
}

.calc-checkbox input[b-ejjshlu6nm],
.calc-radio input[b-ejjshlu6nm] {
    accent-color: var(--brand-600, #036ac4);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.calc-checkbox input:focus-visible[b-ejjshlu6nm],
.calc-radio input:focus-visible[b-ejjshlu6nm] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

/* Buttons (wizard nav) */
.calc-btn[b-ejjshlu6nm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calc-btn-accent[b-ejjshlu6nm] {
    background: var(--brand-600, #036ac4);
    color: #ffffff;
    border: 1px solid var(--brand-600, #036ac4);
}

.calc-btn-accent:hover:not(:disabled)[b-ejjshlu6nm] {
    background: var(--brand-700, #0356a0);
    transform: translateY(-2px);
}

.calc-btn-neutral[b-ejjshlu6nm] {
    background: var(--ds-surface, #ffffff);
    color: var(--ds-text, #1a202c);
    border: 1px solid var(--ds-border-strong, #cbd5e1);
}

.calc-btn-neutral:hover:not(:disabled)[b-ejjshlu6nm] {
    background: var(--ds-surface-alt, #f7fafc);
    transform: translateY(-2px);
}

.calc-btn:focus-visible[b-ejjshlu6nm] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.calc-btn:disabled[b-ejjshlu6nm] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Responsive grid mimicking FluentGrid 8/4 split */
.calc-grid[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .calc-grid[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   Icon (inline SVG) sizing per container — replaces FluentIcon Style
   =================================================================== */

.step-header-icon[b-ejjshlu6nm]  svg {
    width: 48px;
    height: 48px;
    color: var(--brand-600, #036ac4);
}

.option-card[b-ejjshlu6nm]  svg {
    width: 48px;
    height: 48px;
}

.yn-button[b-ejjshlu6nm]  svg {
    width: 32px;
    height: 32px;
}

.feature-card-icon[b-ejjshlu6nm]  svg {
    width: 32px;
    height: 32px;
}

.feature-card-check[b-ejjshlu6nm]  svg {
    width: 20px;
    height: 20px;
    color: #cbd5e0;
}

.feature-select-card.selected .feature-card-check[b-ejjshlu6nm]  svg {
    color: var(--brand-600, #036ac4);
}

.savings-card[b-ejjshlu6nm]  svg {
    width: 48px;
    height: 48px;
    color: white;
    flex-shrink: 0;
}

.savings-card.annual[b-ejjshlu6nm]  svg {
    color: var(--brand-600, #036ac4);
}

.card-header[b-ejjshlu6nm]  svg {
    width: 32px;
    height: 32px;
}

.comparison-card.after .card-header[b-ejjshlu6nm]  svg {
    color: var(--brand-600, #036ac4);
}

.comparison-arrow[b-ejjshlu6nm]  svg {
    width: 64px;
    height: 64px;
    color: var(--brand-600, #036ac4);
}

.feature-icon[b-ejjshlu6nm]  svg {
    width: 40px;
    height: 40px;
    color: var(--brand-600, #036ac4);
}

.feature-benefit[b-ejjshlu6nm]  svg {
    width: 20px;
    height: 20px;
    color: #10B981;
    flex-shrink: 0;
}

.benefit-item[b-ejjshlu6nm]  svg {
    width: 20px;
    height: 20px;
    color: #10B981;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

/* Breakdown table savings arrows */
.amount.positive[b-ejjshlu6nm]  svg {
    width: 16px;
    height: 16px;
    color: #10B981;
}

.amount.negative[b-ejjshlu6nm]  svg {
    width: 16px;
    height: 16px;
    color: #EF4444;
}

/* Results header + CTA buttons */
.btn-accent[b-ejjshlu6nm]  svg,
.btn-neutral[b-ejjshlu6nm]  svg,
.btn-primary[b-ejjshlu6nm]  svg,
.btn-secondary[b-ejjshlu6nm]  svg {
    width: 20px;
    height: 20px;
}
/* /Components/Pages/Landing/BusinessTypes/BusinessTypes.razor.rz.scp.css */
/* Business Types Page - Landing ile Uyumlu */

/* Container & Layout */
.use-cases-container[b-wl1h5x2sl6] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.use-cases-content[b-wl1h5x2sl6] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

/* Hero Section */
.hero-section[b-wl1h5x2sl6] {
    text-align: center;
    margin-bottom: 4rem;
    padding: 2rem 0;
}

.hero-title[b-wl1h5x2sl6] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hero-subtitle[b-wl1h5x2sl6] {
    font-size: 1.25rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Sectors Grid */
.sectors-grid[b-wl1h5x2sl6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

/* Sector Card */
.sector-card[b-wl1h5x2sl6] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.sector-card:hover[b-wl1h5x2sl6] {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-fill-rest);
}

.sector-card-featured[b-wl1h5x2sl6] {
    border: 2px solid var(--accent-fill-rest);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, white 100%);
}

.sector-badge[b-wl1h5x2sl6] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--accent-fill-rest);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.sector-image[b-wl1h5x2sl6] {
    margin-bottom: 1.5rem;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    background: #f7fafc;
}

.sector-image img[b-wl1h5x2sl6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sector-icon-placeholder[b-wl1h5x2sl6] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.sector-card:hover .sector-image img[b-wl1h5x2sl6] {
    transform: scale(1.05);
}

.sector-title[b-wl1h5x2sl6] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.sector-description[b-wl1h5x2sl6] {
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex: 1;
}

.sector-features[b-wl1h5x2sl6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.feature-tag[b-wl1h5x2sl6] {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sector-card:hover .feature-tag[b-wl1h5x2sl6] {
    background: rgba(102, 126, 234, 0.1);
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
}

.sector-cta[b-wl1h5x2sl6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--accent-fill-rest);
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: auto;
    transition: gap 0.3s ease;
}

.sector-card:hover .sector-cta[b-wl1h5x2sl6] {
    gap: 0.75rem;
}

.sector-cta[b-wl1h5x2sl6]  svg {
    width: 20px;
    height: 20px;
}

/* CTA Section */
.cta-section[b-wl1h5x2sl6] {
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
    background: var(--accent-fill-rest);
    border-radius: 20px;
    margin-top: 2rem;
}

.cta-content h2[b-wl1h5x2sl6] {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.cta-content p[b-wl1h5x2sl6] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons[b-wl1h5x2sl6] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.btn-cta-primary[b-wl1h5x2sl6],
.btn-cta-secondary[b-wl1h5x2sl6] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-cta-primary[b-wl1h5x2sl6] {
    background: white;
    color: var(--accent-fill-rest);
}

.btn-cta-primary:hover[b-wl1h5x2sl6] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn-cta-secondary[b-wl1h5x2sl6] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid white;
}

.btn-cta-secondary:hover[b-wl1h5x2sl6] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.btn-cta-primary[b-wl1h5x2sl6]  svg,
.btn-cta-secondary[b-wl1h5x2sl6]  svg {
    width: 20px;
    height: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-title[b-wl1h5x2sl6] {
        font-size: 2.5rem;
    }

    .sectors-grid[b-wl1h5x2sl6] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .sectors-grid[b-wl1h5x2sl6] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .use-cases-content[b-wl1h5x2sl6] {
        padding: 1.5rem;
    }

    .hero-title[b-wl1h5x2sl6] {
        font-size: 2rem;
    }

    .hero-subtitle[b-wl1h5x2sl6] {
        font-size: 1.05rem;
    }

    .sector-card[b-wl1h5x2sl6] {
        padding: 2rem;
    }

    .sector-title[b-wl1h5x2sl6] {
        font-size: 1.5rem;
    }

    .cta-section[b-wl1h5x2sl6] {
        padding: 3rem 1.5rem;
    }

    .cta-content h2[b-wl1h5x2sl6] {
        font-size: 1.75rem;
    }

    .cta-buttons[b-wl1h5x2sl6] {
        flex-direction: column;
        width: 100%;
    }

    .btn-cta-primary[b-wl1h5x2sl6],
    .btn-cta-secondary[b-wl1h5x2sl6] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .use-cases-content[b-wl1h5x2sl6] {
        padding: 1rem;
    }

    .hero-section[b-wl1h5x2sl6] {
        margin-bottom: 2.5rem;
    }

    .hero-title[b-wl1h5x2sl6] {
        font-size: 1.75rem;
    }

    .sector-card[b-wl1h5x2sl6] {
        padding: 1.5rem;
    }

    .sector-icon[b-wl1h5x2sl6] {
        width: 80px;
        height: 80px;
    }

    .cta-section[b-wl1h5x2sl6] {
        padding: 2.5rem 1rem;
    }
}
/* /Components/Pages/Landing/BusinessTypes/Cafe.razor.rz.scp.css */
/* /Components/Pages/Landing/BusinessTypes/FastFood.razor.rz.scp.css */
/* /Components/Pages/Landing/BusinessTypes/KuryeSirketleri.razor.rz.scp.css */
/* /Components/Pages/Landing/BusinessTypes/Manav.razor.rz.scp.css */
/* /Components/Pages/Landing/BusinessTypes/Petshop.razor.rz.scp.css */
/* /Components/Pages/Landing/BusinessTypes/Restoran.razor.rz.scp.css */
/*
 * All styles have been moved to reusable components:
 * - UseCaseContainer.razor.css
 * - HeroSection.razor.css
 * - FeaturesSection.razor.css & FeatureCard.razor.css
 * - ProblemsSection.razor.css & ProblemCard.razor.css
 * - SolutionsSection.razor.css & SolutionCard.razor.css
 * - CTASection.razor.css
 */
/* /Components/Pages/Landing/BusinessTypes/SuBayi.razor.rz.scp.css */
/* /Components/Pages/Landing/Campaigns/UberEatsCampaign.razor.rz.scp.css */
/* Uber Eats × adisyon.ai kampanya sayfası — landing (marketing) konvansiyonları.
   Uber Eats marka yeşili yalnızca bu co-brand sayfasına özel lokal değişkendir. */
.uec-page[b-higmu4aor9] {
    --uec-green: #06c167;
    --uec-green-deep: #027a3f;
    --uec-ink: #0f172a;
    --uec-body: #475569;
    --uec-muted: #64748b;
    --uec-border: #e2e8f0;
    font-family: 'Sora', 'Manrope', 'Segoe UI', sans-serif;
    color: var(--uec-ink);
    background: #fff;
}

/* ---------- Hero ---------- */
/* Üstte görselin taban yeşiline (#06c167) açılan düz bant metni taşır; görselin çizimi
   alt kısımda kapatılmadan görünür. Görsel alta hizalı, düz banda yumuşak geçiş yapar. */
.uec-hero[b-higmu4aor9] {
    position: relative;
    background:
        linear-gradient(180deg, #06c167 0%, #06c167 24%, rgba(6, 193, 103, 0) 44%),
        url('/assets/campaigns/uber-eats/hero-bg.png') center bottom / cover no-repeat,
        #06c167;
}

/* Alt bantta CTA okunabilirliği için hafif vinyet */
.uec-hero[b-higmu4aor9]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(3, 100, 53, 0) 74%,
        rgba(3, 100, 53, 0.4) 100%);
    pointer-events: none;
}

.uec-hero-inner[b-higmu4aor9] {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    min-height: clamp(760px, 62vw, 1040px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: clamp(1rem, 2vw, 1.75rem) 1.5rem clamp(2rem, 4vw, 3.25rem);
}

.uec-hero-top[b-higmu4aor9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 960px;
}

.uec-cobrand[b-higmu4aor9] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    color: #fff;
}

.uec-cobrand-adisyon[b-higmu4aor9] {
    font-family: 'Damion', cursive;
    font-size: 2.7rem;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(2, 90, 48, 0.35);
}

.uec-cobrand-x[b-higmu4aor9] {
    font-size: 1.5rem;
    font-weight: 600;
    opacity: 0.9;
}

.uec-cobrand-logo[b-higmu4aor9] {
    height: 54px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(2, 90, 48, 0.3));
}

.uec-eyebrow[b-higmu4aor9] {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--uec-green-deep);
}

.uec-eyebrow--light[b-higmu4aor9] {
    color: rgba(255, 255, 255, 0.92);
}

.uec-hero-title[b-higmu4aor9] {
    margin: 0;
    font-size: clamp(1.7rem, 3.1vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 3px 18px rgba(2, 90, 48, 0.45);
    max-width: 960px;
}

.uec-hero-subtitle[b-higmu4aor9] {
    margin: 0;
    max-width: 760px;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 2px 12px rgba(2, 90, 48, 0.45);
}

.uec-hero-bottom[b-higmu4aor9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.uec-hero-pills[b-higmu4aor9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.uec-pill[b-higmu4aor9] {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    text-shadow: 0 1px 6px rgba(2, 90, 48, 0.35);
}

.uec-hero-actions[b-higmu4aor9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}

/* ---------- Buttons ---------- */
.uec-btn[b-higmu4aor9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 12px;
    padding: 0.85rem 1.9rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.25s ease;
    text-decoration: none;
}

.uec-btn:focus-visible[b-higmu4aor9] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.uec-btn--light[b-higmu4aor9] {
    background: #fff;
    color: var(--uec-green-deep);
    box-shadow: 0 8px 25px rgba(2, 90, 48, 0.35);
}

.uec-btn--light:hover[b-higmu4aor9] {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(2, 90, 48, 0.45);
}

.uec-btn--ghost[b-higmu4aor9] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.65);
}

.uec-btn--ghost:hover[b-higmu4aor9] {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

.uec-btn--accent[b-higmu4aor9] {
    background: var(--uec-green);
    color: #fff;
    box-shadow: 0 8px 25px rgba(6, 193, 103, 0.35);
}

.uec-btn--accent:hover[b-higmu4aor9] {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(6, 193, 103, 0.45);
}

.uec-btn--accent:focus-visible[b-higmu4aor9] {
    outline-color: var(--uec-green-deep);
}

.uec-btn:disabled[b-higmu4aor9] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Paylaşılan landing bileşenleri (FeaturesSection/SolutionsSection) -2rem margin ile
   UseCaseContainer içi için tasarlandı; aynı iç boşluğu burada sağlıyoruz. */
.uec-shared-wrap[b-higmu4aor9] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    overflow-x: clip;
}

/* ---------- Sections ---------- */
.uec-section[b-higmu4aor9] {
    padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
    background: #fff;
}

.uec-section--tinted[b-higmu4aor9] {
    background: #f8fafc;
}

.uec-container[b-higmu4aor9] {
    max-width: 1200px;
    margin: 0 auto;
}

.uec-container--narrow[b-higmu4aor9] {
    max-width: 820px;
}

.uec-section-head[b-higmu4aor9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.uec-section-title[b-higmu4aor9] {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--uec-ink);
}

.uec-section-subtitle[b-higmu4aor9] {
    margin: 0;
    max-width: 660px;
    color: var(--uec-body);
    line-height: 1.65;
}

/* ---------- Offer cards ---------- */
.uec-offer-grid[b-higmu4aor9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.uec-offer-card[b-higmu4aor9] {
    background: #fff;
    border: 1px solid var(--uec-border);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: all 0.25s ease;
}

.uec-offer-card:hover[b-higmu4aor9] {
    transform: translateY(-3px);
    border-color: var(--uec-green);
    box-shadow: 0 8px 24px rgba(6, 193, 103, 0.12);
}

.uec-offer-head[b-higmu4aor9] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.uec-offer-icon[b-higmu4aor9] {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #ecfdf5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uec-offer-value[b-higmu4aor9] {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--uec-green-deep);
}

.uec-offer-link[b-higmu4aor9] {
    align-self: flex-start;
    margin-top: 0.25rem;
    color: var(--uec-green-deep);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(2, 122, 63, 0.35);
    transition: border-color 0.25s ease;
}

.uec-offer-link:hover[b-higmu4aor9] {
    border-bottom-color: var(--uec-green-deep);
}

.uec-offer-link:focus-visible[b-higmu4aor9] {
    outline: 2px solid var(--uec-green);
    outline-offset: 2px;
}

.uec-offer-card h3[b-higmu4aor9] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--uec-ink);
}

.uec-offer-card p[b-higmu4aor9] {
    margin: 0;
    color: var(--uec-body);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ---------- Why list ---------- */
.uec-why-list[b-higmu4aor9] {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.uec-why-item[b-higmu4aor9] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: #fff;
    border: 1px solid var(--uec-border);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    color: var(--uec-body);
    line-height: 1.6;
}

.uec-why-item[b-higmu4aor9]  svg {
    flex-shrink: 0;
}

/* ---------- Form ---------- */
.uec-form-card[b-higmu4aor9] {
    display: grid;
    grid-template-columns: 380px 1fr;
    background: #fff;
    border: 1px solid var(--uec-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1);
}

.uec-form-summary[b-higmu4aor9] {
    background: linear-gradient(160deg, var(--uec-green) 0%, var(--uec-green-deep) 100%);
    color: #fff;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.uec-summary-logo[b-higmu4aor9] {
    width: 170px;
    height: auto;
}

.uec-form-summary h3[b-higmu4aor9] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.uec-summary-list[b-higmu4aor9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.uec-summary-list li[b-higmu4aor9] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.5;
    font-size: 0.95rem;
}

.uec-summary-list[b-higmu4aor9]  svg,
.uec-summary-list[b-higmu4aor9]  svg path {
    fill: #fff !important;
    flex-shrink: 0;
}

.uec-summary-note[b-higmu4aor9] {
    margin: auto 0 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.uec-form-body[b-higmu4aor9] {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.uec-form-body h2[b-higmu4aor9] {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--uec-ink);
}

.uec-form-body > p[b-higmu4aor9] {
    margin: 0 0 0.9rem;
    color: var(--uec-body);
    line-height: 1.6;
}

.uec-form[b-higmu4aor9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.25rem;
}

.uec-field[b-higmu4aor9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.uec-field--full[b-higmu4aor9] {
    grid-column: 1 / -1;
}

.uec-field label[b-higmu4aor9] {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--uec-ink);
}

.uec-input[b-higmu4aor9] {
    width: 100%;
    border: 1.5px solid var(--uec-border);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--uec-ink);
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.uec-input:focus[b-higmu4aor9] {
    outline: none;
    border-color: var(--uec-green);
    box-shadow: 0 0 0 3px rgba(6, 193, 103, 0.15);
}

.uec-input--error[b-higmu4aor9] {
    border-color: #ef4444;
}

.uec-field-error[b-higmu4aor9] {
    color: #ef4444;
    font-size: 0.8rem;
}

.uec-field-hint[b-higmu4aor9] {
    color: var(--uec-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.uec-phone[b-higmu4aor9] {
    display: flex;
    align-items: stretch;
}

.uec-phone-prefix[b-higmu4aor9] {
    display: flex;
    align-items: center;
    padding: 0 0.8rem;
    border: 1.5px solid var(--uec-border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: #f8fafc;
    color: var(--uec-muted);
    font-size: 0.95rem;
}

.uec-phone .uec-input[b-higmu4aor9] {
    border-radius: 0 8px 8px 0;
}

.uec-kvkk[b-higmu4aor9] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 400 !important;
    color: var(--uec-body);
    line-height: 1.55;
    cursor: pointer;
}

.uec-kvkk input[b-higmu4aor9] {
    margin-top: 0.2rem;
    accent-color: var(--uec-green);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.uec-kvkk a[b-higmu4aor9] {
    color: var(--uec-green-deep);
    font-weight: 600;
}

.uec-form-error[b-higmu4aor9] {
    grid-column: 1 / -1;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    color: #b91c1c;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.uec-submit[b-higmu4aor9] {
    grid-column: 1 / -1;
    justify-self: start;
}

/* Honeypot — ekran dışı, bot tuzağı */
.uec-hp[b-higmu4aor9] {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

/* ---------- Success ---------- */
.uec-success[b-higmu4aor9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 2.5rem 1rem;
}

.uec-success h3[b-higmu4aor9] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--uec-ink);
}

.uec-success p[b-higmu4aor9] {
    margin: 0;
    color: var(--uec-body);
    max-width: 460px;
    line-height: 1.6;
}

/* ---------- FAQ ---------- */
.uec-faq[b-higmu4aor9] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.uec-faq-item[b-higmu4aor9] {
    background: #fff;
    border: 1px solid var(--uec-border);
    border-radius: 14px;
}

.uec-faq-item summary[b-higmu4aor9] {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    font-weight: 700;
    color: var(--uec-ink);
}

.uec-faq-item summary[b-higmu4aor9]::-webkit-details-marker {
    display: none;
}

.uec-faq-item summary[b-higmu4aor9]::after {
    content: '+';
    font-size: 1.3rem;
    color: var(--uec-green-deep);
    transition: transform 0.25s ease;
}

.uec-faq-item[open] summary[b-higmu4aor9]::after {
    transform: rotate(45deg);
}

.uec-faq-item p[b-higmu4aor9] {
    margin: 0;
    padding: 0 1.4rem 1.2rem;
    color: var(--uec-body);
    line-height: 1.65;
}

/* ---------- Responsive ---------- */
/* Bu bantta layout'un sabit menüsü iki satıra sarılıp 80px'lik gövde boşluğunu aşıyor */
@media (max-width: 1260px) and (min-width: 721px) {
    .uec-hero-inner[b-higmu4aor9] {
        padding-top: 4.5rem;
    }
}

@media (max-width: 960px) {
    .uec-offer-grid[b-higmu4aor9] {
        grid-template-columns: 1fr;
    }

    .uec-form-card[b-higmu4aor9] {
        grid-template-columns: 1fr;
    }

    .uec-form-summary[b-higmu4aor9] {
        padding: 2rem 1.5rem;
    }

    .uec-form-body[b-higmu4aor9] {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 720px) {
    /* Mobilde görsel çok kırpıldığı için okunabilirlik amaçlı yarı saydam yeşil bindirilir */
    .uec-hero[b-higmu4aor9] {
        background:
            linear-gradient(rgba(6, 150, 80, 0.6), rgba(6, 150, 80, 0.6)),
            url('/assets/campaigns/uber-eats/hero-bg.png') center bottom / cover no-repeat,
            #06c167;
    }

    .uec-hero-inner[b-higmu4aor9] {
        min-height: 0;
        gap: 1.75rem;
    }

    .uec-form[b-higmu4aor9] {
        grid-template-columns: 1fr;
    }

    .uec-cobrand-logo[b-higmu4aor9] {
        height: 44px;
    }

    .uec-cobrand-adisyon[b-higmu4aor9] {
        font-size: 1.9rem;
    }

    .uec-cobrand-x[b-higmu4aor9] {
        font-size: 1.1rem;
    }
}
/* /Components/Pages/Landing/Components/ComplianceSection.razor.rz.scp.css */
.compliance-section[b-j34qmkd5np] {
    padding: clamp(3rem, 6vw, 5.5rem) 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.compliance-inner[b-j34qmkd5np] {
    max-width: 1100px;
    margin: 0 auto;
}

.compliance-head[b-j34qmkd5np] {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2.5rem;
}

.compliance-eyebrow[b-j34qmkd5np] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 16px;
}

.compliance-title[b-j34qmkd5np] {
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0 0 16px;
}

.compliance-lead[b-j34qmkd5np] {
    font-size: 1.075rem;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 24px;
}

.compliance-deadline[b-j34qmkd5np] {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    padding: 14px 22px;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12);
}
.compliance-deadline[b-j34qmkd5np]  svg { width: 32px; height: 32px; color: #ea580c; }
.compliance-deadline-text[b-j34qmkd5np] { text-align: left; line-height: 1.25; }
.compliance-deadline-text strong[b-j34qmkd5np] { display: block; font-size: 1.25rem; font-weight: 800; color: #c2410c; }
.compliance-deadline-text span[b-j34qmkd5np] { font-size: 0.85rem; color: #9a3412; }

.compliance-grid[b-j34qmkd5np] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.compliance-card[b-j34qmkd5np] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.compliance-card--rule[b-j34qmkd5np] { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%); }
.compliance-card--solution[b-j34qmkd5np] { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%); }

.compliance-card-head[b-j34qmkd5np] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.compliance-card-head h3[b-j34qmkd5np] { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin: 0; }
.compliance-card--rule .compliance-card-head[b-j34qmkd5np]  svg { color: #d97706; }
.compliance-card--solution .compliance-card-head[b-j34qmkd5np]  svg { color: #16a34a; }
.compliance-card-head[b-j34qmkd5np]  svg { width: 24px; height: 24px; }

.compliance-list[b-j34qmkd5np] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.compliance-list li[b-j34qmkd5np] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.975rem;
    line-height: 1.5;
    color: #334155;
}

.ci[b-j34qmkd5np] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.ci[b-j34qmkd5np]  svg { width: 16px; height: 16px; }
.ci--rule[b-j34qmkd5np] { background: #fef3c7; color: #b45309; }
.ci--ok[b-j34qmkd5np] { background: #dcfce7; color: #15803d; }

.compliance-foot[b-j34qmkd5np] {
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 2rem auto 0;
    max-width: 720px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .compliance-grid[b-j34qmkd5np] { grid-template-columns: 1fr; gap: 16px; }
    .compliance-card[b-j34qmkd5np] { padding: 22px; }
}
/* /Components/Pages/Landing/Components/CTASection.razor.rz.scp.css */
.cta-section[b-ptugdqn37v] {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--accent);
    border-radius: var(--radius-card);
    margin-top: 2.5rem;
}

.cta-content h2[b-ptugdqn37v] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.cta-content p[b-ptugdqn37v] {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-buttons[b-ptugdqn37v] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.btn-cta-primary[b-ptugdqn37v],
.btn-cta-secondary[b-ptugdqn37v] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-cta-primary[b-ptugdqn37v]  svg,
.btn-cta-secondary[b-ptugdqn37v]  svg {
    width: 20px;
    height: 20px;
}

.btn-cta-primary[b-ptugdqn37v] {
    background: white;
    color: var(--accent);
}

.btn-cta-primary:hover[b-ptugdqn37v] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn-cta-secondary[b-ptugdqn37v] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid white;
}

.btn-cta-secondary:hover[b-ptugdqn37v] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .cta-section[b-ptugdqn37v] {
        padding: 2rem 1.5rem;
    }

    .cta-content h2[b-ptugdqn37v] {
        font-size: 1.75rem;
    }

    .cta-content p[b-ptugdqn37v] {
        font-size: 1.1rem;
    }

    .cta-buttons[b-ptugdqn37v] {
        flex-direction: column;
        width: 100%;
    }

    .btn-cta-primary[b-ptugdqn37v],
    .btn-cta-secondary[b-ptugdqn37v] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .cta-section[b-ptugdqn37v] {
        padding: 1.5rem 1rem;
        margin-top: 2rem;
    }

    .cta-content h2[b-ptugdqn37v] {
        font-size: 1.5rem;
    }

    .cta-content p[b-ptugdqn37v] {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .btn-cta-primary[b-ptugdqn37v],
    .btn-cta-secondary[b-ptugdqn37v] {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}
/* /Components/Pages/Landing/Components/DemoMenuShowcase.razor.rz.scp.css */
/* Demo Menu Showcase Section */
.demo-showcase-section[b-h4difoxqnl] {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    margin: 60px 0;
}

.demo-showcase-content[b-h4difoxqnl] {
    max-width: 1200px;
    margin: 0 auto;
}

.demo-showcase-header[b-h4difoxqnl] {
    text-align: center;
    margin-bottom: 60px;
}

.demo-showcase-title[b-h4difoxqnl] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 16px;
    line-height: 1.2;
}

.demo-showcase-description[b-h4difoxqnl] {
    font-size: 1.125rem;
    color: #6c757d;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Demo Menu Grid */
.demo-menu-grid[b-h4difoxqnl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

.demo-menu-card[b-h4difoxqnl] {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.demo-menu-card:hover[b-h4difoxqnl] {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 24px 48px rgba(0, 0, 0, 0.1);
}

.demo-menu-icon[b-h4difoxqnl] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

/* Icon Background Colors */
.demo-menu-icon.burger-icon[b-h4difoxqnl] {
    background-color: #E63946;
}

.demo-menu-icon.pizza-icon[b-h4difoxqnl] {
    background-color: #FF8C42;
}

.demo-menu-icon.kebab-icon[b-h4difoxqnl] {
    background-color: #964B00;
}

.demo-menu-icon-img[b-h4difoxqnl] {
    width: 73px;
    height: 73px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    border-radius: 12px;
    filter: brightness(0) invert(1);
}

.demo-menu-title[b-h4difoxqnl] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
}

.demo-menu-desc[b-h4difoxqnl] {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 24px;
    line-height: 1.5;
}

.btn-demo-menu[b-h4difoxqnl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.btn-demo-menu:hover[b-h4difoxqnl] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
    background: linear-gradient(135deg, #357abd 0%, #2868a8 100%);
}

.btn-demo-menu[b-h4difoxqnl]  svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
}

.demo-qr-text[b-h4difoxqnl]  svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

/* QR Code Section */
.demo-qr-section[b-h4difoxqnl] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.demo-qr-text[b-h4difoxqnl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #495057;
    font-size: 0.95rem;
    flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 768px) {
    .demo-showcase-section[b-h4difoxqnl] {
        padding: 60px 16px;
        margin: 40px 0;
    }

    .demo-showcase-title[b-h4difoxqnl] {
        font-size: 2rem;
    }

    .demo-showcase-description[b-h4difoxqnl] {
        font-size: 1rem;
    }

    .demo-menu-grid[b-h4difoxqnl] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .demo-menu-card[b-h4difoxqnl] {
        padding: 24px;
    }

    .demo-qr-text[b-h4difoxqnl] {
        font-size: 0.875rem;
    }

    .demo-menu-icon[b-h4difoxqnl] {
        width: 85px;
        height: 85px;
    }

    .demo-menu-icon.burger-icon[b-h4difoxqnl] {
        background-color: #E63946;
    }

    .demo-menu-icon.pizza-icon[b-h4difoxqnl] {
        background-color: #FF8C42;
    }

    .demo-menu-icon.kebab-icon[b-h4difoxqnl] {
        background-color: #964B00;
    }

    .demo-menu-icon-img[b-h4difoxqnl] {
        width: 62px;
        height: 62px;
        border-radius: 10px;
        filter: brightness(0) invert(1);
    }
}
/* /Components/Pages/Landing/Components/FeatureCard.razor.rz.scp.css */
.feature-card[b-wx4j7ysgq8] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

.feature-card:hover[b-wx4j7ysgq8] {
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

/* Highlighted variant - featured cards */
.feature-card.highlighted[b-wx4j7ysgq8] {
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-lg);
}

.feature-icon[b-wx4j7ysgq8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: #edf2ff;
    border-radius: 10px;
    flex-shrink: 0;
}

.feature-icon[b-wx4j7ysgq8]  svg {
    width: 28px;
    height: 28px;
    color: var(--accent);
}

.feature-text[b-wx4j7ysgq8] {
    flex: 1;
    min-width: 0;
}

.feature-card h4[b-wx4j7ysgq8] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.35rem;
}

.feature-card p[b-wx4j7ysgq8] {
    color: #4a5568;
    line-height: 1.5;
    font-size: 0.9rem;
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .feature-card[b-wx4j7ysgq8] {
        padding: 1rem;
    }

    .feature-icon[b-wx4j7ysgq8] {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .feature-icon[b-wx4j7ysgq8]  svg {
        width: 24px;
        height: 24px;
    }

    .feature-card h4[b-wx4j7ysgq8] {
        font-size: 1rem;
    }

    .feature-card p[b-wx4j7ysgq8] {
        font-size: 0.85rem;
    }
}
/* /Components/Pages/Landing/Components/FeaturesSection.razor.rz.scp.css */
.features-section[b-58sr21otor] {
    padding: 2.5rem 0;
    background: white;
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 0 -2rem;
    position: relative;
    z-index: 1;
}

.features-section.highlighted[b-58sr21otor] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(102, 126, 234, 0.02) 100%);
    padding: 3rem 0;
}

.section-header[b-58sr21otor] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-58sr21otor] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-description[b-58sr21otor] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.features-grid[b-58sr21otor] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .features-grid[b-58sr21otor] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title[b-58sr21otor] {
        font-size: 1.75rem;
    }

    .features-grid[b-58sr21otor] {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-section[b-58sr21otor] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin: 0 -1.5rem;
    }

    .features-section.highlighted[b-58sr21otor] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-58sr21otor] {
        font-size: 1.5rem;
    }

    .section-description[b-58sr21otor] {
        font-size: 1rem;
    }

    .features-grid[b-58sr21otor] {
        grid-template-columns: 1fr;
    }

    .features-section[b-58sr21otor] {
        padding: 2rem 1rem;
        margin: 0 -1rem;
    }

    .features-section.highlighted[b-58sr21otor] {
        padding: 2.5rem 1rem;
    }
}
/* /Components/Pages/Landing/Components/HeroSection.razor.rz.scp.css */
.hero-section[b-i5was4purc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 2.5rem;
    padding: 1rem 0;
}

.hero-text[b-i5was4purc] {
    flex: 1;
}

.hero-title[b-i5was4purc] {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #1a202c;
    letter-spacing: -0.02em;
}

.hero-description[b-i5was4purc] {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.hero-actions[b-i5was4purc] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-hero-primary[b-i5was4purc] {
    padding: 1rem 2rem;
    background: var(--accent-fill-rest);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    font-size: 1.1rem;
}

.btn-hero-primary:hover[b-i5was4purc] {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.btn-hero-secondary[b-i5was4purc] {
    padding: 1rem 2rem;
    background: white;
    color: #4a5568;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.btn-hero-secondary:hover[b-i5was4purc] {
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
    transform: translateY(-2px);
}

.hero-visual[b-i5was4purc] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image[b-i5was4purc] {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.hero-icon[b-i5was4purc] {
    text-align: center;
}

.hero-icon[b-i5was4purc]  svg {
    width: 120px;
    height: 120px;
    color: var(--accent);
}

/* Screenshot Slides */
.slide-screenshots[b-i5was4purc] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    min-height: 400px;
    max-height: 500px;
}

.slide-screenshots .screenshot-main[b-i5was4purc],
.slide-screenshots .screenshot-secondary[b-i5was4purc] {
    animation: fadeSlide-b-i5was4purc 12s ease-in-out infinite;
}

/* Single-screenshot mode — disable the rotation fade so the only available image
   stays visible. Without this, the lone image inherits the 12s fadeSlide cycle
   and disappears ~70% of the time. */
.slide-screenshots-single .screenshot-main[b-i5was4purc] {
    animation: none !important;
    opacity: 1 !important;
}

/* Two-screenshot mode — the 12s cycle gives 4s to each of THREE slots, so with
   only two images the empty third slot leaves the hero BLANK for a third of
   every cycle. Shorten the cycle to 8s and widen the visible window so the two
   images hand over to each other with no gap. */
.slide-screenshots-double .screenshot-main[b-i5was4purc],
.slide-screenshots-double .screenshot-secondary[b-i5was4purc] {
    animation: fadeSlideDouble-b-i5was4purc 8s ease-in-out infinite;
}

@keyframes fadeSlideDouble-b-i5was4purc {
    0%, 45% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        z-index: 10;
    }
    50%, 100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.95);
        z-index: 1;
    }
}

.slide-screenshots .screenshot-main[b-i5was4purc] {
    animation-delay: 0s;
}

.slide-screenshots .screenshot-secondary-1[b-i5was4purc] {
    animation-delay: 4s;
}

.slide-screenshots .screenshot-secondary-2[b-i5was4purc] {
    animation-delay: 8s;
}

@keyframes fadeSlide-b-i5was4purc {
    0%, 30% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        z-index: 10;
    }
    33%, 100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.95);
        z-index: 1;
    }
}

.screenshot-main[b-i5was4purc] {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 750px;
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    z-index: 3;
    opacity: 0;
}

.slide-screenshots .screenshot-main:first-of-type[b-i5was4purc] {
    opacity: 1;
    z-index: 10;
}

.screenshot-main img[b-i5was4purc],
.screenshot-secondary img[b-i5was4purc] {
    width: 100%;
    height: auto;
    max-height: 420px;
    display: block;
    object-fit: contain;
}

.screenshot-secondary[b-i5was4purc] {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 750px;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    z-index: 1;
}

@media (max-width: 1024px) {
    .hero-section[b-i5was4purc] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .slide-screenshots[b-i5was4purc] {
        min-height: 300px;
    }

    .screenshot-main[b-i5was4purc],
    .screenshot-secondary[b-i5was4purc] {
        width: 90%;
    }
}

@media (max-width: 768px) {
    .hero-section[b-i5was4purc] {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .hero-title[b-i5was4purc] {
        font-size: 2rem;
    }

    .hero-description[b-i5was4purc] {
        font-size: 1rem;
        line-height: 1.6;
    }

    .hero-actions[b-i5was4purc] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-hero-primary[b-i5was4purc],
    .btn-hero-secondary[b-i5was4purc] {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .slide-screenshots[b-i5was4purc] {
        min-height: 250px;
        max-height: 280px;
    }

    .screenshot-main img[b-i5was4purc],
    .screenshot-secondary img[b-i5was4purc] {
        max-height: 240px;
    }
}

@media (max-width: 480px) {
    .hero-section[b-i5was4purc] {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .hero-title[b-i5was4purc] {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    .hero-description[b-i5was4purc] {
        font-size: 0.9375rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .hero-actions[b-i5was4purc] {
        margin-top: 1.5rem;
    }

    .btn-hero-primary[b-i5was4purc],
    .btn-hero-secondary[b-i5was4purc] {
        padding: 0.75rem 1.25rem;
        font-size: 0.9375rem;
    }

    .slide-screenshots[b-i5was4purc] {
        min-height: 200px;
        max-height: 260px;
        padding: 0.5rem;
    }

    .screenshot-main[b-i5was4purc],
    .screenshot-secondary[b-i5was4purc] {
        width: 95%;
    }

    .screenshot-main img[b-i5was4purc],
    .screenshot-secondary img[b-i5was4purc] {
        max-height: 240px;
    }
}
/* /Components/Pages/Landing/Components/ProblemCard.razor.rz.scp.css */
.problem-card[b-leu5mxv2bu] {
    background: white;
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    border: 1px solid #fee2e2;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.problem-card:hover[b-leu5mxv2bu] {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(229, 62, 62, 0.08);
    border-color: #fca5a5;
}

.problem-head[b-leu5mxv2bu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.problem-icon[b-leu5mxv2bu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #fef2f2;
    border-radius: 10px;
    flex-shrink: 0;
}

.problem-icon[b-leu5mxv2bu]  svg {
    width: 22px;
    height: 22px;
    color: #ef4444;
}

.problem-card h4[b-leu5mxv2bu] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.problem-card p[b-leu5mxv2bu] {
    color: #64748b;
    line-height: 1.55;
    font-size: 0.92rem;
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .problem-card[b-leu5mxv2bu] {
        padding: 0.95rem 1rem;
        gap: 0.4rem;
    }

    .problem-head[b-leu5mxv2bu] {
        gap: 0.6rem;
    }

    .problem-icon[b-leu5mxv2bu] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 8px;
    }

    .problem-icon[b-leu5mxv2bu]  svg {
        width: 20px;
        height: 20px;
    }

    .problem-card h4[b-leu5mxv2bu] {
        font-size: 0.98rem;
    }

    .problem-card p[b-leu5mxv2bu] {
        font-size: 0.86rem;
    }
}
/* /Components/Pages/Landing/Components/ProblemsSection.razor.rz.scp.css */
.problems-section[b-g35amjkt33] {
    padding: 2.5rem 0;
    background: white;
    margin: 0 -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
    z-index: 3;
}

.section-header[b-g35amjkt33] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-g35amjkt33] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-description[b-g35amjkt33] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.problems-grid[b-g35amjkt33] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .problems-grid[b-g35amjkt33] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title[b-g35amjkt33] {
        font-size: 1.75rem;
    }

    .section-description[b-g35amjkt33] {
        font-size: 1rem;
    }

    .problems-grid[b-g35amjkt33] {
        grid-template-columns: 1fr;
    }

    .problems-section[b-g35amjkt33] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin: 0 -1.5rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-g35amjkt33] {
        font-size: 1.5rem;
    }

    .problems-section[b-g35amjkt33] {
        padding: 2rem 1rem;
        margin: 0 -1rem;
    }
}
/* /Components/Pages/Landing/Components/SolutionCard.razor.rz.scp.css */
.solution-card[b-v90u80mf3f] {
    background: white;
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 0;
    min-width: 0;
}

.solution-card:hover[b-v90u80mf3f] {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.08);
    border-color: var(--accent-fill-rest);
}

.solution-head[b-v90u80mf3f] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.solution-icon[b-v90u80mf3f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #edf2ff;
    border-radius: 10px;
    flex-shrink: 0;
}

.solution-icon[b-v90u80mf3f]  svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
}

.solution-number[b-v90u80mf3f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--accent-fill-rest);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.72rem;
    margin: 0;
    flex-shrink: 0;
}

.solution-card h4[b-v90u80mf3f] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.solution-card p[b-v90u80mf3f] {
    color: #64748b;
    line-height: 1.55;
    font-size: 0.92rem;
    margin: 0;
}

.solution-features[b-v90u80mf3f] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.solution-features li[b-v90u80mf3f] {
    color: #4a5568;
    margin-bottom: 0.35rem;
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.4;
    font-size: 0.8rem;
}

.solution-features li[b-v90u80mf3f]::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--accent-fill-rest);
    font-weight: 700;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .solution-card[b-v90u80mf3f] {
        padding: 0.95rem 1rem;
        gap: 0.4rem;
    }

    .solution-head[b-v90u80mf3f] {
        gap: 0.5rem;
    }

    .solution-icon[b-v90u80mf3f] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 8px;
    }

    .solution-icon[b-v90u80mf3f]  svg {
        width: 20px;
        height: 20px;
    }

    .solution-number[b-v90u80mf3f] {
        width: 22px;
        height: 22px;
        font-size: 0.68rem;
    }

    .solution-card h4[b-v90u80mf3f] {
        font-size: 0.98rem;
    }

    .solution-card p[b-v90u80mf3f] {
        font-size: 0.86rem;
    }

    .solution-features li[b-v90u80mf3f] {
        font-size: 0.78rem;
    }
}
/* /Components/Pages/Landing/Components/SolutionsSection.razor.rz.scp.css */
.solutions-section[b-swebchfrvr] {
    padding: 3rem 0;
    background: #f7fafc;
    margin: 0;
    position: relative;
    z-index: 2;
}

.section-header[b-swebchfrvr] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-swebchfrvr] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-description[b-swebchfrvr] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.solutions-grid[b-swebchfrvr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .solutions-grid[b-swebchfrvr] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title[b-swebchfrvr] {
        font-size: 1.75rem;
    }

    .solutions-grid[b-swebchfrvr] {
        grid-template-columns: 1fr;
    }

    .solutions-section[b-swebchfrvr] {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-swebchfrvr] {
        font-size: 1.5rem;
    }

    .section-description[b-swebchfrvr] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Landing/Components/UseCaseContainer.razor.rz.scp.css */
.use-case-container[b-prrft9rlfz] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.use-case-content[b-prrft9rlfz] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 2rem;
}

@media (max-width: 768px) {
    .use-case-content[b-prrft9rlfz] {
        padding: 1.5rem 1rem 2.5rem;
    }
}

@media (max-width: 480px) {
    .use-case-content[b-prrft9rlfz] {
        padding: 1rem 0.75rem 2rem;
    }
}
/* /Components/Pages/Landing/Contact.razor.rz.scp.css */
/* Contact Page - Landing ile Uyumlu */

/* Container & Layout */
.contact-container[b-oij2n75vba] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.contact-content[b-oij2n75vba] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
}

/* Body Section */
.contact-body[b-oij2n75vba] {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 2rem;
}

/* Contact Grid */
.contact-grid[b-oij2n75vba] {
    display: grid;
    grid-template-columns: 0.8fr 2fr;
    gap: 2.5rem;
}

/* Contact Info Section */
.contact-info-section[b-oij2n75vba] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    height: fit-content;
    transition: all 0.3s ease;
}

.contact-info-section:hover[b-oij2n75vba] {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.contact-info-section h2[b-oij2n75vba] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1.5rem;
}

.info-cards[b-oij2n75vba] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.info-card[b-oij2n75vba] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.info-card:hover[b-oij2n75vba] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--accent);
}

.info-card-icon[b-oij2n75vba] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--accent);
}

.info-card-icon[b-oij2n75vba]  svg {
    width: 32px;
    height: 32px;
}

.info-content h3[b-oij2n75vba] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.35rem 0;
}

.info-content p[b-oij2n75vba] {
    color: #4a5568;
    margin: 0;
    line-height: 1.6;
    font-size: 0.95rem;
}

.info-content a[b-oij2n75vba] {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.info-content a:hover[b-oij2n75vba] {
    text-decoration: underline;
}

/* Contact Form Section */
.contact-form-section[b-oij2n75vba] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.contact-form-section:hover[b-oij2n75vba] {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.contact-form-section h2[b-oij2n75vba] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.contact-form-section p[b-oij2n75vba] {
    color: #4a5568;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Alert Messages */
.alert[b-oij2n75vba] {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.alert-success[b-oij2n75vba] {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #22543d;
}

.alert-error[b-oij2n75vba] {
    background: #fff5f5;
    border: 1px solid #fc8181;
    color: #742a2a;
}

/* Contact Form */
.contact-form[b-oij2n75vba] {
    display: block;
}

.form-stack[b-oij2n75vba] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row[b-oij2n75vba] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-field[b-oij2n75vba] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.form-field label[b-oij2n75vba] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-2);
}

.form-input[b-oij2n75vba] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--fg-1);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input[b-oij2n75vba]::placeholder {
    color: var(--fg-disabled);
}

.form-input:hover[b-oij2n75vba] {
    border-color: var(--border-strong);
}

.form-input:focus[b-oij2n75vba],
.form-input:focus-visible[b-oij2n75vba] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-textarea[b-oij2n75vba] {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* Validation */
.form-field[b-oij2n75vba]  .validation-message {
    color: var(--danger-600);
    font-size: 0.8125rem;
}

.form-input.invalid[b-oij2n75vba],
.form-input.modified.invalid[b-oij2n75vba] {
    border-color: var(--danger-500);
}

/* Submit button */
.btn-submit[b-oij2n75vba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.8rem 1.6rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fg-on-brand);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-submit:hover:not(:disabled)[b-oij2n75vba] {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-submit:focus-visible[b-oij2n75vba] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-submit:disabled[b-oij2n75vba] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-submit[b-oij2n75vba]  svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 560px) {
    .form-row[b-oij2n75vba] {
        grid-template-columns: 1fr;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .contact-grid[b-oij2n75vba] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .contact-content[b-oij2n75vba] {
        padding: 1.5rem;
    }

    .contact-grid[b-oij2n75vba] {
        gap: 1.5rem;
    }

    .contact-info-section[b-oij2n75vba],
    .contact-form-section[b-oij2n75vba] {
        padding: 1.75rem;
    }
}

@media (max-width: 480px) {
    .contact-content[b-oij2n75vba] {
        padding: 1rem;
    }

    .contact-info-section[b-oij2n75vba],
    .contact-form-section[b-oij2n75vba] {
        padding: 1.5rem;
    }

    .info-card[b-oij2n75vba] {
        padding: 1rem;
    }

    .info-content h3[b-oij2n75vba] {
        font-size: 0.95rem;
    }

    .contact-form-section h2[b-oij2n75vba] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Landing/Cookies.razor.rz.scp.css */
/* Cookie Policy Page Styles */
.legal-container[b-598y2o2u3h] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.legal-content[b-598y2o2u3h] {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

.legal-title[b-598y2o2u3h] {
    font-size: clamp(1.65rem, 4.5vw, 2.5rem) !important;
}

/* Header Styles */
.legal-header[b-598y2o2u3h] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

.back-link[b-598y2o2u3h] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-598y2o2u3h] {
    color: #5a67d8;
}

.legal-title[b-598y2o2u3h] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.legal-date[b-598y2o2u3h] {
    color: #718096;
    font-size: 0.875rem;
    font-style: italic;
}

/* Body Content */
.legal-body[b-598y2o2u3h] {
    line-height: 1.7;
}

.legal-section[b-598y2o2u3h] {
    margin-bottom: 3rem;
}

.legal-section h2[b-598y2o2u3h] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-section h3[b-598y2o2u3h] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.legal-section p[b-598y2o2u3h] {
    margin-bottom: 1rem;
    color: #4a5568;
}

.legal-section ul[b-598y2o2u3h] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section ol[b-598y2o2u3h] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section li[b-598y2o2u3h] {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.legal-section li strong[b-598y2o2u3h] {
    color: #2d3748;
}

/* Cookie Types Styles */
.cookie-types[b-598y2o2u3h] {
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.cookie-type[b-598y2o2u3h] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid var(--accent-fill-rest);
}

.cookie-type h3[b-598y2o2u3h] {
    margin-top: 0;
    color: #2d3748;
}

.cookie-type p[b-598y2o2u3h] {
    margin-bottom: 1rem;
}

.cookie-type ul[b-598y2o2u3h] {
    margin-bottom: 0;
}

/* Cookie Table Styles */
.cookie-table[b-598y2o2u3h] {
    margin: 1.5rem 0;
    overflow-x: auto;
}

.cookie-table table[b-598y2o2u3h] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cookie-table th[b-598y2o2u3h] {
    background: var(--accent-fill-rest);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
}

.cookie-table td[b-598y2o2u3h] {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
}

.cookie-table tr:last-child td[b-598y2o2u3h] {
    border-bottom: none;
}

.cookie-table tr:nth-child(even)[b-598y2o2u3h] {
    background: #f7fafc;
}

/* Third Party Services Styles */
.third-party-services[b-598y2o2u3h] {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.service[b-598y2o2u3h] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid var(--accent-fill-rest);
}

.service h3[b-598y2o2u3h] {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #2d3748;
}

.service p[b-598y2o2u3h] {
    margin-bottom: 0.75rem;
}

.service a[b-598y2o2u3h] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
}

.service a:hover[b-598y2o2u3h] {
    text-decoration: underline;
}

/* Cookie Management Styles */
.cookie-management[b-598y2o2u3h] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.cookie-management h3[b-598y2o2u3h] {
    color: var(--accent-fill-rest);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.cookie-management h3:first-child[b-598y2o2u3h] {
    margin-top: 0;
}

.cookie-management ul[b-598y2o2u3h] {
    margin-bottom: 1rem;
}

.cookie-management a[b-598y2o2u3h] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
}

.cookie-management a:hover[b-598y2o2u3h] {
    text-decoration: underline;
}

/* Warning Note Styles */
.warning-note[b-598y2o2u3h] {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.warning-note p[b-598y2o2u3h] {
    margin-bottom: 0;
    color: #c53030;
}

/* Links */
a[b-598y2o2u3h] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

a:hover[b-598y2o2u3h] {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .legal-container[b-598y2o2u3h] {
        padding: 1rem 0.5rem;
    }

    .legal-content[b-598y2o2u3h] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .legal-title[b-598y2o2u3h] {
        font-size: 2rem;
    }

    .legal-section h2[b-598y2o2u3h] {
        font-size: 1.25rem;
    }

    .cookie-table[b-598y2o2u3h] {
        font-size: 0.875rem;
    }

    .cookie-table th[b-598y2o2u3h],
    .cookie-table td[b-598y2o2u3h] {
        padding: 0.75rem;
    }

    .cookie-types[b-598y2o2u3h] {
        gap: 1rem;
    }

    .third-party-services[b-598y2o2u3h] {
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .legal-container[b-598y2o2u3h] {
        padding: 0.5rem 0.25rem;
    }

    .legal-content[b-598y2o2u3h] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .legal-title[b-598y2o2u3h] {
        font-size: 1.75rem;
    }

    .legal-section h2[b-598y2o2u3h] {
        font-size: 1.125rem;
    }

    .cookie-table[b-598y2o2u3h] {
        font-size: 0.8rem;
    }

    .cookie-table th[b-598y2o2u3h],
    .cookie-table td[b-598y2o2u3h] {
        padding: 0.5rem;
    }
} 
/* /Components/Pages/Landing/CourierRegistration.razor.rz.scp.css */
/* Split Layout */
.split-container[b-61vsjo7heh] {
    display: flex;
    min-height: 100vh;
}

/* Left Panel - Branding */
.brand-panel[b-61vsjo7heh] {
    width: 380px;
    min-width: 380px;
    background: #1a1a1a;
    color: white;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.back-link[b-61vsjo7heh] {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
}

.back-link:hover[b-61vsjo7heh] {
    color: white;
}

.logo-section[b-61vsjo7heh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0;
}

.brand-logo[b-61vsjo7heh] {
    height: 120px;
    width: auto;
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

.brand-tagline[b-61vsjo7heh] {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 3rem;
}

.brand-name[b-61vsjo7heh] {
    font-family: 'Damion', cursive;
    font-size: 2rem;
    color: #8CFA1F;
}

.benefits-list[b-61vsjo7heh] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.benefit-row[b-61vsjo7heh] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border-left: 3px solid #8CFA1F;
}

.benefit-row span[b-61vsjo7heh] {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
}

.benefit-row[b-61vsjo7heh]  svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #8CFA1F;
}

.whatsapp-box[b-61vsjo7heh] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(37, 211, 102, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(37, 211, 102, 0.15);
}

.whatsapp-icon[b-61vsjo7heh] {
    width: 40px;
    height: 40px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-icon[b-61vsjo7heh]  svg {
    width: 20px;
    height: 20px;
    color: white !important;
}

.whatsapp-text[b-61vsjo7heh] {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
}

.whatsapp-text a[b-61vsjo7heh] {
    display: block;
    color: #25D366;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    margin-top: 2px;
}

/* Right Panel - Form */
.form-panel[b-61vsjo7heh] {
    flex: 1;
    background: var(--neutral-layer-4);
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 5vw, 4rem);
    overflow-y: auto;
}

.form-container[b-61vsjo7heh] {
    max-width: 640px;
    margin: 0 auto;
}

.form-header[b-61vsjo7heh] {
    margin-bottom: 2rem;
}

.form-title[b-61vsjo7heh] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
}

.form-subtitle[b-61vsjo7heh] {
    color: #777;
    font-size: 1rem;
    margin: 0;
}

/* Info Alert */
.info-alert[b-61vsjo7heh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #e8f4fd;
    border: 1px solid #b8daff;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #004085;
}

.info-alert strong[b-61vsjo7heh] {
    font-weight: 600;
}

.info-alert[b-61vsjo7heh]  svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #0066cc;
}

.form-card[b-61vsjo7heh] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.form-grid[b-61vsjo7heh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.form-group[b-61vsjo7heh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group.full-width[b-61vsjo7heh] {
    grid-column: 1 / -1;
}

.form-group label[b-61vsjo7heh] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
}

.form-control[b-61vsjo7heh] {
    padding: 0.875rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: white;
}

.form-control:focus[b-61vsjo7heh] {
    outline: none;
    border-color: #8CFA1F;
    box-shadow: 0 0 0 3px rgba(140, 250, 31, 0.12);
}

.form-control[b-61vsjo7heh]::placeholder {
    color: #bbb;
}

/* Phone Input */
.phone-wrapper[b-61vsjo7heh] {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s;
}

.phone-wrapper:focus-within[b-61vsjo7heh] {
    border-color: #8CFA1F;
    box-shadow: 0 0 0 3px rgba(140, 250, 31, 0.12);
}

.phone-prefix[b-61vsjo7heh] {
    padding: 0.875rem 1rem;
    background: #f8f8f8;
    color: #666;
    font-weight: 500;
    border-right: 1px solid #e0e0e0;
}

.phone-input[b-61vsjo7heh] {
    flex: 1;
    border: none !important;
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    outline: none;
}

/* Town Chips */
.town-chips[b-61vsjo7heh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-height: 180px;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fafafa;
}

.town-chip[b-61vsjo7heh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.8rem;
}

.town-chip:hover[b-61vsjo7heh] {
    border-color: #8CFA1F;
    background: rgba(140, 250, 31, 0.05);
}

.town-chip.selected[b-61vsjo7heh] {
    background: rgba(140, 250, 31, 0.15);
    border-color: #8CFA1F;
    color: #2d5a00;
}

.town-chip input[b-61vsjo7heh] {
    display: none;
}

/* Selected Towns Display */
.selected-towns[b-61vsjo7heh] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(140, 250, 31, 0.08);
    border: 1px solid rgba(140, 250, 31, 0.25);
    border-radius: 10px;
}

.selected-towns-label[b-61vsjo7heh] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2d5a00;
    display: block;
    margin-bottom: 0.5rem;
}

.selected-town-tags[b-61vsjo7heh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selected-town-tag[b-61vsjo7heh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: #8CFA1F;
    color: #1a1a1a;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 6px;
}

.remove-town[b-61vsjo7heh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 50%;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}

.remove-town:hover[b-61vsjo7heh] {
    background: rgba(0, 0, 0, 0.35);
}

/* License Chips */
.license-chips[b-61vsjo7heh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.license-chip[b-61vsjo7heh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: #f8f8f8;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.85rem;
}

.license-chip:hover[b-61vsjo7heh] {
    border-color: #ccc;
}

.license-chip:has(input:checked)[b-61vsjo7heh] {
    background: rgba(140, 250, 31, 0.12);
    border-color: #8CFA1F;
    color: #2d5a00;
}

.license-chip input[b-61vsjo7heh] {
    width: 15px;
    height: 15px;
    accent-color: #8CFA1F;
}

/* Divider */
.form-divider[b-61vsjo7heh] {
    height: 1px;
    background: #eee;
    margin: 1.75rem 0;
}

/* Section Label */
.section-label[b-61vsjo7heh] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

/* KVKK Section */
.kvkk-section[b-61vsjo7heh] {
    margin-top: 0.5rem;
}

.kvkk-title[b-61vsjo7heh] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 1rem 0;
}

.kvkk-box[b-61vsjo7heh] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.kvkk-text[b-61vsjo7heh] {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

.kvkk-link[b-61vsjo7heh] {
    color: #0066cc;
    font-weight: 500;
    text-decoration: none;
}

.kvkk-link:hover[b-61vsjo7heh] {
    text-decoration: underline;
}

.kvkk-checkboxes[b-61vsjo7heh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kvkk-checkbox[b-61vsjo7heh] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.5;
    cursor: pointer;
}

.kvkk-checkbox input[b-61vsjo7heh] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #0066cc;
    flex-shrink: 0;
    cursor: pointer;
}

/* Submit Button */
.submit-btn[b-61vsjo7heh] {
    width: 100%;
    padding: 1rem;
    background: #8CFA1F;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 1.5rem;
}

.submit-btn:hover:not(:disabled)[b-61vsjo7heh] {
    background: #7de619;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(140, 250, 31, 0.3);
}

.submit-btn:disabled[b-61vsjo7heh] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Messages */
.success-message[b-61vsjo7heh] {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.success-message strong[b-61vsjo7heh] {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.error-message[b-61vsjo7heh] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

[b-61vsjo7heh] .validation-message {
    color: #dc2626 !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .split-container[b-61vsjo7heh] {
        flex-direction: column;
    }

    .brand-panel[b-61vsjo7heh] {
        width: 100%;
        height: auto;
        position: relative;
        padding: 2rem;
        min-height: auto;
    }

    .logo-section[b-61vsjo7heh] {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
        flex: 0;
        margin: 1.5rem 0;
    }

    .brand-logo[b-61vsjo7heh] {
        height: 60px;
        margin-bottom: 0;
    }

    .brand-tagline[b-61vsjo7heh] {
        margin-bottom: 0;
    }

    .benefits-list[b-61vsjo7heh], .whatsapp-box[b-61vsjo7heh] {
        display: none;
    }

    .form-panel[b-61vsjo7heh] {
        padding: 1.5rem;
    }
}

@media (max-width: 640px) {
    .form-grid[b-61vsjo7heh] {
        grid-template-columns: 1fr;
    }

    .form-card[b-61vsjo7heh] {
        padding: 1.5rem;
    }
}
/* /Components/Pages/Landing/HelpCenter.razor.rz.scp.css */
/* Help Center Page Styles */
.help-container[b-1vskqdseif] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.help-content[b-1vskqdseif] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Header Styles */
.help-header[b-1vskqdseif] {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.back-link[b-1vskqdseif] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-1vskqdseif] {
    color: #5a67d8;
}

.help-title[b-1vskqdseif] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.help-subtitle[b-1vskqdseif] {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 2rem;
}

/* Search Box */
.search-box[b-1vskqdseif] {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}

.search-input[b-1vskqdseif] {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px 0 0 12px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.search-input:focus[b-1vskqdseif] {
    border-color: var(--accent-fill-rest);
}

.search-btn[b-1vskqdseif] {
    padding: 1rem 1.5rem;
    background: var(--accent-fill-rest);
    color: white;
    border: none;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 1rem;
}

.search-btn:hover[b-1vskqdseif] {
    background: #5a67d8;
}

/* Section Styles */
section[b-1vskqdseif] {
    margin-bottom: 4rem;
}

section h2[b-1vskqdseif] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 2rem;
}

/* Quick Actions */
.actions-grid[b-1vskqdseif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.action-card[b-1vskqdseif] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
}

.action-card:hover[b-1vskqdseif] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
}

.action-icon[b-1vskqdseif] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.action-card h3[b-1vskqdseif] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.action-card p[b-1vskqdseif] {
    color: #4a5568;
    margin: 0;
    font-size: 0.9rem;
}

/* Help Categories */
.categories-grid[b-1vskqdseif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.category-card[b-1vskqdseif] {
    padding: 2rem;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.category-card[b-1vskqdseif]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-fill-rest);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.category-card:hover[b-1vskqdseif]::before {
    transform: scaleX(1);
}

.category-card:hover[b-1vskqdseif] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.category-icon[b-1vskqdseif] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.category-card h3[b-1vskqdseif] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.category-card p[b-1vskqdseif] {
    color: #4a5568;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.category-links[b-1vskqdseif] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-links li[b-1vskqdseif] {
    margin-bottom: 0.5rem;
}

.category-links a[b-1vskqdseif] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.category-links a:hover[b-1vskqdseif] {
    color: #5a67d8;
    text-decoration: underline;
}

/* Popular Articles */
.articles-grid[b-1vskqdseif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.article-card[b-1vskqdseif] {
    padding: 2rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.article-card:hover[b-1vskqdseif] {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.article-meta[b-1vskqdseif] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.article-category[b-1vskqdseif] {
    background: var(--accent-fill-rest);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.article-time[b-1vskqdseif] {
    color: #718096;
    font-size: 0.8rem;
}

.article-card h3[b-1vskqdseif] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.article-card p[b-1vskqdseif] {
    color: #4a5568;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.article-link[b-1vskqdseif] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.article-link:hover[b-1vskqdseif] {
    color: #5a67d8;
}

/* Video Tutorials */
.videos-grid[b-1vskqdseif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.video-card[b-1vskqdseif] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.video-card:hover[b-1vskqdseif] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.video-thumbnail[b-1vskqdseif] {
    position: relative;
    height: 180px;
    background: linear-gradient(135deg, var(--accent-fill-rest) 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.play-button[b-1vskqdseif] {
    font-size: 3rem;
    color: white;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.video-thumbnail:hover .play-button[b-1vskqdseif] {
    opacity: 1;
}

.video-duration[b-1vskqdseif] {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.video-card h3[b-1vskqdseif] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin: 1rem 1rem 0.5rem;
}

.video-card p[b-1vskqdseif] {
    color: #4a5568;
    margin: 0 1rem 1rem;
    font-size: 0.9rem;
}

/* Contact Support */
.contact-support[b-1vskqdseif] {
    background: var(--accent-fill-rest);
    border-radius: 16px;
    padding: clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    color: white;
}

.support-content h2[b-1vskqdseif] {
    color: white;
    margin-bottom: 1rem;
}

.support-content p[b-1vskqdseif] {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.support-options[b-1vskqdseif] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.support-btn[b-1vskqdseif] {
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.support-btn.primary[b-1vskqdseif] {
    background: white;
    color: var(--accent-fill-rest);
}

.support-btn.primary:hover[b-1vskqdseif] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.support-btn.secondary[b-1vskqdseif] {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.support-btn.secondary:hover[b-1vskqdseif] {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .actions-grid[b-1vskqdseif] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .categories-grid[b-1vskqdseif] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    .articles-grid[b-1vskqdseif] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .help-container[b-1vskqdseif] {
        padding: 1rem 0.5rem;
    }

    .help-content[b-1vskqdseif] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .help-title[b-1vskqdseif] {
        font-size: 2.5rem;
    }

    .search-box[b-1vskqdseif] {
        flex-direction: column;
        gap: 0;
    }

    .search-input[b-1vskqdseif] {
        border-radius: 12px 12px 0 0;
    }

    .search-btn[b-1vskqdseif] {
        border-radius: 0 0 12px 12px;
    }

    .actions-grid[b-1vskqdseif] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .categories-grid[b-1vskqdseif] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .articles-grid[b-1vskqdseif] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .videos-grid[b-1vskqdseif] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }

    .support-options[b-1vskqdseif] {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .support-btn[b-1vskqdseif] {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .help-container[b-1vskqdseif] {
        padding: 0.5rem 0.25rem;
    }

    .help-content[b-1vskqdseif] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .help-title[b-1vskqdseif] {
        font-size: 2rem;
    }

    .action-card[b-1vskqdseif] {
        padding: 1.5rem;
    }

    .category-card[b-1vskqdseif] {
        padding: 1.5rem;
    }

    .article-card[b-1vskqdseif] {
        padding: 1.5rem;
    }

    .contact-support[b-1vskqdseif] {
        padding: 2rem;
    }
} 
/* /Components/Pages/Landing/Kvkk.razor.rz.scp.css */
/* KVKK Page Styles */
.legal-container[b-qfk52ihd9n] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.legal-content[b-qfk52ihd9n] {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

.legal-title[b-qfk52ihd9n] {
    font-size: clamp(1.65rem, 4.5vw, 2.5rem) !important;
}

/* Header Styles */
.legal-header[b-qfk52ihd9n] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

.back-link[b-qfk52ihd9n] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-qfk52ihd9n] {
    color: #5a67d8;
}

.legal-title[b-qfk52ihd9n] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.legal-date[b-qfk52ihd9n] {
    color: #718096;
    font-size: 0.875rem;
    font-style: italic;
}

/* Body Content */
.legal-body[b-qfk52ihd9n] {
    line-height: 1.7;
}

.legal-section[b-qfk52ihd9n] {
    margin-bottom: 3rem;
}

.legal-section h2[b-qfk52ihd9n] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-section h3[b-qfk52ihd9n] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.legal-section h4[b-qfk52ihd9n] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.legal-section p[b-qfk52ihd9n] {
    margin-bottom: 1rem;
    color: #4a5568;
}

.legal-section ul[b-qfk52ihd9n] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section li[b-qfk52ihd9n] {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.legal-section li strong[b-qfk52ihd9n] {
    color: #2d3748;
}

/* Contact Info Styles */
.contact-info[b-qfk52ihd9n] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-left: 4px solid var(--accent-fill-rest);
}

.contact-info h3[b-qfk52ihd9n] {
    margin-top: 0;
    color: #2d3748;
}

.contact-info ul[b-qfk52ihd9n] {
    margin-bottom: 0;
}

/* Data Categories Styles */
.data-categories[b-qfk52ihd9n] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.data-categories h3[b-qfk52ihd9n] {
    color: var(--accent-fill-rest);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.data-categories h3:first-child[b-qfk52ihd9n] {
    margin-top: 0;
}

/* Rights List Styles */
.rights-list[b-qfk52ihd9n] {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.right-item[b-qfk52ihd9n] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--accent-fill-rest);
}

.right-item h4[b-qfk52ihd9n] {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #2d3748;
}

.right-item p[b-qfk52ihd9n] {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Application Methods Styles */
.application-methods[b-qfk52ihd9n] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.application-methods h3[b-qfk52ihd9n] {
    color: var(--accent-fill-rest);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.application-methods h3:first-child[b-qfk52ihd9n] {
    margin-top: 0;
}

.application-note[b-qfk52ihd9n] {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.application-note p[b-qfk52ihd9n] {
    margin-bottom: 0;
    color: #c53030;
}

/* Links */
a[b-qfk52ihd9n] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

a:hover[b-qfk52ihd9n] {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .legal-container[b-qfk52ihd9n] {
        padding: 1rem 0.5rem;
    }

    .legal-content[b-qfk52ihd9n] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .legal-title[b-qfk52ihd9n] {
        font-size: 2rem;
    }

    .legal-section h2[b-qfk52ihd9n] {
        font-size: 1.25rem;
    }

    .rights-list[b-qfk52ihd9n] {
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .legal-container[b-qfk52ihd9n] {
        padding: 0.5rem 0.25rem;
    }

    .legal-content[b-qfk52ihd9n] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .legal-title[b-qfk52ihd9n] {
        font-size: 1.75rem;
    }

    .legal-section h2[b-qfk52ihd9n] {
        font-size: 1.125rem;
    }
} 
/* /Components/Pages/Landing/Landing.razor.rz.scp.css */
/* ===== DESIGN TOKENS ===== */
.ln-container[b-hvzdu3ntw3] {
    /* Section padding scales with viewport */
    --ln-section-y: clamp(2.25rem, 6vw, 5rem);
    --ln-section-x: clamp(1rem, 4vw, 2rem);
    --ln-card-pad: clamp(1.1rem, 3vw, 2rem);
    --ln-gap-lg: clamp(1.5rem, 4vw, 4rem);
    --ln-gap-md: clamp(1rem, 2.5vw, 1.5rem);
    --ln-h1: clamp(1.55rem, 4vw, 2.55rem);
    --ln-h2: clamp(1.5rem, 4vw, 2.5rem);
    --ln-h3: clamp(1.1rem, 2.5vw, 1.4rem);
    --ln-radius-card: 16px;
}

/* ===== BASE ===== */
.ln-container[b-hvzdu3ntw3] {
    font-family: 'Sora', 'Manrope', 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: #0f172a;
    overflow-x: hidden;
    width: 100%;
}

/* ===== SECTION COMMON ===== */
.ln-section-inner[b-hvzdu3ntw3] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ln-section-x);
}

.ln-section-header[b-hvzdu3ntw3] {
    text-align: center;
    margin-bottom: clamp(1.75rem, 4vw, 3.5rem);
}

.ln-section-tag[b-hvzdu3ntw3] {
    display: inline-block;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: 100px;
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.ln-section-title[b-hvzdu3ntw3] {
    font-size: var(--ln-h2);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.ln-section-title.ln-left[b-hvzdu3ntw3] {
    text-align: left;
}

.ln-section-subtitle[b-hvzdu3ntw3] {
    font-size: 1.125rem;
    color: #64748b;
    margin: 0;
}

/* ===== BUTTONS ===== */
.ln-btn-primary[b-hvzdu3ntw3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: var(--accent-fill-rest);
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 10px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
}

.ln-btn-primary:hover[b-hvzdu3ntw3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.45);
}

.ln-btn-ghost[b-hvzdu3ntw3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: transparent;
    color: #475569;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    transition: all 0.25s ease;
}

.ln-btn-ghost:hover[b-hvzdu3ntw3] {
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
    transform: translateY(-1px);
}

.ln-btn-secondary[b-hvzdu3ntw3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: gap 0.25s ease;
}

.ln-btn-secondary:hover[b-hvzdu3ntw3] {
    gap: 0.75rem;
}

/* ===== HERO ===== */
.ln-hero[b-hvzdu3ntw3] {
    /* Compact top/bottom so short slides don't reveal large empty areas. The grid below
       still reserves consistent visual height across slides, but the section padding
       itself is much smaller than other sections (was up to 5rem). */
    padding: 1.5rem var(--ln-section-x) 2rem;
    background: linear-gradient(170deg, #f8fafc 0%, #eef2ff 50%, #f0f9ff 100%);
    position: relative;
    overflow: hidden;
}

/* ===== HERO SLIDER ===== */
.ln-hero-slider[b-hvzdu3ntw3] {
    position: relative;
}

.ln-hero-slide[b-hvzdu3ntw3] {
    display: none;
}

.ln-hero-slide-active[b-hvzdu3ntw3] {
    display: block;
}

.ln-hero-slide-active.ln-hero-slide-animate[b-hvzdu3ntw3] {
    animation: ln-hero-slide-in-b-hvzdu3ntw3 0.55s ease;
}

@keyframes ln-hero-slide-in-b-hvzdu3ntw3 {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.ln-hero-dots[b-hvzdu3ntw3] {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 2rem;
    position: relative;
    z-index: 3;
}

.ln-hero-dot[b-hvzdu3ntw3] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.22);
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
}

.ln-hero-dot:hover[b-hvzdu3ntw3] {
    background: rgba(15, 23, 42, 0.4);
}

.ln-hero-dot-active[b-hvzdu3ntw3] {
    background: var(--accent-fill-rest);
    width: 32px;
    border-radius: 6px;
}

.ln-hero-arrow[b-hvzdu3ntw3] {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.92);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    transition: all 0.2s ease;
    padding: 0;
}

.ln-hero-arrow:hover[b-hvzdu3ntw3] {
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-50%) scale(1.08);
}

.ln-hero-arrow-prev[b-hvzdu3ntw3] { left: 16px; }
.ln-hero-arrow-next[b-hvzdu3ntw3] { right: 16px; }

.ln-hero-mobile-frame[b-hvzdu3ntw3] {
    /* Fixed dims keep the phone within the visual column's reserved area. Aspect ratio close to
       9:19, matching typical phone screenshot proportions. Was free-sized (280px wide, auto
       height) which let the phone tower over the rest of the carousel on tall mockups. */
    width: 190px;
    height: 380px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 30px;
    padding: 10px;
    background: linear-gradient(160deg, #1e293b, #0f172a);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ln-hero-mobile-frame img[b-hvzdu3ntw3] {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    display: block;
    object-fit: cover;
}

/* Mobile Trio — three phone screenshots side-by-side, middle one slightly larger / raised. Used
   for the courier slide so we can show multiple mobile UIs without squashing a vertical image
   into a single landscape frame. */
.ln-hero-trio[b-hvzdu3ntw3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.ln-trio-frame[b-hvzdu3ntw3] {
    background: linear-gradient(160deg, #1e293b, #0f172a);
    border-radius: 22px;
    padding: 7px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    flex-shrink: 0;
    overflow: hidden;
}
.ln-trio-frame img[b-hvzdu3ntw3] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.ln-trio-frame-left[b-hvzdu3ntw3],
.ln-trio-frame-right[b-hvzdu3ntw3] {
    width: 130px;
    height: 290px;
    opacity: 0.95;
}
.ln-trio-frame-left[b-hvzdu3ntw3] { transform: rotate(-6deg) translateY(8px); }
.ln-trio-frame-right[b-hvzdu3ntw3] { transform: rotate(6deg) translateY(8px); }
.ln-trio-frame-center[b-hvzdu3ntw3] {
    width: 150px;
    height: 330px;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}

@media (max-width: 768px) {
    .ln-hero-trio[b-hvzdu3ntw3] { gap: 6px; }
    .ln-trio-frame-left[b-hvzdu3ntw3],
    .ln-trio-frame-right[b-hvzdu3ntw3] { width: 100px; height: 220px; }
    .ln-trio-frame-center[b-hvzdu3ntw3] { width: 120px; height: 260px; }
}

@media (max-width: 768px) {
    .ln-hero-arrow[b-hvzdu3ntw3] { display: none; }
}

.ln-hero[b-hvzdu3ntw3]::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.ln-hero-inner[b-hvzdu3ntw3] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
    /* Stabilise overall slide height — long slides (with bullets + trust avatars) and short ones
       (no bullets) both occupy this row so the slider arrows / dots don't jump. The visual
       column has its own consistent height, see .ln-hero-visual. */
    min-height: 460px;
}

.ln-badge[b-hvzdu3ntw3] {
    display: inline-block;
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ln-hero-title[b-hvzdu3ntw3] {
    font-size: var(--ln-h1);
    font-weight: 800;
    line-height: 1.12;
    color: #0f172a;
    margin: 0 0 1.25rem;
}

.ln-typed[b-hvzdu3ntw3] {
    display: inline-block;
    color: var(--accent-fill-rest);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.ln-typed.ln-fade-out[b-hvzdu3ntw3] {
    opacity: 0;
    transform: translateY(-8px);
}

.ln-typed.ln-fade-in[b-hvzdu3ntw3] {
    opacity: 1;
    transform: translateY(0);
}

.ln-hero-desc[b-hvzdu3ntw3] {
    font-size: 1.125rem;
    color: #475569;
    line-height: 1.7;
    margin: 0 0 2rem;
    max-width: 540px;
}

.ln-hero-ctas[b-hvzdu3ntw3] {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.ln-hero-trust[b-hvzdu3ntw3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ln-trust-avatars[b-hvzdu3ntw3] {
    display: flex;
}

.ln-trust-avatar[b-hvzdu3ntw3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
    margin-left: -8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.ln-trust-avatar:first-child[b-hvzdu3ntw3] {
    margin-left: 0;
}

.ln-trust-text[b-hvzdu3ntw3] {
    font-size: 0.875rem;
    color: #64748b;
}

/* Hero Visual */
.ln-hero-visual[b-hvzdu3ntw3] {
    position: relative;
    /* Reserve a consistent visual area so every slide's right-hand mockup sits in the same
       footprint — keeps the carousel from jumping vertically between slides. */
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ln-hero-visual > *[b-hvzdu3ntw3] { width: 100%; }

.ln-hero-mockup[b-hvzdu3ntw3] {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #d5d5d5;
    padding: 10px;
    border: 2px solid #d5d5d5;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
}

/* Stack wrapper — main mockup at the bottom, two thumbnails floating up so roughly half of
   each thumbnail rises above the main mockup's top edge (asked-for "yarı yarıya yükselt" look).
   Padding-top on the stack reserves the space the thumbnails occupy so they never collide with
   the trust strip above. */
.ln-hero-mockup-stack[b-hvzdu3ntw3] {
    position: relative;
    padding-top: 70px;
}
.ln-hero-extras[b-hvzdu3ntw3] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.ln-hero-extra[b-hvzdu3ntw3] {
    position: absolute;
    width: 30%;
    border-radius: 12px;
    background: #d5d5d5;
    padding: 6px;
    border: 2px solid #d5d5d5;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    transition: transform 0.3s ease;
}
.ln-hero-extra img[b-hvzdu3ntw3] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
/* top values are absolute pixels so the lift is consistent regardless of mockup aspect ratio;
   thumbnails are ~140-180px tall in this layout, so ~70px of lift puts ~half above main. */
.ln-hero-extra-1[b-hvzdu3ntw3] { top: 0; left: -4%; transform: rotate(-7deg); }
.ln-hero-extra-2[b-hvzdu3ntw3] { top: 18px; right: -4%; transform: rotate(7deg); }
.ln-hero-mockup-stack:hover .ln-hero-extra-1[b-hvzdu3ntw3] { transform: rotate(-7deg) translateY(-4px); }
.ln-hero-mockup-stack:hover .ln-hero-extra-2[b-hvzdu3ntw3] { transform: rotate(7deg) translateY(-4px); }
@media (max-width: 768px) {
    .ln-hero-mockup-stack[b-hvzdu3ntw3] { padding-top: 0; }
    .ln-hero-extras[b-hvzdu3ntw3] { display: none; } /* keep mobile compact — main mockup is enough */
}

.ln-hero-img[b-hvzdu3ntw3] {
    width: 100%;
    height: auto;
    /* Cap height so very tall full-page screenshots (e.g. the whole reports dashboard) don't
       blow up the hero; crop from the top, where the headline metrics/charts sit. Keeps every
       slide's mockup in the same footprint (see .ln-hero-visual). */
    max-height: 440px;
    object-fit: cover;
    object-position: top;
    display: block;
    border-radius: 12px;
}

.ln-integration-bubbles[b-hvzdu3ntw3] {
    position: absolute;
    top: -89px;
    left: 50%;
    transform: translateX(-50%);
    /* 7 platform kartı sığsın (5 iken 680px yeterliydi); dar ekranda yine %96'ya düşer. */
    width: min(880px, 96%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 5;
}

.ln-bubble[b-hvzdu3ntw3] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

.ln-bubble-card[b-hvzdu3ntw3] {
    width: 88px;
    height: 88px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}

.ln-bubble-card img[b-hvzdu3ntw3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ln-bubble-tag[b-hvzdu3ntw3] {
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ln-bubble-1[b-hvzdu3ntw3] {
    top: 0;
    animation: lnBubbleA-b-hvzdu3ntw3 6s ease-in-out infinite;
}

.ln-bubble-2[b-hvzdu3ntw3] {
    top: 0;
    animation: lnBubbleB-b-hvzdu3ntw3 7s ease-in-out infinite;
}

.ln-bubble-3[b-hvzdu3ntw3] {
    top: 0;
    animation: lnBubbleC-b-hvzdu3ntw3 6.5s ease-in-out infinite;
}

.ln-bubble-4[b-hvzdu3ntw3] {
    top: 0;
    animation: lnBubbleA-b-hvzdu3ntw3 6.2s ease-in-out infinite;
}

.ln-bubble-5[b-hvzdu3ntw3] {
    top: 0;
    animation: lnBubbleB-b-hvzdu3ntw3 6.8s ease-in-out infinite;
}

.ln-bubble-6[b-hvzdu3ntw3] {
    top: 0;
    animation: lnBubbleC-b-hvzdu3ntw3 7.2s ease-in-out infinite;
}

.ln-bubble-7[b-hvzdu3ntw3] {
    top: 0;
    animation: lnBubbleA-b-hvzdu3ntw3 6.6s ease-in-out infinite;
}

.ln-bubble-card-fuudy img[b-hvzdu3ntw3] {
    filter: invert(1);
    object-fit: contain;
    padding: 18px;
}

.ln-bubble-card-getircarsi img[b-hvzdu3ntw3] {
    border-radius: 8px;
}

/* Migros logosu geniş wordmark (291×100) — kırpılmasın, kart genişliğini kullansın. */
.ln-bubble-card-migros img[b-hvzdu3ntw3] {
    object-fit: contain;
    padding: 10px;
}

.ln-bubble-card-tiklagelsin img[b-hvzdu3ntw3] {
    border-radius: 8px;
}

@keyframes lnBubbleA-b-hvzdu3ntw3 {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes lnBubbleB-b-hvzdu3ntw3 {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-12px) rotate(-2deg); }
}

@keyframes lnBubbleC-b-hvzdu3ntw3 {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

/* ===== LOGO BAR ===== */
.ln-logos[b-hvzdu3ntw3] {
    padding: 2.5rem 2rem;
    background: white;
    border-bottom: 1px solid #f1f5f9;
}

.ln-logos-inner[b-hvzdu3ntw3] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.ln-logos-label[b-hvzdu3ntw3] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.ln-logos-track[b-hvzdu3ntw3] {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex: 1;
    justify-content: center;
}

.ln-logo-item[b-hvzdu3ntw3] {
    height: 32px;
    width: auto;
    object-fit: contain;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    filter: grayscale(100%);
}

.ln-logo-item:hover[b-hvzdu3ntw3] {
    opacity: 1;
    filter: grayscale(0%);
}

/* Kare/JPEG logolar şeritte köşeli durmasın. */
.ln-logo-rounded[b-hvzdu3ntw3] {
    border-radius: 8px;
}

.ln-logo-invert[b-hvzdu3ntw3] {
    filter: grayscale(100%) invert(1);
}

.ln-logo-invert:hover[b-hvzdu3ntw3] {
    filter: invert(1);
    opacity: 1;
}

/* ===== PROBLEMS ===== */
.ln-problems[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: #fafbfc;
}

.ln-problems-grid[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.ln-problem-card[b-hvzdu3ntw3] {
    background: white;
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    border: 1px solid #fee2e2;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ln-problem-card:hover[b-hvzdu3ntw3] {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.08);
    border-color: #fca5a5;
}

.ln-problem-head[b-hvzdu3ntw3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ln-problem-icon[b-hvzdu3ntw3] {
    margin: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ln-problem-card h3[b-hvzdu3ntw3] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.ln-problem-card p[b-hvzdu3ntw3] {
    color: #64748b;
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.55;
}

/* ===== SOLUTION ===== */
.ln-solution[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: white;
}

.ln-solution-layout[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--ln-gap-lg);
    align-items: center;
}

.ln-solution-desc[b-hvzdu3ntw3] {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.ln-solution-checks[b-hvzdu3ntw3] {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.ln-solution-checks li[b-hvzdu3ntw3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 500;
}

.ln-solution-visual[b-hvzdu3ntw3] {
    border-radius: 20px;
    overflow: hidden;
    background: #d5d5d5;
    padding: 10px;
    border: 2px solid #d5d5d5;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
}

.ln-solution-img[b-hvzdu3ntw3] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* ===== COMPARISON TABLE ===== */
.ln-comparison[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: #f8fafc;
}

.ln-compare-table-wrap[b-hvzdu3ntw3] {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: white;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.ln-compare-table[b-hvzdu3ntw3] {
    width: 100%;
    border-collapse: collapse;
    min-width: 540px;
}

.ln-compare-table th[b-hvzdu3ntw3],
.ln-compare-table td[b-hvzdu3ntw3] {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem;
    vertical-align: middle;
}

.ln-compare-table thead th[b-hvzdu3ntw3] {
    background: #f8fafc;
    font-weight: 700;
    font-size: 0.9rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ln-compare-other[b-hvzdu3ntw3] {
    color: #94a3b8 !important;
}

.ln-compare-us[b-hvzdu3ntw3] {
    color: var(--accent-fill-rest) !important;
    background: #eff6ff !important;
}

.ln-compare-label[b-hvzdu3ntw3] {
    font-weight: 600;
    color: #0f172a;
}

.ln-compare-other-cell[b-hvzdu3ntw3] {
    color: #64748b;
}

.ln-compare-us-cell[b-hvzdu3ntw3] {
    color: #0f172a;
    font-weight: 600;
    background: #f0f7ff;
}

.ln-compare-us-cell .ln-compare-inline[b-hvzdu3ntw3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ln-compare-expensive[b-hvzdu3ntw3] {
    color: #ef4444 !important;
    font-weight: 700;
}

.ln-compare-cheap[b-hvzdu3ntw3] {
    color: #10b981 !important;
    font-weight: 700;
}

.ln-compare-table tbody tr:last-child td[b-hvzdu3ntw3] {
    border-bottom: none;
}

.ln-compare-table tbody tr:hover[b-hvzdu3ntw3] {
    background: #fafbfd;
}

/* ===== COMPLIANCE ===== */
.ln-compliance[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: white;
}

.ln-compliance-layout[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--ln-gap-lg);
    align-items: center;
}

.ln-compliance-desc[b-hvzdu3ntw3] {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.ln-compliance-badges[b-hvzdu3ntw3] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.ln-compliance-badge[b-hvzdu3ntw3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
}

.ln-compliance-visual[b-hvzdu3ntw3] {
    border-radius: 20px;
    overflow: hidden;
    background: #d5d5d5;
    padding: 10px;
    border: 2px solid #d5d5d5;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
}

.ln-compliance-img[b-hvzdu3ntw3] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* ===== FEATURES ===== */
.ln-features[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: #f8fafc;
}

.ln-features-grid[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.ln-feature-card[b-hvzdu3ntw3] {
    background: white;
    border-radius: 12px;
    padding: 1.1rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.ln-feature-card:hover[b-hvzdu3ntw3] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.08);
    transform: translateY(-3px);
}

.ln-feature-icon[b-hvzdu3ntw3] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0;
}

.ln-feature-icon[b-hvzdu3ntw3]  svg {
    width: 24px;
    height: 24px;
}

.ln-feature-head[b-hvzdu3ntw3] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ln-feature-copy[b-hvzdu3ntw3] {
    min-width: 0;
}

.ln-feature-title[b-hvzdu3ntw3] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem;
}

.ln-feature-desc[b-hvzdu3ntw3] {
    color: #64748b;
    font-size: 0.82rem;
    margin: 0 0 0.75rem;
    line-height: 1.45;
}

.ln-feature-link[b-hvzdu3ntw3] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: gap 0.2s ease;
}

.ln-feature-link:hover[b-hvzdu3ntw3] {
    text-decoration: underline;
}

.ln-feature-links[b-hvzdu3ntw3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

/* ===== SHOWCASE ===== */
.ln-showcase[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: white;
}

.ln-showcase-row[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: var(--ln-gap-lg);
    align-items: center;
    margin-bottom: clamp(2.5rem, 6vw, 6rem);
}

.ln-showcase-row:last-child[b-hvzdu3ntw3] {
    margin-bottom: 0;
}

.ln-showcase-row.ln-showcase-reverse[b-hvzdu3ntw3] {
    direction: rtl;
}

.ln-showcase-row.ln-showcase-reverse > *[b-hvzdu3ntw3] {
    direction: ltr;
}

.ln-showcase-title[b-hvzdu3ntw3] {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1rem;
    line-height: 1.25;
}

.ln-showcase-desc[b-hvzdu3ntw3] {
    color: #475569;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.ln-showcase-points[b-hvzdu3ntw3] {
    margin: 0 0 1.25rem;
    padding-left: 1.1rem;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
}

.ln-showcase-points li[b-hvzdu3ntw3] {
    margin-bottom: 0.45rem;
}

.ln-showcase-stats[b-hvzdu3ntw3] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.ln-stat[b-hvzdu3ntw3] {
    display: flex;
    flex-direction: column;
}

.ln-stat-number[b-hvzdu3ntw3] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-fill-rest);
}

.ln-stat-label[b-hvzdu3ntw3] {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 500;
}

.ln-showcase-visual[b-hvzdu3ntw3] {
    border-radius: 20px;
    overflow: hidden;
    background: #d5d5d5;
    padding: 10px;
    border: 2px solid #d5d5d5;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
}

.ln-showcase-img[b-hvzdu3ntw3] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.ln-integration-logos[b-hvzdu3ntw3] {
    display: flex;
    flex-wrap: wrap;   /* platform sayısı arttıkça satır taşmasın */
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ln-integ-logo[b-hvzdu3ntw3] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ln-integ-logo-fuudy[b-hvzdu3ntw3] {
    object-fit: contain;
    background: #0f172a;
    padding: 8px;
    filter: invert(1);
}

.ln-integ-logo-getircarsi[b-hvzdu3ntw3] {
    object-fit: contain;
    padding: 4px;
    background: #ffffff;
}

/* Kare olmayan (SVG) logolar kırpılmasın. */
.ln-integ-logo-contain[b-hvzdu3ntw3] {
    object-fit: contain;
    padding: 6px;
    background: #ffffff;
}

/* ===== HOW IT WORKS ===== */
.ln-how[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: #f8fafc;
}

.ln-how-steps[b-hvzdu3ntw3] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.ln-step[b-hvzdu3ntw3] {
    flex: 1;
    max-width: 320px;
    text-align: center;
    padding: 0 1.5rem;
}

.ln-step-number[b-hvzdu3ntw3] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: white;
    font-size: 1.25rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.3);
}

.ln-step h3[b-hvzdu3ntw3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

.ln-step p[b-hvzdu3ntw3] {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.55;
}

.ln-step-line[b-hvzdu3ntw3] {
    width: 60px;
    height: 2px;
    background: #cbd5e1;
    margin-top: 26px;
    flex-shrink: 0;
}

/* ===== SECTORS ===== */
.ln-sectors[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: white;
}

.ln-sectors-grid[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.ln-sector-card[b-hvzdu3ntw3] {
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    background: white;
}

.ln-sector-card:hover[b-hvzdu3ntw3] {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
    border-color: var(--accent-fill-rest);
}

.ln-sector-card:hover .ln-sector-img[b-hvzdu3ntw3] {
    transform: scale(1.05);
}

.ln-sector-img-wrap[b-hvzdu3ntw3] {
    height: 180px;
    overflow: hidden;
    background: transparent;
    padding: 0;
}

.ln-showcase-visual-mobile[b-hvzdu3ntw3] {
    width: min(260px, 100%);
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.ln-showcase-mobile-grid[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.ln-showcase-mobile-grid-manager-swap .ln-showcase-slideshow[b-hvzdu3ntw3] {
    min-width: 0;
    height: clamp(220px, 26vw, 272px);
}

.ln-showcase-slideshow[b-hvzdu3ntw3] {
    position: relative;
    width: 100%;
    /*aspect-ratio: 946 / 2048;*/
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
    padding: 6px;
    border: 1px solid #d5d5d5;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.ln-showcase-mobile-img[b-hvzdu3ntw3] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    background: #0f172a;
}

.ln-manager-swap-a[b-hvzdu3ntw3] {
    position: absolute;
    inset: 0;
    opacity: 1;
    animation: lnManagerSwapA-b-hvzdu3ntw3 10s ease-in-out infinite;
    z-index: 2;
}

.ln-manager-swap-b[b-hvzdu3ntw3] {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: lnManagerSwapB-b-hvzdu3ntw3 10s ease-in-out infinite;
    z-index: 1;
}

@keyframes lnManagerSwapA-b-hvzdu3ntw3 {
    0%, 47% { opacity: 1; }
    50%, 97% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes lnManagerSwapB-b-hvzdu3ntw3 {
    0%, 47% { opacity: 0; }
    50%, 97% { opacity: 1; }
    100% { opacity: 0; }
}

/* Raporlama showcase'i tek görsel yerine üç rapor ekranını aynı çerçevede
   sırayla gösterir. İlk görsel akışta kalıp çerçevenin yüksekliğini belirler,
   diğer ikisi üstüne bindirilir. 18sn'lik döngüde her biri 6sn görünür;
   negatif gecikmelerle sıraya girerler. */
.ln-showcase-rotate[b-hvzdu3ntw3] {
    position: relative;
}

.ln-showcase-rotate .ln-showcase-img[b-hvzdu3ntw3] {
    animation: lnShowcaseRotate-b-hvzdu3ntw3 18s ease-in-out infinite;
}

.ln-showcase-rotate .ln-rotate-2[b-hvzdu3ntw3],
.ln-showcase-rotate .ln-rotate-3[b-hvzdu3ntw3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* en-boy oranları birebir aynı değil; üstten hizala ki başlık şeridi
       her zaman görünsün */
    object-fit: cover;
    object-position: top;
}

.ln-showcase-rotate .ln-rotate-2[b-hvzdu3ntw3] {
    animation-delay: -12s;
}

.ln-showcase-rotate .ln-rotate-3[b-hvzdu3ntw3] {
    animation-delay: -6s;
}

@keyframes lnShowcaseRotate-b-hvzdu3ntw3 {
    0%, 30% { opacity: 1; }
    36%, 97% { opacity: 0; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ln-manager-swap-a[b-hvzdu3ntw3],
    .ln-manager-swap-b[b-hvzdu3ntw3] {
        animation: none;
    }

    .ln-manager-swap-b[b-hvzdu3ntw3] {
        display: none;
    }

    .ln-showcase-rotate .ln-showcase-img[b-hvzdu3ntw3] {
        animation: none;
    }

    .ln-showcase-rotate .ln-rotate-2[b-hvzdu3ntw3],
    .ln-showcase-rotate .ln-rotate-3[b-hvzdu3ntw3] {
        display: none;
    }
}

/* ==================== INSTAGRAM REELS ==================== */

.ln-reels-grid[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Reel'ler 9:16; iframe kendi yüksekliğini bildirmediği için oranı biz veriyoruz */
.ln-reel[b-hvzdu3ntw3] {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid #e2e8f0;
}

.ln-reel iframe[b-hvzdu3ntw3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Mobilde altı kartı alt alta dizmek bölümü ~5 ekran boyu yapıyordu.
   Yatay kaydırmalı şeride çevirip tek ekrana indiriyoruz. */
@media (max-width: 767px) {
    .ln-reels-grid[b-hvzdu3ntw3] {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* kenarlardan taşır: şeridin kaydırılabildiği görünsün */
        padding-inline: 1.25rem;
        margin-inline: -1.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ln-reels-grid[b-hvzdu3ntw3]::-webkit-scrollbar {
        display: none;
    }

    .ln-reel[b-hvzdu3ntw3] {
        flex: 0 0 72vw;
        scroll-snap-align: center;
    }
}

.ln-reels-actions[b-hvzdu3ntw3] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.ln-reels-cta[b-hvzdu3ntw3] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* Footer sosyal bağlantı — uygulama rozetleri bloğuyla aynı düzen:
   etiket kendi satırında, bağlantılar altında. */
.ln-footer-social[b-hvzdu3ntw3] {
    margin-top: 1.5rem;
}

.ln-footer-social-links[b-hvzdu3ntw3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ln-social-link[b-hvzdu3ntw3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: inherit;
    transition: border-color 0.2s ease;
}

.ln-social-link:hover[b-hvzdu3ntw3],
.ln-social-link:focus-visible[b-hvzdu3ntw3] {
    border-color: currentColor;
}

.ln-sector-img[b-hvzdu3ntw3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.4s ease;
}

.ln-sector-info[b-hvzdu3ntw3] {
    padding: 1.25rem 1.5rem;
}

.ln-sector-info h3[b-hvzdu3ntw3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.35rem;
}

.ln-sector-link[b-hvzdu3ntw3] {
    color: var(--accent-fill-rest);
    font-weight: 600;
    font-size: 0.875rem;
}

/* ===== REFERENCES ===== */
.ln-references[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: #f8fafc;
    overflow: hidden;
}

.ln-ref-marquee[b-hvzdu3ntw3] {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.ln-ref-track[b-hvzdu3ntw3] {
    display: flex;
    gap: 1.5rem;
    animation: lnMarquee-b-hvzdu3ntw3 30s linear infinite;
    width: max-content;
}

.ln-ref-marquee:hover .ln-ref-track[b-hvzdu3ntw3] {
    animation-play-state: paused;
}

@keyframes lnMarquee-b-hvzdu3ntw3 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ln-ref-card[b-hvzdu3ntw3] {
    width: 160px;
    height: 100px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    flex-shrink: 0;
}

.ln-ref-logo[b-hvzdu3ntw3] {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
}

/* ===== DEMO ===== */
.ln-demo[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: white;
}

.ln-demo-grid[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.ln-demo-card[b-hvzdu3ntw3] {
    text-decoration: none;
    color: inherit;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.ln-demo-card:hover[b-hvzdu3ntw3] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.1);
    transform: translateY(-4px);
}

.ln-demo-icon[b-hvzdu3ntw3] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ln-demo-icon[b-hvzdu3ntw3]  svg {
    width: 32px;
    height: 32px;
}

.ln-demo-icon-img[b-hvzdu3ntw3] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ln-demo-card h3[b-hvzdu3ntw3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.35rem;
}

.ln-demo-card p[b-hvzdu3ntw3] {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

.ln-demo-link[b-hvzdu3ntw3] {
    color: var(--accent-fill-rest);
    font-weight: 600;
    font-size: 0.875rem;
}

/* ===== CTA ===== */
.ln-cta[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: linear-gradient(135deg, var(--accent-fill-rest) 0%, #4f46e5 100%);
    text-align: center;
}

.ln-cta-inner[b-hvzdu3ntw3] {
    max-width: 700px;
    margin: 0 auto;
}

.ln-cta-title[b-hvzdu3ntw3] {
    font-size: var(--ln-h2);
    font-weight: 800;
    color: white;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.ln-cta-desc[b-hvzdu3ntw3] {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.85);
    margin: 0 0 2rem;
    line-height: 1.6;
}

.ln-cta-actions[b-hvzdu3ntw3] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.ln-btn-cta-primary[b-hvzdu3ntw3] {
    padding: 1rem 2.5rem;
    background: white;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 10px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.ln-btn-cta-primary:hover[b-hvzdu3ntw3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.ln-btn-cta-ghost[b-hvzdu3ntw3] {
    padding: 1rem 2.5rem;
    background: transparent;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.3);
    transition: all 0.25s ease;
}

.ln-btn-cta-ghost:hover[b-hvzdu3ntw3] {
    background: rgba(255,255,255,0.1);
    border-color: white;
}

/* ===== FOOTER ===== */
.ln-footer[b-hvzdu3ntw3] {
    background: #0f172a;
    color: white;
    padding: clamp(2.5rem, 5vw, 4rem) var(--ln-section-x) 2rem;
}

.ln-footer-inner[b-hvzdu3ntw3] {
    max-width: 1200px;
    margin: 0 auto;
}

.ln-footer-top[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 4rem;
    margin-bottom: 3rem;
}

.ln-footer-logo[b-hvzdu3ntw3] {
    font-family: 'Damion', cursive;
    font-size: 32px;
    color: white;
    display: block;
    margin-bottom: 0.75rem;
}

.ln-footer-tagline[b-hvzdu3ntw3] {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.6;
}

.ln-footer-apps[b-hvzdu3ntw3] {
    margin-top: 1.5rem;
}

.ln-footer-apps-label[b-hvzdu3ntw3] {
    display: block;
    color: #cbd5e1;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.ln-footer-apps-badges[b-hvzdu3ntw3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ln-store-badge[b-hvzdu3ntw3] {
    display: inline-flex;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.ln-store-badge:hover[b-hvzdu3ntw3] {
    transform: translateY(-2px);
    opacity: 0.9;
}

.ln-store-badge img[b-hvzdu3ntw3] {
    height: 42px;
    width: auto;
    display: block;
}

.ln-footer-cols[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.ln-footer-col h4[b-hvzdu3ntw3] {
    font-weight: 600;
    color: white;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.ln-footer-col a[b-hvzdu3ntw3] {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 0.4rem;
    transition: color 0.2s ease;
}

.ln-footer-col a:hover[b-hvzdu3ntw3] {
    color: var(--accent-fill-rest);
}

.ln-footer-pay[b-hvzdu3ntw3] {
    display: flex;
    justify-content: center;
    padding: 1.75rem 0 0.5rem;
}

.ln-footer-bottom[b-hvzdu3ntw3] {
    border-top: 1px solid #1e293b;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #64748b;
    font-size: 0.85rem;
}

.ln-footer-bottom-apps[b-hvzdu3ntw3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ln-footer-bottom-apps .ln-store-badge img[b-hvzdu3ntw3] {
    height: 34px;
}

.ln-blog-preview[b-hvzdu3ntw3] {
    padding: 36px 0 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.ln-blog-grid[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ln-blog-card[b-hvzdu3ntw3] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.ln-blog-media[b-hvzdu3ntw3] {
    display: block;
    line-height: 0;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
}

.ln-blog-media img[b-hvzdu3ntw3] {
    width: 100%;
    height: 220px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.ln-blog-card-body[b-hvzdu3ntw3] {
    padding: 14px;
}

.ln-blog-date[b-hvzdu3ntw3] {
    color: #6b7280;
    font-size: 12px;
    margin: 0;
}

.ln-blog-card h3[b-hvzdu3ntw3] {
    font-size: 1.08rem;
    margin: 0 0 8px;
    line-height: 1.3;
}

.ln-blog-card h3 a[b-hvzdu3ntw3] {
    color: #0f172a;
    text-decoration: none;
}

.ln-blog-card p[b-hvzdu3ntw3] {
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 10px;
}

.ln-blog-read[b-hvzdu3ntw3] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.ln-blog-footer[b-hvzdu3ntw3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ln-blog-actions[b-hvzdu3ntw3] {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

/* ===== PRICING MODELS ===== */
.ln-pricing-models[b-hvzdu3ntw3] {
    padding: var(--ln-section-y) var(--ln-section-x);
    background: white;
}

.ln-pricing-models-grid[b-hvzdu3ntw3] {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.ln-pricing-model-card[b-hvzdu3ntw3] {
    position: relative;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--ln-radius-card);
    padding: var(--ln-card-pad);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.ln-pricing-model-card:hover[b-hvzdu3ntw3] {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
    border-color: var(--accent-fill-rest);
}

.ln-pricing-model-card.ln-featured[b-hvzdu3ntw3] {
    border: 2px solid var(--accent-fill-rest);
    background: linear-gradient(180deg, #f5f7ff 0%, #ffffff 60%);
    box-shadow: 0 10px 28px rgba(102, 126, 234, 0.12);
}

.ln-pricing-model-badge[b-hvzdu3ntw3] {
    position: absolute;
    top: -10px;
    left: 1.25rem;
    background: var(--accent-fill-rest);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

.ln-pricing-model-tag[b-hvzdu3ntw3] {
    color: var(--accent-fill-rest);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.ln-pricing-model-card h3[b-hvzdu3ntw3] {
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.ln-pricing-model-price[b-hvzdu3ntw3] {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 800;
    color: #0f172a;
    margin: 0.25rem 0 0.75rem;
    line-height: 1;
}

.ln-pricing-model-price small[b-hvzdu3ntw3] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}

.ln-pricing-model-price-struck[b-hvzdu3ntw3] {
    display: inline-block;
    margin-right: 0.4rem;
    font-size: 0.65em;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    vertical-align: middle;
}

.ln-pricing-model-desc[b-hvzdu3ntw3] {
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.ln-pricing-model-checks[b-hvzdu3ntw3] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ln-pricing-model-checks li[b-hvzdu3ntw3] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.45;
}

.ln-pricing-model-checks li svg[b-hvzdu3ntw3] {
    flex-shrink: 0;
    margin-top: 2px;
}

.ln-pricing-model-cta[b-hvzdu3ntw3] {
    margin-top: auto;
    color: var(--accent-fill-rest);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: gap 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ln-pricing-model-cta:hover[b-hvzdu3ntw3] {
    gap: 0.65rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .ln-hero-inner[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Mobilde/tablette tek sütuna düşünce görsel metnin üstünde olsun */
    .ln-hero-visual[b-hvzdu3ntw3] { order: -1; }
    .ln-hero-text[b-hvzdu3ntw3]   { order: 0; }

    .ln-solution-layout[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .ln-showcase-row[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .ln-showcase-row.ln-showcase-reverse[b-hvzdu3ntw3] {
        direction: ltr;
    }

    .ln-blog-grid[b-hvzdu3ntw3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ln-features-grid[b-hvzdu3ntw3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ln-sectors-grid[b-hvzdu3ntw3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ln-footer-top[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .ln-footer-cols[b-hvzdu3ntw3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ln-compliance-layout[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .ln-showcase-visual-mobile[b-hvzdu3ntw3] {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .ln-hero-desc[b-hvzdu3ntw3] {
        font-size: 1rem;
    }

    .ln-hero-ctas[b-hvzdu3ntw3] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .ln-hero-ctas .ln-btn-primary[b-hvzdu3ntw3],
    .ln-hero-ctas .ln-btn-ghost[b-hvzdu3ntw3] {
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    .ln-hero-visual[b-hvzdu3ntw3] {
        /* Hug the image instead of reserving the desktop 380px footprint — that reserved
           height left large empty bands above/below short mobile screenshots. */
        min-height: auto;
        padding-top: 0;
    }

    /* Only the slide that has integration bubbles (pinned at top:0) needs clearance above
       the mockup; other slides shouldn't carry that empty top strip. */
    .ln-hero-visual:has(.ln-integration-bubbles)[b-hvzdu3ntw3] {
        padding-top: 56px;
    }

    .ln-integration-bubbles[b-hvzdu3ntw3] {
        top: 0;
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        z-index: 6;
    }

    .ln-bubble-card[b-hvzdu3ntw3] {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .ln-bubble-card-fuudy img[b-hvzdu3ntw3] {
        padding: 10px;
    }

    .ln-bubble-tag[b-hvzdu3ntw3] {
        font-size: 0.58rem;
        padding: 2px 6px;
        margin-top: 4px;
    }

    .ln-hero-mockup[b-hvzdu3ntw3] {
        padding: 6px;
        border-radius: 14px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    }

    .ln-logos[b-hvzdu3ntw3] {
        padding: 1.5rem var(--ln-section-x);
    }

    .ln-logos-inner[b-hvzdu3ntw3] {
        flex-direction: column;
        gap: 1rem;
    }

    .ln-logos-track[b-hvzdu3ntw3] {
        flex-wrap: wrap;
        gap: 1.25rem;
        justify-content: center;
    }

    .ln-logo-item[b-hvzdu3ntw3] {
        height: 24px;
    }

    .ln-problems-grid[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .ln-problem-card[b-hvzdu3ntw3] {
        padding: 0.95rem 1rem;
        gap: 0.4rem;
    }

    .ln-problem-head[b-hvzdu3ntw3] {
        gap: 0.6rem;
    }

    .ln-problem-icon[b-hvzdu3ntw3] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 8px;
    }

    .ln-problem-card h3[b-hvzdu3ntw3] {
        font-size: 0.98rem;
    }

    .ln-problem-card p[b-hvzdu3ntw3] {
        font-size: 0.86rem;
        line-height: 1.5;
    }

    .ln-features-grid[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ln-sections-grid[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .ln-sectors-grid[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .ln-demo-grid[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .ln-pricing-models-grid[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .ln-pricing-model-card[b-hvzdu3ntw3] {
        padding: 1.25rem;
    }

    .ln-showcase-stats[b-hvzdu3ntw3] {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .ln-stat-number[b-hvzdu3ntw3] {
        font-size: 1.25rem;
    }

    .ln-how-steps[b-hvzdu3ntw3] {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .ln-step[b-hvzdu3ntw3] {
        max-width: none;
        padding: 0 0.5rem;
    }

    .ln-step-line[b-hvzdu3ntw3] {
        width: 2px;
        height: 32px;
        margin: 0;
    }

    .ln-cta-actions[b-hvzdu3ntw3] {
        flex-direction: column;
        align-items: stretch;
    }

    .ln-cta-actions .ln-btn-cta-primary[b-hvzdu3ntw3],
    .ln-cta-actions .ln-btn-cta-ghost[b-hvzdu3ntw3] {
        text-align: center;
    }

    .ln-footer-cols[b-hvzdu3ntw3] {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    .ln-footer-bottom[b-hvzdu3ntw3] {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .ln-showcase-mobile-grid[b-hvzdu3ntw3] {
        gap: 8px;
    }

    .ln-compliance-badges[b-hvzdu3ntw3] {
        gap: 0.5rem;
    }

    .ln-compliance-badge[b-hvzdu3ntw3] {
        font-size: 0.78rem;
        padding: 0.4rem 0.75rem;
    }

    /* Compare table mobile tightening */
    .ln-compare-table-wrap[b-hvzdu3ntw3] {
        position: relative;
    }

    .ln-compare-table-wrap[b-hvzdu3ntw3]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(15, 23, 42, 0.06));
        pointer-events: none;
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .ln-compare-table th[b-hvzdu3ntw3],
    .ln-compare-table td[b-hvzdu3ntw3] {
        padding: 0.7rem 0.85rem;
        font-size: 0.82rem;
    }

    .ln-compare-table thead th[b-hvzdu3ntw3] {
        font-size: 0.75rem;
    }

    /* Sectors */
    .ln-sector-img-wrap[b-hvzdu3ntw3] {
        height: 150px;
    }

    /* Demo cards */
    .ln-demo-card[b-hvzdu3ntw3] {
        padding: 1.5rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .ln-blog-grid[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .ln-footer-cols[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .ln-section-header[b-hvzdu3ntw3] {
        margin-bottom: 1.5rem;
    }

    .ln-problem-card[b-hvzdu3ntw3],
    .ln-feature-card[b-hvzdu3ntw3] {
        padding: 1rem 1.1rem;
    }
}
/* /Components/Pages/Landing/PlatformFeatures/AiRapor.razor.rz.scp.css */
/* AiRapor Page Specific Styles */

/* Section Common */
.section-header[b-epgky2rkwt] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-epgky2rkwt] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-description[b-epgky2rkwt] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Solutions Section - Used for AI Questions */
.solutions-section[b-epgky2rkwt] {
    padding: 3rem 0;
    background: #f7fafc;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Features Grid - Used for AI Questions cards */
.features-grid[b-epgky2rkwt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

/* AI Questions Grid - 2 columns */
.ai-questions-grid[b-epgky2rkwt] {
    grid-template-columns: repeat(2, 1fr);
}

/* Feature Card - Used for AI Questions */
.feature-card[b-epgky2rkwt] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.feature-card:hover[b-epgky2rkwt] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
    z-index: 10;
    position: relative;
}

.feature-card h4[b-epgky2rkwt] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.75rem;
    width: 100%;
}

.feature-card p[b-epgky2rkwt] {
    color: #4a5568;
    line-height: 1.7;
    font-size: 0.9rem;
    width: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .features-grid[b-epgky2rkwt] {
        grid-template-columns: repeat(3, 1fr);
    }

    .ai-questions-grid[b-epgky2rkwt] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title[b-epgky2rkwt] {
        font-size: 1.75rem;
    }

    .features-grid[b-epgky2rkwt] {
        grid-template-columns: 1fr;
    }

    .ai-questions-grid[b-epgky2rkwt] {
        grid-template-columns: 1fr;
    }

    .solutions-section[b-epgky2rkwt] {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-epgky2rkwt] {
        font-size: 1.5rem;
    }

    .section-description[b-epgky2rkwt] {
        font-size: 1rem;
    }

    .feature-card[b-epgky2rkwt] {
        padding: 1.5rem;
        min-height: auto;
    }

    .feature-card h4[b-epgky2rkwt] {
        font-size: 1rem;
    }

    .feature-card p[b-epgky2rkwt] {
        font-size: 0.85rem;
    }
}
/* /Components/Pages/Landing/PlatformFeatures/DetayliRaporlar.razor.rz.scp.css */
/* DetayliRaporlar Page Specific Styles */

.section-header[b-eo2xdwu3ka] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-eo2xdwu3ka] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

/* Report Types Section */
.solutions-section[b-eo2xdwu3ka] {
    padding: 3rem 0;
    background: #f7fafc;
    margin: 0;
    position: relative;
    z-index: 2;
}

.features-grid[b-eo2xdwu3ka] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.feature-card[b-eo2xdwu3ka] {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-card:hover[b-eo2xdwu3ka] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
    z-index: 10;
    position: relative;
}

.feature-card h4[b-eo2xdwu3ka] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}

.feature-card p[b-eo2xdwu3ka] {
    color: #4a5568;
    line-height: 1.6;
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 1024px) {
    .features-grid[b-eo2xdwu3ka] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title[b-eo2xdwu3ka] {
        font-size: 1.75rem;
    }

    .features-grid[b-eo2xdwu3ka] {
        grid-template-columns: 1fr;
    }

    .solutions-section[b-eo2xdwu3ka] {
        padding: 2rem 1rem;
    }
}
/* /Components/Pages/Landing/PlatformFeatures/Entegrasyonlar.razor.rz.scp.css */
/* Entegrasyonlar Page - Manual Sections Styles */

/* Section Common */
.section-header[b-0xt8rgwcl1] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-0xt8rgwcl1] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-description[b-0xt8rgwcl1] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Solutions Section - For manual HTML sections */
.solutions-section[b-0xt8rgwcl1] {
    padding: 3rem 0;
    background: #f7fafc;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Features Section - For manual HTML sections */
.features-section[b-0xt8rgwcl1] {
    padding: 2rem 1rem 3rem 1rem;
    background: white;
    margin-top: -20px;
    position: relative;
    z-index: 1;
}

/* Features Grid - For manual HTML sections */
.features-grid[b-0xt8rgwcl1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Feature Card - For manual HTML sections */
.feature-card[b-0xt8rgwcl1] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.feature-card:hover[b-0xt8rgwcl1] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
    z-index: 10;
    position: relative;
}

.feature-icon[b-0xt8rgwcl1] {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    color: var(--accent);
}

.feature-icon[b-0xt8rgwcl1]  svg {
    width: 48px;
    height: 48px;
}

.feature-card h4[b-0xt8rgwcl1] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.75rem;
    width: 100%;
}

.feature-card p[b-0xt8rgwcl1] {
    color: #4a5568;
    line-height: 1.7;
    font-size: 0.9rem;
    width: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .features-grid[b-0xt8rgwcl1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title[b-0xt8rgwcl1] {
        font-size: 1.75rem;
    }

    .section-description[b-0xt8rgwcl1] {
        font-size: 1rem;
    }

    .features-grid[b-0xt8rgwcl1] {
        grid-template-columns: 1fr;
    }

    .feature-card[b-0xt8rgwcl1] {
        min-height: auto;
        padding: 1.5rem;
    }

    .feature-icon[b-0xt8rgwcl1] {
        margin-bottom: 1rem;
    }

    .feature-card h4[b-0xt8rgwcl1] {
        font-size: 1rem;
    }

    .feature-card p[b-0xt8rgwcl1] {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-0xt8rgwcl1] {
        font-size: 1.5rem;
    }

    .solutions-section[b-0xt8rgwcl1],
    .features-section[b-0xt8rgwcl1] {
        padding: 2rem 0;
    }
}
/* /Components/Pages/Landing/PlatformFeatures/EsnafKurye.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/GarsonSiparis.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/MasaYonetimi.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/OnlineSiparis.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/PlatformFeatures.razor.rz.scp.css */
/* Use Cases Page - Landing ile Uyumlu */

/* Container & Layout */
.use-cases-container[b-uplkgfqj9t] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.use-cases-content[b-uplkgfqj9t] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

/* Hero Section */
.hero-section[b-uplkgfqj9t] {
    text-align: center;
    margin-bottom: 4rem;
    padding: 2rem 0;
}

.hero-title[b-uplkgfqj9t] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hero-subtitle[b-uplkgfqj9t] {
    font-size: 1.25rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Sectors Grid */
.sectors-grid[b-uplkgfqj9t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Sector Card */
.sector-card[b-uplkgfqj9t] {
    background: white;
    border-radius: 20px;
    padding: 1.5rem 1.5rem 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

.sector-card:hover[b-uplkgfqj9t] {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-fill-rest);
}

.sector-card-featured[b-uplkgfqj9t] {
    border: 2px solid var(--accent-fill-rest);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, white 100%);
}

.sector-badge[b-uplkgfqj9t] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--accent-fill-rest);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.sector-image[b-uplkgfqj9t] {
    margin-bottom: 0.5rem;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: visible;
    background: transparent;
    position: relative;
}

/* Mobile App Card - Taller height for vertical screenshots.
   Telefon ekran görüntüleri dikey (en-boy ~1:2.2). Diğer kartlarda çerçeveler
   GENİŞLİĞE göre ölçekleniyor ve yükseklik en-boydan türüyor; dikey görselde bu
   yükseklik kutuyu (200px) katbekat aşıp başlığın üstüne biniyordu. Burada
   çerçeveleri YÜKSEKLİĞE göre ölçekliyoruz — kart eni ne olursa olsun görsel
   kutunun içinde kalır, taşma matematiksel olarak imkânsız. */
.sector-image-mobile[b-uplkgfqj9t] {
    height: 320px;
}

/* Yalnız DİKEY telefon görselleri yüksekliğe göre ölçeklenir. Kart karışık:
   ana görsel + 1. ikincil telefon (946x2048), 2. ikincil yatay web görüntüsü
   (1912x904). Kuralı hepsine uygulasak yatay olan 500px'e yayılırdı. */
.sector-image-mobile .screenshot-main:has(img[src*="/mobil-"])[b-uplkgfqj9t] {
    width: auto;
    max-width: none;
    height: 94%;
    top: 3%;
    border-radius: 18px;
}

.sector-image-mobile .screenshot-secondary:has(img[src*="/mobil-"])[b-uplkgfqj9t] {
    width: auto;
    max-width: none;
    height: 74%;
    top: 16%;
    border-radius: 16px;
}

.sector-image-mobile .screenshot-main:has(img[src*="/mobil-"]) img[b-uplkgfqj9t],
.sector-image-mobile .screenshot-secondary:has(img[src*="/mobil-"]) img[b-uplkgfqj9t] {
    width: auto;
    height: 100%;
}

.sector-image-mobile .screenshot-secondary-1:has(img[src*="/mobil-"])[b-uplkgfqj9t] {
    right: 4%;
}

/* Yatay ikincil: telefon kartında hero telefon kalsın diye biraz küçültülüp
   yukarı alındı; 320px kutuya rahat sığar. */
.sector-image-mobile .screenshot-secondary-2[b-uplkgfqj9t] {
    width: 38%;
    max-width: 260px;
    top: 30%;
    left: 4%;
}

/* Slide Screenshots Container */
.slide-screenshots[b-uplkgfqj9t] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ana Screenshot - Merkez */
.screenshot-main[b-uplkgfqj9t] {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: 84%;
    max-width: 480px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sector-card:hover .screenshot-main[b-uplkgfqj9t] {
    transform: translateX(-50%) translateY(-5px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

/* Mobile App Screenshots - Container için */
.screenshot-main:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    width: 28%;
    max-width: 240px;
    border-radius: 20px;
    top: 5%;
    transform: translateX(-50%) scale(0.95);
}

.sector-card:hover .screenshot-main:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    transform: translateX(-50%) scale(0.98) translateY(-5px);
}

.screenshot-main img[b-uplkgfqj9t] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Secondary Screenshots */
.screenshot-secondary[b-uplkgfqj9t] {
    position: absolute;
    background: white;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sector-card:hover .screenshot-secondary[b-uplkgfqj9t] {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
}

.screenshot-secondary img[b-uplkgfqj9t] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Secondary Position 1 - Sağ, Primary ile Overlap */
.screenshot-secondary-1[b-uplkgfqj9t] {
    width: 45%;
    max-width: 340px;
    top: 35%;
    right: 1%;
    z-index: 2;
    transform: rotate(2deg);
}

.sector-card:hover .screenshot-secondary-1[b-uplkgfqj9t] {
    transform: rotate(3deg) translateY(-5px);
    z-index: 11;
}

/* Mobile App Secondary Position 1 */
.screenshot-secondary-1:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    width: 22%;
    max-width: 200px;
    right: 3%;
    top: 48%;
    border-radius: 18px;
    transform: rotate(2deg) scale(0.9);
}

.sector-card:hover .screenshot-secondary-1:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    transform: rotate(3deg) translateY(-5px) scale(0.92);
}

/* Secondary Position 2 - Sol, Primary ile Overlap */
.screenshot-secondary-2[b-uplkgfqj9t] {
    width: 45%;
    max-width: 340px;
    top: 35%;
    left: 1%;
    z-index: 1;
    transform: rotate(-2deg);
}

.sector-card:hover .screenshot-secondary-2[b-uplkgfqj9t] {
    transform: rotate(-3deg) translateY(-5px);
    z-index: 11;
}

/* Mobile App Secondary Position 2 */
.screenshot-secondary-2:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    width: 22%;
    max-width: 200px;
    left: 3%;
    top: 48%;
    border-radius: 18px;
    transform: rotate(-2deg) scale(0.9);
}

.sector-card:hover .screenshot-secondary-2:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    transform: rotate(-3deg) translateY(-5px) scale(0.92);
}

/* Detailed-reports screenshots render taller than the web-screenshot cards;
   shrink them and cap the height so they stay inside the image area and don't
   bleed over the title. */
.sector-card-reports .screenshot-main[b-uplkgfqj9t] {
    width: 66%;
    max-width: 360px;
    top: 2%;
}

.sector-card-reports .screenshot-main img[b-uplkgfqj9t] {
    max-height: 150px;
    object-fit: cover;
    object-position: top;
}

.sector-card-reports .screenshot-secondary-1[b-uplkgfqj9t],
.sector-card-reports .screenshot-secondary-2[b-uplkgfqj9t] {
    width: 36%;
    max-width: 250px;
    top: 26%;
}

.sector-card-reports .screenshot-secondary-1 img[b-uplkgfqj9t],
.sector-card-reports .screenshot-secondary-2 img[b-uplkgfqj9t] {
    max-height: 100px;
    object-fit: cover;
    object-position: top;
}

.sector-title[b-uplkgfqj9t] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    margin-top: 0;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 15;
}

.sector-description[b-uplkgfqj9t] {
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    flex: 1;
    position: relative;
    z-index: 15;
}

.sector-features[b-uplkgfqj9t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 15;
}

.feature-tag[b-uplkgfqj9t] {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    z-index: 15;
}

.sector-card:hover .feature-tag[b-uplkgfqj9t] {
    background: rgba(102, 126, 234, 0.1);
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
}

.sector-cta[b-uplkgfqj9t] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--accent-fill-rest);
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: auto;
    transition: gap 0.3s ease;
    position: relative;
    z-index: 15;
}

.sector-card:hover .sector-cta[b-uplkgfqj9t] {
    gap: 0.75rem;
}

/* CTA Section */
.cta-section[b-uplkgfqj9t] {
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
    background: var(--accent-fill-rest);
    border-radius: 20px;
    margin-top: 2rem;
}

.cta-content h2[b-uplkgfqj9t] {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.cta-content p[b-uplkgfqj9t] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons[b-uplkgfqj9t] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.btn-cta-primary[b-uplkgfqj9t],
.btn-cta-secondary[b-uplkgfqj9t] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-cta-primary[b-uplkgfqj9t]  svg,
.btn-cta-secondary[b-uplkgfqj9t]  svg {
    width: 20px;
    height: 20px;
}

.btn-cta-primary[b-uplkgfqj9t] {
    background: white;
    color: var(--accent-fill-rest);
}

.btn-cta-primary:hover[b-uplkgfqj9t] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn-cta-secondary[b-uplkgfqj9t] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid white;
}

.btn-cta-secondary:hover[b-uplkgfqj9t] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-title[b-uplkgfqj9t] {
        font-size: 2.5rem;
    }

    .sectors-grid[b-uplkgfqj9t] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .sector-image[b-uplkgfqj9t] {
        height: 220px;
    }

    .screenshot-main[b-uplkgfqj9t] {
        width: 80%;
        top: 0%;
    }

    .screenshot-secondary-1[b-uplkgfqj9t],
    .screenshot-secondary-2[b-uplkgfqj9t] {
        width: 48%;
        top: 35%;
    }
}

@media (max-width: 640px) {
    .sectors-grid[b-uplkgfqj9t] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .use-cases-content[b-uplkgfqj9t] {
        padding: 1.5rem;
    }

    .hero-title[b-uplkgfqj9t] {
        font-size: 2rem;
    }

    .hero-subtitle[b-uplkgfqj9t] {
        font-size: 1.05rem;
    }

    .sector-card[b-uplkgfqj9t] {
        padding: 1.5rem;
    }

    .sector-image[b-uplkgfqj9t] {
        height: 200px;
    }

    .screenshot-main[b-uplkgfqj9t] {
        width: 78%;
        top: 0%;
    }

    .screenshot-secondary-1[b-uplkgfqj9t] {
        width: 50%;
        top: 35%;
        right: 2%;
    }

    .screenshot-secondary-2[b-uplkgfqj9t] {
        width: 50%;
        top: 35%;
        left: 2%;
    }

    .sector-title[b-uplkgfqj9t] {
        font-size: 1.5rem;
    }

    .cta-section[b-uplkgfqj9t] {
        padding: 3rem 1.5rem;
    }

    .cta-content h2[b-uplkgfqj9t] {
        font-size: 1.75rem;
    }

    .cta-buttons[b-uplkgfqj9t] {
        flex-direction: column;
        width: 100%;
    }

    .btn-cta-primary[b-uplkgfqj9t],
    .btn-cta-secondary[b-uplkgfqj9t] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .use-cases-content[b-uplkgfqj9t] {
        padding: 1rem;
    }

    .hero-section[b-uplkgfqj9t] {
        margin-bottom: 2.5rem;
    }

    .hero-title[b-uplkgfqj9t] {
        font-size: 1.75rem;
    }

    .sector-card[b-uplkgfqj9t] {
        padding: 1.25rem;
    }

    .sector-image[b-uplkgfqj9t] {
        height: 180px;
    }

    .screenshot-main[b-uplkgfqj9t] {
        width: 80%;
        top: 0%;
    }

    .screenshot-secondary-1[b-uplkgfqj9t],
    .screenshot-secondary-2[b-uplkgfqj9t] {
        width: 52%;
        top: 38%;
    }

    .screenshot-secondary-1[b-uplkgfqj9t] {
        right: 1%;
    }

    .screenshot-secondary-2[b-uplkgfqj9t] {
        left: 1%;
    }

    .cta-section[b-uplkgfqj9t] {
        padding: 2.5rem 1rem;
    }
}

/* Demo Badge and Overlay */
.sector-card-with-demo[b-uplkgfqj9t] {
    position: relative;
    overflow: visible;
    /* Reserve a strip below the CTA so the demo button sits in its own space
       instead of overlapping "Detayları Gör". */
    padding-bottom: 5rem;
}

.demo-badge[b-uplkgfqj9t] {
    position: absolute;
    top: -12px;
    right: -12px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    z-index: 10;
    animation: pulse-b-uplkgfqj9t 2s infinite;
}

.demo-badge[b-uplkgfqj9t]  svg {
    width: 16px;
    height: 16px;
}

@keyframes pulse-b-uplkgfqj9t {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(74, 144, 226, 0.6);
    }
}

.demo-link-overlay[b-uplkgfqj9t] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    /* Keep label on one line — long localizations (DE/FR/AR) otherwise wrap and break layout. */
    white-space: nowrap;
}

.demo-link-overlay[b-uplkgfqj9t]  svg {
    width: 24px;
    height: 24px;
}

.sector-card-with-demo:hover .demo-link-overlay[b-uplkgfqj9t] {
    opacity: 1;
    pointer-events: auto;
    bottom: 24px;
}

.demo-link-overlay:hover[b-uplkgfqj9t] {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.5);
    background: linear-gradient(135deg, #357abd 0%, #2868a8 100%);
}

@media (max-width: 768px) {
    .demo-badge[b-uplkgfqj9t] {
        top: -8px;
        right: -8px;
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .demo-link-overlay[b-uplkgfqj9t] {
        padding: 10px 20px;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    /* Overlay is in-flow on mobile, so the reserved bottom strip isn't needed. */
    .sector-card-with-demo[b-uplkgfqj9t] {
        padding-bottom: 1.25rem;
    }

    /* On mobile, always show demo link */
    .demo-link-overlay[b-uplkgfqj9t] {
        opacity: 1;
        pointer-events: auto;
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 16px;
        width: 100%;
        justify-content: center;
    }

    .demo-link-overlay:hover[b-uplkgfqj9t] {
        transform: translateY(-2px);
    }
}
/* /Components/Pages/Landing/PlatformFeatures/QrMenu.razor.rz.scp.css */
/* QR Demo Section */
.qr-demo-section[b-qtmz0rmwaa] {
    padding: 80px 20px;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.qr-demo-container[b-qtmz0rmwaa] {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.qr-demo-content[b-qtmz0rmwaa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.qr-demo-text[b-qtmz0rmwaa] {
    color: #2c3e50;
}

.qr-demo-title[b-qtmz0rmwaa] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.2;
    color: #2c3e50;
}

.qr-demo-description[b-qtmz0rmwaa] {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 32px;
    color: #495057;
}

.qr-demo-features[b-qtmz0rmwaa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qr-feature-item[b-qtmz0rmwaa] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    padding: 12px 16px;
    background: transparent;
    border-radius: 8px;
}

.qr-feature-item[b-qtmz0rmwaa]  svg {
    width: 24px;
    height: 24px;
    color: var(--ds-success);
    flex-shrink: 0;
}

.qr-feature-item span[b-qtmz0rmwaa] {
    color: #2c3e50;
    font-weight: 500;
}

.qr-demo-code[b-qtmz0rmwaa] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-code-wrapper[b-qtmz0rmwaa] {
    background: white;
    padding: 32px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    transition: transform 0.3s ease;
}

.qr-code-wrapper:hover[b-qtmz0rmwaa] {
    transform: scale(1.05);
}

.qr-code-image[b-qtmz0rmwaa] {
    width: 280px;
    height: 280px;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
}

.qr-code-label[b-qtmz0rmwaa] {
    margin-top: 20px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #2c3e50;
}

/* Responsive Design */
@media (max-width: 768px) {
    .qr-demo-section[b-qtmz0rmwaa] {
        padding: 60px 16px;
    }

    .qr-demo-content[b-qtmz0rmwaa] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .qr-demo-title[b-qtmz0rmwaa] {
        font-size: 2rem;
        text-align: center;
    }

    .qr-demo-description[b-qtmz0rmwaa] {
        font-size: 1rem;
        text-align: center;
    }

    .qr-code-wrapper[b-qtmz0rmwaa] {
        padding: 24px;
    }

    .qr-code-image[b-qtmz0rmwaa] {
        width: 220px;
        height: 220px;
    }

    .qr-code-label[b-qtmz0rmwaa] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Landing/PlatformFeatures/RestoranAsistani.razor.rz.scp.css */
/* Asistan tanıtım sayfası için özel bölüm — "Müşteriniz Şunları Söyleyebilir" grid'i.
   Sayfanın diğer kısımları (Hero, Features, Solutions, CTA) ortak landing bileşenlerinin
   kendi CSS'ini kullanır. */

.assistant-showcase[b-hgeiyt2e8z] {
    padding: 5rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.assistant-showcase__head[b-hgeiyt2e8z] {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}

.assistant-showcase__title[b-hgeiyt2e8z] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.assistant-showcase__sub[b-hgeiyt2e8z] {
    font-size: 1rem;
    color: #4a5568;
    margin: 0;
    line-height: 1.6;
}

.assistant-showcase__grid[b-hgeiyt2e8z] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.assistant-showcase__card[b-hgeiyt2e8z] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.assistant-showcase__card:hover[b-hgeiyt2e8z] {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.assistant-showcase__bubble[b-hgeiyt2e8z] {
    align-self: flex-start;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 16px 16px 16px 4px;
    font-size: 0.9rem;
    font-weight: 500;
    max-width: 90%;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

/* Asistan cevap kartı — kullanıcının soru bubble'ının altında, mini chat akışı görünümü.
   Hafif gri arka plan, sol başta gradient'li yuvarlak ikon, sağda açıklama metni. */
.assistant-showcase__answer[b-hgeiyt2e8z] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 4px 14px 14px 14px;
    padding: 0.85rem 1rem;
    margin-top: 0.25rem;
}

.assistant-showcase__answer-icon[b-hgeiyt2e8z] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
    color: #ffffff;
}

.assistant-showcase__answer-icon[b-hgeiyt2e8z]  svg {
    width: 20px;
    height: 20px;
}

.assistant-showcase__answer-text[b-hgeiyt2e8z] {
    font-size: 0.875rem;
    color: #334155;
    margin: 0;
    line-height: 1.5;
    flex: 1;
    min-width: 0;
}

@media (max-width: 1024px) {
    .assistant-showcase__grid[b-hgeiyt2e8z] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .assistant-showcase[b-hgeiyt2e8z] { padding: 3rem 0; }
    .assistant-showcase__grid[b-hgeiyt2e8z] { grid-template-columns: 1fr; }
    .assistant-showcase__title[b-hgeiyt2e8z] { font-size: 1.6rem; }
}
/* /Components/Pages/Landing/PlatformFeatures/RezervasyonSistemi.razor.rz.scp.css */
/* Rezervasyon Sistemi sayfası ortak landing bileşenlerini olduğu gibi kullanır;
   özel stil gerekmiyor. Dosya placeholder olarak duruyor — gerekirse hero ya da
   bölümlere özel override'lar buraya eklenir. */
/* /Components/Pages/Landing/PlatformFeatures/StokYonetimi.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/TeslimatYonetimi.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/VardiyaYonetimi.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/WhatsAppSiparis.razor.rz.scp.css */
/* /Components/Pages/Landing/Pricing.razor.rz.scp.css */
/* Pricing Page - Landing ile Uyumlu */

/* Container & Layout */
.pricing-container[b-vakva1bb92] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.pricing-content[b-vakva1bb92] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem clamp(1rem, 4vw, 2rem) 2rem;
}

/* Pricing & Usage Section */
.pricing-usage-section[b-vakva1bb92] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: flex-start;
}

/* Pricing Card - Sticky */
.pricing-card[b-vakva1bb92] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.pricing-card:hover[b-vakva1bb92] {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.pricing-card-header[b-vakva1bb92] {
    text-align: center;
    margin-bottom: 1.25rem;
}

.pricing-card-header h2[b-vakva1bb92] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-top: 0.5rem;
    letter-spacing: -0.01em;
}

.price-box[b-vakva1bb92] {
    text-align: center;
    padding: 0.75rem 1rem;
    background: #f7fafc;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 2px solid var(--accent-fill-rest);
}

.price-main[b-vakva1bb92] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0;
}

.price-value[b-vakva1bb92] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    letter-spacing: -0.02em;
}

.price-unit[b-vakva1bb92] {
    font-size: 0.8rem;
    color: #4a5568;
    font-weight: 500;
}

.price-vat[b-vakva1bb92] {
    font-size: 0.75rem;
    color: #4a5568;
    font-weight: 400;
    margin-left: 0.25rem;
}

/* Pricing Note */
.pricing-note[b-vakva1bb92] {
    padding: 0.875rem 1rem;
    background: #f0f7ff;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 1rem;
    border: 1px solid #e0efff;
}

.pricing-note p[b-vakva1bb92] {
    color: #4a5568;
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

.pricing-features[b-vakva1bb92] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.pricing-features li[b-vakva1bb92] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f7fafc;
}

.pricing-features li:last-child[b-vakva1bb92] {
    border-bottom: none;
}

.pricing-features li span[b-vakva1bb92] {
    color: #4a5568;
    font-size: 0.85rem;
}

.btn-purchase[b-vakva1bb92] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--accent-fill-rest);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.btn-purchase-icon[b-vakva1bb92] {
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.btn-purchase:hover[b-vakva1bb92] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

/* Section Headers */
.section-header[b-vakva1bb92] {
    text-align: left;
    margin-bottom: 2rem;
}

.section-header h2[b-vakva1bb92] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.section-header h3[b-vakva1bb92] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.section-header p[b-vakva1bb92] {
    font-size: 1rem;
    color: #4a5568;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
}

/* Usage Section */
.usage-section[b-vakva1bb92] {
    flex: 1;
}

.usage-grid[b-vakva1bb92] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.usage-card[b-vakva1bb92] {
    background: white;
    border-radius: 16px;
    padding: 1.75rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.usage-card:hover[b-vakva1bb92] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
}

.usage-card.highlight[b-vakva1bb92] {
    background: var(--accent-fill-rest);
    color: white;
    border-color: var(--accent-fill-rest);
}

.usage-icon[b-vakva1bb92] {
    margin-bottom: 0.25rem;
}

.usage-card h4[b-vakva1bb92] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.usage-card.highlight h4[b-vakva1bb92] {
    color: white;
}

.usage-card p[b-vakva1bb92] {
    color: #718096;
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
}

.usage-card.highlight p[b-vakva1bb92] {
    color: rgba(255, 255, 255, 0.9);
}

.usage-cost[b-vakva1bb92] {
    background: #f7fafc;
    color: var(--accent-fill-rest);
    padding: 0.4rem 1rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    margin-top: auto;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
    border: 2px solid var(--accent-fill-rest);
}

.coin-icon[b-vakva1bb92] {
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.usage-card.highlight .usage-cost[b-vakva1bb92] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Calculator Section - Inline (Sağ Alt) */
.calculator-section-inline[b-vakva1bb92] {
    margin-top: 2rem;
}

.calculator-section-inline .section-header[b-vakva1bb92] {
    margin-bottom: 1.5rem;
}

.calculator-container[b-vakva1bb92] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.calculator-inputs[b-vakva1bb92] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.input-group[b-vakva1bb92] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group label[b-vakva1bb92] {
    font-weight: 600;
    color: #1a202c;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
}

.calculator-results[b-vakva1bb92] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.result-card[b-vakva1bb92] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
}

.result-card.daily[b-vakva1bb92] {
    border-left: 3px solid #48bb78;
}

.result-card.monthly[b-vakva1bb92] {
    border-left: 3px solid var(--accent-fill-rest);
}

.result-header h4[b-vakva1bb92] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.01em;
}

.result-breakdown[b-vakva1bb92] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.breakdown-item[b-vakva1bb92] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    color: #4a5568;
    font-size: 0.85rem;
}

.breakdown-total[b-vakva1bb92] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0 0.25rem 0;
    border-top: 2px solid #cbd5e0;
    margin-top: 0.35rem;
    font-weight: 700;
    color: #1a202c;
    font-size: 1rem;
}

.breakdown-total span:last-child[b-vakva1bb92] {
    color: var(--accent-fill-rest);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

/* Additional Features Info */
.additional-features-info[b-vakva1bb92] {
    background: #f0f7ff;
    border: 1px solid #e0efff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.info-icon[b-vakva1bb92] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.info-content strong[b-vakva1bb92] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.info-content p[b-vakva1bb92] {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* FAQ Section - Compact */
.faq-section-compact[b-vakva1bb92] {
    margin-top: 2rem;
    margin-bottom: 0;
}

.faq-list[b-vakva1bb92] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item[b-vakva1bb92] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.faq-item:hover[b-vakva1bb92] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-fill-rest);
}

.faq-question[b-vakva1bb92] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.faq-question strong[b-vakva1bb92] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    letter-spacing: -0.01em;
}

.faq-item p[b-vakva1bb92] {
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    padding-left: 2rem;
}

/* CTA Section */
.cta-section[b-vakva1bb92] {
    text-align: center;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
    background: var(--accent-fill-rest);
    border-radius: 20px;
    margin-bottom: 2rem;
}

.cta-content h2[b-vakva1bb92] {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.cta-content p[b-vakva1bb92] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    font-weight: 400;
    line-height: 1.6;
}

.btn-cta[b-vakva1bb92] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: white;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-cta:hover[b-vakva1bb92] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Responsive Design */
@media (max-width: 1400px) {
    .usage-grid[b-vakva1bb92] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .page-title[b-vakva1bb92] {
        font-size: 2.25rem;
    }

    .pricing-usage-section[b-vakva1bb92] {
        grid-template-columns: 1fr;
    }

    .pricing-card[b-vakva1bb92] {
        max-width: 600px;
        margin: 0 auto;
        position: relative;
        top: 0;
    }

    .usage-grid[b-vakva1bb92] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pricing-content[b-vakva1bb92] {
        padding: 1.5rem;
    }

    .page-title[b-vakva1bb92] {
        font-size: 2rem;
    }

    .pricing-usage-section[b-vakva1bb92] {
        gap: 2rem;
    }

    .pricing-card[b-vakva1bb92] {
        padding: 1.75rem;
    }

    .price-value[b-vakva1bb92] {
        font-size: 2.25rem;
    }

    .section-header[b-vakva1bb92] {
        text-align: center;
    }

    .section-header h2[b-vakva1bb92] {
        font-size: 1.5rem;
    }

    .usage-grid[b-vakva1bb92] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .usage-card[b-vakva1bb92] {
        padding: 1.5rem;
    }

    .calculator-inputs[b-vakva1bb92],
    .calculator-results[b-vakva1bb92] {
        grid-template-columns: 1fr;
    }

    .faq-grid[b-vakva1bb92] {
        grid-template-columns: 1fr;
    }

    .cta-section[b-vakva1bb92] {
        padding: 2.5rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .pricing-content[b-vakva1bb92] {
        padding: 1rem;
    }

    .page-title[b-vakva1bb92] {
        font-size: 1.75rem;
    }

    .pricing-card[b-vakva1bb92] {
        padding: 1.5rem;
    }

    .price-value[b-vakva1bb92] {
        font-size: 2rem;
    }

    .usage-card[b-vakva1bb92] {
        padding: 1.25rem;
    }

    .calculator-container[b-vakva1bb92] {
        padding: 1.5rem;
    }

    .cta-section[b-vakva1bb92] {
        padding: 2rem 1rem;
    }
}
/* /Components/Pages/Landing/Privacy.razor.rz.scp.css */
/* Privacy Policy Page Styles */
.legal-container[b-k0k4wttysu] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.legal-content[b-k0k4wttysu] {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

.legal-title[b-k0k4wttysu] {
    font-size: clamp(1.65rem, 4.5vw, 2.5rem) !important;
}

/* Header Styles */
.legal-header[b-k0k4wttysu] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

.back-link[b-k0k4wttysu] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-k0k4wttysu] {
    color: #5a67d8;
}

.legal-title[b-k0k4wttysu] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.legal-date[b-k0k4wttysu] {
    color: #718096;
    font-size: 0.875rem;
    font-style: italic;
}

/* Body Content */
.legal-body[b-k0k4wttysu] {
    line-height: 1.7;
}

.legal-section[b-k0k4wttysu] {
    margin-bottom: 3rem;
}

.legal-section h2[b-k0k4wttysu] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-section h3[b-k0k4wttysu] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.legal-section p[b-k0k4wttysu] {
    margin-bottom: 1rem;
    color: #4a5568;
}

.legal-section ul[b-k0k4wttysu] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section li[b-k0k4wttysu] {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.legal-section li strong[b-k0k4wttysu] {
    color: #2d3748;
}

/* Links */
a[b-k0k4wttysu] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

a:hover[b-k0k4wttysu] {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .legal-container[b-k0k4wttysu] {
        padding: 1rem 0.5rem;
    }

    .legal-content[b-k0k4wttysu] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .legal-title[b-k0k4wttysu] {
        font-size: 2rem;
    }

    .legal-section h2[b-k0k4wttysu] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .legal-container[b-k0k4wttysu] {
        padding: 0.5rem 0.25rem;
    }

    .legal-content[b-k0k4wttysu] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .legal-title[b-k0k4wttysu] {
        font-size: 1.75rem;
    }

    .legal-section h2[b-k0k4wttysu] {
        font-size: 1.125rem;
    }
} 
/* /Components/Pages/Landing/Terms.razor.rz.scp.css */
/* Terms of Service Page Styles */
.legal-container[b-f6a9dmxgyd] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.legal-content[b-f6a9dmxgyd] {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

.legal-title[b-f6a9dmxgyd] {
    font-size: clamp(1.65rem, 4.5vw, 2.5rem) !important;
}

/* Header Styles */
.legal-header[b-f6a9dmxgyd] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

.back-link[b-f6a9dmxgyd] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-f6a9dmxgyd] {
    color: #5a67d8;
}

.legal-title[b-f6a9dmxgyd] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.legal-date[b-f6a9dmxgyd] {
    color: #718096;
    font-size: 0.875rem;
    font-style: italic;
}

/* Body Content */
.legal-body[b-f6a9dmxgyd] {
    line-height: 1.7;
}

.legal-section[b-f6a9dmxgyd] {
    margin-bottom: 3rem;
}

.legal-section h2[b-f6a9dmxgyd] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-section h3[b-f6a9dmxgyd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.legal-section p[b-f6a9dmxgyd] {
    margin-bottom: 1rem;
    color: #4a5568;
}

.legal-section ul[b-f6a9dmxgyd] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section ol[b-f6a9dmxgyd] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section li[b-f6a9dmxgyd] {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.legal-section li strong[b-f6a9dmxgyd] {
    color: #2d3748;
}

/* Links */
a[b-f6a9dmxgyd] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

a:hover[b-f6a9dmxgyd] {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .legal-container[b-f6a9dmxgyd] {
        padding: 1rem 0.5rem;
    }

    .legal-content[b-f6a9dmxgyd] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .legal-title[b-f6a9dmxgyd] {
        font-size: 2rem;
    }

    .legal-section h2[b-f6a9dmxgyd] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .legal-container[b-f6a9dmxgyd] {
        padding: 0.5rem 0.25rem;
    }

    .legal-content[b-f6a9dmxgyd] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .legal-title[b-f6a9dmxgyd] {
        font-size: 1.75rem;
    }

    .legal-section h2[b-f6a9dmxgyd] {
        font-size: 1.125rem;
    }
} 
/* /Components/Pages/Landing/TeslimatIade.razor.rz.scp.css */
/* Delivery & Return Page Styles (adisyon.ai kontör) */
.legal-container[b-zsyvt4a47k] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.legal-content[b-zsyvt4a47k] {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

.legal-header[b-zsyvt4a47k] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

.back-link[b-zsyvt4a47k] {
    display: inline-flex;
    align-items: center;
    color: #036ac4;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-zsyvt4a47k] {
    color: #0257a3;
}

.legal-title[b-zsyvt4a47k] {
    font-size: clamp(1.65rem, 4.5vw, 2.5rem);
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.legal-date[b-zsyvt4a47k] {
    color: #718096;
    font-size: 0.875rem;
    font-style: italic;
}

.legal-body[b-zsyvt4a47k] {
    line-height: 1.7;
}

.legal-section[b-zsyvt4a47k] {
    margin-bottom: 3rem;
}

.legal-section h2[b-zsyvt4a47k] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-section p[b-zsyvt4a47k] {
    margin-bottom: 1rem;
    color: #4a5568;
}

.legal-section ul[b-zsyvt4a47k] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section li[b-zsyvt4a47k] {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.legal-section li strong[b-zsyvt4a47k],
.legal-section p strong[b-zsyvt4a47k] {
    color: #2d3748;
}

.legal-pay[b-zsyvt4a47k] {
    margin-top: 1.25rem;
}

.contact-info p[b-zsyvt4a47k] {
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .legal-container[b-zsyvt4a47k] {
        padding: 1rem 0.5rem;
    }

    .legal-content[b-zsyvt4a47k] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .legal-section h2[b-zsyvt4a47k] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .legal-container[b-zsyvt4a47k] {
        padding: 0.5rem 0.25rem;
    }

    .legal-content[b-zsyvt4a47k] {
        padding: 1.5rem;
        border-radius: 6px;
    }
}
/* /Components/Pages/Locations/LocationManagement.razor.rz.scp.css */
.location-management-card[b-vct7tt1zy7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-vct7tt1zy7] .fluent-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}

[b-vct7tt1zy7] .fluent-tabs-content {
    flex: 1;
    overflow: auto;
}

#osm-map[b-vct7tt1zy7] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}
/* /Components/Pages/Materials/DefaultMaterialsModal.razor.rz.scp.css */
.dm-body[b-9xxeg66v3r] {
    margin: 0;
    color: var(--fg-2);
    line-height: 1.55;
    font-size: var(--small-size);
}
/* /Components/Pages/Materials/MaterialEditModal.razor.rz.scp.css */
.me-loading[b-w8py1nxq1b] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.me-note[b-w8py1nxq1b] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    border-radius: var(--radius-md);
    font-size: var(--small-size);
}

/* AI fill button — sits inside the material name input (recipe-wizard pattern) */
.me-name-row[b-w8py1nxq1b] { position: relative; display: flex; }
.me-name-row .ds-input[b-w8py1nxq1b] { flex: 1; min-width: 0; padding-right: 130px; }

.me-aibtn[b-w8py1nxq1b] {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--fg-2);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.me-aibtn:hover:not(:disabled)[b-w8py1nxq1b] { border-color: var(--accent); background: var(--accent-soft); }
.me-aibtn:disabled[b-w8py1nxq1b] { opacity: .55; cursor: not-allowed; }
.me-aibtn:focus-visible[b-w8py1nxq1b] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 70 / 30 two-column layout */
.me-layout[b-w8py1nxq1b] {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-6);
    align-items: start;
}
.me-col[b-w8py1nxq1b] { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.me-col--right[b-w8py1nxq1b] {
    padding-left: var(--space-6);
    border-left: 1px solid var(--border);
}

.me-section__head[b-w8py1nxq1b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.me-section__title[b-w8py1nxq1b] {
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-3);
}

.me-hint[b-w8py1nxq1b] {
    margin: 0 0 var(--space-3);
    font-size: var(--xs-size);
    color: var(--fg-hint);
}

.me-grid[b-w8py1nxq1b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: end;
}
.me-col-2[b-w8py1nxq1b] { grid-column: 1 / -1; }

.me-active[b-w8py1nxq1b] { gap: var(--space-2); }
.me-active .ds-switch[b-w8py1nxq1b] { margin-top: var(--space-1); }

/* Nutrition fields stacked in the right column */
.me-nutrition[b-w8py1nxq1b] { display: flex; flex-direction: column; gap: var(--space-3); }

.me-chips[b-w8py1nxq1b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.me-chip[b-w8py1nxq1b] {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--fg-2);
    font-size: var(--small-size);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.me-chip:hover:not(:disabled)[b-w8py1nxq1b] { border-color: var(--accent); color: var(--accent); }
.me-chip.is-on[b-w8py1nxq1b] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--brand-600);
    font-weight: 600;
}
.me-chip:disabled[b-w8py1nxq1b] { opacity: .55; cursor: not-allowed; }
.me-chip:focus-visible[b-w8py1nxq1b],
.me-link:focus-visible[b-w8py1nxq1b] { outline: 2px solid var(--accent); outline-offset: 2px; }

.me-link[b-w8py1nxq1b] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    color: var(--accent);
    font-size: var(--small-size);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.me-link--muted[b-w8py1nxq1b] { color: var(--fg-hint); }

@media (max-width: 760px) {
    .me-layout[b-w8py1nxq1b] { grid-template-columns: 1fr; }
    .me-col--right[b-w8py1nxq1b] { padding-left: 0; border-left: none; padding-top: var(--space-4); border-top: 1px solid var(--border); }
}
/* /Components/Pages/Materials/Materials.razor.rz.scp.css */
.materials-page[b-q01zp1oi54] { gap: var(--space-5); }

.page-head[b-q01zp1oi54] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.page-head__titles[b-q01zp1oi54] { display: flex; flex-direction: column; gap: var(--space-2); }

.eyebrow[b-q01zp1oi54] {
    display: inline-block;
    align-self: flex-start;
    background: var(--accent-soft);
    color: var(--brand-600);
    font-size: var(--xs-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.page-title[b-q01zp1oi54] { margin: 0; font-weight: 700; color: var(--fg-1); }

.page-subtitle[b-q01zp1oi54] {
    margin: 0;
    max-width: 60ch;
    color: var(--fg-3);
    font-size: var(--small-size);
    line-height: 1.5;
}

.page-head__actions[b-q01zp1oi54] { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.filter-bar[b-q01zp1oi54] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
}

.filter-bar .ds-field[b-q01zp1oi54] { min-width: 160px; }
.filter-grow[b-q01zp1oi54] { flex: 1 1 220px; }

.me-check-row[b-q01zp1oi54] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--small-size);
    color: var(--fg-2);
    cursor: pointer;
    user-select: none;
    padding-bottom: var(--space-1);
}

.ds-toolbar-btn[b-q01zp1oi54] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--fg-2);
    font-size: var(--small-size);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out);
}

.ds-toolbar-btn:hover[b-q01zp1oi54] { border-color: var(--border-strong); }
.ds-toolbar-btn:focus-visible[b-q01zp1oi54] { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 768px) {
    .filter-bar .ds-field[b-q01zp1oi54], .filter-grow[b-q01zp1oi54] { flex: 1 1 100%; min-width: 0; }
}
/* /Components/Pages/Materials/MaterialsGrid.razor.rz.scp.css */
.mg-name-cell[b-6dcfy3kp95] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.mg-name-cell[b-6dcfy3kp95]  svg { color: var(--accent); width: 20px; height: 20px; flex-shrink: 0; }
.mg-name[b-6dcfy3kp95] { color: var(--accent); }

.mg-confirm[b-6dcfy3kp95] { margin: 0; color: var(--fg-2); line-height: 1.5; }

/* ---- linked recipes/products dropdown ---- */
.mg-link-cell[b-6dcfy3kp95] { display: flex; justify-content: center; }
.mg-link-btn.is-open[b-6dcfy3kp95] { border-color: var(--brand-600); color: var(--brand-600); }

.mg-links-backdrop[b-6dcfy3kp95] {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: transparent;
}

.mg-links-pop[b-6dcfy3kp95] {
    position: fixed;
    z-index: 61;
    min-width: 220px;
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-2);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-overlay, 0 12px 32px rgba(15, 23, 42, 0.18));
}

.mg-links-loading[b-6dcfy3kp95] { display: flex; justify-content: center; padding: var(--space-4); }
.mg-links-empty[b-6dcfy3kp95] { padding: var(--space-3); color: var(--fg-3); font-size: var(--small-size); text-align: center; }

.mg-links-group + .mg-links-group[b-6dcfy3kp95] { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }

.mg-links-group__title[b-6dcfy3kp95] {
    padding: var(--space-1) var(--space-2);
    font-size: var(--xs-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-hint, var(--fg-3));
}

.mg-links-item[b-6dcfy3kp95] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    border: none;
    border-radius: var(--radius-md, var(--ds-radius-sm));
    background: transparent;
    color: var(--fg-1);
    font: inherit;
    font-size: var(--small-size);
    text-align: left;
    cursor: pointer;
}

.mg-links-item:hover[b-6dcfy3kp95] { background: var(--bg-subtle, var(--ds-surface-alt)); color: var(--brand-600); }
.mg-links-item[b-6dcfy3kp95]  svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.mg-links-item span[b-6dcfy3kp95] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mg-links-item:focus-visible[b-6dcfy3kp95] { outline: 2px solid var(--accent); outline-offset: -2px; }
/* /Components/Pages/Media/MediaLibrary.razor.rz.scp.css */
.ml-page[b-6gu2wwq0ig] {
    gap: 18px;
}

.ml-header[b-6gu2wwq0ig] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Kompakt filtre çubuğu — ayrı satır, inline daralt (tam genişlik satırlar değil) */
.ml-toolbar[b-6gu2wwq0ig] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ml-toolbar .ml-filter[b-6gu2wwq0ig] {
    width: auto;
    min-width: 160px;
}

.ml-toolbar .ml-search[b-6gu2wwq0ig] {
    width: 300px;
    max-width: 100%;
}

.ml-header-text[b-6gu2wwq0ig] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ml-title[b-6gu2wwq0ig] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ds-text);
}

.ml-subtitle[b-6gu2wwq0ig] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

.ml-filters[b-6gu2wwq0ig] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Sosyal Medya Görseli Oluştur — /studio kısayolu */
.ml-studio-btn[b-6gu2wwq0ig] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-600);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: transform var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}

.ml-studio-btn:hover[b-6gu2wwq0ig] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(3, 106, 196, 0.35);
}

.ml-studio-btn:focus-visible[b-6gu2wwq0ig] { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.ml-studio-btn[b-6gu2wwq0ig]  svg { fill: #fff; }

.ml-search[b-6gu2wwq0ig] { min-width: 220px; }

/* ===== Grid + görünüm modları ===== */
.ml-grid[b-6gu2wwq0ig] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    /* Görünüm değişince @key ile yeniden mount olur → bu animasyon oynar. */
    animation: ml-grid-in-b-6gu2wwq0ig 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ml-grid-in-b-6gu2wwq0ig {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ml-grid[b-6gu2wwq0ig] { animation: none; }
}

.ml-grid--comfortable[b-6gu2wwq0ig] { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ml-grid--compact[b-6gu2wwq0ig] { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ml-grid--list[b-6gu2wwq0ig] { grid-template-columns: 1fr; gap: 8px; }

/* Sık görünümde alt bilgi/aksiyonlar daralır */
.ml-grid--compact .ml-card-body[b-6gu2wwq0ig] { padding: 6px 8px 2px; }
.ml-grid--compact .ml-filename[b-6gu2wwq0ig] { font-size: 0.6875rem; }
.ml-grid--compact .ml-meta[b-6gu2wwq0ig] { font-size: 0.625rem; }
.ml-grid--compact .ml-act[b-6gu2wwq0ig] { height: 30px; }

/* Liste görünümü — yatay satır: küçük thumb + bilgi + aksiyonlar */
.ml-grid--list .ml-card[b-6gu2wwq0ig] { flex-direction: row; align-items: center; padding: 6px; gap: 12px; }
.ml-grid--list .ml-thumb[b-6gu2wwq0ig] { width: 68px; height: 68px; aspect-ratio: auto; flex: none; border-radius: var(--ds-radius-sm); }
.ml-grid--list .ml-card-body[b-6gu2wwq0ig] { flex: 1; padding: 0; min-width: 0; }
.ml-grid--list .ml-card-actions[b-6gu2wwq0ig] { padding: 0 6px 0 0; flex: none; }
.ml-grid--list .ml-select[b-6gu2wwq0ig] { top: 50%; left: 12px; transform: translateY(-50%); }

.ml-card[b-6gu2wwq0ig] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}

.ml-card.is-selected[b-6gu2wwq0ig] {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-600) 30%, transparent);
}

/* Seçim onay kutusu — kartın sol üstünde, hover'da/seçiliyken belirir */
.ml-select[b-6gu2wwq0ig] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ds-dur-fast) var(--ds-ease);
}

.ml-card:hover .ml-select[b-6gu2wwq0ig],
.ml-card.is-selected .ml-select[b-6gu2wwq0ig] { opacity: 1; }

.ml-select input[b-6gu2wwq0ig] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.ml-select-box[b-6gu2wwq0ig] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid var(--ds-border-strong);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}

.ml-select-box[b-6gu2wwq0ig]  svg { fill: #fff; opacity: 0; transform: scale(0.6); transition: opacity var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease); }

.ml-card.is-selected .ml-select-box[b-6gu2wwq0ig] { background: var(--brand-600); border-color: var(--brand-600); }
.ml-card.is-selected .ml-select-box[b-6gu2wwq0ig]  svg { opacity: 1; transform: scale(1); }
.ml-select input:focus-visible + .ml-select-box[b-6gu2wwq0ig] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.ml-card:hover[b-6gu2wwq0ig] {
    border-color: var(--ds-border-strong);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

.ml-thumb[b-6gu2wwq0ig] {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    padding: 0;
    border: none;
    background: var(--ds-surface-sunken);
    cursor: pointer;
    display: block;
    overflow: hidden;
}

.ml-thumb:focus-visible[b-6gu2wwq0ig] { outline: 2px solid var(--brand-600); outline-offset: -2px; }

.ml-thumb img[b-6gu2wwq0ig],
.ml-thumb video[b-6gu2wwq0ig] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s var(--ds-ease, ease);
}

.ml-card:hover .ml-thumb img[b-6gu2wwq0ig],
.ml-card:hover .ml-thumb video[b-6gu2wwq0ig] { transform: scale(1.04); }

.ml-play[b-6gu2wwq0ig] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    pointer-events: none;
}

.ml-play[b-6gu2wwq0ig]  svg {
    fill: #fff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    width: 34px;
    height: 34px;
}

.ml-kind[b-6gu2wwq0ig] {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ds-text);
}

.ml-kind--aiImage[b-6gu2wwq0ig],
.ml-kind--aiVideo[b-6gu2wwq0ig] { background: var(--brand-600); color: #fff; }

.ml-card-body[b-6gu2wwq0ig] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 4px;
    min-width: 0;
}

.ml-filename[b-6gu2wwq0ig] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml-meta[b-6gu2wwq0ig] {
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
}

/* Admin.Manage: dosyanın ait olduğu firma · mağaza etiketi (dashboard'daki ikili gibi) */
.ml-tenant[b-6gu2wwq0ig] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml-grid--compact .ml-tenant[b-6gu2wwq0ig] { font-size: 0.625rem; }

.ml-card-actions[b-6gu2wwq0ig] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    padding: 4px 8px 8px;
}

.ml-act[b-6gu2wwq0ig] {
    display: grid;
    place-items: center;
    flex: 1;
    height: 38px;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.ml-act:hover[b-6gu2wwq0ig] { border-color: var(--brand-600); color: var(--brand-700); }

.ml-act:hover[b-6gu2wwq0ig] { background: var(--ds-surface-sunken); }
.ml-act:focus-visible[b-6gu2wwq0ig] { outline: 2px solid var(--brand-600); outline-offset: 1px; }

.ml-act--danger:hover[b-6gu2wwq0ig] {
    border-color: var(--ds-danger);
    background: color-mix(in srgb, var(--ds-danger) 8%, transparent);
    color: var(--ds-danger);
}

/* ===== Empty / loading ===== */
.ml-empty[b-6gu2wwq0ig] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 260px;
    color: var(--ds-text-subtle);
    font-size: 0.875rem;
    background: var(--ds-surface-sunken);
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.ml-empty p[b-6gu2wwq0ig] { margin: 0; }

.ml-more[b-6gu2wwq0ig] {
    display: flex;
    justify-content: center;
    padding: 6px 0 14px;
}

/* ===== Preview modal ===== */
.ml-preview[b-6gu2wwq0ig] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ml-preview-stage[b-6gu2wwq0ig] {
    display: grid;
    place-items: center;
    background: #0b1220;
    border-radius: var(--ds-radius-sm);
    padding: 10px;
    max-height: 62vh;
    overflow: hidden;
}

.ml-preview-stage img[b-6gu2wwq0ig],
.ml-preview-stage video[b-6gu2wwq0ig] {
    max-width: 100%;
    max-height: 60vh;
    border-radius: var(--ds-radius-sm);
    object-fit: contain;
}

.ml-preview-meta[b-6gu2wwq0ig] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 20px;
    margin: 0;
}

.ml-preview-meta > div[b-6gu2wwq0ig] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ml-preview-meta dt[b-6gu2wwq0ig] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-subtle);
}

.ml-preview-meta dd[b-6gu2wwq0ig] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Delete confirm ===== */
.ml-delete-preview[b-6gu2wwq0ig] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ml-delete-preview img[b-6gu2wwq0ig],
.ml-delete-preview video[b-6gu2wwq0ig] {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
}

.ml-delete-preview span[b-6gu2wwq0ig] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    word-break: break-all;
}

/* ===== Görünüm anahtarı (segment) ===== */
.ml-viewswitch[b-6gu2wwq0ig] {
    display: inline-flex;
    margin-left: auto;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-sunken);
}

.ml-view-btn[b-6gu2wwq0ig] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ds-text-subtle);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.ml-view-btn svg[b-6gu2wwq0ig] { width: 17px; height: 17px; display: block; }
.ml-view-btn:hover[b-6gu2wwq0ig] { color: var(--ds-text-muted); }
.ml-view-btn.is-on[b-6gu2wwq0ig] { background: var(--ds-surface); color: var(--brand-600); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.ml-view-btn:focus-visible[b-6gu2wwq0ig] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* ===== Toplu seçim çubuğu ===== */
.ml-bulkbar[b-6gu2wwq0ig] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--brand-600) 35%, var(--ds-border));
    border-radius: var(--ds-radius-sm);
    background: color-mix(in srgb, var(--brand-600) 7%, var(--ds-surface));
    animation: ml-grid-in-b-6gu2wwq0ig 0.22s var(--ds-ease);
}

.ml-bulk-count[b-6gu2wwq0ig] { font-size: 0.8125rem; font-weight: 700; color: var(--brand-700); }
.ml-bulk-actions[b-6gu2wwq0ig] { display: flex; align-items: center; gap: 8px; }

.ml-bulk-btn[b-6gu2wwq0ig] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), opacity var(--ds-dur-fast) var(--ds-ease);
}

.ml-bulk-btn--ghost[b-6gu2wwq0ig] { background: transparent; border-color: var(--ds-border); color: var(--ds-text-muted); }
.ml-bulk-btn--ghost:hover[b-6gu2wwq0ig] { border-color: var(--ds-border-strong); color: var(--ds-text); }
.ml-bulk-btn--primary[b-6gu2wwq0ig] { background: var(--brand-600); color: #fff; }
.ml-bulk-btn--primary:hover:not(:disabled)[b-6gu2wwq0ig] { background: var(--brand-700); }
.ml-bulk-btn:disabled[b-6gu2wwq0ig] { opacity: 0.6; cursor: default; }
.ml-bulk-btn:focus-visible[b-6gu2wwq0ig] { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.ml-bulk-btn--primary[b-6gu2wwq0ig]  svg { fill: #fff; }

/* /Components/Pages/Media/SocialStudio.razor.rz.scp.css */
.st-page[b-8xw07llulm] {
    gap: 16px;
}

.st-header[b-8xw07llulm] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.st-header-text[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-title[b-8xw07llulm] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ds-text);
}

.st-subtitle[b-8xw07llulm] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

.st-back[b-8xw07llulm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    background: var(--ds-surface);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    text-decoration: none;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.st-back:hover[b-8xw07llulm] { border-color: var(--brand-600); color: var(--brand-700); }

/* ===== Adımlar ===== */
.st-steps[b-8xw07llulm] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.st-step[b-8xw07llulm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    background: var(--ds-surface-sunken);
    color: var(--ds-text-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.st-step + .st-step[b-8xw07llulm]::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--ds-border-strong);
    margin-left: -4px;
    margin-right: 2px;
}

.st-step-dot[b-8xw07llulm] {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    transition: transform var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}

.st-step.is-current[b-8xw07llulm] { background: var(--ds-surface-alt); color: var(--ds-text); }

.st-step.is-current .st-step-dot[b-8xw07llulm] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-600) 18%, transparent);
}

.st-step.is-current .st-step-dot[b-8xw07llulm]  svg { fill: #fff; }
.st-step.is-done[b-8xw07llulm] { color: var(--ds-text-muted); }

.st-step.is-done .st-step-dot[b-8xw07llulm] {
    background: color-mix(in srgb, var(--ds-success) 16%, transparent);
    border-color: var(--ds-success);
    color: var(--ds-success);
}

.st-step.is-done .st-step-dot[b-8xw07llulm]  svg { fill: var(--ds-success); }

/* ===== Animasyonlu adım gövdesi ===== */
.st-stage[b-8xw07llulm] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    animation: st-stage-in-b-8xw07llulm 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes st-stage-in-b-8xw07llulm {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .st-stage[b-8xw07llulm] { animation: none; }
}

/* ===== 1) Konsept ızgarası (6 sütun) ===== */
.st-concept-grid[b-8xw07llulm] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 2px;
}

@media (max-width: 1100px) {
    .st-concept-grid[b-8xw07llulm] { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
    .st-concept-grid[b-8xw07llulm] { grid-template-columns: repeat(2, 1fr); }
}

.st-card[b-8xw07llulm] {
    position: relative;
    aspect-ratio: 1;
    display: block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-sunken);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s var(--ds-ease), box-shadow 0.18s var(--ds-ease), border-color 0.18s var(--ds-ease);
}

.st-card:hover[b-8xw07llulm] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.st-card.is-on[b-8xw07llulm] {
    border-color: var(--brand-600);
    box-shadow: 0 10px 24px rgba(3, 106, 196, 0.30);
}

.st-card:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.st-card img[b-8xw07llulm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Kapaklar eski koyu şablonlarla basıldı — okunur olsun diye hafif aydınlat. */
    filter: brightness(1.12) saturate(1.05);
    transition: transform 0.5s var(--ds-ease);
}

.st-card:hover img[b-8xw07llulm] { transform: scale(1.06); }

.st-card-veil[b-8xw07llulm] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 8, 23, 0.60) 0%, rgba(2, 8, 23, 0.10) 42%, transparent 72%);
}

.st-card.is-on .st-card-veil[b-8xw07llulm] {
    background: linear-gradient(to top, rgba(2, 8, 23, 0.62) 0%, rgba(3, 106, 196, 0.28) 60%, transparent 88%);
}

.st-card-name[b-8xw07llulm] {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ===== 2) Kanal seçimi — büyük logolu kartlar ===== */
.st-channel-row[b-8xw07llulm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
    gap: 18px;
    justify-content: center;
    padding: 18px 0 8px;
}

.st-channel[b-8xw07llulm] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 44px 24px 30px;
    border: 2px solid var(--ds-border);
    border-radius: var(--ds-radius-lg, 16px);
    background: var(--ds-surface);
    cursor: pointer;
    transition: transform 0.18s var(--ds-ease), border-color 0.18s var(--ds-ease), box-shadow 0.18s var(--ds-ease);
}

.st-channel:hover[b-8xw07llulm] {
    transform: translateY(-4px);
    border-color: var(--ds-border-strong);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.st-channel.is-on[b-8xw07llulm] {
    border-color: var(--ds-success);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--ds-success) 22%, transparent);
}

.st-channel:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.st-logo[b-8xw07llulm] {
    width: 110px;
    height: 110px;
    filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.18));
    transition: transform 0.18s var(--ds-ease);
}

.st-channel:hover .st-logo[b-8xw07llulm] { transform: scale(1.05); }

.st-channel-name[b-8xw07llulm] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ds-text);
}

/* Seçili göstergesi — BEYAZ daire + kalın YEŞİL onay işareti (yeşil halka) */
.st-channel-check[b-8xw07llulm] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid var(--ds-success);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ds-success) 35%, transparent);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s var(--ds-ease), transform 0.18s var(--ds-ease);
}

.st-channel-check[b-8xw07llulm]  svg { fill: var(--ds-success); width: 20px; height: 20px; }
.st-channel.is-on .st-channel-check[b-8xw07llulm] { opacity: 1; transform: scale(1); }

/* Kanal adımı — açıklama + özel boyut */
.st-channel-stage[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-stage-desc[b-8xw07llulm] {
    margin: 0 auto;
    max-width: 660px;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ds-text-muted);
    padding: 4px 12px 0;
}

.st-channel-size[b-8xw07llulm] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ds-text-subtle);
}

.st-channel-glyph[b-8xw07llulm] {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
}

.st-channel-glyph[b-8xw07llulm]  svg { width: 74px; height: 74px; fill: var(--ds-text-muted); }
.st-channel.is-on .st-channel-glyph[b-8xw07llulm]  svg { fill: var(--brand-600); }

.st-channel-custom[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 440px;
    margin: 6px auto 0;
}

/* ===== Format (boyut) çoklu seçim — platform seçilince çıkar ===== */
.st-format-block[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--ds-border);
}

.st-format-label[b-8xw07llulm] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.st-format-row[b-8xw07llulm] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
}

.st-format[b-8xw07llulm] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 156px;
    min-height: 156px;
    padding: 18px 12px 14px;
    border: 2px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface);
    cursor: pointer;
    transition: border-color 0.18s var(--ds-ease), box-shadow 0.18s var(--ds-ease), transform 0.18s var(--ds-ease);
}

.st-format:hover[b-8xw07llulm] { transform: translateY(-2px); border-color: var(--ds-border-strong); }
.st-format.is-on[b-8xw07llulm] { border-color: var(--brand-600); box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-600) 20%, transparent); }
.st-format:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.st-format-check[b-8xw07llulm] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid var(--ds-success);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s var(--ds-ease), transform 0.18s var(--ds-ease);
}

.st-format-check[b-8xw07llulm]  svg { fill: var(--ds-success); }
.st-format.is-on .st-format-check[b-8xw07llulm] { opacity: 1; transform: scale(1); }

.st-format-shape[b-8xw07llulm] {
    display: block;
    background: color-mix(in srgb, var(--brand-600) 12%, var(--ds-surface-sunken));
    border: 2px solid var(--ds-border-strong);
    border-radius: 5px;
}

.st-format.is-on .st-format-shape[b-8xw07llulm] {
    border-color: var(--brand-600);
    background: color-mix(in srgb, var(--brand-600) 22%, transparent);
}

.st-format-shape--square[b-8xw07llulm] { width: 44px; height: 44px; }
.st-format-shape--vertical[b-8xw07llulm] { width: 30px; height: 52px; }
.st-format-shape--horizontal[b-8xw07llulm] { width: 56px; height: 32px; }

.st-format-name[b-8xw07llulm] { font-size: 0.9375rem; font-weight: 700; color: var(--ds-text); }
.st-format-hint[b-8xw07llulm] { font-size: 0.6875rem; color: var(--ds-text-muted); text-align: center; line-height: 1.3; }
.st-format-dims[b-8xw07llulm] { font-size: 0.625rem; color: var(--ds-text-subtle); }

/* ===== 4) Tasarla ===== */
.st-design[b-8xw07llulm] {
    display: grid;
    /* Form daraltıldı, önizleme büyütüldü — daha ferah, poster daha görünür. */
    grid-template-columns: minmax(0, 440px) 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .st-design[b-8xw07llulm] { grid-template-columns: 1fr; }
}

.st-design-form[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.st-design-grid[b-8xw07llulm] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
}

.st-prompt[b-8xw07llulm] {
    resize: vertical;
    line-height: 1.5;
    min-height: 110px;
}

.st-color-field[b-8xw07llulm] { max-width: 200px; }

.st-color[b-8xw07llulm] {
    width: 64px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    cursor: pointer;
}

/* ===== Eklemek İstedikleriniz — referans görsel ekleme ===== */
.st-attach[b-8xw07llulm] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.st-attach-btn[b-8xw07llulm] {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-sunken);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.st-attach-btn:hover[b-8xw07llulm] { border-color: var(--brand-600); color: var(--brand-700); }
.st-attach-btn[b-8xw07llulm]  svg { fill: currentColor; }

/* InputFile'ın native <input type=file>'ı şeffaf kaplama olsun (scoped CSS child'a ulaşmaz → ::deep şart) */
.st-attach-btn[b-8xw07llulm]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    color: transparent;
}

/* Dinamik mod — büyük serbest metin + önizleme ipucu */
.st-dyn-text[b-8xw07llulm] {
    resize: vertical;
    min-height: 170px;
    line-height: 1.55;
}

.st-dyn-hintbox[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    min-height: 320px;
    padding: 24px;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-sunken);
    color: var(--ds-text-muted);
}

.st-dyn-hintbox p[b-8xw07llulm] { margin: 0; font-size: 0.875rem; line-height: 1.55; max-width: 280px; }
.st-dyn-hintbox[b-8xw07llulm]  svg { fill: var(--brand-600); opacity: 0.85; }

/* ===== Ekleme tepsisi — mağaza logosu/fotoğrafları + kullanıcı ekleri (thumbnail'lar) ===== */
.st-tray[b-8xw07llulm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.st-tray-item[b-8xw07llulm] {
    position: relative;
    width: 70px;
    height: 70px;
    flex: none;
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface-sunken);
}

.st-tray-item img[b-8xw07llulm] { width: 100%; height: 100%; object-fit: cover; display: block; }

.st-tray-tag[b-8xw07llulm] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 4px;
    font-size: 0.5625rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: color-mix(in srgb, var(--brand-700) 82%, transparent);
}

.st-tray-x[b-8xw07llulm] {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    cursor: pointer;
}

.st-tray-x:hover[b-8xw07llulm] { background: var(--ds-danger); }
.st-tray-x:focus-visible[b-8xw07llulm] { outline: 2px solid #fff; outline-offset: 1px; }
.st-tray-x[b-8xw07llulm]  svg { width: 12px; height: 12px; fill: #fff; }

.st-tray-add[b-8xw07llulm] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 70px;
    height: 70px;
    flex: none;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-sunken);
    color: var(--ds-text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.st-tray-add:hover[b-8xw07llulm] { border-color: var(--brand-600); color: var(--brand-700); }
.st-tray-add[b-8xw07llulm]  svg { fill: currentColor; }

/* Native file input'u şeffaf kaplama yap (scoped CSS child'a ulaşmaz → ::deep şart) */
.st-tray-add[b-8xw07llulm]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    color: transparent;
}

.st-attach-hint[b-8xw07llulm] {
    font-size: 0.71rem;
    color: var(--ds-text-subtle);
    line-height: 1.4;
    flex: 1;
    min-width: 140px;
}

.st-attach-file[b-8xw07llulm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    max-width: 100%;
}

.st-attach-file[b-8xw07llulm]  svg { fill: var(--brand-600); flex: none; }

.st-attach-name[b-8xw07llulm] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.st-attach-remove[b-8xw07llulm] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--ds-text-muted);
    cursor: pointer;
    flex: none;
}

.st-attach-remove:hover[b-8xw07llulm] { background: var(--ds-surface-sunken); color: var(--ds-danger); }
.st-attach-remove[b-8xw07llulm]  svg { fill: currentColor; }
.st-attach-remove:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 1px; }

/* ===== Dinamik Tasarım (YZ) — opt-in ===== */
.st-dynamic-field[b-8xw07llulm] {
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-sunken);
}

.st-switch[b-8xw07llulm] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.st-switch input[b-8xw07llulm] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.st-switch-track[b-8xw07llulm] {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--ds-border-strong);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
    flex: none;
}

.st-switch-thumb[b-8xw07llulm] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform var(--ds-dur-fast) var(--ds-ease);
}

.st-switch input:checked + .st-switch-track[b-8xw07llulm] { background: var(--brand-600); }
.st-switch input:checked + .st-switch-track .st-switch-thumb[b-8xw07llulm] { transform: translateX(18px); }
.st-switch input:focus-visible + .st-switch-track[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.st-switch-label[b-8xw07llulm] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
}

.st-dynamic-hint[b-8xw07llulm] {
    margin: 0;
    font-size: 0.71rem;
    line-height: 1.4;
    color: var(--ds-text-subtle);
}

.st-dyn-btn[b-8xw07llulm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 7px 14px;
    border: 1px solid var(--brand-600);
    border-radius: var(--ds-radius-sm);
    background: color-mix(in srgb, var(--brand-600) 8%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-700);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.st-dyn-btn:hover:not(:disabled)[b-8xw07llulm] { background: color-mix(in srgb, var(--brand-600) 16%, transparent); }
.st-dyn-btn:disabled[b-8xw07llulm] { opacity: 0.65; cursor: default; }
.st-dyn-btn:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.st-dyn-btn[b-8xw07llulm]  svg { fill: currentColor; }

.st-dyn-spin[b-8xw07llulm] {
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--brand-600) 30%, transparent);
    border-top-color: var(--brand-600);
    border-radius: 999px;
    animation: ml-spin-b-8xw07llulm 0.7s linear infinite;
}

@keyframes ml-spin-b-8xw07llulm { to { transform: rotate(360deg); } }

/* ===== Mod seçimi: Form / Sohbet ===== */
.st-mode[b-8xw07llulm] {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    border-radius: 999px;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    align-self: flex-start;
}

.st-mode-btn[b-8xw07llulm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.st-mode-btn.is-on[b-8xw07llulm] {
    background: var(--ds-surface);
    color: var(--brand-700);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.st-mode-btn:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.st-mode-btn[b-8xw07llulm]  svg { fill: currentColor; }

/* ===== Daha fazla seçenek (collapsible) ===== */
.st-more[b-8xw07llulm] {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
}

.st-more-summary[b-8xw07llulm] {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.st-more-summary[b-8xw07llulm]::-webkit-details-marker { display: none; }
.st-more-summary[b-8xw07llulm]::before {
    content: "▸";
    font-size: 0.7rem;
    transition: transform var(--ds-dur-fast) var(--ds-ease);
}

.st-more[open] .st-more-summary[b-8xw07llulm]::before { transform: rotate(90deg); }
.st-more-summary:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: -2px; }

.st-more-body[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 12px 14px;
}

/* ===== Sohbet modu ===== */
.st-chat[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-chat-thread[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    max-height: 42vh;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-sunken);
}

.st-chat-empty[b-8xw07llulm] {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--ds-text-subtle);
    font-size: 0.8125rem;
    max-width: 260px;
}

.st-chat-empty[b-8xw07llulm]  svg { fill: var(--brand-600); opacity: 0.8; }

.st-chat-msg[b-8xw07llulm] { display: flex; }
.st-chat-msg.is-user[b-8xw07llulm] { justify-content: flex-end; }
.st-chat-msg.is-ai[b-8xw07llulm] { justify-content: flex-start; }

.st-chat-bubble[b-8xw07llulm] {
    max-width: 82%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.8125rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.st-chat-msg.is-user .st-chat-bubble[b-8xw07llulm] {
    background: var(--brand-600);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.st-chat-msg.is-ai .st-chat-bubble[b-8xw07llulm] {
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-bottom-left-radius: 4px;
}

.st-chat-typing[b-8xw07llulm] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.st-chat-typing span[b-8xw07llulm] {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ds-text-subtle);
    animation: st-typing-b-8xw07llulm 1s infinite ease-in-out;
}

.st-chat-typing span:nth-child(2)[b-8xw07llulm] { animation-delay: 0.15s; }
.st-chat-typing span:nth-child(3)[b-8xw07llulm] { animation-delay: 0.3s; }

@keyframes st-typing-b-8xw07llulm {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

.st-chat-attach[b-8xw07llulm] { align-self: flex-start; }

/* Sohbet besteci kutusu — textarea üstte (2-3 satır), araç çubuğu altta (normal LLM sohbeti gibi) */
.st-chat-box[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface);
    overflow: hidden;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}

.st-chat-box:focus-within[b-8xw07llulm] {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 14%, transparent);
}

.st-chat-text[b-8xw07llulm] {
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    padding: 12px 14px;
    min-height: 78px;
    max-height: 180px;
    font: inherit;
    line-height: 1.5;
    color: var(--ds-text);
}

.st-chat-text[b-8xw07llulm]::placeholder { color: var(--ds-text-subtle); }

.st-chat-tools[b-8xw07llulm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface-sunken);
}

.st-chat-attach-btn[b-8xw07llulm] {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.st-chat-attach-btn:hover[b-8xw07llulm] { background: var(--ds-surface); color: var(--brand-700); }
.st-chat-attach-btn[b-8xw07llulm]  svg { fill: currentColor; }

/* InputFile'ın native <input type=file>'ı şeffaf kaplama olsun (label'ı doldurur, tıklanır ama görünmez).
   Scoped .razor.css child bileşene ulaşmaz → ::deep ŞART, aksi halde "Dosya Seç" metni sızar. */
.st-chat-attach-btn[b-8xw07llulm]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    color: transparent;
}

.st-chat-send[b-8xw07llulm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-600);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), opacity var(--ds-dur-fast) var(--ds-ease);
}

.st-chat-send:hover:not(:disabled)[b-8xw07llulm] { background: var(--brand-700); }
.st-chat-send:disabled[b-8xw07llulm] { opacity: 0.5; cursor: default; }
.st-chat-send:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.st-chat-send[b-8xw07llulm]  svg { fill: #fff; }

/* Canlı önizleme paneli — şablon gerçek DOM'da ölçekli render edilir (html2canvas değil) */
.st-design-preview[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.st-prev-label[b-8xw07llulm] {
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-subtle);
}

.st-prev-frame[b-8xw07llulm] {
    display: inline-block;
    border-radius: var(--ds-radius-md, 12px);
    overflow: hidden;
    background: var(--ds-surface-sunken);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
    border: 1px solid var(--ds-border);
}

.st-prev-host[b-8xw07llulm] { display: block; }
.st-prev-host .poster[b-8xw07llulm] { display: block; }

.st-note[b-8xw07llulm] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ds-text-muted);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-sm);
    padding: 8px 10px;
}

.st-note--center[b-8xw07llulm] { text-align: center; }

/* ===== 5) Sonuç ===== */
.st-result[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.st-generating[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--ds-text);
}

/* Tasarla adımının önizleme panelinde gösterilirken (ayrı Sonuç adımı yok) daha az dolgu */
.st-generating--inline[b-8xw07llulm] { padding: 44px 16px; }

.st-generating p[b-8xw07llulm] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

.st-orb[b-8xw07llulm] {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, #4aa3ec, var(--brand-600) 70%);
    animation: st-orb-pulse-b-8xw07llulm 1.4s ease-in-out infinite;
}

@keyframes st-orb-pulse-b-8xw07llulm {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-600) 45%, transparent); transform: scale(1); }
    70% { box-shadow: 0 0 0 14px transparent; transform: scale(1.08); }
    100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

.st-outputs[b-8xw07llulm] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

.st-output[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    width: min(360px, 90vw);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface);
    overflow: hidden;
    animation: st-stage-in-b-8xw07llulm 0.3s var(--ds-ease);
}

.st-output img[b-8xw07llulm] {
    width: 100%;
    display: block;
    background: var(--ds-surface-sunken);
}

.st-output--tall[b-8xw07llulm] { width: min(270px, 80vw); }

/* Tasarla adımının dar önizleme kolonunda tam genişlik, dikey istiflenmiş çıktılar */
/* Sonuç karuseli — çıktılar tek tek, sığacak şekilde; oklar + noktalarla gezilir */
.st-carousel[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.st-carousel-stage[b-8xw07llulm] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

.st-carousel-img[b-8xw07llulm] {
    max-width: 100%;
    max-height: 58vh;
    object-fit: contain;
    border-radius: var(--ds-radius-md, 12px);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.22);
    background: var(--ds-surface-sunken);
    animation: st-stage-in-b-8xw07llulm 0.28s var(--ds-ease);
}

.st-carousel-img.is-tall[b-8xw07llulm] { max-height: 62vh; }

.st-carousel-nav[b-8xw07llulm] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), opacity var(--ds-dur-fast) var(--ds-ease);
}

.st-carousel-prev[b-8xw07llulm] { left: 8px; }
.st-carousel-next[b-8xw07llulm] { right: 8px; }
.st-carousel-nav:hover:not(:disabled)[b-8xw07llulm] { background: var(--brand-600); }
.st-carousel-nav:disabled[b-8xw07llulm] { opacity: 0; pointer-events: none; }
.st-carousel-nav:focus-visible[b-8xw07llulm] { outline: 2px solid #fff; outline-offset: 2px; }
.st-carousel-nav[b-8xw07llulm]  svg { fill: #fff; }

.st-carousel-foot[b-8xw07llulm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.st-carousel-dots[b-8xw07llulm] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.st-carousel-dot[b-8xw07llulm] {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--ds-border-strong);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
}

.st-carousel-dot:hover[b-8xw07llulm] { background: var(--ds-text-subtle); }
.st-carousel-dot.is-on[b-8xw07llulm] { background: var(--brand-600); transform: scale(1.25); }
.st-carousel-dot:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.st-output-foot[b-8xw07llulm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
}

.st-output-platform[b-8xw07llulm] {
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.st-output-actions[b-8xw07llulm] { display: flex; gap: 2px; }

.st-act[b-8xw07llulm] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.st-act:hover[b-8xw07llulm] { background: var(--ds-surface-sunken); color: var(--brand-700); }
.st-act:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 1px; }

/* ===== Footer ===== */
.st-footer[b-8xw07llulm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 0 4px;
    border-top: 1px solid var(--ds-border);
}

.st-footer-cost[b-8xw07llulm] {
    margin-right: auto;
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
}

/* ===== Medya Kütüphanesi'nden ekle — arama + çoklu seçim popover (AppMenu ChildContent) ===== */
.st-lib-picker[b-8xw07llulm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 4px;
}

.st-lib-search[b-8xw07llulm] {
    width: 100%;
}

.st-lib-grid[b-8xw07llulm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 2px;
}

.st-lib-item[b-8xw07llulm] {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--ds-surface-sunken);
}

.st-lib-item img[b-8xw07llulm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.st-lib-item.is-on[b-8xw07llulm] {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-600) 30%, transparent);
}

.st-lib-item:focus-visible[b-8xw07llulm] { outline: 2px solid var(--brand-600); outline-offset: 1px; }

.st-lib-check[b-8xw07llulm] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--brand-600) 55%, transparent);
}

.st-lib-check[b-8xw07llulm]  svg { fill: #fff; }

.st-lib-empty[b-8xw07llulm] {
    grid-column: 1 / -1;
    margin: 0;
    padding: 20px 8px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--ds-text-subtle);
}

.st-lib-footer[b-8xw07llulm] {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--ds-border);
}

.st-footer-cost strong[b-8xw07llulm] { font-weight: 700; color: var(--ds-text-muted); }
/* /Components/Pages/Menus/Components/CartSummaryPage.razor.rz.scp.css */
/* ===== App Checkout - Mobile-first ===== */
.app-checkout[b-elbi47pv5e] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1a1a1a;
}

/* ===== Secure payment footer (always shown, above the sticky order footer) ===== */
.checkout-secure-footer[b-elbi47pv5e] {
    display: flex;
    justify-content: center;
    padding: 16px 16px 14px;
}

/* Flat iyzico logo row shown at the top of the card-entry section. */
.iyzico-pay-logos[b-elbi47pv5e] {
    margin-bottom: 14px;
}

@media (min-width: 768px) {
    .checkout-secure-footer[b-elbi47pv5e] {
        max-width: 960px;
        margin: 0 auto;
        width: 100%;
    }
}

/* ===== Agreements consent ===== */
.checkout-agreements[b-elbi47pv5e] {
    margin: 14px 0 4px;
    padding: 12px 14px;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 12px;
}

.checkout-agreements__intro[b-elbi47pv5e] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #4b5563;
}

.checkout-agreements__link[b-elbi47pv5e] {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: #036ac4;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.checkout-agreements__link:hover[b-elbi47pv5e] { color: #0257a3; }

.checkout-agreements__check[b-elbi47pv5e] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-size: 12.5px;
    color: #374151;
    cursor: pointer;
}

.checkout-agreements__check input[b-elbi47pv5e] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #036ac4;
    cursor: pointer;
}

.checkout-agreements__check .req[b-elbi47pv5e] { color: #dc2626; }

/* ===== Legal document modal ===== */
.legal-doc-overlay[b-elbi47pv5e] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.legal-doc-card[b-elbi47pv5e] {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 86dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.legal-doc-head[b-elbi47pv5e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.legal-doc-title[b-elbi47pv5e] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.legal-doc-close[b-elbi47pv5e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
    flex-shrink: 0;
}

.legal-doc-close:hover[b-elbi47pv5e] { background: #e5e7eb; }

.legal-doc-body[b-elbi47pv5e] {
    padding: 20px 22px;
    overflow-y: auto;
    font-size: 13.5px;
    line-height: 1.65;
    color: #1f2937;
}

.legal-doc-body h1[b-elbi47pv5e] { font-size: 19px; margin: 0 0 12px; }
.legal-doc-body h2[b-elbi47pv5e] { font-size: 15.5px; margin: 18px 0 8px; }
.legal-doc-body h3[b-elbi47pv5e] { font-size: 14px; margin: 14px 0 6px; }
.legal-doc-body p[b-elbi47pv5e] { margin: 0 0 10px; }
.legal-doc-body ul[b-elbi47pv5e] { margin: 0 0 10px; padding-left: 20px; }
.legal-doc-body li[b-elbi47pv5e] { margin: 3px 0; }
.legal-doc-body strong[b-elbi47pv5e] { color: #111827; }

/* Loading */
.customer-loading[b-elbi47pv5e] {
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* ===== Header ===== */
.app-header[b-elbi47pv5e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 52px;
}

.app-back-btn[b-elbi47pv5e] {
    background: none;
    border: none;
    cursor: pointer;
    color: #1a1a1a;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    transition: background 0.15s;
}

.app-back-btn:hover[b-elbi47pv5e] { background: #f0f0f0; }

.app-header-title[b-elbi47pv5e] {
    font-size: 1.05rem;
    font-weight: 700;
}

/* Store identity in the header — subtle, centered: small logo + store name with a quiet subtitle. */
.app-header-identity[b-elbi47pv5e] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.app-header-logo[b-elbi47pv5e] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f3f3f3;
    border: 1px solid #eee;
}

.app-header-titles[b-elbi47pv5e] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.15;
}

.app-header-store[b-elbi47pv5e] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.app-header-sub[b-elbi47pv5e] {
    font-size: 0.72rem;
    font-weight: 500;
    color: #9a9a9a;
}

.app-header-spacer[b-elbi47pv5e] {
    width: 30px;
    flex-shrink: 0;
}

/* ===== Scrollable Body ===== */
.app-scroll[b-elbi47pv5e] {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 0;
    -webkit-overflow-scrolling: touch;
}

/* ===== Sections ===== */
.app-section[b-elbi47pv5e] {
    background: #fff;
    padding: 20px 16px;
    margin-bottom: 8px;
}

.app-section-label[b-elbi47pv5e] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.req[b-elbi47pv5e] { color: #e53935; }

.app-badge[b-elbi47pv5e] {
    background: #1a1a1a;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* ===== Inputs ===== */
.app-input-group[b-elbi47pv5e] {
    margin-bottom: 14px;
}

.app-input-group:last-child[b-elbi47pv5e] { margin-bottom: 0; }

.app-label[b-elbi47pv5e] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.app-text-input[b-elbi47pv5e] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    color: #1a1a1a;
    background: #fafafa;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.app-text-input:focus[b-elbi47pv5e] {
    border-color: #333;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.app-text-input[b-elbi47pv5e]::placeholder { color: #bbb; }

/* Match PhoneMaskInput styling to app-text-input */
.phone-input-group[b-elbi47pv5e]  fluent-text-field {
    height: 49px;
    --input-height: 49px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    background: #fafafa;
    --neutral-fill-input-rest: #fafafa;
    --neutral-fill-input-hover: #fafafa;
    --neutral-fill-input-focus: #fff;
    --neutral-stroke-rest: transparent;
    --neutral-stroke-hover: transparent;
    --neutral-stroke-active: transparent;
    --focus-stroke-outer: transparent;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.phone-input-group[b-elbi47pv5e]  fluent-text-field:focus-within {
    border-color: #333;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.phone-input-group[b-elbi47pv5e]  fluent-text-field::part(root) {
    border: none;
    box-shadow: none;
    background: transparent;
    height: 100%;
}

.phone-input-group[b-elbi47pv5e]  fluent-text-field::part(control) {
    height: 100%;
    padding: 0;
}

/* Yer tutucu rengi: telefon alanı fluent-text-field, gerçek input shadow DOM'da
   ve placeholder hiç ele alınmadığı için FluentUI'ın koyu varsayılanına düşüyordu.
   Yan yana duran .app-text-input alanlarında placeholder #bbb — telefonda çok
   koyu görününce alan doluymuş, numara yazılıymış gibi okunuyordu.
   ::part(control) shadow'daki input'a ulaşan tek yol; ::deep input sınırı geçemez. */
.phone-input-group[b-elbi47pv5e]  fluent-text-field::part(control)::placeholder {
    color: #bbb;
    opacity: 1; /* Firefox placeholder'a varsayılan olarak opacity düşürür. */
}

.phone-input-group[b-elbi47pv5e]  input {
    font-size: 1rem !important;
    padding: 0 12px !important;
    height: 100% !important;
    color: #1a1a1a !important;
}

.phone-input-group[b-elbi47pv5e]  .start {
    padding-left: 16px;
    font-size: 1rem;
    color: #1a1a1a;
    font-weight: 500;
}

/* ===== Payment Options ===== */
.pay-options[b-elbi47pv5e] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pay-option[b-elbi47pv5e] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
}

.pay-option:hover[b-elbi47pv5e] { border-color: #ccc; background: #fafafa; }

.pay-option.selected[b-elbi47pv5e] {
    border-color: #1a1a1a;
    background: #fafafa;
}

.pay-icon[b-elbi47pv5e] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #555;
}

.pay-option.selected .pay-icon[b-elbi47pv5e] {
    background: #1a1a1a;
    color: #fff;
}

.pay-name[b-elbi47pv5e] {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
}

.pay-radio[b-elbi47pv5e] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
}

.pay-radio.checked[b-elbi47pv5e] {
    border-color: #1a1a1a;
}

.pay-radio.checked[b-elbi47pv5e]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1a1a1a;
}

.app-empty-msg[b-elbi47pv5e] {
    color: #999;
    font-size: 0.875rem;
    text-align: center;
    padding: 16px;
}

.pay-badge[b-elbi47pv5e] {
    background: #5d3ee8;
    color: #fff;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ===== Iyzico Online Payment Section ===== */
.iyzico-payment-section[b-elbi47pv5e] {
    margin-top: 16px;
    padding: 16px;
    background: #fafafa;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
}

.iyzico-saved-cards-label[b-elbi47pv5e] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 10px;
}

.iyzico-payment-error[b-elbi47pv5e] {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #c53030;
    font-size: 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Saved cards list (child component) */
.iyzico-payment-section[b-elbi47pv5e]  .saved-cards-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-item:hover {
    border-color: #ccc;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-item.selected {
    border-color: #1a1a1a;
    background: #fafafa;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    flex-shrink: 0;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-item.selected .saved-card-icon {
    background: #1a1a1a;
    color: #fff;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-brand {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-last4 {
    font-size: 0.78rem;
    color: #888;
    letter-spacing: 1px;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ddd;
    flex-shrink: 0;
    position: relative;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-radio.checked {
    border-color: #1a1a1a;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-radio.checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1a1a1a;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-delete {
    color: #999;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 0;
}

.iyzico-payment-section[b-elbi47pv5e]  .saved-card-delete:hover {
    color: #c53030;
    background: #fff5f5;
}

/* Card form (child component) */
.iyzico-payment-section[b-elbi47pv5e]  .iyzico-card-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.iyzico-payment-section[b-elbi47pv5e]  .iyzico-card-form .app-input-group {
    margin-bottom: 0;
}

.iyzico-payment-section[b-elbi47pv5e]  .iyzico-card-form .app-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.iyzico-payment-section[b-elbi47pv5e]  .iyzico-card-form .app-text-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #1a1a1a;
    background: #fff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.iyzico-payment-section[b-elbi47pv5e]  .iyzico-card-form .app-text-input:focus {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.iyzico-payment-section[b-elbi47pv5e]  .iyzico-card-form .app-text-input::placeholder {
    color: #bbb;
}

.iyzico-payment-section[b-elbi47pv5e]  .iyzico-card-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.iyzico-payment-section[b-elbi47pv5e]  .iyzico-save-card {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #444;
    cursor: pointer;
    user-select: none;
}

.iyzico-payment-section[b-elbi47pv5e]  .iyzico-save-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #1a1a1a;
}

.iyzico-payment-section[b-elbi47pv5e]  .iyzico-card-secure {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #666;
    margin-top: 4px;
    padding: 8px 10px;
    background: #f0f4f8;
    border-radius: 8px;
}

/* ===== Toggle Chips (Delivery Options) ===== */
.toggle-row[b-elbi47pv5e] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.toggle-chip[b-elbi47pv5e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 24px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.toggle-chip:hover[b-elbi47pv5e] { border-color: #bbb; }

.toggle-chip.on[b-elbi47pv5e] {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: #fff;
}

.chip-check[b-elbi47pv5e] {
    margin-left: 2px;
}

/* ===== Address Action Buttons ===== */
.address-actions[b-elbi47pv5e] {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.address-action-btn[b-elbi47pv5e] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.address-action-btn:hover:not(:disabled)[b-elbi47pv5e] {
    border-color: #ccc;
    background: #fafafa;
}

.address-action-btn:disabled[b-elbi47pv5e] {
    opacity: 0.4;
    cursor: not-allowed;
}

.address-action-btn.find[b-elbi47pv5e] {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: #fff;
}

.address-action-btn.find:hover:not(:disabled)[b-elbi47pv5e] {
    background: #333;
    border-color: #333;
}

.address-action-btn.find:disabled[b-elbi47pv5e] {
    background: #ccc;
    border-color: #ccc;
    color: #fff;
}

/* ===== Map Section ===== */
.map-section[b-elbi47pv5e] {
    margin-top: 0;
}

.map-hint[b-elbi47pv5e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #999;
    margin-bottom: 10px;
    line-height: 1.3;
}

.map-hint svg[b-elbi47pv5e] {
    flex-shrink: 0;
    color: #bbb;
}

.map-container[b-elbi47pv5e] {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 14px;
    overflow: hidden;
    touch-action: pan-x pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.map-loading-overlay[b-elbi47pv5e] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.map-search-bar[b-elbi47pv5e] {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 100;
    display: flex;
    gap: 6px;
    align-items: center;
}

.map-search-input[b-elbi47pv5e] {
    flex: 1;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    outline: none;
    color: #1a1a1a;
}

.map-search-input[b-elbi47pv5e]::placeholder { color: #aaa; }

.map-search-btn[b-elbi47pv5e] {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
}

.map-search-btn:hover:not(:disabled)[b-elbi47pv5e] { background: #333; }
.map-search-btn:disabled[b-elbi47pv5e] { opacity: 0.5; cursor: not-allowed; }

.map-clear-btn[b-elbi47pv5e] {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    flex-shrink: 0;
}

.map-clear-btn:hover[b-elbi47pv5e] { background: #fff; color: #333; }

.map-eta-badge[b-elbi47pv5e] {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(255,255,255,0.96);
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.app-loading-row[b-elbi47pv5e] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fafafa;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 0.875rem;
    color: #666;
}

/* ===== Center-pin map picker (YemekG-style) ===== */
.cs-map__host[b-elbi47pv5e] {
    width: 100%;
    height: 100%;
}

/* Fixed pin anchored over the map center — the map pans underneath it. */
.cs-map__pin[b-elbi47pv5e] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    color: #1a1a1a;
    pointer-events: none;
    z-index: 50;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Floating overlays on the map */
.cs-map-float[b-elbi47pv5e] {
    position: absolute;
    left: 12px;
    right: 12px;
    z-index: 60;
    display: flex;
    justify-content: center;
    pointer-events: none; /* let the map drag through the gaps; children re-enable */
}

.cs-map-float--top[b-elbi47pv5e] { top: 12px; }
/* Sits above Google's bottom attribution line (must stay visible per Maps ToS). */
.cs-map-float--bottom[b-elbi47pv5e] { bottom: 26px; }

/* Floating address field */
.cs-map-addr[b-elbi47pv5e] {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.cs-map-addr__icon[b-elbi47pv5e] { flex-shrink: 0; color: #1a1a1a; }

.cs-map-addr__input[b-elbi47pv5e] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: #1a1a1a;
    font-family: inherit;
}

.cs-map-addr__input[b-elbi47pv5e]::placeholder { color: #aaa; }

/* "Konumum" button, aligned right inside the floating address bar */
.cs-map-locate[b-elbi47pv5e] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border: none;
    border-radius: 9px;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, opacity 0.2s;
}

.cs-map-locate:hover:not(:disabled)[b-elbi47pv5e] { background: #333; }
.cs-map-locate:disabled[b-elbi47pv5e] { opacity: 0.55; cursor: not-allowed; }

/* Collapse to an icon-only button on narrow screens to keep the input usable. */
@media (max-width: 430px) {
    .cs-map-locate__text[b-elbi47pv5e] { display: none; }
    .cs-map-locate[b-elbi47pv5e] { padding: 7px; }
}

/* Floating action button (Adresi Güncelle / Bu Konumu Kullan) */
.cs-map-action[b-elbi47pv5e] {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transition: background 0.2s, opacity 0.2s, transform 0.1s;
}

.cs-map-action:active:not(:disabled)[b-elbi47pv5e] { transform: scale(0.98); }
.cs-map-action:disabled[b-elbi47pv5e] { opacity: 0.55; cursor: not-allowed; }

.cs-map-action.confirm[b-elbi47pv5e] { background: #1a1a1a; color: #fff; }
.cs-map-action.confirm:hover:not(:disabled)[b-elbi47pv5e] { background: #333; }

.cs-map-action.update[b-elbi47pv5e] { background: #fff; color: #1a1a1a; border: 1.5px solid #1a1a1a; }
.cs-map-action.update:hover:not(:disabled)[b-elbi47pv5e] { background: #f4f4f4; }

/* ETA badge moved to a corner so it doesn't collide with the bottom action */
.cs-eta-corner[b-elbi47pv5e] {
    top: 64px;
    right: 12px;
    left: auto;
    bottom: auto;
    transform: none;
    z-index: 60;
}

/* Adres Tarifi field below the map */
.cs-addr-note[b-elbi47pv5e] { margin-top: 12px; margin-bottom: 0; }
.cs-optional[b-elbi47pv5e] { font-weight: 400; color: #999; font-size: 0.78rem; }

/* ===== Cart Items ===== */
.app-cart-list[b-elbi47pv5e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-cart-item[b-elbi47pv5e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    gap: 12px;
}

.app-cart-item:last-child[b-elbi47pv5e] { border-bottom: none; }

.app-cart-item-img[b-elbi47pv5e] {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
    background: #f3f3f3;
}

.app-cart-item-info[b-elbi47pv5e] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.app-cart-item-name[b-elbi47pv5e] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
}

.app-cart-item-mods[b-elbi47pv5e] {
    font-size: 0.78rem;
    color: #999;
    line-height: 1.3;
}

.app-cart-item-note[b-elbi47pv5e] {
    font-size: 0.78rem;
    color: #bbb;
    font-style: italic;
}

.app-cart-item-right[b-elbi47pv5e] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.app-qty-ctrl[b-elbi47pv5e] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.app-qty-btn[b-elbi47pv5e] {
    width: 32px;
    height: 32px;
    border: none;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    transition: background 0.15s;
    padding: 0;
}

.app-qty-btn:hover[b-elbi47pv5e] { background: #f5f5f5; }
.app-qty-btn:active[b-elbi47pv5e] { background: #eee; }

.app-qty-num[b-elbi47pv5e] {
    min-width: 28px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1a1a;
    border-left: 1.5px solid #e0e0e0;
    border-right: 1.5px solid #e0e0e0;
    padding: 0 4px;
    line-height: 32px;
}

.app-cart-item-price[b-elbi47pv5e] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
}

/* ===== Textarea ===== */
.app-textarea[b-elbi47pv5e] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 0.9rem;
    color: #1a1a1a;
    background: #fafafa;
    outline: none;
    resize: none;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.app-textarea:focus[b-elbi47pv5e] {
    border-color: #333;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.app-textarea[b-elbi47pv5e]::placeholder { color: #bbb; }

/* ===== Inline Order Summary (inside cart section) ===== */
.cart-inline-summary[b-elbi47pv5e] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1.5px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-inline-total[b-elbi47pv5e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-inline-total span:first-child[b-elbi47pv5e] {
    font-size: 0.9rem;
    color: #888;
    font-weight: 600;
}

.cart-inline-price[b-elbi47pv5e] {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a1a;
}

.cart-inline-order-btn[b-elbi47pv5e] {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    background: #e8e8e8;
    color: #bbb;
}

.cart-inline-order-btn.ready[b-elbi47pv5e] {
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
}

.cart-inline-order-btn.ready:hover[b-elbi47pv5e] { background: #333; }
.cart-inline-order-btn.ready:active[b-elbi47pv5e] { transform: scale(0.985); }

.cart-inline-notes[b-elbi47pv5e] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-notes-label[b-elbi47pv5e] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== Footer ===== */
.app-footer[b-elbi47pv5e] {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}

.app-footer-total[b-elbi47pv5e] {
    display: flex;
    flex-direction: column;
    min-width: 80px;
}

.app-footer-total span:first-child[b-elbi47pv5e] {
    font-size: 0.75rem;
    color: #999;
    font-weight: 500;
}

.app-footer-price[b-elbi47pv5e] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1a1a;
}

/* Delivery zone warnings */
.delivery-zone-warning[b-elbi47pv5e] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 8px;
}

.delivery-zone-warning.outside[b-elbi47pv5e] {
    background: #fff0f0;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.delivery-zone-warning.min-cart[b-elbi47pv5e] {
    background: #fff8e1;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

.delivery-zone-warning svg[b-elbi47pv5e] {
    flex-shrink: 0;
    margin-top: 1px;
}

.delivery-zone-warning-footer[b-elbi47pv5e] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #c62828;
    min-width: 80px;
    text-align: center;
}

.app-order-btn[b-elbi47pv5e] {
    flex: 1;
    padding: 16px;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    background: #e8e8e8;
    color: #bbb;
}

.app-order-btn.ready[b-elbi47pv5e] {
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
}

.app-order-btn.ready:hover[b-elbi47pv5e] { background: #333; }
.app-order-btn.ready:active[b-elbi47pv5e] { transform: scale(0.985); }

/* ===== Order Loading Overlay ===== */
.order-loading-overlay[b-elbi47pv5e] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-elbi47pv5e 0.2s ease;
}

@keyframes fadeIn-b-elbi47pv5e {
    from { opacity: 0; }
    to { opacity: 1; }
}

.order-loading-card[b-elbi47pv5e] {
    background: #fff;
    border-radius: 20px;
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 320px;
    width: 90%;
}

.order-loading-title[b-elbi47pv5e] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.order-loading-text[b-elbi47pv5e] {
    font-size: 0.9rem;
    color: #777;
    margin: 0;
}

/* Column wrappers: transparent on mobile */
.col-left[b-elbi47pv5e],
.col-right[b-elbi47pv5e] {
    display: contents;
}

/* ===== Desktop: two-column layout ===== */
@media (min-width: 768px) {
    .app-checkout[b-elbi47pv5e] {
        height: auto;
        min-height: 100dvh;
    }

    .app-scroll[b-elbi47pv5e] {
        max-width: 960px;
        margin: 0 auto;
        padding: 24px 16px;
    }

    /* İki sütunlu satır YALNIZ .app-cols üzerinde. Eskiden flex doğrudan
       .app-scroll'daydı; güvenli ödeme şeridi ve alt boşluk da onun çocuğu olduğu
       için üçüncü/dördüncü flex öğesine dönüşüp satırı dolduruyor, flex-grow'lu iki
       sütunu 0 genişliğe çökertiyordu (içerik üst üste biniyordu). Mobilde
       görünmüyordu: orada sütunlar display:contents. */
    .app-cols[b-elbi47pv5e] {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    .col-left[b-elbi47pv5e],
    .col-right[b-elbi47pv5e] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        /* Flex item default min-width:auto inner nowrap içeriği (saved-addresses-row chips) sebebiyle
           column'u sınırsız genişletiyor — min-width:0 ile çocukların overflow:auto kuralını çalıştır. */
        min-width: 0;
    }

    /* Personal Info (top of left) and Sepetiniz (top of right) share the row 50/50. */
    .col-left[b-elbi47pv5e] {
        flex: 1;
    }

    .col-right[b-elbi47pv5e] {
        flex: 1;
    }

    .app-section[b-elbi47pv5e] {
        border-radius: 14px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

    .map-container[b-elbi47pv5e] {
        height: 360px;
    }

    .app-footer[b-elbi47pv5e] {
        max-width: 960px;
        margin: 0 auto;
        border-radius: 14px 14px 0 0;
    }
}

@media (min-width: 1200px) {
    .app-scroll[b-elbi47pv5e] { max-width: 1100px; }
    .app-footer[b-elbi47pv5e] { max-width: 1100px; }
}

/* ===== Hatırla (Remember-me) UI ===== */
/* PhoneMaskInput end-slot button — text field içinde sağa yapışık, küçük pill */
[b-elbi47pv5e] .phone-inline-action {
    background: transparent;
    color: #b91c1c;
    border: none;
    padding: 4px 10px;
    margin-right: 4px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    white-space: nowrap;
}

[b-elbi47pv5e] .phone-inline-action:hover:not(:disabled) {
    background: #fef2f2;
}

[b-elbi47pv5e] .phone-inline-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

[b-elbi47pv5e] .phone-inline-action.danger {
    color: #6b7280;
}

[b-elbi47pv5e] .phone-inline-action.danger:hover {
    background: #f3f4f6;
    color: #b91c1c;
}

.checkout-remember-hint[b-elbi47pv5e] {
    margin-top: 6px;
    padding: 8px 10px;
    background: #fef9c3;
    border: 1px solid #fde68a;
    color: #854d0e;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
}

.checkout-remember-me[b-elbi47pv5e] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #1f2937;
}

.checkout-remember-me input[type="checkbox"][b-elbi47pv5e] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #b91c1c;
}

/* Sipariş notu başlığının sağına yapışan toggle satırı (Zile Basma / Kapıya Bırak) */
.cart-notes-header[b-elbi47pv5e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.cart-notes-toggles[b-elbi47pv5e] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.toggle-chip.sm[b-elbi47pv5e] {
    padding: 4px 10px;
    font-size: 12px;
    gap: 4px;
}

/* Saved address chips */
.saved-addresses-chips[b-elbi47pv5e] {
    margin-top: 14px;
}

.saved-addresses-label[b-elbi47pv5e] {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.saved-addresses-chips[b-elbi47pv5e] { min-width: 0; }
.saved-addresses-row[b-elbi47pv5e] {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Flex/grid container'da overflow:auto'nun çalışması için intrinsic max-width gerekiyor. */
    max-width: 100%;
}

.saved-addresses-row[b-elbi47pv5e]::-webkit-scrollbar { height: 4px; }
.saved-addresses-row[b-elbi47pv5e]::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }

.saved-address-chip[b-elbi47pv5e] {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

.saved-address-chip[b-elbi47pv5e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 12px;
    color: #1f2937;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.saved-address-chip:hover[b-elbi47pv5e] { border-color: #cbd5e1; }

.saved-address-chip.selected[b-elbi47pv5e] {
    background: #fef2f2;
    border-color: #b91c1c;
    color: #b91c1c;
    font-weight: 600;
}

.saved-address-chip svg[b-elbi47pv5e] {
    flex: 0 0 14px;
}

.saved-address-chip span[b-elbi47pv5e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* Forced save-card hint inside Iyzico form */
[b-elbi47pv5e] .iyzico-save-card-hint {
    margin-top: 4px;
    padding: 6px 8px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 11px;
    color: #475569;
}

[b-elbi47pv5e] .iyzico-save-card.is-forced input {
    cursor: not-allowed;
    opacity: 0.7;
}

/* OTP overlay (HatirlaOtpDialog) */
[b-elbi47pv5e] .remember-otp__overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    backdrop-filter: blur(2px);
}

[b-elbi47pv5e] .remember-otp__panel {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    overflow: hidden;
}

[b-elbi47pv5e] .remember-otp__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #f1f5f9;
}

[b-elbi47pv5e] .remember-otp__header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

[b-elbi47pv5e] .remember-otp__close {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 4px;
}

[b-elbi47pv5e] .remember-otp__body {
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-elbi47pv5e] .remember-otp__text {
    margin: 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
}

[b-elbi47pv5e] .remember-otp__input {
    width: 100%;
    padding: 14px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 8px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    outline: none;
}

[b-elbi47pv5e] .remember-otp__input:focus {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

[b-elbi47pv5e] .remember-otp__error {
    padding: 8px 10px;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 8px;
    font-size: 12px;
}

[b-elbi47pv5e] .remember-otp__actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

[b-elbi47pv5e] .remember-otp__btn-secondary,
[b-elbi47pv5e] .remember-otp__btn-primary {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, background 0.15s;
}

[b-elbi47pv5e] .remember-otp__btn-secondary {
    background: #f1f5f9;
    color: #334155;
}

[b-elbi47pv5e] .remember-otp__btn-primary {
    background: #b91c1c;
    color: #fff;
}

[b-elbi47pv5e] .remember-otp__btn-primary:disabled,
[b-elbi47pv5e] .remember-otp__btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Labeled segmented row used for Teslimat Türü and Teslimat Zamanı — header + tabs in one line. */
[b-elbi47pv5e] .checkout-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.5rem;
    background: #fafafa;
    border: 1px solid var(--neutral-stroke-rest, #ececec);
    border-radius: 12px;
}
[b-elbi47pv5e] .checkout-section-row__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2b2b2b;
    flex-shrink: 0;
}
[b-elbi47pv5e] .checkout-section-row__label svg { color: #1a1a1a; }

/* Teslimat Türü + Teslimat Zamanı on one row; each card stacks its label over a full-width segment.
   flex-wrap keeps them side-by-side when wide and stacks them when the row gets narrow (mobile). */
[b-elbi47pv5e] .checkout-fulfillment-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.5rem;
}
[b-elbi47pv5e] .checkout-fulfillment-row .checkout-section-row {
    flex: 1 1 200px;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-bottom: 0;
}
[b-elbi47pv5e] .checkout-fulfillment-row .checkout-segment { width: 100%; }
[b-elbi47pv5e] .checkout-fulfillment-row .checkout-segment__btn { flex: 1; }

[b-elbi47pv5e] .checkout-segment {
    display: inline-flex;
    background: transparent;
    gap: 4px;
}
[b-elbi47pv5e] .checkout-segment__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.95rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #6b6b6b;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
[b-elbi47pv5e] .checkout-segment__btn.is-active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
    font-weight: 600;
}
[b-elbi47pv5e] .checkout-segment__btn:hover:not(:disabled):not(.is-active) { color: #2b2b2b; }
[b-elbi47pv5e] .checkout-segment__btn:disabled { opacity: 0.45; cursor: not-allowed; }

[b-elbi47pv5e] .checkout-schedule-picker {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem 0.85rem;
    margin: 0 0 0.6rem;
    background: #fff;
    border: 1px solid var(--neutral-stroke-rest, #ececec);
    border-radius: 12px;
}
[b-elbi47pv5e] .checkout-day-row { display: flex; gap: 0.45rem; }
[b-elbi47pv5e] .checkout-day-pill {
    padding: 0.42rem 1rem;
    border: 1px solid var(--neutral-stroke-rest, #e5e5e5);
    border-radius: 999px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
[b-elbi47pv5e] .checkout-day-pill.is-active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
    font-weight: 600;
}
[b-elbi47pv5e] .checkout-day-pill:disabled { opacity: 0.45; cursor: not-allowed; }

[b-elbi47pv5e] .checkout-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.4rem;
}
[b-elbi47pv5e] .checkout-time-slot {
    padding: 0.42rem 0.45rem;
    border: 1px solid var(--neutral-stroke-rest, #e5e5e5);
    border-radius: 8px;
    background: #fff;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
[b-elbi47pv5e] .checkout-time-slot.is-active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
    font-weight: 600;
}
[b-elbi47pv5e] .checkout-time-empty { color: #888; font-size: 0.8rem; }

[b-elbi47pv5e] .pickup-info-section { background: #fafafa; border: 1px dashed var(--neutral-stroke-rest, #ddd); }
[b-elbi47pv5e] .pickup-info-row { font-size: 0.88rem; padding: 4px 0; }
[b-elbi47pv5e] .pickup-info-row strong { margin-right: 4px; }

@media (max-width: 480px) {
    [b-elbi47pv5e] .checkout-section-row { flex-direction: column; align-items: stretch; gap: 0.45rem; padding: 0.6rem 0.7rem; }
    [b-elbi47pv5e] .checkout-segment { width: 100%; }
    [b-elbi47pv5e] .checkout-segment__btn { flex: 1; justify-content: center; }
}

/* /Components/Pages/Menus/Components/ProductImageStrip.razor.rz.scp.css */
.img-strip[b-tpf6rgqhca] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
    align-items: flex-start;
}

.img-strip-item[b-tpf6rgqhca] {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    flex: 0 0 auto;
}

.img-strip-item img[b-tpf6rgqhca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-strip-empty[b-tpf6rgqhca] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-strip-del[b-tpf6rgqhca] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.img-strip-item:hover .img-strip-del[b-tpf6rgqhca] {
    opacity: 1;
}

.img-strip-del:hover[b-tpf6rgqhca] {
    background: #b91c1c;
}

.img-strip-mv[b-tpf6rgqhca] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 28px;
    border: none;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.img-strip-item:hover .img-strip-mv[b-tpf6rgqhca] {
    opacity: 1;
}

.img-strip-mv:hover[b-tpf6rgqhca] {
    background: #0f172a;
}

.img-strip-mv-left[b-tpf6rgqhca] {
    left: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.img-strip-mv-right[b-tpf6rgqhca] {
    right: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.img-strip-badge[b-tpf6rgqhca] {
    position: absolute;
    left: 2px;
    bottom: 2px;
    background: #0f172a;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.img-strip-add[b-tpf6rgqhca] {
    width: 64px;
    height: 64px;
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: border-color 0.15s ease, background 0.15s ease;
    flex: 0 0 auto;
    padding: 0;
}

.img-strip-add:hover:not(.img-strip-add-disabled)[b-tpf6rgqhca] {
    border-color: #0f172a;
    background: #f8fafc;
}

.img-strip-add-disabled[b-tpf6rgqhca] {
    cursor: not-allowed;
    border-color: #e2e8f0;
    background: #f1f5f9;
}

.img-strip-add-count[b-tpf6rgqhca] {
    font-size: 0.625rem;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* /Components/Pages/Menus/Components/ProductModifierSelector.razor.rz.scp.css */
/* =====================================================================
   ProductModifierSelector — full-page mobile picker, design-system styles.
   Mirrors OrderItemDialog (.oid__*) using a parallel .pms__* namespace.
   Shared .ds-* primitives (stepper, checkbox, radio, tag, label, textarea)
   come from app.css.
   ===================================================================== */

.pms[b-1akba9lxj7] {
    /* --accent is injected inline by ProductModifierSelector from the
       host menu's PrimaryColor (falls back to brand-600). All brand-tinted
       chrome below reads var(--accent). */
    --accent: var(--brand-600);

    min-height: 100vh;
    background: var(--ds-surface-alt);
    font-family: var(--ds-font-ui);
    color: var(--ds-text);
    display: flex;
    flex-direction: column;
    padding: 0 var(--ds-space-3) calc(120px + env(safe-area-inset-bottom));
    gap: var(--ds-space-3);
}

/* DS primitives inside the selector adopt the menu accent. Mirrors the
   .oid override pattern in OrderItemDialog.razor.css. */
.pms .ds-stepper-btn[b-1akba9lxj7] {
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
}
.pms .ds-stepper-btn.ds-stepper-btn--decrease[b-1akba9lxj7] { background: var(--slate-500); }
.pms .ds-stepper-value[b-1akba9lxj7] { color: var(--ds-text); font-weight: 700; }
.pms .ds-checkbox.is-checked[b-1akba9lxj7],
.pms .ds-radio.is-checked[b-1akba9lxj7] {
    background: var(--accent);
    border-color: var(--accent);
}

.pms[b-1akba9lxj7]  .ab--primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.10),
        0 6px 18px rgba(15, 23, 42, 0.12);
}
.pms[b-1akba9lxj7]  .ab--primary:hover:not(:disabled) {
    filter: brightness(0.95);
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.pms .ds-tag--info[b-1akba9lxj7] {
    background: color-mix(in srgb, var(--accent) 14%, var(--ds-surface));
    color: var(--accent);
}

@supports not (background: color-mix(in srgb, red, blue)) {
    .pms .ds-tag--info[b-1akba9lxj7] {
        background: var(--brand-50);
        color: var(--brand-700);
    }
}

/* ---------- Top bar (back button) ---------- */
.pms__topbar[b-1akba9lxj7] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--ds-surface-alt);
    padding: var(--ds-space-3) 0 var(--ds-space-2);
    margin: 0 calc(-1 * var(--ds-space-3));
    padding-left: var(--ds-space-3);
    padding-right: var(--ds-space-3);
    border-bottom: 1px solid transparent;
}

.pms__back[b-1akba9lxj7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    padding: 6px 14px 6px 10px;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease);
}

.pms__back:hover[b-1akba9lxj7] { background: var(--ds-surface-alt); }

/* ---------- Hero ---------- */
.pms__hero[b-1akba9lxj7] {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    box-shadow: var(--ds-shadow-1);
}

.pms__hero-media[b-1akba9lxj7] {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--ds-surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pms__hero-img[b-1akba9lxj7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pms__hero-placeholder[b-1akba9lxj7] { color: var(--ds-text-subtle); }

.pms__hero-body[b-1akba9lxj7] {
    padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pms__title[b-1akba9lxj7] {
    font-family: var(--ds-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ds-text);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.pms__desc[b-1akba9lxj7] {
    font-size: 0.875rem;
    color: var(--ds-text-muted);
    margin: 0;
    line-height: 1.4;
}

.pms__hero-row[b-1akba9lxj7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-2);
    flex-wrap: wrap;
}

.pms__price[b-1akba9lxj7] {
    font-family: var(--ds-font-display);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.pms__qty-field[b-1akba9lxj7] { width: 56px; }

.pms__qty-field[b-1akba9lxj7]  input {
    background: transparent;
    border: none;
    text-align: center;
    font-weight: 600;
    color: var(--ds-text);
}

.pms__qty-unit[b-1akba9lxj7] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    padding: 0 4px;
}

/* ---------- Ağırlık/hacim: miktar + tutar ---------- */
/* Kompakt: başlık satırında durur, alanlar esneyip başlığı ezmemeli. */
.pms__wq[b-1akba9lxj7] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    align-items: flex-start;
}

.pms__wq-row[b-1akba9lxj7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.pms__wq-label[b-1akba9lxj7] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.pms__wq-control[b-1akba9lxj7] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-1);
}

/* Genişlik iç input'a ::deep ile dayatılır — dış Class web bileşeninin köküne
   ulaşmadığı için tek başına yetmiyor. */
.pms__wq-row[b-1akba9lxj7]  input {
    width: 84px;
    box-sizing: border-box;
    padding: 4px 6px;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    text-align: center;
    font-weight: 600;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}

.pms__wq-row[b-1akba9lxj7]  input:focus-visible {
    border-color: var(--brand-600);
    outline: none;
}

/* Birim seçici (kg | gr) — aktif olan marka mavisi */
.pms__unit-toggle[b-1akba9lxj7] {
    display: inline-flex;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
}

.pms__unit-toggle button[b-1akba9lxj7] {
    border: none;
    background: transparent;
    padding: 3px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}

.pms__unit-toggle button:hover[b-1akba9lxj7] { background: var(--ds-surface-alt); }

.pms__unit-toggle button.is-active[b-1akba9lxj7] {
    background: var(--brand-600);
    color: var(--ds-surface);
}

/* ---------- Groups ---------- */
.pms__nutri[b-1akba9lxj7] { padding: 0 var(--ds-space-3); }

.pms__groups[b-1akba9lxj7] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

.pms__group[b-1akba9lxj7] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.pms__group-head[b-1akba9lxj7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-2);
}

.pms__group-text[b-1akba9lxj7] { flex: 1; min-width: 0; }

.pms__group-title[b-1akba9lxj7] {
    font-family: var(--ds-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ds-text);
    margin: 0;
    letter-spacing: -0.005em;
}

.pms__group-desc[b-1akba9lxj7] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    margin: 2px 0 0;
    line-height: 1.4;
}

.pms__group-tags[b-1akba9lxj7] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pms__options[b-1akba9lxj7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pms__option[b-1akba9lxj7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: 10px var(--ds-space-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease),
                border-color var(--ds-dur) var(--ds-ease);
}

.pms__option:active[b-1akba9lxj7] { background: var(--ds-surface-alt); }

.pms__option.is-selected[b-1akba9lxj7] {
    background: color-mix(in srgb, var(--accent) 10%, var(--ds-surface));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--ds-border));
}

@supports not (background: color-mix(in srgb, red, blue)) {
    .pms__option.is-selected[b-1akba9lxj7] {
        background: var(--brand-50);
        border-color: var(--brand-300);
    }
}

.pms__option-main[b-1akba9lxj7] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    min-width: 0;
    flex: 1;
}

.pms__option-name[b-1akba9lxj7] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ds-text);
    line-height: 1.3;
    word-break: break-word;
}

.pms__option-aside[b-1akba9lxj7] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-shrink: 0;
}

.pms__option-price[b-1akba9lxj7] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* ---------- Notes ---------- */
.pms__notes[b-1akba9lxj7] { margin-top: var(--ds-space-1); }

/* ---------- Footer (sticky bottom) ---------- */
.pms__footer[b-1akba9lxj7] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-3) calc(var(--ds-space-3) + env(safe-area-inset-bottom));
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-border);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    flex-wrap: wrap;
}

.pms__footer-total[b-1akba9lxj7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pms__footer-total-label[b-1akba9lxj7] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pms__footer-total-value[b-1akba9lxj7] {
    font-family: var(--ds-font-display);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.pms__footer-actions[b-1akba9lxj7] {
    display: flex;
    gap: var(--ds-space-2);
    align-items: center;
    margin-left: auto;
}

/* ---------- Tablet+ ---------- */
@media (min-width: 720px) {
    .pms[b-1akba9lxj7] {
        padding-left: var(--ds-space-5);
        padding-right: var(--ds-space-5);
    }
    .pms__hero-media[b-1akba9lxj7] { aspect-ratio: 21 / 9; max-height: 280px; }
    .pms__title[b-1akba9lxj7] { font-size: 1.25rem; }
    .pms__footer[b-1akba9lxj7] { padding-left: var(--ds-space-5); padding-right: var(--ds-space-5); }
}
/* /Components/Pages/Menus/Components/StorePhotoStrip.razor.rz.scp.css */
/* =====================================================================
   Store photo strip — auto cross-fading + swipeable store gallery.
   ---------------------------------------------------------------------
   Sits between the sticky nav and the first category. A short, rounded
   ambience band: visible enough to set the mood, capped low enough to
   keep the menu the focus. JS (setupStorePhotoRotator) toggles
   `.is-active`; the crossfade + slow ken-burns drift live here.
   Honors prefers-reduced-motion. Tokens come from the global app.css.
   ===================================================================== */
.store-photo-strip[b-c8ingxto6n] {
    position: relative;
    margin: var(--ds-space-3) var(--ds-space-3) 0;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    background: var(--ds-surface-alt);
    box-shadow: var(--ds-shadow-1);
    aspect-ratio: 16 / 7;
    max-height: 190px;
    touch-action: pan-y;          /* let vertical page scroll through; we own horizontal swipe */
    cursor: grab;
}

/* Fill variant — the strip becomes the hero backdrop: fills the positioned
   parent edge-to-edge, drops the rounded band/margins/shadow, and stops
   capturing pointer events so taps reach the header controls above it.
   The hero overlay + title/address sit on top via their own z-index. */
.store-photo-strip--fill[b-c8ingxto6n] {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
    max-height: none;
    aspect-ratio: auto;
    box-shadow: none;
    z-index: 0;
    cursor: default;
    pointer-events: none;
}

.store-photo-strip--fill[b-c8ingxto6n]::after { display: none; }

.store-photo-track[b-c8ingxto6n] {
    position: absolute;
    inset: 0;
}

.store-photo-slide[b-c8ingxto6n] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 900ms var(--ds-ease), transform 6000ms var(--ds-ease);
    will-change: opacity;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.store-photo-slide.is-active[b-c8ingxto6n] {
    opacity: 1;
    transform: scale(1);
}

/* Soft bottom scrim so the pagination dots stay legible over bright photos. */
.store-photo-strip[b-c8ingxto6n]::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.34), transparent);
    pointer-events: none;
}

.store-photo-dots[b-c8ingxto6n] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--ds-space-2);
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.store-photo-dot[b-c8ingxto6n] {
    width: 6px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: var(--ds-radius-pill);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: width var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease);
}

.store-photo-dot:hover[b-c8ingxto6n] { background: rgba(255, 255, 255, 0.75); }

.store-photo-dot.is-active[b-c8ingxto6n] {
    width: 18px;
    background: var(--slate-0);
}

.store-photo-dot:focus-visible[b-c8ingxto6n] {
    outline: 2px solid var(--slate-0);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .store-photo-slide[b-c8ingxto6n] {
        transition: opacity 200ms linear;
        transform: none;
    }
    .store-photo-slide.is-active[b-c8ingxto6n] { transform: none; }
}

/* Desktop — centered & width-capped to align with the nav / product grid. */
@media (min-width: 769px) {
    .store-photo-strip:not(.store-photo-strip--fill)[b-c8ingxto6n] {
        width: calc(100% - var(--ds-space-6));
        max-width: 1100px;
        margin: var(--ds-space-4) auto 0;
        aspect-ratio: 16 / 5;
        max-height: 280px;
    }
}
/* /Components/Pages/Menus/CreateMenu.razor.rz.scp.css */
/* ========== Layout ========== */
.menu-editor-container[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--ds-surface-alt);
    overflow: hidden;
}

.editor-content[b-c1b9umnuj4] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ===== Settings panels (three independent top-right popovers) =====
   Three header buttons (Menü Ayarları / Şablon / Görsel), each toggling its
   own FIXED, self-scrolling popover. One panel at a time keeps each short. */
/* Aksiyon çubuğu: başlığın altında, kendi satırında ve kaydırma boyunca üste
   yapışık. Başlığın kardeşi olduğu için (.menu-builder'ın doğrudan çocuğu)
   sayfa sonuna kadar yapışık kalır — böylece kullanıcı ürünler arasında
   gezinirken Güncelle'ye ve diğer araçlara her an basabilir. */
.cm-settings-toolbar[b-c1b9umnuj4] {
    display: flex;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 20px;
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 30;
}

/* Yapışıp içerik altından geçmeye başlayınca hafif bir yükseklik ipucu. */
.cm-settings-toolbar[b-c1b9umnuj4]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 8px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent);
}

.cm-settings-trigger[b-c1b9umnuj4] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.cm-settings-trigger:hover[b-c1b9umnuj4] { background: var(--ds-surface-alt); border-color: var(--ds-border-strong); }

.cm-settings-trigger:focus-visible[b-c1b9umnuj4] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.cm-settings-trigger[b-c1b9umnuj4]  svg { color: var(--ds-text-muted); }

/* Active (panel open) — brand-tinted so the user sees which panel is showing. */
.cm-settings-trigger.is-active[b-c1b9umnuj4] {
    background: var(--brand-50);
    border-color: var(--brand-600);
    color: var(--brand-700);
}

.cm-settings-trigger.is-active[b-c1b9umnuj4]  svg { color: var(--brand-600); }

.cm-settings-trigger:disabled[b-c1b9umnuj4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Vertical divider between the panel buttons and the action buttons. */
.cm-toolbar-sep[b-c1b9umnuj4] {
    width: 1px;
    align-self: stretch;
    background: var(--ds-border);
    margin: 4px 2px;
}

/* Save/Update — primary (brand) when enabled (i.e. there are unsaved changes). */
.cm-settings-save:not(:disabled)[b-c1b9umnuj4] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.cm-settings-save:not(:disabled):hover[b-c1b9umnuj4] {
    background: var(--brand-700);
    border-color: var(--brand-700);
}

.cm-settings-save:not(:disabled)[b-c1b9umnuj4]  svg { color: #fff; }

/* AI iyileştirme onay modalı gövde metni. */
.cm-enhance-confirm-text[b-c1b9umnuj4] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ds-text);
}

/* AI iyileştir araç çubuğu butonu — marka rengi vurgulu kenarlık. */
.cm-settings-ai:not(:disabled)[b-c1b9umnuj4] {
    border-color: var(--brand-600);
    color: var(--brand-600);
}
.cm-settings-ai:not(:disabled):hover[b-c1b9umnuj4] { background: rgba(3, 106, 196, 0.08); }
.cm-settings-ai:not(:disabled)[b-c1b9umnuj4]  svg { color: var(--brand-600); }

/* Popover header — pinned above the scroll region. */
.cm-popover-head[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-shrink: 0;
    padding: 12px 12px 12px 14px;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

.cm-popover-head[b-c1b9umnuj4]  svg { color: var(--ds-text-muted); }

.cm-popover-title[b-c1b9umnuj4] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ds-text);
}

.cm-popover-close[b-c1b9umnuj4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--ds-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.cm-popover-close:hover[b-c1b9umnuj4] { background: var(--ds-surface-sunken); color: var(--ds-text); }

.cm-popover-close:focus-visible[b-c1b9umnuj4] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.cm-settings-backdrop[b-c1b9umnuj4] {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: transparent;
}

.cm-settings-popover[b-c1b9umnuj4] {
    position: fixed;
    /* Off-screen start: dsDropdown.position (scale-aware) anchors it under its
       trigger button on open. Starting off-screen avoids a corner flash before
       the JS runs, and keeps it from floating detached in the top-right. */
    top: -2000px;
    left: -2000px;
    right: auto;
    z-index: 200;
    width: 340px;
    /* min-width, bir inline width (JS'in layout-zoom altında hesapladığı dar değer)
       gelse bile her zaman onu ezer → popover asla daralıp içeriği kırpmaz. */
    min-width: 340px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-3);
    /* Opacity-only fade — no transform, so the fixed popover never becomes a
       containing block (which would clip the gallery's fixed hover-preview)
       and the scroll region is definite from the first frame. */
    animation: cm-pop-in-b-c1b9umnuj4 140ms var(--ds-ease);
}

/* Inner scroll region — definite height via flex:1 + min-height:0 so the
   overflow scroll engages immediately on open (no collapse/expand needed).
   Same header/body scroll pattern as AppModal. */
.cm-settings-scroll[b-c1b9umnuj4] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3);
}

@keyframes cm-pop-in-b-c1b9umnuj4 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 640px) {
    .cm-settings-label[b-c1b9umnuj4] { display: none; }
    /* Near-full-width on phones; JS still anchors top/left and clamps it on-screen.
       min-width sıfırlanır ki dar telefonlarda taşmasın. */
    .cm-settings-popover[b-c1b9umnuj4] { width: calc(100vw - 24px); min-width: 0; }
}

.editor-main[b-c1b9umnuj4] {
    flex: 1;
    background: var(--ds-surface-alt);
    overflow-y: auto;
    position: relative;
}

.menu-builder[b-c1b9umnuj4] {
    min-height: 100%;
    background: var(--ds-surface);
    margin: var(--ds-space-3);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
    border: 1px solid var(--ds-border);
    /* Yapışkan aksiyon çubuğunun yüksekliği (40px buton + 2×10px dolgu + kenarlık).
       Yapışkan kategori paneli kendi ofsetini buradan hesaplar. */
    --cm-toolbar-h: 62px;
}

.loading-container[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/* ========== Sidebar collapsible cards ========== */
.cm-card[b-c1b9umnuj4] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
    overflow: hidden;
}

.cm-card-head[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    width: 100%;
    padding: 12px 14px;
    background: var(--ds-surface);
    border: none;
    cursor: pointer;
    font-family: var(--ds-font-ui);
    color: var(--ds-text);
    text-align: left;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.cm-card-head:hover[b-c1b9umnuj4] { background: var(--ds-surface-alt); }

.cm-card-head:focus-visible[b-c1b9umnuj4] {
    outline: 2px solid var(--brand-600);
    outline-offset: -2px;
}

.cm-card-head[b-c1b9umnuj4]  svg { color: var(--ds-text-muted); }

.cm-card-title[b-c1b9umnuj4] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.cm-card-chevron[b-c1b9umnuj4] {
    display: inline-flex;
    color: var(--ds-text-muted);
    transition: transform var(--ds-dur) var(--ds-ease);
}

.cm-card-chevron.is-open[b-c1b9umnuj4] { transform: rotate(180deg); }

.cm-card-body[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    padding: 14px;
    border-top: 1px solid var(--ds-border);
}

.cm-subhead[b-c1b9umnuj4] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted);
}

.cm-divider[b-c1b9umnuj4] {
    height: 1px;
    background: var(--ds-border);
    margin: 2px 0;
}

/* Bulk-tax row: select + apply button */
.cm-bulk-row[b-c1b9umnuj4] {
    display: flex;
    gap: var(--ds-space-2);
    align-items: center;
}

.cm-bulk-row > .ds-select[b-c1b9umnuj4] { flex: 1; }

/* Checkbox rows */
.cm-check-row[b-c1b9umnuj4] { display: flex; gap: var(--ds-space-4); flex-wrap: wrap; }
.cm-check-col[b-c1b9umnuj4] { display: flex; flex-direction: column; gap: 10px; }

.cm-check[b-c1b9umnuj4] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    cursor: pointer;
    user-select: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text);
}

/* Primary-colour picker row */
.cm-color-row[b-c1b9umnuj4] {
    display: flex;
    gap: var(--ds-space-2);
    align-items: center;
}

.cm-color-row > .ds-input[b-c1b9umnuj4] { flex: 1; }

.cm-color-picker[b-c1b9umnuj4] {
    width: 42px;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    cursor: pointer;
    flex-shrink: 0;
}

/* Action button rows (Önizle / Kaydet) */
.cm-actions-row[b-c1b9umnuj4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-2);
}

.color-group[b-c1b9umnuj4] {
    margin-bottom: 1rem;
}

/* ========== Compact Menu Header ========== */
.compact-menu-header[b-c1b9umnuj4] {
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px 12px 0 0;
}

.compact-header-row[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.compact-title-input[b-c1b9umnuj4] {
    flex: 1 1 auto;
    /* Menü adı asla ezilmesin — okunabilir bir taban genişlik. */
    min-width: 240px;
    /* Kapak/logo solda kaldığı için başlık, kalan geniş boşlukta ortalanır. */
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    border: none;
    border-bottom: 2px solid transparent;
    outline: none;
    padding: 6px 0;
    background: transparent;
    transition: border-color 0.2s ease;
}

/* Birincil Kaydet/Güncelle butonu araç çubuğunda ezilmez. */
.cm-settings-toolbar .cm-settings-save[b-c1b9umnuj4] {
    flex-shrink: 0;
}

.compact-title-input:hover[b-c1b9umnuj4] {
    border-bottom-color: #e0e0e0;
}

.compact-title-input:focus[b-c1b9umnuj4] {
    border-bottom-color: var(--theme-primary, #C20004);
}

.compact-title-input[b-c1b9umnuj4]::placeholder {
    color: #bbb;
    font-weight: 500;
}

/* ─── Slug / URL row ─── */
.compact-slug-row[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 8px 8px;
    font-size: 13px;
    color: #64748b;
    flex-wrap: wrap;
}

.compact-slug-label[b-c1b9umnuj4] {
    font-weight: 600;
    color: #475569;
    user-select: none;
}

.compact-slug-prefix[b-c1b9umnuj4] {
    font-family: ui-monospace, 'SF Mono', monospace;
    color: #94a3b8;
    user-select: none;
}

.compact-slug-input[b-c1b9umnuj4] {
    background: transparent;
    border: none;
    border-bottom: 1px dashed #cbd5e1;
    padding: 2px 4px;
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 13px;
    color: #1e293b;
    outline: none;
    min-width: 140px;
    flex: 0 1 240px;
    transition: border-color 0.15s;
}

.compact-slug-input:hover[b-c1b9umnuj4] {
    border-bottom-color: #94a3b8;
}

.compact-slug-input:focus[b-c1b9umnuj4] {
    border-bottom: 1px solid #286cbd;
}

.compact-slug-input-error[b-c1b9umnuj4] {
    border-bottom-color: #dc2626 !important;
    color: #991b1b;
}

.compact-slug-status[b-c1b9umnuj4] {
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}

.compact-slug-status-checking[b-c1b9umnuj4] {
    color: #94a3b8;
    font-style: italic;
}

.compact-slug-status-ok[b-c1b9umnuj4] {
    color: #16a34a;
}

.compact-slug-status-error[b-c1b9umnuj4] {
    color: #dc2626;
}

.compact-slug-warning[b-c1b9umnuj4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 6px 0 8px 8px;
    padding: 8px 12px;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 12px;
    color: #78350f;
    line-height: 1.5;
    max-width: 700px;
}

.compact-slug-warning > span[b-c1b9umnuj4] {
    flex: 1;
}

.compact-slug-revert[b-c1b9umnuj4] {
    flex-shrink: 0;
    background: white;
    border: 1px solid #f59e0b;
    color: #78350f;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.compact-slug-revert:hover[b-c1b9umnuj4] {
    background: #fde68a;
}

.compact-slug-revert code[b-c1b9umnuj4] {
    font-family: ui-monospace, 'SF Mono', monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 10px;
}

.compact-slug-hint[b-c1b9umnuj4] {
    margin: 4px 0 8px 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
    max-width: 600px;
}

.compact-media-group[b-c1b9umnuj4] {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
    align-items: center;
    /* Medya bloğunu başlık alanından net biçimde ayır. */
    padding-right: 16px;
    margin-right: 4px;
    border-right: 1px solid var(--ds-border);
}

.compact-media-item[b-c1b9umnuj4] {
    position: relative;
}

.compact-media-thumb[b-c1b9umnuj4] {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    position: relative;
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.15s ease;
}

.compact-media-thumb.banner[b-c1b9umnuj4] {
    width: 112px;
    height: 72px;
    border-radius: 8px;
}

.compact-media-thumb.logo[b-c1b9umnuj4] {
    width: 72px;
    height: 72px;
    border-radius: 10px;
}

.compact-media-thumb:hover[b-c1b9umnuj4] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.compact-media-remove[b-c1b9umnuj4] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s ease;
}

.compact-media-remove:hover[b-c1b9umnuj4] {
    transform: scale(1.15);
    background: #dc3545;
}

.compact-media-placeholder[b-c1b9umnuj4] {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 2px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.15s ease;
}

/* Kapak yer tutucusu yatay olduğu için biraz daha geniş. */
.compact-media-item:first-child .compact-media-placeholder[b-c1b9umnuj4] {
    width: 112px;
    border-radius: 8px;
}

.compact-media-placeholder:hover[b-c1b9umnuj4] {
    border-color: var(--theme-primary, #C20004);
    background: rgba(194, 0, 4, 0.04);
}

/* Resim dosyası sürüklenirken üzerine gelinen Kapak/Logo alanı — buraya bırak ipucu */
.compact-media-item.file-drop-over .compact-media-thumb[b-c1b9umnuj4],
.compact-media-item.file-drop-over .compact-media-placeholder[b-c1b9umnuj4] {
    outline: 2px dashed var(--brand-600, #036ac4);
    outline-offset: 2px;
    border-color: var(--brand-600, #036ac4);
    background: var(--brand-50, rgba(3, 106, 196, 0.08));
}

.compact-media-placeholder span[b-c1b9umnuj4] {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

/* ========== Menu Content Layout (Sidebar + Products) ========== */
.menu-content-layout[b-c1b9umnuj4] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* Sol kategori paneli ile içerik arası boşluğu kıstık ki panel büyürken
       içerik daralmasın. */
    gap: 10px;
    width: 100%;
}

.menu-content-layout > .menu-navigation[b-c1b9umnuj4] {
    /* Daha geniş panel: uzun kategori adları sığsın / 2 satıra düzgün sarsın. */
    flex: 0 0 264px;
    position: sticky;
    /* Yapışkan aksiyon çubuğunun altında dursun, altına kaymasın. */
    top: calc(var(--cm-toolbar-h) + 16px);
    align-self: flex-start;
    max-height: calc(100vh - var(--cm-toolbar-h) - 32px);
    overflow-y: auto;
}

.menu-content-layout > .edit-categories-container[b-c1b9umnuj4] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ========== Local Product Search (nav sidebar) ========== */
.cm-nav-search[b-c1b9umnuj4] {
    padding: var(--ds-space-3) var(--ds-space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.cm-nav-search-field[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 0 var(--ds-space-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    transition: border-color var(--ds-dur-fast) var(--ds-ease);
}

.cm-nav-search-field:focus-within[b-c1b9umnuj4] {
    border-color: var(--brand-600);
}

.cm-nav-search-field[b-c1b9umnuj4]  svg {
    color: var(--ds-text-muted);
    flex-shrink: 0;
}

.cm-nav-search-input[b-c1b9umnuj4] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: var(--ds-space-2) 0;
    font-family: var(--ds-font-ui);
    font-size: 0.85rem;
    color: var(--ds-text);
}

.cm-nav-search-input[b-c1b9umnuj4]::placeholder { color: var(--ds-text-muted); }
/* Hide native search "x" — we render our own clear button. */
.cm-nav-search-input[b-c1b9umnuj4]::-webkit-search-cancel-button { -webkit-appearance: none; }

.cm-nav-search-clear[b-c1b9umnuj4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: var(--ds-radius-sm);
    flex-shrink: 0;
}

.cm-nav-search-clear:hover[b-c1b9umnuj4] { background: var(--ds-surface-alt); }
.cm-nav-search-clear:focus-visible[b-c1b9umnuj4] { outline: 2px solid var(--brand-600); outline-offset: 1px; }

.cm-nav-search-results[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.cm-nav-search-count[b-c1b9umnuj4] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted);
    padding: var(--ds-space-1) var(--ds-space-2);
}

.cm-nav-search-empty[b-c1b9umnuj4] {
    font-size: 0.8rem;
    color: var(--ds-text-muted);
    padding: var(--ds-space-2);
    text-align: center;
}

.cm-nav-search-item[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: var(--ds-space-2);
    border-radius: var(--ds-radius-sm);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.cm-nav-search-item:hover[b-c1b9umnuj4] { background: var(--brand-50); }
.cm-nav-search-item:focus-visible[b-c1b9umnuj4] { outline: 2px solid var(--brand-600); outline-offset: -2px; }

.cm-nav-search-item-name[b-c1b9umnuj4] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.cm-nav-search-item-cat[b-c1b9umnuj4] {
    font-size: 0.72rem;
    color: var(--ds-text-muted);
}

/* Flash highlight on the jumped-to product row. */
.edit-prod-row.is-search-highlight[b-c1b9umnuj4] {
    animation: cm-search-flash 1.8s var(--ds-ease);
}

@@keyframes cm-search-flash {
    0%[b-c1b9umnuj4], 60%[b-c1b9umnuj4] {
        background: var(--brand-50);
        box-shadow: inset 0 0 0 2px var(--brand-600);
    }
    100%[b-c1b9umnuj4] {
        background: transparent;
        box-shadow: inset 0 0 0 2px transparent;
    }
}

/* ========== Category Navigation Tabs ========== */
.category-nav-tabs[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 16px;
    align-items: stretch;
}

.category-tab[b-c1b9umnuj4] {
    border: 2px solid var(--theme-primary, #C20004);
    border-radius: 18px;
    padding: 9px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    color: var(--theme-primary, #C20004);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s ease, color 0.2s ease;
    /* Uzun kategori adları kırpılmak yerine 2 satıra sarsın (artık nowrap değil). */
    white-space: normal;
    overflow-wrap: anywhere;
    position: relative;
    overflow: visible;
    background: rgba(var(--theme-primary-rgb, 194, 0, 4), 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

.category-tab-name[b-c1b9umnuj4] {
    cursor: pointer;
    user-select: none;
}

.category-tab:hover[b-c1b9umnuj4] {
    background: var(--theme-primary, #C20004);
    color: white;
    opacity: 0.9;
}

.category-tab.active[b-c1b9umnuj4] {
    background: var(--theme-primary, #C20004);
    color: var(--theme-secondary, white);
    border-color: var(--theme-primary, #C20004);
    opacity: 1;
}

.category-tab-add[b-c1b9umnuj4] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px dashed #ccc;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.category-tab-add:hover[b-c1b9umnuj4] {
    border-color: var(--theme-primary, #C20004);
    background: rgba(var(--theme-primary-rgb, 194, 0, 4), 0.08);
}

/* Category Drag Handle */
.category-drag-handle[b-c1b9umnuj4] {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.15s ease;
    border-radius: 4px;
    margin-left: -4px;
    margin-right: 4px;
}

.category-drag-handle[b-c1b9umnuj4]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -3px 0 currentColor, 0 3px 0 currentColor;
    border-radius: 1px;
}

.category-drag-handle:hover[b-c1b9umnuj4] {
    transform: scale(1.1);
}

.category-drag-handle:active[b-c1b9umnuj4] {
    cursor: grabbing;
    transform: scale(0.98);
}

.category-tab.dragging[b-c1b9umnuj4] {
    opacity: 0.3;
    cursor: grabbing !important;
}

/* Ürün sürüklenirken üzerine gelinen kategori sekmesi — buraya bırak ipucu */
.category-tab.cat-drop-target[b-c1b9umnuj4] {
    background: var(--theme-primary, #C20004);
    color: var(--theme-secondary, white);
    border-style: solid;
    transform: scale(1.04);
    box-shadow: 0 2px 10px rgba(var(--theme-primary-rgb, 194, 0, 4), 0.35);
}

.category-tab.inactive[b-c1b9umnuj4] {
    opacity: 0.5;
    border-style: dashed;
}

/* Category Drop Placeholder */
.category-drop-placeholder[b-c1b9umnuj4] {
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ddd;
    border-radius: 20px;
    padding: 8px 16px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    background: rgba(240, 240, 240, 0.8);
}

.category-drop-content[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.category-drop-content span[b-c1b9umnuj4] {
    color: #999;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.category-drop-placeholder.drop-target[b-c1b9umnuj4] {
    border-color: var(--theme-primary, #C20004);
    border-width: 2px;
    border-style: solid;
    background: linear-gradient(135deg, rgba(194, 0, 4, 0.1), rgba(194, 0, 4, 0.15));
    box-shadow: 0 2px 8px rgba(194, 0, 4, 0.3);
}

.category-drop-placeholder.drop-target .category-drop-content span[b-c1b9umnuj4] {
    color: var(--theme-primary, #C20004);
    font-weight: 700;
}

/* ========== Edit Categories Container ========== */
.edit-categories-container[b-c1b9umnuj4] {
    width: 100%;
    max-width: 100%;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== Edit Category Section ========== */
.edit-category-section[b-c1b9umnuj4] {
    background: var(--ds-surface);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
    border: 1px solid var(--ds-border);
    overflow: hidden;
}

.edit-category-section.inactive[b-c1b9umnuj4] {
    opacity: 0.55;
    border-style: dashed;
}

/* Category Header */
.edit-cat-header[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--ds-surface-alt);
    border-bottom: 1px solid var(--ds-border);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.edit-cat-header:hover[b-c1b9umnuj4] {
    background: var(--ds-surface-sunken);
}

.collapse-toggle[b-c1b9umnuj4] {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-muted);
    flex-shrink: 0;
    transition: color var(--ds-dur-fast) var(--ds-ease);
}

.collapse-toggle:hover[b-c1b9umnuj4] {
    color: var(--ds-text);
}

/* Category Image (small) */
.edit-cat-image[b-c1b9umnuj4] {
    flex-shrink: 0;
    position: relative;
}

.edit-cat-image img[b-c1b9umnuj4] {
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-sm);
    object-fit: cover;
    border: 1px solid var(--ds-border);
}

.edit-cat-image-placeholder[b-c1b9umnuj4] {
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-sm);
    border: 1px dashed var(--ds-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--ds-surface-alt);
    transition: border-color var(--ds-dur-fast) var(--ds-ease);
}

.edit-cat-image-placeholder:hover[b-c1b9umnuj4] {
    border-color: var(--brand-600);
}

.edit-cat-image-remove[b-c1b9umnuj4] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    background: var(--ds-danger);
    border: 2px solid var(--ds-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--ds-shadow-1);
    transition: transform var(--ds-dur-fast) var(--ds-ease);
}

.edit-cat-image-remove:hover[b-c1b9umnuj4] {
    transform: scale(1.15);
}

.edit-cat-image-remove svg[b-c1b9umnuj4],
.edit-cat-image-remove fluent-icon[b-c1b9umnuj4] {
    width: 12px;
    height: 12px;
    color: #fff;
    fill: #fff;
}

/* Category Info */
.edit-cat-info[b-c1b9umnuj4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.edit-cat-name[b-c1b9umnuj4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    border: none;
    outline: none;
    background: transparent;
    padding: 3px 6px;
    border-radius: var(--ds-radius-sm);
    transition: background-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
    width: 100%;
}

.edit-cat-name:hover[b-c1b9umnuj4] {
    background: var(--ds-surface-sunken);
}

.edit-cat-name:focus[b-c1b9umnuj4] {
    background: var(--ds-surface);
    box-shadow: 0 0 0 2px rgba(3, 106, 196, 0.18);
}

.edit-cat-name[b-c1b9umnuj4]::placeholder {
    color: var(--ds-text-subtle);
}

.edit-cat-desc[b-c1b9umnuj4] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    border: none;
    outline: none;
    background: transparent;
    padding: 2px 6px;
    border-radius: var(--ds-radius-sm);
    transition: background-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
    width: 100%;
}

.edit-cat-desc:hover[b-c1b9umnuj4] {
    background: var(--ds-surface-sunken);
}

.edit-cat-desc:focus[b-c1b9umnuj4] {
    background: var(--ds-surface);
    box-shadow: 0 0 0 2px rgba(3, 106, 196, 0.12);
}

.edit-cat-desc[b-c1b9umnuj4]::placeholder {
    color: var(--ds-text-subtle);
}

/* Category Count Badge */
.edit-cat-count[b-c1b9umnuj4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 3px 10px;
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-pill);
}

/* Category Active Toggle */
.edit-cat-active-toggle[b-c1b9umnuj4] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Category Remove */
.edit-cat-remove[b-c1b9umnuj4] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-subtle);
    border-radius: var(--ds-radius-sm);
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
    flex-shrink: 0;
}

.edit-cat-remove:hover[b-c1b9umnuj4] {
    color: var(--ds-danger);
    background: rgba(220, 38, 38, 0.08);
}

/* ========== Product Rows ========== */
.edit-cat-products[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
}

/* Override old products-grid 2-column layout when inside edit container */
.edit-cat-products.products-grid[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    padding: 0;
}

/* Product Row */
.product-card.edit-prod-row[b-c1b9umnuj4] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 4px;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ds-border);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: none;
    min-height: auto;
    background: var(--ds-surface);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
    position: relative;
}

.product-card.edit-prod-row:last-child[b-c1b9umnuj4] {
    border-bottom: none;
}

.product-card.edit-prod-row:hover[b-c1b9umnuj4] {
    background: var(--ds-surface-alt);
    box-shadow: none;
    transform: none;
}

/* Drag Handle in product row — satır yüksekliğince uzanan geniş, kolay tutulur tutamak. */
.product-card.edit-prod-row .product-drag-handle[b-c1b9umnuj4] {
    position: static;
    align-self: stretch;
    width: 30px;
    min-height: 48px;
    flex-shrink: 0;
    opacity: 0.45;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    box-shadow: none;
    border-radius: 8px;
    z-index: auto;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.product-card.edit-prod-row .product-drag-handle[b-c1b9umnuj4]::after {
    display: none;
}

.product-card.edit-prod-row:hover .product-drag-handle[b-c1b9umnuj4] {
    opacity: 0.8;
}

.product-card.edit-prod-row .product-drag-handle:hover[b-c1b9umnuj4] {
    opacity: 1;
    transform: none;
    background: var(--ds-surface-sunken, rgba(15, 23, 42, 0.06));
}

.product-card.edit-prod-row .product-drag-handle:active[b-c1b9umnuj4] {
    cursor: grabbing !important;
}

/* Product Image */
.edit-prod-image[b-c1b9umnuj4] {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

/* Görselin altındaki "YZ ile Oluştur" kısayolu — genişliği thumbnail ile hizalı */
.edit-prod-image-ai[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 80px;
    margin-top: 4px;
    padding: 3px 4px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    font-family: var(--ds-font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}

.edit-prod-image-ai:hover[b-c1b9umnuj4] {
    border-color: var(--brand-600);
    color: var(--brand-700);
    background: var(--ds-surface-alt);
}

.edit-prod-image-ai:focus-visible[b-c1b9umnuj4] {
    outline: 2px solid var(--brand-600);
    outline-offset: 1px;
}

/* 16px ikon 10px'lik metnin yanında büyük durur — kutuyu küçült */
.edit-prod-image-ai[b-c1b9umnuj4]  svg {
    width: 12px;
    height: 12px;
}

/* E-ticaret çoklu görsel şeridinde buton tam genişlik alsın */
.edit-prod-image-multi .edit-prod-image-ai[b-c1b9umnuj4] { width: 100%; }

/* Multi-image variant for E-ticaret menus — allow horizontal strip with wrap */
.edit-prod-image-multi[b-c1b9umnuj4] {
    flex-shrink: 1;
    flex-basis: auto;
    max-width: 360px;
    cursor: default;
}

.edit-prod-image img[b-c1b9umnuj4] {
    width: 80px;
    height: 80px;
    border-radius: var(--ds-radius-md);
    object-fit: cover;
    border: 1px solid var(--ds-border);
    cursor: pointer;
}

/* Ürün görseli boş alanı (yükle / sürükle-bırak hedefi). Eskiden çıplak küçük bir
   ikondu; belirgin bir kesikli kutu yaptık ki sürükle-bırak alanı net olsun.
   80px: orijinal 48px'ten belirgin büyük ama isim+açıklama bloğundan yüksek değil,
   böylece kontroller alta sarınca boşluk oluşmaz. */
.prod-thumb-placeholder[b-c1b9umnuj4] {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-md);
    border: 1.5px dashed var(--ds-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface-alt);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}
.prod-thumb-placeholder:hover[b-c1b9umnuj4] {
    border-color: var(--brand-600);
    background: var(--brand-50, rgba(3, 106, 196, 0.08));
}
.prod-thumb-placeholder[b-c1b9umnuj4]  svg {
    width: 30px;
    height: 30px;
    color: var(--ds-text-muted);
}

.edit-prod-image-placeholder[b-c1b9umnuj4] {
    width: 48px;
    height: 48px;
    border-radius: var(--ds-radius-sm);
    border: 1px dashed var(--ds-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface-alt);
    transition: border-color var(--ds-dur-fast) var(--ds-ease);
}

.edit-prod-image-placeholder:hover[b-c1b9umnuj4] {
    border-color: var(--brand-600);
}

/* Resim dosyası sürüklenirken üzerine gelinen resim alanı — buraya bırak ipucu */
.edit-prod-image.file-drop-over[b-c1b9umnuj4],
.edit-cat-image.file-drop-over[b-c1b9umnuj4] {
    outline: 2px dashed var(--brand-600);
    outline-offset: 2px;
    border-radius: var(--ds-radius-sm);
}

.edit-prod-image.file-drop-over .edit-prod-image-placeholder[b-c1b9umnuj4],
.edit-prod-image.file-drop-over .prod-thumb-placeholder[b-c1b9umnuj4],
.edit-cat-image.file-drop-over .edit-cat-image-placeholder[b-c1b9umnuj4] {
    border-color: var(--brand-600);
    background: var(--brand-50, rgba(3, 106, 196, 0.08));
}

.edit-prod-image-remove[b-c1b9umnuj4] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    background: var(--ds-danger);
    border: 2px solid var(--ds-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--ds-shadow-1);
    transition: transform var(--ds-dur-fast) var(--ds-ease);
}

.edit-prod-image-remove:hover[b-c1b9umnuj4] {
    transform: scale(1.15);
}

/* FluentIcon, eksplisit boyut verilmezse görünmeyebiliyordu — çarpıyı netleştir. */
.edit-prod-image-remove svg[b-c1b9umnuj4],
.edit-prod-image-remove fluent-icon[b-c1b9umnuj4] {
    width: 11px;
    height: 11px;
    color: #fff;
    fill: #fff;
}

/* Product Info */
.edit-prod-info[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    /* Dar ekranlarda (1366/1280) isim kolonu sıfıra çökmesin diye gerçek bir alt sınır;
       satır sığmadığında fiyat/birim/kdv/durum/aksiyon grubu alta kayar. */
    min-width: 200px;
    gap: 1px;
    flex: 1 1 220px;
}

.edit-prod-name-wrap[b-c1b9umnuj4] {
    position: relative;
}

.edit-prod-name[b-c1b9umnuj4] {
    width: 100%;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    border: none;
    outline: none;
    background: transparent;
    padding: 3px 6px;
    border-radius: var(--ds-radius-sm);
    transition: background-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}

.edit-prod-name:hover[b-c1b9umnuj4] {
    background: var(--ds-surface-sunken);
}

.edit-prod-name:focus[b-c1b9umnuj4] {
    background: var(--ds-surface);
    box-shadow: 0 0 0 2px rgba(3, 106, 196, 0.18);
}

.edit-prod-name[b-c1b9umnuj4]::placeholder {
    color: var(--ds-text-subtle);
    font-weight: 400;
}

.edit-prod-desc[b-c1b9umnuj4] {
    width: 100%;
    font-size: 0.75rem;
    font-family: inherit;
    color: var(--ds-text-muted);
    border: none;
    outline: none;
    background: transparent;
    padding: 2px 6px;
    border-radius: var(--ds-radius-sm);
    /* En fazla 2 satır göster; uzun açıklamalar satır kaydırılır, taşan kısım gizlenir. */
    line-height: 1.35;
    height: calc(2 * 1.35em + 4px);
    resize: none;
    overflow-y: auto;
    white-space: normal;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}

.edit-prod-desc:hover[b-c1b9umnuj4] {
    background: var(--ds-surface-sunken);
}

.edit-prod-desc:focus[b-c1b9umnuj4] {
    background: var(--ds-surface);
    box-shadow: 0 0 0 2px rgba(3, 106, 196, 0.12);
}

.edit-prod-desc[b-c1b9umnuj4]::placeholder {
    color: var(--ds-text-subtle);
}

/* Modifier Link */
.edit-modifier-link[b-c1b9umnuj4] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--brand-600);
    cursor: pointer;
    background: none;
    border: none;
    padding: 1px 4px;
    margin-top: 1px;
}

.edit-modifier-link:hover[b-c1b9umnuj4] {
    text-decoration: underline;
}

/* Product Suggestions Dropdown */
.product-suggestions[b-c1b9umnuj4] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    box-shadow: var(--ds-shadow-2);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.suggestion-item[b-c1b9umnuj4] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ds-border);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.suggestion-item:last-child[b-c1b9umnuj4] {
    border-bottom: none;
}

.suggestion-item:hover[b-c1b9umnuj4] {
    background-color: var(--brand-50);
}

.suggestion-name[b-c1b9umnuj4] {
    font-weight: 600;
    color: var(--ds-text);
    margin-bottom: 3px;
    font-size: 0.8125rem;
}

.suggestion-desc[b-c1b9umnuj4] {
    font-size: 0.8rem;
    color: var(--ds-text-muted);
    margin-bottom: 3px;
    line-height: 1.3;
}

.suggestion-price[b-c1b9umnuj4] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-600);
}

/* ========== Product Price ========== */
.edit-prod-price[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    min-width: 130px;
}

.edit-price-row[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 0;
}

.edit-price-input[b-c1b9umnuj4] {
    width: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    text-align: right;
    border: 1px solid var(--ds-border-strong);
    outline: none;
    background: var(--ds-surface);
    padding: 6px 8px;
    border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
    transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
    -moz-appearance: textfield;
}

.edit-price-input[b-c1b9umnuj4]::-webkit-outer-spin-button,
.edit-price-input[b-c1b9umnuj4]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.edit-price-input:hover[b-c1b9umnuj4] {
    border-color: var(--ds-text-subtle);
}

.edit-price-input:focus[b-c1b9umnuj4] {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 2px rgba(3, 106, 196, 0.15);
}

.edit-price-currency[b-c1b9umnuj4] {
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    font-weight: 600;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border-strong);
    border-left: none;
    padding: 6px 8px;
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
}

/* Sidebar Select */
.sidebar-select[b-c1b9umnuj4] {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #fff;
}

/* Tax Rate & Base Unit (shared field column) */
.edit-prod-tax[b-c1b9umnuj4],
.edit-prod-unit[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
}

.edit-tax-label[b-c1b9umnuj4],
.edit-unit-label[b-c1b9umnuj4],
.edit-price-label[b-c1b9umnuj4] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ds-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.edit-tax-select[b-c1b9umnuj4],
.edit-unit-select[b-c1b9umnuj4] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-text, #1a1a1a);
    border: 1px solid var(--ds-border-strong, #d0d0d0);
    outline: none;
    background: var(--ds-surface, #fff);
    padding: 4px 24px 4px 8px;
    border-radius: var(--ds-radius-sm, 6px);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23616161' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    height: 30px;
    line-height: 1;
    transition: all 0.1s ease;
}

.edit-tax-select[b-c1b9umnuj4] { width: 72px; }
.edit-unit-select[b-c1b9umnuj4] { width: 96px; }

.edit-tax-select:hover[b-c1b9umnuj4],
.edit-unit-select:hover[b-c1b9umnuj4] {
    background-color: var(--ds-surface-alt, #f5f5f5);
    border-color: var(--ds-border-strong, #aaa);
}

.edit-tax-select:focus[b-c1b9umnuj4],
.edit-unit-select:focus[b-c1b9umnuj4] {
    border-color: var(--brand-600, #036ac4);
    box-shadow: 0 0 0 1px var(--brand-600, #036ac4);
}

/* Stepper config (kantar) — single input "1 ADET KAÇ KG?" aligned with the
   neighbouring Birim/KDV columns. Min is always 0 (snap to 0 when below Step). */
.edit-prod-qty[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
}

.edit-qty-label[b-c1b9umnuj4] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ds-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.edit-qty-input-group[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    border: 1px solid var(--ds-border-strong, #d0d0d0);
    border-radius: var(--ds-radius-sm, 6px);
    background: var(--ds-surface, #fff);
    height: 30px;
    padding: 0 6px 0 0;
    transition: all 0.1s ease;
}

.edit-qty-input-group:hover[b-c1b9umnuj4] {
    border-color: var(--ds-border-strong, #aaa);
    background-color: var(--ds-surface-alt, #f5f5f5);
}

.edit-qty-input-group:focus-within[b-c1b9umnuj4] {
    border-color: var(--brand-600, #036ac4);
    box-shadow: 0 0 0 1px var(--brand-600, #036ac4);
}

.edit-qty-input[b-c1b9umnuj4] {
    width: 60px;
    border: none;
    outline: none;
    background: transparent;
    padding: 4px 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-text, #1a1a1a);
    text-align: right;
    -moz-appearance: textfield;
}

.edit-qty-input[b-c1b9umnuj4]::-webkit-outer-spin-button,
.edit-qty-input[b-c1b9umnuj4]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.edit-qty-suffix[b-c1b9umnuj4] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-muted);
    user-select: none;
}

/* Struck Price Row */
.edit-struck-row[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Çizili fiyat bilgi ikonu + üzerine gelince açılan açıklama balonu */
.edit-struck-info[b-c1b9umnuj4] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    color: var(--ds-text-subtle);
    cursor: help;
    border-radius: var(--ds-radius-sm);
    outline: none;
}

.edit-struck-info:hover[b-c1b9umnuj4],
.edit-struck-info:focus-visible[b-c1b9umnuj4] {
    color: var(--brand-600);
}

.edit-struck-info:focus-visible[b-c1b9umnuj4] {
    box-shadow: 0 0 0 2px rgba(3, 106, 196, 0.25);
}

.edit-struck-info-pop[b-c1b9umnuj4] {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: 240px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ds-text);
    text-align: left;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease), visibility var(--ds-dur-fast) var(--ds-ease);
    pointer-events: none;
}

.edit-struck-info:hover .edit-struck-info-pop[b-c1b9umnuj4],
.edit-struck-info:focus-visible .edit-struck-info-pop[b-c1b9umnuj4] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.edit-struck-input[b-c1b9umnuj4] {
    width: 100px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text-muted);
    text-decoration: line-through;
    text-align: right;
    border: 1px solid var(--ds-border);
    outline: none;
    background: var(--ds-surface-alt);
    padding: 4px 8px;
    border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
    -moz-appearance: textfield;
}

.edit-struck-input[b-c1b9umnuj4]::-webkit-outer-spin-button,
.edit-struck-input[b-c1b9umnuj4]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.edit-struck-input:focus[b-c1b9umnuj4] {
    border-color: var(--ds-border-strong);
    background: var(--ds-surface);
    color: var(--ds-text);
}

.edit-struck-remove[b-c1b9umnuj4] {
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-left: none;
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-subtle);
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
    line-height: 1.42;
}

.edit-struck-remove:hover[b-c1b9umnuj4] {
    background: rgba(220, 38, 38, 0.08);
    color: var(--ds-danger);
    border-color: var(--ds-danger);
}

/* Add Struck Price Button */
.edit-add-struck[b-c1b9umnuj4] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--ds-text-muted);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    padding: 3px 8px;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
    white-space: nowrap;
}

.edit-add-struck:hover[b-c1b9umnuj4] {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: var(--brand-50);
}

/* KDV — Birim select'inin altında, "Çizili Fiyat" butonu gibi kompakt seçici.
   Native select olduğu için basınca açılır; kapalıyken seçili "KDV %10" görünür. */
.edit-kdv-inline[b-c1b9umnuj4] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-muted);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    padding: 3px 20px 3px 8px;
    line-height: 1.2;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23616161' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}
.edit-kdv-inline:hover[b-c1b9umnuj4] { border-color: var(--brand-600); color: var(--brand-600); background: var(--brand-50); }
.edit-kdv-inline:focus[b-c1b9umnuj4] { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }

/* Kontrol bloğu — fiyat / birim / kdv / durum / aksiyonlar. Geniş ekranda satırın
   sağında tek sıra; dar ekranda bilgi alanının altına tek blok hâlinde sarar. */
.edit-prod-controls[b-c1b9umnuj4] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 14px;
    margin-left: auto;
}

/* ========== Product Actions ========== */
/* Birim/KDV/Durum kolonlarıyla aynı düzen: üstte etiket-yüksekliğinde boş bir
   spacer satırı, altta buton satırı. Böylece butonlar select kutularıyla aynı
   yatay hizada başlar. */
.edit-prod-actions[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.edit-actions-spacer[b-c1b9umnuj4] {
    pointer-events: none;
    user-select: none;
}

/* Üst aksiyon satırı: Durum (Aktif) + İyileştir + Sil, sağa yaslı. Durum dropdown'ı
   bu satırda olduğundan kolon genişliği bu satıra göre belirlenir; Sil'in sağ kenarı
   alttaki Stok/Reçete butonunun sağ kenarıyla hizalanır. */
.edit-prod-actions-row[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}
/* Durum dropdown'ı, yanındaki ikon butonlarıyla (36px) aynı yükseklikte. */
.edit-prod-actions-row .edit-status-select[b-c1b9umnuj4] { height: 36px; }

/* AI iyileştir butonu — grid-act-lbl tabanlı, hover'da marka rengi vurgusu. */
.grid-act-lbl--ai:hover[b-c1b9umnuj4] {
    background: rgba(3, 106, 196, 0.08);
    border-color: var(--brand-600);
    color: var(--brand-600);
}

/* Reçete butonu — grid-act-lbl tabanlı, hover'da marka rengi vurgusu. */
.grid-act-lbl--recipe:hover:not(:disabled)[b-c1b9umnuj4] {
    background: rgba(3, 106, 196, 0.08);
    border-color: var(--brand-600);
    color: var(--brand-600);
}
.grid-act-lbl--recipe:disabled[b-c1b9umnuj4] { opacity: .5; cursor: not-allowed; }

/* Devre dışı aksiyon butonu (ör. ürün bilgileri tamamsa YZ ile İyileştir). */
.grid-act-lbl:disabled[b-c1b9umnuj4] { opacity: .4; cursor: not-allowed; }

/* Stok/Reçete Bağla — aksiyon ikonlarının altında, sağa yaslı (sağ kenarı Sil ile hizalı). */
.edit-prod-source-row[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.edit-recipe-link[b-c1b9umnuj4] { margin-top: 0; }

/* Sil — yalnızca ikon, kırmızı. */
.grid-act-lbl--icon[b-c1b9umnuj4] {
    width: 36px;
    padding: 0;
    justify-content: center;
}
.grid-act-lbl--icon.grid-act-lbl--danger[b-c1b9umnuj4] {
    color: var(--ds-danger);
    border-color: var(--ds-border);
}
.grid-act-lbl--icon.grid-act-lbl--danger:hover[b-c1b9umnuj4] {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--ds-danger);
}

/* Grid satır aksiyon butonu — sistemdeki listelerde kullanılan stille aynı:
   bordür + köşe yarıçapı + nötr ikon, hover'da hafif dolgu. */
.grid-act-btn[b-c1b9umnuj4] {
    width: 32px;
    height: 32px;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    transition: background-color var(--ds-dur-fast) var(--ds-ease),
                border-color var(--ds-dur-fast) var(--ds-ease),
                color var(--ds-dur-fast) var(--ds-ease);
}

.grid-act-btn[b-c1b9umnuj4]  svg {
    width: 16px;
    height: 16px;
    color: currentColor;
    fill: currentColor;
}

.grid-act-btn:hover[b-c1b9umnuj4] {
    background: var(--ds-surface-sunken);
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
}

.grid-act-btn:focus-visible[b-c1b9umnuj4] {
    outline: 2px solid var(--brand-600);
    outline-offset: 1px;
}

/* Durum kolonu — Birim/KDV ile aynı düzen (etiket + kompakt select). */
/* Sabit genişlikli, sade durum dropdown'ı — sol: duruma göre renkli nokta, sağ: chevron.
   width + flex:0 0 auto sayesinde asla esnemiyor (eski dev yeşil kutu sorunu çözüldü). */
.edit-status-select[b-c1b9umnuj4] {
    width: 124px;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 30px;
    line-height: 1;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 0 24px 0 22px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--ds-surface);
    background-image:
        radial-gradient(circle, currentColor 50%, transparent 52%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23616161' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: left 8px center, right 7px center;
    background-size: 8px 8px, 11px 7px;
    transition: all 0.1s ease;
}
.edit-status-select:focus[b-c1b9umnuj4] {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 1px var(--brand-600);
}
.edit-status-select.active[b-c1b9umnuj4] { color: #16a34a; border-color: rgba(22, 163, 74, 0.5); }
.edit-status-select.daily-inactive[b-c1b9umnuj4] { color: #d97706; border-color: rgba(217, 119, 6, 0.5); }
.edit-status-select.inactive[b-c1b9umnuj4] { color: var(--slate-500, #64748b); border-color: var(--ds-border-strong); }

/* Eklenmiş alerjenler — ürün adı/açıklaması altında küçük çipler. */
.edit-prod-allergens[b-c1b9umnuj4] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}
.edit-allergen[b-c1b9umnuj4] {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    font-weight: 600;
    /* Diyet çipleriyle aynı yükseklik (1px kenarlık + 2px dikey dolgu) için hizalı. */
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-pill);
    background: #fef3c7;
    color: #b45309;
}

/* Settings panel — compliance note (1 July 2026 regulation). */
.cm-compliance-note[b-c1b9umnuj4] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--ds-text-muted);
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--ds-radius-sm);
    padding: 7px 9px;
}
.cm-compliance-note[b-c1b9umnuj4]  svg { color: #15803d; flex: 0 0 auto; margin-top: 1px; }

/* Product editor — dietary tags: selected tags as removable chips + an "add" dropdown. */
/* "Seçenek Grubu Ekle" linki + diyet etiketleri tek satırda yan yana. */
.edit-prod-meta-row[b-c1b9umnuj4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.edit-prod-dietary[b-c1b9umnuj4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* Diyet etiketi grubu satırın SAĞ ucuna yaslanır (margin-left:auto): seçenek grubu
   linki + alerjenler solda kalır. flex-wrap:nowrap + flex-shrink:0 sayesinde grubun
   içindeki diyet çipleri («Acı ×») ve «+ Diyet Etiketi» dikey kaymaz, hep YAN YANA
   durur; sığmazsa grup bütün olarak bir alt satıra (yine sağa yaslı) iner. */
.edit-prod-meta-row .edit-prod-dietary[b-c1b9umnuj4] {
    margin-top: 0;
    margin-left: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.edit-prod-meta-row .edit-modifier-link[b-c1b9umnuj4] { margin-top: 0; }
.edit-diet-chip[b-c1b9umnuj4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 6px 2px 8px;
    border-radius: var(--ds-radius-pill);
    border: 1px solid var(--brand-600, #036ac4);
    background: var(--brand-600, #036ac4);
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.edit-diet-chip:hover[b-c1b9umnuj4] { filter: brightness(1.08); }
.edit-diet-chip:focus-visible[b-c1b9umnuj4] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 1px; }
.edit-diet-x[b-c1b9umnuj4] { font-size: 0.85rem; line-height: 1; opacity: 0.85; }
/* Reçeteden otomatik türetilen (malzeme bazlı) — salt-okunur, amber tonlu. */
.edit-diet-chip.is-auto[b-c1b9umnuj4] {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
    cursor: default;
}
.edit-diet-chip.is-auto:hover[b-c1b9umnuj4] { filter: none; }

.edit-diet-add[b-c1b9umnuj4] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--ds-radius-pill);
    border: 1px dashed var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.edit-diet-add:hover[b-c1b9umnuj4] { border-color: var(--brand-600, #036ac4); color: var(--brand-700, #0356a3); }
.edit-diet-add:focus-visible[b-c1b9umnuj4] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 1px; }

/* Sil butonu — hover'da tehlike rengi. */
.grid-act-btn.danger[b-c1b9umnuj4] {
    color: var(--ds-danger);
}
.grid-act-btn.danger:hover[b-c1b9umnuj4] {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--ds-danger);
}

/* ========== Add Buttons ========== */
.add-product-row-btn[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    background: transparent;
    border: 1px dashed var(--ds-border-strong);
    border-radius: 0 0 var(--ds-radius-md) var(--ds-radius-md);
    cursor: pointer;
    color: var(--ds-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
    width: 100%;
}

.add-product-row-btn:hover[b-c1b9umnuj4] {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: var(--brand-50);
}

.add-category-section-btn[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: 2px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    color: var(--ds-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
    width: 100%;
}

.add-category-section-btn:hover[b-c1b9umnuj4] {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: var(--brand-50);
}

/* ========== Drag & Drop States ========== */

/* Body drag state */
body.dragging-active[b-c1b9umnuj4] {
    cursor: grabbing !important;
}

body.dragging-active *[b-c1b9umnuj4] {
    cursor: grabbing !important;
}

/* Product dragging */
.product-card.dragging[b-c1b9umnuj4] {
    opacity: 0.4;
    cursor: grabbing !important;
}

.product-card.edit-prod-row.dragging[b-c1b9umnuj4] {
    background: #f8f8f8;
}

/* Drop target */
.product-card.drop-target[b-c1b9umnuj4] {
    position: relative;
}

.product-card.edit-prod-row.drop-target[b-c1b9umnuj4] {
    background: rgba(194, 0, 4, 0.04);
}

.product-card.edit-prod-row.drop-target[b-c1b9umnuj4]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--theme-primary, #C20004);
    z-index: 1;
}

.product-card.edit-prod-row.drop-target[b-c1b9umnuj4]::before {
    display: none;
}

/* Drop Zone Placeholder */
.drop-zone-placeholder[b-c1b9umnuj4] {
    border: 2px dashed #ddd;
    border-radius: 8px;
    min-height: 48px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    transition: all 0.15s ease;
    cursor: pointer;
    margin: 4px 14px;
}

.drop-zone-placeholder[data-is-empty="true"][b-c1b9umnuj4] {
    min-height: 80px;
}

.drop-zone-placeholder:hover[b-c1b9umnuj4] {
    border-color: #bbb;
    background: #f5f5f5;
}

.drop-zone-content[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 0.85rem;
}

.drop-zone-content span[b-c1b9umnuj4] {
    font-weight: 500;
}

.drop-zone-placeholder.drop-target[b-c1b9umnuj4] {
    border-color: var(--theme-primary, #C20004);
    border-width: 2px;
    background: linear-gradient(135deg, rgba(194, 0, 4, 0.05), rgba(194, 0, 4, 0.08));
}

.drop-zone-placeholder.drop-target .drop-zone-content[b-c1b9umnuj4] {
    color: var(--theme-primary, #C20004);
}

.drop-zone-placeholder.drop-target .drop-zone-content span[b-c1b9umnuj4] {
    font-weight: 600;
}

/* ========== Inactive Product ========== */
.inactive-product[b-c1b9umnuj4] {
    pointer-events: none;
}

.product-card.edit-prod-row.inactive-product[b-c1b9umnuj4] {
    opacity: 0.5;
}

.inactive-image[b-c1b9umnuj4] {
    opacity: 0.5;
}

.inactive-text[b-c1b9umnuj4] {
    opacity: 0.7;
}

.inactive-price[b-c1b9umnuj4] {
    opacity: 0.4;
}

/* ========== Legacy Button Styles (sidebar etc.) ========== */
.fluent-button[appearance="outline"][b-c1b9umnuj4] {
    font-weight: bold;
}

.fluent-button[appearance="accent"][b-c1b9umnuj4] {
    background-color: #C20004;
    color: #fff;
    border: none;
    font-weight: bold;
}

.fluent-button[appearance="accent"]:hover[b-c1b9umnuj4] {
    background: #a80003;
}

.save-btn[b-c1b9umnuj4] {
    background: #C20004;
    color: #fff;
    font-weight: bold;
    border-radius: 8px;
    min-width: 100px;
}

[b-c1b9umnuj4] .save-btn {
    background: #C20004 !important;
    color: #fff !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    min-width: 100px !important;
}

/* ========== Form Container (URL input etc.) ========== */
.form-container[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    margin-bottom: 24px;
    width: 100%;
}

.form-inner[b-c1b9umnuj4] {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 0 24px;
}

.form-box[b-c1b9umnuj4] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px 32px;
    width: 700px;
    max-width: 100vw;
    flex-wrap: wrap;
    border: 1px solid #f1f3f4;
}

.form-description[b-c1b9umnuj4] {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    color: #888;
    font-size: 0.8rem;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

.url-input[b-c1b9umnuj4] {
    width: 400px;
    font-size: 0.9rem;
}

/* ========== Product Image Container (old style, used by product image overlay) ========== */
.image-overlay[b-c1b9umnuj4] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.edit-prod-image:hover .image-overlay[b-c1b9umnuj4] {
    opacity: 1;
}

.edit-cat-image:hover .image-overlay[b-c1b9umnuj4] {
    opacity: 1;
}

/* Category image remove */
.category-image-remove-btn[b-c1b9umnuj4],
.product-image-remove-btn[b-c1b9umnuj4] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    border: 1.5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    padding: 0;
    color: white;
}

.category-image-remove-btn *[b-c1b9umnuj4],
.category-image-remove-btn svg[b-c1b9umnuj4],
.product-image-remove-btn *[b-c1b9umnuj4],
.product-image-remove-btn svg[b-c1b9umnuj4] {
    color: white !important;
    fill: white !important;
}

.category-image-remove-btn:hover[b-c1b9umnuj4],
.product-image-remove-btn:hover[b-c1b9umnuj4] {
    background: #dc3545;
    transform: scale(1.15);
}

/* Filter and nav buttons */
.filter-btn[b-c1b9umnuj4], .nav-actions button[b-c1b9umnuj4] {
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease;
}

.filter-btn:hover[b-c1b9umnuj4], .nav-actions button:hover[b-c1b9umnuj4] {
    background: #5a6268;
}

.header-actions[b-c1b9umnuj4] {
    display: flex;
    gap: 0.5rem;
}

.edit-btn[b-c1b9umnuj4] {
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Old add-category-btn (sidebar/other uses) */
.add-category-btn[b-c1b9umnuj4] {
    background: #28a745;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem 2rem;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem auto;
    transition: background-color 0.2s ease;
}

.add-category-btn:hover[b-c1b9umnuj4] {
    background: #218838;
}

/* ========== Product Name Container (suggestions wrapper) ========== */
.product-name-container[b-c1b9umnuj4] {
    position: relative;
    width: 100%;
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
    .editor-main[b-c1b9umnuj4] {
        flex: 1;
        min-height: 0;
    }
}

@media (max-width: 900px) {
    .menu-content-layout[b-c1b9umnuj4] {
        flex-direction: column;
    }

    .menu-content-layout > .menu-navigation[b-c1b9umnuj4] {
        flex: 0 0 auto;
        width: 100%;
        position: static;
        max-height: none;
    }

    .category-nav-tabs[b-c1b9umnuj4] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .category-tab[b-c1b9umnuj4] {
        width: auto;
    }

    .category-drop-placeholder[b-c1b9umnuj4] {
        width: auto;
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .compact-header-row[b-c1b9umnuj4] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .compact-media-group[b-c1b9umnuj4] {
        justify-content: flex-start;
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }

    /* Dar ekranda taban genişlik taşmaya yol açmasın. */
    .compact-title-input[b-c1b9umnuj4] {
        min-width: 0;
        font-size: 1.2rem;
    }

    .product-card.edit-prod-row[b-c1b9umnuj4] {
        gap: 8px;
        padding: 8px 10px;
    }

    .product-card.edit-prod-row .product-drag-handle[b-c1b9umnuj4] {
        display: none;
    }

    .edit-prod-price[b-c1b9umnuj4] {
        min-width: auto;
    }

    .edit-tax-select[b-c1b9umnuj4] {
        width: 60px;
        font-size: 12px;
    }

    .edit-actions-spacer[b-c1b9umnuj4] {
        display: none;
    }

    .edit-prod-actions-row[b-c1b9umnuj4] {
        gap: 2px;
    }

    .edit-cat-header[b-c1b9umnuj4] {
        gap: 6px;
        padding: 8px 10px;
    }

    .edit-categories-container[b-c1b9umnuj4] {
        padding: 10px 12px;
    }
}

/* ========== Menu Card (used elsewhere, keep) ========== */
.menu-card[b-c1b9umnuj4] {
    background: #FAFAFA;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: transform 0.2s ease;
    align-self: center;
}

.menu-card:hover[b-c1b9umnuj4] {
    transform: translateY(-1px);
}

.menu-card-header[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px 16px 0 0;
    padding: 1rem 2rem;
    background-color: var(--theme-primary, #C20004);
    color: var(--theme-secondary, #fff);
}

/* Input general */
input[b-c1b9umnuj4],
textarea[b-c1b9umnuj4] {
    word-break: break-word;
    white-space: normal;
}

/* Translations actions (under the language selector) */
.cm-lang-actions[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-2);
}

.cm-lang-link[b-c1b9umnuj4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--brand-600);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    flex: 1 1 auto;
    justify-content: center;
    text-decoration: none;
    transition: background-color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}
.cm-lang-link:hover[b-c1b9umnuj4] { background: var(--brand-50); border-color: var(--brand-600); }
.cm-lang-link[b-c1b9umnuj4]  svg { width: 15px; height: 15px; }

.cm-lang-refresh[b-c1b9umnuj4] { width: 32px; height: 32px; }
.cm-lang-refresh.is-busy[b-c1b9umnuj4]  svg { animation: cm-lang-spin-b-c1b9umnuj4 0.8s linear infinite; }

@keyframes cm-lang-spin-b-c1b9umnuj4 { to { transform: rotate(360deg); } }

/* Stok kaynağı seçici (chooser): ya reçete ya doğrudan stok */
.stocksrc[b-c1b9umnuj4] { display: flex; flex-direction: column; gap: 10px; }
.stocksrc-hint[b-c1b9umnuj4] { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ds-text-muted, #64748b); }
.stocksrc-choice[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 10px);
    background: var(--ds-surface, #fff);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.stocksrc-choice:hover[b-c1b9umnuj4] { border-color: var(--brand-600, #036ac4); background: rgba(3, 106, 196, 0.04); }
.stocksrc-choice.is-active[b-c1b9umnuj4] { border-color: var(--brand-600, #036ac4); box-shadow: inset 0 0 0 1px var(--brand-600, #036ac4); }
.stocksrc-choice-icon[b-c1b9umnuj4] { flex: 0 0 auto; color: var(--brand-600, #036ac4); display: inline-flex; }
.stocksrc-choice-body[b-c1b9umnuj4] { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.stocksrc-choice-title[b-c1b9umnuj4] { font-weight: 600; font-size: 0.9375rem; color: var(--ds-text, #0f172a); }
.stocksrc-choice-desc[b-c1b9umnuj4] { font-size: 0.75rem; line-height: 1.4; color: var(--ds-text-muted, #64748b); }
.stocksrc-choice-badge[b-c1b9umnuj4] { flex: 0 0 auto; font-size: 0.6875rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--brand-50, #e8f1fb); color: var(--brand-700, #024e90); }
.stocksrc-clear[b-c1b9umnuj4] { align-self: flex-start; border: none; background: transparent; color: var(--ds-danger, #dc2626); font-size: 0.8125rem; font-weight: 600; cursor: pointer; padding: 4px 6px; }

/* ===== Ürün görseli kaynak seçimi + kütüphane picker ===== */
.cm-imgsrc[b-c1b9umnuj4] {
    display: flex;
    gap: 12px;
    padding: 4px 2px;
}

.cm-imgsrc-opt[b-c1b9umnuj4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-sunken);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
}

.cm-imgsrc-opt:hover[b-c1b9umnuj4] {
    border-color: var(--brand-600);
    background: var(--ds-surface);
    transform: translateY(-2px);
}

.cm-imgsrc-opt:focus-visible[b-c1b9umnuj4] { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.cm-imgsrc-opt[b-c1b9umnuj4]  svg { fill: var(--brand-600); }

.cm-libpick[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cm-libpick-grid[b-c1b9umnuj4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    max-height: 56vh;
    overflow-y: auto;
    padding: 2px;
}

.cm-libpick-item[b-c1b9umnuj4] {
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    background: var(--ds-surface-sunken);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
}

.cm-libpick-item img[b-c1b9umnuj4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cm-libpick-item:hover[b-c1b9umnuj4] { border-color: var(--brand-600); transform: translateY(-2px); }
.cm-libpick-item:focus-visible[b-c1b9umnuj4] { outline: 2px solid var(--brand-600); outline-offset: 1px; }

.cm-libpick-empty[b-c1b9umnuj4] {
    grid-column: 1 / -1;
    margin: 0;
    padding: 30px 10px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--ds-text-subtle);
}

/* /Components/Pages/Menus/CustomerKiosk.razor.rz.scp.css */
/* ========================================
   Kiosk Container - Vertical Layout
   ======================================== */

.kiosk-container[b-i60t4vnl3h] {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #f8f9fa;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    position: relative;
}

.kiosk-screen[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: fadeIn-b-i60t4vnl3h 0.3s ease-in-out;
}

@keyframes fadeIn-b-i60t4vnl3h {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   Language Selection Screen
   ======================================== */

.language-screen[b-i60t4vnl3h] {
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.language-background-wrapper[b-i60t4vnl3h] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.language-background-image[b-i60t4vnl3h] {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.language-background-blur[b-i60t4vnl3h] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(102, 126, 234, 0.25);
}

.language-content[b-i60t4vnl3h] {
    text-align: center;
    color: white;
    max-width: 700px;
    padding: 60px;
    position: relative;
    z-index: 1;
}

.kiosk-logo-lg[b-i60t4vnl3h] {
    max-width: 180px;
    max-height: 180px;
    margin-bottom: 48px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

.kiosk-brand-lg[b-i60t4vnl3h] {
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 48px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.language-title[b-i60t4vnl3h] {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 48px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.language-options[b-i60t4vnl3h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.language-option[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.language-option:hover[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.language-option.selected[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.95);
    color: var(--theme-primary, #667eea);
    border-color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.language-flag[b-i60t4vnl3h] {
    font-size: 32px;
}

.language-name[b-i60t4vnl3h] {
    flex: 1;
    text-align: left;
}

.continue-button[b-i60t4vnl3h] {
    background: white;
    color: var(--theme-primary, #667eea);
    border: none;
    border-radius: 50px;
    padding: 20px 60px;
    font-size: 24px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.continue-button-text[b-i60t4vnl3h] {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.continue-button:hover:not(:disabled)[b-i60t4vnl3h] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.continue-button:disabled[b-i60t4vnl3h] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   Fixed Header
   ======================================== */

.kiosk-fixed-header[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    padding: 20px 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.header-content[b-i60t4vnl3h] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 24px;
}

.header-left[b-i60t4vnl3h] {
    justify-self: start;
}

.header-center[b-i60t4vnl3h] {
    text-align: center;
}

.header-right[b-i60t4vnl3h] {
    justify-self: end;
}

.header-logo[b-i60t4vnl3h] {
    height: 60px;
}

.header-brand[b-i60t4vnl3h] {
    font-size: 28px;
    font-weight: 800;
    color: white;
}

.header-title[b-i60t4vnl3h] {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.header-btn[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 12px 24px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.header-btn:hover[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Language Switcher */
.header-right[b-i60t4vnl3h] {
    position: relative;
}

.language-switcher-wrapper[b-i60t4vnl3h] {
    position: relative;
}

.language-switcher-btn[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 10px 16px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.language-switcher-btn:hover[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.language-flag-small[b-i60t4vnl3h] {
    font-size: 24px;
    line-height: 1;
}

.language-dropdown[b-i60t4vnl3h] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    min-width: 200px;
    z-index: 1000;
    animation: dropdownSlide-b-i60t4vnl3h 0.2s ease-out;
}

@keyframes dropdownSlide-b-i60t4vnl3h {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.language-dropdown-item[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    width: 100%;
    border: none;
    background: white;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.language-dropdown-item:hover[b-i60t4vnl3h] {
    background: #f5f5f5;
}

.language-dropdown-item.selected[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.1);
    color: var(--theme-primary, #667eea);
}

/* ========================================
   Category Selection Grid
   ======================================== */

.category-grid-container[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
}

.category-grid[b-i60t4vnl3h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.category-card[b-i60t4vnl3h] {
    background: white;
    border: none;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.category-card:hover[b-i60t4vnl3h] {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.category-image-wrapper[b-i60t4vnl3h] {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
}

.category-image[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-image-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.category-info[b-i60t4vnl3h] {
    padding: 20px;
    text-align: center;
}

.category-name[b-i60t4vnl3h] {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.category-count[b-i60t4vnl3h] {
    font-size: 14px;
    color: #666;
}

/* ========================================
   Horizontal Category Slider (KFC Style)
   ======================================== */

.category-slider-container[b-i60t4vnl3h] {
    background: white;
    border-bottom: 2px solid #e0e0e0;
    padding: 16px 24px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-slider[b-i60t4vnl3h] {
    display: flex;
    gap: 12px;
    min-width: min-content;
}

.category-pill[b-i60t4vnl3h] {
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-pill:hover[b-i60t4vnl3h] {
    background: #e8e8e8;
    transform: translateY(-2px);
}

.category-pill.active[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border-color: var(--theme-primary, #667eea);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.3);
}

.category-pill.active .category-pill-name[b-i60t4vnl3h] {
    color: white;
}

.category-pill-image[b-i60t4vnl3h] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.category-pill-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-pill-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
}

.category-pill-name[b-i60t4vnl3h] {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    transition: color 0.3s ease;
}

/* ========================================
   Product List Grid
   ======================================== */

.products-grid-container[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    padding-bottom: 140px; /* Space for floating bottom bar */
}

/* When sidebar cart is active - default on right side */
.products-grid-with-sidebar-cart[b-i60t4vnl3h] {
    padding-right: 420px !important; /* 380px sidebar width + 40px margin */
    padding-bottom: 40px !important; /* No floating bar when sidebar cart is active */
}

/* When sidebar cart is on the left (category sidebar is on left, cart goes right) */
.sidebar-left ~ .products-grid-with-sidebar-cart[b-i60t4vnl3h] {
    padding-left: 420px !important;
    padding-right: 32px !important;
}

.products-grid-kiosk[b-i60t4vnl3h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.product-card-kiosk[b-i60t4vnl3h] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card-kiosk:hover[b-i60t4vnl3h] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.product-card-kiosk:active[b-i60t4vnl3h] {
    transform: translateY(-2px);
}

.product-image-section[b-i60t4vnl3h] {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f8f8f8;
}

.product-image-kiosk[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card-kiosk:hover .product-image-kiosk[b-i60t4vnl3h] {
    transform: scale(1.05);
}

.product-image-placeholder-kiosk[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.product-details-section[b-i60t4vnl3h] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-info-kiosk[b-i60t4vnl3h] {
    flex: 1;
}

.product-name-kiosk[b-i60t4vnl3h] {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.product-desc-kiosk[b-i60t4vnl3h] {
    font-size: 14px;
    color: #666;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price-kiosk[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 800;
    color: var(--theme-primary, #667eea);
}

.product-add-indicator[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f0f4ff;
    border-radius: 12px;
    color: #667eea;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.product-quantity-controls[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #f8f8f8;
    border-radius: 12px;
    padding: 8px 16px;
}

.qty-ctrl-btn[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qty-ctrl-btn:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: scale(1.1);
}

.qty-display[b-i60t4vnl3h] {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    min-width: 40px;
    text-align: center;
}

.product-add-button[b-i60t4vnl3h] {
    background: #667eea;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-add-button:hover[b-i60t4vnl3h] {
    background: #5568d3;
    transform: translateY(-2px);
}

/* ========================================
   Floating Cart Summary (Category Screen)
   ======================================== */

.floating-cart-summary[b-i60t4vnl3h] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    left: 24px;
    max-width: 500px;
    margin: 0 auto;
    background: var(--theme-primary, #667eea);
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: 0 8px 32px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}

.floating-cart-summary:hover[b-i60t4vnl3h] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.5);
}

.cart-summary-content[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: white;
}

.cart-summary-icon[b-i60t4vnl3h] {
    position: relative;
}

.cart-badge[b-i60t4vnl3h] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4757;
    color: white;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.cart-summary-details[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-summary-label[b-i60t4vnl3h] {
    font-size: 14px;
    opacity: 0.9;
}

.cart-summary-price[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 800;
}

/* ========================================
   Floating Bottom Bar (Product Screen)
   ======================================== */

.floating-bottom-bar[b-i60t4vnl3h] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 20px 32px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: stretch;
    z-index: 100;
}

.cancel-btn-bottom[b-i60t4vnl3h] {
    background: white;
    border: 3px solid #dc2626;
    border-radius: 20px;
    padding: 20px;
    color: #dc2626;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.cancel-btn-bottom:hover[b-i60t4vnl3h] {
    background: #dc2626;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
}

.cancel-btn-bottom:active[b-i60t4vnl3h] {
    transform: translateY(-1px);
}

.cart-summary-bottom[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 20px;
    padding: 20px 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.3);
}

.cart-summary-bottom:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.45);
}

.cart-summary-bottom:active[b-i60t4vnl3h] {
    transform: translateY(-1px);
}

.cart-summary-bottom .cart-summary-content[b-i60t4vnl3h] {
    justify-content: space-between;
}

.cart-summary-bottom .cart-summary-label[b-i60t4vnl3h] {
    font-size: 16px;
}

.cart-summary-bottom .cart-summary-price[b-i60t4vnl3h] {
    font-size: 22px;
    font-weight: 800;
}

.cart-placeholder-bottom[b-i60t4vnl3h] {
    background: #f5f5f5;
    border: 3px dashed #d0d0d0;
    border-radius: 20px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #999;
    font-size: 18px;
    font-weight: 600;
}

/* ========================================
   Cart Screen
   ======================================== */

.cart-content-area[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cart-items-section[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-item-card[b-i60t4vnl3h] {
    background: white;
    border-radius: 16px;
    padding: 16px;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cart-item-image[b-i60t4vnl3h] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.cart-item-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
}

.cart-item-details[b-i60t4vnl3h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-item-name[b-i60t4vnl3h] {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.cart-item-price[b-i60t4vnl3h] {
    font-size: 14px;
    color: #666;
}

.cart-item-controls[b-i60t4vnl3h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.cart-item-quantity[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8f8f8;
    border-radius: 10px;
    padding: 8px 12px;
}

.qty-btn-cart[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qty-btn-cart:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: scale(1.1);
}

.qty-text[b-i60t4vnl3h] {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    min-width: 32px;
    text-align: center;
}

.cart-item-total[b-i60t4vnl3h] {
    font-size: 22px;
    font-weight: 800;
    color: var(--theme-primary, #667eea);
}

.cart-summary-section[b-i60t4vnl3h] {
    background: white;
    padding: 24px 32px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.summary-row[b-i60t4vnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    color: #666;
    margin-bottom: 12px;
}

.summary-row.summary-total[b-i60t4vnl3h] {
    font-size: 28px;
    font-weight: 800;
    color: #333;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 2px solid #e0e0e0;
}

.summary-value[b-i60t4vnl3h] {
    font-weight: 600;
    color: #333;
}

.summary-value-total[b-i60t4vnl3h] {
    font-weight: 800;
    color: var(--theme-primary, #667eea);
}

.checkout-button[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 16px;
    padding: 20px 40px;
    color: white;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 16px;
}

.checkout-button:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
}

/* ========================================
   Payment Screen
   ======================================== */

.payment-content-area[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.payment-methods-grid[b-i60t4vnl3h] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.payment-method-card[b-i60t4vnl3h] {
    background: white;
    border: 3px solid #e0e0e0;
    border-radius: 24px;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-method-card:hover[b-i60t4vnl3h] {
    border-color: var(--theme-primary, #667eea);
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.payment-method-title[b-i60t4vnl3h] {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.payment-method-subtitle[b-i60t4vnl3h] {
    font-size: 14px;
    color: #666;
}

.payment-total-display[b-i60t4vnl3h] {
    background: white;
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 400px;
    margin: 0 auto;
}

.payment-total-label[b-i60t4vnl3h] {
    font-size: 18px;
    color: #666;
    display: block;
    margin-bottom: 12px;
}

.payment-total-amount[b-i60t4vnl3h] {
    font-size: 48px;
    font-weight: 800;
    color: var(--theme-primary, #667eea);
}

/* ========================================
   Payment Processing Screen
   ======================================== */

.payment-processing-screen[b-i60t4vnl3h] {
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.processing-content-with-summary[b-i60t4vnl3h] {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    align-items: center;
    justify-content: center;
}

.order-summary-card[b-i60t4vnl3h] {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    min-width: 350px;
    max-width: 400px;
    max-height: 600px;
    display: flex;
    flex-direction: column;
}

.order-summary-header[b-i60t4vnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e0e0e0;
    flex-shrink: 0;
}

.order-summary-header h3[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.order-item-count[b-i60t4vnl3h] {
    font-size: 14px;
    color: #666;
    background: #f0f0f0;
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: 600;
}

.order-summary-items[b-i60t4vnl3h] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    min-height: 0;
}

.order-summary-item[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 12px;
}

.order-summary-item-image[b-i60t4vnl3h] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.order-summary-item-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-summary-item-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
}

.order-summary-item-details[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-summary-item-name[b-i60t4vnl3h] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.order-summary-item-qty[b-i60t4vnl3h] {
    font-size: 12px;
    color: #666;
}

.order-summary-item-price[b-i60t4vnl3h] {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-primary, #667eea);
}

.order-summary-total[b-i60t4vnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 2px solid #e0e0e0;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.order-summary-total-price[b-i60t4vnl3h] {
    color: var(--theme-primary, #667eea);
    font-size: 24px;
}

.processing-content[b-i60t4vnl3h] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    flex: 1;
}

.processing-content h2[b-i60t4vnl3h] {
    font-size: 36px;
    font-weight: 700;
    color: #333;
}

.processing-instruction[b-i60t4vnl3h] {
    font-size: 20px;
    color: #666;
}

.processing-animation[b-i60t4vnl3h] {
    margin: 24px 0;
}

.amount-display-box[b-i60t4vnl3h] {
    background: #f8f8f8;
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.amount-label[b-i60t4vnl3h] {
    font-size: 18px;
    color: #666;
}

.amount-value[b-i60t4vnl3h] {
    font-size: 48px;
    font-weight: 800;
    color: var(--theme-primary, #667eea);
}

.qr-display-box[b-i60t4vnl3h] {
    width: 280px;
    height: 280px;
    background: white;
    border: 4px solid #e0e0e0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-pattern[b-i60t4vnl3h] {
    width: 240px;
    height: 240px;
    background:
        linear-gradient(90deg, #333 10%, transparent 10%),
        linear-gradient(#333 10%, transparent 10%);
    background-size: 24px 24px;
}

.code-input-container[b-i60t4vnl3h] {
    width: 100%;
    max-width: 400px;
}

.code-input-field[b-i60t4vnl3h] {
    width: 100%;
    padding: 24px;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    border: 3px solid #e0e0e0;
    border-radius: 16px;
    letter-spacing: 16px;
    font-family: 'Courier New', monospace;
}

.code-input-field:focus[b-i60t4vnl3h] {
    outline: none;
    border-color: var(--theme-primary, #667eea);
}

/* ========================================
   Order Complete Screen - Redesigned
   ======================================== */

.order-complete-screen[b-i60t4vnl3h] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Success Celebration Background */
.success-celebration[b-i60t4vnl3h] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.celebration-circle[b-i60t4vnl3h] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: expandCircle-b-i60t4vnl3h 3s ease-out infinite;
}

.circle-1[b-i60t4vnl3h] {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -150px;
    animation-delay: 0s;
}

.circle-2[b-i60t4vnl3h] {
    width: 400px;
    height: 400px;
    bottom: -200px;
    right: -200px;
    animation-delay: 1s;
}

.circle-3[b-i60t4vnl3h] {
    width: 250px;
    height: 250px;
    top: 50%;
    left: -125px;
    animation-delay: 2s;
}

@keyframes expandCircle-b-i60t4vnl3h {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Confetti Animation */
.confetti[b-i60t4vnl3h] {
    position: absolute;
    font-size: 48px;
    animation: confettiFall-b-i60t4vnl3h 4s ease-out infinite;
    opacity: 0;
}

.confetti-1[b-i60t4vnl3h] { top: -10%; left: 10%; animation-delay: 0.1s; }
.confetti-2[b-i60t4vnl3h] { top: -10%; left: 30%; animation-delay: 0.3s; }
.confetti-3[b-i60t4vnl3h] { top: -10%; left: 50%; animation-delay: 0.5s; }
.confetti-4[b-i60t4vnl3h] { top: -10%; left: 70%; animation-delay: 0.7s; }
.confetti-5[b-i60t4vnl3h] { top: -10%; left: 90%; animation-delay: 0.9s; }
.confetti-6[b-i60t4vnl3h] { top: -10%; left: 60%; animation-delay: 1.1s; }

@keyframes confettiFall-b-i60t4vnl3h {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(120vh) rotate(360deg);
        opacity: 0;
    }
}

/* Main Content Container */
.complete-content[b-i60t4vnl3h] {
    text-align: center;
    color: white;
    max-width: 700px;
    padding: 60px 40px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

/* Success Icon Wrapper */
.success-icon-wrapper[b-i60t4vnl3h] {
    position: relative;
    margin-bottom: 20px;
}

.success-icon-bg[b-i60t4vnl3h] {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: successPulse-b-i60t4vnl3h 2s ease-in-out infinite;
}

@keyframes successPulse-b-i60t4vnl3h {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.1;
    }
}

.success-icon-lg[b-i60t4vnl3h] {
    position: relative;
    animation: iconBounce-b-i60t4vnl3h 0.8s ease-out;
}

@keyframes iconBounce-b-i60t4vnl3h {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Success Message */
.success-message[b-i60t4vnl3h] {
    animation: fadeInUp-b-i60t4vnl3h 0.8s ease-out 0.3s both;
}

.complete-title[b-i60t4vnl3h] {
    font-size: 56px;
    font-weight: 900;
    margin: 0 0 12px 0;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    letter-spacing: -1px;
}

.complete-subtitle[b-i60t4vnl3h] {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    opacity: 0.95;
}

/* Order Number Container */
.order-number-container[b-i60t4vnl3h] {
    width: 100%;
    animation: fadeInUp-b-i60t4vnl3h 0.8s ease-out 0.5s both;
}

.order-number-card[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.order-number-header[b-i60t4vnl3h] {
    margin-bottom: 16px;
}

.order-label[b-i60t4vnl3h] {
    font-size: 18px;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.order-number-main[b-i60t4vnl3h] {
    margin: 24px 0;
}

.order-number-display[b-i60t4vnl3h] {
    font-size: 120px;
    font-weight: 900;
    font-family: 'Courier New', monospace;
    line-height: 1;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    display: inline-block;
    animation: numberPop-b-i60t4vnl3h 0.6s ease-out 0.7s both;
}

@keyframes numberPop-b-i60t4vnl3h {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.order-number-subtext[b-i60t4vnl3h] {
    margin-top: 16px;
}

.order-number-subtext span[b-i60t4vnl3h] {
    font-size: 16px;
    opacity: 0.85;
    font-weight: 500;
}

/* Receipt Details Card */
.receipt-details-card[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 16px 32px;
    border-radius: 20px;
    animation: fadeInUp-b-i60t4vnl3h 0.8s ease-out 0.7s both;
}

/* Order Instructions Card */
.order-instructions-card[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    animation: fadeInUp-b-i60t4vnl3h 0.8s ease-out 0.9s both;
}

.instruction-icon[b-i60t4vnl3h] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instruction-content[b-i60t4vnl3h] {
    flex: 1;
    text-align: left;
}

.instruction-main[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.instruction-secondary[b-i60t4vnl3h] {
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
}

.cash-payment-notice[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 12px;
}

/* New Order Button */
.btn-new-order[b-i60t4vnl3h] {
    background: white;
    color: var(--theme-primary, #11998e);
    border: none;
    border-radius: 60px;
    padding: 20px 48px;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    animation: fadeInUp-b-i60t4vnl3h 0.8s ease-out 1.1s both;
}

.btn-new-order:hover[b-i60t4vnl3h] {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.btn-new-order:active[b-i60t4vnl3h] {
    transform: translateY(-2px) scale(1.02);
}

@keyframes fadeInUp-b-i60t4vnl3h {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Error Screen
   ======================================== */

.error-screen[b-i60t4vnl3h] {
    background: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    justify-content: center;
    align-items: center;
}

.error-content[b-i60t4vnl3h] {
    text-align: center;
    color: white;
    max-width: 600px;
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.error-content h2[b-i60t4vnl3h] {
    font-size: 42px;
    font-weight: 700;
}

.error-content p[b-i60t4vnl3h] {
    font-size: 20px;
    opacity: 0.95;
}

/* ========================================
   Empty State
   ======================================== */

.empty-state[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    padding: 60px;
}

.empty-state h3[b-i60t4vnl3h] {
    font-size: 32px;
    font-weight: 700;
    color: #333;
}

.empty-state p[b-i60t4vnl3h] {
    font-size: 18px;
    color: #666;
}

/* ========================================
   Common Buttons
   ======================================== */

.btn-primary-lg[b-i60t4vnl3h],
.btn-secondary-lg[b-i60t4vnl3h],
.btn-cancel-lg[b-i60t4vnl3h] {
    border: none;
    border-radius: 50px;
    padding: 20px 60px;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-primary-lg[b-i60t4vnl3h] {
    background: white;
    color: #667eea;
}

.btn-primary-lg:hover:not(:disabled)[b-i60t4vnl3h] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-primary-lg:disabled[b-i60t4vnl3h] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary-lg[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary-lg:hover[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-cancel-lg[b-i60t4vnl3h] {
    background: #ff4757;
    color: white;
    margin-top: 24px;
}

.btn-cancel-lg:hover[b-i60t4vnl3h] {
    background: #ff3838;
    transform: translateY(-2px);
}

/* ========================================
   Idle Warning Overlay
   ======================================== */

.idle-overlay[b-i60t4vnl3h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-i60t4vnl3h 0.3s ease-in-out;
}

.idle-dialog[b-i60t4vnl3h] {
    background: white;
    border-radius: 32px;
    padding: 60px;
    max-width: 500px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.idle-dialog h3[b-i60t4vnl3h] {
    font-size: 32px;
    font-weight: 700;
    color: #333;
}

.idle-dialog p[b-i60t4vnl3h] {
    font-size: 18px;
    color: #666;
}

.idle-timer[b-i60t4vnl3h] {
    font-size: 64px;
    font-weight: 800;
    color: #ff4757;
    font-family: 'Courier New', monospace;
}

/* ========================================
   Scrollbar Customization
   ======================================== */

*[b-i60t4vnl3h] {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

*[b-i60t4vnl3h]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*[b-i60t4vnl3h]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

*[b-i60t4vnl3h]::-webkit-scrollbar-track {
    background: transparent;
}

/* ========================================
   Category Position Layouts
   ======================================== */

/* Sidebar Layout (Left/Right) */
.content-with-sidebar[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.content-with-sidebar.sidebar-left[b-i60t4vnl3h] {
    flex-direction: row;
}

.content-with-sidebar.sidebar-right[b-i60t4vnl3h] {
    flex-direction: row-reverse;
}

.category-sidebar[b-i60t4vnl3h] {
    width: 220px;
    background: white;
    border-right: 2px solid #e0e0e0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    overflow: hidden;
}

.content-with-sidebar.sidebar-right .category-sidebar[b-i60t4vnl3h] {
    border-right: none;
    border-left: 2px solid #e0e0e0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
}

.category-sidebar-inner[b-i60t4vnl3h] {
    height: 100%;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-sidebar-item[b-i60t4vnl3h] {
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.category-sidebar-item:hover[b-i60t4vnl3h] {
    background: #e8e8e8;
    transform: translateX(4px);
}

.content-with-sidebar.sidebar-right .category-sidebar-item:hover[b-i60t4vnl3h] {
    transform: translateX(-4px);
}

.category-sidebar-item.active[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border-color: var(--theme-primary, #667eea);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.3);
}

.category-sidebar-item.active .category-sidebar-name[b-i60t4vnl3h] {
    color: white;
}

.category-sidebar-image[b-i60t4vnl3h] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.category-sidebar-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-sidebar-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
}

.category-sidebar-name[b-i60t4vnl3h] {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-align: center;
    transition: color 0.3s ease;
    word-break: break-word;
}

.products-grid-container-sidebar[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    padding-bottom: 140px; /* Space for floating bottom bar */
}

.products-grid-container-sidebar.products-grid-with-sidebar-cart[b-i60t4vnl3h] {
    padding-right: 420px; /* 380px sidebar width + 40px margin */
    padding-bottom: 40px; /* No floating bar when sidebar cart is active */
}

/* Bottom Category Slider */
.category-slider-bottom[b-i60t4vnl3h] {
    bottom: 120px; /* Above the floating bottom bar */
    left: 0;
    right: 0;
    z-index: 99;
    margin-bottom: 0;
    padding: 20px 24px;
    background: white;
    border-top: 2px solid #e0e0e0;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.products-grid-container-with-bottom-slider[b-i60t4vnl3h] {
    padding-bottom: 280px; /* Extra space for category slider + bottom bar */
}

/* When sidebar cart is active with bottom categories, no floating bar exists */
.products-grid-container-with-bottom-slider.products-grid-with-sidebar-cart[b-i60t4vnl3h] {
    padding-bottom: 180px !important; /* Only space for category slider */
}

/* Adjust category slider position when sidebar cart is active */
.category-slider-bottom.category-slider-with-sidebar-cart[b-i60t4vnl3h] {
    bottom: 0 !important; /* No floating bar, slider goes to bottom */
}

/* ========================================
   Confirmation Dialog
   ======================================== */

.confirm-overlay[b-i60t4vnl3h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-i60t4vnl3h 0.3s ease-in-out;
}

.confirm-dialog[b-i60t4vnl3h] {
    background: white;
    border-radius: 32px;
    padding: 48px;
    max-width: 550px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-i60t4vnl3h 0.4s ease-out;
}

.confirm-dialog h3[b-i60t4vnl3h] {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.confirm-dialog p[b-i60t4vnl3h] {
    font-size: 18px;
    color: #666;
    margin: 0;
}

.confirm-buttons[b-i60t4vnl3h] {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-top: 12px;
}

.btn-confirm-yes[b-i60t4vnl3h],
.btn-confirm-no[b-i60t4vnl3h] {
    flex: 1;
    border: none;
    border-radius: 16px;
    padding: 18px 32px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-confirm-yes[b-i60t4vnl3h] {
    background: #dc2626;
    color: white;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-confirm-yes:hover[b-i60t4vnl3h] {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
}

.btn-confirm-no[b-i60t4vnl3h] {
    background: #f5f5f5;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-confirm-no:hover[b-i60t4vnl3h] {
    background: #e8e8e8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ========================================
   Sidebar Cart (Always Visible)
   ======================================== */

.sidebar-cart[b-i60t4vnl3h] {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 380px;
    background: white;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.15);
    z-index: 1001; /* Above other elements */
    display: flex;
    flex-direction: column;
    animation: slideInFromSide-b-i60t4vnl3h 0.4s ease-out;
}

.sidebar-cart-left[b-i60t4vnl3h] {
    left: 0;
    border-right: 2px solid #e0e0e0;
}

.sidebar-cart-right[b-i60t4vnl3h] {
    right: 0;
    border-left: 2px solid #e0e0e0;
}

@keyframes slideInFromSide-b-i60t4vnl3h {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.sidebar-cart-header[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.sidebar-cart-header h3[b-i60t4vnl3h] {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.sidebar-cart-badge[b-i60t4vnl3h] {
    background: #ff4757;
    color: white;
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
}

.sidebar-cart-items[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-cart-item[b-i60t4vnl3h] {
    background: #f8f8f8;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-cart-item-image[b-i60t4vnl3h] {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.sidebar-cart-item-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-cart-item-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
}

.sidebar-cart-item-info[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sidebar-cart-item-name[b-i60t4vnl3h] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-cart-item-price[b-i60t4vnl3h] {
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-primary, #667eea);
}

.sidebar-cart-item-controls[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border-radius: 10px;
    padding: 6px 10px;
    flex-shrink: 0;
}

.sidebar-qty-btn[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-qty-btn:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: scale(1.1);
}

.sidebar-qty-display[b-i60t4vnl3h] {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    min-width: 24px;
    text-align: center;
}

.sidebar-cart-empty[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #999;
    padding: 40px 24px;
}

.sidebar-cart-empty span[b-i60t4vnl3h] {
    font-size: 18px;
    font-weight: 600;
}

.sidebar-cart-footer[b-i60t4vnl3h] {
    background: white;
    padding: 20px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.sidebar-cart-total[b-i60t4vnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f8f8f8;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.sidebar-cart-total-price[b-i60t4vnl3h] {
    color: var(--theme-primary, #667eea);
    font-size: 24px;
}

.sidebar-cart-actions[b-i60t4vnl3h] {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.sidebar-cart-cancel[b-i60t4vnl3h] {
    background: white;
    border: 2px solid #dc2626;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-cart-cancel:hover[b-i60t4vnl3h] {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.sidebar-cart-cancel:hover fluent-icon[b-i60t4vnl3h] {
    color: white;
}

.sidebar-cart-checkout[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 14px;
    padding: 16px 24px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
}

.sidebar-cart-checkout:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
}

/* ========================================
   Popup Cart (Toggle Overlay)
   ======================================== */

.popup-cart-overlay[b-i60t4vnl3h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-i60t4vnl3h 0.3s ease-in-out;
}

.popup-cart-container[b-i60t4vnl3h] {
    background: white;
    border-radius: 32px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn-b-i60t4vnl3h 0.4s ease-out;
}

@keyframes popupSlideIn-b-i60t4vnl3h {
    from {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.popup-cart-header[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    padding: 24px;
    border-radius: 32px 32px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.popup-cart-header h3[b-i60t4vnl3h] {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.popup-cart-close[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.popup-cart-close:hover[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.popup-cart-items[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.popup-cart-item[b-i60t4vnl3h] {
    background: #f8f8f8;
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.popup-cart-item-image[b-i60t4vnl3h] {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.popup-cart-item-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-cart-item-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
}

.popup-cart-item-info[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.popup-cart-item-name[b-i60t4vnl3h] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.popup-cart-item-price[b-i60t4vnl3h] {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-primary, #667eea);
}

.popup-cart-item-controls[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border-radius: 12px;
    padding: 8px 12px;
    flex-shrink: 0;
}

.popup-qty-btn[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.popup-qty-btn:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: scale(1.1);
}

.popup-qty-display[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    min-width: 32px;
    text-align: center;
}

.popup-cart-empty[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #999;
    padding: 60px 24px;
}

.popup-cart-empty span[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 600;
}

.popup-cart-footer[b-i60t4vnl3h] {
    background: white;
    padding: 24px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    border-radius: 0 0 32px 32px;
}

.popup-cart-total[b-i60t4vnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 16px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.popup-cart-total-price[b-i60t4vnl3h] {
    color: var(--theme-primary, #667eea);
    font-size: 28px;
}

.popup-cart-checkout[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 16px;
    padding: 20px 32px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.popup-cart-checkout:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
    .category-grid[b-i60t4vnl3h] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 20px;
    }

    .products-grid-kiosk[b-i60t4vnl3h] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .payment-methods-grid[b-i60t4vnl3h] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .processing-content-with-summary[b-i60t4vnl3h] {
        flex-direction: column;
    }

    .order-summary-card[b-i60t4vnl3h] {
        min-width: 100%;
        max-width: 100%;
    }

    .language-options[b-i60t4vnl3h] {
        grid-template-columns: 1fr;
    }

    .header-content[b-i60t4vnl3h] {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
    }

    .header-title[b-i60t4vnl3h] {
        font-size: 24px;
    }

    .floating-cart-summary[b-i60t4vnl3h] {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
}

/* ========================================
   Animations
   ======================================== */

@keyframes slideUp-b-i60t4vnl3h {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse-b-i60t4vnl3h {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.kiosk-screen > *[b-i60t4vnl3h] {
    animation: slideUp-b-i60t4vnl3h 0.4s ease-out;
}
/* /Components/Pages/Menus/CustomerMenuPreview.razor.rz.scp.css */
/* =====================================================================
   Customer Menu Preview — Adisyon design-system implementation.

   All chrome consumes the global tokens defined in wwwroot/app.css:
     --brand-* / --slate-* / --ds-surface*/text*/border*/shadow*/radius*/
     space*/font*/ease/dur

   Per-menu `--primary-color` (injected from menu.Customization) overrides
   the brand accent on CTAs[b-d3gsfb4qfc], the active chip[b-d3gsfb4qfc], price values[b-d3gsfb4qfc], and the floating
   cart. When unset[b-d3gsfb4qfc], --brand-600 is the fallback so the shell still feels
   like the Adisyon system.

   Typography:
     • Sora for display (restaurant title, category title) — design-system rule
     • Inter for UI (everything else)
     • Damion is reserved for the wordmark and not used here

   Layout principles:
     • 16px card radius[b-d3gsfb4qfc], 12px on inner controls[b-d3gsfb4qfc], pill on chips
     • Layered low-contrast shadows (ds-shadow-1/2/3) — no gradients
     • Mobile-first; >=769px tablet/desktop overrides
     • Restrained motion: ds-ease[b-d3gsfb4qfc], ds-dur (200ms default)
   ===================================================================== */

/* ---------- Customer-menu scoped accent (uses brand fallback) ----------
   IMPORTANT: --accent is defined on .menu-builder (NOT .menu-editor-container)
   because the inline `--primary-color: <hex>` lives on .menu-builder via
   GetPreviewStyles(). CSS custom properties are computed (var()s resolved)
   at the element where they're declared — if we declared --accent up on
   .menu-editor-container, --primary-color isn't in scope there yet and
   --accent would freeze to the brand-600 fallback for the whole subtree,
   which is exactly the bug that made the floating cart blue on an olive
   menu. Declaring it on .menu-builder evaluates --accent in the same scope
   that defines --primary-color, so the menu's brand reaches every
   descendant — including the fixed-position floating cart. */
.menu-builder[b-d3gsfb4qfc] {
    --accent: var(--primary-color, var(--brand-600, #036ac4));
}

/* =====================================================================
   Shell
   ===================================================================== */
.customer-loading[b-d3gsfb4qfc] {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: transparent;
}

.loading-container[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: var(--ds-surface-alt);
    gap: var(--ds-space-4);
}

.customer-error[b-d3gsfb4qfc] {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-6) var(--ds-space-4);
    color: var(--ds-text);
    text-align: center;
}

.customer-error h2[b-d3gsfb4qfc] {
    font-family: var(--ds-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.customer-error p[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    color: var(--ds-text-muted);
    margin: 0;
}

.error-icon[b-d3gsfb4qfc] { color: var(--ds-text-subtle); }

.menu-editor-container[b-d3gsfb4qfc] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ds-surface-alt);
    font-family: var(--ds-font-ui);
    color: var(--ds-text);
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
}

.editor-main.preview-main[b-d3gsfb4qfc] {
    flex: 1;
    background: var(--ds-surface);
}

.menu-builder[b-d3gsfb4qfc] {
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--ds-surface);
}

/* =====================================================================
   Hero
   ===================================================================== */
.restaurant-header[b-d3gsfb4qfc] { position: relative; }

.hero-section[b-d3gsfb4qfc] {
    position: relative;
    min-height: 135px;
    padding-bottom: 36px;          /* room for the overlapping nav card */
    display: flex;
    flex-direction: column;
    background: var(--accent);
}

.hero-overlay[b-d3gsfb4qfc] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    z-index: 1;
}

/* When store photos are the hero backdrop, give the band more room so the
   rotating gallery reads, and replace the flat scrim with a soft top→bottom
   gradient — a light shadow over the photos that keeps the title/address
   (anchored low in the hero) legible over any image. */
.hero-section--has-photos[b-d3gsfb4qfc] {
    min-height: 240px;
}

.hero-section--has-photos .hero-overlay[b-d3gsfb4qfc] {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.30) 0%,
        rgba(15, 23, 42, 0.18) 35%,
        rgba(15, 23, 42, 0.58) 100%
    );
}

.hero-content[b-d3gsfb4qfc] {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--slate-0);
}

/* Top bar — actions only now; logo lives inside the title section. */
.header-top-bar[b-d3gsfb4qfc] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--ds-space-3) var(--ds-space-3) 0;
    gap: var(--ds-space-2);
    flex-wrap: nowrap;
}

.logo-section[b-d3gsfb4qfc] { display: none; }   /* legacy slot — kept for backward CSS, hidden */
.logo-container[b-d3gsfb4qfc] { display: flex; align-items: center; overflow: hidden; }

/* Inline logo lives next to the restaurant title, larger. */
.restaurant-title-logo[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.restaurant-logo--inline[b-d3gsfb4qfc] {
    width: 52px;
    height: 52px;
    max-width: 52px;
    border-radius: var(--ds-radius-md);
    object-fit: cover;
    background: rgba(255, 255, 255, 0.16);
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.restaurant-logo[b-d3gsfb4qfc] {
    width: auto;
    height: 40px;
    max-width: 120px;
    border-radius: var(--ds-radius-sm);
    object-fit: contain;
    background: rgba(255, 255, 255, 0.12);
    padding: var(--ds-space-1);
}

.logo-upload-placeholder.disabled[b-d3gsfb4qfc],
.banner-upload-placeholder.disabled[b-d3gsfb4qfc] { display: none; }

/* Header glass chips (phone / info / language) */
.header-actions[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}

.working-hours-display[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.16) !important;
    color: var(--slate-0) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: var(--ds-radius-sm) !important;
    backdrop-filter: blur(8px);
    padding: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease);
    box-shadow: none;
}

a.working-hours-display[b-d3gsfb4qfc] { text-decoration: none; }
.working-hours-display:hover[b-d3gsfb4qfc] { background: rgba(255, 255, 255, 0.26) !important; }

.working-hours-content[b-d3gsfb4qfc],
.working-hours-label[b-d3gsfb4qfc],
.working-hours-text[b-d3gsfb4qfc] { display: none; }

.hero-buttons[b-d3gsfb4qfc] { display: flex; gap: 6px; }

.hero-info-btn[b-d3gsfb4qfc] {
    background: rgba(255, 255, 255, 0.16) !important;
    color: var(--slate-0) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    padding: 6px 12px !important;
    border-radius: var(--ds-radius-sm) !important;
    font-family: var(--ds-font-ui) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    backdrop-filter: blur(8px);
}

/* Title block. On mobile it is a vertically-centered stack in the middle of the
   banner: logo on top, then menu name, then address — all centered. (Desktop
   restores the side-by-side logo+name row below.) */
.title-section[b-d3gsfb4qfc] {
    margin: auto 0;
    padding: 0 var(--ds-space-3);
    text-align: center;
}

.restaurant-title-container[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-2);
}

.restaurant-title-text[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    align-items: center;     /* mobil: başlık + alt çizgi ortalı (masaüstünde sola alınır) */
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.restaurant-title.readonly[b-d3gsfb4qfc] {
    font-family: var(--ds-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--slate-0);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.title-underline[b-d3gsfb4qfc] {
    height: 2px;
    width: 36px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
}

/* Hero address */
.hero-address-section[b-d3gsfb4qfc] { margin-top: var(--ds-space-2); }

/* Google reviews — rating badge + two explicit action buttons, in the hero under the address. */
.hero-reviews[b-d3gsfb4qfc] {
    margin-top: var(--ds-space-2);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.hero-rating[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.hero-rating__g[b-d3gsfb4qfc] { display: inline-flex; }
.hero-rating__g svg[b-d3gsfb4qfc] { display: block; }
.hero-rating__score[b-d3gsfb4qfc] { font-weight: 800; }
.hero-rating__stars[b-d3gsfb4qfc] { display: inline-flex; color: #fbbc05; }
.hero-rating__stars svg[b-d3gsfb4qfc] { display: block; }
.hero-rating__count[b-d3gsfb4qfc] { color: #6b7280; font-weight: 500; }

.hero-review-actions[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-review-btn[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.hero-review-btn:focus-visible[b-d3gsfb4qfc] { outline: 2px solid #fff; outline-offset: 2px; }
.hero-review-btn:hover[b-d3gsfb4qfc] { transform: translateY(-1px); }

.hero-review-btn--solid[b-d3gsfb4qfc] {
    background: #fff;
    color: #1f2937;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.hero-review-btn--solid:hover[b-d3gsfb4qfc] { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24); }

.hero-review-btn--outline[b-d3gsfb4qfc] {
    background: transparent;
    color: var(--slate-0);
    border: 1px solid rgba(255, 255, 255, 0.7);
}
.hero-review-btn--outline:hover[b-d3gsfb4qfc] { background: rgba(255, 255, 255, 0.14); }

.hero-address-info[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-address-text[b-d3gsfb4qfc] {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.75rem;
    line-height: 1.3;
    font-weight: 400;
}

/* Hero ETA / min-cart pills */
/* Mobile-first: the bottom cluster stacks vertically and stays centered so the
   Min. Sepet / ETA pills, social icons and the adisyon.ai signature never
   overlap on narrow screens. The desktop layout (single row + absolutely-
   centered socials + corner signature) is restored in the >=769px query. */
.hero-bottom-row[b-d3gsfb4qfc] {
    position: relative;
    margin-top: var(--ds-space-2);
    padding: 0 var(--ds-space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 3;
}

.hero-eta-side[b-d3gsfb4qfc] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
}

.hero-eta-container[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding: var(--ds-space-1) var(--ds-space-2);
    background: rgba(15, 23, 42, 0.22);
    border-radius: var(--ds-radius-pill);
    backdrop-filter: blur(8px);
    color: var(--slate-0);
}

.hero-eta-icon[b-d3gsfb4qfc] { color: var(--slate-0); }

.hero-eta-text[b-d3gsfb4qfc] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--slate-0);
    white-space: nowrap;
}

/* Sosyal medya bağlantıları — cam efektli yuvarlak ikon çipleri. Mobilde
   akışta ortalanır (üst üste binmeyi önlemek için); masaüstünde satırın
   yatay ortasına absolute konumlanır (banner ortasıyla hizalı). */
.hero-social[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    z-index: 4;
}

.hero-social-link[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--slate-0);
    backdrop-filter: blur(8px);
    text-decoration: none;
    transition: background-color var(--ds-dur, 0.15s) var(--ds-ease, ease),
                transform var(--ds-dur, 0.15s) var(--ds-ease, ease);
}

.hero-social-link:hover[b-d3gsfb4qfc] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.hero-social-link:focus-visible[b-d3gsfb4qfc] {
    outline: 2px solid var(--slate-0);
    outline-offset: 2px;
}

.hero-social-link svg[b-d3gsfb4qfc] { display: block; width: 17px; height: 17px; }

/* Marka imzası — "adisyon.ai" Damion wordmark + "ile hazırlandı". Mobilde
   alt kümenin akışında ortalanır (üst üste binmeyi önler); masaüstünde
   banner'ın sağ-alt köşesine absolute konumlanır. */
.hero-attribution[b-d3gsfb4qfc] {
    z-index: 4;
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    line-height: 1;
    color: var(--slate-0);
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    opacity: 0.95;
    transition: opacity var(--ds-dur, 0.15s) var(--ds-ease, ease);
}
.hero-attribution__brand[b-d3gsfb4qfc] {
    font-family: 'Damion', cursive;
    font-size: 1.15rem;
}
.hero-attribution__tail[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-size: 0.72rem;
    font-weight: 500;
}
.hero-attribution:hover[b-d3gsfb4qfc] { opacity: 1; }
.hero-attribution:focus-visible[b-d3gsfb4qfc] {
    outline: 2px solid var(--slate-0);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =====================================================================
   Floating nav card (search + category chips) — sticky, overlaps hero
   ===================================================================== */
.menu-navigation[b-d3gsfb4qfc] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-3);
    position: sticky;
    top: 0;
    z-index: 10;
    overflow: hidden;
    margin: -28px var(--ds-space-3) 0;
}

.nav-content[b-d3gsfb4qfc] { padding: var(--ds-space-2) 10px 0; }

.nav-top-row[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    justify-content: stretch;
}

.search-container[b-d3gsfb4qfc] {
    position: relative;
    flex: 1;
    min-width: 0;
    margin-bottom: 0 !important;
}

.search-icon[b-d3gsfb4qfc] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-text-subtle);
    z-index: 2;
}

.modern-search[b-d3gsfb4qfc] {
    width: 100%;
    height: 36px;
    padding: 0 var(--ds-space-3) 0 34px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    color: var(--ds-text);
    outline: none;
    transition: border-color var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease);
}

.modern-search[b-d3gsfb4qfc]::placeholder { color: var(--ds-text-subtle); }

.modern-search:focus[b-d3gsfb4qfc] {
    border-color: var(--accent);
    background: var(--ds-surface);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.12);
}

/* Category chips with side arrows */
.category-nav-wrapper[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    padding: var(--ds-space-2) 6px;
    overflow: hidden;
    gap: var(--ds-space-1);
}

.category-nav-arrow[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: var(--ds-radius-pill);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    cursor: pointer;
    box-shadow: var(--ds-shadow-1);
    padding: 0;
    flex-shrink: 0;
    transition: background-color var(--ds-dur) var(--ds-ease);
}

.category-nav-arrow:hover[b-d3gsfb4qfc] { background: var(--ds-surface-alt); }

.category-nav-tabs[b-d3gsfb4qfc] {
    display: flex;
    gap: 6px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* !important defeats app.css `* { scrollbar-width: thin !important }` */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

.category-nav-tabs[b-d3gsfb4qfc]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Diyet & alerjen sembol tetiği — eski kalabalık kaydırmalı satırın yerine küçük, etiketli
   bir buton. Tıklanınca MenuSymbolLegendSheet (sheet/modal) açılır. */
/* Diyet & alerjen sembolleri — kayan (floating) buton. Sepet çubuğunun solunda,
   beyaz daire; sheet'i açıp kapatır. Nav kartından çıkarıldığı için artık oranın
   hizasını/tasarımını bozmuyor. */
.symbol-fab[b-d3gsfb4qfc] {
    position: fixed;
    left: var(--ds-space-3, 16px);
    bottom: calc(var(--ds-space-3, 16px) + env(safe-area-inset-bottom));
    z-index: 51;                 /* sepet pill'inin (50) üstünde, sheet'in (1200) altında */
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    transition: transform var(--ds-dur, 0.15s) var(--ds-ease, ease),
                box-shadow var(--ds-dur, 0.15s) var(--ds-ease, ease),
                border-color var(--ds-dur, 0.15s) var(--ds-ease, ease);
}
.symbol-fab:hover[b-d3gsfb4qfc] { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24); }
.symbol-fab.is-active[b-d3gsfb4qfc] { border-color: var(--accent, #036ac4); }
.symbol-fab:focus-visible[b-d3gsfb4qfc] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }

.category-tab[b-d3gsfb4qfc] {
    background: var(--ds-surface-sunken);
    border: 1px solid transparent;
    color: var(--ds-text-muted);
    padding: 6px var(--ds-space-3);
    border-radius: var(--ds-radius-pill);
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
    white-space: nowrap;
    font-family: var(--ds-font-ui);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.2;
    height: 30px;
    display: inline-flex;
    align-items: center;
}

.category-tab:hover[b-d3gsfb4qfc] { background: var(--ds-border); }

/* Active chip uses slate-900 (not the menu accent) so contrast stays high
   regardless of the per-menu PrimaryColor — light/pastel accents would
   wash out white text otherwise. The accent is reserved for the price,
   the + button and the cart, where it carries the brand. */
.category-tab.active[b-d3gsfb4qfc] {
    background: var(--ds-text);
    color: var(--slate-0);
    border-color: var(--ds-text);
}

/* =====================================================================
   Categories + cards
   ===================================================================== */
.categories-container[b-d3gsfb4qfc] {
    padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-surface-alt);
}

/* Categories no longer wrapped in a heavy card. The category is just
   a section header + a product grid flowing on the page background.
   Per-product cards still carry their own border + shadow, so the visual
   grouping reads from the title + spacing, not from a containing surface.

   `scroll-margin-top` keeps the section header visible after the
   ScrollToCategory call — the sticky nav card overlaps the top ~120px
   of the viewport, so anchoring to that offset prevents the first row
   from disappearing under the search bar. */
.modern-category-card[b-d3gsfb4qfc] {
    margin-bottom: var(--ds-space-5);
    background: transparent;
    border-radius: 0;
    overflow: visible;
    border: none;
    box-shadow: none;
    scroll-margin-top: 120px;
}

.category-header-modern[b-d3gsfb4qfc] {
    background: transparent;
    padding: var(--ds-space-2) var(--ds-space-1) var(--ds-space-2);
    border-bottom: none;
}

.category-title-section[b-d3gsfb4qfc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-info[b-d3gsfb4qfc] { flex: 1; min-width: 0; }

.category-title.readonly[b-d3gsfb4qfc] {
    font-family: var(--ds-font-display);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--ds-text);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.category-subtitle.readonly[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    margin: 3px 0 0;
    line-height: 1.35;
}

/* Compact variant (retail business types) */
.categories-container-compact[b-d3gsfb4qfc] { padding: 10px 10px var(--ds-space-3) !important; }

.modern-category-card-compact[b-d3gsfb4qfc] {
    margin-bottom: var(--ds-space-4);
    border-radius: 0;
    box-shadow: none;
    border: none;
    background: transparent;
}

.modern-category-card-compact .category-header-modern[b-d3gsfb4qfc] {
    background: transparent;
    padding: var(--ds-space-2) var(--ds-space-1) var(--ds-space-2);
    border-bottom: none;
}

.modern-category-card-compact .category-title.readonly[b-d3gsfb4qfc] {
    font-family: var(--ds-font-display);
    font-size: 0.9375rem;
    font-weight: 800;
    margin: 0;
    color: var(--ds-text);
    letter-spacing: -0.01em;
}

.modern-category-card-compact .category-subtitle.readonly[b-d3gsfb4qfc] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    margin-top: 1px;
}

/* =====================================================================
   Product cards
   ===================================================================== */
.products-grid[b-d3gsfb4qfc] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.products-grid-compact[b-d3gsfb4qfc] {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-space-2);
}

.products-grid-rows[b-d3gsfb4qfc] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-card[b-d3gsfb4qfc] {
    display: flex;
    align-items: stretch;
    background: var(--ds-surface);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    box-shadow: var(--ds-shadow-1);
    border: 1px solid var(--ds-border);
    transition: box-shadow var(--ds-dur) var(--ds-ease),
                transform var(--ds-dur-fast) var(--ds-ease);
    min-height: 0;
    position: relative;
    padding: 10px;
    gap: 10px;
}

.product-card:active[b-d3gsfb4qfc] { transform: scale(0.995); }
.inactive-product[b-d3gsfb4qfc] { pointer-events: none; }

.product-info[b-d3gsfb4qfc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: 0;
    gap: var(--ds-space-1);
}

.product-name.readonly[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    margin: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    letter-spacing: -0.005em;
}

.product-desc.readonly[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    margin: 0;
    line-height: 1.3;
    /* Açıklama kırpılmaz — solda/sağda yer olduğundan tam metin gösterilir. */
    word-break: break-word;
}

.product-price[b-d3gsfb4qfc] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-top: var(--ds-space-1);
}

.price-value[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.price-currency[b-d3gsfb4qfc] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
}

.struck-price-value[b-d3gsfb4qfc] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ds-text-subtle);
    text-decoration: line-through;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

/* Image */
.product-image-container[b-d3gsfb4qfc] {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    position: relative;
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    background: var(--ds-surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-right: 0;
}

.product-image-box[b-d3gsfb4qfc] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

.product-img[b-d3gsfb4qfc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--ds-dur-slow) var(--ds-ease);
    border-radius: 0;
}

.product-image-placeholder.disabled[b-d3gsfb4qfc] { display: none; }

/* Action buttons */
.product-action-buttons[b-d3gsfb4qfc] {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
}

.product-add-btn.preview-btn[b-d3gsfb4qfc] {
    width: 30px;
    height: 30px;
    border-radius: var(--ds-radius-pill);
    background: var(--accent);
    color: var(--slate-0);
    border: 2px solid var(--slate-0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--ds-dur-fast) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease);
    box-shadow: var(--ds-shadow-2);
    padding: 0;
}

.product-add-btn.preview-btn:hover[b-d3gsfb4qfc] { transform: scale(1.05); }

.product-badge-count[b-d3gsfb4qfc] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent);
    color: var(--slate-0);
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--ds-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid var(--slate-0);
    box-shadow: var(--ds-shadow-1);
    z-index: 3;
    font-variant-numeric: tabular-nums;
}

.badge-text[b-d3gsfb4qfc] { line-height: 1; }

/* Quantity stepper */
.quantity-controls[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--ds-radius-pill);
    padding: 2px;
    box-shadow: var(--ds-shadow-1);
    border: 1px solid var(--ds-border);
}

.quantity-btn[b-d3gsfb4qfc] {
    background: var(--accent);
    color: var(--slate-0);
    border: none;
    border-radius: var(--ds-radius-pill);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: opacity var(--ds-dur-fast) var(--ds-ease);
    padding: 0;
}

.quantity-btn:hover:not(.disabled)[b-d3gsfb4qfc] { opacity: 0.85; }
.quantity-btn.decrease[b-d3gsfb4qfc] { background: var(--ds-text-muted); }

.quantity-btn.disabled[b-d3gsfb4qfc],
.product-add-btn.disabled[b-d3gsfb4qfc] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.quantity-display[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--ds-text);
    min-width: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Allergen + out-of-stock badges
   ===================================================================== */
.product-allergens[b-d3gsfb4qfc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-1);
    margin-top: var(--ds-space-1);
    margin-bottom: 0;
}

.allergen-badge[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ds-font-ui);
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    background: rgba(234, 88, 12, 0.08);
    border: 1px solid rgba(234, 88, 12, 0.22);
    border-radius: var(--ds-radius-pill);
    color: #c2410c;
    white-space: nowrap;
    line-height: 1.2;
}

.out-of-stock-badge[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ds-font-ui);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--slate-100);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    color: var(--ds-text-muted);
    margin-left: 6px;
    white-space: nowrap;
    line-height: 1.2;
}

/* =====================================================================
   Standalone store-address card (visible on desktop only)
   ===================================================================== */
.store-address-section[b-d3gsfb4qfc] { display: none; }

.store-address-content[b-d3gsfb4qfc] {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ds-space-5);
}

.address-info[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 14px var(--ds-space-4);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.address-text[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ds-text);
    line-height: 1.4;
}

/* Eski alt-footer (.menu-footer / .footer-*) kaldırıldı — marka imzası artık
   banner'ın sağ-alt köşesinde (.hero-attribution). */

/* =====================================================================
   Language selector
   ===================================================================== */
.language-selector-container[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    margin-right: 0;
    height: 36px;
}

.language-selector[b-d3gsfb4qfc] {
    background: rgba(255, 255, 255, 0.16);
    color: var(--slate-0);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--ds-radius-sm);
    padding: 0 var(--ds-space-2);
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    height: 36px;
    min-width: 64px;
    max-width: 110px;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='white' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 22px;
}

.language-selector:focus[b-d3gsfb4qfc] {
    outline: none;
    background-color: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.55);
}

.language-selector option[b-d3gsfb4qfc] {
    background: var(--slate-900);
    color: var(--slate-0);
}

/* =====================================================================
   Floating cart
   ===================================================================== */
.floating-cart-button[b-d3gsfb4qfc] {
    position: fixed;
    left: var(--ds-space-3);
    right: var(--ds-space-3);
    bottom: calc(var(--ds-space-3) + env(safe-area-inset-bottom));
    /* Solid menu-accent fill (falls back to brand-600 then a literal blue
       so the pill always reads opaque even if a custom property fails to
       resolve in some environment). */
    background-color: #036ac4;
    background-color: var(--brand-600, #036ac4);
    background-color: var(--accent, var(--brand-600, #036ac4));
    color: #ffffff;
    border-radius: var(--ds-radius-md);
    padding: 12px var(--ds-space-4);
    min-height: 48px;
    cursor: pointer;
    box-shadow: var(--ds-shadow-3);
    transition: box-shadow var(--ds-dur) var(--ds-ease);
    z-index: 50;
    will-change: transform;
    transform: none;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
    opacity: 1;
}

/* Sepet çubuğu görünürken info FAB'a yer açmak için sol kenarından içeri kayar; böylece
   info butonu "Şimdi Sipariş Ver" çubuğunun tam solunda, üstünü kapatmadan durur.
   (Bu kural base .floating-cart-button'dan SONRA gelmeli ki left'i ezebilsin.) */
.floating-cart-button--with-fab[b-d3gsfb4qfc] {
    left: calc(var(--ds-space-3) + 48px + var(--ds-space-2));
}

.floating-cart-button:hover[b-d3gsfb4qfc] { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22); }
.floating-cart-button.no-animation[b-d3gsfb4qfc] { transition: none !important; }

.cart-content[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cart-info[b-d3gsfb4qfc] { display: flex; align-items: center; gap: var(--ds-space-2); flex-shrink: 0; }

.cart-count[b-d3gsfb4qfc] {
    background-color: #ffffff;
    color: #036ac4;
    color: var(--brand-600, #036ac4);
    color: var(--accent, var(--brand-600, #036ac4));
    font-weight: 700;
    border-radius: var(--ds-radius-pill);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.cart-details[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 1;
    min-width: 0;
}

.cart-text[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-weight: 700;
    font-size: 13px;
    color: #ffffff;          /* explicit white — won't fall back to ambient inherited */
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
}

.cart-total[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
}

/* =====================================================================
   Unavailable-items notification
   ===================================================================== */
.unavailable-items-notification[b-d3gsfb4qfc] {
    position: fixed;
    top: calc(var(--ds-space-3) + env(safe-area-inset-top));
    right: var(--ds-space-3);
    left: var(--ds-space-3);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--ds-radius-md);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--ds-shadow-3);
    z-index: 1001;
    max-width: none;
    animation: slideInRight-b-d3gsfb4qfc var(--ds-dur-slow) var(--ds-ease);
}

.notification-content[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.notification-title[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-weight: 700;
    font-size: 13px;
    color: #9a3412;
}

.notification-text[b-d3gsfb4qfc] {
    font-family: var(--ds-font-ui);
    font-size: 11px;
    color: #c2410c;
}

.notification-close[b-d3gsfb4qfc] {
    background: none;
    border: none;
    color: var(--ds-text-muted);
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes slideInRight-b-d3gsfb4qfc {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* =====================================================================
   Animations
   ===================================================================== */
@keyframes fadeInUp-b-d3gsfb4qfc {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modern-category-card[b-d3gsfb4qfc] { animation: fadeInUp-b-d3gsfb4qfc var(--ds-dur-slow) var(--ds-ease); }
.product-card[b-d3gsfb4qfc] { animation: fadeInUp-b-d3gsfb4qfc var(--ds-dur) var(--ds-ease); }

.modifier-selection-page[b-d3gsfb4qfc] {
    min-height: 100vh;
    background: var(--ds-surface-alt);
    animation: slideIn-b-d3gsfb4qfc var(--ds-dur-slow) var(--ds-ease);
}

@keyframes slideIn-b-d3gsfb4qfc {
    from { transform: translateY(-30%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* =====================================================================
   Tablet / small desktop (>=769px)
   ===================================================================== */
@media (min-width: 769px) {
    /* Center the whole menu column and cap its width so the hero (red band),
       nav card and product grid share one centered column — the page reads as
       a centered site instead of the hero bleeding edge-to-edge. The header
       action chips (phone / info / language) then sit at the right edge of
       this column rather than pinned to the viewport edge. */
    .menu-builder[b-d3gsfb4qfc] {
        max-width: 1100px;
        margin: var(--ds-space-5) auto 0;
        border-radius: var(--ds-radius-lg);
        /* No overflow:hidden here — it would break the sticky nav card. The
           hero clips its own rounded corners below. */
    }

    .restaurant-header[b-d3gsfb4qfc],
    .hero-section[b-d3gsfb4qfc] {
        border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
        overflow: hidden;
    }

    .hero-section[b-d3gsfb4qfc] {
        min-height: 180px;
        padding-bottom: 56px;
    }

    .hero-section--has-photos[b-d3gsfb4qfc] { min-height: 300px; }

    .header-top-bar[b-d3gsfb4qfc] { padding: var(--ds-space-4) var(--ds-space-5); align-items: flex-start; }

    .restaurant-logo[b-d3gsfb4qfc] {
        height: 56px;
        max-width: 160px;
        padding: 5px;
        border-radius: 10px;
    }

    .header-actions[b-d3gsfb4qfc] { gap: var(--ds-space-2); }
    .working-hours-display[b-d3gsfb4qfc] { width: 40px; height: 40px; min-width: 40px; }

    .title-section[b-d3gsfb4qfc] { margin: 0; padding: var(--ds-space-1) var(--ds-space-5) var(--ds-space-2); text-align: center; }

    .restaurant-title-container[b-d3gsfb4qfc] {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--ds-space-3);
    }
    .restaurant-title-text[b-d3gsfb4qfc] { flex: 0 1 auto; align-items: flex-start; }
    .restaurant-title.readonly[b-d3gsfb4qfc] { font-size: 1.875rem; line-height: 1.05; }
    .restaurant-logo--inline[b-d3gsfb4qfc] { width: 64px; height: 64px; max-width: 64px; }
    .title-underline[b-d3gsfb4qfc] { width: 48px; height: 3px; }

    .hero-address-section[b-d3gsfb4qfc] { margin-top: var(--ds-space-2); }
    .hero-address-info[b-d3gsfb4qfc] { justify-content: center; }
    .hero-address-text[b-d3gsfb4qfc] { font-size: 0.8125rem; }

    .hero-bottom-row[b-d3gsfb4qfc] {
        margin-top: var(--ds-space-2);
        padding: 0 var(--ds-space-5);
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        /* Reserve room for the absolutely-centered social icons. */
        min-height: 32px;
    }

    /* Sosyal ikonlar masaüstünde satırın yatay ortasına absolute konumlanır. */
    .hero-social[b-d3gsfb4qfc] {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        flex-wrap: nowrap;
    }

    /* İmza masaüstünde info butonlarıyla aynı sağ hizada (space-5), köşede. */
    .hero-attribution[b-d3gsfb4qfc] {
        position: absolute;
        right: var(--ds-space-5);
        bottom: 10px;
        margin-top: 0;
    }
    .hero-attribution__brand[b-d3gsfb4qfc] { font-size: 1.3rem; }
    .hero-attribution__tail[b-d3gsfb4qfc] { font-size: 0.8rem; }

    .hero-eta-container[b-d3gsfb4qfc] { padding: 5px var(--ds-space-3); }
    .hero-eta-text[b-d3gsfb4qfc] { font-size: 0.75rem; }

    /* Nav floating card — centered & width-capped to match the categories
       container so the floating bar visually aligns with the product grid. */
    .menu-navigation[b-d3gsfb4qfc] {
        width: calc(100% - var(--ds-space-6));
        max-width: 1100px;
        margin: -42px auto 0;
        border-radius: var(--ds-radius-lg);
        box-shadow: var(--ds-shadow-3);
    }

    .nav-content[b-d3gsfb4qfc] { padding: var(--ds-space-3) var(--ds-space-4) 0; }
    .nav-top-row[b-d3gsfb4qfc] { justify-content: center; }
    .search-container[b-d3gsfb4qfc] { max-width: 520px; }

    .modern-search[b-d3gsfb4qfc] {
        height: 38px;
        font-size: 0.875rem;
        padding-left: 38px;
        border-radius: var(--ds-radius-pill);
    }
    .search-icon[b-d3gsfb4qfc] { left: var(--ds-space-3); }

    .category-nav-wrapper[b-d3gsfb4qfc] { padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-3); gap: 6px; }
    .category-nav-arrow[b-d3gsfb4qfc] { width: 30px; height: 30px; min-width: 30px; }

    .category-tab[b-d3gsfb4qfc] {
        padding: 6px 14px;
        height: 32px;
        font-size: 0.8125rem;
    }

    /* Categories — width-capped, centered. No internal background so the
       categories sit on the page (ds-surface-alt). Heavy per-category
       wrappers were removed; spacing alone groups the products. */
    .categories-container[b-d3gsfb4qfc] {
        width: calc(100% - var(--ds-space-6));
        max-width: 1100px;
        margin: 0 auto;
        padding: var(--ds-space-5) 0 var(--ds-space-6);
        background: transparent;
    }

    .modern-category-card[b-d3gsfb4qfc] {
        margin-bottom: var(--ds-space-5);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        border: none;
    }

    .category-header-modern[b-d3gsfb4qfc] {
        background: transparent;
        padding: var(--ds-space-2) 0 var(--ds-space-3);
        border-bottom: none;
    }

    .category-title.readonly[b-d3gsfb4qfc] {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--ds-text);
        letter-spacing: -0.02em;
    }
    .category-subtitle.readonly[b-d3gsfb4qfc] { font-size: 0.875rem; margin-top: 4px; }

    .products-grid[b-d3gsfb4qfc] {
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ds-space-3);
    }

    .products-grid-compact[b-d3gsfb4qfc] {
        padding: 0;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--ds-space-3);
    }

    .products-grid-rows[b-d3gsfb4qfc] { padding: 0; gap: var(--ds-space-2); }

    .product-card[b-d3gsfb4qfc] {
        padding: var(--ds-space-3);
        gap: var(--ds-space-3);
        border-radius: var(--ds-radius-md);
        min-height: 0;
    }

    .product-card:hover[b-d3gsfb4qfc] {
        box-shadow: var(--ds-shadow-2);
        transform: translateY(-1px);
    }

    .product-name.readonly[b-d3gsfb4qfc] { font-size: 0.9375rem; line-height: 1.25; }
    .product-desc.readonly[b-d3gsfb4qfc] { font-size: 0.8125rem; line-height: 1.3; }

    .price-value[b-d3gsfb4qfc] { font-size: 0.9375rem; }
    .price-currency[b-d3gsfb4qfc] { font-size: 0.75rem; }
    .struck-price-value[b-d3gsfb4qfc] { font-size: 0.75rem; }

    .product-image-container[b-d3gsfb4qfc] {
        width: 84px;
        height: 84px;
        border-radius: var(--ds-radius-sm);
    }

    .product-add-btn.preview-btn[b-d3gsfb4qfc] { width: 32px; height: 32px; }
    .quantity-btn[b-d3gsfb4qfc] { width: 26px; height: 26px; }

    /* Address card visible on desktop */
    .store-address-section[b-d3gsfb4qfc] {
        display: block;
        background: var(--ds-surface);
        padding: var(--ds-space-4) 0;
        margin-top: var(--ds-space-2);
        border-top: 1px solid var(--ds-border);
    }

    .address-info[b-d3gsfb4qfc] { padding: 10px var(--ds-space-4); }
    .address-text[b-d3gsfb4qfc] { font-size: 0.875rem; }


    .language-selector[b-d3gsfb4qfc] {
        font-size: 0.75rem;
        min-width: 80px;
        max-width: 140px;
        padding-right: 22px;
        height: 40px;
    }
    .language-selector-container[b-d3gsfb4qfc] { height: 40px; }

    /* Floating cart pill */
    .floating-cart-button[b-d3gsfb4qfc] {
        left: 50%;
        right: auto;
        bottom: var(--ds-space-5);
        transform: translateX(-50%);
        border-radius: var(--ds-radius-pill);
        padding: 10px var(--ds-space-4);
        min-width: 200px;
    }
    .floating-cart-button:hover[b-d3gsfb4qfc] { transform: translateX(-50%) translateY(-2px); }

    /* Masaüstünde sepet ortalanmış pill olduğundan FAB sol-altta kalır. */
    .symbol-fab[b-d3gsfb4qfc] {
        left: var(--ds-space-5);
        bottom: calc(var(--ds-space-5) + env(safe-area-inset-bottom));
    }

    .unavailable-items-notification[b-d3gsfb4qfc] {
        top: var(--ds-space-5);
        right: var(--ds-space-5);
        left: auto;
        max-width: 340px;
    }
}

/* =====================================================================
   Wide desktop (>=1441px) — same width cap, just more breathing room.
   Product grid stays 2-col at all widths (max-width 1100px keeps cards
   from stretching, and 2-col reads cleaner than 3-col with the long
   product names common in TR menus).
   ===================================================================== */
@media (min-width: 1441px) {
    .categories-container[b-d3gsfb4qfc] { padding: var(--ds-space-6) 0 var(--ds-space-7); }
    .search-container[b-d3gsfb4qfc] { max-width: 600px; }
}

/* =====================================================================
   Masa QR ortak sepet (QR shared cart) — banner + bottom-sheet panel.
   Accent inherits the per-menu --accent defined on .menu-builder.
   ===================================================================== */
.qrcart-banner[b-d3gsfb4qfc] {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: 10px var(--ds-space-4);
    background: var(--accent);
    color: #fff;
}

.qrcart-banner-info[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    min-width: 0;
}

.qrcart-banner-text[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qrcart-banner-title[b-d3gsfb4qfc] {
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qrcart-banner-subtitle[b-d3gsfb4qfc] {
    font-size: 0.75rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qrcart-banner-button[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--ds-radius-pill);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background var(--ds-dur, 200ms) var(--ds-ease, ease);
}

.qrcart-banner-button:hover[b-d3gsfb4qfc] { background: rgba(255, 255, 255, 0.26); }

.qrcart-banner-note[b-d3gsfb4qfc] {
    padding: 6px var(--ds-space-4);
    background: var(--ds-surface-alt, #f1f5f9);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
    color: var(--ds-text-muted, #64748b);
    font-size: 0.75rem;
    text-align: center;
}

/* ---------- Panel (bottom sheet) ---------- */
.qrcart-overlay[b-d3gsfb4qfc] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.qrcart-panel[b-d3gsfb4qfc] {
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--ds-surface, #fff);
    border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
    box-shadow: var(--ds-shadow-3);
    overflow: hidden;
}

.qrcart-panel-header[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-space-4);
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.qrcart-panel-title[b-d3gsfb4qfc] {
    margin: 0;
    font-family: var(--ds-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ds-text);
}

.qrcart-panel-close[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-text-muted, #64748b);
    cursor: pointer;
}

.qrcart-panel-close:hover[b-d3gsfb4qfc] { background: var(--ds-surface-alt, #f1f5f9); }

.qrcart-panel-body[b-d3gsfb4qfc] {
    overflow-y: auto;
    padding: var(--ds-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

.qrcart-empty[b-d3gsfb4qfc] {
    padding: var(--ds-space-6) 0;
    text-align: center;
    color: var(--ds-text-muted, #64748b);
    font-size: 0.875rem;
}

/* ---------- Participant groups + items ---------- */
.qrcart-group[b-d3gsfb4qfc] { display: flex; flex-direction: column; gap: var(--ds-space-2); }

.qrcart-group-title[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-muted, #64748b);
}

.qrcart-you-badge[b-d3gsfb4qfc] {
    padding: 1px 8px;
    border-radius: var(--ds-radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.qrcart-item[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: var(--ds-space-2) 0;
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.qrcart-item:last-child[b-d3gsfb4qfc] { border-bottom: none; }

/* Güvenli ödeme şeridi — menü içeriğinin en altında; yüzen sepet pill'inin üstünde
   kalması için alt boşluk bırakır, logolar sağa hizalıdır. */
.cmp-secure-footer[b-d3gsfb4qfc] {
    display: flex;
    justify-content: center;
    padding: 20px var(--ds-space-3, 16px) calc(96px + env(safe-area-inset-bottom));
}

.qrcart-item-info[b-d3gsfb4qfc] { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }

.qrcart-item-name[b-d3gsfb4qfc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.qrcart-item-modifiers[b-d3gsfb4qfc],
.qrcart-item-notes[b-d3gsfb4qfc] {
    font-size: 0.75rem;
    color: var(--ds-text-muted, #64748b);
}

.qrcart-item-actions[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-shrink: 0;
}

.qrcart-qty-btn[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface, #fff);
    color: var(--accent);
    cursor: pointer;
    transition: background var(--ds-dur, 200ms) var(--ds-ease, ease);
}

.qrcart-qty-btn:hover[b-d3gsfb4qfc] { background: var(--ds-surface-alt, #f1f5f9); }

.qrcart-item-qty[b-d3gsfb4qfc] {
    min-width: 24px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.qrcart-item-price[b-d3gsfb4qfc] {
    min-width: 72px;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--accent);
}

.qrcart-item-readonly .qrcart-item-price[b-d3gsfb4qfc] { color: var(--ds-text); }

/* ---------- Totals + adisyon section ---------- */
.qrcart-total-row[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--ds-space-2);
    font-size: 0.875rem;
    color: var(--ds-text);
}

.qrcart-total-discount[b-d3gsfb4qfc] { color: var(--ds-text-muted, #64748b); }

.qrcart-total-strong[b-d3gsfb4qfc] { font-weight: 700; font-size: 0.9375rem; }

.qrcart-order-section[b-d3gsfb4qfc] {
    border-top: 1px solid var(--ds-border, #e2e8f0);
    padding-top: var(--ds-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.qrcart-order-title[b-d3gsfb4qfc] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-muted, #64748b);
}

@media (min-width: 769px) {
    .qrcart-overlay[b-d3gsfb4qfc] { align-items: center; padding: var(--ds-space-5); }
    .qrcart-panel[b-d3gsfb4qfc] { border-radius: var(--ds-radius-lg); }
}
/* /Components/Pages/Menus/Dialogs/AddProductDialog.razor.rz.scp.css */
.apd[b-8wmcwnelyx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Price / VAT / Unit triple row */
.apd-row[b-8wmcwnelyx] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.apd-row > .ds-field[b-8wmcwnelyx] {
    flex: 1 1 0;
    min-width: 120px;
}

/* Active checkbox row */
.apd-check[b-8wmcwnelyx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    width: fit-content;
}

.apd-check:focus-visible[b-8wmcwnelyx] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
    border-radius: var(--ds-radius-sm);
}

/* Modifier groups */
.apd-groups[b-8wmcwnelyx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--ds-border);
    padding-top: 14px;
}

.apd-groups-title[b-8wmcwnelyx] {
    font-family: var(--ds-font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-text);
}

.apd-groups-list[b-8wmcwnelyx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 8px;
    background: var(--ds-surface-alt);
}

.apd-group-row[b-8wmcwnelyx] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 6px 8px;
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    color: var(--ds-text);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.apd-group-row:hover[b-8wmcwnelyx] {
    background: var(--ds-surface-sunken);
}

.apd-group-name[b-8wmcwnelyx] {
    font-weight: 600;
}

.apd-badge[b-8wmcwnelyx] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill);
}

.apd-badge--required[b-8wmcwnelyx] {
    background: #fef3c7;
    color: #b45309;
}

.apd-badge--exclusive[b-8wmcwnelyx] {
    background: #fee2e2;
    color: #b91c1c;
}

/* Stock tracking section */
.apd-stock[b-8wmcwnelyx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--ds-border);
    padding-top: 14px;
}

.apd-stock-hint[b-8wmcwnelyx] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ds-text-muted, var(--ds-text));
}

@media (max-width: 600px) {
    .apd-row > .ds-field[b-8wmcwnelyx] { flex: 1 1 100%; }
}
/* /Components/Pages/Menus/Dialogs/AdvancedMenuCustomizationDialog.razor.rz.scp.css */
.amc[b-1uf6cax7dq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Sekme şeridi ===== */
.amc-tabs[b-1uf6cax7dq] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ds-border);
}

.amc-tab[b-1uf6cax7dq] {
    border: none;
    background: transparent;
    padding: 8px 14px;
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.amc-tab:hover[b-1uf6cax7dq] { color: var(--ds-text); background: var(--ds-surface-alt); }

.amc-tab.is-active[b-1uf6cax7dq] {
    background: var(--brand-50, rgba(3, 106, 196, 0.08));
    color: var(--brand-700);
}

.amc-tab:focus-visible[b-1uf6cax7dq] {
    outline: 2px solid var(--brand-600);
    outline-offset: 1px;
}

/* ===== Panel ===== */
.amc-panel[b-1uf6cax7dq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.amc-section-title[b-1uf6cax7dq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ds-text);
}

.amc-subsection-title[b-1uf6cax7dq] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ds-text);
}

.amc-divider[b-1uf6cax7dq] {
    height: 1px;
    background: var(--ds-border);
    margin: 2px 0;
}

/* İki sütunlu alan satırı */
.amc-two-col[b-1uf6cax7dq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Onay kutusu ızgarası */
.amc-check-grid[b-1uf6cax7dq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.amc-check[b-1uf6cax7dq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    padding: 4px 0;
}

.amc-check:focus-within[b-1uf6cax7dq] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Renk ızgarası */
.amc-color-grid[b-1uf6cax7dq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.amc-color-field[b-1uf6cax7dq] { min-width: 0; }

.amc-color-row[b-1uf6cax7dq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.amc-swatch[b-1uf6cax7dq] {
    width: 44px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    cursor: pointer;
    flex-shrink: 0;
}

.amc-swatch:focus-visible[b-1uf6cax7dq] {
    outline: 2px solid var(--brand-600);
    outline-offset: 1px;
}

.amc-hex[b-1uf6cax7dq] {
    flex: 1 1 0;
    min-width: 0;
}

/* Kod alanları (CSS / JS) */
.amc-code[b-1uf6cax7dq] {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

@media (max-width: 640px) {
    .amc-two-col[b-1uf6cax7dq],
    .amc-check-grid[b-1uf6cax7dq],
    .amc-color-grid[b-1uf6cax7dq] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Menus/Dialogs/AiEnhanceModal.razor.rz.scp.css */
.aie[b-rpy4ei1vs8] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.aie-section[b-rpy4ei1vs8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aie-subhead[b-rpy4ei1vs8] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted);
}

/* ===== Type selection ===== */
.aie-types[b-rpy4ei1vs8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.aie-type[b-rpy4ei1vs8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    text-align: left;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}

.aie-type:hover[b-rpy4ei1vs8] { border-color: var(--ds-border-strong); }

.aie-type.is-on[b-rpy4ei1vs8] {
    border-color: var(--brand-600);
    background: var(--ds-surface-alt);
}

.aie-type:focus-visible[b-rpy4ei1vs8] {
    outline: 2px solid var(--brand-600);
    outline-offset: 1px;
}

.aie-type-body[b-rpy4ei1vs8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.aie-type-title[b-rpy4ei1vs8] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
}

.aie-type-desc[b-rpy4ei1vs8] {
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--ds-text-subtle);
}

.aie-note[b-rpy4ei1vs8] {
    margin: 2px 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-muted);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-sm);
    padding: 8px 10px;
}

/* ===== Scope ===== */
.aie-scope-head[b-rpy4ei1vs8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aie-linkbtn[b-rpy4ei1vs8] {
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-700);
    cursor: pointer;
}

.aie-linkbtn:hover[b-rpy4ei1vs8] { text-decoration: underline; }

.aie-cats[b-rpy4ei1vs8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
}

.aie-cat[b-rpy4ei1vs8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
}

.aie-cat.is-on[b-rpy4ei1vs8] { border-color: var(--brand-600); }

.aie-cat-name[b-rpy4ei1vs8] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aie-cat-count[b-rpy4ei1vs8] {
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
    flex-shrink: 0;
}

.aie-single[b-rpy4ei1vs8] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    padding: 10px 12px;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

/* ===== Cost summary ===== */
.aie-cost[b-rpy4ei1vs8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.aie-cost-row[b-rpy4ei1vs8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

.aie-cost-row strong[b-rpy4ei1vs8] { color: var(--ds-text); }

.aie-cost-total[b-rpy4ei1vs8] {
    border-top: 1px solid var(--ds-border);
    padding-top: 6px;
    margin-top: 2px;
}

.aie-cost-total strong[b-rpy4ei1vs8] { color: var(--brand-700); font-size: 0.9375rem; }

.aie-cost-hint[b-rpy4ei1vs8] {
    margin: 2px 0 0;
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
}

/* ===== Running ===== */
.aie-running[b-rpy4ei1vs8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 0;
    font-size: 0.875rem;
    color: var(--ds-text-muted);
}

/* ===== Preview ===== */
.aie-preview[b-rpy4ei1vs8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

.aie-preview-head[b-rpy4ei1vs8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 2px;
}

.aie-count[b-rpy4ei1vs8] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

/* ── Compact row (collapsed by default) ── */
.aie-row[b-rpy4ei1vs8] {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    transition: opacity var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}

.aie-row.is-open[b-rpy4ei1vs8] { border-color: var(--ds-border-strong); }
.aie-row.is-excluded[b-rpy4ei1vs8] { opacity: 0.5; }

.aie-row-head[b-rpy4ei1vs8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
}

.aie-row-toggle[b-rpy4ei1vs8] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.aie-row-toggle:focus-visible[b-rpy4ei1vs8] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
    border-radius: var(--ds-radius-sm);
}

.aie-row-main[b-rpy4ei1vs8] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.aie-row-cat[b-rpy4ei1vs8] {
    flex-shrink: 0;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-subtle);
}

.aie-row-title[b-rpy4ei1vs8] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aie-row-summary[b-rpy4ei1vs8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.aie-sumchip[b-rpy4ei1vs8] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    padding: 1px 7px;
    white-space: nowrap;
}

.aie-sumchip--bind[b-rpy4ei1vs8] {
    color: var(--brand-700);
    background: color-mix(in srgb, var(--brand-600) 12%, transparent);
    border-color: color-mix(in srgb, var(--brand-600) 26%, transparent);
}

.aie-chev[b-rpy4ei1vs8] {
    width: 16px;
    height: 16px;
    color: var(--ds-text-subtle);
    transition: transform var(--ds-dur-fast) var(--ds-ease);
}

.aie-row.is-open .aie-chev[b-rpy4ei1vs8] { transform: rotate(180deg); }

.aie-row-body[b-rpy4ei1vs8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 12px 12px;
    border-top: 1px solid var(--ds-border);
}

/* ── Binding kind selector (segmented) ── */
.aie-kind[b-rpy4ei1vs8] {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    width: fit-content;
}

.aie-kind-opt[b-rpy4ei1vs8] {
    border: none;
    background: transparent;
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: calc(var(--ds-radius-sm) - 2px);
    cursor: pointer;
    transition: all var(--ds-dur-fast) var(--ds-ease);
}

.aie-kind-opt:hover:not(:disabled)[b-rpy4ei1vs8] { color: var(--ds-text); }

.aie-kind-opt.is-on[b-rpy4ei1vs8] {
    background: var(--ds-surface);
    color: var(--brand-700);
    box-shadow: var(--ds-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.06));
}

.aie-kind-opt:disabled[b-rpy4ei1vs8] { cursor: not-allowed; opacity: 0.6; }

/* ── Material cell (pick existing / create new) ── */
.aie-matcell[b-rpy4ei1vs8] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.aie-matcell-ac[b-rpy4ei1vs8] { flex: 1 1 auto; min-width: 0; }
.aie-matcell .aie-bind-item-name[b-rpy4ei1vs8] { flex: 1 1 auto; }

.aie-matmode[b-rpy4ei1vs8] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--brand-700);
    white-space: nowrap;
    cursor: pointer;
}

.aie-matmode:hover:not(:disabled)[b-rpy4ei1vs8] { text-decoration: underline; }
.aie-matmode:disabled[b-rpy4ei1vs8] { color: var(--ds-text-subtle); cursor: not-allowed; }

.aie-bind-qtywrap[b-rpy4ei1vs8] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.aie-bind-qtyunit[b-rpy4ei1vs8] {
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
    white-space: nowrap;
}

.aie-bind-empty[b-rpy4ei1vs8] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--ds-text-subtle);
}

.aie-additem[b-rpy4ei1vs8] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed var(--ds-border-strong);
    background: transparent;
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: all var(--ds-dur-fast) var(--ds-ease);
}

.aie-additem:hover:not(:disabled)[b-rpy4ei1vs8] { border-color: var(--brand-600); color: var(--brand-700); }
.aie-additem:disabled[b-rpy4ei1vs8] { cursor: not-allowed; opacity: 0.5; }
.aie-additem-plus[b-rpy4ei1vs8] { font-size: 0.95rem; line-height: 1; }

.aie-desc[b-rpy4ei1vs8] { resize: vertical; min-height: 48px; }
.aie-instructions[b-rpy4ei1vs8] { resize: vertical; min-height: 52px; width: 100%; }

/* Allergen chips */
.aie-allergens[b-rpy4ei1vs8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.aie-allergen[b-rpy4ei1vs8] {
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--ds-dur-fast) var(--ds-ease);
}

.aie-allergen:hover:not(:disabled)[b-rpy4ei1vs8] { border-color: var(--ds-border-strong); }

.aie-allergen.is-on[b-rpy4ei1vs8] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.aie-allergen:disabled[b-rpy4ei1vs8] { cursor: not-allowed; }

/* Binding block */
.aie-bind[b-rpy4ei1vs8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.aie-bind-head[b-rpy4ei1vs8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aie-bind-kind[b-rpy4ei1vs8] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aie-bind-itemcount[b-rpy4ei1vs8] {
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
}

.aie-bind-stockrow[b-rpy4ei1vs8],
.aie-bind-item[b-rpy4ei1vs8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.aie-bind-item-name[b-rpy4ei1vs8] { flex: 1 1 auto; min-width: 0; }
.aie-bind-item-qty[b-rpy4ei1vs8] { flex: 0 0 80px; text-align: right; }
.aie-bind-item-unit[b-rpy4ei1vs8] { flex: 0 0 84px; }

.aie-matbadge[b-rpy4ei1vs8] {
    /* Sabit genişlik + ortalı: "YENİ" / "MEVCUT" (ve EN'de "NEW" / "EXISTING") aynı
       boyutta görünür, böylece etiket ve sonrasındaki × butonu tüm satırlarda hizalı kalır. */
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--ds-surface-alt);
    color: var(--ds-text-muted);
    border: 1px solid var(--ds-border);
}

.aie-matbadge.is-new[b-rpy4ei1vs8] {
    background: color-mix(in srgb, var(--brand-600) 14%, transparent);
    color: var(--brand-700);
    border-color: color-mix(in srgb, var(--brand-600) 30%, transparent);
}

.aie-bind-item-rm[b-rpy4ei1vs8] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.aie-bind-item-rm:hover:not(:disabled)[b-rpy4ei1vs8] { border-color: var(--ds-border-strong); color: var(--ds-text); }

@media (max-width: 600px) {
    .aie-types[b-rpy4ei1vs8], .aie-cats[b-rpy4ei1vs8] { grid-template-columns: 1fr; }
    .aie-bind-item[b-rpy4ei1vs8] { flex-wrap: wrap; }
    .aie-bind-item-name[b-rpy4ei1vs8] { flex: 1 1 100%; }
}
/* /Components/Pages/Menus/Dialogs/AiImageStudioModal.razor.rz.scp.css */
.aim[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aim-subhead[b-xogqbu0c1n] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted);
}

.aim-linkbtn[b-xogqbu0c1n] {
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-700);
    cursor: pointer;
}

.aim-linkbtn:hover[b-xogqbu0c1n] { text-decoration: underline; }

/* ===== Üst şerit: adımlar + hedef ürün ===== */
.aim-topbar[b-xogqbu0c1n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.aim-steps[b-xogqbu0c1n] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.aim-step[b-xogqbu0c1n] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    background: var(--ds-surface-sunken);
    color: var(--ds-text-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.aim-step + .aim-step[b-xogqbu0c1n]::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--ds-border-strong);
    margin-left: -4px;
    margin-right: 2px;
}

.aim-step-dot[b-xogqbu0c1n] {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    transition: transform var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}

.aim-step.is-current[b-xogqbu0c1n] { background: var(--ds-surface-alt); color: var(--ds-text); }

.aim-step.is-current .aim-step-dot[b-xogqbu0c1n] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-600) 18%, transparent);
}

.aim-step.is-done[b-xogqbu0c1n] { color: var(--ds-text-muted); }

.aim-step.is-done .aim-step-dot[b-xogqbu0c1n] {
    background: color-mix(in srgb, var(--ds-success) 16%, transparent);
    border-color: var(--ds-success);
    color: var(--ds-success);
}

.aim-step.is-done .aim-step-dot[b-xogqbu0c1n]  svg { fill: var(--ds-success); }
.aim-step.is-current .aim-step-dot[b-xogqbu0c1n]  svg { fill: #fff; }

/* Hedef ürün rozeti */
.aim-target[b-xogqbu0c1n] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    background: var(--ds-surface);
    max-width: 340px;
}

.aim-target[b-xogqbu0c1n]  svg { fill: var(--brand-600); flex: none; }

.aim-target-name[b-xogqbu0c1n] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aim-target-sub[b-xogqbu0c1n] {
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
    white-space: nowrap;
}

/* ===== Animasyonlu adım gövdesi ===== */
.aim-stage[b-xogqbu0c1n] {
    animation: aim-stage-in-b-xogqbu0c1n 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes aim-stage-in-b-xogqbu0c1n {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .aim-stage[b-xogqbu0c1n] { animation: none; }
}

/* ===== 1) Stil ızgarası (6×5) ===== */
.aim-style-grid[b-xogqbu0c1n] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    padding: 2px 4px 2px 2px;
}

@media (max-width: 900px) {
    .aim-style-grid[b-xogqbu0c1n] { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 620px) {
    .aim-style-grid[b-xogqbu0c1n] { grid-template-columns: repeat(3, 1fr); }
}

.aim-style-card[b-xogqbu0c1n] {
    position: relative;
    aspect-ratio: 1;
    display: block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-sunken);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s var(--ds-ease), box-shadow 0.18s var(--ds-ease), border-color 0.18s var(--ds-ease);
}

.aim-style-card:hover[b-xogqbu0c1n] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.aim-style-card.is-on[b-xogqbu0c1n] {
    border-color: var(--brand-600);
    box-shadow: 0 10px 24px rgba(3, 106, 196, 0.30);
}

.aim-style-card:focus-visible[b-xogqbu0c1n] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.aim-style-card img[b-xogqbu0c1n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ds-ease);
}

.aim-style-card:hover img[b-xogqbu0c1n] { transform: scale(1.06); }

.aim-style-card-veil[b-xogqbu0c1n] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 8, 23, 0.80) 0%, rgba(2, 8, 23, 0.26) 45%, rgba(2, 8, 23, 0.04) 100%);
    transition: background 0.18s var(--ds-ease);
}

.aim-style-card.is-on .aim-style-card-veil[b-xogqbu0c1n] {
    background: linear-gradient(to top, rgba(2, 8, 23, 0.82) 0%, rgba(3, 106, 196, 0.40) 62%, rgba(3, 106, 196, 0.16) 100%);
}

.aim-style-card-name[b-xogqbu0c1n] {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.aim-style-card-check[b-xogqbu0c1n] {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--brand-600);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s var(--ds-ease), transform 0.18s var(--ds-ease);
}

.aim-style-card-check[b-xogqbu0c1n]  svg { fill: #fff; }
.aim-style-card.is-on .aim-style-card-check[b-xogqbu0c1n] { opacity: 1; transform: scale(1); }

/* ===== 2) Yönerge ===== */
.aim-instruct[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aim-chosen[b-xogqbu0c1n] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-alt);
}

.aim-chosen img[b-xogqbu0c1n] {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: var(--ds-radius-sm);
    object-fit: cover;
}

.aim-chosen-text[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.aim-chosen-eyebrow[b-xogqbu0c1n] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-subtle);
}

.aim-chosen-name[b-xogqbu0c1n] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ds-text);
}

.aim-chosen-desc[b-xogqbu0c1n] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aim-chosen-change[b-xogqbu0c1n] {
    flex: none;
    padding: 6px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    background: var(--ds-surface);
    font-family: var(--ds-font-ui);
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.aim-chosen-change:hover[b-xogqbu0c1n] { border-color: var(--brand-600); color: var(--brand-700); }
.aim-chosen-change:focus-visible[b-xogqbu0c1n] { outline: 2px solid var(--brand-600); outline-offset: 1px; }

.aim-instr-field[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aim-instr[b-xogqbu0c1n] {
    min-height: 150px;
    resize: vertical;
    line-height: 1.55;
}

/* ===== 3) Ürün seçimi ===== */
.aim-select[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aim-select-head[b-xogqbu0c1n] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.aim-select-count[b-xogqbu0c1n] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.aim-select-scroll[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: min(56vh, 520px);
    overflow-y: auto;
    padding-right: 4px;
}

.aim-cat[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aim-cat-name[b-xogqbu0c1n] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-subtle);
}

.aim-cat-products[b-xogqbu0c1n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}

.aim-prod[b-xogqbu0c1n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    text-align: left;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease);
}

.aim-prod:hover[b-xogqbu0c1n] { border-color: var(--ds-border-strong); }
.aim-prod.is-on[b-xogqbu0c1n] { border-color: var(--brand-600); background: var(--ds-surface-alt); }
.aim-prod:focus-visible[b-xogqbu0c1n] { outline: 2px solid var(--brand-600); outline-offset: 1px; }

.aim-prod-thumb[b-xogqbu0c1n] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--ds-radius-sm);
    object-fit: cover;
    background: var(--ds-surface-sunken);
}

.aim-prod-thumb--empty[b-xogqbu0c1n] {
    display: grid;
    place-items: center;
    color: var(--ds-text-subtle);
}

.aim-prod-name[b-xogqbu0c1n] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aim-badge[b-xogqbu0c1n] {
    flex: none;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ds-surface-sunken);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ds-text-muted);
}

/* ===== 4) Üretim ===== */
.aim-generating[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 6px;
}

.aim-gen-head[b-xogqbu0c1n] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    color: var(--ds-text);
}

/* Nabız gibi atan üretim küresi */
.aim-orb[b-xogqbu0c1n] {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, #4aa3ec, var(--brand-600) 70%);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-600) 55%, transparent);
    animation: aim-orb-pulse-b-xogqbu0c1n 1.4s ease-in-out infinite;
}

@keyframes aim-orb-pulse-b-xogqbu0c1n {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-600) 45%, transparent); transform: scale(1); }
    70% { box-shadow: 0 0 0 12px transparent; transform: scale(1.08); }
    100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

.aim-gen-bar[b-xogqbu0c1n] {
    height: 6px;
    border-radius: 999px;
    background: var(--ds-surface-sunken);
    overflow: hidden;
}

.aim-gen-bar span[b-xogqbu0c1n] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-600), #4aa3ec);
    transition: width 0.4s var(--ds-ease);
}

.aim-warn[b-xogqbu0c1n] {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--ds-radius-sm);
    background: color-mix(in srgb, var(--ds-warning) 12%, transparent);
    color: var(--ds-text);
    font-size: 0.75rem;
}

/* Canlı akan üretim kareleri */
.aim-gen-grid[b-xogqbu0c1n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: 46vh;
    overflow-y: auto;
    padding: 2px;
}

.aim-gen-cell[b-xogqbu0c1n] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    overflow: hidden;
}

.aim-gen-cell--running[b-xogqbu0c1n] { border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 14%, transparent); }
.aim-gen-cell--done[b-xogqbu0c1n] { border-color: var(--ds-border); animation: aim-stage-in-b-xogqbu0c1n 0.3s var(--ds-ease); }
.aim-gen-cell--failed[b-xogqbu0c1n] { border-color: var(--ds-danger); }

.aim-gen-cell img[b-xogqbu0c1n] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aim-gen-cell-name[b-xogqbu0c1n] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 7px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(2, 8, 23, 0.75), transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Görseli olmayan (bekleyen/hatalı) karede etiket koyu metin */
.aim-gen-cell:not(.aim-gen-cell--done) .aim-gen-cell-name[b-xogqbu0c1n] {
    color: var(--ds-text-muted);
    background: none;
    text-shadow: none;
}

/* ===== 5) Sonuç — kompakt kart ızgarası ===== */
.aim-review[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aim-review-head[b-xogqbu0c1n] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.aim-replace[b-xogqbu0c1n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    cursor: pointer;
    white-space: nowrap;
}

.aim-review-hint[b-xogqbu0c1n] {
    flex: 1;
    min-width: 140px;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--ds-text-subtle);
}

.aim-review-grid[b-xogqbu0c1n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    padding: 2px;
}

.aim-review-grid.is-single[b-xogqbu0c1n] {
    grid-template-columns: minmax(240px, 320px);
    justify-content: center;
    max-height: none;
}

.aim-review-card[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 12px);
    overflow: hidden;
    animation: aim-stage-in-b-xogqbu0c1n 0.3s var(--ds-ease);
    transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}

.aim-review-card.is-on[b-xogqbu0c1n] {
    border-color: var(--brand-600);
    box-shadow: 0 4px 14px rgba(3, 106, 196, 0.14);
}

/* Figure = tıklanabilir seç/bırak alanı (tüm görsel) */
.aim-review-figure[b-xogqbu0c1n] {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    padding: 0;
    border: none;
    background: var(--ds-surface-sunken);
    cursor: pointer;
    overflow: hidden;
    display: block;
}

.aim-review-figure:disabled[b-xogqbu0c1n] { cursor: default; }
.aim-review-figure:focus-visible[b-xogqbu0c1n] { outline: 2px solid var(--brand-600); outline-offset: -2px; }

.aim-review-figure > img[b-xogqbu0c1n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.2s var(--ds-ease), transform 0.2s var(--ds-ease);
}

/* Seçili DEĞİLKEN görsel yıkanmaz — gri tonlanır + hafif küçülür, "seçili değil" net anlaşılır */
.aim-review-card.is-off .aim-review-figure > img[b-xogqbu0c1n] {
    filter: grayscale(1) brightness(0.9);
    transform: scale(0.97);
}

/* Sağ üstteki seçim tik'i */
.aim-review-tick[b-xogqbu0c1n] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--brand-600);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s var(--ds-ease), opacity 0.2s var(--ds-ease);
}

.aim-review-tick[b-xogqbu0c1n]  svg { fill: #fff; }
.aim-review-card.is-off .aim-review-tick[b-xogqbu0c1n] { background: rgba(2, 8, 23, 0.4); }
.aim-review-card.is-off .aim-review-tick[b-xogqbu0c1n]  svg { opacity: 0; }

/* Yeniden üretim: eski görsel yerinde kalır, üstüne blur + spinner biner (transient) */
.aim-review-loading[b-xogqbu0c1n] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(3px);
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--ds-text);
    animation: aim-fade-in-b-xogqbu0c1n 0.2s var(--ds-ease);
}

@keyframes aim-fade-in-b-xogqbu0c1n {
    from { opacity: 0; }
    to { opacity: 1; }
}

.aim-review-generating[b-xogqbu0c1n],
.aim-review-failed[b-xogqbu0c1n] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    text-align: center;
    padding: 8px;
}

.aim-review-failed[b-xogqbu0c1n] { color: var(--ds-danger); }

.aim-review-foot[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px 10px;
}

.aim-review-name[b-xogqbu0c1n] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Düzeltme notu: rahat yazılabilir alan — uzun not için dikey büyütülebilir */
.aim-review-regen[b-xogqbu0c1n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aim-review-note[b-xogqbu0c1n] {
    width: 100%;
    min-height: 52px;
    resize: vertical;
    font-size: 0.75rem;
    line-height: 1.45;
}

.aim-review-regen-btn[b-xogqbu0c1n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    align-self: flex-end;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.aim-review-regen-btn:hover:not(:disabled)[b-xogqbu0c1n] { border-color: var(--brand-600); color: var(--brand-700); }
.aim-review-regen-btn:disabled[b-xogqbu0c1n] { opacity: 0.5; cursor: not-allowed; }
.aim-review-regen-btn:focus-visible[b-xogqbu0c1n] { outline: 2px solid var(--brand-600); outline-offset: 1px; }
.aim-review-regen-btn[b-xogqbu0c1n]  svg { width: 13px; height: 13px; }

/* ===== Footer maliyet ===== */
.aim-footer-cost[b-xogqbu0c1n] {
    margin-right: auto;
    align-self: center;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--ds-text-subtle);
}

.aim-footer-cost strong[b-xogqbu0c1n] { font-weight: 700; color: var(--ds-text-muted); }

/* ===== Ortak ===== */
/* /Components/Pages/Menus/Dialogs/BulkPriceUpdateModal.razor.rz.scp.css */
.bpu[b-gjr8ylfwd5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Segmented Fiyat / KDV toggle */
.bpu-seg[b-gjr8ylfwd5] {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    width: fit-content;
}

.bpu-seg-btn[b-gjr8ylfwd5] {
    border: none;
    background: transparent;
    padding: 7px 18px;
    border-radius: 6px;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.bpu-seg-btn:hover[b-gjr8ylfwd5] { color: var(--ds-text); }

.bpu-seg-btn.is-active[b-gjr8ylfwd5] {
    background: var(--ds-surface);
    color: var(--brand-700);
    box-shadow: var(--ds-shadow-1);
}

.bpu-seg-btn:focus-visible[b-gjr8ylfwd5] {
    outline: 2px solid var(--brand-600);
    outline-offset: 1px;
}

/* Operation / amount config row */
.bpu-config-row[b-gjr8ylfwd5] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.bpu-config-row > .ds-field[b-gjr8ylfwd5] { flex: 1 1 0; min-width: 0; }
.bpu-narrow[b-gjr8ylfwd5] { flex: 0 0 130px !important; }

/* ===== Preview ===== */
.bpu-preview[b-gjr8ylfwd5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--ds-border);
    padding-top: 14px;
}

.bpu-preview-head[b-gjr8ylfwd5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bpu-count[b-gjr8ylfwd5] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.bpu-table[b-gjr8ylfwd5] {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    max-height: 340px;
    overflow-y: auto;
}

.bpu-thead[b-gjr8ylfwd5],
.bpu-trow[b-gjr8ylfwd5] {
    display: grid;
    grid-template-columns: 36px 1fr 110px 150px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.bpu-thead[b-gjr8ylfwd5] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ds-surface-sunken);
    border-bottom: 1px solid var(--ds-border);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-muted);
}

.bpu-trow[b-gjr8ylfwd5] {
    border-bottom: 1px solid var(--ds-border);
    transition: opacity var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}

.bpu-trow:last-child[b-gjr8ylfwd5] { border-bottom: none; }
.bpu-trow:hover[b-gjr8ylfwd5] { background: var(--ds-surface-alt); }

.bpu-trow.is-excluded[b-gjr8ylfwd5] {
    opacity: 0.45;
}

.bpu-c-chk[b-gjr8ylfwd5] { display: inline-flex; }

.bpu-c-name[b-gjr8ylfwd5] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bpu-name[b-gjr8ylfwd5] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpu-cat[b-gjr8ylfwd5] {
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpu-c-old[b-gjr8ylfwd5] {
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    text-decoration: line-through;
}

.bpu-c-new[b-gjr8ylfwd5] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bpu-newinput[b-gjr8ylfwd5] {
    height: 34px;
    text-align: right;
    /* hide number spinners */
    -moz-appearance: textfield;
}

.bpu-newinput[b-gjr8ylfwd5]::-webkit-outer-spin-button,
.bpu-newinput[b-gjr8ylfwd5]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bpu-suffix[b-gjr8ylfwd5] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    flex-shrink: 0;
}

.bpu-empty[b-gjr8ylfwd5] {
    padding: 20px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--ds-text-muted);
    background: var(--ds-surface-alt);
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
}

@media (max-width: 600px) {
    .bpu-thead[b-gjr8ylfwd5],
    .bpu-trow[b-gjr8ylfwd5] { grid-template-columns: 30px 1fr 80px 120px; }
    .bpu-narrow[b-gjr8ylfwd5] { flex: 1 1 auto !important; }
}
/* /Components/Pages/Menus/Dialogs/DuplicateMenuOptionsDialog.razor.rz.scp.css */
.dmo[b-7dg3w8ldy4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dmo-option[b-7dg3w8ldy4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease),
                background-color var(--ds-dur-fast) var(--ds-ease),
                box-shadow var(--ds-dur-fast) var(--ds-ease);
}

.dmo-option:hover[b-7dg3w8ldy4] {
    border-color: var(--ds-border-strong);
    background: var(--ds-surface-alt);
}

.dmo-option.is-selected[b-7dg3w8ldy4] {
    border-color: var(--brand-600);
    background: var(--brand-50);
    box-shadow: var(--ds-shadow-1);
}

.dmo-option:focus-visible[b-7dg3w8ldy4] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.dmo-option__icon[b-7dg3w8ldy4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ds-text-muted);
}

.dmo-option.is-selected .dmo-option__icon[b-7dg3w8ldy4] {
    color: var(--brand-700);
}

.dmo-option__icon[b-7dg3w8ldy4]  svg {
    width: 24px;
    height: 24px;
}

.dmo-option__content[b-7dg3w8ldy4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dmo-option__title[b-7dg3w8ldy4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.dmo-option__desc[b-7dg3w8ldy4] {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-muted);
}
/* /Components/Pages/Menus/Dialogs/EditProductDialog.razor.rz.scp.css */
.epd[b-u3d48z32ym] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Price / VAT / Unit triple row */
.epd-row[b-u3d48z32ym] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.epd-row > .ds-field[b-u3d48z32ym] {
    flex: 1 1 0;
    min-width: 120px;
}

/* Active checkbox row */
.epd-check[b-u3d48z32ym] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    width: fit-content;
}

.epd-check:focus-visible[b-u3d48z32ym] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
    border-radius: var(--ds-radius-sm);
}

/* Existing image gallery */
.epd-image-list[b-u3d48z32ym] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.epd-image-item[b-u3d48z32ym] {
    position: relative;
    width: 120px;
    height: 90px;
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface-alt);
}

.epd-image-item img[b-u3d48z32ym] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.epd-image-remove[b-u3d48z32ym] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55);
    color: #ffffff;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.epd-image-remove svg[b-u3d48z32ym] { width: 15px; height: 15px; }

.epd-image-remove:hover[b-u3d48z32ym] { background: var(--ds-danger); }

.epd-image-remove:focus-visible[b-u3d48z32ym] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.epd-uploader[b-u3d48z32ym] {
    margin-top: 4px;
}

/* Modifier groups */
.epd-groups[b-u3d48z32ym] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--ds-border);
    padding-top: 14px;
}

.epd-groups-title[b-u3d48z32ym] {
    font-family: var(--ds-font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-text);
}

.epd-groups-list[b-u3d48z32ym] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 8px;
    background: var(--ds-surface-alt);
}

.epd-group-row[b-u3d48z32ym] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 6px 8px;
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    color: var(--ds-text);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.epd-group-row:hover[b-u3d48z32ym] {
    background: var(--ds-surface-sunken);
}

.epd-group-name[b-u3d48z32ym] {
    font-weight: 600;
}

.epd-badge[b-u3d48z32ym] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill);
}

.epd-badge--required[b-u3d48z32ym] {
    background: #fef3c7;
    color: #b45309;
}

.epd-badge--exclusive[b-u3d48z32ym] {
    background: #fee2e2;
    color: #b91c1c;
}

/* Stock tracking section */
.epd-stock[b-u3d48z32ym] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--ds-border);
    padding-top: 14px;
}

.epd-stock-hint[b-u3d48z32ym] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ds-text-muted, var(--ds-text));
}

@media (max-width: 600px) {
    .epd-row > .ds-field[b-u3d48z32ym] { flex: 1 1 100%; }
}
/* /Components/Pages/Menus/Dialogs/GoogleReviewsPanel.razor.rz.scp.css */
.grv[b-52f7004nhr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--slate-200, #e2e8f0);
}

.grv--state[b-52f7004nhr] {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--slate-500, #64748b);
    font-size: 14px;
}

.grv__head[b-52f7004nhr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: var(--slate-800, #1e293b);
}

.grv__gicon[b-52f7004nhr] { display: inline-flex; }

.grv__summary[b-52f7004nhr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grv__score[b-52f7004nhr] {
    font-size: 26px;
    font-weight: 800;
    color: var(--slate-900, #0f172a);
    line-height: 1;
}

.grv__stars[b-52f7004nhr] { color: #fbbc05; display: inline-flex; }
.grv__stars svg[b-52f7004nhr] { display: block; }
.grv__stars--sm svg[b-52f7004nhr] { width: 12px; height: 12px; }

.grv__count[b-52f7004nhr] { font-size: 13px; color: var(--slate-500, #64748b); }

/* Photos — horizontal scroll strip */
.grv__photos[b-52f7004nhr] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
}

.grv__photo-btn[b-52f7004nhr] {
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 10px;
    scroll-snap-align: start;
    transition: transform .12s ease;
}
.grv__photo-btn:hover[b-52f7004nhr] { transform: scale(1.03); }
.grv__photo-btn:focus-visible[b-52f7004nhr] { outline: 2px solid var(--accent); outline-offset: 2px; }

.grv__photo[b-52f7004nhr] {
    display: block;
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--slate-100, #f1f5f9);
}

/* Lightbox — fullscreen enlarged photo, click anywhere to close. */
.grv-lightbox[b-52f7004nhr] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
    animation: grv-fade-b-52f7004nhr .15s ease;
}

@keyframes grv-fade-b-52f7004nhr { from { opacity: 0; } to { opacity: 1; } }

.grv-lightbox__img[b-52f7004nhr] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.grv-lightbox__close[b-52f7004nhr] {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.grv-lightbox__close:hover[b-52f7004nhr] { background: rgba(255, 255, 255, 0.28); }
.grv-lightbox__close:focus-visible[b-52f7004nhr] { outline: 2px solid #fff; outline-offset: 2px; }

.grv__reviews[b-52f7004nhr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grv__review[b-52f7004nhr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--slate-200, #e2e8f0);
    border-radius: 12px;
    background: var(--slate-50, #f8fafc);
}

.grv__review-head[b-52f7004nhr] { display: flex; align-items: center; gap: 10px; }

.grv__avatar[b-52f7004nhr] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.grv__avatar--fallback[b-52f7004nhr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.grv__review-meta[b-52f7004nhr] { display: flex; flex-direction: column; gap: 2px; }
.grv__author[b-52f7004nhr] { font-weight: 600; font-size: 14px; color: var(--slate-800, #1e293b); }
.grv__review-sub[b-52f7004nhr] { display: inline-flex; align-items: center; gap: 8px; }
.grv__time[b-52f7004nhr] { font-size: 12px; color: var(--slate-500, #64748b); }

.grv__review-text[b-52f7004nhr] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate-600, #475569);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.grv__actions[b-52f7004nhr] { display: flex; gap: 8px; flex-wrap: wrap; }

.grv__btn[b-52f7004nhr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, background .15s ease;
}

.grv__btn:focus-visible[b-52f7004nhr] { outline: 2px solid var(--accent); outline-offset: 2px; }

.grv__btn--primary[b-52f7004nhr] { background: var(--accent); color: #fff; }
.grv__btn--primary:hover[b-52f7004nhr] { filter: brightness(.94); }

.grv__btn--ghost[b-52f7004nhr] {
    background: transparent;
    border: 1px solid var(--slate-300, #cbd5e1);
    color: var(--slate-700, #334155);
}
.grv__btn--ghost:hover[b-52f7004nhr] { background: var(--slate-100, #f1f5f9); }

.grv__attribution[b-52f7004nhr] {
    margin: 0;
    font-size: 11px;
    color: var(--slate-400, #94a3b8);
}
/* /Components/Pages/Menus/Dialogs/ImportProductsModal.razor.rz.scp.css */
/* ===== Processing ===== */
.ip-processing[b-q2ixhwmv3p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-7) var(--ds-space-4);
    text-align: center;
}
.ip-processing__title[b-q2ixhwmv3p] { margin: 0; font-weight: 700; color: var(--ds-text); }
.ip-processing__sub[b-q2ixhwmv3p] { margin: 0; font-size: 0.875rem; color: var(--ds-text-muted); }


/* ===== Upload ===== */
.ip-upload[b-q2ixhwmv3p] { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.ip-upload__head[b-q2ixhwmv3p] { display: flex; flex-direction: column; gap: 2px; }
.ip-upload__title[b-q2ixhwmv3p] { margin: 0; font-weight: 700; color: var(--ds-text); }
.ip-upload__hint[b-q2ixhwmv3p] { margin: 0; font-size: 0.8125rem; color: var(--ds-text-muted); }

.ip-dropzone[b-q2ixhwmv3p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--ds-space-6);
    border: 1.5px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-alt);
    color: var(--ds-text-muted);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease);
}
.ip-dropzone:hover[b-q2ixhwmv3p] { border-color: var(--brand-600); background: var(--brand-50); }

.ip-dropzone__icon[b-q2ixhwmv3p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand-600);
}
.ip-dropzone__icon[b-q2ixhwmv3p]  svg { width: 26px; height: 26px; color: var(--brand-600); fill: var(--brand-600); }

.ip-dropzone__text[b-q2ixhwmv3p] { font-weight: 600; color: var(--ds-text); }

/* Açık, açıklayıcı aksiyon butonu — ikon + etiket (native input gizli). */
.ip-dropzone__btn[b-q2ixhwmv3p] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-600);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    transition: filter var(--ds-dur-fast) var(--ds-ease);
}
.ip-dropzone:hover .ip-dropzone__btn[b-q2ixhwmv3p] { filter: brightness(0.94); }
.ip-dropzone__btn[b-q2ixhwmv3p]  svg { width: 16px; height: 16px; color: #fff; fill: #fff; }

.ip-dropzone__hint[b-q2ixhwmv3p] { font-size: 0.75rem; }

/* Hide the native file input — the styled label is the click target. The input
   is rendered by the InputFile child component, so it doesn't carry this
   component's scope id; reach it with ::deep instead of a plain class rule. */
.ip-dropzone[b-q2ixhwmv3p]  .ip-file {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
}

.ip-files[b-q2ixhwmv3p] { display: flex; flex-direction: column; gap: var(--ds-space-2); }

.ip-file-chip[b-q2ixhwmv3p] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}
.ip-file-chip[b-q2ixhwmv3p]  svg { color: var(--brand-600); flex-shrink: 0; }
.ip-file-chip__name[b-q2ixhwmv3p] { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 500; color: var(--ds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-file-chip__size[b-q2ixhwmv3p] { font-size: 0.75rem; color: var(--ds-text-subtle); flex-shrink: 0; }
.ip-file-chip__rm[b-q2ixhwmv3p] { width: 28px; height: 28px; border: none; background: transparent; }
.ip-file-chip__rm:hover[b-q2ixhwmv3p] { background: var(--ds-surface-sunken); }

/* ===== Operatör notu ===== */
.ip-note[b-q2ixhwmv3p] { display: flex; flex-direction: column; gap: 6px; }

.ip-note__label[b-q2ixhwmv3p] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
}

.ip-note__input[b-q2ixhwmv3p] {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.45;
    resize: vertical;
    min-height: calc(3 * 1.45em + 16px);
    padding: var(--ds-space-2) var(--ds-space-3);
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}
.ip-note__input[b-q2ixhwmv3p]::placeholder { color: var(--ds-text-subtle); }
.ip-note__input:hover[b-q2ixhwmv3p] { border-color: var(--ds-border-strong); }
.ip-note__input:focus-visible[b-q2ixhwmv3p] {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px var(--brand-50);
}

.ip-note__foot[b-q2ixhwmv3p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-3);
}
.ip-note__hint[b-q2ixhwmv3p] { font-size: 0.75rem; line-height: 1.4; color: var(--ds-text-muted); }
.ip-note__count[b-q2ixhwmv3p] { font-size: 0.6875rem; color: var(--ds-text-subtle); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ===== Preview ===== */
.ip-preview[b-q2ixhwmv3p] { display: flex; flex-direction: column; gap: var(--ds-space-3); }

/* Sticky özet/"tümünü seç" çubuğu — am-body kaydırılırken üstte kalır. */
.ip-preview__summary[b-q2ixhwmv3p] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    padding: 10px 12px;
    background: var(--brand-50);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}
.ip-preview__summary-text[b-q2ixhwmv3p] { font-size: 0.8125rem; font-weight: 600; color: var(--ds-text); }

.ip-selectall[b-q2ixhwmv3p] {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    padding: 0;
}
.ip-selectall:focus-visible[b-q2ixhwmv3p] { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 4px; }

.ip-empty[b-q2ixhwmv3p] { padding: var(--ds-space-5); color: var(--ds-text-muted); font-size: 0.875rem; text-align: center; }

.ip-groups[b-q2ixhwmv3p] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}

.ip-group[b-q2ixhwmv3p] {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    overflow: hidden;
}

.ip-group__head[b-q2ixhwmv3p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ds-surface-alt);
    border-bottom: 1px solid var(--ds-border);
}
.ip-group__name[b-q2ixhwmv3p] {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--ds-text);
    text-transform: capitalize;
}
.ip-group__badge[b-q2ixhwmv3p] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill);
}
.ip-group__badge.is-new[b-q2ixhwmv3p] { background: var(--brand-50); color: var(--brand-600); }
.ip-group__badge.is-existing[b-q2ixhwmv3p] { background: var(--ds-surface-sunken); color: var(--ds-text-muted); }
.ip-group__count[b-q2ixhwmv3p] {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-sunken);
    color: var(--ds-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
}

.ip-group__rows[b-q2ixhwmv3p] { display: flex; flex-direction: column; }

.ip-row[b-q2ixhwmv3p] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ds-border);
}
.ip-row:last-child[b-q2ixhwmv3p] { border-bottom: none; }
.ip-row.is-excluded[b-q2ixhwmv3p] { opacity: 0.45; }

.ip-row__chk[b-q2ixhwmv3p] {
    flex-shrink: 0;
    padding: 2px 0 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.ip-row__chk:focus-visible[b-q2ixhwmv3p] { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 6px; }

.ip-row__main[b-q2ixhwmv3p] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ip-row__top[b-q2ixhwmv3p] { display: flex; align-items: center; gap: 8px; }

/* Kompakt, satır içi düzenlenebilir alanlar — büyük form kutuları yerine
   menü editörüyle uyumlu hafif görünüm. */
.ip-row__name[b-q2ixhwmv3p],
.ip-row__desc[b-q2ixhwmv3p] {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--ds-radius-sm);
    padding: 4px 6px;
    color: var(--ds-text);
    transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}
.ip-row__name[b-q2ixhwmv3p] { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 600; }
.ip-row__desc[b-q2ixhwmv3p] {
    resize: none;
    line-height: 1.35;
    height: calc(2 * 1.35em + 10px);
    overflow-y: auto;
    font-size: 0.75rem;
    color: var(--ds-text-muted);
}
.ip-row__name:hover[b-q2ixhwmv3p],
.ip-row__desc:hover[b-q2ixhwmv3p] { background: var(--ds-surface-sunken); }
.ip-row__name:focus[b-q2ixhwmv3p],
.ip-row__desc:focus[b-q2ixhwmv3p] {
    outline: none;
    background: var(--ds-surface);
    border-color: var(--brand-600);
}
.ip-row__name[b-q2ixhwmv3p]::placeholder,
.ip-row__desc[b-q2ixhwmv3p]::placeholder { color: var(--ds-text-subtle); font-weight: 400; }

.ip-tag[b-q2ixhwmv3p] {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: var(--ds-radius-pill);
    white-space: nowrap;
}
.ip-tag.is-new[b-q2ixhwmv3p] { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.ip-tag.is-dup[b-q2ixhwmv3p] { background: var(--ds-surface-sunken); color: var(--ds-text-muted); }

.ip-allergens[b-q2ixhwmv3p] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ip-allergen[b-q2ixhwmv3p] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: var(--ds-radius-pill);
    background: #fef3c7;
    color: #b45309;
}

.ip-row__price[b-q2ixhwmv3p] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; padding-top: 2px; }
.ip-row__priceinput[b-q2ixhwmv3p] {
    width: 88px;
    box-sizing: border-box;
    text-align: right;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    border-radius: var(--ds-radius-sm);
    padding: 6px 8px;
}
.ip-row__priceinput:focus[b-q2ixhwmv3p] { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.12); }
.ip-row__cur[b-q2ixhwmv3p] { color: var(--ds-text-muted); font-size: 0.875rem; }

/* ===== Footer ===== */
.ip-footer[b-q2ixhwmv3p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--ds-space-2);
}
.ip-footer__right[b-q2ixhwmv3p] { display: flex; align-items: center; gap: var(--ds-space-2); }

@media (max-width: 640px) {
    .ip-row[b-q2ixhwmv3p] { flex-wrap: wrap; }
    .ip-row__price[b-q2ixhwmv3p] { width: 100%; justify-content: flex-end; }
}
/* /Components/Pages/Menus/Dialogs/MenuTypeSelectionModal.razor.rz.scp.css */
/* ===== Method choice ===== */
.mtm-methods[b-udxboj57t2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-space-3);
}

.mtm-method[b-udxboj57t2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-5) var(--ds-space-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition: transform var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
.mtm-method:hover[b-udxboj57t2] {
    transform: translateY(-3px);
    border-color: var(--brand-600);
    box-shadow: var(--ds-shadow-2);
}
.mtm-method:focus-visible[b-udxboj57t2] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.mtm-method__icon[b-udxboj57t2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: var(--ds-radius-md);
    background: var(--brand-50);
    color: var(--brand-600);
}
.mtm-method__icon[b-udxboj57t2]  svg { width: 30px; height: 30px; }

.mtm-method__title[b-udxboj57t2] { font-weight: 700; color: var(--ds-text); }
.mtm-method__desc[b-udxboj57t2] { font-size: 0.8125rem; color: var(--ds-text-muted); line-height: 1.4; }

/* ===== Processing ===== */
.mtm-processing[b-udxboj57t2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-7) var(--ds-space-4);
    text-align: center;
}
.mtm-processing__title[b-udxboj57t2] { margin: 0; font-weight: 700; color: var(--ds-text); }
.mtm-processing__sub[b-udxboj57t2] { margin: 0; font-size: 0.875rem; color: var(--ds-text-muted); }


/* ===== Upload ===== */
.mtm-upload[b-udxboj57t2] { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.mtm-upload__head[b-udxboj57t2] { display: flex; flex-direction: column; gap: 2px; }
.mtm-upload__title[b-udxboj57t2] { margin: 0; font-weight: 700; color: var(--ds-text); }
.mtm-upload__hint[b-udxboj57t2] { margin: 0; font-size: 0.8125rem; color: var(--ds-text-muted); }

.mtm-dropzone[b-udxboj57t2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-6);
    border: 1.5px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-alt);
    color: var(--ds-text-muted);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease);
}
.mtm-dropzone:hover[b-udxboj57t2] { border-color: var(--brand-600); background: var(--brand-50); }
.mtm-dropzone[b-udxboj57t2] { gap: 10px; }

.mtm-dropzone__icon[b-udxboj57t2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand-600);
}
.mtm-dropzone__icon[b-udxboj57t2]  svg { width: 26px; height: 26px; color: var(--brand-600); fill: var(--brand-600); }

.mtm-dropzone__text[b-udxboj57t2] { font-weight: 600; color: var(--ds-text); }

/* Açık, açıklayıcı aksiyon butonu — ikon + etiket (native input gizli). */
.mtm-dropzone__btn[b-udxboj57t2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-600);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    transition: filter var(--ds-dur-fast) var(--ds-ease);
}
.mtm-dropzone:hover .mtm-dropzone__btn[b-udxboj57t2] { filter: brightness(0.94); }
.mtm-dropzone__btn[b-udxboj57t2]  svg { width: 16px; height: 16px; color: #fff; fill: #fff; }

.mtm-dropzone__hint[b-udxboj57t2] { font-size: 0.75rem; }

/* Hide the native file input — the styled label is the click target. The input
   is rendered by the InputFile child component, so it doesn't carry this
   component's scope id; reach it with ::deep instead of a plain class rule. */
.mtm-dropzone[b-udxboj57t2]  .mtm-file {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
}

.mtm-files[b-udxboj57t2] { display: flex; flex-direction: column; gap: var(--ds-space-2); }

.mtm-file-chip[b-udxboj57t2] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}
.mtm-file-chip[b-udxboj57t2]  svg { color: var(--brand-600); flex-shrink: 0; }
.mtm-file-chip__name[b-udxboj57t2] { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 500; color: var(--ds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtm-file-chip__size[b-udxboj57t2] { font-size: 0.75rem; color: var(--ds-text-subtle); flex-shrink: 0; }
.mtm-file-chip__rm[b-udxboj57t2] { width: 28px; height: 28px; border: none; background: transparent; }
.mtm-file-chip__rm:hover[b-udxboj57t2] { background: var(--ds-surface-sunken); }

/* ===== Preview ===== */
.mtm-preview[b-udxboj57t2] { display: flex; flex-direction: column; gap: var(--ds-space-3); }

.mtm-preview__summary[b-udxboj57t2] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    background: var(--brand-50);
    border-radius: var(--ds-radius-sm);
    font-size: 0.875rem;
    color: var(--ds-text);
}

.mtm-preview__body[b-udxboj57t2] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--ds-space-3);
    min-height: 240px;
}

.mtm-preview__cats[b-udxboj57t2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.mtm-cat[b-udxboj57t2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}
.mtm-cat:hover[b-udxboj57t2] { background: var(--ds-surface-alt); }
.mtm-cat.is-active[b-udxboj57t2] { border-color: var(--brand-600); background: var(--brand-50); }
.mtm-cat__name[b-udxboj57t2] { font-size: 0.875rem; font-weight: 600; color: var(--ds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtm-cat__badge[b-udxboj57t2] {
    flex-shrink: 0;
    min-width: 22px; height: 20px;
    padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-sunken);
    color: var(--ds-text-muted);
    font-size: 0.75rem; font-weight: 700;
}

.mtm-preview__products[b-udxboj57t2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.mtm-product[b-udxboj57t2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: var(--ds-space-2) var(--ds-space-3);
    border-bottom: 1px solid var(--ds-border);
}
.mtm-product:last-child[b-udxboj57t2] { border-bottom: none; }
.mtm-product__info[b-udxboj57t2] { display: flex; flex-direction: column; min-width: 0; }
.mtm-product__name[b-udxboj57t2] { font-size: 0.875rem; font-weight: 600; color: var(--ds-text); }
.mtm-product__desc[b-udxboj57t2] { font-size: 0.75rem; color: var(--ds-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtm-product__prices[b-udxboj57t2] { display: flex; align-items: center; gap: var(--ds-space-2); flex-shrink: 0; }
.mtm-product__struck[b-udxboj57t2] { font-size: 0.75rem; color: var(--ds-text-subtle); text-decoration: line-through; }
.mtm-product__price[b-udxboj57t2] { font-size: 0.875rem; font-weight: 700; color: var(--brand-600); }

.mtm-empty[b-udxboj57t2] { padding: var(--ds-space-4); color: var(--ds-text-muted); font-size: 0.875rem; text-align: center; }

/* ===== Footer ===== */
.mtm-footer[b-udxboj57t2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--ds-space-2);
}
.mtm-footer__right[b-udxboj57t2] { display: flex; align-items: center; gap: var(--ds-space-2); }

@media (max-width: 640px) {
    .mtm-methods[b-udxboj57t2] { grid-template-columns: 1fr; }
    .mtm-preview__body[b-udxboj57t2] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Menus/Dialogs/OrderItemModal.razor.rz.scp.css */
/* =====================================================================
   OrderItemModal — body & footer styles.
   The modal chrome (backdrop, white card, close button, animations) comes
   from AppModal. Everything below styles the content slotted into
   ChildContent + Footer. .oim__* mirrors the structure of the older .oid__*
   from the FluentDialog version, so the visual rhythm is identical.
   ===================================================================== */

.oim[b-xoynwa7pr9] {
    --accent: var(--brand-600);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    font-family: var(--ds-font-ui);
    color: var(--ds-text);
}

/* DS primitives inside the modal adopt the menu accent. */
.oim .ds-stepper-btn[b-xoynwa7pr9] {
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
}
.oim .ds-stepper-btn.ds-stepper-btn--decrease[b-xoynwa7pr9] { background: var(--slate-500); }
.oim .ds-stepper-value[b-xoynwa7pr9] { color: var(--ds-text); font-weight: 700; }
.oim .ds-checkbox.is-checked[b-xoynwa7pr9],
.oim .ds-radio.is-checked[b-xoynwa7pr9] {
    background: var(--accent);
    border-color: var(--accent);
}

.oim .ds-tag--info[b-xoynwa7pr9] {
    background: color-mix(in srgb, var(--accent) 14%, var(--ds-surface));
    color: var(--accent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .oim .ds-tag--info[b-xoynwa7pr9] {
        background: var(--brand-50);
        color: var(--brand-700);
    }
}

/* ---------- Hero strip ---------- */
.oim__hero[b-xoynwa7pr9] {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: var(--ds-space-3);
    align-items: center;
    padding: var(--ds-space-3);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.oim__hero-media[b-xoynwa7pr9] {
    width: 96px;
    height: 96px;
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    background: var(--ds-surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
}

.oim__hero-img[b-xoynwa7pr9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.oim__hero-placeholder[b-xoynwa7pr9] {
    color: var(--ds-text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.oim__hero-body[b-xoynwa7pr9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oim__title[b-xoynwa7pr9] {
    font-family: var(--ds-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ds-text);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.oim__desc[b-xoynwa7pr9] {
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.oim__price[b-xoynwa7pr9] {
    margin-top: 2px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.oim__qty[b-xoynwa7pr9] { align-self: center; }
.oim__qty-field[b-xoynwa7pr9] { width: 56px; }
.oim__qty-field[b-xoynwa7pr9]  input {
    background: transparent;
    border: none;
    text-align: center;
    font-weight: 600;
    color: var(--ds-text);
}
.oim__qty-unit[b-xoynwa7pr9] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    padding: 0 4px;
}

/* ---------- Ağırlık/hacim: miktar + tutar ---------- */
/* Başlık kartının ALTINDA kendi kartı — .oim__hero ile aynı desen (dört tarafı
   border + radius) ki ekran kenarına yaslanmış görünmesin. */
.oim__wq[b-xoynwa7pr9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-4);
    align-items: flex-end;
    margin-top: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.oim__wq-row[b-xoynwa7pr9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.oim__wq-label[b-xoynwa7pr9] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.oim__wq-control[b-xoynwa7pr9] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-1);
}

/* Genişlik FluentNumberField'ın iç input'una ::deep ile dayatılır — dış Class
   web bileşeninin köküne ulaşmadığı için tek başına yetmiyor. */
.oim__wq-row[b-xoynwa7pr9]  input {
    width: 84px;
    box-sizing: border-box;
    padding: 4px 6px;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    text-align: center;
    font-weight: 600;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}

.oim__wq-row[b-xoynwa7pr9]  input:focus-visible {
    border-color: var(--brand-600);
    outline: none;
}

/* Birim seçici (kg | gr) — segment kontrol; aktif olan marka mavisi */
.oim__unit-toggle[b-xoynwa7pr9] {
    display: inline-flex;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
}

.oim__unit-toggle button[b-xoynwa7pr9] {
    border: none;
    background: transparent;
    padding: 3px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}

.oim__unit-toggle button:hover[b-xoynwa7pr9] { background: var(--ds-surface-alt); }

.oim__unit-toggle button.is-active[b-xoynwa7pr9] {
    background: var(--brand-600);
    color: var(--ds-surface);
}

/* ---------- Modifier groups ---------- */
.oim__groups[b-xoynwa7pr9] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

.oim__group[b-xoynwa7pr9] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.oim__group-head[b-xoynwa7pr9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-2);
}

.oim__group-text[b-xoynwa7pr9] { flex: 1; min-width: 0; }

.oim__group-title[b-xoynwa7pr9] {
    font-family: var(--ds-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ds-text);
    margin: 0;
    letter-spacing: -0.005em;
}

.oim__group-desc[b-xoynwa7pr9] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    margin: 2px 0 0;
    line-height: 1.4;
}

.oim__group-tags[b-xoynwa7pr9] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.oim__options[b-xoynwa7pr9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oim__option[b-xoynwa7pr9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: 10px var(--ds-space-3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease),
                border-color var(--ds-dur) var(--ds-ease);
}

.oim__option:hover[b-xoynwa7pr9] {
    background: var(--ds-surface-alt);
    border-color: var(--ds-border-strong);
}

.oim__option.is-selected[b-xoynwa7pr9] {
    background: color-mix(in srgb, var(--accent) 10%, var(--ds-surface));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--ds-border));
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .oim__option.is-selected[b-xoynwa7pr9] {
        background: var(--brand-50);
        border-color: var(--brand-300);
    }
}

.oim__option-main[b-xoynwa7pr9] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    min-width: 0;
    flex: 1;
}

.oim__option-name[b-xoynwa7pr9] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ds-text);
    line-height: 1.3;
    word-break: break-word;
}

.oim__option-aside[b-xoynwa7pr9] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-shrink: 0;
}

.oim__option-price[b-xoynwa7pr9] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* ---------- Notes ---------- */
.oim__notes[b-xoynwa7pr9] { margin-top: var(--ds-space-1); }

/* ---------- Footer (slotted into AppModal's <Footer>) ---------- */
.oim__footer[b-xoynwa7pr9] {
    --accent: var(--brand-600);     /* fallback when no inline override */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    width: 100%;
    flex-wrap: wrap;
}

.oim__footer-total[b-xoynwa7pr9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.oim__footer-total-label[b-xoynwa7pr9] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.oim__footer-total-value[b-xoynwa7pr9] {
    font-family: var(--ds-font-display);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.oim__footer-actions[b-xoynwa7pr9] {
    display: flex;
    gap: var(--ds-space-2);
    align-items: center;
}

/* AppButton Primary inherits the menu accent. ::deep crosses into the
   AppButton component's scope; !important guarantees we beat AppButton's
   own scoped CSS regardless of bundle order. */
.oim__footer[b-xoynwa7pr9]  .ab--primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.10),
        0 6px 18px rgba(15, 23, 42, 0.12);
}

.oim__footer[b-xoynwa7pr9]  .ab--primary:hover:not(:disabled) {
    filter: brightness(0.95);
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 540px) {
    .oim[b-xoynwa7pr9] { gap: var(--ds-space-3); }

    .oim__hero[b-xoynwa7pr9] {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto;
        gap: var(--ds-space-2) var(--ds-space-3);
        padding: 10px;
    }
    .oim__hero-media[b-xoynwa7pr9] { width: 72px; height: 72px; }
    .oim__qty[b-xoynwa7pr9] {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
    .oim__qty .ds-stepper[b-xoynwa7pr9] {
        width: 100%;
        justify-content: space-between;
    }

    .oim__title[b-xoynwa7pr9] { font-size: 0.9375rem; }
    .oim__price[b-xoynwa7pr9] { font-size: 0.9375rem; }

    .oim__group-title[b-xoynwa7pr9] { font-size: 0.875rem; }
    .oim__option[b-xoynwa7pr9] { padding: 10px; }

    .oim__footer[b-xoynwa7pr9] { justify-content: stretch; }
    .oim__footer-actions[b-xoynwa7pr9] { margin-left: auto; }
}
/* /Components/Pages/Menus/Dialogs/ProductDetailsDialog.razor.rz.scp.css */
.pdd[b-j80mcdugmk] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

/* ===== Hero (product header) ===== */
.pdd-hero[b-j80mcdugmk] {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4);
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.pdd-hero__img[b-j80mcdugmk] {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--ds-radius-sm);
    box-shadow: var(--ds-shadow-1);
}

.pdd-hero__img--empty[b-j80mcdugmk] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface-alt);
    color: var(--ds-text-subtle);
    box-shadow: none;
}

.pdd-hero__info[b-j80mcdugmk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.pdd-hero__name[b-j80mcdugmk] {
    margin: 0;
    font-family: var(--ds-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ds-text);
    line-height: 1.3;
}

.pdd-hero__desc[b-j80mcdugmk] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    line-height: 1.45;
}

.pdd-hero__tags[b-j80mcdugmk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-1);
}

.pdd-tech-toggle[b-j80mcdugmk] {
    flex-shrink: 0;
}

/* ===== Sections ===== */
.pdd-section[b-j80mcdugmk] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    padding: var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.pdd-section__title[b-j80mcdugmk] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ds-text);
}

.pdd-section__title[b-j80mcdugmk]  svg {
    color: var(--accent);
}

/* ===== Info grid / rows ===== */
.pdd-grid[b-j80mcdugmk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--ds-space-5);
}

.pdd-row[b-j80mcdugmk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-2) 0;
    border-bottom: 1px solid var(--ds-border);
}

.pdd-row--full[b-j80mcdugmk] {
    grid-column: 1 / -1;
}

.pdd-row--stacked[b-j80mcdugmk] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-space-1);
}

.pdd-row__line[b-j80mcdugmk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-3);
}

.pdd-label[b-j80mcdugmk] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text-muted);
    flex-shrink: 0;
}

.pdd-value[b-j80mcdugmk] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ds-text);
    text-align: right;
}

.pdd-value--struck[b-j80mcdugmk] {
    text-decoration: line-through;
    color: var(--ds-text-subtle);
}

.pdd-value--mono[b-j80mcdugmk] {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
}

.pdd-value--small[b-j80mcdugmk] {
    font-size: 0.75rem;
}

.pdd-value--strong[b-j80mcdugmk] {
    font-weight: 600;
}

.pdd-value--icon[b-j80mcdugmk] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
}

.pdd-value--icon[b-j80mcdugmk]  svg {
    color: var(--ds-warning);
}

.pdd-value--tags[b-j80mcdugmk] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ds-space-1);
    justify-content: flex-end;
}

.pdd-hint[b-j80mcdugmk] {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--ds-text-subtle);
}

/* ===== Modifier groups ===== */
.pdd-groups[b-j80mcdugmk] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.pdd-group[b-j80mcdugmk] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3);
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.pdd-group__head[b-j80mcdugmk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-2);
}

.pdd-group__name[b-j80mcdugmk] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
}

.pdd-group__tags[b-j80mcdugmk] {
    display: inline-flex;
    gap: var(--ds-space-2);
    flex-shrink: 0;
}

.pdd-options[b-j80mcdugmk] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
}

.pdd-option[b-j80mcdugmk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-1) var(--ds-space-2);
    background: var(--ds-surface);
    border-radius: 6px;
}

.pdd-option__name[b-j80mcdugmk] {
    font-size: 0.8125rem;
    color: var(--ds-text);
}

.pdd-option__price[b-j80mcdugmk] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
}

/* ===== Empty state ===== */
.pdd-empty[b-j80mcdugmk] {
    margin: 0;
    padding: var(--ds-space-6);
    text-align: center;
    font-size: 0.875rem;
    color: var(--ds-text-muted);
}

@media (max-width: 600px) {
    .pdd-grid[b-j80mcdugmk] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pdd-hero[b-j80mcdugmk] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Menus/Dialogs/ProductModifiersDialog.razor.rz.scp.css */
.pmd[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Başlık: ikon + başlık solda, ürün logosu + adı sağda (dikey yerden kazanmak için) */
.pmd-head[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-right: 28px; /* köşedeki X butonuyla çakışmasın */
    width: 100%;
}

.pmd-head__title[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pmd-head__icon[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(3, 106, 196, 0.1);
    color: var(--brand-600, #036ac4);
    flex-shrink: 0;
}

.pmd-head__icon svg[b-yjmqf3rgan] { width: 19px; height: 19px; }

.pmd-head__text[b-yjmqf3rgan] {
    margin: 0;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ds-text, #0f172a);
}

.pmd-head__product[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pmd-head__img[b-yjmqf3rgan] {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid var(--ds-border, #e2e8f0);
    flex-shrink: 0;
}

.pmd-head__name[b-yjmqf3rgan] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Gruplar başlığı */
.pmd-groups-head[b-yjmqf3rgan] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pmd-groups-title[b-yjmqf3rgan] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ds-text, #0f172a);
}

.pmd-groups-actions[b-yjmqf3rgan] {
    display: flex;
    gap: 8px;
}

/* Empty state — also carries the explanatory help text so the modal header stays compact */
.pmd-empty[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 20px;
    text-align: center;
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px dashed var(--ds-border-strong, #cbd5e1);
    border-radius: var(--ds-radius-md, 10px);
}

.pmd-empty-title[b-yjmqf3rgan] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.pmd-empty-help[b-yjmqf3rgan] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ds-text-muted, #64748b);
}

/* Grup listesi */
.pmd-groups[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pmd-group[b-yjmqf3rgan] {
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 10px);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pmd-group-head[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pmd-group-name[b-yjmqf3rgan] {
    flex: 1 1 200px;
    min-width: 160px;
    max-width: 260px;
}

/* Onay kutusu satırı */
.pmd-check[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
}

.pmd-minmax[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pmd-minmax-sep[b-yjmqf3rgan] {
    color: var(--ds-text-muted, #64748b);
}

/* Seçenek satırları — gruba AİT oldukları görünsün diye içeriden başlar.
   Sıralama okları iki seviyeye de eklenince satırlar aynı hizadan başlayıp
   hiyerarşi kaybolmuştu; girinti onu geri getiriyor (spacing token: 12px). */
.pmd-options[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    padding-left: 12px;
    border-top: 1px solid var(--ds-border, #e2e8f0);
}

.pmd-option[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pmd-option-name[b-yjmqf3rgan] {
    flex: 1 1 180px;
    min-width: 150px;
    max-width: 260px;
}

/* Kompakt kontroller — grid içinde dar dursunlar */
.pmd-mini[b-yjmqf3rgan] {
    flex: 0 0 110px;
    width: 110px;
    height: 36px;
    padding: 6px 8px;
    font-size: 0.8125rem;
}

.pmd-num[b-yjmqf3rgan] {
    flex: 0 0 76px;
    width: 76px;
    height: 36px;
    padding: 6px 8px;
    font-size: 0.8125rem;
}

.pmd-num--wide[b-yjmqf3rgan] {
    flex: 0 0 92px;
    width: 92px;
}

/* Sıralama okları — silme ikonuyla (.pmd-icon-btn) aynı dil: çerçevesiz, düz,
   nötr renk, hover'da yumuşak zemin. Ölçüler token'lardan: sm buton 26px,
   radius 6 (--radius-sm). Kendi kutu stilini icat etmiyoruz. */
.pmd-reorder[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.pmd-reorder-btn[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--ds-text-muted, #64748b);
    transition: background-color 150ms ease, color 150ms ease;
}

.pmd-reorder-btn:hover:not(:disabled)[b-yjmqf3rgan] {
    background: var(--ds-surface-alt, #f1f5f9);
    color: var(--ds-text, #0f172a);
}

.pmd-reorder-btn:disabled[b-yjmqf3rgan] {
    opacity: 0.3;
    cursor: default;
}

/* İkon butonları (sil) */
.pmd-icon-btn[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ds-text-muted, #64748b);
    transition: background-color 120ms ease, color 120ms ease;
    flex-shrink: 0;
}

.pmd-icon-btn svg[b-yjmqf3rgan] { width: 16px; height: 16px; }

.pmd-icon-btn:hover[b-yjmqf3rgan] {
    background: var(--ds-surface-sunken, #f1f5f9);
}

.pmd-icon-btn--danger:hover[b-yjmqf3rgan] {
    background: #fee2e2;
    color: #b91c1c;
}

.pmd-icon-btn:focus-visible[b-yjmqf3rgan] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

/* Seçenek ekle butonu */
.pmd-add-option[b-yjmqf3rgan] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 6px 10px;
    border: 1px dashed var(--ds-border-strong, #cbd5e1);
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-600, #036ac4);
    transition: background-color 120ms ease, border-color 120ms ease;
}

.pmd-add-option svg[b-yjmqf3rgan] { width: 16px; height: 16px; }

.pmd-add-option:hover[b-yjmqf3rgan] {
    background: rgba(3, 106, 196, 0.06);
    border-color: var(--brand-600, #036ac4);
}

.pmd-add-option:focus-visible[b-yjmqf3rgan] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

/* Başka üründen seçenek grubu içe aktarma paneli */
.pmd-reuse[b-yjmqf3rgan] {
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--brand-600, #036ac4);
    border-radius: var(--ds-radius-md, 10px);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pmd-reuse-head[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pmd-reuse-title[b-yjmqf3rgan] {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ds-text, #0f172a);
}

.pmd-reuse-help[b-yjmqf3rgan] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ds-text-muted, #64748b);
}

.pmd-reuse-empty[b-yjmqf3rgan] {
    padding: 16px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--ds-text-muted, #64748b);
    background: var(--ds-surface, #ffffff);
    border: 1px dashed var(--ds-border-strong, #cbd5e1);
    border-radius: var(--ds-radius-md, 10px);
}

/* Bağla / Kopyala modu seçimi */
.pmd-reuse-mode[b-yjmqf3rgan] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pmd-reuse-mode-btn[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid var(--ds-border, #e2e8f0);
    background: var(--ds-surface, #ffffff);
    border-radius: var(--ds-radius-md, 10px);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.pmd-reuse-mode-btn:hover[b-yjmqf3rgan] {
    border-color: var(--brand-600, #036ac4);
}

.pmd-reuse-mode-btn.is-active[b-yjmqf3rgan] {
    border-color: var(--brand-600, #036ac4);
    background: rgba(3, 106, 196, 0.06);
    box-shadow: inset 0 0 0 1px var(--brand-600, #036ac4);
}

.pmd-reuse-mode-btn:focus-visible[b-yjmqf3rgan] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.pmd-reuse-mode-label[b-yjmqf3rgan] {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--ds-text, #0f172a);
}

.pmd-reuse-mode-hint[b-yjmqf3rgan] {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ds-text-muted, #64748b);
}

/* Aday grup listesi */
.pmd-reuse-list[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 340px;
    overflow-y: auto;
}

.pmd-reuse-item[b-yjmqf3rgan] {
    border: 1px solid var(--ds-border, #e2e8f0);
    background: var(--ds-surface, #ffffff);
    border-radius: var(--ds-radius-md, 10px);
    transition: border-color 120ms ease, background-color 120ms ease;
    overflow: hidden;
    /* Flex kolon + scroll ebeveyni içinde satırlar sıkışmasın: doğal yüksekliklerini
       korusunlar, taşan içerik listenin kendi scroll'una düşsün (üst üste binme fix). */
    flex: 0 0 auto;
}

.pmd-reuse-item:hover[b-yjmqf3rgan] { border-color: var(--brand-600, #036ac4); }

.pmd-reuse-item.is-selected[b-yjmqf3rgan] {
    border-color: var(--brand-600, #036ac4);
    background: rgba(3, 106, 196, 0.05);
}

/* Kompakt satır: [checkbox] [isim + meta + chevron] */
.pmd-reuse-item-head[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
}

.pmd-reuse-check[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 6px;
}

.pmd-reuse-check:focus-visible[b-yjmqf3rgan] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 1px;
}

.pmd-reuse-check .ds-checkbox[b-yjmqf3rgan] { margin: 0; }

.pmd-reuse-expand[b-yjmqf3rgan] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-align: left;
    padding: 4px 2px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
}

.pmd-reuse-expand:focus-visible[b-yjmqf3rgan] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 1px;
}

.pmd-reuse-item-name[b-yjmqf3rgan] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Sabit sütun → farklı isim uzunluklarında meta hep aynı yerden başlar (hizalı, kaymasız). */
    flex: 0 0 180px;
}

.pmd-reuse-item-meta[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--ds-text-muted, #64748b);
}

.pmd-reuse-count[b-yjmqf3rgan] { white-space: nowrap; }

.pmd-reuse-badge[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--ds-surface-sunken, #f1f5f9);
    border: 1px solid var(--ds-border, #e2e8f0);
    font-weight: 600;
    font-size: 0.68rem;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
}

.pmd-reuse-chevron[b-yjmqf3rgan] {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--ds-text-muted, #94a3b8);
    transition: transform 150ms ease;
}

.pmd-reuse-item.is-open .pmd-reuse-chevron[b-yjmqf3rgan] { transform: rotate(180deg); }

/* Genişletilmiş içerik: seçenekler + kullanan ürünler */
.pmd-reuse-detail[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px 10px 40px;
    border-top: 1px dashed var(--ds-border, #e2e8f0);
}

.pmd-reuse-options[b-yjmqf3rgan] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pmd-reuse-opt[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--ds-surface-sunken, #f1f5f9);
    border: 1px solid var(--ds-border, #e2e8f0);
    font-size: 0.75rem;
    color: var(--ds-text, #0f172a);
}

.pmd-reuse-opt--empty[b-yjmqf3rgan] {
    background: transparent;
    border: none;
    font-style: italic;
    color: var(--ds-text-muted, #64748b);
}

.pmd-reuse-opt-price[b-yjmqf3rgan] {
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--brand-600, #036ac4);
}

.pmd-reuse-usedby[b-yjmqf3rgan] {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--ds-text-muted, #64748b);
}

/* ---- Admin.Manage teknik bilgi paneli (grup) ---- */
.pmd-tech-btn[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface, #ffffff);
    color: var(--ds-text-muted, #64748b);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.pmd-tech-btn:hover[b-yjmqf3rgan] { color: var(--brand-600, #036ac4); border-color: var(--brand-600, #036ac4); }
.pmd-tech-btn.is-open[b-yjmqf3rgan] { color: #fff; background: var(--brand-600, #036ac4); border-color: var(--brand-600, #036ac4); }
.pmd-tech-btn[b-yjmqf3rgan]  svg { width: 16px; height: 16px; }
.pmd-tech-btn:focus-visible[b-yjmqf3rgan] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 2px; }

.pmd-tech[b-yjmqf3rgan] {
    margin: -4px 0 4px;
    padding: 10px;
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--ds-border-strong, #cbd5e1);
    border-radius: var(--ds-radius-md, 10px);
}

.pmd-tech-head[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
}

.pmd-tech-title[b-yjmqf3rgan] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted, #64748b);
}

.pmd-tech-copyall[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface, #ffffff);
    color: var(--brand-600, #036ac4);
    font-size: 0.69rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.pmd-tech-copyall:hover[b-yjmqf3rgan] { border-color: var(--brand-600, #036ac4); }
.pmd-tech-copyall[b-yjmqf3rgan]  svg { width: 13px; height: 13px; }

.pmd-tech-list[b-yjmqf3rgan] { display: flex; flex-direction: column; gap: 2px; margin: 0; }

.pmd-tech-item[b-yjmqf3rgan] {
    display: grid;
    grid-template-columns: 120px 1fr 16px;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--ds-radius-sm, 8px);
    cursor: pointer;
}

.pmd-tech-item:hover[b-yjmqf3rgan] { background: var(--ds-surface, #ffffff); }
.pmd-tech-item[b-yjmqf3rgan]  svg { width: 14px; height: 14px; color: var(--ds-text-muted, #94a3b8); }

.pmd-tech-key[b-yjmqf3rgan] {
    font-size: 0.69rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmd-tech-val[b-yjmqf3rgan] {
    margin: 0;
    font-family: var(--ds-font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--ds-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmd-tech-edit[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ds-border, #e2e8f0);
}

.pmd-tech-edit-title[b-yjmqf3rgan] {
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-600, #036ac4);
}

.pmd-tech-field[b-yjmqf3rgan] { display: flex; flex-direction: column; gap: 3px; }

.pmd-tech-field > span[b-yjmqf3rgan] {
    font-size: 0.69rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
}

.pmd-tech-edit input[b-yjmqf3rgan] {
    width: 100%;
    box-sizing: border-box;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface, #ffffff);
    color: var(--ds-text, #0f172a);
    font-size: 0.8125rem;
}

.pmd-tech-edit input:focus[b-yjmqf3rgan] {
    outline: none;
    border-color: var(--brand-600, #036ac4);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.12);
}

.pmd-tech-save[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    border: 1px solid var(--brand-600, #036ac4);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--brand-600, #036ac4);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.pmd-tech-save:hover:not(:disabled)[b-yjmqf3rgan] { background: var(--brand-700, #0257a0); }
.pmd-tech-save:disabled[b-yjmqf3rgan] { opacity: 0.6; cursor: not-allowed; }
.pmd-tech-save[b-yjmqf3rgan]  svg,
.pmd-tech-save[b-yjmqf3rgan]  svg path { width: 14px; height: 14px; fill: #fff !important; }

.pmd-reuse-foot[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    /* Aksiyon butonu ("Seçilenleri Ekle") her zaman erişilebilir kalsın: uzun aday
       listesinde modal gövdesi kaydırılırken panelin altına yapışsın, ekran dışında
       kalıp "seçtim ama eklenmiyor" hissi vermesin. */
    position: sticky;
    bottom: -1px;
    margin: 0 -12px -12px; /* panel iç padding'ini (12px) sıfırlayıp kenara yasla */
    padding: 10px 12px;
    background: var(--ds-surface-alt, #f8fafc);
    border-top: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 0 0 var(--ds-radius-md, 10px) var(--ds-radius-md, 10px);
    z-index: 1;
}

@media (max-width: 640px) {
    .pmd-reuse-mode[b-yjmqf3rgan] { grid-template-columns: 1fr; }
    .pmd-reuse-item-name[b-yjmqf3rgan] { flex-basis: 120px; }
}

/* YZ ile oluşturma onay modalı gövdesi */
.pmd-confirm-text[b-yjmqf3rgan] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ds-text-muted, #64748b);
}

/* AI yükleniyor */
.pmd-ai-loading[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    font-size: 0.8125rem;
    color: var(--ds-text-muted, #64748b);
}


/* Per-option stock link button (sits next to the delete X).
   Fixed width so the chip / button never shift the delete X between rows. */
.pmd-stock-btn[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 152px;
    width: 152px;
    max-width: 152px;
    height: 36px;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pmd-stock-btn span[b-yjmqf3rgan] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmd-stock-btn svg[b-yjmqf3rgan] { flex: 0 0 auto; }
.pmd-stock-btn:hover[b-yjmqf3rgan] { background: var(--ds-surface-sunken, #f1f5f9); }
.pmd-stock-btn:focus-visible[b-yjmqf3rgan] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 2px; }

/* Compact bound-state chip in the option row: material · qty unit + unlink X.
   Same fixed footprint as the button so rows stay aligned regardless of text length. */
.pmd-stock-chip[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 152px;
    width: 152px;
    max-width: 152px;
    min-height: 34px;
    box-sizing: border-box;
    border: 1px solid var(--brand-600, #036ac4);
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--brand-50, #e8f1fb);
    overflow: hidden;
}
.pmd-stock-chip-main[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 8px 5px 10px;
    border: none;
    background: transparent;
    color: var(--brand-700, #024e90);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.pmd-stock-chip-main svg[b-yjmqf3rgan] { flex: 0 0 auto; }
.pmd-stock-chip-txt[b-yjmqf3rgan] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmd-stock-chip-main:hover[b-yjmqf3rgan] { background: rgba(3, 106, 196, 0.08); }
.pmd-stock-chip-x[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    border: none;
    border-left: 1px solid rgba(3, 106, 196, 0.25);
    background: transparent;
    color: var(--brand-700, #024e90);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.pmd-stock-chip-x:hover[b-yjmqf3rgan] { background: var(--ds-danger, #dc2626); color: #fff; }
.pmd-stock-chip-main:focus-visible[b-yjmqf3rgan],
.pmd-stock-chip-x:focus-visible[b-yjmqf3rgan] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: -2px; }

/* Stock-link modal contents */
.pmd-stock-searchrow[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pmd-stock-search[b-yjmqf3rgan] { flex: 1 1 auto; min-width: 0; }
.pmd-stock-newmat[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface, #fff);
    color: var(--brand-600, #036ac4);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease;
}
.pmd-stock-newmat:hover[b-yjmqf3rgan] { background: rgba(3, 106, 196, 0.08); border-color: var(--brand-600, #036ac4); }
.pmd-stock-results[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    padding: 4px;
}
.pmd-stock-result[b-yjmqf3rgan] {
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-radius: var(--ds-radius-sm, 6px);
    background: transparent;
    color: var(--ds-text, #0f172a);
    font-size: 0.8125rem;
    cursor: pointer;
}
.pmd-stock-result:hover[b-yjmqf3rgan] { background: var(--ds-surface-sunken, #f1f5f9); }
.pmd-stock-noresult[b-yjmqf3rgan] {
    padding: 10px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--ds-text-muted, #94a3b8);
}
.pmd-stock-selected[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pmd-stock-selected-name[b-yjmqf3rgan] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pmd-stock-qtyrow[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.pmd-stock-link-btn[b-yjmqf3rgan] {
    border: none;
    background: transparent;
    color: var(--brand-600, #036ac4);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    white-space: nowrap;
}
.pmd-stock-link-btn--danger[b-yjmqf3rgan] { color: var(--ds-danger, #dc2626); }

@media (max-width: 640px) {
    .pmd-group-name[b-yjmqf3rgan],
    .pmd-option-name[b-yjmqf3rgan] { flex: 1 1 100%; max-width: none; }
    .pmd-mini[b-yjmqf3rgan] { flex: 1 1 120px; width: auto; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Yapay zeka ile seçenek oluşturma paneli (prompt + görsel → önizleme → uygula).
   Reuse paneliyle aynı kabuğu paylaşır (.pmd-reuse-* yardımcıları), kendi
   alanları .pmd-ai-* ile eklenir.
   ───────────────────────────────────────────────────────────────────────────── */
.pmd-ai[b-yjmqf3rgan] {
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--brand-600, #036ac4);
    border-radius: var(--ds-radius-md, 10px);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pmd-ai[aria-busy="true"] .pmd-ai-field[b-yjmqf3rgan] { opacity: 0.6; pointer-events: none; }

.pmd-ai .pmd-reuse-title[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pmd-ai-title-icon[b-yjmqf3rgan] {
    width: 18px;
    height: 18px;
    color: var(--brand-600, #036ac4);
    flex-shrink: 0;
}

.pmd-ai-mode[b-yjmqf3rgan] { grid-template-columns: repeat(3, 1fr); }

.pmd-ai-warn[b-yjmqf3rgan] {
    margin: 0;
    padding: 8px 10px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #9a3412;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--ds-radius-md, 10px);
}

.pmd-ai-field[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pmd-ai-label[b-yjmqf3rgan] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.pmd-ai-prompt[b-yjmqf3rgan] {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    font: inherit;
    line-height: 1.5;
}

.pmd-ai-foot-row[b-yjmqf3rgan] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pmd-ai-hint[b-yjmqf3rgan] {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ds-text-muted, #64748b);
}

.pmd-ai-count[b-yjmqf3rgan] {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--ds-text-muted, #64748b);
}

/* Hızlı ekle çipleri */
.pmd-ai-chips[b-yjmqf3rgan] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pmd-ai-chip[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-700, #0257a0);
    background: var(--ds-surface, #ffffff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.pmd-ai-chip:hover[b-yjmqf3rgan] {
    border-color: var(--brand-600, #036ac4);
    background: rgba(3, 106, 196, 0.06);
}

.pmd-ai-chip:focus-visible[b-yjmqf3rgan] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

/* Referans görseller */
.pmd-ai-images[b-yjmqf3rgan] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pmd-ai-thumb[b-yjmqf3rgan] {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: var(--ds-radius-md, 10px);
    overflow: hidden;
    border: 1px solid var(--ds-border, #e2e8f0);
    background: var(--ds-surface, #ffffff);
}

.pmd-ai-thumb img[b-yjmqf3rgan] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pmd-ai-thumb-x[b-yjmqf3rgan] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    cursor: pointer;
}

.pmd-ai-thumb-x:hover[b-yjmqf3rgan] { background: #b91c1c; }

.pmd-ai-thumb-x:focus-visible[b-yjmqf3rgan] {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.pmd-ai-upload[b-yjmqf3rgan] {
    width: 84px;
    height: 84px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    color: var(--ds-text-muted, #64748b);
    background: var(--ds-surface, #ffffff);
    border: 1px dashed var(--ds-border-strong, #cbd5e1);
    border-radius: var(--ds-radius-md, 10px);
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}

.pmd-ai-upload:hover[b-yjmqf3rgan],
.pmd-ai-upload:focus-within[b-yjmqf3rgan] {
    border-color: var(--brand-600, #036ac4);
    color: var(--brand-600, #036ac4);
}

.pmd-ai-upload.is-busy[b-yjmqf3rgan] { cursor: progress; }

.pmd-ai-upload[b-yjmqf3rgan]  svg { width: 20px; height: 20px; }

/* InputFile görsel olarak gizli ama klavye/ekran okuyucu için erişilebilir */
.pmd-ai-file[b-yjmqf3rgan] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Önizleme */
.pmd-ai-summary[b-yjmqf3rgan] {
    margin: 0;
    padding: 8px 10px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--brand-700, #0257a0);
    background: rgba(3, 106, 196, 0.06);
    border: 1px solid rgba(3, 106, 196, 0.25);
    border-radius: var(--ds-radius-md, 10px);
}

.pmd-ai-list[b-yjmqf3rgan] { max-height: 420px; }

.pmd-ai-item[b-yjmqf3rgan] { cursor: default; }

.pmd-ai-item-head[b-yjmqf3rgan] {
    padding: 6px 8px 6px 4px;
    gap: 8px;
}

.pmd-ai-item-name[b-yjmqf3rgan] {
    flex: 1 1 160px;
    min-width: 120px;
    height: 34px;
}

.pmd-ai-item-name--static[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ds-text, #0f172a);
    text-decoration: line-through;
    text-decoration-color: #b91c1c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmd-ai-item--removal[b-yjmqf3rgan] {
    border-style: dashed;
}

.pmd-ai-item--removal.is-selected[b-yjmqf3rgan] {
    border-color: #f87171;
    background: #fef2f2;
}

.pmd-ai-origin[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--brand-700, #0257a0);
    background: rgba(3, 106, 196, 0.1);
}

.pmd-ai-origin--new[b-yjmqf3rgan] {
    color: #166534;
    background: #dcfce7;
}

.pmd-ai-origin--removed[b-yjmqf3rgan] {
    color: #991b1b;
    background: #fee2e2;
}

.pmd-ai-expand[b-yjmqf3rgan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ds-text-muted, #64748b);
    flex-shrink: 0;
}

.pmd-ai-expand:hover[b-yjmqf3rgan] { background: var(--ds-surface-sunken, #f1f5f9); }

.pmd-ai-expand:focus-visible[b-yjmqf3rgan] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.pmd-ai-detail[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pmd-ai-rules[b-yjmqf3rgan] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.pmd-ai-opts[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pmd-ai-opt[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.pmd-ai-opt.is-off .pmd-ai-opt-name[b-yjmqf3rgan],
.pmd-ai-opt.is-off .pmd-mini[b-yjmqf3rgan],
.pmd-ai-opt.is-off .pmd-num[b-yjmqf3rgan] { opacity: 0.5; }

.pmd-ai-opt-name[b-yjmqf3rgan] {
    flex: 1 1 140px;
    min-width: 100px;
    height: 34px;
}

/* Düzeltme isteği */
.pmd-ai-refine[b-yjmqf3rgan] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px dashed var(--ds-border, #e2e8f0);
}

.pmd-ai-refine-row[b-yjmqf3rgan] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pmd-ai-refine-input[b-yjmqf3rgan] {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
}

@media (max-width: 720px) {
    .pmd-ai-mode[b-yjmqf3rgan] { grid-template-columns: 1fr; }
    .pmd-ai-opt[b-yjmqf3rgan] { flex-wrap: wrap; }
}
/* /Components/Pages/Menus/Dialogs/ProductStockLinkModal.razor.rz.scp.css */
.psl[b-yo6fy5oci5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.psl-hint[b-yo6fy5oci5] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ds-text-muted, #64748b);
}

.psl-searchrow[b-yo6fy5oci5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.psl-searchrow .ds-input[b-yo6fy5oci5] { flex: 1 1 auto; }

.psl-newmat[b-yo6fy5oci5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    height: 36px;
    padding: 6px 10px;
    border: 1px dashed var(--ds-border-strong, #cbd5e1);
    border-radius: var(--ds-radius-sm, 8px);
    background: transparent;
    color: var(--brand-600, #036ac4);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.psl-newmat:hover[b-yo6fy5oci5] { background: rgba(3, 106, 196, 0.06); border-color: var(--brand-600, #036ac4); }
.psl-newmat:focus-visible[b-yo6fy5oci5] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 2px; }

.psl-results[b-yo6fy5oci5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    padding: 4px;
}

.psl-result[b-yo6fy5oci5] {
    text-align: left;
    padding: 9px 12px;
    border: none;
    border-radius: var(--ds-radius-sm, 6px);
    background: transparent;
    color: var(--ds-text, #0f172a);
    font-size: 0.875rem;
    cursor: pointer;
}

.psl-result:hover[b-yo6fy5oci5] { background: var(--ds-surface-sunken, #f1f5f9); }

.psl-noresult[b-yo6fy5oci5] {
    padding: 16px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--ds-text-muted, #94a3b8);
}

.psl-selected[b-yo6fy5oci5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--brand-600, #036ac4);
    border-radius: var(--ds-radius-md, 10px);
    background: var(--brand-50, #e8f1fb);
}

.psl-selected-info[b-yo6fy5oci5] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.psl-selected-name[b-yo6fy5oci5] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ds-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psl-selected-sub[b-yo6fy5oci5] {
    font-size: 0.75rem;
    color: var(--brand-700, #024e90);
}

.psl-link-btn[b-yo6fy5oci5] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--brand-600, #036ac4);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
}

.psl-qtyrow[b-yo6fy5oci5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.psl-qty[b-yo6fy5oci5] { flex: 0 0 120px; width: 120px; }
/* /Components/Pages/Menus/Dialogs/SmsVerificationDialog.razor.rz.scp.css */
/* Backdrop */
.otp-backdrop[b-lbi2f8m8nt] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-lbi2f8m8nt 0.2s ease;
}

@keyframes fadeIn-b-lbi2f8m8nt {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal */
.otp-modal[b-lbi2f8m8nt] {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 2rem 1.75rem;
    width: 100%;
    max-width: 380px;
    position: relative;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
    animation: slideUp-b-lbi2f8m8nt 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes slideUp-b-lbi2f8m8nt {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Close button */
.otp-close[b-lbi2f8m8nt] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.otp-close:hover[b-lbi2f8m8nt] {
    color: #333;
    background: #f5f5f5;
}

/* Phone title */
.otp-phone[b-lbi2f8m8nt] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.375rem;
    text-align: center;
    line-height: 1.3;
}

.otp-subtitle[b-lbi2f8m8nt] {
    font-size: 0.85rem;
    color: #777;
    margin: 0 0 1.5rem;
    text-align: center;
    line-height: 1.4;
}

/* OTP input boxes */
.otp-boxes[b-lbi2f8m8nt] {
    display: flex;
    gap: 14px;
    margin-bottom: 1.25rem;
}

.otp-input[b-lbi2f8m8nt] {
    width: 54px;
    height: 58px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #111;
    background: #fafafa;
    outline: none;
    transition: all 0.2s ease;
    -moz-appearance: textfield;
}

.otp-input[b-lbi2f8m8nt]::-webkit-outer-spin-button,
.otp-input[b-lbi2f8m8nt]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-input:focus[b-lbi2f8m8nt] {
    border-color: #222;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.otp-input.filled[b-lbi2f8m8nt] {
    border-color: #222;
    background: #fff;
}

.otp-input.error[b-lbi2f8m8nt] {
    border-color: #e53935;
    background: #fff5f5;
    animation: shake-b-lbi2f8m8nt 0.35s ease;
}

@keyframes shake-b-lbi2f8m8nt {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Error message */
.otp-error-msg[b-lbi2f8m8nt] {
    color: #e53935;
    font-size: 0.8rem;
    font-weight: 500;
    margin: -0.5rem 0 0.75rem;
    text-align: center;
}

/* Timer row */
.otp-timer-row[b-lbi2f8m8nt] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-bottom: 1.5rem;
}

.otp-countdown[b-lbi2f8m8nt] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.otp-resend[b-lbi2f8m8nt] {
    background: none;
    border: none;
    color: #333;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.otp-resend:hover:not(:disabled)[b-lbi2f8m8nt] {
    color: #000;
    background: #f5f5f5;
}

.otp-resend:disabled[b-lbi2f8m8nt] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Submit button */
.otp-submit[b-lbi2f8m8nt] {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    background: #f0f0f0;
    color: #bbb;
}

.otp-submit.ready[b-lbi2f8m8nt] {
    background: #111;
    color: #fff;
    cursor: pointer;
}

.otp-submit.ready:hover[b-lbi2f8m8nt] {
    background: #222;
}

.otp-submit.ready:active[b-lbi2f8m8nt] {
    transform: scale(0.985);
}

/* Mobile */
@media (max-width: 480px) {
    .otp-modal[b-lbi2f8m8nt] {
        padding: 1.5rem 1.25rem;
        max-width: 340px;
        border-radius: 14px;
    }

    .otp-input[b-lbi2f8m8nt] {
        width: 48px;
        height: 52px;
        font-size: 1.35rem;
        border-radius: 10px;
    }

    .otp-boxes[b-lbi2f8m8nt] {
        gap: 10px;
    }

    .otp-phone[b-lbi2f8m8nt] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Menus/Dialogs/StoreInfoMapDialog.razor.rz.scp.css */
/* =====================================================================
   StoreInfoMapDialog — restaurant-info card (body only; chrome = AppModal).

   Layout:
     • Branded hero band (accent gradient) — logo, name, address, live status
     • Two-column body: info stack (hours + contact) | map
       mobile  → single column, map last
       >=760px → 2 columns (info | map), map spans full height

   --sid-accent is the per-menu brand color injected inline; the neutral
   surfaces use the design-system slate scale via --ds-* tokens.
   ===================================================================== */

.sid[b-glta9t1ckh] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    font-family: var(--ds-font-ui);
}

/* ---------- Header (backgroundless, dark text) ---------- */
.sid-hero[b-glta9t1ckh] {
    padding: 0 0 var(--ds-space-4);
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-text);
}

.sid-hero__body[b-glta9t1ckh] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
}

.sid-hero__logo[b-glta9t1ckh] {
    width: 60px;
    height: 60px;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
}

.sid-hero__logo img[b-glta9t1ckh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sid-hero__titles[b-glta9t1ckh] {
    flex: 1;
    min-width: 0;
}

.sid-hero__name[b-glta9t1ckh] {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ds-text);
}

.sid-hero__addr[b-glta9t1ckh] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 5px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text-muted);
}

.sid-hero__addr svg[b-glta9t1ckh] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--sid-accent);
}

/* ---------- Live status pill (tinted, dark text) ---------- */
.sid-status[b-glta9t1ckh] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: var(--ds-radius-pill);
    font-size: 0.8125rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}

.sid-status--open[b-glta9t1ckh] { background: #dcfce7; color: #047857; border-color: #bbf7d0; }
.sid-status--closed[b-glta9t1ckh] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

.sid-status__dot[b-glta9t1ckh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sid-status--open .sid-status__dot[b-glta9t1ckh] { background: #22c55e; }
.sid-status--closed .sid-status__dot[b-glta9t1ckh] { background: #ef4444; }

/* ---------- Body grid ---------- */
.sid-grid[b-glta9t1ckh] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

@media (min-width: 760px) {
    .sid-grid[b-glta9t1ckh] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: start;
    }
}

.sid-col[b-glta9t1ckh] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    min-width: 0;
}

/* ---------- Card ---------- */
.sid-card[b-glta9t1ckh] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
    padding: var(--ds-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}

.sid-card--map[b-glta9t1ckh] {
    padding: 0;
    overflow: hidden;
    gap: 0;
}

.sid-card__head[b-glta9t1ckh] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.sid-card__icon[b-glta9t1ckh] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--ds-radius-sm);
    background: color-mix(in srgb, var(--sid-accent) 12%, transparent);
    color: var(--sid-accent);
}

@supports not (background: color-mix(in srgb, red, blue)) {
    .sid-card__icon[b-glta9t1ckh] { background: rgba(3, 106, 196, 0.12); color: var(--brand-600); }
}

.sid-card__icon svg[b-glta9t1ckh] { width: 17px; height: 17px; }

.sid-card__title[b-glta9t1ckh] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted);
}

/* ---------- Working hours (inline week) ---------- */
.sid-hours[b-glta9t1ckh] {
    display: flex;
    flex-direction: column;
}

.sid-hours__row[b-glta9t1ckh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: 9px 12px;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8438rem;
}

.sid-hours__row.is-today[b-glta9t1ckh] {
    background: color-mix(in srgb, var(--sid-accent) 9%, transparent);
    font-weight: 600;
}

@supports not (background: color-mix(in srgb, red, blue)) {
    .sid-hours__row.is-today[b-glta9t1ckh] { background: rgba(3, 106, 196, 0.09); }
}

.sid-hours__day[b-glta9t1ckh] { color: var(--ds-text); }
.sid-hours__row.is-today .sid-hours__day[b-glta9t1ckh] { color: var(--sid-accent); font-weight: 700; }

.sid-hours__time[b-glta9t1ckh] {
    color: var(--ds-text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}

.sid-hours__row.is-today .sid-hours__time[b-glta9t1ckh] { color: var(--ds-text); }

/* ---------- Contact lines ---------- */
.sid-line[b-glta9t1ckh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: 8px 12px;
    border-radius: var(--ds-radius-sm);
    text-decoration: none;
    color: inherit;
}

.sid-line + .sid-line[b-glta9t1ckh] { border-top: 1px solid var(--ds-border); border-radius: 0; }

.sid-line--link[b-glta9t1ckh] { transition: background-color var(--ds-dur) var(--ds-ease); }
.sid-line--link:hover[b-glta9t1ckh] { background: var(--ds-surface-alt); }
.sid-line--link:focus-visible[b-glta9t1ckh] { outline: 2px solid var(--sid-accent); outline-offset: 2px; }

.sid-line__label[b-glta9t1ckh] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    flex-shrink: 0;
}

.sid-line__value[b-glta9t1ckh] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    text-align: right;
    word-break: break-word;
}

.sid-line__value--accent[b-glta9t1ckh] { color: var(--sid-accent); }

/* ---------- Payment chips ---------- */
.sid-chips[b-glta9t1ckh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}

.sid-chip[b-glta9t1ckh] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
}

/* ---------- Map (compact, fixed height) ---------- */
.sid-map[b-glta9t1ckh] {
    width: 100%;
    height: 220px;
}

.sid-map[b-glta9t1ckh]  > div { height: 100% !important; }

.sid-map-addr[b-glta9t1ckh] {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3) var(--ds-space-4);
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

.sid-map-addr__text[b-glta9t1ckh] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text);
    line-height: 1.4;
    word-break: break-word;
}

/* ---------- Mobile tightening ---------- */
@media (max-width: 480px) {
    .sid-hero[b-glta9t1ckh] { padding-bottom: var(--ds-space-3); }
    .sid-hero__body[b-glta9t1ckh] { gap: var(--ds-space-3); }
    .sid-hero__logo[b-glta9t1ckh] { width: 52px; height: 52px; }
    .sid-hero__name[b-glta9t1ckh] { font-size: 1.25rem; }
    .sid-status[b-glta9t1ckh] { order: 3; }
}
/* /Components/Pages/Menus/Dialogs/TemplateSwapDialog.razor.rz.scp.css */
.tmpl-swap[b-ksq1rsns3q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tmpl-swap-lead[b-ksq1rsns3q] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ds-text-muted);
}

.tmpl-swap-lead[b-ksq1rsns3q]  strong {
    color: var(--ds-text);
    font-weight: 600;
}

.tmpl-swap-option[b-ksq1rsns3q] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--ds-dur-fast) var(--ds-ease),
                transform var(--ds-dur-fast) var(--ds-ease),
                box-shadow var(--ds-dur-fast) var(--ds-ease);
}

.tmpl-swap-option:hover[b-ksq1rsns3q] {
    border-color: var(--brand-600);
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-2);
}

.tmpl-swap-option--danger:hover[b-ksq1rsns3q] {
    border-color: var(--ds-danger);
}

.tmpl-swap-option:focus-visible[b-ksq1rsns3q] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.tmpl-swap-option--danger:focus-visible[b-ksq1rsns3q] {
    outline-color: var(--ds-danger);
}

.tmpl-swap-icon[b-ksq1rsns3q] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.tmpl-swap-icon svg[b-ksq1rsns3q] {
    width: 22px;
    height: 22px;
}

.tmpl-swap-icon--layout[b-ksq1rsns3q] {
    background: var(--brand-600);
}

.tmpl-swap-icon--replace[b-ksq1rsns3q] {
    background: var(--ds-danger);
}

.tmpl-swap-text[b-ksq1rsns3q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tmpl-swap-title[b-ksq1rsns3q] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ds-text);
}

.tmpl-swap-desc[b-ksq1rsns3q] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    line-height: 1.5;
}
/* /Components/Pages/Menus/IntegrationMenu.razor.rz.scp.css */
/* =====================================================
   Integration Menu — token-driven page chrome.
   Mirrors the CreateMenu editor aesthetic: surface cards,
   brand-tinted primary action, quiet status rail.
   ===================================================== */

.im-container[b-2z8soddd62] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    padding: var(--ds-space-5);
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ========== Loading ========== */
.im-loading[b-2z8soddd62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-4);
    min-height: 60vh;
}

@keyframes im-spin-b-2z8soddd62 { to { transform: rotate(360deg); } }

.im-loading-text[b-2z8soddd62] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.9375rem;
    color: var(--ds-text-muted);
}

/* ========== Header ========== */
.im-header[b-2z8soddd62] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
    padding: var(--ds-space-4) var(--ds-space-5);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
}

.im-header-left[b-2z8soddd62] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    min-width: 0;
}

.im-header-actions[b-2z8soddd62] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Secondary (outline) header button — "Otomasyon" trigger next to the primary sync button. */
.im-auto-btn[b-2z8soddd62] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.im-auto-btn[b-2z8soddd62]  svg { width: 16px; height: 16px; }
.im-auto-btn:hover[b-2z8soddd62] {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: var(--ds-surface-alt);
}
.im-auto-btn:focus-visible[b-2z8soddd62] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.im-back[b-2z8soddd62] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.im-back:focus-visible[b-2z8soddd62] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.im-title-wrap[b-2z8soddd62] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.im-eyebrow[b-2z8soddd62] {
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-subtle);
}

.im-title[b-2z8soddd62] {
    margin: 0;
    font-family: var(--ds-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.im-platform-badge[b-2z8soddd62] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--ds-radius-pill);
    background: var(--brand-50);
    color: var(--brand-700);
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

/* Primary action — brand blue, matches CreateMenu's save trigger. */
.im-sync-btn[b-2z8soddd62] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--brand-600);
    border-radius: var(--ds-radius-sm);
    background: var(--brand-600);
    color: #fff;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color var(--ds-dur-fast) var(--ds-ease),
                border-color var(--ds-dur-fast) var(--ds-ease);
}

/* Force the glyph white — FluentIcon paints an explicit fill, so on the blue
   button currentColor alone leaves it blue-on-blue (invisible). */
.im-sync-btn[b-2z8soddd62]  svg,
.im-sync-btn[b-2z8soddd62]  svg path { color: #fff; fill: #fff; }

.im-sync-btn:hover:not(:disabled)[b-2z8soddd62] {
    background: var(--brand-700);
    border-color: var(--brand-700);
}

.im-sync-btn:focus-visible[b-2z8soddd62] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.im-sync-btn:disabled[b-2z8soddd62] {
    opacity: 0.65;
    cursor: not-allowed;
}

.im-sync-btn.is-busy[b-2z8soddd62]  svg { animation: im-spin-b-2z8soddd62 0.8s linear infinite; }

/* "Yoğuna Al" trigger inside the status bar */
.im-busy-btn[b-2z8soddd62] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease);
}

.im-busy-btn[b-2z8soddd62]  svg { color: var(--ds-warning, #b7791f); }

.im-busy-btn:hover[b-2z8soddd62] {
    border-color: var(--ds-warning, #b7791f);
    background: var(--ds-surface-alt);
}

.im-busy-btn:focus-visible[b-2z8soddd62] {
    outline: 2px solid var(--ds-warning, #b7791f);
    outline-offset: 2px;
}

/* ========== Info Banner ========== */
.im-banner[b-2z8soddd62] {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--ds-radius-md);
}

.im-banner[b-2z8soddd62]  svg { color: var(--brand-600); flex-shrink: 0; margin-top: 1px; }

.im-banner-text[b-2z8soddd62] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--brand-800);
}

.im-banner-text strong[b-2z8soddd62] { font-weight: 700; }

/* ========== Status Bar ========== */
.im-statusbar[b-2z8soddd62] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
}

.im-status-group[b-2z8soddd62] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
}

.im-status-item[b-2z8soddd62] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.im-status-item[b-2z8soddd62]  svg { color: var(--ds-text-muted); }

/* Live dot — green when on, slate when off, amber for unavailable courier. */
.im-status-dot[b-2z8soddd62] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.im-status-dot.is-on[b-2z8soddd62]  { background: var(--ds-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.im-status-dot.is-off[b-2z8soddd62] { background: var(--slate-400); }
.im-status-dot.is-warn[b-2z8soddd62] { background: var(--ds-warning); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15); }

.im-status-meta[b-2z8soddd62] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.im-status-label[b-2z8soddd62] {
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-subtle);
}

.im-status-value[b-2z8soddd62] {
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ds-text);
}

.im-status-item .ds-switch[b-2z8soddd62] { margin-left: var(--ds-space-1); }

.im-status-item .ds-switch:focus-visible[b-2z8soddd62] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.im-status-sep[b-2z8soddd62] {
    width: 1px;
    height: 32px;
    background: var(--ds-border);
}

/* ========== Stat chips ========== */
.im-stats[b-2z8soddd62] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
}

.im-stat[b-2z8soddd62] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.im-stat[b-2z8soddd62]  svg { color: var(--brand-600); }

.im-stat-label[b-2z8soddd62] { color: var(--ds-text-muted); }

.im-stat-value[b-2z8soddd62] {
    font-weight: 700;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
    .im-container[b-2z8soddd62] { padding: var(--ds-space-3); }

    .im-header[b-2z8soddd62] { padding: var(--ds-space-3) var(--ds-space-4); }

    .im-sync-btn[b-2z8soddd62] { flex: 1; justify-content: center; }

    .im-statusbar[b-2z8soddd62] {
        flex-direction: column;
        align-items: stretch;
    }

    .im-status-group[b-2z8soddd62] { justify-content: space-between; }

    .im-status-sep[b-2z8soddd62] { display: none; }

    .im-stats[b-2z8soddd62] { justify-content: space-between; gap: var(--ds-space-3); }
}

/* ETA (teslimat süresi) — status bar içi min/max girişi (SupportsEta platformları). */
.im-eta-inputs[b-2z8soddd62] { display: inline-flex; align-items: center; gap: 4px; }
.im-eta-input[b-2z8soddd62] { width: 56px; height: 30px; padding: 2px 6px; text-align: center; }
.im-eta-dash[b-2z8soddd62] { color: var(--ds-text-subtle); }
.im-eta-unit[b-2z8soddd62] { color: var(--ds-text-subtle); font-size: var(--ds-font-xs, 12px); }

/* Kanal kapanış nedeni — kapalı kanalın yanında küçük gerekçe rozeti. */
.im-channel-reason[b-2z8soddd62] {
    margin-left: var(--ds-space-2);
    font-weight: 500;
    font-size: var(--ds-font-xs, 12px);
    color: var(--ds-text-subtle);
}

/* Kanal kapsamı seçici — ürün aç/kapat ve fiyat düzenleme bu kanala uygulanır
   (SupportsSalesChannels platformları, ör. Tıkla Gelsin). */
.im-channel-scope[b-2z8soddd62] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
    padding: var(--ds-space-2) var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg, 12px);
}

.im-channel-scope-label[b-2z8soddd62] {
    font-size: var(--ds-font-xs, 12px);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ds-text-subtle);
}

.im-channel-chip[b-2z8soddd62] {
    padding: 6px var(--ds-space-3);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    background: transparent;
    color: var(--ds-text);
    font: inherit;
    font-size: var(--ds-font-sm, 13px);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.im-channel-chip:hover[b-2z8soddd62] { background: var(--ds-surface-hover, rgba(0,0,0,.04)); }

.im-channel-chip.is-active[b-2z8soddd62] {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: #fff;
}

.im-channel-chip:focus-visible[b-2z8soddd62] {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}
/* /Components/Pages/Menus/IntegrationMenuCategoryView.razor.rz.scp.css */
/* =====================================================
   Integration Menu — category / product list.
   Token-driven; mirrors the CreateMenu editor row styling.
   ===================================================== */

/* ========== Loading / Empty ========== */
.imv-loading[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ds-space-7) var(--ds-space-4);
}

.imv-empty[b-kfgukwaiqu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-7) var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
}

.imv-empty[b-kfgukwaiqu]  svg { color: var(--ds-text-subtle); }

.imv-empty p[b-kfgukwaiqu] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.9375rem;
    color: var(--ds-text-muted);
}

/* ========== Toolbar (filters + search) ========== */
.imv-toolbar[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
}

.imv-filters[b-kfgukwaiqu] {
    display: flex;
    gap: var(--ds-space-1);
    flex-wrap: wrap;
}

.imv-filter[b-kfgukwaiqu] {
    padding: 6px 14px;
    border-radius: var(--ds-radius-pill);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--ds-dur-fast) var(--ds-ease),
                border-color var(--ds-dur-fast) var(--ds-ease),
                color var(--ds-dur-fast) var(--ds-ease);
}

.imv-filter:hover[b-kfgukwaiqu] {
    background: var(--ds-surface-alt);
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
}

.imv-filter:focus-visible[b-kfgukwaiqu] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.imv-filter.is-active[b-kfgukwaiqu] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.imv-toolbar-right[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.imv-search[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    min-width: 190px;
    transition: border-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease);
}

.imv-search:focus-within[b-kfgukwaiqu] {
    border-color: var(--brand-600);
    background: var(--ds-surface);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.12);
}

.imv-search[b-kfgukwaiqu]  svg { color: var(--ds-text-subtle); flex-shrink: 0; }

.imv-search-input[b-kfgukwaiqu] {
    border: none;
    outline: none;
    background: transparent;
    color: var(--ds-text);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    flex: 1;
    min-width: 0;
}

.imv-search-input[b-kfgukwaiqu]::placeholder { color: var(--ds-text-subtle); }

.imv-search-clear[b-kfgukwaiqu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--ds-text-subtle);
    border-radius: var(--ds-radius-xs, 4px);
    transition: color var(--ds-dur-fast) var(--ds-ease);
}

.imv-search-clear:hover[b-kfgukwaiqu] { color: var(--ds-text); }

/* ========== Category section ========== */
.imv-category[b-kfgukwaiqu] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
    /* overflow stays visible so the admin tech popover can escape the card;
       corner rounding is restored explicitly on the edge children below. */
    overflow: visible;
}

/* Restore the rounded-corner look lost by dropping overflow:hidden. */
.imv-cat-head[b-kfgukwaiqu] { border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0; }
.imv-category > .imv-cat-head:last-child[b-kfgukwaiqu] {
    border-radius: var(--ds-radius-md);
    border-bottom: none;
}
.imv-products > *:last-child[b-kfgukwaiqu] {
    border-bottom: none;
    border-bottom-left-radius: var(--ds-radius-md);
    border-bottom-right-radius: var(--ds-radius-md);
}

.imv-cat-head[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--ds-surface-alt);
    border-bottom: 1px solid var(--ds-border);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.imv-cat-head:hover[b-kfgukwaiqu] { background: var(--ds-surface-sunken); }

.imv-cat-head-left[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-width: 0;
}

.imv-cat-head-left[b-kfgukwaiqu]  svg { color: var(--ds-text-muted); flex-shrink: 0; }

.imv-cat-name[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.imv-cat-count[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    white-space: nowrap;
    padding: 2px 10px;
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-pill);
}

.imv-add-product[b-kfgukwaiqu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.65;
    white-space: nowrap;
}

.imv-add-product[b-kfgukwaiqu]  svg { color: var(--ds-text-subtle); }

/* ========== Product rows ========== */
.imv-products[b-kfgukwaiqu] {
    display: flex;
    flex-direction: column;
}

.imv-row[b-kfgukwaiqu] {
    display: grid;
    /* drag · thumb · info · price · toggle · recipe · more */
    grid-template-columns: 24px 48px 1fr auto auto 36px 36px;
    align-items: center;
    gap: var(--ds-space-3);
    padding: 10px 16px;
    border-bottom: 1px solid var(--ds-border);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.imv-row:last-child[b-kfgukwaiqu] { border-bottom: none; }
.imv-row:hover[b-kfgukwaiqu] { background: var(--ds-surface-alt); }
.imv-row--inactive[b-kfgukwaiqu] { opacity: 0.6; }

.imv-drag[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    cursor: default;
}

.imv-thumb img[b-kfgukwaiqu],
.imv-thumb-placeholder[b-kfgukwaiqu] {
    width: 48px;
    height: 48px;
    border-radius: var(--ds-radius-sm);
    object-fit: cover;
    border: 1px solid var(--ds-border);
}

.imv-thumb-placeholder[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface-alt);
    box-sizing: border-box;
}

.imv-thumb-placeholder[b-kfgukwaiqu]  svg { color: var(--ds-text-subtle); }

.imv-info[b-kfgukwaiqu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.imv-name-row[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.imv-name[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.imv-desc[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.imv-mod-link[b-kfgukwaiqu] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    align-self: flex-start;
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--brand-600);
    cursor: pointer;
    background: none;
    border: none;
    padding: 1px 0;
    margin-top: 1px;
}

.imv-mod-link:hover[b-kfgukwaiqu] { text-decoration: underline; }

/* ========== Admin tech-data popover (Admin.Manage only) ========== */
.imv-tech[b-kfgukwaiqu] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.imv-tech-trigger[b-kfgukwaiqu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--ds-radius-xs, 4px);
    background: transparent;
    color: var(--ds-text-subtle);
    cursor: pointer;
    transition: color var(--ds-dur-fast) var(--ds-ease),
                background-color var(--ds-dur-fast) var(--ds-ease);
}

.imv-tech-trigger[b-kfgukwaiqu]  svg { width: 14px; height: 14px; }
.imv-tech-trigger:hover[b-kfgukwaiqu] { color: var(--brand-600); background: var(--ds-surface-alt); }

/* Compact trigger for the modifier-option chips. */
.imv-tech--sm .imv-tech-trigger[b-kfgukwaiqu] { width: 16px; height: 16px; }
.imv-tech--sm .imv-tech-trigger[b-kfgukwaiqu]  svg { width: 12px; height: 12px; }
.imv-tech-trigger:focus-visible[b-kfgukwaiqu] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* Panel is portaled to the component root and lifted to a viewport-fixed layer by
   dsDropdown.position (scale-aware) — so it escapes the row list's overflow/scale
   ancestors and the inactive-row opacity stacking trap. Click-to-open (state-driven);
   a transparent full-screen backdrop closes it. */
.imv-tech-backdrop[b-kfgukwaiqu] {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: transparent;
}
.imv-tech-pop[b-kfgukwaiqu] {
    position: fixed;
    z-index: 1200;
    width: 340px;
    max-width: 92vw;
    max-height: min(70vh, 540px);
    overflow-y: auto;
    padding: 10px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-3, 0 12px 32px rgba(15, 23, 42, 0.18));
}
.imv-tech-pop--sm[b-kfgukwaiqu] { width: 300px; font-weight: 400; }

/* Nedenli satıştan kaldırma — toggle yerine satır-içi neden seçici (SupportsSaleReason platformları). */
.imv-saleoff[b-kfgukwaiqu] { display: inline-flex; align-items: center; gap: 4px; }
.imv-saleoff-select[b-kfgukwaiqu] { min-width: 150px; max-width: 200px; height: 30px; }

.imv-tech-head[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ds-border);
}

.imv-tech-title[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-subtle);
}

.imv-tech-copyall[b-kfgukwaiqu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--brand-600);
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.imv-tech-copyall[b-kfgukwaiqu]  svg { width: 13px; height: 13px; color: var(--brand-600); }
.imv-tech-copyall:hover[b-kfgukwaiqu] { background: var(--ds-surface-alt); border-color: var(--brand-600); }

.imv-tech-list[b-kfgukwaiqu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.imv-tech-item[b-kfgukwaiqu] {
    display: grid;
    grid-template-columns: 116px 1fr 16px;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 4px 6px;
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.imv-tech-item:hover[b-kfgukwaiqu] { background: var(--ds-surface-alt); }
.imv-tech-item[b-kfgukwaiqu]  svg { width: 14px; height: 14px; color: var(--ds-text-subtle); }

.imv-tech-key[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.imv-tech-val[b-kfgukwaiqu] {
    margin: 0;
    font-family: var(--ds-font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- editable section (Admin.Manage) ----- */
.imv-tech-edit[b-kfgukwaiqu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ds-border);
}

.imv-tech-edit-title[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-600);
}

.imv-tech-field[b-kfgukwaiqu] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.imv-tech-field > span[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.imv-tech-field-row[b-kfgukwaiqu] {
    display: flex;
    gap: 8px;
}

.imv-tech-edit input[b-kfgukwaiqu],
.imv-tech-edit select[b-kfgukwaiqu] {
    width: 100%;
    box-sizing: border-box;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
}

.imv-tech-edit input:focus[b-kfgukwaiqu],
.imv-tech-edit select:focus[b-kfgukwaiqu] {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.12);
}

.imv-tech-save[b-kfgukwaiqu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    margin-top: 2px;
    border: 1px solid var(--brand-600);
    border-radius: var(--ds-radius-sm);
    background: var(--brand-600);
    color: #fff;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.imv-tech-save[b-kfgukwaiqu]  svg { width: 14px; height: 14px; color: #fff; fill: #fff; }
.imv-tech-save:hover:not(:disabled)[b-kfgukwaiqu] { background: var(--brand-700); border-color: var(--brand-700); }
.imv-tech-save:disabled[b-kfgukwaiqu] { opacity: 0.6; cursor: not-allowed; }
.imv-tech-save:focus-visible[b-kfgukwaiqu] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.imv-price[b-kfgukwaiqu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

.imv-price-now[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}

.imv-price-struck[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ds-text-subtle);
    text-decoration: line-through;
}

/* Inline price editing (platforms supporting price push, e.g. MigrosYemek) */
.imv-price-editbtn[b-kfgukwaiqu] {
    margin-top: var(--ds-space-1);
    width: 22px;
    height: 22px;
    color: var(--ds-text-subtle);
}

.imv-price-editbtn:hover[b-kfgukwaiqu] {
    color: var(--ds-accent);
}

.imv-price-edit[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-1);
}

.imv-price-input[b-kfgukwaiqu] {
    width: 84px;
    padding: var(--ds-space-1) var(--ds-space-2);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    background: var(--ds-surface);
    color: var(--ds-text);
}

.imv-price-input:focus-visible[b-kfgukwaiqu] {
    outline: 2px solid var(--ds-accent);
    outline-offset: 1px;
}

.imv-price-save[b-kfgukwaiqu] {
    width: 26px;
    height: 26px;
    color: var(--ds-success);
}

.imv-price-cancel[b-kfgukwaiqu] {
    width: 26px;
    height: 26px;
    color: var(--ds-danger);
}

.imv-toggle[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.imv-toggle .ds-switch:focus-visible[b-kfgukwaiqu] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.imv-recipe[b-kfgukwaiqu],
.imv-more[b-kfgukwaiqu] {
    width: 32px;
    height: 32px;
}

.imv-recipe:focus-visible[b-kfgukwaiqu],
.imv-more:focus-visible[b-kfgukwaiqu] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* ========== Modifiers (expanded) ==========
   Read-only display — kept deliberately compact so an expanded product
   doesn't open a tall, mostly-empty panel. Options render as wrapping chips. */
.imv-modifiers[b-kfgukwaiqu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 16px 12px 76px;
    background: var(--ds-surface-sunken);
    border-bottom: 1px solid var(--ds-border);
}

.imv-mod-group[b-kfgukwaiqu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.imv-mod-head[b-kfgukwaiqu] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.imv-mod-name[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--ds-text);
}

.imv-mod-range[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    color: var(--ds-text-muted);
}

/* Admin-only technical info marker (system / external option-group ids on hover). */
.imv-mod-info[b-kfgukwaiqu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.imv-mod-info[b-kfgukwaiqu]  svg {
    width: 14px;
    height: 14px;
    color: var(--ds-text-subtle);
}

.imv-mod-options[b-kfgukwaiqu] {
    display: flex;
    flex-flow: row wrap;
    gap: 6px;
}

.imv-opt[b-kfgukwaiqu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    line-height: 1.4;
}

/* Passive = muted look WITHOUT opacity — opacity on the chip would also dim the
   admin tech popover nested inside it (opacity groups can't be undone by a child). */
.imv-opt--passive[b-kfgukwaiqu] {
    background: var(--ds-surface-sunken);
    border-style: dashed;
}

.imv-opt--passive .imv-opt-name[b-kfgukwaiqu] {
    color: var(--ds-text-subtle);
    text-decoration: line-through;
}

.imv-opt-name[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    color: var(--ds-text);
    white-space: nowrap;
}

.imv-opt-price[b-kfgukwaiqu] {
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-600);
    font-variant-numeric: tabular-nums;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
    .imv-toolbar[b-kfgukwaiqu] {
        flex-direction: column;
        align-items: stretch;
    }

    .imv-toolbar-right[b-kfgukwaiqu] { flex-wrap: wrap; }

    .imv-row[b-kfgukwaiqu] {
        grid-template-columns: 48px 1fr auto auto 36px 36px;
        gap: var(--ds-space-2);
        padding: 8px 12px;
    }

    .imv-drag[b-kfgukwaiqu] { display: none; }

    .imv-modifiers[b-kfgukwaiqu] { padding-left: 60px; }
}

/* Marka geneli fiyat uyarısı — PriceUpdateAffectsAllStores platformlarında (ör. Tıkla Gelsin)
   fiyat düzenleme alanının altında görünür. */
.imv-price-warning[b-kfgukwaiqu] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: var(--ds-space-2) 0 0;
    max-width: 260px;
    font-size: var(--ds-font-xs, 12px);
    line-height: 1.4;
    color: var(--ds-warning-text, #92400e);
}

.imv-price-warning[b-kfgukwaiqu]  svg { flex: 0 0 auto; margin-top: 1px; }
/* /Components/Pages/Menus/MenuCard.razor.rz.scp.css */
.menu-card[b-5o8621aq2h] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.menu-card:hover[b-5o8621aq2h] {
    box-shadow: var(--elevation-shadow-card-hover);
    transform: translateY(-2px);
}

.menu-card-header[b-5o8621aq2h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
    flex: 1;
    gap: 12px;
}

.menu-card-left[b-5o8621aq2h] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.menu-card-logo[b-5o8621aq2h] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.logo-img[b-5o8621aq2h] {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
}

.menu-card-title[b-5o8621aq2h] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    min-width: 0;
}

.menu-card-title:hover[b-5o8621aq2h] {
    color: var(--accent-foreground-rest);
    text-decoration: underline;
}

.menu-card-right[b-5o8621aq2h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.menu-card-status[b-5o8621aq2h] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-live[b-5o8621aq2h] {
    background: rgba(76, 175, 80, 0.12);
    color: #4caf50;
}

.status-draft[b-5o8621aq2h] {
    background: rgba(255, 152, 0, 0.12);
    color: #ff9800;
}

.status-scheduled[b-5o8621aq2h] {
    background: rgba(33, 150, 243, 0.12);
    color: #2196f3;
}

.status-archived[b-5o8621aq2h] {
    background: rgba(158, 158, 158, 0.12);
    color: #9e9e9e;
}

.status-default[b-5o8621aq2h] {
    background: rgba(158, 158, 158, 0.12);
    color: #9e9e9e;
}

.menu-card-types[b-5o8621aq2h] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.menu-card-footer[b-5o8621aq2h] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    flex-wrap: wrap;
}
/* /Components/Pages/Menus/MenuPreview.razor.rz.scp.css */
/* Menu Preview Styles */

/* Loading Container */
.loading-container[b-hgcjy323dt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #FAFAFA;
    gap: 1rem;
}

/* Main Menu Editor Container */
.menu-editor-container[b-hgcjy323dt] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    overflow: hidden;
}

/* Preview Mode Toolbar */
.editor-toolbar.preview-mode[b-hgcjy323dt] {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 100%;
    z-index: 3;
    display: flex;
    gap: 10px;
}

.preview-badge[b-hgcjy323dt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.menu-title-display[b-hgcjy323dt] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

/* Main Preview Content */
.editor-main.preview-main[b-hgcjy323dt] {
    flex: 1;
    overflow-y: auto;
    background: #fff;
}

.menu-builder[b-hgcjy323dt] {
    width: 100%;
    max-width: none;
    margin: 0;
    background: white;
}

/* Restaurant Header */
.restaurant-header[b-hgcjy323dt] {
    position: relative;
}

.hero-section[b-hgcjy323dt] {
    position: relative;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    background: var(--primary-color, #C20004);
}

.hero-overlay[b-hgcjy323dt] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.hero-content[b-hgcjy323dt] {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    color: white;
}

/* Header Top Bar */
.header-top-bar[b-hgcjy323dt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem;
    margin-bottom: auto;
}

.logo-section[b-hgcjy323dt] {
    flex-shrink: 0;
}

.logo-container[b-hgcjy323dt] {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.restaurant-logo[b-hgcjy323dt] {
    width: auto;
    height: 80px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    max-width: 200px;
}

.logo-upload-placeholder.disabled[b-hgcjy323dt],
.banner-upload-placeholder.disabled[b-hgcjy323dt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    width: 80px;
    height: 80px;
    cursor: default;
}

.logo-upload-placeholder.disabled[b-hgcjy323dt] {
    border-radius: 50%;
}

/* Title Section */
.title-section[b-hgcjy323dt] {
    padding: 0 2rem 2rem;
    text-align: center;
}

.restaurant-title-container[b-hgcjy323dt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.restaurant-title.readonly[b-hgcjy323dt] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.title-underline[b-hgcjy323dt] {
    height: 4px;
    width: 80px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
}

/* Menu Navigation */
.menu-navigation[b-hgcjy323dt] {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 10;
    overflow: hidden;
}

.nav-content[b-hgcjy323dt] {
    padding: 1rem 2rem;
}

.search-container[b-hgcjy323dt] {
    position: relative;
    max-width: 35vw;
    margin: 0 auto;
}

.search-icon[b-hgcjy323dt] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    z-index: 2;
}

.modern-search[b-hgcjy323dt] {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    background: #f8f9fa;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
}

.modern-search:focus[b-hgcjy323dt] {
    border-color: var(--primary-color, #C20004);
    background: white;
}

.modern-search:disabled[b-hgcjy323dt] {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

/* Category Navigation Wrapper */
.category-nav-wrapper[b-hgcjy323dt] {
    display: flex;
    align-items: center;
    padding: 0 0 1rem;
    overflow: hidden;
}

.category-nav-arrow[b-hgcjy323dt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
    margin: 0 4px;
}

.category-nav-arrow:hover[b-hgcjy323dt] {
    background: #f5f5f5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Category Navigation Tabs */
.category-nav-tabs[b-hgcjy323dt] {
    display: flex;
    gap: 8px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
}

.category-nav-tabs[b-hgcjy323dt]::-webkit-scrollbar {
    display: none;
}

.category-tab[b-hgcjy323dt] {
    background: #f8f9fa;
    border: 2px solid transparent;
    color: #666;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.95rem;
}

.category-tab:hover[b-hgcjy323dt] {
    background: #e9ecef;
    transform: translateY(-1px);
}

.category-tab.active[b-hgcjy323dt] {
    background: var(--primary-color, #C20004);
    color: white;
    border-color: var(--primary-color, #C20004);
}

/* Categories Container */
.categories-container[b-hgcjy323dt] {
    padding: 2rem;
    background: #fff;
}

/* Category Cards */
.modern-category-card[b-hgcjy323dt] {
    margin-bottom: 3rem;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

.category-header-modern[b-hgcjy323dt] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem;
    border-bottom: 1px solid #e0e0e0;
}

.category-title-section[b-hgcjy323dt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-info[b-hgcjy323dt] {
    flex: 1;
}

.category-title.readonly[b-hgcjy323dt] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color, #C20004);
    margin: 0 0 0.5rem 0;
}

.category-subtitle.readonly[b-hgcjy323dt] {
    font-size: 1rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Products Grid */
.products-grid[b-hgcjy323dt] {
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Product Cards */
.product-card[b-hgcjy323dt] {
    display: flex;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    min-height: 120px;
    position: relative;
}

.product-card:hover[b-hgcjy323dt] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Product Info Section */
.product-info[b-hgcjy323dt] {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-name.readonly[b-hgcjy323dt] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.product-desc.readonly[b-hgcjy323dt] {
    font-size: 0.95rem;
    color: #666;
    margin: 0 0 1rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price[b-hgcjy323dt] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: auto;
}

.price-value[b-hgcjy323dt] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color, #C20004);
}

.price-currency[b-hgcjy323dt] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-color, #C20004);
}

.struck-price-value[b-hgcjy323dt] {
    font-size: 1rem;
    font-weight: 500;
    color: #999;
    text-decoration: line-through;
    margin-left: 0.5rem;
}

/* Product Image Section */
.product-image-container[b-hgcjy323dt] {
    width: 140px;
    height: 140px;
    margin-right: 12px;
    padding: 12px 0px;
    flex-shrink: 0;
    position: relative;
}

.product-image-box[b-hgcjy323dt] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.product-img[b-hgcjy323dt] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-img[b-hgcjy323dt] {
    transform: scale(1.05);
}

.product-image-placeholder.disabled[b-hgcjy323dt] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #f5f5f5;
    color: #999;
    font-size: 0.8rem;
    border-left: 1px solid #e0e0e0;
}

/* Product Action Buttons */
.product-action-buttons[b-hgcjy323dt] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}

.product-add-btn.preview-btn[b-hgcjy323dt] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color, #C20004);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-add-btn.preview-btn:hover[b-hgcjy323dt] {
    background: #a50003;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(194, 0, 4, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-top-bar[b-hgcjy323dt] {
        padding: 1.5rem;
    }
    
    .restaurant-title.readonly[b-hgcjy323dt] {
        font-size: 2rem;
    }
    
    .nav-content[b-hgcjy323dt] {
        padding: 1rem;
    }
    
    .category-nav-tabs[b-hgcjy323dt] {
        padding: 0;
    }

    .category-nav-arrow[b-hgcjy323dt] {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }
    
    .categories-container[b-hgcjy323dt] {
        padding: 1rem;
    }
    
    .category-header-modern[b-hgcjy323dt] {
        padding: 1.5rem;
    }
    
    .products-grid[b-hgcjy323dt] {
        padding: 1rem;
    }
    
    .product-card[b-hgcjy323dt] {
        flex-direction: column;
        min-height: auto;
    }
    
    .product-image-container[b-hgcjy323dt] {
        width: 100%;
        height: 100%;
        margin-right: 8px;
        padding: 8px 0px;
    }
    
    .product-image-placeholder.disabled[b-hgcjy323dt] {
        border-left: none;
        border-bottom: 1px solid #e0e0e0;
    }
}

/* Animation for smooth loading */
@keyframes fadeInUp-b-hgcjy323dt {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-category-card[b-hgcjy323dt] {
    animation: fadeInUp-b-hgcjy323dt 0.5s ease-out;
}

.product-card[b-hgcjy323dt] {
    animation: fadeInUp-b-hgcjy323dt 0.3s ease-out;
}

/* Header Actions and Working Hours */
.header-actions[b-hgcjy323dt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.working-hours-display[b-hgcjy323dt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 25px !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 180px;
}

.working-hours-content[b-hgcjy323dt] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.working-hours-label[b-hgcjy323dt] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.3px;
}

.working-hours-text[b-hgcjy323dt] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.hero-buttons[b-hgcjy323dt] {
    display: flex;
    gap: 0.5rem;
}

.hero-info-btn[b-hgcjy323dt] {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease !important;
}

.hero-info-btn:hover[b-hgcjy323dt] {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

/* CSS Custom Properties for Dynamic Theming */
:root[b-hgcjy323dt] {
    --primary-color: #C20004;
    --theme-primary-rgb: 194, 0, 4;
}

/* ======================== ALLERGEN BADGES ======================== */
.product-allergens[b-hgcjy323dt] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.allergen-badge[b-hgcjy323dt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 12px;
    color: #e65100;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.allergen-badge:hover[b-hgcjy323dt] {
    background: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
}

.out-of-stock-badge[b-hgcjy323dt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(194, 0, 4, 0.1);
    border: 1px solid rgba(194, 0, 4, 0.3);
    border-radius: 12px;
    color: #C20004;
    margin-left: 8px;
    white-space: nowrap;
}

.inactive-product[b-hgcjy323dt] {
    pointer-events: none;
}

@media (max-width: 768px) {
    .allergen-badge[b-hgcjy323dt] {
        font-size: 10px;
        padding: 3px 8px;
    }

    .out-of-stock-badge[b-hgcjy323dt] {
        font-size: 10px;
        padding: 3px 8px;
        margin-left: 6px;
    }

    .product-allergens[b-hgcjy323dt] {
        gap: 4px;
    }
}
/* /Components/Pages/Menus/MenuQrModal.razor.rz.scp.css */
.mqr[b-uj2ufmjtcj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-3);
    font-family: var(--ds-font-ui);
}

.mqr__switch[b-uj2ufmjtcj] {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-pill);
}

.mqr__switch-btn[b-uj2ufmjtcj] {
    border: none;
    background: transparent;
    padding: 5px 16px;
    border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
.mqr__switch-btn:hover[b-uj2ufmjtcj] { color: var(--ds-text); }
.mqr__switch-btn.is-active[b-uj2ufmjtcj] { background: var(--ds-surface); color: var(--brand-600); box-shadow: var(--ds-shadow-1); }

.mqr__code-wrap[b-uj2ufmjtcj] {
    background: #fff;
    padding: var(--ds-space-3);
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-1);
}

.mqr__code[b-uj2ufmjtcj] {
    width: 360px;
    height: 360px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mqr__code[b-uj2ufmjtcj]  img { max-width: 100%; height: auto; }

.mqr__tagline[b-uj2ufmjtcj] {
    font-weight: 600;
    color: var(--ds-text);
    text-align: center;
}

.mqr__brand[b-uj2ufmjtcj] {
    font-family: var(--ds-font-script);
    font-size: 1.1rem;
    color: var(--brand-600);
}

.mqr__link[b-uj2ufmjtcj] {
    width: 100%;
    margin-top: var(--ds-space-2);
}

.mqr__link-label[b-uj2ufmjtcj] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    margin-bottom: var(--ds-space-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mqr__link-row[b-uj2ufmjtcj] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: var(--ds-space-2) var(--ds-space-3);
}

.mqr__link-text[b-uj2ufmjtcj] {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--ds-text);
    word-break: break-all;
}
/* /Components/Pages/Menus/Menus.razor.rz.scp.css */
/* ===== Header ===== */
.menus-header[b-078tqdsi6p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
}

.menus-header__title[b-078tqdsi6p] { display: flex; flex-direction: column; gap: 2px; }

.menus-header__subtitle[b-078tqdsi6p] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ds-text-muted);
}

.menus-header__actions[b-078tqdsi6p] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.menus-filter[b-078tqdsi6p] { min-width: 180px; max-width: 240px; }

/* ===== Tabs ===== */
.menus-tabs[b-078tqdsi6p] {
    display: flex;
    gap: var(--ds-space-1);
    border-bottom: 1px solid var(--ds-border);
    overflow-x: auto;
}

.menus-tab[b-078tqdsi6p] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 10px var(--ds-space-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--ds-font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}

.menus-tab[b-078tqdsi6p]  svg { width: 18px; height: 18px; }

.menus-tab:hover[b-078tqdsi6p] { color: var(--ds-text); }

.menus-tab.is-active[b-078tqdsi6p] {
    color: var(--brand-600);
    border-bottom-color: var(--brand-600);
}

.menus-tab__count[b-078tqdsi6p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-sunken);
    color: var(--ds-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.menus-tab.is-active .menus-tab__count[b-078tqdsi6p] {
    background: var(--brand-50);
    color: var(--brand-700);
}

.menus-tab:focus-visible[b-078tqdsi6p] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
    border-radius: var(--ds-radius-sm);
}

/* ===== Loading / empty ===== */
.menus-loading[b-078tqdsi6p],
.menus-empty[b-078tqdsi6p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-7) var(--ds-space-4);
    color: var(--ds-text-muted);
    text-align: center;
}

.menus-loading[b-078tqdsi6p] { flex-direction: row; }

.menus-empty p[b-078tqdsi6p] { margin: 0; font-weight: 600; color: var(--ds-text); }
.menus-empty__hint[b-078tqdsi6p] { font-size: 0.85rem; }


/* ===== Store group ===== */
.menus-group[b-078tqdsi6p] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-5);
    /* Page-container is a height-constrained flex column; don't let it shrink a
       section below its content (the platform grid carries min-height:0, which
       otherwise collapses it into a short internal scrollbox cropped at the
       bottom). Sections keep full height; the page-container scrolls instead. */
    flex-shrink: 0;
}

/* The consolidated platform grid is part of the page flow, not a viewport-filling
   grid: let it grow to its full content height rather than scrolling internally. */
.menus-group--platform[b-078tqdsi6p]  .adg,
.menus-group--platform[b-078tqdsi6p]  .adg-frame {
    min-height: auto;
}
.menus-group--platform[b-078tqdsi6p]  .adg-scroll {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}

.menus-group__head[b-078tqdsi6p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    padding-bottom: var(--ds-space-1);
}

.menus-group__store[b-078tqdsi6p] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ds-text);
}

/* Canonical handle chip */
.menus-handle[b-078tqdsi6p] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding: 4px 6px 4px 10px;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    color: var(--ds-text-muted);
}

.menus-handle[b-078tqdsi6p]  svg { color: var(--brand-600); }

.menus-handle__text[b-078tqdsi6p] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    font-family: var(--ds-font-ui);
}

.menus-handle__btn[b-078tqdsi6p] { width: 26px; height: 26px; border: none; background: transparent; }
.menus-handle__btn:hover[b-078tqdsi6p] { background: var(--ds-surface-sunken); }

/* ===== Menu rows ===== */
.menus-list[b-078tqdsi6p] {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}

.menu-row[b-078tqdsi6p] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-4);
    border-bottom: 1px solid var(--ds-border);
    transition: background-color var(--ds-dur) var(--ds-ease);
}
.menu-row:last-child[b-078tqdsi6p] { border-bottom: none; }
.menu-row:hover[b-078tqdsi6p] { background: var(--ds-surface-alt); }
.menu-row--live[b-078tqdsi6p] { box-shadow: inset 3px 0 0 var(--ds-success); }

.menu-row__main[b-078tqdsi6p] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    min-width: 0;
}

.menu-row__icon[b-078tqdsi6p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    flex-shrink: 0;
}

.menu-row__logo[b-078tqdsi6p] { width: 40px; height: 40px; object-fit: contain; border-radius: var(--ds-radius-sm); }

.menu-row__text[b-078tqdsi6p] { display: flex; flex-direction: column; min-width: 0; }

.menu-row__title[b-078tqdsi6p] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menu-row__title:hover[b-078tqdsi6p] { color: var(--brand-600); }

.menu-row__meta[b-078tqdsi6p] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.menu-row__id[b-078tqdsi6p] { font-size: 0.75rem; color: var(--ds-text-subtle); }

/* Copyable channel link chips (QR / Web) — click to copy the full shareable URL */
.menu-link[b-078tqdsi6p] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 360px;
    padding: 2px 8px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
.menu-link:hover[b-078tqdsi6p] { background: var(--brand-50); border-color: var(--brand-600); color: var(--brand-700); }
.menu-link:focus-visible[b-078tqdsi6p] { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.menu-link[b-078tqdsi6p]  svg { width: 13px; height: 13px; flex-shrink: 0; }
.menu-link--qr[b-078tqdsi6p]  svg { color: var(--ds-text-muted); }
.menu-link--web[b-078tqdsi6p]  svg { color: var(--brand-600); }
.menu-link__path[b-078tqdsi6p] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-link__copy[b-078tqdsi6p] { width: 13px; height: 13px; opacity: 0.55; }
.menu-link:hover .menu-link__copy[b-078tqdsi6p] { opacity: 1; }

/* Platform sub-block within a store section */
.menus-platform[b-078tqdsi6p] {
    margin-top: var(--ds-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.menus-subhead[b-078tqdsi6p] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-muted);
}
.menus-subhead[b-078tqdsi6p]  svg { width: 15px; height: 15px; color: var(--brand-600); }

.menu-row__status[b-078tqdsi6p] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.menu-status-tag[b-078tqdsi6p] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--ds-radius-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.menu-status-tag.is-live[b-078tqdsi6p]      { background: rgba(22, 163, 74, 0.10); color: var(--ds-success); }
.menu-status-tag.is-draft[b-078tqdsi6p]     { background: var(--slate-100); color: var(--ds-text-muted); }
.menu-status-tag.is-scheduled[b-078tqdsi6p] { background: var(--brand-50); color: var(--brand-700); }
.menu-status-tag.is-archived[b-078tqdsi6p]  { background: var(--slate-100); color: var(--ds-text-subtle); }

.menu-row__actions[b-078tqdsi6p] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
}

@media (max-width: 640px) {
    .menu-row[b-078tqdsi6p] {
        grid-template-columns: 1fr auto;
        row-gap: var(--ds-space-2);
    }
    .menu-row__status[b-078tqdsi6p] { grid-column: 2; }
    .menu-row__actions[b-078tqdsi6p] { grid-column: 1 / -1; flex-wrap: wrap; }
}

/* ===== Handle editor modal ===== */
.menus-handle-edit[b-078tqdsi6p] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}
.menus-handle-edit__prefix[b-078tqdsi6p] {
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}
.menus-handle-edit .ds-input[b-078tqdsi6p] { flex: 1; }
/* /Components/Pages/Menus/MenuTemplateGallery.razor.rz.scp.css */
.tmpl-gallery[b-ismp9kb7kk] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
}

.tmpl-card[b-ismp9kb7kk] {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: #1a202c;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.08s ease;
}

.tmpl-card:hover:not(.tmpl-card-active)[b-ismp9kb7kk] {
    border-color: #cbd5e0;
    background: #f7fafc;
    transform: translateY(-1px);
}

.tmpl-card:active:not(.tmpl-card-active)[b-ismp9kb7kk] {
    transform: translateY(0);
}

.tmpl-card-active[b-ismp9kb7kk] {
    background: #ffffff;
    border-color: var(--accent-fill-rest, #6264a7);
    border-width: 2px;
    padding: 9px 11px; /* compensate +1px border so layout doesn't jump */
    color: var(--accent-fill-rest, #6264a7);
    cursor: default;
}

.tmpl-card-icon[b-ismp9kb7kk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #edf2f7;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.tmpl-card-active .tmpl-card-icon[b-ismp9kb7kk] {
    background: color-mix(in srgb, var(--accent-fill-rest, #6264a7) 12%, transparent);
}

.tmpl-card-body[b-ismp9kb7kk] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tmpl-card-title[b-ismp9kb7kk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

.tmpl-card-default-badge[b-ismp9kb7kk] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    line-height: 1;
}

.tmpl-card-active .tmpl-card-default-badge[b-ismp9kb7kk] {
    background: color-mix(in srgb, var(--accent-fill-rest, #6264a7) 12%, transparent);
    color: var(--accent-fill-rest, #6264a7);
}

.tmpl-card-active .tmpl-card-title[b-ismp9kb7kk] {
    color: var(--accent-fill-rest, #6264a7);
    font-weight: 700;
}

.tmpl-card-check[b-ismp9kb7kk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-fill-rest, #6264a7) 12%, transparent);
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Hover preview popup — anchored to the right of each card.
   Pure CSS, no JS. Appears on .tmpl-card-wrap:hover with a small delay
   to feel deliberate (avoids flicker as the cursor moves down the list).
   ───────────────────────────────────────────────────────────────── */
.tmpl-card-wrap[b-ismp9kb7kk] {
    position: relative;
}

/* Floating preview — position:fixed escapes the settings popover's overflow.
   The gallery now lives in the top-right settings popover, so the preview is
   anchored to the LEFT of that popover (right: 380px ≈ popover width 340 +
   its 24px right gutter + a 16px gap). Top is FIXED so long previews stay in
   the viewport regardless of which card is hovered. */
.tmpl-preview[b-ismp9kb7kk] {
    position: fixed;
    right: 380px;
    left: auto;
    top: 80px;
    width: 360px;
    /* Cap at 600px on big screens, shrink on small viewports so we never overflow.
       Long product lists scroll inside; the sticky banner keeps context visible. */
    max-height: min(600px, calc(100vh - 100px));
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    /* Exit transition — short delay (100ms) so rapid card-to-card hovers don't
       leave the previous preview lingering on screen. During the brief window
       visibility stays visible so .tmpl-preview:hover can still keep it open. */
    transition: opacity 0.15s ease 0.1s, transform 0.15s ease 0.1s, visibility 0s 0.25s;
    z-index: 1000;
    --tmpl-accent: #6264a7;
}

/* Per-BusinessType accent color for the banner header. */
.tmpl-preview-restaurant[b-ismp9kb7kk]       { --tmpl-accent: #ef4444; }   /* food red */
.tmpl-preview-cafe[b-ismp9kb7kk]             { --tmpl-accent: #92400e; }   /* coffee brown */
.tmpl-preview-grocer[b-ismp9kb7kk]           { --tmpl-accent: #22c55e; }   /* manav green */
.tmpl-preview-market[b-ismp9kb7kk]           { --tmpl-accent: #3b82f6; }   /* market blue */
.tmpl-preview-petshop[b-ismp9kb7kk]          { --tmpl-accent: #ec4899; }   /* pet pink */
.tmpl-preview-waterdistributor[b-ismp9kb7kk] { --tmpl-accent: #06b6d4; }   /* water cyan */
.tmpl-preview-ecommerce[b-ismp9kb7kk]        { --tmpl-accent: #f97316; }   /* e-com orange */

/* Show preview while EITHER the card OR the preview itself is hovered. The :hover
   trick keeps it open while the user moves the cursor onto the preview to scroll. */
.tmpl-card-wrap:hover .tmpl-preview[b-ismp9kb7kk],
.tmpl-card-wrap .tmpl-preview:hover[b-ismp9kb7kk] {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.18s ease 0.1s, transform 0.18s ease 0.1s, visibility 0s 0.1s;
}

/* Colored banner header for each template — makes Restoran/Manav/Market visually
   distinct. Sticky so it stays visible while the user scrolls the product list. */
.tmpl-preview-banner[b-ismp9kb7kk] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, var(--tmpl-accent), color-mix(in srgb, var(--tmpl-accent) 70%, #000000));
    color: #ffffff;
    border-radius: 12px 12px 0 0;
}

.tmpl-preview-banner-icon[b-ismp9kb7kk] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
}

[b-ismp9kb7kk] .tmpl-preview-banner-icon svg {
    width: 28px;
    height: 28px;
}

.tmpl-preview-banner-text[b-ismp9kb7kk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tmpl-preview-banner-text .tmpl-preview-title[b-ismp9kb7kk] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.tmpl-preview-banner-text .tmpl-preview-count[b-ismp9kb7kk] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.tmpl-preview-desc[b-ismp9kb7kk] {
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.4;
    margin: 0;
    padding: 12px 16px 0 16px;
}

.tmpl-preview-empty[b-ismp9kb7kk] {
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
    padding: 12px 16px;
}

.tmpl-preview-more-cats[b-ismp9kb7kk] {
    padding: 12px 16px 16px 16px;
}

.tmpl-preview-cat[b-ismp9kb7kk] {
    margin-top: 10px;
    padding: 10px 16px 0 16px;
    border-top: 1px solid #f1f5f9;
}

.tmpl-preview-cat:first-of-type[b-ismp9kb7kk] {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

/* Last category gets a bottom breathing room so content doesn't kiss the popup edge. */
.tmpl-preview-cat:last-of-type[b-ismp9kb7kk] {
    padding-bottom: 16px;
}

.tmpl-preview-cat-name[b-ismp9kb7kk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 8px;
}

.tmpl-preview-cat-count[b-ismp9kb7kk] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #94a3b8;
    background: #f8fafc;
    padding: 1px 6px;
    border-radius: 999px;
    letter-spacing: 0;
    text-transform: none;
}

/* ─────────────────────────────────────────────────────────────
   Product card mockups — each layout mirrors the actual ProductCard
   variant the customer sees:
   • Grid (image top + price below + "+" corner)   → ProductCardGrocer/Market/Petshop
   • Horizontal (image left, name+price, "+" right) → ProductCardRestaurant/Cafe/Water
   ───────────────────────────────────────────────────────────── */

/* "Müşterilerin göreceği görünüm" hint above the cards */
.tmpl-preview-mode-hint[b-ismp9kb7kk] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 16px 0 16px;
}

/* ===== GRID card layout (Grocer/Market/Petshop) — compact, Getir-Market style.
   Real customer menu uses repeat(auto-fill, minmax(180px, 1fr)) which yields
   7-10 cols on desktop. We mirror the density at preview scale with 3 cols. ===== */
.tmpl-preview-products-grid[b-ismp9kb7kk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.tmpl-preview-grid-card[b-ismp9kb7kk] {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.tmpl-preview-grid-image[b-ismp9kb7kk] {
    aspect-ratio: 1 / 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.tmpl-preview-grid-image img[b-ismp9kb7kk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmpl-preview-grid-info[b-ismp9kb7kk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px 6px 7px 6px;
}

.tmpl-preview-grid-name[b-ismp9kb7kk] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Price + "+" on one row so the button stays anchored regardless of card height. */
.tmpl-preview-grid-price-row[b-ismp9kb7kk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.tmpl-preview-grid-price[b-ismp9kb7kk] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--tmpl-accent);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tmpl-preview-grid-unit[b-ismp9kb7kk] {
    font-size: 0.55rem;
    font-weight: 500;
    color: #94a3b8;
}

.tmpl-preview-grid-add[b-ismp9kb7kk] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--tmpl-accent);
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    cursor: default;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.16);
    pointer-events: none;
    flex-shrink: 0;
}

/* ===== Restaurant/Cafe — 2-col grid of horizontal cards (matches .products-grid) ===== */
.tmpl-preview-products-rest[b-ismp9kb7kk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* ===== WaterDistributor — single-column rows (matches .products-grid-rows) ===== */
.tmpl-preview-products-rows[b-ismp9kb7kk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tmpl-preview-h-card[b-ismp9kb7kk] {
    display: grid;
    grid-template-columns: 40px 1fr 22px;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

/* In single-row rows layout (WaterDistributor) cards have more room — bump up image */
.tmpl-preview-products-rows .tmpl-preview-h-card[b-ismp9kb7kk] {
    grid-template-columns: 48px 1fr 28px;
    gap: 10px;
    padding: 8px;
}

.tmpl-preview-h-image[b-ismp9kb7kk] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tmpl-preview-products-rows .tmpl-preview-h-image[b-ismp9kb7kk] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.tmpl-preview-h-image img[b-ismp9kb7kk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmpl-preview-h-info[b-ismp9kb7kk] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tmpl-preview-h-name[b-ismp9kb7kk] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tmpl-preview-h-price[b-ismp9kb7kk] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tmpl-accent);
}

.tmpl-preview-products-rows .tmpl-preview-h-name[b-ismp9kb7kk] {
    font-size: 0.82rem;
}

.tmpl-preview-products-rows .tmpl-preview-h-price[b-ismp9kb7kk] {
    font-size: 0.82rem;
}

.tmpl-preview-h-add[b-ismp9kb7kk] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--tmpl-accent);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: default;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    pointer-events: none;
}

.tmpl-preview-products-rows .tmpl-preview-h-add[b-ismp9kb7kk] {
    width: 26px;
    height: 26px;
    font-size: 16px;
}

/* Shared "+N daha" footer */
.tmpl-preview-products-more[b-ismp9kb7kk] {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    padding: 6px;
    background: transparent;
    border: 1px dashed #cbd5e0;
    border-radius: 6px;
}

.tmpl-preview-more-cats[b-ismp9kb7kk] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
}

/* /Components/Pages/Menus/PlatformMenusPanel.razor.rz.scp.css */
.pmp[b-059ulfg4n2] {
    display: flex;
    flex-direction: column;
    font-family: var(--ds-font-ui);
}

/* ---- Bulk actions (rendered in the grid toolbar, right-aligned) ----
   Anchor ::deep on .pmp (this component's own element, carrying its isolation scope).
   .pmp-grid sits on AppDataGrid's root with the child scope, so `.pmp-grid ::deep` never matches. */
.pmp[b-059ulfg4n2]  .adg-toolbar-left {
    flex: 1;
    justify-content: flex-end;
}
.pmp-bulk[b-059ulfg4n2] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ---- Compact grid overrides ----
   Anchor ::deep on .pmp (this component's scope); .pmp-grid sits on AppDataGrid's own
   root with the child scope, so `.pmp-grid ::deep` never matches from here. */
.pmp[b-059ulfg4n2]  .adg-cell {
    padding-left: var(--ds-space-3);
    padding-right: var(--ds-space-3);
}
.pmp[b-059ulfg4n2]  .adg-row--header > .adg-th {
    height: 40px;
}
.pmp[b-059ulfg4n2]  .adg-row > .adg-td {
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ---- Store cell (up to 2 lines) ---- */
.pmp-store[b-059ulfg4n2] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

/* ---- Platform cell ---- */
.pmp-plat[b-059ulfg4n2] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-width: 0;
}
.pmp-plat__logo[b-059ulfg4n2] {
    width: 26px; height: 26px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--ds-surface-alt);
}
.pmp-plat__logo--ph[b-059ulfg4n2] { background: var(--ds-surface-sunken); }
.pmp-plat__name[b-059ulfg4n2] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
}

/* ---- Status cells ---- */
.pmp-status[b-059ulfg4n2] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
}
.pmp-status__val[b-059ulfg4n2] {
    font-size: 0.75rem;
    font-weight: 600;
}
.pmp-status__val.is-on[b-059ulfg4n2]  { color: var(--ds-success); }
.pmp-status__val.is-off[b-059ulfg4n2] { color: var(--ds-text-subtle); }
.pmp-status__dash[b-059ulfg4n2] { color: var(--ds-text-subtle); }

/* ---- Inline automation column — info + three toggles, all on one horizontal row ---- */
.pmp-auto[b-059ulfg4n2] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    width: 100%;
    padding: 2px 0;
}
.pmp-auto__grid[b-059ulfg4n2] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}
.pmp-auto__cell[b-059ulfg4n2] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pmp-auto__caption[b-059ulfg4n2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-muted, #94a3b8);
}
/* ⓘ açıklayıcısı artık ortak AutomationHelpButton bileşeninde (tıklamayla açılan modal);
   eski hover balonu grid kaydırma kabı tarafından kırpıldığı için kaldırıldı. */
.pmp-auto__label[b-059ulfg4n2] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted, #475569);
    white-space: nowrap;
    cursor: help;
}
.pmp-auto__min[b-059ulfg4n2] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pmp-auto__minput[b-059ulfg4n2] {
    width: 48px;
    height: 24px;
    text-align: right;
    padding: 0 5px;
}
.pmp-auto__suffix[b-059ulfg4n2] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
}

/* ---- Actions: a single "İşlemler" dropdown trigger ---- */
.pmp-acts[b-059ulfg4n2] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.pmp-acts[b-059ulfg4n2]  .app-menu__trigger.pmp-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #334155);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.pmp-acts[b-059ulfg4n2]  .app-menu__trigger.pmp-menu-trigger:hover {
    border-color: var(--brand-600, #036ac4);
    color: var(--brand-600, #036ac4);
    background: var(--ds-surface-alt, #f8fafc);
}
.pmp-menu-trigger__inner[b-059ulfg4n2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* /Components/Pages/Menus/ProductCards/MenuSymbolLegendSheet.razor.rz.scp.css */
.sls-backdrop[b-sx2jb3a5ot] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: sls-fade-b-sx2jb3a5ot 0.18s ease;
}

.sls-sheet[b-sx2jb3a5ot] {
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0f172a);
    width: 100%;
    max-width: 520px;
    max-height: 88dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sls-slide-up-b-sx2jb3a5ot 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.sls-head[b-sx2jb3a5ot] {
    position: relative;
    padding: 10px 12px 10px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--ds-border, #eef2f6);
}

.sls-grabber[b-sx2jb3a5ot] {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--ds-border, #e2e8f0);
    margin: 0 auto 8px;
}

.sls-title[b-sx2jb3a5ot] {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding-right: 40px;
}

.sls-close[b-sx2jb3a5ot] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: var(--ds-surface-2, #f1f5f9);
    color: var(--ds-text-muted, #475569);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.sls-close svg[b-sx2jb3a5ot] { width: 18px; height: 18px; }
.sls-close:hover[b-sx2jb3a5ot] { background: var(--ds-border, #e2e8f0); }
.sls-close:focus-visible[b-sx2jb3a5ot] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }

.sls-body[b-sx2jb3a5ot] {
    overflow-y: auto;
    padding: 16px 20px 24px;
    -webkit-overflow-scrolling: touch;
}

.sls-intro[b-sx2jb3a5ot] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ds-text-muted, #475569);
    margin: 0 0 4px;
}

.sls-section[b-sx2jb3a5ot] {
    border-top: 1px solid var(--ds-border, #eef2f6);
    padding-top: 16px;
    margin-top: 16px;
}
.sls-section:first-of-type[b-sx2jb3a5ot] {
    border-top: none;
    padding-top: 8px;
    margin-top: 8px;
}
.sls-section h3[b-sx2jb3a5ot] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted, #64748b);
    margin: 0 0 12px;
}

/* Labelled symbol pills flow naturally and wrap — no fixed columns, so they
   don't leave sparse gaps on narrow screens. Each pill sizes to its content. */
.sls-list[b-sx2jb3a5ot] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.sls-list > *[b-sx2jb3a5ot] { max-width: 100%; }

@keyframes sls-fade-b-sx2jb3a5ot { from { opacity: 0; } to { opacity: 1; } }
@keyframes sls-slide-up-b-sx2jb3a5ot { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Desktop → centered modal instead of bottom sheet. */
@media (min-width: 640px) {
    .sls-backdrop[b-sx2jb3a5ot] { align-items: center; }
    .sls-sheet[b-sx2jb3a5ot] {
        border-radius: 18px;
        max-height: 84dvh;
        animation: sls-pop-b-sx2jb3a5ot 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .sls-grabber[b-sx2jb3a5ot] { display: none; }
    @keyframes sls-pop-b-sx2jb3a5ot { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}
/* /Components/Pages/Menus/ProductCards/NutritionIcon.razor.rz.scp.css */
/* Bare glyph — sized via --ico-size, coloured by tone. */
.nutri-ico[b-ircbq5fdth] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ico-size, 20px);
    height: var(--ico-size, 20px);
    flex: 0 0 auto;
    line-height: 0;
}

.nutri-ico[b-ircbq5fdth]  svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Labelled chip — pictogram + text, soft tinted background per tone. */
.nutri-chip[b-ircbq5fdth] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Plain mode — icon + name, no pill. Tone still colours the icon; label stays readable. */
.nutri-chip--plain[b-ircbq5fdth] {
    background: transparent !important;
    border-color: transparent !important;
    padding: 0;
    gap: 5px;
    font-weight: 600;
}
.nutri-chip--plain .nutri-chip__label[b-ircbq5fdth] { color: var(--ds-text, #334155); }

.nutri-chip__glyph[b-ircbq5fdth] {
    display: inline-flex;
    width: 16px;
    height: 16px;
    line-height: 0;
}

.nutri-chip__glyph[b-ircbq5fdth]  svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Tones — soft tinted bg + matching darker fg (design system pill convention). */
[data-tone="warning"][b-ircbq5fdth] { color: var(--nutri-warning-fg, #b45309); }
.nutri-chip[data-tone="warning"][b-ircbq5fdth] {
    background: var(--nutri-warning-bg, #fff7ed);
    border-color: var(--nutri-warning-bd, #fed7aa);
    color: var(--nutri-warning-fg, #b45309);
}

[data-tone="positive"][b-ircbq5fdth] { color: var(--nutri-positive-fg, #15803d); }
.nutri-chip[data-tone="positive"][b-ircbq5fdth] {
    background: var(--nutri-positive-bg, #f0fdf4);
    border-color: var(--nutri-positive-bd, #bbf7d0);
    color: var(--nutri-positive-fg, #15803d);
}

[data-tone="neutral"][b-ircbq5fdth] { color: var(--ds-text-muted, #64748b); }
.nutri-chip[data-tone="neutral"][b-ircbq5fdth] {
    background: var(--ds-surface-2, #f1f5f9);
    border-color: var(--ds-border, #e2e8f0);
    color: var(--ds-text-muted, #475569);
}
/* /Components/Pages/Menus/ProductCards/ProductCardECommerce.razor.rz.scp.css */
.product-card-ecommerce[b-5z14bqcu9s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid #f1f5f9;
}

.product-card-ecommerce:hover[b-5z14bqcu9s] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.product-card-ecommerce .product-image-container-grid[b-5z14bqcu9s] {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-ecommerce .product-image-box[b-5z14bqcu9s],
.product-card-ecommerce .product-image-placeholder[b-5z14bqcu9s] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-ecommerce .product-img[b-5z14bqcu9s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-ecommerce .product-info[b-5z14bqcu9s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-card-ecommerce .product-name[b-5z14bqcu9s] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-ecommerce .product-desc[b-5z14bqcu9s] {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-ecommerce .product-price[b-5z14bqcu9s] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
}

.product-card-ecommerce .struck-price-value[b-5z14bqcu9s] {
    font-size: 0.8125rem;
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 500;
}

.product-card-ecommerce .product-action-buttons[b-5z14bqcu9s] {
    margin-top: 6px;
}

.product-card-ecommerce .product-add-btn-wide[b-5z14bqcu9s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #0f172a;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.product-card-ecommerce .product-add-btn-wide:hover:not(.disabled)[b-5z14bqcu9s] {
    background: #1e293b;
}

.product-card-ecommerce .product-add-btn-wide.disabled[b-5z14bqcu9s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-card-ecommerce .quantity-controls[b-5z14bqcu9s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #0f172a;
    border-radius: 8px;
    padding: 4px;
}

.product-card-ecommerce .quantity-controls .quantity-btn[b-5z14bqcu9s] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-ecommerce .quantity-controls .quantity-btn:hover:not(.disabled)[b-5z14bqcu9s] {
    background: rgba(255, 255, 255, 0.32);
}

.product-card-ecommerce .quantity-controls .quantity-btn.disabled[b-5z14bqcu9s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-card-ecommerce .quantity-display[b-5z14bqcu9s] {
    flex: 1;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9375rem;
}

.product-card-ecommerce .out-of-stock-badge[b-5z14bqcu9s] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.6875rem;
    font-weight: 600;
}

.product-card-ecommerce .product-thumb-strip[b-5z14bqcu9s] {
    display: flex;
    gap: 6px;
    padding: 2px 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.25) transparent;
}

.product-card-ecommerce .product-thumb-strip[b-5z14bqcu9s]::-webkit-scrollbar {
    height: 4px;
}

.product-card-ecommerce .product-thumb-strip[b-5z14bqcu9s]::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.25);
    border-radius: 4px;
}

.product-card-ecommerce .product-thumb[b-5z14bqcu9s] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 0;
    background: #f8fafc;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s ease, transform 0.12s ease;
}

.product-card-ecommerce .product-thumb:hover[b-5z14bqcu9s] {
    border-color: #cbd5e0;
    transform: translateY(-1px);
}

.product-card-ecommerce .product-thumb-active[b-5z14bqcu9s] {
    border-color: #0f172a;
}

.product-card-ecommerce .product-thumb img[b-5z14bqcu9s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* /Components/Pages/Menus/ProductCards/ProductCardGrocer.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   Grocer (manav) — Getir-Market style compact card.
   Accent color is wired via a CSS custom property (--card-accent)
   set inline by the .razor based on Customization.PrimaryColor.
   ───────────────────────────────────────────────────────────── */

.product-card-grocer[b-rnxk14n3wy] {
    --card-accent: #22c55e; /* fallback if inline override missing */
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    border: 1px solid #f1f5f9;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-card-grocer:hover[b-rnxk14n3wy] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

/* ── Image ────────────────────────────────────── */
.product-card-grocer .product-image-container[b-rnxk14n3wy] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f8fafc;
    overflow: hidden;
}

.product-card-grocer .product-img[b-rnxk14n3wy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-card-grocer .product-image-placeholder[b-rnxk14n3wy] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

.product-card-grocer .product-out-of-stock-overlay[b-rnxk14n3wy] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    color: #b91c1c;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Info block ──────────────────────────────── */
.product-card-grocer .product-info[b-rnxk14n3wy] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 0;
}

.product-card-grocer .product-name[b-rnxk14n3wy] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1a202c;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-grocer .product-price-row[b-rnxk14n3wy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-card-grocer .product-price[b-rnxk14n3wy] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--card-accent);
    line-height: 1.1;
}

.product-card-grocer .price-unit-suffix[b-rnxk14n3wy] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #94a3b8;
}

.product-card-grocer .struck-price-value[b-rnxk14n3wy] {
    font-size: 0.75rem;
    color: #cbd5e0;
    text-decoration: line-through;
    font-weight: 500;
}

/* ── Action area ─────────────────────────────── */
.product-card-grocer .product-action[b-rnxk14n3wy] {
    margin-top: auto;
    padding: 8px 12px 12px;
    display: flex;
    justify-content: flex-end;
    min-height: 44px;
}

.product-card-grocer .add-btn[b-rnxk14n3wy] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--card-accent);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
    transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.product-card-grocer .add-btn:hover:not(.disabled)[b-rnxk14n3wy] {
    transform: scale(1.06);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.22);
    filter: brightness(0.95);
}

.product-card-grocer .add-btn:active:not(.disabled)[b-rnxk14n3wy] {
    transform: scale(0.96);
}

.product-card-grocer .add-btn.disabled[b-rnxk14n3wy] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Stepper (after first +) ─────────────────── */
.product-card-grocer .quantity-stepper[b-rnxk14n3wy] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--card-accent);
    border-radius: 999px;
    padding: 3px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
}

.product-card-grocer .stepper-btn[b-rnxk14n3wy] {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.product-card-grocer .stepper-btn:hover:not(.disabled)[b-rnxk14n3wy] {
    background: rgba(255, 255, 255, 0.32);
}

.product-card-grocer .stepper-btn.disabled[b-rnxk14n3wy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-card-grocer .stepper-display[b-rnxk14n3wy] {
    min-width: 40px;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0 4px;
}

/* ── Inactive state ──────────────────────────── */
.product-card-grocer.inactive-product[b-rnxk14n3wy] {
    opacity: 0.6;
    pointer-events: none;
}
/* /Components/Pages/Menus/ProductCards/ProductCardPetshop.razor.rz.scp.css */
.product-card-petshop[b-iv0lhdi8v5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid #f1f5f9;
}

.product-card-petshop:hover[b-iv0lhdi8v5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.18);
    border-color: #fbcfe8;
}

.product-card-petshop .product-image-container-large[b-iv0lhdi8v5] {
    width: 100%;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-petshop .product-image-box[b-iv0lhdi8v5] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-petshop .product-image-placeholder[b-iv0lhdi8v5] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-petshop .product-img[b-iv0lhdi8v5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.product-card-petshop .product-info[b-iv0lhdi8v5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-card-petshop .product-name[b-iv0lhdi8v5] {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}

.product-card-petshop .product-desc[b-iv0lhdi8v5] {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-petshop .product-price[b-iv0lhdi8v5] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 1.125rem;
    font-weight: 700;
    color: #be185d;
}

.product-card-petshop .price-unit-suffix[b-iv0lhdi8v5] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}

.product-card-petshop .struck-price-value[b-iv0lhdi8v5] {
    font-size: 0.8125rem;
    color: #94a3b8;
    text-decoration: line-through;
    margin-left: 4px;
}

.product-card-petshop .quantity-controls[b-iv0lhdi8v5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #be185d;
    border-radius: 999px;
    padding: 4px;
}

.product-card-petshop .quantity-controls .quantity-btn[b-iv0lhdi8v5] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-petshop .quantity-controls .quantity-btn:hover:not(.disabled)[b-iv0lhdi8v5] {
    background: rgba(255, 255, 255, 0.32);
}

.product-card-petshop .quantity-controls .quantity-btn.disabled[b-iv0lhdi8v5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-card-petshop .quantity-display[b-iv0lhdi8v5] {
    flex: 1;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9375rem;
}

.product-card-petshop .product-add-btn[b-iv0lhdi8v5] {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: #be185d;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.product-card-petshop .product-add-btn:hover:not(.disabled)[b-iv0lhdi8v5] {
    background: #9d174d;
}

.product-card-petshop .out-of-stock-badge[b-iv0lhdi8v5] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.6875rem;
    font-weight: 600;
}
/* /Components/Pages/Menus/ProductCards/ProductCardRestaurant.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   Restaurant product card — extracted from CustomerMenuPreview.razor.css
   so the styles apply inside the child component's scope hash. The parent
   used to render `.product-card` markup itself; we moved that markup into
   this child component, so its scoped styles need to live here too.
   ───────────────────────────────────────────────────────────── */

/* Kompakt liste kartı — Yemeksepeti / Uber Eats tarzı. Tek ekranda 6-7 ürün
   görünsün; küçük görsel + küçük yazı, isim/açıklama olabildiğince az kırpılsın. */
.product-card[b-h1hbqqboge] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 10px;
    background: white;
    border-radius: 14px;
    /* visible (not hidden) so the nutrition hover popover can escape the card.
       The image is clipped by its own .product-image-box; 10px padding keeps
       every other child off the rounded corners, so nothing leaks. */
    overflow: visible;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    min-height: 0;
    position: relative;
}

.product-card:hover[b-h1hbqqboge] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    /* lift above sibling cards so the popover paints over them */
    z-index: 30;
}

.product-card:active[b-h1hbqqboge] { transform: scale(0.995); }

.product-info[b-h1hbqqboge] {
    flex: 1;
    min-width: 0;
    padding: 0;
    padding-right: 8px;           /* açıklama görsele kadar uzasın; küçük nefes payı */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
}

.product-name.readonly[b-h1hbqqboge] {
    /* Tasarım sistemi fontuna sabitle. Aksi halde ürün adı, menünün per-menu
       Customization.FontFamily değerini (.menu-builder'a inline basılan) miras alır;
       bir menü serif seçmişse ürün adları serif, diğerinde sans çıkıp iki menü
       tutarsız görünür. Kategori başlığı zaten --ds-font-display kullanıyor. */
    font-family: var(--ds-font-ui);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #222;
    margin: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.product-desc.readonly[b-h1hbqqboge] {
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.35;
    /* Açıklama kırpılmaz — solda/sağda yer olduğundan tam metin gösterilir. */
    word-break: break-word;
}

/* Fiyat + kalori ortak alt satırı: fiyat solda, kcal sağ uçta. */
.product-bottom-row[b-h1hbqqboge] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.product-price[b-h1hbqqboge] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.price-value[b-h1hbqqboge] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color, #C20004);
}

.struck-price-value[b-h1hbqqboge] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #999;
    text-decoration: line-through;
    margin-left: 0.4rem;
}

/* Image section (right) — küçük kare thumbnail */
.product-image-container[b-h1hbqqboge] {
    width: 84px;
    height: 84px;
    align-self: center;
    flex-shrink: 0;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-box[b-h1hbqqboge] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

.product-img[b-h1hbqqboge] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    border-radius: 10px;
}

.product-card:hover .product-img[b-h1hbqqboge] {
    transform: scale(1.05);
}

/* Görseli olmayan ürünler için placeholder. Eskiden display:none idi; boş, soluk bir
   slate kutu bırakıyordu ("görünmüyor"). Artık markanın primary rengine hafif boyanmış,
   ortasında görünür bir yemek ikonu olan gerçek bir slot render ediyoruz. */
.product-image-placeholder[b-h1hbqqboge] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: color-mix(in srgb, var(--primary-color, #C20004) 10%, #eef1f5);
    color: color-mix(in srgb, var(--primary-color, #C20004) 60%, #94a3b8);
}

/* FluentIcon'u currentColor'a zorla → placeholder'ın brand-tinted rengini alır. */
.product-image-placeholder[b-h1hbqqboge]  svg,
.product-image-placeholder[b-h1hbqqboge]  svg path {
    fill: currentColor;
}

/* Add-to-cart button — görselin sağ-alt köşesine oturur (Uber Eats kalıbı) */
.product-action-buttons[b-h1hbqqboge] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
}

.product-add-btn.preview-btn[b-h1hbqqboge] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color, #C20004);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-add-btn.preview-btn:hover[b-h1hbqqboge] {
    background: #a50003;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(194, 0, 4, 0.4);
}

.product-add-btn.disabled[b-h1hbqqboge] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Badge for products with modifiers (count overlay) */
.product-badge-count[b-h1hbqqboge] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary-color, #C20004);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.badge-text[b-h1hbqqboge] {
    line-height: 1;
}

/* Quantity controls — aligned with the design-system stepper recipe.
   Background is a solid white pill so the count stays legible regardless
   of the product image behind it. The count itself is slate-900 bold so
   it never falls back to a low-contrast tint of the menu accent. */
.quantity-controls[b-h1hbqqboge] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 2px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}

.quantity-btn[b-h1hbqqboge] {
    background: var(--primary-color, #036ac4);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
    transition: opacity 0.2s ease;
}

.quantity-btn:hover:not(.disabled)[b-h1hbqqboge] {
    opacity: 0.88;
}

.quantity-btn.disabled[b-h1hbqqboge] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.quantity-btn.decrease[b-h1hbqqboge] {
    background: #64748b;     /* slate-500 — neutral, always readable */
    box-shadow: none;
}

.quantity-display[b-h1hbqqboge] {
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;          /* slate-900 — guaranteed visible on the white pill */
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 0 2px;
}

/* Allergen badges (food-specific to the Restaurant variant) */
.product-allergens[b-h1hbqqboge] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.allergen-badge[b-h1hbqqboge] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 12px;
    color: #e65100;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.allergen-badge:hover[b-h1hbqqboge] {
    background: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
}

.out-of-stock-badge[b-h1hbqqboge] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(194, 0, 4, 0.1);
    border: 1px solid rgba(194, 0, 4, 0.3);
    border-radius: 12px;
    color: #C20004;
    margin-left: 8px;
    white-space: nowrap;
}

.inactive-product[b-h1hbqqboge] {
    pointer-events: none;
}

/* Mobile */
@media (max-width: 768px) {
    .allergen-badge[b-h1hbqqboge] {
        font-size: 10px;
        padding: 3px 8px;
    }

    .out-of-stock-badge[b-h1hbqqboge] {
        font-size: 10px;
        padding: 3px 8px;
    }
}
/* /Components/Pages/Menus/ProductCards/ProductCardWaterDistributor.razor.rz.scp.css */
.product-card-water[b-v2ryb4gdn6] {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f5f9;
    transition: box-shadow 0.15s ease, transform 0.08s ease;
}

.product-card-water:hover[b-v2ryb4gdn6] {
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.16);
    border-color: #bfdbfe;
}

.product-card-water .product-water-icon[b-v2ryb4gdn6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    flex-shrink: 0;
}

.product-card-water .product-info[b-v2ryb4gdn6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-card-water .product-name[b-v2ryb4gdn6] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.product-card-water .product-price[b-v2ryb4gdn6] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #1d4ed8;
}

.product-card-water .struck-price-value[b-v2ryb4gdn6] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 500;
}

.product-card-water .product-action-buttons[b-v2ryb4gdn6] {
    flex-shrink: 0;
}

.product-card-water .quantity-controls[b-v2ryb4gdn6] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1d4ed8;
    border-radius: 999px;
    padding: 4px;
}

.product-card-water .quantity-controls .quantity-btn[b-v2ryb4gdn6] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-water .quantity-controls .quantity-btn:hover:not(.disabled)[b-v2ryb4gdn6] {
    background: rgba(255, 255, 255, 0.36);
}

.product-card-water .quantity-controls .quantity-btn.disabled[b-v2ryb4gdn6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-card-water .quantity-display[b-v2ryb4gdn6] {
    min-width: 28px;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
}

.product-card-water .product-add-btn[b-v2ryb4gdn6] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #1d4ed8;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.product-card-water .product-add-btn:hover:not(.disabled)[b-v2ryb4gdn6] {
    background: #1e40af;
}

.product-card-water .product-add-btn.disabled[b-v2ryb4gdn6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-card-water .out-of-stock-badge[b-v2ryb4gdn6] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.6875rem;
    font-weight: 600;
}
/* /Components/Pages/Menus/ProductCards/ProductDetailSheet.razor.rz.scp.css */
.pds-backdrop[b-sxlgjtlcf2] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: pds-fade-b-sxlgjtlcf2 0.18s ease;
}

.pds-sheet[b-sxlgjtlcf2] {
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0f172a);
    width: 100%;
    max-width: 520px;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pds-slide-up-b-sxlgjtlcf2 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.pds-head[b-sxlgjtlcf2] {
    position: relative;
    padding: 10px 12px 4px;
    flex: 0 0 auto;
}

.pds-grabber[b-sxlgjtlcf2] {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--ds-border, #e2e8f0);
    margin: 0 auto;
}

.pds-close[b-sxlgjtlcf2] {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: var(--ds-surface-2, #f1f5f9);
    color: var(--ds-text-muted, #475569);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.pds-close svg[b-sxlgjtlcf2] { width: 18px; height: 18px; }
.pds-close:hover[b-sxlgjtlcf2] { background: var(--ds-border, #e2e8f0); }
.pds-close:focus-visible[b-sxlgjtlcf2] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }

.pds-body[b-sxlgjtlcf2] {
    overflow-y: auto;
    padding: 4px 20px 24px;
    -webkit-overflow-scrolling: touch;
}

.pds-hero[b-sxlgjtlcf2] {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: var(--ds-surface-2, #f1f5f9);
    margin-bottom: 14px;
}
.pds-hero img[b-sxlgjtlcf2] { width: 100%; height: 100%; object-fit: cover; display: block; }

.pds-title[b-sxlgjtlcf2] {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.pds-price[b-sxlgjtlcf2] {
    font-size: 17px;
    font-weight: 700;
    color: var(--accent, #036ac4);
    margin-bottom: 10px;
}

.pds-desc[b-sxlgjtlcf2] {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ds-text-muted, #475569);
    margin: 0 0 14px;
}

.pds-prep[b-sxlgjtlcf2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-muted, #475569);
    background: var(--ds-surface-2, #f1f5f9);
    border-radius: 999px;
    padding: 5px 11px 5px 9px;
    margin-bottom: 16px;
}
.pds-prep svg[b-sxlgjtlcf2] { width: 16px; height: 16px; }

.pds-section[b-sxlgjtlcf2] {
    border-top: 1px solid var(--ds-border, #eef2f6);
    padding-top: 16px;
    margin-top: 16px;
}
.pds-section h3[b-sxlgjtlcf2] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted, #64748b);
    margin: 0 0 12px;
}

/* Nutrition — collapsible card with a clean two-column table. */
.pds-nutri[b-sxlgjtlcf2] {
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 16px;
}
.pds-nutri-head[b-sxlgjtlcf2] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--ds-surface-2, #f8fafc);
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--ds-text, #0f172a);
}
.pds-nutri-head:focus-visible[b-sxlgjtlcf2] { outline: 2px solid var(--accent, #036ac4); outline-offset: -2px; }

.pds-nutri-kcal[b-sxlgjtlcf2] { display: flex; align-items: baseline; gap: 4px; flex: 0 0 auto; }
.pds-nutri-kcal-num[b-sxlgjtlcf2] {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--accent, #036ac4);
    letter-spacing: -0.02em;
}
.pds-nutri-kcal-unit[b-sxlgjtlcf2] { font-size: 13px; font-weight: 700; color: var(--ds-text-muted, #64748b); }

.pds-nutri-meta[b-sxlgjtlcf2] { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pds-nutri-title[b-sxlgjtlcf2] { font-size: 13px; font-weight: 700; color: var(--ds-text, #0f172a); }
.pds-nutri-serving[b-sxlgjtlcf2] { font-size: 11.5px; color: var(--ds-text-muted, #94a3b8); font-weight: 600; }

.pds-nutri-chev[b-sxlgjtlcf2] {
    width: 18px; height: 18px; flex: 0 0 auto;
    color: var(--ds-text-muted, #94a3b8);
    transition: transform 0.2s ease;
}
.pds-nutri-head.is-open .pds-nutri-chev[b-sxlgjtlcf2] { transform: rotate(180deg); }

/* 3-column grid — compact label-over-value cells. */
.pds-nutri-table[b-sxlgjtlcf2] {
    margin: 0;
    padding: 14px 16px 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 12px;
}
.pds-nrow[b-sxlgjtlcf2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pds-nrow-label[b-sxlgjtlcf2] {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-muted, #94a3b8);
}
.pds-nrow-val[b-sxlgjtlcf2] {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--ds-text, #0f172a);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.pds-estimate[b-sxlgjtlcf2] {
    font-size: 11.5px;
    color: var(--ds-text-muted, #94a3b8);
    margin: 10px 0 0;
    font-style: italic;
}

.pds-chips[b-sxlgjtlcf2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pds-legal[b-sxlgjtlcf2] {
    font-size: 11px;
    line-height: 1.5;
    color: var(--ds-text-muted, #94a3b8);
    margin: 18px 0 0;
    text-align: center;
}

@keyframes pds-fade-b-sxlgjtlcf2 { from { opacity: 0; } to { opacity: 1; } }
@keyframes pds-slide-up-b-sxlgjtlcf2 { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Desktop → centered modal instead of bottom sheet. */
@media (min-width: 640px) {
    .pds-backdrop[b-sxlgjtlcf2] { align-items: center; }
    .pds-sheet[b-sxlgjtlcf2] {
        border-radius: 18px;
        max-height: 88dvh;
        animation: pds-pop-b-sxlgjtlcf2 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .pds-grabber[b-sxlgjtlcf2] { display: none; }
    @keyframes pds-pop-b-sxlgjtlcf2 { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}
/* /Components/Pages/Menus/ProductCards/ProductNutritionLine.razor.rz.scp.css */
.pnl[b-udogxr3vzv] {
    border-top: 1px solid var(--ds-border, #eef2f6);
    border-bottom: 1px solid var(--ds-border, #eef2f6);
}

.pnl-head[b-udogxr3vzv] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--ds-text, #0f172a);
}
.pnl-head:focus-visible[b-udogxr3vzv] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }

.pnl-kcal[b-udogxr3vzv] {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--accent, #036ac4);
}
.pnl-kcal svg[b-udogxr3vzv] { width: 14px; height: 14px; align-self: center; color: #ea580c; }
.pnl-kcal strong[b-udogxr3vzv] { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.pnl-kcal-unit[b-udogxr3vzv] { font-size: 11.5px; font-weight: 700; color: var(--ds-text-muted, #64748b); }

.pnl-icons[b-udogxr3vzv] { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }

.pnl-chev[b-udogxr3vzv] {
    width: 18px; height: 18px; flex: 0 0 auto; margin-left: auto;
    color: var(--ds-text-muted, #94a3b8);
    transition: transform 0.2s ease;
}
.pnl-chev.is-open[b-udogxr3vzv] { transform: rotate(180deg); }

/* Expanded body */
.pnl-body[b-udogxr3vzv] { padding: 2px 0 14px; }
.pnl-serving[b-udogxr3vzv] { font-size: 11.5px; font-weight: 600; color: var(--ds-text-muted, #94a3b8); margin-bottom: 10px; }

.pnl-table[b-udogxr3vzv] {
    margin: 0 0 6px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 12px;
}
.pnl-nrow[b-udogxr3vzv] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pnl-nrow-label[b-udogxr3vzv] { margin: 0; font-size: 11px; font-weight: 600; color: var(--ds-text-muted, #94a3b8); }
.pnl-nrow-val[b-udogxr3vzv] { margin: 0; font-size: 14px; font-weight: 800; color: var(--ds-text, #0f172a); font-variant-numeric: tabular-nums; }

.pnl-est[b-udogxr3vzv] { font-size: 11px; font-style: italic; color: var(--ds-text-muted, #94a3b8); margin: 4px 0 0; }

.pnl-group[b-udogxr3vzv] { margin-top: 12px; }
.pnl-group-label[b-udogxr3vzv] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted, #94a3b8);
    margin-bottom: 7px;
}
.pnl-chips[b-udogxr3vzv] { display: flex; flex-wrap: wrap; gap: 6px; }
/* /Components/Pages/Menus/ProductCards/ProductNutritionStrip.razor.rz.scp.css */
.pns[b-h1i46xkc8f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.pns-trigger[b-h1i46xkc8f] { position: relative; display: inline-flex; }

/* Split placement: icons on the left above the price; kcal pill on the right next to the image. */
.pns-icons--block[b-h1i46xkc8f] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 6px 0 2px;
}
.pns-trigger--right[b-h1i46xkc8f] {
    align-self: flex-end;
    /* margin-left:auto → fiyat gizli olsa bile kcal alt satırın sağ ucunda kalır. */
    margin: 0 0 2px auto;
    flex: 0 0 auto;
}

/* The nutrition trigger — plain (no pill): filled flame + value + chevron, in the menu accent. */
.pns-btn[b-h1i46xkc8f] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent, #036ac4);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.pns-btn:hover[b-h1i46xkc8f] { opacity: 0.82; }
.pns-btn:focus-visible[b-h1i46xkc8f] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; border-radius: 4px; }

.pns-btn-ico[b-h1i46xkc8f] { width: 14px; height: 14px; color: #ea580c; flex: 0 0 auto; }
.pns-btn-kcal[b-h1i46xkc8f] { font-weight: 800; letter-spacing: -0.01em; }
.pns-btn-unit[b-h1i46xkc8f] { font-size: 11px; font-weight: 600; color: var(--ds-text-muted, #64748b); }
.pns-btn-chev[b-h1i46xkc8f] { width: 13px; height: 13px; color: var(--ds-text-muted, #94a3b8); flex: 0 0 auto; }

.pns-icons[b-h1i46xkc8f] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

/* ── Hover popover (desktop) — pure CSS ───────────────────────────────────
   Anchored above the trigger. Escapes clipping because the product card is
   overflow:visible and lifts its z-index on hover (see CustomerMenuPreview). */
.pns-pop[b-h1i46xkc8f] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 50;
    min-width: 248px;
    max-width: 300px;
    padding: 14px 16px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}
/* Kcal pill sits on the right, so anchor the popover to the trigger's right edge. */
.pns-trigger--right .pns-pop[b-h1i46xkc8f] { left: auto; right: 0; }
.pns-trigger:hover .pns-pop[b-h1i46xkc8f] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pns-pop-kcal[b-h1i46xkc8f] { display: flex; align-items: baseline; gap: 5px; margin-bottom: 10px; }
.pns-pop-kcal-num[b-h1i46xkc8f] { font-size: 24px; font-weight: 800; color: var(--accent, #036ac4); line-height: 1; letter-spacing: -0.02em; }
.pns-pop-kcal-unit[b-h1i46xkc8f] { font-size: 12px; font-weight: 700; color: var(--ds-text-muted, #64748b); }

.pns-pop-macros[b-h1i46xkc8f] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ds-border, #eef2f6);
}
.pns-pop-macro[b-h1i46xkc8f] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pns-pop-macro-val[b-h1i46xkc8f] { font-size: 15px; font-weight: 800; color: var(--ds-text, #0f172a); white-space: nowrap; letter-spacing: -0.01em; }
.pns-pop-macro-label[b-h1i46xkc8f] { font-size: 10.5px; color: var(--ds-text-muted, #94a3b8); }

.pns-pop-group[b-h1i46xkc8f] { margin-bottom: 8px; }
.pns-pop-label[b-h1i46xkc8f] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted, #94a3b8);
    margin-bottom: 6px;
}
.pns-pop-chips[b-h1i46xkc8f] { display: flex; flex-wrap: wrap; gap: 5px; }

.pns-pop-more[b-h1i46xkc8f] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent, #036ac4);
    margin-top: 4px;
}
/* /Components/Pages/Menus/Products.razor.rz.scp.css */
.product-image[b-ih3p3zhzk2] {
    width: 128px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

    .product-image img[b-ih3p3zhzk2] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.placeholder-image[b-ih3p3zhzk2] {
    width: 30%;
    height: 30%;
    background: var(--neutral-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
}

.description-cell[b-ih3p3zhzk2] {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
/* /Components/Pages/Menus/StoreMenusView.razor.rz.scp.css */
.store-section-header[b-ktbxlj0i0n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 0;
}

.store-section-info[b-ktbxlj0i0n] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.store-section-name[b-ktbxlj0i0n] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.store-section-badges[b-ktbxlj0i0n] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-menu-icon[b-ktbxlj0i0n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.live-menu-icon:hover[b-ktbxlj0i0n] {
    opacity: 1;
}

.live-menu-icon-wrapper[b-ktbxlj0i0n] {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.live-menu-logo[b-ktbxlj0i0n] {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 5px;
}

.live-menu-status-dot[b-ktbxlj0i0n] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--neutral-layer-1);
}

.dot-open[b-ktbxlj0i0n] {
    background-color: #22c55e;
}

.dot-closed[b-ktbxlj0i0n] {
    background-color: #ef4444;
}

.dot-unknown[b-ktbxlj0i0n] {
    background-color: #a1a1aa;
}

.menu-cards-grid[b-ktbxlj0i0n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 16px 8px;
}

.empty-state[b-ktbxlj0i0n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 3rem;
    text-align: center;
}

.store-empty-state[b-ktbxlj0i0n] {
    padding: 24px 16px;
    text-align: center;
}

@media (max-width: 768px) {
    .menu-cards-grid[b-ktbxlj0i0n] {
        grid-template-columns: 1fr;
    }

    .store-section-header[b-ktbxlj0i0n] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
/* /Components/Pages/Orders/Dialogs/CancelOrderModal.razor.rz.scp.css */
/* Cancel-order confirmation — reason field (AppModal içinde).
   Tasarım UpdateOrderModal'daki iptal onayı ile aynıdır. */
.cancel-reason-field[b-77nk46rhic] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.cancel-reason-field .ds-label[b-77nk46rhic] {
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text, var(--fg-1));
}

.cancel-reason-optional[b-77nk46rhic] {
    font-weight: 400;
    color: var(--ds-text-muted, var(--fg-hint));
}

.cancel-reason-textarea[b-77nk46rhic] {
    width: 100%;
    min-height: 76px;
    resize: vertical;
}
/* /Components/Pages/Orders/Dialogs/CompleteOrderModal.razor.rz.scp.css */
.complete-order-dialog[b-8eqd1oc0jp] {
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
}

/* Info Card */
.info-card[b-8eqd1oc0jp] {
    padding: 16px;
    margin-bottom: 16px;
    background-color: var(--neutral-layer-1);
    border-radius: 4px;
}

.info-row[b-8eqd1oc0jp] {
    margin-top: 8px;
}

/* Payment Methods Card */
.payment-methods-card[b-8eqd1oc0jp] {
    padding: 16px;
    margin-bottom: 16px;
    background-color: var(--neutral-layer-1);
    border-radius: 4px;
}

.payment-method-row[b-8eqd1oc0jp] {
    margin-bottom: 12px;
    align-items: center;
}

.payment-method-checkbox[b-8eqd1oc0jp] {
    width: 200px;
}

.payment-amount-input[b-8eqd1oc0jp] {
    width: 150px !important;
    text-align: right;
    padding-right: 8px;
}

.payment-amount-input input[b-8eqd1oc0jp] {
    text-align: right;
}

.currency-label[b-8eqd1oc0jp] {
    margin-left: 8px;
    color: var(--neutral-foreground-rest);
}

.current-badge[b-8eqd1oc0jp] {
    margin-left: 8px;
}

.payment-divider[b-8eqd1oc0jp] {
    margin: 12px 0;
}

.total-payment-row[b-8eqd1oc0jp] {
    margin-top: 8px;
}

/* Text Styles */
.success-text[b-8eqd1oc0jp] {
    color: var(--success-foreground-rest);
    font-weight: 500;
}

.error-text[b-8eqd1oc0jp] {
    color: var(--error-foreground-rest);
    font-weight: 500;
}

/* Error Message */
.error-message[b-8eqd1oc0jp] {
    margin-top: 8px;
    color: var(--error-foreground-rest);
    align-items: center;
    gap: 8px;
}

/* Completion Note */
.completion-note[b-8eqd1oc0jp] {
    width: 100%;
    min-height: 80px;
    background-color: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-input-rest);
    border-radius: 4px;
    resize: vertical;
}

.completion-note:focus[b-8eqd1oc0jp] {
    border-color: var(--accent-stroke-focus);
    outline: none;
}

/* POS Terminal (Pavo Cloud) — geçici seçim */
.pos-terminal-card[b-8eqd1oc0jp] {
    padding: 16px;
    margin-bottom: 16px;
    background-color: var(--neutral-layer-1);
    border-radius: 4px;
}

.pos-terminal-select[b-8eqd1oc0jp] {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    background-color: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-input-rest);
    border-radius: 4px;
    font: inherit;
    cursor: pointer;
}

.pos-terminal-select:focus[b-8eqd1oc0jp] {
    border-color: var(--accent-stroke-focus);
    outline: none;
}

.pos-terminal-hint[b-8eqd1oc0jp] {
    display: block;
    margin-top: 8px;
    color: var(--neutral-foreground-rest);
    font-size: 12px;
}

/* Validation Summary */
.validation-summary[b-8eqd1oc0jp] {
    color: var(--error-foreground-rest);
}
/* /Components/Pages/Orders/Dialogs/InvoiceModal.razor.rz.scp.css */
/* InvoiceModal — e-archive invoice preview / issue dialog.
   Token-driven, no FluentUI. Matches the AppModal + .ds-* design system. */

/* ===== Loading ===== */
.inv-loading[b-xnmkocld3c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 24px;
    color: var(--ds-text-muted);
    font-size: 0.9rem;
}

/* ===== Lead line ===== */
.inv-lead[b-xnmkocld3c] {
    margin: 0 0 16px;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ds-text-muted);
}

/* ===== Invoice document card ===== */
.inv-doc[b-xnmkocld3c] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 20px;
    box-shadow: var(--ds-shadow-1);
}

.inv-doc__head[b-xnmkocld3c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--brand-600);
}

.inv-doc__title[b-xnmkocld3c] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-600);
    letter-spacing: -0.01em;
}

.inv-doc__store[b-xnmkocld3c] {
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--ds-text-muted);
}

.inv-doc__meta[b-xnmkocld3c] {
    margin: 0;
    display: grid;
    gap: 2px;
    text-align: right;
    font-size: 0.78rem;
}

.inv-doc__meta > div[b-xnmkocld3c] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.inv-doc__meta dt[b-xnmkocld3c] {
    margin: 0;
    color: var(--ds-text-subtle);
}

.inv-doc__meta dd[b-xnmkocld3c] {
    margin: 0;
    font-weight: 600;
    color: var(--ds-text);
}

/* ===== Sections ===== */
.inv-section[b-xnmkocld3c] {
    margin-bottom: 18px;
}

.inv-section:last-of-type[b-xnmkocld3c] {
    margin-bottom: 0;
}

.inv-section__title[b-xnmkocld3c] {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-subtle);
}

/* ===== Buyer form ===== */
.inv-buyer[b-xnmkocld3c] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.inv-buyer__wide[b-xnmkocld3c] {
    grid-column: 1 / -1;
}

.inv-opt[b-xnmkocld3c] {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--ds-text-subtle);
}

/* ===== Items table ===== */
.inv-table-wrap[b-xnmkocld3c] {
    overflow-x: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.inv-table[b-xnmkocld3c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.inv-table th[b-xnmkocld3c] {
    position: sticky;
    top: 0;
    background: var(--ds-surface-alt);
    text-align: left;
    padding: 9px 10px;
    font-weight: 600;
    color: var(--ds-text);
    border-bottom: 1px solid var(--ds-border);
    white-space: nowrap;
}

.inv-table th small[b-xnmkocld3c] {
    font-weight: 400;
    color: var(--ds-text-subtle);
    font-size: 0.68rem;
}

.inv-table td[b-xnmkocld3c] {
    padding: 9px 10px;
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-text);
}

.inv-table tbody tr:last-child td[b-xnmkocld3c] {
    border-bottom: none;
}

.inv-r[b-xnmkocld3c] {
    text-align: right;
    white-space: nowrap;
}

.inv-strong[b-xnmkocld3c] {
    font-weight: 700;
}

/* ===== Totals ===== */
.inv-totals[b-xnmkocld3c] {
    margin-top: 14px;
    margin-left: auto;
    width: min(320px, 100%);
    display: grid;
    gap: 4px;
}

.inv-totals__row[b-xnmkocld3c] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    font-size: 0.85rem;
    color: var(--ds-text-muted);
}

.inv-totals__row span:last-child[b-xnmkocld3c] {
    font-weight: 600;
    color: var(--ds-text);
}

.inv-totals__row--grand[b-xnmkocld3c] {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 2px solid var(--brand-600);
    font-size: 1rem;
}

.inv-totals__row--grand span[b-xnmkocld3c] {
    font-weight: 800;
    color: var(--brand-600);
}

/* ===== OTP step ===== */
.inv-otp[b-xnmkocld3c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 24px 16px;
}

.inv-otp__icon[b-xnmkocld3c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--ds-radius-pill);
    background: var(--brand-50);
    color: var(--brand-600);
}

.inv-otp__icon[b-xnmkocld3c]  svg { fill: currentColor; }

.inv-otp__title[b-xnmkocld3c] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ds-text);
}

.inv-otp__desc[b-xnmkocld3c] {
    margin: 0;
    max-width: 360px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ds-text-muted);
}

.inv-otp__input[b-xnmkocld3c] {
    width: 220px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    padding-left: 0.4em;
    height: 52px;
}

.inv-otp__error[b-xnmkocld3c] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ds-danger);
}

.inv-otp__resend[b-xnmkocld3c] {
    background: none;
    border: none;
    padding: 4px 8px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-600);
    cursor: pointer;
    border-radius: var(--ds-radius-sm);
}

.inv-otp__resend:hover:not(:disabled)[b-xnmkocld3c] { text-decoration: underline; }
.inv-otp__resend:disabled[b-xnmkocld3c] { color: var(--ds-text-subtle); cursor: not-allowed; }
.inv-otp__resend:focus-visible[b-xnmkocld3c] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* ===== Done step ===== */
.inv-done[b-xnmkocld3c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 40px 24px;
}

.inv-done__icon[b-xnmkocld3c] {
    display: inline-flex;
    color: var(--ds-success);
}

.inv-done__icon[b-xnmkocld3c]  svg { fill: currentColor; }

.inv-done__title[b-xnmkocld3c] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ds-text);
}

.inv-done__desc[b-xnmkocld3c] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ds-text-muted);
}

/* ===== Responsive ===== */
@media (max-width: 560px) {
    .inv-doc__head[b-xnmkocld3c] { flex-direction: column; }
    .inv-doc__meta[b-xnmkocld3c] { text-align: left; }
    .inv-doc__meta > div[b-xnmkocld3c] { justify-content: flex-start; }
    .inv-buyer[b-xnmkocld3c] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Orders/Dialogs/OrderDetailsDialog.razor.rz.scp.css */
/* Dialog Header */
.dialog-header[b-j8e120m4bd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.dialog-subheader[b-j8e120m4bd] {
    margin-top: 0.5rem;
    color: var(--neutral-foreground-hint);
}


/* Layout Structure */
.order-content[b-j8e120m4bd] {
    padding: 16px;
}

.split-layout[b-j8e120m4bd] {
    display: flex;
    gap: 12px;
}

.left-column[b-j8e120m4bd] {
    flex: 7;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
}

.right-column[b-j8e120m4bd] {
    flex: 3;
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding-left: 12px;
}

/* Section Titles */
.section-title[b-j8e120m4bd] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 0;
    color: var(--neutral-foreground-rest);
}

.notes-title[b-j8e120m4bd], 
.payment-methods-title[b-j8e120m4bd] {
    margin-top: 16px;
}

/* Order Items */
.order-items[b-j8e120m4bd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.order-items[b-j8e120m4bd]::-webkit-scrollbar {
    width: 6px;
}

.order-items[b-j8e120m4bd]::-webkit-scrollbar-thumb {
    background-color: var(--neutral-stroke-rest);
    border-radius: 3px;
}

.order-item[b-j8e120m4bd] {
    border-radius: 4px;
    margin-bottom: 8px;
}

.order-item-modifiers li[b-j8e120m4bd] {
    padding: 0;
}

.modified-item[b-j8e120m4bd] {
    border-left: 3px solid var(--warning-foreground-rest);
}

.item-content[b-j8e120m4bd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
}

.item-details[b-j8e120m4bd] {
    display: flex;
    align-items: center;
}

.item-name[b-j8e120m4bd] {
    font-weight: 500;
}

.item-quantity[b-j8e120m4bd] {
    color: var(--neutral-foreground-hint);
    font-weight: 500;
    margin-left: 8px;
}

.item-price[b-j8e120m4bd] {
    font-weight: 500;
}

.item-notes[b-j8e120m4bd] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 8px 12px;
    color: var(--neutral-foreground-hint);
    font-size: 13px;
    border-top: 1px dashed var(--neutral-stroke-divider-rest);
    margin-top: 4px;
}

/* Payment Information */
.payment-card[b-j8e120m4bd] {
    background-color: var(--neutral-layer-1);
    padding: 12px;
    border-radius: 4px;
}

.total-row[b-j8e120m4bd] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
}

.discount-row[b-j8e120m4bd] {
    color: #4caf50;
}

.final-total[b-j8e120m4bd] {
    font-weight: 600;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    font-size: 16px;
}

/* Payment Methods */
.payment-methods[b-j8e120m4bd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-method-item[b-j8e120m4bd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4caf50;
    padding: 8px 8px;
    border-radius: 4px;
    border: 1px solid var(--neutral-stroke-divider-rest);
}

/* Notes Field */
.notes-field[b-j8e120m4bd] {
    width: 100% !important;
    min-height: 80px;
    margin-top: 1rem;
    background-color: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-input-rest);
    border-radius: 4px;
    resize: vertical;
}

.notes-field:focus[b-j8e120m4bd] {
    border-color: var(--accent-stroke-focus);
    outline: none;
}


/* /Components/Pages/Orders/Dialogs/OrderQuickViewModal.razor.rz.scp.css */
/* OrderQuickViewModal — design-system order detail view inside AppModal.
   Wide workbench layout: a clean identity header, a full-width status band
   (replacing the old square status chips), and a two-column body on roomy
   screens (left = order story, right = history/context). All surfaces consume
   --ds-*/--brand-* tokens (never hardcoded hex except the status --seg-color
   custom props which come from the on-brand tone maps in code). */

/* ---- Header (custom HeaderContent slot) — identity row only ---- */
.oqv-head[b-xi16fitvwq] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 28px; /* clear the AppModal close button */
}

.oqv-head__main[b-xi16fitvwq] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.oqv-head__logo[b-xi16fitvwq] {
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.oqv-head__logo img[b-xi16fitvwq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Order-type glyph variant (dine-in / take-away) — brand-tinted icon
   instead of a brand/integration logo image. */
.oqv-head__logo--icon[b-xi16fitvwq] {
    background: var(--brand-50);
    border-color: transparent;
    color: var(--brand-600);
}

.oqv-head__logo--icon svg[b-xi16fitvwq] {
    width: 22px;
    height: 22px;
}

.oqv-head__text[b-xi16fitvwq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.oqv-head__title[b-xi16fitvwq] {
    margin: 0;
    font-family: var(--ds-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ds-text);
    line-height: 1.2;
}

.oqv-head__sub[b-xi16fitvwq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.2;
}

.oqv-head__date[b-xi16fitvwq] {
    font-size: 12px;
    color: var(--ds-text-muted);
}

/* "Fiş: #36" — alt satırda (tarih yanında), marka tonunda vurgulu.
   Tarih/saatten belirgin büyük, fiş no öne çıksın. */
.oqv-head__fis[b-xi16fitvwq] {
    font-size: 15px;
    font-weight: 800;
    color: var(--brand-700);
}

.oqv-head__dot[b-xi16fitvwq] {
    color: var(--ds-text-subtle);
}

/* ---- Loading / empty ---- */
.oqv-loading[b-xi16fitvwq],
.oqv-empty[b-xi16fitvwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 200px;
    color: var(--ds-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.oqv-empty svg[b-xi16fitvwq] { color: var(--ds-text-subtle); }


/* ---- Body wrapper ---- */
.oqv[b-xi16fitvwq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- Status summary — ONE full-width card above the order-items card,
   holding borderless inline mini-stats. The card frame is constant (always
   100% wide), so nothing shifts between orders no matter how many fields
   exist or how long their values are; without per-chip borders/padding the
   five stats almost always fit one line, and when they don't the overflow
   flows to the next line INSIDE the same card like running text — which
   reads as natural flow, not a broken grid. ---- */
.oqv-status[b-xi16fitvwq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 28px;
    padding: 10px 16px;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.oqv-status__seg[b-xi16fitvwq] {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}

.oqv-status__label[b-xi16fitvwq] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-muted);
    white-space: nowrap;
}

/* Ödeme başlığı satırı: "ÖDEME" etiketi + kanal çipi (Online / Kapıda) yan yana. */
.oqv-status__label--payment[b-xi16fitvwq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Ödeme kanalı çipi — başlığın yanında küçük tinted pill; büyük-harf/letter-spacing
   miras almasın diye kendi tipografisini set eder. */
.oqv-status__paytag[b-xi16fitvwq] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 999px;
}

.oqv-status__paytag--online[b-xi16fitvwq] {
    color: var(--ds-success, #16a34a);
    background: color-mix(in srgb, var(--ds-success, #16a34a) 12%, transparent);
}

.oqv-status__paytag--ondelivery[b-xi16fitvwq] {
    color: var(--ds-warning);
    background: color-mix(in srgb, var(--ds-warning) 12%, transparent);
}

.oqv-status__value[b-xi16fitvwq] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.oqv-status__text[b-xi16fitvwq] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oqv-status__value--tinted .oqv-status__text[b-xi16fitvwq] {
    color: var(--seg-color, var(--ds-text));
}

/* Durum/teslimat metni sıkışınca 2. satıra sarabilir (ödeme gibi) — nokta
   ortada asılı kalmasın diye ilk satıra hizalanır. */
.oqv-status__value--tinted[b-xi16fitvwq] { align-items: flex-start; }
.oqv-status__value--tinted .oqv-status__dot[b-xi16fitvwq] { margin-top: 5px; }

/* Colored status dot — halo tint makes the hue readable at a glance without
   filling the whole segment with color. */
.oqv-status__dot[b-xi16fitvwq] {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--seg-color, var(--ds-text-subtle));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--seg-color, var(--ds-text-subtle)) 18%, transparent);
}

.oqv-status__glyph[b-xi16fitvwq] {
    display: inline-flex;
    flex: none;
    color: var(--ds-text-muted);
}

.oqv-status__glyph[b-xi16fitvwq]  svg {
    width: 16px;
    height: 16px;
}

/* Online-paid check — sits inline before the payment-method name; the detail
   lives in the tooltip so the name keeps its full width. */
.oqv-status__check[b-xi16fitvwq] {
    display: inline-flex;
    flex: none;
    margin-top: 1px;
    color: var(--ds-success, #16a34a);
}

.oqv-status__check[b-xi16fitvwq]  svg {
    width: 16px;
    height: 16px;
}

/* Ödeme segmenti — yöntem adı kırpılmasın, gerekirse 3 satıra sarsın. */
.oqv-status__seg--payment .oqv-status__value[b-xi16fitvwq] { align-items: flex-start; }

.oqv-status__text--wrap[b-xi16fitvwq] {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    line-height: 1.25;
}

/* Payment channel note — small tinted pill next to the payment method
   (Online Ödendi = success, Kapıda Ödeme = warning). */
.oqv-status__hint[b-xi16fitvwq] {
    flex: none;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 999px;
}

.oqv-status__hint--success[b-xi16fitvwq] {
    color: var(--ds-success, #16a34a);
    background: color-mix(in srgb, var(--ds-success, #16a34a) 12%, transparent);
}

.oqv-status__hint--warning[b-xi16fitvwq] {
    color: var(--ds-warning);
    background: color-mix(in srgb, var(--ds-warning) 12%, transparent);
}

/* Elapsed-time stat — tabular number in brand tone. As the order ages the
   NUMBER itself becomes a small tinted pill (amber → red); the stat has no
   box of its own anymore, so urgency is carried by the value, and the card
   geometry never changes. */
.oqv-status__seg--timer .oqv-status__text--num[b-xi16fitvwq] {
    font-variant-numeric: tabular-nums;
    color: var(--brand-700);
    white-space: nowrap;
}

.oqv-status__seg--timer.is-warn .oqv-status__text--num[b-xi16fitvwq],
.oqv-status__seg--timer.is-danger .oqv-status__text--num[b-xi16fitvwq] {
    padding: 1px 8px;
    margin-left: -2px;
    border-radius: 999px;
}

.oqv-status__seg--timer.is-warn .oqv-status__text--num[b-xi16fitvwq] {
    color: var(--ds-warning);
    background: color-mix(in srgb, var(--ds-warning) 12%, transparent);
}

.oqv-status__seg--timer.is-warn .oqv-status__label[b-xi16fitvwq] { color: var(--ds-warning); }

.oqv-status__seg--timer.is-danger .oqv-status__text--num[b-xi16fitvwq] {
    color: var(--ds-danger);
    background: color-mix(in srgb, var(--ds-danger) 12%, transparent);
}

.oqv-status__seg--timer.is-danger .oqv-status__label[b-xi16fitvwq] { color: var(--ds-danger); }

/* ---- Two-column body grid — CompleteOrder/UpdateOrder-style split: the
   (~40%) left column carries customer/delivery info + notes + history
   (tracking timeline, fiscal docs); the (~60%) right column carries the
   status band + order items + payments. Single column on narrow screens. ---- */
.oqv-cols[b-xi16fitvwq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.oqv-col[b-xi16fitvwq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

@media (min-width: 960px) {
    .oqv-cols[b-xi16fitvwq] {
        grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr);
    }

    /* Yan kolon hiç render edilmediyse tek sütun kalır — aksi halde grid ikinci
       sütunu boş bırakıp içeriği sağa itiyordu. */
    .oqv-cols--single[b-xi16fitvwq] {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* ---- Cancellation banner (terminal cancelled / rejected orders) ----
   Headline card carrying the cancel reason — whether typed by staff or pushed
   from a food platform. Danger-tinted so it reads as the order's headline,
   above the rest of the (now-historical) detail. */
.oqv-cancel[b-xi16fitvwq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ds-radius-md);
    background: color-mix(in srgb, var(--ds-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ds-danger) 28%, transparent);
}

.oqv-cancel__icon[b-xi16fitvwq] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--ds-radius-sm);
    background: color-mix(in srgb, var(--ds-danger) 14%, transparent);
    color: var(--ds-danger);
}

.oqv-cancel__body[b-xi16fitvwq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.oqv-cancel__label[b-xi16fitvwq] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-danger);
}

.oqv-cancel__text[b-xi16fitvwq] {
    font-size: 0.875rem;
    color: var(--ds-text);
    line-height: 1.4;
    white-space: pre-wrap;
}

/* ---- Sipariş / kurye notları — sipariş detayları başlığının altında, ürün
   listesinin ÜSTÜNDE kompakt satırlar. Not metni koda TEK SATIR olarak gelir
   (satır sonları " · " ile birleştirilmiştir); burada da en çok 2 satıra
   kırpılıp gerisi "…" olur (tam metin title'da) — modal aşağı doğru uzamasın.
   Etiket + metin yan yana; renk yalnız küçük ikon çipinde taşınır. ---- */
.oqv-dnotes[b-xi16fitvwq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Toplam satırının hemen ALTINDA — üstten ince bir ayraçla ayrılır. */
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ds-border);
}

.oqv-dnote[b-xi16fitvwq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    min-width: 0;
}

.oqv-dnote__icon[b-xi16fitvwq] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--ds-radius-sm);
    background: rgba(217, 119, 6, 0.12);
    color: var(--ds-warning);
}
.oqv-dnote__icon svg[b-xi16fitvwq] { width: 13px; height: 13px; }

/* Kurye notu — aynı sakin kart; yalnız ikon çipi markaya kayar. */
.oqv-dnote--courier .oqv-dnote__icon[b-xi16fitvwq] {
    background: var(--brand-50);
    color: var(--brand-600);
}

.oqv-dnote__label[b-xi16fitvwq] {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted);
    white-space: nowrap;
}

.oqv-dnote__text[b-xi16fitvwq] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--ds-text);
    line-height: 1.35;
    /* Metin kırpılmaz — newline'ları alınmış not, gerektiği kadar (3-4 satır)
       doğal şekilde sarar. */
    overflow-wrap: anywhere;
}

/* ---- Delivery preferences (cutlery / doorbell / leave-at-door) ----
   Only ACTIVE (special-instruction) preferences are rendered — each a compact
   brand chip sitting in the order-items head. Default/no-op states are not
   shown at all. */
.oqv-pref[b-xi16fitvwq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--brand-200);
    background: var(--brand-50);
}

.oqv-pref__icon[b-xi16fitvwq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--brand-700);
}

.oqv-pref__icon svg[b-xi16fitvwq] {
    width: 15px;
    height: 15px;
}

.oqv-pref__label[b-xi16fitvwq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-700);
    white-space: nowrap;
}

/* Servis (çatal-bıçak) tercihi iki durumda da gösterilir; renk durumu anlatır. */
.oqv-pref--positive[b-xi16fitvwq] {
    border-color: var(--ds-success);
    background: rgba(22, 163, 74, 0.10);
}

.oqv-pref--positive .oqv-pref__icon[b-xi16fitvwq],
.oqv-pref--positive .oqv-pref__label[b-xi16fitvwq] { color: var(--ds-success); }

.oqv-pref--negative[b-xi16fitvwq] {
    border-color: var(--ds-danger);
    background: rgba(220, 38, 38, 0.10);
}

.oqv-pref--negative .oqv-pref__icon[b-xi16fitvwq],
.oqv-pref--negative .oqv-pref__label[b-xi16fitvwq] { color: var(--ds-danger); }

/* ---- Sections ---- */
.oqv-section[b-xi16fitvwq] {
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 14px 16px;
}

.oqv-section__title[b-xi16fitvwq] {
    margin: 0 0 10px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted);
}

/* Section header row — title left, aside/context right. */
.oqv-section__head[b-xi16fitvwq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.oqv-section__head .oqv-section__title[b-xi16fitvwq] { margin: 0; }

/* Right cluster of "Sipariş Kalemleri" head: active preference chips. */
.oqv-section__headend[b-xi16fitvwq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.oqv-courier[b-xi16fitvwq] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
}

.oqv-courier__label[b-xi16fitvwq] {
    color: var(--ds-text-muted);
    font-weight: 500;
}

.oqv-courier--warn[b-xi16fitvwq] { color: var(--ds-warning); }

/* Bold distance appended to the delivery address, e.g. "(4.7 km)". */
.oqv-info__dist[b-xi16fitvwq] {
    color: var(--brand-700);
    font-weight: 700;
    white-space: nowrap;
    margin-left: 2px;
}

/* ---- Info rows (definition list) ----
   Etiket ve değer YAN YANA ("Platform Kodu: s365"). Sütunlar dl'nin kendisinde:
   satırlar display:contents ile dt/dd'yi doğrudan grid'e bırakır, böylece etiket
   sütunu TÜM satırların en uzun etiketine (max-content) göre boyutlanır — en
   uzun etiket kartın sol kenarından ("MÜŞTERİ BİLGİLERİ" başlığının M'siyle aynı
   hizadan) başlar, kısa etiketler sağa yaslanıp ":" işaretleri ortak hizada durur. */
.oqv-info[b-xi16fitvwq] {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 8px;
    row-gap: 8px;
    align-items: baseline;
}

.oqv-info__row[b-xi16fitvwq] {
    display: contents;
    font-size: 0.875rem;
}

.oqv-info__row--top dt[b-xi16fitvwq],
.oqv-info__row--top dd[b-xi16fitvwq] { align-self: start; }

.oqv-info__row dt[b-xi16fitvwq] {
    color: var(--ds-text-muted);
    font-size: 0.8125rem;
    /* Etiketler SAĞA yaslı, iki nokta etikete bitişik ("Platform Kodu:") —
       böylece bütün ":" işaretleri aynı dikey hizada durur, araya boşluk girmez. */
    text-align: right;
}

.oqv-info__row dt[b-xi16fitvwq]::after { content: ":"; }

.oqv-info__row dd[b-xi16fitvwq] {
    margin: 0;
    color: var(--ds-text);
    font-weight: 500;
    line-height: 1.4;
}

.oqv-info__strong[b-xi16fitvwq] { font-weight: 700; }
.oqv-info__warn[b-xi16fitvwq] { color: var(--ds-warning); font-weight: 600; }

.oqv-info__hint[b-xi16fitvwq] {
    color: var(--ds-text);
    font-weight: 600;
    font-size: 0.8125rem;
    margin-left: 4px;
}

.oqv-link[b-xi16fitvwq] {
    color: var(--brand-600);
    text-decoration: none;
    font-weight: 500;
}

.oqv-link:hover[b-xi16fitvwq] { text-decoration: underline; }

/* ---- Order items ---- */
.oqv-items[b-xi16fitvwq] {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.oqv-item[b-xi16fitvwq] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ds-border);
}

.oqv-item:last-child[b-xi16fitvwq] { border-bottom: none; }

.oqv-item__qty[b-xi16fitvwq] {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--brand-700);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
}

/* Ürün görseli — yalnız siparişte görselli ürün varsa render edilir; görseli
   olmayan satırlarda yemek ikonu aynı kutuda durur, böylece adlar hizalı kalır. */
.oqv-item__thumb[b-xi16fitvwq] {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    color: var(--ds-text-subtle);
}

.oqv-item__thumb img[b-xi16fitvwq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.oqv-item__body[b-xi16fitvwq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.oqv-item__name[b-xi16fitvwq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.oqv-item__mods[b-xi16fitvwq] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    /* TEK sütun: seçimler platformdan geldikleri sırada okunmalı. İki sütuna
       paylaştırmak, çıkarılan malzemeyi ait olduğu seçimden görsel olarak
       koparıyordu (platform ekiplerinin hatalı bulduğu nokta). Fiş de tek
       sütun bastığı için iki çıktı artık birebir aynı okunur. */
    display: flex;
    flex-direction: column;
    row-gap: 1px;
}

.oqv-item__mods li[b-xi16fitvwq] {
    display: flex;
    gap: 4px;
    min-width: 0;
}

.oqv-item__mods li[b-xi16fitvwq]::before {
    content: "•";
    flex-shrink: 0;
}

/* Çıkarılan malzeme — kendi satırında, "ÇIKAR:" ile ve eklenenlerden ayrışan renkte. */
.oqv-item__mod--removed[b-xi16fitvwq] {
    color: var(--ds-danger);
    font-weight: 500;
}

/* Seçim başlığı (ör. "Çorba Seçimi") — adın önünde, sönük. */
.oqv-item__mod-group[b-xi16fitvwq] {
    color: var(--ds-text-subtle);
}

.oqv-item__mod--removed[b-xi16fitvwq]::before {
    content: "−";
}

.oqv-item__note[b-xi16fitvwq] {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--ds-warning);
}

.oqv-item__price[b-xi16fitvwq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- Totals ---- */
.oqv-totals[b-xi16fitvwq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--ds-border-strong);
}

.oqv-totals__row[b-xi16fitvwq] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    font-variant-numeric: tabular-nums;
}

.oqv-totals__row--discount[b-xi16fitvwq] { color: var(--ds-danger); }

.oqv-totals__row--grand[b-xi16fitvwq] {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--ds-border-strong);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ds-text);
}

/* ---- Payments (multi-payment breakdown) ---- */
.oqv-pays[b-xi16fitvwq] {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oqv-pay[b-xi16fitvwq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.875rem;
    color: var(--ds-text);
}

.oqv-pay__name[b-xi16fitvwq] {
    color: var(--ds-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Yöntemin yanındaki "Online Ödendi" rozeti — durum şeridindeki online
   çipiyle aynı görsel dil (yeşil tonlu pill). */
.oqv-pay__tag[b-xi16fitvwq] {
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--ds-success, #16a34a);
    background: color-mix(in srgb, var(--ds-success, #16a34a) 12%, transparent);
}

.oqv-pay__amount[b-xi16fitvwq] {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- Timeline ---- */
.oqv-timeline[b-xi16fitvwq] {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}

.oqv-timeline__item[b-xi16fitvwq] {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 14px;
}

.oqv-timeline__item[b-xi16fitvwq]::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 14px;
    bottom: -2px;
    width: 2px;
    background: var(--ds-border);
}

.oqv-timeline__item:last-child[b-xi16fitvwq] { padding-bottom: 0; }
.oqv-timeline__item:last-child[b-xi16fitvwq]::before { display: none; }

.oqv-timeline__dot[b-xi16fitvwq] {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--dot-color, var(--ds-text-subtle));
    border: 2px solid var(--ds-surface);
    box-shadow: 0 0 0 2px var(--ds-border);
}

.oqv-timeline__item.is-current .oqv-timeline__dot[b-xi16fitvwq] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot-color, var(--brand-600)) 35%, transparent);
}

.oqv-timeline__content[b-xi16fitvwq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oqv-timeline__head[b-xi16fitvwq] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.oqv-timeline__status[b-xi16fitvwq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.oqv-timeline__time[b-xi16fitvwq] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.oqv-timeline__notes[b-xi16fitvwq] {
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    /* Dar ekranda etiket + değer alt alta; etiket sola döner (sağa yaslı
       tek sütun tuhaf okunur). */
    .oqv-info[b-xi16fitvwq] {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    .oqv-info__row dt[b-xi16fitvwq] { text-align: left; }
}

/* ---- Mali belgeler (fiş) — kompakt tek-satır liste ---- */
.oqv-fiscal__list[b-xi16fitvwq] { list-style: none; margin: 0; padding: 0; }

/* Satır: [durum+tip+rozetler] [tutar+tarih] [aksiyonlar]. Yer kalmayınca aksiyonlar alt
   satıra SARAR (eskiden taşıp kırpılıyordu); tutar/tarih grubu satırlar arası hizalıdır. */
/* Satır düzeni GRID'dir, flex-wrap değil: serbest sarmada tutar/saat her satırda başka bir
   yere düşüyor ve kart dağınık görünüyordu. Sabit iki kolon ile tutar/saat SÜTUNU tüm
   satırlarda aynı hizada, aksiyonlar da altta sağa dayalı kalır. */
.oqv-fiscal__item[b-xi16fitvwq] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "info meta"
        "actions actions";
    align-items: center;
    gap: 6px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ds-border);
    font-size: 0.8125rem;
}
.oqv-fiscal__item:last-child[b-xi16fitvwq] { border-bottom: none; }

.oqv-fiscal__info[b-xi16fitvwq] {
    grid-area: info;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-width: 0;          /* ellipsis çalışsın */
}

/* Tutar üstte, tarih altında — ikisi de sağa dayalı. */
.oqv-fiscal__meta[b-xi16fitvwq] {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.oqv-fiscal__dot[b-xi16fitvwq] {
    width: 7px; height: 7px; flex: none; border-radius: 50%;
    background: var(--ds-text-subtle);
}
.oqv-fiscal__dot--completed[b-xi16fitvwq] { background: #16a34a; }
.oqv-fiscal__dot--failed[b-xi16fitvwq],
.oqv-fiscal__dot--cancelled[b-xi16fitvwq],
.oqv-fiscal__dot--abandoned[b-xi16fitvwq] { background: var(--ds-danger); }
.oqv-fiscal__dot--sent[b-xi16fitvwq],
.oqv-fiscal__dot--pending[b-xi16fitvwq] { background: var(--ds-warning); }

.oqv-fiscal__type[b-xi16fitvwq] {
    font-weight: 600; color: var(--ds-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.oqv-fiscal__badge[b-xi16fitvwq] {
    font-size: 0.6875rem; font-weight: 600; line-height: 1;
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
    background: var(--ds-surface-sunken); color: var(--ds-text-muted);
}
.oqv-fiscal__badge--completed[b-xi16fitvwq] { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.oqv-fiscal__badge--sent[b-xi16fitvwq],
.oqv-fiscal__badge--pending[b-xi16fitvwq] { background: color-mix(in srgb, var(--ds-warning) 16%, transparent); color: var(--ds-warning); }
.oqv-fiscal__badge--failed[b-xi16fitvwq],
.oqv-fiscal__badge--cancelled[b-xi16fitvwq],
.oqv-fiscal__badge--abandoned[b-xi16fitvwq] { background: color-mix(in srgb, var(--ds-danger) 12%, transparent); color: var(--ds-danger); }

.oqv-fiscal__amount[b-xi16fitvwq] { font-weight: 700; color: var(--ds-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oqv-fiscal__time[b-xi16fitvwq] { color: var(--ds-text-muted); font-size: 0.75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Aksiyonlar kendi satırında, sağa dayalı. */
.oqv-fiscal__actions[b-xi16fitvwq] {
    grid-area: actions;
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; justify-content: flex-end;
}

.oqv-fiscal__btn[b-xi16fitvwq] {
    padding: 3px 10px;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    font: inherit; font-size: 0.75rem; font-weight: 600;
    white-space: nowrap; cursor: pointer;
}
.oqv-fiscal__btn:hover[b-xi16fitvwq] { background: var(--ds-surface-alt); }
.oqv-fiscal__btn--danger[b-xi16fitvwq] { color: var(--ds-danger); border-color: color-mix(in srgb, var(--ds-danger) 45%, var(--ds-border-strong)); }
.oqv-fiscal__btn--danger:hover[b-xi16fitvwq] { background: color-mix(in srgb, var(--ds-danger) 8%, transparent); }
.oqv-fiscal__btn:disabled[b-xi16fitvwq] { opacity: .55; cursor: not-allowed; }

/* Fiş iptali onay modalı — karar (siparişin de iptali) gönderimden ÖNCE alınır. */
.oqv-cancel__text[b-xi16fitvwq] { margin: 0 0 12px; font-size: 0.875rem; color: var(--ds-text); line-height: 1.5; }
.oqv-cancel__opt[b-xi16fitvwq] {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-alt);
    cursor: pointer;
}
.oqv-cancel__opt input[b-xi16fitvwq] { margin-top: 2px; flex: none; }
.oqv-cancel__opt span[b-xi16fitvwq] { display: flex; flex-direction: column; gap: 2px; }
.oqv-cancel__opt strong[b-xi16fitvwq] { font-size: 0.8125rem; color: var(--ds-text); }
.oqv-cancel__opt small[b-xi16fitvwq] { font-size: 0.75rem; color: var(--ds-text-muted); line-height: 1.4; }
/* Cihazda onay bekleme durumu: dönen spinner + açıklama + geçen süre. Sabit bir metin
   yerine hareketli bir gösterge, kullanıcıya işlemin sürdüğünü ve POS'ta bir işlem
   beklendiğini anlatır. */
.oqv-cancel__wait[b-xi16fitvwq] {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0 0; padding: 10px 12px;
    border-radius: var(--ds-radius-md);
    border: 1px solid color-mix(in srgb, var(--ds-warning) 32%, transparent);
    background: color-mix(in srgb, var(--ds-warning) 12%, transparent);
}

.oqv-cancel__wait-text[b-xi16fitvwq] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.oqv-cancel__wait-text strong[b-xi16fitvwq] { font-size: 0.8125rem; font-weight: 600; color: var(--ds-warning); }
.oqv-cancel__wait-text small[b-xi16fitvwq] { font-size: 0.75rem; color: var(--ds-text-muted); line-height: 1.4; }

.oqv-cancel__wait-elapsed[b-xi16fitvwq] {
    flex: none;
    font-size: 0.75rem; font-weight: 600;
    font-variant-numeric: tabular-nums;   /* saniye artarken genişlik zıplamasın */
    color: var(--ds-warning);
}

/* Buton içi meşgul göstergesi — etiketle spinner tek satırda hizalı kalır. */
.oqv-btn-busy[b-xi16fitvwq] { display: inline-flex; align-items: center; gap: 8px; }

.oqv-fiscal__icon[b-xi16fitvwq] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; flex: none;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    cursor: pointer;
}
.oqv-fiscal__icon:hover[b-xi16fitvwq],
.oqv-fiscal__icon.is-open[b-xi16fitvwq] { color: var(--brand-700); border-color: var(--brand-200); background: var(--brand-50); }

/* Detay popover — ⓘ ile açılır; satırdaki teknik alanları (terminal, fatura/satış no,
   referans, hata) örter. Dışarı tıklayınca kapanan şeffaf backdrop ile birlikte.
   YUKARI açılır: mali belgeler bölümü modal içeriğinin en altında durduğundan aşağı
   açılan popover kaydırma alanının dışına taşıp görünmez kalıyordu; yukarıda ise
   her zaman içerik (dolayısıyla yer) vardır. */
.oqv-fiscal__backdrop[b-xi16fitvwq] { position: fixed; inset: 0; z-index: 40; }
.oqv-fiscal__pop[b-xi16fitvwq] {
    position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 41;
    min-width: 230px; max-width: 320px;
    max-height: min(55vh, 340px); overflow-y: auto;  /* uzun hata metni popover'ı taşırmasın */
    padding: 10px 12px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
    display: flex; flex-direction: column; gap: 7px;
}
.oqv-fiscal__pop > div[b-xi16fitvwq] { display: flex; justify-content: space-between; gap: 16px; font-size: 0.75rem; }
.oqv-fiscal__pop span[b-xi16fitvwq] { color: var(--ds-text-muted); flex: none; }
.oqv-fiscal__pop b[b-xi16fitvwq],
.oqv-fiscal__pop a[b-xi16fitvwq] { color: var(--ds-text); font-weight: 600; text-align: right; word-break: break-all; }
.oqv-fiscal__pop a[b-xi16fitvwq] { color: var(--brand-700); text-decoration: none; }
.oqv-fiscal__pop a:hover[b-xi16fitvwq] { text-decoration: underline; }
.oqv-fiscal__pop-err b[b-xi16fitvwq] { color: var(--ds-danger); }

/* Fiş görseli popup — mali belge satırındaki "Fişi Göster"/"E-Belge" ile açılır.
   Beyaz zemin + ortaya hizalı görsel; uzun fişler dikey kaydırılır. */
/* Fiş görseli KAYDIRMASIZ gösterilir: sarmalayıcı kalan alanı doldurur, görsel oranını
   koruyarak içine sığar (aspect-fit). Modal gövdesi de BodyScroll="false" ile kaydırmaz —
   böylece daha önceki iç içe ÇİFT scroll ortadan kalkar. */
.oqv-receipt-pop[b-xi16fitvwq] {
    padding: 8px;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;      /* flex çocuğunun küçülebilmesi için */
    overflow: hidden;   /* taşma olmaz; görsel zaten sığar */
}
.oqv-receipt-pop img[b-xi16fitvwq] {
    display: block;
    max-width: 100%;
    max-height: min(70vh, 640px);
    width: auto;
    height: auto;
    object-fit: contain; /* oranı koru, kırpma yok */
}

/* Popup footer'ındaki "Yeni Sekmede Aç" linki — kapat butonunun yanında,
   ghost buton hissiyatında sade bir metin linki. */
.oqv-receipt-pop__open[b-xi16fitvwq] {
    margin-right: auto;
    align-self: center;
    color: var(--brand-700);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}
.oqv-receipt-pop__open:hover[b-xi16fitvwq] { text-decoration: underline; }

/* ---- Müşteri etiketleri — "(N. sipariş)" yazısının HEMEN YANINDA satır içi
   çip dizisi + "+" ile ekleme. Çipler oqv-pref ile aynı görsel dili (brand-50
   zemin, brand-200 çerçeve) paylaşır; giriş kutusu ANINDA kaydeder. ---- */
.oqv-tags[b-xi16fitvwq] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    vertical-align: middle;
    gap: 4px;
    margin-left: 6px;
}

.oqv-tag[b-xi16fitvwq] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 3px 2px 9px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--brand-700);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: 999px;
    max-width: 100%;
    min-width: 0;
}

.oqv-tag__text[b-xi16fitvwq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oqv-tag__x[b-xi16fitvwq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--brand-700);
    opacity: 0.55;
    cursor: pointer;
    border-radius: 50%;
}
.oqv-tag__x:hover[b-xi16fitvwq] { opacity: 1; color: var(--ds-danger); }
.oqv-tag__x:focus-visible[b-xi16fitvwq] { outline: 2px solid var(--brand-600); outline-offset: 1px; opacity: 1; }
.oqv-tag__x:disabled[b-xi16fitvwq] { opacity: 0.3; cursor: default; }
.oqv-tag__x[b-xi16fitvwq]  svg { width: 11px; height: 11px; }

/* "+" / onay / vazgeç — hepsi aynı yuvarlak mini buton gövdesi. */
.oqv-tag__btn[b-xi16fitvwq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    padding: 0;
    border: 1px dashed var(--ds-border);
    background: transparent;
    color: var(--ds-text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.oqv-tag__btn:hover[b-xi16fitvwq] { color: var(--brand-600); border-color: var(--brand-600); }
.oqv-tag__btn:focus-visible[b-xi16fitvwq] { outline: 2px solid var(--brand-600); outline-offset: 1px; }
.oqv-tag__btn:disabled[b-xi16fitvwq] { opacity: 0.4; cursor: default; }
.oqv-tag__btn[b-xi16fitvwq]  svg { width: 12px; height: 12px; }

.oqv-tag__btn--confirm[b-xi16fitvwq] {
    border-style: solid;
    color: var(--ds-success);
    border-color: var(--ds-success);
}
.oqv-tag__btn--confirm:hover[b-xi16fitvwq] { color: var(--ds-success); border-color: var(--ds-success); }

.oqv-tag__input[b-xi16fitvwq] {
    width: 120px;
    padding: 2px 10px;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--ds-text);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
}
.oqv-tag__input:focus-visible[b-xi16fitvwq] { outline: 2px solid var(--brand-600); outline-offset: 1px; }

/* ⓘ butonu + hover/focus'ta açılan mini açıklama popover'ı. */
.oqv-tag__info[b-xi16fitvwq] {
    position: relative;
    display: inline-flex;
}

.oqv-tag__btn--info[b-xi16fitvwq] { border-style: solid; }

.oqv-tag__pop[b-xi16fitvwq] {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 41;
    width: 240px;
    padding: 8px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
    white-space: normal;
}

.oqv-tag__info:hover .oqv-tag__pop[b-xi16fitvwq],
.oqv-tag__info:focus-within .oqv-tag__pop[b-xi16fitvwq] { display: block; }

/* ---- Ödemeler + Daha Önce Sipariş Ettikleri satırı — sipariş kalemlerinin
   altında yan yana iki kart. Geçmiş listesi varsa SOLDA durur ve ödemeler
   kartı daralır; yoksa ödemeler tek başına tam genişlikte kalır. ---- */
.oqv-payrow[b-xi16fitvwq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (min-width: 720px) {
    .oqv-payrow--split[b-xi16fitvwq] {
        grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr);
    }
}

/* ---- Daha Önce Sipariş Ettikleri — ödemelerin solundaki kart. Kart aşağı
   doğru genişler; liste uzarsa yalnızca KARTIN İÇİ kayar (modal gövdesi değil). ---- */
.oqv-favs__hint[b-xi16fitvwq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    white-space: nowrap;
}

.oqv-favs__list[b-xi16fitvwq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.oqv-fav[b-xi16fitvwq] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.oqv-fav__rank[b-xi16fitvwq] {
    flex: none;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ds-text-muted);
    border: 1px solid var(--ds-border);
    border-radius: 50%;
}

/* 1 numara — müşterinin favorisi, marka rengiyle öne çıkar. */
.oqv-fav:first-child .oqv-fav__rank[b-xi16fitvwq] {
    color: var(--brand-700);
    border-color: var(--brand-200);
    background: var(--brand-50);
}

.oqv-fav__thumb[b-xi16fitvwq] {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    color: var(--ds-text-subtle);
}

.oqv-fav__thumb img[b-xi16fitvwq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.oqv-fav__body[b-xi16fitvwq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.oqv-fav__name[b-xi16fitvwq] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oqv-fav__sub[b-xi16fitvwq] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
}

.oqv-fav__qty[b-xi16fitvwq] {
    flex: none;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-700);
    white-space: nowrap;
}
/* /Components/Pages/Orders/Dialogs/SplitOrderPaymentDialog.razor.rz.scp.css */
/* =====================================================================
   SplitOrderPaymentDialog — design-system "Ödeme Al" surface.
   Token-driven; renders inside an AppModal body. Replaces the old
   FluentUI markup + hardcoded hex palette.
   ===================================================================== */

.sopd[b-xm3ef96m6q] {
    width: 100%;
    height: 100%;
    min-height: 0;
    font-family: var(--ds-font-ui, var(--font-ui));
    color: var(--ds-text, var(--fg-1));
}

/* EditForm'un render ettiği <form> flex zincirine katılmalı ki yükseklik
   kolonlara insin ve yalnızca Sipariş Kalemleri listesi scroll etsin. */
.sopd[b-xm3ef96m6q]  form {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- Loading ---------- */
.sopd-loader[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 12px);
    min-height: 280px;
    color: var(--fg-hint, #64748b);
}

/* ---------- Layout ---------- */
/* Kolonlar modal gövdesini doldurur; sol kartta yalnız kalem listesi, sağda
   kolonun kendisi scroll eder — modal bütünüyle scroll ETMEZ. */
.sopd-columns[b-xm3ef96m6q] {
    display: flex;
    flex-direction: row;
    gap: var(--space-5, 20px);
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: stretch;
}

.sopd-right[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.sopd-order-card[b-xm3ef96m6q] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    /* Dar ekranda kolonlar alt alta — iç scroll'lar bırakılır, tümü akar. */
    .sopd[b-xm3ef96m6q] { overflow-y: auto; }
    .sopd[b-xm3ef96m6q]  form { height: auto; display: block; }
    .sopd-columns[b-xm3ef96m6q] { flex-direction: column; gap: var(--space-4, 16px); height: auto; }
    .sopd-right[b-xm3ef96m6q] { overflow-y: visible; }
    .sopd-order-card[b-xm3ef96m6q] { display: block; }
    .sopd-items[b-xm3ef96m6q] { max-height: 45dvh; }
}

/* ---------- Cards ---------- */
.sopd-card[b-xm3ef96m6q] {
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-card, 16px);
    padding: var(--space-5, 20px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.05));
}

.sopd-card-title[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-family: var(--font-display, var(--font-ui));
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
    margin-bottom: var(--space-3, 12px);
}

.sopd-card-title[b-xm3ef96m6q]  svg { color: var(--brand-600, #036ac4); }

/* ---------- Order summary head ---------- */
.sopd-summary-head[b-xm3ef96m6q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-2, 8px);
}

.sopd-id-row[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
}

.sopd-order-id[b-xm3ef96m6q] {
    font-family: var(--font-display, var(--font-ui));
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-700, #0353a4);
    letter-spacing: -0.01em;
}

.sopd-chip[b-xm3ef96m6q] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-pill, 9999px);
    background: var(--bg-subtle, #f1f5f9);
    color: var(--fg-2, #334155);
    white-space: nowrap;
}

.sopd-chip--info[b-xm3ef96m6q]    { background: var(--status-info-bg, #eff6ff);    color: var(--status-info-fg, #1d4ed8); }
.sopd-chip--success[b-xm3ef96m6q] { background: var(--status-success-bg, #f0fdf4); color: var(--status-success-fg, #166534); }
.sopd-chip--warning[b-xm3ef96m6q] { background: var(--status-warning-bg, #fffbeb); color: var(--status-warning-fg, #b45309); }
.sopd-chip--danger[b-xm3ef96m6q]  { background: var(--status-danger-bg, #fef2f2);  color: var(--status-danger-fg, #b91c1c); }
.sopd-chip--accent[b-xm3ef96m6q]  { background: #f3e8ff;                            color: var(--courier-600, #7c3aed); }
.sopd-chip--neutral[b-xm3ef96m6q] { background: var(--bg-subtle, #f1f5f9);         color: var(--fg-3, #475569); }

.sopd-submeta[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-top: 4px;
    font-size: 0.875rem;
    color: var(--fg-hint, #64748b);
}

.sopd-dot[b-xm3ef96m6q] { color: var(--border-strong, #cbd5e1); }

.sopd-pay-meta[b-xm3ef96m6q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-600, #036ac4);
    font-weight: 500;
}

.sopd-pay-meta[b-xm3ef96m6q]  svg { color: var(--brand-600, #036ac4); }

.sopd-grand-total[b-xm3ef96m6q] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--fg-1, #0f172a);
    text-align: right;
    min-width: 110px;
}

.sopd-divider[b-xm3ef96m6q] {
    border: none;
    border-top: 1px solid var(--border, #e2e8f0);
    margin: var(--space-3, 12px) 0 var(--space-4, 16px);
}

/* ---------- Order items ---------- */
/* Yalnızca kalem listesi scroll eder; başlık satırı sticky kalır. */
.sopd-items[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.sopd-items .sopd-items-head[b-xm3ef96m6q] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.sopd-items-head[b-xm3ef96m6q],
.sopd-item-row[b-xm3ef96m6q] {
    display: grid;
    /* Son kolon: hızlı seçim stepper'ı (ürüne göre kısmi ödeme). */
    grid-template-columns: 2.6fr 2.1fr 1fr 1.3fr 1.3fr minmax(104px, auto);
    gap: var(--space-2, 8px);
    align-items: center;
    padding: 10px 8px;
}

.sopd-items-head[b-xm3ef96m6q] {
    background: var(--bg-muted, #f8fafc);
    border-radius: var(--radius-md, 8px);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fg-hint, #64748b);
}

.sopd-item-row[b-xm3ef96m6q] {
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    font-size: 0.85rem;
    color: var(--fg-2, #334155);
}

.sopd-item-row:last-child[b-xm3ef96m6q] { border-bottom: none; }
.sopd-item-name[b-xm3ef96m6q] { font-weight: 600; color: var(--fg-1, #0f172a); overflow-wrap: anywhere; }
.sopd-item-mods[b-xm3ef96m6q] { display: flex; flex-direction: column; gap: 2px; color: var(--fg-hint, #64748b); font-size: 0.8rem; }
.sopd-item-total[b-xm3ef96m6q] { font-weight: 700; color: var(--fg-1, #0f172a); }

/* ---------- Hızlı seçim (ürüne göre kısmi ödeme, sol panel) ---------- */
.sopd-pick-head[b-xm3ef96m6q] { text-align: right; padding-right: 4px; }
.sopd-pick-cell[b-xm3ef96m6q] { display: flex; justify-content: flex-end; min-height: 30px; }

.sopd-item-row--pickable[b-xm3ef96m6q] { cursor: pointer; transition: background var(--dur-fast, 150ms) ease; }
.sopd-item-row--pickable:hover[b-xm3ef96m6q] { background: var(--bg-subtle, #f1f5f9); border-radius: var(--radius-md, 8px); }

.sopd-item-row.is-picked[b-xm3ef96m6q] {
    background: var(--accent-soft, #eff6ff);
    border-radius: var(--radius-md, 8px);
    border-bottom-color: transparent;
}
.sopd-item-row.is-picked .sopd-item-name[b-xm3ef96m6q] { color: var(--brand-700, #0353a4); }

/* İkram modunda seçilmiş satır — hediye/ikram vurgusu (satır içi stepper, alt satır yok). */
.sopd-item-row.is-comped[b-xm3ef96m6q] {
    background: var(--status-warning-bg, #fffbeb);
    border-radius: var(--radius-md, 8px);
    border-bottom-color: transparent;
}
.sopd-item-row.is-comped .sopd-item-name[b-xm3ef96m6q] { color: var(--status-warning-fg, #b45309); }
.sopd-bi-stepper--comp .sopd-step-val[b-xm3ef96m6q] { color: var(--status-warning-fg, #b45309); }

/* Seçim özeti çubuğu — kalem listesinin hemen altında */
.sopd-pick-bar[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-top: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--accent-soft, #eff6ff);
    border: 1px solid var(--brand-200, #bfdbfe);
    border-radius: var(--radius-lg, 10px);
    font-size: 0.85rem;
    color: var(--brand-700, #0353a4);
}

.sopd-pick-bar__clear[b-xm3ef96m6q] {
    appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fg-hint, #64748b);
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}
.sopd-pick-bar__clear:hover[b-xm3ef96m6q] { color: var(--danger-600, #dc2626); }
.sopd-pick-bar__clear:focus-visible[b-xm3ef96m6q] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; border-radius: var(--radius-sm, 4px); }

/* ---------- Order totals ---------- */
.sopd-totals[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--space-4, 16px);
    align-items: stretch;
}

.sopd-total-line[b-xm3ef96m6q] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    font-size: 0.9rem;
    color: var(--fg-2, #334155);
}

.sopd-total-line--discount[b-xm3ef96m6q] { color: var(--status-danger-fg, #b91c1c); }
/* Complimentary is a goodwill gesture, not a markdown — distinguish it from the red discount line with the brand accent. */
.sopd-total-line--comp[b-xm3ef96m6q] { color: var(--accent, #036ac4); }
.sopd-pct[b-xm3ef96m6q] { font-size: 0.8em; opacity: 0.8; }

/* Complimentary apply footer: running total on the left, apply/remove actions on the right. */
.sopd-comp-foot[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px);
}
.sopd-comp-total[b-xm3ef96m6q] { font-size: 0.9rem; color: var(--fg-2, #334155); }
.sopd-comp-total strong[b-xm3ef96m6q] { color: var(--accent, #036ac4); }

/* ---------- Complimentary: header toggle + inline per-item stepper (replaces the old standalone card) ---------- */
.sopd-card-title--row[b-xm3ef96m6q] { justify-content: space-between; }
.sopd-card-title__main[b-xm3ef96m6q] { display: inline-flex; align-items: center; gap: var(--space-2, 8px); }

.sopd-comp-toggle[b-xm3ef96m6q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill, 9999px);
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg, #fff);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fg-2, #334155);
    cursor: pointer;
    transition: all 0.2s ease;
}
.sopd-comp-toggle[b-xm3ef96m6q]  svg { color: var(--accent, #036ac4); }
.sopd-comp-toggle:hover[b-xm3ef96m6q] { border-color: var(--accent, #036ac4); }
.sopd-comp-toggle.is-on[b-xm3ef96m6q] { background: var(--accent, #036ac4); color: #fff; border-color: var(--accent, #036ac4); }
.sopd-comp-toggle.is-on[b-xm3ef96m6q]  svg { color: #fff !important; fill: #fff !important; }
.sopd-comp-toggle.is-on[b-xm3ef96m6q]  svg path { fill: #fff !important; }
.sopd-comp-toggle:focus-visible[b-xm3ef96m6q] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }

/* In Complimentary mode the row's own divider is dropped; the indented Complimentary sub-row carries it, so each
   product + its Complimentary control read as one block. */
.sopd-items--comp .sopd-item-row[b-xm3ef96m6q] { border-bottom: none; padding-bottom: 4px; }
.sopd-item-comp[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: 4px 8px 10px 20px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.sopd-item-comp:last-child[b-xm3ef96m6q] { border-bottom: none; }
.sopd-item-comp.is-active[b-xm3ef96m6q] { background: var(--accent-soft, #eff6ff); border-radius: var(--radius-md, 8px); border-bottom-color: transparent; }
.sopd-comp-label[b-xm3ef96m6q] { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 600; color: var(--accent, #036ac4); }
.sopd-comp-label[b-xm3ef96m6q]  svg { color: var(--accent, #036ac4); }
.sopd-comp-amount[b-xm3ef96m6q] { margin-left: auto; min-width: 64px; text-align: right; font-weight: 700; font-size: 0.85rem; color: var(--accent, #036ac4); }

/* ---------- Collapsible card (Apply discount) ---------- */
.sopd-collapse-head[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--fg-1, #0f172a);
    text-align: left;
}
.sopd-collapse-head[b-xm3ef96m6q]  svg { color: var(--brand-600, #036ac4); }
.sopd-collapse-title[b-xm3ef96m6q] { flex: 1; font-family: var(--font-display, var(--font-ui)); font-size: 1rem; font-weight: 700; }
.sopd-collapse-badge[b-xm3ef96m6q] { font-size: 0.85rem; font-weight: 700; color: var(--status-danger-fg, #b91c1c); }
.sopd-chevron[b-xm3ef96m6q] { display: inline-flex; color: var(--fg-hint, #64748b); transition: transform 0.2s ease; }
.sopd-chevron[b-xm3ef96m6q]  svg { color: var(--fg-hint, #64748b); }
.sopd-chevron.is-open[b-xm3ef96m6q] { transform: rotate(180deg); }
.sopd-collapse-head:focus-visible[b-xm3ef96m6q] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; border-radius: var(--radius-sm, 6px); }
.sopd-collapse-body[b-xm3ef96m6q] { margin-top: var(--space-4, 16px); }

.sopd-total-line--grand[b-xm3ef96m6q] {
    margin-top: var(--space-2, 8px);
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--border, #e2e8f0);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--fg-1, #0f172a);
}

/* Yapılan ödemeler — toplamların altında küçük, sessiz satırlar (ayrı kart yok). */
.sopd-total-line--paid[b-xm3ef96m6q] {
    font-size: 0.82rem;
    color: var(--fg-hint, #64748b);
}
.sopd-total-line--grand + .sopd-total-line--paid[b-xm3ef96m6q] { margin-top: var(--space-2, 8px); }

.sopd-total-line--remaining[b-xm3ef96m6q] {
    font-weight: 800;
    color: var(--warning-600, #d97706);
}

/* ---------- Existing payments ---------- */
/* Ödeme başlığı — sekmeler gizliyken (kısmi ödeme yapılmışken) sol tarafta durur. */
.sopd-paytype-title[b-xm3ef96m6q] {
    font-weight: 700;
    color: var(--fg-1, #0f172a);
    font-size: 0.95rem;
}

.sopd-paid-head[b-xm3ef96m6q] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    background: var(--bg-muted, #f8fafc);
    border-radius: var(--radius-md, 8px);
    padding: 8px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fg-hint, #64748b);
}

.sopd-paid-row[b-xm3ef96m6q] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}

.sopd-paid-row:last-child[b-xm3ef96m6q] { border-bottom: none; }
.sopd-right-align[b-xm3ef96m6q] { text-align: right; justify-self: end; }
.sopd-strong[b-xm3ef96m6q] { font-weight: 700; color: var(--fg-1, #0f172a); }

.sopd-paid-summary[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-top: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    background: var(--bg-subtle, #f1f5f9);
    border-radius: var(--radius-md, 8px);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fg-1, #0f172a);
}

.sopd-remaining[b-xm3ef96m6q] { color: var(--warning-600, #d97706); }

/* ---------- Fields ---------- */
.sopd-field[b-xm3ef96m6q] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sopd-field--grow[b-xm3ef96m6q] { flex: 1 1 auto; }

.sopd-field .ds-label[b-xm3ef96m6q] {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fg-2, #334155);
}

.sopd-field .ds-select[b-xm3ef96m6q],
.sopd-field .ds-input[b-xm3ef96m6q] { width: 100%; }

.sopd .ds-input:disabled[b-xm3ef96m6q] {
    background: var(--bg-subtle, #f1f5f9);
    color: var(--fg-3, #475569);
    font-weight: 600;
    cursor: default;
}

/* ---------- Discount row ---------- */
.sopd-discount-row[b-xm3ef96m6q] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3, 12px);
}

.sopd-discount-row .sopd-field[b-xm3ef96m6q] { flex: 1 1 140px; }

.sopd-discount-row .ds-input-group[b-xm3ef96m6q] { width: 100%; }

.sopd-discount-actions[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex: 0 0 auto;
}

/* ---------- Payment type ---------- */
.sopd-paytype-head[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    margin-bottom: var(--space-4, 16px);
}

.sopd-tabs[b-xm3ef96m6q] {
    display: inline-flex;
    gap: 2px;
    background: var(--bg-subtle, #f1f5f9);
    border-radius: var(--radius-lg, 10px);
    padding: 3px;
}

.sopd-tab[b-xm3ef96m6q] {
    appearance: none;
    border: none;
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg-hint, #64748b);
    padding: 7px 14px;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: background var(--dur-fast, 150ms) ease, color var(--dur-fast, 150ms) ease;
    white-space: nowrap;
}

.sopd-tab:hover[b-xm3ef96m6q] { color: var(--fg-1, #0f172a); }

.sopd-tab.active[b-xm3ef96m6q] {
    background: var(--bg, #fff);
    color: var(--brand-700, #0353a4);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.05));
}

.sopd-tab:focus-visible[b-xm3ef96m6q] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 1px;
}

.sopd-payable[b-xm3ef96m6q] {
    font-size: 0.95rem;
    font-weight: 700;
}

.sopd-payable.is-balanced[b-xm3ef96m6q] { color: var(--success-700, #15803d); }
.sopd-payable.is-unbalanced[b-xm3ef96m6q] { color: var(--warning-600, #d97706); }

/* ---------- Payment cards ---------- */
.sopd-pay-card[b-xm3ef96m6q] {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-xl, 12px);
    padding: var(--space-4, 16px);
    background: var(--bg-muted, #f8fafc);
    margin-bottom: var(--space-3, 12px);
}

.sopd-pay-card-head[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2, 8px);
}

.sopd-pay-card-title[b-xm3ef96m6q] {
    font-weight: 700;
    color: var(--brand-700, #0353a4);
    font-size: 0.95rem;
}

.sopd-pay-fields[b-xm3ef96m6q] {
    display: flex;
    flex-direction: row;
    gap: var(--space-3, 12px);
    align-items: flex-end;
}

@media (max-width: 520px) {
    .sopd-pay-fields[b-xm3ef96m6q] { flex-direction: column; align-items: stretch; }
}

/* ---------- Seçilen ürünler ödeme kartı (sol panelden seçim yapılınca) ---------- */
.sopd-picked-head[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-3, 12px);
}

.sopd-picked-title[b-xm3ef96m6q] {
    font-weight: 700;
    color: var(--brand-700, #0353a4);
    font-size: 0.95rem;
}

.sopd-picked-list[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-3, 12px);
}

.sopd-picked-row[b-xm3ef96m6q] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: 6px 10px;
    background: var(--layer-1, #fff);
    border: 1px solid var(--border-subtle, #f1f5f9);
    border-radius: var(--radius-md, 8px);
    font-size: 0.85rem;
}

.sopd-picked-name[b-xm3ef96m6q] { font-weight: 600; color: var(--fg-1, #0f172a); overflow-wrap: anywhere; }
.sopd-picked-qty[b-xm3ef96m6q] { color: var(--fg-hint, #64748b); font-weight: 600; }
.sopd-picked-amount[b-xm3ef96m6q] { font-weight: 700; color: var(--fg-1, #0f172a); white-space: nowrap; }

/* Seçilenleri ikrama çevirme — ödeme yerine alternatif aksiyon. */
.sopd-picked-comp-row[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    margin-bottom: var(--space-3, 12px);
}

.sopd-picked-comp[b-xm3ef96m6q] { flex-shrink: 0; }
.sopd-picked-comp:disabled[b-xm3ef96m6q] { opacity: 0.6; cursor: default; }

.sopd-picked-comp-hint[b-xm3ef96m6q] {
    font-size: 0.78rem;
    color: var(--fg-hint, #64748b);
    line-height: 1.35;
    min-width: 0;
}

/* ---------- Kısmi Ödeme (tutar bazlı) ---------- */
.sopd-partial-row[b-xm3ef96m6q] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    margin-bottom: var(--space-3, 12px);
}

.sopd-partial-field[b-xm3ef96m6q] { flex: 0 0 auto; }
.sopd-partial-input[b-xm3ef96m6q] { max-width: 200px; }
.sopd-partial-input .ds-input-group__field[b-xm3ef96m6q] { font-size: 1.05rem; font-weight: 700; }

.sopd-quick-chips[b-xm3ef96m6q] {
    display: inline-flex;
    gap: var(--space-2, 8px);
    padding-bottom: 2px;
}

.sopd-chip-btn[b-xm3ef96m6q] {
    appearance: none;
    min-width: 44px;
    padding: 8px 12px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-pill, 9999px);
    background: var(--layer-1, #fff);
    color: var(--fg-2, #334155);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--dur-fast, 150ms) ease, background var(--dur-fast, 150ms) ease;
}
.sopd-chip-btn:hover[b-xm3ef96m6q] { border-color: var(--accent, #036ac4); background: var(--accent-soft, #eff6ff); color: var(--brand-700, #0353a4); }
.sopd-chip-btn:focus-visible[b-xm3ef96m6q] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }

.sopd-partial-after[b-xm3ef96m6q] {
    margin-top: var(--space-3, 12px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--status-warning-bg, #fffbeb);
    color: var(--status-warning-fg, #b45309);
    border-radius: var(--radius-md, 8px);
    font-size: 0.85rem;
}

.sopd-partial-after--error[b-xm3ef96m6q] {
    background: var(--status-danger-bg, #fef2f2);
    color: var(--status-danger-fg, #b91c1c);
}

/* Misafir seçiliyken tutar satırı devre dışı görünür. */
.sopd-partial-row.is-muted[b-xm3ef96m6q] { opacity: 0.5; }

/* ---------- İndirim (ödeme kartının içinde, tek input grubu) ---------- */
.sopd-discount-inline[b-xm3ef96m6q] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.sopd-discount-inline .sopd-discount-actions[b-xm3ef96m6q] { display: flex; gap: var(--space-2, 8px); }

/* Grup genişliğini alan (field) belirler; input basis-0 ile kalan tüm boşluğu alır —
   select sabit genişlikte olduğundan input asla sıfıra inmez. */
.sopd-discount-inline .sopd-partial-field[b-xm3ef96m6q] { width: 330px; max-width: 100%; }
.sopd-discount-input[b-xm3ef96m6q] { width: 100%; max-width: none; }
.sopd-discount-input .ds-input-group__field[b-xm3ef96m6q] { flex: 1 1 0; min-width: 90px; }

/* Tür seçici ("Sabit İndirim" / "% İndirim") — grubun SOLUNDA, inputa bitişik. */
.sopd-discount-unit[b-xm3ef96m6q] {
    appearance: none;
    width: 132px;
    border: 0;
    border-right: 1px solid var(--border, #e2e8f0);
    background: var(--bg-muted, #f8fafc)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat right 10px center;
    color: var(--fg-2, #334155);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0 26px 0 10px;
    cursor: pointer;
    flex-shrink: 0;
    outline: none;
}
.sopd-discount-unit:hover[b-xm3ef96m6q] { background-color: var(--bg-subtle, #f1f5f9); }

/* ---------- Başlık sağı: POS seçimi + Toplam Ödenecek ---------- */
.sopd-head-right[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
}

/* ---------- Mali/Bilgi fişi bloğu — ödeme yöntemi grid'inin altı ---------- */
.sopd-fiscal[b-xm3ef96m6q] {
    margin-top: var(--space-3, 12px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px dashed var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-muted, #f8fafc);
}

.sopd-fiscal-row[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

/* Label tüm boş alanı kaplar → satırın herhangi bir yerine (select hariç) basmak kutuyu işaretler. */
.sopd-fiscal-check[b-xm3ef96m6q] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fg-1, #0f172a);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sopd-fiscal-check input[b-xm3ef96m6q] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    accent-color: var(--accent, #036ac4);
    cursor: pointer;
}
.sopd-fiscal-check input:focus-visible[b-xm3ef96m6q] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }

.sopd-fiscal-select[b-xm3ef96m6q] {
    flex: none;
    width: 200px;
    max-width: 45%;
    height: 32px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    background: var(--layer-1, #fff);
    color: var(--fg-1, #0f172a);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}
.sopd-fiscal-select:disabled[b-xm3ef96m6q] { opacity: .55; cursor: not-allowed; }
.sopd-fiscal-select:focus-visible[b-xm3ef96m6q] { outline: 2px solid var(--accent, #036ac4); outline-offset: 1px; }

.sopd-fiscal-hint[b-xm3ef96m6q] {
    margin: var(--space-1, 4px) 0 0;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--fg-hint, #64748b);
}

.sopd-guest-note[b-xm3ef96m6q] {
    background: var(--status-warning-bg, #fffbeb);
    color: var(--status-warning-fg, #b45309);
}

/* ---------- Warning / guest states ---------- */
.sopd-warning[b-xm3ef96m6q],
.sopd-guest[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2, 8px);
    padding: var(--space-6, 24px);
    border-radius: var(--radius-xl, 12px);
}

.sopd-warning[b-xm3ef96m6q] {
    background: var(--status-warning-bg, #fffbeb);
    border: 1px solid var(--warning-500, #f59e0b);
}

.sopd-guest[b-xm3ef96m6q] {
    background: var(--status-warning-bg, #fffbeb);
    border: 1px dashed var(--warning-500, #f59e0b);
}

.sopd-warning[b-xm3ef96m6q]  svg,
.sopd-guest[b-xm3ef96m6q]  svg { color: var(--warning-600, #d97706); }

.sopd-warning-title[b-xm3ef96m6q],
.sopd-guest-title[b-xm3ef96m6q] {
    font-family: var(--font-display, var(--font-ui));
    font-size: 1rem;
    font-weight: 700;
    color: var(--warning-600, #d97706);
    margin: 0;
}

.sopd-warning-text[b-xm3ef96m6q],
.sopd-guest-text[b-xm3ef96m6q] {
    font-size: 0.875rem;
    color: var(--fg-2, #334155);
    margin: 0 0 var(--space-2, 8px);
}

/* ---------- Input group (discount) — local copy of the editor's pattern ---------- */
.ds-input-group[b-xm3ef96m6q] {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 40px;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    transition: border-color var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease;
}

.ds-input-group:focus-within[b-xm3ef96m6q] {
    border-color: var(--brand-600, #036ac4);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.12);
}

.ds-input-group__prefix[b-xm3ef96m6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-hint, #64748b);
    border-right: 1px solid var(--border, #e2e8f0);
    flex-shrink: 0;
}

/* Para/yüzde simgesi inputun SAĞINDA durur. */
.ds-input-group__suffix[b-xm3ef96m6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-hint, #64748b);
    border-left: 1px solid var(--border, #e2e8f0);
    background: var(--bg-muted, #f8fafc);
    flex-shrink: 0;
}

.ds-input-group__field[b-xm3ef96m6q] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--fg-1, #0f172a);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    padding: 0 12px;
    -moz-appearance: textfield;
}

.ds-input-group__field[b-xm3ef96m6q]::-webkit-outer-spin-button,
.ds-input-group__field[b-xm3ef96m6q]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- Validation ---------- */
.sopd-validation[b-xm3ef96m6q] { color: var(--status-danger-fg, #b91c1c); font-size: 0.85rem; }
.sopd-validation[b-xm3ef96m6q]  ul { margin: 0; padding-left: 1.1em; }

/* ---------- Payment-method square grid (Single / Shared) ---------- */
.sopd-pm-grid[b-xm3ef96m6q] {
    display: grid;
    /* Tek satırda 6 yöntem; taşarsa 2. satıra sarar. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-2, 8px);
}
@media (max-width: 1100px) { .sopd-pm-grid[b-xm3ef96m6q] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .sopd-pm-grid[b-xm3ef96m6q] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sopd-pm[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 48px;
    padding: var(--space-1, 4px) var(--space-2, 8px);
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 10px);
    background: var(--layer-1, #fff);
    color: var(--fg-1, #0f172a);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s ease;
}
.sopd-pm:hover[b-xm3ef96m6q] { border-color: var(--accent, #036ac4); color: var(--accent, #036ac4); }
.sopd-pm.is-selected[b-xm3ef96m6q] { border-color: var(--accent, #036ac4); background: var(--accent-soft, #eff6ff); color: var(--accent, #036ac4); box-shadow: 0 0 0 1px var(--accent, #036ac4) inset; }
.sopd-pm--on-account[b-xm3ef96m6q] { border-style: dashed; }
.sopd-pm--on-account.is-selected[b-xm3ef96m6q] { border-style: solid; }
.sopd-pm-name[b-xm3ef96m6q] { line-height: 1.2; }

/* Misafir Ödeme — grid'in sonunda kendini belli eden turuncu seçenek; ödeme alınmaz. */
.sopd-pm--guest[b-xm3ef96m6q] {
    border-style: dashed;
    border-color: var(--warning-600, #d97706);
    background: var(--status-warning-bg, #fffbeb);
    color: var(--status-warning-fg, #b45309);
}
.sopd-pm--guest:hover[b-xm3ef96m6q] { border-color: var(--warning-600, #d97706); color: var(--status-warning-fg, #b45309); }
.sopd-pm--guest.is-selected[b-xm3ef96m6q] {
    border-style: solid;
    border-color: var(--warning-600, #d97706);
    background: var(--status-warning-bg, #fffbeb);
    color: var(--status-warning-fg, #b45309);
    box-shadow: 0 0 0 1px var(--warning-600, #d97706) inset;
}

.sopd-amount-line[b-xm3ef96m6q] { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3, 12px); }
.sopd-amount-value[b-xm3ef96m6q] { font-size: 1.1rem; font-weight: 700; color: var(--fg-1, #0f172a); }

/* Shared payment: amount field on the header row (between title and delete button) */
.sopd-pay-card-head[b-xm3ef96m6q] { gap: var(--space-2, 8px); align-items: center; }
.sopd-head-amount[b-xm3ef96m6q] { max-width: 160px; margin-left: auto; }

/* ---------- Veresiye customer picker ---------- */
.sopd-cust-selected[b-xm3ef96m6q] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); }
.sopd-cust-search[b-xm3ef96m6q] { display: flex; gap: var(--space-2, 8px); }
.sopd-cust-search .ds-input[b-xm3ef96m6q] { flex: 1; }
.sopd-cust-results[b-xm3ef96m6q] { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-2, 8px); max-height: 180px; overflow: auto; }
.sopd-cust-item[b-xm3ef96m6q] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); padding: var(--space-2, 8px) var(--space-3, 12px); border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-md, 8px); background: var(--layer-1, #fff); cursor: pointer; font: inherit; text-align: left; }
.sopd-cust-item:hover[b-xm3ef96m6q] { border-color: var(--accent, #036ac4); background: var(--accent-soft, #eff6ff); }
.sopd-cust-phone[b-xm3ef96m6q] { color: var(--fg-hint, #64748b); font-size: 0.85rem; }
.sopd-cust-empty[b-xm3ef96m6q] { color: var(--fg-hint, #64748b); font-size: 0.85rem; margin: var(--space-2, 8px) 0; }
.sopd-cust-new[b-xm3ef96m6q] { display: flex; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); }
.sopd-cust-new .ds-input[b-xm3ef96m6q] { flex: 1; }
.sopd-cust-warn[b-xm3ef96m6q] { margin-top: var(--space-2, 8px); color: var(--status-danger-fg, #b91c1c); font-size: 0.82rem; }

/* ---------- Item-based payment ---------- */
.sopd-bi-hint[b-xm3ef96m6q] {
    margin: 0 0 var(--space-3, 12px);
    font-size: 0.85rem;
    color: var(--fg-hint, #64748b);
    line-height: 1.4;
}

.sopd-bi-list[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-3, 12px);
}

.sopd-bi-row[b-xm3ef96m6q] {
    display: grid;
    grid-template-columns: 1fr auto minmax(86px, auto);
    align-items: center;
    gap: var(--space-3, 12px);
    padding: 10px 12px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 10px);
    background: var(--layer-1, #fff);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.sopd-bi-row.is-selected[b-xm3ef96m6q] { border-color: var(--accent, #036ac4); background: var(--accent-soft, #eff6ff); }

.sopd-bi-info[b-xm3ef96m6q] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sopd-bi-name[b-xm3ef96m6q] { font-weight: 700; color: var(--fg-1, #0f172a); overflow-wrap: anywhere; }
.sopd-bi-meta[b-xm3ef96m6q] { font-size: 0.78rem; color: var(--fg-hint, #64748b); }

.sopd-bi-stepper[b-xm3ef96m6q] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.sopd-step-btn[b-xm3ef96m6q] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    background: var(--bg, #fff);
    color: var(--fg-1, #0f172a);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sopd-step-btn:hover:not(:disabled)[b-xm3ef96m6q] { border-color: var(--accent, #036ac4); color: var(--accent, #036ac4); }
.sopd-step-btn:disabled[b-xm3ef96m6q] { opacity: 0.4; cursor: not-allowed; }

.sopd-step-val[b-xm3ef96m6q] { min-width: 22px; text-align: center; font-weight: 700; color: var(--fg-1, #0f172a); }

.sopd-bi-amount[b-xm3ef96m6q] { text-align: right; font-weight: 700; color: var(--fg-1, #0f172a); white-space: nowrap; }

@media (max-width: 520px) {
    .sopd-bi-row[b-xm3ef96m6q] { grid-template-columns: 1fr auto; row-gap: var(--space-2, 8px); }
    .sopd-bi-amount[b-xm3ef96m6q] { grid-column: 2; }
}

/* POS Cihazı (Pavo Cloud) — geçici seçim */
.sopd-pos[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 10px);
    background: var(--layer-1, #fff);
    margin-top: var(--space-3, 12px);
}

.sopd-pos__label[b-xm3ef96m6q] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
}

.sopd-pos__select[b-xm3ef96m6q] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    background: var(--bg, #fff);
    color: var(--fg-1, #0f172a);
    font: inherit;
    cursor: pointer;
}

.sopd-pos__select:focus-visible[b-xm3ef96m6q] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 1px;
    border-color: var(--accent, #036ac4);
}

.sopd-pos__hint[b-xm3ef96m6q] {
    font-size: 0.78rem;
    color: var(--fg-hint, #64748b);
}

/* Kompakt satır içi POS seçici — sipariş özetinin (Toplam) altında, etiket yanda */
.sopd-pos-inline[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--border, #e2e8f0);
}

.sopd-pos-inline__label[b-xm3ef96m6q] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fg-1, #0f172a);
    white-space: nowrap;
}

.sopd-pos-inline__select[b-xm3ef96m6q] {
    margin-left: auto;
    height: 34px;
    max-width: 220px;
    padding: 0 10px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    background: var(--bg, #fff);
    color: var(--fg-1, #0f172a);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.sopd-pos-inline__select:focus-visible[b-xm3ef96m6q] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 1px;
    border-color: var(--accent, #036ac4);
}

/* Ödenmiş sipariş — ödeme alma UI'ı yerine ince, hafif bir onay şeridi */
.sopd-paid-banner[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 10px 12px;
    border-radius: var(--radius-lg, 10px);
    background: color-mix(in srgb, var(--success, #16a34a) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--success, #16a34a) 24%, transparent);
    color: var(--fg-1, #0f172a);
    font-size: 0.85rem;
}

.sopd-paid-banner[b-xm3ef96m6q]  svg {
    color: var(--success, #16a34a);
    flex: none;
}

/* Mali fiş görseli popup */
.sopd-receipt-pop[b-xm3ef96m6q] {
    padding: 8px;
    border: 1px dashed var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    background: #fff;
    text-align: center;
    max-height: min(70vh, 640px);
    overflow: auto;
}

.sopd-receipt-pop img[b-xm3ef96m6q] { max-width: 100%; height: auto; }

.sopd-receipt-pending[b-xm3ef96m6q] {
    font-size: 0.85rem;
    color: var(--fg-hint, #64748b);
    text-align: center;
    padding: 24px 12px;
}

.sopd-receipt-pop__open[b-xm3ef96m6q] {
    margin-right: auto;
    align-self: center;
    color: var(--brand-700, #0353a4);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.sopd-receipt-pop__open:hover[b-xm3ef96m6q] { text-decoration: underline; }

/* POS ödeme bekleme banner'ı */
.sopd-pos-wait[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--accent, #036ac4);
    border-radius: var(--radius-lg, 10px);
    background: var(--accent-soft, #eff6ff);
    margin-top: var(--space-3, 12px);
}

.sopd-pos-wait__body[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.sopd-pos-wait__body strong[b-xm3ef96m6q] { color: var(--fg-1, #0f172a); font-size: 0.9rem; }
.sopd-pos-wait__body span[b-xm3ef96m6q] { color: var(--fg-hint, #64748b); font-size: 0.78rem; }

.sopd-pos-wait__cancel[b-xm3ef96m6q] {
    flex: none;
    padding: 6px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    background: var(--bg, #fff);
    color: var(--fg-1, #0f172a);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.sopd-pos-wait__cancel:hover[b-xm3ef96m6q] { border-color: var(--accent, #036ac4); color: var(--accent, #036ac4); }
/* /Components/Pages/Orders/Dialogs/TransferOrderToTableDialog.razor.rz.scp.css */
/* Bu dialog'un stilleri global app.css'te (.tot-*) — modal içerikleri uygulamada
   global app.css ile stilleniyor (ar-* gibi). Scoped CSS burada bilerek boş;
   yoksa [b-xxx] specificity'si global kuralları ezerdi. */
/* /Components/Pages/Orders/Dialogs/UpdateOrderMenuPanel.razor.rz.scp.css */
/* UpdateOrderMenuPanel — menu column styles, relocated verbatim from
   UpdateOrderModal.razor.css during the render-isolation extraction. The
   markup that these rules target now lives in this component, so the scoped
   CSS must live here too (Blazor scoped CSS is per-component). */

.menu-section[b-us307njyc2] {
    display: flex;
    flex-direction: row;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-3);
    overflow: hidden;
    flex: 1 1 65%;
    gap: var(--ds-space-3);
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    box-sizing: border-box;
}

/* Left rail wrapper that holds the search bar above the categories list. */
.menu-side[b-us307njyc2] {
    display: flex;
    flex-direction: column;
    width: 190px;
    flex-shrink: 0;
    min-height: 0;
    height: 100%;
    gap: 8px;
}

.product-search-wrap[b-us307njyc2] {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.product-search-input[b-us307njyc2] {
    width: 100%;
    height: 36px;
    padding-left: 32px;
    padding-right: 28px;
    font-size: 0.85rem;
}

.product-search-input[b-us307njyc2]::-webkit-search-cancel-button { display: none; }

.product-search-icon[b-us307njyc2] {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--ds-text-muted);
    pointer-events: none;
}

.product-search-clear[b-us307njyc2] {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: var(--ds-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.product-search-clear:hover[b-us307njyc2] {
    background: var(--ds-surface-sunken);
    color: var(--ds-text);
}

.categories-container[b-us307njyc2] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin-bottom: 0;
    width: 100%;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    min-height: 0;
    /* Scroll-chain guard for the categories rail. */
    overscroll-behavior: contain;
}

.categories-container > *[b-us307njyc2] {
    width: 100%;
    max-width: 100%;
}

/* Category button — semantic HTML replacement for the old FluentButton
   (Accent when active, Outline otherwise), token-driven. */
.uom-cat-btn[b-us307njyc2] {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    height: auto;
    padding: 6px 10px;
    font-family: var(--ds-font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    border-radius: var(--ds-radius-sm, 6px);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.uom-cat-btn:hover[b-us307njyc2] {
    border-color: var(--brand-600);
    color: var(--brand-600);
}

.uom-cat-btn:focus-visible[b-us307njyc2] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.uom-cat-btn.is-active[b-us307njyc2] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.menu-products-area[b-us307njyc2] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    /* `contain` prevents the wheel from chaining into the parent when the
       inner list hits its top/bottom. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Ürün kartları kolon kırılımı ürün alanının GERÇEK genişliğine bakar. */
    container-type: inline-size;
    container-name: uom-products;
}

.menu-products-area[b-us307njyc2]::-webkit-scrollbar {
    width: 6px;
}

.menu-products-area[b-us307njyc2]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

/* Empty menu state — shown inside .menu-section when the firm has no
   categories/products yet. Centers the guidance + CTA in the menu column. */
.menu-section--empty[b-us307njyc2] {
    align-items: center;
    justify-content: center;
}

.menu-empty[b-us307njyc2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    max-width: 360px;
    margin: auto;
    padding: var(--ds-space-4, 1.5rem);
}

.menu-empty__icon[b-us307njyc2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--brand-50, #eff6ff);
    color: var(--brand-600, #036ac4);
    margin-bottom: 4px;
}

.menu-empty__title[b-us307njyc2] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
}

.menu-empty__text[b-us307njyc2] {
    margin: 0 0 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ds-text-muted, #475569);
}

/* Ürün kartları — geniş ekranda en fazla 2 kolon, alan daralınca tek kolona iner. */
.products-grid[b-us307njyc2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@container uom-products (max-width: 460px) {
    .products-grid[b-us307njyc2] { grid-template-columns: minmax(0, 1fr); }
}

.product-card[b-us307njyc2] {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border-radius: var(--ds-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    position: relative;
}

/* Sepette olan ürün kartı — sade marka halkası. */
.product-card-in-order[b-us307njyc2] {
    background-color: var(--ds-surface) !important;
    border-color: var(--brand-600) !important;
    box-shadow: 0 0 0 1px var(--brand-600), 0 2px 8px rgba(3, 106, 196, 0.10);
}

.product-card:hover[b-us307njyc2] {
    border-color: var(--brand-600);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.09);
    background-color: var(--ds-surface);
}

.inactive-product[b-us307njyc2] {
    pointer-events: none;
}

.product-card-row[b-us307njyc2] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0.625rem;
    width: 100%;
    gap: 0.625rem;
}

.product-image-container[b-us307njyc2] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    flex-shrink: 0;
}

.product-image[b-us307njyc2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.product-details[b-us307njyc2] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-card__name[b-us307njyc2] {
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ds-text, var(--fg-1));
    margin-bottom: 0.15rem;
    overflow-wrap: break-word;
    /* Uzun ürün adları kartı şişirmesin: 2 satırda kes, tamamı title tooltip'inde. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__price[b-us307njyc2] {
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--brand-600);
}

.product-card-action[b-us307njyc2] {
    flex-shrink: 0;
}

.add-button[b-us307njyc2] {
    background-color: var(--brand-600);
    color: white;
    border: 1px solid var(--brand-600);
    border-radius: var(--ds-radius-sm, 6px);
    padding: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.add-button:hover[b-us307njyc2] {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
}

.add-button:disabled[b-us307njyc2] {
    background-color: var(--neutral-fill-rest) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text-muted) !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Sepetteki ürünler için −/adet/+ adım kontrolü. */
.qty-stepper[b-us307njyc2] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--brand-600);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transform-origin: right center;
    animation: qty-stepper-in-b-us307njyc2 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qty-stepper__btn[b-us307njyc2] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.qty-stepper__btn:hover:not(:disabled)[b-us307njyc2] {
    background: rgba(255, 255, 255, 0.22);
}

.qty-stepper__btn:active:not(:disabled)[b-us307njyc2] {
    transform: scale(0.9);
}

.qty-stepper__btn:focus-visible[b-us307njyc2] {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.qty-stepper__btn:disabled[b-us307njyc2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.qty-stepper__count[b-us307njyc2] {
    min-width: 22px;
    text-align: center;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

@keyframes qty-stepper-in-b-us307njyc2 {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Also used by the parent's order-items panel — duplicated here (scoped CSS is
   per-component) so the "Tükendi" badge on menu cards keeps its styling. */
.out-of-stock-badge[b-us307njyc2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--status-danger-bg, #fef2f2);
    border: 1px solid var(--danger-300, #fca5a5);
    border-radius: var(--radius-pill, 9999px);
    color: var(--status-danger-fg, #b91c1c);
    margin-left: 6px;
    white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────────────────
   Relocated from UpdateOrderModal's media/container queries. The container
   queries resolve against the parent's `.main-content` (container-name:
   uom-main), which is this component's ancestor, so they still fire from
   here. Category chips use `.uom-cat-btn` (the old ::deep fluent-button
   overrides no longer apply — categories are semantic buttons now). */

@container uom-main (max-width: 1150px) {
    .menu-section[b-us307njyc2] { padding: var(--ds-space-2); flex-direction: column; }

    .menu-side[b-us307njyc2] {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
    }

    .categories-container[b-us307njyc2] {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        padding-bottom: 4px;
        flex: 0 0 auto;
        gap: 6px;
    }

    .uom-cat-btn[b-us307njyc2] {
        width: auto;
        min-width: max-content;
        min-height: 36px;
        flex: 0 0 auto;
        padding: 4px 12px;
        font-size: 0.825rem;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .menu-section[b-us307njyc2] {
        flex: 1 1 auto;
        flex-direction: column;
        padding: var(--ds-space-2);
        gap: var(--ds-space-2);
        min-height: 320px;
    }

    .menu-side[b-us307njyc2] {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        gap: 8px;
    }

    .categories-container[b-us307njyc2] {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        padding-bottom: 4px;
        height: auto;
        flex: 0 0 auto;
        gap: 6px;
    }

    .uom-cat-btn[b-us307njyc2] {
        width: auto;
        min-width: max-content;
        min-height: 36px;
        flex: 0 0 auto;
        padding: 4px 12px;
        font-size: 0.825rem;
        white-space: nowrap;
    }

    .menu-products-area[b-us307njyc2] {
        flex: 1 1 auto;
        min-height: 240px;
    }

    .out-of-stock-badge[b-us307njyc2] {
        font-size: 10px;
        padding: 3px 8px;
        margin-left: 6px;
    }
}

@media (max-width: 480px) {
    .product-search-input[b-us307njyc2] { height: 34px; font-size: 0.85rem; }
    .product-card[b-us307njyc2] { padding: 6px; }
    .product-image-container[b-us307njyc2] { width: 48px; height: 48px; }
}
/* /Components/Pages/Orders/Dialogs/UpdateOrderModal.razor.rz.scp.css */
/* =====================================================================
   UpdateOrderModal — design-system header + body bridge styles.
   The internal body still uses FluentUI controls; a follow-up turn will
   convert them to .ds-* primitives.
   ===================================================================== */

.uom-header[b-l2918l8liv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    width: 100%;
    flex-wrap: wrap;
}

.uom-header__title[b-l2918l8liv] { display: flex; align-items: center; min-width: 0; flex: 1; }

.uom-header__order[b-l2918l8liv] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-3, 16px);
    flex-wrap: wrap;
    font-family: var(--ds-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-700);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.uom-header__order--new[b-l2918l8liv] { color: var(--ds-text-muted); }

/* Customer chip — surfaces the guest (e.g. a reservation owner) on dine-in orders
   where there's no customer tab. Quiet, pill-shaped, normal-weight. */
.uom-header__customer[b-l2918l8liv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--brand-50, #eff6ff);
    color: var(--brand-700, #0353a4);
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
}
.uom-header__customer[b-l2918l8liv]  svg { width: 15px; height: 15px; }
.uom-header__customer-phone[b-l2918l8liv] {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--brand-600, #036ac4);
    opacity: 0.85;
}
.uom-header__customer-phone[b-l2918l8liv]::before { content: "· "; }

.uom-header__waiter[b-l2918l8liv] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-shrink: 0;
}

.uom-header__waiter .ds-label[b-l2918l8liv] {
    margin: 0;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.uom-header__waiter .ds-select[b-l2918l8liv] { width: 200px; }

/* Inline variant — waiter sits next to the order title (Bahçe-4 • OFV4X6)
   instead of pushed to the far right. The label-text adopts the regular
   UI font weight so it doesn't read as part of the bold display title. */
.uom-header__waiter--inline[b-l2918l8liv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ds-text);
}

.uom-header__waiter-label[b-l2918l8liv] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    white-space: nowrap;
}

.ds-select--compact[b-l2918l8liv] {
    height: 32px;
    padding: 4px 28px 4px 10px;
    font-size: 0.8125rem;
    width: auto;
    min-width: 180px;
    max-width: 220px;
}

/* Body is a flex column that fills the AppModal's scrollable body. The
   inner .main-content lays out the two columns side-by-side and handles
   its own scroll regions (categories rail, products grid, order items).
   No vh-based heights anywhere — those were left over from the legacy
   FluentDialog panel-mode (full viewport); under AppModal the heights
   flow naturally from the modal's max-height cap. */
/* Fill the AppModal body exactly — no min-height that would force the
   card past its max-height cap. The flex chain below keeps the inner
   panes scrolling internally instead of the modal as a whole. */
.uom-body[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: var(--ds-surface);
}

.uom-header__customer-name[b-l2918l8liv] {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ara bant (1024-1366 ekranlar, %125 ölçek dahil): başlık şeridi tek
   satıra sığsın diye tipografi ve select'ler kademeli daralır. */
@media (max-width: 1366px) {
    .uom-header__order[b-l2918l8liv] { font-size: 1.05rem; gap: 10px; }
    .ds-select--compact[b-l2918l8liv] { min-width: 140px; max-width: 180px; }
}

@media (max-width: 1100px) {
    .uom-header__order[b-l2918l8liv] { font-size: 1rem; }
    .ds-select--compact[b-l2918l8liv] { min-width: 104px; max-width: 150px; }
    .uom-header__waiter--inline[b-l2918l8liv] { margin-left: 0; gap: 6px; }
    .uom-header__customer-name[b-l2918l8liv] { max-width: 14ch; }
}

@media (max-width: 720px) {
    .uom-header[b-l2918l8liv] { flex-direction: column; align-items: stretch; }
    .uom-header__waiter[b-l2918l8liv] { justify-content: space-between; }
    .uom-header__waiter .ds-select[b-l2918l8liv] { width: auto; flex: 1; }
}
[b-l2918l8liv] fluent-card {
    padding: 0 !important;
}

[b-l2918l8liv] .product-card {
    padding: 0 !important;
}

[b-l2918l8liv] .product-card fluent-card {
    padding: 0 !important;
}

[b-l2918l8liv] fluent-card::part(control) {
    padding: 0 !important;
}

[b-l2918l8liv] fluent-card.product-card::part(control) {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

[b-l2918l8liv] .fluent-dialog-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-border);
    background: transparent;
}

.update-order-dialog[b-l2918l8liv] {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.main-content[b-l2918l8liv] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    gap: var(--ds-space-3);
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
    /* Container query kökü: iki panelin iç düzeni viewport'a değil bu
       konteynerin GERÇEK genişliğine göre kırılır — 1024/1280 ekranlar,
       %125 Windows ölçeği ve yarım-ekran pencereler aynı kuraldan geçer. */
    container-type: inline-size;
    container-name: uom-main;
}

/* (legacy fluent-dialog ::part overrides removed — no FluentDialog
   chrome left under the AppModal-based modal.) */


.order-details-section[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-3);
    overflow: hidden;
    flex: 1 1 35%;
    /* Dar modalda sağ kolon okunabilir kalsın: 340px tabanın altına inmez
       (mobilde kolonlar zaten alt alta — min() taşmayı önler). */
    min-width: min(340px, 100%);
    min-height: 0;
    align-self: stretch;
    box-sizing: border-box;
}


.order-items-list[b-l2918l8liv] {
    /* Scrollable middle section of the right column. Combined with
       flex-shrink: 0 on .order-summary below, this is the ONLY part of
       the right column that scrolls — notes, totals and action buttons
       stay glued to the bottom. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 1rem 0;
    padding-right: 8px;
    overscroll-behavior: contain;
}

.order-summary[b-l2918l8liv] {
    /* Sticky-feel: never shrinks below content size, never scrolls. */
    flex-shrink: 0;
    border-top: 1px solid var(--ds-border);
    padding-top: 0.75rem;
    background: var(--ds-surface-alt);
}

/* Özet tek satırı: solda Sipariş Notu, sağda Toplam grubu (info · etiket ·
   rakam). Not düğmesi margin-right:auto ile sola itilir. */
.uom-total-row[b-l2918l8liv] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 8px;
}

.uom-total-row .order-note-toggle[b-l2918l8liv] {
    /* Taban stildeki margin-left:auto'yu ez — yoksa iki auto margin butonu
       ortalar ve solda boşluk bırakır. Sadece margin-right:auto ile sola yaslı. */
    margin-left: 0;
    margin-right: auto;
}

.uom-total-info[b-l2918l8liv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.uom-total-info svg[b-l2918l8liv] { width: 18px; height: 18px; }
.uom-total-info:hover[b-l2918l8liv],
.uom-total-info.is-open[b-l2918l8liv] {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: var(--accent-soft, #eff6ff);
}
.uom-total-info:focus-visible[b-l2918l8liv] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.uom-total-label[b-l2918l8liv] {
    font-family: var(--ds-font-display, var(--ds-font-ui));
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ds-text);
}

.uom-total-amount[b-l2918l8liv] {
    font-family: var(--ds-font-display, var(--ds-font-ui));
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Popover — info düğmesinin üstünde açılır (özet en altta olduğu için yukarı). */
.uom-total-pop-backdrop[b-l2918l8liv] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.uom-total-pop[b-l2918l8liv] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 41;
    min-width: 240px;
    max-width: 300px;
    padding: 10px 12px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 10px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.uom-total-pop__row[b-l2918l8liv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    color: var(--ds-text);
}
.uom-total-pop__row span:last-child[b-l2918l8liv] { font-variant-numeric: tabular-nums; font-weight: 600; }
.uom-total-pop__row--danger[b-l2918l8liv] { color: var(--ds-danger, #dc2626); }
.uom-total-pop__row--comp[b-l2918l8liv] { color: var(--brand-600); }
.uom-total-pop__row--total[b-l2918l8liv] {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--ds-border);
    font-size: 1rem;
    font-weight: 700;
}
.uom-total-pop__row--total span:last-child[b-l2918l8liv] { font-weight: 800; }

/* Action button strip — lives in the AppModal <Footer>, OUTSIDE the two
   content panels, spanning the full bottom edge of the modal. Single row:
   Adisyonu Taşı pinned to the far left, the remaining actions
   (Yazdır → İptal → Tamamla) grouped on the right. New actions can be
   dropped in and spread across this strip as needed. */
/* İki sabit grup: sol (Konuşarak Ekle + Adisyonu Taşı) ve sağ (birincil
   aksiyonlar). space-between ile sol grup hep solda, sağ grup hep sağda —
   ürün eklenince yalnız sağ grubun içeriği değişir, dizilim yerinden oynamaz. */
.order-actions[b-l2918l8liv] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2, 12px);
    width: 100%;
    flex-shrink: 0;
}

.order-actions__left[b-l2918l8liv],
.order-actions__right[b-l2918l8liv] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2, 12px);
}

.order-actions__left[b-l2918l8liv] { margin-right: auto; }
.order-actions__right[b-l2918l8liv] { margin-left: auto; }

/* Right-column top bar — the takeaway/delivery tabs sit on the left, the
   Sipariş Notu button is pinned to the right edge. Rendered for every
   order type (dine-in has no tabs, only the note button). */
.od-topbar[b-l2918l8liv] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2, 10px);
    flex-shrink: 0;
}

.od-topbar .tab-navigation[b-l2918l8liv] { flex: 1 1 auto; min-width: 0; }

/* Sipariş Notu — opens the shared note modal; dot marks an existing note. */
.order-note-toggle[b-l2918l8liv] {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 10px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text-muted, #475569);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.order-note-toggle:hover[b-l2918l8liv] { background: var(--ds-surface-sunken, #f1f5f9); border-color: var(--ds-border-strong, #cbd5e1); color: var(--ds-text, #0f172a); }
.order-note-toggle:focus-visible[b-l2918l8liv] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 2px; }
.order-note-toggle.has-note[b-l2918l8liv] { border-color: var(--brand-300, #93c5fd); color: var(--ds-text, #0f172a); }

.order-note-toggle .ont-icon[b-l2918l8liv] { display: inline-flex; }
.order-note-toggle .ont-icon svg[b-l2918l8liv] { width: 16px; height: 16px; }
.order-note-toggle .ont-dot[b-l2918l8liv] { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-600, #036ac4); flex-shrink: 0; }

/* Textarea inside the shared note modal (order note + item notes). */
[b-l2918l8liv] .uom-note-modal-textarea {
    min-height: 96px;
    resize: vertical;
    width: 100%;
}

/* Per-item note edit/add button — sits to the right of the line price. */
[b-l2918l8liv] .item-note-button.has-note {
    border-color: var(--brand-300, #93c5fd);
}
[b-l2918l8liv] .item-note-button.has-note svg {
    fill: var(--brand-600, #036ac4);
}

.empty-order[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    height: 100%;
    color: var(--ds-text-muted);
    gap: 1rem;
}

.quantity-controls[b-l2918l8liv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quantity[b-l2918l8liv] {
    min-width: 30px;
    text-align: center;
    font-weight: bold;
}

/* FluentNumberField styling */
[b-l2918l8liv] .quantity-field {
    --control-text-align: center;
    --control-font-weight: 600;
}

[b-l2918l8liv] .quantity-field::part(control) {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

[b-l2918l8liv] .quantity-field::part(root) {
    text-align: center !important;
}

[b-l2918l8liv] fluent-number-field.quantity-field::part(control) {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.quantity-unit[b-l2918l8liv] {
    min-width: 25px;
    font-size: 0.875rem;
    font-weight: bold;
}

.order-item-notes[b-l2918l8liv] {
    font-size: 0.9rem;
    color: var(--ds-text-muted);
    margin-top: 0.5rem;
    font-style: italic;
}

.out-of-stock-badge[b-l2918l8liv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--status-danger-bg, #fef2f2);
    border: 1px solid var(--danger-300, #fca5a5);
    border-radius: var(--radius-pill, 9999px);
    color: var(--status-danger-fg, #b91c1c);
    margin-left: 6px;
    white-space: nowrap;
}

.order-item-modifiers[b-l2918l8liv] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0;
    list-style: disc;
    color: #888;
    font-size: 0.95rem;
}

.order-item-modifiers li[b-l2918l8liv] {
    margin-bottom: 2px;
}

.edit-item-button[b-l2918l8liv] {
    padding: 6px;
    min-width: 32px;
    height: 32px;
    background-color: var(--ds-surface-sunken);
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.edit-item-button:hover[b-l2918l8liv] {
    background-color: var(--ds-border);
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
}

.edit-item-button[b-l2918l8liv]::part(control) {
    color: var(--ds-text) !important;
    background-color: transparent !important;
    border: none !important;
}

.edit-item-button:hover[b-l2918l8liv]::part(control) {
    color: var(--ds-text) !important;
}

/* Sipariş kalemi — standart sepet kartı iskeleti, her genişlikte aynı:
   üstte ad + satır tutarı, altında modifier listesi, en altta solda adet
   kontrolü ve sağda tüm aksiyon ikonları tek grupta. */
.oi-head[b-l2918l8liv] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
}

/* Sol sütun: ad + modifier listesi. Modifierlar adın hemen altında başlar. */
.oi-main[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Satır tutarı — üst satırda sağa yaslı (ad + modifier bloğunun yanında). */
.oi-line-price[b-l2918l8liv] {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Alt satır: aksiyonlar (not · düzenle · sil) solda, adet kontrolü sağda —
   tek hizada. Modifier yoksa adın hemen altında, varsa modifierların altında. */
.oi-foot[b-l2918l8liv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 8px;
}

/* Sol aksiyon grubu (not · düzenle · sil) — dokunmatik hedef, rahat boşluk. */
.oi-actions[b-l2918l8liv] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.order-item-modifiers-inline[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin: 0 0 0 0.7rem;
    padding: 0;
    list-style: disc inside;
}

.order-item-modifiers-inline li[b-l2918l8liv] {
    margin: 0;
    padding: 0 0;
    font-size: 14px;
    color: var(--ds-text-muted);
    /* Uzun modifier adları taşmak yerine sarar. */
    white-space: normal;
    overflow-wrap: break-word;
}

.add-product-button[b-l2918l8liv] {
    margin-left: auto;
}


.order-item[b-l2918l8liv] {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 10px);
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.4rem;
    transition: all 0.2s ease;
}

.order-item-title[b-l2918l8liv] {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: break-word;
    white-space: normal;
}

.order-item-modifiers-inline[b-l2918l8liv] {
    flex: 1;
    margin: 0 0 0 2px !important;
    padding: 0 !important;
    font-size: 0.75rem;
    list-style-position: inside;
}

.order-item-modifiers-inline li[b-l2918l8liv] {
    font-size: 0.75rem !important;
    line-height: 1.25;
}

/* Kalem içi ikon butonları (sil / düzenle / not) — hepsi aynı boyut ve
   köşe yuvarlaklığında, hizalı dursun. */
/* Kalem içi ikon butonları (düzenle · not · sil) — dokunmatik hedef 38px,
   .oi-actions/.oi-foot aralarını açar. */
.edit-item-button[b-l2918l8liv],
.delete-item-button[b-l2918l8liv],
[b-l2918l8liv] .edit-item-button,
[b-l2918l8liv] .delete-item-button,
[b-l2918l8liv] .item-note-button {
    padding: 0 !important;
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px;
}

[b-l2918l8liv] .edit-item-button svg,
[b-l2918l8liv] .delete-item-button svg,
[b-l2918l8liv] .item-note-button svg {
    width: 18px !important;
    height: 18px !important;
}

.order-item-actions[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

/* Adet artır/azalt — kalemin ana etkileşimi. Aksiyon ikonlarının yanında
   sönük kalmasın: marka renkli kenarlık + kalın mavi +/- glyph, büyük hedef.
   (Dolgu/`::part(control)` background FluentUI outline butonda güvenilir
   boyanmadığı için kenarlık + metin rengiyle vurguluyoruz.) */
[b-l2918l8liv] .order-item .quantity-controls fluent-button {
    min-width: 34px;
    width: 34px;
    height: 34px;
}

[b-l2918l8liv] .order-item .quantity-controls fluent-button::part(control) {
    min-width: 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1.5px solid var(--brand-600) !important;
    color: var(--brand-600) !important;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 9px;
}

[b-l2918l8liv] .order-item .quantity-controls fluent-button:hover::part(control) {
    background: var(--accent-soft, #eff6ff) !important;
    border-color: var(--brand-700) !important;
    color: var(--brand-700) !important;
}

.order-item .quantity-controls[b-l2918l8liv] {
    gap: 0.4rem;
}

.order-item .quantity[b-l2918l8liv] {
    font-size: 1rem;
    font-weight: 700;
    min-width: 26px;
    text-align: center;
    color: var(--ds-text);
}

.order-item:hover[b-l2918l8liv] {
    background-color: var(--ds-surface-alt);
    border-color: var(--ds-border-strong);
}

/* Yeni eklenen (henüz kaydedilmemiş) kalem — beyaz zemin üzerinde sade
   marka halkası; dolgu rengi yok. */
.order-item.newly-added[b-l2918l8liv] {
    background-color: var(--ds-surface);
    border-color: var(--brand-600);
    box-shadow: 0 0 0 1px var(--brand-600);
}

.order-item-modifiers-inline[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin: 0 0 0 0.7rem;
    padding: 0;
    list-style: disc inside;
}

.order-item-title[b-l2918l8liv] {
    font-size: 1rem;
    font-weight: bold;
    color: var(--ds-text);
}

.add-product-button[b-l2918l8liv] {
    margin-left: auto;
}

.loading-container[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 600px;
    width: 100%;
    background: transparent;
    border-radius: 12px;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.loading-container[b-l2918l8liv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(var(--accent-fill-rest-rgb), 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Responsive Design — phones / narrow tablets.
   Stack the two main columns vertically; inside the menu column, also
   stack the category rail on top of the products grid so each strip
   gets the full width instead of being pinched into a 190px sliver. */
@media (max-width: 768px) {
    /* Mobile: relax the strict inner-scroll-only model. With the columns
       stacking vertically there's no longer a fixed-height left/right
       pane, so let the outer body itself scroll while inner panes free
       up their bounded heights. */
    .uom-body[b-l2918l8liv] {
        overflow-y: auto;
        overscroll-behavior: contain;
        gap: var(--ds-space-2);
    }

    .main-content[b-l2918l8liv] {
        flex-direction: column;
        gap: var(--ds-space-2);
        height: auto;
        overflow: visible;
    }

    .menu-section[b-l2918l8liv] {
        flex: 1 1 auto;
        flex-direction: column;
        padding: var(--ds-space-2);
        gap: var(--ds-space-2);
        min-height: 320px;
    }

    .order-details-section[b-l2918l8liv] {
        flex: 0 0 auto;
        min-height: 280px;
        padding: var(--ds-space-2);
    }

    /* Search + categories occupy the full column width. Categories switch
       to a horizontal chip scroller so they don't eat vertical real estate
       above the products list. */
    .menu-side[b-l2918l8liv] {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        gap: 8px;
    }

    .categories-container[b-l2918l8liv] {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        padding-bottom: 4px;
        height: auto;
        flex: 0 0 auto;
        gap: 6px;
    }

    [b-l2918l8liv] .categories-container fluent-button {
        width: auto;
        min-width: max-content;
        min-height: 36px;
        flex: 0 0 auto;
    }

    [b-l2918l8liv] .categories-container fluent-button::part(control) {
        min-height: 36px;
        padding: 4px 12px;
        font-size: 0.825rem;
        white-space: nowrap;
    }

    .menu-products-area[b-l2918l8liv] {
        flex: 1 1 auto;
        min-height: 240px;
    }

    .order-items-list[b-l2918l8liv] {
        max-height: 260px;
    }

    .out-of-stock-badge[b-l2918l8liv] {
        font-size: 10px;
        padding: 3px 8px;
        margin-left: 6px;
    }

    /* Customer-info cf-row already collapses at 640px; nothing to do here. */
}

/* Phones: also tighten modal chrome (handled in AppModal at 480px) plus
   compact the product card and tab row so 5+ products are readable at
   once instead of 2. */
@media (max-width: 480px) {
    .product-search-input[b-l2918l8liv] { height: 34px; font-size: 0.85rem; }

    [b-l2918l8liv] .product-card { padding: 6px !important; }
    .product-image-container[b-l2918l8liv] { width: 48px; height: 48px; }
}

.employee-selection[b-l2918l8liv] {
    margin-top: 16px;
    margin-bottom:16px;
    gap: 8px;
}

/* Tab navigation — design-system pattern: ghost buttons with a brand
   underline indicator on the active tab. No box-shadow / no border ring
   so the row stays compact and reads cleanly above the scrollable
   content area below. */
.tab-navigation[b-l2918l8liv] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    gap: var(--ds-space-1);
    flex-shrink: 0;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: var(--ds-space-2);
}

.tab-navigation > div[b-l2918l8liv] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
}

.tab-navigation .tab[b-l2918l8liv] {
    position: relative;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--ds-font-ui);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ds-text-muted);
    padding: 10px var(--ds-space-3) 12px;
    margin-bottom: -1px;          /* overlap the row border-bottom */
    cursor: pointer;
    transition: color var(--ds-dur) var(--ds-ease);
    white-space: nowrap;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tab-navigation .tab:hover[b-l2918l8liv] { color: var(--ds-text); }

.tab-navigation .tab.active[b-l2918l8liv] { color: var(--brand-700); }

.tab-navigation .tab.active[b-l2918l8liv]::after {
    content: "";
    position: absolute;
    left: var(--ds-space-3);
    right: var(--ds-space-3);
    bottom: 0;
    height: 2px;
    background: var(--brand-600);
    border-radius: 2px 2px 0 0;
}

.tab-navigation .tab:focus-visible[b-l2918l8liv] {
    outline: 2px solid var(--brand-600);
    outline-offset: -4px;
    border-radius: 4px;
}

/* Customer Info Section Styles
   - .customer-info-section is the only non-tab-bar child of .order-details-section
     when the customer tab is active; flex:1 + min-height:0 makes it the scroll
     region instead of letting the right column overflow the modal.
   - .cf-row is a 2-col grid: fixed-width label column on the left, control on
     the right. All controls in the column line up to the same width (1fr). */
.customer-info-section[b-l2918l8liv] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ds-surface);
    border-radius: var(--ds-radius-md);
}

[b-l2918l8liv] .customer-info-grid {
    width: 100%;
}

[b-l2918l8liv] .cf-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: var(--ds-space-3, 16px);
    align-items: center;
    width: 100%;
}

[b-l2918l8liv] .cf-label {
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ds-text);
    text-align: left;
    line-height: 1.3;
}

[b-l2918l8liv] .cf-control { min-width: 0; width: 100%; }
[b-l2918l8liv] .cf-control .ds-input,
[b-l2918l8liv] .cf-control .ds-select,
[b-l2918l8liv] .cf-control .ds-textarea { width: 100%; }
[b-l2918l8liv] .cf-control fluent-text-field,
[b-l2918l8liv] .cf-control fluent-text-area { width: 100%; }

/* (cf-row'un dar-kolon kırılımı artık aşağıdaki uom-main container
   query'sinde — viewport yerine kolon genişliğine bakar.) */

.customer-info-section[b-l2918l8liv]  .ds-field { width: 100%; }
.customer-info-section[b-l2918l8liv]  label.ds-label { display: block; margin-bottom: 4px; }
.customer-info-section[b-l2918l8liv]  .ds-input,
.customer-info-section[b-l2918l8liv]  .ds-select,
.customer-info-section[b-l2918l8liv]  .ds-textarea { width: 100%; }

/* ---------------------------------------------------------------------------
   Teslimat (Delivery) customer fields — design-system stacked fields. Each
   field is a label-on-top block (uom-field); Ödeme Yöntemi and Teslimat
   Seçenekleri stack vertically (no longer cramped side-by-side). Delivery
   options render as compact pill toggles instead of FluentUI checkboxes.
   --------------------------------------------------------------------------- */
[b-l2918l8liv] .uom-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

[b-l2918l8liv] .uom-field__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2, 10px);
}

[b-l2918l8liv] .uom-field > .ds-label,
[b-l2918l8liv] .uom-field__head .ds-label {
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ds-text);
    margin: 0;
}

[b-l2918l8liv] .uom-req { color: var(--ds-danger, #dc2626); }

[b-l2918l8liv] .uom-optional {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

[b-l2918l8liv] .uom-prev-addr {
    min-width: 150px;
    max-width: 230px;
    flex: 0 0 auto;
}

[b-l2918l8liv] .uom-address-textarea,
[b-l2918l8liv] .uom-courier-note {
    width: 100%;
    min-height: 56px;
    resize: vertical;
}

/* Teslimat Seçenekleri — compact pill toggles (CartSummaryPage pattern,
   themed with design tokens). */
[b-l2918l8liv] .uom-delivery-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* İleri tarihli sipariş: tarih + saat yan yana, dar ekranda alt alta. */
[b-l2918l8liv] .uom-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


/* Geçmiş zaman uyarısı — kaydete basmadan görünsün. */
[b-l2918l8liv] .uom-schedule-warn {
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--ds-danger, #dc2626);
    border-radius: 8px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.8125rem;
}

[b-l2918l8liv] .uom-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--ds-border);
    border-radius: 999px;
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
}

[b-l2918l8liv] .uom-chip:hover { border-color: var(--ds-border-strong); }

[b-l2918l8liv] .uom-chip.is-on {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

[b-l2918l8liv] .uom-chip:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

[b-l2918l8liv] .uom-chip svg { flex-shrink: 0; }

/* Ödeme Yöntemi — selectable square tiles, 4 per row. Replaces the dropdown:
   each tile shows an icon + the method name; the selected tile is
   brand-highlighted (CompleteOrderModal square pattern, token-driven). */
[b-l2918l8liv] .uom-pay-grid {
    display: grid;
    /* Kolon sayısı kolon genişliğinden türer: dar sağ kolonda 2'li,
       geniş ekranda 3-4'lü — tile hiçbir zaman 100px altına ezilmez. */
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
}

[b-l2918l8liv] .uom-pay-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 78px;
    padding: 10px 8px;
    border: 1.5px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    color: var(--ds-text);
    cursor: pointer;
    text-align: center;
    outline: none;
    transition: border-color var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease),
                transform var(--ds-dur) var(--ds-ease);
}

[b-l2918l8liv] .uom-pay-tile:hover {
    border-color: var(--brand-600);
    transform: translateY(-1px);
}

[b-l2918l8liv] .uom-pay-tile:focus-visible {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.18);
}

[b-l2918l8liv] .uom-pay-tile.is-selected {
    border-color: var(--brand-600);
    background: rgba(3, 106, 196, 0.06);
    box-shadow: 0 2px 8px rgba(3, 106, 196, 0.12);
}

[b-l2918l8liv] .uom-pay-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ds-surface-alt);
    color: var(--ds-text-muted);
    flex-shrink: 0;
}

[b-l2918l8liv] .uom-pay-tile.is-selected .uom-pay-tile__icon {
    background: var(--brand-600);
    color: #fff;
}

[b-l2918l8liv] .uom-pay-tile__name {
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ds-text);
    word-break: break-word;
}

[b-l2918l8liv] .uom-pay-tile.is-selected .uom-pay-tile__name {
    color: var(--brand-700, var(--brand-600));
}

[b-l2918l8liv] .uom-pay-empty {
    padding: 12px 14px;
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-md);
    font-size: 0.85rem;
    color: var(--ds-text-muted);
    text-align: center;
}


/* ---------------------------------------------------------------------------
   Cancel-order confirmation modal — reason field (inside the AppModal).
   --------------------------------------------------------------------------- */
.cancel-reason-field[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.cancel-reason-field .ds-label[b-l2918l8liv] {
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text, var(--fg-1));
}

.cancel-reason-optional[b-l2918l8liv] {
    font-weight: 400;
    color: var(--ds-text-muted, var(--fg-hint));
}

.cancel-reason-textarea[b-l2918l8liv] {
    width: 100%;
    min-height: 76px;
    resize: vertical;
}

/* ---------------------------------------------------------------------------
   Small screens — the order-detail column's "İndirim" + "Sipariş Notu" block
   was eating too much vertical space. Tighten the stack and shrink the notes
   textarea so the order items + summary stay visible without scrolling.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .order-meta-stack[b-l2918l8liv] {
        gap: var(--ds-space-1, 6px);
        margin-bottom: var(--ds-space-2, 10px);
    }

    [b-l2918l8liv] .order-notes-textarea {
        min-height: 38px;
    }

    .order-meta-stack[b-l2918l8liv]  .cf-row {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .order-meta-stack[b-l2918l8liv]  .cf-label {
        font-size: 0.8125rem;
    }

    .ds-input-group[b-l2918l8liv] {
        height: 36px;
    }

    .order-summary[b-l2918l8liv] {
        padding-top: 0.6rem;
    }
}

/* ---------------------------------------------------------------------------
   Masa QR — Ortak Sepet paneli (sipariş kalemleri listesinin altında, müşteri
   pending item'larını canlı gösterir) + QR dialog gövdesi + boş adisyon onayı.
   --------------------------------------------------------------------------- */
.uom-qrcart-panel[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2, 10px);
    margin-top: var(--ds-space-2, 10px);
    padding: 8px 10px;
    background: var(--brand-50, #eff6ff);
    border: 1px solid var(--brand-300, #93c5fd);
    border-radius: var(--ds-radius-md, 10px);
}

/* Kompaktken sadece başlık satırı görünür; açılınca liste + buton gelir. */
.uom-qrcart-panel:not(.uom-qrcart-panel--open)[b-l2918l8liv] {
    gap: 0;
}

.uom-qrcart-panel__header[b-l2918l8liv] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2, 10px);
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.uom-qrcart-panel__header:focus-visible[b-l2918l8liv] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
    border-radius: 6px;
}

.uom-qrcart-panel__title[b-l2918l8liv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--brand-700, #0353a4);
}

.uom-qrcart-panel__chevron[b-l2918l8liv] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    color: var(--brand-700, #0353a4);
}

.uom-qrcart-panel__chevron[b-l2918l8liv]  svg { width: 16px; height: 16px; }

.uom-qrcart-panel__title[b-l2918l8liv]  svg { width: 16px; height: 16px; }

.uom-qrcart-panel__count[b-l2918l8liv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--brand-600, #036ac4);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.uom-qrcart-panel__list[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 180px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.uom-qrcart-panel__item[b-l2918l8liv] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    color: var(--ds-text, #0f172a);
    line-height: 1.35;
}

.uom-qrcart-panel__participant[b-l2918l8liv] {
    font-weight: 700;
    color: var(--brand-700, #0353a4);
    white-space: nowrap;
}

.uom-qrcart-panel__product[b-l2918l8liv] { font-weight: 600; }

.uom-qrcart-panel__mods[b-l2918l8liv] {
    font-size: 0.75rem;
    color: var(--ds-text-muted, #475569);
}

.uom-qrcart-panel__price[b-l2918l8liv] {
    margin-left: auto;
    font-weight: 600;
    color: var(--brand-600, #036ac4);
    white-space: nowrap;
}

/* QR dialog body — centered QR canvas, remaining time, copyable link. */
.uom-qr-dialog[b-l2918l8liv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-2, 10px);
    text-align: center;
}

.uom-qr-dialog__code[b-l2918l8liv] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 200px;
    padding: var(--ds-space-2, 10px);
    background: #fff;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 10px);
}

.uom-qr-dialog__remaining[b-l2918l8liv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted, #475569);
}

.uom-qr-dialog__remaining[b-l2918l8liv]  svg { width: 15px; height: 15px; }

.uom-qr-dialog__link[b-l2918l8liv] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 10px;
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 6px);
    font-family: var(--ds-font-mono, monospace);
    font-size: 0.75rem;
    color: var(--ds-text-muted, #475569);
}

/* =====================================================================
   Ara bant düzeni — container query'ler. Kırılımlar viewport'a değil
   .main-content'in GERÇEK genişliğine bakar; 1024x768, 1280x760, %125
   Windows ölçeği (≈819px efektif) ve yarım-ekran pencereler aynı
   kurallardan geçer.
   ===================================================================== */

/* Toplam alan daralınca menü paneli: 190px dikey kategori rayı yatay chip
   şeridine döner, ürün grid'i tam genişliği kullanır (auto-fill kolon
   sayısını kendisi ayarlar). */
@container uom-main (max-width: 1150px) {
    .menu-section[b-l2918l8liv],
    .order-details-section[b-l2918l8liv] { padding: var(--ds-space-2); }

    .menu-section[b-l2918l8liv] { flex-direction: column; }

    .menu-side[b-l2918l8liv] {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
    }

    .categories-container[b-l2918l8liv] {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        padding-bottom: 4px;
        flex: 0 0 auto;
        gap: 6px;
    }

    [b-l2918l8liv] .categories-container fluent-button {
        width: auto;
        min-width: max-content;
        min-height: 36px;
        flex: 0 0 auto;
    }

    [b-l2918l8liv] .categories-container fluent-button::part(control) {
        min-height: 36px;
        padding: 4px 12px;
        font-size: 0.825rem;
        white-space: nowrap;
    }
}

/* Sağ kolon 340px tabanına yaklaşınca: form satırları tek kolon, sekmeler
   ve Sipariş Notu butonu kompakt (ikon + tooltip). */
@container uom-main (max-width: 1000px) {
    [b-l2918l8liv] .cf-row {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    [b-l2918l8liv] .uom-schedule-grid { grid-template-columns: 1fr; }

    .order-note-toggle[b-l2918l8liv] { padding: 0 10px; }
    .order-note-toggle .ont-label[b-l2918l8liv] { display: none; }

    .tab-navigation .tab[b-l2918l8liv] {
        font-size: 0.85rem;
        padding: 8px 10px 10px;
    }

    .order-items-list[b-l2918l8liv] { margin: 0.6rem 0; }
}

/* Boş adisyon onay metni. */
.uom-empty-confirm__text[b-l2918l8liv] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.9375rem;
    color: var(--ds-text, #0f172a);
    line-height: 1.5;
}
/* /Components/Pages/Orders/Dialogs/VoiceOrderModal.razor.rz.scp.css */
.vo-body[b-2jasntv7lc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-2) 0 var(--space-1);
}

.vo-stage[b-2jasntv7lc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

/* ── Mikrofon seçici ─────────────────────────────────────────────── */
.vo-mic-select[b-2jasntv7lc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
}

.vo-mic-select__label[b-2jasntv7lc] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--fg-3);
}

.vo-mic-select__control[b-2jasntv7lc] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--fg-1);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.vo-mic-select__control:focus-visible[b-2jasntv7lc] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ── "Ses gelmiyor" uyarısı ──────────────────────────────────────── */
.vo-warn[b-2jasntv7lc] {
    margin: 0;
    text-align: center;
    font-size: .82rem;
    color: var(--danger-600);
    line-height: 1.45;
}

/* ── Yumuşak kullanım açıklaması ──────────────────────────────────── */
.vo-usage[b-2jasntv7lc] {
    margin: 0;
    text-align: center;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--fg-3);
    opacity: .9;
}

/* ── Copilot tarzı yuvarlak pulse orb ────────────────────────────────
   JS her karede --vo-level (0..1) sürer; parıltı halkaları buna göre
   büyür/parlar, çekirdek sürekli nazikçe nefes alır. */
.vo-orb[b-2jasntv7lc] {
    --vo-level: 0.06;
    position: relative;
    width: 132px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-2) 0;
}

.vo-orb__core[b-2jasntv7lc] {
    position: relative;
    z-index: 3;
    width: 62px;
    height: 62px;
    border-radius: var(--radius-pill);
    /* White temaya uygun, light: yumuşak açık dolgu + ince accent halka, gradient yok. */
    background: var(--accent-soft);
    border: 1.5px solid rgba(3, 106, 196, .30);
    box-shadow: 0 2px 12px rgba(3, 106, 196, .10);
    transform: scale(calc(1 + var(--vo-level) * 0.12));
    transition: transform .1s ease-out;
    animation: vo-breathe-b-2jasntv7lc 3.2s ease-in-out infinite;
}

.vo-orb__wave[b-2jasntv7lc] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 62px;
    height: 62px;
    border-radius: var(--radius-pill);
    /* Hafif parıltı halkası — düşük opaklık, soft. */
    background: radial-gradient(circle, rgba(3, 106, 196, .12), rgba(3, 106, 196, 0) 70%);
    transform: scale(calc(1 + var(--vo-level) * 1.8));
    opacity: calc(.10 + var(--vo-level) * .5);
    transition: transform .12s ease-out, opacity .12s ease-out;
    z-index: 1;
}

.vo-orb__wave--2[b-2jasntv7lc] {
    transform: scale(calc(1 + var(--vo-level) * 2.7));
    opacity: calc(.06 + var(--vo-level) * .3);
    z-index: 2;
}

@keyframes vo-breathe-b-2jasntv7lc {
    0%, 100% { box-shadow: 0 2px 12px rgba(3, 106, 196, .10); }
    50%      { box-shadow: 0 2px 18px rgba(3, 106, 196, .18); }
}

@media (prefers-reduced-motion: reduce) {
    .vo-orb__core[b-2jasntv7lc] { animation: none; }
    .vo-orb__wave[b-2jasntv7lc], .vo-orb__core[b-2jasntv7lc] { transition: none; }
}

/* ── Text ───────────────────────────────────────────────────────── */
.vo-hint[b-2jasntv7lc] {
    margin: 0;
    text-align: center;
    font-size: .9rem;
    color: var(--fg-3);
}

.vo-transcript[b-2jasntv7lc] {
    width: 100%;
    min-height: 64px;
    max-height: 160px;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-muted);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

.vo-transcript__placeholder[b-2jasntv7lc] {
    color: var(--fg-3);
    opacity: .7;
}

.vo-transcript__final[b-2jasntv7lc] {
    color: var(--fg-1);
}

.vo-transcript__interim[b-2jasntv7lc] {
    color: var(--fg-3);
    opacity: .75;
}

.vo-msg[b-2jasntv7lc] {
    margin: 0;
    text-align: center;
    font-size: .95rem;
    padding: var(--space-4) 0;
}

.vo-msg--muted[b-2jasntv7lc] {
    color: var(--fg-3);
}

.vo-msg--error[b-2jasntv7lc] {
    color: var(--danger-600);
}

.vo-cost[b-2jasntv7lc] {
    margin: 0;
    text-align: center;
    font-size: .8rem;
    color: var(--fg-3);
    opacity: .85;
}

/* /Components/Pages/Orders/OrderDetails.razor.rz.scp.css */
.loading-container[b-r8n77cu2g7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.error-card[b-r8n77cu2g7] {
    margin: 24px;
    padding: 48px;
    text-align: center;
}

.order-details-container[b-r8n77cu2g7] {
    padding: 0 24px 24px 24px;
    max-width: 1400px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeIn-b-r8n77cu2g7 0.4s ease-in-out forwards;
}

.three-columns[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 1fr 0.9fr 1fr;
    gap: 16px;
    align-items: start;
}

@keyframes fadeIn-b-r8n77cu2g7 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.order-card[b-r8n77cu2g7] {
    width: fit-content !important;
    height: fit-content !important;
    padding: 12px;
    background-color: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-card-default);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    opacity: 0;
    animation: slideInFromLeft-b-r8n77cu2g7 0.5s ease-out forwards;
    animation-delay: 0.1s;
}

@keyframes slideInFromLeft-b-r8n77cu2g7 {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.order-basic-info[b-r8n77cu2g7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.order-meta[b-r8n77cu2g7] {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.order-total[b-r8n77cu2g7] {
    text-align: right;
}

/* Info Sections */
.info-section[b-r8n77cu2g7] {
    padding: 20px;
}

.section-header[b-r8n77cu2g7] {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.section-header .fluent-icon[b-r8n77cu2g7] {
    color: var(--accent-foreground-rest);
}

.section-header .fluent-label[b-r8n77cu2g7] {
    font-weight: 900 !important;
    font-size: 1.2rem !important;
    color: var(--neutral-foreground-rest) !important;
}

.section-title[b-r8n77cu2g7] {
    margin-bottom: 0px;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: var(--accent-fill-rest) !important;
}

/* Compact fonts for medium screens */
@media (max-width: 1400px) {
    .section-title[b-r8n77cu2g7] { font-size: 1rem !important; }
    .order-meta[b-r8n77cu2g7] { font-size: 0.8rem; }
}

/* More compact on tablets/phones */
@media (max-width: 1000px) {
    .section-title[b-r8n77cu2g7] { font-size: 0.95rem !important; }
    .order-card[b-r8n77cu2g7], .delivery-section-card[b-r8n77cu2g7], .payment-section-card[b-r8n77cu2g7] { padding: 10px; }
    .order-items-header[b-r8n77cu2g7], .order-item[b-r8n77cu2g7] { gap: 8px; }
}

.customer-details[b-r8n77cu2g7] {
    margin-top: 12px;
    padding: 12px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
}

.customer-details .fluent-stack[b-r8n77cu2g7] {
    width: 100%;
}

.customer-details[b-r8n77cu2g7]  .fluent-icon {
    flex-shrink: 0;
    color: var(--accent-foreground-rest);
}

.customer-details[b-r8n77cu2g7]  .fluent-label {
    word-break: break-word;
    flex: 1;
}

.order-items[b-r8n77cu2g7] {
    margin-top: 16px;
}

.order-items-header[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 12px 16px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 600;
}

.order-item[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    align-items: start;
}

.order-item:last-child[b-r8n77cu2g7] {
    border-bottom: none;
}

.item-name[b-r8n77cu2g7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-modifiers[b-r8n77cu2g7] {
    display: flex;
    flex-direction: column;
}

.order-item-modifiers[b-r8n77cu2g7] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-item-modifiers li[b-r8n77cu2g7] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint);
}

.no-modifiers[b-r8n77cu2g7] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.summary-section[b-r8n77cu2g7] {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
    width: fit-content;
    justify-self: end;
    text-align: end;
}

/* Payment Details Styles */
.payment-section-card[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-card-default);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 12px;
    margin-bottom: 16px;
}

.payment-details[b-r8n77cu2g7] {
    margin-top: 16px;
}

.payments-header[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    padding: 12px 16px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 600;
}

.payment-item[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    align-items: center;
}

.payment-item:last-child[b-r8n77cu2g7] {
    border-bottom: none;
}

.payment-method[b-r8n77cu2g7] {
    display: flex;
    align-items: center;
}

.payment-method[b-r8n77cu2g7]  .fluent-icon {
    color: var(--accent-foreground-rest);
    flex-shrink: 0;
}

.payment-summary[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.actions-section[b-r8n77cu2g7],
.delivery-section[b-r8n77cu2g7] {
    padding: 20px;
}

.delivery-section-card[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-card-default);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 12px;
    margin-bottom: 16px;
}

.delivery-details[b-r8n77cu2g7] {
    margin-top: 12px;
}

.map-container[b-r8n77cu2g7] {
    border: 1px solid var(--neutral-stroke-card-default);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    min-height: 280px;
}

/* Delivery Details Grid Layouts */
.delivery-info-grid[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.delivery-info-section[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    gap: 8px;
}

/* Remove extra vertical whitespace between stacked rows */
.delivery-info-section > *:last-child[b-r8n77cu2g7] { margin-bottom: 0; }
.delivery-info-section > *:first-child[b-r8n77cu2g7] { margin-top: 0; }

/* Badge and label wrapping fix */
.delivery-info-section[b-r8n77cu2g7]  .fluent-badge {
    white-space: nowrap;
}

.delivery-addresses-grid[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.address-section[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    padding: 12px;
}

.delivery-extra-info[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.courier-section[b-r8n77cu2g7],
.note-section[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    padding: 12px;
}

.note-section[b-r8n77cu2g7] {
    grid-column: 1 / -1; /* Note section spans full width when alone */
}

/* When there's both courier and note, they share the row */
.delivery-extra-info:has(.courier-section) .note-section[b-r8n77cu2g7] {
    grid-column: auto;
}

@media (max-width: 768px) {
    .order-details-container[b-r8n77cu2g7] {
        padding: 0 12px 16px 12px;
    }
    
    .page-header[b-r8n77cu2g7] {
        padding: 8px 12px;
        margin-bottom: 12px;
    }
    
    .order-card[b-r8n77cu2g7] {
        margin-bottom: 12px;
        padding: 12px;
    }
    
    .main-content[b-r8n77cu2g7] {
        gap: 16px;
    }
    
    .info-section[b-r8n77cu2g7],
    .summary-section[b-r8n77cu2g7],
    .actions-section[b-r8n77cu2g7],
    .delivery-section[b-r8n77cu2g7],
    .delivery-section-card[b-r8n77cu2g7] {
        padding: 16px;
    }

    .three-columns[b-r8n77cu2g7] {
        grid-template-columns: 1fr; /* Stack columns on small screens */
        gap: 12px;
    }
    
    .payment-section-card[b-r8n77cu2g7] {
        padding: 16px;
        margin-bottom: 12px;
    }
    
    .order-items-header[b-r8n77cu2g7],
    .order-item[b-r8n77cu2g7] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    
    .order-items-header[b-r8n77cu2g7] {
        display: none;
    }
    
    .order-item[b-r8n77cu2g7] {
        border: 1px solid var(--neutral-stroke-divider-rest);
        border-radius: 8px;
        margin-bottom: 8px;
    }
    
    /* Mobile responsive for payment section */
    .payments-header[b-r8n77cu2g7],
    .payment-item[b-r8n77cu2g7] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    
    .payments-header[b-r8n77cu2g7] {
        display: none;
    }
    
    .payment-item[b-r8n77cu2g7] {
        border: 1px solid var(--neutral-stroke-divider-rest);
        border-radius: 8px;
        margin-bottom: 8px;
    }
    
    .payment-method[b-r8n77cu2g7] {
        margin-bottom: 8px;
    }
    
    .payment-summary[b-r8n77cu2g7] {
        padding: 12px;
    }
    
    /* Mobile responsive for delivery grids */
    .delivery-info-grid[b-r8n77cu2g7],
    .delivery-addresses-grid[b-r8n77cu2g7],
    .delivery-extra-info[b-r8n77cu2g7] {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .delivery-info-section[b-r8n77cu2g7],
    .address-section[b-r8n77cu2g7],
    .courier-section[b-r8n77cu2g7],
    .note-section[b-r8n77cu2g7] {
        padding: 12px;
    }
    
    .note-section[b-r8n77cu2g7] {
        grid-column: auto; /* Reset grid column for mobile */
    }
    
    .customer-details[b-r8n77cu2g7] {
        padding: 12px;
        margin-top: 8px;
    }
    
    .customer-details .fluent-stack[data-orientation="horizontal"][b-r8n77cu2g7] {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .section-header[b-r8n77cu2g7] {
        margin-bottom: 12px;
        padding-bottom: 6px;
    }
}

/* 1800px altında: 2 sütuna düş */
@media (max-width: 1800px) {
    .three-columns[b-r8n77cu2g7] { grid-template-columns: 1fr 1fr; }
}

/* Daha dar masaüstü: 2 sütun */
@media (max-width: 1400px) {
    .three-columns[b-r8n77cu2g7] { grid-template-columns: 1fr 1fr; gap: 16px; }
    .page-title[b-r8n77cu2g7] { font-size: 1.6rem !important; }
    .delivery-info-section[b-r8n77cu2g7], .address-section[b-r8n77cu2g7] { font-size: 0.95rem; }
}

/* Tablet breakpoint: 2 sütun altı 1 sütun */
@media (max-width: 1000px) {
    .three-columns[b-r8n77cu2g7] { grid-template-columns: 1fr; gap: 12px; }
    .page-title[b-r8n77cu2g7] { font-size: 1.4rem !important; }
    .delivery-info-section[b-r8n77cu2g7], .address-section[b-r8n77cu2g7] { font-size: 0.9rem; }
    /* Ensure map remains visible on small screens */
    .map-container[b-r8n77cu2g7] { min-height: 320px; }
}

/* Prevent icons from shrinking when labels are long in delivery cards */
.delivery-info-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-icon,
.address-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-icon,
.courier-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-icon,
.note-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.delivery-info-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"],
.address-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"],
.courier-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"],
.note-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] {
    align-items: center;
    gap: 8px;
}

.delivery-info-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-label,
.address-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-label,
.courier-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-label,
.note-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-label {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

/* /Components/Pages/Orders/Orders.razor.rz.scp.css */
/* Orders Page Specific Styles */

/* FilterPopover checkbox styling - make compact but keep icon visible */
[b-o5ycenfjzi] .filter-popover-content fluent-checkbox {
    --design-unit: 3;
    min-height: 24px;
}

[b-o5ycenfjzi] .filter-popover-content fluent-checkbox::part(control) {
    width: 16px;
    height: 16px;
}

/* Responsive styles for smaller screens */
@media (max-width: 1024px) {
    [b-o5ycenfjzi] .filter-popover {
        width: 260px;
    }

    [b-o5ycenfjzi] .filter-popover-content .filter-grid {
        gap: 2px 4px;
    }

    [b-o5ycenfjzi] .filter-popover-content fluent-checkbox::part(label) {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    [b-o5ycenfjzi] .filter-popover {
        width: 240px;
        padding: 8px;
    }

    [b-o5ycenfjzi] .filter-popover-content {
        gap: 4px;
    }

    [b-o5ycenfjzi] .filter-popover-content .filter-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    [b-o5ycenfjzi] .filter-popover-content .filter-grid-dates {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    [b-o5ycenfjzi] .filter-popover-content .filter-section-title {
        font-size: 0.7rem;
    }

    [b-o5ycenfjzi] .filter-popover-content fluent-checkbox::part(label) {
        font-size: 0.7rem;
    }

    [b-o5ycenfjzi] .filter-popover-content fluent-date-picker {
        --design-unit: 2;
    }
}
/* /Components/Pages/Orders/OrdersGrid.razor.rz.scp.css */
/* ============================================================
   OrdersGrid — cell styling on top of AppDataGrid.
   Layout/paging/states live in AppDataGrid.razor.css; this file
   only styles Orders-specific cell content.
   ============================================================ */

/* Sipariş No cell: logo + id/time stack */
.order-id-cell[b-pdsmepgh0g] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.order-logo[b-pdsmepgh0g] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

/* Sipariş No hücresi: Fiş no belirgin (büyük), ReadableId ikincil (küçük) */
.order-no-line[b-pdsmepgh0g] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.order-fisno[b-pdsmepgh0g] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--grid-text-primary);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.order-readable[b-pdsmepgh0g] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--grid-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Order type cell */
.type-cell[b-pdsmepgh0g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--ds-text);
}

.type-ico[b-pdsmepgh0g] { color: var(--ds-text-muted); flex-shrink: 0; }

/* Mağaza / Tabela cell: store (or tabela) name + "Tabela" tag, parent store underneath */
.store-cell__name[b-pdsmepgh0g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 500;
}

.tabela-tag[b-pdsmepgh0g] {
    flex-shrink: 0;
    padding: 1px 6px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-sunken);
    color: var(--ds-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.cell-muted[b-pdsmepgh0g] { color: var(--ds-text-subtle); }
.cell-discount[b-pdsmepgh0g] { color: var(--ds-danger) !important; }

/* Right-aligned total stack */
.cell-stack--end[b-pdsmepgh0g] { align-items: flex-end; text-align: right; }

/* Payment method chip */
.pay-chip[b-pdsmepgh0g] {
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--ds-surface-sunken);
    color: var(--ds-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    max-width: 100%;
    /* Wrap long payment labels (e.g. "Kapıda Banka / Nakit") onto a second line
       instead of clipping to one; clamp at two lines. */
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fatura Kes button (sized so the label never crops) */
.invoice-btn[b-pdsmepgh0g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--ds-font-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.invoice-btn svg[b-pdsmepgh0g] { flex-shrink: 0; }
.invoice-btn:hover[b-pdsmepgh0g] { background: var(--ds-surface-alt); border-color: var(--brand-600); color: var(--brand-600); }

/* Invoice pills */
.invoice-pill[b-pdsmepgh0g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid;
    border-radius: var(--ds-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.invoice-pill--signed[b-pdsmepgh0g] { background: #e8f5e9; color: #1b5e20; border-color: #66bb6a; }
.invoice-pill--draft[b-pdsmepgh0g] { background: #fff3e0; color: #e65100; border-color: #ffb74d; }

/* Tıklanabilir rozet (kesilmiş fiş → belgeyi aç). Rozet görünümünü korur, buton olmadığını
   belli eder; yine de imleç/odak geri bildirimi verir. */
.invoice-pill--action[b-pdsmepgh0g] { cursor: pointer; }
.invoice-pill--action:hover[b-pdsmepgh0g] { filter: brightness(0.97); }
.invoice-pill--action:focus-visible[b-pdsmepgh0g] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* Terminal yokken: buton görünür ama edilgen durur — tıklanınca açıklayıcı modal çıkar. */
.invoice-btn--muted[b-pdsmepgh0g] { color: var(--ds-text-muted); border-style: dashed; }

/* Row actions use the shared design-system buttons (.grid-act / .grid-act--* in app.css),
   matching Employees and the rest of the admin grids. */
/* /Components/Pages/Orders/OrdersPanel.razor.rz.scp.css */
/* ============================================================
   OrdersPanel — design-system filter toolbar bits.
   (Base .orders-toolbar / .orders-filter-field live in app.css.)
   ============================================================ */

/* Date range (left) + search field with an inline, right-aligned search button */
.orders-search[b-n4i6nh087u] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Align the DateRangePicker trigger height with the 40px search input */
.orders-search[b-n4i6nh087u]  .drp-trigger { height: 40px; border-radius: var(--ds-radius-sm); }

.orders-search-input[b-n4i6nh087u] {
    width: 240px;
    padding-right: 42px;
}

.orders-search-btn[b-n4i6nh087u] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-600);
    color: #fff;
    cursor: pointer;
    transition: filter var(--ds-dur-fast) var(--ds-ease);
}

.orders-search-btn:hover[b-n4i6nh087u] { filter: brightness(1.08); }

/* Sütunlar (column show/hide) control */
.orders-cols[b-n4i6nh087u] { position: relative; display: inline-flex; }

.orders-cols-btn[b-n4i6nh087u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--ds-font-ui);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.orders-cols-btn:hover[b-n4i6nh087u] { border-color: var(--brand-600); color: var(--brand-600); }

.orders-cols-backdrop[b-n4i6nh087u] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.orders-cols-pop[b-n4i6nh087u] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    min-width: 210px;
    padding: 8px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-3);
}

.orders-cols-head[b-n4i6nh087u] {
    padding: 4px 8px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-subtle);
}

/* Filter popover content (date section moved to the toolbar) */
.filter-section-title[b-n4i6nh087u] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text);
}

.filter-grid[b-n4i6nh087u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 8px;
}

.filter-radios[b-n4i6nh087u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* DS checkbox / radio rows (filter popover + columns menu), using .ds-checkbox/.ds-radio */
.ds-check-row[b-n4i6nh087u] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    color: var(--ds-text);
    cursor: pointer;
    user-select: none;
}

.ds-check-row:hover[b-n4i6nh087u] { background: var(--ds-surface-alt); }
/* /Components/Pages/PaketGLanding/PaketGContact.razor.rz.scp.css */
/* PaketG Contact Page Styles */
.contact-container[b-lal6hyuuk5] {
    min-height: calc(100vh - 80px);
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 3rem 1.5rem;
}

.contact-content[b-lal6hyuuk5] {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-body[b-lal6hyuuk5] {
    padding: 0;
}

.contact-grid[b-lal6hyuuk5] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
}

/* Contact Info Section */
.contact-info-section[b-lal6hyuuk5] {
    background: #000000;
    border-radius: 16px;
    padding: 2rem;
    color: white;
}

.contact-info-section h2[b-lal6hyuuk5] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: white;
}

.info-cards[b-lal6hyuuk5] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card[b-lal6hyuuk5] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.info-card:hover[b-lal6hyuuk5] {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.info-content h3[b-lal6hyuuk5] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #8CFA1F;
}

.info-content a[b-lal6hyuuk5] {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-content a:hover[b-lal6hyuuk5] {
    color: #8CFA1F;
}

.info-content p[b-lal6hyuuk5] {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
}

.whatsapp-link[b-lal6hyuuk5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #25D366 !important;
    font-weight: 500;
}

.whatsapp-link:hover[b-lal6hyuuk5] {
    color: #128C7E !important;
}

/* Contact Form Section */
.contact-form-section[b-lal6hyuuk5] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-form-section h2[b-lal6hyuuk5] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.contact-form-section > p[b-lal6hyuuk5] {
    color: #666;
    margin-bottom: 1.5rem;
}

/* Alert Styles */
.alert[b-lal6hyuuk5] {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 500;
}

.alert-success[b-lal6hyuuk5] {
    background: rgba(140, 250, 31, 0.15);
    color: #2d6a00;
    border: 1px solid rgba(140, 250, 31, 0.3);
}

.alert-error[b-lal6hyuuk5] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Form Styles */
.contact-form[b-lal6hyuuk5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Submit Button Wrapper - Right Aligned */
.submit-btn-wrapper[b-lal6hyuuk5] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* Submit Button - Black/White Style */
.submit-btn[b-lal6hyuuk5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: #000000;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover:not(:disabled)[b-lal6hyuuk5] {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.submit-btn:disabled[b-lal6hyuuk5] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 968px) {
    .contact-grid[b-lal6hyuuk5] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-info-section[b-lal6hyuuk5] {
        order: 2;
    }

    .contact-form-section[b-lal6hyuuk5] {
        order: 1;
    }
}

@media (max-width: 640px) {
    .contact-container[b-lal6hyuuk5] {
        padding: 1.5rem 1rem;
    }

    .contact-info-section[b-lal6hyuuk5],
    .contact-form-section[b-lal6hyuuk5] {
        padding: 1.5rem;
    }

    .contact-info-section h2[b-lal6hyuuk5],
    .contact-form-section h2[b-lal6hyuuk5] {
        font-size: 1.5rem;
    }

    .info-card[b-lal6hyuuk5] {
        padding: 1rem;
    }

    .submit-btn[b-lal6hyuuk5] {
        width: 100%;
    }
}
/* /Components/Pages/PosTerminals/CreatePosTerminalDialog.razor.rz.scp.css */
.pd-form[b-qkyvcx697w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* İki kolon iskeleti — create'te (dar) tek kolon akış, kolon/kart görünmez. */
.pd-cols[b-qkyvcx697w],
.pd-col[b-qkyvcx697w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* EDIT (geniş modal): iki KART yan yana — solda temel bilgiler, sağda modele
   özel yapılandırma (Pavo UniCloud + eşleştirme / Ödeal). Dar ekranda alt alta. */
.pd-form--wide .pd-cols[b-qkyvcx697w] {
    display: grid;
    grid-template-columns: 1fr 1.15fr; /* sağ (yapılandırma) biraz daha geniş */
    gap: 16px;
    align-items: start;
}

.pd-form--wide .pd-cols--single[b-qkyvcx697w] {
    grid-template-columns: 1fr;
}

.pd-form--wide .pd-card[b-qkyvcx697w] {
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    padding: 16px;
    background: var(--bg-1, #fff);
}

/* Kart zaten bölüyor — kart içindeki İLK section üst çizgisiz/boşluksuz. */
.pd-form--wide .pd-card > .pd-section:first-child[b-qkyvcx697w] {
    border-top: 0;
    padding-top: 0;
}

@media (max-width: 920px) {
    .pd-form--wide .pd-cols[b-qkyvcx697w] {
        grid-template-columns: 1fr;
    }
}

.pd-grid-2[b-qkyvcx697w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pd-req[b-qkyvcx697w] {
    color: var(--ds-danger, #dc2626);
    margin-left: 2px;
}

.pd-toggle[b-qkyvcx697w] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.pd-toggle__label[b-qkyvcx697w] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ds-text);
}

/* Grouped sections (model settings, Ödeal config) */
.pd-section[b-qkyvcx697w] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--ds-border);
}

.pd-section__title[b-qkyvcx697w] {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brand-700, #035299);
}

.pd-section__help[b-qkyvcx697w] {
    margin: -4px 0 0;
}

/* Pavo Cloud pairing wizard */
.pd-pairing[b-qkyvcx697w] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--accent-soft, #eff6ff);
}

.pd-pairing__status[b-qkyvcx697w] {
    font-size: 0.875rem;
    color: var(--fg-2, #475569);
}

.pd-pairing__steps[b-qkyvcx697w] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--ds-border);
}

.pd-pairing__code[b-qkyvcx697w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
}

.pd-pairing__code-val[b-qkyvcx697w] {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--brand-700, #035299);
    font-variant-numeric: tabular-nums;
}

.pd-pairing__actions[b-qkyvcx697w] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Device-specific connection guide */
.pd-guide[b-qkyvcx697w] {
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--bg-subtle, #f8fafc);
}

.pd-guide__head[b-qkyvcx697w] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.pd-guide__icon[b-qkyvcx697w] {
    display: inline-flex;
    color: var(--accent, #036ac4);
}

.pd-guide__title[b-qkyvcx697w] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
}

.pd-guide__steps[b-qkyvcx697w] {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: pd-step;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pd-guide__step[b-qkyvcx697w] {
    counter-increment: pd-step;
    position: relative;
    padding-left: 30px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--fg-2, #475569);
}

.pd-guide__step[b-qkyvcx697w]::before {
    content: counter(pd-step);
    position: absolute;
    left: 0;
    top: -1px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--accent-soft, #eff6ff);
    color: var(--brand-700, #035299);
    font-size: 0.6875rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 520px) {
    .pd-grid-2[b-qkyvcx697w] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/PosTerminals/PosTerminals.razor.rz.scp.css */
/* ── Page header ─────────────────────────────────────────────── */
.pt-header[b-9ouihpg4ix] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pt-header__title[b-9ouihpg4ix] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pt-header__icon[b-9ouihpg4ix] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ds-radius-md, 12px);
    background: var(--brand-50, #eff6ff);
    flex-shrink: 0;
}

.pt-header__eyebrow[b-9ouihpg4ix] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    margin-bottom: 2px;
}

.pt-header__sub[b-9ouihpg4ix] {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--ds-text-muted);
}

.pt-header__actions[b-9ouihpg4ix] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Filters bar ─────────────────────────────────────────────── */
.pt-filters[b-9ouihpg4ix] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 12px);
    padding: 14px 16px;
}

.pt-filter[b-9ouihpg4ix] {
    min-width: 180px;
}

.pt-filter--search[b-9ouihpg4ix] {
    flex: 1 1 220px;
}

.pt-clear[b-9ouihpg4ix] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
}

.pt-clear:hover[b-9ouihpg4ix] {
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
}

.pt-clear:focus-visible[b-9ouihpg4ix] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .pt-filter[b-9ouihpg4ix],
    .pt-filter--search[b-9ouihpg4ix] {
        min-width: 0;
        flex: 1 1 100%;
    }
}
/* /Components/Pages/PosTerminals/PosTerminalsGrid.razor.rz.scp.css */
.pt-grid-wrap[b-j49off8rm8] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Terminal No cell */
.pt-cell-id[b-j49off8rm8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pt-cell-id__icon[b-j49off8rm8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--brand-50, #eff6ff);
    flex-shrink: 0;
}

.pt-cell-id__val[b-j49off8rm8] {
    font-weight: 600;
    color: var(--ds-text);
}

.pt-cell-serial[b-j49off8rm8] {
    font-variant-numeric: tabular-nums;
    color: var(--ds-text);
}

.pt-cell-store--none[b-j49off8rm8] {
    color: var(--ds-text-subtle);
    font-style: italic;
}

/* Badges */
.pt-badge[b-j49off8rm8] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ds-radius-pill, 999px);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.pt-badge--model[b-j49off8rm8] {
    background: var(--brand-50, #eff6ff);
    color: var(--brand-700, #035299);
}

.pt-badge--on[b-j49off8rm8] {
    background: var(--ds-success-soft, #ecfdf5);
    color: var(--ds-success, #059669);
}

.pt-badge--off[b-j49off8rm8] {
    background: var(--ds-surface-sunken, #f1f5f9);
    color: var(--ds-text-muted);
}

/* Row actions */
.pt-acts[b-j49off8rm8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pt-act[b-j49off8rm8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: border-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease);
}

.pt-act:hover[b-j49off8rm8] {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: var(--brand-50, #eff6ff);
}

.pt-act--danger:hover[b-j49off8rm8] {
    border-color: var(--ds-danger, #dc2626);
    color: var(--ds-danger, #dc2626);
    background: var(--ds-danger-soft, #fef2f2);
}

.pt-act:focus-visible[b-j49off8rm8] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}
/* /Components/Pages/Recipes/Recipes.razor.rz.scp.css */
.recipes-page[b-bwil7psyld] { gap: var(--space-5); }

.page-head[b-bwil7psyld] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.page-head__titles[b-bwil7psyld] { display: flex; flex-direction: column; gap: var(--space-2); }

.eyebrow[b-bwil7psyld] {
    display: inline-block;
    align-self: flex-start;
    background: var(--accent-soft);
    color: var(--brand-600);
    font-size: var(--xs-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.page-title[b-bwil7psyld] { margin: 0; font-weight: 700; color: var(--fg-1); }

.page-subtitle[b-bwil7psyld] {
    margin: 0;
    max-width: 64ch;
    color: var(--fg-3);
    font-size: var(--small-size);
    line-height: 1.5;
}

.page-head__actions[b-bwil7psyld] { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.filter-bar[b-bwil7psyld] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
}

.filter-bar .ds-field[b-bwil7psyld] { min-width: 160px; }
.filter-grow[b-bwil7psyld] { flex: 1 1 240px; }

.ds-toolbar-btn[b-bwil7psyld] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--fg-2);
    font-size: var(--small-size);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out);
}

.ds-toolbar-btn:hover[b-bwil7psyld] { border-color: var(--border-strong); }
.ds-toolbar-btn:focus-visible[b-bwil7psyld] { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 768px) {
    .filter-bar .ds-field[b-bwil7psyld], .filter-grow[b-bwil7psyld] { flex: 1 1 100%; min-width: 0; }
}
/* /Components/Pages/Recipes/RecipesGrid.razor.rz.scp.css */
.rg-name-cell[b-t3h2jd70oj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.rg-name-cell[b-t3h2jd70oj]  svg { color: var(--accent); width: 20px; height: 20px; flex-shrink: 0; }
.rg-name[b-t3h2jd70oj] { color: var(--accent); }

.rg-count[b-t3h2jd70oj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-muted);
    color: var(--fg-2);
    font-size: var(--xs-size);
    font-weight: 600;
}

.rg-confirm[b-t3h2jd70oj] { margin: 0; color: var(--fg-2); line-height: 1.5; }
/* /Components/Pages/Recipes/RecipeWizardModal.razor.rz.scp.css */
/* ---------- header + stepper ---------- */
.rw-head[b-artum7ulsz] { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }

.rw-head__title[b-artum7ulsz] { display: flex; align-items: center; gap: var(--space-3); }
.rw-head__icon[b-artum7ulsz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    color: var(--accent);
}
.rw-head__icon[b-artum7ulsz]  svg { width: 22px; height: 22px; }
.am-title[b-artum7ulsz] { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--fg-1); }

.rw-steps[b-artum7ulsz] {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.rw-step[b-artum7ulsz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px 6px 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-muted);
    color: var(--fg-hint);
    font-size: var(--small-size);
    font-weight: 500;
}

.rw-step__no[b-artum7ulsz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    font-size: var(--xs-size);
    font-weight: 700;
}

.rw-step.is-active[b-artum7ulsz] { background: var(--accent-soft); color: var(--brand-600); }
.rw-step.is-active .rw-step__no[b-artum7ulsz] { background: var(--accent); border-color: var(--accent); color: var(--fg-on-brand); }
.rw-step.is-done[b-artum7ulsz] { color: var(--success-700); }
.rw-step.is-done .rw-step__no[b-artum7ulsz] { background: var(--success-500); border-color: var(--success-500); color: #fff; }

/* ---------- body ---------- */
.rw-loading[b-artum7ulsz] { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.rw-body[b-artum7ulsz] { min-height: 320px; position: relative; }

/* AI fill overlay — covers the step while the model works */
.rw-ai-overlay[b-artum7ulsz] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(1px);
    border-radius: var(--radius-md);
}
.rw-ai-overlay__txt[b-artum7ulsz] { color: var(--brand-700); font-size: var(--small-size); font-weight: 600; }

.rw-grid[b-artum7ulsz] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-4);
    align-items: end;
}
.rw-col-name[b-artum7ulsz] { grid-column: span 1; }
.rw-col-full[b-artum7ulsz] { grid-column: 1 / -1; }

/* Açıklama + Hazırlama Talimatları yan yana, uzun alanlar */
.rw-desc-row[b-artum7ulsz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}
.rw-tall[b-artum7ulsz] { min-height: 130px; resize: vertical; }

@media (max-width: 640px) {
    .rw-desc-row[b-artum7ulsz] { grid-template-columns: 1fr; }
}

.rw-hint[b-artum7ulsz] { margin: 0; color: var(--fg-hint); font-size: var(--small-size); }

.rw-intro[b-artum7ulsz] {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--accent-soft);
    color: var(--brand-700);
    border-radius: var(--radius-md);
    font-size: var(--small-size);
    line-height: 1.5;
}

.rw-info[b-artum7ulsz] {
    display: inline-flex;
    align-items: center;
    color: var(--fg-hint);
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
}
.rw-info:hover[b-artum7ulsz] { color: var(--accent); }
.rw-info__svg[b-artum7ulsz] { display: block; }

/* Quantity input with an inline unit dropdown (AppUnitSelect, Addon variant) */
.rw-qty[b-artum7ulsz] { display: flex; align-items: stretch; }
.rw-qty__input[b-artum7ulsz] {
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---------- materials ---------- */
.rw-toolbar[b-artum7ulsz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.rw-toolbar__actions[b-artum7ulsz] { display: flex; gap: var(--space-2); }

.rw-warn[b-artum7ulsz] {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    border-radius: var(--radius-md);
    font-size: var(--small-size);
}

.rw-empty[b-artum7ulsz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 240px;
    color: var(--fg-hint);
    text-align: center;
}
.rw-empty[b-artum7ulsz]  svg { width: 32px; height: 32px; opacity: .6; }
.rw-empty p[b-artum7ulsz] { margin: 0; }

.rw-items[b-artum7ulsz] { display: flex; flex-direction: column; gap: var(--space-2); }
.rw-items__head[b-artum7ulsz],
.rw-item__main[b-artum7ulsz] {
    display: grid;
    grid-template-columns: minmax(180px, 2.2fr) minmax(150px, 1fr) minmax(160px, 1.6fr) 84px;
    gap: var(--space-2);
    align-items: center;
}
.rw-items__head[b-artum7ulsz] {
    padding: 0 var(--space-2);
    font-size: var(--xs-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-hint);
}

.rw-item[b-artum7ulsz] {
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
}

/* Material cell: name autocomplete with an inline "Özellikler" (soft-edit) button on the
   right, inside the field — mirrors the unit addon on the quantity input. */
.rw-matcell[b-artum7ulsz] { position: relative; min-width: 0; }
.rw-matcell[b-artum7ulsz]  .aac { width: 100%; }
.rw-matcell[b-artum7ulsz]  .aac-input { padding-right: 122px; }

.rw-props-btn[b-artum7ulsz] {
    position: absolute;
    right: 5px;
    top: 20px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    color: var(--fg-2);
    font-size: var(--xs-size);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    z-index: 2;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rw-props-btn:hover[b-artum7ulsz] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.rw-props-btn[b-artum7ulsz]  svg { width: 13px; height: 13px; }
.rw-item__tools[b-artum7ulsz] { display: inline-flex; gap: var(--space-1); justify-content: flex-end; }
.rw-item__note[b-artum7ulsz] { margin-top: var(--space-2); }

.rw-stock[b-artum7ulsz] { font-size: var(--xs-size); color: var(--fg-3); line-height: 1.35; }
.rw-stock__line[b-artum7ulsz] { white-space: nowrap; }
.rw-stock__line.is-warn[b-artum7ulsz] { color: var(--warning-600); font-weight: 600; }
.rw-stock__conv[b-artum7ulsz] { color: var(--success-700); }
.rw-stock__none[b-artum7ulsz] { color: var(--danger-600); font-weight: 600; }

.rw-conv-btn[b-artum7ulsz] {
    margin-top: 2px;
    padding: 2px 8px;
    border: 1px solid var(--warning-500);
    border-radius: var(--radius-sm);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: var(--xs-size);
    font-weight: 600;
    cursor: pointer;
}
.rw-conv-btn:hover[b-artum7ulsz] { background: var(--warning-100); }

.ds-icon-btn.is-on[b-artum7ulsz] { background: var(--accent-soft); border-color: var(--accent); color: var(--brand-600); }
.ds-icon-btn--danger:hover:not(:disabled)[b-artum7ulsz] { color: var(--danger-600); border-color: var(--danger-300); background: var(--danger-50); }

/* ---------- products ---------- */
.rw-prod-meta[b-artum7ulsz] { margin: var(--space-2) 0; font-size: var(--small-size); color: var(--fg-hint); }
.rw-prod-list[b-artum7ulsz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
}
.rw-prod[b-artum7ulsz] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
}
.rw-prod:hover[b-artum7ulsz] { background: var(--bg-muted); }
.rw-prod.is-on[b-artum7ulsz] { background: var(--accent-soft); }

.rw-prod__thumb[b-artum7ulsz] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-hint);
}
.rw-prod__thumb img[b-artum7ulsz] { width: 100%; height: 100%; object-fit: cover; }

.rw-prod__body[b-artum7ulsz] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rw-prod__name[b-artum7ulsz] { color: var(--fg-1); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-prod__menus[b-artum7ulsz] { color: var(--fg-hint); font-size: var(--xs-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-prod-empty[b-artum7ulsz] { padding: var(--space-6); text-align: center; color: var(--fg-hint); }

/* Inline "YZ ile Doldur" inside the recipe-name input, right-aligned */
.rw-namefield[b-artum7ulsz] { position: relative; display: flex; }
.rw-namefield__input[b-artum7ulsz] { flex: 1; padding-right: 130px; }
.rw-aibtn-inline[b-artum7ulsz] {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--fg-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rw-aibtn-inline:hover:not(:disabled)[b-artum7ulsz] { border-color: var(--accent); background: var(--accent-soft); }
.rw-aibtn-inline:disabled[b-artum7ulsz] { opacity: .5; cursor: not-allowed; }
.rw-aibtn-inline:focus-visible[b-artum7ulsz] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Recipe name shown on steps after Basics */
.rw-stepname[b-artum7ulsz] {
    margin-bottom: var(--space-3);
    font-size: var(--small-size);
    color: var(--fg-2);
    font-weight: 600;
}
.rw-stepname__lbl[b-artum7ulsz] { color: var(--fg-hint); font-weight: 500; margin-right: 4px; }

/* ---------- summary ---------- */
.rw-summary[b-artum7ulsz] { display: flex; flex-direction: column; gap: var(--space-4); }
.rw-sum-card[b-artum7ulsz] {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--bg-muted);
}
.rw-sum-card__title[b-artum7ulsz] { font-size: 1.1rem; font-weight: 700; color: var(--fg-1); }
.rw-sum-meta[b-artum7ulsz] { margin-top: var(--space-1); color: var(--fg-hint); font-size: var(--small-size); display: flex; gap: 4px; flex-wrap: wrap; }

.rw-sum-row[b-artum7ulsz] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.rw-sum-block[b-artum7ulsz] {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.rw-sum-block__title[b-artum7ulsz] {
    font-size: var(--xs-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-hint);
    margin-bottom: var(--space-3);
}

.rw-cost[b-artum7ulsz] { display: flex; gap: var(--space-3); }
.rw-cost__cell[b-artum7ulsz] {
    flex: 1;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rw-cost__cell--accent[b-artum7ulsz] { background: var(--accent); color: var(--fg-on-brand); }
.rw-cost__cell--accent .rw-cost__label[b-artum7ulsz] { color: rgba(255,255,255,.85); }
.rw-cost__label[b-artum7ulsz] { font-size: var(--xs-size); color: var(--fg-hint); }
.rw-cost__cell strong[b-artum7ulsz] { font-size: 1.15rem; }

.rw-cost-warn[b-artum7ulsz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--status-warning-fg);
    font-size: var(--small-size);
}

.rw-allergens[b-artum7ulsz] { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rw-allergen[b-artum7ulsz] {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: var(--xs-size);
    font-weight: 600;
}
.rw-muted[b-artum7ulsz] { color: var(--fg-hint); font-size: var(--small-size); }

/* ---------- conversion modal ---------- */
.rw-conv-hint[b-artum7ulsz] { margin: 0 0 var(--space-3); color: var(--fg-2); line-height: 1.5; }
.rw-conv-example[b-artum7ulsz] { margin: var(--space-2) 0 0; color: var(--fg-hint); font-size: var(--xs-size); }

/* ---------- create-new vs link-existing chooser ---------- */
.rw-chooser[b-artum7ulsz] { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.rw-choice[b-artum7ulsz] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rw-choice:hover[b-artum7ulsz] { border-color: var(--accent); background: var(--accent-soft); }
.rw-choice:focus-visible[b-artum7ulsz] { outline: 2px solid var(--accent); outline-offset: 2px; }
.rw-choice__icon[b-artum7ulsz] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.rw-choice__body[b-artum7ulsz] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rw-choice__title[b-artum7ulsz] { font-weight: 700; color: var(--fg-1); }
.rw-choice__desc[b-artum7ulsz] { font-size: var(--small-size); color: var(--fg-hint); }

/* ---------- existing-recipe picker ---------- */
.rw-pick-list[b-artum7ulsz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
}
.rw-pick[b-artum7ulsz] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    color: var(--fg-1);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.rw-pick:hover:not(:disabled)[b-artum7ulsz] { background: var(--accent-soft); border-color: var(--accent); }
.rw-pick:disabled[b-artum7ulsz] { opacity: .5; cursor: not-allowed; }
.rw-pick:focus-visible[b-artum7ulsz] { outline: 2px solid var(--accent); outline-offset: 2px; }
.rw-pick__body[b-artum7ulsz] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rw-pick__name[b-artum7ulsz] { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-pick__meta[b-artum7ulsz] { font-size: var(--xs-size); color: var(--fg-hint); }

/* ---------- footer ---------- */
.rw-footer[b-artum7ulsz] { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.rw-footer__right[b-artum7ulsz] { display: flex; gap: var(--space-2); }

@media (max-width: 760px) {
    .rw-grid[b-artum7ulsz] { grid-template-columns: 1fr 1fr; }
    .rw-sum-row[b-artum7ulsz] { grid-template-columns: 1fr; }
    .rw-items__head[b-artum7ulsz] { display: none; }
    .rw-item__main[b-artum7ulsz] { grid-template-columns: 1fr 1fr; }
}
/* /Components/Pages/Reports/Components/CourierDeliveryCountReport.razor.rz.scp.css */
/* Card layout, summary list and loading overlay are defined globally in wwwroot/app.css (.report-card / .rc-* / .summary-* classes). */
/* /Components/Pages/Reports/Components/DailyEarningsReport.razor.rz.scp.css */
/* Card layout, summary list and loading overlay are defined globally in wwwroot/app.css (.report-card / .rc-* / .summary-* classes). */
/* /Components/Pages/Reports/Components/DeliveryHeatmapReport.razor.rz.scp.css */
/* Card layout, summary list and loading overlay are defined globally in wwwroot/app.css (.report-card / .rc-* / .summary-* classes). */
/* /Components/Pages/Reports/Components/EarningsDistributionReport.razor.rz.scp.css */
/* Card layout, summary list and loading overlay are defined globally in wwwroot/app.css (.report-card / .rc-* / .summary-* classes). */
/* /Components/Pages/Reports/Components/IntegrationEarningsReport.razor.rz.scp.css */
/* Card layout, summary list and loading overlay are defined globally in wwwroot/app.css (.report-card / .rc-* / .summary-* classes). */
/* /Components/Pages/Reports/Components/IntegrationOrdersReport.razor.rz.scp.css */
/* Card layout, summary list and loading overlay are now defined globally in wwwroot/app.css
   (the .report-card / .rc-* / .summary-* classes). Nothing component-specific is needed here. */
/* /Components/Pages/Reports/Components/OrderTypeReport.razor.rz.scp.css */
/* Card layout, summary list and loading overlay are defined globally in wwwroot/app.css (.report-card / .rc-* / .summary-* classes). */
/* /Components/Pages/Reports/Components/StoreOrderCountReport.razor.rz.scp.css */
/* Card layout, summary list and loading overlay are defined globally in wwwroot/app.css (.report-card / .rc-* / .summary-* classes). */
/* /Components/Pages/Reports/Components/TopSellingProductsReport.razor.rz.scp.css */
/* Card shell and loading overlay are defined globally in wwwroot/app.css (.report-card / .loading-overlay).
   The ranked-list internals (.tsp-*) are styled in the component's inline <style> block. */
/* /Components/Pages/Reports/Components/WaiterOrderCountReport.razor.rz.scp.css */
/* Card layout, summary list and loading overlay are defined globally in wwwroot/app.css (.report-card / .rc-* / .summary-* classes). */
/* /Components/Pages/Reports/CourierReports.razor.rz.scp.css */
/* Page shell — mirrors the admin-dashboard chrome */
.crd[b-qzi7ile509] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--bg-subtle);
    min-height: 100%;
}

/* ── Header ─────────────────────────────────────────────────── */
.crd-head[b-qzi7ile509] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.crd-head-text[b-qzi7ile509] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.crd-eyebrow[b-qzi7ile509] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent);
}

.crd-title[b-qzi7ile509] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin: 0;
    line-height: 1.15;
}

.crd-sub[b-qzi7ile509] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    color: var(--fg-hint);
    margin: 0;
    max-width: 62ch;
}

/* ── Filters ────────────────────────────────────────────────── */
.crd-filters[b-qzi7ile509] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.crd-field[b-qzi7ile509] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.crd-flabel[b-qzi7ile509] {
    font-size: var(--xs-size);
    color: var(--fg-hint);
}

.crd-input[b-qzi7ile509] {
    height: 38px;
    min-width: 170px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--layer-1);
    color: var(--fg-1);
    font: inherit;
    font-size: var(--small-size);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
}

.crd-input:focus-visible[b-qzi7ile509] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.crd-input--sm[b-qzi7ile509] { min-width: 86px; }

.crd-hourwin[b-qzi7ile509] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.crd-dash[b-qzi7ile509] { color: var(--fg-hint); }

/* ── KPI strip (system MetricCard) ──────────────────────────── */
.crd-metrics[b-qzi7ile509] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: var(--space-3);
}

.crd-metrics[b-qzi7ile509]  .metric-card-container,
.crd-metrics[b-qzi7ile509]  .metric-card {
    height: 100%;
}

/* ── Notes ──────────────────────────────────────────────────── */
.crd-notes[b-qzi7ile509] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.crd-note[b-qzi7ile509] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--fg-hint);
    font-size: var(--xs-size);
}

.crd-note[b-qzi7ile509]  svg { width: 15px; height: 15px; flex: 0 0 auto; }

.crd-note--info[b-qzi7ile509] {
    padding: var(--space-2) var(--space-4);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    border-radius: var(--radius-md);
}

/* ── Rows ───────────────────────────────────────────────────── */
.crd-row[b-qzi7ile509] {
    display: grid;
    gap: var(--space-5);
    align-items: stretch;
}

.crd-row--2[b-qzi7ile509] { grid-template-columns: 1fr 1fr; }

/* ── Comparison metric tabs ─────────────────────────────────── */
.crd-tabs[b-qzi7ile509] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.crd-tab[b-qzi7ile509] {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--layer-1);
    color: var(--fg-3);
    font: inherit;
    font-size: var(--small-size);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast, 150ms) ease;
}

.crd-tab:hover[b-qzi7ile509] { border-color: var(--border-strong); color: var(--fg-1); }
.crd-tab.is-active[b-qzi7ile509] { background: var(--accent); border-color: var(--accent); color: var(--fg-on-brand); }
.crd-tab:focus-visible[b-qzi7ile509] { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Comparison bars ────────────────────────────────────────── */
.crb[b-qzi7ile509] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.crb-row[b-qzi7ile509] {
    width: 100%;
    display: grid;
    grid-template-columns: 24px 28px minmax(90px, 1.2fr) 3fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur-fast, 150ms) ease, border-color var(--dur-fast, 150ms) ease;
}

.crb-row:hover[b-qzi7ile509] { background: var(--bg-subtle); }
.crb-row.is-active[b-qzi7ile509] { background: var(--accent-soft); border-color: var(--accent); }

.crb-rank[b-qzi7ile509] {
    text-align: center;
    font-size: var(--xs-size);
    font-weight: 700;
    color: var(--fg-hint);
}

.crb-avatar[b-qzi7ile509] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.crb-name[b-qzi7ile509] {
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crb-track[b-qzi7ile509] {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-muted);
    overflow: hidden;
}

.crb-fill[b-qzi7ile509] {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
    min-width: 4px;
}

.crb-val[b-qzi7ile509] {
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Charts ─────────────────────────────────────────────────── */
.crd-chart[b-qzi7ile509] {
    position: relative;
    height: 260px;
    width: 100%;
}

.crd-chart-title[b-qzi7ile509] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-3);
    margin: 0 0 var(--space-2);
}

/* ── Table ──────────────────────────────────────────────────── */
.crd-tablewrap[b-qzi7ile509] {
    width: 100%;
    overflow-x: auto;
    max-height: 460px;
    overflow-y: auto;
}

.crd-table[b-qzi7ile509] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--small-size);
}

.crd-table th[b-qzi7ile509],
.crd-table td[b-qzi7ile509] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.crd-table th[b-qzi7ile509] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-muted);
    color: var(--fg-3);
    font-weight: 600;
    font-size: var(--xs-size);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.crd-table td[b-qzi7ile509] { color: var(--fg-2); }
.crd-num[b-qzi7ile509] { text-align: right; font-variant-numeric: tabular-nums; }
.crd-rankcol[b-qzi7ile509] { width: 44px; text-align: center; color: var(--fg-hint); font-weight: 700; }

.crd-courier[b-qzi7ile509] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--fg-1);
}

.crd-row-click[b-qzi7ile509] { cursor: pointer; transition: background var(--dur-fast, 150ms) ease; }
.crd-row-click:hover td[b-qzi7ile509] { background: var(--bg-subtle); }
.crd-row-click.is-active td[b-qzi7ile509] { background: var(--accent-soft); }

.crd-util[b-qzi7ile509] {
    display: inline-block;
    min-width: 46px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    font-weight: 600;
    text-align: center;
}

/* ── Drill-down ─────────────────────────────────────────────── */
.crd-close[b-qzi7ile509] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--layer-1);
    color: var(--fg-3);
    cursor: pointer;
}

.crd-close:hover[b-qzi7ile509] { background: var(--bg-subtle); color: var(--fg-1); }
.crd-close:focus-visible[b-qzi7ile509] { outline: 2px solid var(--accent); outline-offset: 1px; }

.crd-dkpis[b-qzi7ile509] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.crd-dkpi[b-qzi7ile509] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
}

.crd-dk-l[b-qzi7ile509] { font-size: var(--xs-size); color: var(--fg-hint); }
.crd-dk-v[b-qzi7ile509] {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fg-1);
}

@media (max-width: 1024px) {
    .crd-row--2[b-qzi7ile509] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .crd[b-qzi7ile509] { padding: var(--space-4); }
    .crb-row[b-qzi7ile509] { grid-template-columns: 22px 26px minmax(70px, 1fr) 2fr auto; gap: var(--space-2); }
}
/* /Components/Pages/Reports/MainReports.razor.rz.scp.css */
/* Two-column grid. align-items:stretch makes both cards in a row share the taller one's height,
   so there's no empty vertical gap below a shorter card (what align-items:start caused), and it
   lets specific cards sit side by side (e.g. Kurye + Garson). One column under 1200px. */
.reports-container[b-6ah3gwqjka] {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
}

@media (min-width: 1200px) {
    .reports-container[b-6ah3gwqjka] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.report-item[b-6ah3gwqjka] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    /* become a query container so each card lays out (chart beside vs. above the summary) based
       on its OWN width — see the @container rules in app.css. */
    container: report / inline-size;
}

/* Tall / wide cards (top products list, delivery map) span the full row. */
.report-item--full[b-6ah3gwqjka] {
    grid-column: 1 / -1;
}
/* /Components/Pages/Reports/PoolReport.razor.rz.scp.css */
/* Page Container */
.page-container[b-0cfpo3szcp] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.page-header[b-0cfpo3szcp] {
    margin-bottom: 0.5rem;
}

.page-title[b-0cfpo3szcp] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* Filters Container */
.filters-container[b-0cfpo3szcp] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--neutral-layer-card-container);
    padding: 12px 16px;
    border-radius: var(--layer-corner-radius);
    border: 1px solid var(--neutral-stroke-layer-rest);
}

.filter-item[b-0cfpo3szcp] {
    flex: 0 0 auto;
}

.filter-actions[b-0cfpo3szcp] {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* Loading Container */
.loading-container[b-0cfpo3szcp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
}

/* Content Layout - Main + Sidebar */
.content-layout[b-0cfpo3szcp] {
    display: flex;
    gap: 20px;
    flex: 1;
}

.main-content[b-0cfpo3szcp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Metrics Grid */
.metrics-grid[b-0cfpo3szcp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Sidebar - White background, compact */
.sidebar[b-0cfpo3szcp] {
    width: 280px;
    flex-shrink: 0;
    background: white;
    border-radius: var(--layer-corner-radius);
    border: 1px solid var(--neutral-stroke-layer-rest);
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    max-height: 540px;
    overflow-y: auto;
}

.sidebar-header[b-0cfpo3szcp] {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--neutral-stroke-divider);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
}

/* Charts Row - Side by Side */
.charts-row[b-0cfpo3szcp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Full Width Chart */
.chart-full-width[b-0cfpo3szcp] {
    width: 100%;
    margin-top: 8px;
}

.chart-full-width .chart-wrapper[b-0cfpo3szcp] {
    height: auto;
}

/* Chart Container - Transparent background */
.chart-container[b-0cfpo3szcp] {
    background: transparent;
    border-radius: var(--layer-corner-radius);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chart-header[b-0cfpo3szcp] {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
}

.chart-wrapper[b-0cfpo3szcp] {
    height: 250px;
}

/* Top Users List - Compact, no gap */
.top-users-list[b-0cfpo3szcp] {
    overflow-y: auto;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
}

.top-user-item[b-0cfpo3szcp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.top-user-item:hover[b-0cfpo3szcp] {
    background: var(--neutral-layer-2);
}

.user-rank[b-0cfpo3szcp] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.75rem;
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-rest);
    flex-shrink: 0;
}

.user-rank.rank-gold[b-0cfpo3szcp] {
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
    color: #1a1a1a;
}

.user-rank.rank-silver[b-0cfpo3szcp] {
    background: linear-gradient(135deg, #e0e0e0 0%, #a8a8a8 100%);
    color: #1a1a1a;
}

.user-rank.rank-bronze[b-0cfpo3szcp] {
    background: linear-gradient(135deg, #cd7f32 0%, #b06020 100%);
    color: #ffffff;
}

.user-details[b-0cfpo3szcp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name[b-0cfpo3szcp] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-stats[b-0cfpo3szcp] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-rest);
    opacity: 0.65;
}

/* Breakdown List (inside expandable MetricCard) */
.breakdown-list[b-0cfpo3szcp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.breakdown-item[b-0cfpo3szcp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.breakdown-label[b-0cfpo3szcp] {
    font-size: 0.8125rem;
    color: var(--neutral-foreground-rest);
    opacity: 0.85;
}

.breakdown-value[b-0cfpo3szcp] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    text-align: right;
}

/* Empty States */
.empty-state[b-0cfpo3szcp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 16px;
    color: var(--neutral-foreground-rest);
    opacity: 0.5;
    text-align: center;
    font-size: 0.875rem;
}

.empty-state-small[b-0cfpo3szcp] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--neutral-foreground-rest);
    opacity: 0.5;
    font-size: 0.8125rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .content-layout[b-0cfpo3szcp] {
        flex-direction: column;
    }

    .sidebar[b-0cfpo3szcp] {
        width: 100%;
        max-height: 300px;
    }

    .metrics-grid[b-0cfpo3szcp] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .charts-row[b-0cfpo3szcp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-container[b-0cfpo3szcp] {
        padding: 0.75rem;
    }

    .filters-container[b-0cfpo3szcp] {
        padding: 10px 12px;
    }

    .filter-actions[b-0cfpo3szcp] {
        width: 100%;
        margin-left: 0;
        margin-top: 8px;
    }

    .metrics-grid[b-0cfpo3szcp] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .chart-wrapper[b-0cfpo3szcp] {
        height: 160px;
    }

    .sidebar-header[b-0cfpo3szcp] {
        padding: 10px 12px;
    }

    .top-user-item[b-0cfpo3szcp] {
        padding: 6px 8px;
    }
}
/* /Components/Pages/Reservations/Components/ReservationSettingsModal.razor.rz.scp.css */
.rsm-state[b-0as01l5rnz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 16px;
    color: var(--ds-text-muted, #64748b);
    font-size: 0.9rem;
}

.rsm-body[b-0as01l5rnz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rsm-storechip[b-0as01l5rnz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 6px 12px;
    background: var(--brand-50, #eff6ff);
    color: var(--brand-700, #1d4ed8);
    border: 1px solid var(--brand-100, #bfdbfe);
    border-radius: var(--ds-radius-pill, 999px);
    font-size: 12px;
    font-weight: 600;
}

.rsm-storechip svg[b-0as01l5rnz] { width: 15px; height: 15px; }

.rsm-card[b-0as01l5rnz] {
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 14px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rsm-card-head[b-0as01l5rnz] {
    margin: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted, #64748b);
}

.rsm-grid[b-0as01l5rnz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

/* Toggle row: switch + label inline */
.rsm-toggle[b-0as01l5rnz] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
    cursor: pointer;
}

.rsm-warning[b-0as01l5rnz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: var(--ds-radius-sm, 10px);
    font-size: 0.8125rem;
    line-height: 1.45;
}
/* /Components/Pages/Reservations/Dialogs/CreateReservationModal.razor.rz.scp.css */
.crm-form[b-gts7hukh42] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.crm-opt[b-gts7hukh42] {
    font-weight: 400;
    color: var(--ds-text-muted, #64748b);
}

.crm-narrow[b-gts7hukh42] {
    max-width: 140px;
}
/* /Components/Pages/Reservations/Dialogs/ReservationDetailModal.razor.rz.scp.css */
/* ReservationDetailModal — design-system tokens only (no FluentUI --neutral-*/
/* --accent-fill-* leftovers). Lives inside AppModal's Header/Body/Footer slots. */

/* ===== Custom header (icon chip + title + ref + status badge) ===== */
.rd-h-icon[b-9shkqh3q11] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--brand-50, #eff6ff);
    color: var(--brand-600, #036ac4);
}

.rd-h-icon svg[b-9shkqh3q11] { width: 20px; height: 20px; }

.rd-h-text[b-9shkqh3q11] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rd-h-title[b-9shkqh3q11] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ds-text, #0f172a);
}

.rd-h-ref[b-9shkqh3q11] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--ds-text-muted, #64748b);
}

/* Pushed left of the X button so they never collide. */
.rd-badge[b-9shkqh3q11] {
    margin-left: auto;
    margin-right: 36px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.rd-badge--pending[b-9shkqh3q11]   { background: #fef3c7; color: #b45309; }
.rd-badge--confirmed[b-9shkqh3q11] { background: var(--brand-50, #eff6ff); color: var(--brand-600, #036ac4); }
.rd-badge--seated[b-9shkqh3q11]    { background: #dcfce7; color: #047857; }
.rd-badge--completed[b-9shkqh3q11] { background: var(--ds-surface-sunken, #f1f5f9); color: var(--ds-text, #0f172a); }
.rd-badge--noshow[b-9shkqh3q11]    { background: #fee2e2; color: #b91c1c; }
.rd-badge--cancelled[b-9shkqh3q11] { background: #fee2e2; color: #b91c1c; }

/* ===== Body ===== */
.rd[b-9shkqh3q11] { display: flex; flex-direction: column; gap: 10px; }

/* Date / time hero */
.rd-date[b-9shkqh3q11] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--ds-surface-sunken, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
}

.rd-date-icon[b-9shkqh3q11] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--brand-600, #036ac4);
}

.rd-date-icon svg[b-9shkqh3q11] { width: 22px; height: 22px; }

.rd-date-text[b-9shkqh3q11] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rd-date-line[b-9shkqh3q11] { font-size: 12px; font-weight: 600; color: var(--ds-text-muted, #64748b); text-transform: capitalize; }
.rd-time-line[b-9shkqh3q11] { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rd-time[b-9shkqh3q11] { font-size: 1.5rem; font-weight: 800; color: var(--ds-text, #0f172a); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rd-dur[b-9shkqh3q11], .rd-party[b-9shkqh3q11] { font-size: 13px; color: var(--ds-text-muted, #475569); font-weight: 500; }

/* Relative time chip: "45 dk sonra" (neutral) / "20 dk gecikti" (amber) */
.rd-rel[b-9shkqh3q11] { width: fit-content; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: 0.1px; }
.rd-rel--soon[b-9shkqh3q11] { background: var(--brand-50, #eff6ff); color: var(--brand-700, #0353a4); }
.rd-rel--late[b-9shkqh3q11] { background: #fef3c7; color: #b45309; }

/* Customer block — fills the formerly-empty right side of the hero */
.rd-date-cust[b-9shkqh3q11] { margin-left: auto; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; text-align: right; min-width: 0; }
.rd-dc-name[b-9shkqh3q11] { font-size: 0.95rem; font-weight: 700; color: var(--ds-text, #0f172a); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rd-dc-line[b-9shkqh3q11] { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-600, #036ac4); text-decoration: none; font-size: 12.5px; font-weight: 500; }
.rd-dc-line:hover[b-9shkqh3q11] { text-decoration: underline; }
.rd-dc-line svg[b-9shkqh3q11] { width: 14px; height: 14px; flex-shrink: 0; }

.rd-date-edit[b-9shkqh3q11] { flex: 1; display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; min-width: 0; }
.rd-date-edit-btn[b-9shkqh3q11] { flex-shrink: 0; }

@media (max-width: 560px) {
    .rd-date-cust[b-9shkqh3q11] { margin-left: 0; align-items: flex-start; text-align: left; }
    .rd-dc-name[b-9shkqh3q11] { justify-content: flex-start; }
}

/* ===== Status segment (Gelmedi · Bekleniyor · Geldi) ===== */
.rd-seg[b-9shkqh3q11] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    background: var(--ds-surface-sunken, #f1f5f9);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
}

.rd-seg-btn[b-9shkqh3q11] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm, 9px);
    background: transparent;
    color: var(--ds-text-muted, #64748b);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.rd-seg-btn svg[b-9shkqh3q11] { width: 17px; height: 17px; }
.rd-seg-btn:disabled[b-9shkqh3q11] { opacity: 0.6; cursor: not-allowed; }

.rd-seg-btn:hover:not(:disabled):not(.is-active)[b-9shkqh3q11] {
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0f172a);
}

/* Active segment lifts onto a white chip with a semantic tint. */
.rd-seg-btn.is-active[b-9shkqh3q11] { background: var(--ds-surface, #fff); box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.08)); }
.rd-seg-btn--noshow.is-active[b-9shkqh3q11]  { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.rd-seg-btn--waiting.is-active[b-9shkqh3q11] { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.rd-seg-btn--came.is-active[b-9shkqh3q11]    { color: #047857; border-color: #bbf7d0; background: #f0fdf4; }
.rd-seg-btn:focus-visible[b-9shkqh3q11] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 2px; }

/* Read-only pill for terminal states (Tamamlandı / İptal) */
.rd-terminal[b-9shkqh3q11] {
    text-align: center;
    padding: 12px;
    border-radius: var(--ds-radius-md, 12px);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.rd-terminal--completed[b-9shkqh3q11] { background: var(--ds-surface-sunken, #f1f5f9); color: var(--ds-text, #0f172a); }
.rd-terminal--cancelled[b-9shkqh3q11] { background: #fef2f2; color: #b91c1c; }

/* Sections */
.rd-sec[b-9shkqh3q11] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    min-width: 0;
}

.rd-sec-head[b-9shkqh3q11] { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--ds-text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.6px; }
.rd-sec-head-suffix[b-9shkqh3q11] { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ds-text-muted, #64748b); text-transform: none; letter-spacing: 0; }
.rd-sec-head-suffix strong[b-9shkqh3q11] { color: var(--ds-text, #0f172a); }

.rd-loading[b-9shkqh3q11] { font-size: 13px; color: var(--ds-text-muted, #64748b); }

/* Customer */
.rd-cust-name[b-9shkqh3q11] { font-size: 1.05rem; font-weight: 700; color: var(--ds-text, #0f172a); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-visit[b-9shkqh3q11] { font-size: 10px; font-weight: 700; background: #ede9fe; color: #6d28d9; padding: 3px 8px; border-radius: 999px; letter-spacing: 0.2px; }
.rd-cust-meta[b-9shkqh3q11] { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.rd-link[b-9shkqh3q11] { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-600, #036ac4); text-decoration: none; font-weight: 500; }
.rd-link:hover[b-9shkqh3q11] { text-decoration: underline; }
.rd-link svg[b-9shkqh3q11] { width: 15px; height: 15px; }

/* Table row */
.rd-table-row[b-9shkqh3q11] { display: flex; gap: 6px; align-items: stretch; }
.rd-select[b-9shkqh3q11] { flex: 1; min-width: 0; height: 38px; }

/* Mini icon/action buttons */
.rd-mini[b-9shkqh3q11] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--ds-radius-sm, 8px);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.rd-mini svg[b-9shkqh3q11] { width: 16px; height: 16px; }
.rd-mini--icon[b-9shkqh3q11] { width: 38px; padding: 0; }
.rd-mini:disabled[b-9shkqh3q11] { opacity: 0.55; cursor: not-allowed; }
.rd-mini--primary[b-9shkqh3q11] { background: var(--brand-600, #036ac4); color: #fff; border: 1px solid var(--brand-600, #036ac4); }
.rd-mini--primary:hover:not(:disabled)[b-9shkqh3q11] { background: var(--brand-700, #0356a0); border-color: var(--brand-700, #0356a0); }
.rd-mini--ghost[b-9shkqh3q11] { background: var(--ds-surface, #fff); color: var(--ds-text-muted, #475569); border: 1px solid var(--ds-border, #e2e8f0); }
.rd-mini--ghost:hover:not(:disabled)[b-9shkqh3q11] { background: var(--ds-surface-sunken, #f8fafc); border-color: var(--ds-border-strong, #cbd5e1); }
.rd-mini:focus-visible[b-9shkqh3q11] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 2px; }

/* Arrivals */
.rd-sec--arrivals[b-9shkqh3q11] { background: var(--ds-surface-sunken, #f8fafc); }
.rd-arr-bar[b-9shkqh3q11] { height: 8px; border-radius: 999px; background: var(--ds-border, #e2e8f0); overflow: hidden; }
.rd-arr-fill[b-9shkqh3q11] { height: 100%; background: #16a34a; border-radius: 999px; transition: width 0.2s ease; }
.rd-arr-controls[b-9shkqh3q11] { display: flex; align-items: center; gap: 8px; }
.rd-arr-count[b-9shkqh3q11] { min-width: 32px; text-align: center; font-size: 1.1rem; font-weight: 800; color: var(--ds-text, #0f172a); font-variant-numeric: tabular-nums; }
.rd-arr-all[b-9shkqh3q11] { margin-left: auto; }

/* Payment — boxless, right-aligned meta line (mirrors .rd-meta) */
.rd-pay[b-9shkqh3q11] { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 2px; }
.rd-pay-icon[b-9shkqh3q11] { display: inline-flex; color: var(--ds-text-subtle, #94a3b8); }
.rd-pay-icon svg[b-9shkqh3q11] { width: 14px; height: 14px; }
.rd-pay-label[b-9shkqh3q11] { font-weight: 600; color: var(--ds-text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
.rd-pay-val[b-9shkqh3q11] { margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.rd-pay-amount[b-9shkqh3q11] { font-size: 14px; font-weight: 800; color: var(--ds-text, #0f172a); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rd-pay-status[b-9shkqh3q11] { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.rd-pay-status--paid[b-9shkqh3q11] { background: #dcfce7; color: #166534; }
.rd-pay-status--unpaid[b-9shkqh3q11] { background: #fef3c7; color: #92400e; }
.rd-pay-date[b-9shkqh3q11] { font-size: 11px; color: var(--ds-text-subtle, #94a3b8); font-variant-numeric: tabular-nums; }

/* Note */
.rd-note[b-9shkqh3q11] { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ds-text, #0f172a); white-space: pre-wrap; }

/* Meta — single, lean "Oluşturuldu" line */
.rd-meta[b-9shkqh3q11] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ds-text-subtle, #94a3b8); padding: 2px 2px; }
.rd-meta-icon[b-9shkqh3q11] { display: inline-flex; color: var(--ds-text-subtle, #94a3b8); }
.rd-meta-icon svg[b-9shkqh3q11] { width: 14px; height: 14px; }
.rd-meta-label[b-9shkqh3q11] { font-weight: 600; color: var(--ds-text-muted, #64748b); }
.rd-meta-value[b-9shkqh3q11] { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ds-text-muted, #64748b); }

/* ===== Footer (lean) ===== */
.rd-foot-right[b-9shkqh3q11] { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.rd-foot-btn[b-9shkqh3q11] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.rd-foot-btn svg[b-9shkqh3q11] { width: 16px; height: 16px; }
.rd-foot-btn:focus-visible[b-9shkqh3q11] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 2px; }

.rd-foot-btn--success[b-9shkqh3q11] { background: #16a34a; color: #fff; border-color: #16a34a; }
.rd-foot-btn--success:hover[b-9shkqh3q11] { background: #15803d; border-color: #15803d; }

.rd-foot-btn--danger-text[b-9shkqh3q11] { background: transparent; color: #dc2626; }
.rd-foot-btn--danger-text:hover[b-9shkqh3q11] { background: rgba(220, 38, 38, 0.08); }

/* Complete-visit confirmation (replaces footer actions) */
.rd-confirm-prompt[b-9shkqh3q11] { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.rd-confirm-text[b-9shkqh3q11] { font-size: 13.5px; color: var(--ds-text, #0f172a); line-height: 1.5; }
.rd-confirm-text strong[b-9shkqh3q11] { font-weight: 700; }
.rd-confirm-warn[b-9shkqh3q11] { display: block; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #fffbeb; color: #b45309; font-size: 12.5px; font-weight: 600; }
.rd-confirm-actions[b-9shkqh3q11] { display: flex; gap: 8px; justify-content: flex-end; }

/* Cancel-with-note prompt (replaces footer actions) */
.rd-cancel-prompt[b-9shkqh3q11] { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.rd-cancel-label[b-9shkqh3q11] { font-size: 11px; font-weight: 700; color: var(--ds-text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.6px; }
.rd-cancel-text[b-9shkqh3q11] { width: 100%; resize: vertical; min-height: 60px; }
.rd-cancel-actions[b-9shkqh3q11] { display: flex; gap: 8px; justify-content: flex-end; }
/* /Components/Pages/Reservations/Reservations.razor.rz.scp.css */
.rsv-page[b-wpd0fdf8cw] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

/* ===== Top bar ===== */
.rsv-top[b-wpd0fdf8cw] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.rsv-top-left[b-wpd0fdf8cw],
.rsv-top-right[b-wpd0fdf8cw] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.rsv-title[b-wpd0fdf8cw] {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ds-text, #0f172a);
}

.rsv-date-nav[b-wpd0fdf8cw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--ds-surface-sunken, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
}

.rsv-date-input[b-wpd0fdf8cw] {
    width: auto;
    min-width: 150px;
    height: 34px;
    padding: 0 10px;
}

.rsv-nav-btn[b-wpd0fdf8cw],
.rsv-today-btn[b-wpd0fdf8cw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--ds-text-muted, #475569);
    border-radius: var(--ds-radius-sm, 8px);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.rsv-nav-btn[b-wpd0fdf8cw] { width: 34px; }
.rsv-nav-btn svg[b-wpd0fdf8cw] { width: 18px; height: 18px; }

.rsv-today-btn[b-wpd0fdf8cw] {
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.rsv-nav-btn:hover[b-wpd0fdf8cw],
.rsv-today-btn:hover[b-wpd0fdf8cw] {
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0f172a);
}

.rsv-store-select[b-wpd0fdf8cw] {
    width: auto;
    min-width: 220px;
    height: 40px;
    font-weight: 600;
}

/* Icon-only header buttons (settings, refresh) */
.rsv-icon-btn[b-wpd0fdf8cw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text-muted, #475569);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.rsv-icon-btn svg[b-wpd0fdf8cw] { width: 18px; height: 18px; }

.rsv-icon-btn:hover:not(:disabled)[b-wpd0fdf8cw] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
    color: var(--ds-text, #0f172a);
}

.rsv-icon-btn:disabled[b-wpd0fdf8cw] {
    opacity: 0.5;
    cursor: default;
}

/* ===== KPI strip ===== */
/* KPI cards — birebir RestaurantDashboard'daki LiveOperationsMetricCard (.kpi-card)
   görünümü: beyaz yüzey, 16px köşe, --ds-shadow-1, brand-blue ikon çipi (36px,
   radius-sm), UPPERCASE 11px başlık + 22px/800 değer. Rezervasyon kartları tek
   metrikli filtre çipi olduğu için ikon tonları duruma göre korunur; tıkla-filtrele
   davranışı aynı kalır. */
.rsv-kpi[b-wpd0fdf8cw] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.rsv-kpi-item[b-wpd0fdf8cw] {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 16px);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    box-sizing: border-box;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rsv-kpi-item--clickable[b-wpd0fdf8cw] { cursor: pointer; }

.rsv-kpi-item--clickable:hover[b-wpd0fdf8cw] {
    border-color: var(--ds-border-strong, #cbd5e1);
    box-shadow: var(--ds-shadow-2, 0 4px 12px rgba(15, 23, 42, 0.08));
}

.rsv-kpi-item--active[b-wpd0fdf8cw] {
    border-color: var(--brand-600, #036ac4);
    box-shadow: inset 0 0 0 1px var(--brand-600, #036ac4);
}

.rsv-kpi-icon[b-wpd0fdf8cw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--brand-50, #eff6ff);
    color: var(--brand-600, #036ac4);
}

.rsv-kpi-icon svg[b-wpd0fdf8cw] { width: 20px; height: 20px; }

/* All metric icons share the same brand chip — matches the other dashboard metric
   cards (no per-status colored icons). Status semantics live in the value/label, not the icon. */

/* Head = icon chip + label, grouped on the left (mirrors .kpi-card__head). */
.rsv-kpi-head[b-wpd0fdf8cw] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rsv-kpi-value[b-wpd0fdf8cw] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ds-text, #0f172a);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.rsv-kpi-label[b-wpd0fdf8cw] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Dashboard grid ===== */
.rsv-grid[b-wpd0fdf8cw] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
    gap: 14px;
    flex: 1;
    min-height: 0;
}

.rsv-pane[b-wpd0fdf8cw] {
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 14px);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.rsv-list-pane[b-wpd0fdf8cw] { min-height: 0; }
.rsv-side-pane[b-wpd0fdf8cw] { gap: 14px; overflow: auto; }

/* ===== Resizable split: rezervasyon listesi ↔ masalar =====
   --list-ratio (a %) drives the list pane width; the tables side takes the rest.
   JS updates the var on drag/keyboard; stacks vertically on narrow screens. */
.rsv-split[b-wpd0fdf8cw] {
    display: flex;
    align-items: stretch;
    width: 100%;
    position: relative;
    flex: 1;
    min-height: 0;
    --list-ratio: 42%;
    --rsv-gap: 14px;
}

.rsv-split__pane[b-wpd0fdf8cw] { min-width: 0; display: flex; }
.rsv-split__pane > *[b-wpd0fdf8cw] { flex: 1; min-width: 0; min-height: 0; }
.rsv-split__pane--list[b-wpd0fdf8cw] { flex: 0 0 var(--list-ratio); padding-right: calc(var(--rsv-gap) / 2); }
.rsv-split__pane--side[b-wpd0fdf8cw] { flex: 1 1 0; padding-left: calc(var(--rsv-gap) / 2); }

.rsv-split__handle[b-wpd0fdf8cw] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--list-ratio);
    transform: translateX(-50%);
    width: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    background: transparent;
    border: 0;
    padding: 0;
    touch-action: none;
}

.rsv-split__handle[b-wpd0fdf8cw]::before {
    content: "";
    width: 4px;
    height: 48px;
    border-radius: 999px;
    background: var(--ds-border, #e2e8f0);
    transition: background 0.15s ease, height 0.15s ease;
}

.rsv-split__handle:hover[b-wpd0fdf8cw]::before,
.rsv-split.is-dragging .rsv-split__handle[b-wpd0fdf8cw]::before { background: var(--brand-600, #036ac4); height: 64px; }
.rsv-split__handle:focus-visible[b-wpd0fdf8cw] { outline: none; }
.rsv-split__handle:focus-visible[b-wpd0fdf8cw]::before { background: var(--brand-600, #036ac4); height: 64px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600, #036ac4) 30%, transparent); }
.rsv-split.is-dragging[b-wpd0fdf8cw] { user-select: none; cursor: col-resize; }

@media (max-width: 1100px) {
    .rsv-split[b-wpd0fdf8cw] { flex-direction: column; }
    .rsv-split__pane--list[b-wpd0fdf8cw], .rsv-split__pane--side[b-wpd0fdf8cw] { flex: 1 1 auto; width: 100%; padding: 0; }
    .rsv-split__pane--side[b-wpd0fdf8cw] { order: 2; }
    .rsv-split__handle[b-wpd0fdf8cw] { display: none; }
}

/* Right column: active reservations on top, live table status filling the rest.
   No pane chrome — each child (UpcomingNextThree block, table card) brings its own. */
.rsv-side[b-wpd0fdf8cw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

/* Stretch the embedded RestaurantDashboard table card to fill the column.
   ::deep reaches the child component's own card root (scoped CSS otherwise can't). */
.rsv-tables[b-wpd0fdf8cw] { flex: 1; min-height: 0; display: flex; }
.rsv-tables[b-wpd0fdf8cw]  .table-overview-card { flex: 1; min-height: 0; width: 100%; }

/* Date picker sits inside the segmented date-nav; strip its own chrome so it
   reads as one control with the prev/next/today buttons. */
.rsv-date-picker[b-wpd0fdf8cw] { display: inline-flex; }
.rsv-date-picker[b-wpd0fdf8cw]  .dtp-trigger {
    height: 34px;
    border: none;
    background: transparent;
    border-radius: var(--ds-radius-sm, 8px);
}
.rsv-date-picker[b-wpd0fdf8cw]  .dtp-trigger:hover { background: var(--ds-surface, #fff); }

/* ===== Toolbar / search ===== */
.rsv-toolbar[b-wpd0fdf8cw] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.rsv-search[b-wpd0fdf8cw] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    padding: 7px 12px;
    flex: 1;
    min-width: 180px;
}

.rsv-search svg[b-wpd0fdf8cw] {
    width: 16px;
    height: 16px;
    color: var(--ds-text-subtle, #94a3b8);
    flex-shrink: 0;
}

.rsv-search input[b-wpd0fdf8cw] {
    background: transparent;
    border: none;
    outline: none;
    flex: 1;
    font: inherit;
    font-size: 0.875rem;
    color: var(--ds-text, #0f172a);
}

.rsv-chip-clear[b-wpd0fdf8cw] {
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--ds-text-muted, #64748b);
    cursor: pointer;
    text-decoration: underline;
}

/* ===== List body ===== */
.rsv-list-body[b-wpd0fdf8cw] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

/* ===== Skeleton ===== */
.rsv-skel-wrap[b-wpd0fdf8cw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rsv-skel[b-wpd0fdf8cw] {
    height: 62px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--slate-100, #f1f5f9) 0%, var(--slate-200, #e2e8f0) 50%, var(--slate-100, #f1f5f9) 100%);
    background-size: 200% 100%;
    animation: rsv-shimmer-b-wpd0fdf8cw 1.4s linear infinite;
}

@keyframes rsv-shimmer-b-wpd0fdf8cw {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Empty states ===== */
.rsv-empty[b-wpd0fdf8cw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
    color: var(--ds-text-muted, #64748b);
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 14px);
}

.rsv-empty svg[b-wpd0fdf8cw] { width: 32px; height: 32px; color: var(--ds-text-subtle, #94a3b8); }
.rsv-empty--inline[b-wpd0fdf8cw] { background: transparent; border: none; padding: 36px 12px; }
.rsv-empty h3[b-wpd0fdf8cw] { margin: 0; color: var(--ds-text, #0f172a); font-weight: 700; font-size: 1rem; }
.rsv-empty p[b-wpd0fdf8cw] { margin: 0; font-size: 0.85rem; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .rsv-grid[b-wpd0fdf8cw] { grid-template-columns: 1fr; }
    .rsv-side-pane[b-wpd0fdf8cw], .rsv-side[b-wpd0fdf8cw] { order: 2; }
    /* On a single column the table card no longer needs to fill leftover height. */
    .rsv-tables[b-wpd0fdf8cw] { flex: none; min-height: 420px; }
}

@media (max-width: 768px) {
    .rsv-page[b-wpd0fdf8cw] { padding: 10px; gap: 10px; }
    .rsv-top[b-wpd0fdf8cw] { flex-direction: column; align-items: stretch; }
    .rsv-top-left[b-wpd0fdf8cw], .rsv-top-right[b-wpd0fdf8cw] { justify-content: space-between; }
    .rsv-kpi-item[b-wpd0fdf8cw] { min-width: calc(50% - 6px); }
}
/* /Components/Pages/Reviews/Reviews.razor.rz.scp.css */
.review-filters[b-njozsufwbs] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.reviews-cards[b-njozsufwbs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.review-admin-card[b-njozsufwbs] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.review-admin-top[b-njozsufwbs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.review-admin-store[b-njozsufwbs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
    min-width: 0;
    overflow: hidden;
}

.review-admin-store span[b-njozsufwbs] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-admin-stars[b-njozsufwbs] {
    display: flex;
    gap: 0.125rem;
    flex-shrink: 0;
}

.review-admin-body[b-njozsufwbs] {
    flex: 1;
    margin-bottom: 0.75rem;
}

.review-admin-comment[b-njozsufwbs] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
    margin: 0 0 0.5rem 0;
}

.review-admin-no-comment[b-njozsufwbs] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.review-admin-products[b-njozsufwbs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.review-admin-reply[b-njozsufwbs] {
    background: var(--neutral-layer-2);
    border-radius: var(--layer-corner-radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.review-admin-reply-header[b-njozsufwbs] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    margin-bottom: 0.25rem;
}

.review-admin-reply-date[b-njozsufwbs] {
    font-weight: 400;
    margin-left: auto;
}

.review-admin-reply-text[b-njozsufwbs] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.review-admin-bottom[b-njozsufwbs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.review-admin-actions[b-njozsufwbs] {
    margin-left: auto;
}

.review-admin-date[b-njozsufwbs] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}
/* /Components/Pages/Settings/PrintStationsPanel.razor.rz.scp.css */
/* Self-contained styles (CSS-isolated) mirroring the Settings page idiom so this panel renders
   consistently regardless of the global ds-* defaults. Palette matches Settings.razor.css. */

.ps-panel[b-zy6tjdxv93] {
    display: block;
    /* How far the printer rows sit inside their station. The column header lives OUTSIDE the tree, so
       it must be offset by exactly the same amount — derive both from this one number or the labels
       drift away from the columns they title. */
    --ps-indent: 28px;
}

.ps-head-actions[b-zy6tjdxv93] { display: flex; align-items: center; gap: 8px; }

/* "0 ürün — hiçbir şey basmaz" / "yazıcı eklenmedi" badges on the station row */
.ps-warn[b-zy6tjdxv93] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ps-assign-tools[b-zy6tjdxv93] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps-bulk[b-zy6tjdxv93] { min-width: 170px; padding: 7px 10px; font-size: 12.5px; }

.settings-card[b-zy6tjdxv93] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 4px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    margin-bottom: 16px;
}

.settings-card-title[b-zy6tjdxv93] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #64748b;
    text-transform: uppercase;
}

.setting-row[b-zy6tjdxv93] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
}

.setting-meta[b-zy6tjdxv93] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setting-label[b-zy6tjdxv93] { font-size: 14px; font-weight: 600; color: #0f172a; }
.setting-help[b-zy6tjdxv93] { font-size: 12.5px; color: #64748b; line-height: 1.45; }
.setting-control[b-zy6tjdxv93] { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Inputs / selects */
.ds-select[b-zy6tjdxv93], .ds-input[b-zy6tjdxv93] {
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
}
.ds-select[b-zy6tjdxv93] { min-width: 160px; cursor: pointer; }
.ds-select:hover:not(:disabled)[b-zy6tjdxv93], .ds-input:hover:not(:disabled)[b-zy6tjdxv93] { border-color: #94a3b8; }
.ds-select:focus-visible[b-zy6tjdxv93], .ds-input:focus-visible[b-zy6tjdxv93] {
    outline: none;
    border-color: #036ac4;
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.16);
}
.ds-select:disabled[b-zy6tjdxv93], .ds-input:disabled[b-zy6tjdxv93] { opacity: 0.6; cursor: not-allowed; }

/* Switch — kill the global ::after pseudo-thumb and use the real .ds-switch-thumb child. */
.ds-switch[b-zy6tjdxv93] {
    position: relative;
    width: 44px;
    height: 26px;
    border: none;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    padding: 0;
    transition: background 160ms ease;
    flex-shrink: 0;
}
.ds-switch[b-zy6tjdxv93]::after { content: none; }
.ds-switch.is-on[b-zy6tjdxv93] { background: #036ac4; }
.ds-switch-thumb[b-zy6tjdxv93] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    transition: transform 160ms ease;
}
.ds-switch.is-on .ds-switch-thumb[b-zy6tjdxv93] { transform: translateX(18px); }
.ds-switch:focus-visible[b-zy6tjdxv93] { outline: 2px solid #036ac4; outline-offset: 2px; }

/* Card head with an action on the right */
.ps-card-head[b-zy6tjdxv93] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 4px;
    flex-wrap: wrap;
}
.ps-card-head .settings-card-title[b-zy6tjdxv93] { white-space: nowrap; }

.ps-foot-note[b-zy6tjdxv93] { font-size: 12.5px; color: #64748b; line-height: 1.45; margin: 4px 4px 24px; }


/* ── Stations ─────────────────────────────────────────────────
   A flat list, not a stack of cards: hairline separators, one row per station, printers nested
   underneath. Follows the design system's order-row idiom — monochrome, dense, and colour appears in
   exactly ONE indicator per station (the status dot). */
.ps-station[b-zy6tjdxv93] {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}
.ps-station:last-of-type[b-zy6tjdxv93] { border-bottom: none; }
.ps-station.is-off[b-zy6tjdxv93] { opacity: 0.5; }

.ps-station-row[b-zy6tjdxv93] { display: flex; align-items: center; gap: 10px; min-height: 34px; }

/* Name reads as text until you touch it — a boxed input per row was pure chrome. */
.ps-name[b-zy6tjdxv93] {
    flex: 0 0 200px;
    width: 200px;
    padding: 6px 8px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}
.ps-name:hover[b-zy6tjdxv93] { border-color: #e2e8f0; background: #ffffff; }
.ps-name:focus[b-zy6tjdxv93] {
    outline: none;
    border-color: #036ac4;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.14);
}

.ps-meta[b-zy6tjdxv93] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #64748b; white-space: nowrap; }
.ps-meta-strong[b-zy6tjdxv93] { color: #475569; font-weight: 600; }
.ps-dot[b-zy6tjdxv93] { color: #cbd5e1; }

/* The single status indicator. Soft amber, dot carries the colour — never a solid fill. */
.ps-flag[b-zy6tjdxv93] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 9999px;
    background: #fef3c7;
    color: #b45309;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.ps-flag-dot[b-zy6tjdxv93] { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #d97706; }

.ps-station-actions[b-zy6tjdxv93] { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.ps-icon-btn[b-zy6tjdxv93] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: #94a3b8; cursor: pointer;
}
.ps-icon-btn:hover[b-zy6tjdxv93] { color: #b91c1c; border-color: #fee2e2; background: #fef2f2; }
.ps-icon-btn:focus-visible[b-zy6tjdxv93] { outline: 2px solid #036ac4; outline-offset: 2px; }

/* Printers, nested under their station */
.ps-tree[b-zy6tjdxv93] {
    margin: 2px 0 0 calc(var(--ps-indent) / 2);
    padding-left: calc(var(--ps-indent) / 2);
    border-left: 1px solid #e2e8f0;
}

/* Header + rows share one grid, so the columns line up across every station. Columns are capped and
   packed left — a stretchy printer column just left a huge empty field. */
.ps-leaf[b-zy6tjdxv93] {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(140px, 240px) 68px 46px max-content max-content;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}
.ps-leaf[b-zy6tjdxv93]::before {
    content: "";
    position: absolute;
    left: calc(var(--ps-indent) / -2);
    top: 50%;
    width: calc(var(--ps-indent) / 2 - 4px);
    height: 1px;
    background: #e2e8f0;
}

.ps-leaf--head[b-zy6tjdxv93] {
    /* Matches the tree indent so each label sits over its own column. */
    padding: 0 0 3px var(--ps-indent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.ps-leaf--head[b-zy6tjdxv93]::before { content: none; }

.ps-leaf-icon[b-zy6tjdxv93] { display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; }
.ps-leaf-icon.is-pos[b-zy6tjdxv93] { color: #036ac4; }

.ps-leaf-select[b-zy6tjdxv93] {
    min-width: 0; width: 100%;
    padding: 5px 8px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    background: #ffffff; color: #0f172a;
    font: inherit; font-size: 12.5px;
    cursor: pointer;
}
.ps-leaf-select:hover:not(:disabled)[b-zy6tjdxv93] { border-color: #cbd5e1; }
.ps-leaf-select:focus-visible[b-zy6tjdxv93] { outline: none; border-color: #036ac4; box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.14); }
.ps-leaf-select:disabled[b-zy6tjdxv93] { opacity: 0.6; cursor: not-allowed; }

.ps-num[b-zy6tjdxv93] { display: inline-flex; align-items: center; gap: 4px; }
.ps-chip-num[b-zy6tjdxv93] {
    width: 42px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    padding: 4px; font: inherit; font-size: 12.5px; color: #0f172a; text-align: center;
    -moz-appearance: textfield;
}
.ps-chip-num[b-zy6tjdxv93]::-webkit-outer-spin-button, .ps-chip-num[b-zy6tjdxv93]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ps-chip-num:focus-visible[b-zy6tjdxv93] { outline: none; border-color: #036ac4; box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.14); }
.ps-chip-unit[b-zy6tjdxv93] { font-size: 11px; color: #94a3b8; }

/* Sipariş tipi filtresi — istasyon satırının altında, yazıcı listesinden önce.
   Belge seçimiyle (.ps-docs) aynı onay kutusu dilini kullanır ki iki ayar aynı okunsun. */
.ps-ordertypes[b-zy6tjdxv93] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 8px 0 2px 0;
}
.ps-ordertypes-label[b-zy6tjdxv93] {
    font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
    text-transform: uppercase; color: #64748b;
}

.ps-docs[b-zy6tjdxv93] { display: inline-flex; align-items: center; gap: 12px; }
.ps-chk[b-zy6tjdxv93] { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #334155; cursor: pointer; white-space: nowrap; }
.ps-chk input[b-zy6tjdxv93] { width: 14px; height: 14px; accent-color: #036ac4; }

.ps-leaf-actions[b-zy6tjdxv93] { display: inline-flex; align-items: center; gap: 2px; }
.ps-chip-x[b-zy6tjdxv93] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border: none; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer;
}
.ps-chip-x:hover[b-zy6tjdxv93] { color: #036ac4; background: #eff6ff; }
.ps-chip-x:last-child:hover[b-zy6tjdxv93] { color: #b91c1c; background: #fef2f2; }
.ps-chip-x:focus-visible[b-zy6tjdxv93] { outline: 2px solid #036ac4; outline-offset: 1px; }

/* "+ Yazıcı" / "+ POS Cihazı" */
.ps-leaf--add[b-zy6tjdxv93] { padding-top: 1px; }
.ps-add-group[b-zy6tjdxv93] { grid-column: 2 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.ps-add-btn[b-zy6tjdxv93] {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 10px;
    border: 1px dashed #cbd5e1; border-radius: 6px;
    background: transparent; color: #64748b; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600;
}
.ps-add-btn:hover[b-zy6tjdxv93] { border-color: #036ac4; color: #036ac4; background: #eff6ff; }
.ps-add-btn:focus-visible[b-zy6tjdxv93] { outline: 2px solid #036ac4; outline-offset: 2px; }

@media (max-width: 900px) {
    .ps-leaf[b-zy6tjdxv93], .ps-leaf--head[b-zy6tjdxv93] { grid-template-columns: 18px minmax(120px, 1fr) 68px 46px; }
    .ps-docs[b-zy6tjdxv93] { grid-column: 2 / -1; }
    .ps-leaf-actions[b-zy6tjdxv93] { grid-column: 2 / -1; }
    .ps-leaf--head[b-zy6tjdxv93] { display: none; }
    .ps-name[b-zy6tjdxv93] { flex: 1 1 auto; width: auto; }
}

/* ── Product → station routing ────────────────────────────────── */
.ps-search[b-zy6tjdxv93] { width: 240px; padding: 7px 10px; font-size: 13px; }
.ps-hint[b-zy6tjdxv93] { font-size: 12.5px; color: #64748b; line-height: 1.45; margin: 2px 0 8px; }

.ps-assign-row[b-zy6tjdxv93] {
    display: grid;
    grid-template-columns: 1fr 200px;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
}
.ps-assign-row:last-of-type[b-zy6tjdxv93] { border-bottom: none; }
.ps-assign-name[b-zy6tjdxv93] { font-size: 13px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-assign-select[b-zy6tjdxv93] { min-width: 0; width: 100%; padding: 6px 10px; font-size: 12.5px; }

@media (max-width: 680px) {
    .ps-search[b-zy6tjdxv93] { width: 100%; }
    .ps-assign-row[b-zy6tjdxv93] { grid-template-columns: 1fr; gap: 4px; }
}

/* Product routing: menu picker + per-category groups */
.ps-menu[b-zy6tjdxv93] { min-width: 200px; padding: 7px 10px; font-size: 13px; }

/* Horizontal category tabs (mirrors the customer menu's category nav) */
.ps-cat-tabs[b-zy6tjdxv93] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0 8px;
    scrollbar-width: thin;
}
.ps-cat-tabs[b-zy6tjdxv93]::-webkit-scrollbar { height: 6px; }
.ps-cat-tabs[b-zy6tjdxv93]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 20px; }

.ps-cat-tab[b-zy6tjdxv93] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.ps-cat-tab:hover[b-zy6tjdxv93] { border-color: #94a3b8; color: #0f172a; }
.ps-cat-tab.is-active[b-zy6tjdxv93] { border-color: #036ac4; background: rgba(3, 106, 196, 0.08); color: #036ac4; }
.ps-cat-tab:focus-visible[b-zy6tjdxv93] { outline: 2px solid #036ac4; outline-offset: 2px; }
.ps-cat-tab-name[b-zy6tjdxv93] { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.ps-cat-tab-count[b-zy6tjdxv93] {
    font-size: 11px; font-weight: 700; color: #94a3b8;
    background: #f1f5f9; border-radius: 999px; padding: 1px 6px;
}
.ps-cat-tab-count.is-done[b-zy6tjdxv93] { color: #15803d; background: #dcfce7; }
.ps-cat-tab.is-active .ps-cat-tab-count[b-zy6tjdxv93] { background: #ffffff; }

/* Selected category header + whole-category assign */
.ps-cat-actions[b-zy6tjdxv93] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
}
.ps-cat-name[b-zy6tjdxv93] { font-size: 13px; font-weight: 700; color: #0f172a; }
.ps-cat-count[b-zy6tjdxv93] { font-size: 11.5px; color: #94a3b8; }
.ps-cat-actions .ps-bulk[b-zy6tjdxv93] { margin-left: auto; min-width: 150px; }

/* AI routing preview */
.ps-ai[b-zy6tjdxv93] {
    border: 1px solid rgba(3, 106, 196, 0.3);
    background: rgba(3, 106, 196, 0.04);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 0 14px;
}
.ps-ai-head[b-zy6tjdxv93] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; }
.ps-ai-title[b-zy6tjdxv93] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #036ac4; }
.ps-ai-cost[b-zy6tjdxv93] {
    margin-left: auto;
    font-size: 12px; font-weight: 600; color: #b45309;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 3px 10px;
    white-space: nowrap;
}
.ps-ai-row[b-zy6tjdxv93] {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0;
    border-top: 1px solid rgba(3, 106, 196, 0.12);
    font-size: 13px;
}
.ps-ai-row .ps-assign-name[b-zy6tjdxv93] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-ai-row.is-off[b-zy6tjdxv93] { opacity: 0.45; }
.ps-ai-arrow[b-zy6tjdxv93] { color: #94a3b8; }
.ps-ai-select[b-zy6tjdxv93] { flex: 0 0 auto; width: 150px; min-width: 0; padding: 5px 8px; font-size: 12.5px; font-weight: 600; }
.ps-ai-conf[b-zy6tjdxv93] { font-size: 11px; color: #94a3b8; min-width: 34px; text-align: right; }

/* AI dialog: scope summary on step 1 */
.ps-ai-scope[b-zy6tjdxv93] { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ps-ai-scope-row[b-zy6tjdxv93] {
    display: flex; align-items: baseline; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid #f1f5f9;
    font-size: 13px; color: #64748b;
}
.ps-ai-scope-row:last-child[b-zy6tjdxv93] { border-bottom: none; }
.ps-ai-scope-row strong[b-zy6tjdxv93] { margin-left: auto; color: #0f172a; text-align: right; }

/* Station-row warnings stack instead of competing for the row's width */
.ps-warns[b-zy6tjdxv93] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }

/* AI dialog: operator's own routing policy */
.ps-ai-instr-label[b-zy6tjdxv93] {
    display: block;
    margin: 12px 0 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}
.ps-ai-instr[b-zy6tjdxv93] {
    width: 100%;
    resize: vertical;
    font-size: 13px;
    line-height: 1.45;
}
/* /Components/Pages/Settings/Settings.razor.rz.scp.css */
/* ── Settings page (design-system, FluentUI-free) ─────────────────────────
   Palette mirrors AppButton: brand #036ac4, slate scale, white surfaces. */

/* Page uses the shared .page-container / .page-header / .page-title chrome
   (app.css) so the header matches every other admin page. */

/* ── Shell: tab rail + panel stack (left-aligned, width-capped) ─ */
.settings-shell[b-9aiu5xi13h] {
    display: grid;
    grid-template-columns: 220px minmax(0, 640px);
    gap: 20px;
    align-items: start;
    justify-content: start;
}

/* Printer → Gelişmiş: the station tree needs more than the 640px column, but only as much as its
   columns actually measure — wider just adds dead space. */
.settings-shell.is-wide[b-9aiu5xi13h] {
    grid-template-columns: 220px minmax(0, 880px);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.settings-tabs[b-9aiu5xi13h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 16px;
}

.settings-tab[b-9aiu5xi13h] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #475569;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.settings-tab:hover[b-9aiu5xi13h] {
    background: #f1f5f9;
    color: #0f172a;
}

.settings-tab.is-active[b-9aiu5xi13h] {
    background: rgba(3, 106, 196, 0.08);
    color: #036ac4;
    border-color: rgba(3, 106, 196, 0.18);
}

.settings-tab:focus-visible[b-9aiu5xi13h] {
    outline: 2px solid #036ac4;
    outline-offset: 2px;
}

.settings-tab-icon[b-9aiu5xi13h] {
    display: inline-flex;
    flex-shrink: 0;
}

.settings-tab-icon[b-9aiu5xi13h]  svg {
    width: 18px;
    height: 18px;
}

/* ── Panel: a vertical stack of cards ────────────────────────── */
.settings-panels[b-9aiu5xi13h] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.settings-card[b-9aiu5xi13h] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 4px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Header row inside a card: title/meta on the left, an action button on the right. */
.ps-block-head[b-9aiu5xi13h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 4px;
}

.settings-card-title[b-9aiu5xi13h] {
    margin: 0;
    padding: 16px 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #64748b;
    text-transform: uppercase;
}

.setting-row[b-9aiu5xi13h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid #f1f5f9;
}

.setting-row:last-child[b-9aiu5xi13h] {
    border-bottom: none;
}

.setting-meta[b-9aiu5xi13h] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.setting-label[b-9aiu5xi13h] {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.setting-help[b-9aiu5xi13h] {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.45;
}

.setting-help--block[b-9aiu5xi13h] {
    display: block;
    padding: 18px 0 8px;
    margin: 0;
}

.setting-control[b-9aiu5xi13h] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.setting-control--wide[b-9aiu5xi13h] {
    flex: 1;
    max-width: 420px;
    justify-content: flex-end;
}

/* Kompakt ton kontrolü: dropdown + test + anahtar tek satırda */
.setting-control--tone[b-9aiu5xi13h] {
    gap: 8px;
}

.tone-select[b-9aiu5xi13h] {
    width: auto;
    min-width: 130px;
    max-width: 180px;
    padding: 6px 10px;
    font-size: 13px;
}

/* ── Range slider ────────────────────────────────────────────── */
.slider-line[b-9aiu5xi13h] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.ds-range[b-9aiu5xi13h] {
    flex: 1;
    min-width: 120px;
    height: 4px;
    accent-color: #036ac4;
    cursor: pointer;
}

.ds-range:focus-visible[b-9aiu5xi13h] {
    outline: 2px solid #036ac4;
    outline-offset: 4px;
    border-radius: 4px;
}

.slider-value[b-9aiu5xi13h] {
    min-width: 44px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* ── Select ──────────────────────────────────────────────────── */
.ds-select[b-9aiu5xi13h] {
    width: 100%;
    min-width: 160px;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ds-select:hover:not(:disabled)[b-9aiu5xi13h] {
    border-color: #94a3b8;
}

.ds-select:focus-visible[b-9aiu5xi13h] {
    outline: none;
    border-color: #036ac4;
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.16);
}

.ds-select:disabled[b-9aiu5xi13h] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Switch ──────────────────────────────────────────────────── */
.ds-switch[b-9aiu5xi13h] {
    position: relative;
    width: 44px;
    height: 26px;
    border: none;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    padding: 0;
    transition: background 160ms ease;
    flex-shrink: 0;
}

/* The global app.css `.ds-switch` paints its thumb via ::after, sized for a
   smaller 36×20 track. This page uses a real .ds-switch-thumb child, so kill the
   global pseudo-thumb here to avoid a second, misaligned circle. */
.ds-switch[b-9aiu5xi13h]::after {
    content: none;
}

.ds-switch.is-on[b-9aiu5xi13h] {
    background: #036ac4;
}

.ds-switch-thumb[b-9aiu5xi13h] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    transition: transform 160ms ease;
}

.ds-switch.is-on .ds-switch-thumb[b-9aiu5xi13h] {
    transform: translateX(18px);
}

.ds-switch:focus-visible[b-9aiu5xi13h] {
    outline: 2px solid #036ac4;
    outline-offset: 2px;
}

/* ── Empty state (no printer) ────────────────────────────────── */
.settings-empty[b-9aiu5xi13h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 44px 16px;
}

.settings-empty-icon[b-9aiu5xi13h] {
    display: inline-flex;
    color: #94a3b8;
}

.settings-empty-icon[b-9aiu5xi13h]  svg {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
}

.settings-empty-title[b-9aiu5xi13h] {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

.settings-empty-help[b-9aiu5xi13h] {
    font-size: 13px;
    color: #64748b;
    max-width: 320px;
    margin-bottom: 6px;
}

/* ── Yazıcı servisi denetleniyor (ilk tarama) ────────────────── */

/* ── QZ Tray kurulum rehberi kartı ───────────────────────────── */
.qz-setup-head[b-9aiu5xi13h] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.qz-setup-icon[b-9aiu5xi13h] {
    display: inline-flex;
    flex: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff7ed;
    color: #c2410c;
}

.qz-setup-icon[b-9aiu5xi13h]  svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.qz-setup-headtext .settings-card-title[b-9aiu5xi13h] { margin-bottom: 0; }

.qz-setup-intro[b-9aiu5xi13h] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
    margin: 4px 0 0;
}

.qz-setup-steps[b-9aiu5xi13h] {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: qzstep;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qz-setup-steps li[b-9aiu5xi13h] {
    counter-increment: qzstep;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.qz-setup-steps li[b-9aiu5xi13h]::before {
    content: counter(qzstep);
    flex: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #036ac4;
    font-size: 12px;
    font-weight: 700;
}

.qz-step-title[b-9aiu5xi13h] {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}

.qz-step-help[b-9aiu5xi13h] {
    display: block;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
    margin-top: 2px;
}

.qz-setup-actions[b-9aiu5xi13h] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.qz-setup-note[b-9aiu5xi13h] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #036ac4;
}

.qz-setup-note[b-9aiu5xi13h]  svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    fill: currentColor;
}

.qz-setup-note--muted[b-9aiu5xi13h] {
    color: #94a3b8;
    margin-top: 6px;
}

/* ── Language grid ───────────────────────────────────────────── */
.lang-grid[b-9aiu5xi13h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 8px 0 18px;
}

.lang-card[b-9aiu5xi13h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.lang-card:hover[b-9aiu5xi13h] {
    border-color: #036ac4;
    box-shadow: 0 4px 14px rgba(3, 106, 196, 0.1);
}

.lang-card.is-active[b-9aiu5xi13h] {
    border-color: #036ac4;
    background: rgba(3, 106, 196, 0.06);
}

.lang-card:focus-visible[b-9aiu5xi13h] {
    outline: 2px solid #036ac4;
    outline-offset: 2px;
}

.lang-card-code[b-9aiu5xi13h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.lang-card.is-active .lang-card-code[b-9aiu5xi13h] {
    background: #036ac4;
    color: #ffffff;
}

.lang-card-name[b-9aiu5xi13h] {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    flex: 1;
}

.lang-card-check[b-9aiu5xi13h] {
    display: inline-flex;
    color: #036ac4;
}

.lang-card-check[b-9aiu5xi13h]  svg {
    width: 18px;
    height: 18px;
}

/* ── Paper width (numeric mm input) ──────────────────────────── */
.paper-width-control[b-9aiu5xi13h] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.paper-width-input[b-9aiu5xi13h] {
    width: 90px;
    text-align: right;
}

.paper-width-unit[b-9aiu5xi13h] {
    color: #64748b;
    font-size: 0.875rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 720px) {
    .settings-shell[b-9aiu5xi13h] {
        grid-template-columns: 1fr;
    }

    .settings-tabs[b-9aiu5xi13h] {
        flex-direction: row;
        overflow-x: auto;
        position: static;
    }

    .settings-tab[b-9aiu5xi13h] {
        flex: 0 0 auto;
    }

    .setting-row[b-9aiu5xi13h] {
        flex-direction: column;
        align-items: stretch;
    }

    .setting-control--wide[b-9aiu5xi13h] {
        max-width: none;
        justify-content: flex-start;
    }

    /* Mobilde ton kontrolü anahtarı sağda tutar, seçici kalan alanı doldurur */
    .setting-control--tone[b-9aiu5xi13h] {
        justify-content: space-between;
    }

    .setting-control--tone .tone-select[b-9aiu5xi13h] {
        flex: 1;
        max-width: none;
    }
}

/* ── Printer tab: Basit / Gelişmiş segment ───────────────────── */
.printer-view-switch[b-9aiu5xi13h] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin: 4px 0 12px;
    background: #f1f5f9;
    border-radius: 10px;
}
.pv-tab[b-9aiu5xi13h] {
    border: none;
    background: transparent;
    padding: 7px 18px;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
}
.pv-tab:hover:not(:disabled):not(.is-active)[b-9aiu5xi13h] { color: #0f172a; }
.pv-tab.is-active[b-9aiu5xi13h] { background: #ffffff; color: #036ac4; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.pv-tab:disabled[b-9aiu5xi13h] { opacity: 0.45; cursor: not-allowed; }
.pv-tab:focus-visible[b-9aiu5xi13h] { outline: 2px solid #036ac4; outline-offset: 2px; }

/* "Basit görünüm hepsini gösteremiyor" note under the view switch */
.pv-note[b-9aiu5xi13h] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: -4px 0 12px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    border-radius: 10px;
    font-size: 12.5px;
    color: #1e40af;
}
.pv-note > span[b-9aiu5xi13h] { flex: 1; min-width: 0; }

/* ── Güvenlik sekmesi: rapor/istatistik PIN'i ─────────────────────
   Bu dosyanın yerel deseni gereği renkler hex (token değil) — çevresiyle tutarlı. */
.sec-status[b-9aiu5xi13h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
}
.sec-status[b-9aiu5xi13h]  svg,
.sec-status[b-9aiu5xi13h]  svg path { fill: currentColor; }
.sec-status.is-on[b-9aiu5xi13h]  { color: #036ac4; }
.sec-status.is-off[b-9aiu5xi13h] { color: #64748b; }
.sec-status__date[b-9aiu5xi13h] { font-weight: 500; color: #94a3b8; }

.sec-actions[b-9aiu5xi13h] { flex-wrap: wrap; justify-content: flex-end; }

.sec-scope[b-9aiu5xi13h] {
    padding-top: 12px !important;
    border-top: 1px solid #f1f5f9;
    color: #64748b;
}

/* Yönetici hesapları listesi */
.sec-admin-list[b-9aiu5xi13h] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sec-admin[b-9aiu5xi13h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}
.sec-admin__meta[b-9aiu5xi13h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sec-admin__name[b-9aiu5xi13h] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}
.sec-admin__self[b-9aiu5xi13h] {
    font-size: 11px;
    font-weight: 600;
    color: #036ac4;
    background: #eff6ff;
    padding: 1px 8px;
    border-radius: 999px;
}
.sec-admin__status[b-9aiu5xi13h] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
}
.sec-admin__status[b-9aiu5xi13h]  svg,
.sec-admin__status[b-9aiu5xi13h]  svg path { fill: currentColor; }
.sec-admin__status.is-on[b-9aiu5xi13h]  { color: #036ac4; }
.sec-admin__status.is-off[b-9aiu5xi13h] { color: #94a3b8; }
.sec-admin__actions[b-9aiu5xi13h] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .sec-admin[b-9aiu5xi13h] { flex-direction: column; align-items: stretch; }
    .sec-admin__actions[b-9aiu5xi13h] { justify-content: flex-end; }
}

/* ── Menü görünümü seçici (dokunmatik kartlar) ── */
.setting-row--stacked[b-9aiu5xi13h] {
    flex-direction: column;
    align-items: stretch;
}

.menu-layout-options[b-9aiu5xi13h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    width: 100%;
}

.menu-layout-card[b-9aiu5xi13h] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg);
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.menu-layout-card:hover[b-9aiu5xi13h] {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.menu-layout-card.is-active[b-9aiu5xi13h] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.menu-layout-card:focus-visible[b-9aiu5xi13h] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.menu-layout-card-icon[b-9aiu5xi13h] {
    display: inline-flex;
    color: var(--accent);
    margin-bottom: var(--space-1);
}

.menu-layout-card-icon[b-9aiu5xi13h]  svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.menu-layout-card-title[b-9aiu5xi13h] {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-1);
}

.menu-layout-card-desc[b-9aiu5xi13h] {
    font-size: 12px;
    line-height: 1.35;
    color: var(--fg-hint);
}
/* /Components/Pages/Shop/Shop.razor.rz.scp.css */
.shop[b-ewelprtwvw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: var(--space-6);
    background: var(--bg-subtle);
}

.shop-inner[b-ewelprtwvw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 620px;
    gap: var(--space-4);
}

/* ---------- Illustration ---------- */
.shop-art[b-ewelprtwvw] {
    margin: 0 0 var(--space-2);
    width: 100%;
    max-width: 420px;
}

.shop-art svg[b-ewelprtwvw] {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Text ---------- */
.shop-eyebrow[b-ewelprtwvw] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent);
}

.shop-title[b-ewelprtwvw] {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--fg-1);
    margin: 0;
}

.shop-soon[b-ewelprtwvw] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 10px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--warning-100);
    color: var(--warning-600);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.shop-sub[b-ewelprtwvw] {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--fg-2);
    margin: 0;
    max-width: 52ch;
}

.shop-note[b-ewelprtwvw] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    color: var(--fg-hint);
    margin: var(--space-2) 0 0;
}
/* /Components/Pages/Stores/Components/StorePhotosCard.razor.rz.scp.css */
/* =====================================================================
   StorePhotosCard — design-system (FluentUI-free) styles.
   ===================================================================== */

.sp-card[b-f5q6bwa6ks] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
    padding: 18px;
}

.sp-head[b-f5q6bwa6ks] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sp-ico[b-f5q6bwa6ks] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-50);
    color: var(--brand-600);
    flex-shrink: 0;
}

.sp-title[b-f5q6bwa6ks] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ds-text);
}

.sp-count[b-f5q6bwa6ks] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    background: var(--ds-surface-alt);
    padding: 2px 9px;
    border-radius: var(--ds-radius-pill);
}

.sp-hint[b-f5q6bwa6ks] {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    line-height: 1.5;
}

/* ---- Body: small dropzone on the left, added photos on the right ---- */
.sp-body[b-f5q6bwa6ks] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.sp-drop-col[b-f5q6bwa6ks] {
    flex: 0 0 260px;
    max-width: 260px;
}

@media (max-width: 640px) {
    .sp-drop-col[b-f5q6bwa6ks] { flex-basis: 100%; max-width: 100%; }
}

/* ---- Dropzone (Blazor InputFile overlaid, transparent) ---- */
.sp-drop[b-f5q6bwa6ks] {
    position: relative;
    display: block;
    border: 2px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface-alt);
    padding: 24px 16px;
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease);
}

.sp-drop:hover[b-f5q6bwa6ks] {
    border-color: var(--brand-600);
    background: var(--brand-50);
}

/* The native file input fills the zone but is invisible — so both click and
   native drag/drop land on the real input. <InputFile> renders the <input>
   without this component's scope attribute, so ::deep is required. */
.sp-drop[b-f5q6bwa6ks]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.sp-drop-inner[b-f5q6bwa6ks] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    pointer-events: none;
    color: var(--brand-600);
}

.sp-drop-title[b-f5q6bwa6ks] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ds-text);
}

.sp-drop-sub[b-f5q6bwa6ks] {
    font-size: 0.75rem;
    color: var(--ds-text-muted);
}

.sp-progress[b-f5q6bwa6ks] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    margin-top: 10px;
}

/* ---- Photo grid (right column) ---- */
.photos-grid[b-f5q6bwa6ks] {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
}

.sp-empty[b-f5q6bwa6ks] {
    width: 100%;
    padding: 28px 12px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    background: var(--ds-surface-alt);
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.photo-tile[b-f5q6bwa6ks] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    flex: 0 0 auto;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.photo-tile img[b-f5q6bwa6ks] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-del[b-f5q6bwa6ks] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    line-height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.photo-tile:hover .photo-del[b-f5q6bwa6ks] { opacity: 1; }
.photo-del:hover[b-f5q6bwa6ks] { background: #b91c1c; }

.photo-mv[b-f5q6bwa6ks] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 36px;
    border: none;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.photo-tile:hover .photo-mv[b-f5q6bwa6ks] { opacity: 1; }
.photo-mv:hover[b-f5q6bwa6ks] { background: #0f172a; }

.photo-mv-left[b-f5q6bwa6ks] {
    left: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.photo-mv-right[b-f5q6bwa6ks] {
    right: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.photo-badge[b-f5q6bwa6ks] {
    position: absolute;
    left: 4px;
    bottom: 4px;
    background: #0f172a;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}
/* /Components/Pages/Stores/ConvertToVirtualStoreDialog.razor.rz.scp.css */
/* ConvertToVirtualStoreDialog — design-token styling. Rendered inside the FluentUI
   DialogService chrome (header + dismiss come from the dialog host); this file only
   styles the body + footer content. */

.cvd-body[b-hma1bw4wza] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-4);
}

.cvd-confirm[b-hma1bw4wza] {
    margin: 0;
    font-size: var(--body-size);
    line-height: var(--leading-normal);
    color: var(--fg-1);
}

.cvd-req[b-hma1bw4wza] {
    color: var(--danger-600);
}

.cvd-note[b-hma1bw4wza] {
    margin: 0;
    font-size: var(--small-size, 0.875rem);
    line-height: var(--leading-normal);
    color: var(--fg-hint);
}

/* Single-option case: the resolved parent store rendered as a read-only card. */
.cvd-parent[b-hma1bw4wza] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.cvd-parent-icon[b-hma1bw4wza]  svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.cvd-parent-text[b-hma1bw4wza] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.cvd-parent-name[b-hma1bw4wza] {
    font-weight: 600;
    font-size: var(--body-size);
    color: var(--fg-1);
}

.cvd-parent-id[b-hma1bw4wza] {
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
}

.cvd-footer[b-hma1bw4wza] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}
/* /Components/Pages/Stores/CreateStoreDialog.razor.rz.scp.css */
.cs-form[b-stsd9povmh] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---- Stepper ---- */
.cs-stepper[b-stsd9povmh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.cs-step[b-stsd9povmh] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

.cs-step:not(:last-child)[b-stsd9povmh]::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--border-1);
    border-radius: 1px;
}

.cs-step-dot[b-stsd9povmh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--fg-2);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--border-1);
}

.cs-step-label[b-stsd9povmh] {
    font-size: 0.8125rem;
    color: var(--fg-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-step.is-active .cs-step-dot[b-stsd9povmh] {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.cs-step.is-active .cs-step-label[b-stsd9povmh] {
    color: var(--fg-1);
    font-weight: 600;
}

.cs-step.is-done .cs-step-dot[b-stsd9povmh] {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-soft);
}

.cs-step.is-done[b-stsd9povmh]::after {
    background: var(--accent);
}

/* ---- Panels ---- */
.cs-panel[b-stsd9povmh] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cs-heading[b-stsd9povmh] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg-1);
}

.cs-subheading[b-stsd9povmh] {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-2);
}

.cs-muted[b-stsd9povmh] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--fg-2);
}

.cs-row[b-stsd9povmh] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cs-row > .ds-field[b-stsd9povmh] {
    flex: 1 1 200px;
    min-width: 0;
}

/* ---- Switch row ---- */
.cs-switch-row[b-stsd9povmh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cs-switch-label[b-stsd9povmh] {
    margin: 0;
}

/* ---- Virtual store hint ---- */
.cs-hint[b-stsd9povmh] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--fg-1);
}

.cs-hint-icon[b-stsd9povmh] {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--accent);
}

.cs-hint-icon svg[b-stsd9povmh] {
    width: 16px;
    height: 16px;
}

.cs-warn[b-stsd9povmh] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--danger);
}

/* ---- Map ---- */
.cs-map-wrap[b-stsd9povmh] {
    position: relative;
    width: 100%;
    height: 350px;
}

.cs-map-search[b-stsd9povmh] {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    gap: 8px;
}

.cs-map-input[b-stsd9povmh] {
    flex: 1;
    box-shadow: var(--shadow-card);
}

.cs-map-btn[b-stsd9povmh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    flex-shrink: 0;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-card);
}

.cs-map-btn:hover[b-stsd9povmh] {
    filter: brightness(0.95);
}

.cs-map-btn:focus-visible[b-stsd9povmh] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Payment methods ---- */
.cs-pm-grid[b-stsd9povmh] {
    display: grid;
    /* Kare kutucuklar, satır başına 4 yöntem. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.cs-pm-card[b-stsd9povmh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px 10px;
    border: 1.5px solid var(--border-1);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    font: inherit;
}

.cs-pm-card:hover[b-stsd9povmh] {
    border-color: var(--accent);
    color: var(--accent);
}

.cs-pm-card.is-selected[b-stsd9povmh] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

.cs-pm-card.is-selected .cs-pm-name[b-stsd9povmh] {
    color: var(--accent);
}

.cs-pm-card:focus-visible[b-stsd9povmh] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cs-pm-name[b-stsd9povmh] {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fg-1);
}

@media (max-width: 720px) {
    .cs-pm-grid[b-stsd9povmh] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .cs-row > .ds-field[b-stsd9povmh] { flex: 1 1 100%; }
    .cs-pm-grid[b-stsd9povmh] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-step-label[b-stsd9povmh] { display: none; }
}
/* /Components/Pages/Stores/CreateVirtualStoreDialog.razor.rz.scp.css */
.cvs-wizard[b-bwf3onh5q9] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ===== Single-store hint ===== */
.cvs-hint[b-bwf3onh5q9] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 8px);
    background: var(--accent-soft, #eff6ff);
    border: 1px solid rgba(3, 106, 196, 0.18);
}

.cvs-hint-icon[b-bwf3onh5q9] {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 1px;
    color: var(--accent, #036ac4);
}

.cvs-hint-body[b-bwf3onh5q9] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.cvs-hint-text[b-bwf3onh5q9] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--fg-2, #334155);
}

.cvs-hint-action[b-bwf3onh5q9] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--accent, #036ac4);
    background: #fff;
    color: var(--accent, #036ac4);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.cvs-hint-action:hover[b-bwf3onh5q9] {
    background: var(--accent, #036ac4);
    color: #fff;
}

.cvs-hint-action:focus-visible[b-bwf3onh5q9] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
}

/* ===== Stepper ===== */
.cvs-steps[b-bwf3onh5q9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cvs-step[b-bwf3onh5q9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    opacity: 0.55;
}

.cvs-step.is-active[b-bwf3onh5q9],
.cvs-step.is-done[b-bwf3onh5q9] {
    opacity: 1;
}

.cvs-step-dot[b-bwf3onh5q9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-subtle, #f1f5f9);
    color: var(--fg-2, #334155);
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.cvs-step.is-active .cvs-step-dot[b-bwf3onh5q9] {
    background: var(--accent, #036ac4);
    color: #fff;
}

.cvs-step-label[b-bwf3onh5q9] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fg-1, #0f172a);
}

/* ===== Panes ===== */
.cvs-pane[b-bwf3onh5q9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cvs-pane-title[b-bwf3onh5q9] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
}

.cvs-desc[b-bwf3onh5q9] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--fg-2, #334155);
}

.cvs-empty[b-bwf3onh5q9] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--fg-2, #334155);
}

.cvs-req[b-bwf3onh5q9] {
    color: var(--danger, #ef4444);
    margin-left: 2px;
}

/* ===== Parent store chip ===== */
.cvs-parent[b-bwf3onh5q9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: var(--radius-md, 8px);
}

.cvs-parent-icon[b-bwf3onh5q9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--accent, #036ac4);
    flex-shrink: 0;
}

.cvs-parent-text[b-bwf3onh5q9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cvs-parent-label[b-bwf3onh5q9] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fg-2, #334155);
}

.cvs-parent-name[b-bwf3onh5q9] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fg-1, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Tabela list ===== */
.cvs-list[b-bwf3onh5q9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cvs-row[b-bwf3onh5q9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cvs-row-num[b-bwf3onh5q9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-subtle, #f1f5f9);
    color: var(--fg-2, #334155);
    font-size: 0.75rem;
    font-weight: 700;
}

.cvs-row-field[b-bwf3onh5q9] { min-width: 0; }
.cvs-row-field--parent[b-bwf3onh5q9] { flex: 0 0 40%; }
.cvs-row-field--name[b-bwf3onh5q9] { flex: 1; }
.cvs-row-field .ds-select[b-bwf3onh5q9],
.cvs-row-field .ds-input[b-bwf3onh5q9] { width: 100%; }

.cvs-row-remove[b-bwf3onh5q9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    background: #fff;
    color: var(--fg-2, #64748b);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cvs-row-remove:hover:not(:disabled)[b-bwf3onh5q9] {
    color: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
    background: #fef2f2;
}
.cvs-row-remove:disabled[b-bwf3onh5q9] { opacity: 0.4; cursor: not-allowed; }
.cvs-row-remove:focus-visible[b-bwf3onh5q9] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }

/* ===== Add row ===== */
.cvs-add[b-bwf3onh5q9] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 8px 14px;
    border: 1px dashed var(--accent, #036ac4);
    border-radius: var(--radius-md, 8px);
    background: var(--accent-soft, #eff6ff);
    color: var(--accent, #036ac4);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cvs-add:hover[b-bwf3onh5q9] { background: rgba(3, 106, 196, 0.14); }
.cvs-add:focus-visible[b-bwf3onh5q9] { outline: 2px solid var(--accent, #036ac4); outline-offset: 2px; }

.cvs-after-hint[b-bwf3onh5q9] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--fg-2, #64748b);
}

/* ===== Preview ===== */
.cvs-preview-list[b-bwf3onh5q9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cvs-preview-item[b-bwf3onh5q9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: var(--radius-md, 8px);
}

.cvs-preview-logo[b-bwf3onh5q9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--accent, #036ac4);
    flex-shrink: 0;
}

.cvs-preview-name[b-bwf3onh5q9] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-1, #0f172a);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cvs-preview-parent[b-bwf3onh5q9] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fg-2, #64748b);
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .cvs-row[b-bwf3onh5q9] { flex-wrap: wrap; }
    .cvs-row-field--parent[b-bwf3onh5q9] { flex: 1 1 100%; }
}
/* /Components/Pages/Stores/DeliveryZonePricingTab.razor.rz.scp.css */
/* DeliveryZonePricingTab — design-token styling. Three-panel layout: zone list,
   mahalle toggles, H3 hexagon map. Zone colour literals are user data (they are
   round-tripped to the map JS), so they stay inline on the elements. */

.dz-container[b-578726m45p] {
    display: flex;
    height: 100%;
    min-height: 600px;
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

/* Panel 1: Zones */
.dz-zones-panel[b-578726m45p] {
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-right: 1px solid var(--border);
    overflow-y: auto;
}

/* Panel 2: Districts */
.dz-districts-panel[b-578726m45p] {
    width: 320px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-right: 1px solid var(--border);
    overflow-y: auto;
}

.dz-panel-header[b-578726m45p] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dz-panel-title[b-578726m45p] {
    margin: 0;
    font-size: var(--h4-size);
    font-weight: 600;
    color: var(--fg-1);
}

.dz-actions[b-578726m45p] {
    display: flex;
    gap: var(--space-2);
}

.dz-search-box[b-578726m45p] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
}

.dz-muted[b-578726m45p] {
    margin: 0;
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
}

.dz-no-zone-hint[b-578726m45p],
.dz-no-results[b-578726m45p] {
    padding: var(--space-4);
    text-align: center;
}

.dz-loading[b-578726m45p] {
    padding: var(--space-6) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

/* Town group header */
.dz-town-header[b-578726m45p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border);
    user-select: none;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.dz-town-header:hover[b-578726m45p] {
    background: var(--bg-subtle);
}

.dz-town-name[b-578726m45p] {
    font-weight: 600;
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-1);
}

.dz-town-meta[b-578726m45p] {
    font-weight: 400;
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    margin-left: var(--space-1);
}

.dz-town-switch[b-578726m45p] {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.dz-town-loading-row[b-578726m45p] {
    display: flex;
    justify-content: center;
    padding: var(--space-3);
}

.dz-chevron[b-578726m45p] {
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    flex-shrink: 0;
}

/* District list */
.dz-district-list[b-578726m45p] {
    flex: 1;
    overflow-y: auto;
}

.dz-district-item[b-578726m45p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-5);
    transition: background var(--dur-fast) var(--ease-out);
}

.dz-district-item:hover[b-578726m45p] {
    background: var(--bg-subtle);
}

.dz-district-item.assigned-other[b-578726m45p] {
    opacity: 0.55;
}

.dz-district-info[b-578726m45p] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.dz-district-name[b-578726m45p] {
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dz-cell-count[b-578726m45p] {
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    flex-shrink: 0;
}

/* Colour here is the zone's own colour, set inline from user data. */
.dz-assigned-label[b-578726m45p] {
    font-size: var(--xs-size, 0.75rem);
    font-weight: 600;
    flex-shrink: 0;
    padding: 0 var(--space-1);
    border-radius: var(--radius-xs);
    background: var(--bg-muted);
}

/* Zone list */
.dz-zone-list[b-578726m45p] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dz-zone-card[b-578726m45p] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}

.dz-zone-card:hover[b-578726m45p] {
    background: var(--bg-subtle);
}

.dz-zone-card.selected[b-578726m45p] {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent);
}

.dz-zone-card.inactive[b-578726m45p] {
    opacity: 0.5;
}

.dz-zone-header[b-578726m45p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Swatch — background colour is the zone's own colour, set inline. */
.dz-zone-color[b-578726m45p] {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.dz-zone-info[b-578726m45p] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dz-zone-name[b-578726m45p] {
    font-weight: 600;
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dz-zone-cells[b-578726m45p] {
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
}

.dz-zone-actions[b-578726m45p] {
    display: flex;
    gap: var(--space-1);
}

/* Icon-only zone row actions (edit / delete). */
.dz-icon-btn[b-578726m45p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-3);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.dz-icon-btn:hover[b-578726m45p] {
    background: var(--bg-muted);
    color: var(--fg-1);
}

.dz-icon-btn--danger:hover[b-578726m45p] {
    color: var(--danger-600);
}

.dz-icon-btn:focus-visible[b-578726m45p] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.dz-icon-btn[b-578726m45p]  svg:not([fill="none"]),
.dz-icon-btn[b-578726m45p]  svg:not([fill="none"]) path {
    fill: currentColor;
}

.dz-icon-btn[b-578726m45p]  svg[fill="none"] {
    stroke: currentColor;
}

.dz-zone-details[b-578726m45p] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--xs-size, 0.75rem);
    color: var(--fg-hint);
    flex-wrap: wrap;
}

/* Edit panel */
.dz-edit-panel[b-578726m45p] {
    padding: var(--space-3);
    border-top: 2px solid var(--accent);
    background: var(--bg-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dz-edit-title[b-578726m45p] {
    margin: 0;
    font-size: var(--body-size);
    font-weight: 600;
    color: var(--fg-1);
}

.dz-edit-fields[b-578726m45p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dz-edit-row[b-578726m45p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.dz-color-field[b-578726m45p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.dz-color-field .ds-label[b-578726m45p] {
    margin: 0;
    min-width: 40px;
}

.dz-color-picker[b-578726m45p] {
    width: 50px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    padding: 2px;
    background: var(--bg);
}

.dz-color-picker:focus-visible[b-578726m45p] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.dz-check-row[b-578726m45p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-1);
    cursor: pointer;
}

.dz-edit-actions[b-578726m45p] {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* Map area */
.dz-map-area[b-578726m45p] {
    flex: 1;
    position: relative;
    min-width: 0;
}

.dz-map[b-578726m45p] {
    width: 100%;
    height: 100%;
    min-height: 600px;
}

.dz-map-loading[b-578726m45p] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

/* Empty-state explainer shown when no zone is configured at all. */
.dz-empty-zones-info[b-578726m45p] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    margin: var(--space-3) var(--space-2);
    background: var(--status-info-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--status-info-fg);
    font-size: var(--small-size, 0.875rem);
    line-height: var(--leading-normal);
}

.dz-empty-zones-info strong[b-578726m45p] {
    display: block;
    margin-bottom: var(--space-1);
}

.dz-empty-zones-icon[b-578726m45p] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--accent);
}

.dz-empty-zones-icon[b-578726m45p]  svg {
    width: 20px;
    height: 20px;
}
/* /Components/Pages/Stores/StoreDetails.razor.rz.scp.css */
/* =====================================================================
   StoreDetails — design-system (FluentUI-free) styles.
   Tokens: --ds-* / --brand-* (see app.css :root). Brand blue #036ac4.
   ===================================================================== */

.sd-page[b-3jgk4x3f4y] {
    gap: 18px;
}

/* ---- Header ---- */
.sd-header[b-3jgk4x3f4y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sd-header-main[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sd-title-row[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sd-title[b-3jgk4x3f4y] {
    margin: 0;
    font-family: var(--ds-font-display, var(--ds-font-ui));
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ds-text);
    line-height: 1.2;
}

.sd-subtitle[b-3jgk4x3f4y] {
    font-size: 0.875rem;
    color: var(--ds-text-muted);
}

/* ---- Virtual-store banner ---- */
.sd-banner[b-3jgk4x3f4y] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--ds-radius-md);
    background: var(--brand-50);
    border: 1px solid var(--brand-100, rgba(3, 106, 196, 0.18));
    color: var(--brand-700);
    font-size: 0.875rem;
}

.sd-banner-ico[b-3jgk4x3f4y] { display: inline-flex; flex-shrink: 0; color: var(--brand-600); }
.sd-banner a[b-3jgk4x3f4y] { color: var(--brand-700); font-weight: 600; text-decoration: underline; }

/* ---- Tab strip ---- */
.sd-tabs[b-3jgk4x3f4y] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--ds-border);
}

.sd-tab[b-3jgk4x3f4y] {
    appearance: none;
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
    white-space: nowrap;
}

.sd-tab:hover[b-3jgk4x3f4y] { color: var(--ds-text); }

.sd-tab.is-active[b-3jgk4x3f4y] {
    color: var(--brand-600);
    border-bottom-color: var(--brand-600);
}

/* ---- Panels ---- */
.sd-panel[b-3jgk4x3f4y] { padding-top: 4px; }
.sd-panel[hidden][b-3jgk4x3f4y] { display: none; }

/* ---- Card ---- */
.sd-card[b-3jgk4x3f4y] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
    overflow: hidden;
}

.sd-card--narrow[b-3jgk4x3f4y] { max-width: 720px; }

.sd-card-head[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ds-border);
}

.sd-card-head--split[b-3jgk4x3f4y] { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.sd-card-head-left[b-3jgk4x3f4y] { display: flex; align-items: center; gap: 10px; }

.sd-card-ico[b-3jgk4x3f4y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ds-radius-sm);
    background: var(--brand-50);
    color: var(--brand-600);
    flex-shrink: 0;
}

.sd-card-title[b-3jgk4x3f4y] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ds-text);
}

.sd-card-body[b-3jgk4x3f4y] { padding: 18px; }

.sd-card-foot[b-3jgk4x3f4y] {
    padding: 0 18px 18px;
}

.sd-card-foot--inline[b-3jgk4x3f4y] {
    padding: 0;
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
}

.sd-head-actions[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Vertical stack of cards (settings tab) */
.sd-stack[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Toggle row (label + helper on the left, switch on the right) */
.sd-toggle-row[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sd-toggle-text[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Read-only dispatch controls (virtual stores inherit them from the physical parent). */
.ds-switch:disabled[b-3jgk4x3f4y] {
    opacity: .5;
    cursor: not-allowed;
}

/* Assignment-method segmented control (Optimize Rotalama / Sıralı Atama). */
.sd-seg[b-3jgk4x3f4y] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    max-width: 100%;
}

.sd-seg-btn[b-3jgk4x3f4y] {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 6px 16px;
    border-radius: var(--ds-radius-sm);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.sd-seg-btn:hover:not(:disabled):not(.is-active)[b-3jgk4x3f4y] {
    color: var(--ds-text);
}

.sd-seg-btn.is-active[b-3jgk4x3f4y] {
    background: var(--ds-surface);
    color: var(--accent);
    box-shadow: var(--ds-shadow-1);
}

.sd-seg-btn:focus-visible[b-3jgk4x3f4y] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sd-seg-btn:disabled[b-3jgk4x3f4y] {
    opacity: .5;
    cursor: not-allowed;
}

/* Inherited-from-physical note shown on virtual stores above the dispatch settings. */
.sd-inherit-note[b-3jgk4x3f4y] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--ds-radius-md);
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

.sd-inherit-note-ico[b-3jgk4x3f4y] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--accent);
}

/* Plugin key — discreet, single-line copy control. Kept low-emphasis so it
   doesn't compete with the primary store settings above it. */
.sd-pluginkey[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--fg-2);
}

.sd-pluginkey-label[b-3jgk4x3f4y] {
    font-weight: 500;
}

.sd-pluginkey-value[b-3jgk4x3f4y] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.04em;
    color: var(--fg-1);
}

/* Delivery-zone editor wrapper — caps height so the internal panels scroll
   instead of the whole page growing. */
.sd-dz-wrap[b-3jgk4x3f4y] {
    height: 68vh;
    min-height: 560px;
    overflow: hidden;
}

.sd-dz-wrap > :only-child[b-3jgk4x3f4y] {
    height: 100%;
}

/* ---- Details layout ----
   Two-column grid: the left column stacks the store-info card and the social
   links card; the right column holds the (usually taller) address & settings
   card, spanning all rows. A flexible third row absorbs the height difference
   on the left, so store-info and social stay tightly stacked at the top instead
   of leaving a large empty gap under the store-info card. */
.sd-details-layout[b-3jgk4x3f4y] {
    display: grid;
    grid-template-columns: 7fr 3fr;
    grid-template-rows: auto auto 1fr;
    gap: 20px;
    align-items: start;
}

.sd-card--grow[b-3jgk4x3f4y] { flex: 1 1 460px; min-width: 0; }
.sd-details-side[b-3jgk4x3f4y] { flex: 0 0 460px; max-width: 460px; min-width: 0; }

/* Details tab: store-info (70%) + social on the left, address & settings (30%) right */
.sd-details-main[b-3jgk4x3f4y] { grid-column: 1; grid-row: 1; min-width: 0; }
.sd-social-card[b-3jgk4x3f4y] { grid-column: 1; grid-row: 2; min-width: 0; }
.sd-details-aside[b-3jgk4x3f4y] { grid-column: 2; grid-row: 1 / 4; min-width: 0; }

/* Stack the admin package/delivery fields in the narrow aside column */
.sd-details-aside .sd-grid-2[b-3jgk4x3f4y] { grid-template-columns: 1fr; }

@media (max-width: 1100px) {
    .sd-details-side[b-3jgk4x3f4y] { flex-basis: 100%; max-width: 100%; }
}

/* Below 980px collapse to a single column: store-info, settings, then social. */
@media (max-width: 980px) {
    .sd-details-layout[b-3jgk4x3f4y] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-rows: auto;
    }
    .sd-details-main[b-3jgk4x3f4y],
    .sd-social-card[b-3jgk4x3f4y],
    .sd-details-aside[b-3jgk4x3f4y] {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ---- Form ---- */
.sd-form[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}

.sd-req[b-3jgk4x3f4y] { color: var(--ds-danger); }

.sd-identity-row[b-3jgk4x3f4y] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.sd-identity-fields[b-3jgk4x3f4y] {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Vertical stack of fields inside a 2-column identity grid
   (left: Mağaza Adı + Telefonu, right: İlgili kişi/telefon/e-posta) */
.sd-fieldcol[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sd-toggle-col[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sd-toggle[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 120px;
}

.sd-grid-2[b-3jgk4x3f4y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 560px) {
    .sd-grid-2[b-3jgk4x3f4y] { grid-template-columns: 1fr; }
}

.sd-inline[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sosyal Medya Bağlantıları kartı — placement handled in the Details layout grid above. */
.sd-social-grid[b-3jgk4x3f4y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 720px) {
    .sd-social-grid[b-3jgk4x3f4y] { grid-template-columns: 1fr; }
}

.sd-social-field .ds-label[b-3jgk4x3f4y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sd-social-ico[b-3jgk4x3f4y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.sd-social-ico svg[b-3jgk4x3f4y] { display: block; }

/* Google İşletme field — full-width row below the social grid, with an inline "view" link. */
.sd-google-field[b-3jgk4x3f4y] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.sd-social-ico--google[b-3jgk4x3f4y] { color: inherit; }

.sd-google-row[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sd-google-row .ds-input[b-3jgk4x3f4y] { flex: 1; }

.sd-google-view[b-3jgk4x3f4y] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 14px;
    border: 1px solid var(--border-strong, #d1d5db);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-1, #1f2937);
    text-decoration: none;
    background: var(--bg-subtle, #f9fafb);
    transition: background .15s ease, border-color .15s ease;
}

.sd-google-view:hover[b-3jgk4x3f4y] { background: var(--bg-muted, #f3f4f6); border-color: var(--accent); }

.sd-google-view:focus-visible[b-3jgk4x3f4y] { outline: 2px solid var(--accent); outline-offset: 2px; }

.sd-inline .ds-input[b-3jgk4x3f4y] { flex: 1; }

/* PhoneMaskInput renders a FluentUI <fluent-text-field>; force it to match the
   .ds-input look (40px height, slate border, brand focus) so phone fields line
   up with the rest of the form. ::deep is required because the web component
   is rendered by a child component and lacks this component's scope attribute. */
.sd-phone[b-3jgk4x3f4y]  fluent-text-field {
    width: 100%;
    margin: 0;
}

.sd-phone[b-3jgk4x3f4y]  fluent-text-field::part(label) {
    display: none;
}

.sd-phone[b-3jgk4x3f4y]  fluent-text-field::part(root) {
    height: 40px;
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface-alt);
}

.sd-phone[b-3jgk4x3f4y]  fluent-text-field:focus-within::part(root) {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.12);
}

.sd-phone[b-3jgk4x3f4y]  fluent-text-field::part(control) {
    font-size: 0.875rem;
    color: var(--ds-text);
}

/* ---- Address + map ---- */
.sd-address-row[b-3jgk4x3f4y] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.sd-map-wrap[b-3jgk4x3f4y] {
    flex: 1 1 320px;
    position: relative;
    height: 350px;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    border: 1px solid var(--ds-border);
}

.sd-map-wrap.is-readonly[b-3jgk4x3f4y] { pointer-events: none; opacity: 0.7; }

.sd-map-overlay[b-3jgk4x3f4y] {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    gap: 8px;
}

.sd-map-overlay .ds-input[b-3jgk4x3f4y] {
    flex: 1;
    background: #fff;
    box-shadow: var(--ds-shadow-2);
}

.sd-contact-fields[b-3jgk4x3f4y] {
    flex: 1 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.is-readonly-wrap[b-3jgk4x3f4y] { pointer-events: none; opacity: 0.6; }

/* ---- Working hours ---- */
.sd-wh-list[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
}

.sd-wh-row[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    min-height: 48px;
    width: fit-content;
    min-width: 520px;
}

.sd-wh-day[b-3jgk4x3f4y] {
    font-weight: 600;
    width: 80px;
    font-size: 0.875rem;
    color: var(--ds-text);
}

.sd-time[b-3jgk4x3f4y] { width: 158px; }
.sd-wh-dash[b-3jgk4x3f4y] { color: var(--ds-text-muted); font-weight: 600; }
.sd-wh-closed[b-3jgk4x3f4y] { color: var(--ds-text-muted); font-size: 0.875rem; width: 334px; }

/* ---- Lists (workspaces / couriers) ---- */
.sd-dual[b-3jgk4x3f4y] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.sd-search[b-3jgk4x3f4y] { margin-bottom: 14px; }

.sd-list[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 460px;
    overflow-y: auto;
}

.sd-list-row[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
}

.sd-list-info[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.sd-list-name[b-3jgk4x3f4y] { font-weight: 600; color: var(--ds-text); }
.sd-list-desc[b-3jgk4x3f4y] { color: var(--ds-text-muted); font-size: 0.8125rem; }

.sd-pager[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
}

.sd-pager-info[b-3jgk4x3f4y] { font-size: 0.875rem; color: var(--ds-text-muted); }

.sd-empty[b-3jgk4x3f4y] {
    color: var(--ds-text-muted);
    text-align: center;
    padding: 24px 12px;
    font-size: 0.875rem;
}

/* ---- Picker (payment methods / cuisines) ---- */
.sd-picker[b-3jgk4x3f4y] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.sd-picker-list[b-3jgk4x3f4y] {
    width: 320px;
    flex-shrink: 0;
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.sd-picker-opt[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    border-bottom: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.sd-picker-opt:last-child[b-3jgk4x3f4y] { border-bottom: none; }
.sd-picker-opt:hover[b-3jgk4x3f4y] { background: var(--ds-surface-alt); }
.sd-picker-opt .sd-picker-check[b-3jgk4x3f4y] { display: inline-flex; color: var(--ds-text-subtle); }

.sd-picker-opt.is-selected[b-3jgk4x3f4y] {
    background: var(--brand-600);
    color: #fff;
}

.sd-picker-opt.is-selected .sd-picker-check[b-3jgk4x3f4y] { color: #fff; }

.sd-picker-selected[b-3jgk4x3f4y] {
    width: 260px;
    flex-shrink: 0;
}

.sd-chip-col[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.sd-chip[b-3jgk4x3f4y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: var(--ds-radius-sm);
    font-size: 0.75rem;
    background: var(--ds-surface-alt);
    color: var(--ds-text);
}

.sd-chip svg[b-3jgk4x3f4y] { color: var(--brand-600); flex-shrink: 0; }

/* ---- Option button grid (payment methods / cuisines) ---- */
.sd-optgrid[b-3jgk4x3f4y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.sd-optbtn[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 12px 14px;
    border: 1.5px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease),
                background-color var(--ds-dur-fast) var(--ds-ease),
                box-shadow var(--ds-dur-fast) var(--ds-ease);
}

.sd-optbtn:hover[b-3jgk4x3f4y] { border-color: var(--brand-400); background: var(--ds-surface-alt); }

.sd-optbtn.is-selected[b-3jgk4x3f4y] {
    border-color: var(--brand-600);
    background: var(--brand-50);
    color: var(--brand-700);
    box-shadow: 0 0 0 1px var(--brand-600) inset;
}

.sd-optbtn-check[b-3jgk4x3f4y] {
    display: inline-flex;
    align-items: center;
    color: var(--ds-text-subtle);
    flex-shrink: 0;
}

.sd-optbtn.is-selected .sd-optbtn-check[b-3jgk4x3f4y] { color: var(--brand-600); }
.sd-optbtn-check svg[b-3jgk4x3f4y] { width: 20px; height: 20px; }

.sd-optbtn-label[b-3jgk4x3f4y] { min-width: 0; }

/* ---- Payment methods: single list (toggle + ordering) ---- */
.sd-pm-list[b-3jgk4x3f4y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sd-pm-row[b-3jgk4x3f4y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 1.5px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    transition: border-color var(--ds-dur-fast) var(--ds-ease),
                background-color var(--ds-dur-fast) var(--ds-ease);
}

.sd-pm-row.is-selected[b-3jgk4x3f4y] {
    border-color: var(--brand-600);
    background: var(--brand-50);
    box-shadow: 0 0 0 1px var(--brand-600) inset;
}

.sd-pm-row:not(.is-selected):hover[b-3jgk4x3f4y] { border-color: var(--brand-400); }

.sd-pm-toggle[b-3jgk4x3f4y] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: var(--ds-radius-sm);
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.sd-pm-row.is-selected .sd-pm-toggle[b-3jgk4x3f4y] { color: var(--brand-700); }

.sd-pm-toggle:focus-visible[b-3jgk4x3f4y] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.sd-pm-check[b-3jgk4x3f4y] {
    display: inline-flex;
    align-items: center;
    color: var(--ds-text-subtle);
    flex-shrink: 0;
}

.sd-pm-check svg[b-3jgk4x3f4y] { width: 20px; height: 20px; }
.sd-pm-row.is-selected .sd-pm-check[b-3jgk4x3f4y] { color: var(--brand-600); }

.sd-pm-num[b-3jgk4x3f4y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--brand-600);
    color: #fff;
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
}

.sd-pm-name[b-3jgk4x3f4y] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-pm-actions[b-3jgk4x3f4y] {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.sd-pm-hint[b-3jgk4x3f4y] {
    margin: 12px 2px 0;
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    color: var(--ds-text-subtle);
}

.sd-order-btn[b-3jgk4x3f4y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1.5px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-subtle);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease),
                background-color var(--ds-dur-fast) var(--ds-ease),
                color var(--ds-dur-fast) var(--ds-ease);
}

.sd-order-btn:hover:not(:disabled)[b-3jgk4x3f4y] {
    border-color: var(--brand-400);
    background: var(--ds-surface-alt);
    color: var(--brand-600);
}

.sd-order-btn:focus-visible[b-3jgk4x3f4y] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.sd-order-btn:disabled[b-3jgk4x3f4y] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- Store logo box (kept from original; FluentUI-free) ---- */
.store-logo-container[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.store-logo-box[b-3jgk4x3f4y] {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    transition: border-color var(--ds-dur-fast) var(--ds-ease);
}

.store-logo-box:hover[b-3jgk4x3f4y] { border-color: var(--brand-600); }
.store-logo-box:has(.store-logo-placeholder)[b-3jgk4x3f4y] { border: 2px dashed var(--ds-border-strong); }
.store-logo-box:has(.store-logo-placeholder):hover[b-3jgk4x3f4y] { border-color: var(--brand-600); }

.store-logo-img[b-3jgk4x3f4y] { width: 100%; height: 100%; object-fit: cover; }

.store-logo-overlay[b-3jgk4x3f4y] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--ds-dur-fast) var(--ds-ease);
}

.store-logo-box:hover .store-logo-overlay[b-3jgk4x3f4y] { opacity: 1; }

.store-logo-actions[b-3jgk4x3f4y] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.store-logo-remove-btn[b-3jgk4x3f4y] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--ds-danger);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0;
    transition: transform var(--ds-dur-fast) var(--ds-ease);
}

.store-logo-remove-btn:hover[b-3jgk4x3f4y] { transform: scale(1.1); }

.store-logo-placeholder[b-3jgk4x3f4y] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--ds-text-subtle);
    font-size: 0.75rem;
}

.store-logo-loading[b-3jgk4x3f4y] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Error state ---- */
.sd-error[b-3jgk4x3f4y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 64px 20px;
    color: var(--ds-text-muted);
    text-align: center;
}

.sd-error-ico[b-3jgk4x3f4y] { color: var(--ds-danger); }
.sd-error-title[b-3jgk4x3f4y] { margin: 0; color: var(--ds-text); font-size: 1.25rem; font-weight: 700; }
/* /Components/Pages/Stores/Stores.razor.rz.scp.css */
/* =====================================================================
   Stores page chrome — header + filter toolbar (compact).
   .page-container has no row-gap; each section owns its bottom rhythm.
   ===================================================================== */

/* ---------- Header ---------- */
.stores-hd[b-pyd2u296ux] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.stores-hd__title[b-pyd2u296ux] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.stores-hd__icon[b-pyd2u296ux] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-md);
    background: rgba(3, 106, 196, 0.10);
}

.stores-hd__icon[b-pyd2u296ux]  svg { width: 24px; height: 24px; }

.stores-hd__eyebrow[b-pyd2u296ux] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-subtle);
}

.stores-hd__actions[b-pyd2u296ux] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- Filter toolbar ---------- */
.stores-filters[b-pyd2u296ux] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.stores-filters .ds-select[b-pyd2u296ux] { width: 220px; max-width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .stores-hd__actions[b-pyd2u296ux] { width: 100%; }
    .stores-hd__actions[b-pyd2u296ux]  .ab { flex: 1; }
    .stores-filters .ds-select[b-pyd2u296ux] { width: 100%; }
}
/* /Components/Pages/Stores/StoresGrid.razor.rz.scp.css */
/* Store logo / icon in the Mağaza cell */
.store-logo[b-r8ggi7z7y9] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-sm);
    object-fit: cover;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

.store-logo--ph[b-r8ggi7z7y9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-600);
}

.cell-muted[b-r8ggi7z7y9] { color: var(--ds-text-subtle); }
/* /Components/Pages/Stores/StoreTreeView.razor.rz.scp.css */
/* =====================================================================
   StoreTreeView — firm.admin list of PHYSICAL stores.
   Structured table: shared column grid on header + rows, thin rows,
   useful columns (Mağaza · Adres · Telefon · Platformlar · Durum).
   ===================================================================== */

.stv[b-05hh55nu63] {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-1);
    overflow: hidden;
}

/* Shared column template (header + rows) */
.stv-head[b-05hh55nu63],
.stv-row[b-05hh55nu63] {
    display: grid;
    grid-template-columns:
        minmax(210px, 1.7fr)   /* store */
        minmax(150px, 1.6fr)   /* address */
        minmax(115px, 0.9fr)   /* phone */
        auto                   /* platforms */
        minmax(78px, 0.6fr)    /* status */
        auto;                  /* action */
    align-items: center;
    gap: 16px;
}

/* ---------- Header ---------- */
.stv-head[b-05hh55nu63] {
    padding: 9px 16px;
    background: var(--ds-surface-alt);
    border-bottom: 1px solid var(--ds-border);
}

.stv-hcell[b-05hh55nu63] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ds-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Row ---------- */
.stv-row[b-05hh55nu63] {
    padding: 9px 16px;
    transition: background var(--ds-dur-fast) var(--ds-ease);
}

.stv-row:not(:last-child)[b-05hh55nu63] { border-bottom: 1px solid var(--ds-border-subtle); }
.stv-row:hover[b-05hh55nu63] { background: var(--ds-surface-alt); }

.stv-cell[b-05hh55nu63] { min-width: 0; display: flex; align-items: center; }

/* Store cell */
.stv-cell--store[b-05hh55nu63] { gap: 12px; }

.stv-row__logo[b-05hh55nu63] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-sunken);
    text-decoration: none;
}

/* contain: platform logoları kare değil (ör. Migros Yemek geniş wordmark); kare logolarda fark yok. */
.stv-row__logo img[b-05hh55nu63] { width: 100%; height: 100%; object-fit: contain; }
.stv-row__logo[b-05hh55nu63]  svg { width: 18px; height: 18px; }
.stv-row__logo:focus-visible[b-05hh55nu63] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.stv-row__id[b-05hh55nu63] { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.stv-row__idline[b-05hh55nu63] { display: flex; align-items: center; gap: 8px; min-width: 0; }

.stv-name[b-05hh55nu63] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ds-text);
    text-decoration: none;
}

.stv-name:hover[b-05hh55nu63] { color: var(--brand-600); text-decoration: underline; }
.stv-name:focus-visible[b-05hh55nu63] { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 3px; }

.stv-id[b-05hh55nu63] {
    flex-shrink: 0;
    font-family: var(--ds-font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--ds-text-subtle);
}

.stv-company[b-05hh55nu63] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--ds-text-muted);
}

/* Address / phone text cells */
.stv-ell[b-05hh55nu63] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

.stv-dash[b-05hh55nu63] { color: var(--ds-text-subtle); }

/* Platform logos (inline, no label) */
.stv-cell--platforms[b-05hh55nu63] { gap: 6px; flex-wrap: wrap; }

.stv-pf[b-05hh55nu63] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: var(--ds-surface-sunken);
}

.stv-pf img[b-05hh55nu63] { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }

.stv-pf__ph[b-05hh55nu63] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}

.stv-pf--add[b-05hh55nu63] {
    cursor: pointer;
    transition: background var(--ds-dur-fast) var(--ds-ease);
}

.stv-pf--add img[b-05hh55nu63] {
    filter: grayscale(1);
    opacity: 0.4;
    transition: filter var(--ds-dur-fast) var(--ds-ease),
                opacity var(--ds-dur-fast) var(--ds-ease);
}

.stv-pf--add:hover[b-05hh55nu63] { background: var(--accent-soft); }
.stv-pf--add:hover img[b-05hh55nu63] { filter: none; opacity: 1; }
.stv-pf--add:focus-visible[b-05hh55nu63] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* Status (quiet dot + label) */
.stv-status[b-05hh55nu63] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--ds-text-muted);
    white-space: nowrap;
}

.stv-status[b-05hh55nu63]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stv-status.is-on[b-05hh55nu63]::before { background: var(--ds-success); }
.stv-status.is-off[b-05hh55nu63]::before { background: var(--ds-text-subtle); }

/* Action */
.stv-cell--action[b-05hh55nu63] { justify-content: flex-end; }

.stv-row__details[b-05hh55nu63] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 5px 8px;
    border-radius: var(--ds-radius-sm);
    color: var(--brand-600);
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ds-dur-fast) var(--ds-ease);
}

.stv-row__details[b-05hh55nu63]  svg { width: 14px; height: 14px; }
.stv-row__details:hover[b-05hh55nu63] { background: var(--accent-soft); }
.stv-row__details:focus-visible[b-05hh55nu63] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* ---------- Empty state ---------- */
.stv-empty[b-05hh55nu63] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 24px;
    text-align: center;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.stv-empty__icon[b-05hh55nu63] { line-height: 0; opacity: 0.55; }
.stv-empty__icon[b-05hh55nu63]  svg { width: 30px; height: 30px; }
.stv-empty__title[b-05hh55nu63] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ds-text); }
.stv-empty__text[b-05hh55nu63] { margin: 0; max-width: 420px; font-size: 0.85rem; color: var(--ds-text-muted); }

/* ---------- Responsive: drop columns as width shrinks ---------- */
@media (max-width: 1150px) {
    .stv-head[b-05hh55nu63],
    .stv-row[b-05hh55nu63] {
        grid-template-columns: minmax(200px, 1.7fr) minmax(150px, 1.5fr) auto minmax(78px, 0.6fr) auto;
    }
    .stv-hcell:nth-child(3)[b-05hh55nu63],
    .stv-cell--phone[b-05hh55nu63] { display: none; }
}

@media (max-width: 950px) {
    .stv-head[b-05hh55nu63],
    .stv-row[b-05hh55nu63] {
        grid-template-columns: minmax(190px, 1.6fr) auto minmax(78px, 0.6fr) auto;
    }
    .stv-hcell:nth-child(2)[b-05hh55nu63],
    .stv-cell--addr[b-05hh55nu63] { display: none; }
}

@media (max-width: 760px) {
    .stv-head[b-05hh55nu63] { display: none; }
    .stv-row[b-05hh55nu63] { grid-template-columns: minmax(0, 1fr) auto auto; }
    .stv-cell--status[b-05hh55nu63] { display: none; }
}
/* /Components/Pages/Tabelalar/ConnectFoodPlatformsDialog.razor.rz.scp.css */
.cfp-wizard[b-hvrsmmbhxr] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

/* ---- Stepper ---- */
.cfp-steps[b-hvrsmmbhxr] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    margin: 0;
    padding: 0 0 var(--ds-space-2);
    list-style: none;
    border-bottom: 1px solid var(--ds-border);
}

.cfp-step[b-hvrsmmbhxr] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    color: var(--ds-text-subtle);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cfp-step__dot[b-hvrsmmbhxr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    font-size: 0.75rem;
}

.cfp-step.is-active[b-hvrsmmbhxr] { color: var(--brand-600); }
.cfp-step.is-active .cfp-step__dot[b-hvrsmmbhxr] { border-color: var(--brand-600); color: var(--brand-600); background: var(--brand-50, #eff6ff); }
.cfp-step.is-done[b-hvrsmmbhxr] { color: var(--ds-text-muted); }
.cfp-step.is-done .cfp-step__dot[b-hvrsmmbhxr] { border-color: var(--ds-success); color: var(--ds-success); }

/* ---- Panes ---- */
.cfp-pane[b-hvrsmmbhxr] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}

.cfp-pane__title[b-hvrsmmbhxr] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ds-text);
}

.cfp-desc[b-hvrsmmbhxr] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ds-text-muted);
}

/* ---- Platform picker ---- */
.cfp-platforms[b-hvrsmmbhxr] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.cfp-platform[b-hvrsmmbhxr] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}
.cfp-platform:hover[b-hvrsmmbhxr] {
    border-color: var(--brand-600);
    background: var(--ds-surface-alt);
}
.cfp-platform:focus-visible[b-hvrsmmbhxr] { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.cfp-platform__logo[b-hvrsmmbhxr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 8px;
    background: var(--ds-surface-alt);
    flex-shrink: 0;
}
.cfp-platform__logo img[b-hvrsmmbhxr] { width: 38px; height: 38px; border-radius: 8px; object-fit: contain; }

.cfp-platform__name[b-hvrsmmbhxr] {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-text);
}

.cfp-platform__chev[b-hvrsmmbhxr] { color: var(--ds-text-subtle); display: inline-flex; }

/* ---- Configure head ---- */
.cfp-config__head[b-hvrsmmbhxr] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
}
.cfp-config__logo[b-hvrsmmbhxr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--ds-surface-alt);
    flex-shrink: 0;
}
.cfp-config__logo img[b-hvrsmmbhxr] { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; }
.cfp-config__store[b-hvrsmmbhxr] { font-size: 0.8125rem; color: var(--ds-text-muted); }

/* ---- Empty (all connected) ---- */
.cfp-empty[b-hvrsmmbhxr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-6) var(--ds-space-4);
    text-align: center;
    color: var(--ds-text-muted);
    background: var(--ds-surface-alt);
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-md);
}
.cfp-empty p[b-hvrsmmbhxr] { margin: 0; font-size: 0.9rem; }
/* /Components/Pages/Tabelalar/Tabelalar.razor.rz.scp.css */
/* ===== Header ===== */
.tbl-header[b-tyielur0x1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    /* .page-container has no row-gap — each section owns its own bottom rhythm. */
    margin-bottom: 20px;
}

.tbl-header__title[b-tyielur0x1] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tbl-header__icon[b-tyielur0x1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-md, 8px);
    background: rgba(3, 106, 196, 0.10);
}

.tbl-header__eyebrow[b-tyielur0x1] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-2, #94a3b8);
}

.tbl-header__actions[b-tyielur0x1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Admin.Manage kapsam filtreleri (firma / mağaza) — eylem düğmelerinin solunda. */
.tbl-filter[b-tyielur0x1] {
    min-width: 180px;
    max-width: 240px;
}

/* ===== Info banner ===== */
.tbl-info[b-tyielur0x1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 11px 14px;
    border-radius: var(--radius-lg, 10px);
    background: var(--accent-soft, #eff6ff);
    border: 1px solid rgba(3, 106, 196, 0.18);
}

.tbl-info__icon[b-tyielur0x1] {
    flex-shrink: 0;
    margin-top: 1px;
    line-height: 0;
}

.tbl-info__text[b-tyielur0x1] {
    margin: 0;
    flex: 1;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--fg-2, #334155);
}

.tbl-info__close[b-tyielur0x1] {
    flex-shrink: 0;
    margin: -2px -4px 0 0;
}

/* ===== States ===== */
.tbl-loading[b-tyielur0x1],
.tbl-empty[b-tyielur0x1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--fg-2, #334155);
}

.tbl-empty__icon[b-tyielur0x1] { opacity: 0.5; }

.tbl-empty h3[b-tyielur0x1] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--fg-1, #0f172a);
}

.tbl-empty p[b-tyielur0x1] {
    margin: 0;
    max-width: 460px;
    font-size: 0.875rem;
}

/* ===== Grid ===== */
/* Fill the remaining page height so the table stretches down and scrolls internally
   instead of collapsing to a short box with dead space below it. */
.tbl-grid-wrap[b-tyielur0x1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
/* The AppDataGrid root (.adg) carries the child scope; grow it to fill the wrapper so its
   own .adg-scroll (flex:1; overflow:auto) becomes the scroll container. */
.tbl-grid-wrap[b-tyielur0x1]  .adg {
    flex: 1;
    min-height: 0;
}

.tbl-bulk[b-tyielur0x1] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2, 8px);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Toplu işlem seçimi */
.tbl-selall[b-tyielur0x1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    white-space: nowrap;
    cursor: pointer;
}

.tbl-selall input[b-tyielur0x1],
.tbl-check[b-tyielur0x1] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-600);
    cursor: pointer;
}

.tbl-selall input:focus-visible[b-tyielur0x1],
.tbl-check:focus-visible[b-tyielur0x1] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.tbl-selcount[b-tyielur0x1] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-600);
    white-space: nowrap;
}

/* Kaç platformda sipariş alındığını tek bakışta söyleyen özet rozeti */
.tbl-summary[b-tyielur0x1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    white-space: nowrap;
    cursor: default;
}

.tbl-summary__dot[b-tyielur0x1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tbl-summary__dot.is-on[b-tyielur0x1] { background: var(--ds-success, #16a34a); }
.tbl-summary__dot.is-off[b-tyielur0x1] { background: var(--ds-danger, #dc2626); }

/* Toplu eylemlerin ne yaptığını açıklayan alt satır */
.tbl-bulk__hint[b-tyielur0x1] {
    flex-basis: 100%;
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ds-text-subtle);
    text-align: right;
}

/* Right-align the bulk-action band within the toolbar.
   NOTE: anchor ::deep on .tbl-grid-wrap (which carries THIS component's isolation scope),
   not .tbl-grid — that class sits on AppDataGrid's own root, so it has the child's scope
   and a `.tbl-grid ::deep` rule never matches. */
.tbl-grid-wrap[b-tyielur0x1]  .adg-toolbar-left {
    flex: 1;
    justify-content: flex-end;
}

/* Toolbar buttons sat flush against the grid edge (global .adg-toolbar = 0 top / 2px side).
   Align them with the cell padding (12px) and give the bulk-action band clear breathing
   room above (away from the info banner) and below (away from the grid header). */
.tbl-grid-wrap[b-tyielur0x1]  .adg-toolbar {
    padding-left: var(--ds-space-3, 12px);
    padding-right: var(--ds-space-3, 12px);
    padding-top: 4px;
    padding-bottom: 16px;
}

/* Compact cells — anchor ::deep on .tbl-grid-wrap (which carries THIS component's scope);
   .tbl-grid sits on AppDataGrid's own root and never matches from here. */
.tbl-grid-wrap[b-tyielur0x1]  .adg-cell {
    padding-left: var(--ds-space-3, 12px);
    padding-right: var(--ds-space-3, 12px);
}
.tbl-grid-wrap[b-tyielur0x1]  .adg-row--header > .adg-th { height: 40px; }
.tbl-grid-wrap[b-tyielur0x1]  .adg-row > .adg-td {
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Platform cell — logo top-aligned, platform name over store name */
.tbl-plat[b-tyielur0x1] {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-2, 8px);
    min-width: 0;
}
.tbl-plat__logo[b-tyielur0x1] {
    width: 26px; height: 26px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--ds-surface-alt, #f8fafc);
}
.tbl-plat__logo--ph[b-tyielur0x1] { background: var(--ds-surface-sunken, #f1f5f9); }
.tbl-plat__logo--tabela[b-tyielur0x1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft, #eff6ff);
    color: var(--accent, #036ac4);
}
.tbl-plat__logo--tabela[b-tyielur0x1]  svg { width: 18px; height: 18px; }
.tbl-plat__meta[b-tyielur0x1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.tbl-plat__name[b-tyielur0x1] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.tbl-plat__store[b-tyielur0x1] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--ds-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl-plat__store--muted[b-tyielur0x1] { font-style: italic; color: var(--ds-text-subtle, #94a3b8); }

/* Status cell */
.tbl-status[b-tyielur0x1] {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2, 8px);
}
.tbl-status__val[b-tyielur0x1] {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 44px;
}
.tbl-status__val.is-on[b-tyielur0x1] { color: var(--ds-success, #16a34a); }
.tbl-status__val.is-off[b-tyielur0x1] { color: var(--ds-text-subtle, #94a3b8); }
.tbl-status__dash[b-tyielur0x1] { color: var(--ds-text-subtle, #94a3b8); }

/* Inline automation column — info + three toggles, all on one horizontal row */
.tbl-auto[b-tyielur0x1] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    width: 100%;
    padding: 2px 0;
}
.tbl-auto__grid[b-tyielur0x1] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}
.tbl-auto__cell[b-tyielur0x1] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.tbl-auto__caption[b-tyielur0x1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-muted, #94a3b8);
}
/* ⓘ açıklayıcısı ortak AutomationHelpButton bileşenine taşındı (hover balonu kırpılıyordu). */
.tbl-auto__label[b-tyielur0x1] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted, #475569);
    white-space: nowrap;
    cursor: help;
}
.tbl-auto__min[b-tyielur0x1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.tbl-auto__minput[b-tyielur0x1] {
    width: 48px;
    height: 24px;
    text-align: right;
    padding: 0 5px;
}
.tbl-auto__suffix[b-tyielur0x1] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
}

/* Actions: labeled buttons on a single row */
.tbl-acts[b-tyielur0x1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
}
/* "İşlemler" dropdown trigger içeriği (ikon + etiket) hizalaması */
.tbl-acts-trigger[b-tyielur0x1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tbl-act-lbl[b-tyielur0x1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #334155);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.tbl-act-lbl[b-tyielur0x1]  svg { width: 16px; height: 16px; }
.tbl-act-lbl:hover[b-tyielur0x1] {
    border-color: var(--brand-600, #036ac4);
    color: var(--brand-600, #036ac4);
    background: var(--ds-surface-alt, #f8fafc);
}
.tbl-act-lbl:focus-visible[b-tyielur0x1] { outline: 2px solid var(--brand-600, #036ac4); outline-offset: 2px; }
.tbl-act-lbl--busy[b-tyielur0x1] { color: var(--ds-warning, #b7791f); }
.tbl-act-lbl--busy[b-tyielur0x1]  svg { color: var(--ds-warning, #b7791f); }
.tbl-act-lbl--busy:hover[b-tyielur0x1] { color: var(--ds-warning, #b7791f); border-color: var(--ds-warning, #b7791f); background: #fffbeb; }

/* Switch styling is inherited from the global .ds-switch in app.css — shared
   with the Menus page so both look identical. Do not redefine it here. */

/* ===== Responsive ===== */
@media (max-width: 700px) {
    .tbl-header[b-tyielur0x1] { align-items: stretch; }
    .tbl-header__actions[b-tyielur0x1] { width: 100%; }
}
/* /Components/Pages/TableManagement/Dialogs/CreateFloorModal.razor.rz.scp.css */
.cfm-grid[b-6ngz1s2u6k] {
    display: flex;
    gap: 12px;
}

.cfm-num[b-6ngz1s2u6k] { flex: 0 0 90px; }
.cfm-name[b-6ngz1s2u6k] { flex: 1 1 auto; }
/* /Components/Pages/TableManagement/Dialogs/CreateTableModal.razor.rz.scp.css */
.ctm-form[b-jnrvumkhqp] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ctm-row[b-jnrvumkhqp] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.ctm-row > .ds-field[b-jnrvumkhqp] { flex: 1 1 0; min-width: 0; }
.ctm-narrow[b-jnrvumkhqp] { flex: 0 0 120px !important; }

/* Mode segment — Tek Masa / Toplu Masa. Full-width pill with a sliding active state. */
.ctm-seg[b-jnrvumkhqp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--ds-surface-alt, #f1f5f9);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
}

.ctm-seg-btn[b-jnrvumkhqp] {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm, 8px);
    padding: 9px 12px;
    background: transparent;
    color: var(--ds-text-muted, #64748b);
    font-family: var(--ds-font-ui, inherit);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.ctm-seg-btn:hover[b-jnrvumkhqp] {
    color: var(--ds-text, #0f172a);
}

.ctm-seg-btn.is-active[b-jnrvumkhqp] {
    background: var(--ds-surface, #fff);
    color: var(--brand-600, #036ac4);
    box-shadow: var(--ds-shadow-1, 0 1px 3px rgba(15, 23, 42, 0.1));
}

.ctm-seg-btn:focus-visible[b-jnrvumkhqp] {
    outline: 2px solid var(--brand-600, #036ac4);
    outline-offset: 2px;
}

.ds-help[b-jnrvumkhqp] { margin: 0; }

@media (max-width: 540px) {
    .ctm-row[b-jnrvumkhqp] { flex-direction: column; align-items: stretch; }
    .ctm-narrow[b-jnrvumkhqp] { flex: 1 1 auto !important; }
}
/* /Components/Pages/TableManagement/Dialogs/CreateTableReservationModal.razor.rz.scp.css */
.ctr-form[b-w5pwh9zpvx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ctr-section[b-w5pwh9zpvx] {
    margin: 6px 0 0;
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted);
}

/* First section has no top divider gap */
.ctr-section:first-child[b-w5pwh9zpvx] { margin-top: 0; }

/* Sections after the first get a hairline separator above them */
.ctr-section:not(:first-child)[b-w5pwh9zpvx] {
    padding-top: 14px;
    border-top: 1px solid var(--ds-border);
}

.ctr-row[b-w5pwh9zpvx] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ctr-row > .ds-field[b-w5pwh9zpvx] {
    flex: 1 1 200px;
    min-width: 0;
}

.ctr-row > .ctr-narrow[b-w5pwh9zpvx] {
    flex: 0 1 160px;
}

@media (max-width: 480px) {
    .ctr-row > .ds-field[b-w5pwh9zpvx],
    .ctr-row > .ctr-narrow[b-w5pwh9zpvx] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/TableManagement/Dialogs/EditTableModal.razor.rz.scp.css */
.etm-form[b-4h7tswajun] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.etm-row[b-4h7tswajun] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.etm-row > .ds-field[b-4h7tswajun] { flex: 1 1 0; min-width: 0; }
.etm-narrow[b-4h7tswajun] { flex: 0 0 120px !important; }

.etm-check[b-4h7tswajun] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-family: var(--ds-font-ui, inherit);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.etm-loading[b-4h7tswajun] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--ds-text-muted, #64748b);
    font-size: 0.875rem;
}

@media (max-width: 540px) {
    .etm-row[b-4h7tswajun] { flex-direction: column; align-items: stretch; }
    .etm-narrow[b-4h7tswajun] { flex: 1 1 auto !important; }
}
/* /Components/Pages/TableManagement/Dialogs/FloorManagementModal.razor.rz.scp.css */
.fmm-body[b-nfi5w0j5vw] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fmm-list[b-nfi5w0j5vw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fmm-row[b-nfi5w0j5vw] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding: 12px;
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
}

.fmm-row--new[b-nfi5w0j5vw] {
    background: var(--brand-50, #eef6fd);
    border-color: var(--brand-600, #036ac4);
}

.fmm-num[b-nfi5w0j5vw] { flex: 0 0 90px; }
.fmm-name[b-nfi5w0j5vw] { flex: 1 1 auto; min-width: 0; }

.fmm-row__acts[b-nfi5w0j5vw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-bottom: 1px;
}

.fmm-confirm[b-nfi5w0j5vw] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-danger, #dc2626);
    white-space: nowrap;
}

.fmm-del[b-nfi5w0j5vw] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ds-border, #e2e8f0);
    background: var(--ds-surface, #fff);
    color: var(--ds-text-muted, #64748b);
    border-radius: var(--ds-radius-sm, 10px);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.fmm-del:hover[b-nfi5w0j5vw] {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.30);
    color: var(--ds-danger, #dc2626);
}

.fmm-del svg[b-nfi5w0j5vw] { width: 16px; height: 16px; }

.fmm-empty[b-nfi5w0j5vw] {
    margin: 0;
    padding: 16px 0;
    text-align: center;
    color: var(--ds-text-muted, #64748b);
    font-size: 0.875rem;
}

@media (max-width: 560px) {
    .fmm-row[b-nfi5w0j5vw] { flex-wrap: wrap; }
    .fmm-row__acts[b-nfi5w0j5vw] { width: 100%; justify-content: flex-end; }
}
/* /Components/Pages/TableManagement/TableReservations.razor.rz.scp.css */
/* ===== Reservations page header ===== */
.trv-head[b-3fyme60709] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.trv-title[b-3fyme60709] {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ds-text, #0f172a);
}

.trv-sub[b-3fyme60709] {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--ds-text-muted, #64748b);
}

/* ===== Filter bar ===== */
.trv-filters[b-3fyme60709] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 16px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 14px);
}

.trv-filters > .ds-field[b-3fyme60709] {
    flex: 0 1 200px;
    min-width: 0;
}

.trv-filters > .trv-grow[b-3fyme60709] {
    flex: 1 1 240px;
}

/* ===== List card ===== */
.trv-card[b-3fyme60709] {
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 14px);
    overflow: hidden;
}

/* ===== Loading / empty states ===== */
.trv-state[b-3fyme60709] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 16px;
    color: var(--ds-text-muted, #64748b);
    font-size: 0.9rem;
    text-align: center;
}

.trv-state svg[b-3fyme60709] { color: var(--ds-text-subtle, #94a3b8); }
.trv-state p[b-3fyme60709] { margin: 0; }


/* ===== Table ===== */
.trv-table-wrap[b-3fyme60709] {
    width: 100%;
    overflow-x: auto;
}

.trv-table[b-3fyme60709] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
}

.trv-table thead th[b-3fyme60709] {
    position: sticky;
    top: 0;
    text-align: left;
    padding: 12px 16px;
    background: var(--ds-surface-sunken, #f8fafc);
    color: var(--ds-text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ds-border, #e2e8f0);
    white-space: nowrap;
}

.trv-table tbody td[b-3fyme60709] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ds-border, #eef2f6);
    color: var(--ds-text, #0f172a);
    vertical-align: middle;
}

.trv-table tbody tr:last-child td[b-3fyme60709] { border-bottom: none; }
.trv-table tbody tr:hover[b-3fyme60709] { background: var(--ds-surface-alt, #f8fafc); }

.trv-center[b-3fyme60709] { text-align: center; }
.trv-right[b-3fyme60709] { text-align: right; }

.trv-cust[b-3fyme60709] {
    font-weight: 600;
    color: var(--ds-text, #0f172a);
}

.trv-cust-id[b-3fyme60709] {
    font-size: 0.75rem;
    color: var(--ds-text-muted, #64748b);
}

/* ===== Row actions ===== */
.trv-actions[b-3fyme60709] {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
}

.trv-icon-btn[b-3fyme60709] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text-muted, #475569);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.trv-icon-btn svg[b-3fyme60709] { width: 17px; height: 17px; }

.trv-icon-btn:hover:not(:disabled)[b-3fyme60709] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
    color: var(--ds-text, #0f172a);
}

.trv-icon-btn--danger:hover:not(:disabled)[b-3fyme60709] {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--ds-danger, #dc2626);
}

.trv-icon-btn:disabled[b-3fyme60709] {
    opacity: 0.45;
    cursor: default;
}

/* ===== Pagination ===== */
.trv-pager[b-3fyme60709] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--ds-border, #e2e8f0);
    flex-wrap: wrap;
}

.trv-pager-info[b-3fyme60709] {
    font-size: 0.8125rem;
    color: var(--ds-text-muted, #64748b);
}

.trv-pager-btns[b-3fyme60709] {
    display: inline-flex;
    gap: 6px;
}

@media (max-width: 640px) {
    .trv-filters > .ds-field[b-3fyme60709],
    .trv-filters > .trv-grow[b-3fyme60709] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/TableManagement/Tables.razor.rz.scp.css */
/* ===== Tables page header (design-system) ===== */
.tbl-head[b-edxdavm484] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tbl-title[b-edxdavm484] {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ds-text, #0f172a);
}

.tbl-actions[b-edxdavm484] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Native select styled to the design system */
.tbl-select[b-edxdavm484] {
    height: 40px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0f172a);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    max-width: 220px;
}

.tbl-select:hover[b-edxdavm484] {
    border-color: var(--ds-border-strong, #cbd5e1);
}

.tbl-select:focus[b-edxdavm484] {
    border-color: var(--brand-600, #036ac4);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.10);
}

/* Rectangular design-system buttons */
.tbl-btn[b-edxdavm484] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #334155);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.tbl-btn:hover[b-edxdavm484] {
    background: var(--slate-100, #f1f5f9);
    border-color: var(--ds-border-strong, #cbd5e1);
}

.tbl-btn:disabled[b-edxdavm484] {
    opacity: 0.55;
    cursor: default;
}

.tbl-btn--primary[b-edxdavm484] {
    background: var(--brand-600, #036ac4);
    border-color: var(--brand-600, #036ac4);
    color: #fff;
}

.tbl-btn--primary:hover[b-edxdavm484] {
    background: #0257a3;
    border-color: #0257a3;
}

.tbl-btn[b-edxdavm484]  fluent-icon,
.tbl-btn[b-edxdavm484]  svg {
    width: 18px;
    height: 18px;
    /* Icon inherits the button's text color — shows white on the blue primary. */
    fill: currentColor;
}
.tbl-btn[b-edxdavm484]  svg path { fill: currentColor; }

/* ===== Live floor-plan overlay ===== */
.tables-live-overlay[b-edxdavm484] {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: var(--ds-surface-sunken, var(--neutral-layer-2));
    display: flex;
    flex-direction: column;
}

.tables-live-topbar[b-edxdavm484] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--ds-surface, var(--neutral-layer-1));
    border-bottom: 1px solid var(--ds-border, var(--neutral-stroke-rest));
}

.tables-live-title[b-edxdavm484] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
}

.tables-live-body[b-edxdavm484] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    display: flex;
}

.tables-live-body > *[b-edxdavm484] {
    flex: 1;
    min-height: 0;
}
/* /Components/Pages/TableManagement/TablesGrid.razor.rz.scp.css */
/* ==========================================================================
   Tables grid — design-system tiles (matches the dashboard TableOverviewCard)
   ========================================================================== */
.tables-container[b-nazttkhfgs] {
    width: 100%;
    overflow-y: auto;
}

.tables-content-wrapper[b-nazttkhfgs] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ----- Floor section header ----- */
.tbl-floor[b-nazttkhfgs] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tbl-floor-head[b-nazttkhfgs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
}

.tbl-floor-name[b-nazttkhfgs] {
    font-family: var(--font-display, inherit);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    letter-spacing: -0.01em;
}

.tbl-floor-count[b-nazttkhfgs] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
    background: var(--slate-100, #f1f5f9);
    border-radius: var(--ds-radius-pill, 999px);
    padding: 2px 9px;
}

/* ----- Tile grid ----- */
.tbl-grid[b-nazttkhfgs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}

.tbl-tile[b-nazttkhfgs] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 92px;
    padding: 12px 13px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.tbl-tile:hover[b-nazttkhfgs] {
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-2, 0 4px 12px rgba(15, 23, 42, 0.08));
    border-color: var(--ds-border-strong, #cbd5e1);
}

.tbl-tile__top[b-nazttkhfgs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.tbl-tile__name[b-nazttkhfgs] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    letter-spacing: -0.01em;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbl-tile__acts[b-nazttkhfgs] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.tbl-tile:hover .tbl-tile__acts[b-nazttkhfgs] {
    opacity: 1;
}

.tbl-tile__icon[b-nazttkhfgs] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ds-text-muted, #64748b);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.tbl-tile__icon:hover[b-nazttkhfgs] {
    background: var(--slate-100, #f1f5f9);
    color: var(--ds-text, #0f172a);
}

.tbl-tile__icon--danger:hover[b-nazttkhfgs] {
    background: rgba(220, 38, 38, 0.10);
    color: #dc2626;
}

.tbl-tile__icon[b-nazttkhfgs]  svg {
    width: 14px;
    height: 14px;
}

.tbl-tile__state[b-nazttkhfgs] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
    min-width: 0;
}

.tbl-dot[b-nazttkhfgs] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.tbl-tile__emp[b-nazttkhfgs] {
    color: var(--ds-text-muted, #64748b);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbl-tile__meta[b-nazttkhfgs] {
    margin-top: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--ds-text-muted, #64748b);
}

/* ----- State accents (dot/label colour; subtle surface tint) ----- */
.tbl-tile.available .tbl-tile__state[b-nazttkhfgs] { color: #16a34a; }
.tbl-tile.occupied[b-nazttkhfgs] { background: #fef7f6; }
.tbl-tile.occupied .tbl-tile__state[b-nazttkhfgs] { color: #dc2626; }
.tbl-tile.reserved[b-nazttkhfgs] { background: rgba(3, 106, 196, 0.045); }
.tbl-tile.reserved .tbl-tile__state[b-nazttkhfgs] { color: var(--brand-600, #036ac4); }
.tbl-tile.out-of-service[b-nazttkhfgs] { opacity: 0.55; cursor: not-allowed; }
.tbl-tile.out-of-service .tbl-tile__state[b-nazttkhfgs] { color: var(--ds-text-subtle, #94a3b8); }

/* ----- Empty state ----- */
.empty-state[b-nazttkhfgs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--ds-text-muted, #64748b);
}

.empty-state[b-nazttkhfgs]  fluent-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state h3[b-nazttkhfgs] {
    margin: 8px 0 4px;
    color: var(--ds-text, #0f172a);
}

.empty-state p[b-nazttkhfgs] {
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .tbl-grid[b-nazttkhfgs] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}
/* /Components/Pages/Tickets/Tickets.razor.rz.scp.css */
/* ============================================================
   Tickets — Support console (token-driven, adisyon-design)
   ============================================================ */

.tickets-page[b-h3ynoegv07] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    height: 100%;
    box-sizing: border-box;
    background: var(--bg-subtle);
    font-family: var(--font-ui);
}

/* ── Page header ── */
.tickets-head[b-h3ynoegv07] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.head-titles[b-h3ynoegv07] { display: flex; flex-direction: column; gap: var(--space-2); }

.eyebrow[b-h3ynoegv07] {
    display: inline-block;
    align-self: flex-start;
    background: var(--accent-soft);
    color: var(--brand-600);
    font-size: var(--xs-size);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.head-title[b-h3ynoegv07] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    color: var(--fg-1);
}

.head-subtitle[b-h3ynoegv07] { margin: 0; font-size: var(--small-size); color: var(--fg-hint); }

.head-contact[b-h3ynoegv07] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.contact-label[b-h3ynoegv07] {
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--fg-hint);
    margin-right: var(--space-1);
}

.contact-chip[b-h3ynoegv07] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    font-size: var(--small-size);
    color: var(--fg-2);
    text-decoration: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: border-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.contact-chip:hover[b-h3ynoegv07] {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: var(--shadow-xs);
}

.contact-chip--whatsapp:hover[b-h3ynoegv07] { color: #1da851; border-color: #25D366; }

/* ── Console grid ── */
.tickets-console[b-h3ynoegv07] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 360px 1fr;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ── LEFT: list ── */
.ticket-list[b-h3ynoegv07] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-muted);
}

.list-head[b-h3ynoegv07] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.list-title[b-h3ynoegv07] { font-weight: 700; font-size: 1rem; color: var(--fg-1); }

.list-filters[b-h3ynoegv07] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
}

.search-field[b-h3ynoegv07] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field[b-h3ynoegv07]  svg {
    position: absolute;
    left: 10px;
    color: var(--fg-hint);
    pointer-events: none;
}

.search-input[b-h3ynoegv07] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px 8px 32px;
    font: inherit;
    font-size: var(--small-size);
    color: var(--fg-1);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.search-input[b-h3ynoegv07]::placeholder { color: var(--fg-disabled); }

.search-input:focus-visible[b-h3ynoegv07],
.t-select:focus-visible[b-h3ynoegv07],
.t-input:focus-visible[b-h3ynoegv07],
.t-textarea:focus-visible[b-h3ynoegv07],
.reply-input:focus-visible[b-h3ynoegv07] {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── List rows ── */
.list-scroll[b-h3ynoegv07] { flex: 1; min-height: 0; overflow-y: auto; }

.ticket-row[b-h3ynoegv07] {
    display: flex;
    gap: var(--space-3);
    width: 100%;
    text-align: start;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    border-left: 3px solid transparent;
    cursor: pointer;
    font: inherit;
    transition: background var(--dur-fast) var(--ease-out);
}

.ticket-row:hover[b-h3ynoegv07] { background: var(--bg); }

.ticket-row.is-active[b-h3ynoegv07] {
    background: var(--bg);
    border-left-color: var(--accent);
}

.ticket-row:focus-visible[b-h3ynoegv07] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.row-dot[b-h3ynoegv07] {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    margin-top: 5px;
    flex-shrink: 0;
}

.row-body[b-h3ynoegv07] { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }

.row-subject[b-h3ynoegv07] {
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Unread (support team only): bolder subject + accent dot */
.ticket-row.is-unread .row-subject[b-h3ynoegv07] { font-weight: 800; }

.unread-dot[b-h3ynoegv07] {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    vertical-align: middle;
    flex-shrink: 0;
}

.row-meta-line[b-h3ynoegv07] {
    font-size: var(--xs-size);
    color: var(--fg-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-foot[b-h3ynoegv07] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 2px;
    font-size: var(--xs-size);
    color: var(--fg-hint);
}

.row-date[b-h3ynoegv07] { color: var(--fg-hint); }

.row-count[b-h3ynoegv07] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    color: var(--fg-hint);
}

/* status dot colors */
.row-dot.is-open[b-h3ynoegv07] { background: var(--brand-500); }
.row-dot.is-awaiting[b-h3ynoegv07] { background: var(--warning-500); }
.row-dot.is-resolved[b-h3ynoegv07] { background: var(--success-500); }
.row-dot.is-closed[b-h3ynoegv07] { background: var(--slate-400); }

/* ── List states ── */
.list-state[b-h3ynoegv07] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    color: var(--fg-hint);
}

.list-state--empty[b-h3ynoegv07] {
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--small-size);
}

.list-state--empty[b-h3ynoegv07]  svg { color: var(--slate-300); width: 28px; height: 28px; }

/* ── RIGHT: detail ── */
.ticket-detail[b-h3ynoegv07] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg);
}

.detail-head[b-h3ynoegv07] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.detail-head-main[b-h3ynoegv07] { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.detail-title[b-h3ynoegv07] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--h4-size);
    font-weight: 700;
    color: var(--fg-1);
}

.detail-meta[b-h3ynoegv07] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }

.meta-id[b-h3ynoegv07] { font-size: var(--xs-size); font-weight: 600; color: var(--fg-hint); font-family: var(--font-mono); }

.meta-user[b-h3ynoegv07] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--xs-size);
    color: var(--fg-hint);
}

/* ── Pills (soft tinted bg + darker text) ── */
.status-pill[b-h3ynoegv07],
.priority-pill[b-h3ynoegv07] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--xs-size);
    font-weight: 600;
    line-height: 1.5;
}

.status-pill.is-open[b-h3ynoegv07] { background: var(--status-info-bg); color: var(--status-info-fg); }
.status-pill.is-awaiting[b-h3ynoegv07] { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.status-pill.is-resolved[b-h3ynoegv07] { background: var(--status-success-bg); color: var(--status-success-fg); }
.status-pill.is-closed[b-h3ynoegv07] { background: var(--slate-100); color: var(--fg-3); }

.priority-pill.p-low[b-h3ynoegv07] { background: var(--slate-100); color: var(--fg-3); }
.priority-pill.p-normal[b-h3ynoegv07] { background: var(--status-info-bg); color: var(--status-info-fg); }
.priority-pill.p-high[b-h3ynoegv07] { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.priority-pill.p-critical[b-h3ynoegv07] { background: var(--status-danger-bg); color: var(--status-danger-fg); }

/* ── Actions menu (İşlemler) ── */
.actions-menu[b-h3ynoegv07] { position: relative; flex-shrink: 0; }

.menu-backdrop[b-h3ynoegv07] {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
}

.menu-pop[b-h3ynoegv07] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: calc(var(--z-overlay) + 1);
    min-width: 230px;
    padding: var(--space-1);
    background: var(--layer-floating);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.menu-item[b-h3ynoegv07] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--small-size);
    color: var(--fg-2);
    text-align: start;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.menu-item:hover[b-h3ynoegv07] { background: var(--bg-subtle); color: var(--fg-1); }
.menu-item:focus-visible[b-h3ynoegv07] { outline: 2px solid var(--accent); outline-offset: -2px; }
.menu-item:disabled[b-h3ynoegv07] { opacity: .5; cursor: not-allowed; }
.menu-item[b-h3ynoegv07]  svg { color: var(--fg-hint); }

.menu-item--danger[b-h3ynoegv07] { color: var(--danger-600); }
.menu-item--danger:hover[b-h3ynoegv07] { background: var(--status-danger-bg); color: var(--danger-600); }
.menu-item--danger[b-h3ynoegv07]  svg { color: var(--danger-500); }

.menu-sep[b-h3ynoegv07] { height: 1px; margin: var(--space-1) 0; background: var(--border-subtle); }

/* ── Scroll body ── */
.detail-scroll[b-h3ynoegv07] { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5); }

/* ── Create form ── */
.create-form[b-h3ynoegv07] { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }

.field[b-h3ynoegv07] { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.field-row[b-h3ynoegv07] { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.field-label[b-h3ynoegv07] { font-size: var(--small-size); font-weight: 600; color: var(--fg-2); }

.t-input[b-h3ynoegv07],
.t-select[b-h3ynoegv07],
.t-textarea[b-h3ynoegv07] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font: inherit;
    font-size: var(--small-size);
    color: var(--fg-1);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.t-input[b-h3ynoegv07]::placeholder,
.t-textarea[b-h3ynoegv07]::placeholder { color: var(--fg-disabled); }

.t-textarea[b-h3ynoegv07] { resize: vertical; min-height: 120px; line-height: var(--leading-normal); }

.t-select[b-h3ynoegv07] { cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 34px;
}

.form-actions[b-h3ynoegv07] { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ── Chat ── */
.chat-scroll[b-h3ynoegv07] { display: flex; flex-direction: column; gap: var(--space-3); background: var(--bg-subtle); }

.bubble-row[b-h3ynoegv07] { display: flex; }
.bubble-row--user[b-h3ynoegv07] { justify-content: flex-start; }
.bubble-row--admin[b-h3ynoegv07] { justify-content: flex-end; }

.bubble[b-h3ynoegv07] {
    max-width: 68%;
    padding: 10px 14px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    word-break: break-word;
}

.bubble--user[b-h3ynoegv07] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-bottom-left-radius: var(--radius-xs);
}

.bubble--admin[b-h3ynoegv07] {
    background: var(--accent);
    color: var(--fg-on-brand);
    border-bottom-right-radius: var(--radius-xs);
}

.bubble-sender[b-h3ynoegv07] { display: flex; align-items: center; gap: 5px; font-size: var(--xs-size); font-weight: 700; margin-bottom: 3px; opacity: .85; }
.sender-tag[b-h3ynoegv07] { font-weight: 500; opacity: .7; font-size: 0.65rem; }
.bubble-content[b-h3ynoegv07] { font-size: var(--small-size); line-height: var(--leading-normal); white-space: pre-wrap; }
.bubble-time[b-h3ynoegv07] { font-size: 0.65rem; margin-top: 4px; opacity: .55; text-align: end; }

/* ── Read receipt (support-side, under the last admin reply) ── */
.read-receipt[b-h3ynoegv07] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.65rem;
    font-weight: 500;
}
.read-receipt--read[b-h3ynoegv07] { color: var(--accent); }
.read-receipt--unread[b-h3ynoegv07] { color: var(--fg-hint); }

/* ── Reply bar ── */
.reply-bar[b-h3ynoegv07] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.reply-input[b-h3ynoegv07] {
    flex: 1;
    box-sizing: border-box;
    padding: 10px 14px;
    font: inherit;
    font-size: var(--small-size);
    color: var(--fg-1);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    resize: none;
    min-height: 44px;
    max-height: 160px;
    line-height: var(--leading-normal);
}

.reply-input[b-h3ynoegv07]::placeholder { color: var(--fg-disabled); }

.reply-send[b-h3ynoegv07] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-pill);
}

.reply-closed[b-h3ynoegv07] {
    text-align: center;
    padding: var(--space-4);
    color: var(--fg-hint);
    font-size: var(--small-size);
    border-top: 1px solid var(--border);
    background: var(--bg);
}

/* ── Empty state ── */
.detail-empty[b-h3ynoegv07] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
    text-align: center;
}

.empty-icon[b-h3ynoegv07] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
}

.empty-icon[b-h3ynoegv07]  svg { width: 32px; height: 32px; }

.empty-title[b-h3ynoegv07] { margin: 0; font-family: var(--font-display); font-size: var(--h4-size); font-weight: 700; color: var(--fg-1); }
.empty-subtitle[b-h3ynoegv07] { margin: 0; max-width: 320px; font-size: var(--small-size); color: var(--fg-hint); }

/* ── Buttons ── */
.btn[b-h3ynoegv07] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 9px 16px;
    font: inherit;
    font-size: var(--small-size);
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.btn:disabled[b-h3ynoegv07] { opacity: .6; cursor: not-allowed; }
.btn:focus-visible[b-h3ynoegv07] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Icons inherit the button's text color. FluentIcon applies its own (accent) fill inline,
   so currentColor must win with !important — otherwise glyphs vanish on accent buttons. */
.btn[b-h3ynoegv07]  svg { color: currentColor; fill: currentColor !important; }
.btn[b-h3ynoegv07]  svg path { fill: currentColor !important; }

.btn--sm[b-h3ynoegv07] { padding: 7px 12px; font-size: var(--xs-size); }

.btn--accent[b-h3ynoegv07] { background: var(--accent); color: var(--fg-on-brand); }
.btn--accent:hover:not(:disabled)[b-h3ynoegv07] { background: var(--accent-hover); box-shadow: var(--shadow-lg); transform: translateY(-1px); }

.btn--outline[b-h3ynoegv07] { background: var(--bg); border-color: var(--border); color: var(--fg-2); }
.btn--outline:hover:not(:disabled)[b-h3ynoegv07] { border-color: var(--accent); color: var(--accent); }

.btn--ghost[b-h3ynoegv07] { background: transparent; color: var(--fg-3); }
.btn--ghost:hover:not(:disabled)[b-h3ynoegv07] { background: var(--bg-subtle); color: var(--fg-1); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .tickets-console[b-h3ynoegv07] { grid-template-columns: 1fr; }
    .ticket-list[b-h3ynoegv07] { border-right: none; border-bottom: 1px solid var(--border); max-height: 38vh; }
}
/* /Components/Pages/Waiter/WaiterPanel.razor.rz.scp.css */
.wp-root[b-0v6y3zmfw2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    min-height: 100%;
}

.wp-bar[b-0v6y3zmfw2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wp-bar-label[b-0v6y3zmfw2] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
}

.wp-select[b-0v6y3zmfw2] {
    height: 36px;
    /* app.css'te global `select { width: 100% }` var — seçici satırı boydan boya
       kaplıyordu. Scoped CSS daha spesifik olduğu için burada geri alınıyor. */
    width: auto;
    min-width: 180px;
    max-width: 260px;
    padding: 0 10px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: 8px;
    background: var(--ds-surface-1, #fff);
    color: inherit;
    font-size: 0.875rem;
}

.wp-msg[b-0v6y3zmfw2] {
    padding: 32px 16px;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--ds-text-muted, #64748b);
}

/* Masalar ekranı alanı doldursun — garson tek ekranda çalışıyor, kaydırma
   TableOverviewCard'ın kendi içinde kalsın. */
.wp-body[b-0v6y3zmfw2] {
    flex: 1;
    min-height: 0;
}

@media (max-width: 640px) {
    .wp-root[b-0v6y3zmfw2] {
        padding: 10px;
    }

    .wp-select[b-0v6y3zmfw2] {
        min-width: 0;
        max-width: none;
        flex: 1;
    }
}
/* /Components/Pages/Wallet/AdminWalletDashboard.razor.rz.scp.css */
/* Grid (not flex) on purpose: the layout host is a full-height scrolling flex
   column, so as a flex container this page let its rows shrink below their
   content — which squashed the last card and clipped the grid + paginator
   behind .dc-body's overflow:hidden. Auto rows + align-content:start keep every
   section at its natural height and let the page itself scroll. */
.wd[b-19ysx75yi2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--bg-subtle);
    min-height: 100%;
}

/* ---------- Header ---------- */
.wd-head[b-19ysx75yi2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.wd-head-text[b-19ysx75yi2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wd-eyebrow[b-19ysx75yi2] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent);
}

.wd-title[b-19ysx75yi2] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin: 0;
    line-height: 1.15;
}

.wd-subtitle[b-19ysx75yi2] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    color: var(--fg-hint);
    margin: 0;
}

.wd-actions[b-19ysx75yi2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.wd-firm-select[b-19ysx75yi2] {
    min-width: 200px;
    max-width: 260px;
}

.wd-refresh[b-19ysx75yi2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--layer-1);
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast, 150ms) ease, color var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease;
}

.wd-refresh:hover[b-19ysx75yi2] {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.wd-refresh:focus-visible[b-19ysx75yi2] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.wd-refresh[b-19ysx75yi2]  svg { width: 17px; height: 17px; }

/* ---------- KPI row ---------- */
.wd-kpis[b-19ysx75yi2] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
}

/* ---------- Card rows ---------- */
.wd-row[b-19ysx75yi2] {
    display: grid;
    gap: var(--space-5);
    align-items: stretch;
}

.wd-row--main[b-19ysx75yi2] { grid-template-columns: 1.8fr 1fr; }
.wd-row--sub[b-19ysx75yi2]  { grid-template-columns: repeat(3, 1fr); }

/* ---------- Daily flow chart ---------- */
.wf-chart[b-19ysx75yi2] {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 190px;
    padding-top: var(--space-2);
}

.wf-col[b-19ysx75yi2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wf-bars[b-19ysx75yi2] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    border-radius: var(--radius-xs);
    transition: background var(--dur-fast, 150ms) ease;
}

.wf-col:hover .wf-bars[b-19ysx75yi2] { background: var(--bg-muted); }

.wf-bar[b-19ysx75yi2] {
    width: 38%;
    max-width: 14px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: height var(--dur-base, 250ms) ease;
}

.wf-bar--in[b-19ysx75yi2]  { background: var(--success-500); }
.wf-bar--out[b-19ysx75yi2] { background: var(--brand-500); }

.wf-day[b-19ysx75yi2] {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--fg-hint);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    min-height: 13px;
}

.wf-legend[b-19ysx75yi2] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.wf-leg[b-19ysx75yi2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-3);
}

.wf-leg strong[b-19ysx75yi2] {
    color: var(--fg-1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wf-dot[b-19ysx75yi2] {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.wf-dot--in[b-19ysx75yi2]  { background: var(--success-500); }
.wf-dot--out[b-19ysx75yi2] { background: var(--brand-500); }

/* ---------- Spend breakdown ---------- */
.bd-summary[b-19ysx75yi2] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.bd-total[b-19ysx75yi2] {
    font-family: var(--font-ui);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.bd-total-cap[b-19ysx75yi2] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    color: var(--fg-hint);
}

.bd-bar[b-19ysx75yi2] {
    display: flex;
    height: 10px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--bg-subtle);
    margin-bottom: var(--space-3);
}

.bd-bar-seg[b-19ysx75yi2] { min-width: 2px; }

.bd-legend[b-19ysx75yi2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bd-leg-row[b-19ysx75yi2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--xs-size);
}

.bd-leg-dot[b-19ysx75yi2] {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.bd-leg-label[b-19ysx75yi2] {
    flex: 1;
    min-width: 0;
    color: var(--fg-2);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-leg-count[b-19ysx75yi2] {
    color: var(--fg-1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bd-leg-pct[b-19ysx75yi2] {
    width: 46px;
    text-align: right;
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

/* ---------- Top firms ---------- */
.tf-feed[b-19ysx75yi2] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 340px;
    overflow-y: auto;
}

.tf-row[b-19ysx75yi2] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.tf-row:last-child[b-19ysx75yi2] { border-bottom: none; }

.tf-rank[b-19ysx75yi2] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--bg-subtle);
    color: var(--fg-3);
}

.tf-rank.rank-1[b-19ysx75yi2] { background: color-mix(in srgb, var(--warning-500) 18%, transparent); color: var(--warning-600); }
.tf-rank.rank-3[b-19ysx75yi2] { background: color-mix(in srgb, var(--warning-600) 12%, transparent); color: var(--warning-600); }

.tf-main[b-19ysx75yi2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tf-line[b-19ysx75yi2] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.tf-name[b-19ysx75yi2] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tf-amount[b-19ysx75yi2] {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

.tf-amount--danger[b-19ysx75yi2] {
    color: var(--danger-600);
}

.tf-track[b-19ysx75yi2] {
    width: 100%;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.tf-fill[b-19ysx75yi2] {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
    transition: width var(--dur-base, 250ms) ease;
}

.tf-fill--balance[b-19ysx75yi2] {
    background: linear-gradient(90deg, var(--success-500), var(--success-600));
}

.tf-sub[b-19ysx75yi2] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

/* ---------- Recent deposits ---------- */
.rd-feed[b-19ysx75yi2] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 340px;
    overflow-y: auto;
}

.rd-row[b-19ysx75yi2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.rd-row:last-child[b-19ysx75yi2] { border-bottom: none; }

.rd-main[b-19ysx75yi2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rd-firm[b-19ysx75yi2] {
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-meta[b-19ysx75yi2] {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rd-amount[b-19ysx75yi2] {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--success-600);
    font-variant-numeric: tabular-nums;
}

/* ---------- Transactions card ---------- */
.wd-tx-body[b-19ysx75yi2] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wd-tools[b-19ysx75yi2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

/* .ds-select is width:100% globally — inside this toolbar that pushed every
   filter onto its own line. Size them to content so search + filters + clear
   share one row. */
.wd-tools .ds-select[b-19ysx75yi2] {
    width: auto;
    min-width: 180px;
    max-width: 240px;
    height: 40px;
    padding: 0 12px;
}

.wd-tools-end[b-19ysx75yi2] { margin-left: auto; }

.wd-search[b-19ysx75yi2] {
    display: inline-flex;
    align-items: stretch;
}

.wd-search-input[b-19ysx75yi2] {
    width: 240px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wd-search-btn[b-19ysx75yi2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--layer-1);
    color: var(--fg-3);
    cursor: pointer;
    transition: color var(--dur-fast, 150ms) ease, border-color var(--dur-fast, 150ms) ease;
}

.wd-search-btn:hover[b-19ysx75yi2] { color: var(--accent); border-color: var(--accent); }

.wd-search-btn:focus-visible[b-19ysx75yi2] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The grid sits inside the card frame — drop its own outer chrome so borders don't double up. */
.wd-tx-body[b-19ysx75yi2]  .adg-frame {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Cap the row area so a full 20-row page scrolls inside the grid instead of
   running past the card — keeps the paginator pinned and always reachable. */
.wd-tx-body[b-19ysx75yi2]  .adg-scroll {
    max-height: min(58vh, 620px);
}

.wd-amount[b-19ysx75yi2] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wd-amount.is-pos[b-19ysx75yi2] { color: var(--success-600); }
.wd-amount.is-neg[b-19ysx75yi2] { color: var(--danger-600); }

.wd-cell-date[b-19ysx75yi2],
.wd-cell-balance[b-19ysx75yi2] {
    font-variant-numeric: tabular-nums;
    color: var(--fg-2);
}

.wd-cell-type[b-19ysx75yi2] { color: var(--fg-2); }

.wd-cell-firm[b-19ysx75yi2] {
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    min-width: 0;
}

.wd-cell-desc[b-19ysx75yi2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    min-width: 0;
    color: var(--fg-3);
}

/* Status chip — soft tinted background + matching darker text */
.wd-chip[b-19ysx75yi2] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    white-space: nowrap;
}

.wd-chip--success[b-19ysx75yi2] { background: var(--status-success-bg); color: var(--status-success-fg); }
.wd-chip--warning[b-19ysx75yi2] { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.wd-chip--danger[b-19ysx75yi2]  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.wd-chip--muted[b-19ysx75yi2]   { background: var(--bg-subtle);         color: var(--fg-hint); }

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
    .wd-kpis[b-19ysx75yi2] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
    .wd-row--sub[b-19ysx75yi2] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
    .wd-row--main[b-19ysx75yi2],
    .wd-row--sub[b-19ysx75yi2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .wd-kpis[b-19ysx75yi2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wd[b-19ysx75yi2] { padding: var(--space-4); }
    .wd-search-input[b-19ysx75yi2] { width: 100%; }
    .wd-search[b-19ysx75yi2] { flex: 1 1 100%; }
    .wd-tools .ds-select[b-19ysx75yi2] { flex: 1 1 160px; max-width: none; }
    .wd-tools-end[b-19ysx75yi2] { margin-left: 0; }
    .wd-tx-body[b-19ysx75yi2]  .adg-scroll { max-height: none; }
}

@media (max-width: 460px) {
    .wd-kpis[b-19ysx75yi2] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Wallet/BillingInfoModal.razor.rz.scp.css */
/* BillingInfoModal — alan ipuçları ve doğrulama hataları. Alan/giriş görünümü global
   .ar-field / .ar-input sınıflarından gelir; burada yalnızca yardımcı metinler var. */

.bi-hint[b-4d5oxnyxyi] {
    font-size: 12px;
    color: var(--fg-hint);
    line-height: 1.4;
}

.bi-error[b-4d5oxnyxyi] {
    font-size: 12px;
    font-weight: 600;
    color: var(--danger-600);
    line-height: 1.4;
}
/* /Components/Pages/Wallet/TokenPurchase.razor.rz.scp.css */
/* TokenPurchase — design-system aligned billing & top-up page. Uses shared AppButton
   for all CTAs; this file only owns the page layout, header pill, hero card,
   active-subscription block, plans table, and token pack grid. */

/* ── Page shell ────────────────────────────────────────────────── */

.tp[b-cdn1e0ael0] {
    padding: 28px 28px 48px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #0f172a;
}

.tp-loading[b-cdn1e0ael0] {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

/* ── Header ────────────────────────────────────────────────────── */

.tp-head[b-cdn1e0ael0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.tp-head-text[b-cdn1e0ael0] { display: flex; flex-direction: column; gap: 4px; }

.tp-eyebrow[b-cdn1e0ael0] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #036ac4;
}

.tp-title[b-cdn1e0ael0] {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #0f172a;
}

.tp-subtitle[b-cdn1e0ael0] {
    margin: 2px 0 0;
    font-size: 14px;
    color: #64748b;
    max-width: 60ch;
    line-height: 1.5;
}

.tp-balance-pill[b-cdn1e0ael0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 10px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.tp-balance-label[b-cdn1e0ael0] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.tp-balance-value[b-cdn1e0ael0] {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #036ac4;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.tp-balance-unit[b-cdn1e0ael0] { font-size: 12px; font-weight: 600; color: #94a3b8; }

.tp-balance-runway[b-cdn1e0ael0] {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

/* ── İki sütun: kontör yükle + kontör nerede harcanır ──────────── */

.tp-two-col[b-cdn1e0ael0] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ── Card primitive ────────────────────────────────────────────── */

.tp-card[b-cdn1e0ael0] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.tp-section-head[b-cdn1e0ael0] { display: flex; flex-direction: column; gap: 2px; }
.tp-section-title[b-cdn1e0ael0] { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; }
.tp-section-sub[b-cdn1e0ael0]   { margin: 0; font-size: 13.5px; color: #64748b; line-height: 1.5; }

/* ── Badges ────────────────────────────────────────────────────── */

.tp-badge[b-cdn1e0ael0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    width: fit-content;
    border: 1px solid transparent;
}

.tp-badge svg[b-cdn1e0ael0] { width: 12px; height: 12px; }

.tp-badge--success[b-cdn1e0ael0] {
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}

.tp-badge--amber[b-cdn1e0ael0] {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.25);
}

/* ── Active subscription card ──────────────────────────────────── */

.tp-active[b-cdn1e0ael0] {
    border-color: rgba(16, 185, 129, 0.30);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.04), #ffffff 60%);
}

.tp-active-head[b-cdn1e0ael0] { display: flex; flex-direction: column; gap: 6px; }
.tp-active-name[b-cdn1e0ael0] { margin: 4px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.tp-active-tag[b-cdn1e0ael0]  { margin: 0; font-size: 14px; color: #64748b; }

.tp-meta-grid[b-cdn1e0ael0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.tp-meta[b-cdn1e0ael0] { display: flex; flex-direction: column; gap: 2px; }
.tp-meta-label[b-cdn1e0ael0] { font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #94a3b8; }
.tp-meta-value[b-cdn1e0ael0] { font-size: 14px; font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }
.tp-meta--highlight .tp-meta-value[b-cdn1e0ael0] { color: #036ac4; font-size: 16px; }

.tp-active-foot[b-cdn1e0ael0] { display: flex; align-items: center; gap: 12px; }
.tp-note[b-cdn1e0ael0] { margin: 0; font-size: 12.5px; color: #64748b; }

/* ── Hero sales card ───────────────────────────────────────────── */

.tp-sales[b-cdn1e0ael0] { padding: 28px; }

.tp-sales-grid[b-cdn1e0ael0] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 1fr;
    gap: 32px;
    align-items: start;
}

.tp-sales-left[b-cdn1e0ael0]  { display: flex; flex-direction: column; gap: 14px; }
.tp-sales-right[b-cdn1e0ael0] { display: flex; flex-direction: column; gap: 12px; }

.tp-sales-title[b-cdn1e0ael0] {
    margin: 4px 0 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #0f172a;
}

.tp-sales-tag[b-cdn1e0ael0] { margin: 0; font-size: 14px; color: #64748b; line-height: 1.5; }

.tp-price-block[b-cdn1e0ael0] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 16px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.tp-price-amount[b-cdn1e0ael0] {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #036ac4;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tp-price-struck[b-cdn1e0ael0] {
    font-size: 18px;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    align-self: center;
    margin-right: 2px;
}

.tp-price-period[b-cdn1e0ael0] { font-size: 13.5px; color: #64748b; font-weight: 500; }

.tp-price-meta[b-cdn1e0ael0] {
    flex-basis: 100%;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
    font-weight: 500;
}

/* Features grid (right column of sales card) */
.tp-features-title[b-cdn1e0ael0] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tp-features-list[b-cdn1e0ael0] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
}

.tp-features-list li[b-cdn1e0ael0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #0f172a;
    line-height: 1.4;
}

.tp-check[b-cdn1e0ael0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(3, 106, 196, 0.10);
    color: #036ac4;
    flex-shrink: 0;
}

.tp-check svg[b-cdn1e0ael0] { width: 12px; height: 12px; }

/* ── Plans table ───────────────────────────────────────────────── */

.tp-table-wrap[b-cdn1e0ael0] {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.tp-table[b-cdn1e0ael0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tp-table thead[b-cdn1e0ael0] { background: #f8fafc; }
.tp-table th[b-cdn1e0ael0], .tp-table td[b-cdn1e0ael0] {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}
.tp-table th[b-cdn1e0ael0] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}
.tp-table tbody tr:last-child td[b-cdn1e0ael0] { border-bottom: none; }
.tp-table tbody tr:hover[b-cdn1e0ael0] { background: #f8fafc; }

.tp-table .num[b-cdn1e0ael0]    { text-align: right !important; font-variant-numeric: tabular-nums; color: #475569; }
.tp-table .strong[b-cdn1e0ael0] { font-weight: 700; color: #036ac4; }
.tp-table .action[b-cdn1e0ael0] { text-align: right !important; width: 1%; white-space: nowrap; }

.tp-plan-name[b-cdn1e0ael0] { font-weight: 600; color: #0f172a; }
.tp-plan-desc[b-cdn1e0ael0] { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.tp-row-struck[b-cdn1e0ael0] { display: inline-block; margin-right: 6px; color: #cbd5e1; text-decoration: line-through; font-weight: 500; }

.tp-empty[b-cdn1e0ael0] {
    padding: 40px 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 13.5px;
    margin: 0;
}

/* ── Top-up section ────────────────────────────────────────────── */
/* Tarife listesi AppTokenRateList bileşenindedir; stilleri kendi .razor.css dosyasında. */

.tp-packs-note[b-cdn1e0ael0] {
    margin: 0;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.55;
}

/* Token pack grid */
.tp-packs[b-cdn1e0ael0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-content: start;
}

.tp-pack[b-cdn1e0ael0] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 18px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.tp-pack:hover[b-cdn1e0ael0] {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.tp-pack--featured[b-cdn1e0ael0] {
    border-color: #036ac4;
    box-shadow: 0 1px 2px rgba(3, 106, 196, 0.10), 0 8px 24px rgba(3, 106, 196, 0.10);
}

.tp-pack-pill[b-cdn1e0ael0] {
    position: absolute;
    top: -9px;
    right: 14px;
    padding: 3px 10px;
    background: #036ac4;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tp-pack-amount[b-cdn1e0ael0] {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tp-pack-unit[b-cdn1e0ael0]       { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.tp-pack-price[b-cdn1e0ael0]      { font-size: 16px; font-weight: 700; color: #036ac4; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tp-pack-price-meta[b-cdn1e0ael0] { font-size: 11px; color: #94a3b8; margin-bottom: 12px; }

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .tp-two-col[b-cdn1e0ael0] { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    .tp-sales-grid[b-cdn1e0ael0]  { grid-template-columns: 1fr; gap: 20px; }
    .tp-features-list[b-cdn1e0ael0] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .tp[b-cdn1e0ael0] { padding: 20px 16px 36px; }
    .tp-title[b-cdn1e0ael0] { font-size: 24px; }
    .tp-sales-title[b-cdn1e0ael0] { font-size: 22px; }
    .tp-price-amount[b-cdn1e0ael0] { font-size: 28px; }
    .tp-packs[b-cdn1e0ael0] { grid-template-columns: repeat(2, 1fr); }
    .tp-active-foot[b-cdn1e0ael0] { flex-direction: column; align-items: stretch; }
}

@media (max-width: 420px) {
    .tp-packs[b-cdn1e0ael0] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Wallet/WalletDashboard.razor.rz.scp.css */
/* ===== Header ===== */
.wallet-header[b-0a53yc6hey] {
    align-items: flex-start;
    flex-wrap: wrap;
}

.wallet-header__title[b-0a53yc6hey] { display: flex; flex-direction: column; gap: 2px; }

.wallet-header__subtitle[b-0a53yc6hey] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ds-text-muted);
}

.wallet-header__actions[b-0a53yc6hey] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

/* ===== Metric cards ===== */
.wallet-metrics[b-0a53yc6hey] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ds-space-4);
    margin-bottom: var(--ds-space-5);
}

/* ===== Transaction history ===== */
.wal-history[b-0a53yc6hey] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
    overflow: hidden;
}

.wal-history__head[b-0a53yc6hey] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-3);
    border-bottom: 1px solid var(--ds-border);
}

.wal-history__title h2[b-0a53yc6hey] {
    margin: 0;
    font-family: var(--ds-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ds-text);
}

.wal-history__title p[b-0a53yc6hey] {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
}

/* ===== Filters ===== */
.wal-filters[b-0a53yc6hey] {
    display: flex;
    align-items: flex-end;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    padding: var(--ds-space-3) var(--ds-space-4);
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface-alt);
}

.wal-filter[b-0a53yc6hey] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wal-filter label[b-0a53yc6hey] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted);
}

/* Match the shared DateRangePicker trigger (32px, compact). */
.wal-select[b-0a53yc6hey] {
    width: auto;
    min-width: 180px;
    height: 32px;
    padding: 0 30px 0 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 32px;
}

/* ===== Loading state (before grid mounts) ===== */
.wal-loading[b-0a53yc6hey] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-7) var(--ds-space-4);
    color: var(--ds-text-muted);
    font-size: 0.875rem;
}

/* ===== Grid cells ===== */
.wal-date[b-0a53yc6hey] { white-space: nowrap; }

.wal-desc[b-0a53yc6hey] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wal-amount[b-0a53yc6hey] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wal-amount.is-pos[b-0a53yc6hey] { color: var(--ds-success); }
.wal-amount.is-neg[b-0a53yc6hey] { color: var(--ds-danger); }

/* ===== Status pill ===== */
.wal-status[b-0a53yc6hey] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--ds-radius-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.wal-status.is-completed[b-0a53yc6hey] { background: rgba(22, 163, 74, 0.10); color: var(--ds-success); }
.wal-status.is-pending[b-0a53yc6hey]   { background: rgba(217, 119, 6, 0.10); color: var(--ds-warning); }
.wal-status.is-failed[b-0a53yc6hey]    { background: rgba(220, 38, 38, 0.10); color: var(--ds-danger); }
.wal-status.is-cancelled[b-0a53yc6hey] { background: var(--slate-100); color: var(--ds-text-muted); }
.wal-status.is-reversed[b-0a53yc6hey]  { background: var(--brand-50); color: var(--brand-700); }

/* ===== Error state ===== */
.wallet-error[b-0a53yc6hey] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-4);
    border: 1px solid var(--danger-100);
    background: var(--danger-50);
    color: var(--ds-danger);
    border-radius: var(--ds-radius-md);
    font-weight: 600;
    font-size: 0.875rem;
}

/* ===== Coupon modal ===== */
.wal-coupon[b-0a53yc6hey] { display: flex; flex-direction: column; gap: var(--ds-space-3); }

.wal-coupon__input[b-0a53yc6hey] { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.wal-coupon__hint[b-0a53yc6hey] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    line-height: 1.5;
}

.wal-coupon__success[b-0a53yc6hey] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-text);
    text-align: center;
}

/* ===== Balance adjust modal (Admin.Manage) ===== */
.wal-adjust[b-0a53yc6hey] { display: flex; flex-direction: column; gap: var(--ds-space-3); }

.wal-adjust__field[b-0a53yc6hey] { display: flex; flex-direction: column; gap: 5px; }

.wal-adjust__field label[b-0a53yc6hey] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted);
}

.wal-adjust__field .ds-input[b-0a53yc6hey],
.wal-adjust__field .ds-select[b-0a53yc6hey] { width: 100%; }

.wal-adjust__hint[b-0a53yc6hey] {
    margin: 0;
    padding: var(--ds-space-3);
    border-radius: var(--ds-radius-md);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.wal-adjust__hint.is-info[b-0a53yc6hey] { background: var(--brand-50); color: var(--brand-700); }
.wal-adjust__hint.is-warning[b-0a53yc6hey] { background: var(--danger-50); color: var(--ds-danger); }

/* ===== Embedded mode (e.g. FirmDetails wallet tab) ===== */
/* The host page already supplies its own padding + heading, so drop the
   page chrome and surface just a compact actions toolbar. */
.wallet-embedded[b-0a53yc6hey] { padding: 0; }
.wallet-embedded .wallet-header[b-0a53yc6hey] {
    background: transparent;
    box-shadow: none;
    padding: 0 0 var(--ds-space-2);
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .wal-filters[b-0a53yc6hey] { align-items: stretch; }
    .wal-filter[b-0a53yc6hey] { width: 100%; }
    .wal-select[b-0a53yc6hey] { width: 100%; }
}
/* /Components/Pages/Workspaces/Dialogs/CreateWorkspaceDialog.razor.rz.scp.css */
/* CreateWorkspaceDialog — body layout inside the AppModal.
   Reuses global .ds-field / .ds-label / .ds-input / .ds-switch. */

.cw-form[b-xgx0lz4kb1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

.cw-switch-row[b-xgx0lz4kb1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
}

.cw-switch-label[b-xgx0lz4kb1] {
    margin: 0;
}
/* /Components/Pages/Workspaces/FreelanceCourierZones.razor.rz.scp.css */
/* Full-page map wrapper */
.fcz-wrapper[b-qm926mzjb5] {
    position: relative;
    width: 100%;
    height: calc(100vh - 60px);
}

.fcz-map[b-qm926mzjb5] {
    width: 100%;
    height: 100%;
}

/* Center overlay for loading / empty state */
.fcz-center-overlay[b-qm926mzjb5] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--neutral-layer-1);
    z-index: 10;
}

/* Pricing overlay */
.fcz-overlay[b-qm926mzjb5] {
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

.fcz-overlay-topleft[b-qm926mzjb5] {
    top: 12px;
    left: 12px;
}

.fcz-overlay-card[b-qm926mzjb5] {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    pointer-events: auto;
}

.fcz-overlay-row[b-qm926mzjb5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 3px 0;
}

.fcz-overlay-row-sm[b-qm926mzjb5] {
    font-size: 12px;
}

.fcz-overlay-label[b-qm926mzjb5] {
    font-size: 13px;
    color: #666;
}

.fcz-overlay-value[b-qm926mzjb5] {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
}

.fcz-accent[b-qm926mzjb5] {
    color: var(--accent-fill-rest);
}

.fcz-overlay-divider[b-qm926mzjb5] {
    height: 1px;
    background: #e0e0e0;
    margin: 6px 0;
}
/* /Components/Pages/Workspaces/WorkspaceBoundaryTab.razor.rz.scp.css */
.wb-container[b-jrol5xr0aw] {
    display: flex;
    height: 100%;
    min-height: 600px;
    gap: 0;
    border-radius: var(--layer-corner-radius);
    overflow: visible;
    border: 1px solid var(--neutral-stroke-rest);
}

/* Panel 1: Controls (city/town selectors + selected tags) */
.wb-controls-panel[b-jrol5xr0aw] {
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border-right: 1px solid var(--neutral-stroke-rest);
    overflow: visible;
}

.wb-panel-header[b-jrol5xr0aw] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.wb-actions[b-jrol5xr0aw] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.wb-search-box[b-jrol5xr0aw] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    overflow: visible;
}

/* Selected summary */
.wb-selected-summary[b-jrol5xr0aw] {
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.wb-selected-header[b-jrol5xr0aw] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-bottom: 6px;
}

.wb-selected-tags[b-jrol5xr0aw] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.wb-tag[b-jrol5xr0aw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--accent-fill-rest);
    color: var(--accent-foreground-cut-rest, #fff);
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
}

.wb-tag-unknown[b-jrol5xr0aw] {
    background: var(--neutral-fill-rest);
    color: var(--neutral-foreground-rest);
}

.wb-tag-remove[b-jrol5xr0aw] {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
    margin-left: 2px;
}

.wb-tag-remove:hover[b-jrol5xr0aw] {
    opacity: 1;
}

/* Panel 2: District list */
.wb-districts-panel[b-jrol5xr0aw] {
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border-right: 1px solid var(--neutral-stroke-rest);
    overflow-y: auto;
}

.wb-loading[b-jrol5xr0aw] {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.wb-no-results[b-jrol5xr0aw] {
    padding: 16px;
    text-align: center;
}

.wb-district-list[b-jrol5xr0aw] {
    flex: 1;
    overflow-y: auto;
}

.wb-district-item[b-jrol5xr0aw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 12px 5px 16px;
    transition: background 0.1s ease;
}

.wb-district-item:hover[b-jrol5xr0aw] {
    background: var(--neutral-layer-2);
}

.wb-district-item.selected[b-jrol5xr0aw] {
    background: var(--neutral-layer-2);
}

.wb-district-info[b-jrol5xr0aw] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.wb-district-name[b-jrol5xr0aw] {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wb-cell-count[b-jrol5xr0aw] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
}

/* Panel 3: Map area */
.wb-map-area[b-jrol5xr0aw] {
    flex: 1;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.wb-map[b-jrol5xr0aw] {
    width: 100%;
    height: 100%;
    min-height: 600px;
}

.wb-map-loading[b-jrol5xr0aw] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
/* /Components/Pages/Workspaces/WorkspaceDetails.razor.rz.scp.css */
.workspace-page-container[b-4k3katm1sc] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    padding: 1rem;
    gap: 1rem;
    overflow: hidden;
}

.workspace-main-content[b-4k3katm1sc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 500px;
}

.workspace-tabs-container[b-4k3katm1sc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workspace-tab-panel[b-4k3katm1sc] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workspace-tab-panel > fluent-card[b-4k3katm1sc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* /Components/Pages/Workspaces/Workspaces.razor.rz.scp.css */
/* Workspaces list page — header + filter bar.
   Reuses global .page-container / .page-title / .fbar / .ds-* ; only the
   page-specific header stack and search width are defined here. */

/* Inherits the canonical .page-header row (title left / filter bar right).
   Only aligns to the top so the multi-line description doesn't vertically
   centre the filter bar against it. */
.wsp-header[b-2cp9eccjiq] {
    align-items: flex-start;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .wsp-header[b-2cp9eccjiq] { flex-direction: column; align-items: stretch; }
}

.wsp-head-text[b-2cp9eccjiq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.wsp-desc[b-2cp9eccjiq] {
    margin: 0;
    max-width: 70ch;
    font-size: var(--small-size, 0.875rem);
    line-height: var(--leading-normal, 1.6);
    color: var(--fg-hint, #64748b);
}

.wsp-search[b-2cp9eccjiq] {
    width: 220px;
}

@media (max-width: 520px) {
    .wsp-search[b-2cp9eccjiq] { width: 100%; }
}
/* /Components/Pages/Workspaces/WorkspacesGrid.razor.rz.scp.css */
/* WorkspacesGrid — cell chrome for the AppDataGrid.
   Reuses global .icon-text / .cell-primary / .ds-checkbox ; only the
   workspace-specific accents (name icon, name link, global-pool tag,
   action row, muted dash) are defined here. */

.wg-name-ico[b-5o7yqbimr0] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--accent, #036ac4);
}

.wg-name-ico[b-5o7yqbimr0]  svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.wg-link[b-5o7yqbimr0] {
    color: var(--accent, #036ac4);
    font-weight: 500;
    text-decoration: none;
}

.wg-link:hover[b-5o7yqbimr0] {
    text-decoration: underline;
}

.wg-link:focus-visible[b-5o7yqbimr0] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
    border-radius: 3px;
}

.wg-tag[b-5o7yqbimr0] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    background: var(--accent-soft, #eff6ff);
    color: var(--accent, #036ac4);
    font-size: var(--xs-size, 0.75rem);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.wg-actions[b-5o7yqbimr0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
}

.wg-muted[b-5o7yqbimr0] {
    color: var(--fg-hint, #64748b);
    font-size: var(--xs-size, 0.75rem);
}
/* /Components/Shared/AdminScopeFilter.razor.rz.scp.css */
.asf-select[b-x2ywe21ja8] { min-width: 180px; }
/* /Components/Shared/AdToastProvider.razor.rz.scp.css */
/* AdToastProvider — adisyon-design admin-app toast spec.
   Premium & compact: crisp white card, small colored glyph (no tinted box), no side stripe,
   tight type, soft layered shadow. Colours/type/radius come from the runtime --ds-* tokens;
   the hairline border + layered shadow are the spec's bespoke values (no token equivalent). */

.ad-toast-region[b-3iikb5i3se] {
    position: fixed;
    top: var(--ds-space-5);   /* 24px */
    right: var(--ds-space-5);
    z-index: 2147483000;      /* above dialogs/overlays — toasts are the top-most layer */
    display: flex;
    flex-direction: column;
    gap: 9px;                 /* spec stack gap */
    width: 340px;             /* spec toast width */
    max-width: calc(100vw - var(--ds-space-6));
    pointer-events: none;     /* let clicks fall through the gaps; toasts re-enable below */
}

.ad-toast[b-3iikb5i3se] {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--ds-surface);
    /* Gölge yok: yuvarlak köşelerde bantlanma/glitch yapıyordu. Ayrışma biraz
       koyulaştırılmış hairline border ile sağlanıyor. */
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: var(--ds-radius-md);          /* 12px */
    padding: 12px 14px;
    animation: ad-toast-in-b-3iikb5i3se var(--ds-dur) var(--ds-ease);
}

.ad-toast__glyph[b-3iikb5i3se] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-toast__glyph svg[b-3iikb5i3se] {
    width: 19px;
    height: 19px;
}

.ad-toast--success .ad-toast__glyph[b-3iikb5i3se] { color: var(--ds-success); }
.ad-toast--warning .ad-toast__glyph[b-3iikb5i3se] { color: var(--ds-warning); }
.ad-toast--error   .ad-toast__glyph[b-3iikb5i3se] { color: var(--ds-danger); }
.ad-toast--info    .ad-toast__glyph[b-3iikb5i3se] { color: var(--ds-info); }

.ad-toast__body[b-3iikb5i3se] {
    flex: 1;
    min-width: 0;
}

.ad-toast__title[b-3iikb5i3se] {
    font-family: var(--ds-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text);
    letter-spacing: -0.01em;
    line-height: 1.35;
    word-break: break-word;
}

.ad-toast__close[b-3iikb5i3se] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-text-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease, background 0.12s ease;
}

.ad-toast__close svg[b-3iikb5i3se] {
    width: 13px;
    height: 13px;
}

.ad-toast__close:hover[b-3iikb5i3se] {
    background: rgba(15, 23, 42, 0.05);
    color: var(--ds-text-muted);
}

.ad-toast__close:focus-visible[b-3iikb5i3se] {
    outline: 2px solid var(--ds-info);
    outline-offset: 2px;
}

@keyframes ad-toast-in-b-3iikb5i3se {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Phones: span the width with safe insets. */
@media (max-width: 600px) {
    .ad-toast-region[b-3iikb5i3se] {
        top: var(--ds-space-3);
        right: var(--ds-space-3);
        left: var(--ds-space-3);
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ad-toast[b-3iikb5i3se] { animation: none; }
    .ad-toast__close[b-3iikb5i3se] { transition: none; }
}
/* /Components/Shared/AppAutocomplete.razor.rz.scp.css */
.aac[b-2oxa47016f] { position: relative; }

.aac-input[b-2oxa47016f] { width: 100%; }

.aac-backdrop[b-2oxa47016f] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.aac-pop[b-2oxa47016f] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--layer-floating, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
}

.aac-opt[b-2oxa47016f] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--fg-1);
    font: inherit;
    font-size: var(--small-size);
    cursor: pointer;
}

.aac-opt:hover[b-2oxa47016f],
.aac-opt.is-active[b-2oxa47016f] {
    background: var(--accent-soft);
    color: var(--brand-600);
}

.aac-empty[b-2oxa47016f] {
    padding: 10px;
    color: var(--fg-hint);
    font-size: var(--small-size);
    text-align: center;
}
/* /Components/Shared/AppButton.razor.rz.scp.css */
.ab[b-0iacnso1v5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease,
                box-shadow 120ms ease, transform 80ms ease;
    user-select: none;
    white-space: nowrap;
}

/* ── Sizes ───────────────────────────────────────────────────── */

.ab--sm[b-0iacnso1v5] { padding: 6px 12px; min-height: 32px; font-size: 13px; border-radius: 8px; }
.ab--md[b-0iacnso1v5] { padding: 10px 18px; min-height: 40px; font-size: 14px; }
.ab--lg[b-0iacnso1v5] { padding: 14px 22px; min-height: 48px; font-size: 15px; border-radius: 12px; }

.ab--full[b-0iacnso1v5] { width: 100%; }

.ab:active:not(:disabled)[b-0iacnso1v5] {
    transform: translateY(1px);
}

.ab:disabled[b-0iacnso1v5] {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.ab:focus-visible[b-0iacnso1v5] {
    outline: 2px solid #036ac4;
    outline-offset: 2px;
}

.ab-icon[b-0iacnso1v5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ab-icon[b-0iacnso1v5]  svg {
    width: 16px;
    height: 16px;
}
/* Filled icons (FluentIcon etc.) — svg has no fill="none": color via fill.
   Inherits the button's text color (white on the blue primary, no blue-on-blue). */
.ab-icon[b-0iacnso1v5]  svg:not([fill="none"]),
.ab-icon[b-0iacnso1v5]  svg:not([fill="none"]) path {
    fill: currentColor;
}
/* Outline (stroke) icons — Feather/Lucide: svg has fill="none" stroke="currentColor".
   Color via stroke; never force-fill them into a solid blob (print icon etc. looked solid black). */
.ab-icon[b-0iacnso1v5]  svg[fill="none"] {
    stroke: currentColor;
}

.ab-label[b-0iacnso1v5] {
    display: inline-block;
    line-height: 1;
}

/* ── Variants ────────────────────────────────────────────────── */

/* Coloured (white-text) buttons: any nested brand loader "a" renders white
   instead of brand-blue-on-blue. Custom property inherits to descendants. */
.ab--primary[b-0iacnso1v5], .ab--danger[b-0iacnso1v5] { --al-ink: #ffffff; }

.ab--primary[b-0iacnso1v5] {
    background: #036ac4;
    color: #ffffff;
    border-color: #036ac4;
    box-shadow: 0 1px 2px rgba(3, 106, 196, 0.18), 0 6px 18px rgba(3, 106, 196, 0.24);
}

.ab--primary:hover:not(:disabled)[b-0iacnso1v5] {
    background: #025aa6;
    border-color: #025aa6;
}

.ab--ghost[b-0iacnso1v5] {
    background: transparent;
    color: #475569;
    border-color: #e2e8f0;
}

.ab--ghost:hover:not(:disabled)[b-0iacnso1v5] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

.ab--danger[b-0iacnso1v5] {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.18), 0 6px 18px rgba(220, 38, 38, 0.22);
}

.ab--danger:hover:not(:disabled)[b-0iacnso1v5] {
    background: #b91c1c;
    border-color: #b91c1c;
}

.ab--subtle[b-0iacnso1v5] {
    background: transparent;
    color: #036ac4;
    border-color: transparent;
}

.ab--subtle:hover:not(:disabled)[b-0iacnso1v5] {
    background: rgba(3, 106, 196, 0.08);
}
/* /Components/Shared/AppInfo.razor.rz.scp.css */
.app-info[b-d2pi5uad9q] {
    display: inline-flex;
    align-items: center;
    color: var(--fg-hint);
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
}
.app-info:hover[b-d2pi5uad9q],
.app-info:focus-visible[b-d2pi5uad9q] { color: var(--accent); outline: none; }
.app-info svg[b-d2pi5uad9q] { display: block; }
/* /Components/Shared/AppMenu.razor.rz.scp.css */
.app-menu[b-t8phjyxg6e] {
    position: relative;
    display: inline-block;
}

.app-menu__trigger[b-t8phjyxg6e] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 32px;
    padding: 6px 12px;
    font: inherit;
    font-size: var(--small-size, 14px);
    color: var(--fg-1, #0f172a);
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 10px);
    cursor: pointer;
    transition: border-color var(--dur-fast, 150ms) ease, background var(--dur-fast, 150ms) ease;
}

.app-menu__trigger:hover[b-t8phjyxg6e] {
    border-color: var(--border-strong, #cbd5e1);
    background: var(--bg-muted, #f8fafc);
}

.app-menu__trigger:focus-visible[b-t8phjyxg6e] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
}

.app-menu__label[b-t8phjyxg6e] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-menu__chev[b-t8phjyxg6e] {
    display: inline-flex;
    color: var(--fg-hint, #64748b);
}

.app-menu__chev[b-t8phjyxg6e]  svg {
    width: 16px;
    height: 16px;
}

.app-menu__backdrop[b-t8phjyxg6e] {
    position: fixed;
    inset: 0;
    /* Above AppModal (9999) so a menu opened inside a dialog still dismisses on outside click. */
    z-index: 10000;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: default;
}

/* Off-screen start: dsDropdown.position (scale-aware) lifts this to the viewport-fixed
   layer and anchors it under the trigger, so no ancestor `overflow: hidden|auto`
   (data-grid scroller, card, split pane) can clip it. */
.app-menu__panel[b-t8phjyxg6e] {
    position: fixed;
    top: -9999px;
    left: -9999px;
    z-index: 10001;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-1, 4px);
    background: var(--layer-floating, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-xl, 12px);
    box-shadow: var(--shadow-xl, 0 20px 45px rgba(15, 23, 42, 0.16));
}

/* Item / check / divider markup is supplied as ChildContent by the caller, so it carries the
   caller's scope, not this component's. Reach it through ::deep on the panel we own. */
.app-menu__panel[b-t8phjyxg6e]  .app-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: var(--small-size, 14px);
    color: var(--fg-1, #0f172a);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
}

.app-menu__panel[b-t8phjyxg6e]  .app-menu-item:hover:not(:disabled) {
    background: var(--bg-subtle, #f1f5f9);
}

.app-menu__panel[b-t8phjyxg6e]  .app-menu-item:focus-visible {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: -2px;
}

.app-menu__panel[b-t8phjyxg6e]  .app-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.app-menu__panel[b-t8phjyxg6e]  .app-menu-item__icon {
    display: inline-flex;
    color: var(--fg-hint, #64748b);
}

.app-menu__panel[b-t8phjyxg6e]  .app-menu-item__icon svg {
    width: 18px;
    height: 18px;
}

/* Checkbox rows used inside sticky (CloseOnSelect=false) menus */
.app-menu__panel[b-t8phjyxg6e]  .app-menu__check {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: var(--small-size, 14px);
    color: var(--fg-1, #0f172a);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
}

.app-menu__panel[b-t8phjyxg6e]  .app-menu__check:hover {
    background: var(--bg-subtle, #f1f5f9);
}

.app-menu__panel[b-t8phjyxg6e]  .app-menu__check input {
    accent-color: var(--accent, #036ac4);
    width: 16px;
    height: 16px;
}

.app-menu__panel[b-t8phjyxg6e]  .app-menu__divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--border-subtle, #f1f5f9);
}
/* /Components/Shared/AppMenuGrid.razor.rz.scp.css */
/* Panel, üst şeridin (52px) hemen altından açılır. admin-main position:relative olduğundan
   absolute burada ona göre konumlanır — layout-scale transform sarmalayıcısının dışında,
   dolayısıyla ölçekten etkilenmez. */
.amg-scrim[b-w5tyqa38hc] {
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 40;
    animation: amgFade-b-w5tyqa38hc 0.18s ease;
}

.app-menu-grid[b-w5tyqa38hc] {
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 41;
    max-height: calc(100vh - 52px);
    overflow-y: auto;
    padding: var(--space-5) var(--space-5) var(--space-6);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    animation: amgDrop-b-w5tyqa38hc 0.18s ease;
}

@keyframes amgFade-b-w5tyqa38hc {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes amgDrop-b-w5tyqa38hc {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.amg-group[b-w5tyqa38hc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Eyebrow başlık — UPPERCASE + letter-spacing (adisyon-design). */
.amg-group-title[b-w5tyqa38hc] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-hint);
    padding-left: var(--space-1);
}

.amg-tiles[b-w5tyqa38hc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--space-3);
}

/* Büyük kare dokunmatik döşeme. */
.amg-tile[b-w5tyqa38hc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 104px;
    padding: var(--space-4) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg);
    color: var(--fg-2);
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.amg-tile:hover[b-w5tyqa38hc] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.amg-tile:active[b-w5tyqa38hc] {
    transform: translateY(0);
    box-shadow: none;
}

.amg-tile:focus-visible[b-w5tyqa38hc] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.amg-tile-icon[b-w5tyqa38hc] {
    display: inline-flex;
    color: var(--accent);
}

.amg-tile-icon[b-w5tyqa38hc]  svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.amg-tile-label[b-w5tyqa38hc] {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fg-1);
}

@media (max-width: 640px) {
    .amg-tiles[b-w5tyqa38hc] {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    }

    .amg-tile[b-w5tyqa38hc] {
        min-height: 92px;
    }
}

/* Mobilde menü erişimi zaten üst çubuk çekmecesiyle (NavMenu) sağlanır; ızgara paneli
   gizlenir ki tek bir menü yüzeyi kalsın. Menü düğmesi de mobilde gizlidir (AppNavBar). */
@media (max-width: 768px) {
    .amg-scrim[b-w5tyqa38hc],
    .app-menu-grid[b-w5tyqa38hc] {
        display: none;
    }
}
/* /Components/Shared/AppModal.razor.rz.scp.css */
.am-backdrop[b-iix7dv50th] {
    position: fixed;
    inset: 0;
    /* Soft slate dim — the page beneath stays visible (so users keep
       their orientation) but the modal still owns the focal point. */
    background: rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    /* Side gutter + top/bottom breathing room so the card never feels
       glued to the viewport edge. The 24px breathing room is also what
       the inner `calc(100dvh - 48px)` MaxHeight defaults assume. */
    padding: 24px;
    animation: am-fade-in-b-iix7dv50th 160ms ease-out;
}

/* Nested prompts (ConfirmationModal) must clear the modal that raised them,
   even when that modal is rendered later in the DOM (MainLayout hosts). */
.am-backdrop--top[b-iix7dv50th] { z-index: 10050; }

@media (max-width: 480px) {
    .am-backdrop[b-iix7dv50th] { padding: 12px; }
}

.am-card[b-iix7dv50th] {
    position: relative;
    width: 100%;
    /* Cap so long lists (StoreStatusModal etc.) scroll INSIDE the card
       instead of stretching the modal to fill the viewport. The min()
       gives us "always small enough to feel like a dialog, never larger
       than the viewport". Flex column + the .am-body overflow rule below
       turns this into a scrollable mid-section sandwiched between the
       fixed header and the sticky footer. */
    max-height: min(720px, calc(100vh - 32px));
    max-height: min(720px, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 24px 64px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(15, 23, 42, 0.04);
    animation: am-pop-in-b-iix7dv50th 220ms cubic-bezier(0.16, 1, 0.3, 1);
    color: #0f172a;
}

.am-close[b-iix7dv50th] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.am-close:hover[b-iix7dv50th] {
    background: #f1f5f9;
    color: #475569;
}

.am-close:focus-visible[b-iix7dv50th] {
    outline: 2px solid #036ac4;
    outline-offset: 2px;
}

/* Larger glyph than the inline 16px SVG attributes — CSS wins over the
   width/height presentation attributes, so every AppModal gets it. */
.am-close svg[b-iix7dv50th] {
    width: 20px;
    height: 20px;
}

.am-header[b-iix7dv50th] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.am-icon[b-iix7dv50th] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
}

/* Callers may declare the Icon slot but render nothing inside (e.g. the
   logo branch in StoreInfoMapDialog when the menu has no LogoUrl). Hide
   the empty chip so the header collapses to just the title. */
.am-icon:empty[b-iix7dv50th] { display: none; }

.am-icon--sm[b-iix7dv50th] { width: 28px; height: 28px; }
.am-icon--lg[b-iix7dv50th] { width: 56px; height: 56px; border-radius: 12px; }

.am-icon--sm[b-iix7dv50th]  svg { width: 18px; height: 18px; }
.am-icon--lg[b-iix7dv50th]  svg { width: 32px; height: 32px; }

/* Logo branch — when caller passes an <img>, fill the icon box and
   drop the variant tint so the brand stands on its own. */
.am-icon[b-iix7dv50th]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.am-icon--warning[b-iix7dv50th] { background: #fef3c7; color: #b45309; }
.am-icon--info[b-iix7dv50th]    { background: #dbeafe; color: #1d4ed8; }
.am-icon--danger[b-iix7dv50th]  { background: #fee2e2; color: #b91c1c; }
.am-icon--success[b-iix7dv50th] { background: #dcfce7; color: #047857; }
.am-icon--neutral[b-iix7dv50th] { background: #f1f5f9; color: #475569; }

.am-title[b-iix7dv50th] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: #0f172a;
}

.am-sub[b-iix7dv50th] {
    margin: 4px 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
}

.am-body[b-iix7dv50th] {
    margin-bottom: 20px;
    /* Take the remaining vertical space inside .am-card (which is flex
       column) and scroll any overflow. min-height: 0 lets the body
       actually shrink below its content size — without it, flex children
       refuse to shrink and scroll never engages. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Pull a tiny gutter so the scrollbar doesn't visually clip the
       rightmost row content. */
    margin-right: -8px;
    padding-right: 8px;
}

/* Workbench modals opt out of body scroll: the inner panes own their own
   scroll regions (categories rail / products grid / order items list) so
   the outer body must not also scroll on top of them. */
.am-body--no-scroll[b-iix7dv50th] {
    overflow: hidden;
    margin-right: 0;
    padding-right: 0;
}

.am-body:last-child[b-iix7dv50th] {
    margin-bottom: 0;
}

.am-actions[b-iix7dv50th] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    /* Sticky-feel footer — never gets eaten by an overflowing body. */
    flex-shrink: 0;
}

/* Header + subtitle don't shrink, so they always read at the top. */
.am-header[b-iix7dv50th],
.am-sub[b-iix7dv50th] { flex-shrink: 0; }

@keyframes am-fade-in-b-iix7dv50th {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes am-pop-in-b-iix7dv50th {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .am-card[b-iix7dv50th] { padding: 24px 20px 20px; border-radius: 18px; }
    .am-title[b-iix7dv50th] { font-size: 17px; }
    .am-actions[b-iix7dv50th] { flex-direction: column-reverse; }
    .am-actions[b-iix7dv50th]  .ab { width: 100%; }
}
/* /Components/Shared/AppNavBar.razor.rz.scp.css */
.app-navbar[b-hj7xbscp7q] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
    height: 52px;
    padding: 0 var(--space-3);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.app-navbar-nav[b-hj7xbscp7q] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Marka logosu (yalnız yüzen/ızgara modda, ray gizliyken) — Damion el yazısı, menü düğmesinin solunda. */
.app-navbar-brand[b-hj7xbscp7q] {
    font-family: 'Damion', cursive;
    font-size: 24px;
    line-height: 1;
    color: var(--accent);
    text-decoration: none;
    padding: 0 var(--space-2) 0 var(--space-1);
    flex: 0 0 auto;
    transition: color 0.2s ease;
}

.app-navbar-brand:hover[b-hj7xbscp7q] {
    color: var(--accent-hover);
}

.app-navbar-brand:focus-visible[b-hj7xbscp7q] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Dokunmatik restoran PC'leri için ≥44px dokunma hedefi (Apple HIG / Material). */
.app-navbar-btn[b-hj7xbscp7q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
    color: var(--fg-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.app-navbar-btn:hover:not(:disabled)[b-hj7xbscp7q] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.app-navbar-btn:active:not(:disabled)[b-hj7xbscp7q] {
    transform: translateY(0.5px);
    background: var(--accent-soft);
}

.app-navbar-btn:disabled[b-hj7xbscp7q] {
    opacity: 0.4;
    cursor: default;
}

.app-navbar-btn:focus-visible[b-hj7xbscp7q] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.app-navbar-btn[b-hj7xbscp7q]  svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Menü düğmesi (yalnız yüzen/ızgara modda) — yumuşak marka tonu, ayırıcı ile ayrılmış.
   Açık "Menü" etiketi taşır: sabit 44px kare değil, etikete göre genişleyen bir hap. */
.app-navbar-btn--menu[b-hj7xbscp7q] {
    width: auto;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--accent);
    margin-right: var(--space-2);
}

/* "Menü" etiketi — düğmenin bir menü olduğunu net anlatır. Çok dar ekranlarda gizlenir. */
.app-navbar-menu-label[b-hj7xbscp7q] {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Hover'da solid masmavi DOLGU yapma — yalnız tonu bir tık koyulaştır + kenarlığı belirginleştir. */
.app-navbar-btn--menu:hover:not(:disabled)[b-hj7xbscp7q] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}

/* Mobilde menü, üst çubuk çekmecesiyle açılır — şerit menü düğmesi gizlenir (çift giriş olmasın). */
@media (max-width: 768px) {
    .app-navbar-btn--menu[b-hj7xbscp7q] {
        display: none;
    }
}

.app-navbar-crumbs[b-hj7xbscp7q] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    overflow: hidden;
}

/* Sağa yaslı küme (cüzdan + profil) — yüzen/ızgara modda ray gizli olduğu için buraya taşınır. */
.app-navbar-trailing[b-hj7xbscp7q] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    padding-left: var(--space-3);
}

.app-navbar-crumb[b-hj7xbscp7q] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.app-navbar-crumb a[b-hj7xbscp7q] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fg-hint);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color 0.25s ease, background 0.25s ease;
}

.app-navbar-crumb a:hover[b-hj7xbscp7q] {
    color: var(--accent);
    background: var(--bg-subtle);
}

.app-navbar-crumb a:focus-visible[b-hj7xbscp7q] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Kırıntı ayracı — mevcut sayfa şeritte gösterilmediği için son kırıntıdan sonra da
   "›" kalır: "bu sayfanın üstü" okunur. Dekoratiftir. */
.app-navbar-crumb[b-hj7xbscp7q]::after {
    content: "›";
    color: var(--fg-disabled);
    font-size: 0.8rem;
}
/* /Components/Shared/AppPinInput.razor.rz.scp.css */
/* AppPinInput — görünmez gerçek input + görsel kutular. */

.apin[b-gywphm0lib] {
    position: relative;
    display: inline-block;
}

/* Gerçek alan: kutuların tamamını kaplar, metni ve caret'i görünmez.
   Görünmezlik `opacity: 0` ile YAPILMIYOR — odak halkası ve ekran okuyucu
   davranışı için element gerçekten görünür kalmalı, yalnız içeriği şeffaf. */
.apin__field[b-gywphm0lib] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font: inherit;
    letter-spacing: 1em;
    text-align: center;
    cursor: text;
    z-index: 1;
}

.apin__field:focus[b-gywphm0lib] {
    outline: none;
}

.apin__field:disabled[b-gywphm0lib] {
    cursor: not-allowed;
}

.apin__boxes[b-gywphm0lib] {
    display: flex;
    gap: var(--space-3);
}

.apin__box[b-gywphm0lib] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 60px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-xl);
    background: var(--bg);
    transition: border-color var(--ds-dur-fast) var(--ds-ease),
                box-shadow var(--ds-dur-fast) var(--ds-ease),
                background var(--ds-dur-fast) var(--ds-ease);
}

.apin__box.is-filled[b-gywphm0lib] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Sıradaki kutu — odaklıyken nereye yazıldığını gösterir. `:focus-visible`
   karşılığı: alan odaklandığında halka burada beliriyor. */
.apin__box.is-active[b-gywphm0lib] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.18);
}

.apin__dot[b-gywphm0lib] {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.apin.is-error .apin__box[b-gywphm0lib] {
    border-color: var(--danger-500);
}

.apin.is-error .apin__box.is-filled[b-gywphm0lib] {
    background: var(--danger-50);
}

.apin.is-error .apin__dot[b-gywphm0lib] {
    background: var(--danger-600);
}

.apin.is-error .apin__box.is-active[b-gywphm0lib] {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.apin.is-disabled .apin__box[b-gywphm0lib] {
    opacity: 0.55;
    background: var(--bg-subtle);
}

@media (max-width: 480px) {
    .apin__box[b-gywphm0lib] {
        width: 46px;
        height: 54px;
    }
}
/* /Components/Shared/AppQuickDock.razor.rz.scp.css */
/* ===== Floating quick-access dock ===== */
/* The FAB is a labelled pill anchor placed FREELY by quickDock.js (left/top — any
   corner, top, bottom; the JS measures the rendered size for clamping). The
   speed-dial stack is absolutely positioned off the FAB and opens toward
   screen-center (up/down + left/right) based on where the FAB sits, so every
   position works and the FAB itself never shifts when the stack expands. */
.qd[b-7ifi5ukbf1] {
    position: fixed;
    top: 40%;
    right: 20px;
    width: max-content;
    height: 62px;
    z-index: 900;
    box-sizing: border-box;
    transition: none;
}

/* Outside-click dismiss is handled by a document pointerdown listener (quickDock.js),
   NOT a full-screen scrim — a fixed inset:0 catcher would block page scrolling while
   the dock is open. */

/* ----- Speed-dial stack (absolute → never moves the FAB) ----- */
.qd-stack[b-7ifi5ukbf1] {
    position: absolute;
    display: flex;
    gap: 10px;
}

/* Vertical open direction: FAB in lower half → rise above it; upper half → drop below.
   column-reverse on "down" keeps the primary action nearest the FAB (top of the list). */
.qd--up .qd-stack[b-7ifi5ukbf1] {
    bottom: calc(100% + 12px);
    flex-direction: column;
}

.qd--down .qd-stack[b-7ifi5ukbf1] {
    top: calc(100% + 12px);
    flex-direction: column-reverse;
}

/* Horizontal alignment: pin pills to the FAB's edge, extend toward screen center. */
.qd--right .qd-stack[b-7ifi5ukbf1] {
    right: 0;
    align-items: flex-end;
}

.qd--left .qd-stack[b-7ifi5ukbf1] {
    left: 0;
    align-items: flex-start;
}

/* Touch-friendly pills — large enough to hit on a POS touchscreen. */
.qd-chip[b-7ifi5ukbf1] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    color: #334155;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
    animation: qd-rise-b-7ifi5ukbf1 0.18s ease both;
}

.qd-chip:hover[b-7ifi5ukbf1] {
    transform: translateY(-2px);
    border-color: #036ac4;
    color: #036ac4;
}

.qd-chip:focus-visible[b-7ifi5ukbf1] {
    outline: 2px solid #036ac4;
    outline-offset: 2px;
}

.qd-chip__icon[b-7ifi5ukbf1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* FluentIcon paints via <path fill> — force both the svg AND its paths to the chip's
   text colour (incl. the hover/primary flips) so the glyph never blends into the pill. */
.qd-chip__icon[b-7ifi5ukbf1]  svg {
    width: 22px;
    height: 22px;
    color: currentColor !important;
    fill: currentColor !important;
}

.qd-chip__icon[b-7ifi5ukbf1]  svg path {
    fill: currentColor !important;
}

/* Unread-count badge on a chip (e.g. "Destek" while a support reply waits).
   Solid red pill — attention semantics, distinct from the brand blue chrome. */
.qd-chip__badge[b-7ifi5ukbf1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Primary (accent-filled) action — e.g. "Yeni Sipariş" */
.qd-chip--primary[b-7ifi5ukbf1] {
    background: #036ac4;
    border-color: #036ac4;
    color: #ffffff;
}

.qd-chip--primary:hover[b-7ifi5ukbf1] {
    background: #0a7bd6;
    border-color: #0a7bd6;
    color: #ffffff;
    transform: translateY(-2px);
}

/* "Düzenle" — calmer tertiary chip */
.qd-chip--config[b-7ifi5ukbf1] {
    height: 42px;
    background: #f8fafc;
    border-color: #eef0f3;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.qd-chip--config:hover[b-7ifi5ukbf1] {
    background: #f1f5f9;
    border-color: #036ac4;
    color: #036ac4;
    transform: none;
}

/* ----- FAB ----- */
/* Labelled green pill (system success green) — reads as an action and stays
   distinct from the brand-blue primary chip; open state flips to slate so the
   "close" affordance is unmistakable. The label keeps the width identical in
   both states (same string), so the anchor never jumps. */
.qd-fab[b-7ifi5ukbf1] {
    position: relative;
    height: 62px;
    padding: 0 22px 0 18px;
    border: none;
    border-radius: 9999px;
    background: var(--brand-800, #0a4480);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    touch-action: none;
    box-shadow: 0 8px 24px rgba(10, 68, 128, 0.38);
    transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.qd-fab:hover[b-7ifi5ukbf1] {
    background: var(--brand-900, #0c3766);
    box-shadow: 0 10px 28px rgba(10, 68, 128, 0.48);
}

/* Brand mark — the cursive "a" of the adisyon.ai wordmark. Damion is loaded globally in
   app.css; the descender sits low so a small optical nudge keeps it centred in the pill. */
.qd-fab__mark[b-7ifi5ukbf1] {
    font-family: 'Damion', 'Brush Script MT', 'Segoe Script', cursive;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #ffffff;
    transform: translateY(-2px);
}

.qd-fab:active[b-7ifi5ukbf1] { transform: scale(0.96); }

.qd-fab:focus-visible[b-7ifi5ukbf1] {
    outline: 2px solid #036ac4;
    outline-offset: 3px;
}

.qd-fab__label[b-7ifi5ukbf1] {
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Summed attention badge pinned to the collapsed FAB's top corner — a white ring
   separates it from whatever background the FAB floats over. */
.qd-fab__badge[b-7ifi5ukbf1] {
    position: absolute;
    top: -5px;
    right: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 9999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #ffffff;
    box-sizing: content-box;
}

.qd-fab--open[b-7ifi5ukbf1] {
    background: #475569;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
}

.qd-fab--open:hover[b-7ifi5ukbf1] { background: #334155; }

/* Force the FAB glyph white — FluentIcon otherwise renders its own low-contrast fill
   that blends into the solid brand/grey circle (recurring gotcha). Override svg AND
   its paths with !important, since the icon paints via <path fill>. */
.qd-fab[b-7ifi5ukbf1]  svg {
    width: 26px;
    height: 26px;
    color: #ffffff !important;
    fill: #ffffff !important;
}

.qd-fab[b-7ifi5ukbf1]  svg path {
    fill: #ffffff !important;
}

/* While dragging, kill transitions so the dock tracks the pointer 1:1. */
.qd.qd-dragging[b-7ifi5ukbf1] {
    transition: none;
    cursor: grabbing;
}

.qd.qd-dragging .qd-fab[b-7ifi5ukbf1] { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.5); }

@keyframes qd-rise-b-7ifi5ukbf1 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .qd-chip[b-7ifi5ukbf1] { animation: none; }
    .qd-chip:hover[b-7ifi5ukbf1], .qd-chip--primary:hover[b-7ifi5ukbf1] { transform: none; }
}

/* ----- "Düzenle" config list (inside AppModal) ----- */
.qd-cfg-list[b-7ifi5ukbf1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qd-cfg-row[b-7ifi5ukbf1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 10px;
}

.qd-cfg-row.is-on[b-7ifi5ukbf1] { background: #eff6ff; }

.qd-cfg-icon[b-7ifi5ukbf1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: #5b6470;
    flex-shrink: 0;
}

.qd-cfg-icon[b-7ifi5ukbf1]  svg { width: 18px; height: 18px; color: currentColor !important; fill: currentColor !important; }
.qd-cfg-icon[b-7ifi5ukbf1]  svg path { fill: currentColor !important; }

.qd-cfg-label[b-7ifi5ukbf1] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qd-cfg-order[b-7ifi5ukbf1] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.qd-cfg-move[b-7ifi5ukbf1] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.qd-cfg-move:hover:not(:disabled)[b-7ifi5ukbf1] { background: #e2e8f0; color: #0f172a; }
.qd-cfg-move:disabled[b-7ifi5ukbf1] { opacity: 0.35; cursor: not-allowed; }
.qd-cfg-move:focus-visible[b-7ifi5ukbf1] { outline: 2px solid #036ac4; outline-offset: 1px; }
.qd-cfg-move[b-7ifi5ukbf1]  svg { width: 16px; height: 16px; fill: currentColor; }

/* Pill switch */
.qd-cfg-toggle[b-7ifi5ukbf1] {
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: #cbd5e1;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease;
}

.qd-cfg-toggle.is-on[b-7ifi5ukbf1] { background: #036ac4; }

.qd-cfg-toggle:focus-visible[b-7ifi5ukbf1] { outline: 2px solid #036ac4; outline-offset: 2px; }

.qd-cfg-knob[b-7ifi5ukbf1] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}

.qd-cfg-toggle.is-on .qd-cfg-knob[b-7ifi5ukbf1] { transform: translateX(18px); }
/* /Components/Shared/AppTokenRateList.razor.rz.scp.css */
.tr-wrap[b-pzpxlokhqq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tr-list[b-pzpxlokhqq] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Açıldığında 20+ satır sayfayı uzatmasın — liste kendi içinde kayar. */
.tr-list--expanded[b-pzpxlokhqq] {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.tr-row[b-pzpxlokhqq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px dashed #e2e8f0;
}

.tr-row:last-child[b-pzpxlokhqq] {
    border-bottom: none;
}

.tr-row-left[b-pzpxlokhqq] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tr-row-icon[b-pzpxlokhqq] {
    display: inline-flex;
    flex-shrink: 0;
    color: #64748b;
}

.tr-row-icon[b-pzpxlokhqq]  svg {
    width: 20px;
    height: 20px;
}

.tr-row-text[b-pzpxlokhqq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tr-row-title[b-pzpxlokhqq] {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}

.tr-row-sub[b-pzpxlokhqq] {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.3;
    margin-top: 1px;
}

.tr-row-right[b-pzpxlokhqq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.tr-row-amount[b-pzpxlokhqq] {
    font-size: 14px;
    font-weight: 700;
    color: #036ac4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tr-row-pill[b-pzpxlokhqq] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tr-row-pill--covered[b-pzpxlokhqq] {
    background: #ecfdf5;
    color: #065f46;
}

.tr-row-pill--metered[b-pzpxlokhqq] {
    background: #eff6ff;
    color: #1d4ed8;
}

.tr-toggle[b-pzpxlokhqq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: stretch;
    padding: 9px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tr-toggle:hover[b-pzpxlokhqq] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.tr-toggle:focus-visible[b-pzpxlokhqq] {
    outline: 2px solid #036ac4;
    outline-offset: 2px;
}

.tr-toggle-chevron[b-pzpxlokhqq] {
    display: inline-flex;
    color: #64748b;
    transition: transform 0.15s ease;
}

.tr-toggle-chevron[b-pzpxlokhqq]  svg {
    width: 16px;
    height: 16px;
}

.tr-toggle-chevron--up[b-pzpxlokhqq] {
    transform: rotate(180deg);
}

.tr-note[b-pzpxlokhqq] {
    margin: 0;
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 520px) {
    .tr-row[b-pzpxlokhqq] {
        align-items: flex-start;
    }

    .tr-row-right[b-pzpxlokhqq] {
        align-items: flex-end;
    }
}
/* /Components/Shared/AppUnitSelect.razor.rz.scp.css */
.aus[b-xfidww5w1t] { position: relative; display: inline-flex; }

.aus-backdrop[b-xfidww5w1t] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* ---------- trigger ---------- */
.aus-trigger[b-xfidww5w1t] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-sizing: border-box;
    background: var(--bg-muted);
    color: var(--fg-1);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.aus-trigger:disabled[b-xfidww5w1t] { opacity: .5; cursor: not-allowed; }
.aus-trigger:focus-visible[b-xfidww5w1t] { outline: 2px solid var(--accent); outline-offset: 2px; }
.aus-trigger:hover:not(:disabled)[b-xfidww5w1t] { background: var(--accent-soft); color: var(--brand-600); }

.aus-caret[b-xfidww5w1t] { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); opacity: .7; }
.aus.is-open .aus-caret[b-xfidww5w1t] { transform: rotate(180deg); }

/* Variant: right-attached addon for the base-quantity field */
.aus-trigger--addon[b-xfidww5w1t] {
    padding: 0 10px;
    height: 40px;
    border: 1px solid var(--border);
    border-left: none;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* Variant: standalone field (matches .ds-select footprint) */
.aus-trigger--field[b-xfidww5w1t] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    font-weight: 500;
}
.aus--compact .aus-trigger--field[b-xfidww5w1t] { padding: 9px 10px; }
.aus--compact[b-xfidww5w1t] { display: flex; }
.aus--compact .aus-trigger[b-xfidww5w1t] { width: 100%; }

/* ---------- popup ---------- */
.aus-pop[b-xfidww5w1t] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: aus-in-b-xfidww5w1t var(--dur-fast, 150ms) var(--ease-out, ease);
}

@keyframes aus-in-b-xfidww5w1t {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aus-opt[b-xfidww5w1t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-1);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.aus-opt:hover[b-xfidww5w1t] { background: var(--bg-muted); }
.aus-opt:focus-visible[b-xfidww5w1t] { outline: 2px solid var(--accent); outline-offset: -2px; }
.aus-opt.is-selected[b-xfidww5w1t] { background: var(--accent-soft); color: var(--brand-600); font-weight: 600; }
.aus-opt__check[b-xfidww5w1t] { flex-shrink: 0; color: var(--brand-600); }
/* /Components/Shared/AutomationHelpButton.razor.rz.scp.css */
/* Otomasyon yardımı — satır içi ⓘ düğmesi + açıklama listesi (modal gövdesi). */

.auto-help[b-lkb45tyq5q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent, #036ac4);
    cursor: pointer;
    line-height: 0;
}

.auto-help[b-lkb45tyq5q]  svg { width: 14px; height: 14px; }

.auto-help:focus-visible[b-lkb45tyq5q] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
    border-radius: 2px;
}

.auto-help__list[b-lkb45tyq5q] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1, 4px);
    margin: 0;
}

.auto-help__list dt[b-lkb45tyq5q] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent, #036ac4);
}

.auto-help__list dd[b-lkb45tyq5q] {
    margin: 0 0 var(--ds-space-3, 12px);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ds-text-muted, #475569);
}

.auto-help__list dd:last-of-type[b-lkb45tyq5q] { margin-bottom: 0; }

.auto-help__note[b-lkb45tyq5q] {
    margin: var(--ds-space-3, 12px) 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ds-text-subtle, #94a3b8);
}
/* /Components/Shared/BulkAutomationModal.razor.rz.scp.css */
/* ============================================================
   BulkAutomationModal — toplu sipariş otomasyonu formu
   ============================================================ */

.bam[b-153lf3tfra] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    font-family: var(--ds-font-ui);
}

.bam__hint[b-153lf3tfra],
.bam__note[b-153lf3tfra] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ds-text-subtle);
}

.bam__row[b-153lf3tfra] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    transition: border-color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}

.bam__row.is-on[b-153lf3tfra] {
    border-color: var(--brand-600);
    background: var(--ds-surface-alt);
}

.bam__apply[b-153lf3tfra] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}

.bam__apply input[b-153lf3tfra] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-600);
    cursor: pointer;
    flex-shrink: 0;
}

.bam__apply input:focus-visible[b-153lf3tfra] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.bam__label[b-153lf3tfra] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.bam__value[b-153lf3tfra] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bam__state[b-153lf3tfra] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-subtle);
    white-space: nowrap;
}

.bam__min[b-153lf3tfra] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bam__minput[b-153lf3tfra] {
    width: 68px;
    text-align: center;
}

.bam__suffix[b-153lf3tfra] {
    font-size: 0.75rem;
    color: var(--ds-text-subtle);
}

.bam__help[b-153lf3tfra] {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ds-text-subtle);
}

@media (max-width: 560px) {
    .bam__row[b-153lf3tfra] { grid-template-columns: 1fr; }
    .bam__value[b-153lf3tfra] { justify-content: flex-start; }
}
/* /Components/Shared/BulkProgressModal.razor.rz.scp.css */
/* ============================================================
   BulkProgressModal — toplu işlem ilerlemesi (satır bazlı)
   ============================================================ */

.bpm[b-nux25zpatg] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    font-family: var(--ds-font-ui);
    min-height: 0;
}

/* ---- Üst özet ---- */
.bpm__head[b-nux25zpatg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bpm__bar[b-nux25zpatg] {
    height: 6px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-sunken);
    overflow: hidden;
}

.bpm__bar-fill[b-nux25zpatg] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-600);
    transition: width var(--ds-dur-normal, 200ms) var(--ds-ease);
}

.bpm__counts[b-nux25zpatg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bpm__count[b-nux25zpatg] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    font-variant-numeric: tabular-nums;
}

.bpm__count--error[b-nux25zpatg] { color: var(--ds-danger); }

/* ---- Satırlar ---- */
.bpm__list[b-nux25zpatg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}

.bpm__row[b-nux25zpatg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.bpm__row:last-child[b-nux25zpatg] { border-bottom: none; }
.bpm__row--running[b-nux25zpatg] { background: var(--ds-surface-alt); }
.bpm__row--failed[b-nux25zpatg] { background: color-mix(in srgb, var(--ds-danger) 6%, var(--ds-surface)); }

.bpm__logo[b-nux25zpatg] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--ds-surface-sunken);
}

.bpm__logo--ph[b-nux25zpatg] { background: var(--ds-surface-sunken); }

.bpm__text[b-nux25zpatg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.bpm__label[b-nux25zpatg] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bpm__sub[b-nux25zpatg] {
    font-size: 0.6875rem;
    color: var(--ds-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bpm__state[b-nux25zpatg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    max-width: 46%;
}

.bpm__state-txt[b-nux25zpatg] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bpm__state-txt--muted[b-nux25zpatg] { color: var(--ds-text-subtle); font-weight: 500; }
.bpm__state-txt--err[b-nux25zpatg] { color: var(--ds-danger); }

.bpm__mark[b-nux25zpatg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bpm__mark--ok[b-nux25zpatg] { background: var(--ds-success); color: #fff; }
.bpm__mark--err[b-nux25zpatg] { background: var(--ds-danger); color: #fff; }

/* FluentIcon renkli zeminde currentColor'ı devralmıyor — beyaza zorla. */
.bpm__mark[b-nux25zpatg]  svg,
.bpm__mark[b-nux25zpatg]  svg path { fill: #fff !important; }


@media (max-width: 520px) {
    .bpm__state[b-nux25zpatg] { max-width: 40%; }
    .bpm__sub[b-nux25zpatg] { display: none; }
}
/* /Components/Shared/BusyModeModal.razor.rz.scp.css */
.bmm[b-jt4ofydqhe] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    font-family: var(--ds-font-ui);
}

.bmm__platform[b-jt4ofydqhe] {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.bmm__logo[b-jt4ofydqhe] {
    width: 28px; height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--ds-surface);
}
.bmm__logo--ph[b-jt4ofydqhe] { background: var(--ds-surface-sunken); }

.bmm__name[b-jt4ofydqhe] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ds-text);
}

.bmm__label[b-jt4ofydqhe] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted);
}

.bmm__durations[b-jt4ofydqhe] {
    display: flex;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--ds-space-2));
}

.bmm__dur[b-jt4ofydqhe] {
    flex: 1 1 0;
    min-width: 72px;
    padding: var(--ds-space-3) var(--ds-space-2);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition: border-color var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
}

.bmm__dur:hover:not(:disabled)[b-jt4ofydqhe] { border-color: var(--brand-600); }

.bmm__dur.is-active[b-jt4ofydqhe] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.bmm__dur:disabled[b-jt4ofydqhe] { opacity: 0.5; cursor: not-allowed; }

.bmm__dur:focus-visible[b-jt4ofydqhe] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.bmm__hint[b-jt4ofydqhe] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ds-text-muted);
}
/* /Components/Shared/CourierDetailMarkerPopup.razor.rz.scp.css */
.courier-popup-container[b-qe6kiwdi93] {
    width: 320px;
    max-width: 90vw;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    border: 1px solid #e1e5e9;
}

.courier-popup-header[b-qe6kiwdi93] {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.courier-avatar-wrapper[b-qe6kiwdi93] {
    position: relative;
    width: 48px;
    height: 48px;
}

.courier-avatar[b-qe6kiwdi93] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.status-indicator-avatar[b-qe6kiwdi93] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
}

.status-indicator-avatar.online[b-qe6kiwdi93] {
    background: #10b981;
}

.status-indicator-avatar.offline[b-qe6kiwdi93] {
    background: #ef4444;
}

.status-indicator-avatar.busy[b-qe6kiwdi93] {
    background: #f59e0b;
}

.courier-info[b-qe6kiwdi93] {
    flex: 1;
}

.courier-name-status[b-qe6kiwdi93] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.courier-name[b-qe6kiwdi93] {
    font-size: 16px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}

.courier-name:hover[b-qe6kiwdi93] {
    opacity: 0.8;
    text-decoration: underline;
}

.courier-status[b-qe6kiwdi93] {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: inline-block;
    width: fit-content;
}

.battery-indicator[b-qe6kiwdi93] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 12px;
}

.battery-icon[b-qe6kiwdi93] {
    font-size: 14px;
}

.battery-text[b-qe6kiwdi93] {
    font-size: 14px;
    font-weight: 600;
}

.battery-indicator.battery-low .battery-text[b-qe6kiwdi93] {
    color: #fca5a5;
}

.battery-indicator.battery-medium .battery-text[b-qe6kiwdi93] {
    color: #fde047;
}

.battery-indicator.battery-high .battery-text[b-qe6kiwdi93] {
    color: #86efac;
}

.courier-popup-body[b-qe6kiwdi93] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.courier-detail-row[b-qe6kiwdi93] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}

.courier-detail-row i[b-qe6kiwdi93] {
    width: 16px;
    height: 16px;
    color: #6b7280;
}

.courier-detail-row .label[b-qe6kiwdi93] {
    font-weight: 500;
    color: #6b7280;
    min-width: 120px;
}

.courier-detail-row .value[b-qe6kiwdi93] {
    font-weight: 600;
    color: #111827;
    flex: 1;
}

.badge[b-qe6kiwdi93] {
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
}

.courier-popup-actions[b-qe6kiwdi93] {
    padding: 12px 16px 16px;
    display: flex;
    gap: 8px;
}

.action-btn[b-qe6kiwdi93] {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.action-btn.primary[b-qe6kiwdi93] {
    background: #4f46e5;
    color: white;
}

.action-btn.primary:hover[b-qe6kiwdi93] {
    background: #4338ca;
    transform: translateY(-1px);
}

.action-btn.secondary[b-qe6kiwdi93] {
    background: #f97316;
    color: white;
}

.action-btn.secondary:hover[b-qe6kiwdi93] {
    background: #ea580c;
    transform: translateY(-1px);
}

.action-btn i[b-qe6kiwdi93] {
    width: 16px;
    height: 16px;
}

/* Icon styles */
.icon-phone[b-qe6kiwdi93]::before { content: "📞"; }
.icon-orders[b-qe6kiwdi93]::before { content: "📦"; }
.icon-time[b-qe6kiwdi93]::before { content: "🕒"; }
.icon-user[b-qe6kiwdi93]::before { content: "👤"; }
.icon-route[b-qe6kiwdi93]::before { content: "🗺️"; }

/* Status classes */
.online[b-qe6kiwdi93] {
    background: #10b981 !important;
}

.offline[b-qe6kiwdi93] {
    background: #ef4444 !important;
}

.busy[b-qe6kiwdi93] {
    background: #f59e0b !important;
}
/* /Components/Shared/DateTimePicker.razor.rz.scp.css */
.dtp-root[b-ujjjgshyo9] {
    position: relative;
    display: block;
    width: 100%;
}

/* ===== Trigger — looks like a ds-input field ===== */
.dtp-trigger[b-ujjjgshyo9] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 0 12px;
    background: var(--ds-surface-alt, #f8fafc);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 10px);
    color: var(--ds-text, #0f172a);
    font-family: var(--ds-font-ui, inherit);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--ds-dur, 0.15s) var(--ds-ease, ease),
                background-color var(--ds-dur, 0.15s) var(--ds-ease, ease),
                box-shadow var(--ds-dur, 0.15s) var(--ds-ease, ease);
}

.dtp-trigger:hover:not(.is-disabled)[b-ujjjgshyo9] {
    border-color: var(--ds-border-strong, #cbd5e1);
}

.dtp-trigger.is-open[b-ujjjgshyo9] {
    border-color: var(--brand-600, #036ac4);
    background: var(--ds-surface, #fff);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.12);
}

.dtp-trigger.is-disabled[b-ujjjgshyo9] {
    opacity: 0.6;
    cursor: not-allowed;
}

.dtp-cal-icon[b-ujjjgshyo9] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--ds-text-subtle, #94a3b8);
}

.dtp-value[b-ujjjgshyo9] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dtp-value.is-placeholder[b-ujjjgshyo9] {
    color: var(--ds-text-subtle, #94a3b8);
    font-weight: 400;
}

.dtp-caret[b-ujjjgshyo9] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--ds-text-subtle, #94a3b8);
    transition: transform var(--ds-dur, 0.15s) var(--ds-ease, ease);
}

.dtp-trigger.is-open .dtp-caret[b-ujjjgshyo9] { transform: rotate(180deg); }

/* ===== Centered overlay — deterministic on every screen size. Sits above
   AppModal (z 9999). Dimmed backdrop; click-outside closes without dismissing
   any host modal (clicks inside stopPropagation). ===== */
.dtp-overlay[b-ujjjgshyo9] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.28);
    animation: dtp-fade-b-ujjjgshyo9 140ms ease-out;
}

@keyframes dtp-fade-b-ujjjgshyo9 { from { opacity: 0; } to { opacity: 1; } }

.dtp-panel[b-ujjjgshyo9] {
    box-sizing: border-box;
    width: min(380px, 92vw);
    max-height: min(90vh, 640px);
    overflow: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-lg, 18px);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 24px 60px rgba(15, 23, 42, 0.22);
    transform-origin: center;
    animation: dtp-pop-b-ujjjgshyo9 170ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dtp-pop-b-ujjjgshyo9 {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Typeable date + time row ===== */
.dtp-fields[b-ujjjgshyo9] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.dtp-fields--date-only[b-ujjjgshyo9] { grid-template-columns: 1fr; }

.dtp-field[b-ujjjgshyo9] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.dtp-field label[b-ujjjgshyo9] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dtp-input[b-ujjjgshyo9] {
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-sm, 8px);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0f172a);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
    width: 100%;
}

.dtp-input:focus[b-ujjjgshyo9] {
    outline: none;
    border-color: var(--brand-600, #036ac4);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.15);
}

/* Time — our own hour : minute dropdowns (mobile-friendly native selects). */
.dtp-time[b-ujjjgshyo9] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dtp-time-sel[b-ujjjgshyo9] {
    width: 60px;
    padding: 0 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.dtp-time-sep[b-ujjjgshyo9] {
    font-weight: 700;
    color: var(--ds-text-muted, #64748b);
}

/* ===== Calendar ===== */
.dtp-cal[b-ujjjgshyo9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dtp-cal-head[b-ujjjgshyo9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dtp-cal-title[b-ujjjgshyo9] {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    text-transform: capitalize;
}

.dtp-cal-nav[b-ujjjgshyo9] {
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--slate-100, #f1f5f9);
    color: var(--ds-text-muted, #334155);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.dtp-cal-nav:hover[b-ujjjgshyo9] { background: var(--slate-200, #e2e8f0); }

.dtp-cal-grid[b-ujjjgshyo9] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dtp-cal-dow[b-ujjjgshyo9] {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ds-text-subtle, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dtp-cal-cell[b-ujjjgshyo9] {
    aspect-ratio: 1 / 1;
    min-height: 34px;
    padding: 0;
    background: transparent;
    color: var(--ds-text, #0f172a);
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s ease;
}

.dtp-cal-cell:hover:not(:disabled)[b-ujjjgshyo9] { background: var(--slate-200, #e2e8f0); }
.dtp-cal-cell:disabled[b-ujjjgshyo9] { cursor: default; color: var(--slate-300, #cbd5e1); }
.dtp-cal-cell.out-of-month[b-ujjjgshyo9] { color: var(--slate-300, #cbd5e1); }
.dtp-cal-cell.is-today[b-ujjjgshyo9] { color: var(--brand-600, #036ac4); font-weight: 700; }
.dtp-cal-cell.is-selected[b-ujjjgshyo9] {
    background: var(--brand-600, #036ac4);
    color: #fff;
    font-weight: 700;
}

.dtp-cal-cell.is-selected:hover:not(:disabled)[b-ujjjgshyo9] { background: var(--brand-700, #0257a3); }

/* ===== Footer ===== */
.dtp-foot[b-ujjjgshyo9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
}

.dtp-quick[b-ujjjgshyo9],
.dtp-done[b-ujjjgshyo9] {
    height: 36px;
    padding: 0 16px;
    border-radius: var(--ds-radius-sm, 8px);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.dtp-quick[b-ujjjgshyo9] {
    background: var(--slate-100, #f1f5f9);
    color: var(--ds-text-muted, #334155);
    border: 1px solid transparent;
}

.dtp-quick:hover[b-ujjjgshyo9] { background: var(--slate-200, #e2e8f0); }

.dtp-done[b-ujjjgshyo9] {
    background: var(--brand-600, #036ac4);
    color: #fff;
    border: 1px solid var(--brand-600, #036ac4);
}

.dtp-done:hover[b-ujjjgshyo9] { background: var(--brand-700, #0257a3); }

/* ===== Small screens — dock as a bottom sheet ===== */
@media (max-width: 480px) {
    .dtp-overlay[b-ujjjgshyo9] {
        align-items: flex-end;
        padding: 0;
    }

    .dtp-panel[b-ujjjgshyo9] {
        width: 100%;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        animation: dtp-sheet-b-ujjjgshyo9 200ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .dtp-cal-cell[b-ujjjgshyo9] { min-height: 40px; }
}

@keyframes dtp-sheet-b-ujjjgshyo9 {
    from { opacity: 0.4; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/FilterPopover.razor.rz.scp.css */
/* Design-system filter popover */
.fp-root[b-eoevugrj7t] { position: relative; display: inline-flex; }

.fp-trigger[b-eoevugrj7t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--ds-font-ui);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}

.fp-trigger:hover[b-eoevugrj7t] { border-color: var(--brand-600); color: var(--brand-600); }

.fp-trigger.is-active[b-eoevugrj7t] {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: var(--ds-surface-alt);
}

.fp-badge[b-eoevugrj7t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ds-radius-pill);
    background: var(--brand-600);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
}

.fp-backdrop[b-eoevugrj7t] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.fp-pop[b-eoevugrj7t] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    width: 340px;
    max-width: 90vw;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-3);
}

.fp-content[b-eoevugrj7t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
}

.fp-actions[b-eoevugrj7t] {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--ds-border);
}
/* /Components/Shared/Grid/AppDataGrid.razor.rz.scp.css */
/* ============================================================
   AppDataGrid — design-system data grid (FluentUI-free)
   CSS-grid table: header row + body rows + built-in paginator.
   Tokens: --ds-*, --brand-600, --slate-*.
   ============================================================ */

.adg[b-gcrwwgf8fg] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    font-family: var(--ds-font-ui);
}

/* Frame carries the card chrome + clipping; the toolbar sits outside it so the
   columns dropdown is never clipped by overflow:hidden. */
.adg-frame[b-gcrwwgf8fg] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
    overflow: hidden;
}

/* Toolbar */
.adg-toolbar[b-gcrwwgf8fg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 10px;
}

.adg-toolbar-left[b-gcrwwgf8fg] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adg-toolbar-slot[b-gcrwwgf8fg] { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }

/* With a grouping switch the toolbar reads switch (left) ↔ actions (right) */
.adg-toolbar-left.has-group[b-gcrwwgf8fg] { flex: 1; }
.adg-toolbar-left.has-group > .adg-toolbar-slot[b-gcrwwgf8fg] { margin-left: auto; }

.adg-cols[b-gcrwwgf8fg] { position: relative; }

/* Segmented grouping switch (same language as the store-status modal's view switch) */
.adg-groupswitch[b-gcrwwgf8fg] {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-sunken);
}

.adg-group-btn[b-gcrwwgf8fg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ds-text-subtle);
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}

.adg-group-btn[b-gcrwwgf8fg]  svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.adg-group-btn:hover[b-gcrwwgf8fg] { color: var(--ds-text-muted); }

.adg-group-btn.is-on[b-gcrwwgf8fg] {
    background: var(--ds-surface);
    color: var(--brand-600);
    box-shadow: var(--ds-shadow-1);
}

.adg-group-btn:focus-visible[b-gcrwwgf8fg] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.adg-tool-btn[b-gcrwwgf8fg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--ds-font-ui);
    cursor: pointer;
    transition: border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}

.adg-tool-btn:hover[b-gcrwwgf8fg] { border-color: var(--brand-600); color: var(--brand-600); }

.adg-cols-backdrop[b-gcrwwgf8fg] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.adg-cols-pop[b-gcrwwgf8fg] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    min-width: 200px;
    padding: 8px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-3);
}

.adg-cols-pop-head[b-gcrwwgf8fg] {
    padding: 4px 8px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-subtle);
}

.adg-cols-item[b-gcrwwgf8fg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    color: var(--ds-text);
    cursor: pointer;
}

.adg-cols-item:hover[b-gcrwwgf8fg] { background: var(--ds-surface-alt); }
.adg-cols-item input[b-gcrwwgf8fg] { width: 16px; height: 16px; accent-color: var(--brand-600); cursor: pointer; }

.adg-scroll[b-gcrwwgf8fg] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Page-load overlay (shown over existing rows while a new page loads) */
.adg-overlay[b-gcrwwgf8fg] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(1px);
    z-index: 6;
}

[data-theme="dark"] .adg-overlay[b-gcrwwgf8fg] { background: rgba(15, 23, 42, 0.45); }

.adg-table[b-gcrwwgf8fg] {
    display: grid;
    /* grid-template-columns is set inline from the column definitions */
    width: 100%;
    align-content: start;
}

/* Rows span the full template; cells flow into the parent grid via display:contents */
.adg-row[b-gcrwwgf8fg] {
    display: contents;
}

.adg-cell[b-gcrwwgf8fg] {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 16px;
    gap: 8px;
}

.adg-cell.adg-align-center[b-gcrwwgf8fg] { justify-content: center; text-align: center; }
.adg-cell.adg-align-end[b-gcrwwgf8fg] { justify-content: flex-end; text-align: right; }

/* Header */
.adg-row--header > .adg-th[b-gcrwwgf8fg] {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 44px;
    background: var(--ds-surface-alt);
    border-bottom: 1px solid var(--ds-border);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    white-space: nowrap;
}

/* Header label truncates so long titles never push the resize handle out */
.adg-th-label[b-gcrwwgf8fg] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column resize handle — a wide invisible grab zone straddling the column border,
   with a hairline that brightens to the brand color on hover. The sticky header cell
   is the containing block, so this stays pinned to the column edge while scrolling. */
.adg-resizer[b-gcrwwgf8fg] {
    position: absolute;
    top: 0;
    right: -5px;
    width: 11px;
    height: 100%;
    z-index: 6;
    cursor: col-resize;
    touch-action: none;
    background: linear-gradient(var(--ds-border), var(--ds-border)) no-repeat center / 1px 55%;
    transition: background-size var(--ds-dur-fast) var(--ds-ease);
}

.adg-resizer:hover[b-gcrwwgf8fg] {
    background: linear-gradient(var(--brand-600), var(--brand-600)) no-repeat center / 2px 100%;
}

/* Body cells */
.adg-row > .adg-td[b-gcrwwgf8fg] {
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-text);
    font-size: 0.875rem;
    line-height: 1.35;
    background: var(--ds-surface);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

/* Hover: tint every cell of the hovered row (display:contents rows can't be hovered directly) */
.adg-row.is-clickable[b-gcrwwgf8fg] { cursor: pointer; }
.adg-row.is-clickable:hover > .adg-td[b-gcrwwgf8fg] { background: var(--ds-surface-alt); }

/* Group band — a full-width header that precedes each bucket of rows */
.adg-group[b-gcrwwgf8fg] {
    grid-column: 1 / -1;
    position: sticky;
    top: 44px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ds-surface-alt);
    border-bottom: 1px solid var(--ds-border);
}

.adg-group__logo[b-gcrwwgf8fg] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.adg-group__title[b-gcrwwgf8fg] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--ds-font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
}

.adg-group__count[b-gcrwwgf8fg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface-sunken);
    color: var(--ds-text-subtle);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* States (error / empty) — span all columns */
.adg-state[b-gcrwwgf8fg] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 20px;
    color: var(--ds-text-subtle);
    font-size: 0.875rem;
    text-align: center;
}

.adg-state svg[b-gcrwwgf8fg] { opacity: 0.6; }
.adg-state--error[b-gcrwwgf8fg] { color: var(--ds-danger); }

.adg-retry[b-gcrwwgf8fg] {
    margin-top: 4px;
    padding: 8px 16px;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}

.adg-retry:hover[b-gcrwwgf8fg] { background: var(--ds-surface-alt); border-color: var(--brand-600); }

/* Skeleton loading rows */
.adg-row--skeleton > .adg-cell[b-gcrwwgf8fg] {
    min-height: 64px;
    border-bottom: 1px solid var(--ds-border);
}

.adg-skel[b-gcrwwgf8fg] {
    display: block;
    width: 70%;
    height: 12px;
    border-radius: var(--ds-radius-pill);
    background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 37%, var(--slate-100) 63%);
    background-size: 400% 100%;
    animation: adg-shimmer-b-gcrwwgf8fg 1.4s ease infinite;
}

@keyframes adg-shimmer-b-gcrwwgf8fg {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* Paginator */
.adg-paginator[b-gcrwwgf8fg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

.adg-range[b-gcrwwgf8fg] {
    font-size: 0.8125rem;
    color: var(--ds-text-muted);
    font-variant-numeric: tabular-nums;
}

.adg-pages[b-gcrwwgf8fg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.adg-pg[b-gcrwwgf8fg] {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}

.adg-pg:hover:not(:disabled):not(.is-active)[b-gcrwwgf8fg] {
    background: var(--ds-surface-alt);
    color: var(--ds-text);
}

.adg-pg.is-active[b-gcrwwgf8fg] {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
    cursor: default;
}

.adg-pg:disabled[b-gcrwwgf8fg] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .adg-cell[b-gcrwwgf8fg] { padding: 0 12px; }
    .adg-paginator[b-gcrwwgf8fg] { justify-content: center; }
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
/* Scoped to LanguageSwitcher only — dropdown variant. The trigger button shows the current
   language code; clicking opens a small menu listing all supported cultures with display name +
   active check. Light-on-dark by default (header); the .mobile-lang-switcher wrapper inverts
   colours via specificity, see app.css. */

.lang-switcher[b-ack1citlk9] {
    position: relative;
    display: inline-block;
}

.lang-switcher-trigger[b-ack1citlk9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 56px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lang-switcher-trigger:hover[b-ack1citlk9] {
    background: rgba(255, 255, 255, 0.2);
}

.lang-switcher-open .lang-switcher-trigger[b-ack1citlk9] {
    background: #ffffff;
    color: #1a202c;
    border-color: rgba(15, 23, 42, 0.12);
}

.lang-switcher-caret[b-ack1citlk9] {
    font-size: 10px;
    line-height: 1;
    opacity: 0.7;
}

.lang-switcher-backdrop[b-ack1citlk9] {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}

.lang-switcher-menu[b-ack1citlk9] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 4px;
    overflow: hidden;
}

.lang-switcher-item[b-ack1citlk9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #1a202c;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.12s ease;
}

.lang-switcher-item:hover[b-ack1citlk9] {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.lang-switcher-item-active[b-ack1citlk9],
.lang-switcher-item-active:hover[b-ack1citlk9] {
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 600;
}

.lang-switcher-item-code[b-ack1citlk9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.lang-switcher-item-active .lang-switcher-item-code[b-ack1citlk9] {
    background: #dbeafe;
    color: #1e3a8a;
}

.lang-switcher-item-name[b-ack1citlk9] {
    flex: 1;
}

.lang-switcher-item-check[b-ack1citlk9] {
    color: #1e3a8a;
    font-weight: 700;
}

/* Strip layout-level underlines that hit any anchor inside the header. */
.lang-switcher a[b-ack1citlk9]::after,
.lang-switcher button[b-ack1citlk9]::after {
    display: none !important;
    content: none !important;
}
/* /Components/Shared/LoadingOverlay.razor.rz.scp.css */
.loading-fullscreen[b-uid3x3fxii] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9999;
}

.loading-fullscreen__msg[b-uid3x3fxii] {
    margin: 0;
    font-family: var(--font-ui, 'Inter', 'Segoe UI', system-ui, sans-serif);
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint, #64748b);
}

.loading-overlay-pin[b-uid3x3fxii] {
    position: absolute;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
/* /Components/Shared/MetricCard.razor.rz.scp.css */
/* Compact metric card — design-system surface + brand-blue icon chip */
.metric-card-container[b-6om4j7i0yl] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border, #e2e8f0);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface, #fff);
    box-shadow: var(--ds-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    box-sizing: border-box;
    overflow: hidden;
    height: min-content;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.metric-card-container.expanded[b-6om4j7i0yl] {
    box-shadow: var(--ds-shadow-2, 0 4px 12px rgba(15, 23, 42, 0.08));
    border-color: var(--ds-border-strong, #cbd5e1);
}

.metric-card[b-6om4j7i0yl] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    min-width: 140px;
    min-height: 56px;
    box-sizing: border-box;
}

.metric-card.expandable[b-6om4j7i0yl] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.metric-card.expandable:hover[b-6om4j7i0yl] {
    background: var(--ds-surface-alt, #f8fafc);
}

.metric-icon[b-6om4j7i0yl] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ds-radius-sm, 8px);
    background: rgba(3, 106, 196, 0.10);
    color: var(--brand-600, #036ac4);
}

.metric-icon[b-6om4j7i0yl]  svg {
    width: 18px;
    height: 18px;
}

.metric-text[b-6om4j7i0yl] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.metric-title[b-6om4j7i0yl] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 12px;
    color: var(--ds-text-muted, #64748b);
    font-weight: 600;
    white-space: nowrap;
}

/* Info icon + hover/focus popover (host must allow overflow to show it) */
.metric-info[b-6om4j7i0yl] {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--fg-disabled, #94a3b8);
    cursor: help;
    outline: none;
}

.metric-info[b-6om4j7i0yl]  svg { width: 13px; height: 13px; fill: currentColor; }
.metric-info:hover[b-6om4j7i0yl], .metric-info:focus-visible[b-6om4j7i0yl] { color: var(--brand-600, #036ac4); }

.metric-pop[b-6om4j7i0yl] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: 230px;
    padding: 8px 10px;
    background: var(--fg-1, #0f172a);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.20);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 200;
    pointer-events: none;
}

.metric-info:hover .metric-pop[b-6om4j7i0yl],
.metric-info:focus-visible .metric-pop[b-6om4j7i0yl] {
    opacity: 1;
    visibility: visible;
}

.metric-subtitle[b-6om4j7i0yl] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 10.5px;
    color: var(--ds-text-subtle, #94a3b8);
    font-weight: 500;
    line-height: 1.25;
}

.metric-end[b-6om4j7i0yl] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.metric-value[b-6om4j7i0yl] {
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-text, #0f172a);
    white-space: nowrap;
}

/* Optional period-over-period delta chip */
.metric-delta[b-6om4j7i0yl] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 9999px;
    font-family: var(--ds-font-ui, "Inter", sans-serif);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.metric-delta-arrow[b-6om4j7i0yl] { font-size: 0.7em; line-height: 1; }

.metric-delta.is-up[b-6om4j7i0yl]   { background: var(--success-50, #f0fdf4); color: var(--success-600, #16a34a); }
.metric-delta.is-down[b-6om4j7i0yl] { background: var(--danger-50, #fef2f2); color: var(--danger-600, #dc2626); }
.metric-delta.is-flat[b-6om4j7i0yl] { background: var(--bg-subtle, #f1f5f9); color: var(--fg-hint, #64748b); }

.metric-expand-icon[b-6om4j7i0yl] {
    margin-left: 8px;
    color: var(--ds-text-subtle, #94a3b8);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.metric-card-content[b-6om4j7i0yl] {
    padding: 14px;
    border-top: 1px solid var(--ds-border, #e2e8f0);
    background: var(--ds-surface, #fff);
    animation: slideDown-b-6om4j7i0yl 0.2s ease-out;
}

@keyframes slideDown-b-6om4j7i0yl {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Short height screens - horizontal compact style */
@media (max-height: 720px) {
    .metric-card[b-6om4j7i0yl] {
        padding: 6px 12px;
        gap: 8px;
        min-width: auto;
        min-height: 40px;
    }

    .metric-icon[b-6om4j7i0yl] {
        width: 26px;
        height: 26px;
    }

    .metric-icon[b-6om4j7i0yl]  svg {
        width: 16px !important;
        height: 16px !important;
    }

    .metric-title[b-6om4j7i0yl] {
        font-size: 12px;
    }

    .metric-value[b-6om4j7i0yl] {
        font-size: 13px;
    }
}
/* /Components/Shared/MobileAppsModal.razor.rz.scp.css */
.ma-grid[b-9ralw00h5s] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.ma-card[b-9ralw00h5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border: 1px solid var(--border-1, #eef0f3);
    border-radius: var(--radius-lg, 14px);
    background: var(--bg-subtle, #f8fafc);
    text-align: center;
}

.ma-card__platform[b-9ralw00h5s] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: var(--fg-1, #0f172a);
}

.ma-card__platform[b-9ralw00h5s]  svg {
    width: 20px;
    height: 20px;
    color: var(--accent, #036ac4);
}

.ma-qr[b-9ralw00h5s] {
    width: 168px;
    height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.ma-card__hint[b-9ralw00h5s] {
    font-size: 12px;
    color: var(--fg-hint, #64748b);
    max-width: 180px;
    line-height: 1.35;
}

.ma-badge[b-9ralw00h5s] {
    display: inline-flex;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.ma-badge:hover[b-9ralw00h5s] {
    transform: translateY(-2px);
    opacity: 0.9;
}

.ma-badge img[b-9ralw00h5s] {
    height: 44px;
    width: auto;
}

.ma-badge:focus-visible[b-9ralw00h5s] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ===== Brief "who can do what" note ===== */
.ma-roles[b-9ralw00h5s] {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--border-1, #eef0f3);
    border-radius: var(--radius-lg, 14px);
    background: var(--bg-subtle, #f8fafc);
}

.ma-roles__title[b-9ralw00h5s] {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
}

.ma-roles__list[b-9ralw00h5s] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ma-roles__list li[b-9ralw00h5s] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--fg-2, #475569);
}

.ma-roles__list li strong[b-9ralw00h5s] {
    color: var(--fg-1, #0f172a);
    font-weight: 600;
}

.ma-roles__list[b-9ralw00h5s]  svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--accent, #036ac4);
}

.ma-roles__note[b-9ralw00h5s] {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--fg-hint, #64748b);
}

/* ===== Masaüstü uygulaması paneli ===== */
.ma-desktop[b-9ralw00h5s] {
    margin-top: 18px;
    padding: 18px 16px;
    border: 1px solid var(--border-1, #eef0f3);
    border-radius: var(--radius-lg, 14px);
    background: var(--bg-subtle, #f8fafc);
}

.ma-desktop__head[b-9ralw00h5s] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ma-desktop__icon[b-9ralw00h5s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--accent-soft, rgba(3, 106, 196, 0.1));
    color: var(--accent, #036ac4);
}

.ma-desktop__icon[b-9ralw00h5s]  svg {
    width: 22px;
    height: 22px;
}

.ma-desktop__title[b-9ralw00h5s] {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
}

.ma-desktop__desc[b-9ralw00h5s] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--fg-2, #475569);
}

.ma-desktop__actions[b-9ralw00h5s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.ma-dl-btn[b-9ralw00h5s] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-md, 10px);
    background: var(--accent, #036ac4);
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.ma-dl-btn:hover[b-9ralw00h5s] {
    transform: translateY(-1px);
    opacity: 0.95;
}

.ma-dl-btn:focus-visible[b-9ralw00h5s] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 3px;
}

.ma-dl-btn[b-9ralw00h5s]  svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ma-dl-btn__text[b-9ralw00h5s] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ma-dl-btn__text strong[b-9ralw00h5s] {
    font-size: 13.5px;
    font-weight: 600;
}

.ma-dl-btn__text small[b-9ralw00h5s] {
    font-size: 11px;
    opacity: 0.85;
}

.ma-pwa-note[b-9ralw00h5s] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--fg-2, #475569);
}

.ma-pwa-note[b-9ralw00h5s]  svg {
    width: 18px;
    height: 18px;
    color: var(--success, #16a34a);
}

/* ===== Ek kurulumlar (CallerID / QZ) ===== */
.ma-extras[b-9ralw00h5s] {
    margin-top: 14px;
    padding: 16px;
    border: 1px dashed var(--border-2, #dfe3e8);
    border-radius: var(--radius-lg, 14px);
}

.ma-extras__title[b-9ralw00h5s] {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-1, #0f172a);
}

.ma-extras__subtitle[b-9ralw00h5s] {
    margin: 0 0 12px;
    font-size: 11.5px;
    color: var(--fg-hint, #64748b);
}

.ma-extras__list[b-9ralw00h5s] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ma-extras__list li[b-9ralw00h5s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ma-extras__ic[b-9ralw00h5s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--bg-muted, #eef2f6);
    color: var(--fg-2, #475569);
}

.ma-extras__ic[b-9ralw00h5s]  svg {
    width: 18px;
    height: 18px;
}

.ma-extras__meta[b-9ralw00h5s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.ma-extras__meta strong[b-9ralw00h5s] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg-1, #0f172a);
}

.ma-extras__meta small[b-9ralw00h5s] {
    font-size: 11px;
    line-height: 1.35;
    color: var(--fg-hint, #64748b);
}

.ma-extras__dl[b-9ralw00h5s] {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid var(--border-1, #eef0f3);
    border-radius: var(--radius-md, 10px);
    background: #fff;
    color: var(--accent, #036ac4);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ma-extras__dl:hover[b-9ralw00h5s] {
    background: var(--accent-soft, rgba(3, 106, 196, 0.08));
    border-color: var(--accent, #036ac4);
}

.ma-extras__dl:focus-visible[b-9ralw00h5s] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .ma-grid[b-9ralw00h5s] {
        grid-template-columns: 1fr;
    }

    .ma-extras__list li[b-9ralw00h5s] {
        flex-wrap: wrap;
    }
}
/* /Components/Shared/ModalAnnouncementHost.razor.rz.scp.css */
/* Office365 "yenilikler" tarzı açılır duyuru — banner görsel + başlık + markdown gövde + CTA.
   AppModal içinde HeaderContent/ChildContent/Footer slotlarına yerleşir; tümü design tokenları. */

.ma-head[b-1jrg9goqxw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

/* Bleed the banner to the AppModal card edges (its padding is 28px, radius 20px). */
.ma-banner[b-1jrg9goqxw] {
    margin: -28px -28px 0;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    background: var(--bg-subtle);
    aspect-ratio: 16 / 7;
}

.ma-banner img[b-1jrg9goqxw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ma-head-text[b-1jrg9goqxw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ma-badge[b-1jrg9goqxw] {
    align-self: flex-start;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.ma-badge--warning[b-1jrg9goqxw],
.ma-badge--maintenance[b-1jrg9goqxw] { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.ma-badge--security[b-1jrg9goqxw] { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.ma-badge--feature[b-1jrg9goqxw] { background: var(--status-success-bg); color: var(--status-success-fg); }
.ma-badge--update[b-1jrg9goqxw] { background: var(--accent-soft); color: var(--accent-foreground); }

.ma-title[b-1jrg9goqxw] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fg-1);
    letter-spacing: -0.01em;
}

.ma-body[b-1jrg9goqxw] {
    font-family: var(--font-ui);
    font-size: 0.925rem;
    line-height: 1.65;
    color: var(--fg-2);
}

.ma-body :first-child[b-1jrg9goqxw] { margin-top: 0; }
.ma-body :last-child[b-1jrg9goqxw] { margin-bottom: 0; }

.ma-body h1[b-1jrg9goqxw], .ma-body h2[b-1jrg9goqxw], .ma-body h3[b-1jrg9goqxw], .ma-body h4[b-1jrg9goqxw] {
    color: var(--fg-1);
    margin: 1.1em 0 0.4em;
    line-height: 1.3;
}
.ma-body h1[b-1jrg9goqxw] { font-size: 1.15rem; }
.ma-body h2[b-1jrg9goqxw] { font-size: 1.05rem; }
.ma-body h3[b-1jrg9goqxw] { font-size: 1rem; }

.ma-body p[b-1jrg9goqxw] { margin: 0 0 0.75em; }
.ma-body ul[b-1jrg9goqxw] { margin: 0 0 0.75em; padding-left: 1.25em; }
.ma-body li[b-1jrg9goqxw] { margin-bottom: 0.3em; }

.ma-body blockquote[b-1jrg9goqxw] {
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    padding: 0.5em 0.9em;
    margin: 0.75em 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--fg-3);
}

.ma-body code[b-1jrg9goqxw] {
    background: var(--bg-subtle);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-xs);
    font-size: 0.85em;
}

.ma-body pre[b-1jrg9goqxw] {
    background: var(--fg-1);
    color: var(--bg);
    padding: 0.9em;
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.ma-body pre code[b-1jrg9goqxw] { background: transparent; padding: 0; color: inherit; }
/* /Components/Shared/OrderNotificationCard.razor.rz.scp.css */
/* Premium compact toast — matches adisyon-design preview/components-toasts.html:
   crisp white card, small colored glyph (no box, no side stripe), tight type,
   soft layered shadow, text-button actions. */
.ont[b-9mjp2b7n3t] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    background: #ffffff;
    /* Gölge yok: katmanlı gölge yuvarlak köşelerde bantlanıp "glitch" gibi görünüyordu
       (özellikle layout zoom'unun transform'u devredeyken). Kart, hafifçe koyulaştırılan
       hairline border ile zaten sayfadan ayrışıyor. */
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--ds-font-ui, "Inter", system-ui, sans-serif);
    animation: ont-in-b-9mjp2b7n3t 0.22s ease;
}

/* Countdown bar — shrinks left→0 over the auto-dismiss lifetime (duration set inline). */
.ont__timer[b-9mjp2b7n3t] {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    border-bottom-left-radius: 12px;
    background: currentColor;
    opacity: 0.5;
    animation-name: ont-timer-b-9mjp2b7n3t;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.ont.is-created  .ont__timer[b-9mjp2b7n3t] { color: #16a34a; }
.ont.is-updated  .ont__timer[b-9mjp2b7n3t] { color: var(--accent, #036ac4); }
.ont.is-cancelled .ont__timer[b-9mjp2b7n3t] { color: #dc2626; }

@keyframes ont-timer-b-9mjp2b7n3t {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ont[b-9mjp2b7n3t] { animation: none; }
    .ont__timer[b-9mjp2b7n3t] { animation: none; opacity: 0.25; }
}

@keyframes ont-in-b-9mjp2b7n3t {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Glyph — flat colored icon, 20px, no background box. */
.ont__glyph[b-9mjp2b7n3t] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ont__glyph[b-9mjp2b7n3t]  svg { width: 19px; height: 19px; }
.ont.is-created  .ont__glyph[b-9mjp2b7n3t] { color: #16a34a; }
.ont.is-updated  .ont__glyph[b-9mjp2b7n3t] { color: var(--accent, #036ac4); }
.ont.is-cancelled .ont__glyph[b-9mjp2b7n3t] { color: #dc2626; }

.ont__body[b-9mjp2b7n3t] { flex: 1; min-width: 0; }

.ont__title[b-9mjp2b7n3t] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* Who/where line — customer name or table · floor. */
.ont__ctx[b-9mjp2b7n3t] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
    min-width: 0;
}
.ont__ctx span[b-9mjp2b7n3t] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ont__ctx[b-9mjp2b7n3t]  svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--ds-text-muted, #64748b); }

.ont__msg[b-9mjp2b7n3t] {
    font-size: 12px;
    color: var(--ds-text-muted, #64748b);
    line-height: 1.45;
    margin-top: 1px;
}

/* ── Sade kart (admin.manage) ───────────────────────────────────────────────
   İki satır: başlık + "mağaza · platform · tip". Yığıldığında okunabilir kalsın
   diye daha dar padding ve daha küçük glif; aksiyon/detay alanı hiç yok. */
.ont--compact[b-9mjp2b7n3t] {
    gap: 9px;
    padding: 9px 12px;
    align-items: center;
}
.ont--compact .ont__glyph[b-9mjp2b7n3t] { width: 16px; height: 16px; margin-top: 0; }
.ont--compact .ont__glyph[b-9mjp2b7n3t]  svg { width: 16px; height: 16px; }
.ont--compact .ont__title[b-9mjp2b7n3t] { font-size: 12.5px; }

/* Kart gövdesi = tek düğme (sipariş hızlı görünümü). Görsel olarak düz metin gibi
   durur; hover'da hafif vurgu, klavye için gerçek :focus-visible halkası. */
.ont__open[b-9mjp2b7n3t] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
    border-radius: 6px;
}
.ont__open .ont__title[b-9mjp2b7n3t] { display: block; }
.ont__open:hover .ont__title[b-9mjp2b7n3t] { color: var(--accent, #036ac4); }
.ont__open:focus-visible[b-9mjp2b7n3t] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 3px;
}

.ont__meta[b-9mjp2b7n3t] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ds-text-muted, #64748b);
    min-width: 0;
}
.ont__meta span[b-9mjp2b7n3t] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Platform logosu — küçük yuvarlak rozet, metinden önce. */
.ont__logo[b-9mjp2b7n3t] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: contain;
    background: #ffffff;
}

.ont__auto[b-9mjp2b7n3t] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #16a34a;
}
.ont__auto[b-9mjp2b7n3t]  svg { width: 13px; height: 13px; }

/* Auto-print exhausted its retries — shown in red so the dropped ticket isn't silent. */
.ont__auto--failed[b-9mjp2b7n3t] { color: #dc2626; }

/* Item lines (expanded) */
.ont__lines[b-9mjp2b7n3t] {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ont__line[b-9mjp2b7n3t] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--ds-text, #0f172a);
}
.ont__sign[b-9mjp2b7n3t] { font-weight: 700; width: 1em; flex-shrink: 0; text-align: center; }
.ont__line--add .ont__sign[b-9mjp2b7n3t] { color: #16a34a; }
.ont__line--change .ont__sign[b-9mjp2b7n3t] { color: #d97706; }
.ont__line--remove[b-9mjp2b7n3t] { color: #dc2626; }
.ont__line--remove .ont__name[b-9mjp2b7n3t] { text-decoration: line-through; }
.ont__qty[b-9mjp2b7n3t] { color: var(--ds-text-muted, #64748b); flex-shrink: 0; }
.ont__name[b-9mjp2b7n3t] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ont__delta[b-9mjp2b7n3t] { margin-inline-start: auto; font-weight: 600; color: #d97706; }

.ont__total[b-9mjp2b7n3t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 12px;
    color: var(--ds-text-muted, #64748b);
}
.ont__total strong[b-9mjp2b7n3t] { color: var(--ds-text, #0f172a); font-size: 13px; }

/* Text-button actions */
.ont__actions[b-9mjp2b7n3t] {
    display: flex;
    gap: 16px;
    margin-top: 9px;
}
.ont__btn[b-9mjp2b7n3t] {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: var(--accent, #036ac4);
    letter-spacing: -0.01em;
}
.ont__btn.muted[b-9mjp2b7n3t] { color: var(--ds-text-muted, #64748b); }
.ont__btn:hover:not(:disabled)[b-9mjp2b7n3t] { text-decoration: underline; text-underline-offset: 2px; }
.ont__btn:disabled[b-9mjp2b7n3t] { opacity: 0.6; cursor: default; }

/* Close */
.ont__close[b-9mjp2b7n3t] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ds-text-subtle, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease, background 0.12s ease;
}
.ont__close[b-9mjp2b7n3t]  svg { width: 13px; height: 13px; }
.ont__close:hover[b-9mjp2b7n3t] { background: rgba(15, 23, 42, 0.05); color: var(--ds-text, #0f172a); }

.ont__btn:focus-visible[b-9mjp2b7n3t],
.ont__close:focus-visible[b-9mjp2b7n3t] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
    border-radius: 6px;
}
/* /Components/Shared/PaymentTrustLogos.razor.rz.scp.css */
.ptl[b-cdf8tfm0uh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.ptl--center[b-cdf8tfm0uh] { align-items: center; }
.ptl--end[b-cdf8tfm0uh] { align-items: flex-end; }

.ptl__label[b-cdf8tfm0uh] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2, #94a3b8);
}

/* Flat, footer-style strip — a single soft panel holding the marks in a row.
   Deliberately NOT a set of bordered/shadowed chips (those read as buttons). */
.ptl__logos[b-cdf8tfm0uh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 9px 16px;
    background: #fff;
    border-radius: 10px;
}

.ptl__logo[b-cdf8tfm0uh] {
    height: 24px;
    width: auto;
    display: block;
}

.ptl__logo--wide[b-cdf8tfm0uh] {
    height: 21px;
}

/* Compact variant — tighter for narrow surfaces */
.ptl--compact .ptl__logos[b-cdf8tfm0uh] {
    gap: 12px;
    padding: 7px 12px;
}

.ptl--compact .ptl__logo[b-cdf8tfm0uh] {
    height: 19px;
}

.ptl--compact .ptl__logo--wide[b-cdf8tfm0uh] {
    height: 17px;
}
/* /Components/Shared/PosDevicePickerModal.razor.rz.scp.css */
/* POS cihaz seçim penceresi — "Kurye Ataması" (acm) modalıyla aynı tasarım dili:
   seçilebilir kart listesi (avatar · ad + meta · onay işareti). --ds-* token seti. */

.pdp[b-8x6hw56t8u] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---- Cihaz listesi ---- */
.pdp__list[b-8x6hw56t8u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    /* odak halkası / hover gölgesi kırpılmasın diye kenar boşluğu */
    margin: 0 -4px;
    padding: 2px 4px;
}

.pdp__card[b-8x6hw56t8u] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    cursor: pointer;
    text-align: left;
    color: var(--ds-text);
    font-family: var(--ds-font-ui);
    transition: border-color var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease);
}

.pdp__card:hover[b-8x6hw56t8u] {
    border-color: var(--ds-border-strong);
    background: var(--ds-surface-alt);
}

.pdp__card.is-selected[b-8x6hw56t8u] {
    border-color: var(--brand-600);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-600);
}

.pdp__card:focus-visible[b-8x6hw56t8u] {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* Cihaz avatarı — marka-yumuşak kare + entegrasyon ikonu (Bulut=Globe, Uygulama İçi=Phone) */
.pdp__avatar[b-8x6hw56t8u] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--brand-600);
    box-shadow: inset 0 0 0 1px rgba(3, 106, 196, 0.12);
}

.pdp__avatar[b-8x6hw56t8u]  svg {
    width: 20px;
    height: 20px;
}

.pdp__info[b-8x6hw56t8u] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.pdp__name-row[b-8x6hw56t8u] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pdp__brand[b-8x6hw56t8u] {
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Entegrasyon tipi rozeti */
.pdp__int[b-8x6hw56t8u] {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.pdp__int--cloud[b-8x6hw56t8u] {
    background: var(--brand-50);
    color: var(--brand-600);
    box-shadow: inset 0 0 0 1px rgba(3, 106, 196, 0.18);
}

.pdp__int--app[b-8x6hw56t8u] {
    background: var(--ds-surface-alt);
    color: var(--ds-text-muted);
    box-shadow: inset 0 0 0 1px var(--ds-border);
}

.pdp__meta[b-8x6hw56t8u] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--ds-text-muted);
    min-width: 0;
    flex-wrap: wrap;
}

.pdp__serial-label[b-8x6hw56t8u] {
    color: var(--ds-text-subtle);
}

.pdp__serial[b-8x6hw56t8u] {
    font-family: var(--ds-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-weight: 600;
    color: var(--ds-text);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.pdp__sep[b-8x6hw56t8u] { color: var(--ds-text-subtle); }

.pdp__store[b-8x6hw56t8u] {
    color: var(--ds-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdp__check[b-8x6hw56t8u] {
    color: var(--brand-600);
    flex-shrink: 0;
}

/* ---- "Bu cihazı hatırla" ---- */
.pdp__remember[b-8x6hw56t8u] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-alt);
    cursor: pointer;
}

.pdp__remember input[b-8x6hw56t8u] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--brand-600);
    cursor: pointer;
    flex-shrink: 0;
}

.pdp__remember-text[b-8x6hw56t8u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pdp__remember-title[b-8x6hw56t8u] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ds-text);
}

.pdp__remember-help[b-8x6hw56t8u] {
    font-size: 0.78rem;
    color: var(--ds-text-muted);
    line-height: 1.45;
}
/* /Components/Shared/PosRequiredModal.razor.rz.scp.css */
.posreq__text[b-ukxn4j8lgn] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ds-text);
}
/* /Components/Shared/ScreenSaver.razor.rz.scp.css */
/* Ambient dashboard screen saver — light, calm, brand-forward.
   Token-driven; every colour/space value comes from the design system. */

/* Self-host the wordmark cursive so it renders on locked-down POS terminals that
   can't reach Google Fonts (the admin app otherwise pulls Damion from a CDN). */
@font-face {
    font-family: 'Damion';
    src: url('/assets/fonts/damion-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.ss-root[b-59u6isuewt] {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: none;
    /* Leave room at the bottom so the centred stage never collides with the dismiss hint. */
    padding: var(--space-6) var(--space-6) calc(var(--space-8) * 2.4);
    /* Marketing-hero light wash: slate → indigo → sky, per the design system. */
    background:
        radial-gradient(60% 55% at 82% 12%, rgba(3, 106, 196, 0.10), transparent 70%),
        linear-gradient(170deg, var(--slate-50) 0%, #eef2ff 45%, #f0f9ff 100%);
    animation: ss-fade-in-b-59u6isuewt var(--dur-slow, 350ms) var(--ease-out, ease) both;
}

@keyframes ss-fade-in-b-59u6isuewt {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Ambient drifting glows ─────────────────────────────────────────────── */
.ss-bg[b-59u6isuewt] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ss-blob[b-59u6isuewt] {
    position: absolute;
    border-radius: var(--radius-pill);
    filter: blur(60px);
    opacity: 0.5;
}

.ss-blob--1[b-59u6isuewt] {
    width: 42vmin; height: 42vmin;
    top: -8vmin; left: -6vmin;
    background: var(--brand-200);
    animation: ss-drift-1-b-59u6isuewt 14s var(--ease-in-out, ease-in-out) infinite;
}

.ss-blob--2[b-59u6isuewt] {
    width: 34vmin; height: 34vmin;
    bottom: -10vmin; right: 8vmin;
    background: #dbeafe;
    animation: ss-drift-2-b-59u6isuewt 18s var(--ease-in-out, ease-in-out) infinite;
}

.ss-blob--3[b-59u6isuewt] {
    width: 26vmin; height: 26vmin;
    top: 40%; right: -6vmin;
    background: var(--accent-soft);
    opacity: 0.7;
    animation: ss-drift-1-b-59u6isuewt 22s var(--ease-in-out, ease-in-out) infinite reverse;
}

@keyframes ss-drift-1-b-59u6isuewt {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(4vmin, 5vmin); }
}

@keyframes ss-drift-2-b-59u6isuewt {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-5vmin, -3vmin); }
}

/* ── Centre stage ───────────────────────────────────────────────────────── */
.ss-stage[b-59u6isuewt] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
    max-width: 1180px;
    width: 100%;
    text-align: center;
}

/* Two columns on wide screens: clock/brand on the left, active orders on the right. */
.ss-cols[b-59u6isuewt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    width: 100%;
    flex-wrap: wrap;
}

.ss-left[b-59u6isuewt] {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.ss-right[b-59u6isuewt] {
    flex: 1 1 440px;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.ss-brand[b-59u6isuewt] {
    font-family: 'Damion', cursive;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1;
    color: var(--accent);
    letter-spacing: -0.5px;
    animation: ss-float-b-59u6isuewt 6s var(--ease-in-out, ease-in-out) infinite;
}

@keyframes ss-float-b-59u6isuewt {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Clock */
.ss-clockwrap[b-59u6isuewt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.ss-clock[b-59u6isuewt] {
    font-family: var(--font-display, 'Sora', sans-serif);
    font-weight: 800;
    font-size: clamp(3.75rem, 13vw, 9rem);
    line-height: 0.95;
    letter-spacing: var(--tracking-tight, -0.02em);
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

.ss-date[b-59u6isuewt] {
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: clamp(1rem, 2.4vw, 1.5rem);
    font-weight: 600;
    color: var(--fg-3);
    text-transform: capitalize;
}

.ss-scope[b-59u6isuewt] {
    display: inline-block;
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-4);
    background: var(--accent-soft);
    color: var(--brand-700);
    font-size: var(--small-size, 0.875rem);
    font-weight: 700;
    border-radius: var(--radius-pill);
    letter-spacing: var(--tracking-wide, 0.03em);
}

/* ── Active orders board ────────────────────────────────────────────────── */
.ss-orders[b-59u6isuewt] {
    width: 100%;
    max-width: 640px;
    padding: var(--space-5) var(--space-6) var(--space-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm, var(--shadow-xs));
    text-align: left;
    animation: ss-rise-b-59u6isuewt var(--dur-hero, 550ms) var(--ease-out, ease) both;
}

.ss-orders-head[b-59u6isuewt] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.ss-orders-title[b-59u6isuewt] {
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: var(--h4-size, 1.125rem);
    font-weight: 700;
    color: var(--fg-1);
}

.ss-orders-count[b-59u6isuewt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--brand-700);
    font-size: var(--small-size, 0.875rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ss-orders-list[b-59u6isuewt] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 42vh;
    overflow: hidden;
}

.ss-order[b-59u6isuewt] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
    animation: ss-rise-b-59u6isuewt var(--dur-base, 250ms) var(--ease-out, ease) both;
}

.ss-order:last-child[b-59u6isuewt] { border-bottom: none; }

.ss-orders-list .ss-order:nth-child(1)[b-59u6isuewt] { animation-delay: 40ms; }
.ss-orders-list .ss-order:nth-child(2)[b-59u6isuewt] { animation-delay: 90ms; }
.ss-orders-list .ss-order:nth-child(3)[b-59u6isuewt] { animation-delay: 140ms; }
.ss-orders-list .ss-order:nth-child(4)[b-59u6isuewt] { animation-delay: 190ms; }
.ss-orders-list .ss-order:nth-child(5)[b-59u6isuewt] { animation-delay: 240ms; }
.ss-orders-list .ss-order:nth-child(6)[b-59u6isuewt] { animation-delay: 290ms; }
.ss-orders-list .ss-order:nth-child(7)[b-59u6isuewt] { animation-delay: 340ms; }
.ss-orders-list .ss-order:nth-child(8)[b-59u6isuewt] { animation-delay: 390ms; }

@keyframes ss-rise-b-59u6isuewt {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ss-order-ic[b-59u6isuewt] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    color: var(--accent);
}

.ss-order-ic[b-59u6isuewt]  svg {
    width: 20px;
    height: 20px;
}

/* Kanal görseli (platform / mağaza / PaketG logosu) — sade ikon yerine kare görsel. */
.ss-order-ic--logo[b-59u6isuewt] {
    position: relative;
    background: #fff;
    padding: 0;
    overflow: visible;
}

.ss-order-logo-img[b-59u6isuewt] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

/* Mağaza logosunda köşedeki küçük tür rozeti. */
.ss-order-badge[b-59u6isuewt] {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--accent);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm, var(--shadow-xs));
}

.ss-order-badge[b-59u6isuewt]  svg {
    width: 12px;
    height: 12px;
}

.ss-order-main[b-59u6isuewt] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ss-order-title[b-59u6isuewt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--body-size, 1rem);
    font-weight: 700;
    color: var(--fg-1);
}

.ss-order-sub[b-59u6isuewt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

.ss-order-meta[b-59u6isuewt] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.ss-st[b-59u6isuewt] {
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--tiny-size, 0.75rem);
    font-weight: 700;
    white-space: nowrap;
}

.ss-st--new[b-59u6isuewt]   { background: var(--accent-soft);  color: var(--brand-700); }
.ss-st--prep[b-59u6isuewt]  { background: var(--warning-50);   color: var(--warning-600); }
.ss-st--ready[b-59u6isuewt] { background: var(--success-50);   color: var(--success-700); }

.ss-order-time[b-59u6isuewt] {
    font-size: var(--tiny-size, 0.75rem);
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

.ss-orders-empty[b-59u6isuewt] {
    padding: var(--space-6) 0;
    text-align: center;
    font-size: var(--body-size, 1rem);
    color: var(--fg-hint);
}

.ss-orders-more[b-59u6isuewt] {
    margin-top: var(--space-3);
    text-align: center;
    font-size: var(--small-size, 0.875rem);
    font-weight: 600;
    color: var(--fg-3);
}

/* ── Weather strip (client-side, next 12 hourly cells) ──────────────────── */
.ss-weather[b-59u6isuewt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 780px;
    animation: ss-rise-b-59u6isuewt var(--dur-hero, 550ms) var(--ease-out, ease) both;
}

.ss-weather:empty[b-59u6isuewt] { display: none; }

.ss-wx[b-59u6isuewt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 54px;
    padding: var(--space-2) var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--bg);
    border: 1px solid var(--border-subtle);
}

.ss-wx.is-now[b-59u6isuewt] {
    background: var(--accent-soft);
    border-color: transparent;
}

.ss-wx-h[b-59u6isuewt] {
    font-size: var(--tiny-size, 0.75rem);
    font-weight: 600;
    color: var(--fg-hint);
    font-variant-numeric: tabular-nums;
}

.ss-wx.is-now .ss-wx-h[b-59u6isuewt] { color: var(--brand-700); }

.ss-wx-ic[b-59u6isuewt] {
    display: inline-flex;
    color: var(--accent);
}

.ss-wx-ic svg[b-59u6isuewt] { width: 22px; height: 22px; }

.ss-wx-t[b-59u6isuewt] {
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: var(--small-size, 0.875rem);
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

/* Dismiss hint */
.ss-hint[b-59u6isuewt] {
    position: absolute;
    bottom: var(--space-8);
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--small-size, 0.875rem);
    color: var(--fg-hint);
    letter-spacing: var(--tracking-wide, 0.03em);
    animation: ss-pulse-b-59u6isuewt 2.6s var(--ease-in-out, ease-in-out) infinite;
}

@keyframes ss-pulse-b-59u6isuewt {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.9; }
}

/* Stack the two columns on narrower / portrait POS screens. */
@media (max-width: 880px) {
    .ss-cols[b-59u6isuewt] {
        flex-direction: column;
        gap: var(--space-6);
    }
    .ss-left[b-59u6isuewt], .ss-right[b-59u6isuewt] {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Tablet / small POS screens */
@media (max-width: 560px) {
    .ss-orders[b-59u6isuewt] {
        padding: var(--space-4);
    }
    .ss-orders-list[b-59u6isuewt] {
        max-height: 34vh;
    }
    .ss-wx[b-59u6isuewt] {
        min-width: 46px;
    }
}

/* Respect reduced-motion: keep it calm, drop the ambient drift + floats. */
@media (prefers-reduced-motion: reduce) {
    .ss-root[b-59u6isuewt],
    .ss-brand[b-59u6isuewt],
    .ss-blob[b-59u6isuewt],
    .ss-orders[b-59u6isuewt],
    .ss-order[b-59u6isuewt],
    .ss-weather[b-59u6isuewt],
    .ss-hint[b-59u6isuewt] {
        animation: none;
    }
}
/* /Components/Shared/StatsPinGate.razor.rz.scp.css */
/* StatsPinGate — sade kilitli placeholder + modal (blur/crop YOK). */

/* ── Durum çözülürken: nötr yükleme ── */
.spg-probe[b-c4ciozgwml] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

/* ── Kilitli dinlenme durumu: ortalanmış sade kart ── */
.spg-locked[b-c4ciozgwml] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: var(--space-6) var(--space-4);
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
}

.spg-locked__card[b-c4ciozgwml] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 360px;
    text-align: center;
}

.spg-locked__icon[b-c4ciozgwml] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: var(--space-1);
}
.spg-locked__icon[b-c4ciozgwml]  svg,
.spg-locked__icon[b-c4ciozgwml]  svg path { fill: currentColor; }

.spg-locked__title[b-c4ciozgwml] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--fg-1);
}

.spg-locked__desc[b-c4ciozgwml] {
    margin: 0 0 var(--space-2);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--fg-3);
}

/* ── PIN giriş modalı gövdesi ── */
.spg-modal[b-c4ciozgwml] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.spg-modal__error[b-c4ciozgwml] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--danger-600);
}

.spg-modal__hint[b-c4ciozgwml] {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--fg-hint);
}

/* ── Kilit açıkken üstteki ince "Kilitle" şeridi ── */
.spg-bar[b-c4ciozgwml] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-2);
}

.spg-bar__btn[b-c4ciozgwml] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--ds-dur-fast) var(--ds-ease),
                color var(--ds-dur-fast) var(--ds-ease);
}
.spg-bar__btn:hover[b-c4ciozgwml] {
    background: var(--bg-subtle);
    color: var(--fg-1);
}
.spg-bar__btn:focus-visible[b-c4ciozgwml] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.spg-bar__btn[b-c4ciozgwml]  svg,
.spg-bar__btn[b-c4ciozgwml]  svg path { fill: currentColor; }
/* /Components/Shared/StatsPinSetupModal.razor.rz.scp.css */
/* StatsPinSetupModal — PIN kur / değiştir / kaldır gövdesi. */

.spm[b-15l29y1eoi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: center;
}

.spm__field[b-15l29y1eoi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.spm__label[b-15l29y1eoi] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-hint);
}

.spm__warning[b-15l29y1eoi] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
    color: var(--fg-3);
}

.spm__error[b-15l29y1eoi] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--danger-600);
}
/* /Components/Shared/SupportReplyCard.razor.rz.scp.css */
/* Same premium-compact toast anatomy as OrderNotificationCard (.ont), which realizes the
   design skill's components-toasts.html spec in this region: crisp white card, hairline
   border, flat colored glyph — no side stripe, no tinted icon box, no shadow (layered
   shadow bands/glitches under the layout zoom transform; see the .ont note). Persistent:
   no countdown bar and no close button, so nothing suggests it can be dismissed. */
.snt[b-3a39nhfsyl] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--ds-font-ui, "Inter", system-ui, sans-serif);
    animation: snt-in-b-3a39nhfsyl 0.22s ease;
}

@keyframes snt-in-b-3a39nhfsyl {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .snt[b-3a39nhfsyl] { animation: none; }
}

/* Glyph — flat accent icon, 20px, no background box (info variant of the spec). */
.snt__glyph[b-3a39nhfsyl] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #036ac4);
}
.snt__glyph[b-3a39nhfsyl]  svg { width: 19px; height: 19px; }

.snt__body[b-3a39nhfsyl] { flex: 1; min-width: 0; }

.snt__title[b-3a39nhfsyl] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text, #0f172a);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* Reply snippet — clamped to two lines so a long support answer can't grow the card. */
.snt__msg[b-3a39nhfsyl] {
    font-size: 12px;
    color: var(--ds-text-muted, #64748b);
    line-height: 1.45;
    margin-top: 1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Text-button action, spec's .toast-btn. */
.snt__actions[b-3a39nhfsyl] {
    display: flex;
    gap: 14px;
    margin-top: 9px;
}

.snt__btn[b-3a39nhfsyl] {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: var(--accent, #036ac4);
    letter-spacing: -0.01em;
}
.snt__btn:hover[b-3a39nhfsyl] { text-decoration: underline; text-underline-offset: 2px; }
.snt__btn:focus-visible[b-3a39nhfsyl] {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
    border-radius: 6px;
}
/* /Components/Shared/TourOverlay.razor.rz.scp.css */
/* Overlay pieces - 4 divs around highlighted element */
.tour-overlay-piece[b-vmts4meq0n] {
    position: fixed;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9998;
    pointer-events: none;
    animation: fadeIn-b-vmts4meq0n 0.3s ease;
}

/* Tooltip container */
.tour-tooltip[b-vmts4meq0n],
#tour-tooltip-container[b-vmts4meq0n] {
    position: fixed;
    z-index: 10002; /* Above everything */
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    min-width: 320px;
    animation: slideIn-b-vmts4meq0n 0.3s ease;
}

.tour-tooltip-header[b-vmts4meq0n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.tour-progress[b-vmts4meq0n] {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.tour-tooltip-body[b-vmts4meq0n] {
    padding: 16px 20px;
    color: #4b5563;
    line-height: 1.6;
}

.tour-tooltip-footer[b-vmts4meq0n] {
    padding: 12px 20px 20px;
}

@keyframes fadeIn-b-vmts4meq0n {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-vmts4meq0n {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Note: tour-pulse animation is defined globally in app.css */