/*
 * PaletPilot web design system (Apple-like; see "UI Tasarım" in CLAUDE.md).
 *
 * Light #F5F5F7 ground, large rounded white cards, pill buttons, borderless
 * soft inputs with a brand focus halo, soft-tint status pills with a dot,
 * frosted sidebar / top bar / sheets. The tenant's primary color is used for
 * actions and active states only; semantic colors only for status.
 *
 * Tenant colors come from /theme.css (generated per tenant, loaded after this
 * file) as --nova-primary* variables; the defaults below apply when it is
 * missing. Bootstrap 5.3 is themed by mapping its variables onto the tokens.
 * The Content-Security-Policy allows no inline style: every visual lives in
 * this file, dynamic values are set with CSSOM (element.style.setProperty).
 *
 * Sections:
 *   1. Tokens
 *   2. Bootstrap mapping and base
 *   3. Buttons
 *   4. Forms (inputs, selects, input groups, checks, combo)
 *   5. Segmented control, filter pills
 *   6. App shell (sidebar, rail, top bar, global search, user menu, page)
 *   7. Page header, cards, list layout
 *   8. Tables
 *   9. Badges, avatars, progress
 *  10. Feedback (alerts, toasts, empty state, loading, dialogs, menus)
 *  11. Side panel (offcanvas) and tabs
 *  12. Pagination
 *  13. Dashboard
 *  14. Orders list
 *  15. Screens (detail lists, quantities, operations, outbound, putaway, counts)
 *  16. Settings → Görünüm
 *  17. Login and the terminal scene
 *  18. Warehouse layout (lists, map, rack front view, generator, labels, print)
 *  19. Motion and reduced motion
 *  20. Responsive
 *  21. Basitten detaya (liste araç çubuğu, özet kartı, ⋯ menü, açılan satırlar, sekmeler)
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */

:root {
    /* Tenant theme defaults (PaletPilot blue); overridden by /theme.css. */
    --nova-primary: #2563EB;
    --nova-primary-rgb: 37, 99, 235;
    --nova-primary-contrast: #FFFFFF;
    --nova-primary-contrast-rgb: 255, 255, 255;
    --nova-primary-hover: #2159D4;
    --nova-primary-active: #1E51C1;
    --nova-primary-soft: #E5ECFD;
    --nova-primary-text: #235EDF;
    --nova-primary-text-rgb: 35, 94, 223;
    --nova-secondary: #0F172A;
    --nova-accent: #F59E0B;

    /* Derived brand tints (from the rgb channels). */
    --nova-primary-ring: rgba(var(--nova-primary-rgb), 0.16);
    --nova-primary-glow: rgba(var(--nova-primary-rgb), 0.32);
    --nova-primary-wash: rgba(var(--nova-primary-rgb), 0.08);

    /* Neutrals */
    --nova-bg: #F5F5F7;
    --nova-surface: #FFFFFF;
    --nova-surface-muted: #F5F5F7;
    --nova-fill: #F2F2F5;
    --nova-fill-hover: #EBEBEF;
    --nova-fill-strong: #E5E5EA;
    --nova-hairline: #EBEBF0;
    --nova-border: #E5E5EA;
    --nova-border-strong: #D2D2D7;
    --nova-text: #1D1D1F;
    --nova-text-muted: #6E6E73;
    --nova-text-subtle: #86868B;
    --nova-neutral-soft: #F2F2F7;
    --nova-chart-neutral: #8E8E93;

    /* Status (semantic only): strong text, bright mark, soft tint. */
    --nova-success: #1F7A35;
    --nova-success-bright: #34C759;
    --nova-success-solid: #248A3D;
    --nova-success-soft: #E6F6EA;
    --nova-warning: #B25000;
    --nova-warning-bright: #FF9F0A;
    --nova-warning-soft: #FFF3E0;
    --nova-warning-hover: #8F4000;
    --nova-warning-line: rgba(178, 80, 0, 0.18);
    --nova-danger: #D70015;
    --nova-danger-bright: #FF3B30;
    --nova-danger-hover: #B80012;
    --nova-danger-soft: #FFECEB;
    --nova-info: #0062C4;
    --nova-info-bright: #32ADE6;
    --nova-info-soft: #E6F1FC;

    /* Warehouse map occupancy (status scale: empty green, fill blues,
       overlap amber stripes, over capacity red, blocked graphite). */
    --nova-map-floor: #F7F7F9;
    --nova-map-rack: #FFFFFF;
    --nova-map-rack-line: #D2D2D7;
    --nova-map-empty: #E4F5E9;
    --nova-map-empty-line: #A6DDB6;
    --nova-map-partial: #A7CCF2;
    --nova-map-full: #2C74C9;
    --nova-map-overlap: #FF9F0A;
    --nova-map-overlap-ground: #FFE6BF;
    --nova-map-over: #FF3B30;
    --nova-map-blocked: #48484A;
    --nova-map-inactive: #DCDCE1;
    --nova-map-zone: rgba(0, 0, 0, 0.025);
    --nova-map-pallet: #ECDDC2;
    --nova-map-pallet-line: #C9A978;
    --nova-map-pallet-base: #B48A50;
    --nova-map-beam: #8E8E93;
    --nova-map-upright: #636366;

    /* Type */
    --nova-font: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --nova-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --nova-text-xs: 0.75rem;
    --nova-text-sm: 0.8125rem;
    --nova-text-md: 0.9375rem;
    --nova-text-lg: 1.0625rem;
    --nova-title: 2.125rem;
    --nova-tracking-tight: -0.022em;
    --nova-tracking-title: -0.032em;

    /* Spacing (4px steps on an 8px rhythm) */
    --nova-space-1: 4px;
    --nova-space-2: 8px;
    --nova-space-3: 16px;
    --nova-space-4: 24px;
    --nova-space-5: 32px;
    --nova-space-6: 40px;
    --nova-gap: 20px;

    /* Radii */
    --nova-radius-xs: 8px;
    --nova-radius-sm: 12px;
    --nova-radius-input: 14px;
    --nova-radius-md: 18px;
    --nova-radius-lg: 22px;
    --nova-radius-card: 28px;
    --nova-radius-xl: 36px;
    --nova-radius-pill: 999px;
    --nova-radius: var(--nova-radius-sm);

    /* Shadows */
    --nova-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --nova-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --nova-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.06);
    --nova-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.05), 0 28px 70px rgba(0, 0, 0, 0.1);
    --nova-shadow-pop: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 14px 44px rgba(0, 0, 0, 0.14);
    --nova-shadow-sheet: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 30px 90px rgba(0, 0, 0, 0.22);
    --nova-shadow: var(--nova-shadow-card);
    --nova-focus-ring: 0 0 0 2px var(--nova-primary), 0 0 0 6px var(--nova-primary-ring);

    /* Motion */
    --nova-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --nova-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --nova-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --nova-duration-fast: 150ms;
    --nova-duration: 220ms;
    --nova-duration-slow: 300ms;

    /* Frosted surfaces */
    --nova-frost: rgba(255, 255, 255, 0.72);
    --nova-frost-ground: rgba(245, 245, 247, 0.78);
    --nova-blur: saturate(180%) blur(20px);

    /* Layout */
    --nova-sidebar-width: 264px;
    --nova-sidebar-collapsed-width: 80px;
    --nova-topbar-height: 64px;
    --nova-support-banner-height: 44px;
    --nova-page-padding-x: 40px;
}

/* ------------------------------------------------------------------ */
/* 2. Bootstrap mapping and base                                       */
/* ------------------------------------------------------------------ */

:root {
    --bs-body-font-family: var(--nova-font);
    --bs-body-font-size: var(--nova-text-md);
    --bs-body-line-height: 1.47;
    --bs-body-color: var(--nova-text);
    --bs-body-bg: var(--nova-bg);
    --bs-emphasis-color: var(--nova-text);
    --bs-secondary-color: var(--nova-text-muted);
    --bs-tertiary-color: var(--nova-text-subtle);
    --bs-border-color: var(--nova-border);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.08);
    --bs-border-radius: var(--nova-radius-sm);
    --bs-border-radius-sm: var(--nova-radius-xs);
    --bs-border-radius-lg: var(--nova-radius-md);
    --bs-primary: var(--nova-primary);
    --bs-primary-rgb: var(--nova-primary-rgb);
    --bs-primary-bg-subtle: var(--nova-primary-soft);
    --bs-primary-text-emphasis: var(--nova-primary-text);
    --bs-primary-border-subtle: var(--nova-primary);
    --bs-link-color: var(--nova-primary-text);
    --bs-link-color-rgb: var(--nova-primary-text-rgb);
    --bs-link-hover-color: var(--nova-primary-active);
    --bs-link-hover-color-rgb: var(--nova-primary-text-rgb);
    --bs-focus-ring-color: var(--nova-primary-ring);
    --bs-font-monospace: var(--nova-font-mono);
    --bs-danger: var(--nova-danger);
    --bs-danger-rgb: 215, 0, 21;
    --bs-success: var(--nova-success-solid);
    --bs-success-rgb: 36, 138, 61;
    --bs-secondary-rgb: 110, 110, 115;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--nova-font);
    font-size: var(--nova-text-md);
    letter-spacing: -0.006em;
    background: var(--nova-bg);
    color: var(--nova-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
.h5 {
    font-weight: 700;
    letter-spacing: var(--nova-tracking-tight);
    color: var(--nova-text);
}

a {
    color: var(--nova-primary-text);
    text-decoration: none;
    transition: color var(--nova-duration-fast) var(--nova-ease);
}

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

::selection {
    background: rgba(var(--nova-primary-rgb), 0.2);
}

:focus-visible {
    outline: 2px solid var(--nova-primary);
    outline-offset: 2px;
}

.text-secondary {
    color: var(--nova-text-muted) !important;
}

.text-danger {
    color: var(--nova-danger) !important;
}

.text-warning-emphasis {
    color: var(--nova-warning) !important;
}

.small,
small {
    font-size: var(--nova-text-sm);
}

.fw-semibold {
    font-weight: 600 !important;
}

.skip-link {
    position: absolute;
    left: var(--nova-space-3);
    top: -60px;
    z-index: 2000;
    padding: 10px 18px;
    background: var(--nova-surface);
    border-radius: var(--nova-radius-pill);
    font-weight: 600;
}

.skip-link:focus {
    top: var(--nova-space-3);
    box-shadow: var(--nova-shadow-pop);
}

.mono,
.font-monospace {
    font-family: var(--nova-font-mono) !important;
    font-size: 0.875em;
    letter-spacing: 0;
}

.required-mark {
    color: var(--nova-danger);
}

kbd {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--nova-fill);
    color: var(--nova-text-muted);
    font-family: var(--nova-font);
    font-size: var(--nova-text-xs);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------------------------------ */
/* 3. Buttons                                                          */
/* ------------------------------------------------------------------ */

.btn {
    --bs-btn-padding-x: 18px;
    --bs-btn-padding-y: 9px;
    --bs-btn-font-size: var(--nova-text-md);
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.33;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: var(--nova-radius-pill);
    --bs-btn-focus-box-shadow: var(--nova-focus-ring);
    --bs-btn-disabled-opacity: 0.45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nova-space-2);
    min-height: 40px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition:
        background-color var(--nova-duration-fast) var(--nova-ease),
        color var(--nova-duration-fast) var(--nova-ease),
        box-shadow var(--nova-duration) var(--nova-ease),
        transform var(--nova-duration-fast) var(--nova-ease);
}

.btn:active,
.btn.active {
    transform: scale(0.97);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.btn .bi {
    font-size: 1.05em;
    line-height: 1;
}

.btn-sm {
    --bs-btn-padding-x: 13px;
    --bs-btn-padding-y: 5px;
    --bs-btn-font-size: var(--nova-text-sm);
    min-height: 32px;
    gap: 6px;
}

.btn-lg {
    --bs-btn-padding-x: 26px;
    --bs-btn-padding-y: 13px;
    --bs-btn-font-size: var(--nova-text-lg);
    min-height: 52px;
}

.btn-primary {
    --bs-btn-color: var(--nova-primary-contrast);
    --bs-btn-bg: var(--nova-primary);
    --bs-btn-hover-color: var(--nova-primary-contrast);
    --bs-btn-hover-bg: var(--nova-primary-hover);
    --bs-btn-active-color: var(--nova-primary-contrast);
    --bs-btn-active-bg: var(--nova-primary-active);
    --bs-btn-disabled-color: var(--nova-primary-contrast);
    --bs-btn-disabled-bg: var(--nova-primary);
    box-shadow: 0 6px 16px rgba(var(--nova-primary-rgb), 0.24);
}

.btn-primary:hover {
    box-shadow: 0 10px 24px var(--nova-primary-glow);
}

.btn-primary:disabled,
.btn-primary.disabled {
    box-shadow: none;
}

.btn-outline-secondary,
.btn-secondary,
.btn-light {
    --bs-btn-color: var(--nova-text);
    --bs-btn-bg: var(--nova-fill);
    --bs-btn-hover-color: var(--nova-text);
    --bs-btn-hover-bg: var(--nova-fill-hover);
    --bs-btn-active-color: var(--nova-text);
    --bs-btn-active-bg: var(--nova-fill-strong);
    --bs-btn-disabled-color: var(--nova-text-subtle);
    --bs-btn-disabled-bg: var(--nova-fill);
}

/* Secondary buttons on the gray ground (page header) are white chips. */
.page-header .btn-outline-secondary,
.dash-hero .btn-outline-secondary {
    --bs-btn-bg: var(--nova-surface);
    --bs-btn-hover-bg: var(--nova-surface);
    --bs-btn-active-bg: var(--nova-fill);
    box-shadow: var(--nova-shadow-xs), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.page-header .btn-outline-secondary:hover,
.dash-hero .btn-outline-secondary:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.btn-outline-primary {
    --bs-btn-color: var(--nova-primary-text);
    --bs-btn-bg: var(--nova-primary-soft);
    --bs-btn-hover-color: var(--nova-primary-text);
    --bs-btn-hover-bg: rgba(var(--nova-primary-rgb), 0.18);
    --bs-btn-active-color: var(--nova-primary-contrast);
    --bs-btn-active-bg: var(--nova-primary);
    --bs-btn-disabled-color: var(--nova-primary-text);
    --bs-btn-disabled-bg: var(--nova-primary-soft);
}

.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--nova-danger);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--nova-danger-hover);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #9E0010;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--nova-danger);
    box-shadow: 0 6px 16px rgba(215, 0, 21, 0.22);
}

.btn-outline-danger {
    --bs-btn-color: var(--nova-danger);
    --bs-btn-bg: var(--nova-danger-soft);
    --bs-btn-hover-color: var(--nova-danger);
    --bs-btn-hover-bg: #FFDCDA;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--nova-danger);
    --bs-btn-disabled-color: var(--nova-danger);
    --bs-btn-disabled-bg: var(--nova-danger-soft);
}

.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--nova-success-solid);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #1F7A35;
    --bs-btn-active-bg: #1A6A2E;
}

.btn-outline-success {
    --bs-btn-color: var(--nova-success);
    --bs-btn-bg: var(--nova-success-soft);
    --bs-btn-hover-color: var(--nova-success);
    --bs-btn-hover-bg: #D5F0DC;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--nova-success-solid);
}

.btn-link {
    --bs-btn-color: var(--nova-primary-text);
    --bs-btn-hover-color: var(--nova-primary-active);
    --bs-btn-active-color: var(--nova-primary-active);
    text-decoration: none;
}

.btn-icon {
    --bs-btn-padding-x: 0;
    width: 40px;
    min-width: 40px;
}

.btn-icon.btn-sm {
    width: 32px;
    min-width: 32px;
}

.btn[aria-busy="true"] {
    pointer-events: none;
}

.btn .spinner-border-sm {
    --bs-spinner-width: 0.9em;
    --bs-spinner-height: 0.9em;
    --bs-spinner-border-width: 0.14em;
}

/* Radio buttons shown as one segmented control (Sayım → Artır / Azalt). */
.btn-group {
    gap: 2px;
    padding: 3px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
}

.btn-group > .btn,
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:nth-child(n + 3),
.btn-group > :not(.btn-check) + .btn {
    border-radius: var(--nova-radius-pill);
    margin-left: 0;
}

.btn-group > .btn {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--nova-text-muted);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.6);
    box-shadow: none;
}

.btn-check:checked + .btn,
.btn-check:checked + .btn:hover {
    background: var(--nova-surface);
    color: var(--nova-text);
    box-shadow: var(--nova-shadow-sm);
    transform: none;
}

.btn-check:checked + .btn-outline-success {
    color: var(--nova-success);
}

.btn-check:checked + .btn-outline-danger {
    color: var(--nova-danger);
}

.btn-check:focus-visible + .btn {
    box-shadow: var(--nova-focus-ring);
}

.btn-close {
    --bs-btn-close-opacity: 0.7;
    --bs-btn-close-hover-opacity: 1;
    --bs-btn-close-focus-shadow: var(--nova-focus-ring);
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--nova-fill);
    background-size: 10px;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.btn-close:hover {
    background-color: var(--nova-fill-hover);
}

/* ------------------------------------------------------------------ */
/* 4. Forms                                                            */
/* ------------------------------------------------------------------ */

.form-label {
    margin-bottom: 7px;
    padding-left: 4px;
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-text-muted);
}

.form-text {
    margin-top: 6px;
    padding-left: 4px;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-subtle);
}

.form-control,
.form-select {
    min-height: 44px;
    padding: 10px 16px;
    font-size: var(--nova-text-md);
    line-height: 1.4;
    color: var(--nova-text);
    background-color: var(--nova-fill);
    border: 1px solid transparent;
    border-radius: var(--nova-radius-input);
    box-shadow: none;
    transition:
        background-color var(--nova-duration-fast) var(--nova-ease),
        box-shadow var(--nova-duration) var(--nova-ease);
}

.form-select {
    padding-right: 42px;
    background-position: right 16px center;
    background-size: 14px 10px;
}

.form-control::placeholder {
    color: var(--nova-text-subtle);
    opacity: 1;
}

.form-control:hover,
.form-select:hover {
    background-color: var(--nova-fill-hover);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--nova-surface);
    border-color: transparent;
    color: var(--nova-text);
    box-shadow: var(--nova-focus-ring);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--nova-fill);
    color: var(--nova-text-muted);
    opacity: 1;
}

.form-control[readonly]:focus {
    box-shadow: none;
}

.form-control-sm,
.form-select-sm {
    min-height: 34px;
    padding: 6px 12px;
    font-size: var(--nova-text-sm);
    border-radius: var(--nova-radius-sm);
}

.form-select-sm {
    padding-right: 34px;
    background-position: right 12px center;
}

textarea.form-control {
    min-height: 88px;
    resize: vertical;
}

.form-control-color {
    width: 48px;
    min-width: 48px;
    height: 44px;
    padding: 5px;
}

.form-control-color::-webkit-color-swatch {
    border: 0;
    border-radius: 10px;
}

.form-control[type="file"] {
    padding: 9px 12px;
}

.form-control::file-selector-button {
    margin: -9px 12px -9px -12px;
    padding: 9px 14px;
    border: 0;
    background: var(--nova-fill-strong);
    color: var(--nova-text);
    font-weight: 600;
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid {
    border-color: transparent;
    background-color: #FFF6F5;
    box-shadow: 0 0 0 2px rgba(215, 0, 21, 0.7);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 2px var(--nova-danger), 0 0 0 6px rgba(215, 0, 21, 0.14);
}

.invalid-feedback {
    margin-top: 6px;
    padding-left: 4px;
    font-size: var(--nova-text-sm);
    font-weight: 500;
    color: var(--nova-danger);
}

/* Search box with an icon: one soft pill; the ring is on the group. */
.input-group {
    flex-wrap: nowrap;
    border-radius: var(--nova-radius-input);
    background: var(--nova-fill);
    transition:
        background-color var(--nova-duration-fast) var(--nova-ease),
        box-shadow var(--nova-duration) var(--nova-ease);
}

.input-group:hover {
    background: var(--nova-fill-hover);
}

.input-group:focus-within {
    background: var(--nova-surface);
    box-shadow: var(--nova-focus-ring);
}

.input-group > .input-group-text {
    padding: 0 4px 0 15px;
    border: 0;
    background: transparent;
    color: var(--nova-text-subtle);
}

.input-group > .form-control,
.input-group > .form-control:hover,
.input-group > .form-control:focus {
    background: transparent;
    box-shadow: none;
}

.input-group > .form-control {
    padding-left: 8px;
}

.form-check {
    min-height: 24px;
}

.form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1.5px solid var(--nova-border-strong);
    background-color: var(--nova-surface);
    transition:
        background-color var(--nova-duration-fast) var(--nova-ease),
        border-color var(--nova-duration-fast) var(--nova-ease),
        box-shadow var(--nova-duration) var(--nova-ease);
}

.form-check-input[type="checkbox"] {
    border-radius: 6px;
}

.form-check-input:checked {
    background-color: var(--nova-primary);
    border-color: var(--nova-primary);
}

.form-check-input:focus {
    border-color: var(--nova-primary);
    box-shadow: 0 0 0 4px var(--nova-primary-ring);
}

.form-check-label {
    padding-left: 4px;
    font-weight: 500;
}

/* Apple-like switch: green when on is the platform habit, brand here. */
.form-switch {
    padding-left: 3.1em;
}

.form-switch .form-check-input {
    width: 2.55em;
    height: 1.5em;
    margin-top: -0.05em;
    margin-left: -3.1em;
    border: 0;
    background-color: var(--nova-fill-strong);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.3' fill='%23fff'/%3e%3c/svg%3e");
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.form-switch .form-check-input:checked {
    background-color: var(--nova-primary);
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Searchable dropdown (nova.combo, _Combo.cshtml). */
.combo {
    position: relative;
}

.combo-list {
    top: 100%;
    left: 0;
    right: 0;
    max-height: 320px;
    margin-top: 6px;
    overflow-y: auto;
}

.combo-option {
    cursor: pointer;
    white-space: normal;
}

.combo-option.active,
.combo-option:hover,
.combo-option:active {
    background: var(--nova-primary-soft);
    color: var(--nova-text);
}

.combo-option-text {
    font-weight: 600;
}

.combo-option-detail {
    font-size: var(--nova-text-xs);
    color: var(--nova-text-muted);
}

.combo-empty {
    padding: 10px 14px;
    color: var(--nova-text-subtle);
}

/* ------------------------------------------------------------------ */
/* 5. Segmented control, filter pills                                  */
/* ------------------------------------------------------------------ */

.segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border-radius: var(--nova-radius-pill);
    background: rgba(0, 0, 0, 0.055);
}

.segmented-item {
    min-height: 30px;
    padding: 5px 14px;
    border: 0;
    border-radius: var(--nova-radius-pill);
    background: transparent;
    color: var(--nova-text-muted);
    font: inherit;
    font-size: var(--nova-text-sm);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--nova-duration) var(--nova-ease),
        color var(--nova-duration-fast) var(--nova-ease),
        box-shadow var(--nova-duration) var(--nova-ease);
}

.segmented-item:hover {
    color: var(--nova-text);
}

.segmented-item.active,
.segmented-item[aria-pressed="true"],
.segmented-item[aria-checked="true"] {
    background: var(--nova-surface);
    color: var(--nova-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.segmented-item:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.segmented-sm .segmented-item {
    min-height: 26px;
    padding: 3px 11px;
    font-size: var(--nova-text-xs);
}

/* Status filter pills with counts (Siparişler). */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--nova-gap);
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 8px 0 15px;
    border: 0;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-surface);
    color: var(--nova-text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--nova-shadow-xs), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition:
        background-color var(--nova-duration) var(--nova-ease),
        color var(--nova-duration-fast) var(--nova-ease),
        box-shadow var(--nova-duration) var(--nova-ease),
        transform var(--nova-duration-fast) var(--nova-ease);
}

.filter-pill:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.filter-pill:active {
    transform: scale(0.97);
}

.filter-pill:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.filter-pill-count {
    min-width: 26px;
    padding: 1px 8px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    color: var(--nova-text-muted);
    font-size: var(--nova-text-xs);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.filter-pill[aria-pressed="true"] {
    background: var(--nova-text);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.filter-pill[aria-pressed="true"] .filter-pill-count {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* 6. App shell                                                        */
/* ------------------------------------------------------------------ */

.app-shell {
    position: relative;
    min-height: 100vh;
}

/* The sidebar column for the whole page height (the fixed sidebar covers
   only the viewport; long pages and full-page captures keep the column). */
.app-shell::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--nova-sidebar-width);
    background: #FCFCFD;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    transition: width var(--nova-duration-slow) var(--nova-ease);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    width: var(--nova-sidebar-width);
    background: var(--nova-frost);
    -webkit-backdrop-filter: var(--nova-blur);
    backdrop-filter: var(--nova-blur);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    transition:
        width var(--nova-duration-slow) var(--nova-ease),
        transform var(--nova-duration-slow) var(--nova-ease-out),
        box-shadow var(--nova-duration-slow) var(--nova-ease);
}

.sidebar-header,
.sidebar-footer {
    flex-shrink: 0;
}

.sidebar-header {
    display: flex;
    align-items: center;
    height: var(--nova-topbar-height);
    margin-bottom: 6px;
    padding: 0 18px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 6px;
    border-radius: var(--nova-radius-sm);
    color: var(--nova-text);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-brand:hover {
    color: var(--nova-text);
}

.sidebar-logo {
    max-width: 196px;
    max-height: 36px;
    object-fit: contain;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.sidebar-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.sidebar-brand-sub {
    font-size: var(--nova-text-xs);
    font-weight: 500;
    color: var(--nova-text-subtle);
}

/* Shown only in the collapsed rail (see below). */
.sidebar-brand .sidebar-icon,
.sidebar-brand .sidebar-icon-mark {
    display: none;
}

.sidebar-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 11px;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 6px 16px rgba(var(--nova-primary-rgb), 0.35);
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 14px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

.nav-group + .nav-group {
    margin-top: 14px;
}

.nav-group-title {
    padding: 4px 12px 6px;
    font-size: var(--nova-text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--nova-text-subtle);
    white-space: nowrap;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    margin: 1px 0;
    padding: 0 12px;
    border-radius: var(--nova-radius-sm);
    color: var(--nova-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--nova-duration-fast) var(--nova-ease),
        color var(--nova-duration-fast) var(--nova-ease);
}

.nav-item .bi {
    flex: 0 0 20px;
    font-size: 1.0625rem;
    color: var(--nova-text-muted);
    text-align: center;
    transition: color var(--nova-duration-fast) var(--nova-ease);
}

.nav-item:hover {
    background: rgba(0, 0, 0, 0.045);
    color: var(--nova-text);
}

.nav-item.active {
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
    font-weight: 600;
}

.nav-item.active .bi {
    color: var(--nova-primary-text);
}

.nav-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer {
    padding: 10px 14px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--nova-radius-sm);
    background: transparent;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.sidebar-collapse-toggle .bi {
    flex: 0 0 20px;
    font-size: 1.0625rem;
    transition: transform var(--nova-duration-slow) var(--nova-ease);
}

.sidebar-collapse-toggle:hover {
    background: rgba(0, 0, 0, 0.045);
    color: var(--nova-text);
}

.sidebar-backdrop {
    display: none;
}

.main {
    min-height: 100vh;
    margin-left: var(--nova-sidebar-width);
    transition: margin-left var(--nova-duration-slow) var(--nova-ease);
}

.topbar {
    position: sticky;
    top: var(--nova-support-banner-offset, 0px);
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--nova-topbar-height);
    padding: 0 var(--nova-page-padding-x);
    background: var(--nova-frost-ground);
    -webkit-backdrop-filter: var(--nova-blur);
    backdrop-filter: var(--nova-blur);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.topbar .topbar-menu {
    display: none;
}

.topbar-title {
    display: none;
    min-width: 0;
    font-weight: 700;
    letter-spacing: -0.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nova-text);
    font-size: 1.25rem;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.icon-button:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Global search: Enter opens stock search; the menu offers other lists. */
.global-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    max-width: 520px;
    height: 40px;
    margin: 0;
    padding: 0 12px 0 14px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-surface);
    box-shadow: var(--nova-shadow-xs), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: box-shadow var(--nova-duration) var(--nova-ease);
}

.global-search:focus-within {
    box-shadow: var(--nova-focus-ring);
}

.global-search-icon {
    color: var(--nova-text-subtle);
    font-size: 0.9375rem;
}

.global-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--nova-text);
    font: inherit;
    font-size: 0.875rem;
}

.global-search-input::placeholder {
    color: var(--nova-text-subtle);
}

.global-search-input::-webkit-search-cancel-button {
    display: none;
}

.global-search-kbd {
    display: none;
}

.global-search.has-shortcut .global-search-kbd {
    display: inline-block;
}

.global-search.has-shortcut:focus-within .global-search-kbd {
    display: none;
}

.global-search-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1040;
    padding: 6px;
    border-radius: var(--nova-radius-md);
    background: var(--nova-surface);
    box-shadow: var(--nova-shadow-pop);
    animation: nova-pop-in var(--nova-duration) var(--nova-ease-out);
}

.global-search-menu[hidden] {
    display: none;
}

.global-search-heading {
    padding: 8px 12px 4px;
    font-size: var(--nova-text-xs);
    font-weight: 600;
    color: var(--nova-text-subtle);
}

.global-search-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--nova-radius-sm);
    background: transparent;
    color: var(--nova-text);
    font-size: 0.875rem;
    text-align: left;
    text-decoration: none;
}

.global-search-option .bi {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--nova-fill);
    color: var(--nova-text-muted);
    font-size: 0.9375rem;
}

.global-search-option-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-option-text strong {
    font-weight: 600;
}

.global-search-option-hint {
    margin-left: auto;
    color: var(--nova-text-subtle);
    font-size: var(--nova-text-xs);
}

.global-search-option:hover,
.global-search-option.active {
    background: var(--nova-primary-soft);
    color: var(--nova-text);
}

.global-search-option.active .bi,
.global-search-option:hover .bi {
    background: var(--nova-surface);
    color: var(--nova-primary-text);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.tenant-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    height: 36px;
    padding: 0 14px 0 12px;
    border-radius: var(--nova-radius-pill);
    background: rgba(0, 0, 0, 0.045);
    color: var(--nova-text);
    font-size: var(--nova-text-sm);
    white-space: nowrap;
}

.tenant-pill .bi {
    color: var(--nova-text-muted);
}

.tenant-pill-code {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tenant-pill-name {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--nova-text-muted);
}

.tenant-pill-name::before {
    content: "·";
    margin-right: 8px;
    color: var(--nova-text-subtle);
}

/* ------------------------------------------------------------------
   Platform admin support session ("Firmaya geç" / "Kullanıcı olarak
   gir"): a sticky warning banner above the top bar, the tenant switcher
   of the top bar, the tenant panel's users, Platform → Oturum geçmişi.
   ------------------------------------------------------------------ */

body.has-support-banner {
    --nova-support-banner-offset: var(--nova-support-banner-height);
}

.support-banner {
    position: sticky;
    top: 0;
    z-index: 1021;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--nova-support-banner-height);
    padding: 6px var(--nova-page-padding-x);
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
    border-bottom: 1px solid var(--nova-warning-line);
    font-size: var(--nova-text-sm);
    line-height: 1.3;
}

.support-banner-icon {
    flex: 0 0 auto;
    color: var(--nova-warning-bright);
    font-size: 1.15rem;
}

/* One line on wide screens (the top bar sticks right below it). */
.support-banner-text {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 2px 12px;
    min-width: 0;
    overflow: hidden;
}

.support-banner-title {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-banner-meta {
    overflow: hidden;
    max-width: 520px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-banner-meta:empty {
    display: none;
}

.support-banner-form {
    flex: 0 0 auto;
    margin: 0;
}

.btn.support-banner-exit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--nova-warning);
    border-color: transparent;
    color: var(--nova-surface);
    font-weight: 600;
}

.btn.support-banner-exit:hover,
.btn.support-banner-exit:focus-visible {
    background: var(--nova-warning-hover);
    color: var(--nova-surface);
}

.tenant-pill-button {
    border: 0;
    cursor: pointer;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.tenant-pill-button:hover,
.tenant-pill-button[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.08);
}

.tenant-pill-button:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.tenant-pill-chevron {
    font-size: 0.7rem;
}

.tenant-pill.tenant-pill-support {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.tenant-pill.tenant-pill-support .bi {
    color: var(--nova-warning);
}

.tenant-switcher-menu {
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 12px;
}

.tenant-switcher-head {
    margin: 0 4px 8px;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tenant-switcher-search {
    margin-bottom: 8px;
}

.tenant-switcher-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.tenant-switcher-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--nova-radius-xs);
    background: transparent;
    color: var(--nova-text);
    font-size: var(--nova-text-sm);
    text-align: left;
}

.tenant-switcher-item:hover,
.tenant-switcher-item:focus-visible {
    outline: none;
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
}

.tenant-switcher-item.is-current {
    background: rgba(0, 0, 0, 0.045);
    cursor: default;
    opacity: 1;
}

.tenant-switcher-code {
    flex: 0 0 auto;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tenant-switcher-name {
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--nova-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-switcher-tag {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
    font-size: var(--nova-text-xs);
    font-weight: 600;
}

.tenant-switcher-tag-muted {
    background: rgba(0, 0, 0, 0.06);
    color: var(--nova-text-muted);
}

.tenant-switcher-note {
    margin: 6px 4px;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

.tenant-users {
    display: flex;
    flex-direction: column;
}

.tenant-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--nova-hairline);
}

.tenant-user:first-child {
    border-top: 0;
}

.tenant-user-text {
    flex: 1 1 auto;
    min-width: 0;
}

.tenant-user-name {
    font-weight: 600;
}

.tenant-user-meta {
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

.tenant-user-action {
    flex: 0 0 auto;
}

.support-sessions-filters {
    flex-wrap: wrap;
    flex-shrink: 1;
}

.support-sessions-filters .filter-pills {
    margin-bottom: 0;
}

.support-sessions-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.support-sessions-reason {
    max-width: 320px;
    white-space: normal;
}

@media (max-width: 575.98px) {
    /* Phone: the banner wraps and scrolls away; the top bar sticks at the top. */
    body.has-support-banner {
        --nova-support-banner-offset: 0px;
    }

    .support-banner {
        position: static;
    }

    .support-banner-text {
        flex-wrap: wrap;
    }

    .support-banner-title {
        white-space: normal;
    }

    .support-banner-reason {
        display: none;
    }

    .support-banner-exit span {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .topbar .global-search,
    .topbar .global-search-input {
        min-width: 0;
    }

    /* Icon only: the top bar has no room for the code (the plain tenant pill is hidden here). */
    .tenant-switcher .tenant-pill {
        display: inline-flex;
        justify-content: center;
        width: 40px;
        padding: 0;
    }

    .tenant-switcher .tenant-pill-code,
    .tenant-switcher .tenant-pill-name,
    .tenant-switcher .tenant-pill-chevron {
        display: none;
    }
}

.topbar-culture {
    flex: 0 0 auto;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 4px;
    border: 0;
    border-radius: var(--nova-radius-pill);
    background: transparent;
    color: var(--nova-text);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.user-chip:hover,
.user-chip[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.055);
}

.user-chip::after {
    display: none;
}

.user-chip .bi-chevron-down {
    font-size: 0.75rem;
    color: var(--nova-text-subtle);
}

.user-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu {
    min-width: 260px;
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 12px;
}

.user-menu-name {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.user-menu-meta {
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.user-menu-culture {
    display: none;
    padding: 6px 12px 10px;
}

.page {
    max-width: 1480px;
    margin: 0 auto;
    padding: 32px var(--nova-page-padding-x) 64px;
}

.page:focus {
    outline: none;
}

/* Collapsed sidebar (desktop): an icon rail; remembered per browser. */
@media (min-width: 992px) {
    /* Nothing scrolls under the desktop sidebar: the full-height column
       (.app-shell::before) paints its surface and hairline. */
    .sidebar {
        background: transparent;
        border-right-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    body.sidebar-collapsed .sidebar,
    body.sidebar-collapsed .app-shell::before {
        width: var(--nova-sidebar-collapsed-width);
    }

    body.sidebar-collapsed .main {
        margin-left: var(--nova-sidebar-collapsed-width);
    }

    body.sidebar-collapsed .nav-item-text,
    body.sidebar-collapsed .nav-group-title,
    body.sidebar-collapsed .sidebar-brand-text,
    body.sidebar-collapsed .sidebar-logo,
    body.sidebar-collapsed .sidebar-brand > .brand-mark:not(.sidebar-icon-mark) {
        display: none;
    }

    body.sidebar-collapsed .sidebar-icon,
    body.sidebar-collapsed .sidebar-icon-mark {
        display: inline-grid;
    }

    body.sidebar-collapsed .sidebar-header {
        justify-content: center;
        padding: 0;
    }

    body.sidebar-collapsed .sidebar-nav,
    body.sidebar-collapsed .sidebar-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.sidebar-collapsed .nav-item,
    body.sidebar-collapsed .sidebar-collapse-toggle {
        justify-content: center;
        min-height: 44px;
        padding: 0;
    }

    body.sidebar-collapsed .nav-item .bi {
        font-size: 1.1875rem;
    }

    body.sidebar-collapsed .nav-group + .nav-group {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    body.sidebar-collapsed .sidebar-collapse-toggle .bi {
        transform: rotate(180deg);
    }
}

/* ------------------------------------------------------------------ */
/* 7. Page header, cards, list layout                                  */
/* ------------------------------------------------------------------ */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 28px;
}

.page-header-text {
    min-width: 0;
    max-width: 760px;
}

.page-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-primary-text);
}

.page-title {
    margin: 0;
    font-size: var(--nova-title);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--nova-tracking-title);
    overflow-wrap: anywhere;
}

.page-description {
    margin: 8px 0 0;
    font-size: var(--nova-text-md);
    line-height: 1.5;
    color: var(--nova-text-muted);
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-text-subtle);
}

.page-breadcrumb a {
    color: var(--nova-primary-text);
    text-decoration: none;
}

.page-breadcrumb a:hover {
    color: var(--nova-primary-active);
}

.page-breadcrumb .bi {
    font-size: 0.6875rem;
}

.card-panel {
    position: relative;
    padding: 24px 28px;
    border: 0;
    border-radius: var(--nova-radius-card);
    background: var(--nova-surface);
    box-shadow: var(--nova-shadow-card);
}

.card-panel + .card-panel,
.card-panel + section,
section + .card-panel {
    margin-top: var(--nova-gap);
}

.card-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.card-panel-title {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.card-panel-subtitle {
    margin: 2px 0 0;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.card-panel-link {
    font-size: var(--nova-text-sm);
    font-weight: 600;
}

/* List card: filters on top, the table bleeds to the card edges, the
   pager sits on the bottom edge (Siparişler pattern). */
.card-panel > .filter-bar,
.card-panel > .list-toolbar {
    margin: -4px -28px 0 !important;
    padding: 0 28px 20px;
    border-bottom: 1px solid var(--nova-hairline);
}

.card-panel > .table-responsive {
    margin: 0 -28px;
}

.card-panel > .table-responsive:last-child {
    margin-bottom: -24px;
}

.card-panel > .table-responsive > .table > :not(caption) > tr > :first-child {
    padding-left: 28px;
}

.card-panel > .table-responsive > .table > :not(caption) > tr > :last-child {
    padding-right: 28px;
}

.card-panel > .table-responsive > .table > thead > tr > th {
    background: var(--nova-surface);
}

.card-panel-header + .table-responsive,
.card-panel-title + .table-responsive {
    margin-top: -4px;
}

.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: var(--nova-space-3);
}

.search-box {
    flex: 1 1 320px;
    max-width: 420px;
}

.code-name-code {
    font-weight: 600;
}

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

.cell-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--nova-text-xs);
    font-weight: 500;
    color: var(--nova-text-subtle);
}

/* Filter bar above lists: labelled filters that wrap. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 14px;
}

.filter-item {
    flex: 1 1 150px;
    min-width: 150px;
    max-width: 260px;
}

.filter-item-wide {
    flex: 2 1 220px;
    max-width: 440px;
}

.filter-item-date {
    flex: 0 1 150px;
    min-width: 140px;
}

.filter-item-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: none;
    margin-left: auto;
    padding-bottom: 2px;
}

.filter-item .form-label {
    margin-bottom: 6px;
    font-size: var(--nova-text-xs);
}

.filter-item .form-check {
    margin-right: 6px;
}

/* ------------------------------------------------------------------ */
/* 8. Tables                                                           */
/* ------------------------------------------------------------------ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nova-text);
    --bs-table-border-color: var(--nova-hairline);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.022);
    --bs-table-hover-color: var(--nova-text);
    --bs-table-striped-bg: transparent;
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--nova-text);
}

.table > :not(caption) > * > * {
    padding: 15px 10px;
    border-bottom-color: var(--nova-hairline);
    background-color: var(--bs-table-bg);
    box-shadow: none;
}

.table > tbody > tr {
    height: 60px;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(0, 0, 0, 0.022);
}

.table > thead > tr > th {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nova-hairline);
    background: transparent;
    color: var(--nova-text-subtle);
    font-size: var(--nova-text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    /* Long headers (English) wrap instead of widening the table. */
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table > tbody td {
    vertical-align: middle;
}

.table td.text-end,
.table th.text-end {
    font-variant-numeric: tabular-nums;
}

.table-sm > :not(caption) > * > * {
    padding: 9px 10px;
}

.table-sm > tbody > tr {
    height: auto;
}

/* Absolutely positioned helpers in cells (visually-hidden labels) stay
   inside the horizontal scroller instead of widening the page. */
.table-responsive {
    position: relative;
}

/* Long lists: the header row sticks under the top bar on wide screens,
   where the table needs no horizontal scrolling. */
@media (min-width: 1400px) {
    .table-responsive.table-sticky {
        overflow: visible;
    }

    .table-sticky > .table > thead > tr > th {
        position: sticky;
        top: calc(var(--nova-topbar-height) + var(--nova-support-banner-offset, 0px));
        z-index: 2;
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: var(--nova-blur);
        backdrop-filter: var(--nova-blur);
    }
}

/* Rows that open something (lists). */
.row-clickable {
    cursor: pointer;
}

.row-clickable:focus-visible {
    outline: 2px solid var(--nova-primary);
    outline-offset: -2px;
}

.row-muted > td {
    color: var(--nova-text-subtle);
}

.text-truncate-cell {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 9. Badges, avatars, progress                                        */
/* ------------------------------------------------------------------ */

/* Status badge: nova.statusBadge(kind, value); Turkish label + dot. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 9px;
    border-radius: var(--nova-radius-pill);
    font-size: var(--nova-text-xs);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
}

.status-badge::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-badge-neutral {
    background: var(--nova-neutral-soft);
    color: var(--nova-text-muted);
}

.status-badge-primary {
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
}

.status-badge-success {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.status-badge-warning {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.status-badge-danger {
    background: var(--nova-danger-soft);
    color: var(--nova-danger);
}

.status-badge-info {
    background: var(--nova-info-soft);
    color: var(--nova-info);
}

.badge {
    padding: 4px 9px;
    border-radius: var(--nova-radius-pill);
    font-weight: 600;
}

/* Initials avatar (customers, user). Tone from the name (nova.avatarTone). */
.avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
    font-size: var(--nova-text-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.avatar-round {
    border-radius: 50%;
}

.avatar-sm {
    width: 32px;
    height: 32px;
}

.avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 0.9375rem;
}

.avatar-tone-1 {
    background: #FCE7F3;
    color: #A3155F;
}

.avatar-tone-2 {
    background: #FFF1D6;
    color: #9A4A00;
}

.avatar-tone-3 {
    background: #E3F6E8;
    color: #1F7A35;
}

.avatar-tone-4 {
    background: #ECEBFF;
    color: #4B3FC9;
}

.avatar-tone-5 {
    background: #DFF4F7;
    color: #0B6A7A;
}

.customer-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Long company names ("... Ltd. Şti.") are cut so the list fits the card. */
.customer-name {
    display: block;
    max-width: 240px;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Quantity progress (tahsis / toplanan / sevk of the requested quantity).
   Widths are set by nova.applyBarWidths (CSSOM). */
.progress-col {
    min-width: 190px;
}

/* Announced serials of an ASN line: the summary opens the full list. */
.serial-list > summary {
    cursor: pointer;
}

.serial-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.serial-chip {
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--nova-fill);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.serial-chip.is-received {
    color: var(--nova-success);
}

.qty-progress {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill-strong);
}

.qty-progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: var(--nova-radius-pill);
    transition: width var(--nova-duration-slow) var(--nova-ease-out);
}

.qty-progress-reserved {
    background: rgba(var(--nova-primary-rgb), 0.28);
}

.qty-progress-picked {
    background: var(--nova-primary);
}

.qty-progress-shipped {
    background: var(--nova-success-bright);
}

.qty-progress-received {
    background: var(--nova-success-bright);
}

.qty-progress-text {
    margin-top: 6px;
    font-size: var(--nova-text-xs);
    color: var(--nova-text-muted);
    /* Wraps between the parts: English captions are longer. */
    font-variant-numeric: tabular-nums;
}

.progress-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-inline .qty-progress {
    flex: 1 1 auto;
    min-width: 90px;
}

.progress-pct {
    flex: 0 0 42px;
    font-size: var(--nova-text-sm);
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* 10. Feedback                                                        */
/* ------------------------------------------------------------------ */

.alert {
    --bs-alert-border-radius: var(--nova-radius-md);
    --bs-alert-padding-x: 16px;
    --bs-alert-padding-y: 12px;
    border: 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert-danger {
    --bs-alert-bg: var(--nova-danger-soft);
    --bs-alert-color: #A0000F;
}

.alert-warning {
    --bs-alert-bg: var(--nova-warning-soft);
    --bs-alert-color: #8A3E00;
}

.alert-info {
    --bs-alert-bg: var(--nova-info-soft);
    --bs-alert-color: #004C99;
}

.alert-success {
    --bs-alert-bg: var(--nova-success-soft);
    --bs-alert-color: var(--nova-success);
}

/* Toasts (nova.toast): frosted card with a tinted icon. */
.toast-container {
    z-index: 1100;
    padding: 20px !important;
}

.toast.nova-toast {
    --bs-toast-max-width: 420px;
    --bs-toast-bg: rgba(255, 255, 255, 0.92);
    --bs-toast-border-width: 0;
    --bs-toast-border-radius: var(--nova-radius-md);
    --bs-toast-box-shadow: var(--nova-shadow-pop);
    width: auto;
    min-width: 300px;
    color: var(--nova-text);
    font-size: 0.875rem;
    font-weight: 500;
    -webkit-backdrop-filter: var(--nova-blur);
    backdrop-filter: var(--nova-blur);
}

.toast.nova-toast.show {
    animation: nova-toast-in 420ms var(--nova-ease-spring);
}

.nova-toast-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 14px;
}

.nova-toast-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
    font-size: 1rem;
}

.nova-toast-success .nova-toast-icon {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.nova-toast-danger .nova-toast-icon {
    background: var(--nova-danger-soft);
    color: var(--nova-danger);
}

.nova-toast-warning .nova-toast-icon {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.nova-toast-body {
    flex: 1 1 auto;
    line-height: 1.4;
}

.nova-toast .btn-close {
    width: 26px;
    height: 26px;
    background-color: transparent;
    background-size: 9px;
}

/* Empty state: _EmptyState.cshtml and nova.emptyState. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 16px 40px;
    text-align: center;
    color: var(--nova-text-muted);
    animation: nova-fade-up var(--nova-duration-slow) var(--nova-ease-out);
}

.empty-state-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    border-radius: 22px;
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
    font-size: 1.75rem;
}

.empty-state-title {
    margin: 0;
    font-size: var(--nova-text-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--nova-text);
}

.empty-state-text {
    margin: 0;
    max-width: 400px;
    font-size: 0.875rem;
}

.empty-state .btn {
    margin-top: 12px !important;
}

/* Loading row in tables and busy buttons. */
.loading-row td {
    padding: 36px 16px !important;
    color: var(--nova-text-subtle);
    text-align: center;
}

.loading-row .spinner-border {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
    --bs-spinner-border-width: 0.15em;
    color: var(--nova-primary);
    vertical-align: -2px;
}

/* Confirm dialog (nova.confirm) and other modals. */
.modal {
    --bs-modal-bg: var(--nova-surface);
    --bs-modal-border-radius: var(--nova-radius-card);
    --bs-modal-inner-border-radius: var(--nova-radius-card);
    --bs-modal-border-width: 0;
    --bs-modal-box-shadow: var(--nova-shadow-sheet);
    --bs-modal-header-border-width: 0;
    --bs-modal-footer-border-width: 0;
    --bs-modal-padding: 4px 28px 8px;
    --bs-modal-header-padding: 26px 28px 10px;
    --bs-modal-width: 460px;
}

.modal-content {
    box-shadow: var(--nova-shadow-sheet);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

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

.modal-footer {
    gap: 10px;
    padding: 14px 24px 24px;
}

.modal-footer > * {
    margin: 0;
}

.modal.fade .modal-dialog {
    transform: scale(0.94);
    transition: transform var(--nova-duration-slow) var(--nova-ease-spring);
}

.modal.show .modal-dialog {
    transform: none;
}

.modal-backdrop {
    --bs-backdrop-bg: rgba(29, 29, 31, 0.3);
    --bs-backdrop-opacity: 1;
    background-color: rgba(29, 29, 31, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.confirm-message {
    white-space: pre-line;
}

/* Dropdown menus (user menu, combo list). */
.dropdown-menu {
    --bs-dropdown-bg: var(--nova-surface);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: var(--nova-radius-md);
    --bs-dropdown-box-shadow: var(--nova-shadow-pop);
    --bs-dropdown-padding-x: 6px;
    --bs-dropdown-padding-y: 6px;
    --bs-dropdown-item-padding-x: 12px;
    --bs-dropdown-item-padding-y: 9px;
    --bs-dropdown-item-border-radius: 10px;
    --bs-dropdown-link-hover-bg: var(--nova-fill);
    --bs-dropdown-link-active-bg: var(--nova-primary-soft);
    --bs-dropdown-link-active-color: var(--nova-text);
    --bs-dropdown-divider-bg: var(--nova-hairline);
    --bs-dropdown-header-color: var(--nova-text);
    --bs-dropdown-font-size: 0.875rem;
    box-shadow: var(--nova-shadow-pop);
}

/* Opacity only: Popper positions the menu with transform. */
.dropdown-menu.show {
    animation: nova-fade-in var(--nova-duration) var(--nova-ease-out);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--nova-text);
    background-color: var(--nova-primary-soft);
}

/* ------------------------------------------------------------------ */
/* 11. Side panel (offcanvas) and tabs                                 */
/* ------------------------------------------------------------------ */

.offcanvas {
    --bs-offcanvas-padding-x: 28px;
    --bs-offcanvas-padding-y: 20px;
    --bs-offcanvas-border-width: 0;
    --bs-offcanvas-box-shadow: var(--nova-shadow-sheet);
    --bs-offcanvas-transition: transform 0.38s var(--nova-ease-out);
    background: rgba(255, 255, 255, 0.985);
    -webkit-backdrop-filter: var(--nova-blur);
    backdrop-filter: var(--nova-blur);
}

/* A floating sheet with all corners rounded. */
.offcanvas.offcanvas-end {
    top: 12px;
    right: 12px;
    bottom: 12px;
    height: auto;
    max-width: calc(100% - 24px);
    border-radius: var(--nova-radius-card);
    box-shadow: var(--nova-shadow-sheet);
    transform: translateX(calc(100% + 24px));
}

.offcanvas.offcanvas-end.showing,
.offcanvas.offcanvas-end.show:not(.hiding) {
    transform: none;
}

/* Light veil: the list stays readable next to the panel. */
.offcanvas-backdrop {
    background-color: rgba(29, 29, 31, 0.16);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

.offcanvas-backdrop.show {
    opacity: 1;
}

.offcanvas-header {
    align-items: flex-start;
    gap: 16px;
    padding: 26px 24px 12px 28px;
}

.offcanvas-title,
.offcanvas-title.h5 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.offcanvas-body {
    padding: 12px 28px 24px;
}

.form-panel {
    --bs-offcanvas-width: 540px;
}

.form-panel-wide {
    --bs-offcanvas-width: 780px;
}

.form-panel-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.form-panel .offcanvas-body {
    flex: 1 1 auto;
}

.form-panel-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--nova-hairline);
    background: transparent;
    border-radius: 0 0 var(--nova-radius-card) var(--nova-radius-card);
}

.panel-subtitle {
    margin-top: 4px;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.panel-actions {
    flex-wrap: wrap;
}

.panel-actions .btn.disabled {
    pointer-events: none;
    opacity: 0.45;
}

/* Tabs in the product panel: an Apple segmented control. */
.nav-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-tabs-border-radius: var(--nova-radius-pill);
    --bs-nav-link-padding-x: 14px;
    --bs-nav-link-padding-y: 6px;
    --bs-nav-link-font-weight: 600;
    --bs-nav-link-color: var(--nova-text-muted);
    --bs-nav-link-hover-color: var(--nova-text);
    flex-wrap: nowrap;
    gap: 2px;
    width: max-content;
    max-width: 100%;
    margin-bottom: 20px !important;
    padding: 3px;
    overflow-x: auto;
    border: 0;
    border-radius: var(--nova-radius-pill);
    background: rgba(0, 0, 0, 0.055);
    scrollbar-width: none;
}

.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    border: 0;
    border-radius: var(--nova-radius-pill);
    font-size: var(--nova-text-sm);
    white-space: nowrap;
    transition:
        background-color var(--nova-duration) var(--nova-ease),
        color var(--nova-duration-fast) var(--nova-ease),
        box-shadow var(--nova-duration) var(--nova-ease);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: var(--nova-surface);
    color: var(--nova-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.nav-tabs .nav-item {
    position: static;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

.nav-tabs .nav-item:hover {
    background: transparent;
}

.tab-count {
    margin-left: 6px;
    padding: 0 7px;
    border-radius: var(--nova-radius-pill);
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--nova-text-muted);
}

.tab-count:empty {
    display: none;
}

.sub-form {
    margin-top: 4px;
}

.sub-form-title {
    margin: 0 0 var(--nova-space-3);
    font-size: var(--nova-text-lg);
    font-weight: 700;
}

.sub-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: var(--nova-space-3);
    padding-top: var(--nova-space-3);
    border-top: 1px solid var(--nova-hairline);
}

/* ------------------------------------------------------------------ */
/* 12. Pagination                                                      */
/* ------------------------------------------------------------------ */

.list-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: var(--nova-space-3);
}

.card-panel > .list-pager {
    margin: 0 -28px -24px;
    padding: 14px 28px 18px;
    border-top: 1px solid var(--nova-hairline);
}

.list-pager:empty {
    display: none;
}

.pager-info {
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
    font-variant-numeric: tabular-nums;
}

.pager-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pager-size {
    width: auto;
    margin-right: 6px;
}

.pager-button {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--nova-radius-pill);
    background: transparent;
    color: var(--nova-text);
    font-size: var(--nova-text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition:
        background-color var(--nova-duration-fast) var(--nova-ease),
        color var(--nova-duration-fast) var(--nova-ease);
}

.pager-button:hover:not(:disabled) {
    background: var(--nova-fill);
}

.pager-button:disabled {
    color: var(--nova-text-subtle);
    opacity: 0.5;
}

.pager-button[aria-current="page"] {
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
    box-shadow: 0 4px 12px rgba(var(--nova-primary-rgb), 0.28);
}

.pager-button:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.pager-gap {
    min-width: 20px;
    color: var(--nova-text-subtle);
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* 13. Dashboard                                                       */
/* ------------------------------------------------------------------ */

.dash-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 24px;
    margin-bottom: 28px;
}

.dash-date {
    display: block;
    margin-bottom: 8px;
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-text-subtle);
}

.dash-greeting {
    font-size: 2.375rem;
}

.dash-summary {
    font-size: var(--nova-text-lg);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nova-gap);
    margin-bottom: var(--nova-gap);
}

.kpi-tile {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 22px 22px 20px;
    border-radius: var(--nova-radius-card);
    background: var(--nova-surface);
    box-shadow: var(--nova-shadow-card);
    color: var(--nova-text);
    text-decoration: none;
    transition:
        transform var(--nova-duration-slow) var(--nova-ease-spring),
        box-shadow var(--nova-duration-slow) var(--nova-ease);
}

.kpi-tile-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--nova-shadow-card-hover);
    color: var(--nova-text);
}

.kpi-tile-link:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring), var(--nova-shadow-card);
}

.kpi-tile-top,
.kpi-tile-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.kpi-tile-top {
    align-items: center;
}

.kpi-tile-bottom {
    align-items: flex-end;
    margin-bottom: -8px;
}

.kpi-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
    font-size: 1.1875rem;
}

.kpi-delta {
    padding: 3px 10px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-neutral-soft);
    color: var(--nova-text-muted);
    font-size: var(--nova-text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.kpi-delta:empty {
    display: none;
}

.kpi-delta.is-up {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.kpi-delta.is-warning {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.kpi-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
}

.kpi-label {
    margin-top: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nova-text-muted);
}

.kpi-hint {
    margin-top: 2px;
    font-size: var(--nova-text-xs);
    color: var(--nova-text-subtle);
}

.kpi-spark {
    flex: 0 0 auto;
    width: 96px;
    height: 40px;
    overflow: visible;
}

.spark-line {
    fill: none;
    stroke: var(--kpi-tone, var(--nova-primary));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spark-area {
    fill: var(--kpi-tone, var(--nova-primary));
    opacity: 0.1;
}

.spark-dot {
    fill: var(--kpi-tone, var(--nova-primary));
    stroke: var(--nova-surface);
    stroke-width: 2;
}

.kpi-tone-brand {
    --kpi-tone: var(--nova-primary);
}

.kpi-tone-neutral {
    --kpi-tone: #5E5CE6;
}

.kpi-tone-neutral .kpi-icon {
    background: #EEEEFD;
    color: #4B49C8;
}

.kpi-tone-warning {
    --kpi-tone: var(--nova-warning-bright);
}

.kpi-tone-warning .kpi-icon {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.kpi-tone-success {
    --kpi-tone: var(--nova-success-bright);
}

.kpi-tone-success .kpi-icon {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--nova-gap);
    align-items: stretch;
}

.dash-grid + .dash-grid {
    margin-top: var(--nova-gap);
}

.dash-grid-bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.dash-grid > .card-panel + .card-panel {
    margin-top: 0;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.chart-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chart-legend strong {
    color: var(--nova-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--nova-chart-neutral);
}

.legend-swatch-in {
    background: var(--nova-primary);
}

.legend-swatch-out {
    background: var(--nova-chart-neutral);
}

.bar-chart {
    position: relative;
    height: 290px;
    margin-top: 6px;
}

.bar-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-grid {
    stroke: var(--nova-hairline);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.chart-baseline {
    stroke: var(--nova-border);
}

.chart-tick,
.chart-label {
    fill: var(--nova-text-subtle);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.chart-label-today {
    fill: var(--nova-text);
    font-weight: 700;
}

.chart-bar {
    transition: opacity var(--nova-duration-fast) var(--nova-ease);
}

.chart-bar-in {
    fill: var(--nova-primary);
}

.chart-bar-out {
    fill: var(--nova-chart-neutral);
}

.chart-hit {
    fill: transparent;
    cursor: default;
}

.chart-column:hover .chart-hit,
.chart-column.is-active .chart-hit {
    fill: rgba(0, 0, 0, 0.03);
}

.bar-chart.has-active .chart-column:not(.is-active) .chart-bar {
    opacity: 0.45;
}

.bar-chart-empty {
    position: absolute;
    inset: 0 0 30px;
    display: grid;
    place-items: center;
    color: var(--nova-text-subtle);
    font-size: 0.875rem;
    font-weight: 500;
}

.chart-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 150px;
    padding: 10px 12px;
    border-radius: var(--nova-radius-sm);
    background: rgba(29, 29, 31, 0.92);
    color: #FFFFFF;
    font-size: var(--nova-text-sm);
    line-height: 1.45;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.chart-tooltip[hidden] {
    display: none;
}

.chart-tooltip-title {
    margin-bottom: 4px;
    font-weight: 700;
}

.chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.chart-tooltip-row strong {
    margin-left: auto;
    padding-left: 12px;
}

.chart-tooltip .legend-swatch-out {
    background: #C7C7CC;
}

.donut-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 10px;
}

.donut-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 168px;
    height: 168px;
}

.donut-wrap svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.donut-track {
    fill: none;
    stroke: var(--nova-fill);
    stroke-width: 5;
}

.donut-seg {
    fill: none;
    stroke-width: 5;
    stroke-linecap: butt;
    transition: stroke-dasharray 600ms var(--nova-ease-out), opacity var(--nova-duration-fast) var(--nova-ease);
}

.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.donut-total {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.donut-caption {
    margin-top: 4px;
    font-size: var(--nova-text-xs);
    color: var(--nova-text-muted);
}

.legend-list {
    display: flex;
    flex: 1 1 150px;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legend-list a,
.legend-list .legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    color: var(--nova-text);
    font-size: 0.875rem;
    text-decoration: none;
}

.legend-list a:hover {
    background: var(--nova-fill);
    color: var(--nova-text);
}

.legend-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-value {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tone-draft {
    background: #C7C7CC;
    stroke: #C7C7CC;
}

.tone-allocate {
    background: var(--nova-info-bright);
    stroke: var(--nova-info-bright);
}

.tone-picking {
    background: var(--nova-primary);
    stroke: var(--nova-primary);
}

.tone-ready {
    background: var(--nova-success-bright);
    stroke: var(--nova-success-bright);
}

.tone-partial {
    background: var(--nova-warning-bright);
    stroke: var(--nova-warning-bright);
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: var(--nova-radius-md);
    color: var(--nova-text);
    text-decoration: none;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.task-item:hover {
    background: var(--nova-fill);
    color: var(--nova-text);
}

.task-item:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.task-count {
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--nova-neutral-soft);
    color: var(--nova-text-muted);
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.task-item.tone-task-brand .task-count {
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
}

.task-item.tone-task-warning .task-count {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.task-item.tone-task-success .task-count {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.task-item.tone-task-danger .task-count {
    background: var(--nova-danger-soft);
    color: var(--nova-danger);
}

.task-item.tone-task-info .task-count {
    background: var(--nova-info-soft);
    color: var(--nova-info);
}

.task-item.is-idle .task-count {
    background: var(--nova-neutral-soft);
    color: var(--nova-text-subtle);
}

.task-item.is-idle .task-title {
    color: var(--nova-text-muted);
}

.task-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.task-title {
    font-weight: 600;
    font-size: 0.9375rem;
}

.task-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.task-item .bi-chevron-right {
    margin-left: auto;
    color: var(--nova-text-subtle);
    font-size: 0.8125rem;
}

.move-qty {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.move-time {
    color: var(--nova-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Legacy dashboard shortcuts (kept for links that use them). */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--nova-radius-sm);
    color: var(--nova-text);
    text-decoration: none;
}

.quick-action:hover {
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
}

.quick-action-arrow {
    margin-left: auto;
    color: var(--nova-text-subtle);
}

/* Shortcut chips under the dashboard (every task screen one click away). */
.shortcut-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--nova-gap);
}

.shortcut-grid .quick-action {
    padding: 9px 16px 9px 12px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-surface);
    box-shadow: var(--nova-shadow-xs), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    font-weight: 600;
}

.shortcut-grid .quick-action .bi:first-child {
    color: var(--nova-primary-text);
}

.shortcut-grid .quick-action-arrow {
    display: none;
}

/* ------------------------------------------------------------------ */
/* 14. Orders list                                                     */
/* ------------------------------------------------------------------ */

.order-no {
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.due-cell {
    white-space: nowrap;
    font-weight: 600;
}

.due-cell.is-urgent {
    color: var(--nova-danger);
    font-weight: 700;
}

.due-cell.is-soon {
    color: var(--nova-warning);
    font-weight: 600;
}

.row-action {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 15. Screens                                                         */
/* ------------------------------------------------------------------ */

/* Raw stock movement lines. */
.movement-line {
    margin-bottom: 12px;
    padding: var(--nova-space-3);
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface-muted);
}

/* Operation pages: form on the left, summary/result on the right. */
.operation-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: var(--nova-gap);
    align-items: start;
}

.operation-grid > .card-panel + .card-panel {
    margin-top: 0;
}

.operation-aside {
    position: sticky;
    top: calc(var(--nova-topbar-height) + 20px);
}

.form-section {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--nova-hairline);
}

.form-section-last {
    border-bottom: 0;
    margin-bottom: 8px;
    padding-bottom: 0;
}

.form-section-title {
    margin: 0 0 14px;
    font-size: var(--nova-text-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--nova-text);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--nova-hairline);
}

.tracking-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--nova-text-muted);
}

.serial-counter {
    margin-top: 6px;
    padding-left: 4px;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.serial-counter.is-ok {
    color: var(--nova-success);
}

.serial-counter.is-error {
    color: var(--nova-warning);
}

/* Label/value list (summary, balance detail). */
.detail-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 20px;
    margin: 0;
}

.detail-list dt {
    font-weight: 500;
    color: var(--nova-text-muted);
}

.detail-list dd {
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.detail-list-compact {
    gap: 6px 16px;
    font-size: var(--nova-text-sm);
}

.balance-card {
    padding: 18px 20px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface-muted);
}

/* Transfer: lines of the source pallet (nova.transferPallet). */
.transfer-pallet {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-fill);
}

.transfer-pallet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.transfer-pallet-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 112px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--nova-hairline);
}

.transfer-pallet-line:first-child {
    border-top: 0;
}

.transfer-pallet-line .invalid-feedback {
    grid-column: 2 / -1;
}

.transfer-pallet-line-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.transfer-pallet-qty {
    background: var(--nova-surface);
}

.quantity-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: var(--nova-space-3) 0;
}

.balance-card .quantity-strip {
    margin-bottom: 0;
}

.quantity-item {
    padding: 14px 12px 12px;
    border-radius: var(--nova-radius-md);
    background: var(--nova-surface-muted);
    text-align: center;
}

.balance-card .quantity-item {
    background: var(--nova-surface);
}

.quantity-label {
    font-size: var(--nova-text-xs);
    font-weight: 600;
    color: var(--nova-text-muted);
}

.quantity-value {
    margin-top: 2px;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.quantity-item-strong {
    background: var(--nova-success-soft);
}

.quantity-item-strong .quantity-value {
    color: var(--nova-success);
}

.result-subtitle {
    margin: 20px 0 10px;
    font-size: var(--nova-text-sm);
    font-weight: 700;
    color: var(--nova-text-muted);
}

.result-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    font-weight: 600;
}

/* Quantities and expiry. */
.qty-positive {
    font-weight: 700;
    color: var(--nova-success);
}

.qty-negative {
    font-weight: 700;
    color: var(--nova-danger);
}

.qty-zero {
    color: var(--nova-text-subtle);
}

.expiry-ok {
    font-size: var(--nova-text-xs);
    color: var(--nova-text-muted);
}

/* Count sheet. */
.count-input-col {
    width: 150px;
}

.count-table .row-diff > td {
    background: var(--nova-warning-soft);
}

.count-table .row-highlight > td {
    box-shadow: inset 3px 0 0 var(--nova-primary);
}

/* Price list: a row whose price was changed and is not saved yet. */
tr.row-changed > td {
    background-color: var(--nova-primary-soft, rgba(13, 110, 253, 0.06));
}

tr.row-changed > td:first-child {
    box-shadow: inset 3px 0 0 var(--nova-primary);
}

.count-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--nova-space-3);
    margin-top: var(--nova-space-3);
    padding-top: var(--nova-space-3);
    border-top: 1px solid var(--nova-hairline);
}

/* Transaction lists with expandable lines. */
.expand-col {
    width: 48px;
}

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

.btn-expand .bi {
    display: inline-block;
    transition: transform var(--nova-duration) var(--nova-ease);
}

.btn-expand[aria-expanded="true"] .bi {
    transform: rotate(90deg);
}

.tx-lines > td {
    background: var(--nova-surface-muted) !important;
}

.lines-table {
    font-size: var(--nova-text-sm);
    background: transparent;
}

.lines-table > tbody > tr {
    height: auto;
}

/* Detail page subtitle: status badge with customer. */
.order-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* The next step of the state machine, under the header. */
.next-step-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--nova-gap);
    padding: 14px 18px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
    font-weight: 600;
}

.next-step-hint::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nova-primary);
    box-shadow: 0 0 0 4px rgba(var(--nova-primary-rgb), 0.18);
}

.next-step-hint.d-none {
    display: none;
}

.next-step-hint.next-step-warning {
    background: var(--nova-warning-soft);
    color: #8A3E00;
}

.next-step-hint.next-step-warning::before {
    background: var(--nova-warning-bright);
    box-shadow: 0 0 0 4px rgba(255, 159, 10, 0.2);
}

.order-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--nova-space-4);
    align-items: start;
}

.order-overview .quantity-strip {
    margin: 0;
}

.quantity-strip-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Pick confirmation in the allocation table. */
.pick-control {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 150px;
}

.pick-control .form-control {
    width: 76px;
}

/* Allocation panel. */
.allocate-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.allocate-total {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.allocate-qty-col {
    width: 150px;
}

.allocate-plan {
    margin-top: var(--nova-space-3);
    padding: 16px 18px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface-muted);
}

.allocate-plan-list {
    margin: 0 0 10px;
    padding-left: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.allocate-plan-list li + li {
    margin-top: 2px;
}

/* Ship panel: one checkbox per line with picked, unshipped quantity. */
.ship-line-option {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--nova-hairline);
}

.ship-line-option:last-child {
    border-bottom: 0;
}

.ship-line-option .ship-line-qty {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Hızlı Sevk panel: preview, shortage choice and result. */
.quantity-strip-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-ship-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--nova-space-3) 0;
    color: var(--nova-text-muted);
}

.quick-ship-intro {
    margin-bottom: var(--nova-space-3);
    color: var(--nova-text-muted);
}

.quick-ship-table .quantity-short {
    color: var(--nova-danger);
    font-weight: 700;
}

.quick-ship-stock {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 200px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.quick-ship-stock li + li {
    margin-top: 8px;
}

.quick-ship-stock-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.quick-ship-stock-qty {
    margin-left: auto;
    font-weight: 700;
}

.quick-ship-stock-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--nova-text-muted);
    font-size: 12px;
}

.quick-ship-source {
    color: var(--nova-text-subtle);
}

.quick-ship-warnings {
    display: grid;
    gap: var(--nova-space-2);
    margin: var(--nova-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.quick-ship-warnings:empty {
    display: none;
}

.quick-ship-warnings li {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
    font-size: 14px;
}

.quick-ship-choice {
    margin-top: var(--nova-space-3);
    padding: 16px 18px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface-muted);
}

.quick-ship-choice .form-check + .form-check {
    margin-top: 10px;
}

.quick-ship-result {
    padding: var(--nova-space-4) 0 var(--nova-space-2);
    text-align: center;
}

.quick-ship-result .detail-list {
    margin: var(--nova-space-4) 0 0;
    padding: 16px 18px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface-muted);
    text-align: left;
}

.quick-ship-result-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--nova-space-3);
    border-radius: var(--nova-radius-pill);
    background: var(--nova-success-soft);
    color: var(--nova-success-solid);
    font-size: 32px;
    animation: nova-pop 420ms var(--nova-ease-spring) both;
}

.quick-ship-result-title {
    margin-bottom: var(--nova-space-1);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.quick-ship-result-text {
    margin: 0;
    color: var(--nova-text-muted);
}

/* Order activity timeline. */
.activity-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-item {
    position: relative;
    display: grid;
    grid-template-columns: 150px 180px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 12px 0 12px 22px;
    border-bottom: 1px solid var(--nova-hairline);
}

.activity-item::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 19px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nova-primary);
    box-shadow: 0 0 0 3px var(--nova-primary-soft);
}

.activity-item:last-child {
    border-bottom: 0;
}

.activity-time {
    color: var(--nova-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.activity-user {
    display: block;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

/* Order / ASN line editor (new order, draft detail). */
.line-editor {
    padding: 18px 20px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface-muted);
}

.line-editor .form-control,
.line-editor .form-select,
.line-editor .input-group {
    background-color: var(--nova-surface);
}

.line-editor-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--nova-space-3);
}

.order-add-line {
    margin-top: var(--nova-space-3);
    padding-top: var(--nova-space-3);
    border-top: 1px solid var(--nova-hairline);
}

/* Putaway suggestions; the selected one is marked with the brand color. */
.suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--nova-space-3);
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--nova-radius-md);
    background: var(--nova-surface-muted);
    color: var(--nova-text);
    text-align: left;
    box-shadow: inset 0 0 0 1.5px transparent;
    transition:
        background-color var(--nova-duration-fast) var(--nova-ease),
        box-shadow var(--nova-duration) var(--nova-ease);
}

.suggestion-item:hover {
    background: var(--nova-fill-hover);
}

.suggestion-item:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.suggestion-item.is-selected {
    background: var(--nova-primary-soft);
    box-shadow: inset 0 0 0 1.5px var(--nova-primary);
}

.suggestion-rank {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--nova-surface);
    color: var(--nova-text-muted);
    font-weight: 700;
    box-shadow: var(--nova-shadow-xs);
}

.suggestion-item.is-selected .suggestion-rank {
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
}

.suggestion-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.suggestion-code {
    font-weight: 700;
    font-family: var(--nova-font-mono);
}

.suggestion-reason {
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

/* Smart slotting reasons and score of a putaway suggestion. */
.reason-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.reason-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-surface);
    color: var(--nova-text-muted);
    font-size: var(--nova-text-xs);
    font-weight: 500;
    line-height: 1.5;
}

.reason-chip-warning {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.suggestion-item.is-selected .reason-chip-reason {
    color: var(--nova-primary-text);
}

.suggestion-score {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-surface);
    color: var(--nova-text-muted);
    font-size: var(--nova-text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.suggestion-item.is-selected .suggestion-score {
    color: var(--nova-primary-text);
}

/* "Yerleştir" quick action in the receipt result. */
.result-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: var(--nova-space-3) 0;
    padding: 12px 16px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-info-soft);
    color: #004C99;
    font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* 16. Settings → Görünüm                                              */
/* ------------------------------------------------------------------ */

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--nova-gap);
    align-items: start;
}

.settings-grid > .card-panel + .card-panel {
    margin-top: 0;
}

.settings-section {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--nova-hairline);
}

.settings-section-last {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.settings-section-title {
    margin: 0 0 16px;
    font-size: var(--nova-text-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Ayarlar → Örnek Veri and the dashboard offer. */
.demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.demo-grid > .card-panel {
    margin: 0;
}

.demo-contents {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.demo-contents li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.demo-contents-icon,
.demo-offer-icon,
.demo-result-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
    font-size: 17px;
}

.demo-note {
    margin-bottom: 16px;
    color: var(--nova-text-muted);
}

.demo-note.is-blocked {
    color: var(--nova-warning);
}

.demo-counts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.demo-count {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-fill);
}

.demo-count dt {
    font-weight: 500;
    color: var(--nova-text-muted);
}

.demo-count dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.demo-progress {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: var(--nova-radius-md);
    background: var(--nova-primary-wash, var(--nova-primary-soft));
}

.demo-progress-spinner {
    flex: none;
    color: var(--nova-primary);
}

.demo-progress p,
.demo-result-head p {
    margin: 0;
}

.demo-progress-title,
.demo-result-title {
    font-weight: 700;
}

.demo-progress-elapsed {
    font-variant-numeric: tabular-nums;
    color: var(--nova-text-muted);
}

.demo-result {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--nova-hairline);
}

.demo-result-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.demo-result-icon {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.demo-result-meta {
    color: var(--nova-text-muted);
}

.demo-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.demo-offer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.demo-offer-text {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .demo-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .demo-counts {
        grid-template-columns: minmax(0, 1fr);
    }

    .demo-offer {
        flex-wrap: wrap;
    }

    .demo-offer .btn {
        width: 100%;
    }
}

.color-field {
    display: flex;
    gap: 10px;
    max-width: 300px;
}

.color-field .form-control-color {
    flex: 0 0 48px;
}

.contrast-feedback {
    margin-top: 8px;
    padding-left: 4px;
    font-size: var(--nova-text-sm);
    font-weight: 500;
}

.contrast-feedback.is-ok {
    color: var(--nova-success);
}

.contrast-feedback.is-error {
    color: var(--nova-danger);
}

.asset-field {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.asset-field + .asset-field {
    margin-top: 22px;
}

.asset-preview {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--nova-radius-md);
    background: var(--nova-surface-muted);
    box-shadow: inset 0 0 0 1.5px var(--nova-fill-strong);
    overflow: hidden;
}

.asset-preview-logo {
    width: 168px;
    height: 72px;
}

.asset-preview-icon {
    width: 72px;
    height: 72px;
}

.asset-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.asset-placeholder {
    padding: 4px;
    font-size: var(--nova-text-xs);
    font-weight: 500;
    color: var(--nova-text-subtle);
    text-align: center;
}

.asset-controls {
    flex: 1 1 auto;
    min-width: 0;
}

.asset-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.preview-panel {
    position: sticky;
    top: calc(var(--nova-topbar-height) + 20px);
}

.brand-preview {
    display: flex;
    min-height: 220px;
    border-radius: var(--nova-radius-lg);
    overflow: hidden;
    background: var(--nova-bg);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.brand-preview-sidebar {
    flex: 0 0 172px;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.8);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.brand-preview-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin-bottom: 12px;
    padding: 0 4px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
}

.brand-preview-brand .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 0.875rem;
}

.brand-preview-logo {
    max-width: 100%;
    max-height: 32px;
    object-fit: contain;
}

.brand-preview-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-preview-content {
    flex: 1 1 auto;
    padding: 18px;
}

.brand-preview .nav-item {
    font-size: var(--nova-text-sm);
}

.brand-preview-content .btn-outline-secondary {
    --bs-btn-bg: var(--nova-surface);
    --bs-btn-hover-bg: var(--nova-surface);
    box-shadow: var(--nova-shadow-xs);
}

/* Ayarlar → Terimler: default text + key, the tenant's own text, reset. */
.terms-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.terms-table td:first-child {
    width: 42%;
}

.terms-table td:nth-child(2) {
    min-width: 220px;
}

.terms-default {
    overflow-wrap: anywhere;
}

.terms-key {
    margin-top: 2px;
    color: var(--nova-text-subtle);
    font-family: var(--nova-font-mono);
    font-size: var(--nova-text-xs);
    overflow-wrap: anywhere;
}

.terms-table tr.is-changed td:first-child {
    box-shadow: inset 3px 0 0 var(--nova-primary);
}

.terms-preview .brand-preview-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.terms-preview .brand-preview-content {
    min-width: 0;
}

.terms-preview .status-badge {
    max-width: 100%;
    white-space: normal;
}

.terms-preview-title {
    margin: 0;
    font-size: var(--nova-text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
}


.link-preview {
    color: var(--nova-primary-text);
    font-weight: 600;
}

/* Ayarlar → Özellikler: profile, grouped switches, premium and coming-soon
   modules (nova.features); the page of a closed feature (FeatureUnavailable). */
.features-profile {
    margin-bottom: var(--nova-gap);
}

.features-profile-switch {
    flex-wrap: wrap;
}

.features-profile-switch .segmented-item[data-feature-profile="custom"] {
    cursor: default;
}

.features-profile-switch .segmented-item[data-feature-profile="custom"][aria-pressed="false"] {
    color: var(--nova-text-subtle);
}

.features-profile-hint {
    margin: 12px 0 0;
    color: var(--nova-text-muted);
    max-width: 70ch;
}

.features-unsaved {
    display: inline-flex;
    align-items: center;
    margin: 8px 0 0;
    color: var(--nova-warning);
    font-size: var(--nova-text-sm);
    font-weight: 600;
}

.features-groups {
    display: grid;
    gap: var(--nova-gap);
}

.feature-list {
    display: flex;
    flex-direction: column;
}

.feature-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--nova-hairline);
}

.feature-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.feature-row:last-child {
    padding-bottom: 0;
}

.feature-row-text {
    min-width: 0;
}

.feature-row-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-weight: 600;
}

.feature-row-title label {
    cursor: pointer;
}

.feature-row-locked .feature-row-title label {
    cursor: default;
}

.feature-row-description {
    margin: 2px 0 0;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
    max-width: 70ch;
}

.feature-row-note {
    margin: 4px 0 0;
    color: var(--nova-text-subtle);
    font-size: var(--nova-text-sm);
}

.feature-switch {
    flex: 0 0 auto;
    margin: 2px 0 0;
    min-height: 0;
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--nova-radius-pill);
    font-size: var(--nova-text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.feature-badge-premium {
    background: var(--nova-text);
    color: var(--nova-surface);
}

.feature-badge-soon {
    background: var(--nova-info-soft);
    color: var(--nova-info);
}

.feature-badge-locked {
    background: var(--nova-fill);
    color: var(--nova-text-muted);
}

.feature-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    margin: 48px auto 0;
    padding: 40px 32px;
    text-align: center;
}

.feature-unavailable .empty-state-icon {
    margin-bottom: 4px;
}

.feature-unavailable-title {
    margin: 4px 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: var(--nova-tracking-tight);
}

.feature-unavailable-text {
    margin: 0;
    color: var(--nova-text-muted);
}

.feature-unavailable-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

/* Platform admin → Firmalar → Modüller (nova.crudExtras.tenantModules). */
.module-licence {
    padding: 12px 0;
    border-top: 1px solid var(--nova-hairline);
}

.module-licence:first-of-type {
    border-top: 0;
}

.module-licence-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.module-licence-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.module-licence-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 8px;
    margin-top: 8px;
}

@media (max-width: 575.98px) {
    .module-licence-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .feature-unavailable {
        margin-top: 16px;
        padding: 32px 20px;
    }
}

/* Platform admin → Firmalar → new tenant: "Firma hazır" result card and the
   administrator blocks (nova.crudExtras.tenant). */
.onboard-result {
    padding: 28px 24px 24px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface-muted);
    text-align: center;
}

.onboard-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-success-soft);
    color: var(--nova-success);
    font-size: 1.75rem;
    animation: nova-pop 420ms var(--nova-ease-spring) both;
}

.onboard-result-title {
    margin: 0 0 6px;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.onboard-result-text {
    margin: 0 auto 18px;
    max-width: 36ch;
    color: var(--nova-text-muted);
}

.onboard-credentials {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0;
    margin: 0 0 14px;
    padding: 4px 16px;
    border-radius: var(--nova-radius-md);
    background: var(--nova-surface);
    text-align: left;
}

.onboard-credentials dt,
.onboard-credentials dd {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0;
    border-top: 1px solid var(--nova-hairline);
}

.onboard-credentials dt:first-of-type,
.onboard-credentials dt:first-of-type + dd {
    border-top: 0;
}

.onboard-credentials dt {
    padding-right: 16px;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
    font-weight: 500;
}

.onboard-credentials dd {
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.onboard-credentials code {
    overflow-wrap: anywhere;
    color: var(--nova-text);
    font-family: var(--nova-font-mono);
    font-size: 0.9375rem;
}

.onboard-result-note {
    margin: 0 0 16px;
    color: var(--nova-warning);
    font-size: var(--nova-text-sm);
    font-weight: 500;
}

#adminAddResult .onboard-credentials {
    background: var(--nova-surface-muted);
}

.onboard-result-note .bi {
    margin-right: 4px;
}

#adminAddResult .onboard-result-note {
    margin-bottom: 0;
    text-align: left;
}

@media (max-width: 575.98px) {
    .onboard-result {
        padding: 24px 16px 20px;
    }

    .onboard-credentials {
        grid-template-columns: minmax(0, 1fr);
    }

    .onboard-credentials dt {
        min-height: 0;
        padding-top: 10px;
    }

    .onboard-credentials dd {
        border-top: 0;
        min-height: 40px;
    }

    .password-generate .btn span {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* 16b. Settings → Kullanıcılar, Roller; Şifremi değiştir             */
/* ------------------------------------------------------------------ */

.filter-pill-plain {
    padding: 0 15px;
}

.users-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.user-limit {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    color: var(--nova-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.role-chips {
    max-width: 420px;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 2px 0;
    padding: 2px 10px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
    font-size: var(--nova-text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.role-chip-muted {
    background: var(--nova-fill);
    color: var(--nova-text-muted);
}

.role-chip-admin {
    background: var(--nova-neutral-soft);
    color: var(--nova-text);
}

.role-chip-builtin {
    background: var(--nova-fill);
    color: var(--nova-text-muted);
    font-size: var(--nova-text-xs);
}

.role-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Role choice of the user form: toggle pills (checkbox + label). */
.role-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.role-option {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.role-option-input {
    position: absolute;
    opacity: 0;
    inset: 0;
    pointer-events: none;
}

.role-option-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    color: var(--nova-text);
    font-size: 0.875rem;
    font-weight: 600;
    transition:
        background-color var(--nova-duration) var(--nova-ease),
        color var(--nova-duration-fast) var(--nova-ease),
        box-shadow var(--nova-duration) var(--nova-ease);
}

.role-option:hover .role-option-text {
    background: var(--nova-fill-hover);
}

.role-option-input:checked + .role-option-text {
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
    box-shadow: inset 0 0 0 2px var(--nova-primary);
}

.role-option-input:focus-visible + .role-option-text {
    box-shadow: var(--nova-focus-ring);
}

.role-option-note {
    color: var(--nova-text-muted);
    font-size: var(--nova-text-xs);
    font-weight: 500;
}

/* Permission switches of the role panel (grouped, gray blocks). */
.role-permissions-summary {
    margin-bottom: 12px;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
    font-weight: 600;
}

.role-permission-groups {
    display: grid;
    gap: 12px;
}

.role-permission-group {
    padding: 16px;
    border-radius: var(--nova-radius-md);
    background: var(--nova-surface-muted);
}

.role-permission-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.role-permission-group-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.role-permission-group .feature-row {
    padding: 10px 0;
}

.role-permission-group .feature-row:first-child {
    padding-top: 0;
}

.password-card {
    max-width: 560px;
}

/* ------------------------------------------------------------------ */
/* 17. Login and the terminal scene                                    */
/* ------------------------------------------------------------------ */

.login-page {
    min-height: 100vh;
    margin: 0;
    background: var(--nova-bg);
}

.login-shell {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 1400px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 28px 40px 40px;
}

.login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.login-logo {
    max-width: 200px;
    max-height: 36px;
    object-fit: contain;
}

.login-logo.d-none,
.login-brand .brand-mark.d-none {
    display: none;
}

.login-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.login-main {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 28px;
}

.login-card {
    min-width: 0;
    border-radius: 40px;
    background: var(--nova-surface);
    box-shadow: var(--nova-shadow-card);
    animation: nova-fade-up 600ms var(--nova-ease-out) both;
}

.login-hero {
    display: flex;
    flex: 1 1 640px;
    flex-direction: column;
    gap: 32px;
    padding: 52px 56px 40px;
    overflow: hidden;
}

.login-panel {
    display: flex;
    flex: 1 1 420px;
    align-items: center;
    justify-content: center;
    padding: 56px 52px;
    animation-delay: 80ms;
}

.login-hero-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-eyebrow {
    font-size: var(--nova-text-md);
    font-weight: 600;
    color: var(--nova-primary-text);
}

.login-hero-title {
    margin: 0;
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.login-hero-lead {
    max-width: 480px;
    margin: 0;
    font-size: 1.1875rem;
    line-height: 1.45;
    color: var(--nova-text-muted);
}

.login-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-bg);
    font-size: 0.875rem;
    font-weight: 500;
}

.chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nova-primary);
}

.chip-dot-success {
    background: var(--nova-success-bright);
}

.chip-dot-warning {
    background: var(--nova-warning-bright);
}

.login-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 360px;
}

.login-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-title {
    margin: 0;
    font-size: 2.125rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.login-subtitle {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--nova-text-muted);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.login-field .form-label {
    margin: 0;
}

.login-input {
    min-height: 52px;
    padding: 0 18px;
    border-radius: 16px;
    font-size: 1rem;
}

.login-input-code {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.login-error {
    margin: 0;
}

.login-error.d-none {
    display: none;
}

.login-error.is-shaking {
    animation: nova-shake 420ms var(--nova-ease);
}

/* Submit: shimmer while the request runs, green check pop on success. */
.login-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    margin-top: 10px;
    overflow: hidden;
    border: 0;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(var(--nova-primary-rgb), 0.35);
    transition:
        background-color var(--nova-duration-slow) var(--nova-ease),
        box-shadow var(--nova-duration-slow) var(--nova-ease),
        transform var(--nova-duration-fast) var(--nova-ease);
}

.login-submit:hover {
    background: var(--nova-primary-hover);
}

.login-submit:active {
    transform: scale(0.98);
}

.login-submit:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring), 0 10px 24px rgba(var(--nova-primary-rgb), 0.35);
}

.login-submit-label {
    position: relative;
}

.login-submit-shimmer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: none;
    width: 34%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}

.login-submit-check {
    display: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.875rem;
}

.login-submit.is-checking {
    cursor: progress;
}

.login-submit.is-checking .login-submit-shimmer {
    display: block;
    animation: nova-shimmer 1.1s var(--nova-ease) infinite;
}

.login-submit.is-ok,
.login-submit.is-ok:hover {
    background: var(--nova-success-solid);
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(36, 138, 61, 0.35);
}

.login-submit.is-ok .login-submit-check {
    display: grid;
    animation: nova-pop 450ms var(--nova-ease-spring) both;
}

.login-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-bg);
    font-size: var(--nova-text-sm);
    line-height: 1.45;
    color: var(--nova-text-muted);
}

.login-hint-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--nova-surface);
    color: var(--nova-text);
    font-size: 1.125rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.login-footer {
    font-size: var(--nova-text-xs);
    color: var(--nova-text-subtle);
    text-align: center;
}

/* Terminal scene: a 600 × 400 stage, scaled to its frame with
   --scene-scale (novawms.js, CSSOM). Decorative (aria-hidden). */
.scan-frame {
    position: relative;
    align-self: center;
    width: 600px;
    max-width: 100%;
    aspect-ratio: 3 / 2;
}

.scan-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 400px;
    transform: scale(var(--scene-scale, 1));
    transform-origin: 0 0;
}

/* The conveyor (belt and boxes) is clipped to the stage and fades out at
   both ends, so boxes never cross the card edge. */
.scene-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 190px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.scene-belt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    height: 16px;
    border-radius: var(--nova-radius-pill);
    background: #E8E8ED;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.scene-belt-track {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 40px);
    animation: nv-belt 1s linear infinite;
}

.scene-box {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 132px;
    height: 104px;
    border-radius: 18px;
    background: linear-gradient(180deg, #DDBB94, #CDA57B);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    animation: nv-box 4s linear infinite;
}

.scene-box-b {
    background: linear-gradient(180deg, #D3AF87, #C29A70);
    animation-delay: -2s;
}

.scene-box-tape {
    position: absolute;
    left: 56px;
    top: 0;
    width: 20px;
    height: 26px;
    border-radius: 0 0 6px 6px;
    background: rgba(255, 255, 255, 0.28);
}

.scene-label {
    position: absolute;
    left: 20px;
    top: 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
    width: 92px;
    height: 52px;
    padding: 8px 9px 6px;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.scene-barcode {
    display: flex;
    gap: 2px;
    height: 26px;
}

.scene-barcode span {
    width: 1px;
    border-radius: 1px;
    background: #1D1D1F;
}

.scene-barcode .w2 {
    width: 2px;
}

.scene-barcode .w3 {
    width: 3px;
}

.scene-label-code {
    font-family: var(--nova-font-mono);
    font-size: 7px;
    letter-spacing: 0.1em;
    color: #6E6E73;
}

.scene-sync {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-delay: -0.98s;
}

.scene-beam {
    position: absolute;
    left: 248px;
    top: 240px;
    width: 104px;
    height: 72px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgba(255, 59, 48, 0), rgba(255, 59, 48, 0.22));
    opacity: 0;
    animation-name: nv-beam;
}

.scene-line {
    position: absolute;
    left: 242px;
    top: 311px;
    width: 116px;
    height: 2px;
    border-radius: var(--nova-radius-pill);
    background: #FF3B30;
    box-shadow: 0 0 10px 2px rgba(255, 59, 48, 0.65);
    opacity: 0;
    transform-origin: center;
    animation-name: nv-line;
}

.scene-device {
    position: absolute;
    left: 212px;
    top: 0;
    width: 176px;
    height: 242px;
    animation: nv-float 6s ease-in-out infinite;
}

.scene-device-body {
    position: absolute;
    inset: 0;
    border-radius: 42px;
    background: linear-gradient(160deg, #3A3A3C, #1C1C1E 45%, #111113);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.scene-device-window {
    position: absolute;
    left: 63px;
    bottom: -3px;
    width: 50px;
    height: 8px;
    border-radius: var(--nova-radius-pill);
    background: #2C2C2E;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.scene-device-window::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 3px;
    height: 2px;
    border-radius: var(--nova-radius-pill);
    background: #FF3B30;
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.9);
}

.scene-screen {
    position: absolute;
    inset: 9px;
    display: flex;
    flex-direction: column;
    border-radius: 34px;
    background: #F2F2F7;
    overflow: hidden;
    font-family: var(--nova-font);
    letter-spacing: 0;
}

.scene-island-row {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scene-island {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 58px;
    height: 18px;
    overflow: hidden;
    border-radius: var(--nova-radius-pill);
    background: #000000;
    animation-name: nv-island;
}

.scene-island-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #FFFFFF;
    font-size: 8px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    animation-name: nv-island-text;
}

.scene-island-check {
    display: grid;
    place-items: center;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #34C759;
}

.scene-island-check svg {
    width: 7px;
    height: 7px;
}

.scene-head {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 12px 4px;
}

.scene-head-doc {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #8E8E93;
}

.scene-head-title {
    line-height: 1.2;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1D1D1F;
}

.scene-field {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    margin: 2px 10px 8px;
    padding: 0 8px;
    border-radius: 9px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1.5px var(--nova-primary);
    color: #8E8E93;
    font-size: 9px;
}

.scene-field-code {
    font-family: var(--nova-font-mono);
    font-size: 8px;
    color: #1D1D1F;
}

.scene-caret {
    width: 1px;
    height: 10px;
    background: var(--nova-primary);
    animation: nv-caret 1.1s steps(1) infinite;
}

.scene-list {
    margin: 0 10px;
    border-radius: 12px;
    background: #FFFFFF;
    overflow: hidden;
}

.scene-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 9px;
    line-height: 1.2;
    font-size: 9px;
    color: #6E6E73;
}

.scene-row + .scene-row {
    position: relative;
}

.scene-row + .scene-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 9px;
    right: 0;
    height: 1px;
    background: #E5E5EA;
}

.scene-row-active {
    color: #1D1D1F;
    font-weight: 600;
    animation-name: nv-row;
}

.scene-row-qty {
    font-weight: 600;
    color: #248A3D;
}

.scene-button {
    display: grid;
    place-items: center;
    height: 26px;
    margin: auto 10px 12px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
    font-size: 9px;
    font-weight: 600;
}

@keyframes nv-belt {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -40px 0;
    }
}

@keyframes nv-box {
    0% {
        transform: translateX(-180px);
    }

    100% {
        transform: translateX(640px);
    }
}

@keyframes nv-beam {
    0%,
    37% {
        opacity: 0;
    }

    41%,
    59% {
        opacity: 1;
    }

    64%,
    100% {
        opacity: 0;
    }
}

@keyframes nv-line {
    0%,
    37% {
        opacity: 0;
        transform: scaleX(0.3);
    }

    41% {
        opacity: 1;
        transform: scaleX(1);
    }

    59% {
        opacity: 1;
        transform: scaleX(1);
    }

    64%,
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

@keyframes nv-island {
    0%,
    40% {
        width: 58px;
    }

    47%,
    82% {
        width: 150px;
    }

    89%,
    100% {
        width: 58px;
    }
}

@keyframes nv-island-text {
    0%,
    45% {
        opacity: 0;
    }

    50%,
    78% {
        opacity: 1;
    }

    83%,
    100% {
        opacity: 0;
    }
}

@keyframes nv-row {
    0%,
    40% {
        background-color: #FFFFFF;
    }

    46%,
    72% {
        background-color: #E8F7EE;
    }

    86%,
    100% {
        background-color: #FFFFFF;
    }
}

@keyframes nv-caret {
    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes nv-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* ------------------------------------------------------------------ */
/* 18. Warehouse layout (lists, map, rack front view, generator, labels) */
/* ------------------------------------------------------------------ */

/* Generic list additions: toolbar links, sortable headers, walk order. */
.list-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: -4px -6px;
    padding: 4px 6px;
    border: 0;
    border-radius: var(--nova-radius-xs);
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.th-sort:hover {
    background: var(--nova-fill);
    color: var(--nova-text);
}

.th-sort:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.th-sort.active {
    color: var(--nova-primary-text);
}

.th-sort-icon {
    font-size: 0.6875rem;
    opacity: 0.7;
}

.seq-number {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sequence-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-height: 32px;
}

.seq-chip {
    display: inline-flex;
    align-items: center;
    min-width: 56px;
    justify-content: center;
    padding: 4px 12px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.crud-extra {
    margin: 28px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--nova-hairline);
    border-bottom: 0;
}

/* Map card: toolbar, summary, the stage with the SVG. */
.map-card {
    padding: 22px 24px 24px;
}

.map-toolbar {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(220px, 420px) 1fr;
    align-items: end;
    gap: 12px 14px;
}

.map-toolbar .form-label {
    margin-bottom: 6px;
    font-size: var(--nova-text-xs);
}

.map-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.map-search-result {
    grid-column: 1 / -1;
    min-height: 0;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.map-search-result:empty {
    display: none;
}

.map-search-found .bi {
    color: var(--nova-primary);
}

.map-editbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 10px 10px 10px 14px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-primary-wash);
}

.map-edit-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.map-edit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
    font-weight: 700;
}

.map-edit-hint kbd {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--nova-surface);
    color: var(--nova-text);
    box-shadow: inset 0 0 0 1px var(--nova-border);
    font-size: var(--nova-text-xs);
}

.map-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.map-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 14px;
}

.map-summary:empty {
    display: none;
}

.map-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.map-stat strong {
    color: var(--nova-text);
    font-variant-numeric: tabular-nums;
}

.map-stat-full::before,
.map-stat-empty::before,
.map-stat-overlap::before,
.map-stat-blocked::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.map-stat-full::before {
    background: var(--nova-map-full);
}

.map-stat-empty::before {
    background: var(--nova-map-empty);
    box-shadow: inset 0 0 0 1px var(--nova-map-empty-line);
}

.map-stat-overlap::before {
    background: repeating-linear-gradient(45deg, var(--nova-map-overlap) 0 3px, var(--nova-map-overlap-ground) 3px 6px);
}

.map-stat-blocked::before {
    background: var(--nova-map-blocked);
}

.map-stage {
    position: relative;
    height: clamp(440px, calc(100vh - 340px), 860px);
    overflow: hidden;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-map-floor);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.map-summary:empty + .map-stage {
    margin-top: 16px;
}

.map-stage:focus {
    outline: none;
}

.map-stage:focus-visible {
    box-shadow: var(--nova-focus-ring);
}

.map-svg {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    --map-u: 1;
}

.map-svg.is-panning {
    cursor: grabbing;
}

.map-stage.is-empty .map-svg,
.map-stage.is-empty .map-controls {
    visibility: hidden;
}

/* SVG elements (world units are cm; --map-u is cm per screen pixel, so
   text keeps its screen size at every zoom). */
.map-zone {
    fill: var(--nova-map-zone);
}

.map-zone-label {
    fill: var(--nova-text);
    font-size: calc(var(--map-u) * 15px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.map-zone-meta {
    fill: var(--nova-text-muted);
    font-size: calc(var(--map-u) * 12.5px);
    font-weight: 500;
}

.map-aisle {
    stroke: var(--nova-border-strong);
    stroke-width: 1.5;
    stroke-dasharray: 6 8;
    vector-effect: non-scaling-stroke;
}

.map-aisle-label {
    fill: var(--nova-text-subtle);
    font-size: calc(var(--map-u) * 11px);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.map-rack-body {
    fill: var(--nova-map-rack);
    stroke: var(--nova-map-rack-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: stroke var(--nova-duration-fast) var(--nova-ease);
}

/* Which edge of the rack faces the aisle: too subtle at --nova-text-subtle
   (2px, same muted gray as everything else) to tell apart at a glance, so
   it uses the brand accent and a heavier stroke instead. */
.map-rack-front {
    stroke: var(--nova-primary);
    stroke-width: 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.map-rack:hover .map-rack-body {
    stroke: var(--nova-primary);
}

.map-rack.is-open .map-rack-body,
.map-rack.is-selected .map-rack-body {
    stroke: var(--nova-primary);
    stroke-width: 2.5;
}

.map-rack.is-overlapping .map-rack-body {
    stroke: var(--nova-danger-bright);
    stroke-width: 2.5;
    stroke-dasharray: 5 4;
}

.map-rack-label {
    fill: var(--nova-text-muted);
    font-size: calc(var(--map-u) * 10.5px);
    font-weight: 600;
    pointer-events: none;
}

.map-far .map-rack-label,
.map-zones-tight .map-zone-meta,
.map-refs-tight .map-ref-sub,
.map-very-far .map-aisle-label {
    display: none;
}

/* Typed codes are upper case; the hint text stays as written. */
.text-uppercase::placeholder {
    text-transform: none;
}

.map-cell {
    stroke: rgba(0, 0, 0, 0.06);
    stroke-width: 0.5;
    vector-effect: non-scaling-stroke;
    transition: fill var(--nova-duration) var(--nova-ease), opacity var(--nova-duration) var(--nova-ease);
}

.map-cell.map-tone-empty {
    fill: var(--nova-map-empty);
    stroke: var(--nova-map-empty-line);
}

.map-cell.map-tone-partial {
    fill: var(--nova-map-partial);
}

.map-cell.map-tone-full {
    fill: var(--nova-map-full);
}

.map-cell.map-tone-overlap {
    fill: url(#mapStripes);
}

.map-cell.map-tone-over {
    fill: var(--nova-map-over);
}

.map-cell.map-tone-blocked {
    fill: url(#mapHatch);
}

.map-cell.map-tone-countPending {
    fill: var(--nova-warning-bright);
}

.map-cell.map-tone-inactive {
    fill: var(--nova-map-inactive);
    stroke-dasharray: 3 2;
}

.map-cell.has-correction {
    stroke: var(--nova-warning-bright);
    stroke-width: 1.5;
}

.map-stripe-ground {
    fill: var(--nova-map-overlap-ground);
}

.map-stripe {
    fill: var(--nova-map-overlap);
}

.map-hatch-ground {
    fill: var(--nova-map-blocked);
}

.map-hatch {
    fill: rgba(255, 255, 255, 0.28);
}

.map-svg.has-matches .map-cell:not(.is-match):not(.is-highlight) {
    opacity: 0.32;
}

.map-cell.is-match {
    stroke: var(--nova-primary);
    stroke-width: 2;
}

.map-cell.is-highlight {
    stroke: var(--nova-primary);
    stroke-width: 4;
    opacity: 1;
    animation: map-ring 1.4s var(--nova-ease) infinite;
}

@keyframes map-ring {
    0%,
    100% {
        stroke-opacity: 1;
    }

    50% {
        stroke-opacity: 0.25;
    }
}

/* Reference points: start, receiving and shipping areas. */
.map-ref-body {
    stroke-width: 1.5;
    stroke-dasharray: 8 6;
    vector-effect: non-scaling-stroke;
}

.map-ref-3 .map-ref-body {
    fill: var(--nova-info-soft);
    stroke: var(--nova-info-bright);
}

.map-ref-4 .map-ref-body {
    fill: var(--nova-success-soft);
    stroke: var(--nova-success-bright);
}

.map-ref-5 .map-ref-body {
    fill: var(--nova-warning-soft);
    stroke: var(--nova-warning-bright);
}

.map-ref-5 .map-ref-icon {
    stroke: var(--nova-warning);
}

.map-ref-dot {
    fill: var(--nova-text);
}

.map-ref-icon {
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.map-ref-2 .map-ref-icon {
    stroke: #FFFFFF;
}

.map-ref-3 .map-ref-icon {
    stroke: var(--nova-info);
}

.map-ref-4 .map-ref-icon {
    stroke: var(--nova-success);
}

.map-ref-label {
    fill: var(--nova-text);
    font-size: calc(var(--map-u) * 12.5px);
    font-weight: 700;
}

.map-ref-sub {
    fill: var(--nova-text-muted);
    font-size: calc(var(--map-u) * 11.5px);
    font-weight: 500;
}

.map-ref.is-selected .map-ref-body,
.map-ref.is-selected .map-ref-dot {
    stroke: var(--nova-primary);
    stroke-width: 3;
    stroke-dasharray: none;
}

/* Layout editor. */
.map-grid {
    fill: url(#mapGrid);
    pointer-events: none;
}

.map-grid-line {
    fill: none;
    stroke: rgba(0, 0, 0, 0.07);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.map-svg.is-editing .map-rack,
.map-svg.is-editing .map-ref {
    cursor: move;
}

.map-svg.is-editing .map-cell {
    opacity: 0.5;
}

.map-svg.is-editing {
    cursor: crosshair;
}

.map-svg.is-editing.is-space,
.map-svg.is-editing.is-panning {
    cursor: grab;
}

/* Elements outside the floor: same red dashes as overlapping racks. */
.map-rack.is-outside .map-rack-body,
.map-ref.is-outside .map-ref-body,
.map-ref.is-outside .map-ref-dot {
    stroke: var(--nova-danger-bright);
    stroke-width: 2.5;
    stroke-dasharray: 5 4;
}

/* Warehouse floor (walls) and its size. */
.map-floor {
    fill: var(--nova-surface);
    stroke: var(--nova-text-subtle);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.map-svg.is-editing .map-floor {
    fill-opacity: 0.55;
}

.map-floor-label {
    fill: var(--nova-text-muted);
    font-size: calc(var(--map-u) * 12px);
    font-weight: 600;
    letter-spacing: 0.01em;
    pointer-events: none;
}

.map-floor-handle {
    cursor: nwse-resize;
}

.map-floor-handle-hit {
    r: calc(var(--map-u) * 20px);
    fill: transparent;
}

.map-floor-handle-dot {
    r: calc(var(--map-u) * 8px);
    fill: var(--nova-surface);
    stroke: var(--nova-primary);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

/* Smart guides and the rubber-band box while dragging. */
.map-guide {
    stroke: var(--nova-danger-bright);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.map-select-box {
    fill: var(--nova-primary-wash);
    stroke: var(--nova-primary);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

/* Editor context row: floor size, inspector or align / distribute. */
/* Draw mode: free shapes, racks that are not saved yet, tool bar, previews. */
.map-shape-body {
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.map-shape-wall .map-shape-body {
    fill: var(--nova-text-muted);
    stroke: var(--nova-text);
}

.map-shape-door .map-shape-body {
    fill: var(--nova-warning-soft);
    stroke: var(--nova-warning-bright);
    stroke-dasharray: 5 3;
}

.map-shape-zone .map-shape-body {
    fill: var(--nova-primary-wash);
    stroke: var(--nova-primary);
    stroke-opacity: 0.45;
    stroke-dasharray: 8 5;
    pointer-events: stroke;
}

.map-shape-ramp .map-shape-body {
    fill: url(#mapStripes);
    stroke: var(--nova-text-subtle);
}

.map-shape-label {
    fill: var(--nova-text-muted);
    font-size: calc(var(--map-u) * 12px);
    font-weight: 700;
    pointer-events: none;
}

.map-svg.is-editing .map-shape {
    cursor: move;
}

.map-shape.is-selected .map-shape-body {
    stroke: var(--nova-primary);
    stroke-opacity: 1;
    stroke-width: 2.5;
}

.map-shape-preview,
.map-ghost {
    fill: var(--nova-primary-wash);
    stroke: var(--nova-primary);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.map-cell.map-tone-draft {
    fill: var(--nova-primary-wash);
    stroke: var(--nova-primary);
    stroke-opacity: 0.35;
}

.map-rack.is-draft .map-rack-body {
    stroke: var(--nova-primary);
    stroke-dasharray: 6 4;
}

.map-svg.is-editing.is-drawing {
    cursor: copy;
}

.map-svg.is-editing.is-drawing .map-rack,
.map-svg.is-editing.is-drawing .map-ref,
.map-svg.is-editing.is-drawing .map-shape {
    cursor: copy;
}

/* A big drawing zoomed far out: only the outlines are drawn while editing. */
.map-svg.is-editing.map-lod .map-cell {
    display: none;
}

.map-drawbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 10px;
}

.map-drawbar .btn i {
    margin-right: 6px;
}

.map-draw-rack,
.map-draw-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.map-draw-rack .form-select {
    width: auto;
    min-width: 170px;
}

.map-draw-copy {
    margin-left: auto;
}

.map-draw-menu {
    min-width: 260px;
}

.map-draw-menu .map-field {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.map-draw-menu-grid {
    display: block;
}

.map-draw-menu-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.map-draw-menu-buttons .btn i {
    margin-right: 6px;
}

.map-draw-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--nova-text-sm);
}

@media (max-width: 767.98px) {
    .map-drawbar .btn span {
        display: none;
    }

    .map-drawbar .btn i {
        margin-right: 0;
    }

    .map-draw-copy {
        margin-left: 0;
    }
}

/* Rack models dialog. */
.rack-model-list {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.rack-model-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--nova-radius-md);
    background: var(--nova-fill);
}

.rack-model-row.is-inactive {
    opacity: 0.7;
}

.rack-model-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.rack-model-name {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rack-model-meta {
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

.rack-model-form {
    padding-top: 12px;
    border-top: 1px solid var(--nova-border);
}

.map-editpanel {
    margin-top: 10px;
}

.map-inspector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 8px 12px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-fill);
    font-size: var(--nova-text-sm);
}

.map-inspector-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 700;
    color: var(--nova-text);
}

.map-inspector-hint {
    color: var(--nova-text-muted);
}

.map-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--nova-text-muted);
}

.map-field-label {
    font-weight: 600;
}

.map-field .form-control,
.map-field .form-select {
    width: 92px;
    min-height: 32px;
    background-color: var(--nova-surface);
    font-variant-numeric: tabular-nums;
}

.map-field-unit {
    font-size: var(--nova-text-xs);
}

/* Notes under the summary: missing floor size, no racks, map warnings. */
.map-notice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: -4px 0 12px;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.map-notice-item .bi {
    color: var(--nova-text-subtle);
}

.map-notice-item.is-warning {
    color: var(--nova-warning);
}

.map-notice-item.is-warning .bi {
    color: var(--nova-warning-bright);
}

.map-page.is-editing .map-stage {
    box-shadow: inset 0 0 0 2px var(--nova-primary-ring);
}

/* Overlays on the stage: tooltip, zoom buttons, legend, empty, loading. */
.map-tooltip {
    position: absolute;
    z-index: 5;
    max-width: 290px;
    padding: 10px 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: var(--nova-blur);
    backdrop-filter: var(--nova-blur);
    box-shadow: var(--nova-shadow-pop);
    font-size: var(--nova-text-sm);
    line-height: 1.45;
    color: var(--nova-text-muted);
    pointer-events: none;
}

.map-tip-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 2px;
    color: var(--nova-text);
}

.map-tip-head strong {
    margin-right: 2px;
    font-variant-numeric: tabular-nums;
}

.map-tip-tone {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.map-tip-note {
    color: var(--nova-warning);
}

.map-tip-sub {
    font-size: var(--nova-text-xs);
    color: var(--nova-text-subtle);
}

.map-controls {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border-radius: 16px;
    background: var(--nova-frost);
    -webkit-backdrop-filter: var(--nova-blur);
    backdrop-filter: var(--nova-blur);
    box-shadow: var(--nova-shadow-pop);
}

.map-control {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--nova-text);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color var(--nova-duration-fast) var(--nova-ease), transform var(--nova-duration-fast) var(--nova-ease);
}

.map-control:hover {
    background: rgba(0, 0, 0, 0.06);
}

.map-control:active {
    transform: scale(0.94);
}

.map-control:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 12px;
    padding: 0 4px;
    font-size: var(--nova-text-xs);
    font-weight: 600;
    color: var(--nova-text-muted);
}

.map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.map-legend-note {
    margin-left: auto;
    font-weight: 500;
    color: var(--nova-text-subtle);
}

.map-swatch,
.area-dot,
.map-tip-tone,
.rack-swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.map-swatch.map-tone-empty,
.area-dot.map-tone-empty,
.map-tip-tone.map-tone-empty {
    background: var(--nova-map-empty);
    box-shadow: inset 0 0 0 1px var(--nova-map-empty-line);
}

.map-swatch.map-tone-partial,
.area-dot.map-tone-partial,
.map-tip-tone.map-tone-partial {
    background: var(--nova-map-partial);
}

.map-swatch.map-tone-full,
.area-dot.map-tone-full,
.map-tip-tone.map-tone-full {
    background: var(--nova-map-full);
}

.map-swatch.map-tone-overlap,
.area-dot.map-tone-overlap,
.map-tip-tone.map-tone-overlap,
.rack-swatch-overlap {
    background: repeating-linear-gradient(45deg, var(--nova-map-overlap) 0 3px, var(--nova-map-overlap-ground) 3px 6px);
}

.map-swatch.map-tone-over,
.area-dot.map-tone-over,
.map-tip-tone.map-tone-over {
    background: var(--nova-map-over);
}

.map-swatch.map-tone-blocked,
.area-dot.map-tone-blocked,
.map-tip-tone.map-tone-blocked {
    background: repeating-linear-gradient(-45deg, var(--nova-map-blocked) 0 4px, var(--nova-text-muted) 4px 5px);
}

.map-swatch.map-tone-countPending,
.area-dot.map-tone-countPending,
.map-tip-tone.map-tone-countPending {
    background: var(--nova-warning-bright);
}

.map-swatch.map-tone-inactive,
.area-dot.map-tone-inactive,
.map-tip-tone.map-tone-inactive {
    background: var(--nova-map-inactive);
}

.map-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.map-empty:empty {
    display: none;
}

.map-loading {
    position: absolute;
    top: 14px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-frost);
    -webkit-backdrop-filter: var(--nova-blur);
    backdrop-filter: var(--nova-blur);
    box-shadow: var(--nova-shadow-pop);
    font-size: var(--nova-text-sm);
    font-weight: 600;
    transform: translateX(-50%);
}

/* Locations outside the racks (dock, quarantine ...). */
.area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.area-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 16px 6px 14px;
    border: 0;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    color: var(--nova-text);
    font: inherit;
    font-size: var(--nova-text-sm);
    cursor: pointer;
    transition: background-color var(--nova-duration-fast) var(--nova-ease), box-shadow var(--nova-duration-fast) var(--nova-ease);
}

.area-chip:hover {
    background: var(--nova-fill-hover);
}

.area-chip:focus-visible,
.area-chip.is-highlight {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.area-code {
    font-weight: 700;
}

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

/* Rack front view (side panel). */
.rack-elevation {
    min-height: 140px;
}

.rack-elevation .elev-svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.rack-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 48px 0;
    justify-content: center;
    color: var(--nova-text-muted);
}

.elev-slot {
    fill: var(--nova-map-empty);
    stroke: transparent;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transition: fill var(--nova-duration-fast) var(--nova-ease), stroke var(--nova-duration-fast) var(--nova-ease);
}

.elev-slot.elev-state-2 {
    fill: var(--nova-fill);
}

.elev-slot.elev-state-3 {
    fill: url(#elevStripes);
}

.elev-slot.elev-state-4 {
    fill: var(--nova-border-strong);
}

.elev-slot:hover {
    stroke: var(--nova-border-strong);
}

.elev-slot.has-correction {
    stroke: var(--nova-warning-bright);
    stroke-dasharray: 5 4;
}

.elev-slot.is-selected {
    stroke: var(--nova-primary);
    stroke-width: 3;
    stroke-dasharray: none;
}

.elev-stripe-ground {
    fill: var(--nova-map-overlap-ground);
}

.elev-stripe {
    fill: rgba(255, 159, 10, 0.55);
}

.elev-load {
    fill: var(--nova-map-pallet);
    stroke: var(--nova-map-pallet-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.elev-base {
    fill: var(--nova-map-pallet-base);
}

.elev-loose .elev-load {
    fill: var(--nova-fill-strong);
    stroke: var(--nova-border-strong);
    stroke-dasharray: 4 3;
}

.elev-marked .elev-load {
    fill: var(--nova-warning-soft);
    stroke: var(--nova-warning-bright);
    stroke-dasharray: 4 3;
}

.elev-ghost .elev-load {
    fill: none;
    stroke: var(--nova-text-subtle);
    stroke-dasharray: 4 3;
}

.elev-ghost .elev-base {
    fill: none;
}

.elev-block.is-overflow .elev-load {
    stroke: var(--nova-danger-bright);
    stroke-width: 2;
}

.elev-block-text {
    fill: var(--nova-text);
    font-weight: 600;
}

.elev-beam {
    fill: var(--nova-map-beam);
}

.elev-upright {
    fill: var(--nova-map-upright);
}

.elev-divider {
    stroke: rgba(0, 0, 0, 0.22);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

.elev-slot-code {
    fill: var(--nova-text-muted);
    font-weight: 600;
}

.elev-level {
    fill: var(--nova-text);
    font-weight: 700;
}

.rack-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 10px 0 14px;
    font-size: var(--nova-text-xs);
    color: var(--nova-text-muted);
}

.rack-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rack-swatch-pallet {
    background: var(--nova-map-pallet);
    box-shadow: inset 0 -3px 0 var(--nova-map-pallet-base);
}

.rack-swatch-loose {
    background: var(--nova-fill-strong);
    box-shadow: inset 0 0 0 1px var(--nova-border-strong);
}

.rack-levels {
    display: grid;
    gap: 6px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.rack-levels:empty {
    display: none;
}

.rack-level {
    display: grid;
    grid-template-columns: 52px minmax(80px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--nova-surface-muted);
    font-size: var(--nova-text-sm);
}

.rack-level-name {
    font-weight: 700;
}

.rack-level-bar {
    height: 6px;
    overflow: hidden;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill-strong);
}

.rack-level-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--nova-map-full);
}

.rack-level.is-over .rack-level-bar > span {
    background: var(--nova-danger-bright);
}

.rack-level-text {
    font-variant-numeric: tabular-nums;
}

.rack-level-free {
    color: var(--nova-text-muted);
}

.slot-hint {
    margin: 12px 0 0;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.slot-detail {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--nova-hairline);
}

#rackFront.d-none + .slot-detail {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.slot-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.slot-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.map-tone-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    font-size: var(--nova-text-xs);
    font-weight: 700;
    color: var(--nova-text);
}

.map-tone-badge::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: currentColor;
}

.map-tone-badge.map-tone-empty {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.map-tone-badge.map-tone-partial,
.map-tone-badge.map-tone-full {
    background: var(--nova-info-soft);
    color: var(--nova-info);
}

.map-tone-badge.map-tone-overlap {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.map-tone-badge.map-tone-over {
    background: var(--nova-danger-soft);
    color: var(--nova-danger);
}

.map-tone-badge.map-tone-blocked {
    background: var(--nova-fill-strong);
    color: var(--nova-text);
}

.slot-contents {
    display: grid;
    gap: 4px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: var(--nova-text-sm);
}

.slot-contents li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--nova-surface-muted);
}

.slot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 22px;
}

.slot-correction {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
    font-size: var(--nova-text-sm);
}

.slot-correction .bi {
    margin-top: 2px;
}

/* Location generator wizard. */
.wizard {
    padding: 28px 32px;
}

.wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.wizard-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 6px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
    font-weight: 600;
    transition: background-color var(--nova-duration) var(--nova-ease), color var(--nova-duration) var(--nova-ease);
}

.wizard-step-no {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--nova-surface);
    color: var(--nova-text-muted);
    font-size: var(--nova-text-xs);
    font-weight: 700;
}

.wizard-steps li.is-current {
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
}

.wizard-steps li.is-current .wizard-step-no {
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
}

.wizard-steps li.is-done {
    color: var(--nova-success);
}

.wizard-steps li.is-done .wizard-step-no {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.wizard-title {
    margin: 30px 0 4px;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.wizard-help {
    margin: 0 0 14px;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.preset-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.preset-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 16px 18px;
    border-radius: 20px;
    background: var(--nova-fill);
    cursor: pointer;
    transition: background-color var(--nova-duration) var(--nova-ease), box-shadow var(--nova-duration) var(--nova-ease), transform var(--nova-duration-fast) var(--nova-ease);
}

.preset-card:hover {
    background: var(--nova-fill-hover);
}

.preset-card:active {
    transform: scale(0.98);
}

.preset-card:focus-within {
    box-shadow: var(--nova-focus-ring);
}

.preset-card.is-selected {
    background: var(--nova-surface);
    box-shadow: 0 0 0 2px var(--nova-primary), 0 10px 30px rgba(0, 0, 0, 0.08);
}

.preset-title {
    font-weight: 700;
    color: var(--nova-text);
}

.preset-text {
    flex: 1 1 auto;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.preset-example {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-surface-muted);
    box-shadow: inset 0 0 0 1px var(--nova-border);
    font-family: var(--nova-font-mono);
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-text);
}

.preset-card.is-selected .preset-example {
    background: var(--nova-primary-soft);
    box-shadow: none;
    color: var(--nova-primary-text);
}

.wizard-custom {
    margin-top: 16px;
}

.token-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
}

.wizard-example {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin-top: 24px;
    padding: 16px 20px;
    border-radius: 18px;
    background: var(--nova-surface-muted);
}

.wizard-example-label {
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-text-muted);
}

.wizard-example-code {
    font-family: var(--nova-font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--nova-text);
    overflow-wrap: anywhere;
}

.range-rows {
    display: grid;
    gap: 10px;
}

.range-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    align-items: center;
    gap: 10px 20px;
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--nova-surface-muted);
}

.range-label {
    display: block;
    margin: 0;
    font-weight: 700;
}

.range-help {
    display: block;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.range-inputs .form-control {
    background: var(--nova-surface);
}

.range-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.range-pair .invalid-feedback {
    grid-column: 1 / -1;
}

.range-dash {
    color: var(--nova-text-subtle);
}

.wizard-formula {
    margin: 12px 4px 0;
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-text-muted);
    font-variant-numeric: tabular-nums;
}

.wizard-bays {
    margin-top: 24px;
    padding: 18px 20px;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px var(--nova-hairline);
}

.wizard-switches {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 28px -32px -28px;
    padding: 18px 32px 22px;
    border-top: 1px solid var(--nova-hairline);
}

.wizard-count {
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-text-muted);
    font-variant-numeric: tabular-nums;
}

.wizard-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 32px 0;
    color: var(--nova-text-muted);
}

.gen-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.gen-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--nova-surface-muted);
}

.gen-tile-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.gen-tile-label {
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.gen-tile-primary {
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
}

.gen-tile-warning {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.code-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.code-chip {
    padding: 4px 10px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    font-family: var(--nova-font-mono);
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-text);
}

.code-chip.is-conflict {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.code-chip.is-more {
    background: transparent;
    color: var(--nova-text-muted);
    font-family: inherit;
}

.gen-reasons {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: var(--nova-text-sm);
    color: var(--nova-warning);
}

.gen-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--nova-success);
}

.gen-conflict-modes {
    margin-top: 20px;
}

.wizard-done {
    padding: 28px 0 8px;
    text-align: center;
}

.wizard-done-icon {
    display: inline-grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--nova-success-solid);
    color: #FFFFFF;
    font-size: 2.25rem;
    box-shadow: 0 14px 34px rgba(36, 138, 61, 0.3);
    animation: nova-pop 420ms var(--nova-ease-spring) both;
}

.wizard-done-title {
    margin: 0 0 6px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.wizard-done-text {
    margin: 0 auto 22px;
    max-width: 620px;
    color: var(--nova-text-muted);
}

.wizard-done-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* Labels: settings on the left, A4 preview on the right. */
.labels-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: var(--nova-gap);
}

.labels-layout > .card-panel + .card-panel {
    margin-top: 0;
}

.label-settings {
    position: sticky;
    top: calc(var(--nova-topbar-height) + 20px);
}

.label-kind,
.label-sizes {
    display: flex;
    width: 100%;
}

.label-kind {
    margin-bottom: 20px;
}

.label-kind .segmented-item,
.label-sizes .segmented-item {
    flex: 1 1 0;
}

/* Four kinds (Lokasyon, Palet, Ürün, Sipariş) share the panel width: text only. */
.label-kind .segmented-item {
    padding-inline: 6px;
}

.label-kind .segmented-item .bi {
    display: none;
}

/* Ayarlar → Görünüm → Etiketler: four barcode types; two by two on phones. */
.label-barcode-types {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    width: 100%;
}

.label-barcode-types .segmented-item {
    padding-inline: 10px;
}

.label-barcode-hint {
    min-height: 1.5em;
    color: var(--nova-text);
}

@media (max-width: 575.98px) {
    .label-barcode-types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: var(--nova-radius-md);
    }

    .label-barcode-types .segmented-item {
        border-radius: calc(var(--nova-radius-md) - 3px);
    }
}

.pallet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.pallet-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 12px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    font-family: var(--nova-font-mono);
    font-size: var(--nova-text-sm);
    font-weight: 600;
}

.pallet-chip .btn-close {
    width: 22px;
    height: 22px;
    background-size: 8px;
}

.label-zebra {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--nova-hairline);
}

.label-zebra-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: var(--nova-text-md);
    font-weight: 700;
}

.label-sheets {
    display: grid;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-fill-hover);
}

.label-sheets:empty {
    display: none;
}

.label-page {
    box-sizing: border-box;
    width: 210mm;
    height: 297mm;
    padding: 8mm;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    zoom: var(--sheet-zoom, 1);
}

.label-grid {
    display: grid;
    grid-template-columns: repeat(var(--label-cols, 3), var(--label-w, 50.8mm));
    grid-auto-rows: var(--label-h, 25.4mm);
    justify-content: center;
}

.label-cell {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--label-gap, 1mm);
    padding: var(--label-pad, 1.5mm);
    overflow: hidden;
    outline: 0.2mm dashed var(--nova-border-strong);
    outline-offset: -0.1mm;
    color: #000000;
}

.label-cell .barcode {
    display: block;
    flex: none;
    width: 100%;
    height: var(--label-bar, 56%);
    fill: #000000;
}

/* QR / Data Matrix (nova.labelPrint): a square of --label-symbol mm. */
.label-cell .barcode-2d {
    display: block;
    flex: none;
    width: var(--label-symbol, 20mm);
    height: var(--label-symbol, 20mm);
    fill: #000000;
}

/* 2" × 1": the symbol on the left, the text (and Code 128) on the right. */
.label-cell.is-side {
    flex-direction: row;
    justify-content: flex-start;
}

.label-side {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
    gap: var(--label-gap, 1mm);
}

/* Code 128 across the top, a small QR and the text below it. */
.label-row {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    align-self: stretch;
    min-height: 0;
    gap: var(--label-gap, 1mm);
}

.label-row .label-code {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.label-notice:empty {
    display: none;
}

.label-notice {
    margin: 0 0 12px;
}

.label-notice-item {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--nova-warning);
}

.label-code {
    font-size: var(--label-text, 4.2mm);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.labels-large .label-cell .barcode {
    height: var(--label-bar, 50%);
}

.labels-large .label-code {
    font-size: var(--label-text, 9mm);
}

.label-nobarcode {
    font-size: 2.6mm;
    color: var(--nova-danger);
    text-align: center;
}

/* Product / order labels (nova.labelPrint.richPlan): the code and further lines. */
.label-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--label-line-gap, 0.4mm);
    min-width: 0;
    max-width: 100%;
    text-align: center;
}

.label-cell.is-rich.is-side .label-side,
.label-cell.is-rich.is-side .label-text,
.label-cell.is-rich.is-over .label-text {
    align-items: flex-start;
    text-align: left;
}

.label-cell.is-rich .label-code {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

.label-line {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--label-line, 2.6mm);
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Etiketler → Ürün: the rows to print (product, unit, lot, copies). */
.label-rows {
    margin-top: 12px;
}

.label-items {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-fill);
}

.label-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 12px;
}

.label-item + .label-item {
    border-top: 1px solid var(--nova-hairline);
}

.label-item-text {
    flex: 1 1 auto;
    min-width: 0;
}

.label-item-title {
    font-family: var(--nova-font-mono);
    font-size: var(--nova-text-sm);
    font-weight: 600;
}

.label-item-detail {
    overflow: hidden;
    font-size: 12px;
    color: var(--nova-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.label-item-copies.form-control {
    flex: none;
    width: 76px;
    background: var(--nova-surface);
}

.label-item .btn-close {
    flex: none;
    width: 22px;
    height: 22px;
    background-size: 8px;
}

/* Responsive. */
@media (max-width: 1199.98px) {
    .labels-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .label-settings {
        position: static;
    }
}

@media (max-width: 991.98px) {
    .map-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .map-toolbar-actions {
        grid-column: 1 / -1;
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .map-card,
    .wizard {
        padding: 18px 16px 20px;
    }

    .map-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .map-toolbar-actions .segmented {
        max-width: 100%;
        overflow-x: auto;
    }

    .map-stage {
        height: 62vh;
        margin: 0 -16px;
        border-radius: 0;
    }

    .map-legend-note {
        margin-left: 0;
    }

    .map-editbar {
        padding: 10px;
    }

    .map-edit-actions .btn span {
        display: none;
    }

    .map-inspector-hint,
    #mapFloorFit span {
        display: none;
    }

    .map-field .form-control,
    .map-field .form-select {
        width: 76px;
    }

    .range-row {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
    }

    .wizard-footer {
        margin: 24px -16px -20px;
        padding: 16px;
    }

    .wizard-step-text {
        display: none;
    }

    .wizard-steps li.is-current .wizard-step-text {
        display: inline;
    }

    .rack-level {
        grid-template-columns: 48px minmax(60px, 1fr) auto;
    }

    .rack-level > :last-child {
        grid-column: 1 / -1;
    }

    .label-sheets {
        padding: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-cell.is-highlight,
    .wizard-done-icon {
        animation: none;
    }
}

/* Pick route on the map (?routeOrderId=): the walk line, numbered stops
   and the stop list beside the map (below it on narrow screens). */
.map-body.has-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 1200px) {
    .map-body.has-route {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .map-body.has-route .map-route {
        height: clamp(440px, calc(100vh - 340px), 860px);
    }
}

.map-route {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface-muted);
    padding: 16px;
}

.map-route-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.map-route-title {
    margin: 0;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
    font-weight: 600;
}

.map-route-order {
    display: inline-block;
    margin-top: 2px;
    color: var(--nova-text);
    font-size: var(--nova-text-lg);
    font-weight: 700;
    letter-spacing: var(--nova-tracking-tight);
    text-decoration: none;
}

.map-route-order:hover {
    color: var(--nova-primary-text);
}

.map-route-summary {
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

.map-route-note {
    margin-top: 8px;
}

.map-route-note-item {
    margin: 0 0 4px;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

.map-route-list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 12px 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.map-route-entry + .map-route-entry {
    margin-top: 6px;
}

.map-route-stop-button {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-surface);
    color: var(--nova-text);
    text-align: left;
    transition: background-color var(--nova-duration-fast) var(--nova-ease), box-shadow var(--nova-duration-fast) var(--nova-ease);
}

.map-route-stop-button:hover {
    background: var(--nova-primary-wash);
}

.map-route-stop-button:focus-visible {
    outline: none;
    box-shadow: var(--nova-focus-ring);
}

.map-route-entry.is-active .map-route-stop-button {
    background: var(--nova-primary-soft);
    box-shadow: inset 0 0 0 2px var(--nova-primary);
}

.map-route-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
    font-size: var(--nova-text-sm);
    font-weight: 700;
}

.map-route-entry.is-unplaced .map-route-badge {
    background: var(--nova-fill-strong);
    color: var(--nova-text);
}

.map-route-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.map-route-code {
    font-weight: 700;
    letter-spacing: var(--nova-tracking-tight);
}

.map-route-item {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    font-size: var(--nova-text-sm);
}

.map-route-product {
    min-width: 0;
    overflow-wrap: anywhere;
}

.map-route-qty {
    font-weight: 600;
}

.map-route-detail {
    flex-basis: 100%;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-xs);
}

.map-route-casing {
    fill: none;
    stroke: var(--nova-surface);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.map-route-line {
    fill: none;
    stroke: var(--nova-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 10 8;
    vector-effect: non-scaling-stroke;
    animation: map-route-dash 900ms linear infinite;
}

@keyframes map-route-dash {
    to {
        stroke-dashoffset: -18;
    }
}

.map-route-dot {
    r: calc(var(--map-u) * 13px);
    fill: var(--nova-primary);
    stroke: var(--nova-surface);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.map-route-num {
    fill: var(--nova-primary-contrast);
    font-size: calc(var(--map-u) * 12px);
    font-weight: 700;
}

.map-route-stop.is-active .map-route-dot {
    r: calc(var(--map-u) * 17px);
    stroke-width: 4;
}

.map-route-stop.is-active .map-route-num {
    font-size: calc(var(--map-u) * 14px);
}

/* The printed pick list is only on paper. */
.route-print {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .map-route-line {
        animation: none;
    }
}

@page route-sheet {
    size: A4;
    margin: 12mm;
}

@media print {
    body.is-printing-route .sidebar,
    body.is-printing-route .sidebar-backdrop,
    body.is-printing-route .topbar,
    body.is-printing-route .skip-link,
    body.is-printing-route .toast-container,
    body.is-printing-route .offcanvas,
    body.is-printing-route .offcanvas-backdrop,
    body.is-printing-route .map-page > :not(.route-print) {
        display: none !important;
    }

    body.is-printing-route {
        background: #FFFFFF;
    }

    body.is-printing-route .main {
        margin: 0 !important;
    }

    body.is-printing-route .page {
        max-width: none;
        padding: 0;
    }

    body.is-printing-route .route-print {
        display: block;
        page: route-sheet;
        color: #000000;
        font-size: 10.5pt;
    }

    .route-print-head {
        margin-bottom: 4mm;
    }

    .route-print-title {
        margin: 0;
        font-size: 16pt;
        font-weight: 700;
    }

    .route-print-meta {
        color: #333333;
        font-size: 9.5pt;
    }

    .route-print-map {
        margin-bottom: 4mm;
        border: 1px solid #CCCCCC;
        border-radius: 3mm;
        overflow: hidden;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .route-print-map:empty {
        display: none;
    }

    .route-print-svg {
        display: block;
        width: 100%;
        height: 80mm;
    }

    .route-print-svg .map-route-line {
        animation: none;
        stroke-dasharray: none;
    }

    .route-print-table {
        width: 100%;
        border-collapse: collapse;
    }

    .route-print-table th,
    .route-print-table td {
        padding: 1.6mm 2mm;
        border-bottom: 0.3mm solid #BBBBBB;
        vertical-align: top;
        text-align: left;
    }

    .route-print-table th {
        font-size: 8.5pt;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .route-print-table .text-end {
        text-align: right;
    }

    .route-print-table tr {
        break-inside: avoid;
    }

    .route-print-seq,
    .route-print-code {
        font-weight: 700;
        white-space: nowrap;
    }

    .route-print-check {
        width: 16mm;
        text-align: center !important;
    }

    .route-print-box {
        display: inline-block;
        width: 5mm;
        height: 5mm;
        border: 0.4mm solid #000000;
        border-radius: 1mm;
    }
}

/* Printing the label sheet: only the A4 pages, real size. */
@page label-sheet {
    size: A4;
    margin: 0;
}

@media print {
    body:has(.labels-page) .sidebar,
    body:has(.labels-page) .sidebar-backdrop,
    body:has(.labels-page) .topbar,
    body:has(.labels-page) .skip-link,
    body:has(.labels-page) .toast-container,
    .labels-page .page-header,
    .labels-page .label-settings,
    .labels-page .label-preview-head,
    .labels-page .label-notice,
    .labels-page #labelEmpty {
        display: none !important;
    }

    body:has(.labels-page) {
        background: #FFFFFF;
    }

    body:has(.labels-page) .main {
        margin: 0 !important;
    }

    body:has(.labels-page) .page {
        max-width: none;
        padding: 0;
    }

    .labels-layout {
        display: block;
    }

    .labels-page .label-preview {
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .label-sheets {
        display: block;
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .label-page {
        page: label-sheet;
        margin: 0;
        box-shadow: none;
        zoom: 1;
        break-after: page;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .label-page:last-child {
        break-after: auto;
    }

    .label-cell {
        outline-color: #DDDDDD;
    }
}

/* ------------------------------------------------------------------ */
/* 19. Motion and reduced motion                                       */
/* ------------------------------------------------------------------ */

@keyframes nova-shimmer {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(320%);
    }
}

@keyframes nova-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.12);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes nova-pop-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes nova-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes nova-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes nova-toast-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes nova-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

/* Page content settles in softly (never the fixed panels: an animation
   would override their transform). The data-nova-page root is itself the
   direct child of .page and is neither .offcanvas nor .modal, but it almost
   always contains a modal somewhere further down (receive panel, confirm
   dialogs ...): any transform on it, even the identity transform this
   animation produces while running, creates a new containing block for
   those modals' position:fixed, so a "centered" modal ends up centered in
   the full scrollable page instead of the viewport and can render far off
   screen on a long page (only the backdrop then shows, looking frozen). So
   this also skips any element that has a modal or offcanvas anywhere inside
   it, not only a direct one. */
.page > :not(.offcanvas):not(.modal):not(script):not(:has(.modal)):not(:has(.offcanvas)) {
    animation: nova-fade-up 360ms var(--nova-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:active,
    .filter-pill:active,
    .login-submit:active {
        transform: none;
    }

    /* The terminal scene becomes a still: one box under the scanner, the
       beam and the "Okundu" notification visible. */
    .scene-belt-track,
    .scene-box,
    .scene-sync,
    .scene-caret,
    .scene-device,
    .login-submit-shimmer {
        animation: none !important;
    }

    .scene-box-b {
        display: none;
    }

    .scene-box {
        transform: translateX(234px);
    }

    .scene-beam,
    .scene-line,
    .scene-island-text {
        opacity: 1;
    }

    .scene-island {
        width: 150px;
    }

    .scene-row-active {
        background-color: #E8F7EE;
    }

    .login-submit.is-checking .login-submit-shimmer {
        display: block;
        left: 33%;
        animation: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* 20. Responsive                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 1399.98px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .dash-grid,
    .dash-grid-bottom,
    .settings-grid,
    .operation-grid,
    .order-overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .operation-aside,
    .preview-panel {
        position: static;
    }

    .tenant-pill-name {
        display: none;
    }

    .login-hero {
        padding: 44px 40px 32px;
    }

    .login-hero-title {
        font-size: 3rem;
    }
}

/* Small screens: the sidebar slides in over the page. */
@media (max-width: 991.98px) {
    :root {
        --nova-page-padding-x: 24px;
    }

    .app-shell::before {
        display: none;
    }

    .sidebar {
        transform: translateX(-105%);
        background: rgba(255, 255, 255, 0.92);
    }

    .sidebar.open {
        transform: none;
        box-shadow: var(--nova-shadow-sheet);
    }

    .sidebar.open + .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1025;
        background: rgba(29, 29, 31, 0.22);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        animation: nova-fade-up var(--nova-duration) var(--nova-ease-out);
    }

    .sidebar-footer {
        display: none;
    }

    .main {
        margin-left: 0;
    }

    .topbar {
        gap: 8px;
        padding: 0 12px 0 8px;
    }

    .topbar .topbar-menu {
        display: inline-grid;
    }

    .global-search {
        max-width: none;
    }

    .user-name,
    .user-chip .bi-chevron-down,
    .tenant-pill,
    .topbar-culture,
    .global-search.has-shortcut .global-search-kbd {
        display: none;
    }

    .user-chip {
        padding: 0 4px;
    }

    .user-menu-culture {
        display: block;
    }

    .page {
        padding-top: 24px;
    }
}

@media (max-width: 767.98px) {
    /* Wide tables scroll sideways instead of squeezing their text. */
    .table-responsive > .table:not(.table-sm) {
        min-width: 680px;
    }

    .offcanvas.offcanvas-end {
        top: 8px;
        right: 8px;
        bottom: 8px;
        max-width: calc(100% - 16px);
        border-radius: 24px;
    }

    .activity-item {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .login-shell {
        padding: 20px 16px 28px;
        gap: 18px;
    }

    .login-main {
        gap: 16px;
    }

    .login-card {
        border-radius: 32px;
    }

    .login-panel {
        order: -1;
        padding: 36px 24px;
    }

    .login-hero {
        gap: 24px;
        padding: 32px 24px 28px;
    }

    .login-hero-title {
        font-size: 2.5rem;
    }

    .login-hero-lead {
        font-size: 1.0625rem;
    }

    .login-title {
        font-size: 1.875rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --nova-page-padding-x: 16px;
        --nova-gap: 14px;
        --nova-title: 1.875rem;
    }

    .page-header,
    .dash-hero {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 22px;
    }

    .page-header-actions {
        justify-content: flex-start;
    }

    .dash-greeting {
        font-size: 2rem;
    }

    .card-panel {
        padding: 20px 16px;
        border-radius: 24px;
    }

    .card-panel > .filter-bar,
    .card-panel > .list-toolbar {
        margin: -4px -16px 0 !important;
        padding: 0 16px 16px;
    }

    .card-panel > .table-responsive {
        margin: 0 -16px;
    }

    .card-panel > .table-responsive:last-child {
        margin-bottom: -20px;
    }

    .card-panel > .table-responsive > .table > :not(caption) > tr > :first-child {
        padding-left: 16px;
    }

    .card-panel > .table-responsive > .table > :not(caption) > tr > :last-child {
        padding-right: 16px;
    }

    .card-panel > .list-pager {
        margin: 0 -16px -20px;
        padding: 12px 16px 16px;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi-tile {
        gap: 12px;
        padding: 16px;
        border-radius: 24px;
    }

    .kpi-value {
        font-size: 1.75rem;
    }

    .kpi-spark {
        display: none;
    }

    .kpi-label {
        font-size: var(--nova-text-sm);
    }

    /* Two filters per row; the search takes the whole row. */
    .filter-item,
    .filter-item-date {
        flex: 1 1 calc(50% - 7px);
        min-width: 0;
        max-width: none;
    }

    .filter-item-wide {
        flex-basis: 100%;
        max-width: none;
    }

    .filter-item-actions {
        flex-basis: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }

    .filter-pills {
        flex-wrap: nowrap;
        margin: -6px -16px calc(var(--nova-gap) - 10px);
        padding: 6px 16px 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .filter-pill[aria-pressed="true"] {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
    }

    .quantity-strip,
    .quantity-strip-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .asset-field {
        flex-direction: column;
    }

    .brand-preview {
        flex-direction: column;
    }

    .brand-preview-sidebar {
        flex-basis: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .donut-layout {
        justify-content: center;
    }

    .list-pager {
        justify-content: center;
    }

    .pager-info {
        width: 100%;
        text-align: center;
    }

    .toast-container {
        padding: 12px !important;
        left: 0;
        right: 0;
    }

    .toast.nova-toast {
        min-width: 0;
        width: 100%;
    }

    .login-hero-title {
        font-size: 2.25rem;
    }

    .login-panel {
        padding: 32px 20px;
    }
}

/* Hızlı Sevk on a phone: three totals in one row, each line a small card
   (product, the three quantities with their labels, stock). */
@media (max-width: 575.98px) {
    .quantity-strip.quantity-strip-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quick-ship-table thead {
        display: none;
    }

    .quick-ship-table tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--nova-hairline);
    }

    .quick-ship-table td {
        padding: 0;
        border: 0;
        text-align: left !important;
    }

    .quick-ship-table td:first-child,
    .quick-ship-table td:last-child {
        grid-column: 1 / -1;
    }

    .quick-ship-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--nova-text-muted);
        font-size: 12px;
        font-weight: 400;
    }
}

/* ------------------------------------------------------------------ */
/* AI assistant: top bar button, side panel (chat, tool chips,         */
/* proposal cards), usage pages                                       */
/* ------------------------------------------------------------------ */

.topbar-assistant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-primary-wash);
    color: var(--nova-primary-text);
    font-size: var(--nova-text-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--nova-duration-fast) var(--nova-ease), transform var(--nova-duration-fast) var(--nova-ease);
}

.topbar-assistant:hover {
    background: var(--nova-primary-soft);
}

.topbar-assistant:active {
    transform: scale(0.97);
}

.topbar-assistant:focus-visible {
    outline: 0;
    box-shadow: var(--nova-focus-ring);
}

.topbar-assistant-kbd {
    padding: 1px 6px;
    border-radius: var(--nova-radius-xs);
    background: var(--nova-surface);
    color: var(--nova-text-muted);
    font-family: var(--nova-font);
    font-size: var(--nova-text-xs);
    font-weight: 500;
    box-shadow: none;
}

.assistant-panel {
    --bs-offcanvas-width: 460px;
    display: flex;
    flex-direction: column;
}

.assistant-header {
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nova-hairline);
}

.assistant-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.assistant-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.assistant-header-actions .btn-close {
    margin-left: 6px;
}

.assistant-header-actions .icon-button[aria-pressed="true"] {
    background: var(--nova-primary-wash);
    color: var(--nova-primary-text);
}

.assistant-mark,
.assistant-welcome-mark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
    font-size: 1.125rem;
}

.assistant-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.assistant-notice {
    margin: 12px 20px 0;
    padding: 10px 14px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-fill);
    color: var(--nova-text);
    font-size: var(--nova-text-sm);
}

.assistant-notice-info {
    background: var(--nova-info-soft);
    color: var(--nova-info);
}

.assistant-notice-warning {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.assistant-notice-danger {
    background: var(--nova-danger-soft);
    color: var(--nova-danger);
}

.assistant-history {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 16px 20px;
    overflow-y: auto;
    background: var(--nova-surface);
}

.assistant-history-heading {
    margin: 0 0 8px;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.assistant-history-item {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--nova-hairline);
}

.assistant-history-open {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 4px;
    border: 0;
    background: transparent;
    color: var(--nova-text);
    text-align: left;
}

.assistant-history-open:hover .assistant-history-title {
    color: var(--nova-primary-text);
}

.assistant-history-title {
    overflow: hidden;
    font-size: var(--nova-text-md);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-history-meta {
    color: var(--nova-text-subtle);
    font-size: var(--nova-text-xs);
}

.icon-button-sm {
    width: 32px;
    height: 32px;
    font-size: 1rem;
}

.assistant-thread {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 16px 20px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.assistant-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
    padding: 24px 8px;
    text-align: center;
}

.assistant-welcome-mark {
    width: 52px;
    height: 52px;
    border-radius: var(--nova-radius-md);
    font-size: 1.5rem;
}

.assistant-welcome-title {
    margin: 16px 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: var(--nova-tracking-tight);
}

.assistant-welcome-text {
    max-width: 320px;
    margin: 0 0 18px;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

.assistant-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.assistant-suggestion {
    padding: 10px 14px;
    border: 0;
    border-radius: var(--nova-radius-input);
    background: var(--nova-fill);
    color: var(--nova-text);
    font-size: var(--nova-text-sm);
    text-align: left;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.assistant-suggestion:hover {
    background: var(--nova-fill-hover);
}

.assistant-message {
    max-width: 92%;
    font-size: var(--nova-text-md);
    line-height: 1.5;
    overflow-wrap: anywhere;
    animation: assistant-in var(--nova-duration) var(--nova-ease);
}

.assistant-message p {
    margin: 0 0 8px;
}

.assistant-message p:last-child,
.assistant-message ul:last-child {
    margin-bottom: 0;
}

.assistant-message ul {
    margin: 0 0 8px;
    padding-left: 20px;
}

.assistant-message-user {
    align-self: flex-end;
    padding: 10px 14px;
    border-radius: var(--nova-radius-md) var(--nova-radius-md) 6px var(--nova-radius-md);
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
}

.assistant-message-assistant {
    align-self: flex-start;
    width: 100%;
}

.assistant-text {
    padding: 12px 14px;
    border-radius: 6px var(--nova-radius-md) var(--nova-radius-md) var(--nova-radius-md);
    background: var(--nova-fill);
    color: var(--nova-text);
}

.assistant-error p {
    padding: 12px 14px;
    border-radius: var(--nova-radius-md);
    background: var(--nova-danger-soft);
    color: var(--nova-danger);
}

.assistant-message-assistant.assistant-typing {
    width: auto;
    padding: 12px 16px;
    border-radius: var(--nova-radius-md);
    background: var(--nova-fill);
}

.assistant-dots {
    display: inline-flex;
    gap: 4px;
}

.assistant-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nova-text-subtle);
    animation: assistant-dot 1.2s var(--nova-ease) infinite;
}

.assistant-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.assistant-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

.assistant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.assistant-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-primary-wash);
    color: var(--nova-primary-text);
    font-size: var(--nova-text-xs);
    font-weight: 500;
}

.assistant-chip-denied {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.assistant-chip-failed {
    background: var(--nova-neutral-soft);
    color: var(--nova-text-muted);
}

.assistant-answer-notice {
    margin-top: 8px;
    color: var(--nova-warning);
    font-size: var(--nova-text-sm);
}

.assistant-usage {
    margin-top: 6px;
    color: var(--nova-text-subtle);
    font-size: var(--nova-text-xs);
}

.assistant-proposal {
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid var(--nova-border);
    border-radius: var(--nova-radius-md);
    background: var(--nova-surface);
}

.assistant-proposal-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.assistant-proposal-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--nova-radius-xs);
    background: var(--nova-primary-wash);
    color: var(--nova-primary-text);
}

.assistant-proposal-title {
    font-weight: 600;
    letter-spacing: var(--nova-tracking-tight);
}

.assistant-proposal-summary {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

.assistant-proposal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.assistant-proposal-until {
    margin-left: auto;
    color: var(--nova-text-subtle);
    font-size: var(--nova-text-xs);
}

.assistant-proposal-result {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-fill);
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

.assistant-proposal-result-success {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.assistant-proposal-result-danger {
    background: var(--nova-danger-soft);
    color: var(--nova-danger);
}

.assistant-proposal-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    color: var(--nova-primary-text);
    font-size: var(--nova-text-sm);
    font-weight: 600;
    text-decoration: none;
}

.assistant-proposal-link:hover {
    text-decoration: underline;
}

.assistant-composer {
    flex: 0 0 auto;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--nova-hairline);
}

.assistant-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-fill);
    transition: box-shadow var(--nova-duration-fast) var(--nova-ease), background-color var(--nova-duration-fast) var(--nova-ease);
}

.assistant-input-row:focus-within {
    background: var(--nova-surface);
    box-shadow: var(--nova-focus-ring);
}

.assistant-input {
    flex: 1 1 auto;
    min-height: 28px;
    max-height: 160px;
    padding: 6px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--nova-text);
    font-size: var(--nova-text-md);
    line-height: 1.4;
    resize: none;
}

.assistant-send {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.assistant-footnote {
    margin: 8px 4px 0;
    color: var(--nova-text-subtle);
    font-size: var(--nova-text-xs);
}

@keyframes assistant-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes assistant-dot {
    0%,
    80%,
    100% {
        opacity: 0.3;
    }

    40% {
        opacity: 1;
    }
}

/* Fotoğraf depolama: the share of the quota (Ayarlar → Fotoğraf Depolama). */
.photo-quota-bar {
    height: 0.75rem;
    border-radius: 999px;
    background: var(--nova-border);
    overflow: hidden;
}

.photo-quota-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.photo-quota-ok {
    background: var(--nova-success-bright);
}

.photo-quota-warning {
    background: var(--nova-warning-bright);
}

.photo-quota-full {
    background: var(--nova-danger-bright);
}

.ai-usage-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 32px;
}

.ai-usage-month {
    width: 220px;
}

.ai-usage-limit {
    margin: 0 0 10px;
    color: var(--nova-text-muted);
}

.ai-usage-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nova-gap);
    margin: var(--nova-gap) 0;
}

.ai-usage-tile {
    padding: 20px 22px;
    border-radius: var(--nova-radius-card);
    background: var(--nova-surface);
    box-shadow: var(--nova-shadow-card);
}

.ai-usage-tile-label {
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

.ai-usage-tile-value {
    margin-top: 6px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: var(--nova-tracking-title);
}

.ai-usage-tile-hint {
    margin-top: 4px;
    color: var(--nova-text-subtle);
    font-size: var(--nova-text-xs);
}

.ai-usage-chart {
    position: relative;
    width: 100%;
    min-height: 220px;
}

.ai-usage-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.ai-usage-note {
    margin-top: 12px;
}

@media (max-width: 991.98px) {
    .ai-usage-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topbar-assistant-label,
    .topbar-assistant-kbd {
        display: none;
    }

    .topbar-assistant {
        justify-content: center;
        width: 36px;
        padding: 0;
    }
}

@media (max-width: 575.98px) {
    .assistant-panel {
        --bs-offcanvas-width: 100%;
    }

    .ai-usage-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-usage-month {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* Depo → Akıllı Yerleşim (nova.slotting)                              */
/* ------------------------------------------------------------------ */

.slotting-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--nova-gap);
}

.slotting-warehouse {
    width: 320px;
    max-width: 100%;
}

.slotting-window {
    margin: 0 0 10px;
    color: var(--nova-text-muted);
}

.slotting-notice {
    margin: var(--nova-gap) 0 0;
    padding: 12px 16px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
    font-weight: 500;
}

.slotting-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nova-gap);
    margin: var(--nova-gap) 0;
}

.slotting-tile {
    padding: 20px 22px;
    border-radius: var(--nova-radius-card);
    background: var(--nova-surface);
    box-shadow: var(--nova-shadow-card);
}

.slotting-tile-label {
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
}

.slotting-tile-value {
    margin-top: 6px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: var(--nova-tracking-title);
    font-variant-numeric: tabular-nums;
}

.slotting-tile-hint {
    margin-top: 4px;
    color: var(--nova-text-subtle);
    font-size: var(--nova-text-xs);
}

.slotting-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--nova-gap);
    margin-bottom: var(--nova-gap);
}

.slotting-grid > .card-panel {
    margin: 0;
}

.slotting-grid .legend-list {
    flex-basis: 100%;
}

#slottingContent > .card-panel {
    margin-bottom: var(--nova-gap);
}

.tone-abc-a {
    background: var(--nova-primary);
    stroke: var(--nova-primary);
}

.tone-abc-b {
    background: var(--nova-info-bright);
    stroke: var(--nova-info-bright);
}

.tone-abc-c {
    background: #8E8E93;
    stroke: #8E8E93;
}

.abc-badge {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: var(--nova-text-xs);
    font-weight: 700;
}

.abc-badge-a {
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
}

.abc-badge-b {
    background: var(--nova-info-soft);
    color: var(--nova-info);
}

.abc-badge-c {
    background: var(--nova-neutral-soft);
    color: var(--nova-text-muted);
}

.slotting-note {
    margin-top: 4px;
}

@media (max-width: 1199.98px) {
    .slotting-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .slotting-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .slotting-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .slotting-warehouse {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-message,
    .assistant-dots span {
        animation: none;
    }

    .topbar-assistant {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* Paketleme (pack station, nova.packStation): a calm kiosk screen with   */
/* large digits and touch targets; the scan field is always at the top.  */
/* ------------------------------------------------------------------ */

.pack-station {
    display: grid;
    gap: 20px;
}

.pack-scan-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    gap: 10px;
    padding: 18px 20px;
    border-radius: var(--nova-radius-card);
    background: var(--nova-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pack-scan-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--nova-text);
}

.pack-scan-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.pack-scan-input {
    flex: 1 1 auto;
    min-height: 64px;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--nova-radius-md);
}

.pack-quantity {
    display: grid;
    gap: 4px;
    width: 120px;
}

.pack-quantity-label {
    margin: 0;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.pack-quantity-input {
    min-height: 64px;
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    border-radius: var(--nova-radius-md);
}

.pack-message {
    min-height: 56px;
    padding: 12px 18px;
    border-radius: var(--nova-radius-md);
    font-size: 1.375rem;
    font-weight: 600;
    background: var(--nova-fill);
    color: var(--nova-text-muted);
}

.pack-message:empty {
    visibility: hidden;
}

.pack-message.is-success {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.pack-message.is-warning {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.pack-message.is-danger {
    background: var(--nova-danger-soft);
    color: var(--nova-danger);
    font-size: 1.625rem;
}

.pack-section {
    display: grid;
    gap: 16px;
}

.pack-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pack-section-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pack-title {
    margin: 0;
    font-size: var(--nova-title);
    font-weight: 700;
    letter-spacing: var(--nova-tracking-title);
}

.pack-subtitle {
    font-size: 1.25rem;
    color: var(--nova-text-muted);
}

.pack-order-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.pack-order-card {
    display: grid;
    gap: 4px;
    padding: 20px;
    border: 0;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface);
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pack-order-card:hover,
.pack-order-card:focus-visible {
    outline: 3px solid var(--nova-primary-ring);
}

.pack-order-customer {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nova-text);
}

.pack-order-number {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--nova-primary-text);
}

.pack-order-meta {
    color: var(--nova-text-muted);
}

.pack-progress {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pack-progress-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.pack-progress-text {
    font-size: 1.125rem;
    color: var(--nova-text-muted);
}

.pack-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    gap: 20px;
    align-items: start;
}

.pack-lines {
    display: grid;
    gap: 10px;
}

.pack-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pack-line.is-done {
    background: var(--nova-success-soft);
    box-shadow: none;
}

.pack-line-code {
    font-size: 1.25rem;
    font-weight: 700;
}

.pack-line-name {
    color: var(--nova-text-muted);
}

.pack-line-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pack-flag {
    padding: 2px 10px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-fill);
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.pack-line-lots {
    margin-top: 4px;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.pack-line-count {
    display: grid;
    justify-items: end;
    flex: none;
}

.pack-line-remaining {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pack-line.is-done .pack-line-remaining {
    color: var(--nova-success);
}

.pack-line-of {
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.pack-carton {
    position: sticky;
    top: 200px;
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: var(--nova-radius-card);
    background: var(--nova-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pack-carton-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pack-carton-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.pack-carton-number {
    color: var(--nova-text-muted);
}

.pack-carton-items {
    display: grid;
    gap: 6px;
    max-height: 280px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.pack-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-fill);
}

.pack-item-qty {
    min-width: 48px;
    font-size: 1.375rem;
    font-weight: 800;
    text-align: right;
}

.pack-item-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pack-item-code {
    font-weight: 700;
}

.pack-item-sub {
    display: block;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.pack-block {
    display: grid;
    gap: 8px;
}

.pack-block-title {
    margin: 0;
    font-size: var(--nova-text-md);
    font-weight: 700;
    color: var(--nova-text);
}

.pack-suggestion {
    padding: 8px 12px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-fill);
    color: var(--nova-text-muted);
}

.pack-suggestion.is-success {
    background: var(--nova-success-soft);
    color: var(--nova-success);
}

.pack-suggestion.is-warning {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.pack-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pack-box {
    display: grid;
    gap: 2px;
    min-width: 96px;
    padding: 10px 14px;
    border: 2px solid var(--nova-border);
    border-radius: var(--nova-radius-md);
    background: var(--nova-surface);
    text-align: left;
}

.pack-box.is-suggested {
    border-style: dashed;
    border-color: var(--nova-success-bright);
}

.pack-box.is-selected {
    border-style: solid;
    border-color: var(--nova-primary);
    background: var(--nova-primary-soft);
}

.pack-box-code {
    font-weight: 700;
}

.pack-box-size {
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.pack-weight-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pack-weight-input {
    min-height: 56px;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: var(--nova-radius-md);
}

.pack-weight-unit {
    font-size: 1.25rem;
    color: var(--nova-text-muted);
}

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

.pack-weight-warning {
    padding: 10px 12px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
    font-weight: 600;
}

.pack-close {
    min-height: 72px;
    border-radius: var(--nova-radius-pill);
    font-size: 1.5rem;
    font-weight: 700;
}

.pack-closed {
    display: grid;
    gap: 10px;
}

.pack-closed-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.pack-closed-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pack-closed-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pack-closed-title {
    font-size: 1.125rem;
    font-weight: 700;
}

.pack-closed-number,
.pack-closed-meta {
    color: var(--nova-text-muted);
}

.pack-closed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pack-empty {
    padding: 16px;
    border-radius: var(--nova-radius-md);
    background: var(--nova-fill);
    color: var(--nova-text-muted);
    text-align: center;
}

@media (max-width: 991.98px) {
    .pack-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pack-carton {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .pack-scan-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pack-quantity {
        width: auto;
    }

    .pack-line-remaining {
        font-size: 2.25rem;
    }
}

/* Packing slip (nova.packingSlip): one A4 page per carton, then the labels. */
.packing-slip-page {
    display: grid;
    gap: 16px;
}

.packing-slip-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

.packing-slips {
    display: grid;
    justify-content: center;
    gap: 16px;
}

.pack-slip {
    box-sizing: border-box;
    width: 210mm;
    min-height: 297mm;
    padding: 14mm;
    background: #FFFFFF;
    color: #000000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.pack-slip-head {
    display: flex;
    justify-content: space-between;
    gap: 8mm;
    padding-bottom: 6mm;
    border-bottom: 0.4mm solid #000000;
}

.pack-slip-kind {
    font-size: 11pt;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pack-slip-number {
    font-size: 22pt;
    font-weight: 800;
}

.pack-slip-carton {
    font-size: 14pt;
    font-weight: 600;
}

.pack-slip-barcode {
    width: 80mm;
}

.pack-slip-barcode .barcode {
    display: block;
    width: 100%;
    height: 20mm;
    fill: #000000;
}

.pack-slip-meta {
    display: grid;
    grid-template-columns: 40mm 1fr;
    gap: 2mm 6mm;
    margin: 6mm 0;
    font-size: 11pt;
}

.pack-slip-meta dt {
    font-weight: 600;
}

.pack-slip-meta dd {
    margin: 0;
}

.pack-slip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
}

.pack-slip-table th,
.pack-slip-table td {
    padding: 2mm;
    border-bottom: 0.2mm solid #999999;
    text-align: left;
}

.pack-slip-table tfoot td {
    font-weight: 700;
    border-bottom: 0;
}

.pack-slip-table .text-end {
    text-align: right;
}

/* ------------------------------------------------------------------ */
/* 21. Basitten detaya (docs/ui-design.md "Basitten detaya")           */
/*     Lists: pills, one search row, "Filtreler" / "Sütunlar" on       */
/*     demand. Details: header with ONE primary action and a "⋯"       */
/*     menu, summary card, compact lines with rows that open, details  */
/*     in tabs.                                                        */
/* ------------------------------------------------------------------ */

/* List toolbar: the search row, the second filter row on demand. */
.list-toolbar-main .filter-item-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.filter-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filter-more-toggle[aria-expanded="true"] {
    background: var(--nova-fill-strong);
}

.filter-more-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-primary);
    color: var(--nova-primary-contrast);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.card-panel > .filter-bar-more {
    margin-top: 0 !important;
    padding-top: 16px;
}

.card-panel > .filter-bar.list-toolbar-main:has(+ .filter-bar-more:not(.d-none)) {
    border-bottom: 0;
    padding-bottom: 0;
}

.columns-menu .dropdown-menu {
    min-width: 230px;
}

.columns-menu .dropdown-item {
    cursor: pointer;
}

.columns-menu .form-check-input {
    margin: 0;
}

/* "Next step" under the status of a list row. */
.cell-next {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--nova-primary-text);
    font-weight: 600;
}

/* Detail header: the one primary action next to the "⋯" menu. */
.action-menu {
    position: relative;
}

.action-menu.d-none {
    display: none;
}

.detail-primary {
    display: contents;
}

.action-menu .dropdown-item.text-danger:hover {
    background: var(--nova-danger-soft);
    color: var(--nova-danger);
}

.action-menu .dropdown-item.d-none,
.action-menu .dropdown-item[hidden],
.action-menu .dropdown-divider:has(+ .dropdown-item.d-none),
.action-menu .dropdown-divider:has(+ .dropdown-item[hidden]) {
    display: none !important;
}

/* Summary card: figures, one progress line, facts. */
.summary-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.summary-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
}

.summary-figure-value {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.summary-figure-label {
    margin-top: 2px;
    font-size: var(--nova-text-xs);
    font-weight: 600;
    color: var(--nova-text-muted);
}

.summary-figure.is-success .summary-figure-value {
    color: var(--nova-success);
}

.summary-figure.is-warning .summary-figure-value {
    color: var(--nova-warning);
}

.summary-figure.is-danger .summary-figure-value {
    color: var(--nova-danger);
}

.summary-progress .progress-inline {
    max-width: 560px;
}

.summary-progress .qty-progress {
    height: 10px;
}

.summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin: 0;
    font-size: var(--nova-text-sm);
}

.summary-meta:empty {
    display: none;
}

.summary-meta-item {
    display: flex;
    gap: 6px;
}

.summary-meta-item dt {
    font-weight: 500;
    color: var(--nova-text-muted);
}

.summary-meta-item dd {
    margin: 0;
    font-weight: 600;
}

.summary-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-primary-text);
    cursor: pointer;
    list-style: none;
}

.summary-more > summary::-webkit-details-marker {
    display: none;
}

.summary-more > summary::after {
    content: "\F285";
    font-family: "bootstrap-icons";
    font-size: 0.6875rem;
    transition: transform var(--nova-duration) var(--nova-ease);
}

.summary-more[open] > summary::after {
    transform: rotate(90deg);
}

.summary-meta-more {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: var(--nova-radius-md);
    background: var(--nova-surface-muted);
}

/* Rows that open: the figures and the request under a line. */
.row-detail > td {
    padding-top: 0;
    padding-bottom: 14px;
    border-top: 0;
    background: var(--nova-surface-muted) !important;
}

.line-row.has-open > td {
    border-bottom-color: transparent;
}

.line-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 36px;
    padding-top: 12px;
}

.line-figures .summary-figure-value {
    font-size: 1.125rem;
}

.line-request {
    margin-top: 10px;
    font-size: var(--nova-text-sm);
}

.line-request-label {
    font-weight: 600;
    color: var(--nova-text-muted);
}

/* Details on demand: tabs under the lines. */
.detail-section > .nav-tabs {
    max-width: 100%;
}

.detail-section .tab-pane > .table-responsive {
    margin: 0 -28px;
}

.detail-section .tab-pane > .table-responsive > .table > :not(caption) > tr > :first-child {
    padding-left: 28px;
}

.detail-section .tab-pane > .table-responsive > .table > :not(caption) > tr > :last-child {
    padding-right: 28px;
}

.detail-section .tab-pane > :last-child {
    margin-bottom: 0;
}

/* A secondary section folded under its title (one section, no tabs). */
.detail-fold > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.detail-fold > summary::-webkit-details-marker {
    display: none;
}

.detail-fold > summary::before {
    content: "\F285";
    font-family: "bootstrap-icons";
    font-size: 0.75rem;
    color: var(--nova-text-muted);
    transition: transform var(--nova-duration) var(--nova-ease);
}

.detail-fold[open] > summary::before {
    transform: rotate(90deg);
}

.detail-fold > summary .tab-count {
    margin-left: 0;
}

.detail-fold[open] > summary {
    margin-bottom: 14px;
}

.detail-fold > .table-responsive {
    margin: 0 -28px;
}

.detail-fold > .table-responsive > .table > :not(caption) > tr > :first-child {
    padding-left: 28px;
}

.detail-fold > .table-responsive > .table > :not(caption) > tr > :last-child {
    padding-right: 28px;
}

.detail-fold-inline > summary {
    font-size: var(--nova-text-sm);
    font-weight: 600;
    color: var(--nova-primary-text);
    cursor: pointer;
}

/* Dashboard: what is waiting first (task cards), then today, then the trends. */
.dash-section-title {
    margin: 28px 0 14px;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.task-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px;
}

.task-grid .task-item {
    margin: 0;
    padding: 16px 18px;
    border-radius: var(--nova-radius-lg);
    background: var(--nova-surface);
    box-shadow: var(--nova-shadow-card);
}

.task-grid .task-item:hover {
    background: var(--nova-surface);
    box-shadow: var(--nova-shadow-pop);
}

.task-grid .task-item.is-idle {
    box-shadow: none;
    background: transparent;
    border: 1px dashed var(--nova-border-strong);
}

.task-grid .task-sub {
    white-space: normal;
}

.dash-recent {
    margin-top: var(--nova-gap);
}

/* Phone: the simple lists fit the screen (no sideways scroll for the key columns). */
@media (max-width: 767.98px) {
    .table-responsive > .table.table-list-simple {
        min-width: 0;
    }

    .table-list-simple .customer-cell .avatar {
        display: none;
    }

    .table-list-simple .customer-name {
        display: block;
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    .col-wide-only {
        display: none;
    }

    .table-list-simple .customer-name {
        max-width: 92px;
    }

    .table-list-simple .cell-next {
        display: none;
    }
}

/* Stok Sorgula: product summary rows with the balances under them. */
.balance-detail > td {
    padding: 0 !important;
}

.balance-mini {
    margin: 0;
    font-size: var(--nova-text-sm);
}

.balance-mini > thead > tr > th {
    background: transparent;
}

.balance-mini > :not(caption) > tr > * {
    background: transparent;
}

.view-switch {
    margin-bottom: 0 !important;
}

@media (max-width: 767.98px) {
    .summary-figures {
        gap: 12px 24px;
    }

    .summary-figure-value {
        font-size: 1.5rem;
    }

    .detail-section .tab-pane > .table-responsive {
        margin: 0 -16px;
    }

    .detail-section .tab-pane > .table-responsive > .table > :not(caption) > tr > :first-child {
        padding-left: 16px;
    }

    .detail-section .tab-pane > .table-responsive > .table > :not(caption) > tr > :last-child {
        padding-right: 16px;
    }
}

@media print {
    body:has(.packing-slip-page) .sidebar,
    body:has(.packing-slip-page) .sidebar-backdrop,
    body:has(.packing-slip-page) .topbar,
    body:has(.packing-slip-page) .skip-link,
    body:has(.packing-slip-page) .toast-container,
    .packing-slip-page .packing-slip-tools {
        display: none !important;
    }

    body:has(.packing-slip-page) {
        background: #FFFFFF;
    }

    body:has(.packing-slip-page) .main {
        margin: 0 !important;
    }

    body:has(.packing-slip-page) .page {
        max-width: none;
        padding: 0;
    }

    .packing-slips {
        display: block;
    }

    .pack-slip {
        page: label-sheet;
        box-shadow: none;
        break-after: page;
    }
}

/* Photos of returns and ASNs (nova.photos): small square thumbnails. */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.photo-item {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.photo-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.photo-item figcaption {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.8125rem;
}

.photo-item .photo-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    background: var(--bs-body-bg);
}

/* Dalgalar (pick waves): checkbox column and the editable cut-off time. */
.check-col {
    width: 44px;
}

.wave-cutoff {
    min-width: 180px;
}

/* İçe Aktar (Views/Imports): type choice, file row, summary */
.import-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.import-kind {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
}

.import-kind:has(input:checked) {
    border-color: var(--bs-primary);
}

.import-file {
    max-width: 28rem;
}

.import-summary,
.import-result {
    font-weight: 600;
}

/* Bildirimler: the bell of the top bar and the list page (nova.notificationBell, nova.notifications). */
.notification-bell {
    position: relative;
}

.notification-bell-button {
    position: relative;
}

.notification-bell-button[aria-expanded="true"] {
    background: var(--nova-fill);
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--nova-radius-pill);
    background: var(--nova-danger-bright);
    box-shadow: 0 0 0 2px var(--nova-surface);
    color: #FFFFFF;
    font-size: 0.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
    animation: notification-badge-pop var(--nova-duration) var(--nova-ease-spring);
}

@keyframes notification-badge-pop {
    from {
        transform: scale(0.4);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.notification-menu {
    width: 400px;
    max-width: calc(100vw - 24px);
    margin-top: 8px !important;
    padding: 8px;
    border-radius: var(--nova-radius-lg);
    overflow: hidden;
}

.notification-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 10px 10px;
}

.notification-menu-title {
    color: var(--nova-text);
    font-size: var(--nova-text-md);
    font-weight: 700;
    letter-spacing: var(--nova-tracking-tight);
}

.notification-menu-head .btn-link {
    color: var(--nova-primary-text);
    font-size: var(--nova-text-sm);
    font-weight: 600;
    text-decoration: none;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 440px;
    overflow-y: auto;
}

.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 16px 32px;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
    text-align: center;
}

.notification-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-fill);
    color: var(--nova-text-subtle);
    font-size: 1.375rem;
}

.notification-menu-all {
    display: block;
    margin-top: 6px;
    padding: 10px 16px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-fill);
    color: var(--nova-text);
    font-size: var(--nova-text-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.notification-menu-all:hover {
    background: var(--nova-fill-hover);
    color: var(--nova-text);
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: var(--nova-radius-sm);
    background: transparent;
    color: var(--nova-text);
    text-align: left;
    text-decoration: none;
    transition: background-color var(--nova-duration-fast) var(--nova-ease);
}

.notification-item:hover,
.notification-item:focus-visible {
    outline: none;
    background: var(--nova-fill);
    color: var(--nova-text);
}

.notification-item:focus-visible {
    box-shadow: var(--nova-focus-ring);
}

.notification-item.is-unread .notification-title {
    font-weight: 700;
}

.notification-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1rem;
}

.notification-success {
    background: var(--nova-success-soft);
    color: var(--nova-success-solid);
}

.notification-warning {
    background: var(--nova-warning-soft);
    color: var(--nova-warning);
}

.notification-info {
    background: var(--nova-primary-soft);
    color: var(--nova-primary-text);
}

.notification-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.notification-title {
    font-size: var(--nova-text-sm);
    font-weight: 600;
    line-height: 1.35;
}

.notification-body {
    display: -webkit-box;
    overflow: hidden;
    color: var(--nova-text-muted);
    font-size: var(--nova-text-sm);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notification-age {
    margin-top: 2px;
    color: var(--nova-text-subtle);
    font-size: var(--nova-text-xs);
}

.notification-dot {
    flex: 0 0 auto;
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nova-primary);
}

.notification-page-list {
    display: flex;
    flex-direction: column;
}

.notification-item-page {
    padding: 14px 8px;
    border-bottom: 1px solid var(--nova-border);
    border-radius: 0;
}

.notification-item-page .notification-body {
    display: block;
    -webkit-line-clamp: unset;
}

.notification-preferences {
    padding: 12px 16px;
    border: 1px solid var(--nova-border);
    border-radius: var(--nova-radius-xs);
    background: var(--nova-surface-muted);
}

.notification-preferences-list {
    display: grid;
    gap: 6px 24px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Handheld app updates: effective policy summary, release notes. */
.app-policy-effective {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .75rem 1.5rem;
    margin: 0 0 1rem;
}

.app-policy-row dt {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--nova-text-muted);
}

.app-policy-row dd {
    margin: 0;
}

.app-release-notes {
    max-width: 24rem;
    white-space: pre-line;
}

/* Standard pallet types panel (Palet Tipleri → "Standart palet tiplerini ekle"). */
.pallet-catalog-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.pallet-catalog-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pallet-catalog-hint {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-info-soft);
    color: var(--nova-text);
    font-size: var(--nova-text-sm);
}

.pallet-catalog-hint > .bi {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--nova-info);
}

.pallet-catalog-active {
    margin-top: 4px;
    color: var(--nova-text-muted);
}

.pallet-catalog-group + .pallet-catalog-group {
    margin-top: 24px;
}

.pallet-catalog-group-title {
    margin: 0 0 8px;
    font-size: var(--nova-text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nova-text-muted);
}

.pallet-catalog-group-count {
    margin-left: 4px;
    color: var(--nova-text-subtle);
    font-weight: 500;
}

.pallet-catalog-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pallet-catalog-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--nova-radius-sm);
    background: var(--nova-fill);
    cursor: pointer;
    transition: background 150ms var(--nova-ease);
}

.pallet-catalog-item:hover {
    background: var(--nova-fill-hover);
}

.pallet-catalog-item:has(input:checked) {
    background: var(--nova-primary-wash);
    box-shadow: inset 0 0 0 2px var(--nova-primary-ring);
}

.pallet-catalog-item.is-added {
    cursor: default;
    opacity: 0.75;
}

.pallet-catalog-item input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.pallet-catalog-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pallet-catalog-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.pallet-catalog-facts {
    font-size: var(--nova-text-sm);
    color: var(--nova-text);
}

.pallet-catalog-description {
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.pallet-catalog-count {
    margin-right: auto;
    align-self: center;
    font-size: var(--nova-text-sm);
    color: var(--nova-text-muted);
}

.pallet-catalog-own {
    padding-left: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pallet-catalog-item {
        transition: none;
    }
}