@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
@import url('https://fonts.googleapis.com/css2?family=Damion&family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap');


/* =====================================================================
   Adisyon design-system tokens (additive — coexists with FluentUI vars).

   Brand: single blue #036ac4 (sampled from logo). Slate neutral scale.
   Sora for display (titles), Inter for UI, Damion reserved for wordmark.
   Card radius 16px, buttons 10–12px. Low-contrast layered shadows.
   Per-feature surfaces should consume these — never hardcode hex.
   ===================================================================== */
:root {
    /* Brand scale (single hue — tints/shades around #036ac4) */
    --brand-50:  #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #2080d6;
    --brand-600: #036ac4;   /* primary */
    --brand-700: #0356a0;
    --brand-800: #0a4480;
    --brand-900: #0c3766;

    /* Slate neutrals */
    --slate-0:   #ffffff;
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* Semantic surfaces / text */
    --ds-surface:        var(--slate-0);
    --ds-surface-alt:    var(--slate-50);
    --ds-surface-sunken: var(--slate-100);
    --ds-border:         var(--slate-200);
    --ds-border-strong:  var(--slate-300);
    --ds-text:           var(--slate-900);
    --ds-text-muted:     var(--slate-500);
    --ds-text-subtle:    var(--slate-400);

    /* Status (quiet) */
    --ds-success: #16a34a;
    --ds-warning: #d97706;
    --ds-danger:  #dc2626;
    --ds-info:    var(--brand-600);

    /* Radii */
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-pill: 999px;

    /* Shadows — layered, low contrast */
    --ds-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ds-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08);
    --ds-shadow-3: 0 8px 24px rgba(15, 23, 42, 0.10);

    /* Type ramp */
    --ds-font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-font-script:  "Damion", cursive;   /* wordmark only */

    /* Spacing (4-pt) */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 24px;
    --ds-space-6: 32px;
    --ds-space-7: 48px;

    /* Motion — restrained */
    --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ds-dur-fast: 120ms;
    --ds-dur:      200ms;
    --ds-dur-slow: 320ms;

    /* =================================================================
       Semantic alias layer (adisyon-design skill vocabulary).
       Maps the design-system's semantic token names onto the concrete
       brand / slate / ds-* values above so feature CSS can use the
       portable names (--accent, --fg-1, --shadow-lg, …) per CLAUDE.md.
       These are first-party — independent of FluentUI's own tokens.
       ================================================================= */
    --accent:            var(--brand-600);
    --accent-hover:      var(--brand-700);
    --accent-soft:       var(--brand-50);
    --accent-foreground: var(--brand-600);
    --fg-on-brand:       #ffffff;
    --fg-on-accent:      #ffffff;

    --fg-1:        var(--slate-900);
    --fg-2:        var(--slate-700);
    --fg-3:        var(--slate-600);
    --fg-hint:     var(--slate-500);
    --fg-disabled: var(--slate-400);

    --bg:          var(--slate-0);
    --bg-subtle:   var(--slate-100);
    --bg-muted:    var(--slate-50);
    --layer-1:     var(--slate-0);
    --layer-2:     var(--slate-100);

    --border:         var(--slate-200);
    --border-strong:  var(--slate-300);
    --border-subtle:  var(--slate-100);
    --border-focus:   var(--brand-600);

    /* Status accents */
    --success-50:  #f0fdf4;
    --success-500: #22c55e;
    --success-600: var(--ds-success);
    --success-700: #15803d;
    --danger-50:   #fef2f2;
    --danger-100:  #fee2e2;
    --danger-500:  #ef4444;
    --danger-600:  var(--ds-danger);
    --warning-50:  #fffbeb;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: var(--ds-warning);
    /* Courier / freelance accent (purple) — canonical skill hue */
    --courier-500: #8b5cf6;
    --courier-600: #7c3aed;
    /* Soft status surfaces (badges, confirm icons) */
    --status-success-bg: var(--success-50);
    --status-danger-bg:  var(--danger-50);
    --status-warning-bg: var(--warning-50);

    /* Radii (semantic names → ds scale) */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   10px;
    --radius-xl:   12px;
    --radius-2xl:  14px;
    --radius-card: var(--ds-radius-lg);
    --radius-pill: var(--ds-radius-pill);

    /* Shadows (semantic names → ds scale) */
    --shadow-xs:   var(--ds-shadow-1);
    --shadow-sm:   var(--ds-shadow-1);
    --shadow-md:   var(--ds-shadow-2);
    --shadow-lg:   var(--ds-shadow-3);
    --shadow-xl:   0 20px 45px rgba(15, 23, 42, 0.16);
    --shadow-hero: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* Fonts */
    --font-display: var(--ds-font-display);
    --font-body:    var(--ds-font-display);
    --font-ui:      var(--ds-font-ui);
    --font-script:  var(--ds-font-script);

    /* Spacing (semantic names → ds scale) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    --dialog-background-color: var(--neutral-layer-4);
    height: 100dvh;
}

[data-theme="dark"] {
    --dialog-background-color: var(--neutral-layer-3);
}

html, body {
    overscroll-behavior: none;
}

body {
    --body-font: "Inter", sans-serif;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
}

/* =====================================================================
   Design-system form controls
   Reusable .ds-* primitives. Use these inside any AppModal/page/dialog
   instead of FluentTextField/FluentCheckbox/raw inputs so the page stays
   visually consistent with the design tokens.
   ===================================================================== */

.ds-input,
.ds-textarea,
.ds-select {
    width: 100%;
    box-sizing: border-box;
    background: var(--ds-surface-alt);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text);
    font-family: var(--ds-font-ui);
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 10px 12px;
    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);
}

.ds-input { height: 40px; }
.ds-textarea { min-height: 72px; resize: vertical; }

.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--ds-text-subtle); }

.ds-input:hover,
.ds-textarea:hover,
.ds-select:hover { border-color: var(--ds-border-strong); }

.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
    border-color: var(--brand-600);
    background: var(--ds-surface);
    box-shadow: 0 0 0 3px rgba(3, 106, 196, 0.12);
}

.ds-input:disabled,
.ds-textarea:disabled,
.ds-select:disabled {
    background: var(--ds-surface-sunken);
    color: var(--ds-text-muted);
    cursor: not-allowed;
}

.ds-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ds-label {
    font-family: var(--ds-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ds-text);
}

.ds-help {
    font-family: var(--ds-font-ui);
    font-size: 0.75rem;
    color: var(--ds-text-muted);
}

/* Checkbox + radio share a square/circle indicator that fills with brand on check. */
.ds-checkbox,
.ds-radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--ds-surface);
    border: 1.5px solid var(--ds-border-strong);
    color: var(--slate-0);
    flex-shrink: 0;
    transition: background-color var(--ds-dur) var(--ds-ease),
                border-color var(--ds-dur) var(--ds-ease);
}

.ds-checkbox { border-radius: 5px; }
.ds-radio    { border-radius: 50%; }

.ds-checkbox.is-checked,
.ds-radio.is-checked {
    background: var(--brand-600);
    border-color: var(--brand-600);
}

.ds-checkbox.is-checked::after {
    content: "";
    width: 5px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
}

.ds-radio.is-checked::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Quantity stepper — pill of [- value +], paired with .ds-stepper-btn. */
.ds-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    padding: 4px;
}

.ds-stepper-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--brand-600);
    color: var(--slate-0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    transition: opacity var(--ds-dur-fast) var(--ds-ease);
}

.ds-stepper-btn:hover:not(:disabled) { opacity: 0.88; }
.ds-stepper-btn.ds-stepper-btn--decrease { background: var(--slate-500); }

.ds-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ds-stepper-value {
    min-width: 24px;
    text-align: center;
    font-family: var(--ds-font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
}

/* Compact stepper (inline inside list rows) */
.ds-stepper--sm { padding: 2px; gap: 4px; }
.ds-stepper--sm .ds-stepper-btn { width: 24px; height: 24px; font-size: 13px; }
.ds-stepper--sm .ds-stepper-value { min-width: 18px; font-size: 0.8125rem; }

/* Section divider — used inside modal bodies to separate groups. */
.ds-divider {
    height: 1px;
    background: var(--ds-border);
    border: 0;
    margin: var(--ds-space-3) 0;
}

/* Tag/badge — small status chip (Zorunlu, Opsiyonel, etc). */
.ds-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
}

.ds-tag--required { background: rgba(220, 38, 38, 0.10); color: var(--ds-danger); }
.ds-tag--optional { background: var(--slate-100); color: var(--ds-text-muted); }
.ds-tag--info     { background: var(--brand-50); color: var(--brand-700); }
.ds-tag--success  { background: rgba(22, 163, 74, 0.10); color: var(--ds-success); }

/* Square icon button (close, more, etc.) */
.ds-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    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) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
}

.ds-icon-btn:hover {
    background: var(--ds-surface-alt);
    color: var(--ds-text);
}

/* Toggle switch — 36×20 pill with sliding thumb. `.is-on` colors the track
   in success-green; `.is-disabled` dims and blocks pointer events. Pair
   with an outer label or wrap a button around it to make it focusable. */
.ds-switch {
    position: relative;
    display: inline-flex;
    width: 36px;
    height: 20px;
    background: var(--slate-300);
    border-radius: var(--ds-radius-pill);
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease);
    flex-shrink: 0;
    border: none;
    padding: 0;
}

.ds-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform var(--ds-dur) var(--ds-ease);
}

.ds-switch.is-on { background: var(--ds-success); }
.ds-switch.is-on::after { transform: translateX(16px); }

.ds-switch.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ds-switch:focus-visible {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
}

/* FluentDialog overrides were attempted to bleach the neutral-layer chrome
   to white but the inner gray strip around the body kept slipping through
   the ::part overrides — the actual shadow-DOM internals vary between
   FluentUI Blazor versions. The customer menu's modifier picker was moved
   to a custom AppModal-based component (OrderItemModal) that owns its
   chrome end-to-end, so this whole block was rolled back as dead weight.
   Other dialogs that still use FluentDialog (CartSummaryPage,
   UpdateOrderDialog) keep FluentUI's default chrome — fine for admin
   contexts where the slate ring is the standard look. */

* {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
    --neutral-stroke-input-rest: var(--neutral-fill-input-hover) !important;
}

    *::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }

    *::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.5) !important;
        border-radius: 20px !important;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
    }

    *::-webkit-scrollbar-track {
        background: transparent !important;
    }

    *::-webkit-scrollbar-button {
        display: none !important;
    }

    *::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.7) !important;
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4) !important;
    }

/* FluentNavMenu transparent background - Global CSS */
.fluent-nav-menu {
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
}

.fluent-nav-item {
    background: transparent !important;
    background-color: transparent !important;
}

.fluent-nav-link {
    background: transparent !important;
    background-color: transparent !important;
}

.fluent-nav-link.active,
.fluent-nav-link[aria-current="page"] {
    background: transparent !important;
    background-color: transparent !important;
}

.fluent-nav-group {
    background: transparent !important;
    background-color: transparent !important;
}

.fluent-nav-group.expanded {
    background: transparent !important;
    background-color: transparent !important;
}

.positioning-region,
.content-region {
    background: transparent !important;
    background-color: transparent !important;
}

.fluent-nav-item.expander {
    background: transparent !important;
    background-color: transparent !important;
}

/* Daha agresif yaklaşım - FluentUI CSS variables override */
fluent-nav-menu,
fluent-nav-link,
fluent-nav-group {
    --neutral-layer-card-container: transparent !important;
    --neutral-layer-floating: transparent !important;
    --neutral-layer-1: transparent !important;
    --neutral-layer-2: transparent !important;
    --neutral-layer-3: transparent !important;
    --neutral-layer-4: transparent !important;
    --neutral-fill-rest: transparent !important;
    --neutral-fill-hover: transparent !important;
    --neutral-fill-active: transparent !important;
    --neutral-fill-focus: transparent !important;
    --accent-fill-rest: transparent !important;
    --accent-fill-hover: transparent !important;
    --accent-fill-active: transparent !important;
}

/* Tüm FluentNavMenu ve alt elementlerini hedefle */
fluent-nav-menu *,
.fluent-nav-menu *,
fluent-nav-link *,
.fluent-nav-link *,
fluent-nav-group *,
.fluent-nav-group * {
    background: transparent !important;
    background-color: transparent !important;
}

.navmenu-icon {
    display: none;
}

.brand-logo {
    font-family: 'Damion', cursive;
    font-size: 30px;
    color: white;
    text-decoration: none;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.main {
    min-height: calc(100dvh - 86px);
    color: var(--neutral-foreground-rest);
    align-items: stretch !important;
}

.body-content {
    align-self: stretch;
    
}

.content {
    width: 100%;
}

.page-container {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
}

/* Canonical page heading — design-system display style (Sora, tight tracking).
   Single source of truth for every admin page title; custom *-title classes
   were consolidated onto this. */
.page-title {
    margin: 0;
    font-family: var(--font-display, var(--ds-font-display, "Sora", "Segoe UI", sans-serif));
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-text, #0f172a);
}

.search-container {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.loading-state, .empty-state {
    padding: 30px !important;
    text-align: center;
    color: #666;
}

.empty-content-row {
    height: 58px !important;
}

.col-sort-button::part(control) {
    background-color: transparent !important;
}

.manage {
    width: 100dvw;
}

footer {
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-rest);
    align-items: center;
    padding: 10px 10px;
}

    footer a {
        color: var(--neutral-foreground-rest);
        text-decoration: none;
    }

        footer a:focus {
            outline: 1px dashed;
            outline-offset: 3px;
        }

        footer a:hover {
            text-decoration: underline;
        }

.alert {
    border: 1px dashed var(--accent-fill-rest);
    padding: 5px;
}


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

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::before {
        content: "An error has occurred. "
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

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

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

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Yükleniyor");
    }

code {
    color: #c02d76;
}

@media (max-width: 600px) {

    .main {
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    nav.sitenav {
        width: 100%;
        height: 100%;
    }

    #main-menu {
        width: 100% !important;
    }

        #main-menu > div:first-child:is(.expander) {
            display: none;
        }

    .navmenu {
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }

        #navmenu-toggle ~ nav {
            display: none;
        }

        #navmenu-toggle:checked ~ nav {
            display: block;
        }

    .navmenu-icon {
        cursor: pointer;
        z-index: 10;
        display: block;
        position: absolute;
        top: 15px;
        left: unset;
        right: 20px;
        width: 20px;
        height: 20px;
        border: none;
    }

    .fluent-nav-item {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        white-space: nowrap;
    }
   

    .fluent-collapsible-region-container .items {
        width: 100% !important;
    }

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset;
    }
}

fluent-tabs::part(activeIndicator) {
    width: 85% !important;
}

/* ============================================
   Modern Flat DataGrid Redesign
   Applies globally to .custom-grid across all pages
   ============================================ */
.custom-grid {
    --grid-border: rgba(15, 23, 42, 0.06);
    --grid-row-hover: rgba(99, 102, 241, 0.04);
    --grid-text-primary: var(--neutral-foreground-rest);
    --grid-text-secondary: rgb(100, 116, 139);
    border: none !important;
}

[data-theme="dark"] .custom-grid {
    --grid-border: rgba(255, 255, 255, 0.06);
    --grid-row-hover: rgba(99, 102, 241, 0.08);
    --grid-text-secondary: rgb(148, 163, 184);
}

/* Header: subtle, uppercase, thin separator only */
.custom-grid .fluent-data-grid-row[row-type="header"] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--neutral-layer-1) !important;
    border-bottom: 1px solid var(--grid-border) !important;
    box-shadow: 0 1px 0 var(--grid-border);
}

.custom-grid .fluent-data-grid-row th,
.custom-grid .column-header {
    background: var(--neutral-layer-1) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grid-text-secondary) !important;
    padding: 14px 12px !important;
    border-right: none !important;
}

/* Body rows: airy padding, no vertical borders, soft hover */
.custom-grid .fluent-data-grid-row td {
    height: 64px !important;
    padding: 8px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--grid-border) !important;
    color: var(--grid-text-primary);
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
}

.custom-grid .fluent-data-grid-row:not([row-type="header"]):hover td {
    background-color: var(--grid-row-hover) !important;
}

.custom-grid .fluent-data-grid-row:last-child td {
    border-bottom: none !important;
}

/* Sort affordance more subtle */
.custom-grid .col-sort-button::part(control) {
    background-color: transparent !important;
    color: var(--grid-text-secondary) !important;
    font-weight: 600 !important;
}

/* Paginator: borderless, integrated */
.paginator {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background: var(--neutral-layer-1);
    border-top: 1px solid var(--grid-border, rgba(15, 23, 42, 0.06));
    margin-top: 0 !important;
    padding: 12px 16px !important;
}

/* Legacy icon-text utility (kept for backwards compat) */
.icon-text {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

    .icon-text span {
        margin-left: 8px;
    }

/* ============================================
   Reusable Cell Building Blocks
   ============================================ */

/* Two-line cell: bold primary + muted secondary */
.cell-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
    min-width: 0;
}

.cell-primary {
    font-weight: 600;
    color: var(--grid-text-primary);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .cell-primary a,
    a.cell-primary {
        color: inherit !important;
        text-decoration: none !important;
    }

    .cell-primary a:hover,
    a.cell-primary:hover {
        color: var(--accent-fill-rest) !important;
    }

.cell-secondary {
    font-size: 0.75rem;
    color: var(--grid-text-secondary);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Identity cell: avatar + stack */
.identity-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.identity-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

    .identity-avatar.avatar-blue    { background: linear-gradient(135deg, #3b82f6, #6366f1); }
    .identity-avatar.avatar-green   { background: linear-gradient(135deg, #10b981, #059669); }
    .identity-avatar.avatar-amber   { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .identity-avatar.avatar-rose    { background: linear-gradient(135deg, #f43f5e, #e11d48); }
    .identity-avatar.avatar-slate   { background: linear-gradient(135deg, #64748b, #475569); }
    .identity-avatar.avatar-violet  { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

/* Real photo variant of the identity avatar */
.identity-photo {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Status pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Rozet <button> olduğunda görünüm DEĞİŞMEMELİ: yalnızca tarayıcının kendi
   buton stilini (gri dolgu, kenarlık, sistem fontu) sıfırlıyoruz. Renk ve
   dolgu aşağıdaki is-* kurallarından geliyor — onlar bu bloktan sonra
   tanımlı olduğu için buradaki transparent'ı geçersiz kılıyorlar. */
.status-pill.is-clickable {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    /* font-family yeterli: `font: inherit` kısayolu temel .status-pill'in
       font-size/line-height/weight değerlerini de ezerdi. color de verilmiyor,
       is-* kuralları rengi kendisi belirliyor. */
    font-family: inherit;
    cursor: pointer;
    transition: filter .12s ease;
}

/* Dolgu is-* kuralından geldiği için brightness kullanılıyor: hangi renk
   olursa olsun (yeşil/turuncu/gri) hepsinde tutarlı biçimde hafif koyulaşır. */
.status-pill.is-clickable:hover {
    filter: brightness(0.95);
}

.status-pill.is-clickable:focus-visible {
    outline: 2px solid var(--ds-accent, #2563eb);
    outline-offset: 2px;
}

    .status-pill::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.9;
    }

    .status-pill.is-success {
        background: rgba(16, 185, 129, 0.12);
        color: rgb(5, 150, 105);
    }

    .status-pill.is-muted {
        background: rgba(148, 163, 184, 0.16);
        color: rgb(100, 116, 139);
    }

    .status-pill.is-info {
        background: rgba(59, 130, 246, 0.12);
        color: rgb(37, 99, 235);
    }

    .status-pill.is-warning {
        background: rgba(245, 158, 11, 0.14);
        color: rgb(180, 83, 9);
    }

    .status-pill.is-danger {
        background: rgba(244, 63, 94, 0.12);
        color: rgb(225, 29, 72);
    }

[data-theme="dark"] .status-pill.is-success { color: rgb(52, 211, 153); }
[data-theme="dark"] .status-pill.is-muted   { color: rgb(148, 163, 184); }
[data-theme="dark"] .status-pill.is-info    { color: rgb(96, 165, 250); }
[data-theme="dark"] .status-pill.is-warning { color: rgb(251, 191, 36); }
[data-theme="dark"] .status-pill.is-danger  { color: rgb(251, 113, 133); }

/* Numeric/metric cell */
.metric-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--grid-text-primary);
}

    .metric-cell .metric-icon {
        color: var(--grid-text-secondary);
    }

.metric-strong {
    font-weight: 700;
    color: var(--accent-fill-rest);
}

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

/* Ghost icon action button (replaces outlined icon clutter) */
.action-icons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.action-icon-btn::part(control) {
    background: transparent !important;
    border: none !important;
    color: var(--grid-text-secondary) !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.action-icon-btn:hover::part(control) {
    background: var(--neutral-fill-stealth-hover) !important;
    color: var(--accent-fill-rest) !important;
}

.action-icon-btn.is-danger:hover::part(control) {
    color: rgb(225, 29, 72) !important;
    background: rgba(244, 63, 94, 0.08) !important;
}

/* ============================================
   Reusable grid-page filter toolbar (FluentUI-free)
   Used by Orders/Employees/etc. — keep grids consistent.
   ============================================ */
.fbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

.fbar-field { display: flex; flex-direction: column; }

.fbar-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fbar-search-input { width: 240px; padding-right: 42px; }

.fbar-search-btn {
    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);
}

.fbar-search-btn:hover { filter: brightness(1.08); }

/* DS toolbar button (Sütunlar, generic) — matches .ds-select height */
.fbar-btn {
    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);
}

.fbar-btn:hover { border-color: var(--brand-600); color: var(--brand-600); }

/* Column show/hide menu */
.fbar-cols { position: relative; display: inline-flex; }
.fbar-cols-backdrop { position: fixed; inset: 0; z-index: 40; }

.fbar-cols-pop {
    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);
}

.fbar-cols-head {
    padding: 4px 8px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-subtle);
}

/* DS checkbox/radio row (pairs with .ds-checkbox/.ds-radio spans) */
.ds-check-row {
    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 { background: var(--ds-surface-alt); }

/* Reusable grid row action icon buttons */
.grid-act-row { display: inline-flex; align-items: center; gap: 4px; }

.grid-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    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), border-color var(--ds-dur-fast) var(--ds-ease);
}

.grid-act svg { width: 18px; height: 18px; }
.grid-act:hover { background: var(--ds-surface-sunken); color: var(--brand-600); border-color: var(--brand-600); }
.grid-act--success:hover { background: rgba(22, 163, 74, 0.10); color: var(--ds-success); border-color: var(--ds-success); }
.grid-act--danger:hover { background: rgba(220, 38, 38, 0.10); color: var(--ds-danger); border-color: var(--ds-danger); }
.grid-act--warning:hover { background: rgba(217, 119, 6, 0.10); color: var(--ds-warning); border-color: var(--ds-warning); }

/* Labeled action buttons (icon + text) — clearer than icon-only when space allows */
.grid-act-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--ds-border);
    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), color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}

.grid-act-lbl svg { width: 16px; height: 16px; flex-shrink: 0; }
.grid-act-lbl:hover { background: var(--ds-surface-alt); border-color: var(--brand-600); color: var(--brand-600); }
.grid-act-lbl--success:hover { background: rgba(22, 163, 74, 0.10); color: var(--ds-success); border-color: var(--ds-success); }
.grid-act-lbl--warning:hover { background: rgba(217, 119, 6, 0.10); color: var(--ds-warning); border-color: var(--ds-warning); }
.grid-act-lbl--danger:hover { background: rgba(220, 38, 38, 0.10); color: var(--ds-danger); border-color: var(--ds-danger); }

/* Store type chip — physical (fiziki) vs virtual (sanal) */
.store-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--ds-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.store-type svg { width: 13px; height: 13px; }
.store-type--physical { background: rgba(3, 106, 196, 0.10); color: var(--brand-600); }
.store-type--virtual { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }

.grid-wrapper {
    min-height: 0;
    display: flex;
    height: auto;
    flex-direction: column;
    padding: 0 !important;
    border: 1px solid var(--grid-border, rgba(15, 23, 42, 0.06)) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background: var(--neutral-layer-1) !important;
    overflow: hidden;
}

/* Constrain grid width so it doesn't horizontally scroll on desktop */
.scrollable-container {
    overflow-x: hidden;
}

.custom-grid {
    width: 100% !important;
    min-width: 0 !important;
}

.custom-grid .fluent-data-grid-row {
    min-width: 0;
}

.custom-grid .fluent-data-grid-row td,
.custom-grid .fluent-data-grid-row th {
    min-width: 0 !important;
    overflow: hidden;
}

/* Re-allow horizontal scroll only on small screens */
@media (max-width: 768px) {
    .scrollable-container {
        overflow-x: auto !important;
    }
}

/* Identity cell tightening: pull contact column closer */
.identity-cell {
    gap: 10px;
}

/* Contact column: phone + optional email, two lines max, no hover expansion */
.contact-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
    min-width: 0;
    max-width: 100%;
}

.contact-line {
    font-size: 0.875rem;
    color: var(--grid-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

    .contact-line:focus {
        white-space: normal;
        word-break: break-all;
        background: var(--neutral-fill-stealth-hover);
        padding: 2px 4px;
        margin: -2px -4px;
    }

.contact-line--muted {
    font-size: 0.75rem;
    color: var(--grid-text-secondary);
}

/* Order metric: inline row "AYLIK 1 · TOPLAM 1" */
.order-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    font-size: 0.8125rem;
}

.order-metric--inline {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.order-metric__row {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.order-metric__label {
    color: var(--grid-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.order-metric__value {
    font-weight: 600;
    color: var(--grid-text-primary);
}

.order-metric__sep {
    color: var(--grid-text-secondary);
    opacity: 0.5;
}

.scrollable-container {
    flex: 1;
    height: auto;
    max-height: 100%;
    min-height: 0;
    overflow: auto;
}

.header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Header Content (PaketRota text) */
.header-gutters {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--accent-fill-rest) !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}


/* Login Link */
.header .fluent-nav-link {
    background-color: var(--neutral-layer-1) !important;
    color: var(--accent-fill-rest) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
}

.fluent-nav-link:hover {
    color: var(--accent-fill-rest) !important;
}

.fluent-nav-text {
    display: inline-block !important;
    vertical-align: middle !important;
}

.size24-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
}

.size32-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 32px !important;
}

.size48-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 48px !important;
}

working-hours-grid-container {
    height: 48px !important;
}


    .persona-button::part(control) {
        background: none;
    }

    .persona-button:hover::part(control) {
        background: none;
    }

.popover {
    margin-top: 4px;
}

.account-popover {
    min-width: 300px;
    background: var(--neutral-layer-2);
    border-radius: 4px;
    padding: 16px;
}

.account-header {
    margin-bottom: 16px;
}

.account-persona .initials .fluent-presence-badge {
    font-size: 18px !important;
    white-space: wrap !important;
    font-weight: 600;
}

.company-name {
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    margin-bottom: 12px;
}

.account-info {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-direction: column;
}

.account-details {
    flex: 1;
    flex-direction: column;
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}

    .account-actions fluent-button {
        align-self: flex-start;
    }

.sign-out-button {
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
}

.fluent-popover-content {
    padding: 0 !important;
}

fluent-dialog {
    max-height: 1080px !important;
    z-index: 20 !important;
}

    fluent-dialog::part(control) {
        background-color: var(--dialog-background-color) !important;
        margin: 40px auto !important;
        margin-bottom: 20px !important;
        height: auto !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16) !important;
        animation: dialogSlideUp 0.25s ease;
    }

fluent-dialog::part(overlay) {
    backdrop-filter: blur(4px) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    pointer-events: none !important;
}

@keyframes dialogSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Right-side panel override (OrderQuickViewDialog) - Reset global overrides to use FluentUI defaults */
fluent-dialog[id^="order-quick-view-panel"]::part(control) {
    margin: 0 !important;
    left: unset !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: unset !important;
    max-height: unset !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Right-side panel overrides — Reservations module (detail, settings, create) */
fluent-dialog[id^="reservation-detail-panel"]::part(control),
fluent-dialog[id^="reservation-settings-panel"]::part(control),
fluent-dialog[id^="reservation-create-panel"]::part(control) {
    margin: 0 !important;
    left: unset !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: unset !important;
    max-height: unset !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    border: none !important;
    animation: panelSlideInRight 0.25s ease !important;
}

@keyframes panelSlideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Right-side panel override (UpdateOrderDialog) - prevent outer scrollbar, contain scrolling inside the body */
fluent-dialog[id^="update-order-panel"]::part(control) {
    margin: 0 !important;
    left: unset !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
}

fluent-dialog[id^="update-order-panel"] .fluent-dialog-body {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

fluent-dialog[id^="update-order-panel"] fluent-dialog-body {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

fluent-dialog[id^="update-order-panel"] fluent-dialog-body::part(content) {
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

fluent-dialog[id^="update-order-panel"] fluent-dialog-header {
    flex: 0 0 auto !important;
}

fluent-dialog .fluent-dialog-body {
        min-height: unset !important;
        max-height: none !important;
        height: auto !important;
        flex: unset !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
}

fluent-dialog .fluent-dialog-footer {
    position: sticky !important;
    bottom: 0 !important;
    padding: 8px !important;
    border-top: 1px solid var(--neutral-stroke-rest) !important;
}

fluent-dialog#reply-review-dialog::part(control) {
    height: 280px !important;
    max-height: 280px !important;
    min-height: unset !important;
}

/* FluentUI Select Styling */
select {
    appearance: none;
    background-color: var(--neutral-fill-input-rest);
    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-input-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    color: var(--neutral-foreground-rest);
    line-height: 20px;
    min-height: 32px;
    padding: 0 calc(var(--design-unit) * 2.25px) 0 calc(var(--design-unit) * 2.25px);
    width: 100%;
    outline: none;
    transition: all 0.1s ease-in-out;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right calc(var(--design-unit) * 2.25px) center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
}

select:hover {
    background-color: var(--neutral-fill-input-hover);
}

select:focus {
    background-color: var(--neutral-fill-input-focus);
    border: 1px solid var(--accent-fill-rest);
}

select:disabled {
    background-color: var(--neutral-fill-input-disabled);
    border-color: var(--neutral-stroke-input-disabled);
    color: var(--neutral-foreground-disabled);
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
}

select option {
    background-color: var(--neutral-fill-layer-rest);
    color: var(--neutral-foreground-rest);
    padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 2.25px);
}

select option:checked {
    background-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

/* Dark theme adjustments */
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

/* Responsive design for screens below 1440px */
@media (max-width: 1440px) {
    /* Brand logo - nuclear option with maximum specificity */
    html body fluent-layout fluent-header span.brand-logo,
    html body div fluent-header span.brand-logo,
    fluent-header span.brand-logo,
    span.brand-logo {
        font-size: 24px !important;
        font-family: 'Damion', cursive !important;
    }

    /* Header gutters - target Blazor scoped CSS directly */
    fluent-header .header .header-gutters[class*="b-"],
    .header .header-gutters[class*="b-"],
    [class*="header-gutters"][class*="b-"] {
        margin: 8px !important;
        padding: 8px !important;
    }
}

/* ============================================
   FluentUI Combobox - Global Styles
   ============================================ */

/* Combobox height */
fluent-combobox {
    --combobox-height: 32px;
}

/* Combobox listbox (dropdown) */
fluent-combobox::part(listbox) {
    max-height: 300px;
    overflow-y: auto;
}

/* Combobox scrollbar - Webkit browsers */
fluent-combobox::part(listbox)::-webkit-scrollbar {
    width: 8px;
}

fluent-combobox::part(listbox)::-webkit-scrollbar-track {
    background: var(--neutral-layer-3);
    border-radius: 4px;
}

fluent-combobox::part(listbox)::-webkit-scrollbar-thumb {
    background: var(--neutral-fill-stealth-hover);
    border-radius: 4px;
}

fluent-combobox::part(listbox)::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-fill-stealth-active);
}

/* Combobox scrollbar - Firefox */
fluent-combobox::part(listbox) {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-fill-stealth-hover) var(--neutral-layer-3);
}

/* Dark theme adjustments */
[data-theme="dark"] fluent-combobox::part(listbox)::-webkit-scrollbar-track {
    background: var(--neutral-layer-2);
}

/* ============================================
   Tour System - Global Styles
   ============================================ */

/* Pulse animation for highlighted elements */
@keyframes tour-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(255, 255, 255, 0.9),
            0 0 0 8px rgba(59, 130, 246, 0.6),
            0 0 40px rgba(59, 130, 246, 0.8);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(255, 255, 255, 1),
            0 0 0 12px rgba(59, 130, 246, 0.7),
            0 0 50px rgba(59, 130, 246, 1);
    }
}

/* ============================================
   Tab Content & Filters - Integration Menu
   ============================================ */
.tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 1rem;
    padding: 16px 0;
}

/* Orders panel: right-aligned toolbar + stretching grid */
.orders-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 1rem;
}

    .orders-panel .grid-wrapper {
        flex: 1;
        min-height: 0;
    }

.orders-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.orders-panel-title {
    display: flex;
    align-items: center;
}

.orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: end;
    gap: 10px;
    margin-left: auto;
}

.orders-filter-field {
    display: flex;
    flex-direction: column;
}

    .orders-filter-field > label {
        margin-bottom: 5px;
        font-weight: 500;
        font-size: 0.8125rem;
    }


.filters-card {
    flex-shrink: 0;
}

/* ============================================
   Metric Cards - Compact Style
   ============================================ */
.metric-card.compact {
    padding: 1rem !important;
    min-height: auto !important;
}

.card-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.big-number-inline {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    line-height: 1;
}

.sub-metrics-compact {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sub-metrics-compact .badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.sub-metrics-compact .badge.success {
    background-color: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
}

.sub-metrics-compact .badge.warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
}

.sub-metrics-compact .badge.neutral {
    background-color: rgba(156, 163, 175, 0.1);
    color: rgb(156, 163, 175);
}

/* ============================================
   Mobile Responsive Styles
   ============================================ */

/* Hide header action buttons on mobile */
@media (max-width: 768px) {
    .header-quick-actions,
    .header-settings-actions {
        display: none !important;
    }
}

/* Dialog responsiveness for mobile */
@media (max-width: 768px) {
    fluent-dialog::part(control) {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 20px auto !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
    }

    .fluent-dialog-body {
        padding: 12px !important;
        overflow-x: hidden !important;
    }

    .fluent-dialog-footer {
        padding: 12px !important;
    }

    /* Make dialog form elements stack vertically on mobile */
    fluent-grid-item[xs="12"][sm="4"],
    fluent-grid-item[xs="12"][sm="6"] {
        grid-column: span 12 !important;
    }

    /* Page container responsive */
    .page-container {
        padding: 12px !important;
    }

    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .page-title {
        font-size: 1.5rem !important;
    }
}

/* Table/DataGrid overflow handling */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    /* Make all data grids scrollable horizontally on mobile */
    fluent-data-grid {
        min-width: 600px;
    }

    .scrollable-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce padding on cards for mobile */
    fluent-card {
        padding: 12px !important;
    }

    /* Stack buttons vertically on mobile */
    .quick-actions-card fluent-stack {
        gap: 12px !important;
    }
}

/* Remove shadow from dashboard panel cards */
fluent-card.panel-card {
    box-shadow: none !important;
    --elevation: 0;
}

fluent-card.panel-card::part(root) {
    box-shadow: none !important;
}

/* Incoming call floating notification (bottom-right, separate from toast provider) */
.incoming-call-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 420px;
    padding: 12px 16px;
    background: var(--neutral-layer-1);
    border: 1px solid #16a34a;
    border-radius: 8px;
    /* Gölge kaldırıldı — diğer toast'larla aynı: yuvarlak köşelerde bantlanıyordu. */
    animation: incoming-call-slide-in 0.25s ease-out;
}

.incoming-call-toast__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.12);
}

.incoming-call-toast__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.incoming-call-toast__title {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.incoming-call-toast__phone {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Matched-customer name — accent-tinted so a known caller stands out. */
.incoming-call-toast__customer {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #036ac4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Muted line for "not registered" / "no active order". */
.incoming-call-toast__hint {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* Active-order chip — clickable, opens the order quick view. */
.incoming-call-toast__order {
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 2px 8px;
    border: none;
    border-radius: 9999px;
    background: var(--status-info-bg, #eff6ff);
    color: var(--status-info-fg, #1d4ed8);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.incoming-call-toast__order:hover {
    filter: brightness(0.97);
}

.incoming-call-toast__order:focus-visible {
    outline: 2px solid var(--accent, #036ac4);
    outline-offset: 2px;
}

.incoming-call-toast__order-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

@keyframes incoming-call-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

h1:focus,
h1:focus-visible {
    outline: none;
    box-shadow: none;
}

.mobile-lang-switcher {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
}
/* The trigger button is light-on-dark for the header; on the light mobile sidebar
   that's invisible, so invert it to dark-on-light. Three classes keep this above
   the scoped component rule's specificity. */
.mobile-lang-switcher .lang-switcher .lang-switcher-trigger {
    background: rgba(15, 23, 42, 0.06);
    color: #1a202c;
    border-color: rgba(15, 23, 42, 0.12);
}
.mobile-lang-switcher .lang-switcher .lang-switcher-trigger:hover {
    background: rgba(15, 23, 42, 0.12);
}
.mobile-lang-switcher .lang-switcher .lang-switcher-caret {
    opacity: 0.6;
}

/* The landing header is light too, so the trigger's light-on-dark default is invisible there.
   Invert it to dark-on-light, same as the mobile sidebar. Three classes keep this above the
   scoped component rule's specificity. */
.header-lang-switcher .lang-switcher .lang-switcher-trigger {
    background: rgba(15, 23, 42, 0.06);
    color: #1a202c;
    border-color: rgba(15, 23, 42, 0.12);
}
.header-lang-switcher .lang-switcher .lang-switcher-trigger:hover {
    background: rgba(15, 23, 42, 0.12);
}
.header-lang-switcher .lang-switcher .lang-switcher-caret {
    opacity: 0.6;
}

/* =====================================================
   ADMIN DASHBOARD — shared utilities (adb-*)
   Token-driven helpers reused across the dashboard cards
   (defined globally because Blazor scoped CSS doesn't share
   helper classes between sibling components).
   ===================================================== */

/* =====================================================
   BRAND LOADING SYSTEM — the ONE loading animation.
   The Damion "a" — the app's OWN logo letter — with a blue
   shimmer sweeping through it. Two forms:
     • .app-mark (+ .app-mark__a child) → "a" on a
       whitish-slate tile, for block / overlay / fullscreen.
     • .app-glyph → tile-less "a" that inherits ink
       (brand blue by default; set --al-ink to override,
       e.g. white inside a coloured button), for inline
       spots and buttons.
   The letter is drawn with the Damion webfont (loaded by the
   @import at the top of this file) and shimmered with
   background-clip:text, so it matches the nav logo exactly.
   Consumed by AppLoader, AppSpinner and LoadingOverlay.
   Size via the --al-size custom property. Defined globally
   because Blazor scoped CSS can't share helpers between
   siblings.
   ===================================================== */

/* the shimmering Damion "a", shared by every form via ::before */
.app-mark__a::before,
.app-glyph::before,
.adb-spinner::before {
    content: "a";
    font-family: 'Damion', cursive;
    font-weight: 400;
    line-height: 1;
    color: var(--al-ink, var(--accent, #036ac4)); /* fallback if background-clip:text is unsupported */
    background: linear-gradient(100deg,
        var(--al-ink, var(--accent, #036ac4)) 28%,
        color-mix(in srgb, var(--al-ink, var(--accent, #036ac4)) 45%, #fff) 50%,
        var(--al-ink, var(--accent, #036ac4)) 72%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: app-shine 1.5s linear infinite;
}

/* "a" on a whitish-slate tile (block / overlay / fullscreen) */
.app-mark {
    --al-size: 44px;
    --al-ink: var(--accent, #036ac4); /* the tile letter is always brand blue */
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--al-size);
    height: var(--al-size);
    border-radius: calc(var(--al-size) * 0.26);
    background: var(--bg-muted, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(15, 23, 42, 0.07));
    overflow: hidden;
    animation: app-breathe 2.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) infinite;
}

.app-mark__a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.app-mark__a::before {
    font-size: calc(var(--al-size) * 0.92);
    transform: translateY(-6%);
}

/* tile-less "a" that inherits ink — inline spots and buttons */
.app-glyph {
    --al-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex: 0 0 auto;
    width: var(--al-size);
    height: var(--al-size);
}
.app-glyph::before {
    font-size: calc(var(--al-size) * 1.3);
    transform: translateY(-6%);
}

@keyframes app-shine {
    0%   { background-position: 170% 0; }
    100% { background-position: -70% 0; }
}

@keyframes app-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* Layout wrappers (AppLoader modes) */
.app-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.app-loader--block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--space-6, 24px);
    width: 100%;
}
.app-loader--overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(248, 250, 252, 0.72); /* fallback */
    background: color-mix(in srgb, var(--bg-muted, #f8fafc) 72%, transparent);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: var(--z-overlay, 100);
}
.app-loader--fullscreen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(255, 255, 255, 0.92); /* fallback */
    background: color-mix(in srgb, var(--bg, #fff) 92%, transparent);
    z-index: 9999;
}
.app-loader__label {
    font-family: var(--font-ui, 'Inter', 'Segoe UI', system-ui, sans-serif);
    font-size: var(--small-size, 0.875rem);
    font-weight: 500;
    color: var(--fg-hint, #64748b);
    letter-spacing: 0.01em;
}
.app-loader--fullscreen .app-loader__label { font-size: var(--body-size, 1rem); }

@media (prefers-reduced-motion: reduce) {
    .app-mark { animation-duration: 3s; }
    .app-mark__a::before, .app-glyph::before, .adb-spinner::before { animation-duration: 3s; }
}

/* Legacy dashboard helper — repointed to the brand "a" glyph */
.adb-spinner {
    --al-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--al-size);
    height: var(--al-size);
    border: 0;
    border-radius: 0;
    background: none;
}
.adb-spinner::before {
    font-size: calc(var(--al-size) * 1.3);
    transform: translateY(-6%);
}

.adb-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    color: var(--fg-hint);
    font-family: var(--font-ui);
    font-size: var(--small-size);
    text-align: center;
    min-height: 120px;
}

.adb-state ::deep svg,
.adb-state svg { opacity: 0.4; }

/* Status chip — soft tinted background + matching darker text */
.adb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.adb-chip .adb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.adb-chip.is-success { background: var(--success-50); color: var(--success-600); }
.adb-chip.is-danger  { background: var(--danger-50);  color: var(--danger-600); }
.adb-chip.is-warning { background: color-mix(in srgb, var(--warning-600) 12%, transparent); color: var(--warning-600); }
.adb-chip.is-info    { background: var(--accent-soft); color: var(--accent); }
.adb-chip.is-neutral { background: var(--bg-subtle);  color: var(--fg-3); }

/* Clickable inline link inside a card row */
.adb-link {
    cursor: pointer;
    transition: color var(--dur-fast, 150ms) ease;
}

.adb-link:hover { color: var(--accent); text-decoration: underline; }

/* Entity link (store / firm / customer names) — opens detail, usually in a new tab */
.adb-elink {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast, 150ms) ease;
}

.adb-elink:hover { color: var(--accent); text-decoration: underline; }
.adb-elink:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }

/* Per-card error fallback (ErrorBoundary) on the admin dashboard */
.adb-card-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--danger-50);
    border: 1px solid var(--danger-100);
    border-radius: var(--radius-card);
    color: var(--danger-600);
}
.adb-card-error ::deep svg, .adb-card-error svg { fill: currentColor; flex-shrink: 0; }
.adb-card-error-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adb-card-error-text strong { font-family: var(--font-ui); font-size: var(--small-size); }
.adb-card-error-text code { font-family: var(--font-mono); font-size: var(--xs-size); color: var(--fg-2); word-break: break-word; }

/* =====================================================
   REPORTS PAGE — shared, responsive report-card layout
   Used by all Components/Pages/Reports/Components/*.razor.
   Cards split into a chart area (rc-main) + a summary
   panel (rc-side) that stacks under the chart on small
   screens. Token-driven; no fixed pixel widths leak out.
   ===================================================== */
.report-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    padding: var(--space-5);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.rc-split {
    display: flex;
    gap: var(--space-5);
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.rc-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.rc-side {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid var(--border-subtle);
    padding-left: var(--space-4);
}

.rc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    min-height: 28px;
}

.rc-title {
    font-family: var(--font-display);
    font-size: var(--h4-size);
    font-weight: 700;
    color: var(--fg-1);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-side-title {
    font-family: var(--font-ui);
    font-size: var(--xs-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--fg-hint);
    margin: 0 0 var(--space-3);
}

.rc-chartwrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rc-chart {
    position: relative;
    flex: 1;
    min-height: 220px;
}

/* Footnote spans the full card width (sits under both the chart and the summary panel). */
.rc-note {
    width: 100%;
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--xs-size);
    color: var(--fg-hint);
    line-height: 1.45;
}

.rc-empty {
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    padding: var(--space-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--fg-hint);
}

.rc-empty svg { width: 28px; height: 28px; color: var(--fg-disabled); }
.rc-empty-text { font-size: var(--small-size); color: var(--fg-hint); }

/* Summary panel total */
.rc-total,
.report-card .total-highlight-box {
    text-align: center;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--accent-soft);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rc-total-main { font-weight: 700; font-size: var(--body-size); color: var(--accent); }
.rc-total-sub  { font-size: var(--small-size); font-weight: 600; color: var(--fg-3); }

.rc-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: 230px;
}

.report-card .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.report-card .summary-item:last-child { border-bottom: 0; }

.report-card .summary-item-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.report-card .color-indicator { width: 10px; height: 10px; border-radius: var(--radius-pill); flex-shrink: 0; }

.report-card .summary-text {
    font-size: var(--small-size);
    color: var(--fg-2);
    /* Wrap long names onto a second line instead of truncating with an ellipsis. Caps at 2 lines
       (then ellipsis) so a very long label can't grow the row unbounded. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.report-card .summary-values { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }

.report-card .summary-value {
    font-weight: 700;
    font-size: var(--small-size);
    color: var(--fg-1);
    white-space: nowrap;
}

.report-card .summary-sub { font-size: var(--xs-size); color: var(--fg-hint); white-space: nowrap; }

.rc-side-empty { text-align: center; color: var(--fg-hint); font-size: var(--small-size); margin-top: var(--space-8); }

/* Scoped to report cards only — there is a separate shared LoadingOverlay component that also uses
   the class "loading-overlay" (a small circular badge); an unscoped rule here would leak onto it
   and stretch it full-size into a giant circle. */
.report-card .loading-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: var(--radius-card);
}

/* Stack the summary panel UNDER the chart when the CARD itself is narrow (container query),
   not when the viewport is narrow. This is what keeps the chart from being squeezed to a sliver
   in the 2-column grid: a ~450px card stacks and the chart gets the full width. */
@container report (max-width: 560px) {
    .rc-split { flex-direction: column; }
    .rc-side {
        flex-basis: auto;
        border-left: 0;
        border-top: 1px solid var(--border-subtle);
        padding-left: 0;
        padding-top: var(--space-4);
        margin-top: var(--space-2);
    }
    .rc-list { max-height: none; }
}

/* Fallback for any context without a query container (keeps small viewports tidy). */
@media (max-width: 560px) {
    .rc-split { flex-direction: column; }
    .rc-side {
        flex-basis: auto;
        border-left: 0;
        border-top: 1px solid var(--border-subtle);
        padding-left: 0;
        padding-top: var(--space-4);
        margin-top: var(--space-2);
    }
    .rc-list { max-height: none; }
}

/* Reports page header / filter bar — wraps cleanly on small screens */
.reports-toolbar {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

.reports-filter { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.reports-filter-label { font-size: var(--xs-size); color: var(--fg-hint); }

.reports-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

@media (max-width: 1100px) { .reports-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .reports-metrics { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
    .reports-toolbar { width: 100%; }
    .reports-filter { flex: 1 1 calc(50% - var(--space-3)); }
}

/* =================================================================
   Veresiye / Cari Hesap (accounts-receivable) — shared ar-* styles
   Used across Veresiye page + CariHesapPanel + the action modals.
   ================================================================= */
.ar-head { display: flex; justify-content: space-between; align-items: center; }
.ar-eyebrow { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-hint); font-weight: 600; margin-bottom: var(--space-1); }

/* KPI row — wraps the system MetricCard primitives (same auto-fit grid the wallet
   dashboard uses). .page-container has no row-gap, so each stacked section owns its
   bottom rhythm (matches .page-header's 20px margin-bottom). */
.ar-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }

/* Aging — one neutral card; status conveyed by small dots, not colored panels. */
.ar-aging { background: var(--layer-1); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.ar-aging__title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-hint); font-weight: 600; }
.ar-aging__segs { display: flex; gap: var(--space-2); }
.ar-aging__seg { flex: 1; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-muted); }
.ar-aging__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ar-aging__dot--ok { background: var(--success-500); }
.ar-aging__dot--warn { background: var(--warning-500); }
.ar-aging__dot--danger { background: var(--danger-500); }
.ar-aging__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ar-aging__label { font-size: 11px; color: var(--fg-hint); }
.ar-aging__val { font-size: 15px; font-weight: 700; color: var(--fg-1); }
@media (max-width: 560px) { .ar-aging__segs { flex-direction: column; } }

.ar-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.ar-search { display: flex; align-items: center; gap: var(--space-2); background: var(--layer-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0 var(--space-3); height: 38px; min-width: 240px; color: var(--fg-hint); }
.ar-search input { border: none; outline: none; background: transparent; font: inherit; color: var(--fg-1); width: 100%; }
.ar-filters { display: flex; gap: var(--space-2); }
.ar-filter { border: 1px solid var(--border); background: var(--layer-1); color: var(--fg-2); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); font-size: 13px; cursor: pointer; transition: all .2s ease; }
.ar-filter:hover { border-color: var(--accent); color: var(--accent); }
.ar-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--fg-on-accent); }

.ar-cust-cell { display: flex; flex-direction: column; }
.ar-cust-link { color: var(--accent); text-decoration: none; font-weight: 600; width: fit-content; }
.ar-cust-link:hover { text-decoration: underline; }
.ar-cust-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.ar-bal { font-weight: 700; color: var(--fg-2); }
.ar-bal.is-debt { color: var(--danger-600); }

/* Panel */
.ar-panel-loading { display: flex; justify-content: center; padding: var(--space-8); }
.ar-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.ar-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.ar-panel-head__main { display: flex; flex-direction: column; }
.ar-panel-head__name { font-size: 16px; font-weight: 700; color: var(--fg-1); }
.ar-panel-head__phone { font-size: 13px; color: var(--fg-hint); }
.ar-panel-head__balance { display: flex; flex-direction: column; align-items: flex-end; }
.ar-panel-head__balance-label { font-size: 11px; color: var(--fg-hint); text-transform: uppercase; letter-spacing: .05em; }
.ar-panel-head__balance-value { font-size: 24px; font-weight: 800; color: var(--fg-2); }
.ar-panel-head__balance.is-debt .ar-panel-head__balance-value { color: var(--danger-600); }
.ar-panel-head__balance.is-clear .ar-panel-head__balance-value { color: var(--success-600); }
.ar-panel-meta { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.ar-meta-item { display: flex; flex-direction: column; gap: 2px; }
.ar-meta-item__label { font-size: 11px; color: var(--fg-hint); text-transform: uppercase; letter-spacing: .05em; }
.ar-meta-item__value { font-size: 14px; font-weight: 600; color: var(--fg-1); display: flex; align-items: center; gap: var(--space-2); }
.ar-panel-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.ar-section { display: flex; flex-direction: column; gap: var(--space-2); }
.ar-section__title { font-size: 13px; font-weight: 700; color: var(--fg-2); }
.ar-orders, .ar-ledger { display: flex; flex-direction: column; gap: var(--space-1); }
/* Fixed column tracks so every (independent) row aligns; clickable to open the order. */
.ar-order-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 118px 112px 76px; gap: var(--space-3); align-items: center; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); background: var(--bg-muted); border: 1px solid transparent; border-radius: var(--radius-md); font: inherit; font-size: 13px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.ar-order-row:hover { background: var(--accent-soft); border-color: var(--accent); }
.ar-order-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ar-order-row__id { font-weight: 600; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-order-row__fiche { color: var(--fg-hint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-order-row__date { color: var(--fg-hint); white-space: nowrap; }
.ar-order-row__amount { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.ar-order-row__charge { font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.ar-order-row__remaining { font-size: 11px; color: var(--danger-600); white-space: nowrap; }
.ar-order-row__status { display: flex; justify-content: flex-end; }
@media (max-width: 560px) {
    .ar-order-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); }
    .ar-order-row__id { grid-column: 1; grid-row: 1; }
    .ar-order-row__status { grid-column: 2; grid-row: 1; }
    .ar-order-row__fiche { grid-column: 1; grid-row: 2; }
    .ar-order-row__date { grid-column: 1; grid-row: 3; }
    .ar-order-row__amount { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
}
.ar-ledger-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.ar-ledger-row__date { color: var(--fg-hint); white-space: nowrap; }
.ar-ledger-row__type { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ar-ledger-row__note { color: var(--fg-hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-ledger-row__amount { font-weight: 700; text-align: right; }
.ar-ledger-row__amount.is-credit { color: var(--success-600); }
.ar-ledger-row__amount.is-debit { color: var(--fg-2); }
.ar-ledger-row__balance { color: var(--fg-hint); text-align: right; }
.ar-empty { color: var(--fg-hint); font-size: 13px; padding: var(--space-3); text-align: center; }

/* Modal fields */
.ar-modal-body { display: flex; flex-direction: column; gap: var(--space-4); }
.ar-balance-box { display: flex; justify-content: space-between; align-items: center; background: var(--bg-muted); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.ar-balance-box__label { font-size: 13px; color: var(--fg-hint); }
.ar-balance-box__value { font-size: 18px; font-weight: 700; color: var(--danger-600); }
.ar-field { display: flex; flex-direction: column; gap: var(--space-1); }
.ar-field__label { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.ar-field--checkbox { flex-direction: row; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--fg-1); }
.ar-input { border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font: inherit; color: var(--fg-1); background: var(--layer-1); outline: none; }
.ar-input:focus-visible { border-color: var(--border-focus); }
.ar-amount-row { display: flex; gap: var(--space-2); }
.ar-amount-row .ar-input { flex: 1; }
.ar-chip { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-md); padding: 0 var(--space-3); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ar-preview { font-size: 13px; color: var(--fg-2); background: var(--bg-muted); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.ar-seg { display: flex; gap: var(--space-1); background: var(--bg-muted); border-radius: var(--radius-md); padding: 3px; }
.ar-seg__btn { flex: 1; border: none; background: transparent; color: var(--fg-2); border-radius: var(--radius-sm); padding: var(--space-2); font: inherit; font-size: 13px; cursor: pointer; }
.ar-seg__btn.is-active { background: var(--layer-1); color: var(--fg-1); font-weight: 600; box-shadow: var(--shadow-xs); }

/* ── Adisyonu Taşı (TransferOrderToTableDialog) — TablesGrid (.tbl-tile) ile birebir ── */
.tot-wrap { display: flex; flex-direction: column; gap: 14px; }
.tot-search { width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font: inherit; color: var(--fg-1); background: var(--layer-1); outline: none; }
.tot-search:focus-visible { border-color: var(--border-focus); }

.tot-floor { display: flex; flex-direction: column; gap: 10px; }
.tot-floor-title { font-size: 0.95rem; font-weight: 700; color: var(--ds-text, #0f172a); letter-spacing: -0.01em; }

.tot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.tot-table { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 88px; padding: 12px 13px; background: var(--ds-surface, #fff); border: 1px solid var(--ds-border, #e2e8f0); border-radius: 10px; cursor: pointer; box-sizing: border-box; text-align: left; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.tot-table:hover { transform: translateY(-1px); box-shadow: var(--ds-shadow-2, 0 4px 12px rgba(15,23,42,.08)); border-color: var(--ds-border-strong, #cbd5e1); }
.tot-table__name { font-size: 13px; font-weight: 700; color: var(--ds-text, #0f172a); letter-spacing: -0.01em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tot-table__state { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ds-text-muted, #64748b); min-width: 0; }
.tot-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tot-table__emp { color: var(--ds-text-muted, #64748b); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tot-table__meta { margin-top: auto; font-size: 11px; font-weight: 500; color: var(--ds-text-muted, #64748b); }
.tot-table.available .tot-table__state { color: #16a34a; }
.tot-table.occupied { background: #fef7f6; }
.tot-table.occupied .tot-table__state { color: #dc2626; }
.tot-table.reserved { background: rgba(3,106,196,.045); }
.tot-table.reserved .tot-table__state { color: var(--brand-600, #036ac4); }
.tot-table.out-of-service { opacity: .55; }
.tot-table.is-selected { border-color: var(--accent, #036ac4); box-shadow: 0 0 0 2px var(--accent, #036ac4) inset; }

.tot-warning { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--warning-500); background: var(--warning-50); color: var(--fg-1); font-size: 13px; line-height: 1.4; }
.tot-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); color: var(--fg-hint); }
.tot-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); color: var(--fg-hint); }

/* ── Complimentary indicator badge — order items + orders list ── */
.comp-tag {
    display: inline-flex;
    align-items: center;
    /* Don't stretch full-width inside a flex/grid parent (e.g. flex-column .item-name) */
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--accent, #036ac4);
    background: var(--accent-soft, #eff6ff);
    border: 1px solid var(--accent, #036ac4);
    border-radius: 6px;
    padding: 1px 7px;
    white-space: nowrap;
}
.comp-tag--sm { font-size: 10px; padding: 0 5px; }
/* Summary line (complimentary total) — accent tone, like the discount line */
.comp-line { color: var(--accent, #036ac4); }