/* ========================================================= PAROCHOS VCR – Radzen overrides (global, not scoped — applies to all Radzen elements) ========================================================= */ /* ── Buttons: no uppercase ── */ .rz-button { text-transform: none !important; } /* ── Header: force white background (LIGHT) ───────────────── MainLayout_razor.css is SCOPED (Blazor CSS isolation), so its .rz-header rules don't reach the Radzen component. We override here (global) with higher specificity. ────────────────────────────────────────────────────────── */ .rz-layout > .rz-header, .rz-header { background-color: #ffffff !important; background: #ffffff !important; color: #1a1a2e !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; } /* Icon buttons inside header */ .rz-header .rz-button, .rz-header .rz-sidebar-toggle { color: rgba(0, 0, 0, 0.6) !important; background: transparent !important; box-shadow: none !important; transition: background 0.15s ease, color 0.15s ease !important; } .rz-header .rz-button:hover, .rz-header .rz-sidebar-toggle:hover { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.85) !important; } /* Page title text in header */ .rz-header .rz-text { color: #1a1a2e !important; } /* ── Sidebar ──────────────────────────────────────────────── */ .rz-sidebar { border-right: 1px solid rgba(0, 0, 0, 0.06) !important; transition: background 0.25s ease, border-color 0.25s ease !important; } /* ── Dialog ───────────────────────────────────────────────── */ .rz-dialog-wrapper .rz-dialog { border-radius: 12px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important; transition: background 0.25s ease, color 0.25s ease !important; } .rz-dialog-wrapper .rz-dialog-title { font-weight: 600 !important; font-size: 1rem !important; color: #1a1a2e !important; } /* ── DataGrid ─────────────────────────────────────────────── */ .rz-data-grid .rz-grid-table th { font-weight: 600 !important; font-size: 0.75rem !important; letter-spacing: 0.02em !important; color: rgba(0, 0, 0, 0.55) !important; background: var(--rz-base-50, #fafafa) !important; } /* ── Badges / Status chips ─────────────────────────────────── */ .rz-badge { border-radius: 20px !important; font-weight: 500 !important; } /* ── Notifications ─────────────────────────────────────────── */ .rz-notification { border-radius: 10px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important; } /* ── Form Fields ────────────────────────────────────────────── */ .rz-form-field .rz-textbox, .rz-form-field .rz-numeric, .rz-form-field .rz-textarea, .rz-form-field .rz-dropdown { border-radius: 8px !important; } /* ── Dialog section cards ───────────────────────────────────── */ :root { --rz-grid-cell-border: 1px solid rgba(0, 0, 0, 0.1); } .dlg-section { padding: 1rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--rz-border-radius, 8px); } /* ── Panel Menu (Sidebar nav) ───────────────────────────────── */ .rz-panel-menu .rz-navigation-item-text { font-size: 0.875rem !important; font-weight: 500 !important; } .rz-panel-menu .rz-navigation-item.selected > .rz-navigation-item-content, .rz-panel-menu .rz-navigation-item.active > .rz-navigation-item-content { border-radius: 8px !important; } /* ── Stat card warning border (pending invitations) ── */ .stat-card--warn-border { border-color: var(--rz-warning) !important; } /* ═══════════════════════════════════════════════════════════ DARK MODE OVERRIDES Selector: [data-theme="dark"] set on by darkmode.js ═══════════════════════════════════════════════════════════ */ /* ── Radzen CSS Variable Overrides ─────────────────────────── */ [data-theme="dark"] { /* Page & surface backgrounds */ --rz-body-background-color: #0f1117; --rz-base-background-color: #1a1d27; --rz-base-50: #1e2130; --rz-base-100: #252838; --rz-base-200: #2d3148; --rz-base-300: rgba(255, 255, 255, 0.09); --rz-base-400: rgba(255, 255, 255, 0.16); --rz-base-500: rgba(255, 255, 255, 0.24); /* Text */ --rz-text-color: #e2e8f0; --rz-text-secondary-color: #94a3b8; --rz-text-tertiary-color: #64748b; --rz-text-disabled-color: #475569; /* Primary accent – keep hue, adjust lighter tints */ --rz-primary-lighter: rgba(99, 102, 241, 0.14); --rz-primary-light: rgba(99, 102, 241, 0.28); /* Semantic color lighter variants (tinted backgrounds) */ --rz-success-lighter: rgba( 34, 197, 94, 0.13); --rz-danger-lighter: rgba(239, 68, 68, 0.13); --rz-warning-lighter: rgba(245, 158, 11, 0.13); --rz-info-lighter: rgba( 14, 165, 233, 0.13); /* Grid cell border */ --rz-grid-cell-border: 1px solid rgba(255, 255, 255, 0.07); /* Link */ --rz-link-color: #818cf8; --rz-link-hover-color: #a5b4fc; } /* ── Header (dark) ──────────────────────────────────────────── */ [data-theme="dark"] .rz-layout > .rz-header, [data-theme="dark"] .rz-header { background-color: #1a1d27 !important; background: #1a1d27 !important; color: #e2e8f0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .rz-header .rz-button, [data-theme="dark"] .rz-header .rz-sidebar-toggle { color: rgba(255, 255, 255, 0.65) !important; background: transparent !important; } [data-theme="dark"] .rz-header .rz-button:hover, [data-theme="dark"] .rz-header .rz-sidebar-toggle:hover { background: rgba(255, 255, 255, 0.07) !important; color: rgba(255, 255, 255, 0.95) !important; } [data-theme="dark"] .rz-header .rz-text { color: #e2e8f0 !important; } /* ── Sidebar (dark) ─────────────────────────────────────────── */ [data-theme="dark"] .rz-sidebar { background: #1a1d27 !important; border-right: 1px solid rgba(255, 255, 255, 0.07) !important; } /* ── Body / Page background ─────────────────────────────────── */ [data-theme="dark"] body { background-color: #0f1117; color: #e2e8f0; } [data-theme="dark"] .rz-body { background: #0f1117 !important; } /* ── Cards ──────────────────────────────────────────────────── */ [data-theme="dark"] .rz-card { background: var(--rz-base-background-color) !important; border-color: rgba(255, 255, 255, 0.07) !important; color: #e2e8f0 !important; } /* ── Dialog (dark) ──────────────────────────────────────────── */ [data-theme="dark"] .rz-dialog-wrapper .rz-dialog { background: #1e2130 !important; color: #e2e8f0 !important; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important; } [data-theme="dark"] .rz-dialog-wrapper .rz-dialog-title { color: #e2e8f0 !important; } [data-theme="dark"] .rz-dialog-wrapper .rz-dialog-titlebar { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; background: #1e2130 !important; } [data-theme="dark"] .rz-dialog-wrapper .rz-dialog-content { background: #1e2130 !important; color: #e2e8f0 !important; } [data-theme="dark"] .rz-overlay-backdrop { background: rgba(0, 0, 0, 0.65) !important; } /* ── DataGrid (dark) ────────────────────────────────────────── */ [data-theme="dark"] .rz-data-grid .rz-grid-table th { color: rgba(255, 255, 255, 0.50) !important; background: #1e2130 !important; border-color: rgba(255, 255, 255, 0.07) !important; } [data-theme="dark"] .rz-data-grid, [data-theme="dark"] .rz-data-grid .rz-grid-table { background: #1a1d27 !important; border-color: rgba(255, 255, 255, 0.07) !important; } [data-theme="dark"] .rz-data-grid .rz-data-row td { border-color: rgba(255, 255, 255, 0.05) !important; color: #e2e8f0 !important; } [data-theme="dark"] .rz-data-grid .rz-data-row:hover td { background: #252838 !important; } [data-theme="dark"] .rz-data-grid .rz-data-row.rz-state-selected td { background: rgba(99, 102, 241, 0.18) !important; } [data-theme="dark"] .rz-data-grid-header, [data-theme="dark"] .rz-data-grid-footer { background: #1e2130 !important; border-color: rgba(255, 255, 255, 0.07) !important; color: #94a3b8 !important; } /* ── Panel Menu / Sidebar Nav (dark) ────────────────────────── */ [data-theme="dark"] .rz-panel-menu .rz-panel-menu-item-wrapper:hover { background: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .rz-panel-menu .rz-state-active > .rz-panel-menu-item-wrapper { background: rgba(99, 102, 241, 0.14) !important; } [data-theme="dark"] .rz-panel-menu .rz-navigation-item-text { color: #cbd5e1 !important; } [data-theme="dark"] .rz-panel-menu .rz-state-active .rz-navigation-item-text { color: var(--rz-primary) !important; } /* ── Dropdowns / Selects (dark) ─────────────────────────────── */ [data-theme="dark"] .rz-dropdown, [data-theme="dark"] .rz-dropdown-panel { background: #252838 !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #e2e8f0 !important; } [data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item { color: #e2e8f0 !important; } [data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item:hover, [data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight { background: rgba(99, 102, 241, 0.14) !important; color: var(--rz-primary) !important; } /* ── Form Inputs (dark) ─────────────────────────────────────── */ [data-theme="dark"] .rz-textbox, [data-theme="dark"] .rz-inputtext, [data-theme="dark"] .rz-textarea, [data-theme="dark"] .rz-numeric input, [data-theme="dark"] input.rz-inputtext, [data-theme="dark"] textarea.rz-inputtextarea { background: #252838 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #e2e8f0 !important; } [data-theme="dark"] .rz-textbox::placeholder, [data-theme="dark"] .rz-inputtext::placeholder, [data-theme="dark"] input.rz-inputtext::placeholder { color: #64748b !important; } [data-theme="dark"] .rz-textbox:focus, [data-theme="dark"] .rz-inputtext:focus, [data-theme="dark"] input.rz-inputtext:focus { border-color: var(--rz-primary) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important; } /* ── Tabs (dark) ────────────────────────────────────────────── */ [data-theme="dark"] .rz-tabview-nav { border-bottom-color: rgba(255, 255, 255, 0.09) !important; background: transparent !important; } [data-theme="dark"] .rz-tabview-nav li .rz-tabview-nav-link { color: #94a3b8 !important; } [data-theme="dark"] .rz-tabview-nav li.rz-state-active .rz-tabview-nav-link { color: var(--rz-primary) !important; border-bottom-color: var(--rz-primary) !important; background: transparent !important; } [data-theme="dark"] .rz-tabview-panels { background: transparent !important; } /* ── Checkboxes & Switches (dark) ───────────────────────────── */ [data-theme="dark"] .rz-checkbox .rz-checkbox-box { background: #252838 !important; border-color: rgba(255, 255, 255, 0.18) !important; } [data-theme="dark"] .rz-switch-body { background: #2d3148 !important; } /* ── Notifications / Toast (dark) ───────────────────────────── */ [data-theme="dark"] .rz-notification { background: #1e2130 !important; color: #e2e8f0 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important; } /* ── Tooltip (dark) ─────────────────────────────────────────── */ [data-theme="dark"] .rz-tooltip { background: #2d3148 !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; } /* ── Context menu (dark) ────────────────────────────────────── */ [data-theme="dark"] .rz-contextmenu, [data-theme="dark"] .rz-menu .rz-menu-list { background: #1e2130 !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important; } /* ── Splitter (dark) ────────────────────────────────────────── */ [data-theme="dark"] .rz-splitter-bar { background: rgba(255, 255, 255, 0.08) !important; } /* ── dlg-section cards (dark) ───────────────────────────────── */ [data-theme="dark"] .dlg-section { background: #252838 !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #e2e8f0 !important; } /* ── Scrollbars (dark) ──────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15) !important; } [data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03) !important; } /* ── DatePicker calendar button (dark) ────────────────────────── Actual Radzen HTML: class="rz-button rz-button-icon-only rz-variant-flat rz-base rz-shade-default" Radzen Material sets background on .rz-variant-flat.rz-base → white box in dark mode. ────────────────────────────────────────────────────────────── */ [data-theme="dark"] .rz-button.rz-variant-flat.rz-base, [data-theme="dark"] .rz-button.rz-variant-flat.rz-base.rz-shade-default, [data-theme="dark"] .rz-button.rz-variant-flat.rz-base.rz-button-icon-only { background-color: #252838 !important; background: #252838 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #94a3b8 !important; box-shadow: none !important; } [data-theme="dark"] .rz-button.rz-variant-flat.rz-base:hover, [data-theme="dark"] .rz-button.rz-variant-flat.rz-base.rz-shade-default:hover { background-color: #2d3148 !important; background: #2d3148 !important; color: #38bdf8 !important; } [data-theme="dark"] .rz-button.rz-variant-flat.rz-base .rzi, [data-theme="dark"] .rz-button.rz-variant-flat.rz-base .material-icons { color: #94a3b8 !important; } [data-theme="dark"] .rz-button.rz-variant-flat.rz-base:hover .rzi, [data-theme="dark"] .rz-button.rz-variant-flat.rz-base:hover .material-icons { color: #38bdf8 !important; } /* ═══════════════════════════════════════════════════════════════════════════ FAST ENTRY PANEL (.fe-*) Inline-editable article table with keyboard-driven navigation. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Panel container ──────────────────────────────────────────────────────── */ .fe-panel { display: flex; flex-direction: column; gap: 0.75rem; } /* ── Toolbar ──────────────────────────────────────────────────────────────── */ .fe-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .fe-search-wrapper { display: flex; align-items: center; flex: 1; max-width: 320px; } .fe-search-input { width: 100%; padding: 0.4rem 0.75rem; border: 1px solid var(--rz-base-300, rgba(0,0,0,0.15)); border-radius: 8px; font-size: 0.875rem; background: var(--rz-base-background-color, #fff); color: var(--rz-text-color, #1a1a2e); transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none; } .fe-search-input:focus { border-color: var(--rz-primary, #6366f1); box-shadow: 0 0 0 3px var(--rz-primary-lighter, rgba(99,102,241,0.14)); } /* ── Table wrapper (scrollable) ───────────────────────────────────────────── */ .fe-table-wrapper { overflow-x: auto; border: 1px solid var(--rz-base-300, rgba(0,0,0,0.10)); border-radius: 10px; } /* ── Table ────────────────────────────────────────────────────────────────── */ .fe-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } /* ── Column widths ────────────────────────────────────────────────────────── */ .fe-col-name { min-width: 200px; width: 28%; } .fe-col-dept { min-width: 130px; width: 14%; } .fe-col-cat { min-width: 120px; width: 12%; } .fe-col-spot { min-width: 120px; width: 12%; } .fe-col-price { min-width: 95px; width: 8%; } .fe-col-status { min-width: 80px; width: 8%; text-align: center; } .fe-col-actions{ min-width: 80px; width: 8%; text-align: center; } /* ── Header ───────────────────────────────────────────────────────────────── */ .fe-table thead tr { background: var(--rz-base-50, #fafafa); border-bottom: 2px solid var(--rz-base-300, rgba(0,0,0,0.10)); } .fe-table thead th { padding: 0.6rem 0.75rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; color: var(--rz-text-secondary-color, rgba(0,0,0,0.55)); text-transform: uppercase; white-space: nowrap; } /* ── Rows — base ──────────────────────────────────────────────────────────── */ .fe-table tbody .fe-row td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--rz-base-200, rgba(0,0,0,0.06)); vertical-align: middle; color: var(--rz-text-color, #1a1a2e); } /* ── Pristine row ─────────────────────────────────────────────────────────── */ .fe-row--pristine:hover td { background: var(--rz-base-50, #f8fafc); } .fe-row--inactive td { opacity: 0.55; } /* ── Editing / New row ────────────────────────────────────────────────────── */ .fe-row--editing td { background: var(--rz-primary-lighter, rgba(99,102,241,0.05)); padding-top: 0.35rem; padding-bottom: 0.35rem; } .fe-row--new td { background: var(--rz-success-lighter, rgba(34,197,94,0.06)); } /* ── Error row ────────────────────────────────────────────────────────────── */ .fe-row--error td { padding: 0.25rem 0.75rem; background: var(--rz-danger-lighter, rgba(239,68,68,0.07)); border-bottom: none; } .fe-error-text { display: flex; align-items: center; gap: 0.35rem; color: var(--rz-danger, #ef4444); font-size: 0.8rem; } .fe-error-icon { font-size: 1rem; } /* ── Inline inputs ────────────────────────────────────────────────────────── */ .fe-input.rz-textbox, .fe-input .rz-textbox, .fe-input.rz-dropdown, .fe-input .rz-dropdown { width: 100% !important; min-width: 0 !important; font-size: 0.875rem !important; height: 32px !important; padding: 0.25rem 0.5rem !important; border-radius: 6px !important; } /* RadzenNumeric wraps a plain input */ .fe-input--numeric input { width: 100% !important; min-width: 0 !important; font-size: 0.875rem !important; height: 32px !important; padding: 0.25rem 0.5rem !important; border-radius: 6px !important; text-align: right; } /* ── Price cells (read-only alignment) ───────────────────────────────────── */ .fe-cell-price { text-align: right; font-variant-numeric: tabular-nums; } /* ── Clickable status badge (toggle in edit mode) ────────────────────────── */ .fe-badge--clickable { cursor: pointer; user-select: none; transition: opacity 0.15s ease; } .fe-badge--clickable:hover { opacity: 0.8; } /* ── Empty state cell ─────────────────────────────────────────────────────── */ .fe-empty-cell { text-align: center; padding: 2rem 0 !important; } /* ── Keyboard hint bar ────────────────────────────────────────────────────── */ .fe-hint { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--rz-text-secondary-color, rgba(0,0,0,0.45)); padding: 0 0.25rem; } .fe-hint kbd { display: inline-block; padding: 0.1rem 0.35rem; border: 1px solid var(--rz-base-400, rgba(0,0,0,0.20)); border-radius: 4px; font-size: 0.73rem; background: var(--rz-base-50, #f5f5f5); color: var(--rz-text-color, #333); font-family: monospace; line-height: 1.4; } /* ── Name cell truncation ─────────────────────────────────────────────────── */ .fe-cell-name { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════════ FAST ENTRY — DARK MODE ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .fe-search-input { background: #252838 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #e2e8f0 !important; } [data-theme="dark"] .fe-search-input:focus { border-color: var(--rz-primary) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important; } [data-theme="dark"] .fe-search-input::placeholder { color: #64748b !important; } [data-theme="dark"] .fe-table-wrapper { border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .fe-table thead tr { background: #1e2130 !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .fe-table thead th { color: rgba(255, 255, 255, 0.45) !important; } [data-theme="dark"] .fe-table tbody .fe-row td { border-bottom-color: rgba(255, 255, 255, 0.05) !important; color: #e2e8f0 !important; } [data-theme="dark"] .fe-row--pristine:hover td { background: #252838 !important; } [data-theme="dark"] .fe-row--editing td { background: rgba(99, 102, 241, 0.08) !important; } [data-theme="dark"] .fe-row--new td { background: rgba(34, 197, 94, 0.07) !important; } [data-theme="dark"] .fe-row--error td { background: rgba(239, 68, 68, 0.10) !important; } [data-theme="dark"] .fe-hint { color: rgba(255, 255, 255, 0.35) !important; } [data-theme="dark"] .fe-hint kbd { background: #252838 !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #cbd5e1 !important; } /* ═══════════════════════════════════════════════════════════════════════════ Fast Entry — Modifier chip widget (.fe-chip-*) Used in CategoryFastEntryPanel for inline modifier assignment. ═══════════════════════════════════════════════════════════════════════════ */ .fe-chip-group { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; } .fe-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; line-height: 1.4; cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s, border-color 0.15s; border: 1px solid var(--rz-border-color); background: transparent; color: var(--rz-text-secondary-color); white-space: nowrap; } .fe-chip:hover { border-color: var(--rz-primary); color: var(--rz-primary); } .fe-chip--selected { background: var(--rz-primary); border-color: var(--rz-primary); color: #fff; } .fe-chip--selected:hover { background: var(--rz-primary-dark, color-mix(in srgb, var(--rz-primary) 85%, black)); color: #fff; } /* Read-only chips shown in pristine rows */ .fe-chip--readonly { cursor: default; pointer-events: none; } /* Overflow counter chip (+N) */ .fe-chip--overflow { cursor: default; pointer-events: none; border-color: var(--rz-secondary); color: var(--rz-text-secondary-color); font-size: 0.7rem; } /* Disabled state while saving */ .fe-chip-group--disabled .fe-chip { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Column width for the Extra chips column */ .fe-col-mods { min-width: 200px; } /* ── Dark mode overrides ── */ [data-theme="dark"] .fe-chip { border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .fe-chip:hover { border-color: var(--rz-primary); color: var(--rz-primary); } [data-theme="dark"] .fe-chip--selected { background: var(--rz-primary); border-color: var(--rz-primary); color: #fff; } [data-theme="dark"] .fe-chip--overflow { border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.4); } /* ═══════════════════════════════════════════════════════════════ Customer Assignment page ═══════════════════════════════════════════════════════════════ */ .assignment-panel { padding: 0; overflow: hidden; } .assignment-list { max-height: 210px; overflow-y: auto; padding: 0.25rem 0; } .assignment-list-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; cursor: pointer; transition: background 0.12s ease; font-size: 0.82rem; } .assignment-list-item:hover { background: var(--rz-base-background-color, rgba(0,0,0,0.04)); } .assignment-list-item.selected { background: color-mix(in srgb, var(--rz-primary) 10%, transparent); } .assignment-list-item.selected:hover { background: color-mix(in srgb, var(--rz-primary) 16%, transparent); } .assignment-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .assignment-price-badge { font-size: 0.7rem !important; padding: 1px 6px !important; flex-shrink: 0; } .assignment-preview-card { background: var(--rz-base-background-color, rgba(0,0,0,0.02)); border: 1px dashed var(--rz-border-disabled-color); height: 100%; } .preview-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; } .assignment-printer-card { text-align: center; height: 100%; } .routing-preview-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; } .route-row { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; font-size: 0.78rem; } @media (max-width: 767px) { .assignment-actions-col { display: flex; justify-content: center; } } [data-theme="dark"] .assignment-list-item:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .assignment-list-item.selected { background: color-mix(in srgb, var(--rz-primary) 18%, transparent); } [data-theme="dark"] .assignment-preview-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.12); } /* ── Clear / remove option in assignment lists ─────────────────── */ .assignment-list-item.clear-option { border-bottom: 1px dashed var(--rz-border-disabled-color); margin-bottom: 2px; } .assignment-list-item.clear-option .clear-label { color: var(--rz-warning-dark); font-style: italic; } .assignment-list-item.clear-option .rz-icon { color: var(--rz-warning-dark); } .assignment-list-item.clear-option.selected { background: color-mix(in srgb, var(--rz-warning) 12%, transparent) !important; border-color: var(--rz-warning-dark) !important; } /* ── Current assignments (inline remove) ───────────────────────── */ .current-assignments-table { border: 1px solid var(--rz-border-disabled-color); border-radius: 6px; padding: 0.25rem 0.75rem; background: var(--rz-base-background-color); } .current-assignment-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rz-border-disabled-color); flex-wrap: wrap; } .current-assignment-row:last-child { border-bottom: none; } .removable-tag { display: inline-flex; align-items: center; gap: 0.1rem; background: var(--rz-base-200); border: 1px solid var(--rz-border-disabled-color); border-radius: 4px; padding: 0.1rem 0.15rem 0.1rem 0.45rem; font-size: 0.78rem; line-height: 1.3; } [data-theme="dark"] .current-assignments-table { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .current-assignment-row { border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .removable-tag { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }